/* ============ SPUDLIKE styles ============ */
:root{
  --bg:#141210;
  --panel:#26211b;
  --panel-edge:#4d4336;
  --ink:#f0e8d8;
  --dim:#b5a98f;
  --green:#86c14a;
  --green-dark:#5d8d2e;
  --red:#e25b4a;
  --mat:#5ad06e;
  --r0:#9aa0a6; --r1:#4aa5ff; --r2:#c77dff; --r3:#ff5a5a;
}
*{box-sizing:border-box; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);
  overscroll-behavior:none;}
canvas#game{position:fixed;inset:0;display:block;touch-action:none;}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.42) 100%);}

.hidden{display:none !important;}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;}
#hud-topleft{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:6px;}
.bar{position:relative;width:250px;height:24px;background:#241e16;border:2px solid #1a1410;
  border-radius:7px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.4);}
.bar::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(0,0,0,.16) 12px 14px);}
.bar.xp{width:200px;height:16px;}
.bar>div{position:absolute;inset:0;width:50%;transition:width .12s ease-out;}
#hpfill{background:#5fae3c;}
#hpfill.low{background:#c84a3a;}
#xpfill{background:#3f9fae;}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,.8);}
#matrow{font-size:20px;font-weight:bold;text-shadow:0 2px 2px rgba(0,0,0,.7);display:flex;gap:7px;align-items:center;}
.mat-ico{color:var(--mat);}
#cratetext{font-size:15px;color:#d8b36a;}
#hud-topcenter{position:absolute;top:10px;left:50%;transform:translateX(-50%);text-align:center;}
#wavetext{font-size:19px;font-weight:bold;letter-spacing:2px;color:#d8cdb4;text-shadow:0 2px 2px rgba(0,0,0,.7);}
#timertext{font-size:40px;font-weight:bold;text-shadow:0 3px 3px rgba(0,0,0,.7);}
#bossbar{position:absolute;top:86px;left:50%;transform:translateX(-50%);width:440px;height:20px;
  background:#241114;border:2px solid #1a1410;border-radius:7px;overflow:hidden;}
#bossbar::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(0,0,0,.16) 12px 14px);}
#bossfill{position:absolute;inset:0;background:#c84a3a;width:100%;transition:width .15s;}
#bossbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:bold;letter-spacing:3px;text-shadow:0 1px 2px #000;}

#mutebtn{position:fixed;top:12px;right:12px;z-index:30;background:#2a241d;border:2px solid #0b0907;
  color:var(--ink);border-radius:8px;font-size:17px;width:42px;height:38px;cursor:pointer;}
#mutebtn:hover{background:#3a3328;}
#pausebtn{position:fixed;top:12px;right:62px;z-index:30;background:#2a241d;border:2px solid #0b0907;
  color:var(--ink);border-radius:8px;font-size:14px;width:42px;height:38px;cursor:pointer;}
#pausebtn:hover{background:#3a3328;}

/* ============ Screens ============ */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:18px;background:rgba(8,6,4,.74);padding:18px;overflow:auto;}
/* center content when it fits, but stay scrollable from the very top when it
   overflows (plain justify-content:center pushes the top off-screen) */
