/* ============================================================
   CROPOLIS — UI. Lively rounded type (Baloo 2 + Fredoka),
   soft cards over a live pixel map. Theme: amber + meadow green.
   ============================================================ */
:root{
  --font-ui:'Fredoka',system-ui,sans-serif;
  --font-display:'Baloo 2','Fredoka',system-ui,sans-serif;
  --font-title:'Cinzel',serif;
  --ink:#1b2422; --cream:#f7efe2; --cream2:#d6cdbe;
  --g:#6cc04a; --g2:#46913a; --g3:#2f6f28;
  --gold:#ffd23e; --gold2:#e0a81c;
  --a:#18b4a4; --a2:#0f9a8c; --a3:#0c7468;
  --bg:#12110f;
  --card:rgba(36,32,28,.85); --card2:rgba(24,21,18,.93);
  --bad:#ff8a4d; --good:#86d85f; --info:#18b4a4;
  --r:16px; --r2:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);}
body{font-family:var(--font-ui);color:var(--cream);-webkit-text-size-adjust:100%;user-select:none;}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;}
b{font-weight:700}
[hidden]{display:none !important;}

.screen{position:fixed;inset:0;display:none;}
.screen.active{display:block;}

/* ======================= BUTTONS ========================= */
.btn{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  color:var(--cream);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:.7em 1.1em;cursor:pointer;line-height:1;
  transition:transform .08s ease, background .15s, box-shadow .15s, filter .15s;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14);}
.btn:active{transform:translateY(1px);}
.btn-primary{
  color:#fff;background:linear-gradient(180deg,#36d3c2,var(--a));
  border:1px solid #5fe3d5;box-shadow:0 8px 22px rgba(24,180,164,.42);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  font-size:1.25rem;padding:.82em 1.2em;letter-spacing:.01em;
}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{background:rgba(34,30,25,.55);border:1px solid rgba(255,255,255,.12);}
.btn-ghost:hover{background:rgba(58,52,44,.8);}

/* ======================= MAIN MENU ======================= */
#menu-canvas{position:absolute;inset:0;width:100%;height:100%;}
.menu-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(8,16,6,.12), rgba(8,16,6,.7) 80%),
    linear-gradient(180deg, rgba(8,16,6,.5), rgba(8,16,6,.28) 32%, rgba(8,16,6,.66));
}
.menu-mute{
  position:absolute;top:16px;right:18px;z-index:5;
  width:42px;height:42px;border-radius:50%;font-size:1.1rem;color:var(--cream);
  background:rgba(34,30,25,.6);border:1px solid rgba(255,255,255,.14);cursor:pointer;
  backdrop-filter:blur(4px);
}
.menu-mute:hover{background:rgba(58,52,44,.85);}
/* muted state — keep the ♪ centred, cross it with a clean diagonal line */
[data-act="mute"]{position:relative;}
.menu-mute.muted,[data-act="mute"].muted{opacity:.62;}
.menu-mute.muted::after,[data-act="mute"].muted::after{content:'';position:absolute;left:50%;top:50%;
  width:58%;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none;}
