@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/pixelify-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/pixelify-sans-latin-700-normal.woff2') format('woff2')}
:root{
  --ink:#0a0c16; --panel:#12172b; --panel2:#1a2140; --line:#2c3a66; --line2:#405088;
  --gold:#e8c060; --gold2:#f6e2a0; --hp:#e0455a; --mp:#3f8fe8; --xp:#7ee063;
  --txt:#cfd6ee; --dim:#7d88b0; --danger:#ff5d6e;
  --ess:#b06bff; --plat:#9fd8e8;
}
/* v10 fonts: keep Pixelify Sans for the pixel-art DISPLAY type (logo/headings/zone
   banner), but render body copy + all NUMBERS in a clean system UI font so small
   HP/MP/gold values are actually legible. --disp = display, --ui = readable. */
:root{--disp:'Pixelify Sans',sans-serif;
  --ui:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);touch-action:none;overscroll-behavior:none}
body{font-family:var(--ui);color:var(--txt);letter-spacing:.2px;font-weight:500}
h1,h2,h3,#panelTitle,#zoneLabel,.btn,#logoImg{font-family:var(--disp)}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1200px 600px at 50% -10%, #141b38 0%, #0a0c16 60%)}
canvas#game{image-rendering:auto;background:#000;box-shadow:0 0 0 2px #000,0 0 60px #0009}
.hidden{display:none!important}

/* ---------- generic pixel UI ---------- */
.btn{display:inline-block;cursor:pointer;background:var(--panel2);color:var(--txt);
  border:2px solid var(--line);padding:9px 14px;font:bold 13px/1 'Pixelify Sans',sans-serif;
  letter-spacing:1px;text-transform:uppercase;box-shadow:0 3px 0 #000a, inset 0 2px 0 #ffffff12;
  transition:transform .05s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000a}
