/* LOOT SLAYER — main styles */
:root{ --border:#5a4a32; --panel:#3e362b; --chat:#c9bd97; --txt:#ffec8b;
       --game-scale:1; --hover-scale:1; }
  *{box-sizing:border-box;-webkit-user-select:none;user-select:none;}
  html,body{margin:0;height:100%;background:#000;overflow:hidden;
    font-family:'Pixelify Sans',sans-serif;font-weight:400;font-synthesis:none;color:#fff;}
  #stage{position:absolute;inset:0;}
  #client{position:absolute;inset:8px;background:#0a0a0a;box-shadow:0 0 28px #000;border-radius:6px;overflow:hidden;}
  #view{position:absolute;inset:0;overflow:hidden;background:#5a6a3a;}
  #view canvas{display:block;position:absolute;left:0;top:0;}
  #overlay{position:absolute;inset:0;pointer-events:none;}
  #topbtns{position:absolute;top:6px;right:6px;z-index:45;display:flex;gap:6px;}
  .topbtn{cursor:pointer;font-size:13px;font-weight:bold;border-radius:5px;padding:3px 8px;
    box-shadow:0 2px 6px rgba(0,0,0,.6);text-shadow:1px 1px #000;white-space:nowrap;user-select:none;}
  .topbtn:hover{filter:brightness(1.18);}
  .winbar{height:15px;display:flex;align-items:center;font-size:12px;color:#ffe7a8;cursor:move;user-select:none;
    background:rgba(60,50,34,.9);border-bottom:1px solid rgba(201,162,74,.4);padding:0 6px;letter-spacing:.4px;}
  #chatbox{position:absolute;left:10px;bottom:10px;width:318px;z-index:26;
    display:flex;flex-direction:column;background:rgba(8,6,12,.30);border:1px solid rgba(201,162,74,.22);border-radius:6px;}
  #minimapWin{position:absolute;right:10px;top:40px;z-index:25;
    background:linear-gradient(#39301f,#2a2214);border:1px solid rgba(201,162,74,.55);border-radius:8px;overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.5);}
  #mapwrap{width:184px;height:184px;position:relative;background:#1c1812;display:flex;align-items:center;justify-content:center;}
  #map{width:152px;height:152px;border-radius:50%;
    box-shadow:inset 0 0 0 2px #5a4a32;background:#26331a;cursor:pointer;}
  #mapN{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;color:#ff4a4a;font-weight:bold;
    font-size:14px;text-align:center;line-height:14px;text-shadow:0 0 3px #000,1px 1px 1px #000;pointer-events:none;transform-origin:center;}
  #mapZone{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
  #mapDrag{justify-content:center;}
  #mapClock{position:absolute;left:6px;top:6px;z-index:6;
    display:flex;align-items:center;gap:3px;padding:1px 6px;border-radius:5px;pointer-events:none;
    background:linear-gradient(#3a342b,#241f17);border:1px solid #c9a24a;box-shadow:0 2px 6px rgba(0,0,0,.6);
    color:#ffe7a8;font-family:'Pixelify Sans',monospace;}
  #mapClock #clockPhase{font-size:11px;line-height:1;}
  #mapClock #clockTime{font-size:11px;font-weight:bold;letter-spacing:.3px;}
  #invWin{position:absolute;right:10px;bottom:10px;z-index:25;width:220px;display:flex;flex-direction:column;
    background:linear-gradient(#39301f,#2a2214);border:1px solid rgba(201,162,74,.55);border-radius:8px;overflow:visible;}
  #playerFrame{position:absolute;left:calc(50% - 240px);bottom:138px;z-index:30;width:206px;height:84px;
    background:rgba(10,8,14,.5);border:1px solid rgba(201,162,74,.5);border-radius:6px;padding:3px 5px;
    display:flex;flex-direction:column;gap:2px;font-family:'Pixelify Sans',monospace;cursor:move;}
  #targetFrame{position:absolute;left:calc(50% + 34px);bottom:138px;z-index:30;width:206px;height:84px;display:none;
    background:rgba(10,8,14,.5);border:1px solid rgba(201,80,80,.55);border-radius:6px;padding:3px 5px;
    flex-direction:column;gap:2px;font-family:'Pixelify Sans',monospace;cursor:move;}
  .pframe-row{display:flex;align-items:center;gap:3px;}
  .pf-lab{font-size:13px;width:13px;text-align:center;}
  .pbar{position:relative;flex:1;height:13px;background:#1a1410;border:1px solid #000;border-radius:3px;overflow:hidden;}
  .pbar.hp .pfill{background:linear-gradient(#e24a4a,#a01818);}
  .pbar.mp .pfill{background:linear-gradient(#4a8ae2,#1850a0);}
  .pbar.rn .pfill{background:linear-gradient(#e2c44a,#a08818);}
  .pfill{position:absolute;left:0;top:0;height:100%;width:100%;transition:width .18s;}
  .ptxt{position:absolute;inset:0;text-align:center;line-height:13px;font-size:12px;color:#fff;text-shadow:1px 1px 1px #000;cursor:pointer;}
  .ptxt.nopt{cursor:default;}
  #tfName{font-size:14px;color:#ffd0d0;margin-bottom:2px;text-shadow:1px 1px 1px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #pfName{font-size:14px;color:#ffe7a8;text-align:left;text-shadow:1px 1px 1px #000;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #tfRow,#pfRow{display:flex;align-items:center;gap:6px;}
  #tfPortrait,#pfPortrait{width:58px;height:58px;flex:none;border:1px solid rgba(201,162,74,.6);border-radius:5px;
    background:radial-gradient(circle at 50% 35%,#2a2438,#141019);box-shadow:inset 0 0 8px rgba(0,0,0,.6);}
  #tfInfo,#pfInfo{flex:1;min-width:0;}
  #hotbar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;z-index:28;}
  .hbrow{display:flex;gap:5px;justify-content:center;}
  .hslot{position:relative;width:42px;height:42px;border:2px solid #6a5a30;border-radius:7px;background:rgba(12,10,16,.72);
    display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.5);}
  .hslot.empty{border-style:dashed;border-color:#4a4030;cursor:default;}
  .hslot:hover{border-color:#c9a24a;}
  .hslot.dragover{border-color:#ffe27a;box-shadow:0 0 8px #ffe27a;}
  .hslot .hk{position:absolute;top:1px;left:3px;font-size:12px;color:#cdbb88;font-family:'Pixelify Sans',monospace;z-index:3;text-shadow:1px 1px #000;}
  .hslot .hic{font-size:26px;line-height:1;z-index:2;}
  .hslot .hcd{position:absolute;left:0;bottom:0;width:100%;height:0;background:rgba(30,46,90,.62);z-index:4;pointer-events:none;}
  .hslot .hcdnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none;
    font-family:'Pixelify Sans',monospace;font-size:18px;font-weight:bold;color:#fff;text-shadow:0 0 3px #000,1px 1px 2px #000;}
  .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;padding:2px 2px 4px;}
  .pchip{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #6a5a30;border-radius:6px;
    background:linear-gradient(#2a2418,#1a160e);font-size:22px;cursor:grab;user-select:none;image-rendering:pixelated;}
  .pchip:hover{border-color:#c9a24a;filter:brightness(1.15);}
  .rgrip{position:absolute;width:14px;height:14px;z-index:50;opacity:.55;}
  .rgrip:hover{opacity:1;}
  .rgrip.br{right:0;bottom:0;cursor:nwse-resize;
    background:linear-gradient(135deg,transparent 50%,rgba(201,162,74,.9) 50%);border-bottom-right-radius:5px;}
  .rgrip.tr{right:0;top:0;cursor:nesw-resize;
    background:linear-gradient(45deg,transparent 50%,rgba(201,162,74,.9) 50%);border-top-right-radius:5px;}
  .tabrow{height:28px;display:flex;background:#28231b;}
  .tab{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
    border-right:1px solid #000;font-size:18px;color:#cdbb88;background:#3a342b;}
  .tab:last-child{border-right:none;} .tab:hover{background:#4a4234;}
  .tab.active{background:#6b3b22;color:#ffec8b;box-shadow:inset 0 0 0 1px #c98a4a;}
  .tab svg{width:18px;height:18px;}
  #panel{height:274px;background:var(--panel);border-top:1px solid #000;position:relative;overflow:hidden;}
  #inv{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);
    width:100%;height:100%;padding:2px;gap:1px;}
  .slot{display:flex;align-items:center;justify-content:center;position:relative;font-size:20px;cursor:pointer;}
  .slot .qty{position:absolute;top:1px;left:2px;font-size:12px;color:#ffec8b;text-shadow:1px 1px #000;}
  .slot.has:hover{background:rgba(255,255,255,.07);}
  #skills{display:none;grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:3px;gap:3px;align-content:start;}
  .skgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
  .sk{position:relative;display:flex;align-items:center;gap:4px;height:29px;padding:0 7px;
    background:linear-gradient(#5c4a30,#3a2e1c);border:1px solid #c9a24a;border-radius:6px;color:#fff;cursor:pointer;overflow:hidden;}
  .sk .skico{font-size:21px;line-height:1;flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
    background-size:contain;background-position:center;background-repeat:no-repeat;}
  .sk .sklvl{margin-left:auto;font-size:13px;font-weight:bold;color:#ffe27a;text-shadow:1px 1px #000;}
  .sk:hover{background:linear-gradient(#6e5838,#4a3a24);box-shadow:0 0 8px rgba(201,162,74,.55);}
  .skdiv{height:3px;margin:6px 6px;border-radius:3px;cursor:help;
    background:linear-gradient(90deg,transparent,rgba(201,162,74,.55) 25%,rgba(201,162,74,.55) 75%,transparent);}
  .skdiv:hover{background:linear-gradient(90deg,transparent,rgba(255,210,90,.85) 20%,rgba(255,210,90,.85) 80%,transparent);}
  .skinfo{position:absolute;top:2px;right:6px;font-size:13px;color:#cdbb88;cursor:help;z-index:3;line-height:1;}
  .skinfo:hover{color:#ffe27a;}
  .sktop{text-align:center;color:#ffec8b;font-size:13px;font-weight:bold;margin:0 0 4px;text-shadow:1px 1px #000;}
  #stub{display:none;width:100%;height:100%;align-items:center;justify-content:center;
    color:#9a8f6f;font-size:14px;text-align:center;padding:14px;}
  #panel.show-skills #inv{display:none;} #panel.show-skills #skills{display:grid;}
  #panel.show-stub #inv{display:none;} #panel.show-stub #skills{display:none;} #panel.show-stub #stub{display:flex;}
  .chathead{display:flex;align-items:center;height:16px;background:rgba(40,32,20,.65);border-bottom:1px solid rgba(201,162,74,.2);border-radius:5px 5px 0 0;}
  #chanBtn{cursor:pointer;font-size:14px;color:#ffe7a8;padding:0 7px;height:16px;line-height:16px;user-select:none;border-right:1px solid rgba(201,162,74,.25);}
  #chanBtn:hover{background:rgba(120,98,60,.5);}
  #chatDrag{flex:1;cursor:move;font-size:12px;color:#ffe7a8;line-height:16px;padding:0 8px;letter-spacing:.5px;user-select:none;}
  #chatlog{height:116px;background:transparent;padding:4px 6px;font-size:14px;color:#ece3cf;overflow-y:auto;line-height:1.2;
    text-shadow:0 1px 2px rgba(0,0,0,.85);font-family:'Pixelify Sans',sans-serif;}
  #chatlog .you{color:#9ec9ff;} #chatlog .lvl{color:#ff9a86;font-weight:bold;} #chatlog .pub{color:#bcd8ff;}
  #chatlog b{color:#ffe7a8;}
  #chatlog .cmsg{color:#ffe24a;}
  #chatinput{height:22px;background:rgba(8,6,12,.34);border-top:1px solid rgba(201,162,74,.2);border-radius:0 0 5px 5px;display:flex;align-items:center;padding:0 6px;box-sizing:border-box;}
  #chatinput input{flex:1;border:none;background:transparent;outline:none;font-size:14px;color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.85);font-family:'Pixelify Sans',sans-serif;}
  #chatinput input::placeholder{color:rgba(255,255,255,.45);}
  #chanMenu{position:absolute;left:0;top:16px;width:124px;display:none;flex-direction:column;z-index:60;
    background:linear-gradient(#2a2418,#181308);border:1px solid #c9a24a;border-radius:6px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.6);}
  #chanMenu.open{display:flex;}
  #chanMenu .ci{padding:5px 9px;font-size:14px;color:#e6dcc4;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.3);}
  #chanMenu .ci:hover{background:rgba(201,162,74,.25);color:#fff;}
  #chanMenu .ci.sel{background:rgba(120,70,40,.6);color:#ffe7a8;}
  .hpbar{position:absolute;width:34px;height:5px;background:#7a1010;border:1px solid #000;transform:translate(-50%,-50%);}
  .hpbar i{display:block;height:100%;background:#22b14c;}
  .hpbar.you{width:40px;height:6px;background:#0a3a18;border-color:#1f8640;}
  .hpbar.you i{background:linear-gradient(#6cff8a,#1fb04a);}
  .splat{position:absolute;transform:translate(-50%,-50%);font-family:'Pixelify Sans',sans-serif;font-weight:bold;
    pointer-events:none;white-space:nowrap;z-index:43;font-size:calc(24px * var(--game-scale));color:#fff;
    text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 5px #000;}
  .splat.miss{color:#c2c2c2;font-size:calc(15px * var(--game-scale));font-weight:600;}
  .splat.crit{color:#ffe24a;font-size:calc(40px * var(--game-scale));letter-spacing:1px;
    text-shadow:-1px -1px 0 #6a4400,1px -1px 0 #6a4400,-1px 1px 0 #6a4400,1px 1px 0 #6a4400,0 0 9px #ffcf3a,0 0 20px #ffaa00;
    animation:critpop .35s ease-out;}
  @keyframes critpop{0%{transform:translate(-50%,-50%) scale(.4);}55%{transform:translate(-50%,-50%) scale(1.25);}100%{transform:translate(-50%,-50%) scale(1);}}
  .floatmsg{position:absolute;transform:translate(-50%,-50%);font:bold 14px/1.15 system-ui,sans-serif;
    color:#ff7a6a;text-shadow:0 1px 3px #000,0 0 7px rgba(0,0,0,.9);pointer-events:none;white-space:nowrap;z-index:42;
    animation:floatup 1.3s ease-out forwards;}
  @keyframes floatup{0%{opacity:0;transform:translate(-50%,-50%) scale(.82);}14%{opacity:1;}100%{opacity:0;transform:translate(-50%,-175%) scale(1);}}
  .nlabel{position:absolute;transform:translate(-50%,-50%);font-size:13px;color:#ffff00;
    text-shadow:1px 1px #000;white-space:nowrap;text-align:center;}
  .nlabel.you{color:#fff;}
  .nlabel .ovh{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:7px;white-space:nowrap;
    color:#fff;font-weight:bold;font-size:15px;text-shadow:0 0 4px #000,0 0 9px rgba(0,0,0,.95),0 1px 2px #000;
    background:rgba(10,8,16,.42);padding:1px 7px;border-radius:7px;}
  #tip{position:fixed;pointer-events:none;background:#000;color:#ffff00;font-size:14px;padding:1px 5px;
    border:1px solid #ffff00;z-index:50;display:none;white-space:normal;max-width:230px;line-height:1.35;}
  #ctx{position:fixed;z-index:60;display:none;min-width:130px;border:1px solid #000;font-size:16px;}
  #ctx .hd{background:#6b3b22;color:#fff;padding:2px 6px;font-weight:bold;}
  #ctx .it{padding:2px 6px;cursor:pointer;color:#111;background:#bcb393;}
  #ctx .it:hover{background:#ffff00;}
  #worldmap{position:fixed;left:50%;top:46px;z-index:80;display:none;flex-direction:column;width:600px;
    background:linear-gradient(#26221a,#15120c);border:1px solid var(--border);border-radius:9px;
    box-shadow:0 12px 44px rgba(0,0,0,.6);overflow:hidden;}
  #worldmap .wmhead{display:flex;align-items:center;justify-content:space-between;background:#2a2418;color:#ffd23a;
    font-family:'Pixelify Sans',sans-serif;font-size:14px;padding:5px 11px;cursor:move;border-bottom:1px solid #000;user-select:none;}
  #worldmap .wmx{cursor:pointer;color:#d8a35a;font-size:15px;padding:0 2px;}
  #worldmap .wmx:hover{color:#ffd98a;}
  #worldmap canvas{position:relative !important;left:auto !important;top:auto !important;width:560px !important;height:560px !important;background:#26331a;image-rendering:pixelated;display:block;margin:10px auto;border-radius:4px;}
  #guideModal{position:fixed;inset:0;z-index:95;background:rgba(6,4,10,.72);display:none;align-items:center;justify-content:center;}
  #guideModal.open{display:flex;}
  #guideModal .gbox{width:440px;max-width:92vw;max-height:84vh;overflow:auto;background:linear-gradient(#241f17,#15110b);
    border:2px solid #c9a24a;box-shadow:0 0 0 2px #0a0712,0 18px 50px rgba(0,0,0,.7);border-radius:10px;}
  #guideModal .ghd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
    font-family:'Pixelify Sans',sans-serif;font-size:24px;color:#ffe7a8;border-bottom:1px solid #4a3c24;position:sticky;top:0;
    background:linear-gradient(#2a2418,#201a10);}
  #guideModal #guideX{cursor:pointer;color:#d8a35a;font-size:22px;padding:0 4px;}
  #guideModal #guideX:hover{color:#ffd98a;}
  #guideModal .gbody{padding:6px 18px 16px;font-family:'Pixelify Sans',monospace;font-size:22px;color:#d8cfb8;}
  #guideModal h4{font-family:'Pixelify Sans',sans-serif;font-weight:500;font-size:19px;color:#9adfff;margin:14px 0 4px;}
  #guideModal ul{margin:0;padding-left:18px;} #guideModal li{margin:3px 0;line-height:1.25;}
  #guideModal b{color:#ffe7a8;}
  #guideBtn{margin:8px auto 0;display:block;cursor:pointer;font-family:'Pixelify Sans',sans-serif;font-size:17px;
    background:linear-gradient(#3a6ac4,#264a8a);color:#fff;border:2px solid #1a2a4a;border-radius:6px;padding:8px 14px;}
  #guideBtn:hover{filter:brightness(1.15);}
  /* two-section skills + styles picker */
  #skills{display:none;flex-direction:column;height:100%;overflow-y:auto;padding:6px 6px 3px;gap:0;position:relative;}
  #panel.show-skills #skills{display:flex;}
  .skrow{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
  #styles{display:none;flex-direction:column;height:100%;overflow-y:auto;padding:4px;gap:2px;}
  #panel.show-styles #inv{display:none;}#panel.show-styles #skills{display:none;}#panel.show-styles #styles{display:flex;}
  #equipPanel{display:none;flex-direction:column;width:100%;height:100%;padding:4px 4px 30px;gap:4px;overflow-y:auto;color:#fff;box-sizing:border-box;position:relative;}
  #panel.show-equip #inv{display:none;}#panel.show-equip #skills{display:none;}#panel.show-equip #styles{display:none;}#panel.show-equip #stub{display:none;}#panel.show-equip #equipPanel{display:flex;}
  .eqhdr{color:#ffec8b;font-size:14px;font-weight:bold;text-align:center;text-shadow:1px 1px #000;}
  .eqgrid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
  .eqslot{display:flex;align-items:center;gap:4px;background:#5a4a32;border-radius:2px;padding:2px 5px;height:30px;font-size:12px;color:#fff;cursor:pointer;overflow:hidden;}
  .eqslot:hover{background:#6a5a3e;} .eqslot .ei{font-size:18px;flex:none;} .eqslot .en{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;}
  .eqtot{margin-top:auto;background:#2b2620;border:1px solid #000;border-radius:2px;padding:5px;font-size:12px;color:#cdbb88;line-height:1.5;}
  .stygrp{font-size:11px;letter-spacing:1px;color:#c98a4a;text-transform:uppercase;margin:3px 1px 0;}
  .styrow{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;}
  .sty{display:flex;align-items:center;gap:4px;background:#4a4234;border:1px solid #1c1812;border-left-width:4px;border-radius:3px;
    padding:0 5px;height:26px;font-size:12px;color:#fff;cursor:pointer;overflow:hidden;white-space:nowrap;}
  .sty.sel{background:#6b3b22;box-shadow:inset 0 0 0 1px #c98a4a;}
  .sty:hover{background:#5a5040;}
  .styrow{display:flex;gap:5px;margin:2px 0 4px;}
  .sty.half{flex:1;min-width:0;height:22px;justify-content:center;font-size:10px;padding:0 4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sty.half b{margin-left:2px;}
  /* modals */
  .modal{position:absolute;inset:0;z-index:90;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;}
  .modal.open{display:flex;}
  .mbox{width:440px;max-height:430px;background:linear-gradient(#3a342b,#241f18);border:2px solid #6b5a3a;
    box-shadow:0 8px 30px #000;display:flex;flex-direction:column;font-size:14px;}
  .mhead{display:flex;align-items:center;justify-content:space-between;background:#6b3b22;color:#ffec8b;
    font-weight:bold;padding:4px 8px;font-size:16px;}
  .mhead .mx{cursor:pointer;border:1px solid #000;background:#3a342b;color:#fff;width:20px;height:20px;text-align:center;line-height:18px;}
  .mbody{padding:6px;overflow-y:auto;display:flex;gap:8px;}
  .mcol{flex:1;} .mcol h4{font-size:12px;color:#c98a4a;text-transform:uppercase;letter-spacing:1px;margin:2px 0 4px;}
  .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
  .mslot{height:34px;display:flex;align-items:center;justify-content:center;position:relative;font-size:19px;
    background:#2b2620;border:1px solid #1c1812;cursor:pointer;}
  .mslot:hover{background:#4a4234;} .mslot .q{position:absolute;top:0;left:1px;font-size:11px;color:#ffec8b;text-shadow:1px 1px #000;}
  .shoprow{display:flex;align-items:center;gap:6px;padding:3px;border-bottom:1px solid #2b2620;}
  .shoprow .nm{flex:1;} .shoprow .px{color:#ffd24a;font-size:13px;}
  .shoprow button{font-size:12px;cursor:pointer;background:#5a4a32;color:#fff;border:1px solid #000;padding:1px 6px;}
  .shoprow button:hover{background:#6b5a3a;}
  /* ===== LOGIN / LANDING ===== */
  #loginOverlay{position:fixed;inset:0;z-index:200;display:none;overflow-y:auto;overflow-x:hidden;
    background:linear-gradient(#070617 0%,#140d2e 38%,#3a1c40 68%,#6a2a2a 100%);
    font-family:'Pixelify Sans',sans-serif;}
  .ls-scene{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
  .ls-moon{position:absolute;top:8%;right:12%;width:88px;height:88px;border-radius:50%;
    background:radial-gradient(circle at 38% 38%,#fff8e0,#ffe9a8 55%,#e9c870 75%,transparent 78%);
    box-shadow:0 0 50px 14px rgba(255,228,150,.45);animation:moonGlow 6s ease-in-out infinite alternate;}
  @keyframes moonGlow{from{filter:brightness(.92)}to{filter:brightness(1.12)}}
  .ls-stars{position:absolute;inset:0;background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 9%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 44% 22%,#fff,transparent),radial-gradient(1.1px 1.1px at 62% 12%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 78% 26%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 8%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 20% 32%,#fff,transparent),radial-gradient(1.4px 1.4px at 54% 6%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 70% 34%,#fff,transparent),radial-gradient(1.1px 1.1px at 36% 14%,#fff,transparent);
    animation:twinkle 3.2s ease-in-out infinite alternate;}
  @keyframes twinkle{from{opacity:.45}to{opacity:.95}}
  .ls-castle{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:120%;max-width:1400px;height:58%;
    filter:drop-shadow(0 0 30px rgba(0,0,0,.6));}
  .cwin{fill:#ffb347;animation:winFlick 2.6s ease-in-out infinite alternate;
    filter:drop-shadow(0 0 6px #ffae3a);}
  .cwin:nth-child(odd){animation-duration:3.3s;}
  @keyframes winFlick{from{fill:#a8631e;opacity:.7}to{fill:#ffd06a;opacity:1}}
  .ls-ground{position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(#0a0710,#05040a);}
  .torch{position:absolute;bottom:9%;width:8px;height:34px;background:linear-gradient(#3a2a18,#1a1208);border-radius:2px;}
  .torchL{left:calc(50% - 70px);} .torchR{left:calc(50% + 62px);}
  .torch .flame{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:16px;height:24px;
    background:radial-gradient(circle at 50% 72%,#fff2b0,#ff9a1a 48%,#d8331a 80%,transparent 86%);
    border-radius:50% 50% 48% 48%/62% 62% 40% 40%;filter:blur(.6px);
    box-shadow:0 0 18px 7px rgba(255,140,30,.55);animation:flick .22s ease-in-out infinite alternate;}
  @keyframes flick{from{transform:translateX(-50%) scale(1) translateY(0);opacity:.9}
    to{transform:translateX(-52%) scale(1.12,1.22) translateY(-3px);opacity:1}}
  /* rising spells (showcase the magic) */
  .ls-spells{position:absolute;inset:0;}
  .spell{position:absolute;bottom:8%;width:12px;height:12px;image-rendering:pixelated;}
  .spell .orb{position:absolute;left:0;bottom:0;width:6px;height:6px;border-radius:0;background:#fff;
    box-shadow:0 0 0 2px var(--c), 0 7px 0 -1px var(--c), 0 13px 0 -2px var(--c), 0 0 9px 3px var(--c);
    opacity:0;animation:spellRise var(--d,4.5s) linear infinite;animation-delay:var(--dl,0s);}
  @keyframes spellRise{0%{transform:translateY(8vh) scale(.7);opacity:0}
    9%{opacity:1}88%{opacity:1}100%{transform:translateY(-118vh) scale(1.05);opacity:0}}
  .spell .boom{display:none;}
  .cwin.dim{fill:#7a4a1e;opacity:.55;animation-duration:4s;}
  .ls-content{position:relative;z-index:2;width:100%;}
  .ls-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0;}
  .loginCard{width:400px;max-width:90vw;background:linear-gradient(#241f17,#16120c);border:2px solid #c9a24a;border-radius:12px;
    padding:30px 30px;box-shadow:0 0 0 1px #000,0 18px 60px rgba(0,0,0,.7),0 0 40px rgba(201,162,74,.15);text-align:center;}
  /* ===== pixel-art brand theme ===== */
  #loginOverlay,#loadingScreen{font-family:'Pixelify Sans',monospace;}
  .loginCard{border-radius:0;box-shadow:0 0 0 3px #0a0712,0 0 0 6px #c9a24a,0 14px 0 rgba(0,0,0,.4);}
  .lsub{font-family:'Pixelify Sans',monospace;font-size:26px;font-style:normal;letter-spacing:.5px;color:#bfe3ff;}
  .loginCard input{font-family:'Pixelify Sans',monospace;font-size:26px;border-radius:0;border-width:2px;}
  .lbtns button{font-family:'Pixelify Sans',sans-serif;font-weight:500;font-size:20px;border-radius:0;padding:12px 6px;letter-spacing:0;box-shadow:0 4px 0 rgba(0,0,0,.45);}
  .lbtns button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.45);}
  #btnRegister{background:linear-gradient(#5aa0e0,#2f6fb8);color:#fff;border:1px solid #1a3a6a;}
  #loginStatus{font-family:'Pixelify Sans',monospace;font-size:22px;}
  .ls-hint{font-family:'Pixelify Sans',sans-serif;font-size:18px;}
  .ls-panel{border-radius:0;box-shadow:0 0 0 2px #0a0712,0 0 0 4px #6a5a2a;}
  .ls-panel h3{font-family:'Pixelify Sans',sans-serif;font-weight:500;font-size:22px;line-height:1.4;}
  .ls-panel h3 button{border-radius:0;}
  .ls-item b,.ann-title,.hs-name{font-family:'Pixelify Sans',monospace;font-size:25px;}
  .ls-item span,.ann-body div,.ls-note,.ls-scores li,.foot-donate p,.foot-copy,.foot-soon{font-family:'Pixelify Sans',monospace;font-size:23px;}
  .ann-date,.hs-lvl,.hs-cb,.hs-tot,.foot-links a,.hs-cell i,.hs-cell b{font-family:'Pixelify Sans',monospace;font-size:22px;}
  .ann-tag{font-family:'Pixelify Sans',sans-serif;font-weight:500;font-size:13px;}
  .hs-rank{font-family:'Pixelify Sans',sans-serif;font-weight:600;font-size:19px;}
  .foot-d-title{font-family:'Pixelify Sans',sans-serif;font-weight:500;font-size:22px;}
  .dbtn{font-family:'Pixelify Sans',sans-serif;font-weight:500;font-size:19px;border-radius:0;box-shadow:0 4px 0 rgba(0,0,0,.4);}
  .load-text{font-family:'Pixelify Sans',sans-serif;font-size:19px;letter-spacing:1px;}
  .ls-foot,.foot-donate{border-radius:0;}
  .foot-donate{box-shadow:0 0 0 2px #0a0712,0 0 0 4px #6a5a2a;}
  .ls-castle{image-rendering:pixelated;}
  .ls-logo{display:block;width:320px;max-width:100%;height:auto;margin:0 auto 12px;
    image-rendering:pixelated;image-rendering:crisp-edges;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,210,90,.25));
    animation:emblemFloat 3.4s ease-in-out infinite;}
  .ls-logo.load{width:260px;}
  @keyframes emblemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes logoFire{
    from{color:#ffce3a;text-shadow:0 0 5px #ffb33a,0 0 12px #ff7a1a,0 2px 0 #000}
    to{color:#ffe89a;text-shadow:0 0 10px #ffd24a,0 0 22px #ff9a2a,0 0 38px #ff5a1a,0 2px 0 #000}}
  .lsub{color:#d8c79a;font-size:15px;margin:8px 0 18px;line-height:1.5;font-style:italic;}
  .loginCard input{width:100%;box-sizing:border-box;margin:5px 0;padding:10px;border:1px solid #c9a24a;border-radius:6px;
    background:#0f0c07;color:#fff;font-size:17px;}
  .loginCard input:focus{outline:none;border-color:#ffd23a;box-shadow:0 0 8px rgba(255,210,58,.4);}
  .lbtns{display:flex;gap:8px;margin-top:12px;}
  .lbtns button{flex:1;padding:10px;border:none;border-radius:6px;font-size:16px;font-weight:bold;cursor:pointer;}
  #btnLogin{background:linear-gradient(#ffe07a,#ffc21a);color:#1a1206;border:1px solid #8a6a1a;}
  #btnRegister{background:linear-gradient(#6a5a32,#4a3d20);color:#ffe;border:1px solid #2a2110;}
  .lbtns button:hover{filter:brightness(1.12);transform:translateY(-1px);}
  #loginStatus{color:#ff9a6a;font-size:13px;margin-top:10px;min-height:14px;}
  #btnSendCode,#btnVerify{background:linear-gradient(#ffe07a,#ffc21a);color:#1a1206;border:1px solid #8a6a1a;}
  #btnBackEmail{background:linear-gradient(#4a3d20,#352a16);color:#ffe;border:1px solid #2a2110;flex:0 0 84px;}
  .lremember{display:flex;align-items:center;gap:8px;justify-content:center;color:#d8c79a;font-size:14px;margin:10px 0 2px;cursor:pointer;user-select:none;}
  .lremember input{width:auto;margin:0;accent-color:#ffc21a;}
  .lverified{display:flex;align-items:center;justify-content:center;gap:7px;margin:11px 0 2px;color:#bcd0e6;font-size:13px;
    background:#11161d;border:1px solid #2b3a4a;border-radius:7px;padding:8px 10px;}
  .lvcheck{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#2ecc71;color:#06210f;font-size:13px;font-weight:bold;flex:none;}
  .lverified b{color:#f6821f;letter-spacing:.3px;}
  .lcodemsg{color:#d8c79a;font-size:15px;line-height:1.55;margin:2px 0 12px;}
  .lcodemsg b{color:#bfe3ff;}
  .lcodeinput{text-align:center;letter-spacing:12px;font-size:29px!important;padding:12px 10px!important;font-weight:bold;}
  .lresend{margin-top:10px;font-size:13px;color:#bda;}
  .lresend a{color:#ffd23a;cursor:pointer;text-decoration:underline;}
  #turnstileBox{display:flex;justify-content:center;margin:9px 0 2px;}
  .lor{display:flex;align-items:center;gap:10px;color:#7a6f52;font-size:13px;margin:12px 0 10px;text-transform:uppercase;letter-spacing:1px;}
  .lor::before,.lor::after{content:"";flex:1;height:1px;background:#3a3322;}
  #googleBtn{display:flex;justify-content:center;min-height:40px;}
  .ls-devnote{margin-top:8px;font-size:13px;color:#9fe0a0;background:#10210f;border:1px solid #2a5a2a;border-radius:6px;padding:7px;}
  .ls-hint{margin-top:26px;color:#e8d6a8;font-size:17px;letter-spacing:1px;opacity:.85;
    animation:bob 1.6s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}
  .ls-home{max-width:760px;margin:0 auto;padding:20px 16px 8px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .ls-panel{background:linear-gradient(#241f17,#191309);border:1px solid #c9a24a;border-radius:10px;padding:16px 18px;
    box-shadow:0 10px 30px rgba(0,0,0,.5);}
  .ls-panel h3{margin:0 0 12px;color:#ffd23a;font-size:23px;border-bottom:1px solid #6a5a2a;padding-bottom:8px;}
  .ls-item{margin-bottom:12px;}
  .ls-item b{display:block;color:#ffe7a8;font-size:19px;margin-bottom:2px;}
  .ls-item span{color:#c7b78c;font-size:17px;line-height:1.45;}
  .ls-scores{list-style:none;margin:0;padding:0;}
  .ls-scores li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed #4a3d20;color:#e2d3a6;font-size:19px;}
  .ls-scores li span{color:#ffd23a;font-weight:bold;width:20px;}
  .ls-scores li b{margin-left:auto;color:#9adfff;font-size:17px;}
  .ls-note{margin-top:10px;color:#9a8a5a;font-size:16px;font-style:italic;}
  .ls-panel h3 button{float:right;background:#3e3220;color:#ffd23a;border:1px solid #6a5a2a;border-radius:5px;
    cursor:pointer;font-size:19px;line-height:1;padding:2px 7px;}
  .ls-panel h3 button:hover{background:#5c4a30;}
  /* expandable announcements */
  .ann-row{border-bottom:1px dashed #4a3d20;}
  .ann-head{display:flex;align-items:baseline;gap:8px;padding:9px 2px;cursor:pointer;}
  .ann-head:hover .ann-title{color:#fff;}
  .ann-date{color:#9a8a5a;font-size:15px;white-space:nowrap;}
  .ann-tag{font-size:13px;font-weight:bold;padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
  .ann-tag.update{background:#2a4a2a;color:#8aff8a;} .ann-tag.patch{background:#2a3a5a;color:#8ac0ff;} .ann-tag.news{background:#5a3a2a;color:#ffc08a;}
  .ann-title{color:#ffe7a8;font-size:19px;font-weight:bold;flex:1;}
  .ann-exp{color:#9a8a5a;font-size:16px;transition:transform .2s;}
  .ann-row.open .ann-exp{transform:rotate(180deg);}
  .ann-body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .ann-row.open .ann-body{max-height:320px;}
  .ann-body div{color:#c7b78c;font-size:17px;line-height:1.5;padding:0 2px 11px;}
  .ann-body li{margin-left:16px;}
  /* highscores rows */
  #hsList{margin-top:2px;}
  .hs-row{border-bottom:1px dashed #4a3d20;}
  .hs-head{display:flex;align-items:center;gap:8px;padding:8px 2px;cursor:pointer;}
  .hs-head:hover{background:rgba(201,162,74,.06);}
  .hs-rank{color:#ffd23a;font-weight:bold;width:22px;text-align:center;}
  .hs-row:nth-child(1) .hs-rank{color:#ffd700;text-shadow:0 0 6px #ffd70080;}
  .hs-row:nth-child(2) .hs-rank{color:#cfd2d6;} .hs-row:nth-child(3) .hs-rank{color:#e0903a;}
  .hs-name{color:#e8dcc0;font-size:19px;font-weight:bold;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hs-lvl{color:#9adfff;font-size:17px;} .hs-cb{color:#ff8a6a;font-size:16px;}
  .hs-exp{color:#9a8a5a;font-size:16px;transition:transform .2s;}
  .hs-row.open .hs-exp{transform:rotate(180deg);}
  .hs-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .hs-row.open .hs-body{max-height:520px;}
  .hs-sec{color:#ffd23a;font-size:16px;font-weight:bold;margin:8px 0 4px;letter-spacing:.5px;}
  .hs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding-bottom:4px;}
  .hs-cell{background:linear-gradient(#241f17,#16120c);border:1px solid #5a4a2a;border-radius:5px;padding:4px 2px;text-align:center;}
  .hs-cell span{font-size:19px;} .hs-cell b{display:block;color:#ffe27a;font-size:19px;} .hs-cell i{color:#9a8a5a;font-size:12px;font-style:normal;display:block;}
  .hs-tot{color:#c7b78c;font-size:16px;text-align:center;padding:8px 0 10px;border-top:1px solid #3a301c;margin-top:6px;}
  /* footer + donations */
  .ls-foot{max-width:760px;margin:0 auto;padding:14px 16px 40px;color:#a89a6a;font-size:16px;}
  .foot-donate{background:linear-gradient(#241f17,#191309);border:1px solid #c9a24a;border-radius:10px;padding:16px 18px;text-align:center;}
  .foot-d-title{color:#ffd23a;font-size:22px;font-weight:bold;margin-bottom:8px;}
  .foot-donate p{color:#c7b78c;font-size:17px;line-height:1.55;margin:0 auto 12px;max-width:560px;}
  .foot-donate b{color:#e8dcc0;}
  .foot-btns{display:flex;gap:10px;justify-content:center;}
  .dbtn{text-decoration:none;font-weight:bold;font-size:19px;padding:9px 18px;border-radius:8px;color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .12s,filter .12s;}
  .dbtn:hover{transform:translateY(-2px);filter:brightness(1.1);}
  .dbtn.kofi{background:linear-gradient(#ff7a4a,#e54a2a);} .dbtn.paypal{background:linear-gradient(#3a8adf,#1a5abf);}
  .foot-links{text-align:center;margin:14px 0 6px;} .foot-soon{color:#7a6c4a;font-size:16px;font-style:italic;}
  .foot-links a{color:#c9a24a;text-decoration:none;font-size:16px;} .foot-links a:hover{color:#ffd23a;text-decoration:underline;}
  .foot-copy{text-align:center;color:#8a7c5a;font-size:13px;letter-spacing:.4px;}
  @media(max-width:560px){.ls-home{grid-template-columns:1fr;}}
  /* loading screen */
  #loadingScreen{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;flex-direction:column;
    background:radial-gradient(circle at 50% 40%,#1a1230,#070512 75%);transition:opacity .5s ease;opacity:1;
    font-family:'Pixelify Sans',monospace;}
  .load-inner{display:flex;flex-direction:column;align-items:center;}
  .load-flames{display:flex;gap:4px;margin:18px 0 14px;height:26px;align-items:flex-end;justify-content:center;}
  .load-flames span{width:6px;height:6px;border-radius:0;image-rendering:pixelated;
    background:linear-gradient(#ffe27a,#ff8a1a 55%,#d23a1a);box-shadow:0 0 6px rgba(255,140,30,.5);
    animation:loadFlame .7s steps(3) infinite alternate;}
  .load-flames span:nth-child(2){animation-delay:.1s} .load-flames span:nth-child(3){animation-delay:.2s}
  .load-flames span:nth-child(4){animation-delay:.3s} .load-flames span:nth-child(5){animation-delay:.15s}
  .load-flames span:nth-child(6){animation-delay:.25s} .load-flames span:nth-child(7){animation-delay:.05s}
  @keyframes loadFlame{from{height:6px;opacity:.7}to{height:24px;opacity:1}}
  .load-text{color:#c7b78c;font-size:18px;letter-spacing:1px;animation:twinkle 1.2s ease-in-out infinite alternate;}
  /* gold coin click burst */
  .coin{position:fixed;pointer-events:none;z-index:320;font-size:22px;will-change:transform,opacity;
    animation:coinpop .85s ease-out forwards;}
  @keyframes coinpop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
    18%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.05) rotate(220deg);opacity:0}}
  #cursorFx{position:fixed;pointer-events:none;z-index:130;width:30px;height:30px;margin:-15px 0 0 -15px;
    border:3px solid #ffe27a;border-radius:50%;opacity:0;box-shadow:0 0 8px #ffd23a;}
  #cursorFx.go{animation:cclick .42s ease-out;}
  @keyframes cclick{0%{opacity:.95;transform:scale(.3);}100%{opacity:0;transform:scale(1.5);}}
  /* ---- elegant pass: gold trim, rounding, shadows, textures ---- */
  .slot{border-radius:5px;}
  .slot.has{background:radial-gradient(circle at 50% 35%,rgba(255,240,180,.06),rgba(0,0,0,0));}
  #map{box-shadow:inset 0 0 0 2px #5a4a32,0 0 0 3px #c9a24a,0 4px 14px rgba(0,0,0,.6);}
  .orb{box-shadow:0 0 0 2px #c9a24a,0 2px 5px rgba(0,0,0,.6);}
  #panel{box-shadow:inset 0 2px 8px rgba(0,0,0,.5);}
  .eqslot{border-radius:5px;}
  .sty{border-radius:5px;}
  .mbox{border-radius:10px;border:2px solid #c9a24a;box-shadow:0 12px 40px rgba(0,0,0,.8);}
  .mhead{border-radius:8px 8px 0 0;background:linear-gradient(#7a4426,#5a2f17);border-bottom:1px solid #c9a24a;}
  #chatlog{border-radius:4px;}
  /* right-click context menu — parchment/stone, gold-framed */
  #ctx{min-width:0;width:max-content;max-width:240px;border:2px solid #c9a24a;border-radius:3px;overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.7),0 0 0 1px rgba(255,225,150,.22) inset;font-family:'Pixelify Sans',sans-serif;
    background:linear-gradient(rgba(42,48,58,.93),rgba(28,32,40,.95));}   /* slate, slightly transparent */
  #ctx .hd{background:linear-gradient(#586474,#3a4452);color:#ffe9b0;padding:3px 9px;font-weight:bold;
    font-size:14px;border-bottom:1px solid #c9a24a;text-shadow:1px 1px #000;letter-spacing:.3px;white-space:nowrap;}
  #ctx .it{padding:4px 10px;cursor:pointer;color:#e8eef6;background:transparent;font-size:14px;border-bottom:1px solid rgba(0,0,0,.28);white-space:nowrap;}
  #ctx .it:last-child{border-bottom:none;}
  #ctx .it:hover{background:linear-gradient(90deg,rgba(201,162,74,.4),rgba(201,162,74,.1));color:#fff;}
  #tip{border-radius:4px;border:1px solid #c9a24a;box-shadow:0 4px 14px rgba(0,0,0,.6);padding:2px 7px;
    background:linear-gradient(rgba(32,36,44,.92),rgba(22,26,32,.95));color:#ffe9b0;}
  #tip .tipmain{font-weight:bold;font-size:14px;color:#fff;text-shadow:1px 1px #000;}
  #tip .tiphint{font-size:11px;color:#aab3c0;margin-top:1px;}
  /* skill how-to modal */
  #skillModal .mbox{width:360px;}
  #skillBody{padding:12px 14px;color:#e8dcc0;font-size:16px;line-height:1.5;flex:1 1 auto;min-height:0;overflow-y:auto;}
  #skillBody .skhow b{color:#ffe27a;}
  #skillBody .skhow i{color:#cdbb88;font-style:italic;}
  #skillBody .skh2{margin:9px 0 2px;color:#c98a4a;text-transform:uppercase;letter-spacing:.6px;font-size:12px;font-weight:bold;}
  #skillBody .skref{width:100%;border-collapse:collapse;font-size:13px;}
  #skillBody .skref td{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;}
  #skillBody .skref td.x{text-align:right;color:#8fd0ff;white-space:nowrap;padding-left:12px;font-weight:bold;}
  #skillBody .sknote{margin-top:7px;color:#b6a982;font-size:12.5px;font-style:italic;}
  #skillBody .skbig{font-size:22px;color:#ffe27a;font-weight:bold;text-shadow:1px 1px #000;margin-bottom:2px;}
  #skillBody .sklvl{color:#cdbb88;font-size:14px;margin-bottom:8px;}
  #skillBody .skbar{height:10px;background:#1a1206;border:1px solid #000;border-radius:5px;overflow:hidden;margin:6px 0 10px;}
  #skillBody .skbar i{display:block;height:100%;background:linear-gradient(#ffe27a,#c98a2a);}
  #skillBody .skhow{background:rgba(0,0,0,.25);border-left:3px solid #c9a24a;border-radius:3px;padding:8px 10px;}
  .nlabel .nm{display:none;}
  .nlabel.signlbl .nm{display:block;font-size:19px;line-height:1;text-shadow:0 0 5px #000,1px 1px 2px #000;}
  .nlabel.zonelbl .nm{font-size:13px;font-weight:normal;letter-spacing:.3px;text-shadow:0 0 3px #000,1px 1px 1px #000;}
  #zoneBanner{position:absolute;top:54px;left:50%;transform:translate(-50%,-10px);
    color:#ffe7a8;font-family:'Pixelify Sans',sans-serif;font-size:36px;font-weight:600;letter-spacing:1px;
    white-space:nowrap;text-align:center;
    text-shadow:0 0 6px #ffcf3a,0 0 16px #ff9a2a,0 0 30px #ff7a1a,0 2px 2px #000;
    opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease;z-index:42;}
  #zoneBanner.show{opacity:1;transform:translate(-50%,0);}
  #zoneBanner .zb-emoji{margin-right:10px;filter:drop-shadow(0 0 6px #000);}
  #zoneBanner .zb-lv{color:#9adfff;text-shadow:0 0 6px #3aa0ff,0 0 16px #2a6fd8,0 2px 2px #000;}
  #zoneBanner .zb-safe{color:#9aff9a;text-shadow:0 0 6px #4aff4a,0 0 16px #2aa02a,0 2px 2px #000;}
  .nlabel.you .nm{display:inline;}
  .nlabel.unitlbl .nm{display:inline-block;font-size:12px;line-height:1.1;text-shadow:0 0 3px #000,1px 1px 1px #000;
    background:rgba(16,18,24,.5);border:1px solid rgba(201,162,74,.55);border-radius:4px;padding:1px 7px;
    box-shadow:0 1px 4px rgba(0,0,0,.5);}
  .nlabel.unitlbl.mob .nm{color:#ff6a6a;}
  .nlabel.unitlbl.mob.tl-low  .nm{color:#86f06a;border-color:rgba(120,224,110,.7);}   /* easy: green */
  .nlabel.unitlbl.mob.tl-even .nm{color:#74b8ff;border-color:rgba(110,176,255,.7);}   /* even: blue */
  .nlabel.unitlbl.mob.tl-high .nm{color:#c79bff;border-color:rgba(184,140,255,.75);}  /* dangerous: purple */
  .nlabel.unitlbl.friendly .nm{color:#ffd24a;border-color:rgba(201,162,74,.7);}        /* NPC: friendly gold */
  .nlabel.unitlbl.aggro .nm{color:#fff !important;border-color:#ff4a4a !important;
    background:rgba(60,10,10,.72) !important;
    text-shadow:0 0 6px #ff4a4a,0 0 12px #ff2a2a,0 0 2px #000 !important;
    box-shadow:0 0 9px 1px rgba(255,46,46,.92),0 0 18px 4px rgba(255,40,40,.55) !important;}
  .nlabel.targeted .nm{color:#fff !important;border-color:#ffe23a !important;
    background:rgba(60,46,8,.72);
    text-shadow:0 0 6px #ffe23a,0 0 12px #ffb300,0 0 2px #000;
    box-shadow:0 0 8px 1px rgba(255,210,40,.85),0 0 16px 3px rgba(255,160,0,.5);
    animation:tgtpulse 1s ease-in-out infinite;}
  @keyframes tgtpulse{0%,100%{box-shadow:0 0 7px 1px rgba(255,210,40,.7),0 0 14px 3px rgba(255,160,0,.4);}
    50%{box-shadow:0 0 11px 2px rgba(255,225,90,1),0 0 22px 6px rgba(255,180,0,.6);}}
  #logoutBtn{background:linear-gradient(#7a3322,#531f12);color:#ffd6a0;border:1px solid #c9a24a;}
  #settingsBtn{background:linear-gradient(#3a342b,#241f17);color:#ffe7a8;border:1px solid #c9a24a;}
  #mapBtn{background:linear-gradient(#2a3a4a,#16242e);color:#bfe3ff;border:1px solid #4a7aa0;}
  #settingsModal,#optionsModal,#donateModal,#logoutModal,#renameModal,#graphicsModal,#personalizationModal{position:fixed;inset:0;z-index:96;background:rgba(6,4,10,.72);display:none;align-items:center;justify-content:center;}
  #settingsModal.open,#optionsModal.open,#donateModal.open,#logoutModal.open,#renameModal.open,#graphicsModal.open,#personalizationModal.open{display:flex;}
  #settingsModal.open{flex-direction:column;}
  #settingsModal .sbox,#optionsModal .sbox,#donateModal .sbox,#logoutModal .sbox,#renameModal .sbox,#graphicsModal .sbox,#personalizationModal .sbox{width:360px;max-width:92vw;background:linear-gradient(#241f17,#15110b);
    border:2px solid #c9a24a;box-shadow:0 0 0 2px #0a0712,0 18px 50px rgba(0,0,0,.7);border-radius:10px;overflow:hidden;}
  #settingsModal .shd,#optionsModal .shd,#donateModal .shd,#logoutModal .shd,#renameModal .shd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
    font-family:'Pixelify Sans',sans-serif;font-size:24px;color:#ffe7a8;border-bottom:1px solid #4a3c24;background:linear-gradient(#2a2418,#201a10);}
  #settingsModal .sx,#optionsModal .sx,#donateModal .sx,#logoutModal .sx,#renameModal .sx{cursor:pointer;color:#d8a35a;font-size:22px;padding:0 4px;}
  #settingsModal .sx:hover,#optionsModal .sx:hover,#donateModal .sx:hover,#logoutModal .sx:hover,#renameModal .sx:hover{color:#ffd98a;}
  #settingsModal .sbody,#optionsModal .sbody,#donateModal .sbody,#logoutModal .sbody,#renameModal .sbody{padding:16px;font-family:'Pixelify Sans',monospace;font-size:22px;color:#d8cfb8;}
  .sbtn{display:block;width:100%;box-sizing:border-box;text-align:center;cursor:pointer;margin:8px 0;
    font-family:'Pixelify Sans',sans-serif;font-size:18px;color:#fff;border-radius:6px;padding:11px;text-decoration:none;}
  .sbtn.guide{background:linear-gradient(#3a6ac4,#264a8a);border:2px solid #1a2a4a;}
  .sbtn.donate{background:linear-gradient(#4a463e,#2f2c26);border:2px solid #5a5446;}
  .sbtn.settings{background:linear-gradient(#c9a24a,#9a7a2a);border:2px solid #6a531a;color:#1a1208;}
  .sbtn.worldmap{background:linear-gradient(#2aa37a,#177a55);border:2px solid #0e4a33;}
  .sbtn.logout{background:linear-gradient(#7a3322,#531f12);border:2px solid #c9a24a;color:#ffd6a0;}
  .sbtn.unstuck{background:linear-gradient(#e0902a,#b5611a);border:2px solid #7a3d0e;}
  .sbtn.kofi{background:linear-gradient(#29abe0,#1878a8);border:2px solid #10567a;}
  .sbtn.paypal{background:linear-gradient(#3a6ac4,#26407a);border:2px solid #1a2a4a;}
  .sbtn:hover{filter:brightness(1.13);}
  #donateModal .sbody p{line-height:1.35;color:#cdbb88;margin:0 0 12px;}

/* baked-in pixel-art tab icons */
.tabrow .tab{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1;}
.tabico{width:26px;height:26px;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}
.tab.active .tabico{filter:drop-shadow(0 0 4px rgba(255,210,90,.9));}

/* tab icons */
.tabrow .tab{background-repeat:no-repeat;background-position:center;background-size:contain;image-rendering:auto;font-size:0;text-indent:-9999px;}
.tabrow .tab[data-panel="inv"]{background-image:url("/assets/tab_inventory.png");}
.tabrow .tab[data-panel="equip"]{background-image:url("/assets/tab_equipment.png");}
.tabrow .tab[data-panel="combat"]{background-image:url("/assets/tab_combat.png");}
.tabrow .tab[data-panel="skills"]{background-image:url("/assets/tab_skills.png");}
.tabrow .tab[data-panel="powers"]{background-image:url("/assets/tab_powers.png");}
.tabrow .tab[data-panel="quest"]{background-image:url("/assets/tab_quests.png");}
.tabrow .tab[data-panel="social"]{background-image:url("/assets/tab_social.png");}

/* ============================================================
   TEXT-SIZE SCALING  (controlled by sliders in Settings)
   --ui-scale   : info panels (inventory/skills/equipment + player frame)
   --game-scale : world + chat text (chat, floating dmg, nameplates, zone banner)
   --hover-scale: tooltips / context menu
   ============================================================ */
/* UI text: fixed sizes — windows scale via their resize grips, not a slider */
.winbar{font-size:12px;}
#pfName,#tfName{font-size:14px;}
.pf-lab{font-size:12px;}
.ptxt{font-size:12px;}
#chatlog{font-size:14px;}
#chatinput input{font-size:14px;}
#chanBtn,#chatDrag{font-size:13px;}

.floatmsg{font-size:calc(14px * var(--game-scale));}
.nlabel{font-size:calc(13px * var(--game-scale));}
.nlabel .ovh{font-size:calc(15px * var(--game-scale));}
#zoneBanner{font-size:calc(36px * var(--game-scale));}

#tip{font-size:calc(14px * var(--hover-scale));}
#ctx{font-size:calc(16px * var(--hover-scale));}

/* ---- minimap corner icon buttons ---- */
.mapcorner{position:absolute;width:24px;height:24px;z-index:6;display:flex;align-items:center;justify-content:center;
  font-size:14px;border-radius:5px;cursor:pointer;user-select:none;
  background:linear-gradient(#3a342b,#241f17);border:1px solid #c9a24a;
  box-shadow:0 2px 6px rgba(0,0,0,.6);text-shadow:1px 1px #000;}
.mapcorner:hover{filter:brightness(1.25);}
.mc-bl{left:6px;bottom:6px;}
.mc-tr{right:6px;top:6px;background:linear-gradient(#7a3322,#531f12);}
.mc-br{right:6px;bottom:6px;background:linear-gradient(#c9a24a,#9a7a2a);color:#1a1208;text-shadow:none;}

/* ---- Items & Skills bar: title + settings cog ---- */
#invDrag{justify-content:center;position:relative;}
#invDrag .wb-title{flex:none;text-align:center;}
#invDrag .wb-cog{cursor:pointer;font-size:14px;color:#ffe7a8;padding:0 2px;position:absolute;right:6px;left:auto;top:50%;transform:translateY(-50%);text-shadow:1px 1px #000;}
#invDrag .wb-cog:hover{color:#ffd98a;filter:brightness(1.2);}
#invDrag .wb-info{position:absolute;right:6px;top:50%;transform:translateY(-50%);cursor:help;font-size:11px;opacity:.8;}
#invDrag .wb-info:hover{opacity:1;}

/* ---- Settings slider rows ---- */
.setrow{margin:6px 0 14px;}
.setrow label{display:flex;justify-content:space-between;align-items:center;font-size:16px;color:#d8cfb8;margin-bottom:6px;}
.setrow .setval{color:#ffd23a;font-size:15px;}
.setrow input[type=range]{width:100%;accent-color:#c9a24a;cursor:pointer;}
.setdiv{height:1px;background:rgba(201,162,74,.3);margin:14px 0;}

/* Settings "Back" button + spell hover tooltip */
.sback{cursor:pointer;color:#d8a35a;font-size:15px;padding:0 4px;}
.sback:hover{color:#ffd98a;}
#tip .tipmain{font-weight:bold;margin-bottom:2px;}
#tip .tipline{color:#e8dcc0;}
#tip .tipline b{color:#ffd23a;}
#tip .tipdesc{color:#bcae8a;margin-top:3px;max-width:200px;white-space:normal;}

/* ====== HUD frames: gold (player) / green-blue-purple (mob by level) ====== */
.hudframe{border:2px solid var(--fc,#e8c24a)!important;border-radius:9px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.55), 0 0 9px var(--fcg,rgba(232,194,74,.5));}
.hudframe::before{content:"";position:absolute;inset:-5px;border-radius:12px;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 0 0,     var(--fc) 0 5px,transparent 6px),
    radial-gradient(circle at 100% 0,  var(--fc) 0 5px,transparent 6px),
    radial-gradient(circle at 0 100%,  var(--fc) 0 5px,transparent 6px),
    radial-gradient(circle at 100% 100%,var(--fc) 0 5px,transparent 6px);
  filter:drop-shadow(0 0 3px var(--fc));}
.hudframe::after{content:"";position:absolute;left:8px;right:8px;top:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--fc),transparent);opacity:.7;}
.fc-gold  {--fc:#e8c24a;--fcg:rgba(232,194,74,.55);}
.fc-green {--fc:#4ac86a;--fcg:rgba(74,200,106,.5);}
.fc-blue  {--fc:#3aa0e0;--fcg:rgba(58,160,224,.5);}
.fc-purple{--fc:#b060e0;--fcg:rgba(176,96,224,.5);}

/* ====== Equipment paperdoll ====== */
.eqhdr{display:flex;align-items:center;justify-content:space-between;}
.eqstatsbtn{font-family:'Pixelify Sans',sans-serif;font-size:11px;color:#1a1208;cursor:pointer;
  background:linear-gradient(#c9a24a,#9a7a2a);border:1px solid #6a531a;border-radius:5px;padding:2px 7px;}
.eqstatsbtn:hover{filter:brightness(1.12);}
.eqdoll{display:grid;grid-template-columns:repeat(4,42px);grid-auto-rows:42px;gap:9px 12px;justify-content:space-around;padding:8px 6px 2px;
  grid-template-areas:
   ".      helm   .      mounts"
   "amulet body   cape   halo"
   "weapon legs   shield barrier"
   "gloves boots  ring   sigil"
   "belt   ammo   ring2  .";}
.eqfoot{position:absolute;left:6px;bottom:5px;display:flex;justify-content:flex-start;z-index:2;}
#eqExpandBtn{font-family:'Pixelify Sans',sans-serif;font-size:12px;cursor:pointer;color:#cdbb88;
  background:linear-gradient(#3a342b,#241f17);border:1px solid #5a4c2c;border-radius:5px;padding:4px 9px;}
#eqExpandBtn:hover{border-color:#c9a24a;color:#fff;}
#eqExpandBtn span{font-size:11px;}
.eqslot.eqmount{background:linear-gradient(#2f3a2a,#1e261b);border:1px solid #4a6a40;cursor:pointer;}
.eqslot.eqspecial{background:linear-gradient(#332a3e,#1f1a28);border:1px solid #5a4a6e;box-shadow:inset 0 0 0 1px #2a2236;}
.eqslot.eqmount:hover{background:linear-gradient(#3a4a32,#26301f);}
.eqslot.eqmount .ei{font-size:19px;}
.eqslot.eqmount .en{font-size:8px;color:#bfe0bf;text-transform:none;}
.eqdoll .eqslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  height:46px;width:46px;background:#3a3224;border-radius:6px;padding:2px;cursor:pointer;overflow:hidden;}
.eqdoll .eqslot:hover{background:#4a4030;}
.eqdoll .eqslot .ei{font-size:20px;line-height:1;}
.eqdoll .eqslot .en{font-size:8.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;}

/* ====== Equipment stats modal ====== */
#statsModal{position:fixed;inset:0;z-index:97;background:rgba(6,4,10,.72);display:none;align-items:center;justify-content:center;}
#statsModal.open{display:flex;}
.statstbl{width:100%;border-collapse:collapse;font-size:13px;color:#d8cfb8;margin-bottom:10px;}
.statstbl th{text-align:left;color:#ffd23a;border-bottom:1px solid #6a5a2a;padding:3px 5px;font-size:12px;}
.statstbl td{padding:3px 5px;border-bottom:1px solid rgba(106,90,42,.3);}
.statsum{background:rgba(0,0,0,.28);border:1px solid #6a5a2a;border-radius:6px;padding:8px 10px;margin-top:8px;font-size:13px;color:#cdbb96;line-height:1.5;}

/* ====== Powers tab: compact header + grid ====== */
.pwwrap{width:100%;height:100%;display:flex;flex-direction:column;gap:3px;box-sizing:border-box;padding:2px;}
.pwhead{position:relative;display:flex;align-items:center;justify-content:center;flex:none;padding:2px 0;}
.pwtitle{font-size:14px;font-weight:bold;color:#cdbb88;}
.pwinfo{position:absolute;right:2px;top:1px;cursor:help;font-size:13px;}
.pgrid{flex:1;min-height:0;overflow-y:auto;align-content:start;}

/* ====== Equipment: smaller slots, no scroll ====== */
#equipPanel{overflow:hidden;}
.eqstatsbtn.alt{background:linear-gradient(#4a463e,#2f2c26);border:1px solid #5a5446;color:#e8dcc0;margin-right:4px;}
.eqdoll{gap:4px;padding:4px 2px;}
.eqdoll .eqslot{padding:1px;border-radius:5px;}
.eqdoll .eqslot .ei{font-size:16px;}
.eqdoll .eqslot .en{font-size:7.5px;}

/* ====== Gear-bonuses left slide-out ====== */
#eqSide{display:none;position:fixed;left:50%;top:46px;width:860px;max-width:96vw;max-height:92vh;z-index:90;
  background:linear-gradient(#34301f,#211d14);border:1px solid var(--border);border-radius:9px;
  box-shadow:0 14px 48px rgba(0,0,0,.62);overflow:hidden;flex-direction:column;}
#eqSide .eshd{cursor:move;}
#eqSide .esbody{overflow:visible;}
#eqSide .eqwrap{display:flex;gap:18px;align-items:flex-start;}
#eqSide .eqleft{display:flex;flex-direction:column;gap:12px;flex:0 0 auto;}
#eqSide .eqright{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}
#eqSide #eqCharCv{position:relative !important;left:auto !important;top:auto !important;width:300px;height:360px;flex:0 0 auto;border-radius:8px;
  background:radial-gradient(circle at 50% 32%,#403828,#14110b);border:1px solid #4a4128;}
#eqSide .esinfo{display:flex;flex-direction:column;}
#eqSide .esgrid{display:flex;flex-direction:column;margin-top:3px;}
#eqSide .esitem{padding:4px 0;border-top:1px solid rgba(201,162,74,.16);line-height:1.4;}
#eqSide .esitem:first-child{border-top:none;padding-top:1px;}
#eqSide .esnm{font-weight:bold;}
#eqSide .esitem .essub{display:inline;color:#9c8c68;font-size:12px;}
#eqSide .eshd{display:flex;align-items:center;justify-content:space-between;background:#2a2418;color:#ffd23a;
  font-family:'Pixelify Sans',sans-serif;font-size:12px;padding:4px 7px;border-bottom:1px solid #000;}
#eqSide .esx{cursor:pointer;color:#d8a35a;font-size:13px;}
#eqSide .esx:hover{color:#ffd98a;}
#eqSide .esbody{padding:7px 9px;font-size:12px;color:#cdbb96;line-height:1.55;}
#eqSide .esbody b{color:#ffec8b;}

/* full stats modal: bigger close */
#statsModal .sx{font-size:20px;}

/* ===== compact pass: equip header/slots + powers ===== */
.eqhdr{font-size:10px;gap:3px;align-items:center;}
.eqhdr>span{font-size:11px;color:#ffec8b;}
.eqstatsbtn{font-size:9px;padding:2px 5px;border-radius:4px;}
.eqstatsbtn.alt{margin-right:3px;}
.eqdoll{gap:3px;padding:3px 2px;}
.eqdoll .eqslot .ei{font-size:14px;}
.eqdoll .eqslot .en{font-size:7px;}

#eqSide{width:min(820px,96vw);max-height:92vh;}
#eqSide .eshd{font-size:12px;padding:4px 8px;}
#eqSide .esbody{font-size:12px;padding:8px 10px;line-height:1.5;overflow:visible;}
#eqSide #eqCharCv{width:260px;height:312px;}

/* powers: smaller, closer, tighter title gap */
.pwwrap{gap:1px;padding:1px;}
.pwhead{padding:0;}
.pwtitle{font-size:12px;}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:3px;}
.pchip{width:32px;height:32px;font-size:18px;}

/* ===== tiny equipment slots + hover-only header icons ===== */
.eqdoll{grid-template-columns:repeat(4,26px);justify-content:center;gap:4px;padding:3px 2px;}
.eqdoll .eqslot{aspect-ratio:1;height:auto;padding:0;border-radius:4px;}
.eqdoll .eqslot .ei{font-size:15px;}
.eqhdr{justify-content:flex-end;gap:4px;align-items:center;padding:1px 2px;}
.eqicon{font-family:'Pixelify Sans',sans-serif;width:20px;height:18px;line-height:1;font-size:13px;color:#e8dcc0;
  cursor:pointer;background:linear-gradient(#4a463e,#2f2c26);border:1px solid #5a5446;border-radius:4px;padding:0;}
.eqicon:hover{filter:brightness(1.25);}

/* ===== detailed-stats side panel (replaces bonus + stats modal) ===== */
#eqSide{width:min(820px,96vw);max-height:92vh;display:none;}
#eqSide .esbody{overflow:visible;padding:9px 11px;font-size:12px;line-height:1.45;}
#eqSide .esblk{margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid rgba(201,162,74,.22);color:#cdbb96;}
#eqSide .esblk:last-child{border-bottom:none;margin-bottom:0;}
#eqSide .esblk b{color:#ffec8b;}
#eqSide .esitem{margin-top:5px;font-size:11.5px;}
#eqSide .essub{color:#9a8f6f;font-size:10.5px;}

/* ===== emotes grid ===== */
.emgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;padding:2px;}
.emchip{display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:18px;
  border:1px solid #6a5a30;border-radius:6px;background:linear-gradient(#2a2418,#1a160e);cursor:pointer;user-select:none;}
.emchip:hover{border-color:#c9a24a;filter:brightness(1.18);}

/* (legacy detailed-stats slide-out rules removed — now a centered draggable modal) */
#eqSide .eshd{flex:0 0 auto;}
.eqhdr{justify-content:flex-start;}

/* ===== paperdoll: spread out + mounts (top-left) + ammo (top-right) + 2nd ring ===== */
.eqdoll{grid-template-columns:repeat(4,1fr);gap:6px;justify-items:center;padding:8px 8px;
  grid-template-areas:
   ".      helm   .      mounts"
   "amulet body   cape   halo"
   "weapon legs   shield barrier"
   "gloves boots  ring   sigil"
   "belt   ammo   ring2  .";}
.eqdoll .eqslot{width:100%;max-width:46px;aspect-ratio:1;height:auto;}

/* ===== quest panel ===== */
.qwrap{width:100%;height:100%;display:flex;flex-direction:column;gap:6px;padding:4px;box-sizing:border-box;overflow-y:auto;}
.qhd{font-size:14px;font-weight:bold;color:#ffd23a;cursor:pointer;border-bottom:1px solid #6a5a2a;padding-bottom:4px;display:flex;justify-content:space-between;align-items:center;}
.qst{font-size:10px;color:#9a8f6f;font-weight:normal;}
.qst.done{color:#7fdc8a;}
.qsteps{display:flex;flex-direction:column;gap:4px;}
.qstep{font-size:12px;color:#cdbb96;}
.qstep.done{color:#7fdc8a;}
.qhint{margin-top:6px;font-size:11px;color:#8a7f5f;}

/* ===== equip title + centered combat info eye + quest sections ===== */
.eqhdr{position:relative;justify-content:center;min-height:16px;}
.eqtitle{font-size:12px;font-weight:bold;color:#ffec8b;}
.eqicon{position:absolute;left:2px;top:50%;transform:translateY(-50%);}
.pwinfo{top:50%;transform:translateY(-50%);}

/* quest panel sections */
.qfilter{display:flex;gap:4px;margin-bottom:6px;flex:none;}
.qfbtn{flex:1;font-family:'Pixelify Sans',sans-serif;font-size:11px;cursor:pointer;padding:3px 0;border-radius:5px;
  background:linear-gradient(#3a342b,#241f17);border:1px solid #5a4c2c;color:#cdbb96;}
.qfbtn.on{background:linear-gradient(#c9a24a,#9a7a2a);border-color:#6a531a;color:#1a1208;font-weight:bold;}
.qrow{border:1px solid #5a4c2c;border-radius:6px;margin-bottom:5px;overflow:hidden;background:rgba(0,0,0,.18);}
.qrow .qhd{padding:6px 8px;border-bottom:none;}
.qrow.open .qhd{border-bottom:1px solid #5a4c2c;}
.qrow .qsteps{padding:6px 8px;}
.qempty{color:#8a7f5f;font-size:12px;text-align:center;padding:14px 0;}

/* ===== landing: subtle animation + new box lists ===== */
@keyframes lsbob{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(4px);opacity:1}}
.ls-hint{animation:lsbob 1.8s ease-in-out infinite;}
@keyframes lsglow{0%,100%{box-shadow:0 0 0 2px #0a0712,0 0 16px rgba(201,162,74,.22)}50%{box-shadow:0 0 0 2px #0a0712,0 0 30px rgba(255,210,58,.5)}}
.loginCard{animation:lsglow 3.6s ease-in-out infinite;}
.ls-ul{margin:0;padding-left:18px;color:#cdbb96;font-size:14px;line-height:1.6;}
.ls-ul li{margin-bottom:6px;}
.ls-ul b{color:#ffec8b;}

/* ===== hotbar auto-attack slot + cast bar ===== */
.hslot.atk{border-color:#c98a4a;}
.hslot.atk.on{box-shadow:0 0 0 2px #ff5a4a,0 0 10px rgba(255,90,74,.7);background:rgba(120,30,20,.5);}
#castBar{position:fixed;left:50%;bottom:140px;transform:translateX(-50%);width:240px;height:20px;z-index:44;display:none;
  background:rgba(10,8,14,.8);border:1px solid #c9a24a;border-radius:6px;overflow:hidden;font-family:'Pixelify Sans',sans-serif;}
#castBar .cbfill{height:100%;width:0%;background:linear-gradient(90deg,#7a3aa0,#c060e0);transition:width .05s linear;}
#castBar .cblabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;text-shadow:1px 1px #000;}

/* inventory drag-to-rearrange feedback */
.slot.dragging{opacity:.4;}
.slot.dropok{box-shadow:inset 0 0 0 2px #ffd23a !important;}

/* active buff bar (top-center) */
#buffbar{position:fixed;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:45;pointer-events:none;}
#buffbar .buffchip{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;
  background:rgba(10,8,14,.75);border:1px solid #c9a24a;border-radius:6px;box-shadow:0 0 8px rgba(201,162,74,.4);pointer-events:auto;}

/* ============================================================
   POWERS — grouped-by-type list (color + icon cues)
   ============================================================ */
.pwwrap .pscroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-right:2px;}
.pwwrap .pscroll .pgrid{flex:none;overflow:visible;min-height:0;padding:1px 1px 4px;}
.pcat{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:bold;letter-spacing:.4px;
  text-transform:uppercase;margin:5px 2px 1px;padding-bottom:2px;border-bottom:1px solid rgba(201,162,74,.22);}
.pcat:first-child{margin-top:1px;}
.pcatdot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 5px currentColor;}
.pcatn{margin-left:auto;font-size:10px;color:#8a7f5f;font-weight:normal;}
.pchip{transition:filter .1s,transform .1s;}
.pchip:hover{transform:translateY(-1px);}

/* ============================================================
   MASTERIES — horizontal progress bars inside the Combat tab
   ============================================================ */
.mgrp{font-size:11px;letter-spacing:1px;color:#c98a4a;text-transform:uppercase;
  margin:5px 1px 2px;padding-bottom:1px;border-bottom:1px solid #5a4a32;}
.mrow{display:flex;align-items:center;gap:6px;height:21px;padding:0 4px;cursor:help;border-radius:4px;}
.mrow:hover{background:#3a342b;}
.mico{font-size:14px;width:18px;text-align:center;flex:none;}
.mname{font-size:12px;color:#e8dcc0;width:74px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mtrack{flex:1;height:11px;background:#1c1812;border:1px solid #000;border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}
.mfill{height:100%;border-radius:6px;transition:width .25s ease;box-shadow:0 0 5px rgba(255,255,255,.15) inset;}
.mlvl{font-size:11px;color:#ffec8b;width:52px;text-align:right;flex:none;
  font-family:'Pixelify Sans',monospace;font-variant-numeric:tabular-nums;text-shadow:1px 1px #000;}

/* ============================================================
   TARGET HUD — ℹ info + 📋 drops buttons & popup, drop table
   ============================================================ */
#tfBtns{display:none;gap:5px;margin-top:4px;}
.tfbtn{font-family:'Pixelify Sans',sans-serif;font-size:11px;line-height:1;cursor:pointer;
  color:#ffe7a8;background:linear-gradient(#3a342b,#241f17);border:1px solid #6a5a30;border-radius:5px;
  padding:4px 7px;white-space:nowrap;}
.tfbtn:hover{background:linear-gradient(#4a4234,#2e281d);border-color:#c9a24a;color:#fff;}

#mobPop{position:absolute;left:210px;bottom:262px;z-index:60;width:262px;display:none;
  background:linear-gradient(#1a160e,#120f08);border:2px solid #c9a24a;border-radius:9px;
  box-shadow:0 6px 22px rgba(0,0,0,.6);color:#cdbb96;font-size:12px;overflow:hidden;}
#mobPop .mpHead{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(201,162,74,.14);border-bottom:1px solid #6a5a2a;padding:6px 10px;
  font-weight:bold;color:#ffd23a;font-size:13px;}
#mobPop #mpX{cursor:pointer;color:#c9a24a;font-size:14px;}
#mobPop #mpX:hover{color:#fff;}
#mpBody{padding:9px 11px;max-height:230px;overflow-y:auto;}
.mpstat{margin:2px 0;color:#cdbb96;} .mpstat b{color:#e8dcc0;}
.mpmech{margin-top:7px;padding:7px 9px;background:rgba(0,0,0,.3);border:1px solid #6a5a2a;
  border-radius:6px;color:#ffdca0;line-height:1.45;}
.mptab{width:100%;border-collapse:collapse;margin-top:2px;}
.mptab th{text-align:left;color:#c98a4a;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid #5a4a32;padding:3px 4px;}
.mptab td{padding:3px 4px;border-bottom:1px solid rgba(90,74,50,.35);vertical-align:middle;}
.mptab td:nth-child(2),.mptab td:nth-child(3){text-align:right;white-space:nowrap;color:#ffec8b;font-variant-numeric:tabular-nums;}
.mptab tr.mpgear td{color:#9ad0ff;border-top:1px solid #5a4a32;}
.mpsub{color:#8a7f5f;font-size:10px;}
.mpnote{margin-top:8px;font-size:10.5px;line-height:1.5;color:#9a8f6f;}

@media(max-width:760px){
  #mobPop{left:8px;right:8px;width:auto;bottom:auto;top:64px;}
  .tfbtn{font-size:10px;padding:3px 6px;}
}

/* ============================================================
   MASTERIES tab — each box is a 1–400 progress bar
   ============================================================ */
.mboxlist{display:flex;flex-direction:column;gap:2px;padding:1px 1px 2px;}
.mastrow{position:relative;width:auto;height:20px;border:1px solid #6a5a30;border-radius:5px;overflow:hidden;
  background:#1c1812;cursor:help;}
.mastrow:hover{filter:brightness(1.12);box-shadow:inset 0 0 0 1px #c9a24a;}
.mboxfill{position:absolute;left:0;top:0;bottom:0;width:0;opacity:.42;transition:width .25s ease;}
.mboxin{position:relative;z-index:1;display:flex;align-items:center;gap:6px;height:100%;padding:0 8px;}
.mboxico{font-size:14px;flex:none;}

.mboxname{font-size:12px;color:#fff;text-shadow:1px 1px 2px #000;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mboxlvl{font-size:12px;color:#ffec8b;text-shadow:1px 1px 2px #000;font-variant-numeric:tabular-nums;flex:none;}

/* ============================================================
   RUSTIC UI SKIN — thin brown+gold frame (matches the minimap), leather slots.
   Reusable: add class "ornate" to any window to skin it the same way.
   ============================================================ */
#invWin, .ornate{
  background:linear-gradient(#39301f,#2a2214) !important;
  border:1px solid rgba(201,162,74,.55) !important; border-radius:8px !important; overflow:visible !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.5) !important;
}
/* title bar → subtle gilded strip */
#invWin #invDrag{background:linear-gradient(#4a3a1e,#322713) !important;border-bottom:1px solid rgba(201,162,74,.4) !important;height:18px;border-radius:7px 7px 0 0;}
#invWin #panel{border-radius:0 0 7px 7px;}
#invWin #invDrag .wb-title{color:#ffe6a3;text-shadow:1px 1px 2px #000;letter-spacing:.6px;}
#invWin #invDrag .wb-cog{color:#ffe7a8;}
#invWin #invDrag .wb-info{color:#ffe7a8;font-size:13px;text-shadow:1px 1px #000;opacity:.85;}
#invWin #invDrag .wb-info:hover{opacity:1;color:#fff0c0;}
/* tab bar — TALLER, roomy, icons only (no box / no stacking behind them) */
#invWin .tabrow{background:rgba(20,15,8,.5) !important;height:40px;padding:5px 5px 3px;gap:5px;
  border-bottom:1px solid rgba(201,162,74,.3);overflow:visible;}
#invWin .tabrow .tab{flex:1;min-width:0;background-color:transparent;border:0;border-radius:5px;
  background-size:contain;background-position:center;opacity:.62;transition:opacity .12s,transform .12s;}
#invWin .tabrow .tab:hover{opacity:.9;transform:translateY(-1px);}
#invWin .tabrow .tab.active{opacity:1;background-color:transparent;box-shadow:none;
  border-bottom:2px solid #e0b452;border-radius:5px 5px 0 0;}
/* inner panel → leather */
#invWin #panel{background:linear-gradient(#332a1a,#241c10) !important;border-top:1px solid rgba(201,162,74,.25) !important;
  box-shadow:inset 0 2px 9px rgba(0,0,0,.45) !important;}
/* inventory slots → compact, SQUARE, recessed leather cells (tight gaps to save space) */
#invWin #inv{grid-template-columns:repeat(5,1fr);grid-template-rows:unset;grid-auto-rows:auto;gap:2px;padding:3px;
  align-content:start;}
#invWin .slot{aspect-ratio:1;height:auto;background:linear-gradient(#352a1a,#211a0e);border:1px solid #161009;border-radius:4px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(201,162,74,.07);}
#invWin .slot.has{box-shadow:inset 0 0 0 1px rgba(201,162,74,.4),inset 0 1px 3px rgba(0,0,0,.45);background:linear-gradient(#40331d,#241c10);}
#invWin .slot:hover{box-shadow:inset 0 0 0 1px rgba(255,222,128,.8),inset 0 1px 3px rgba(0,0,0,.45);}
#invWin .slot .qty{color:#ffe9a8;}

/* ---- Controls / keybind modal ---- */
#controlsModal{position:fixed;inset:0;z-index:96;background:rgba(6,4,10,.72);display:none;align-items:center;justify-content:center;}
#controlsModal.open{display:flex;}
#controlsModal .sbox{width:360px;max-width:92vw;background:linear-gradient(#241f17,#15110b);border:2px solid #6b5a3a;border-radius:10px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6);}
#controlsModal .shd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(#3a2f1d,#241c10);font-family:'Pixelify Sans',monospace;font-size:20px;color:#ffe6a3;border-bottom:1px solid #6b5a3a;}
#controlsModal .sx,#controlsModal .sback{cursor:pointer;color:#d8a35a;font-size:16px;}
#controlsModal .sx:hover,#controlsModal .sback:hover{color:#ffd98a;}
#controlsModal .sbody{padding:14px 16px;font-family:'Pixelify Sans',monospace;color:#d8cfb8;max-height:70vh;overflow-y:auto;}
#kbList{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;}
.kbrow{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px;}
.kbname{color:#cdbb88;white-space:nowrap;}
.kbkey{min-width:52px;font-family:'Pixelify Sans',monospace;font-size:13px;cursor:pointer;color:#ffe6a3;
  background:linear-gradient(#3a342b,#241f17);border:1px solid #6a5a30;border-radius:5px;padding:3px 8px;}
.kbkey:hover{border-color:#c9a24a;background:linear-gradient(#4a4234,#2e281d);}
.kbkey.listen{border-color:#ffd23a;color:#fff;box-shadow:0 0 8px rgba(255,210,90,.5);}

/* ---- canvas: never let it be selected or dragged as an image ---- */
#view, #view > canvas{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}

/* ---- ESC / pause menu — clean lines matching the inventory skin ---- */
#settingsModal .sbox{border:1px solid rgba(201,162,74,.55)!important;}
#settingsModal .sbody{display:flex;flex-direction:column;gap:8px;}
#settingsModal .sbtn{margin:0;border-radius:6px;border-width:1px;font-size:17px;padding:11px;}
.sbtn.smResume{background:linear-gradient(#d8b657,#a8842e);border:1px solid #6a531a;color:#1f1408;font-weight:bold;}
.smkey{font-size:11px;opacity:.65;border:1px solid rgba(0,0,0,.35);border-radius:3px;padding:0 5px;margin-left:5px;}
.sbtn.smSettings{background:linear-gradient(#4a463e,#2f2c26);border:1px solid #6a6052;color:#e9e0c9;}
.sbtn.smLogout{background:linear-gradient(#9a2e1e,#5e1810);border:1px solid #c4583a;color:#ffd9c4;}
.smFoot{display:flex;justify-content:flex-end;margin-top:2px;}
.smUnstuck{font-family:'Pixelify Sans',sans-serif;font-size:12px;cursor:pointer;color:#cdbb88;
  background:linear-gradient(#3a342b,#241f17);border:1px solid #5a4c2c;border-radius:5px;padding:5px 11px;}
.smUnstuck:hover{border-color:#c9a24a;color:#fff;}

/* ============================================================
   CLEAN POPUP PASS — thin gold lines + 7-tab-style hover glow
   Matches the inventory / HUD aesthetic across every popup.
   ============================================================ */

/* --- thin container borders (were chunky 2–3px) --- */
.mbox,
#ctx,
#settingsModal .sbox,#optionsModal .sbox,#donateModal .sbox,#logoutModal .sbox,#renameModal .sbox,#graphicsModal .sbox,#personalizationModal .sbox,
#guideModal .gbox,
#controlsModal .sbox,
.loginCard{
  border:1px solid rgba(201,162,74,.32) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.45) !important;
  border-radius:9px !important;
}
#ctx{border-radius:7px !important;}
#worldmap canvas{border:1px solid rgba(201,162,74,.4) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.6) !important;}

/* --- clean thin title bars (match the inventory drag bar) --- */
.mhead,
#settingsModal .shd,#optionsModal .shd,#donateModal .shd,#logoutModal .shd,#renameModal .shd,
#guideModal .ghd,
#controlsModal .shd{
  background:linear-gradient(#3a2f1d,#241c10) !important;
  border-bottom:1px solid rgba(201,162,74,.4) !important;
  color:#ffe6a3 !important;
  text-shadow:1px 1px 2px #000;
}
.mhead{padding:5px 10px !important;font-size:14px !important;border-radius:8px 8px 0 0 !important;}
#settingsModal .shd,#optionsModal .shd,#donateModal .shd,#logoutModal .shd,#renameModal .shd,
#guideModal .ghd,#controlsModal .shd{padding:9px 14px !important;}
#ctx .hd{background:linear-gradient(#3a2f1d,#241c10) !important;
  border-bottom:1px solid rgba(201,162,74,.35) !important;color:#ffe6a3 !important;}

/* close (✕) buttons: borderless, gentle hover */
.mhead .mx{border:0 !important;background:transparent !important;color:#d8a35a !important;
  font-size:16px;width:22px;height:22px;line-height:22px;border-radius:5px;}
.mhead .mx:hover{color:#ffd98a !important;background:rgba(201,162,74,.18) !important;}

/* thin the chunky settings-button borders */
.sbtn{border-width:1px !important;}

/* --- 7-tab-style hover: subtle lift + soft gold glow on every clickable --- */
.sbtn,#guideBtn,
.shoprow button,.qfbtn,.eqicon,.kbkey,.emchip,.pchip,
.mhead .mx,.sx,.esx,.eqstatsbtn{
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}
.sbtn:hover,#guideBtn:hover,
.shoprow button:hover,.qfbtn:hover,.eqicon:hover,.kbkey:hover,.emchip:hover,.pchip:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,222,128,.55), 0 3px 10px rgba(255,206,110,.18);
  filter:brightness(1.1);
}

/* ============================================================
   EQUIPMENT PANEL FIX v2 — expand button in-flow + flyout bounded
   (the old absolute footer + top/bottom-stretched flyout got
    clipped once HUD-scale applied a transform to #invWin)
   ============================================================ */
#equipPanel{overflow:hidden !important;padding:4px !important;}
/* compact slots — just big enough for one icon */
#equipPanel .eqdoll{flex:0 0 auto !important;min-height:0;overflow:visible !important;
  grid-template-columns:repeat(4,26px) !important;grid-auto-rows:30px !important;
  gap:13px !important;justify-content:center !important;padding:8px 8px 24px !important;}
#equipPanel .eqslot{width:30px !important;max-width:30px !important;height:30px !important;aspect-ratio:auto !important;}
#equipPanel .eqslot .ei{font-size:17px !important;}
#equipPanel .eqmount .en{display:none !important;}   /* no "Mounts" text — just the horse */
/* Details button: one compact box, pinned bottom-left, NEVER transforms (no hover jump) */
#equipPanel .eqfoot{position:absolute !important;left:6px;bottom:16px;top:auto;right:auto;margin:0 !important;flex:0 0 auto;z-index:5;display:flex;}
#equipPanel .eqfoot .eqicon,#equipPanel .eqicon{position:static !important;left:auto !important;top:auto !important;transform:none !important;
  width:auto !important;min-width:0;height:auto !important;padding:3px 9px !important;white-space:nowrap;font-size:11px !important;line-height:1.3 !important;
  transition:filter .12s ease, box-shadow .12s ease;}
#equipPanel .eqicon:hover{transform:none !important;filter:brightness(1.25);box-shadow:0 0 0 1px rgba(255,222,128,.5);}
/* (legacy bottom-anchored flyout rules removed — centered modal handles layout) */

/* ============================================================
   MINIMAP — more breathing room + draggable buttons/clock
   ============================================================ */
#mapwrap{width:190px !important;height:190px !important;}
.mapcorner{cursor:grab;} .mapcorner:active{cursor:grabbing;}
#mapClock{cursor:grab;} #mapClock:active{cursor:grabbing;}

/* ===== player nameplate colour + picker ===== */
.nlabel .nm.nm-gold{color:#ffdf6e !important;text-shadow:0 0 5px #ffcf3a,0 0 11px rgba(255,190,40,.7),0 1px 2px #000 !important;}
.nlabel .nm.nm-black{color:#0a0a0c !important;text-shadow:0 0 2px #fff,0 0 3px #fff,1px 1px 1px #fff !important;}
.namepick{display:flex;flex-wrap:wrap;gap:7px;max-width:210px;margin-top:4px;}
.namepick .nswatch{width:24px;height:24px;border-radius:50%;border:2px solid #5a4c2c;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.5);transition:transform .1s ease,filter .1s ease;}
.namepick .nswatch:hover{filter:brightness(1.2);transform:scale(1.12);}
.namepick .nswatch.sel{border-color:#fff;box-shadow:0 0 0 2px #ffd24a;}
.namepick .nswatch.gold{background:linear-gradient(135deg,#fff7cc,#ffd24a 50%,#c8902a) !important;}

/* ===== escape-menu floating logo + close button ===== */
.sm-logo{display:block;width:120px;max-width:62%;height:auto;margin:2px auto 8px;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,210,90,.25));
  animation:emblemFloat 3.4s ease-in-out infinite;}
.smClose{background:linear-gradient(#2a2620,#1a160f) !important;border:2px solid #4a4031 !important;color:#cdbb96 !important;margin-top:4px;}
.smClose:hover{filter:brightness(1.15);}

/* escape-menu logo floats free above the menu box; small How-to-play button */
#settingsModal .sm-logo{margin:0 auto 14px;}
.smHowto{font-size:12px !important;padding:6px 10px !important;background:linear-gradient(#2f2a20,#1a160f) !important;border:1px solid #5a4c2c !important;color:#cdbb96 !important;}
.smHowto:hover{filter:brightness(1.18);}

/* ── skill icon images (assets/skills/<id>.png) ── */
.skimg{display:inline-block;object-fit:contain;vertical-align:-0.2em;image-rendering:auto;}
.sk .skico{font-size:0;} /* container no longer needs emoji sizing */
.sk .skico .skimg{width:22px;height:22px;vertical-align:middle;}
.skimg.sktip{width:20px;height:20px;vertical-align:-0.28em;}
.skimg.skbigimg{width:26px;height:26px;vertical-align:-0.35em;}
.hs-cell .skimg{width:22px;height:22px;vertical-align:middle;}
.skemoji{display:inline-flex;align-items:center;justify-content:center;}