:root{
  --page:#121317; --steel:#2b2e35; --steel2:#353942; --steel3:#40454f; --dark:#1a1c21; --inset:#15161a; --line:#0b0c0e; --hi:#555b67;
  --ink:#ebe6da; --muted:#a09a8c; --dim:#6f6a60; --accent:#e0772f; --accent2:#f0934e; --gold:#e9c45e; --good:#6fd66f; --bad:#e06a5c; --blue:#6da6d0; --purple:#b9a8ff;
  --fine:#5fd068; --prist:#5fb4ff; --hp:#c8342a;
  --px:'Barlow Condensed','Arial Narrow',system-ui,sans-serif; --stencil:'Saira Stencil One','Barlow Condensed',sans-serif; --tx:'Atkinson Hyperlegible',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--ink);font:14px/1.35 var(--tx)}
body{background:radial-gradient(ellipse at 50% 0%,#1d2026 0%,#101114 70%);min-height:100vh}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
input,select{font:inherit;color:var(--ink);background:var(--inset);border:1px solid var(--line);border-radius:3px;padding:5px 7px}
input:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn{background:linear-gradient(#474c57,#353942);border:1px solid var(--line);box-shadow:inset 0 1px 0 #6a707c;border-radius:3px;padding:5px 10px;cursor:pointer;font-family:var(--px);font-weight:600;font-size:15px;letter-spacing:.4px;white-space:nowrap}
.btn:hover{background:linear-gradient(#525865,#3d424c)} .btn:active{background:#2e3239;box-shadow:inset 0 1px 2px #000}
.btn[disabled]{opacity:.45;cursor:default}
.btn.sm{padding:2px 8px;font-size:13px}
.btn.primary{background:linear-gradient(#e98a44,#c0601f);box-shadow:inset 0 1px 0 #ffb77a;color:#1a0f06;font-weight:700}
.btn.on,.btn[aria-pressed=true]{background:linear-gradient(#e98a44,#b8581a);color:#1a0f06;box-shadow:inset 0 1px 0 #ffb77a}
.linkbtn{background:none;border:0;color:var(--blue);cursor:pointer;padding:4px 0;text-decoration:underline}
.ico{display:inline-block;width:24px;height:24px;background-repeat:no-repeat;image-rendering:pixelated;vertical-align:middle;flex:none}
.ico.mico{width:20px;height:20px;background-size:20px 20px;margin:-2px 1px 0 0}   /* mode badges on a profile (Tileman / Pure / Ironman / Gearlocked): one size, the whole 32px icon scaled (2026-10-28) */
.btn .ico{width:18px;height:18px;margin:-3px 4px -3px -3px;background-size:auto}

/* ---------- the game frame ---------- */
.shell{display:flex;justify-content:center;padding:10px}
.frame{display:grid;grid-template-columns:var(--vpw,800px) 250px;grid-template-rows:auto var(--vph,500px) var(--chath,150px);grid-template-areas:"top top" "vp side" "chat side";
  background:var(--steel);border:2px solid var(--line);border-radius:6px;box-shadow:0 10px 40px #000a,inset 0 1px 0 #5a606c;padding:6px;gap:6px;position:relative}
.frame::before{content:"";position:absolute;inset:3px;border:1px solid #3c414b;border-radius:4px;pointer-events:none}
.topbar{grid-area:top;display:flex;align-items:center;justify-content:space-between;padding:0 4px;height:26px}
.logo{font:400 19px var(--stencil);letter-spacing:1px}.logo span{color:var(--accent)}.logo small{font:500 11px var(--px);color:var(--muted);margin-left:8px;letter-spacing:2px}
.tb-right{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.online::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:5px;vertical-align:1px}
.testtag{font:700 11px var(--px);color:#1a0f06;background:var(--gold);padding:1px 8px;border-radius:2px;letter-spacing:1px}
.vp{grid-area:vp;position:relative;overflow:hidden;background:#000;border:2px solid var(--line);border-radius:3px;box-shadow:inset 0 0 0 1px #000}
#world{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:default}
.side{grid-area:side;display:flex;flex-direction:column;min-height:0;gap:4px}
.chat{grid-area:chat;display:flex;flex-direction:column;background:var(--dark);border:2px solid var(--line);border-radius:3px;min-height:0}

/* minimap + orbs */
.mini{background:var(--dark);border:2px solid var(--line);border-radius:3px;padding:5px 6px}
.mini-head{display:flex;justify-content:space-between;align-items:baseline;font:700 16px var(--px)}.mini-head .cr{font-size:17px}.mini-sub{font-size:12px;color:var(--muted);margin-top:1px}
.mini-row{display:flex;gap:6px;margin-top:4px;align-items:center}
#minimap{width:100%;height:auto;aspect-ratio:8/5;background:#000;border:1px solid #000;border-radius:6px;box-shadow:0 0 0 1px var(--line),inset 0 0 8px #000;cursor:pointer}
.orbs{display:flex;flex-direction:column;gap:6px;align-items:center;flex:1}
.orb{width:54px;height:54px;border-radius:50%;border:2px solid var(--line);background:#2a0e0c;position:relative;overflow:hidden;cursor:default;padding:0;box-shadow:inset 0 2px 6px #000}
.orb i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#e0483c,#9a1c14);transition:height .3s}
.orb span{position:relative;font:700 17px var(--px);text-shadow:0 1px 0 #000,0 0 3px #000}
.orb.low span{color:#ffd0c8;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
.cr{font:700 16px var(--px);color:var(--gold);text-shadow:0 1px 0 #000;font-variant-numeric:tabular-nums}.cr small{font-size:11px;color:var(--muted);margin-left:3px}
.mini-btns{display:flex;gap:4px;margin-top:5px}.mini-btns .btn{flex:1}

/* tabs */
.tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tabs button{height:34px;background:linear-gradient(#3f444e,#2e3239);border:1px solid var(--line);border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;position:relative}
.tabs button[aria-selected=true]{background:linear-gradient(#6a4a30,#4a2f1c);box-shadow:inset 0 0 0 1px var(--accent)}
.tabs button:hover{filter:brightness(1.15)} .tabs button .dot{position:absolute;top:2px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pane{flex:1;min-height:0;overflow:auto;background:var(--dark);border:2px solid var(--line);border-radius:3px;padding:8px;scrollbar-width:thin}
.pane h3,.win h3{font:600 15px var(--px);margin:2px 0 6px;color:var(--accent2);letter-spacing:.4px}
.pane h4,.win h4{font:600 13px var(--px);margin:10px 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.muted{color:var(--muted)} .small{font-size:12px} .good{color:var(--good)} .bad{color:var(--bad)} .gold{color:var(--gold)}
.row{display:flex;gap:6px;align-items:center} .grow{flex:1} .sp{justify-content:space-between}
.bar{height:8px;background:#0b0c0e;border:1px solid #000;border-radius:2px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:linear-gradient(#f0a060,#c0601f);width:0}
.bar.xp i{background:linear-gradient(#b9a8ff,#6a55c8)} .bar.hp i{background:linear-gradient(#5fe05f,#2a9a2a)} .bar.hp.foe i{background:linear-gradient(#ff6a5a,#b0281c)}

/* inventory */
.inv{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;justify-items:center}
.slot{width:48px;height:44px;border-radius:4px;background:#101114;border:1px solid #000;box-shadow:inset 0 1px 0 #26282e;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.slot.empty{cursor:default;opacity:.55}
.slot:hover:not(.empty){background:#1e2027}
.slot .ico{width:32px;height:32px}
.slot .n{position:absolute;left:3px;top:0;font:700 13px var(--px);color:#ffe98a;text-shadow:1px 1px 0 #000}
.slot.q-f{box-shadow:inset 0 0 0 2px var(--fine)}
.li .ico.rare{box-shadow:0 0 0 2px var(--gold);border-radius:4px}.li .ico.q-f{box-shadow:0 0 0 2px var(--fine);border-radius:4px}.li .ico.q-p{box-shadow:0 0 0 2px var(--prist),0 0 6px var(--prist);border-radius:4px}   /* fine / pristine in any list row too: trades, shops, Storage lists (2026-10-18) */ .slot.q-p{box-shadow:inset 0 0 0 2px var(--prist),0 0 6px var(--prist)} .slot.rare{box-shadow:inset 0 0 0 2px var(--gold)}
.slot.drag{opacity:.4} .slot.over{outline:2px dashed var(--accent)}
.slot .lbl{position:absolute;bottom:-1px;left:0;right:0;text-align:center;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
/* equipment */
.eq{display:grid;grid-template-columns:repeat(3,52px);gap:6px 10px;justify-content:center;margin:4px 0 10px}
.eq .slot{width:52px;height:48px}
.stats{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px;background:#131418;border:1px solid #000;border-radius:3px;padding:6px 8px}
.stats b{text-align:right;font-family:var(--px)}
/* skills */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.sk{display:flex;align-items:center;gap:4px;background:linear-gradient(#34373f,#26282e);border:1px solid #000;border-radius:3px;height:34px;padding:0 6px;cursor:pointer;font:700 17px var(--px);font-variant-numeric:tabular-nums}
.sk:hover{filter:brightness(1.2)} .sk .lv{margin-left:auto;color:var(--gold)} .sk.soon{opacity:.38;cursor:help}
.sk .ico{width:24px;height:24px}
.sk{position:relative}.skbar{position:absolute;left:3px;right:3px;bottom:2px;height:3px;background:#0009;border-radius:2px;overflow:hidden}.skbar i{display:block;height:100%;border-radius:2px}
.total{display:flex;justify-content:space-between;margin-top:6px;padding:5px 8px;background:#131418;border:1px solid #000;border-radius:3px;font:600 14px var(--px)}
/* combat */
.styles{display:grid;grid-template-columns:1fr;gap:4px}
.style{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:6px 9px;background:linear-gradient(#3a3e47,#2b2e35);border:1px solid #000;border-radius:3px;cursor:pointer}
.style b{font:600 14px var(--px)} .style small{color:var(--muted)}
.style[aria-pressed=true]{background:linear-gradient(#6a4a30,#4a2f1c);box-shadow:inset 0 0 0 1px var(--accent)}
.list{display:flex;flex-direction:column;gap:3px}
.li{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#202228;border:1px solid #000;border-radius:3px;cursor:pointer;text-align:left}
.li:hover{background:#2a2d35} .li.locked{opacity:.5;cursor:default} .li.cur{box-shadow:inset 0 0 0 1px var(--accent)}
.li .ico{width:32px;height:32px} .li .t{flex:1;min-width:0} .li .t b{display:block;font:600 14px var(--px)} .li .t small{color:var(--muted);font-size:12px}
.li .r{font:600 13px var(--px);color:var(--gold);text-align:right}
.order{padding:6px 8px;background:#202228;border:1px solid #000;border-radius:3px;margin-bottom:5px}
.order.done{opacity:.6}
.evrec{margin-top:6px;padding-top:5px;border-top:1px solid rgba(0,0,0,.45)}.evrec .muted{margin-top:2px;line-height:1.3}
/* status box */
.status{width:250px;background:#15161acc;border:1px solid #000;border-radius:4px;padding:6px 8px;backdrop-filter:blur(2px);box-shadow:0 2px 10px #0008}
.st-title{display:flex;justify-content:space-between;align-items:center;font:600 14px var(--px);gap:6px}
.status .bar{margin:5px 0 3px}
.st-sub{font-size:12px;color:var(--muted)}
.hpl{display:grid;grid-template-columns:62px 1fr 48px;gap:5px;align-items:center;font-size:12px;margin:3px 0}.hpl span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hpl b{font:600 12px var(--px);text-align:right}
.hover{position:absolute;left:8px;top:8px;font:600 14px var(--px);text-shadow:1px 1px 0 #000,0 0 3px #000;pointer-events:none;z-index:2;color:#fff}

.xpdrops{position:absolute;right:10px;top:10px;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.xpd{font:700 14px var(--px);color:#fff;text-shadow:1px 1px 0 #000,0 0 3px #000;display:flex;gap:4px;align-items:center;animation:xpd 1.8s ease-out forwards}
.xpd .ico{width:18px;height:18px;background-size:auto}
@keyframes xpd{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.banner{position:absolute;left:50%;top:18%;transform:translateX(-50%);text-align:center;pointer-events:none;animation:ban 3.2s ease-out forwards;z-index:4}
.banner b{display:block;font:700 30px var(--px);color:var(--gold);text-shadow:2px 2px 0 #000,0 0 12px #000}.banner span{font:500 16px var(--px);text-shadow:1px 1px 0 #000,0 0 6px #000}
.banner.death b{color:var(--bad)} .banner.area b{color:#fff;font-size:26px}
@keyframes ban{0%{opacity:0;transform:translate(-50%,10px)}10%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
.conn{position:absolute;left:50%;top:40%;transform:translateX(-50%);background:#000c;padding:10px 16px;border-radius:4px;border:1px solid var(--bad)}
/* windows inside the view */
.win{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94%);max-height:92%;display:flex;flex-direction:column;background:var(--steel);border:2px solid var(--line);border-radius:5px;box-shadow:0 8px 30px #000c,inset 0 1px 0 #5a606c;z-index:5}
.win.wide{width:min(720px,96%)}
.win-head{display:flex;justify-content:space-between;align-items:center;padding:5px 8px 5px 12px;background:linear-gradient(#3d424c,#2d3038);border-bottom:2px solid var(--line);font:700 16px var(--px);letter-spacing:.5px;border-radius:4px 4px 0 0}
.win-head .x{background:#6a2a24;border:1px solid #000;border-radius:3px;width:26px;height:24px;cursor:pointer;font-size:18px;line-height:1;padding:0}
.win-body{padding:10px;overflow:auto;min-height:0;scrollbar-width:thin}
.win .tabrow{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px}
/* Storage (2026-10-19 redesign): categories on the left, toolbar, a darker grid, big put-away buttons */
.win.wide:has(.bankwin){width:min(820px,96%)}
.bcols{display:grid;grid-template-columns:150px 1fr;gap:10px;min-height:0}
.bcats{display:flex;flex-direction:column;gap:2px;max-height:min(52vh,430px);overflow:auto;padding-right:2px;scrollbar-width:thin}
.bcat{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 4px;border-radius:6px;font:600 14px var(--px);color:var(--muted);border:1px solid transparent;background:none;cursor:pointer;text-align:left}
.bcat:hover{background:#ffffff0a;color:var(--ink)} .bcat.on{background:#e0772f22;border-color:#e0772f66;color:var(--ink)}
.bcat .ico{width:22px;height:22px;flex:none} .bcat .bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bcat small{margin-left:auto;color:var(--dim);font-size:12px}
.bcat .ball{width:22px;text-align:center;color:#e0772f;font-size:17px;flex:none}
.bmain{min-width:0;display:flex;flex-direction:column}
.btool{display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap}
.bsrch{flex:1;min-width:140px;display:flex;align-items:center;gap:6px;background:#0f1013;border:1px solid #2e323b;border-radius:7px;padding:4px 9px;color:var(--dim)}
.bsrch input{background:none;border:0;outline:0;color:var(--ink);font:inherit;width:100%;padding:1px 0;box-shadow:none}
.blbl{font:600 12px var(--px);color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.bseg{display:flex;background:#0f1013;border:1px solid #2e323b;border-radius:7px;padding:2px}
.bseg button{background:none;border:0;padding:3px 9px;font:700 13px var(--px);color:var(--muted);border-radius:5px;cursor:pointer} .bseg button:hover{color:var(--ink)} .bseg button.on{background:#e0772f;color:#fff}
.bx{width:76px;background:#0f1013;border:1px solid #e0772f88;border-radius:7px;color:var(--ink);padding:4px 7px;font:700 13px var(--px)}
.bsort{background:#0f1013;border:1px solid #2e323b;border-radius:7px;color:var(--muted);padding:4px 10px;font:700 13px var(--px);cursor:pointer;white-space:nowrap} .bsort:hover{color:var(--ink);border-color:#e0772f88}
.bank{display:grid;grid-template-columns:repeat(auto-fill,50px);justify-content:start;align-content:start;gap:3px;max-height:min(46vh,340px);overflow-y:auto;padding:6px;background:#0f1013;border:1px solid #000;border-radius:7px;box-shadow:inset 0 2px 6px #000a;scrollbar-width:thin}
.bank .slot{width:50px;height:46px;border:0;border-radius:4px;background:linear-gradient(#1f2127,#17191d);box-shadow:inset 0 1px 0 #2c2f37}
.bank .slot:hover:not(.empty){background:linear-gradient(#2a2d35,#1f2127)}
.bank .slot.empty{cursor:default;opacity:1;background:#131418;box-shadow:inset 0 1px 2px #0008}
.bank .slot .n{font-size:12px;left:3px;top:1px}
.bank .slot.rare{box-shadow:inset 0 0 0 1px var(--gold)} .bank .slot.q-f{box-shadow:inset 0 0 0 1px var(--fine)} .bank .slot.q-p{box-shadow:inset 0 0 0 1px var(--prist),0 0 5px var(--prist)}
.bank .bempty{grid-column:1/-1;margin:6px}
.bfoot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px;flex-wrap:wrap}
.bworth{font:600 14px var(--px);color:var(--muted)} .bworth b{color:var(--gold)}
.bbig{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(#3a3f49,#2b2f37);border:1px solid #000;border-radius:6px;padding:4px 12px;font:700 14px var(--px);color:var(--ink);box-shadow:inset 0 1px 0 #555b66;cursor:pointer} .bbig:hover{background:linear-gradient(#454b56,#333842)} .bbig .ico,.bbig .spr{width:20px;height:20px}
@media (max-width:860px){.bcols{grid-template-columns:1fr}.bcats{flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:3px}.bcat .bn,.bcat small{display:none}.bcat{padding:4px}.bank{grid-template-columns:repeat(auto-fill,44px);max-height:none}.bank .slot{width:44px;height:41px}.bankwin>.bcols>.bmain>p.small{display:none}}
.qty{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.dlg{display:flex;gap:12px;align-items:flex-start}.dlg canvas{width:96px;height:96px;image-rendering:pixelated;background:#15161a;border:1px solid #000;border-radius:3px;flex:none}
.dlg .who{font:700 15px var(--px);color:var(--accent2)} .dlg p{margin:4px 0 10px}
.opts{display:flex;flex-direction:column;gap:4px}
.creator{display:grid;grid-template-columns:146px 1fr;gap:12px}.creator canvas{width:144px;height:144px;image-rendering:pixelated;background:#3a3d45;border:1px solid #000;border-radius:3px}
.sw{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 8px}.sw .btn{width:auto;height:auto}
.sw button{width:26px;height:22px;border:1px solid #000;border-radius:3px;cursor:pointer;padding:0}.sw button[aria-pressed=true]{outline:2px solid #fff}
.worldmap{position:relative;width:100%;aspect-ratio:1.4;background:#1a1d16;border:1px solid #000;border-radius:3px;overflow:hidden}
.worldmap svg{position:absolute;inset:0;width:100%;height:100%}
.wm{position:absolute;transform:translate(-50%,-50%);font:600 12px var(--px);padding:3px 7px;border-radius:3px;border:1px solid #000;cursor:pointer;white-space:nowrap;background:#3a3e47}
.wm.in{background:#4a5a3a}.wm.out{background:#5a3a30}.wm.here{box-shadow:0 0 0 2px var(--gold)}.wm.gated{opacity:.55}
.wm small{display:block;font:11px var(--tx);color:var(--muted);text-align:center}
.ctx{position:absolute;z-index:9;min-width:160px;background:#1d1f24;border:1px solid #000;border-radius:3px;box-shadow:0 4px 16px #000c;padding:3px 0;font-size:13px}
.ctx .h{padding:3px 10px;color:var(--gold);font:600 13px var(--px);border-bottom:1px solid #000;margin-bottom:2px}
.ctx button{display:block;width:100%;text-align:left;background:none;border:0;padding:4px 10px;cursor:pointer}.ctx button:hover{background:#3a3e47}.ctx button em{color:#ffd26a;font-style:normal}
.tip{position:fixed;z-index:70;max-width:260px;background:#101114f2;border:1px solid #000;border-radius:3px;padding:6px 8px;font-size:12px;pointer-events:none;box-shadow:0 4px 12px #000a}
.tip b{font:600 13px var(--px);display:block;margin-bottom:2px}
/* chat */
.ctabs{display:flex;gap:2px;padding:3px 4px 0}
.ctabs button{background:#2b2e35;border:1px solid #000;border-bottom:0;border-radius:3px 3px 0 0;padding:1px 9px;cursor:pointer;font:500 13px var(--px);color:var(--muted)}
.ctabs button[aria-selected=true]{background:#3d424c;color:var(--ink)} .ctabs button .u{color:var(--accent);margin-left:3px}
.clog{flex:1;overflow:auto;padding:3px 8px;font-size:13px;min-height:0;border-top:1px solid #000;scrollbar-width:thin}
.clog p{margin:0 0 1px}.clog .t{color:var(--dim);font-size:11px;margin-right:4px}
.clog .k-warn{color:#ffa090}.clog .k-sys{color:#9ab8d0}.clog .k-cr{color:#ffe08a}.clog .k-lvl{color:#c9b8ff}.clog .k-big{color:var(--gold)}.clog .k-friend{color:#8fe3a0}.clog .k-staffmsg{color:#c9a6ff}
.clog .ch-private .msg{color:#e8a8ff}.clog .ch-crew .msg{color:#8fe3c0}
.clog .who{cursor:pointer;font-weight:700}.clog .who:hover{text-decoration:underline}
.cform{display:flex;gap:4px;padding:4px;border-top:1px solid #000}.cform input{flex:1;min-width:0}
/* auth */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.authcard{width:min(400px,100%);background:var(--steel);border:2px solid var(--line);border-radius:6px;padding:22px 26px;box-shadow:0 10px 40px #000a,inset 0 1px 0 #5a606c}
.authcard form{display:flex;flex-direction:column;gap:9px}.authcard label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)}
.authlogo{font:400 34px var(--stencil);text-align:center;margin:0}.authlogo span{color:var(--accent)}
.authsub{text-align:center;color:var(--muted);margin:4px 0 14px}.seg{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.authmsg{background:#1f3a2a;border:1px solid #2a5a3a;padding:6px 8px;border-radius:3px}.authmsg.bad{background:#3a1f1f;border-color:#6a2a2a}
.authdev{color:var(--gold);font-size:13px}.authfoot{color:var(--dim);font-size:12px;text-align:center;margin:14px 0 0}.note{color:var(--dim);font-size:11px;margin-top:-6px}
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:30}.modal .card{background:var(--steel);border:2px solid var(--line);border-radius:5px;padding:18px 22px;max-width:380px;text-align:center}

/* phones and narrow windows: everything stacks */
@media (max-width:860px){
  .shell{padding:0}
  .frame{grid-template-columns:1fr;grid-template-rows:auto var(--vph,56vw) auto 170px;grid-template-areas:"top" "vp" "side" "chat";border-radius:0;width:100%}
  .side{max-height:none}.pane{min-height:260px;max-height:none}
  .logo small{display:none}.topbar{height:auto}
  .status{width:210px}
}

.belt{display:grid;grid-template-columns:repeat(4,52px);gap:6px;justify-content:center;margin:2px 0 10px}.belt .slot{width:52px;height:48px}
.seg2{display:flex;gap:4px}.seg2 .btn{flex:1;min-width:0;padding-left:4px;padding-right:4px}
.ks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
.kc{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#202228;border:1px solid #000;border-radius:3px;font-size:13px}.kc.no{opacity:.4}.kc b{margin-left:auto;font:700 14px var(--px);color:var(--gold)}
.kc canvas{width:32px;height:32px;image-rendering:pixelated}
.slot.unknown{background:#0b0c0e;color:var(--dim);font:700 18px var(--px)}
.newsbtn{background:none;border:1px solid #555b67;border-radius:3px;color:var(--gold);font:600 12px var(--px);padding:1px 8px;cursor:pointer;letter-spacing:.5px}.newsbtn.bosstag{background:#8a1a14;color:#ffd0c8;border-color:#e0483c;animation:pulse 1.2s infinite}
.newsbtn.new{background:var(--gold);color:#1a0f06;border-color:var(--gold)}
.countdown{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:6;font:700 22px var(--px);color:#ffe24a;text-shadow:2px 2px 0 #000,0 0 8px #000;letter-spacing:.5px;pointer-events:none;white-space:nowrap}
.devlog h4{margin:12px 0 4px!important;color:var(--gold)!important;text-transform:none!important;font-size:15px!important;letter-spacing:0!important}.devlog ul{margin:0;padding-left:18px}.devlog li{margin:2px 0}
.pill2{font:600 12px var(--px);background:#2a3a2a;border:1px solid #000;border-radius:3px;padding:1px 6px;color:#bfe8b0}
.boost{font:700 12px var(--px);color:#1a0f06;background:var(--good);padding:1px 7px;border-radius:2px}
.phat{display:inline-block;width:16px;height:16px;background-size:16px 16px;image-rendering:pixelated;vertical-align:-3px;margin-right:2px}
.notice{background:#e6dcc0;color:#2a2418;border-radius:3px;padding:8px 10px;box-shadow:inset 0 0 0 1px #b8a880}
.notice h4{color:#6a5a3a!important}.notice .li{background:#f2ead4;border-color:#c8b890;color:#2a2418}.notice .li small{color:#6a5a3a}
.notice .order{background:#f2ead4;border-color:#c8b890;color:#2a2418}.notice .order .muted,.notice .muted{color:#6a5a3a}.notice .order b{color:#2a2418}.notice .bar{background:#c8b890}
.notice .btn{color:#f4ecd6}.notice .btn:hover{color:#fff}
/* supporter tiers: badge and name styles in chat */
.supic{margin-right:3px;font-weight:700}
.who.sup-supporter{color:#ff8fb1!important}
.who.sup-founder{color:#c9a6ff!important;text-shadow:0 0 6px rgba(201,166,255,.6);animation:supglow 2.4s ease-in-out infinite}
.supic.sup-founder{animation:suppulse 1.6s ease-in-out infinite}
@keyframes supglow{50%{text-shadow:0 0 10px rgba(201,166,255,.95)}}
@keyframes supshine{from{background-position:200% 0}to{background-position:0 0}}
@keyframes suppulse{50%{opacity:.6}}
.donors{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.donor{background:#20242c;border:1px solid var(--line);border-radius:3px;padding:3px 8px;cursor:pointer;font-weight:700}
.win.wide{width:min(780px,96%)}
.hs{display:grid;grid-template-columns:170px 1fr;gap:10px;min-height:0}
.hsside{display:flex;flex-direction:column;gap:2px;max-height:520px;overflow:auto;padding-right:4px;border-right:1px solid var(--line)}
.hsc{display:flex;align-items:center;gap:6px;background:none;border:1px solid transparent;border-radius:3px;padding:3px 6px;cursor:pointer;text-align:left;font:600 14px var(--px);color:var(--ink,#e8e2d0)}
.hsc:hover{background:#2a2e36}.hsc.on{background:#3a2e1c;border-color:#8a6a3a;color:#f2c14e}
.hsc .ico{width:20px;height:20px}
.hsmain{min-width:0}.hsmain .list{max-height:470px;overflow:auto}
@media (max-width:600px){.hs{grid-template-columns:1fr}.hsside{flex-direction:row;flex-wrap:wrap;max-height:none;border-right:0}}
.suitpick{width:24px;height:24px;border-radius:3px;border:2px solid #0006;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.suitpick input{appearance:none;margin:0;width:10px;height:10px;border-radius:50%}.suitpick input:checked{background:#fff;box-shadow:0 0 0 2px #000}
#winBody .row{flex-wrap:wrap}
@media (max-width:600px){.hsside{max-height:96px;overflow:auto}}

.dtabs{display:flex;gap:4px;margin-bottom:8px}.perks{margin:4px 0 10px 18px;padding:0}.perks li{margin:2px 0}
.clog .k-n99{color:#ffe08a;font-weight:700;text-shadow:0 0 6px rgba(242,193,78,.45)}
.clog .k-first{display:block;color:#fff4c8;font-weight:800;letter-spacing:.3px;background:linear-gradient(90deg,rgba(242,193,78,.28),rgba(242,193,78,.05));border-left:3px solid #f2c14e;padding:2px 6px;margin:2px 0;animation:firstglow 2s ease-in-out 3}
@keyframes firstglow{50%{background:linear-gradient(90deg,rgba(242,193,78,.55),rgba(242,193,78,.12))}}
.clog .k-tip{color:#8fe3d0;font-style:italic}
.clog .ch-npc .npcname{color:#9fc8ff;font-weight:700}

/* slayer task box, under the activity box */
.slaybox{width:250px;background:#15161acc;border:1px solid #000;border-radius:4px;padding:6px 8px;backdrop-filter:blur(2px);box-shadow:0 2px 10px #0008;pointer-events:auto}
.slaybox .sb-h{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--px);color:var(--accent2);gap:6px}
.slaybox .sb-m{display:flex;align-items:center;gap:6px;font:600 14px var(--px);margin-top:2px}
.slaybox .sb-f{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
@media (max-width:860px){.slaybox{width:210px}}

.packnote{margin:8px 2px 0;padding:7px 9px;border:1px solid var(--line);border-radius:3px;background:#1d2a1d;font-size:12.5px;line-height:1.35;color:#cfe8c4}.packnote b{color:var(--good)}

/* left stack: activity, Slayer and clue boxes, each can shrink to a tab */
.lstack{position:absolute;left:8px;top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;z-index:3}
.lstack>*,.rstack>*{pointer-events:auto}
.rstack{position:absolute;right:8px;top:34px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none;z-index:3}
.st-title{display:flex;justify-content:space-between;align-items:center;gap:6px}.st-btns{display:flex;gap:4px;align-items:center}
.mini-x{background:none;border:0;color:var(--muted);font:700 18px/1 var(--px);cursor:pointer;padding:0 2px}.mini-x:hover{color:var(--ink)}
.st-sub{cursor:pointer}.st-sub:hover{color:var(--ink)}
.st-goal{margin-top:5px}.st-goal .gh{display:flex;justify-content:space-between;font:600 13px var(--px)}.st-goal .gh span:first-child{color:var(--gold)}.st-goal .bar i{background:linear-gradient(90deg,#a88a2e,#e9c45e)}
.mtab{display:flex;align-items:center;gap:6px;background:#15161add;border:1px solid #000;border-radius:0 4px 4px 0;margin-left:-8px;padding:4px 9px 4px 8px;font:600 13px var(--px);color:var(--ink);cursor:pointer;box-shadow:0 2px 8px #0008;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtab.r{border-radius:4px 0 0 4px;margin:0 -8px 0 0;padding:4px 8px 4px 9px}
.mtab .ico,.mtab img{flex:none}
.mtab.gold{border-color:#e9c45e;box-shadow:0 0 0 1px #e9c45e,0 0 12px #e9c45e88;color:#ffe9a8}
.mtab.green{border-color:#6fd66f;box-shadow:0 0 0 1px #6fd66f,0 0 12px #6fd66f77;color:#d8ffd0}
.mtab.red{border-color:#e06a5c;box-shadow:0 0 0 1px #e06a5c,0 0 12px #e06a5c88;color:#ffd6cf;animation:tabflash 1s ease-in-out 3}
.mtab.pulse{animation:tabpulse 1.6s ease-in-out infinite}
@keyframes tabflash{50%{background:#5a1f1a}}
@keyframes tabpulse{50%{box-shadow:0 0 0 1px currentColor,0 0 18px currentColor}}
.clrow{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:4px;font-size:12.5px}.clrow b{font:600 13px var(--px)}
.farmbox .frow{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-top:3px}.farmbox .frow span:last-child{margin-left:auto}
@media (prefers-reduced-motion:reduce){.mtab.pulse,.mtab.red{animation:none}}
.status{width:272px}#stTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcards{display:flex;gap:6px}.lcard{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:var(--inset);border:1px solid var(--line);border-radius:3px;cursor:pointer;color:var(--ink)}
.lcard b{font:600 14px var(--px)}.lcard small{font-size:11px;color:var(--muted)}.lcard.cur{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.lcard.empty{opacity:.65}.lcard:hover{background:#22252c}.ico.dim{opacity:.4}
/* unread chat tabs: a soft orange tint and an orange underline, a little pulse when a message lands; private is brighter */
.ctabs button.unread{background:linear-gradient(#4a3424,#33271f);color:#f3d2b6;box-shadow:inset 0 -2px 0 var(--accent)}
.ctabs button.unread.pm{background:linear-gradient(#6a3c1e,#4a2c18);color:#ffe2c8;box-shadow:inset 0 -2px 0 #ff9a4e,0 0 8px #e0772f66}
.ctabs button.unread.n0{animation:tabping .9s ease-out}.ctabs button.unread.n1{animation:tabping2 .9s ease-out}
@keyframes tabping{0%{filter:brightness(1.8)}100%{filter:none}}@keyframes tabping2{0%{filter:brightness(1.8)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.ctabs button.unread{animation:none!important}}
.chip{display:inline-block;font:600 11px var(--px);padding:0 6px;margin-left:4px;border:1px solid var(--line);border-radius:3px;background:#3a3f49;color:var(--ink);cursor:pointer}.chip:hover{background:#4a505b}
.crico{color:var(--gold);font:700 13px var(--px);width:32px;text-align:center;flex:none}.dropq{width:32px;height:32px;display:inline-grid;place-items:center;flex:none;font-weight:700;color:var(--dim)}
.sk{height:36px;padding:0 6px 5px;box-sizing:border-box}.skic{display:inline-flex;flex:none}
/* guests */
.guestbtn{background:linear-gradient(#5a4316,#3d2e10);border:1px solid #e9c45e;color:#ffe9a8;border-radius:3px;padding:2px 10px;font:500 13px var(--px);cursor:pointer;animation:gpulse 3s ease-in-out infinite}.guestbtn b{color:#fff}
@keyframes gpulse{50%{box-shadow:0 0 10px #e9c45e88}}
.guestgo{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 14px;padding-bottom:14px;border-bottom:1px solid #ffffff14}.guestgo small{color:var(--muted);text-align:center}
.btn.big{font-size:19px;padding:10px 22px}
.claimform{display:grid;gap:6px}.claimform label{display:grid;gap:3px;font:600 14px var(--px)}.claimform input{font:inherit;padding:6px 8px}
#chatIn:disabled{opacity:.7;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.guestbtn{animation:none}}
.sitelink{display:inline-block;font-size:12.5px;color:var(--muted);text-decoration:none;margin-bottom:6px}.sitelink:hover{color:var(--accent2)}
.devlog img.dlimg{display:block;max-width:100%;border:1px solid #000;border-radius:3px;margin:6px 0}

/* refusal pop-up over the game view */
.toast{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:30;max-width:min(520px,90%);background:rgba(20,10,10,.92);border:1px solid #e06a5c;color:#ffd9d2;font:600 14px var(--tx);padding:8px 14px;border-radius:4px;box-shadow:0 4px 14px #0008;text-align:center;pointer-events:none}
.toast.go{animation:toastIn .18s ease-out}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.newsbtn.bosstag.dim{background:#3a2a28;color:#c9b8b0;border-color:#6a4a44}
.notyet{filter:grayscale(1) brightness(.55);opacity:.7;display:inline-flex}
.brag{font-weight:700;color:#e9e1cc;cursor:help}.brag.rare{color:#f2c14e;text-shadow:0 0 6px #f2c14e55}

/* ---------- touch screens (phones, tablets) ---------- */
body.touch{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.touch:not(:has(input:focus,textarea:focus)) .frame,body.touch:not(:has(input:focus,textarea:focus)) .win,body.touch:not(:has(input:focus,textarea:focus)) .pane{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* not while you're typing in a box (Opera GX backwards typing, 2026-10-24) */
body.touch input,body.touch textarea,body.touch select,body.touch [contenteditable]{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
/* Opera GX + Samsung keyboard typed backwards (player report 2026-10-20 / 24): text boxes inside "no selecting" areas confused the keyboard about the cursor. Wherever there's a text box, its surroundings allow selecting too */
body.touch .cform,body.touch .cform *,body.touch form,body.touch form *:not(button),body.touch :has(>input:not([type=checkbox]):not([type=radio]):not([type=range])),body.touch :has(>textarea){-webkit-user-select:auto;user-select:auto}
body.touch .tabs button{height:40px}
body.touch .btn.sm{min-height:32px;padding-left:10px;padding-right:10px}
body.touch .ctx button{padding:10px 14px;font-size:15px}
body.touch .win .x{width:34px;height:34px;font-size:22px}
.chattoggle{display:none}
/* a phone on its side */
body.touch.land .shell{padding:4px}
body.touch.land .frame{grid-template-columns:var(--vpw) var(--sidew,230px);grid-template-rows:24px var(--vph);grid-template-areas:"top top" "vp side";padding:3px;gap:3px;border-radius:0}
body.touch.land .topbar{height:24px}body.touch.land .logo{font-size:13px;white-space:nowrap}
body.touch.land .logo small{display:none}
/* a phone on its side: Discord, Guide and What's new stay visible (new players looked for them), just smaller; the online count makes room */
body.touch.land .tb-right{gap:5px}
body.touch.land .tb-right .newsbtn{font-size:10px;padding:1px 5px;line-height:1.3}
body.touch.land .tb-right .online .onw{display:none}
body.touch.land .tb-right .guestbtn{font-size:0;padding:1px 6px;line-height:1.2}body.touch.land .tb-right .guestbtn b{font-size:10px}   /* just "Save your progress" */
body.touch.land .dayclock{padding:1px 6px}
body.touch.land .tb-right .boost{font-size:10px;padding:1px 5px}
body.touch.land .mini-sub{display:none}
body.touch.land #minimap{aspect-ratio:auto;height:72px}
body.touch.land .chat{display:none}
body.touch.land.chatopen .chat{display:flex;position:fixed;left:7px;bottom:7px;width:min(var(--vpw),70vw);height:45vh;z-index:40;box-shadow:0 6px 24px #000c}
body.touch.land .chattoggle{display:block;position:absolute;right:6px;bottom:6px;z-index:25;opacity:.9}
body.touch.land.chatopen .chattoggle{z-index:45}
body.touch.land .win{max-height:calc(var(--vph) - 12px)}
body.touch.land .side{height:var(--vph);overflow:hidden}
body.touch.land .pane{min-height:0}
body.touch.land,body.touch.land .shell{height:100%;overflow:hidden}
/* a phone held upright: game on top, the panels fill the rest of the screen, chat pops up from a button */
body.touch.port .shell{padding:0;height:100dvh;overflow:hidden}
body.touch.port .frame{height:100dvh;grid-template-rows:auto var(--vph) minmax(0,1fr);grid-template-areas:"top" "vp" "side";padding:3px;gap:3px}
body.touch.port .side{min-height:0;overflow:hidden}
body.touch.port .pane{min-height:0}
body.touch.port .mini{padding:3px 6px}body.touch.port #minimap{display:none}body.touch.port .mini-sub{display:none}
body.touch.port .chat{display:none}
body.touch.port.chatopen .chat{display:flex;position:fixed;left:0;right:0;bottom:0;height:45dvh;z-index:40;box-shadow:0 -6px 24px #000c}
body.touch.port .chattoggle{display:block;position:absolute;right:6px;bottom:6px;z-index:25;opacity:.9}
body.touch.port.chatopen .chattoggle{position:fixed;bottom:calc(45dvh + 6px);z-index:45}
a.btn{text-decoration:none;display:inline-block}

/* XP orbs */
.xporbs{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;gap:6px;z-index:5;pointer-events:none}
.countdown:not([hidden])~.xporbs{top:42px}
.xporb{--p:0deg;--c:#e9c45e;width:44px;height:44px;border-radius:50%;padding:4px;pointer-events:auto;cursor:default;background:conic-gradient(var(--c) var(--p),#15161a 0);box-shadow:0 0 0 1px #000,0 2px 6px #000a;transition:opacity .4s}
.xporb.out{opacity:0}
.xporb.new{animation:orbIn .25s ease-out}
.xporb-in{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#1a1c21;box-shadow:inset 0 0 0 1px #000}
.xporb .ico{width:22px;height:22px;background-size:auto}
.xporb b{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font:700 13px var(--px);color:#fff;text-shadow:1px 1px 0 #000;background:#1a1c21e6;border-radius:50%}
.xporb:hover b{display:flex}
@keyframes orbIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (max-width:600px){.xporb{width:36px;height:36px;padding:3px}.xporb .ico{width:18px;height:18px}}

/* batch 6: world events, level news, titles in chat */
.newsbtn.evtag{background:#5a4210;color:#ffe08a;border-color:#c9a03a;animation:evpulse 2.4s ease-in-out infinite}
@keyframes evpulse{50%{box-shadow:0 0 8px rgba(242,193,78,.55)}}
.clog .k-mile{color:#ffe08a;font-weight:600}
.clog .ctitle{color:#b9b2a2;font-weight:600;font-style:italic}
body.touch.land .tb-right .newsbtn.evtag{display:inline-block}

/* batch 7: potion timers, volume sliders, profile tabs, clue log */
.buffs{position:absolute;left:8px;bottom:8px;display:flex;flex-direction:column-reverse;gap:4px;z-index:5;pointer-events:none}
.buff{position:relative;display:flex;align-items:center;gap:3px;padding:2px 6px 4px 4px;background:#14161bd9;border:1px solid #000;border-radius:3px;box-shadow:0 2px 5px #0008;font:700 12px var(--px);color:#fff;pointer-events:auto;overflow:hidden}
.buff .ico{width:16px;height:16px;background-size:16px 16px;flex:none}
.buff b{font-size:12px;width:16px;text-align:center;color:#e9c45e}.buff b.bf-focus{color:#8af0ff}.buff b.bf-dxp{color:#ffd84a;font-size:10px;width:18px}
.buff span{margin-left:2px;min-width:30px;text-shadow:1px 1px 0 #000}
.buff .bbar{position:absolute;left:0;bottom:0;height:2px;background:#6fd66f}
.buff.low span{color:#ffb07a}.buff.low .bbar{background:#e0703a}
input.vol{width:110px;accent-color:#e9c45e}.volv{min-width:34px;text-align:right}
.ptabs{display:flex;gap:4px;margin:0 0 8px}.ptabs button{background:#22252c;border:1px solid #3a3f4a;color:var(--dim);font:600 12px var(--px);padding:3px 10px;border-radius:3px;cursor:pointer}.ptabs button[aria-selected="true"]{color:var(--gold);border-color:#7a6430;background:#2c2618}
.cluelog{margin:0 0 8px}.cluelog .bank{margin-top:3px}

/* batch 8: Hall of Fame plaque */
.plaque{text-align:center;padding:12px 10px;background:linear-gradient(#2a2620,#1c1a16);border:2px solid #8a6d22;border-radius:4px;box-shadow:inset 0 0 0 1px #000}
.plaque b{display:block;font:700 20px var(--px);color:#f2c14e;margin:4px 0 2px}.plaque .ico{width:18px;height:18px;background-size:18px 18px}

/* batch 9: Discord button */
.newsbtn.discordbtn{color:#c9cdfb;border-color:#5865f2;background:#2a2d55}.newsbtn.discordbtn:hover{background:#3a3e78}

/* batch 12: movable panels */
.grip{display:block;width:24px;height:14px;padding:0;margin:0 0 -2px;font:700 11px/12px var(--px);letter-spacing:-1px;color:#8a8f99;background:#15161add;border:1px solid #000;border-radius:3px;cursor:grab;touch-action:none;user-select:none}
.grip:hover,.grip.on{color:var(--gold);border-color:#7a6430}.grip.on{cursor:grabbing}
.grip[hidden]{display:none}
body.touch .grip{width:36px;height:22px;font-size:15px;line-height:20px}
.lstack.moved .mtab,.rstack.moved .mtab{margin:0;border-radius:4px}
.lstack.moved,.rstack.moved{width:max-content}

/* batch 19: scheduled XP boost tag */
.boost.xpev{background:#5a1e6a;color:#f4d0ff;border-color:#b06ad0;font-weight:700}

/* the time of day (graphics overhaul: one real hour is a full day) */
.dayclock{display:flex;align-items:center;gap:6px;font:600 12px var(--px);color:var(--ink);background:rgba(12,14,18,.6);border:1px solid rgba(255,255,255,.08);padding:1px 8px;border-radius:3px;white-space:nowrap;cursor:default}
.dayclock .dc-ic{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ffd45a;box-shadow:0 0 6px #ffd45a88}
.dayclock.dawn .dc-ic,.dayclock.dusk .dc-ic{background:#ff9a4a;box-shadow:0 0 6px #ff9a4a88}
.dayclock.night .dc-ic{background:transparent;box-shadow:inset -3px -2px 0 0 #cfdcff}
.dayclock .dc-time{font-variant-numeric:tabular-nums;color:#fff}.dayclock .dc-txt{color:var(--muted)}
.dayclock .dc-bar{position:relative;width:64px;height:6px;border-radius:3px;background:linear-gradient(90deg,#1c2246 0%,#1c2246 20%,#d88a5a 27%,#9ccdf0 33%,#9ccdf0 67%,#e88a4a 73%,#1c2246 80%,#1c2246 100%)}
.dayclock .dc-bar i{position:absolute;top:-2px;width:2px;height:10px;background:#fff;border-radius:1px;box-shadow:0 0 2px #000}
@media (max-width:860px){.dayclock .dc-bar,.dayclock .dc-txt{display:none}}
body.touch.land .dayclock .dc-bar,body.touch.land .dayclock .dc-txt{display:none}
/* narrow phones (portrait): the top bar wraps instead of pushing the whole game wider than the screen */
body.port .topbar{flex-wrap:wrap;height:auto;gap:4px;row-gap:3px}
body.port .tb-right{flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0;flex:1 1 auto}
body.port .tb-right .guestbtn{white-space:normal;max-width:150px;line-height:1.15}
body.port .tb-right .boost{white-space:nowrap}
body.port .logo{font-size:15px}
.slot.shiny{background-image:radial-gradient(circle at 50% 45%,rgba(255,236,150,.22),transparent 70%);box-shadow:inset 0 0 0 2px #ffd86a,0 0 7px rgba(255,216,106,.55)}
.slot.shiny.on{box-shadow:inset 0 0 0 2px #fff,0 0 9px #ffd86a}

/* the "Are you there?" activity check */
#botcheck{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
#botcheck .bc-box{position:relative;width:min(560px,92vw);height:min(340px,70vh);background:var(--dark);border:2px solid var(--gold);border-radius:6px;padding:14px 16px;box-shadow:0 10px 40px #000}
#botcheck .bc-box p{margin:6px 0}
#botcheck .bc-box button{position:absolute;transform:translate(-10%,0);white-space:nowrap;margin-top:70px}

/* staff watching a player live */
#spybar{position:fixed;left:12px;top:56px;z-index:900;max-width:320px;background:rgba(20,10,12,.92);border:2px solid #ff4646;border-radius:6px;padding:8px 10px;font-size:13px;box-shadow:0 6px 20px #000}
#spybar .small{margin:6px 0;line-height:1.35}#spybar .btn{margin-top:2px}

/* the Exchange: the two big choices on its first screen */
.gehome{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 10px}
.gebig{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 14px 12px;background:linear-gradient(#2a2c33,#1d1f24);border:1px solid #000;border-radius:4px;box-shadow:inset 0 1px 0 #3a3d46;color:var(--ink,#e9e1cc);cursor:pointer;font:inherit}
.gebig:hover{background:linear-gradient(#33363e,#24262c);box-shadow:inset 0 1px 0 #4a4e58,0 0 0 1px #c0601f}
.gebig b{font:700 21px var(--px);color:var(--gold);letter-spacing:.5px}
.gebig span{font-size:13px;line-height:1.35;opacity:.9}.gebig small{font-size:12px;opacity:.75}
@media (max-width:560px){.gehome{grid-template-columns:1fr}}
.clog .ch-jail .msg{color:#ffb37a}.clog .ch-jail .jtag{color:#e0703a;font-weight:700}

/* ---------- Examine pop-up (client/09_info.js) and outfit lines in tooltips ---------- */
.infopop{position:fixed;z-index:21;width:min(340px,calc(100vw - 8px));max-height:min(72vh,560px);overflow:auto;background:#141519f7;border:1px solid #000;outline:1px solid #3a3f4a;border-radius:4px;box-shadow:0 8px 24px #000c;font-size:13px;line-height:1.4}
.infopop[hidden]{display:none}
.infopop .ip-h{position:sticky;top:0;display:flex;align-items:center;gap:6px;padding:6px 8px;background:#1d1f24;border-bottom:1px solid #000;z-index:1}
.infopop .ip-t{flex:1;min-width:0;font:700 15px var(--px);color:var(--gold);letter-spacing:.3px}
.infopop .ip-x{background:none;border:1px solid #3a3f4a;border-radius:3px;color:var(--muted);font:700 15px/1 var(--px);width:22px;height:22px;cursor:pointer;padding:0;flex:none}
.infopop .ip-x:hover{color:var(--ink);border-color:#7a6430}
.infopop .ip-b{padding:8px 10px 10px}
.infopop p{margin:0 0 6px}
.infopop h4{margin:10px 0 4px;font:600 12px var(--px);color:var(--gold);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #2a2d34;padding-bottom:2px}
.infopop .ip-item{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.infopop .ip-item .ico{width:32px;height:32px}.infopop .ico.big{width:40px;height:40px;background-size:cover}
.infopop .ip-item > div{flex:1;min-width:0}
.infopop .ip-desc{color:var(--ink);font-style:italic}
.infopop .ip-lines{margin:2px 0 4px}
.infopop .ip-use{margin:4px 0 6px}.infopop .ip-use > div{padding-left:4px}
.infopop .ip-row{display:flex;align-items:center;gap:4px;padding:1px 0}.infopop .ip-row .r{margin-left:auto;padding-left:8px;white-space:nowrap}
.infopop .ip-foot{margin-top:8px;padding-top:6px;border-top:1px solid #2a2d34;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.infopop .ilink{cursor:pointer;border-bottom:1px dotted #6f6a60}.infopop .ilink:hover{color:var(--gold);border-color:var(--gold)}
.infopop .ilink .ico,.infopop .ip-row .ico{width:20px;height:20px;margin-right:3px;background-size:cover}
.infopop .ip-tab{width:100%;border-collapse:collapse;font-size:12px;margin:2px 0 4px}
.infopop .ip-tab th{text-align:left;color:var(--muted);font-weight:600;padding:2px 3px;border-bottom:1px solid #2a2d34}
.infopop .ip-tab td{padding:2px 3px;border-bottom:1px solid #1f2127;white-space:nowrap}
.infopop .ip-tab td .ico{width:18px;height:18px;margin-right:3px;background-size:cover}
.infopop .ip-tab tr.locked td{opacity:.5}.infopop .ip-tab tr.cur td{background:#2a2614}
.tip .ofon,.infopop .ofon{font-weight:700}

/* ---------- @mentions (client/10_mention.js) ---------- */
.clog .ment{color:var(--gold);font-weight:700;cursor:pointer}
.clog .ment.me{color:#ffe08a;text-shadow:0 0 6px #e9c45e55}
.clog p.ment-me{background:linear-gradient(90deg,#e9c45e2e,#e9c45e10 60%,transparent);box-shadow:inset 3px 0 0 var(--gold);border-radius:2px;padding:1px 4px 1px 6px;margin:2px 0}
.ctabs button .mdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-left:5px;vertical-align:1px;box-shadow:0 0 6px #e9c45e}
.cform{position:relative}
.mentbox{position:absolute;left:4px;bottom:calc(100% + 2px);z-index:30;min-width:220px;max-width:min(320px,calc(100% - 8px));background:#1d1f24;border:1px solid #000;outline:1px solid #3a3f4a;border-radius:4px;box-shadow:0 -6px 18px #000a;padding:3px 0;font-size:13px}
.mentbox[hidden]{display:none}
.mentbox .mopt{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;color:var(--ink)}
.mentbox .mopt .mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mentbox .mopt .mname b{color:var(--gold)}
.mentbox .mopt.sel,.mentbox .mopt:hover{background:#3a3424;box-shadow:inset 3px 0 0 var(--gold)}
.mentbox .mtag{font-size:11px;color:var(--good);border:1px solid #2f5a2f;border-radius:3px;padding:0 4px}
.mentbox .mlv{font-size:11px;color:var(--muted)}
.mentbox .mhint{font-size:11px;color:var(--dim);padding:3px 10px 1px;border-top:1px solid #2a2d34;margin-top:2px}
body.touch .mentbox .mhint{display:none}
.clog .ctitle.stitle{color:#f2c14e;font-weight:700;text-shadow:0 0 6px #e9c45e44}

/* logged out for being idle, and the offline time on the welcome-back report */
#kickIdle{margin:4px 0 12px;text-align:left}
.idl-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14px}.idl-row b{font:700 16px var(--px);font-variant-numeric:tabular-nums}
.idl-bar{height:8px;background:var(--inset);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:6px 0 4px}.idl-bar i{display:block;height:100%;background:linear-gradient(90deg,#a88a2e,#e9c45e)}
.offday{background:var(--inset);border:1px solid var(--line);border-radius:4px;padding:6px 10px;margin:6px 0 10px}
.li .t small.geby{display:block;color:var(--muted)}.li .t small.geby b{display:inline;font:600 12px var(--tx);color:var(--ink)}

/* Haunted Gauntlet: Mortimer's window and the end-of-run screen */
.hgbox{background:linear-gradient(#2a1a10,#1c1410);border:1px solid #5a3a1a;border-radius:5px;padding:8px 10px;margin:0 0 10px}
.hgbox .hgtop{display:flex;gap:8px;align-items:center}.hgbox .hgtop .ico{width:40px;height:40px;background-size:cover}.hgbox .hgtop > div > b{display:block;font:700 17px var(--px);color:#ff9a3a}.hgbox .hgtop small{color:var(--muted)}
.hgbox ul{margin:6px 0 8px;padding-left:18px}.hgbox li{margin:2px 0}
.hgmasks{display:flex;gap:6px;align-items:center;margin-top:8px}.hgmasks .ico{width:28px;height:28px}
.hgpips{display:flex;gap:4px}.hgpips i{flex:1;height:10px;border-radius:2px;background:#2a2d34;border:1px solid #000}.hgpips i.on{background:linear-gradient(#ff9a3a,#c8641a)}.hgpips i.tier{box-shadow:inset 0 -2px 0 #e9c45e}.hgpips i.boss{flex:1.6}.hgpips i.boss.on{background:linear-gradient(#e9c45e,#a8862e)}
.hgrew,.hgmask{display:flex;gap:10px;align-items:center;background:var(--inset);border:1px solid var(--line);border-radius:4px;padding:6px 8px;margin:6px 0}.hgrew small,.hgmask small{display:block}
.hgmask{border-color:#a8862e;box-shadow:0 0 12px #e9c45e44}.hgmask .ico{width:40px;height:40px;background-size:cover}

/* the minimap can be hidden (button by the area name) */
.mini-tog{background:none;border:1px solid #3a3f4a;border-radius:3px;color:var(--muted);font:700 12px/1 var(--px);width:22px;height:20px;padding:0;margin-left:6px;cursor:pointer;align-self:center;flex:none}
.mini-tog:hover{color:var(--ink);border-color:#7a6430}
.mini-head .cr{margin-left:auto;padding-left:8px}.mini-head #areaName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.nominimap #minimap{display:none!important}
body.nominimap .mini-btns{margin-top:3px}body.nominimap .mini-btns .btn{padding:2px 6px}
.potpick{display:flex;gap:3px;margin-top:5px}.potpick .btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;padding:3px 2px;font-size:13px;white-space:nowrap;overflow:hidden}.potpick .ico{width:15px;height:15px;margin:0!important;flex:none}
/* a title shows in its owner's supporter colour (founders purple, supporters pink); staff titles stay gold, everyone else grey */
.clog .ctitle.t-founder{color:#c9a6ff;font-style:normal}.clog .ctitle.t-supporter{color:#ff8fb1;font-style:normal}
/* Donate tab: numbered steps, gift picker, code box; thank-you window */
.donstep{display:flex;gap:10px;align-items:flex-start;margin:8px 0;padding:8px 10px;border:1px solid #2c2f37;border-radius:8px;background:#16181d}
.donstep>i{flex:none;width:22px;height:22px;border-radius:50%;background:#e0772f;color:#14151a;font:700 13px/22px var(--ui,sans-serif);text-align:center;font-style:normal}
.donstep>div{flex:1;min-width:0}.donstep>div>b{display:block;margin-bottom:4px}.donstep.dim{opacity:.45}
.doncode{display:flex;gap:8px;align-items:center}.doncode code{font:700 18px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;color:#f2c14e;background:#0e0f12;border:1px dashed #5a4a26;border-radius:6px;padding:7px 10px;user-select:all}
.donsearch input{width:100%;box-sizing:border-box}.donlist{display:flex;flex-direction:column;margin-top:4px;max-height:180px;overflow:auto}.donlist .li{text-align:left}
.donpicked{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.donthx{text-align:center;padding:4px 0 6px}.donthx .big{font-size:46px;line-height:1;color:var(--c);text-shadow:0 0 18px var(--c)}
.donthx h3{margin:8px 0 6px;font-size:19px}.donthx h3 span{color:var(--c)}.donthx p{margin:0 auto;max-width:360px}
.list .ctitle{color:#b9b2a2;font-weight:600;font-style:italic}.list .ctitle.stitle{color:#f2c14e;font-weight:700}.list .ctitle.t-founder{color:#c9a6ff;font-style:normal}.list .ctitle.t-supporter{color:#ff8fb1;font-style:normal}
/* farm plots: every seed you can plant, lowest to highest, under each empty plot */
.seedrow{display:flex;flex-wrap:wrap;gap:4px;margin:-2px 0 6px 40px}.seedb{position:relative;padding:2px 4px;min-width:38px}.seedb .n{position:absolute;right:2px;bottom:0;font:700 10px var(--ui,sans-serif);color:#fff;text-shadow:0 1px 2px #000}
/* polls */
.pollq{margin:0 0 10px;font-size:17px}.pollbody{display:flex;flex-direction:column;gap:6px}.pollopt{text-align:left;padding:9px 12px;font-size:14px}
.pollres{padding:6px 8px;border-radius:6px;background:#16181d}.pollres.mine{outline:1px solid #e9c45e66}.pollres .bar{margin-top:4px}
.shamelist{display:flex;flex-direction:column;gap:6px}.shamecase{padding:8px 10px;border:1px solid #4a2626;border-left:3px solid #e8604f;border-radius:6px;background:#1a1214}
.shamecase .sname{color:#ff8a7a;font-weight:700;font-size:15px}.shamecase .lbl{color:#c9b8a8;font-weight:700}
.seedb .ico{width:28px;height:28px}.seedb{min-width:42px;min-height:36px}
/* the new-player tutorial box (client/15_tutorial.js) */
#tutBox{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;width:min(330px,calc(100% - 16px));background:var(--panel,#22242a);border:2px solid #f2c14e;border-radius:10px;padding:9px 11px;box-shadow:0 6px 18px #000a;font-size:13px;line-height:1.35;pointer-events:none}
#tutBox.low{top:auto;bottom:8px}
#tutBox .tut-h{display:flex;justify-content:space-between;gap:8px;font-weight:700;color:#f2c14e;margin-bottom:4px}
#tutBox .tut-dots{display:flex;gap:4px;margin-bottom:6px}#tutBox .tut-dots i{flex:1;height:4px;border-radius:2px;background:#444}#tutBox .tut-dots i.d{background:#5fbf5f}#tutBox .tut-dots i.c{background:#f2c14e}
#tutBox .tut-t{display:block;font-size:15px;margin-bottom:2px}
.tutpulse{animation:tutpulse 1s ease-in-out infinite;position:relative;z-index:2}
@keyframes tutpulse{0%,100%{box-shadow:0 0 0 2px #f2c14e,0 0 6px 2px #f2c14e88}50%{box-shadow:0 0 0 3px #ffe08a,0 0 16px 6px #f2c14eaa}}
@media (max-width:700px){#tutBox{font-size:11.5px;padding:5px 8px;top:4px;border-width:1px}#tutBox.low{bottom:4px}#tutBox .tut-dots{display:none}#tutBox .tut-t{font-size:13px}#tutBox .tut-h{margin-bottom:2px;font-size:11px}}

/* offline time left (top bar, client/07_qol.js) */
.newsbtn.offtag{white-space:nowrap;color:#c9d6ff;border-color:#5a6a9a}.newsbtn.offtag.low{color:#ffb3a8;border-color:#a04a3a}
.offbig{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 4px}.offbig b{font:700 22px var(--px);color:var(--gold)}
.newsbtn.holetag{white-space:nowrap;color:#ffd890;border-color:#a07a2a}
.newsbtn.holetag.angry{color:#ff9a8a;border-color:#a8382a;background:rgba(120,20,10,.35)}
.goalcalc{margin-top:5px;padding-top:5px;border-top:1px solid #ffffff22;color:#ffe08a}
.sk.hasgoal{box-shadow:inset 0 0 0 1px #f2c14e88}
.goalcalc .gn{font-weight:700;color:#fff3c4}
/* chat emojis and reactions (client/19_emoji.js) */
.emobtn{padding:0 6px;font-size:15px;line-height:1}
#emoBox{position:fixed;z-index:60;display:grid;grid-template-columns:repeat(9,28px);gap:2px;background:var(--panel,#22242a);border:1px solid #555b67;border-radius:6px;padding:6px;box-shadow:0 6px 18px #000a}
#emoBox button{background:none;border:0;font-size:18px;cursor:pointer;border-radius:4px;padding:2px;color:var(--ink,#eee);font-weight:700}#emoBox button:hover{background:#ffffff18}
#rxBar{position:fixed;z-index:60;display:grid;grid-template-columns:repeat(7,auto);gap:2px;background:var(--panel,#22242a);border:1px solid #555b67;border-radius:12px;padding:4px 6px;box-shadow:0 6px 18px #000a}
#rxBar button{background:none;border:0;font-size:18px;cursor:pointer;border-radius:12px;padding:1px 3px}#rxBar button:hover{background:#ffffff22;transform:scale(1.2)}
#clog p{position:relative}
#clog .reacts{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle;flex-wrap:wrap}
#clog .rx{background:#ffffff10;border:1px solid #ffffff22;border-radius:10px;padding:0 5px;font-size:11px;line-height:16px;cursor:pointer;color:var(--ink,#ddd)}#clog .rx.mine{border-color:#f2c14e;background:#f2c14e22}
#clog .rxadd{display:inline-block;visibility:hidden;margin-left:6px;vertical-align:middle;line-height:14px;background:#2a2d34;border:1px solid #555b67;border-radius:8px;font-size:11px;padding:0 5px;cursor:pointer;color:#ccc}
#clog p:hover .rxadd{visibility:visible}   /* right after the message (and its reactions), not at the far edge (2026-10-09) */
body.touch #clog .rxadd{display:inline-block;position:static;opacity:.6;margin-left:4px}

/* locked pack slots (2026-10-10) */
.slot.locked{border-color:#c9a24a;box-shadow:inset 0 0 0 1px #c9a24a66,inset 0 1px 0 #26282e}.slot.empty.locked{opacity:.8}
.slot .lk{position:absolute;right:1px;bottom:0;font-size:10px;line-height:1;filter:drop-shadow(1px 1px 0 #000);pointer-events:none}

/* the Crater's radiation meter (2026-10-10) */
#radBox{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:6;min-width:230px;padding:6px 10px;border-radius:6px;background:#0d140ccc;border:1px solid #2f7a22;box-shadow:0 0 12px #5dff3a33;font:600 12px var(--ui,sans-serif);color:#cfeec4;pointer-events:none}
#radBox .rh{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}#radBox .rh b{color:#5dff3a}
#radBox .rbar{height:8px;border-radius:4px;background:#132013;overflow:hidden;border:1px solid #1f3a1a}#radBox .rbar i{display:block;height:100%;background:linear-gradient(90deg,#2f9a22,#5dff3a,#d8ff6a)}
#radBox .rt{margin-top:4px;font-weight:500;color:#a8d89a}
#radBox.poison{border-color:#e04a3a;background:#2a0c0ad8;animation:radflash .6s steps(2) infinite}#radBox.poison .rbar i{background:#ff5a3a}#radBox.poison .rh b{color:#ff8a6a}
#radBox .rp{margin-top:5px;font-weight:800;color:#ffd0c8;letter-spacing:.02em}
@keyframes radflash{0%{box-shadow:0 0 14px #ff3a2a99}100%{box-shadow:0 0 2px #ff3a2a22;border-color:#ff9a8a}}

/* the devlog, redrawn (2026-10-11) */
.dlog2{display:flex;flex-direction:column;gap:12px}
.dlpost{background:linear-gradient(180deg,#2a2d35,#22252b);border:1px solid #0b0c0e;border-radius:10px;padding:0 0 10px;box-shadow:inset 0 1px 0 #ffffff12,0 2px 8px #0006;overflow:hidden}
.dlpost header{padding:10px 14px 8px;border-bottom:1px solid #0b0c0e;background:linear-gradient(90deg,#3a2d18,#2a2d35 70%)}
.dlpost.top header{background:linear-gradient(90deg,#5a3f12,#2f2a24 75%)}
.dlpost header h3{margin:0;font:700 20px 'Barlow Condensed','Arial Narrow',sans-serif;color:var(--gold);letter-spacing:.3px;display:inline}
.dlpost .dldate{margin-left:10px;font-size:12px;color:var(--muted);background:#0006;border-radius:8px;padding:1px 8px;vertical-align:3px}
.dlpost .dlnew{margin-left:8px;font:800 11px sans-serif;color:#1a1408;background:var(--gold);border-radius:8px;padding:2px 7px;vertical-align:3px;letter-spacing:.5px}
.dlpost img.dlimg{display:block;width:calc(100% - 28px);margin:10px 14px 0;border-radius:6px;border:1px solid #000}
.dlpost ul{list-style:none;margin:8px 0 0;padding:0 14px}
.dlpost li{position:relative;padding:3px 0 3px 18px;line-height:1.4}
.dlpost li::before{content:'';position:absolute;left:3px;top:10px;width:7px;height:7px;background:var(--accent);transform:rotate(45deg);border-radius:1px;box-shadow:0 0 6px #e0772f80}
#newsCard{position:absolute;right:12px;bottom:12px;z-index:6;width:min(320px,calc(100% - 24px));background:linear-gradient(180deg,#2c2f37,#1f2126);border:2px solid var(--gold);border-radius:12px;box-shadow:0 10px 30px #000c,0 0 0 1px #000;overflow:hidden;transform:translateY(20px);opacity:0;transition:transform .35s ease,opacity .35s ease}
#newsCard.in{transform:none;opacity:1}
#newsCard .nc-rib{position:relative;font:800 12px sans-serif;letter-spacing:1px;text-transform:uppercase;color:#1a1408;background:linear-gradient(90deg,var(--gold),#f6dc8a);padding:5px 12px}
#newsCard .nc-img{height:110px;background:#111 center/cover no-repeat;border-bottom:1px solid #000}
#newsCard .nc-body{padding:10px 12px 12px}
#newsCard .nc-title{display:block;font:700 18px 'Barlow Condensed','Arial Narrow',sans-serif;color:var(--ink)}
#newsCard .nc-date{font-size:11px;color:var(--muted)}
#newsCard ul{list-style:none;margin:6px 0 0;padding:0}
#newsCard li{position:relative;padding:2px 0 2px 14px;font-size:13px;line-height:1.35;color:#d8d2c4}
#newsCard li::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;background:var(--accent);transform:rotate(45deg)}
#newsCard .nc-more{font-size:12px;color:var(--gold);margin-top:4px}
#newsCard .nc-btns{display:flex;gap:6px;justify-content:flex-end;margin-top:10px}

/* ---------- GUI themes (2026-10-12; client/26_themes.js). The main surfaces read these variables; the defaults are the original
   Prison Steel colours, so nothing changes until a theme sets them (on :root for your own, on #win for someone's profile). ---------- */
:root{--bg-a:#1d2026;--bg-b:#101114;--frame-hi:#5a606c;--frame-in:#3c414b;--frame-glow:transparent;
  --btn-a:#474c57;--btn-b:#353942;--btn-hi:#6a707c;--btn-ha:#525865;--btn-hb:#3d424c;--btn-dn:#2e3239;--btn-ink:var(--ink);
  --pri-a:#e98a44;--pri-b:#c0601f;--pri-c:#b8581a;--pri-hi:#ffb77a;--pri-ink:#1a0f06;--pri-glow:transparent;
  --tab-a:#3f444e;--tab-b:#2e3239;--tabon-a:#6a4a30;--tabon-b:#4a2f1c;--tab-glow:transparent;
  --slot:#101114;--slot-hi:#26282e;--slot-hov:#1e2027;--li:#202228;--li-hov:#2a2d35;--box:#131418;--sk-a:#34373f;--sk-b:#26282e;
  --head-a:#3d424c;--head-b:#2d3038;--head-glow:transparent;--ctab:#2b2e35;--ctab-on:#3d424c;--ctx:#1d1f24;--ctx-hov:#3a3e47;--tipbg:#101114f2;
  --pat:none;--patsz:64px;--title-glow:transparent}
body{background:radial-gradient(ellipse at 50% 0%,var(--bg-a) 0%,var(--bg-b) 70%)}
.frame{box-shadow:0 0 30px var(--frame-glow),0 10px 40px #000a,inset 0 1px 0 var(--frame-hi)}
.frame::before{border-color:var(--frame-in)}
.btn{background:linear-gradient(var(--btn-a),var(--btn-b));box-shadow:inset 0 1px 0 var(--btn-hi);color:var(--btn-ink)}
.btn:hover{background:linear-gradient(var(--btn-ha),var(--btn-hb))} .btn:active{background:var(--btn-dn)}
.btn.primary{background:linear-gradient(var(--pri-a),var(--pri-b));box-shadow:inset 0 1px 0 var(--pri-hi),0 0 8px var(--pri-glow);color:var(--pri-ink)}
.btn.on,.btn[aria-pressed=true]{background:linear-gradient(var(--pri-a),var(--pri-c));color:var(--pri-ink);box-shadow:inset 0 1px 0 var(--pri-hi),0 0 8px var(--pri-glow)}
.tabs button{background:linear-gradient(var(--tab-a),var(--tab-b))}
.tabs button[aria-selected=true]{background:linear-gradient(var(--tabon-a),var(--tabon-b));box-shadow:inset 0 0 0 1px var(--accent),0 0 6px var(--tab-glow)}
.style{background:linear-gradient(var(--sty-a,#3a3e47),var(--sty-b,#2b2e35))} .style[aria-pressed=true]{background:linear-gradient(var(--tabon-a),var(--tabon-b))}
.slot{background:var(--slot);box-shadow:inset 0 1px 0 var(--slot-hi)} .slot:hover:not(.empty){background:var(--slot-hov)}
.li,.kc,.order{background:var(--li)} .li:hover{background:var(--li-hov)}
.stats,.total{background:var(--box)} .sk{background:linear-gradient(var(--sk-a),var(--sk-b))}
.win-head{background:linear-gradient(var(--head-a),var(--head-b));text-shadow:0 0 6px var(--head-glow)}
.ctabs button{background:var(--ctab)} .ctabs button[aria-selected=true]{background:var(--ctab-on)}
.ctx{background:var(--ctx)} .ctx button:hover{background:var(--ctx-hov)} .tip{background:var(--tipbg)}
.logo span{text-shadow:0 0 8px var(--title-glow)}
.notice .li{background:#f2ead4}   /* the notice board keeps its paper look */
/* patterns: faint pictures behind the panels and windows */
.pane,.chat,.mini,.win-body{background-image:var(--pat);background-size:var(--patsz) var(--patsz)}
/* effects: a layer of small moving things over the side panel, the chat and a themed window */
.side,.chat{position:relative}
.fxl{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4;border-radius:3px}
.fx-glow{position:absolute;bottom:-6px;width:3px;height:3px;border-radius:50%;background:var(--fx-c,#9bff6e);box-shadow:0 0 6px 2px var(--fx-g,#5dff3a);opacity:0;animation:fxrise 6s linear infinite}
@keyframes fxrise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}100%{transform:translateY(-170px);opacity:0}}
@media (prefers-reduced-motion:reduce){.fxl{display:none}}
/* the Appearance window */
.thgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.thcard{position:relative;text-align:left;padding:0;border:1px solid #000;border-radius:4px;background:var(--li);cursor:pointer;overflow:hidden;color:var(--ink)}
.thcard.locked{cursor:help;opacity:.55;filter:grayscale(.6)} .thcard.cur{box-shadow:0 0 0 2px var(--accent)}
.thcard .sw{display:flex;height:34px;border-bottom:1px solid #000;background-size:32px 32px} .thcard .sw i{flex:1}
.thcard .tn{display:block;padding:4px 7px 0;font:600 14px var(--px)} .thcard .tr{display:block;padding:0 7px 5px;font-size:11px}
.rar-c{color:#cfcac0}.rar-r{color:#6fb4ff}.rar-l{color:#ffb347;text-shadow:0 0 6px #ff9a2a66}
.thmix{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;margin:8px 0}
.thline{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px}
.fx-spider{position:absolute;top:0;width:16px;height:0;color:var(--muted);animation:fxdrop 14s ease-in-out infinite}
.fx-spider .th{position:absolute;left:7.5px;top:0;width:1px;height:100%;background:var(--fx-c);opacity:.55}
.fx-spider svg{position:absolute;left:0;bottom:-12px;animation:fxsway 2.6s ease-in-out infinite;transform-origin:8px 0}
@keyframes fxdrop{0%,12%{height:0;opacity:0}15%{opacity:1}34%,66%{height:120px}85%{opacity:1}88%,100%{height:0;opacity:0}}
@keyframes fxsway{50%{transform:rotate(9deg)}}
.rar-m{background:linear-gradient(90deg,#ff3a2a,#ffcf5a,#ff3a2a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;animation:mythic 3s linear infinite}
@keyframes mythic{to{background-position:200% 0}}
.thcard.mythic{border-color:#ffcf5a;box-shadow:0 0 10px #ff3a2a55}
.thgrid.sm{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))} .thgrid.sm .sw{height:24px} .thgrid.sm .tn{font-size:13px}
.fx-shimmer{position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,var(--fx-c) 50%,transparent);opacity:.12;animation:fxshim 7s ease-in-out infinite}
@keyframes fxshim{0%,55%{transform:translateX(0)}100%{transform:translateX(400%)}}
.fx-spark{position:absolute;width:3px;height:3px;background:var(--fx-c);transform:rotate(45deg);box-shadow:0 0 6px var(--fx-g);opacity:0;animation:fxspark 4s ease-in-out infinite}
@keyframes fxspark{0%,70%,100%{opacity:0;transform:rotate(45deg) scale(.4)}80%{opacity:.9;transform:rotate(45deg) scale(1.3)}}
.fx-bat{position:absolute;left:-30px;color:#120a14;filter:drop-shadow(0 0 2px var(--fx-g));animation:fxbat 14s linear infinite}
.fx-bat svg{animation:fxflap .35s ease-in-out infinite alternate}
@keyframes fxbat{0%{left:-30px;transform:translateY(0)}25%{transform:translateY(-14px)}50%{transform:translateY(8px)}75%{transform:translateY(-10px)}70%{opacity:1}100%{left:105%;transform:translateY(0)}}
@keyframes fxflap{to{transform:scaleY(.45)}}
.fx-vigil{position:absolute;left:0;right:0;bottom:0;height:70px;background:radial-gradient(ellipse at 50% 100%,#ff7a2a40,transparent 70%);animation:fxvigil 3s ease-in-out infinite alternate}
@keyframes fxvigil{to{opacity:.55}}
.fx-candle{position:absolute;bottom:0;width:5px;background:linear-gradient(#fff4dc,#d8c4a0);border-radius:1px 1px 0 0;box-shadow:0 0 2px #000}
.fx-candle::after{content:"";position:absolute;left:50%;bottom:100%;width:5px;height:9px;margin-left:-2.5px;border-radius:50% 50% 45% 45%;background:radial-gradient(ellipse at 50% 70%,#fff8c0,#ffb02a 55%,#ff5a1a00 75%);box-shadow:0 0 10px 3px #ffa03a88;transform-origin:50% 100%;animation:fxflame .18s ease-in-out infinite alternate}
@keyframes fxflame{to{transform:scale(.9,1.12) skewX(4deg)}}
.fx-ember{--fx-c:#ffd27a;--fx-g:#ff6a2a}

/* ---------- trading cards (2026-10-12; client/27_cards.js). Rarity: tc-c Common, tc-r Rare, tc-h Holo, tc-l Legendary Holo, tc-m Mastery ---------- */
.tc-wrap{display:flex;justify-content:center;padding:4px 0}
.tcard{position:relative;width:230px;height:322px;border-radius:13px;padding:8px;box-sizing:border-box;box-shadow:0 10px 30px #000c,0 0 0 1px #000;overflow:hidden;background:var(--tc-frame);flex:none;--mx:50%;--my:50%}
.tc-in{position:relative;height:100%;border-radius:8px;padding:7px 8px;box-sizing:border-box;display:flex;flex-direction:column;gap:5px;color:#1b1b1b;background:linear-gradient(#f7ead0,#e6cfa0)}
.tc-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;position:relative;z-index:3}.tc-top b{font:800 16px 'Arial Narrow',Arial,sans-serif;line-height:1.05}.tc-top span{font:800 12px Arial,sans-serif;white-space:nowrap}
.tc-art{position:relative;height:128px;flex:none;border-radius:5px;border:3px solid var(--tc-band);display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;padding:10px;background:var(--tc-art)}
.tc-art img{image-rendering:pixelated;max-height:100%;max-width:100%;width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 6px 4px #0007);position:relative;z-index:2}
.tc-type{white-space:nowrap;font:700 9.5px Arial,sans-serif;letter-spacing:.3px;gap:6px;text-transform:uppercase;padding:3px 6px;border-radius:3px;display:flex;justify-content:space-between;background:var(--tc-band);color:var(--tc-bink);position:relative;z-index:3;overflow:hidden}
.tc-stats{font:11px Arial,sans-serif;line-height:1.45;border-radius:4px;padding:4px 6px;background:#fff7e6;border:1px solid #c8a060;position:relative;z-index:3}.tc-stats b{font-weight:800}
.tc-flav{font:italic 10.5px Georgia,serif;line-height:1.3;border-top:1px solid #0003;padding-top:4px;flex:1;position:relative;z-index:3;overflow:hidden}
.tc-foot{display:flex;justify-content:space-between;align-items:center;font:700 9.5px Arial,sans-serif;position:relative;z-index:3}.tc-stars{letter-spacing:1px;font-size:12px}
.tc-tag{position:absolute;left:5px;top:5px;z-index:6;font:800 8.5px Arial,sans-serif;letter-spacing:1px;color:#fff;padding:2px 6px;border-radius:3px;text-shadow:0 1px 0 #0008}
.tc-l .tc-art>.tc-tag{left:14px;top:auto;bottom:128px}   /* the RARE / HOLO / ... badge sits in the picture's corner, never over a long name (2026-10-18) */
.tc-tag.t2{background:linear-gradient(90deg,#6a737d,#c8d0d8,#6a737d)}.tc-tag.t3{background:linear-gradient(90deg,#ff5f6d,#ffc371,#47e58e,#4fb4ff,#b46bff)}.tc-tag.t4{background:linear-gradient(90deg,#b8861e,#ffd86a,#ff7ad8,#ffd86a,#b8861e);color:#2a1604;text-shadow:none}
.tc-c .tc-in{background:linear-gradient(#f2e6d0,#e0cfae)}
.tc-r{background:linear-gradient(135deg,#f4f6f8,#9aa3ad 30%,#e8ecf0 50%,#7a838d 70%,#dfe4e9)}
.tc-r .tc-top b{color:#1e2228;text-shadow:0 1px 0 #ffffffb0,0 -1px 0 #00000030}
@keyframes tcemb{to{background-position:200% 0}}
.tc-r::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 44%,#ffffff45 50%,transparent 56%);background-size:300% 300%;animation:tcglint 4s ease-in-out infinite;z-index:4}
@keyframes tcglint{0%{background-position:100% 100%}60%,100%{background-position:0 0}}
.tc-h::after,.tc-l::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.85;z-index:4;
  background:linear-gradient(115deg,transparent 15%,#ff5f6d 27%,#ffc371 35%,#47e58e 44%,#4fb4ff 53%,#b46bff 62%,transparent 75%);background-size:260% 260%;background-position:var(--mx) var(--my);transition:background-position .15s}
.tc-h::before,.tc-l::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.35;z-index:4;background:repeating-linear-gradient(45deg,#fff3 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,#fff2 0 2px,transparent 2px 7px)}
.tc-h:not(:hover)::after,.tc-l:not(:hover)::after{animation:tcfoil 3.2s ease-in-out infinite alternate}
@keyframes tcfoil{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.tc-l,.tc-m{background:linear-gradient(135deg,#fff3b0,#d8a640 25%,#fff8d8 50%,#b8861e 75%,#ffe9a0);animation:tcpulse 2.4s ease-in-out infinite alternate}
@keyframes tcpulse{from{box-shadow:0 0 18px #ffcf5a,0 10px 30px #000c,0 0 0 1px #000}to{box-shadow:0 0 30px #ffcf5a,0 0 8px #ff7ad8,0 10px 30px #000c,0 0 0 1px #000}}
.tc-l .tc-in,.tc-m .tc-in{position:absolute;inset:8px;height:auto;background:radial-gradient(ellipse at 50% 35%,#8a5a30,#3a2a14 55%,#140e06);color:#fff3d8}
.tc-l .tc-art{position:absolute;inset:0;height:auto;border:0;border-radius:8px;background:none;padding:40px 20px 124px}
.tc-l .tc-art img,.tc-m .tc-art img{filter:drop-shadow(0 0 10px #ffcf5a) drop-shadow(0 8px 6px #000)}
.tc-l .tc-top b,.tc-l .tc-top span,.tc-m .tc-top b,.tc-m .tc-top span{color:#fff3d8;text-shadow:0 1px 0 #000,0 0 8px #ffcf5a}
.tc-l .tc-type{margin-top:auto;background:linear-gradient(90deg,#b8861e,#ffd86a,#b8861e);color:#2a1604}
.tc-l .tc-stats,.tc-m .tc-stats{background:#0009;border-color:#ffcf5a;color:#fff3d8}.tc-l .tc-flav,.tc-m .tc-flav{color:#ffe9b0;border-color:#ffcf5a55}.tc-l .tc-flav{flex:0}.tc-l .tc-foot,.tc-m .tc-foot{color:#ffe9b0}
.tc-boss .tc-in{background:linear-gradient(#e8dcc0,#c8b48a)}.tc-boss.tc-l .tc-in{background:radial-gradient(ellipse at 50% 35%,#8a5a30,#3a2a14 55%,#140e06)}
.tc-spark{position:absolute;z-index:5;width:5px;height:5px;background:#fff;transform:rotate(45deg);box-shadow:0 0 8px 2px #ffe9a0;opacity:0;animation:tcspk 2.6s ease-in-out infinite}
@keyframes tcspk{0%,70%,100%{opacity:0;transform:rotate(45deg) scale(.3)}80%{opacity:1;transform:rotate(45deg) scale(1.4)}}
@media (prefers-reduced-motion:reduce){.tcard,.tcard::after,.tc-spark,.tc-top b{animation:none!important}}
.tc-binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}
.tc-slot{position:relative;height:50px;border-radius:4px;border:1px solid #000;background:var(--slot);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--muted);font:600 10px var(--px)}
.tc-slot img{width:32px;height:32px;image-rendering:pixelated}.tc-slot span{font-size:9px;line-height:1}
.tc-empty{opacity:.75;cursor:help}.tc-s-r{box-shadow:inset 0 0 0 1px #c8d0d8}.tc-s-h{box-shadow:inset 0 0 0 1px #8fd8ff,0 0 6px #b46bff66}.tc-s-l,.tc-s-m{box-shadow:inset 0 0 0 1px #ffd86a,0 0 8px #ffcf5a88}

/* collection log silhouettes (2026-10-12; client/28_clog.js) */
.slot.sil{background:#0b0c0e;cursor:help}.slot.sil .ico{filter:drop-shadow(0 0 1px #8f9ab0) drop-shadow(0 0 0 #8f9ab0);opacity:.9}
.tc-slot.tc-empty img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 1px #8f9ab0)}
.nbtext{width:100%;min-height:300px;resize:vertical;box-sizing:border-box;background:var(--inset,#15171c);color:var(--ink,#ebe6da);border:1px solid var(--line,#000);border-radius:4px;padding:10px;font:14px/1.45 'Barlow',Arial,sans-serif}
.diary{border:1px solid var(--line,#000);background:var(--inset,#15171c);border-radius:4px;margin:0 0 6px;padding:2px 8px 6px}.diary.done{border-color:#7a6430}
.diary-h{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;background:none;border:0;color:inherit;text-align:left;padding:6px 0 2px;cursor:pointer;font:inherit}
.diary-h .bar{grid-column:1/-1;height:5px;background:#0006;border-radius:3px;overflow:hidden}.diary-h .bar i{display:block;height:100%;background:var(--gold,#f2c14e)}
.win.clogwin{height:92%}
.cardlink{text-decoration:underline dotted;cursor:help}
#tip:has(.tc-tipcard){padding:0;background:transparent;border:0;box-shadow:none;max-width:none}
.tip .tc-tipcard b{display:inline;margin:0;font:inherit;font-weight:700}.tip .tc-tipcard .tc-top b{font:800 16px 'Arial Narrow',Arial,sans-serif}
/* chat: drag to resize, compact mode (2026-10-12) */
.chatgrip{position:absolute;left:0;right:0;top:-6px;height:10px;cursor:ns-resize;z-index:5}.chatgrip::after{content:"";position:absolute;left:50%;top:3px;width:46px;height:4px;margin-left:-23px;border-radius:2px;background:#ffffff26}
.chatgrip:hover::after,body.chatdrag .chatgrip::after{background:var(--gold,#f2c14e)}body.chatdrag{cursor:ns-resize;user-select:none}
body.touch .chatgrip{display:none}
body.chatcompact .clog{font-size:11.5px;line-height:1.25;padding:2px 6px}body.chatcompact .clog p{margin:0}body.chatcompact .clog .t{display:none}
body.chatcompact .clog p.ment-me{margin:1px 0;padding:0 4px 0 6px}
.clog .ilink{color:#ffd88a;font-weight:700;cursor:help;white-space:nowrap}.clog .ilink .ico{width:16px;height:16px;vertical-align:-3px;margin-right:2px}.clog .ilink.rare{color:var(--gold,#f2c14e)}
.hitline{display:inline-block}.hitline b{display:inline!important;margin:0!important;font:inherit;font-weight:700}

/* the top bar stays on one line (2026-10-13; client tbFit) */
.topbar{overflow:hidden;gap:8px}.logo{white-space:nowrap;flex:none}.tb-right{flex-wrap:nowrap;min-width:0}.tb-right>*{white-space:nowrap;flex:none}
.topbar.tb1 .logo small,.topbar.tb1 .dc-txt,.topbar.tb1 .dc-bar,.topbar.tb1 #online .onw{display:none}.topbar.tb1 .tb-right{gap:6px}
.topbar.tb2 .logo,.topbar.tb2 #guideBtn{display:none}.topbar.tb2 .tb-right{margin-left:auto}

/* AFK mode (2026-10-13): the game is covered and locked, chat stays usable */
#afkLock{position:fixed;inset:0;z-index:9000;background:rgba(6,8,12,.72);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:grayscale(.7)}
#afkLock[hidden]{display:none}
#afkLock .box{text-align:center;padding:22px 30px;background:#1b1d22ee;border:2px solid #000;border-radius:6px;box-shadow:0 8px 30px #000c;color:#e8e2d0;font-family:'Barlow Condensed','Arial Narrow',sans-serif;max-width:min(420px,86vw)}
#afkLock .lk{font-size:54px;line-height:1}#afkLock b{display:block;font-size:30px;letter-spacing:1px;margin:6px 0 2px;color:#ffe08a}#afkLock small{font-size:15px;color:#b8b2a2;display:block;line-height:1.35}
body.afk .chat{position:relative;z-index:9001}
body.touch.land.afk .chat{display:flex;position:fixed;left:7px;bottom:7px;width:min(var(--vpw),70vw);height:45vh;z-index:9001}
/* All / 5 / 1 on each recipe row (2026-10-14) */
.li .mq3{display:flex;gap:3px;flex:none;width:136px;margin-right:6px;align-items:center}.li .mq3 .btn{min-width:0;padding:3px 7px;line-height:1.1}.li .mq3.off{visibility:hidden}
.li .mq3 .btn.primary{padding:3px 8px}
/* Rat Trap (2026-10-14) */
.arcwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#arcCv { width: 100%; max-width: 400px; aspect-ratio: 4/3; image-rendering: pixelated; border: 3px solid #3a2766; border-radius: 6px; background: #07120b; touch-action: none; }
.arcpad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 40px); gap: 4px; }
.arcpad [data-arcd="u"] { grid-column: 2; grid-row: 1; } .arcpad [data-arcd="l"] { grid-column: 1; grid-row: 2; } .arcpad [data-arcd="r"] { grid-column: 3; grid-row: 2; } .arcpad [data-arcd="d"] { grid-column: 2; grid-row: 3; }
.arcpad .btn { font-size: 18px; padding: 0; }
#tip .havetip .hn { font-weight: 700; color: #fff; } #tip .havetip { white-space: nowrap; margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.12); color: #ffd84a; }
#tip .tipd { font-weight: 700; }
/* item and pet names in announcements: hover for details (2026-10-14) */
#clog .newslink { cursor: help; text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 2px; }
.hpnow { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 14px; }
.hpnow .bar { flex: 1; height: 10px; } .hpnow .bar i { display: block; height: 100%; border-radius: inherit; }
.hpnow b { min-width: 64px; text-align: right; }
/* Nublin's baby blocks (client/36_baby.js, 2026-10-15) */
.babypop{text-align:center;padding:14px 8px 6px;background:radial-gradient(circle at 50% 0,#fff8e6,#f6e6c8);border-radius:8px;color:#3a2a1a;box-shadow:inset 0 0 0 3px #ffffff,inset 0 0 0 5px #e8c8a0}
.bblocks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:6px 0 16px}
.bblock{--c:#ff6b6b;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font:700 28px/1 'Saira Stencil One',var(--px),sans-serif;color:#fff;
  background:var(--c);border-radius:6px;border:3px solid rgba(0,0,0,.28);box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 4px 0 rgba(0,0,0,.28),0 6px 10px rgba(0,0,0,.18);
  text-shadow:0 2px 0 rgba(0,0,0,.3);transform:rotate(var(--r,0deg));animation:bdrop .6s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both}
@keyframes bdrop{from{transform:translateY(-60px) rotate(0);opacity:0}to{transform:translateY(0) rotate(var(--r,0deg));opacity:1}}
@media (max-width:420px){.bblock{width:34px;height:34px;font-size:21px}}
.bmsg{font:600 16px/1.45 var(--px);margin:0 6px 12px}.bmsg b{font-size:20px;color:#c0502a}
.bgift{display:flex;align-items:center;gap:10px;justify-content:center;text-align:left;font:500 14px/1.35 var(--px);background:#fff;border:2px dashed #e8b8a0;border-radius:6px;padding:8px 10px;margin:0 4px 12px}
.bgift .ico{width:48px;height:48px;background-size:48px 48px;image-rendering:pixelated;flex:none}
/* replies (client/19_emoji.js, 2026-10-15) */
#replyBar{margin:0 4px;display:flex;align-items:center;gap:6px;background:#1d1f24;border:1px solid #000;outline:1px solid #3a3f4a;border-left:3px solid #6fa8ff;border-radius:4px;padding:3px 6px;font-size:13px;white-space:nowrap;overflow:hidden}
#replyBar[hidden]{display:none}#replyBar .muted{overflow:hidden;text-overflow:ellipsis;flex:1}
#replyBar button{background:none;border:0;color:#ccc;cursor:pointer;font-size:13px;padding:0 2px}#replyBar button:hover{color:#fff}
#clog .replyto{display:block;font-size:.86em;color:#9aa3b2;margin:6px 0 0 10px;padding-left:6px;border-left:2px solid #4a5568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
#clog .replyto b{color:#c8d0dc}
/* the Loadouts window (04_windows.js loadoutsWin, 2026-10-15) */
.logrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.locard{display:flex;flex-direction:column;gap:3px}.locard .lcard{flex:none;width:100%}
.locard.cur .lcard{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.locard.empty .lcard{opacity:.65}
.lobtns{display:flex;gap:3px}.lobtns .btn{flex:1;padding:1px 4px;font-size:11px}.lobtns .btn:last-child:not(:first-child){flex:0 0 auto}
/* Gearlocked / Challenge modes (2026-10-16) */
.slot.gllock { background: linear-gradient(#5a1e1e, #3a1212) !important; box-shadow: inset 0 0 0 1px #c04848; }
.slot.gllock .ico { opacity: .8; }
.chwarn { border: 1px solid #c8962a; background: #2e2410; color: #f2d58a; border-radius: 6px; padding: 6px 10px; margin: 6px 0 8px; font-size: 13px; }
.chcard { border: 1px solid var(--line, #3a3f46); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: rgba(255,255,255,.03); }
.chhead { display: flex; align-items: center; gap: 8px; } .chhead .pill2 { margin-left: 2px; } .chhead .pill2.gold { color: #f2c14e; }
.chhead .ico, .chhead i { width: 22px; height: 22px; }
.gltable { max-height: 260px; overflow-y: auto; border-top: 1px solid rgba(255,255,255,.08); }
.glrow { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 6px; align-items: center; font-size: 13px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.glrow .ico { width: 18px; height: 18px; background-size: contain; vertical-align: middle; margin-right: 3px; }
/* character creation (2026-10-16): a mugshot with a height chart, and mode cards */
.creator .mug { width: 146px; display: flex; flex-direction: column; align-items: center; }
.creator .mug canvas { background: repeating-linear-gradient(#4a4e58 0 1px, #3a3d45 1px 18px), #3a3d45; border: 2px solid #15161a; }
.creator .placard { margin-top: -4px; width: 132px; background: #15161a; color: #e9e2cf; border: 1px solid #000; border-radius: 3px; text-align: center; padding: 3px 0 4px; font-family: var(--px, monospace); }
.creator .placard b { display: block; font-size: 11px; letter-spacing: 1px; color: #f2c14e; } .creator .placard span { font-size: 9px; letter-spacing: .5px; opacity: .8; }
.modecard { display: block; width: 100%; text-align: left; border: 2px solid var(--line, #3a3f46); background: rgba(255,255,255,.03); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; color: inherit; cursor: pointer; font: inherit; }
.modecard:hover { border-color: #6a7080; } .modecard.on { border-color: #e88a2a; background: rgba(232,138,42,.10); }
.modecard .mchead { display: flex; align-items: center; gap: 8px; } .modecard .mchead i, .modecard .mchead .ico { width: 24px; height: 24px; }
.modecard .mctag { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: rgba(255,255,255,.08); color: #c8ccd4; }
.modecard .mccheck { margin-left: auto; color: #e88a2a; font-weight: 700; font-size: 18px; }
.modecard .mcbody { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #c8ccd4; } .modecard .mcbody span { display: block; }
.chmodes { margin: 4px 0 8px; } .chmodes summary { cursor: pointer; padding: 6px 2px; } .chmodes[open] summary { margin-bottom: 2px; }
.ccsum { margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.25); font-size: 14px; }
@media (max-width: 520px) { .creator { grid-template-columns: 1fr; } .creator .mug { width: 100%; } }

.hgleave{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;background:#3a1a1a;border-color:#a0503a}   /* the Haunted Gauntlet's way out, always in sight (2026-10-18) */
.li .pill{display:inline-block;font:700 10px/15px Arial,sans-serif;padding:0 6px;border-radius:8px;background:#3a3a44;color:#d8d8e0;vertical-align:1px;margin-left:2px}.li .pill.bad{background:#5a2020;color:#ffb0a0}.li .pill.gold{background:#5a4410;color:#ffe08a}   /* Slayer guide tags (2026-10-18) */

/* ⏱ Rates in the skill guides (2026-10-18) */
.li .t small.rate{display:block;color:#8ec8f0;margin-top:1px}.li .t small.rate .rx{color:#f2c14e;font-weight:700}.li.locked .t small.rate{display:none}

/* ---------- the trade window (2026-10-18 redesign) ---------- */
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tside{background:var(--inset);border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:inset 0 1px 0 #1f2127;border-top:3px solid var(--accent);min-height:150px;display:flex;flex-direction:column;gap:6px;transition:box-shadow .3s}
.tside.ttheirs{border-top-color:var(--blue)}
.tside.tflash{animation:tflash 1.5s ease-out}
@keyframes tflash{0%,30%{box-shadow:0 0 0 2px var(--bad),0 0 18px #e06a5c66}100%{box-shadow:inset 0 1px 0 #1f2127}}
.thead{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.thead b{display:block;font:600 16px var(--px);letter-spacing:.3px}.thead small{color:var(--muted);font-size:12px}
.tbadge{font:700 12px var(--px);text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;border-radius:99px;background:#2a2c33;color:var(--dim);white-space:nowrap;border:1px solid #000}
.tbadge.on{background:#1f4a26;color:#9af09a;box-shadow:0 0 10px #6fd66f44}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:5px;align-content:start;flex:1}
.tempty{margin:auto 0;text-align:center}
.ttile{position:relative;height:66px;border-radius:6px;background:#101114;border:1px solid #000;box-shadow:inset 0 1px 0 #26282e;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:5px 2px 2px;cursor:default;color:inherit}
.ttile[data-tradepick]{cursor:pointer}.ttile[data-tradepick]:hover{background:#1e2027}
.ttile .ico{width:32px;height:32px}
.ttile .tn{position:absolute;left:4px;top:1px;font:700 13px var(--px);color:#ffe98a;text-shadow:1px 1px 0 #000}
.ttile .tl{font-size:10px;line-height:1.1;color:var(--muted);text-align:center;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:2px}
.ttile.sel,.slot.tsel{outline:2px solid var(--accent);outline-offset:-1px}
.ttile.q-f{box-shadow:inset 0 0 0 2px var(--fine)}.ttile.q-p{box-shadow:inset 0 0 0 2px var(--prist)}
.ttile.tcut{box-shadow:inset 0 0 0 2px var(--bad);background:#2a1414}
.ttile.tgone{opacity:.75;background:repeating-linear-gradient(135deg,#1a0f0f 0 6px,#241414 6px 12px);box-shadow:inset 0 0 0 2px var(--bad)}
.ttile.tgone .ico{filter:grayscale(1);opacity:.6}
.tflag{position:absolute;right:2px;top:1px;font:700 9px var(--px);text-transform:uppercase;color:#fff;background:var(--bad);border-radius:3px;padding:0 3px}
.tcr .tflag{position:static;margin-left:6px}
.tcr{background:#16171b;border:1px solid #000;border-radius:6px;padding:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between}
.tcr.tcutcr{box-shadow:inset 0 0 0 2px var(--bad)}
.tcrv{display:flex;align-items:center;gap:4px;font:600 15px var(--px)}.tcrv .ico{width:22px;height:22px}
.tcrb{display:flex;gap:4px;flex-wrap:wrap}.tcrf{gap:4px;flex:1 1 100%}
.tbal{margin:8px 0 2px;text-align:center}.tbal small{font-size:12px}
.tbar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:#000;border:1px solid #000;margin-bottom:3px}
.tbar i{display:block;height:100%}.tbar i.g{background:linear-gradient(90deg,#9a4a1a,var(--accent))}.tbar i.t{background:linear-gradient(90deg,var(--blue),#3a6a90)}
.tnote{margin:6px 0 0}
.tconf{background:#2a2410;border:1px solid #6a5a20;border-radius:6px;padding:7px 10px;margin-bottom:8px;font-size:13px}
.tadd{margin-top:10px;background:var(--dark);border:1px solid var(--line);border-radius:8px;padding:8px}
.tadh{gap:8px;flex-wrap:wrap;margin-bottom:6px}.tadh input{flex:1;min-width:120px}
.tpool{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px;max-height:156px;overflow:auto;padding:2px}
.tpool .slot{width:auto}
.tpool .slot.tin::after{content:'';position:absolute;right:3px;bottom:3px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 4px var(--accent)}
.tpick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#24201a;border:1px solid #5a4020;border-radius:6px;padding:6px 8px;margin-bottom:6px}
.tpick .t{flex:1;min-width:160px}.tpick .t b{display:block;font:600 14px var(--px)}.tpick .t small{color:var(--muted);font-size:12px}
.tpb{gap:4px;flex-wrap:wrap}.tpb input{width:72px}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.tfoot .small{flex:1;text-align:center}
.tacc{background:#2f7a3a!important;border-color:#1a4a20!important;min-width:120px;font-weight:700}
.tacc:disabled{background:#2a3a2c!important;opacity:.8}
@media (max-width:620px){.tcols{grid-template-columns:1fr}.tside{min-height:0}}
.tcoin{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe88a,#c8962a 60%,#7a5a14);color:#5a3a08;font:800 13px var(--px);box-shadow:0 1px 0 #000}
.tnote.warn{color:var(--gold)}

/* the chat box shows where you're typing (2026-10-18): its text, border and channel button take the channel's colour */
.cform{--chc:#ebe6da;--chb:#3a3d45}
.cform[data-ch="private"]{--chc:#e8a8ff;--chb:#6a3a8a}
.cform[data-ch="crew"]{--chc:#8fe3c0;--chb:#246a56}
.cform[data-ch="jail"]{--chc:#ffb37a;--chb:#8a4a1e}
.cform #chatIn{color:var(--chc);caret-color:var(--chc);border-color:var(--chb);box-shadow:inset 3px 0 0 var(--chc);transition:border-color .2s,box-shadow .2s}
.cform #chatIn::placeholder{color:var(--chc);opacity:.55}
.cform #chatIn:focus{border-color:var(--chc);box-shadow:inset 3px 0 0 var(--chc),0 0 0 1px var(--chb),0 0 10px color-mix(in srgb,var(--chc) 30%,transparent)}
.cform #chanBtn{color:var(--chc);border-color:var(--chb);background:linear-gradient(color-mix(in srgb,var(--chb) 70%,#2b2e35),color-mix(in srgb,var(--chb) 45%,#1a1c21));font-weight:700;min-width:58px}
.cform.chsw #chatIn,.cform.chsw #chanBtn{animation:chsw .7s ease-out}
@keyframes chsw{0%{box-shadow:inset 3px 0 0 var(--chc),0 0 0 2px var(--chc),0 0 14px var(--chc)}100%{box-shadow:inset 3px 0 0 var(--chc)}}
.cform #chatIn:focus,.cform #chatIn:focus-visible{outline:2px solid var(--chc);outline-offset:-1px}
/* the chat tab you're on stands up higher than the rest, with its channel's colour on top (Justin 2026-10-18) */
.ctabs{align-items:flex-end;padding-top:4px}
.ctabs button{--tc:#ebe6da;margin-top:5px;transition:margin .12s,padding .12s}
.ctabs button[data-ctab="private"]{--tc:#e8a8ff}.ctabs button[data-ctab="crew"]{--tc:#8fe3c0}.ctabs button[data-ctab="jail"]{--tc:#ffb37a}.ctabs button[data-ctab="loot"]{--tc:#e9c45e}
.ctabs button[aria-selected=true]{margin-top:0;padding-top:4px;padding-bottom:3px;font-weight:700;color:var(--tc);box-shadow:inset 0 3px 0 var(--tc),0 -2px 8px color-mix(in srgb,var(--tc) 25%,transparent);position:relative;z-index:1}
.ctabs button:not([aria-selected=true]):hover{margin-top:3px}
/* a crew on someone's profile (2026-10-19) */
.crewcard .cchead{display:flex;align-items:center;gap:8px;font:700 18px var(--px)} .crewcard .tag{font:700 12px var(--px);color:#7fe0d0;border:1px solid #7fe0d066;border-radius:4px;padding:0 5px}
.bgfil{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 7px}
.bgfil button{background:#0f1013;border:1px solid #2e323b;border-radius:14px;color:var(--muted);padding:2px 10px;font:600 13px var(--px);cursor:pointer} .bgfil button small{color:var(--dim)}
.bgfil button:hover{color:var(--ink)} .bgfil button.on{background:#e0772f2a;border-color:#e0772f88;color:var(--ink)}
/* the order board in the Tasks tab (2026-10-19) */
.tboard{display:flex;flex-direction:column;gap:4px}
.tbnpc{background:var(--panel2,#22252c);border:1px solid #2e323b;border-radius:6px}
.tbnpc>summary{display:flex;align-items:center;gap:7px;padding:5px 6px;cursor:pointer;list-style:none} .tbnpc>summary::-webkit-details-marker{display:none}
.tbnpc>summary .ico{width:22px;height:22px;flex:none} .tbn{display:flex;flex-direction:column;min-width:0;flex:1} .tbn b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tbn small{color:var(--dim);font-size:11px}
.tbc{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .tbc small{color:var(--muted);font-size:11px;white-space:nowrap}
.tbready{background:#3fa14a33;color:var(--good);border:1px solid #3fa14a77;border-radius:9px;padding:0 6px;font:700 11px var(--px)}
.tbbody{padding:0 6px 6px;border-top:1px solid #2e323b} .tbh{font:700 11px var(--px);text-transform:uppercase;letter-spacing:1px;color:#c9b48a;margin:6px 0 2px} .tbh small{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:500}
.tbrow{display:flex;gap:7px;align-items:center;padding:2px 0} .tbrow .ico{width:24px;height:24px;flex:none} .tbrow .t{display:flex;flex-direction:column;min-width:0} .tbrow b{font-size:12.5px} .tbrow small{font-size:11px;color:var(--muted)}
.tbrow.ready b{color:var(--good)} .tbrow.done{opacity:.55}

/* the boss key (client/48_boss.js, 2026-10-21): a plain made-up spreadsheet over everything */
#bosskey { position: fixed; inset: 0; z-index: 2147483000; background: #fff; color: #1f1f1f; display: flex; flex-direction: column; font: 13px 'Segoe UI', Calibri, Arial, sans-serif; letter-spacing: 0; text-transform: none; user-select: none; }
#bosskey * { font-family: inherit; text-shadow: none; }
#bosskey .bk-title { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 10px; background: #3a6fb0; color: #fff; font-size: 12px; }
#bosskey .bk-app { font-size: 16px; } #bosskey .bk-tog { background: #ffffff33; padding: 0 5px; border-radius: 8px; font-weight: 400; }
#bosskey .bk-name { flex: 1; text-align: center; } #bosskey .bk-search { background: #ffffff2a; padding: 3px 60px 3px 8px; border-radius: 4px; } #bosskey .bk-win { letter-spacing: 4px; }
#bosskey .bk-tabs { display: flex; gap: 18px; padding: 6px 12px 0; background: #f3f3f3; border-bottom: 1px solid #d6d6d6; }
#bosskey .bk-tabs span { padding: 3px 2px 6px; color: #333; } #bosskey .bk-tabs span.on { color: #3a6fb0; border-bottom: 3px solid #3a6fb0; font-weight: 600; }
#bosskey .bk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; background: #f3f3f3; border-bottom: 1px solid #d6d6d6; min-height: 48px; color: #333; font-size: 12px; }
#bosskey .bk-tools span { padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; } #bosskey .bk-tools span:hover { background: #e2e8f2; border-color: #c6d2e4; }
#bosskey .bk-tools i { width: 1px; height: 26px; background: #d0d0d0; }
#bosskey .bk-fx { display: flex; align-items: center; height: 26px; border-bottom: 1px solid #d6d6d6; background: #fff; }
#bosskey .bk-nb { width: 90px; padding: 0 6px; border-right: 1px solid #d6d6d6; } #bosskey .bk-fxl { width: 34px; text-align: center; color: #777; font-style: italic; border-right: 1px solid #d6d6d6; } #bosskey .bk-fv { padding: 0 8px; }
#bosskey .bk-grid { flex: 1; overflow: auto; background: #fff; }
#bosskey table { border-collapse: collapse; table-layout: fixed; }
#bosskey th { background: #f3f3f3; color: #444; font-weight: 400; border: 1px solid #d6d6d6; height: 20px; min-width: 96px; font-size: 12px; position: sticky; top: 0; }
#bosskey tr th:first-child { min-width: 38px; width: 38px; position: sticky; left: 0; z-index: 1; } #bosskey .bk-corner { z-index: 2; }
#bosskey td { border: 1px solid #e1e1e1; height: 20px; padding: 0 5px; white-space: nowrap; overflow: hidden; max-width: 140px; font-size: 13px; }
#bosskey td:first-of-type { min-width: 150px; } #bosskey td.n { text-align: right; } #bosskey td.h1 { font-size: 17px; font-weight: 600; color: #2a4a74; }
#bosskey td.hd { font-weight: 600; background: #e8eef7; border-bottom: 2px solid #3a6fb0; } #bosskey td.tot { font-weight: 600; border-top: 2px solid #555; } #bosskey td.neg { color: #b02a1a; }
#bosskey td.sel { outline: 2px solid #3a6fb0; outline-offset: -2px; }
#bosskey .bk-sheets { display: flex; gap: 2px; padding: 0 8px; height: 26px; align-items: stretch; background: #f3f3f3; border-top: 1px solid #d6d6d6; font-size: 12px; }
#bosskey .bk-sheets span { padding: 4px 14px; color: #444; } #bosskey .bk-sheets span.on { background: #fff; color: #3a6fb0; font-weight: 600; border-bottom: 2px solid #3a6fb0; }
#bosskey .bk-status { display: flex; gap: 20px; align-items: center; height: 22px; padding: 0 10px; background: #f3f3f3; border-top: 1px solid #d6d6d6; color: #555; font-size: 11px; }
#bosskey .bk-sum { flex: 1; text-align: right; } #bosskey .bk-back { cursor: pointer; padding: 0 4px; }
/* the Spreadsheet theme (26_themes.js 'sheet'): an office font everywhere outside the game picture, and no glowing title text */
html[data-office] body, html[data-office] button, html[data-office] input, html[data-office] select, html[data-office] textarea, html[data-office] h1, html[data-office] h2, html[data-office] h3, html[data-office] h4, html[data-office] .btn, html[data-office] .win-title, html[data-office] .tb-title { font-family: 'Segoe UI', Calibri, Arial, sans-serif !important; letter-spacing: 0 !important; text-shadow: none !important; }
html[data-office] .ctabs button { background: #ececec !important; color: #444 !important; border-color: #c4c4c4 !important; }
html[data-office] .ctabs button[aria-selected=true] { background: #ffffff !important; color: #1f1f1f !important; box-shadow: inset 0 -2px 0 #3a6fb0 !important; }
html[data-office] .cform #chatIn { color: #1f1f1f !important; } html[data-office] .cform #chatIn::placeholder { color: #808080 !important; opacity: 1 !important; }
html[data-office] .newsbtn.holetag { color: #8a5a00 !important; border-color: #c8a050 !important; }
/* Tasks tab: sections fold up (2026-10-21) */
.tsec{margin-top:8px} .tsec:first-child{margin-top:0}
.tsec>summary{list-style:none;cursor:pointer;padding:3px 0;border-bottom:1px solid #2e323b;margin-bottom:5px;user-select:none} .tsec>summary::-webkit-details-marker{display:none}
.tsech{font:700 15px var(--px);color:var(--gold,#e8c35a);display:flex;align-items:center;gap:6px} .tsecarr{display:inline-block;transition:transform .15s;color:var(--dim);font-size:12px} .tsec[open]>summary .tsecarr{transform:rotate(90deg)}
.hcard+.hcard{margin-top:5px}
/* the spreadsheet's window buttons all close it (player suggestion 2026-10-21) */
#bosskey .bk-win { letter-spacing: 0; display: flex; } #bosskey .bk-win span { padding: 2px 12px; cursor: default; } #bosskey .bk-win span:hover { background: #ffffff22; } #bosskey .bk-win span:last-child:hover { background: #c42b1c; color: #fff; }
.restock{color:var(--gold,#e8c35a)}   /* order NPC shops: new stock in ... (2026-10-21) */
/* the trade window, version 3 (2026-10-22): fixed sizes so nothing jumps; the Accept button always in the same place */
.trw{display:flex;flex-direction:column;gap:8px}
.trw .tside{height:214px;min-height:0;display:flex;flex-direction:column}
.trw .tside .tgrid{flex:1;overflow-y:auto;align-content:start;padding-right:2px;max-height:none}
.trw .tside.tacced{box-shadow:inset 0 0 0 2px #3fa14a88}
.tcrline{margin-top:6px;padding-top:5px;border-top:1px dashed var(--line);font-size:13px}
.tcrline.tcutcr{color:var(--bad)}
.trw .tbal{min-height:30px;margin:0}
.trw .tnote{min-height:18px;margin:0;text-align:center}
.trw .tadd{margin:0}
.tadh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tadh input[type=search]{flex:1;min-width:110px}
.tadh select{background:var(--inset);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:3px 4px;font-size:12px}
#tPick .tpick{min-height:46px;margin-bottom:6px;box-sizing:border-box}
#tPick .tpick0{display:flex;align-items:center;justify-content:center;background:transparent;border:1px dashed var(--line)}
.trw .tpool{height:160px;max-height:none;overflow-y:auto;align-content:start}
.tpoolnote{text-align:right;margin-top:3px}
.tcrrow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
.tcrrow input{width:110px}
.tcrrow > .small{flex:1;min-width:140px}
.tconfbox{text-align:center;padding:14px;background:#2a1f12;border-color:#6a4a20}
.trw .tfoot{margin:0}
@media (max-width:620px){.trw .tside{height:150px}.trw .tpool{height:130px}}
/* the trade window fills the space it has: offers and footer keep their size, the item list takes what's left, nothing scrolls the window
   itself, so Decline / Accept never move (2026-10-22) */
.win:has(.trw){height:92%;width:min(800px,96%)}
.win:has(.trw) .win-body{flex:1;overflow:hidden;display:flex;flex-direction:column}
.trw{flex:1;min-height:0}
.trw .tside{height:168px}
.trw .tadd{flex:1;min-height:0;display:flex;flex-direction:column}
.trw .tpool{flex:1;height:auto;min-height:60px}
.trw.tconf .tside{height:auto;min-height:168px;max-height:46vh}
.trw.tconf .tadd{flex:0 0 auto}
.trw .tgrid .tempty{grid-column:1/-1;margin:6px 2px}
.trw .tfoot{flex:0 0 auto}
@media (max-height:640px){.trw .tside{height:120px}}
.trw .tside{height:142px}
.trw .ttile{height:58px}.trw .ttile .tl{-webkit-line-clamp:1}
.trw .tconfbox{display:block;flex:0 0 auto;padding:10px}
.trw.tconf .tside{height:auto;min-height:150px;max-height:40vh}
.win:has(.trw.tconf){height:auto}.win:has(.trw.tconf) .win-body{overflow:auto}
/* ---------- the Tasks hub, its windows, and the Events tab (2026-10-22) ---------- */
.npcpor{display:inline-block;flex:none;width:36px;height:36px;background-repeat:no-repeat;background-size:36px auto;background-position:center 1px;image-rendering:pixelated;border-radius:6px;background-color:#14161b;box-shadow:inset 0 0 0 1px #2e323b}
.npcpor.big{width:52px;height:52px;background-size:52px auto}.npcpor.sm{width:22px;height:22px;background-size:22px auto;vertical-align:middle;border-radius:4px}
.npcpor.evico,.ico.evico{width:40px;height:40px;background-size:40px auto}
.hub{display:flex;flex-direction:column;gap:8px}
.hubcard{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;border-radius:8px;background:linear-gradient(#2a2d35,#22252c);border:1px solid #3a3f4a;box-shadow:inset 0 1px 0 #3d424e;color:var(--ink);cursor:pointer}
.hubcard:hover{border-color:var(--accent);background:linear-gradient(#30343d,#262930)}
.hubcard .ico{width:36px;height:36px;flex:none}.hubcard .hubt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hubcard .hubt b{font:700 16px var(--px)}.hubcard .hubt small{color:var(--muted);font-size:12px;line-height:1.3}
.hubcard .hubgo{font-size:22px;color:var(--dim);flex:none}.hubbar{display:block;height:4px;margin-top:3px}
/* NPC orders window */
.ordwin{display:flex;flex-direction:column;gap:8px}
.ordtop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ordcols{display:grid;grid-template-columns:220px 1fr;gap:10px;min-height:340px}
.ordlist{display:flex;flex-direction:column;gap:5px;max-height:58vh;overflow-y:auto;padding-right:2px}
.ordcard{display:flex;align-items:center;gap:8px;padding:6px;border-radius:7px;background:#1a1c21;border:1px solid #2e323b;color:var(--ink);cursor:pointer;text-align:left;position:relative}
.ordcard:hover{border-color:#555b68}.ordcard.on{border-color:var(--accent);background:#2a2218;box-shadow:inset 0 0 0 1px var(--accent)}
.ordcard.alldone{opacity:.7}.ordcard .oct{flex:1;min-width:0;display:flex;flex-direction:column}
.ordcard .oct b{font:700 14px var(--px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ordcard .oct small{color:var(--muted);font-size:11px}
.ocdots{display:flex;gap:3px;margin-top:3px}.ocdots i{width:9px;height:9px;border-radius:50%;background:#3a3f4a;box-shadow:inset 0 0 0 1px #000}
.ocdots i.r{background:var(--good)}.ocdots i.d{background:var(--gold,#e8c35a)}.ocdots i.w{border-radius:2px;margin-left:4px}
.ordcard .tbready{position:absolute;right:6px;top:6px}
.orddet{background:var(--inset);border:1px solid var(--line);border-radius:8px;padding:10px;max-height:58vh;overflow-y:auto}
.ordhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}.ordhead .t{flex:1}.ordhead .t b{display:block;font:700 18px var(--px)}.ordhead .t small{color:var(--muted)}
@media (max-width:620px){.ordcols{grid-template-columns:1fr}.ordlist{flex-direction:row;overflow-x:auto;max-height:none}.ordcard{min-width:160px}}
/* Slayer window */
.shtask{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:var(--inset);border:1px solid var(--line);border-top:3px solid #b8323a}
.shtask .t{flex:1;min-width:0}.shtask .t > b{font:700 17px var(--px);display:block}.shtask .t small{color:var(--muted)}
.ico.shmob{width:56px;height:56px;flex:none}
.shrow{display:flex;gap:8px;margin:10px 0}.shbox{flex:1;background:#1a1c21;border:1px solid #2e323b;border-radius:7px;padding:6px 8px;display:flex;flex-direction:column}.shbox.wide{flex:2}
.shbox small{color:var(--muted);font-size:11px}.shbox b{font:700 18px var(--px)}
.shgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}.shgrid span{background:#1a1c21;border:1px solid #2e323b;border-radius:7px;padding:6px;display:flex;flex-direction:column;align-items:center}
.shgrid small{color:var(--muted);font-size:11px}.shgrid b{font:700 16px var(--px)}.shgrid em{font-style:normal;color:var(--dim);font-size:11px}
/* Hired help window */
.hlist{display:flex;flex-direction:column;gap:6px}.hcard.off{opacity:.8;border-style:dashed}
/* Events tab */
.evlist{display:flex;flex-direction:column;gap:6px}
.evcard{display:flex;align-items:center;gap:8px;padding:7px;border-radius:7px;background:#1f2127;border:1px solid #2e323b}
.evcard .t{flex:1;min-width:0}.evcard .t b{display:block;font:700 14px var(--px)}.evcard .t small{color:var(--muted);font-size:12px;line-height:1.3;display:block}
.evcard .ico.evico{flex:none}
/* ---------- one look for every window (Justin 2026-10-22: "make them very nice"). Uses the theme colours (var(--li) etc.) so all 38 GUI
   themes still apply. ---------- */
.win{border-radius:10px;border-color:#00000088;box-shadow:0 14px 40px #000d,0 0 0 1px #ffffff10,inset 0 1px 0 #ffffff1a}
.win-head{padding:8px 10px 8px 14px;font-size:17px;border-radius:9px 9px 0 0;border-bottom:1px solid #00000099;box-shadow:inset 0 -1px 0 #ffffff12}
.win-head .x{border-radius:6px;width:28px;height:26px}
.win-body{padding:12px 14px}
.win-body h4{display:flex;align-items:center;gap:8px;margin:14px 0 7px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold,#e8c35a);opacity:.9}
.win-body h4::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#ffffff26,transparent)}
.win-body h4:first-child{margin-top:2px}
.win .list{gap:5px}
.win .li{padding:7px 9px;border-radius:8px;border:1px solid #ffffff0d;box-shadow:inset 0 1px 0 #ffffff0a,0 1px 2px #0006;transition:border-color .12s,background .12s}
.win .li:hover{border-color:#ffffff22}
.win .li.locked:hover{border-color:#ffffff0d}
.win .li > .ico:first-child{background-color:#00000055;border-radius:7px;box-shadow:inset 0 0 0 1px #ffffff12;padding:2px;box-sizing:content-box}
.win .li .t b{font-size:14.5px}
.win .li .t small{line-height:1.35}
.win .tabrow{background:#00000045;padding:3px;border-radius:9px;gap:3px;box-shadow:inset 0 1px 2px #0008;align-items:center}
.win .tabrow > .btn{background:transparent;border-color:transparent;box-shadow:none;border-radius:6px;padding:4px 11px}
.win .tabrow > .btn:hover{background:#ffffff14}
.win .tabrow > .btn.on{background:linear-gradient(var(--pri-a,#e98a44),var(--pri-c,#b8581a));color:var(--pri-ink,#1a0f06);box-shadow:inset 0 1px 0 var(--pri-hi,#ffb77a),0 1px 3px #0008}
.win .order{border-radius:8px;border:1px solid #ffffff0d}
/* NPC windows: the header, the speech bubble */
.npchead{display:flex;align-items:center;gap:12px;margin:-12px -14px 12px;padding:12px 14px;background:linear-gradient(90deg,#00000055,#00000010);border-bottom:1px solid #ffffff10}
.npchead .npcpor.big{width:58px;height:58px;background-size:58px auto;border-radius:10px;box-shadow:0 0 0 2px #ffffff18,0 3px 8px #0008}
.npchead .nht{flex:1;min-width:0}.npchead .nht b{display:block;font:700 20px var(--px);letter-spacing:.3px}.npchead .nht small{color:var(--muted);font-size:12.5px}
.crchip{flex:none;display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;background:#00000066;box-shadow:inset 0 0 0 1px #e8c35a44;font:700 15px var(--px);color:var(--gold,#e8c35a)}
.crchip small{font-size:11px;opacity:.8}
.npcwin .tabrow > .grow + b.gold,.npcwin .tabrow > b.gold:last-child{display:none}
.npcquote{position:relative;margin:2px 0 12px;padding:9px 12px;border-radius:10px;background:#ffffff0c;border:1px solid #ffffff14;font-style:italic;color:var(--ink);line-height:1.45}
.npcquote::before{content:'';position:absolute;left:18px;top:-7px;border:7px solid transparent;border-top:0;border-bottom-color:#ffffff14}
.npcquote .muted,.npcquote span.small{font-style:normal}
/* "What's next?" on the Tasks tab (2026-10-22) */
.nextcard{margin:0 0 10px;padding:8px 9px;border-radius:9px;background:linear-gradient(135deg,#2c2416,#1f1c16);border:1px solid #6a5426;box-shadow:inset 0 1px 0 #ffffff12}
.nxh{font:700 13px var(--px);color:var(--gold,#e8c35a);letter-spacing:.5px;margin-bottom:5px}
.nxr{display:flex;align-items:center;gap:7px;padding:4px 0;border-top:1px solid #ffffff0d}.nxr:first-of-type{border-top:0}
.nxr .ico,.nxr .npcpor.sm{width:22px;height:22px;flex:none}.nxe{width:22px;text-align:center;flex:none}
.nxt{flex:1;min-width:0;font-size:12.5px;line-height:1.3}
.bonusmax{display:flex;flex-direction:column;gap:2px;margin:5px 0 0;padding:5px 8px;border-radius:7px;background:#00000033;border:1px solid #ffffff10}
/* crew fixes 2026-10-22: the move tip, the crew record */
.hqtip{margin:0 0 8px;padding:7px 10px;border-radius:8px;background:#e9c45e14;background:color-mix(in srgb,var(--gold,#e9c45e) 10%,transparent);border:1px solid #e9c45e44;font-size:12.5px;line-height:1.45}
.hqtip .btn{margin-left:6px}
.hqstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.hqstat{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:8px;background:#00000038;border:1px solid #ffffff12}
.hqstat b{font-size:17px;color:var(--gold,#e9c45e)}
.li.hqbuilt{border-left:3px solid #6ac46a88}
/* Discord sharing 2026-10-22 */
.dcticks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 10px;padding:4px 2px}
.dctick{display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}
.dclink input{padding:5px 8px;border-radius:6px}
/* Crew Projects: the Dig 2026-10-22 */
.digbonus{margin:0 0 8px;padding:7px 10px;border-radius:8px;background:#6ac46a1c;border:1px solid #6ac46a55;font-size:13px}
.digwarn{margin:6px 0 0;padding:6px 9px;border-radius:7px;background:#e0503c1c;border:1px solid #e0503c55;font-size:12.5px}
.digparts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.digpart{padding:8px 10px;border-radius:9px;background:#00000030;border:1px solid #ffffff12}
.digpart>b{font-size:13.5px}
.digbar{margin-top:6px}
.track{height:9px;border-radius:5px;background:#2a2620;overflow:hidden;margin-top:3px}
.track.sm{height:5px}
.track i{display:block;height:100%;border-radius:5px;transition:width .4s}
.hgready{display:flex;flex-direction:column;gap:2px;margin:6px 0 8px;padding:8px 10px;border-radius:8px;background:#ff9a3a14;border:1px solid #ff9a3a55}.hgready small{display:block;line-height:1.4}
/* ---------- the trade window, version 4 (Justin 2026-10-22, with his sketch): your items fill the left side; on the right "You give" on top,
   "They give" below, each as tall as it can be; Decline / Accept under them. Wider and taller, so offers don't hide behind a one-row scroll. */
.win:has(.trw4){position:fixed;width:min(1180px,96vw);height:min(880px,94vh);max-height:none;z-index:40}   /* the whole screen, not just the game view */
.win:has(.trw4) .win-body{flex:1;overflow:hidden;display:flex;flex-direction:column}
.trw.trw4{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}
.trw4 .tleft,.trw4 .tright{min-height:0;display:flex;flex-direction:column;gap:8px}
.trw4 .tleft .tadd{flex:1;min-height:0;margin:0;display:flex;flex-direction:column}
.trw4 .tpool{flex:1;height:auto;max-height:none;min-height:80px;overflow-y:auto;align-content:start;grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
.trw4 .tpoolnote{text-align:left;margin:4px 2px 6px;flex:0 0 auto}
.trw4 .tcrrow{flex:0 0 auto;margin-top:auto}
.trw4 #tOffer{flex:1;min-height:0;display:flex;flex-direction:column}
.trw4 .tcols{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.trw4 .tside{flex:1 1 0;height:auto;min-height:120px;max-height:none}
.trw4 .tside .tgrid{flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.trw4 .ttile{height:62px;padding-top:4px}.trw4 .ttile .tl{-webkit-line-clamp:1}
.trw4 .tside .tgrid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.trw4 .tcrrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.trw4 .tcrrow input{width:110px}
.trw4 .tbal{margin:0;flex:0 0 auto}
.trw4 .tnote{flex:0 0 auto;min-height:0;margin:4px 0 0}
.trw4 #tFoot .tfoot{margin:0;padding-top:8px}
.trw4 #tFoot .tacc{min-width:170px;padding:10px 18px;font-size:15px}
.trw4.tconf .tleft .tadd{flex:0 0 auto}
.trw4.tconf .tside{min-height:160px}
.trw4.tconf .tside{max-height:none}
/* phones and narrow windows: stacked, offers first, Accept pinned at the bottom */
@media (max-width:760px){
  .win:has(.trw4){width:98vw;height:96vh;top:50%;transform:translate(-50%,-50%)}
  .trw.trw4{display:flex;flex-direction:column;overflow-y:auto}
  .trw4 .tright{order:-1;flex:0 0 auto}
  .trw4 .tside{flex:0 0 auto;min-height:110px;max-height:30vh}
  .trw4 .tleft{flex:0 0 auto}
  .trw4 .tpool{max-height:40vh}
  .trw4 #tFoot{position:sticky;bottom:0;background:var(--panel,#1b1c21);z-index:2}
}
/* the "are you sure?" step: both offers side by side across the whole window */
.trw.trw4.tconf{display:flex;flex-direction:column;gap:8px;background:none;border:0;padding:0;margin:0}
.trw4.tconf .tconfbox{flex:0 0 auto;background:#2a2410;border:1px solid #6a5a20;border-radius:8px;padding:9px 12px;font-size:14px;text-align:center}
.trw4.tconf .tright{flex:1;min-height:0}
.trw4.tconf .tcols{flex-direction:row;align-items:stretch}
.trw4.tconf .tcols .tbal{display:none}
.trw4.tconf .tside{flex:1 1 0;min-height:0}
@media (max-width:760px){.trw4.tconf .tcols{flex-direction:column}.trw4.tconf .tside{max-height:none}}

/* feedback surveys (2026-10-22): the bouncing red alert at the top of the game screen, and the survey window */
.survbar{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:7;font:700 15px var(--px);color:#ff4a4a;background:#1a0b0bee;border:2px solid #ff4a4a;border-radius:6px;padding:6px 14px;cursor:pointer;white-space:nowrap;box-shadow:0 0 12px #ff4a4a88,2px 2px 0 #000;text-shadow:1px 1px 0 #000;animation:survbounce 1.4s ease-in-out infinite}
.survbar:hover{background:#2a0e0e;color:#ff7070}
.countdown:not([hidden])~.survbar{top:44px}
.survbar:not([hidden])~.xporbs{top:52px}
@keyframes survbounce{0%,100%{transform:translate(-50%,0)}15%{transform:translate(-50%,-7px)}30%{transform:translate(-50%,0)}42%{transform:translate(-50%,-3px)}55%{transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.survbar{animation:none}}
.survwin .survq{display:block;margin:0 0 8px}
.survwin .survqt{display:block;margin-bottom:4px}
.survwin textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:14px;padding:6px;background:#0d0f14;color:inherit;border:1px solid #3a3f4c;border-radius:4px;min-height:40px}
.survwin textarea:focus{outline:none;border-color:#e6c14a}
.evpri{margin:10px 0 4px;padding:8px 10px;border:1px solid #3a3f4c;border-radius:6px;background:#ffffff08;font-size:13px}
.evpri label{display:flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap}
.evpri small{display:block;margin-top:4px}
.mqxbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.mqxbar input{width:80px}
.li .t small.pokestat{display:block;margin-top:4px;color:#cfd6e2}
.pokestat .pkn{font-weight:700;color:var(--gold)}

/* the prestige window (2026-10-23) */
.preswin .pladder{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:6px 0 10px}
.preswin .pstep{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:5px 2px 6px;border:1px solid #353a48;border-radius:7px;background:#1a1d25;font-size:10.5px;line-height:1.15;opacity:.55}
.preswin .pstep .pn{position:absolute;top:2px;left:4px;font-size:10px;color:#9aa1b2}.preswin .pstep .pe{font-size:20px}.preswin .pstep i{font-size:9.5px;color:#9aa1b2}
.preswin .pstep.done{opacity:.85}.preswin .pstep.done .pn::after{content:' ✓';color:#7fd07a}.preswin .pstep.now{opacity:1;border-color:#e8c04a;background:#2a2416}
.preswin .psec{background:#252935;border:1px solid #353a48;border-radius:8px;padding:8px 10px;margin:0 0 10px}.preswin .psec h4{margin:0 0 6px;color:#e8c04a}.preswin .psec h4 small{color:#9aa1b2;font-weight:400}
.preswin .pgetrow{display:flex;gap:10px;align-items:flex-start}.preswin .pe.big{font-size:34px;line-height:1}
.preswin .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.preswin .pcard{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:8px;border:1px solid #353a48;border-radius:8px;background:#1a1d25;color:inherit;font:inherit;cursor:pointer}
.preswin .pcard:hover{border-color:#6a5a30}.preswin .pcard.on{border-color:#e8c04a;background:#2a2416;box-shadow:0 0 0 1px #e8c04a inset}.preswin .pcard.off{opacity:.45;cursor:not-allowed}
.preswin .pcard.view{cursor:help}.preswin .pcard.view:hover{border-color:#353a48}.preswin .pcard.view.on:hover{border-color:#e8c04a}.preswin .pstep[data-tip]{cursor:help}.preswin .pcard .pe{font-size:20px;width:24px;text-align:center;flex:none}.preswin .pt{display:flex;flex-direction:column;gap:1px;min-width:0}.preswin .pt b{font-size:14px}.preswin .pt span{font-size:12.5px}.preswin .pt i,.preswin .pt em{font-size:11.5px;color:#9aa1b2;font-style:normal}
.preswin .pt select{margin-top:4px;max-width:170px}
.preswin .pcapes{display:flex;gap:6px;flex-wrap:wrap}.preswin .pcape{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border:1px solid #353a48;border-radius:8px;background:#1a1d25;color:inherit;font:inherit;font-size:12px;cursor:pointer}.preswin .pcape .ico{width:32px;height:32px}.preswin .pcape.on{border-color:#e8c04a;background:#2a2416}
.preswin .pfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;bottom:-10px;background:#1d2029;padding:8px 0}
.pdot{width:20px;height:20px;border-radius:50%;border:2px solid #000;cursor:pointer;padding:0}.pdot:hover{outline:2px solid #e8c04a}
@media (max-width:700px){.preswin .pladder{grid-template-columns:repeat(5,1fr)}}

.ftname{color:#9fd8ff;font-weight:700;cursor:pointer}.ftname:hover{text-decoration:underline}   /* the Trophy board's player names (54_ftboard.js) */

.crewbtns{display:flex;flex-direction:column;gap:5px;margin:2px 0 10px}.crewbtns .btn{width:100%;text-align:center;white-space:normal;padding-top:6px;padding-bottom:6px}.crewbtns .btn.sm{align-self:center;width:auto;padding:2px 12px}   /* Crew tab buttons (2026-10-24) */
.lotip{display:flex;align-items:center;gap:6px;margin:2px 0}.lotip .ico{flex:none}.lotip.bad span{color:#e0705a}.slot.lomiss{opacity:.45;outline:1px dashed #e0503c}.slot .n.bad{color:#ff6a5a}   /* loadout view (2026-10-24) */
.crewnote{background:#14161b;border:1px solid var(--line);border-left:3px solid var(--gold,#f2c14e);border-radius:4px;padding:10px 12px;white-space:normal;line-height:1.4;max-height:320px;overflow:auto}   /* crew notice (2026-10-25) */

/* the Dbl XP Martini pop-up (2026-10-25) */
.mpop{display:flex;gap:12px;align-items:center}.mpop canvas,.mpop img,.mpop .ico{flex:none;transform:scale(1.5);margin:8px}.mpop p{margin:0;font-size:15px;line-height:1.4}

/* a locked Storage item (2026-10-26) */
.slot .slock{position:absolute;right:2px;bottom:1px;font-size:11px;line-height:1;filter:drop-shadow(0 0 2px #000);pointer-events:none}
/* the new character page (2026-10-26): the look on the left, how you'll play on the right */
.win.wide:has(.cc2){width:min(980px,97%)}
.cc2{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:14px;align-items:start}
.cc2 .cccol{background:rgba(255,255,255,.03);border:1px solid #2e323b;border-radius:10px;padding:10px 12px;min-width:0}
.cc2 .cch{margin:0 0 8px;color:var(--gold,#f2c14e);letter-spacing:.05em;font-size:13px}
.cc2 .creator{grid-template-columns:1fr;gap:6px}.cc2 .mug{width:100%;margin:2px 0 10px}.cc2 .mug canvas{width:180px;height:180px}.cc2 .placard{width:170px}
.ccfoot{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}.ccfoot .ccsum{flex:1;margin:0;min-width:200px}.ccfoot .ccgo{font-size:16px;padding:8px 22px}
@media (max-width:760px){.cc2{grid-template-columns:1fr}}
/* the rules screen (2026-10-26) */
.rulerow{display:flex;gap:10px;padding:8px 10px;margin-bottom:6px;background:rgba(255,255,255,.035);border:1px solid #2e323b;border-radius:8px}.rulerow .em{font-size:20px;line-height:1.2}.rulerow b{display:block}.rulerow small{color:#aab0bb}
.ruleagree{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:10px 12px;border-radius:8px;border:1px solid #3a3f46;background:rgba(0,0,0,.15);cursor:pointer}.ruleagree.on{border-color:#4c7a3a;background:rgba(80,160,60,.10)}.ruleagree input{width:18px;height:18px}
.rulego{font-size:16px;padding:8px 26px}.rulego:disabled{opacity:.4;cursor:not-allowed}
/* Settings tabs and the Account tab (2026-10-26) */
.settabs{flex-wrap:wrap}.setsub{margin:10px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#f2c14e);opacity:.9}
.chcard.dz{border-color:#7a2a2a;background:rgba(160,40,40,.08)}.dzh{color:#ff8a7a}.btn.dzbtn{background:#8a2a2a;color:#fff;border-color:#5a1a1a}.btn.dzbtn:disabled{opacity:.45}
.crsbox{position:relative;height:110px;border:1px dashed #3a3f46;border-radius:8px;margin-top:6px}
/* Settings tabs and the Account tab (2026-10-26) */
.settabs{flex-wrap:wrap}.setsub{margin:10px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#f2c14e);opacity:.9}
.chcard.dz{border-color:#7a2a2a;background:rgba(160,40,40,.08)}.dzh{color:#ff8a7a}.btn.dzbtn{background:#8a2a2a;color:#fff;border-color:#5a1a1a}.btn.dzbtn:disabled{opacity:.45}
.crsbox{position:relative;height:110px;border:1px dashed #3a3f46;border-radius:8px;margin-top:6px}
.worldmap .wm{font-size:11px;padding:2px 6px}.worldmap .wm small{font-size:10px}
.smswap{margin:0 0 6px;gap:8px;align-items:center}
/* XenosVires' slot machine (2026-10-26) */
.xenhead{display:flex;gap:10px;align-items:center}.xenhead .ico{width:40px;height:40px}
.xmachine{position:relative;background:linear-gradient(#2a1418,#1a0c10);border:2px solid #8a2a2a;border-radius:12px;padding:14px;box-shadow:inset 0 0 20px #000}
.xreels{display:flex;gap:10px;justify-content:center}
.xreel{position:relative;width:84px;height:84px;overflow:hidden;background:#f4f0ea;border:3px solid #3a1a1a;border-radius:8px;box-shadow:inset 0 8px 10px rgba(0,0,0,.35),inset 0 -8px 10px rgba(0,0,0,.35)}
.xreel.bonus{border-color:#f2c14e;animation:xglow 1s infinite alternate}
@keyframes xglow{to{box-shadow:0 0 14px #f2c14e,inset 0 8px 10px rgba(0,0,0,.35)}}
.xstrip{position:absolute;left:0;right:0;top:0;transform:translateY(0)}
.xstrip.go{transform:translateY(calc(-26 * 84px));transition:transform var(--d,3s) cubic-bezier(.12,.6,.2,1)}
.xmachine.done .xstrip{transform:translateY(calc(-26 * 84px));transition:none}
.xcell{height:84px;display:flex;align-items:center;justify-content:center}.xcell .ico{width:56px;height:56px;font-size:40px;line-height:56px;text-align:center;font-style:normal}
.xwin{position:absolute;inset:0;pointer-events:none;border:2px solid rgba(255,255,255,.2);border-radius:5px}
.xbonus{text-align:center;color:#f2c14e;font:800 20px var(--px,sans-serif);letter-spacing:.06em;margin:-4px 0 8px;animation:xglow 0.5s infinite alternate;text-shadow:0 0 8px #f2c14e}
.xresults{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;opacity:0;transition:opacity .4s}.xresults.show{opacity:1}
.xres{display:flex;flex-direction:column;align-items:center;min-width:110px;text-align:center}.xres .ico{width:40px;height:40px;font-size:28px;line-height:40px;font-style:normal}.xres b{font-size:14px}.xres small{opacity:.8}
.xcell .ico,.xres .ico{background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated}
.wasb{font-style:normal;cursor:help;margin-right:2px}
/* Tileman (2026-10-26) */
.tilehud{position:absolute;left:8px;top:8px;z-index:4;display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(12,14,18,.85);border:1px solid #ffd24a;border-radius:6px;font-size:13px;color:#e8e2d0}
.tilehud b:first-child{color:#ffd24a}
.lmorebtn{background:none;border:0;padding:2px 0;color:var(--gold,#f2c14e);cursor:pointer;text-decoration:underline}
/* the Exchange tab (2026-10-27): rows are buttons; away from the Commons the full window's trading buttons are greyed out */
.li.getab { width: 100%; text-align: left; }
.li.getab .t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gefar [data-ge] { opacity: .4; cursor: not-allowed; }

/* the trade window ends just above the chat (Justin 2026-10-28: it covered chat, so you couldn't read or type while trading). --trbot = the chat's height from the bottom (tradeFit) */
@media (min-width:761px){.win:has(.trw4){top:8px;transform:translateX(-50%);height:max(440px,min(880px,calc(100vh - var(--trbot,180px) - 8px)))}}

/* the dev's reply to a suggestion (2026-10-29) */
.devsugg{background:#00000033;border:1px solid #ffffff1a;border-left:3px solid #9a968a;border-radius:6px;padding:8px 10px;white-space:normal;font-style:italic}
.devresp{background:#e9c45e14;border:1px solid #e9c45e40;border-left:3px solid #e9c45e;border-radius:6px;padding:8px 10px}
/* the Donor Pack tab (2026-10-29) */
.packhead{display:flex;gap:10px;align-items:center;border:1px solid var(--c);border-radius:8px;padding:8px 10px;margin-bottom:6px;background:rgba(127,216,255,.07)}
.packhead .big{font-size:34px;line-height:1;filter:drop-shadow(0 0 8px var(--c))}
/* the profile card (Donor Pack part 4, 2026-10-29) */
.pcard{position:relative;display:flex;gap:12px;align-items:center;background:var(--bg);color:var(--ink);border:2px solid var(--edge);border-radius:10px;padding:10px 12px;margin:0 0 8px;min-height:120px;overflow:hidden}
.pcard .pcfigw{position:relative;flex:none;display:flex}
.pcard .pcturn{position:absolute;bottom:2px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--edge);background:rgba(0,0,0,.45);color:#fff;font:700 15px/1 sans-serif;cursor:pointer;opacity:.75}
.pcard .pcturn:hover{opacity:1}.pcard .pcturn.l{left:-4px}.pcard .pcturn.r{right:-4px}
.pcard .pcfig{width:auto;min-width:84px;max-width:170px;height:112px;object-fit:contain;object-position:center bottom;image-rendering:pixelated;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.pcard .pcmain{flex:1;min-width:0}
.pcard .pcname{font:700 22px 'Barlow Condensed','Arial Narrow',sans-serif;line-height:1.05}
.pcard .pctag{color:var(--sub)}
.pcard .pctitle{color:var(--sub);font:600 15px 'Barlow Condensed','Arial Narrow',sans-serif}
.pcard .pcline{color:var(--sub);font-size:12px;margin-top:2px}
.pcard .pcbio{margin-top:6px;font-size:13px;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.pcard .pcshow{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pcard .pcs{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.25);border-radius:6px;padding:3px 7px 3px 3px;font-size:12px;max-width:160px}
.pcard .pcs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pcico{font-size:20px;width:28px;text-align:center}
.pcard .pcbtns{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.pcbgs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pcbg{border:2px solid transparent;border-radius:6px;padding:12px 4px;font:600 13px 'Barlow Condensed','Arial Narrow',sans-serif;cursor:pointer}
.pcbg.on{border-color:#fff;box-shadow:0 0 0 2px #e9c45e}
.pcsels{display:flex;flex-direction:column;gap:4px}.pcsels select{width:100%}
/* Donor Pack themes (2026-10-30): bubbles rise in Deep Ocean, stars drift and twinkle in Galaxy */
.fx-bubble{width:5px;height:5px;background:transparent;border:1px solid var(--fx-c);box-shadow:0 0 4px var(--fx-g)}
.fx-star{position:absolute;left:-4px;width:2px;height:2px;border-radius:50%;background:var(--fx-c,#fff);box-shadow:0 0 4px 1px var(--fx-g,#c8b8ff);opacity:.8;animation:fxdrift 30s linear infinite,fxtwinkle 2.6s ease-in-out infinite}
.fx-star.big{width:3px;height:3px}
@keyframes fxdrift{from{transform:translateX(0)}to{transform:translateX(420px)}}
@keyframes fxtwinkle{50%{opacity:.25}}
/* the High scores and Donors tab (2026-10-30) */
.boardbtn{width:100%;display:flex;gap:10px;align-items:center;text-align:left;margin:0 0 6px;padding:8px 10px;height:auto;white-space:normal}
.boardbtn .bico{font-size:22px;width:28px;text-align:center;flex:none}.boardbtn small{display:block;color:var(--muted);font-weight:400}

/* ---------- phone layout (Justin 2026-11-01, OSRS-style; client/66_phone.js) ----------
   body.ph: the game fills the screen and the camera follows you; area + activity top-left, minimap and orbs top-right, tab buttons
   bottom-right (landscape, .phl) or along the bottom (portrait, .php), the last chat lines bottom-left. A tab opens its panel over the game
   (body.ph.paneopen); tapping the same tab closes it. The top bar lives behind the ☰ button (body.ph.menuopen). Panels follow the
   player's GUI theme; with none picked (body.osrs) they get OSRS brown and gold. */
body.ph{overflow:hidden;height:100%;--phtab:38px;--safe-l:max(8px,env(safe-area-inset-left));--safe-r:max(8px,env(safe-area-inset-right));--safe-t:max(6px,env(safe-area-inset-top));--safe-b:max(6px,env(safe-area-inset-bottom))}
body.ph .shell{padding:0;display:block}
body.ph .frame{display:block;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;border:0;border-radius:0;background:#000;box-shadow:none}
body.ph .frame::before{display:none}
body.ph .vp{position:static;overflow:visible;border:0;border-radius:0}   /* static (2026-11-02): the HUD, chat and the game's pop-ups all stack together in the frame, so pop-ups (z45) sit above the buttons (z30) without moving the HUD into the view; iPhone Safari showed no tabs when it was inside */
body.ph #world{width:var(--vpw,100vw);height:var(--vph,var(--phH,100vh));display:block}
/* the top bar: hidden behind ☰ */
body.ph .topbar{display:none}
body.ph.menuopen .topbar{display:flex;flex-wrap:wrap;height:auto;gap:6px;position:fixed;left:var(--safe-l);top:calc(var(--safe-t) + 40px);max-width:min(92vw,520px);z-index:70;background:var(--steel);border:2px solid var(--line);border-radius:8px;padding:8px;box-shadow:0 8px 30px #000c}
body.ph.menuopen .tb-right{flex-wrap:wrap;gap:6px}
#phMenu{display:none}
body.ph #phMenu{display:flex;align-items:center;justify-content:center;position:fixed;left:var(--safe-l);top:var(--safe-t);width:34px;height:30px;z-index:31;font-size:18px;padding:0;border-radius:8px}
/* area name + Credits: a chip top-left (next to ☰) */
body.ph .side{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:30;display:block;background:none;gap:0}
body.ph .side>*{pointer-events:auto}
body.ph .mini{position:static;background:none;border:0;padding:0}
body.ph .mini-head{position:fixed;left:calc(var(--safe-l) + 40px);top:var(--safe-t);background:#000a;border:1px solid #5a4a2a;border-radius:8px;padding:3px 9px;font-size:15px;color:#ffe9a8;text-shadow:0 1px 0 #000;max-width:calc(100vw - var(--safe-l) - var(--safe-r) - var(--phmini,112px) - 118px);gap:6px;align-items:center;display:flex;white-space:nowrap}
body.ph .mini-head #areaName{overflow:hidden;text-overflow:ellipsis;min-width:0}
body.ph .mini-head .cr{font-size:15px;padding-left:4px}
body.ph .mini-tog,body.ph .mini-sub{display:none}
/* the minimap: a circle top-right that follows you */
body.ph #phMiniWrap{position:fixed;right:var(--safe-r);top:var(--safe-t);width:var(--phmini,112px);height:var(--phmini,112px);border-radius:50%;overflow:hidden;border:4px solid var(--phframe,#6b5a33);box-shadow:0 0 0 2px #1d160a,inset 0 0 12px #000;background:#000}
body.ph #minimap{position:absolute;left:0;top:0;width:calc(var(--phmini,112px) * 2.4);height:auto;max-width:none;border:0;border-radius:0;box-shadow:none;aspect-ratio:8/5}
body.ph #phMiniWrap::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 10px #000c;pointer-events:none}
#phMiniWrap,#phOrbs{display:none}
body.ph #phMiniWrap,body.ph #phOrbs{display:block}
/* orbs left of the minimap: HP, food, Map, Storage (the Map and Storage buttons themselves) */
body.ph #phOrbs{position:fixed;right:calc(var(--safe-r) + var(--phmini,112px) + 8px);top:var(--safe-t);width:52px;pointer-events:none}
body.ph .phorb,body.ph .mini-btns .btn{pointer-events:auto;display:flex;align-items:center;gap:3px;height:28px;margin-bottom:5px;border-radius:14px;background:#1c1a14ee;border:2px solid var(--phframe,#6b5a33);padding:0 6px;font:700 15px var(--px);color:#9be86a;box-shadow:0 1px 4px #000a}
body.ph .phorb.hp{color:#ff8a7a} body.ph .phorb.hp.low{animation:phlow 1s infinite}
@keyframes phlow{50%{box-shadow:0 0 10px #ff4a3a}}
body.ph .mini-btns{position:fixed;right:calc(var(--safe-r) + var(--phmini,112px) + 8px);top:calc(var(--safe-t) + 99px);display:flex;flex-direction:column;gap:0;margin:0;width:auto}
body.ph .mini-btns .btn{font-size:0;width:auto;justify-content:center;padding:0 7px;flex:none}
body.ph .mini-btns .btn .ico{margin:0;width:20px;height:20px;background-size:contain}
/* tab buttons */
body.ph .tabs{position:fixed;gap:3px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--phtab);grid-template-columns:none}
body.ph .tabs button{width:var(--phtab);height:var(--phtab);border:2px solid var(--phframe,#6b5a33);border-radius:6px}
body.ph .tabs button .ico{transform:scale(1.05)}
body.ph.phl #tabsTop{right:var(--safe-r);bottom:calc(var(--safe-b) + var(--phtab) + 3px)}
body.ph.phl #tabsBot{right:var(--safe-r);bottom:var(--safe-b)}
body.ph.php{--phtab:46px}
body.ph.php .tabs{left:6px;right:6px;grid-auto-columns:1fr}
body.ph.php .tabs button{width:auto}
body.ph.php #tabsTop{bottom:calc(var(--safe-b) + var(--phtab) + 3px)}
body.ph.php #tabsBot{bottom:var(--safe-b)}
/* the panel: only while a tab is open */
body.ph .pane{display:none}
body.ph.paneopen .pane{display:block;position:fixed;z-index:32;overflow:auto;border:3px solid var(--phframe,#6b5a33);border-radius:8px;box-shadow:0 0 0 2px #1d160a,0 6px 24px #000a;padding:8px}
body.ph.phl.paneopen .pane{right:var(--safe-r);bottom:calc(var(--safe-b) + var(--phtab) * 2 + 12px);width:min(320px,48vw);max-height:calc(var(--phH,100vh) - var(--phtab) * 2 - 30px - var(--safe-t))}
body.ph.php.paneopen .pane{left:6px;right:6px;bottom:calc(var(--safe-b) + var(--phtab) * 2 + 10px);max-height:52vh}
body.ph.paneopen .pane .inv{grid-template-columns:repeat(7,1fr);gap:3px}
body.ph.paneopen .pane .inv .slot{width:100%;height:auto;aspect-ratio:1/1}
body.ph.phl.paneopen .pane{width:min(330px,46vw)}
#phPaneX{display:none}
body.ph.paneopen #phPaneX{display:flex;position:fixed;z-index:33;width:30px;height:30px;align-items:center;justify-content:center;padding:0;border-radius:50%;font-size:18px}
/* chat: the last lines bottom-left; tap to open the full chat */
body.ph .chat{position:fixed;left:var(--safe-l);bottom:var(--safe-b);width:min(380px,calc(100vw - var(--phtab) * 7 - 50px));height:auto;max-height:110px;z-index:29;background:none;border:0;box-shadow:none}
body.ph.php .chat{left:6px;right:6px;width:auto;bottom:calc(var(--safe-b) + var(--phtab) * 2 + 10px)}
body.ph.php.paneopen .chat{display:none}
body.ph .chatgrip{display:none}
body.ph .clog{order:-1;max-height:62px;overflow:hidden;border:0;padding:0;font-size:13px;text-shadow:0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;pointer-events:auto;display:flex;flex-direction:column;justify-content:flex-end}
body.ph .clog p{background:#0007;border-radius:4px;padding:1px 6px;margin:1px 0;width:max-content;max-width:100%}
body.ph .clog .t{display:none}
body.ph .ctabs{padding:3px 0 0;gap:3px;align-items:center;flex-wrap:nowrap;overflow:hidden}
body.ph .ctabs button{border:2px solid var(--phframe,#6b5a33);border-radius:6px;margin:0;padding:2px 8px}
body.ph .cform{display:none}
body.ph #chatToggle{display:inline-flex;position:absolute;right:0;bottom:0;flex:none;padding:3px 12px;z-index:2;font:700 14px var(--px);border:2px solid var(--phframe,#6b5a33);border-radius:6px}
body.ph.chatopen #chatToggle{top:4px;right:4px;bottom:auto}
body.ph.chatopen .chat{max-height:none;height:min(60vh,360px);background:var(--dark);border:2px solid var(--line);border-radius:8px;padding:4px;z-index:60;width:min(520px,calc(100vw - 16px));box-shadow:0 8px 30px #000c}
body.ph.php.chatopen .chat{display:flex;bottom:var(--safe-b);height:min(55vh,420px)}
body.ph.chatopen .clog{max-height:none;overflow:auto;display:block;text-shadow:none;flex:1}
body.ph.chatopen .clog p{background:none;width:auto;padding:0}
body.ph.chatopen .clog .t{display:inline}
body.ph.chatopen .cform{display:flex}
/* what you're doing (and Slayer, clues, digging, farming): top-left under the area chip, a bit smaller */
body.ph .lstack{position:fixed;left:var(--safe-l);top:calc(var(--safe-t) + 38px);transform:scale(.88);transform-origin:top left;max-width:58vw;z-index:28}
body.php .lstack{max-width:100vw}
body.ph .rstack{position:fixed;right:var(--safe-r);top:var(--phrtop,calc(var(--safe-t) + 150px));transform:scale(.88);transform-origin:top right;z-index:28}   /* under the minimap AND the orbs ("Your plots" was behind them) */
body.ph .lstack.moved,body.ph .rstack.moved{right:auto;transform-origin:top left}   /* dragged with the ⋮⋮ grip like on a computer */
body.ph .xpdrops{top:calc(var(--safe-t) + var(--phmini,112px) + 10px);right:calc(var(--safe-r) + 30px)}
body.ph .buffs{top:auto;bottom:calc(var(--safe-b) + var(--phtab) * 2 + 16px)}
body.ph.php .buffs{bottom:calc(var(--safe-b) + var(--phtab) * 2 + 120px)}
/* pop-up windows fit the screen */
body.ph .win{position:fixed;width:min(560px,calc(100vw - 16px));max-height:calc(var(--phH,100vh) - 16px);z-index:50}
body.ph .ctx{position:fixed}
body.ph.winopen:not(.chatopen) .chat,body.ph.winopen .lstack,body.ph.winopen .rstack{display:none}
body.ph.phl.paneopen .win{left:var(--safe-l);top:var(--safe-t);transform:none;width:calc(100vw - min(330px,46vw) - 34px);max-height:calc(var(--phH,100vh) - 12px)}
body.ph.php.paneopen.winopen .pane{max-height:36vh}
body.ph.php.paneopen .win{top:var(--safe-t);transform:translateX(-50%);max-height:calc(var(--phH,100vh) - 36vh - var(--phtab) * 2 - 36px)}
body.ph .ctx{z-index:80}
body.ph .tip{max-width:80vw}
/* no theme picked: OSRS brown and gold for the phone panels */
body.ph.osrs{--phframe:#6b5a33;--dark:#3b3226;--steel:#3b3226;--inset:#2a2319;--slot:#2a2319;--slot-hi:#3a3024;--slot-hov:#4a3d2c;--li:#33291e;--li-hov:#43362a;--box:#2a2319;
  --tab-a:#4a3f2c;--tab-b:#2c2518;--tabon-a:#8a3a22;--tabon-b:#5a2412;--ctab:#3a3124;--ctab-on:#5a4a33;--head-a:#4a3f2c;--head-b:#2c2518;--accent:#e0a050;--line:#1a140c}
body.ph.osrs .pane h3,body.ph.osrs .pane h4{color:#ffd65a}

/* (2026-11-01 evening, players' first reports) */
body.ph .side,body.ph section.chat{z-index:30}
body.ph #newsCard,body.ph .conn,body.ph .toast,body.ph .banner,body.ph .countdown,body.ph .survbar,body.ph .hgleave{z-index:45}
body.ph #newsCard{position:fixed;right:var(--safe-r);left:auto;bottom:auto;top:calc(var(--safe-t) + 44px);max-height:calc(var(--phH,100vh) - 60px);overflow:auto;width:min(340px,calc(100vw - 16px))}
body.ph .xporbs{position:fixed;left:auto;transform:none;right:calc(var(--safe-r) + var(--phmini,112px) + 66px);top:calc(var(--safe-t) + 38px);z-index:29}
body.ph.php .xporbs{right:calc(var(--safe-r) + var(--phmini,112px) + 66px);top:calc(var(--safe-t) + 40px)}
body.ph #world{touch-action:none}
/* button sizes: Settings > Screen & sound (Small / Normal / Large) */
body.ph.phl.phb-s{--phtab:32px} body.ph.phl.phb-l{--phtab:46px}
body.ph.php.phb-s{--phtab:38px} body.ph.php.phb-l{--phtab:54px}
/* chat lines on screen: fade a few seconds after the last message (phchat=fade, the default), or never shown (phchat=off) */
body.ph:not(.chatopen) .clog{transition:opacity .8s}
body.ph.chatfaded:not(.chatopen) .clog{opacity:0;pointer-events:none}
body.ph.chathide:not(.chatopen) .clog{display:none}
/* the world map on a narrow screen: full size, slide it sideways */
body.ph .win .worldmap{width:max(100%,720px)}
body.ph .win-body,body.ph #winBody{overflow:auto}
/* the zoom orb */
body.ph #phZoom{pointer-events:auto;cursor:pointer;justify-content:center;color:#ffe9a8}
body.ph:not(.chatopen) .clog{-webkit-mask-image:linear-gradient(transparent,#000 18px);mask-image:linear-gradient(transparent,#000 18px)}   /* a line cut off at the top fades out instead of showing half a word */
/* What's new always has an × (iPhone players 2026-11-01: "can't close anything") */
#newsCard .nc-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:24px;padding:0;border:0;border-radius:4px;background:#0003;color:#1a1408;font:800 18px/22px sans-serif;cursor:pointer}
body.ph #newsCard .nc-x{width:40px;height:30px;font-size:22px}
/* the phone minimap circle never sits empty: "hide minimap" is for the computer layout (iPhone players 2026-11-01: a black circle) */
body.ph.nominimap #minimap{display:block!important}
#phOffBtn{display:none}body.ph #phOffBtn{display:inline-flex}
/* a GUI theme's effect layer (.fxl) on the side panel: in the phone layout the side panel covers the whole screen, and '.side>*' made the
   layer catch every tap (Hi Im Friday 2026-11-02: only chat, ☰ and windows worked; his tap log showed div.fxl under every tap). Effects
   layers never take taps, and on phones the side panel's one is off (it would sparkle over the whole game) */
.fxl{pointer-events:none!important}
body.ph .side>.fxl{display:none}
/* the card's character: always 112px tall; wider (up to 170px) when wings spread out, the same in all four directions (Justin 2026-11-02: front and back as big as the side) */

.tcrline .tfee{font-size:11px;margin-top:2px}
/* the Show-Off Pack (2026-11-03): name styles in chat and in the Show-Off window, chat bubble previews */
.ns-gold{background:linear-gradient(90deg,#b8860b,#fff6c0,#f2c14e,#b8860b);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:nsSlide 2.4s linear infinite;text-shadow:none!important}
.ns-rainbow{background:linear-gradient(90deg,#ff5a5a,#ffb14a,#ffe94a,#6ae86a,#4ac8ff,#b07aff,#ff5a5a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:nsSlide 3s linear infinite;text-shadow:none!important}
.ns-fire{background:linear-gradient(180deg,#fff2a0,#ff9a2a 55%,#e8401a);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 3px rgba(255,106,0,.8));animation:nsFlick 1.2s ease-in-out infinite;text-shadow:none!important}
.ns-ice{color:#d8f4ff!important;text-shadow:0 0 6px #4ac8ff,0 0 2px #4ac8ff!important;animation:none}
.ns-neon{color:#fff0fc!important;text-shadow:0 0 4px #ff3ad8,0 0 9px #ff3ad8!important;animation:nsNeon 2s ease-in-out infinite}
.ns-stripes{background:repeating-linear-gradient(180deg,#f4f4f4 0 2px,#5a5a5a 2px 4px);background-size:100% 8px;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:nsDrop 1.6s linear infinite;text-shadow:none!important;filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}
@keyframes nsSlide{to{background-position:-200% 0}}
@keyframes nsDrop{to{background-position:0 8px}}
@keyframes nsFlick{50%{filter:drop-shadow(0 0 6px rgba(255,140,0,.95))}}
@keyframes nsNeon{50%{text-shadow:0 0 2px #ff3ad8,0 0 4px #ff3ad8}}
.showh{margin:10px 0 6px}.showh:first-child{margin-top:0}
.showgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.showpick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;background:#14181e;border:1px solid #2c333d;border-radius:8px;color:#e8dcb8;cursor:pointer;font:inherit}
.showpick>span{font:600 17px 'Barlow Condensed','Arial Narrow',sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showpick small{color:#9aa4b0;font-size:11px}
.showpick.on{border-color:#ff8ad8;box-shadow:0 0 0 1px #ff8ad8 inset;background:#22161f}
.showpick:disabled{cursor:default;opacity:.8}
.showpick.none>span{color:#9aa4b0}
.sb{font-size:14px!important;padding:3px 10px;line-height:1.2}
.sb-classic{background:#fff;color:#222;border:1.5px solid #222;border-radius:9px}
.sb-note{background:#e8dcb8;color:#3a2a18;transform:rotate(-2deg);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.sb-neon{background:#120a1e;color:#c8faff;border:1.5px solid #3ae8ff;border-radius:6px;box-shadow:0 0 8px #3ae8ff}
.sb-comic{background:#ffe44a;color:#111;border:2px solid #111;border-radius:50%;font-weight:700!important;padding:4px 12px}
/* Show-Off Pack part 2 (2026-11-03): animated profile card backgrounds (.pcard.pa-*) and the swatches in the Show-Off window */
.showico{font-size:24px!important;line-height:1}
.pcswatch{display:block;width:72px;height:34px;border-radius:6px;border:1px solid rgba(255,255,255,.25);position:relative;overflow:hidden}
.pcard.pa-stars>*,.pcard.pa-aurora>*,.pcard.pa-embers>*,.pcard.pa-rain>*{position:relative;z-index:1}
.pcard.pa-stars>.pcbtns{position:absolute}.pcard.pa-aurora>.pcbtns{position:absolute}.pcard.pa-embers>.pcbtns{position:absolute}.pcard.pa-rain>.pcbtns{position:absolute}
.pa-stars,.pa-aurora,.pa-embers,.pa-rain{isolation:isolate}
.pcswatch.pa-stars{background:radial-gradient(ellipse at 70% 30%,#1c2a5a,#0a0f24 60%,#030510)}
.pcswatch.pa-aurora{background:linear-gradient(180deg,#06121e,#0a1e2a 60%,#08141a)}
.pcswatch.pa-embers{background:linear-gradient(180deg,#1a0806,#3a1006 65%,#6a2008)}
.pcswatch.pa-rain{background:linear-gradient(180deg,#1a2230,#222c3a 60%,#141a24)}
.pa-stars::before,.pa-stars::after,.pa-aurora::before,.pa-aurora::after,.pa-embers::before,.pa-embers::after,.pa-rain::before,.pa-rain::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0}
.pa-stars::before{background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#cfe0ff,transparent),radial-gradient(1.5px 1.5px at 55% 35%,#fff,transparent),radial-gradient(1px 1px at 75% 80%,#fff,transparent),radial-gradient(1px 1px at 90% 15%,#dfe8ff,transparent),radial-gradient(1.5px 1.5px at 42% 92%,#fff,transparent),radial-gradient(1px 1px at 65% 55%,#fff,transparent),radial-gradient(1px 1px at 20% 50%,#fff,transparent);background-size:160px 120px;animation:paDrift 26s linear infinite;opacity:.9}
.pa-stars::after{background-image:radial-gradient(2px 2px at 25% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 65%,#fff8d0,transparent),radial-gradient(1.5px 1.5px at 85% 40%,#fff,transparent);background-size:230px 170px;animation:paDrift 14s linear infinite,paTwinkle 2.2s ease-in-out infinite}
@keyframes paDrift{to{background-position:-160px 0}}
@keyframes paTwinkle{50%{opacity:.35}}
.pa-aurora::before{inset:-40% -20% 20% -20%;background:linear-gradient(100deg,transparent 15%,rgba(80,255,170,.55) 30%,rgba(60,200,255,.35) 45%,rgba(190,90,255,.45) 62%,transparent 80%);background-size:200% 100%;filter:blur(14px);animation:paAur 9s ease-in-out infinite alternate}
.pa-aurora::after{background-image:radial-gradient(1px 1px at 15% 70%,#fff,transparent),radial-gradient(1px 1px at 50% 85%,#fff,transparent),radial-gradient(1px 1px at 80% 60%,#fff,transparent);background-size:140px 110px;opacity:.7}
@keyframes paAur{0%{background-position:0 0;transform:skewX(-8deg) scaleY(1)}50%{transform:skewX(6deg) scaleY(1.15)}100%{background-position:100% 0;transform:skewX(-4deg) scaleY(.95)}}
.pa-embers::before{background-image:radial-gradient(2px 2px at 12% 90%,#ffb040,transparent),radial-gradient(1.5px 1.5px at 38% 30%,#ff7a20,transparent),radial-gradient(2px 2px at 62% 65%,#ffd060,transparent),radial-gradient(1.5px 1.5px at 85% 12%,#ff8a30,transparent),radial-gradient(1px 1px at 50% 48%,#ffc050,transparent),radial-gradient(1.5px 1.5px at 24% 8%,#ffa040,transparent),radial-gradient(1px 1px at 74% 82%,#ffd070,transparent);background-size:150px 140px;animation:paRise 5s linear infinite;filter:drop-shadow(0 0 2px #ff6a00)}
.pa-embers::after{background:radial-gradient(ellipse at 50% 120%,rgba(255,110,20,.45),transparent 60%);animation:paGlow 2.4s ease-in-out infinite}
@keyframes paRise{to{background-position:14px -140px}}
@keyframes paGlow{50%{opacity:.55}}
.pa-rain::before{background-image:repeating-linear-gradient(105deg,transparent 0 9px,rgba(170,200,255,.28) 9px 10px,transparent 10px 23px);background-size:46px 60px;animation:paRain .55s linear infinite}
.pa-rain::after{background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(10,12,16,.75) 30px 36px,rgba(120,130,145,.35) 36px 37px,transparent 37px 66px),linear-gradient(180deg,rgba(10,12,16,.8) 0 6px,transparent 6px)}
@keyframes paRain{to{background-position:-16px 60px}}
@media (prefers-reduced-motion:reduce){.pa-stars::before,.pa-stars::after,.pa-aurora::before,.pa-embers::before,.pa-embers::after,.pa-rain::before{animation:none}}

/* phones (2026-11-03): the orbs sit on an arc around the minimap (client/66_phone.js phArc places each one) */
body.ph .pharc{position:fixed!important;width:30px!important;height:30px!important;min-width:0!important;margin:0!important;padding:0!important;border-radius:50%!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:0!important;font:700 11px/1 var(--px)!important;z-index:30}
body.ph .pharc b{font-size:9px;line-height:1}
body.ph #btnMap.pharc,body.ph #btnStore.pharc{font-size:0!important;background:#1c1a14ee;border:2px solid var(--phframe,#6b5a33);box-shadow:0 1px 4px #000a}
body.ph .pharc .ico{width:16px!important;height:16px!important;margin:0!important}
body:not(.ph) .pharc{position:static;left:auto;top:auto}
/* the owner's and admins' Show-Off styles (2026-11-04): chat names, bubble previews, card backgrounds */
.ns-crown{background:linear-gradient(90deg,#8a5a00,#ffd34a 35%,#fffbe0 50%,#ffd34a 65%,#8a5a00);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:nsSlide 2s linear infinite;filter:drop-shadow(0 0 3px #ffb000);text-shadow:none!important}
.ns-crown::before{content:'👑';-webkit-text-fill-color:initial;margin-right:2px;font-size:.85em}
.ns-warden{color:#fff!important;animation:nsSiren 1s steps(1) infinite}
.ns-warden::before{content:'⭐';margin-right:2px;font-size:.8em}
@keyframes nsSiren{0%{text-shadow:0 0 6px #ff2a2a,0 0 2px #ff2a2a}50%{text-shadow:0 0 6px #2a6aff,0 0 2px #2a6aff}}
.ns-storm{color:#9edcff!important;text-shadow:0 0 3px #2a7ab0!important;animation:nsStorm 2.5s steps(1) infinite}
@keyframes nsStorm{0%,100%{color:#9edcff}8%{color:#d4f1ff}12%{color:#9edcff}}
/* Lightning in chat (Justin 2026-11-04): arcs crackle across the letters, like the name above your head */
.ns-storm{position:relative;display:inline-block}
.ns-storm::before,.ns-storm::after{content:'';position:absolute;top:46%;height:10px;pointer-events:none;opacity:0;filter:drop-shadow(0 0 2px #4ac8ff) drop-shadow(0 0 1px #fff);background-repeat:no-repeat;background-size:100% 100%;filter:drop-shadow(0 0 1px #1a5a8a)}
.ns-storm::before{width:62%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Cpolyline points='0,6 4,2 7,8 11,3 14,7 18,1 21,6 26,3' stroke='%2378c8f0' stroke-width='1.3' fill='none' stroke-linejoin='bevel'/%3E%3C/svg%3E");animation:nsArcA 1.9s steps(1) infinite}
.ns-storm::after{width:48%;top:58%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpolyline points='0,3 3,7 6,2 10,8 13,3 16,6 20,2' stroke='%2360b8e8' stroke-width='1.2' fill='none' stroke-linejoin='bevel'/%3E%3C/svg%3E");animation:nsArcB 2.6s steps(1) infinite .4s}
@keyframes nsArcA{0%{opacity:.75;left:2%}12%{opacity:0}20%{opacity:.75;left:34%;transform:scaleY(-1)}32%{opacity:0}44%{opacity:.75;left:14%;transform:none}52%{opacity:.6;left:18%}60%{opacity:0}72%{opacity:.75;left:30%;transform:scaleX(-1)}86%{opacity:0}}
@keyframes nsArcB{0%{opacity:.7;left:48%}10%{opacity:0}28%{opacity:.7;left:4%;transform:scaleX(-1)}40%{opacity:0}58%{opacity:.7;left:26%;transform:none}70%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ns-storm::before,.ns-storm::after{animation:none;opacity:0}}
.ns-cosmic{background:linear-gradient(90deg,#3a1a8a,#c84aff,#2ad8ff,#c84aff,#3a1a8a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:nsSlide 5s linear infinite;filter:drop-shadow(0 0 3px #c84aff);text-shadow:none!important}
.ns-drip{background:linear-gradient(180deg,#fff2b0,#f2b81e 55%,#a86a00);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 3px #ff9a00);text-shadow:none!important}
.ns-glitch{color:#eee641!important;letter-spacing:1px;text-shadow:-1.5px 0 #ff28c8,1.5px 0 #28f0ff!important;animation:nsGlitch 2.2s steps(1) infinite}
@keyframes nsGlitch{0%,100%{text-shadow:-1.5px 0 #ff28c8,1.5px 0 #28f0ff}20%{text-shadow:-3px 1px #ff28c8,3px -1px #28f0ff}24%{text-shadow:-1.5px 0 #ff28c8,1.5px 0 #28f0ff}60%{text-shadow:2px 0 #ff28c8,-2px 0 #28f0ff}}
.sb-decree{background:#ecdcae;color:#3a2410;font-style:italic;font-family:Georgia,serif!important;border-top:3px solid #b89a5a;border-bottom:3px solid #b89a5a}
.sb-broadcast{background:#16181c;color:#fff;border:3px solid;border-image:repeating-linear-gradient(45deg,#ffd400 0 6px,#111 6px 12px) 3}
.sb-plaque{background:linear-gradient(180deg,#ffe58a,#d6a020 50%,#8a5a00);color:#3a2400;font-weight:700!important;border:1px solid #6a4000}
.sb-holo{background:rgba(40,220,255,.16);color:#c8faff;border:1.5px solid #4ae8ff;box-shadow:0 0 8px #4ae8ff}
.pcard.pa-throne>*,.pcard.pa-radar>*,.pcard.pa-thunder>*,.pcard.pa-galaxy>*{position:relative;z-index:1}
.pcard.pa-throne>.pcbtns,.pcard.pa-radar>.pcbtns,.pcard.pa-thunder>.pcbtns,.pcard.pa-galaxy>.pcbtns{position:absolute}
.pa-throne,.pa-radar,.pa-thunder,.pa-galaxy{isolation:isolate}
.pcswatch.pa-throne{background:linear-gradient(180deg,#3a0610,#14020a)}.pcswatch.pa-radar{background:#04140a}.pcswatch.pa-thunder{background:#0e1220}.pcswatch.pa-galaxy{background:#05030c}
.pa-throne::before,.pa-throne::after,.pa-radar::before,.pa-radar::after,.pa-thunder::before,.pa-thunder::after,.pa-galaxy::before,.pa-galaxy::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0}
.pa-throne::before{background:repeating-conic-gradient(from 160deg at 72% -10%,rgba(255,200,80,.16) 0 3deg,transparent 3deg 9deg);animation:paSway 8s ease-in-out infinite alternate;mask-image:linear-gradient(180deg,#000,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 95%)}
.pa-throne::after{background:linear-gradient(90deg,#5a0a14,#a01828 4%,#5a0a14 8%,transparent 8%,transparent 92%,#5a0a14 92%,#a01828 96%,#5a0a14),radial-gradient(1.5px 1.5px at 20% 40%,#ffdc8c,transparent),radial-gradient(1.5px 1.5px at 60% 70%,#ffdc8c,transparent),radial-gradient(1px 1px at 40% 20%,#ffdc8c,transparent);background-size:100% 100%,120px 90px,140px 110px,90px 80px;border-top:4px solid #d6a020;animation:paDust 12s linear infinite}
@keyframes paSway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes paDust{to{background-position:0 0,120px -40px,-140px -60px,90px -30px}}
.pa-radar::before{background-image:linear-gradient(rgba(60,255,120,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(60,255,120,.12) 1px,transparent 1px),radial-gradient(circle at 62% 50%,transparent 0 36px,rgba(60,255,120,.3) 36px 37px,transparent 37px 72px,rgba(60,255,120,.3) 72px 73px,transparent 73px 108px,rgba(60,255,120,.3) 108px 109px,transparent 109px);background-size:20px 20px,20px 20px,100% 100%}
.pa-radar::after{inset:auto;left:62%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,rgba(60,255,120,0) 0 80%,rgba(60,255,120,.45) 99%,rgba(60,255,120,0) 99.5%);animation:paSpin 4s linear infinite}
@keyframes paSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.pa-thunder::before{background:radial-gradient(ellipse 60px 22px at 15% 15%,rgba(40,46,70,.9),transparent),radial-gradient(ellipse 80px 26px at 55% 10%,rgba(40,46,70,.9),transparent),radial-gradient(ellipse 70px 22px at 85% 18%,rgba(40,46,70,.9),transparent),repeating-linear-gradient(105deg,transparent 0 12px,rgba(160,190,255,.25) 12px 13px,transparent 13px 26px);background-size:100% 100%,100% 100%,100% 100%,52px 70px;animation:paStorm 6s linear infinite,paRain2 .6s linear infinite}
.pa-thunder::after{background:linear-gradient(170deg,transparent 40%,rgba(234,244,255,.0) 40%);animation:paFlash 5s steps(1) infinite}
@keyframes paStorm{to{background-position:60px 0,-80px 0,40px 0,0 0}}
@keyframes paRain2{to{background-position:0 0,0 0,0 0,-18px 70px}}
@keyframes paFlash{0%,100%{background:transparent}70%{background:rgba(160,180,230,.45)}72%{background:transparent}75%{background:rgba(200,220,255,.35)}77%{background:transparent}}
.pa-galaxy::before{background:radial-gradient(circle at 70% 50%,rgba(255,220,255,.9) 0 2%,rgba(180,90,255,.4) 10%,transparent 30%),conic-gradient(from 0deg at 70% 50%,transparent 0 10%,rgba(200,140,255,.35) 15%,transparent 25% 60%,rgba(140,200,255,.3) 65%,transparent 75%);animation:paSpin2 18s linear infinite}
.pa-galaxy::after{background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 50% 30%,#fff,transparent),radial-gradient(1px 1px at 85% 75%,#fff,transparent),radial-gradient(1px 1px at 90% 15%,#fff,transparent);background-size:150px 110px;animation:paTwinkle 2.6s ease-in-out infinite}
@keyframes paSpin2{to{filter:hue-rotate(40deg)}}
@media (prefers-reduced-motion:reduce){.pa-throne::before,.pa-throne::after,.pa-radar::after,.pa-thunder::before,.pa-thunder::after,.pa-galaxy::before,.pa-galaxy::after{animation:none}}
/* the Scapelikes vote reminder in chat (2026-11-04): a link that looks like one */
.clog .k-vote{color:#ffe7a0;background:linear-gradient(90deg,#3a2c0a66,transparent);border-left:3px solid #ffc83a;padding-left:6px}
.clog .k-vote a.votelink{color:#5ad8ff;font-weight:800;text-decoration:underline;text-underline-offset:2px;padding:0 3px;border-radius:3px;cursor:pointer}
.clog .k-vote a.votelink::after{content:' ↗';font-size:.85em}
.clog .k-vote a.votelink:hover{color:#fff;background:#1d6fa0}
/* the quick-swap bar (client/77_qswap.js, 2026-11-05) */
.qswap{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:row;gap:4px;z-index:3}
.qswap .qs{position:relative;display:flex;flex-direction:column;align-items:center;width:46px;padding:4px 2px 3px;background:rgba(14,12,18,.82);border:1px solid var(--line);border-radius:4px;color:#d8d2c4;cursor:pointer}
.qswap .qs:hover{border-color:#e8c04a}
.qswap .qs.cur{border-color:#6ae07a;box-shadow:0 0 0 1px #6ae07a inset}
.qswap .qs small{font-size:10px;line-height:1.1;margin-top:1px}
.qswap .qs kbd{position:absolute;top:1px;right:2px;font:9px/1 monospace;color:#9a9282;background:none;border:0;padding:0}
/* phones (body.ph): down the left edge under the area name, compact, no key hints (the tab buttons fill the bottom-right) */
body.ph .qswap{left:6px;right:auto;top:52px;bottom:auto;flex-direction:column;gap:3px}
body.ph .qswap .qs{width:32px;padding:3px 1px}
body.ph .qswap .qs kbd{display:none}
body.ph .qswap .qs small{display:none}