.menu-wrap{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.2em;padding:5vh 20px;text-align:center;
}
.menu-title{display:flex;flex-direction:column;align-items:center;line-height:.92;}
.mt-kicker{
  font-family:var(--font-display);font-weight:600;font-size:clamp(.8rem,1.8vw,1.05rem);
  letter-spacing:.42em;color:var(--cream);text-indent:.42em;opacity:.85;
  text-shadow:0 2px 8px rgba(0,0,0,.6);margin-bottom:.25em;
}
.mt-main{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3.1rem,10vw,7rem);letter-spacing:.012em;line-height:1;
  background:linear-gradient(180deg,#8feade 0%,#22c2b1 50%,#0f9a8c 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.45));
}
.menu-lead{
  max-width:560px;margin:1.1em auto 0;font-size:clamp(.98rem,2vw,1.15rem);
  color:#e8e3cd;line-height:1.45;text-shadow:0 2px 10px rgba(0,0,0,.7);opacity:.95;
}
.menu-card{
  margin-top:1.6em;width:min(440px,92vw);
  background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);
  box-shadow:0 24px 60px rgba(0,0,0,.5);backdrop-filter:blur(8px);
  padding:1.3em 1.3em 1.15em;display:flex;flex-direction:column;gap:.85em;
}
.menu-card .btn-primary{width:100%;}
.menu-card-row{display:flex;gap:.6em;}
.menu-card-row .btn{flex:1;font-size:.9rem;padding:.7em .4em;}
.menu-link{
  font-family:var(--font-display);font-weight:700;color:var(--a);
  text-decoration:none;font-size:1rem;margin-top:.15em;transition:filter .15s,transform .1s;
}
.menu-link:hover{filter:brightness(1.12);transform:translateX(2px);}
.menu-note{font-size:.84rem;color:#bcc4ac;opacity:.85;line-height:1.35;}
.menu-bottom{margin-top:1.3em;display:flex;gap:.7em;align-items:center;flex-wrap:wrap;justify-content:center;}
.ca-pill{
  display:inline-flex;align-items:center;gap:.55em;cursor:pointer;
  background:rgba(34,30,25,.6);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:.5em .55em .5em .9em;color:var(--cream);font-size:.85rem;
}
.ca-pill:hover{background:rgba(58,52,44,.85);}
.ca-k{color:var(--gold);font-weight:600;}
.ca-v{opacity:.8;font-family:var(--font-display);}
.ca-copy{background:var(--gold);color:#3a2a06;font-weight:700;border-radius:999px;padding:.25em .7em;font-size:.78rem;}
.follow-btn{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  background:rgba(34,30,25,.6);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:.55em 1em;color:var(--cream);font-weight:600;font-size:.88rem;
}
.follow-btn:hover{background:rgba(58,52,44,.85);}

/* ======================= OVERLAYS / MODALS =============== */
.overlay{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(6,12,5,.6);backdrop-filter:blur(3px);padding:16px;
}
.ov-x{
  width:2em;height:2em;border-radius:10px;cursor:pointer;font-size:.9rem;
  background:rgba(226,103,79,.9);color:#fff;border:1px solid rgba(0,0,0,.2);
}
.ov-x:hover{filter:brightness(1.1);}

/* character builder */
.builder-card{
  width:min(760px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:var(--card2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);
  box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;
}
.builder-head,.panel-head{
  display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  background:linear-gradient(180deg,rgba(24,180,164,.42),rgba(24,180,164,.14));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.builder-body{display:flex;gap:18px;padding:18px;overflow:auto;}
@media(max-width:620px){.builder-body{flex-direction:column;align-items:center;}}
.builder-preview{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
}
#builder-canvas{
  width:200px;height:280px;border-radius:18px;
  background:radial-gradient(120% 90% at 50% 30%,#3a5e5a,#1a2422);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 -20px 40px rgba(0,0,0,.3);
}
.builder-rotate{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--cream2);}
.mini{
  width:30px;height:30px;border-radius:9px;cursor:pointer;color:var(--cream);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.8rem;
}
.mini:hover{background:rgba(255,255,255,.16);}
.builder-controls{flex:1;display:flex;flex-direction:column;gap:14px;min-width:240px;}
.ctl-row{display:flex;flex-direction:column;gap:7px;}
.ctl-label{font-family:var(--font-display);font-weight:600;font-size:.82rem;letter-spacing:.04em;color:#cdd6bd;text-transform:uppercase;}
.swatches{display:flex;flex-wrap:wrap;gap:7px;}
.swatch{
  width:30px;height:30px;border-radius:9px;cursor:pointer;
  border:2px solid rgba(0,0,0,.35);box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform .08s;
}
.swatch:hover{transform:scale(1.08);}
.swatch.sel{outline:3px solid var(--a);outline-offset:1px;}
.seg{display:flex;gap:7px;flex-wrap:wrap;}
.seg-btn{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--cream);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:.5em .9em;cursor:pointer;text-transform:capitalize;transition:background .12s,transform .08s;
}
.seg-btn:hover{background:rgba(255,255,255,.14);}
.seg-btn.sel{background:var(--a);color:#fff;border-color:#5fe3d5;}
.builder-foot{
  display:flex;justify-content:space-between;gap:12px;padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.08);background:rgba(34,30,25,.4);
}

/* character builder — tabs + premium skin store */
.builder-right{flex:1;display:flex;flex-direction:column;min-width:240px;}
.builder-tabs{display:flex;gap:8px;margin-bottom:14px;}
.btab{flex:1;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--cream);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.6em .4em;cursor:pointer;transition:background .12s;}
.btab:hover{background:rgba(255,255,255,.13);}
.btab.sel{background:var(--a);color:#fff;border-color:#5fe3d5;}
.btab-store{background:linear-gradient(180deg,#ffe49a,#f0b429);color:#5a3a06;border-color:#ffd23e;box-shadow:0 4px 14px rgba(240,180,41,.3);}
.btab-store.sel{background:linear-gradient(180deg,#ffd24a,#e0951c);color:#3a2606;}
.skin-store{flex:1;}
.store-head{margin-bottom:12px;}
.store-title{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--gold);}
.store-sub{font-size:.82rem;color:var(--cream2);opacity:.85;line-height:1.35;margin-top:2px;}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;}
.skin-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 8px 8px;cursor:pointer;
  transition:transform .08s,border-color .12s,background .12s;}
.skin-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);}
.skin-card.sel{border-color:var(--a);box-shadow:0 0 0 2px rgba(24,180,164,.4);}
.skin-thumb{width:56px;height:72px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 28%,#3a4e6a,#191f2e);border-radius:10px;}
.skin-thumb canvas{image-rendering:pixelated;}
.skin-name{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--cream);text-align:center;line-height:1.05;}
.skin-meta{display:flex;align-items:center;gap:6px;font-size:.74rem;}
.skin-rar{font-weight:600;}
.skin-price{font-family:var(--font-display);font-weight:800;color:var(--gold);}
.skin-get{width:100%;font-family:var(--font-display);font-weight:700;font-size:.78rem;color:#08312c;
  background:linear-gradient(180deg,#5fe3d5,var(--a));border:none;border-radius:9px;padding:.5em;cursor:pointer;margin-top:2px;}
.skin-get:hover{filter:brightness(1.06);}
.skin-get.owned{background:rgba(255,255,255,.12);color:var(--cream);}
.skin-lim{position:absolute;top:-6px;right:-4px;z-index:2;font-family:var(--font-display);font-weight:800;font-size:.6rem;
  color:#3a2606;background:linear-gradient(180deg,#ffe066,#f0b429);border:1px solid #fff3b0;border-radius:6px;padding:1px 5px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);transform:rotate(6deg);}
.skin-card.r-common .skin-rar{color:#b8c0c8;}
.skin-card.r-rare .skin-rar{color:#5fb0ff;}
.skin-card.r-epic .skin-rar{color:#c285ff;}
.skin-card.r-legendary .skin-rar{color:#ffbe3d;}
.skin-card.r-legendary{border-color:rgba(255,190,61,.4);}
.skin-card.r-epic{border-color:rgba(194,133,255,.32);}
@media(max-width:620px){.builder-right{min-width:0;width:100%;}}

/* ======================= GAME / HUD ====================== */
#game{background:#0c1408;}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;}
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:12px 14px;pointer-events:none;z-index:5;gap:8px;}
.hud-left,.hud-right{display:flex;gap:8px;pointer-events:auto;}
.hud-chip{
  display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.3);padding:7px 12px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--cream);backdrop-filter:blur(4px);
}
.hud-ic{font-size:1rem;line-height:1;}
.hud-ic.coin{color:var(--gold);}
.hud-btn{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--cream);
  background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);padding:8px 12px;cursor:pointer;backdrop-filter:blur(4px);
}
.hud-btn:hover{background:rgba(60,54,46,.85);}
.hud-btn:active{transform:translateY(1px);}

.hotbar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:5;}
.slot{
  position:relative;width:56px;height:56px;background:var(--card);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.35);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .08s;backdrop-filter:blur(4px);
}
.slot:hover{border-color:rgba(255,255,255,.25);}
.slot.sel{background:rgba(24,180,164,.45);border-color:var(--a);transform:translateY(-5px);box-shadow:0 10px 22px rgba(0,0,0,.4);}
.slot-ic{image-rendering:pixelated;}
.slot-num{position:absolute;top:3px;left:6px;font-family:var(--font-display);font-weight:600;font-size:.62rem;color:var(--cream2);opacity:.85;}
.slot-cnt{position:absolute;bottom:2px;right:6px;font-family:var(--font-display);font-weight:700;font-size:.66rem;color:var(--gold);}
.slot.has-cnt .slot-cnt::before{content:'×';}
.ghint{display:none;}

/* shop entry prompt — highlighted, pulses, click to open */
.shopprompt{
  position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:6;cursor:pointer;
  display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;
  color:#08312c;background:linear-gradient(180deg,#5fe3d5,var(--a));
  border:2px solid #aef4ec;border-radius:999px;padding:.55em 1.1em .55em .6em;
  box-shadow:0 6px 20px rgba(24,180,164,.5);animation:spPulse 1.1s ease-in-out infinite;
}
.shopprompt:hover{filter:brightness(1.06);}
.shopprompt:active{transform:translateX(-50%) translateY(2px);}
.sp-key{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;
  background:#08312c;color:#aef4ec;border-radius:50%;font-size:.8rem;}
.sp-name{font-size:1rem;}
.sp-go{font-size:.78rem;opacity:.75;}
@keyframes spPulse{50%{box-shadow:0 6px 28px rgba(24,180,164,.85);transform:translateX(-50%) translateY(-2px);}}

/* notifications */
.notes{position:absolute;top:64px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:6;width:min(290px,74vw);}
.note{
  display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(255,255,255,.1);
  border-left:5px solid var(--info);border-radius:13px;box-shadow:0 6px 18px rgba(0,0,0,.35);
  padding:9px 13px;font-size:.96rem;color:var(--cream);backdrop-filter:blur(5px);
  transform:translateX(120%);opacity:0;transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .3s;
}
.note.in{transform:translateX(0);opacity:1;}
.note.out{transform:translateX(120%);opacity:0;}
.note-good{border-left-color:var(--good);}
.note-bad{border-left-color:var(--bad);}
.note-info{border-left-color:var(--info);}
.note-ic{font-size:1.05rem;}
.note-tx{font-weight:500;line-height:1.15;}

.fishbite{
  position:absolute;z-index:6;transform:translate(-50%,-50%);font-family:var(--font-display);font-weight:800;
  font-size:1.5rem;width:1.7em;height:1.7em;display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--ink);border-radius:50% 50% 50% 4px;box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.fishbite.wait{color:var(--g3);}
.fishbite.bite{color:var(--bad);animation:pop .25s ease-in-out infinite;}
@keyframes pop{50%{transform:translate(-50%,-50%) scale(1.22);}}

/* shop / bag / help panels */
.panel-card{
  width:min(440px,94vw);max-height:84vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.help-card{width:min(540px,94vw);}
.panel-body{padding:16px;overflow:auto;}
.shop-coins{font-family:var(--font-display);font-weight:700;font-size:1rem;margin-bottom:12px;color:var(--gold);}
.shop-sec{font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.1em;color:var(--g);margin:14px 0 8px;text-transform:uppercase;}
.shop-grid{display:flex;flex-direction:column;gap:7px;}
.shop-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 12px;}
.sr-name{font-size:.98rem;}
.sr-price{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--gold);}
.sr-btn{font-family:var(--font-display);font-weight:700;font-size:.78rem;color:#fff;background:var(--a);border:none;border-radius:9px;padding:.5em .9em;cursor:pointer;}
.sr-btn:hover{filter:brightness(1.06);}
.sr-btn.sell{background:var(--good);}
.shop-empty{font-size:.92rem;color:var(--cream2);opacity:.8;padding:8px 2px;}
.up-hint{font-size:.82rem;color:var(--cream2);opacity:.82;margin-top:5px;padding:0 2px;}
.sr-btn[disabled]{opacity:.5;cursor:default;}
.sr-btn.up{background:linear-gradient(180deg,#5fe3d5,var(--a));color:#08312c;}
.bag-hint{margin-top:12px;font-size:.86rem;color:var(--cream2);opacity:.8;}

/* inventory grid (20 slots) */
.inv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.inv-cell{position:relative;aspect-ratio:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:11px;display:flex;align-items:center;justify-content:center;}
.inv-cell.empty{background:rgba(0,0,0,.18);border-style:dashed;border-color:rgba(255,255,255,.06);}
.inv-cell[data-src]{cursor:grab;}
.inv-cell[data-src]:hover{border-color:var(--a);}
.inv-cell[data-src]:active{cursor:grabbing;}
.inv-cell.dragging{opacity:.35;}
.inv-grid.dragover,.inv-cell.dragover{outline:2px dashed var(--a);outline-offset:-2px;background:rgba(24,180,164,.14);}
.inv-ic-cv{pointer-events:none;}
.inv-cnt{pointer-events:none;}
.bag-sec{font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.16em;color:var(--g);margin:14px 0 8px;text-transform:uppercase;}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-width:60%;}
/* full hotbar shown in the transfer panel (tools + item slots) */
.hot-strip{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;}
.hot-cell .hot-n{position:absolute;top:2px;left:4px;font-family:var(--font-display);font-weight:600;font-size:.55rem;color:var(--cream2);opacity:.7;pointer-events:none;}
.hot-cell.sel{outline:2px solid var(--a);outline-offset:-2px;background:rgba(24,180,164,.16);}
.hot-tool{cursor:default;background:rgba(255,255,255,.035);}
.hot-tool .inv-ic-cv{opacity:.9;}
.inv-ic{width:58%;height:58%;border-radius:6px;border:2px solid rgba(0,0,0,.35);box-shadow:0 2px 5px rgba(0,0,0,.3);}
.inv-ic-cv{width:66%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.inv-cnt{position:absolute;bottom:3px;right:5px;font-family:var(--font-display);font-weight:700;font-size:.72rem;color:var(--gold);text-shadow:0 1px 0 #000;}
.sr-dot{width:13px;height:13px;border-radius:4px;border:1px solid rgba(0,0,0,.35);flex:0 0 auto;}
.sr-ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:8px;}
.sr-ic-cv{width:24px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.shop-row{grid-template-columns:auto 1fr auto auto;}

/* empty slots stay fully visible & available (just a dashed outline) */
.slot.empty{opacity:1;cursor:default;background:rgba(36,32,28,.7);border-style:dashed;border-color:rgba(255,255,255,.2);box-shadow:0 4px 12px rgba(0,0,0,.28);}
.slot.empty:hover{border-color:rgba(255,255,255,.36);}
.slot.locked{filter:grayscale(.7) brightness(.55);}
.uitip{position:fixed;z-index:9999;transform:translate(-50%,-100%);pointer-events:none;
  background:var(--card2);color:var(--cream);border:1px solid rgba(255,255,255,.14);border-radius:9px;
  padding:5px 9px;font-family:var(--font-display);font-weight:600;font-size:.82rem;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.45);}

/* item pickup popups (float above player) */
.popups{position:absolute;z-index:6;transform:translate(-50%,-100%);pointer-events:none;display:flex;flex-direction:column-reverse;align-items:center;gap:2px;}
.ipop{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#fff;background:rgba(20,28,22,.82);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:2px 8px;white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.5);animation:ipopUp 1.3s ease-out forwards;}
@keyframes ipopUp{0%{opacity:0;transform:translateY(6px) scale(.9);}15%{opacity:1;transform:translateY(0) scale(1);}80%{opacity:1;}100%{opacity:0;transform:translateY(-14px);}}

/* nickname tag above the player */
.playername{position:absolute;z-index:5;transform:translate(-50%,-100%);pointer-events:none;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--cream);
  background:rgba(20,28,22,.7);border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:1px 7px;
  text-shadow:0 1px 0 rgba(0,0,0,.5);white-space:nowrap;}

/* multiplayer */
.btn-mp{width:100%;background:linear-gradient(180deg,#7a6cf0,#5a48d0);color:#fff;border:1px solid #9a8cff;
  box-shadow:0 6px 18px rgba(90,72,208,.4);font-family:var(--font-display);font-weight:700;}
.btn-mp:hover{filter:brightness(1.08);}
.mp-card{width:min(440px,94vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.mp-body{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:10px;}
.mp-sec{font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.16em;color:var(--g);text-transform:uppercase;margin-top:6px;}
.mp-row{display:flex;gap:8px;}
.mp-row .btn{flex:1;}
.mp-join{align-items:stretch;}
.mp-join .nick-input{flex:1;text-align:center;letter-spacing:.4em;font-size:1.2rem;}
.mp-servers{display:flex;flex-direction:column;gap:7px;}
.mp-server{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--cream);text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.7em 1em;cursor:pointer;}
.mp-server:hover{background:rgba(122,108,240,.3);border-color:#9a8cff;}
.mp-code{text-align:center;font-family:var(--font-display);color:var(--cream2);font-size:.78rem;letter-spacing:.18em;padding:6px 0;}
.mp-code b{display:block;font-size:2.4rem;letter-spacing:.3em;color:var(--a);margin-top:4px;}
.mp-roster{display:flex;flex-direction:column;gap:5px;}
.mp-player{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:7px 11px;font-size:.95rem;}
.mp-note{font-size:.82rem;color:var(--cream2);opacity:.8;line-height:1.4;}
.mp-flash{font-size:.86rem;color:var(--bad);text-align:center;}
.mpnames{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;}
.mp-tag{position:absolute;transform:translate(-50%,-100%);font-family:var(--font-display);font-weight:700;font-size:.8rem;
  color:#fff;background:rgba(90,72,208,.78);border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:1px 7px;white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.5);}

/* nickname input on the menu */
.nick-input{
  font-family:var(--font-ui);font-size:1rem;font-weight:500;color:var(--cream);text-align:center;
  background:rgba(10,16,10,.55);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  padding:.7em 1em;outline:none;width:100%;
}
.nick-input::placeholder{color:var(--cream2);opacity:.6;}
.nick-input:focus{border-color:var(--a);background:rgba(10,16,10,.7);}
.help-body .help-sec{font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.1em;color:var(--g);margin:14px 0 8px;text-transform:uppercase;}
.help-grid{display:flex;flex-direction:column;gap:6px;}
.help-row{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:7px 11px;}
.help-row b{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--a);}
.help-row span{font-size:.94rem;color:var(--cream);}
.help-foot{margin-top:14px;font-size:.9rem;color:var(--cream2);line-height:1.45;opacity:.9;}

/* tutorial dialog (Pip) */
.dlg-card{width:min(480px,94vw);display:flex;gap:16px;align-items:center;
  background:var(--card2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);
  box-shadow:0 30px 80px rgba(0,0,0,.6);padding:18px;}
.dlg-portrait{width:100px;height:134px;flex:0 0 auto;border-radius:16px;image-rendering:pixelated;
  background:radial-gradient(120% 90% at 50% 26%,#3a4e6a,#191f2e);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 -16px 32px rgba(0,0,0,.32);}
.dlg-body{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0;}
.dlg-top{display:flex;align-items:baseline;justify-content:space-between;}
.dlg-name{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--a);}
.dlg-step{font-family:var(--font-display);font-weight:600;font-size:.78rem;color:var(--cream2);opacity:.7;}
.dlg-text{font-size:1.02rem;line-height:1.45;color:var(--cream);min-height:4.4em;}
.dlg-next{align-self:flex-end;font-size:1.02rem;padding:.55em 1.3em;}
@media(max-width:520px){.dlg-card{flex-direction:column;text-align:center;}.dlg-next{align-self:center;}}