.screen > :first-child{margin-top:auto;}
.screen > :last-child{margin-bottom:auto;}
#screen-menu{background:rgba(8,6,4,.55);}
h1{font-size:74px;margin:0;letter-spacing:8px;color:#f4d97c;
  text-shadow:0 4px 0 #7a5b1e, 0 8px 18px rgba(0,0,0,.7);}
.dead-title{color:#e25b4a;text-shadow:0 4px 0 #6d1d12,0 8px 18px rgba(0,0,0,.7);}
.win-title{color:#86c14a;text-shadow:0 4px 0 #3c641a,0 8px 18px rgba(0,0,0,.7);}
.title-wrap{text-align:center;}
.subtitle{color:var(--dim);font-size:17px;letter-spacing:2px;margin-top:4px;}
h2{margin:0;font-size:30px;letter-spacing:3px;color:#f0e8d8;text-shadow:0 2px 0 rgba(0,0,0,.6);}
.sub{color:var(--dim);font-size:15px;text-align:center;}

.panel{background:var(--panel);border:3px solid var(--panel-edge);border-radius:16px;
  padding:24px 30px;box-shadow:0 10px 30px rgba(0,0,0,.55);display:flex;flex-direction:column;
  gap:16px;align-items:center;max-width:min(1100px,96vw);}
.menu-panel{min-width:360px;}
.help{font-size:14.5px;line-height:1.65;color:var(--dim);text-align:center;}
.help b{color:var(--ink);}
.matcol{color:var(--mat);font-weight:bold;}
.best{color:#f4d97c;font-weight:bold;font-size:15px;}
.buildtag{color:#6f6552;font-size:11.5px;letter-spacing:1px;}

.btn{font-family:inherit;font-size:17px;font-weight:bold;letter-spacing:1px;color:#fff;
  background:var(--green);border:0;border-bottom:4px solid var(--green-dark);border-radius:10px;
  padding:11px 26px;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn:active{transform:translateY(2px);border-bottom-width:2px;}
.btn.big{font-size:22px;padding:14px 40px;}
.btn.small{font-size:14px;padding:8px 14px;}
.btn.secondary{background:#5a5142;border-bottom-color:#393327;}
.btn.danger{background:#c0503f;border-bottom-color:#7c2c1f;}
.btn:disabled{opacity:.38;cursor:default;filter:none;transform:none;}
.row-gap{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* settings toggles */
.toggles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.toggle{font-family:inherit;font-size:12.5px;font-weight:bold;letter-spacing:1px;
  background:#221d16;color:#6f6552;border:2px solid #4d4336;border-radius:8px;
  padding:7px 11px;cursor:pointer;}
.toggle.on{color:#cfe8a8;border-color:var(--green-dark);background:#2c3320;}
.toggle:hover{filter:brightness(1.15);}

/* danger picker */
.danger-wrap{display:flex;flex-direction:column;gap:6px;align-items:center;}
.danger-row{display:flex;gap:8px;}
.dbtn{font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:#221d16;border:2px solid #4d4336;color:var(--ink);border-radius:9px;
  font-size:15px;padding:6px 13px;cursor:pointer;}
.dbtn span{font-size:10.5px;font-weight:bold;letter-spacing:1px;color:var(--dim);}
.dbtn.sel{border-color:#e25b4a;background:#33201b;}
.dbtn.sel span{color:#ff9d8a;}
.dbtn:hover{filter:brightness(1.2);}

/* ============ Cards ============ */
.cards-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:1100px;}
.card{width:196px;background:#2e2820;border:3px solid #5a5142;border-radius:12px;padding:13px 13px 15px;
  display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;position:relative;}
.card.clickable{cursor:pointer;transition:transform .08s;}
.card.clickable:hover{transform:translateY(-4px) scale(1.02);border-color:var(--green);}
.card .em{font-size:44px;line-height:1.1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));}
img.em{width:52px;height:52px;object-fit:contain;image-rendering:auto;}
img.em.chipico{width:19px;height:19px;}
img.statico{width:13px;height:13px;margin-right:6px;vertical-align:-2px;opacity:.95;}
img.btnico{width:20px;height:20px;vertical-align:middle;}
img.inline-ico{width:18px;height:18px;vertical-align:-4px;}
img.tgico{width:14px;height:14px;vertical-align:-2.5px;margin-right:4px;}
img.lockico{width:15px;height:15px;vertical-align:middle;}
img.dico{width:15px;height:15px;}
.dbtn .drow{display:flex;gap:1px;justify-content:center;}
.card h3{margin:0;font-size:17px;}
.card .desc{font-size:12.5px;color:var(--dim);line-height:1.4;}
.card .tag{font-size:11px;letter-spacing:1px;font-weight:bold;color:var(--dim);text-transform:uppercase;}
.classtags{font-size:11px;letter-spacing:1px;font-weight:bold;text-transform:uppercase;}
.statline{font-size:13px;font-weight:bold;}
.statline.good{color:#9ad36a;}
.statline.bad{color:#e88575;}
.card.r0{border-color:var(--r0);} .card.r1{border-color:var(--r1);}
.card.r2{border-color:var(--r2);} .card.r3{border-color:var(--r3);}
.rname.r0{color:var(--r0);} .rname.r1{color:var(--r1);}
.rname.r2{color:var(--r2);} .rname.r3{color:var(--r3);}
.price{margin-top:auto;font-size:16px;font-weight:bold;color:var(--mat);}
.price.cant{color:#e25b4a;}

/* ============ Shop ============ */
.shop-panel{width:min(1100px,96vw);}
.shop-head{display:flex;align-items:center;gap:18px;width:100%;flex-wrap:wrap;}
.shop-head h2{margin-right:auto;font-size:24px;}
.shop-mats{font-size:25px;font-weight:bold;display:flex;gap:7px;align-items:center;}
.shop-mats .mat-ico{font-size:21px;}
.harvest{font-size:13.5px;color:var(--mat);}
.shop-body{display:flex;gap:18px;width:100%;align-items:flex-start;}
.shop-main{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0;}
.shop-side{width:235px;flex-shrink:0;background:#221d16;border:2px solid #4d4336;
  border-radius:12px;padding:12px 14px;}
.offers{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;width:100%;}
.offers .card{width:182px;min-height:235px;}
.offer-buy{width:100%;}
.lockbtn{position:absolute;top:6px;right:6px;background:#1d1812;border:2px solid #4d4336;color:#cfc4a8;
  border-radius:7px;font-size:13px;width:30px;height:28px;cursor:pointer;padding:0;}
.lockbtn.locked{background:#6d5a23;border-color:#a8893a;color:#ffe9a8;}
.card.soldout{opacity:.35;pointer-events:none;}
.sold-stamp{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);
  font-size:26px;font-weight:bold;color:#e25b4a;border:3px solid #e25b4a;border-radius:8px;padding:2px 12px;}
.own-block{width:100%;}
.own-label{font-size:12px;font-weight:bold;letter-spacing:2px;color:var(--dim);margin-bottom:6px;}
.dim{color:var(--dim);font-weight:normal;}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-height:30px;}
.chip{background:#221d16;border:2px solid #4d4336;border-radius:9px;padding:6px 10px;font-size:13.5px;
  display:flex;gap:8px;align-items:center;}
.chip .em{font-size:17px;}
.chip button{background:#3a3328;color:#e8dfc8;border:1px solid #5a5142;border-radius:6px;
  font-size:11.5px;cursor:pointer;padding:3px 8px;font-weight:bold;}
.chip button:hover{background:#4d4436;}
.chip button:disabled{opacity:.4;cursor:default;}
.chip button.combine{background:#3d5a23;border-color:#6f9c3f;}
.chip .tier{font-weight:bold;}
.btn.go{margin-top:4px;background:#d8a23a;border-bottom-color:#8d6314;}

.sets{display:flex;flex-direction:column;gap:4px;font-size:12.5px;}
.setline .good{color:#9ad36a;}

/* ============ Pause ============ */
.pause-panel{width:min(900px,94vw);}
.pause-cols{display:flex;gap:30px;width:100%;flex-wrap:wrap;}
.pause-cols>div{flex:1;min-width:280px;}
.stat-table{display:grid;grid-template-columns:1fr auto;gap:3px 16px;font-size:14.5px;}
.stat-table.small{font-size:12.5px;gap:2px 10px;}
.stat-table .sname{color:var(--dim);}
.stat-table .sval{font-weight:bold;text-align:right;}
.stat-table .sval.good{color:#9ad36a;}
.stat-table .sval.bad{color:#e88575;}

.endstats{display:grid;grid-template-columns:auto auto;gap:6px 26px;font-size:17px;}
.endstats .k{color:var(--dim);}
.endstats .v{font-weight:bold;text-align:right;}

@media (max-width:860px){
  .shop-body{flex-direction:column;}
  .shop-side{width:100%;}
}
@media (max-width:720px){
  h1{font-size:46px;}
  .card{width:160px;}
  .offers .card{width:160px;min-height:215px;}
  .bar{width:190px;}
}
@media (max-width:480px){
  h1{font-size:38px;letter-spacing:4px;}
  .bar{width:140px;height:20px;}
  .bar.xp{width:110px;height:13px;}
  .bar span{font-size:11px;}
  #matrow{font-size:16px;}
  #wavetext{font-size:14px;}
  #timertext{font-size:30px;}
  #bossbar{width:78vw;top:72px;}
  .panel{padding:16px 14px;}
  .card{width:46%;min-width:140px;}
  .offers .card{width:46%;min-width:140px;min-height:200px;}
  .endstats{font-size:14.5px;}
}