.btn.gold{border-color:#8a6b25;background:linear-gradient(#3a2f14,#2a2410);color:var(--gold2)}
.btn.red{border-color:#7c2a35;background:#331319;color:#ffb2bc}
.btn.small{padding:6px 9px;font-size:11px}
.btn.wide{display:block;width:100%;text-align:center;margin:6px 0}
.tag{font-size:10px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}

/* ---------- title ---------- */
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(900px 500px at 50% 20%, #1b1440 0%, #0a0c16 70%);z-index:40}
#title h1{font-size:min(11vw,64px);color:var(--gold2);letter-spacing:6px;
  text-shadow:0 0 22px #e8c06055, 0 4px 0 #4a3410, 0 6px 0 #000}
#title .sub{display:none}
/* v11: 2×3 button grid — Play / Log In / Create / Settings / Help / Support */
#title .menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(420px,90vw)}
#title .menu .btn{width:100%}
#title canvas{margin-bottom:8px}
#userLine{margin:0 0 12px;font-size:13px;color:var(--gold2);font-family:var(--disp);
  letter-spacing:1px;text-shadow:0 2px 0 #000;min-height:16px}
#titleFooter{position:absolute;bottom:10px;font-size:10px;color:#414c74}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
#hud > *{pointer-events:auto}
/* v9: movable player HUD restyled to match the dark-parchment panel */
#statHud{position:absolute;left:12px;top:10px;display:flex;flex-direction:column;gap:5px;
  padding:7px 10px 9px;touch-action:none;
  background:linear-gradient(#2a1a0a,#1a1005);border:2px solid #5a4322;
  box-shadow:0 3px 0 #000a, inset 0 1px 0 #8a6b3a55;border-radius:3px}
#statHud .hudGrip{color:var(--dim);font-size:9px;cursor:grab;user-select:none;line-height:1;margin-bottom:1px}
#statHud .hudGrip:active{cursor:grabbing}
.bar{width:170px;height:14px;background:#000c;border:2px solid var(--line);position:relative}
.bar .fill{position:absolute;inset:0;transform-origin:left;transition:transform .12s}
.bar.hp .fill{background:linear-gradient(#ff7686,var(--hp) 55%,#8d1f2e)}
.bar.mp .fill{background:linear-gradient(#7fb6ff,var(--mp) 55%,#1e4f96)}
.bar span{position:absolute;inset:0;font-size:9px;line-height:12px;text-align:center;color:#fff;text-shadow:0 1px 0 #000}
#currencies{display:flex;gap:10px;margin-top:2px;font-size:11px;font-weight:bold}
#currencies b{color:var(--gold)} #currencies i{color:var(--plat);font-style:normal} #currencies u{color:var(--ess);text-decoration:none}
/* v9: zone name — free-floating banner, no box; gold gradient + soft glow, animates on change */
#zoneLabel{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font:bold 15px 'Pixelify Sans',sans-serif;letter-spacing:3px;text-transform:uppercase;
  background:linear-gradient(#ffe9a8,#e8c060 55%,#a87a2a);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#e8c060;pointer-events:none;white-space:nowrap;
  filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px #e8c06055)}
#zoneLabel.zpop{animation:zpop .9s ease-out}
@keyframes zpop{0%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(1.15)}
  40%{opacity:1}100%{opacity:1;transform:translateX(-50%)}}
#topRight{position:absolute;top:8px;right:8px;display:flex;gap:6px}
#interactHint{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);font-size:11px;color:var(--gold2);
  background:#000c;border:2px solid #6b5520;padding:5px 10px;letter-spacing:1px}

/* ---------- touch controls ---------- */
#stick{position:absolute;left:18px;bottom:22px;width:118px;height:118px;border-radius:50%;
  background:#ffffff08;border:2px solid #ffffff1c}
#stickKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:#ffffff22;border:2px solid #ffffff44;box-shadow:0 0 14px #0008}
#actions{position:absolute;right:14px;bottom:18px;display:grid;grid-template-columns:repeat(3,56px);gap:8px;justify-items:end}
#actions .abtn{width:56px;height:56px}
#actions .abtn.dash{grid-column:3}
.abtn{width:64px;height:64px;border-radius:50%;border:2px solid var(--line2);background:#141a30ee;color:var(--txt);
  font:bold 10px 'Pixelify Sans',sans-serif;letter-spacing:1px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 4px 0 #000a}
.abtn:active{transform:translateY(2px)}
.abtn canvas{width:26px;height:26px;image-rendering:pixelated}
.abtn .cdw{position:absolute;inset:0;background:#000b;transform-origin:bottom;pointer-events:none}
.abtn.dash{border-color:#7a8ac0;background:#1b2340ee}
#interactBtn{position:absolute;right:212px;bottom:18px;width:56px;height:56px;font-size:9px}

/* ---------- side panel (7TABHUD) ----------
   Dark-parchment window styled after the inventory mock: gold title, 7 icon
   tabs with a gold underline, slot-grid inventory. Draggable by the header,
   resizable from the bottom-right grip. Content is flex + scroll so nothing
   overflows at any size (min 272×340). */
/* v15: DETACHED window — no longer welded to the right edge. It opens as a free
   floating panel you can drag anywhere and resize from the corner grip; position and
   size persist per account. (The old rule pinned it with top/right/bottom:0 and slid
   it in with a transform, which fought the drag handler — dragging set left/top, and
   the transform kept overriding it.) */
#panel{--pn:#221507;--pn2:#2e1e0c;--pnb:#5a4322;--pnb2:#8a6b3a;
  position:fixed;top:60px;right:14px;width:min(400px,94vw);height:min(620px,80vh);
  min-width:272px;min-height:340px;
  background:linear-gradient(#241708,#1a1005);
  border:3px solid var(--pnb);outline:1px solid var(--pnb2);outline-offset:-5px;
  box-shadow:0 14px 46px #000c;
  z-index:30;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .15s ease-out,transform .15s ease-out}
#panel.open{opacity:1;transform:none;pointer-events:auto}
#panelHead{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px;
  border-bottom:2px solid var(--pnb);background:linear-gradient(#31200d,#241708);flex:0 0 auto}
#panelTitle{letter-spacing:3px;color:#f0d68a;font-weight:bold;font-size:13px;text-transform:uppercase;
  text-shadow:0 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:2px solid var(--pnb);flex:0 0 auto;background:#1d1206}
.tab{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:6px 0 7px;border-bottom:3px solid transparent;filter:saturate(.55) brightness(.75);transition:filter .12s}
.tab img{width:22px;height:22px;image-rendering:pixelated;pointer-events:none}
.tab span{font-size:9px;font-weight:bold;letter-spacing:1px;color:var(--dim)}
.tab.on{border-bottom-color:var(--gold);filter:none;background:linear-gradient(#00000000,#e8c06018)}
.tab:hover{filter:none}
#tabBody{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:12px;font-size:12px;line-height:1.5;min-height:0}
#tabBody h3{color:var(--gold);font-size:12px;letter-spacing:2px;margin:10px 0 6px;text-transform:uppercase}
#tabBody img,#tabBody canvas{max-width:100%}
.row{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;border:2px solid var(--pnb);
  background:var(--pn2);margin-bottom:5px;min-width:0}
.row>*{min-width:0}
.row small{color:var(--dim);overflow-wrap:anywhere}
.xpbar{height:6px;background:#000;border:1px solid var(--pnb);margin-top:3px}
.xpbar div{height:100%;background:var(--xp)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:5px}
.elChip{border:2px solid var(--pnb);background:var(--pn2);padding:5px 7px;font-size:10px;display:flex;justify-content:space-between;min-width:0}
.slotRow{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.slot{width:52px;height:52px;border:2px solid var(--pnb2);background:#191007;display:flex;align-items:center;justify-content:center;position:relative}
.slot canvas{width:32px;height:32px;image-rendering:pixelated}
.slot .k{position:absolute;top:1px;left:3px;font-size:9px;color:var(--dim)}
.spellRow{cursor:pointer}
.spellRow:active{background:#3a2812}
.itemIcon{width:26px;height:26px;image-rendering:pixelated;margin-right:8px;flex:0 0 auto}
.qdone{color:var(--xp)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
/* currency chips (Inventory) */
.curChips{display:flex;gap:8px;margin:2px 0 10px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:6px;background:#191007;border:2px solid var(--pnb);padding:4px 12px;font-weight:bold;font-size:12px}
.chip i{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:inset -2px -2px 0 #0006}
/* slot-grid inventory */
.invGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.islot{aspect-ratio:1;border:2px solid var(--pnb);background:linear-gradient(#2a1a0a,#201307);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.islot:hover{border-color:var(--pnb2)}
.islot.empty{cursor:default;opacity:.55}
.islot.empty:hover{border-color:var(--pnb)}
.islot.sel{border-color:var(--gold)}
.islot canvas{width:70%;height:70%;image-rendering:pixelated;object-fit:contain}
.islot .ct{position:absolute;right:2px;bottom:1px;font-size:9px;font-weight:bold;color:#f0d68a;text-shadow:0 1px 0 #000}
.invDetail{margin-top:10px;border:2px solid var(--pnb);background:var(--pn2);padding:8px;display:flex;gap:8px;align-items:center}
/* resize grip */
#panelGrip{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;z-index:5;touch-action:none;
  background:linear-gradient(135deg,transparent 50%,var(--pnb2) 50%);opacity:.85}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;background:#000a;z-index:50;display:flex;align-items:center;justify-content:center}
.mbox{width:min(380px,92vw);max-height:86vh;overflow-y:auto;
  background:linear-gradient(#2a1b0a,#1c1106);
  border:3px solid #5a4322;outline:1px solid #8a6b3a;outline-offset:-5px;
  padding:16px;box-shadow:0 12px 50px #000d}
.mbox .btn:hover{border-color:#8a6b3a;color:var(--gold2)}
/* pause board: floating logo + sprite buttons, no container chrome */
#pauseBox{background:none;border:none;outline:none;box-shadow:none;padding:6px}
.mbox h2{color:var(--gold2);letter-spacing:3px;font-size:16px;text-align:center;margin-bottom:12px;text-transform:uppercase}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}

/* ---------- toasts / vignette ---------- */
#toasts{position:fixed;left:50%;top:56px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:#000d;border:2px solid var(--gold);color:var(--gold2);padding:6px 14px;font-size:11px;letter-spacing:1px;
  animation:tpop 2.6s forwards}
.toast.info{border-color:var(--line2);color:var(--txt)}
@keyframes tpop{0%{opacity:0;transform:translateY(-8px)}10%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@media (min-width:900px){ #stick,#actions,#interactBtn{opacity:.9} }
@media (prefers-reduced-motion:reduce){ .toast{animation-duration:4s} }

/* ---------- pause menu: sprite-button board ---------- */
#pauseBox{width:min(430px,94vw)}
#pauseLogo{width:170px;max-width:70%;display:block;margin:2px auto 12px;
  filter:drop-shadow(0 8px 14px #000d);animation:pfloat 3.2s ease-in-out infinite}
@keyframes pfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#pauseGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px}
.pcell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pcell .btn{width:100%}
.pcell small{color:var(--dim);font-size:10px;letter-spacing:1px;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){#pauseLogo{animation:none}}

/* ---------- global tooltip ---------- */
#gtip{position:fixed;z-index:99;display:none;pointer-events:none;min-width:150px;max-width:240px;
  background:linear-gradient(#1a2140f2,#12172ef6);border:2px solid #3a4570;border-radius:4px;
  padding:8px 10px;font-size:10px;line-height:1.5;color:var(--txt);
  box-shadow:0 8px 20px #000c;backdrop-filter:blur(2px)}
#gtip .thead{font-weight:700;font-size:11px;letter-spacing:1px;margin-bottom:4px;
  border-bottom:1px solid #3a4570;padding-bottom:3px}
#gtip .trow{display:flex;justify-content:space-between;gap:12px}
#gtip .trow span{color:var(--dim)}
#gtip .tdesc{margin-top:4px;color:var(--dim);font-size:9.5px}

/* ---------- file:// quality notice ---------- */
#fileNote{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;
  max-width:min(520px,92vw);background:#2a2140f0;border:2px solid #7a5aff;border-radius:4px;
  padding:9px 12px;font-size:11px;line-height:1.5;color:var(--txt)}
#fileNote a{color:#c9a2ff}
#fileNote code{background:#0c1122;padding:1px 4px;border-radius:2px}
#fileNote button{float:right;background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;margin-left:8px}

#titleFooter a{color:#c9a2ff;text-decoration:none}
#titleFooter a:hover{text-decoration:underline}

/* ---------- spell slot popover ---------- */
#slotPop{position:fixed;z-index:95;background:linear-gradient(#2a1b0a,#1c1106);
  border:2px solid #5a4322;outline:1px solid #8a6b3a;outline-offset:-4px;
  padding:9px 11px;box-shadow:0 10px 30px #000c;min-width:150px}
#slotPop .spTitle{font-weight:700;font-size:11px;letter-spacing:1px;margin-bottom:2px}
#slotPop .spHint{color:var(--dim);font-size:9px;margin-bottom:6px}
#slotPop .spSlots{display:grid;grid-template-columns:repeat(6,26px);gap:5px}
#slotPop .spSlot{width:26px;height:26px;border:2px solid var(--line);background:#0c1122;
  color:var(--txt);font:bold 11px 'Pixelify Sans',sans-serif;cursor:pointer}
#slotPop .spSlot.occ{background:#1a2140}
#slotPop .spSlot:hover{border-color:var(--gold);color:var(--gold2)}

/* ---------- equipment paper-doll (v9: smaller cells + weapon/charm boxes) ---------- */
.dollGrid{display:grid;gap:4px;margin-bottom:10px;justify-items:stretch;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    ". head ."
    "cape chest neck"
    "hands legs ring"
    "weapon boots charm"}
.dHead{grid-area:head}.dCape{grid-area:cape}.dChest{grid-area:chest}.dNeck{grid-area:neck}
.dHands{grid-area:hands}.dLegs{grid-area:legs}.dRing{grid-area:ring}.dBoots{grid-area:boots}
.dWeapon{grid-area:weapon}.dCharm{grid-area:charm}

/* ---------- chat / log ---------- */
.logRow{padding:4px 6px;border-bottom:1px solid #ffffff0d;font-size:10.5px;line-height:1.5;word-break:break-word}

/* ---------- buff chips ---------- */
#buffBar{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.buff{position:relative;overflow:hidden;border:2px solid var(--line);background:#0c1122cc;
  padding:3px 8px 3px 8px;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--txt)}
.buff i{position:absolute;left:0;bottom:0;height:2px;opacity:.9}


/* ---------- fullscreen & touch hardening ---------- */
html,body{height:100%;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#stage{height:100dvh}
input,textarea{-webkit-user-select:text;user-select:text;touch-action:auto}
#panel,#tabBody,.mbox,#chatScroll{touch-action:pan-y}

/* ---------- player context menu ---------- */
#pctx{position:fixed;z-index:96;min-width:120px;background:linear-gradient(#2a1b0a,#1c1106);
  border:2px solid #5a4322;outline:1px solid #8a6b3a;outline-offset:-4px;box-shadow:0 10px 30px #000c;padding:5px}
#pctx .pcHead{color:var(--gold2);font-size:11px;letter-spacing:1px;padding:4px 6px;border-bottom:1px solid #5a4322;margin-bottom:4px}
#pctx button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--txt);
  font:11px 'Pixelify Sans',sans-serif;padding:6px 8px;cursor:pointer}
#pctx button:hover{background:#3a2a14;color:var(--gold2)}


/* ---------- v9: minimap + world map ---------- */
#minimap{position:absolute;top:44px;right:8px;width:160px;height:120px;image-rendering:pixelated;
  background:#0a0c16e0;border:2px solid #5a4322;box-shadow:0 3px 0 #000a;cursor:pointer;border-radius:3px}
@media(max-width:760px){#minimap{width:112px;height:84px}}
#wmapBox{max-width:min(820px,96vw)}
#wmapCvs{width:100%;height:auto;image-rendering:pixelated;background:#0a0c16;
  border:2px solid #5a4322;cursor:crosshair}

/* v9: settings volume slider */
#sVol{width:150px;accent-color:#e8c060;cursor:pointer}
.setrow input[type=range]{background:transparent}

/* ================= v10 tweaks ================= */
/* hide the drag glyph on the player HUD; make the username the (invisible) handle */
#statHud .hudGrip{display:none}
#hudUser{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:1px;
  color:#ffe9a8;text-shadow:0 1px 0 #000;cursor:grab;padding:1px 2px 3px;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hudUser:active{cursor:grabbing}
.draghandle{cursor:grab;touch-action:none}
.draghandle:active{cursor:grabbing}
/* readable numbers in the stat bars */
.bar span{font-family:var(--ui);font-weight:600;letter-spacing:.3px}
#currencies{font-family:var(--ui)}

/* ---- auth window: transparent container, logo + buttons only ---- */
#gmodalBox.authbox{background:transparent!important;border:none!important;box-shadow:none!important;
  max-width:340px;width:92vw;padding:6px}
#gmodalBox.authbox .authLogo{display:block;width:min(260px,70vw);margin:0 auto 4px;
  filter:drop-shadow(0 6px 16px #000c)}
#gmodalBox.authbox h2{font-family:var(--disp);color:#ffe9a8;text-shadow:0 2px 0 #000}
#gmodalBox.authbox a{color:var(--gold2)}
#gmodalBox.authbox #gsiBtn{transition:opacity .15s}
/* the Google button sits in a subtle card so the outline theme reads on dark bg */
#gmodalBox.authbox #gsiBtn>div{border-radius:6px;overflow:hidden}

/* ---- 8×5 shop grid ---- */
.shopGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:6px 0 4px}
@media(max-width:520px){.shopGrid{grid-template-columns:repeat(5,1fr)}}
.shopCell{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;background:#191007;border:2px solid var(--pnb);cursor:pointer;
  padding:2px;overflow:hidden;transition:border-color .1s,transform .05s}
.shopCell:hover{border-color:var(--gold);transform:translateY(-1px)}
.shopCell:active{transform:translateY(1px)}
.shopCell.empty{background:#120c04;border-style:dashed;border-color:#3a2a14;cursor:default}
.shopCell.empty:hover{border-color:#3a2a14;transform:none}
.shopCell.broke{opacity:.55}
.shopCell .scIcon{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.shopCell .scIcon img,.shopCell .scIcon canvas{width:30px;height:30px;image-rendering:pixelated}
.shopCell .scName{font-family:var(--ui);font-size:8px;line-height:1;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.shopCell .scPrice{font-family:var(--ui);font-size:9px;font-weight:700;color:#e8c060}


/* ================= v11 ================= */
/* --- compact settings window --- */
.mbox.setbox{width:min(340px,92vw);padding:14px}
.setbox h2{margin-bottom:10px;font-size:15px}
.setGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.setrow span{color:var(--txt);white-space:nowrap}
.setrow .btn.small{min-width:46px;padding:4px 8px;font-size:11px;text-align:center}
.setrow.vol{padding:6px 0 8px}
.setrow.vol input[type=range]{flex:1;min-width:0;margin:0 8px}
.setrow.vol b{font-family:var(--ui);font-size:11px;color:var(--gold);min-width:24px;text-align:right}
.setNote{display:block;text-align:center;color:var(--dim);font-size:10px;margin-top:8px;line-height:1.4}

/* --- auth window: no box at all, just logo + controls --- */
#gmodal.authOpen{background:#050710ee}
#gmodalBox.authbox{background:none!important;border:none!important;outline:none!important;
  box-shadow:none!important;max-width:320px;width:92vw;padding:0;overflow:visible}
#gmodalBox.authbox .authLogo{display:block;width:min(240px,66vw);margin:0 auto 14px;
  filter:drop-shadow(0 6px 16px #000c)}
#gmodalBox.authbox h2{font-family:var(--disp);color:#ffe9a8;text-shadow:0 2px 0 #000;font-size:15px}
#gmodalBox.authbox a{color:var(--gold2)}
#gmodalBox.authbox #gsiBtn>div{border-radius:6px;overflow:hidden}
.authLegal{display:flex;gap:7px;align-items:flex-start;font-size:10.5px;color:var(--dim);
  line-height:1.4;text-align:left;margin-top:2px}
.authLegal input{margin-top:2px;accent-color:#e8c060;flex:0 0 auto}

/* ================= v12 — highscores drawer ================= */
/* the chevron: quiet by default, gold on hover, flips when open */
#hsToggle{margin-top:14px;background:none;border:none;cursor:pointer;color:#3f4a72;
  padding:4px 16px;line-height:0;transition:color .15s,transform .2s}
#hsToggle:hover{color:var(--gold)}
#hsToggle.open{color:var(--gold);transform:rotate(180deg)}
#hsToggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

#hsPanel{margin-top:8px;width:min(460px,92vw);
  background:linear-gradient(#241708,#170e04);
  border:2px solid #5a4322;outline:1px solid #8a6b3a;outline-offset:-4px;
  padding:10px;animation:hsDrop .22s ease-out}
@keyframes hsDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* your row: rank · name · player count */
#hsMe{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-bottom:8px;
  background:#191007;border:2px solid var(--pnb)}
#hsMe .hsRank,#hsMe .hsPlayers{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;min-width:48px}
#hsMe .hsRank span{font-family:var(--disp);font-size:17px;font-weight:700;color:var(--gold);line-height:1.1}
#hsMe .hsPlayers span{font-family:var(--ui);font-size:13px;font-weight:700;color:var(--txt);line-height:1.2}
#hsMe small{font-size:8.5px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
#hsMe .hsWho{flex:1;min-width:0;text-align:left}
#hsMe .hsWho b{display:block;font-family:var(--disp);font-size:13px;color:#ffe9a8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hsMe .hsWho span{font-family:var(--ui);font-size:10.5px;color:var(--dim)}
#hsMe .hsWho b i{color:var(--gold);font-style:normal}
#hsMe .hsWho span b{display:inline;font-family:var(--ui);color:var(--txt);font-size:10.5px}

/* board tabs — scrollable strip (4 stat boards + all 20 skills) */
#hsTabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;
  border-bottom:1px solid var(--pnb);scrollbar-width:thin}
#hsTabs::-webkit-scrollbar{height:5px}
#hsTabs::-webkit-scrollbar-thumb{background:#5a4322}
.hsTab{flex:0 0 auto;background:#191007;border:1px solid var(--pnb);color:var(--dim);
  font-family:var(--ui);font-size:10px;font-weight:600;padding:4px 9px;cursor:pointer;
  white-space:nowrap;transition:border-color .1s,color .1s}
.hsTab:hover{border-color:#8a6b3a;color:var(--gold2)}
.hsTab.on{border-color:var(--gold);color:var(--gold);background:#2a1b0a}

/* the table */
#hsList{max-height:210px;overflow-y:auto;font-family:var(--ui)}
.hsHead,.hsRow{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;
  padding:4px 6px;font-size:11px}
.hsHead{color:var(--dim);font-size:9px;text-transform:uppercase;letter-spacing:1px;
  border-bottom:1px solid var(--pnb);position:sticky;top:0;background:#1c1106}
.hsRow{border-bottom:1px solid #ffffff08}
.hsRow:hover{background:#ffffff08}
.hsRow.me{background:#e8c0601a;border-color:#8a6b3a}
.hsRow.me.pinned{border-top:2px solid var(--pnb);margin-top:2px}
.hsPos{color:var(--dim);font-weight:700;text-align:center}
.hsRow.me .hsPos,.hsRow.me .hsPl{color:var(--gold2)}
.hsPl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hsPl i{color:var(--gold);font-style:normal;font-weight:400}
.hsVal{color:#7ee063;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.hsEmpty{padding:16px 8px;text-align:center;color:var(--dim);font-size:11px;line-height:1.5}
#hsNote{display:block;margin-top:7px;text-align:center;color:#414c74;font-size:9.5px}

/* v14: auth action row — Home left, Create Account right (both sprite buttons) */
.authBtns{display:flex;gap:8px;margin-top:10px}
.authBtns .btn{flex:1;min-width:0}

/* v15: HUD button row — sprite faces, tight spacing, aligned */
#topRight{align-items:center}
#topRight .hudbtn{padding:0;border:none;background:transparent;box-shadow:none;
  image-rendering:pixelated;transition:transform .08s,filter .1s}
#topRight .hudbtn:hover{filter:brightness(1.15) drop-shadow(0 0 4px #e8c06066);transform:translateY(-1px)}
#topRight .hudbtn:active{transform:translateY(1px)}

/* ================= v16 — compact skills grid + tighter panel ================= */

/* --- Skills: 4 across × 5 down = all 20 visible, zero scrolling --- */
/* two columns: label hard-left, total hard-right. (A plain flex row kept collapsing
   into "SKILLSLv 980" — an inherited rule was zeroing the gap, so pin it with a grid.) */
.skHead{display:grid;width:100%;grid-template-columns:1fr auto;align-items:baseline;gap:10px;
  margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--pnb)}
.skHead>span{font-family:var(--disp);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold);text-align:left}
.skHead>b{font-family:var(--ui);font-size:11px;font-weight:700;
  color:#7ee063;cursor:help;white-space:nowrap;text-align:right}

.skGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.skCell{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:5px 2px 4px;background:#191007;border:1px solid var(--pnb);
  cursor:pointer;overflow:hidden;transition:border-color .1s,transform .06s,background .1s}
.skCell:hover{border-color:var(--gold);background:#241708;transform:translateY(-1px)}
.skCell:active{transform:translateY(1px)}
.skCell.maxed{border-color:#e8c060;background:#2a1b0a}
.skCell.maxed .skLv{color:var(--gold)}

.skIco{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.skIco img{width:24px;height:24px;image-rendering:pixelated}
.skIco i{font-family:var(--disp);font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.5px}
.skCell:hover .skNm{color:var(--gold2)}
.skLv{font-family:var(--ui);font-size:12px;font-weight:700;color:var(--txt);line-height:1;
  font-variant-numeric:tabular-nums}
.skBar{display:block;width:100%;height:3px;background:#000;border:1px solid #3a2a14}
.skBar i{display:block;height:100%;background:var(--xp)}
.skNote{display:block;margin-top:7px;text-align:center;color:var(--dim);font-size:9.5px}

/* --- panel: tighter everywhere so more fits without scrolling --- */
#panel{height:min(560px,76vh)}
#panelHead{padding:6px 9px}
#panelTitle{font-size:12px;letter-spacing:2px}
#tabs{padding:4px 6px 0}
.tab{padding:5px 0 6px}
.tab img{width:19px;height:19px}
#tabBody{padding:9px;font-size:11.5px;line-height:1.45}
#tabBody h3{font-size:11px;margin:8px 0 5px;letter-spacing:1.5px}
#tabBody h3:first-child{margin-top:0}
.row{padding:5px 7px;margin-bottom:4px;font-size:11.5px}
.slot{width:46px;height:46px}
.slot canvas{width:28px;height:28px}
.slotRow{gap:5px;margin-bottom:8px}
.itemIcon{width:22px;height:22px;margin-right:6px}
.elChip{padding:4px 6px;font-size:9.5px}
.grid2{gap:4px}
/* skill name under the icon — truncates cleanly on long names (Blacksmithing, Necromancy) */
.skNm{font-family:var(--ui);font-size:8px;font-weight:500;color:#6f789c;line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}

/* v18: minimap is now the World Map button — make that discoverable */
#minimap{cursor:pointer;transition:border-color .12s,box-shadow .12s}
#minimap:hover{border-color:var(--gold);box-shadow:0 0 0 1px #e8c06066,0 0 12px #e8c06033}