/* ===== Colors. Everything that has a color uses these names, so a whole palette swaps at once. =====
   "green" is the main accent color of the current look. In the second palette it holds the gold. */
:root{
  --white:#e8eef2;--green:#5fe08a;--green2:#8df0aa;--dim:#8fa3ad;--g:95,224,138;
  --line:rgba(var(--g),.24);--line2:rgba(var(--hi),.08);--danger:#f0b46a;
  --body-bg:#02050c;--bg-top:#091a38;--bg-mid:#050d22;--bg-bot:#000;--bg-glow:rgba(38,91,118,.20);
  --wave-a:#06142e;--wave-b:#020712;
  --panel-top:rgba(10,22,42,.88);--panel-bot:rgba(3,9,20,.88);--field-bg:#050b16;
  --track:#7a1f2b;--bar-hp:var(--green);--bar-mp:#6aa5ee;--bar-en:#e2b95a;
  --value:var(--green);--place:var(--green);--on-accent:#000;
  --cmb:#f0b46a;--glo:#8ab4f8;--glo2:#b8d0ff;
  --ok:var(--green);--bad:#d06d59;--warn:#c6a34e;
  --scroll:#1c2a40;--scroll-hover:#2a3d5c;
  --sh:0,0,0;--hi:255,255,255; /* shade and highlight colors used for soft overlays and dividers */
  box-sizing:border-box;color-scheme:dark;
}
/* Second palette (taken from the reference screenshot) */
:root[data-theme="alt"]{
  --white:#e9e5db;--green:#c2bb9f;--green2:#d6cfb4;--dim:#9b978f;--g:194,187,159;
  --line:#3c3e3f;--line2:#333439;--danger:#c9857a;
  --body-bg:#181b22;--bg-top:#191c23;--bg-mid:#181b22;--bg-bot:#1a1d24;--bg-glow:rgba(110,92,62,.10);
  --wave-a:#1d2027;--wave-b:#16181d;
  --panel-top:#21242b;--panel-bot:#1f2229;--field-bg:#1b1e24;
  --track:#4a443e;--bar-hp:#a95c52;--bar-mp:#758a98;--bar-en:#c2bb9f;
  --value:#e9e5db;--place:#e9e5db;--on-accent:#18191e;
  --cmb:#c9857a;--glo:#758a98;--glo2:#a3b5c1;
  --ok:#7ca885;--bad:#a95c52;--warn:#c2bb9f;
  --scroll:#34363b;--scroll-hover:#45484e;
}
/* More palettes. Each one sets the same names, so adding another is just another block like these. */
/* Light: the standard light mode */
:root[data-theme="light"]{
  color-scheme:light;
  --white:#1d2530;--green:#1f7a4a;--green2:#2a9a5f;--dim:#5a6672;--g:31,122,74;
  --line:rgba(31,122,74,.38);--line2:rgba(0,0,0,.12);--danger:#b86a1c;
  --body-bg:#eef2f6;--bg-top:#f7f9fc;--bg-mid:#e9eff6;--bg-bot:#dbe4ee;--bg-glow:rgba(120,170,220,.28);
  --wave-a:#d6e1ec;--wave-b:#c8d5e3;
  --panel-top:rgba(255,255,255,.94);--panel-bot:rgba(246,249,252,.94);--field-bg:#ffffff;
  --track:#e3b5ba;--bar-hp:#2e9e62;--bar-mp:#3f78c4;--bar-en:#c9962a;
  --value:var(--green);--place:var(--green);--on-accent:#ffffff;
  --cmb:#a8561a;--glo:#2f6bb8;--glo2:#1f4f93;--ok:#1f7a4a;--bad:#b4402e;--warn:#8a6d12;
  --scroll:#b9c4d0;--scroll-hover:#9aa8b8;--sh:150,170,200;--hi:0,0,0;
}
/* Dark: the standard dark mode */
:root[data-theme="dark"]{
  --white:#e6e8eb;--green:#6ea8fe;--green2:#9cc2ff;--dim:#9aa0a8;--g:110,168,254;
  --line:rgba(255,255,255,.16);--line2:rgba(255,255,255,.09);--danger:#e0a458;
  --body-bg:#121212;--bg-top:#1b1b1d;--bg-mid:#141415;--bg-bot:#0b0b0c;--bg-glow:rgba(255,255,255,.04);
  --wave-a:#19191b;--wave-b:#101011;
  --panel-top:rgba(30,30,33,.94);--panel-bot:rgba(23,23,26,.94);--field-bg:#101012;
  --track:#4a2d31;--bar-hp:#58b36b;--bar-mp:#5b9cf5;--bar-en:#d9a43b;
  --value:var(--green);--place:var(--green);--on-accent:#0b0b0c;
  --cmb:#e0a458;--glo:#8ab4f8;--glo2:#b8d0ff;--ok:#58b36b;--bad:#e06c5f;--warn:#d9a43b;
  --scroll:#2c2c30;--scroll-hover:#3c3c42;--sh:0,0,0;--hi:255,255,255;
}
/* Ember: red, gold and brown */
:root[data-theme="ember"]{
  --white:#f5e8d4;--green:#e2b24c;--green2:#f2cd78;--dim:#b89c82;--g:226,178,76;
  --line:rgba(226,178,76,.28);--line2:rgba(255,226,190,.09);--danger:#f08a4b;
  --body-bg:#170a07;--bg-top:#431711;--bg-mid:#2b110c;--bg-bot:#130604;--bg-glow:rgba(190,60,35,.26);
  --wave-a:#3d1c12;--wave-b:#26100a;
  --panel-top:rgba(58,26,17,.9);--panel-bot:rgba(36,16,10,.92);--field-bg:#1c0d09;
  --track:#6a2a1e;--bar-hp:#d8573c;--bar-mp:#b98a52;--bar-en:#e6c15a;
  --value:var(--green);--place:var(--green);--on-accent:#2a1008;
  --cmb:#f08a4b;--glo:#d9a066;--glo2:#f0c58f;--ok:#e2b24c;--bad:#e0503a;--warn:#e2b24c;
  --scroll:#4d2b1e;--scroll-hover:#6d3e2b;--sh:20,5,0;--hi:255,220,180;
}
/* Royal: purple, gold and white */
:root[data-theme="royal"]{
  --white:#f8f5ff;--green:#e9c45e;--green2:#f6dc8f;--dim:#baaed8;--g:233,196,94;
  --line:rgba(233,196,94,.30);--line2:rgba(255,255,255,.11);--danger:#f3c969;
  --body-bg:#140826;--bg-top:#36185f;--bg-mid:#22103f;--bg-bot:#0e0520;--bg-glow:rgba(150,90,235,.28);
  --wave-a:#2b1552;--wave-b:#1a0c33;
  --panel-top:rgba(46,23,84,.9);--panel-bot:rgba(29,14,54,.92);--field-bg:#170b2b;
  --track:#62224f;--bar-hp:#a98aff;--bar-mp:#6fa0ff;--bar-en:#e9c45e;
  --value:var(--green);--place:var(--green);--on-accent:#1b0b33;
  --cmb:#f3c969;--glo:#b79cff;--glo2:#dccfff;--ok:#e9c45e;--bad:#e0607e;--warn:#e9c45e;
  --scroll:#3b2468;--scroll-hover:#51347f;--sh:10,0,25;--hi:255,255,255;
}
/* Tide (water): deep sea blue and aqua */
:root[data-theme="water"]{
  --white:#e6f6fb;--green:#5fd4e8;--green2:#9be8f4;--dim:#8fb7c6;--g:95,212,232;
  --line:rgba(95,212,232,.30);--line2:rgba(190,235,248,.10);--danger:#ff9a8a;
  --body-bg:#06202e;--bg-top:#0b3a52;--bg-mid:#082b3f;--bg-bot:#041621;--bg-glow:rgba(40,160,210,.26);
  --wave-a:#0a3249;--wave-b:#062235;
  --panel-top:rgba(12,52,74,.9);--panel-bot:rgba(8,38,56,.92);--field-bg:#071d2b;
  --track:#1a4a62;--bar-hp:#3ec7a0;--bar-mp:#5aa9f2;--bar-en:#e2c46a;
  --value:var(--green);--place:var(--green);--on-accent:#04202d;
  --cmb:#f0a77a;--glo:#7fc4ea;--glo2:#b5e3f7;--ok:#3ec7a0;--bad:#e8776a;--warn:#e2c46a;
  --scroll:#17485f;--scroll-hover:#216079;--sh:0,15,25;--hi:220,245,255;
}
/* Grove (earth): bark brown and moss green */
:root[data-theme="earth"]{
  --white:#efe7d6;--green:#8fbf6a;--green2:#b4d98f;--dim:#a79880;--g:143,191,106;
  --line:rgba(143,191,106,.30);--line2:rgba(240,225,195,.09);--danger:#d98a62;
  --body-bg:#1a120a;--bg-top:#3a2a1a;--bg-mid:#271b10;--bg-bot:#140d07;--bg-glow:rgba(120,150,60,.20);
  --wave-a:#33261a;--wave-b:#22170d;
  --panel-top:rgba(56,40,26,.9);--panel-bot:rgba(38,27,17,.92);--field-bg:#1d140c;
  --track:#4a3622;--bar-hp:#8fbf6a;--bar-mp:#6aa8a0;--bar-en:#d6b25e;
  --value:var(--green);--place:var(--green);--on-accent:#18240e;
  --cmb:#d98a62;--glo:#9fb98a;--glo2:#c9dcb2;--ok:#8fbf6a;--bad:#c9654f;--warn:#d6b25e;
  --scroll:#4a3825;--scroll-hover:#675038;--sh:15,8,0;--hi:255,240,210;
}
*,*::before,*::after{box-sizing:inherit}
/* Everything is shown 10% bigger (same as browser zoom 110%). To change the size, change --zoom here. */
:root{--zoom:1.1}
html{zoom:var(--zoom)}
html,body,#root{margin:0;min-height:100%;height:100%}
body{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.6;color:var(--white);background:var(--body-bg);overflow-x:hidden}
button,select,input,textarea{font:inherit}button{cursor:var(--cur-a,pointer)}
[hidden]{display:none!important}
/* Dark, thin scroll bars everywhere */
*{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover)}

.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 50% 0%,var(--bg-glow),transparent 42%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 48%,var(--bg-bot) 100%);overflow:hidden}
.bg svg{position:absolute;left:0;bottom:0;width:200%;height:55%}
.bg .w1{animation:drift 38s linear infinite}.bg .w2{opacity:.7;animation:drift 56s linear infinite reverse}
.bg .w1 path{fill:var(--wave-b)}.bg .w2 path{fill:var(--wave-a)}
@keyframes drift{to{transform:translateX(-50%)}}

.view{display:none;min-height:100%;width:100%}.view.on{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px}
#game.on{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
h1{font-size:26px;font-weight:500;letter-spacing:.12em;margin:0 0 4px;color:var(--white)}h2{letter-spacing:.06em}.sub{color:var(--green);margin:0 0 28px}
.begin{background:transparent;color:var(--green);border:1px solid var(--green);border-radius:99px;padding:9px 22px;font-size:12px;letter-spacing:.1em;transition:background .15s,border-color .15s,color .15s,transform .15s}
.begin:active:not(:disabled){transform:translateY(1px)}.begin:disabled{opacity:.45;cursor:var(--cur-n,not-allowed)}
a.begin{display:inline-block;text-decoration:none;text-align:center}
.panel{background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:0 10px 35px rgba(var(--sh),.22),inset 0 1px rgba(var(--hi),.025)}
.panel h2{margin:0 0 10px;font-size:12px;color:var(--green);font-weight:500}

.auth-panel{width:min(390px,92vw);padding:26px}.auth-title{text-align:center;margin-bottom:20px}.auth-title h2{font-size:16px;margin-bottom:4px}.auth-title p{color:var(--dim);margin:0}
.field{display:flex;flex-direction:column;gap:6px;margin:12px 0}.field label,.cc-field>span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.field input,.field textarea{width:100%;background:rgba(var(--sh),.28);color:var(--white);border:1px solid var(--line2);border-radius:7px;padding:11px 12px;outline:none;cursor:text}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--g),.08)}
.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.auth-actions .begin{width:100%}
.health-line{margin-top:14px;text-align:center;color:var(--dim);font-size:10px}.health-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--dim)}.health-dot.ok{background:var(--ok)}.health-dot.bad{background:var(--bad)}.health-dot.checking{background:var(--warn)}
#err,#cc-err{min-height:20px;text-align:center;color:var(--danger);margin:12px 0 0}

.create-panel{width:min(620px,94vw);padding:24px}.create-head{text-align:center;margin-bottom:18px}.create-head h2{margin-bottom:3px;font-size:16px}.points{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);border-radius:99px;color:var(--dim)}.points b{color:var(--green)}
#cc-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}.cc-field{display:flex;flex-direction:column;gap:6px}.cc-field.full{grid-column:1/-1}.cc-field select,.cc-field input{width:100%;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:7px;padding:10px;outline:none}.cc-field select:focus,.cc-field input:focus{border-color:var(--green)}
.stat-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:6px;border-top:1px solid var(--line2)}.cc-row{display:grid;grid-template-columns:1fr 32px 32px 32px;align-items:center;gap:5px;padding:8px 9px;border:1px solid var(--line2);border-radius:7px;background:rgba(var(--sh),.16)}.cc-row span:not(.stat-label){text-align:center;color:var(--green);font-weight:500}.stat-label{color:var(--white)}.cc-row button{width:30px;height:28px;border:1px solid var(--line);background:transparent;color:var(--green);border-radius:6px}.cc-row button:disabled{opacity:.3;cursor:var(--cur-n,not-allowed)}.create-submit{text-align:center;margin-top:18px}.create-submit .begin{min-width:180px}.text-button{background:none;border:0;color:var(--dim);font-size:10px;margin-left:14px;cursor:var(--cur-a,pointer)}

/* ===== Game screen: a fixed-height window, so text can never stretch it ===== */
.window{width:min(1080px,100%);margin:0;display:grid;grid-template-columns:175px minmax(0,1fr) 190px;grid-template-rows:minmax(0,1fr);gap:12px;align-items:stretch;height:clamp(660px,calc(100vh / var(--zoom) - 100px),var(--wh,760px))}
.side{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}.side>:last-child{flex:1;min-height:0}.side>.support{flex:0 0 auto}.side>.stats{flex:1 1 auto;min-height:0}.side>#lb-wrap{flex:1;min-height:120px}.side>.pet-chip{flex:none}
.locs{flex:0 1 auto;max-height:max(220px,calc(100vh - 480px));overflow-y:auto;scrollbar-width:thin}.locs-head{display:flex;justify-content:flex-start;align-items:center;gap:8px;margin-bottom:10px}.locs-head h2{margin:0}
.locs button.loc-head{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;text-align:left;color:var(--green);font-weight:500;letter-spacing:.06em;padding:5px 8px 3px;cursor:var(--cur-a,pointer)}.loc-head .ico{transition:transform .15s}.loc-head.closed .ico{transform:rotate(-90deg)}.loc-list[hidden]{display:none}
.loc-list{margin:0 0 6px 10px;border-left:1px solid var(--line)}
.locs button.loc-btn{display:block;width:100%;text-align:left;background:none;border:0;color:var(--white);padding:5px 8px 5px 12px;border-radius:5px}
.locs button.loc-btn.here{color:var(--green);background:rgba(var(--g),.10)}
#lb-wrap{display:flex;flex-direction:column}#lb{margin-top:4px;flex:1;min-height:0;overflow-y:auto}
#lb p,#friend-list p{margin:0;display:flex;justify-content:space-between;gap:6px;color:var(--dim);padding:3px 0;border-bottom:1px solid rgba(var(--hi),.035)}#lb p>span:first-child,#friend-list p>span:first-child{color:var(--white)}
.day{color:var(--green);font-size:10px;margin-left:6px}
.mini-button{background:none;border:0;color:var(--green);padding:2px 4px;font-size:10px}

.center{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.place-panel{flex:0 0 auto;min-height:88px}.place-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.place-title h2{font-size:13px;margin:0;color:var(--place)}.connection-text{font-size:10px;color:var(--dim)}
.place-desc{color:var(--dim);margin:10px 0 0}
.quests{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:12px}
.acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.acts:empty{display:none}
.acts button,.quests button{background:transparent;border:1px solid var(--green);color:var(--green);border-radius:99px;padding:6px 12px}
.acts button:disabled,.quests button:disabled{opacity:.45;cursor:var(--cur-n,not-allowed)}
.action-error{color:var(--danger);margin:10px 0 0}

.chat-panel{flex:1;min-height:0;display:flex;flex-direction:column}
.tabs{display:flex;gap:5px;margin-bottom:9px}.tabs button{flex:1;background:none;border:1px solid var(--line2);color:var(--dim);border-radius:6px;padding:6px}.tabs button.on{border-color:var(--green);color:var(--green);background:rgba(var(--g),.05)}
.pane{flex:1;min-height:0;overflow-y:auto;margin-bottom:9px;padding-right:4px}.pane p{margin:0 0 4px;word-break:break-word}
.sys{color:var(--dim)}.loc{color:var(--green)}.cmb{color:var(--cmb)}.glo{color:var(--glo)}.glo strong{color:var(--glo2)}.glo .when{color:var(--dim)}
.say{display:flex;gap:7px;margin-top:auto}.say input{flex:1;min-width:0;background:rgba(var(--sh),.3);border:1px solid var(--line2);color:var(--white);padding:9px 12px;border-radius:8px;outline:none;cursor:text}.say input:focus{border-color:var(--green)}.say input:disabled{opacity:.5}
/* New text glows, then settles. A tab with unread text pulses until you open it. */
@keyframes glow{0%{text-shadow:0 0 6px currentColor,0 0 16px currentColor}100%{text-shadow:0 0 0 transparent}}
.pane p.fresh{animation:glow 2.4s ease-out}
@keyframes tabglow{0%,100%{box-shadow:0 0 0 rgba(var(--g),0);border-color:var(--line2)}50%{box-shadow:0 0 10px rgba(var(--g),.55);border-color:var(--green)}}
.tabs button.glow{color:var(--green);animation:tabglow 1.6s ease-in-out infinite}

.stats{flex:0 0 auto;display:flex;flex-direction:column}.stats div{display:flex;justify-content:space-between;gap:8px}.stats hr{border:0;border-top:1px solid var(--line2);margin:6px 0}.stats{line-height:1.45;padding:12px 14px}.green-value{color:var(--value)}.green-value.accent{color:var(--green)}.stats-footer{text-align:right;margin-top:2px}
.bar{height:8px;background:var(--track);border-radius:99px;overflow:hidden;margin:3px 0 6px}.bar i{display:block;height:100%;background:var(--green);transition:width .3s}
.bar i.hp{background:var(--bar-hp)}.bar i.mp{background:var(--bar-mp)}.bar i.en{background:var(--bar-en)}

.inv{flex:0 0 auto;padding:10px 14px}.inv h2{margin-bottom:8px}
.inv-eq{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.slot{aspect-ratio:1;min-width:0;border:1px dashed var(--line2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--dim);overflow:hidden}
.slot.full{border-style:solid;border-color:var(--line);color:var(--green)}

.support{display:flex;flex-direction:column;padding:12px 14px 14px}.support-copy{color:var(--dim);font-size:10px;margin:-3px 0 8px}.support-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.support-row b{color:var(--green);font-weight:500}
.support-bar{height:8px;background:var(--track);border-radius:99px;overflow:hidden;margin:5px 0 4px}.support-bar i{display:block;height:100%;background:var(--green);transition:width .4s}.support-note{font-size:9px;color:var(--dim)}
.support-btns{display:grid;grid-template-columns:1fr;gap:6px;margin-top:auto;padding-top:8px}.support-btns .begin{display:block;box-sizing:border-box;padding:6px 0;letter-spacing:0;width:100%;text-align:center;text-decoration:none}
.sysline{color:var(--dim)}

/* ===== Forum ===== */
.forum{width:min(900px,100%);display:flex;flex-direction:column;gap:12px}
.f-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.f-head h1{font-size:18px;margin:0}
.f-nav{display:flex;align-items:center;gap:10px;color:var(--dim)}.f-nav a,.crumbs a,.f-link{color:var(--green);text-decoration:none;background:none;border:0;padding:0;cursor:var(--cur-a,pointer)}.f-nav a:hover,.crumbs a:hover,.f-link:hover{color:var(--green2)}
.crumbs{color:var(--dim)}
.f-row{display:grid;grid-template-columns:minmax(0,1fr) 70px 200px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line2)}.f-row:last-child{border-bottom:0}
.f-row.cols{color:var(--dim);font-size:10px;padding-top:0}
.f-title{color:var(--green);font-weight:500;text-decoration:none;word-break:break-word}.f-title:hover{color:var(--green2)}
.f-sub{color:var(--dim);font-size:10px;margin-top:2px}.f-num{text-align:center;color:var(--value)}.f-last{color:var(--dim);font-size:10px;min-width:0;word-break:break-word}
.post{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px}
.post-by{border-right:1px solid var(--line2);padding-right:12px;color:var(--dim);font-size:10px;word-break:break-word}.post-by b{display:block;color:var(--green);font-weight:500;font-size:12px;margin-bottom:2px}
.post-body{white-space:pre-wrap;word-break:break-word;min-width:0}.post-head{display:flex;justify-content:space-between;gap:10px;color:var(--dim);font-size:10px;margin-bottom:8px}
.pager{display:flex;gap:8px;align-items:center;color:var(--dim)}
.f-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.f-empty{color:var(--dim);padding:6px 0}.f-error{color:var(--danger);margin:8px 0 0}

@media(max-width:800px){
  .window{grid-template-columns:1fr;grid-template-rows:auto;height:auto;margin:0}
  .side{display:grid;grid-template-columns:1fr 1fr}.side>:last-child,.side>#lb-wrap{flex:none}.locs{grid-column:1/-1;max-height:none}.inv{grid-column:1/-1}.stats{order:3}
  .chat-panel{flex:none;height:440px}
  .f-row{grid-template-columns:minmax(0,1fr) 54px}.f-row .f-last{grid-column:1/-1}.post{grid-template-columns:1fr}.post-by{border-right:0;border-bottom:1px solid var(--line2);padding:0 0 8px}
}
@media(max-width:520px){#cc-form,.stat-grid{grid-template-columns:1fr}.cc-field.full{grid-column:auto}.side{display:flex}.view.on{padding:16px}#game.on{padding:12px}.auth-panel,.create-panel{padding:20px}}
@media(prefers-reduced-motion:reduce){.bg svg{animation:none}.pane p.fresh{animation:none}.tabs button.glow{animation:none;box-shadow:0 0 10px rgba(var(--g),.55);border-color:var(--green)}}

/* top-right toolbar (every page) */
.toolbar{position:fixed;top:10px;right:10px;z-index:50;display:flex;gap:6px}
.tool{position:relative;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--sh),.25);border:1px solid var(--line);border-radius:5px;color:var(--green);cursor:var(--cur-a,pointer);transition:background .15s,border-color .15s}
.tool:focus-visible{border-color:var(--green);background:rgba(var(--g),.10);outline:none} .tool:hover{outline:none}.tool svg{display:block}
.tool.on svg{fill:currentColor}

/* town square + home button */
.home{width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--green);cursor:var(--cur-a,pointer);transition:background .15s,border-color .15s}
.home:focus-visible,.home.here{border-color:var(--green);background:rgba(var(--g),.10);outline:none} .home:hover{outline:none}.home svg{display:block}
.square{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;margin-top:10px}.square[hidden]{display:none}
.sq-main p{margin:0 0 7px;color:var(--dim)}.sq-main b{font-weight:500;color:var(--value)}.sq-main b.hot{color:var(--green)}
.sq-intro{margin-bottom:12px!important}.sq-hint{margin-top:12px!important;color:var(--green)!important}
.sq-online{border-left:1px solid var(--line2);padding-left:14px;min-width:0}.sq-online h3{margin:0 0 6px;font-size:11px;font-weight:500;color:var(--green)}
.online-list{max-height:132px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}.online-list div{color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.55}.online-list .me{color:var(--green)}.online-list .none{color:var(--dim)}
@media(max-width:900px){.square{grid-template-columns:1fr}.sq-online{border-left:0;padding-left:0;border-top:1px solid var(--line2);padding-top:8px}}

/* names, online dots, tabs */
.namelink{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:var(--cur-a,pointer);text-align:left}.namelink:hover,.namelink:focus-visible{color:var(--green);outline:none;text-decoration:underline;text-underline-offset:3px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);margin-left:6px;vertical-align:middle}
.lb-tabs{display:flex;gap:14px;margin-bottom:6px}.lb-tab{background:none;border:0;padding:0;font-size:12px;letter-spacing:.06em;color:var(--dim);cursor:var(--cur-a,pointer);border-bottom:1px solid transparent}.lb-tab.on{color:var(--green);border-bottom-color:var(--green)}
#social{margin-top:4px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}#social[hidden],#lb[hidden]{display:none}
.add-friend{display:flex;gap:6px;margin-bottom:6px}.add-friend input{flex:1;min-width:0;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:5px 8px;outline:none;font-size:11px}.add-friend input:focus{border-color:var(--green)}
.none{color:var(--dim)}.small{font-size:10px}.action-error.small{margin:0 0 4px}
/* stat tooltips */
.tip{position:relative;cursor:var(--cur-n,help)}
.stat-label.tip{border-bottom:0}
.green-value.boosted{color:var(--green)}
/* quests */
.quests{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:12px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:8px 0 2px;color:var(--green);font-size:11px;letter-spacing:.06em}.sec-head em{font-style:normal;color:var(--dim);font-size:10px;letter-spacing:0}
.sec-head input{width:150px;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:3px 8px;outline:none;font-size:10px}
.quest{display:grid;grid-template-columns:62px minmax(0,1fr) 44px 40px 74px;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.18);transition:border-color .2s,box-shadow .2s}
.quest .q-name{color:var(--white)}.quest .q-count{color:var(--dim);text-align:right}.quest .q-reward{color:var(--green);text-align:right}
.q-bar{height:4px;background:rgba(var(--hi),.08);border-radius:99px;overflow:hidden}.q-bar i{display:block;height:100%;background:var(--green);transition:width .3s}
.quest.ready{border-color:var(--green);box-shadow:0 0 12px rgba(var(--g),.16)}.quest.claimed{opacity:.5}.quest.claimed .q-bar i{background:var(--dim)}
.q-btn,.quests .q-btn{background:transparent;border:1px solid var(--green);color:var(--green);border-radius:99px;padding:3px 10px;font-size:10px;cursor:var(--cur-a,pointer);white-space:nowrap}
.q-btn:disabled{opacity:.4;cursor:var(--cur-n,not-allowed);border-color:var(--line)}
.quests button.q-btn{padding:3px 10px}
/* combat */
.foe{margin-top:10px;display:flex;flex-direction:column;gap:4px;color:var(--cmb)}.foe[hidden]{display:none}.foe .bar{margin:0}
.loot{color:var(--green2);text-shadow:0 0 8px rgba(var(--g),.35)}
/* market + bank */
.market,.bank{margin-top:8px}.market[hidden],.bank[hidden]{display:none}
.mk-list{max-height:150px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.14);padding:2px 8px}
.mk-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 78px 62px;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(var(--hi),.035)}.mk-row:last-child{border:0}
.mk-item{color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-seller{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-price{color:var(--green);text-align:right}
.mk-list .none,.bank .none{padding:6px 0;display:block}
.mk-sell{display:flex;gap:7px;margin-top:8px}.mk-sell select,.mk-sell input,.bk-money input{background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:5px 8px;outline:none;font-size:11px;min-width:0}.mk-sell select{flex:1.4}.mk-sell input{flex:1}.mk-sell select:focus,.mk-sell input:focus,.bk-money input:focus{border-color:var(--green)}
.bk-money{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}.bk-gold{color:var(--green);margin-right:auto}.bk-money input{width:120px}
.bk-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}.bk-cols .sec-head{margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:5px;max-height:84px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.chip{background:transparent;border:1px solid var(--line);color:var(--white);border-radius:6px;padding:2px 8px;font-size:10px;cursor:var(--cur-a,pointer)}.chip:disabled{opacity:.5;cursor:var(--cur-n,not-allowed)}
.place-desc.small{margin-top:8px}
/* inventory interaction */
.slot.click{cursor:var(--cur-a,pointer)}.slot.broken{color:var(--bad);border-color:var(--bad)}
/* player profile */
.modal{position:fixed;inset:0;z-index:100;background:rgba(var(--sh),.55);display:flex;align-items:center;justify-content:center;padding:16px}
.pf{position:relative;width:min(330px,100%);max-height:calc(100vh / var(--zoom) - 32px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.pf-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--dim);font-size:18px;line-height:1;cursor:var(--cur-a,pointer)}
.pf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-right:22px}.pf-head h2{margin:0;font-size:13px;color:var(--place)}
.pf-tier{font-size:10px;color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:1px 8px}.pf-tier.on{color:var(--green);border-color:var(--green)}
.pf-sub{color:var(--dim);margin:4px 0 10px;font-size:11px}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px}.pf-stat{display:flex;justify-content:space-between}.pf-stat b{font-weight:500;color:var(--value)}.pf-stat em{font-style:normal;color:var(--green)}
.pf-label{margin:12px 0 5px;color:var(--green);font-size:11px;letter-spacing:.06em}
.pf-items{display:flex;flex-wrap:wrap;gap:5px}.pf-items span{border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:10px;color:var(--white)}
.pf-note{color:var(--dim);margin:0}.pf-actions{margin-top:14px;text-align:right}.pf-actions .mini-button{border:1px solid var(--green);border-radius:99px;padding:3px 12px}
@media(max-width:900px){.quest{grid-template-columns:56px minmax(0,1fr) 40px 36px 70px;gap:7px}.bk-cols{grid-template-columns:1fr}}

.tier-tip{display:none;position:absolute;top:28px;right:0;z-index:60;width:230px;text-align:left;white-space:normal;font-size:10px;line-height:1.5;color:var(--white);background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;box-shadow:0 10px 28px rgba(var(--sh),.45);cursor:var(--cur-n,default)}
.tier-tip b{display:block;color:var(--green);font-weight:500;margin-bottom:4px}.tier-tip p{margin:0 0 5px;color:var(--dim)}.tier-tip p:last-child{margin:0}
.tool:hover .tier-tip{display:block}

.pf .inv-eq{grid-template-columns:repeat(5,44px)}
.support-btns{grid-template-columns:1fr}
.support-btns{padding-top:6px}.support-note{margin-top:2px}

/* private messages */
.tabs button[hidden]{display:none}.prv{color:var(--green2)}.prv strong{color:var(--green);font-weight:500}.prv .when{color:var(--dim)}
.mail{display:inline-flex;vertical-align:middle;margin-left:4px;padding:1px 3px;color:var(--dim)}.mail:hover{color:var(--green)}.pending{color:var(--dim);margin-left:6px;cursor:var(--cur-n,help)}
.pf-actions{display:flex;justify-content:flex-end;gap:8px}.pf-actions .mini-button{border:1px solid var(--green);border-radius:99px;padding:3px 12px}

/* icons and skills */
.ico{display:inline-flex;vertical-align:middle;flex:none}.ico svg{display:block}
.slot .ico{opacity:.85}.slot:not(.full) .ico{opacity:.28}
.mk-item,.chip,.pf-items span{display:inline-flex;align-items:center;gap:5px;min-width:0}.mk-item{display:flex}
.panel .sv-stack{display:grid}.sv-stack>.sv{display:block;grid-area:1/1}.sv.off{visibility:hidden}
.stats .stats-head{align-items:center}.stats-head h2{margin:0 0 10px}.stats-head .tool{margin-top:-4px}
.stats .sk-row{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:1px 8px;padding:3px 0;border-bottom:1px solid rgba(var(--hi),.035);color:var(--green)}
.sk-row:last-child{border:0}.sk-name{color:var(--white);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sk-lv{color:var(--value)}
.sk-bar{grid-column:2/4;height:3px;border-radius:2px;background:rgba(var(--hi),.08);overflow:hidden}.sk-bar i{display:block;height:100%;background:var(--green)}
.sk-row.locked{opacity:.4}.sk-row.locked .sk-lv{color:var(--dim)}
.acts .gather{display:inline-flex;align-items:center;gap:6px}

.inv .stats-head{display:flex;justify-content:space-between;align-items:center}.inv .stats-head h2{margin:0 0 8px}.inv .stats-head .tool{margin-top:-4px}

/* hover tips (same look as the tier tip) */
.tt{position:fixed;z-index:300;max-width:230px;width:max-content;text-align:left;white-space:normal;font-size:10px;line-height:1.5;color:var(--white);background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;box-shadow:0 10px 28px rgba(var(--sh),.45);pointer-events:none}
.tt[hidden]{display:none}.tt b{display:block;color:var(--green);font-weight:500}.tt b:not(:last-child){margin-bottom:4px}.tt p{margin:0 0 5px;color:var(--dim)}.tt p.plain{color:var(--white)}.tt p:last-child{margin:0}

.note-box{background:var(--field-bg);width:min(320px,100%);text-align:center;padding:20px 22px}.note-box p{margin:0 0 16px;color:var(--white)}.note-ok .begin{padding:6px 26px}

/* ===== April-batch additions: announcement box, quests page, shops, footer, friend requests, drop-down ===== */
.game-foot{width:min(1080px,100%);margin-top:8px;text-align:right;font-size:10px;line-height:1.5;color:var(--dim)}.game-foot p{margin:0}
.game-foot .connection-text{display:block}.game-foot .connection-text::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--dim)}
.game-foot .connection-text[data-state=connected]::before{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.ann{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;flex:0 0 auto}.ann>.ico{color:var(--green);margin-top:3px}
.ann>.tool{flex:none;margin-top:0}.ann-text{flex:1;min-width:0;min-height:38px}.ann-text p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ann-text .latest{color:var(--green)}.ann-text .older{color:var(--dim)}.ann-text .pinned{color:var(--cmb)}.ann-text p.fresh{animation:glow 2.4s ease-out}
.tool.ready::after{content:"";position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
/* shops: a dark vertical list */
.shop{margin-top:10px;background:rgba(var(--sh),.38);border:1px solid var(--line2);border-radius:8px;padding:2px 12px 6px;max-height:300px;overflow-y:auto}.shop[hidden]{display:none}
.shop-head{margin:10px 0 2px;color:var(--green);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.shop-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto 64px;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(var(--hi),.04)}.shop-row:last-child{border-bottom:0}
.shop-row .ico{color:var(--green);justify-self:center}.shop-name{display:flex;flex-direction:column;min-width:0}.shop-name span{color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-name em{font-style:normal;color:var(--dim);font-size:10px}.shop-price{color:var(--green);text-align:right;min-width:48px}.shop-owned{color:var(--dim);font-size:10px;text-align:center}
.shop .q-btn{width:100%}
/* leaderboard names cut off with ... instead of breaking the row */
.who{display:flex;align-items:center;flex:1 1 auto;min-width:0}.who .rk{flex:none;margin-right:5px}.who .namelink{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .dot,.who .mail,.who .pending{flex:none}.lv{flex:none;white-space:nowrap}
/* friend requests */
.requests .sec-head{margin:4px 0 2px}.requests p.req{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:4px 0 6px;border-bottom:1px solid rgba(var(--hi),.035);color:var(--white)}
.req-btns{display:flex;gap:6px}.req .q-btn{padding:1px 7px;font-size:9px}.requests+#friend-list{margin-top:4px}
.action-error.small.ok{color:var(--green)}
@keyframes tabtext{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 8px currentColor}}.lb-tab.glow{color:var(--green);animation:tabtext 1.6s ease-in-out infinite}
.pf-online{color:var(--ok);font-size:10px;font-weight:400;letter-spacing:0;margin-left:6px}
/* the Market drop-down, in the game's own style */
.pick{position:relative;flex:1.4;min-width:0}
.pick-btn{width:100%;display:flex;align-items:center;gap:7px;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:5px 8px;font-size:11px;text-align:left;outline:none}
.pick-btn:hover,.pick-btn:focus-visible{border-color:var(--green)}.pick-btn>span:not(.ico){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pick-btn .pick-empty{color:var(--dim)}
.pick-caret{width:6px;height:6px;border-right:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(45deg);margin:-3px 2px 0 0;flex:none}
.pick-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);max-height:190px;overflow-y:auto;background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:4px;box-shadow:0 10px 28px rgba(var(--sh),.45)}
.pick-opt{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;border-radius:5px;color:var(--white);padding:5px 7px;font-size:11px;text-align:left}
.pick-opt:hover,.pick-opt.on{background:rgba(var(--g),.10);color:var(--green)}.pick-opt>span:not(.ico){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pick .ico{color:var(--green)}
::placeholder{color:var(--dim);opacity:.75}
.auth-panel input::placeholder{opacity:.5}
input[type=number]{-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* subscribe page */
.sub{gap:14px}.sub-cols{display:grid;grid-template-columns:1fr 1.3fr;gap:14px;align-items:stretch}
.sub-card{display:flex;flex-direction:column;gap:12px;padding:20px}.sub-card h2{font-size:14px;margin:0}.sub-main{border-color:var(--green);box-shadow:0 0 22px rgba(var(--g),.12)}
.sub-price{margin:0;font-size:26px;color:var(--white);letter-spacing:.04em}.sub-price em{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:0}
.sub-line{margin:0;color:var(--dim);flex:1}.sub-perks{display:flex;flex-direction:column;gap:12px;flex:1}
.sub-perk{display:flex;gap:12px;align-items:flex-start}.sub-perk .ico{color:var(--green);margin-top:2px}.sub-perk b{display:block;font-weight:500;color:var(--white)}.sub-perk span{color:var(--dim);font-size:11px}
.sub-card .begin{width:100%;padding:9px 0}.sub-card .begin:disabled{opacity:.5;cursor:var(--cur-n,default)}.sub-fine{margin:0;text-align:center;font-size:10px;color:var(--dim)}
@media(max-width:700px){.sub-cols{grid-template-columns:1fr}}

.lb-tab{position:relative;white-space:nowrap}.lb-tab .badge{position:absolute;top:-5px;right:-9px;min-width:12px;height:12px;padding:0 3px;border-radius:99px;background:var(--green);color:var(--on-accent);font-size:8px;line-height:12px;text-align:center;letter-spacing:0}
.sec-head input{width:170px}
.sub-free{display:flex;flex-direction:column;gap:8px;flex:1;color:var(--dim)}.sub-free span{display:flex;gap:8px;align-items:center}.sub-free .ico{color:var(--dim)}

.inv-title{display:flex;align-items:center;gap:8px;margin-bottom:8px}.inv-title h2{margin:0!important}.pk-count{color:var(--dim);font-size:10px}
.pk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
/* the Equipment panel is exactly as tall as the worn slots; the pack scrolls inside that space */
.inv .sv-stack>.sv:nth-child(2){contain:size;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.inv .sv-stack>.sv:nth-child(2)::-webkit-scrollbar{display:none;width:0;height:0}
.stats .sv-stack{flex:1 1 auto}.stats .sv:first-child{display:flex;flex-direction:column;justify-content:flex-start;gap:0}.stats .srow{flex:1 1 auto;align-items:center}
.pk-grid .slot{border-radius:4px}
.place-panel.qmode>:not(.place-title):not(.qbook){display:none!important}.qbook{display:none}.place-panel.qmode>.qbook{display:block}
.tool.on{border-color:var(--green);background:rgba(var(--g),.14)}
.story{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.18)}.story.claimed{opacity:.6}
.story-top{display:flex;justify-content:space-between;gap:10px}.story .q-name{color:var(--white)}.story .q-count{color:var(--green)}.story p{margin:0;color:var(--dim)}
.qbook .pf-note{margin-top:10px}
.sp{position:relative;width:min(300px,100%);padding:16px 18px}.sp h2{margin:0 0 4px}
.shard-list{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.shard-opt{display:flex;justify-content:space-between;align-items:center;background:rgba(var(--sh),.18);border:1px solid var(--line2);color:var(--white);border-radius:8px;padding:6px 10px;cursor:var(--cur-a,pointer);transition:border-color .15s,background .15s}.shard-opt b{color:var(--green);font-weight:500}

.chat-panel{position:relative}
.cmds{position:absolute;right:12px;bottom:58px;z-index:20;width:250px;padding:10px 12px;background:rgba(6,16,30,.97)}.cmds .sec-head{margin-top:0}
.cmds p{margin:4px 0 0}.cmds b{color:var(--green);font-weight:500}.cmd-group{color:var(--white);margin-top:6px}.cmds .cmd-note{color:var(--dim);font-size:10px}
.say .tool{align-self:center;flex:none}
.reps{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.rep{display:grid;grid-template-columns:70px 80px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.18)}
.rep .q-name{color:var(--white)}.rep-tier{color:var(--green)}.rep-tier.bad{color:var(--bad)}.rep .q-count{text-align:right}
.rep-bar{position:relative;height:4px;background:rgba(var(--hi),.08);border-radius:99px;overflow:hidden}.rep-bar::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--dim)}
.rep-bar i{position:absolute;top:0;bottom:0;transition:width .3s}.rep-bar i.pos{background:var(--green)}.rep-bar i.neg{background:var(--bad)}
.qbook .quests{gap:4px;margin-top:4px}.qbook .quest,.qbook .rep{padding:4px 10px}.qbook .story{padding:6px 10px;gap:4px}.qbook .reps{gap:4px}
.ann-text p.offline{color:var(--bad)}.connection-text[data-state=offline]{color:var(--bad)}
.slot{position:relative}.slot .cnt{position:absolute;right:1px;bottom:0;font-style:normal;font-size:8px;line-height:1;color:var(--white);text-shadow:0 0 3px #000}
.mk-row{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) 84px 124px}.mk-buy{display:flex;gap:6px;align-items:center;justify-content:flex-end}.mk-buy .q-btn,.mk-act{flex:none}
.mk-qty{width:44px;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:3px 4px;outline:none;font-size:10px;text-align:center}.mk-qty:focus{border-color:var(--green)}
.mk-sell .mk-qtyin{flex:0 0 56px;width:56px}
.shop-btns{display:flex;gap:6px}.shop .shop-btns .q-btn{width:auto;min-width:50px}.shop .none{padding:8px 0;display:block}
.shop-row:has(.shop-btns){grid-template-columns:24px minmax(0,1fr) auto 124px}
.bk-itemqty{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--green);font-size:11px}.bk-itemqty em{font-style:normal;color:var(--dim);font-size:10px}
.bk-qty{width:56px;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:4px 6px;outline:none;font-size:11px;text-align:center}.bk-qty:focus{border-color:var(--green)}
.shop-btns .mk-qty{flex:none}.shop .shop-btns .q-btn{min-width:42px}
.shop-row:has(.shop-btns){grid-template-columns:24px minmax(0,1fr) 56px 150px}

/* Button menus fade between states (fights, spell choice) */
.acts{transition:opacity .25s}.acts.out{opacity:0;pointer-events:none}.acts.in button,.acts.in .none{animation:fadein .5s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* Cutscenes: the game fades away to the plain backdrop and the story reads out letter by letter */
#root{transition:opacity .6s ease}#root.scene-out{opacity:0}
.scene{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:32px;cursor:var(--cur-n,default);user-select:none}
.scene p{max-width:560px;margin:0;text-align:center;font-size:15px;line-height:2;letter-spacing:.05em;color:var(--white)}
.scene .w{display:inline-block;white-space:nowrap}.scene .w i{font-style:normal;opacity:0;transition:opacity .35s ease}
.scene p.in .w i{opacity:1}.scene p.out{opacity:0;transition:opacity .36s ease}
.scene{transition:opacity .6s ease}.scene.gone{opacity:0}
.scene.work{flex-direction:column;gap:14px;animation:fadein .5s .65s backwards;color:var(--green)}.scene.work .ico svg{width:56px;height:56px}
.scene .dots{display:flex;gap:10px;margin:6px 0 0}.scene .dots i{width:6px;height:6px;border-radius:50%;background:var(--green);opacity:.15;animation:blink 1.4s infinite}
.scene .dots i:nth-child(2){animation-delay:.25s}.scene .dots i:nth-child(3){animation-delay:.5s}
@keyframes blink{0%,100%{opacity:.15}40%{opacity:1}}

/* Combat screen */
.scene.combat{animation:fadein .5s .65s backwards;padding:24px}
.cb{width:min(440px,92vw);display:flex;flex-direction:column;gap:18px;align-items:stretch}
.cb-name{text-align:center;font-size:16px;letter-spacing:.08em;color:var(--white);margin-bottom:6px}.cb-name span{color:var(--dim);font-size:11px}
.cb-track{height:7px;border-radius:99px;background:var(--track);overflow:hidden}.cb-track i{display:block;height:100%;border-radius:99px;transition:width .5s}
.cb-track i.foe{background:var(--bad)}.cb-track i.hp{background:var(--bar-hp)}.cb-track i.mp{background:var(--bar-mp)}.cb-track i.en{background:var(--bar-en)}
.cb-foe .cb-stat>span:empty{display:none}
.cb-log{min-height:132px;max-height:132px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;text-align:center}
.cb-log p{margin:0;color:var(--dim);font-size:11px}.cb-log p.cmb{color:var(--cmb)}.cb-log p.loc{color:var(--green)}.cb-log p.loot{color:var(--glo2)}.cb-log p.last{filter:brightness(1.35)}
.cb-me{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cb-stat{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--dim);letter-spacing:.06em}
.cb-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:34px}
.cb-acts.in>*{animation:fadein .5s both}
.cb-acts button{background:transparent;border:1px solid var(--green);color:var(--green);border-radius:99px;padding:6px 14px}
.cb-acts button:disabled{opacity:.45;cursor:var(--cur-n,not-allowed)}
.cb-acts .gather{display:inline-flex;align-items:center;gap:6px}
.cb-result{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cb-result>*{animation:fadein .9s both}.cb-result>:nth-child(2){animation-delay:.5s}.cb-result>:nth-child(3){animation-delay:1s}.cb-result>:nth-child(4){animation-delay:1.5s}.cb-result>:nth-child(5){animation-delay:2s}
.cb-result h1{font-size:46px;letter-spacing:.3em;margin:0 0 0 .3em;font-weight:500}.cb-result.win h1{color:var(--green)}.cb-result.lose h1{color:var(--bad)}
.cb-sub{margin:0;color:var(--white);max-width:420px}.cb-dim{color:var(--dim);margin:0;max-width:420px}.cb-up{margin:0;color:var(--green2);letter-spacing:.1em}
.cb-loot{display:flex;flex-direction:column;gap:4px;align-items:center;color:var(--green)}.cb-item{display:inline-flex;gap:7px;align-items:center;color:var(--glo2)}
@media(max-width:600px){.cb-result h1{font-size:30px}}
.cb-foe .cb-stat{align-items:center;gap:6px}.cb-foe .cb-track{width:100%}

/* Guild Hall */
.guild{margin-top:8px}.guild[hidden]{display:none}
.gd-form{display:flex;gap:7px;margin:8px 0}.gd-form input{flex:1;min-width:0;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:5px 8px;outline:none;font-size:11px}.gd-form input:focus{border-color:var(--green)}
.gd-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}.gd-head b{color:var(--green);font-weight:500;letter-spacing:.06em;font-size:14px}
.gd-dim{color:var(--dim);font-size:10px}
.gd-tabs{display:flex;gap:14px;margin-bottom:8px;border-bottom:1px solid var(--line2)}.gd-tabs button{background:none;border:0;border-bottom:1px solid transparent;padding:2px 0 5px;color:var(--dim);font-size:11px;letter-spacing:.06em;cursor:var(--cur-a,pointer);margin-bottom:-1px}.gd-tabs button.on{color:var(--green);border-bottom-color:var(--green)}
.gd-body{max-height:230px;overflow-y:auto;padding-right:4px}.gd-body>.q-btn{margin-top:10px}
.gd-row{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--line2)}.gd-name{flex:1;min-width:0;color:var(--white)}.gd-name em{font-style:normal;color:var(--green);font-size:10px}.gd-btns{display:flex;gap:6px}
.gd-quest{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:6px 0;border-bottom:1px solid var(--line2)}.gd-quest .bar{grid-column:1/-1}.gd-quest.done>span:first-child{color:var(--green)}
.lb-tabs{align-items:center}.lb-swap{margin-left:auto;padding:2px 4px;line-height:0;color:var(--dim)}.lb-swap.on,.lb-swap:hover{color:var(--green)}
.lb-tabs{gap:10px}.lb-tab{font-size:11px;letter-spacing:.03em}.lb-swap{flex:none}
#lb .who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* "New location" card */
.scene p.rv{display:flex;flex-direction:column;gap:12px;align-items:center;opacity:0;transition:opacity .85s ease}.scene p.rv.show{opacity:1}
.rv-name{font-size:26px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}.rv-sub{font-size:12px;letter-spacing:.06em;color:var(--dim)}

/* Color palette picker */
.pal-menu{position:absolute;top:28px;right:0;z-index:70;width:220px;padding:6px;background:var(--field-bg);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(var(--sh),.4);display:flex;flex-direction:column;gap:2px}
.pal-menu[hidden]{display:none}
.pal-opt{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:5px 8px;color:var(--white);font-size:11px;cursor:var(--cur-a,pointer)}
.pal-opt.on{border-color:var(--green)}
.pal-dots{grid-row:1/3;display:flex}.pal-dots i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(var(--hi),.25);margin-right:-4px}
.pal-name{letter-spacing:.04em}.pal-opt em{grid-column:2;font-style:normal;color:var(--dim);font-size:9px}

/* Encounter and fight polish */
.scene.combat.quick{animation:fadein .8s backwards}
.stage-pic{position:relative;display:flex;justify-content:center}
.stage-bang{position:absolute;left:100%;top:-14px;margin-left:6px;font-size:40px;line-height:1;font-weight:500;color:var(--bad);animation:bang .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes bang{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.cb-log{justify-content:flex-end;min-height:150px;max-height:150px}
.cb-lines{display:flex;flex-direction:column;gap:3px;align-items:center}.cb-lines.snap{animation:snapup .28s ease-out}
@keyframes snapup{from{transform:translateY(24px)}to{transform:none}}
.cb-log p{transition:none}.cb-log p.n0{font-size:18px;line-height:1.35;filter:none;color:var(--white)}
.cb-log p.n0.cmb{color:var(--cmb)}.cb-log p.n0.loc{color:var(--green)}.cb-log p.n0.loot{color:var(--glo2)}
.cb-log p.n1{font-size:13px;opacity:.85}.cb-log p.n2{font-size:11px;opacity:.65}.cb-log p.n3{font-size:10px;opacity:.5}.cb-log p.n4{font-size:10px;opacity:.38}.cb-log p.n5{font-size:10px;opacity:.26}

/* Enemy panel: bigger text, narrower bar, bright red on dark red, white flash when hit */
.cb-foe{align-items:center;display:flex;flex-direction:column;gap:6px;width:min(340px,80%);margin:0 auto}
.cb-foe .cb-name{font-size:22px;margin:0;white-space:nowrap}.cb-foe .cb-name span{font-size:15px}
.cb-fhp{font-size:15px;letter-spacing:.08em;color:var(--white)}
.cb-ftrack{width:100%;height:9px;border-radius:99px;background:#4a0f16;overflow:hidden}
.cb-ftrack i{display:block;height:100%;border-radius:99px;background:#e03a3a;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.cb-foe.hit{animation:hitflash .55s ease-out}
@keyframes hitflash{0%{filter:brightness(0) invert(1) drop-shadow(0 0 8px #fff);transform:scale(1.04)}35%{filter:brightness(0) invert(1) drop-shadow(0 0 8px #fff)}100%{filter:none;transform:none}}
.cb-bang{position:fixed;left:50%;top:15%;transform:translate(-50%,-50%);font-size:64px;line-height:1;color:#e03a3a;pointer-events:none;animation:bangpop .9s ease-out both}
@keyframes bangpop{0%{transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
/* (the low-health screen darkening was removed; the overlay stays for the defeat screen) */
body::after{content:"";position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:500;transition:opacity .4s ease}

/* Admin names are gold in every palette; the crown shows in their profile */
.admin-name,.admin-name.namelink,.namelink.admin-name:hover{color:#f2c14e!important}
.crown{display:inline-flex;vertical-align:-2px;margin-left:6px;color:#f2c14e}.crown svg{fill:rgba(242,193,78,.25)}

/* Encounter stage: tier symbol and color after the dots; the monster turns red when a fight starts */
.stage-pic{transition:color .5s ease,filter .5s ease}.stage-pic.red{color:#ff4b3e;filter:drop-shadow(0 0 14px rgba(255,60,50,.55));animation:redshake .5s ease}
@keyframes redshake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.scene .tier{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 0;letter-spacing:.14em;font-size:11px;text-transform:uppercase;color:var(--tc);animation:tierin .7s cubic-bezier(.2,1.4,.4,1) both}
.scene .tier .ico svg{width:22px;height:22px;stroke:var(--tc)}
.tr-common{--tc:#cfd8e3}.tr-uncommon{--tc:#5fe08a}.tr-rare{--tc:#6aa5ee}.tr-legendary{--tc:#ffb83d}
.tr-uncommon .ico svg{fill:rgba(95,224,138,.15)}.tr-rare .ico svg{fill:rgba(106,165,238,.2)}.tr-legendary .ico svg{fill:rgba(255,184,61,.2);filter:drop-shadow(0 0 8px rgba(255,184,61,.8));animation:spin 6s linear infinite}
.tr-legendary span{text-shadow:0 0 12px rgba(255,184,61,.7)}
@keyframes tierin{from{opacity:0;transform:translateY(8px) scale(.6)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fight screen layout: enemy floats on top, history box, big latest line, then the box with your bars and decisions */
.cb{width:min(540px,94vw);gap:14px}
.cb.leave{opacity:0;transform:translateY(-10px);transition:opacity .45s ease,transform .45s ease}
.cb-hist{border:1px solid var(--line2);border-radius:10px;padding:8px 14px;height:100px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(var(--sh),.22)}
.cb-hl{display:flex;flex-direction:column;gap:3px;align-items:center}.cb-hl.snap{animation:snapup .3s ease-out}
.cb-hist p{margin:0;font-size:10px;color:var(--dim);text-align:center;line-height:1.35}
.cb-hist p.h0{opacity:.85}.cb-hist p.h1{opacity:.7}.cb-hist p.h2{opacity:.55}.cb-hist p.h3{opacity:.42}.cb-hist p.h4{opacity:.3}.cb-hist p.h5{opacity:.2}
.cb-now{margin:0;min-height:96px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:30px;line-height:1.25;font-weight:700;letter-spacing:.02em;color:var(--white);text-shadow:0 2px 18px rgba(var(--sh),.8)}
.cb-now.pop{animation:nowpop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes nowpop{from{transform:translateY(26px) scale(.86);opacity:0}to{transform:none;opacity:1}}
.cb-now.t-intro{color:var(--white)}
.cb-now.t-hit{color:#5fe08a;text-shadow:0 0 22px rgba(95,224,138,.45)}
.cb-now.t-magic{color:#8fb4ff;text-shadow:0 0 24px rgba(110,150,255,.6)}
.cb-now.t-crit{color:#ffb83d;font-size:40px;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 28px rgba(255,184,61,.75);animation:critpop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes critpop{0%{transform:scale(.6);opacity:0}55%{transform:scale(1.12);opacity:1}100%{transform:none}}
.cb-now.t-hurt{color:#ff5a4a;text-shadow:0 0 24px rgba(255,70,55,.55);animation:hurtshake .45s}
@keyframes hurtshake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.cb-now.t-miss{color:#8d9db3;font-weight:500;font-size:26px}.cb-now.t-dodge{color:#6fd3c8;font-weight:500;font-size:26px}
.cb-now.t-heal{color:#7fe3a0}.cb-now.t-loot{color:#ffd36b;text-shadow:0 0 20px rgba(255,200,90,.45)}
.cb-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:14px;background:rgba(var(--sh),.28)}
.cb-me{gap:14px}
@media(max-width:600px){.cb-now{font-size:22px}.cb-now.t-crit{font-size:28px}}
/* Victory and defeat fade in slowly */
.cb-result>*{animation-duration:1.2s}.cb-result>:nth-child(2){animation-delay:.9s}.cb-result>:nth-child(3){animation-delay:1.7s}.cb-result>:nth-child(4){animation-delay:2.4s}.cb-result>:nth-child(5){animation-delay:3s}
.cb-result h1{animation:vicin 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes vicin{from{opacity:0;letter-spacing:.7em;filter:blur(6px)}to{opacity:1;letter-spacing:.3em;filter:none}}

/* Slower, cinematic fight text; no box around the past lines; slimmer, taller bars */
.cb-hist{border:0;background:none;padding:0;height:92px}
.cb-hl.snap{animation:snapup .9s cubic-bezier(.2,.7,.2,1)}
.cb-now{min-height:110px}
.cb-now.pop{animation:nowpop 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes nowpop{from{transform:translateY(30px) scale(.9);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}
.cb-now.t-crit{animation:critpop 1.6s cubic-bezier(.2,1.3,.4,1) both}
@keyframes critpop{0%{transform:scale(.55);opacity:0;filter:blur(6px)}45%{transform:scale(1.14);opacity:1;filter:none}100%{transform:none}}
.cb-now.t-hurt{animation:hurtshake 1s ease both}
@keyframes hurtshake{0%{transform:translateY(20px);opacity:0}25%{transform:translateX(-9px);opacity:1}40%{transform:translateX(9px)}55%{transform:translateX(-5px)}70%{transform:translateX(3px)}100%{transform:none;opacity:1}}
.cb-now .w i{transition:opacity .45s ease}
.cb-track{height:8px;width:50%;margin:0 auto}
.cb-ftrack{height:10.35px;width:50%;margin:0 auto}
.cb-stat{align-items:center}
.cb-stat>span{text-align:center}
.cb-foe{width:min(340px,80%)}
@keyframes snapup{from{transform:translateY(34px)}to{transform:none}}
.cb-now,.cb-now.t-crit,.cb-now.t-miss,.cb-now.t-dodge{font-weight:400}
.scene .cb-now{line-height:1.3;max-width:100%;letter-spacing:.02em}

/* Drag and drop for items */
.slot.full[data-zone]{touch-action:none;cursor:var(--cur-a,grab)}.slot.lifted{opacity:.35}
body.dragging,body.dragging *{cursor:var(--cur-a,grabbing)!important;user-select:none}
.slot.drop{border-color:var(--green)!important;background:rgba(var(--g),.18)!important}
.drag-ghost{position:fixed;left:0;top:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;z-index:400;pointer-events:none;border:1px solid var(--green);border-radius:6px;background:var(--field-bg);color:var(--green);box-shadow:0 6px 18px rgba(var(--sh),.5)}
.drag-ghost .ico svg{width:18px;height:18px}
.bk-grid{grid-template-columns:repeat(7,1fr);max-height:190px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

/* name block, spirit animal line and the XP bar */
.stats .who-row{font-size:17px;line-height:1.3;align-items:baseline}.stats .who-row>span:first-child{font-size:20px;letter-spacing:.02em}
.stats .kin{display:flex;justify-content:flex-start;gap:6px;font-size:11px;color:var(--dim);margin:0 0 4px}.stats .kin span+span::before{content:"·";margin-right:6px}
.xp-bar{height:8px;margin-top:8px;background:rgba(150,90,220,.18);border-radius:99px;position:relative;flex:none;cursor:var(--cur-n,help);outline:none}
.xp-bar i{display:block;height:100%;width:0;border-radius:99px;background:#a06be6;box-shadow:0 0 8px rgba(160,107,230,.55);transition:width .4s}
.xp-bar::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}

/* intro cutscene: black, then the screen warms into the element's color */
.scene.intro{background:#000;animation:fadein 1.2s backwards}.scene.intro p{position:relative;z-index:1}
.scene.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 115%,rgba(var(--g),.55),rgba(var(--g),.14) 55%,#000 100%);opacity:0;transition:opacity 1.5s ease}.scene.intro.tint::before{opacity:1}
/* reveal card with the map icon */
.rv-ico{color:var(--green);display:flex}.rv-head{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}.rv-name.sm{font-size:15px;letter-spacing:.16em}
/* map button and map */
.place-title .tool{margin:-4px 0}
.mp{width:min(340px,100%)}.mp-grid{display:grid;gap:6px}
.mp-cell{aspect-ratio:1.25;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;font-size:10px;line-height:1.3;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--white);position:relative;cursor:var(--cur-a,pointer);font-family:inherit}
.mp-cell.here{border-color:var(--green);color:var(--green);cursor:var(--cur-n,default)}.mp-cell:disabled:not(.here){opacity:.5;cursor:var(--cur-n,default)}
.mp-cell.unknown{border-style:dashed;border-color:var(--line2);color:var(--dim);font-size:14px;cursor:var(--cur-n,help)}.mp-cell.void{border-color:transparent}
.mp-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.mp-grid[style*="repeat(2"] .mp-cell{aspect-ratio:2.6}

/* quest book */
.qbook .qb-sum{display:flex;gap:14px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:2px 0 8px}.qbook .qb-sum span:first-child{color:var(--green)}
.qb-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line2);margin-bottom:10px}
.qb-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:5px 12px;font-size:12px;letter-spacing:.06em;color:var(--dim);cursor:var(--cur-a,pointer);font-family:inherit;display:flex;align-items:center;gap:6px}
.qb-tab.on{color:var(--green);border-bottom-color:var(--green)}
.qb-n{font-style:normal;font-size:9px;min-width:15px;height:15px;border-radius:99px;background:var(--green);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;animation:qpulse 2s infinite}
@keyframes qpulse{50%{box-shadow:0 0 8px rgba(var(--g),.7)}}
.qb-body{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.qb-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:4px 0 0}
.qc{border:1px solid var(--line2);border-left:3px solid var(--line);border-radius:8px;padding:10px 12px;background:rgba(var(--sh),.18);display:flex;flex-direction:column;gap:6px;transition:border-color .2s,box-shadow .2s}
.qc.active{border-left-color:var(--green)}.qc.ready{border-color:var(--green);box-shadow:0 0 14px rgba(var(--g),.2)}.qc.pinned{background:rgba(var(--g),.06)}
.qc.done{opacity:.6;border-left-color:var(--dim)}
.qc-top{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.qc-badge{margin-left:auto;border:1px solid var(--line);border-radius:99px;padding:1px 8px;letter-spacing:.06em;text-transform:none}.qc.ready .qc-badge{color:var(--on-accent);background:var(--green);border-color:var(--green)}.qc.done .qc-badge{color:var(--green);border-color:var(--green)}
.qc-pin{background:none;border:0;color:var(--dim);cursor:var(--cur-a,pointer);padding:0;display:flex}.qc-pin:hover,.qc-pin.on{color:var(--green)}
.qc-title{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--white)}.qc-title em{font-style:normal;font-size:10px;color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:0 8px}
.qc-sum{margin:0;color:var(--dim);font-size:11px}
.qc-obj{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.qc-obj li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--white)}.qc-obj li b{margin-left:auto;font-weight:500;color:var(--dim)}.qc-obj li.done{color:var(--dim)}.qc-obj li.done span{text-decoration:line-through}
.qc-check{width:13px;height:13px;border:1px solid var(--line);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;line-height:1;color:var(--on-accent);flex:none}.qc-obj li.done .qc-check{background:var(--green);border-color:var(--green)}
.qc .q-bar{margin:2px 0}
.qc-next{font-size:11px;color:var(--white)}.qc-next b{font-weight:500;color:var(--green);letter-spacing:.1em;text-transform:uppercase;font-size:10px;margin-right:8px}
.qc-rew{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.qc-rl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.qc-chip{font-size:10px;color:var(--green);border:1px solid var(--line);border-radius:99px;padding:1px 8px}.qc.done .qc-chip{color:var(--dim)}
/* spell tree and the MP button */
.mp-spell{background:none;border:0;padding:0 0 0 6px;margin:0;color:var(--dim);cursor:var(--cur-a,pointer);display:inline-flex;vertical-align:middle}.mp-spell:hover{color:var(--green)}.mp-spell[hidden]{display:none}
.sp{width:min(400px,100%)}.sp-body .pf-sub{margin:4px 0 8px}
.sp-tabs{display:flex;gap:14px;align-items:center;margin-bottom:8px}.sp-hint{margin-left:auto;font-size:10px;color:var(--dim);border:1px dashed var(--line2);border-radius:99px;padding:0 8px;cursor:var(--cur-n,help)}
.sp-tree{display:flex;flex-direction:column;position:relative;max-height:420px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.sp-node{display:flex;align-items:center;gap:12px;padding:8px 0 8px 2px;position:relative}
.sp-node:not(:last-child)::before{content:"";position:absolute;left:8px;top:26px;bottom:-8px;width:1px;background:var(--line2)}
.sp-dot{width:13px;height:13px;border-radius:50%;border:1px solid var(--line);background:var(--body-bg);flex:none;position:relative;z-index:1}
.sp-node.known .sp-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(var(--g),.6)}.sp-node.ready .sp-dot{border-color:var(--green);animation:qpulse 2s infinite}.sp-node.open .sp-dot{border-color:var(--green)}.sp-node.locked{opacity:.5}
.sp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.sp-top{display:flex;gap:10px;align-items:baseline}.sp-name{color:var(--white);font-size:13px}.sp-lvl{font-size:10px;color:var(--dim)}
.sp-stats{font-size:10px;color:var(--dim)}.sp-cost{display:flex;flex-wrap:wrap;gap:6px;font-size:10px}.sp-cost span{display:inline-flex;align-items:center;gap:4px;color:var(--bad)}.sp-cost span.ok{color:var(--green)}
.sp-tag{font-size:10px;color:var(--green);letter-spacing:.08em}
.fs-pop{width:min(320px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--green)}.fs-pop h2{margin:0;font-size:14px;color:var(--place)}.fs-pop .pf-actions{margin-top:10px;justify-content:center}
.chat-panel{min-height:170px}

/* battle HUD: fixed size, one-line text, a little tighter and centred */
.cb{gap:8px}.cb-hist{height:66px}.cb-now{min-height:72px;white-space:nowrap}.cb-now>span{white-space:nowrap}
.cb-hist p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cb-foe{height:76px;justify-content:center}.cb-foe .cb-name{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cb-box{gap:10px}.cb-acts{height:76px;min-height:76px;align-content:center;overflow-y:auto;scrollbar-width:thin}
.cb-item{cursor:var(--cur-n,help)}
/* stats box */
.stats .who-row>span:first-child{font-size:15px}.stats .who-row{font-size:15px}
.stats .day-row>span{color:var(--green)}
.inv-gold{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:11px;cursor:var(--cur-n,help)}.inv-gold svg{stroke:var(--green)}
.xp-bar{margin-top:-6px}
/* the big battle line must beat ".scene p" (15px), and always stays on one row (the script shrinks it to fit) */
.scene .cb-now{font-size:28px}.scene .cb-now.t-crit{font-size:34px}.scene .cb-now.t-miss,.scene .cb-now.t-dodge{font-size:24px}
@media(max-width:600px){.scene .cb-now{font-size:20px}.scene .cb-now.t-crit{font-size:24px}.scene .cb-now.t-miss,.scene .cb-now.t-dodge{font-size:18px}}

/* pet */
.pet-chip{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:var(--cur-a,pointer);text-align:left;font-family:inherit;color:var(--white);width:100%;flex:none}

.pet-pic{display:inline-flex;color:var(--green);animation:petfloat 4.5s ease-in-out infinite}.pet-pic svg{stroke:currentColor}
@keyframes petfloat{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
.pet-face{display:inline-flex;color:var(--green);opacity:.9}.pet-chip.mood-hungry .pet-face,.pet-big.mood-hungry .pet-face{color:var(--warn)}.pet-chip.mood-lonely .pet-face,.pet-big.mood-lonely .pet-face{color:var(--bad)}
.pet-name{font-size:12px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pet-name em{font-style:normal;color:var(--dim);font-size:10px}
.pet-dots{display:inline-flex;gap:4px}.pet-dots i{width:4px;height:4px;border-radius:50%;background:var(--green);opacity:.2;animation:blink 2.4s infinite}.pet-dots i:nth-child(2){animation-delay:.4s}.pet-dots i:nth-child(3){animation-delay:.8s}
.pet{width:min(420px,100%);max-height:88vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.pet-head{display:flex;gap:14px;align-items:center;margin:2px 22px 10px 0}.pet-big{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:92px;justify-content:center}.pet-big .pet-dots{width:100%;justify-content:center;margin-top:2px}
.pet-who{flex:1;min-width:0}.pet-title{margin:0;font-size:15px;color:var(--place);cursor:text}.pet-rename{display:flex;gap:6px}.pet-rename input,.pet-adopt input,.pet-adopt select{background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:5px 8px;font-family:inherit;font-size:12px;min-width:0}
.pet-who .pf-sub{margin:2px 0 6px}.pet-dim{font-size:10px;color:var(--dim);margin-top:2px}
.pet-bar{height:6px;margin:3px 0 4px}.pet-bar i{background:var(--green)}.pet-bar.xp i{background:#a06be6}.pet-bar.low i{background:var(--bad)}
.pet-stats{display:grid;grid-template-columns:1fr 1fr auto;gap:6px 14px;align-items:end;font-size:11px;color:var(--dim)}.pet-power{display:flex;flex-direction:column;align-items:flex-end}.pet-power b{font-size:16px;font-weight:500;color:var(--green)}
.pet-acts,.pet-food{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.pet-food{margin-top:0}.pet-food .q-btn{display:inline-flex;align-items:center;gap:5px}
.pet-slot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--line2);font-size:11px}.pet-sl{width:86px;color:var(--dim)}.pet-cur{color:var(--green);display:inline-flex;align-items:center;gap:6px}
.pet-hint{margin-top:10px;font-size:10px}.pet-adopt{display:flex;gap:6px;flex-wrap:wrap}
.house .chips{display:flex;flex-wrap:wrap;gap:5px}.house .shop-row.dim{opacity:.5}
.msg-x{background:none;border:0;color:var(--dim);cursor:var(--cur-a,pointer);margin-left:6px;padding:0 4px;font:inherit}
/* news + daily pages */
.fullpage{position:fixed;inset:0;z-index:90;overflow-y:auto;background:linear-gradient(var(--panel-top),var(--panel-bot)),var(--field-bg);scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;animation:fpin .35s ease}
@keyframes fpin{from{opacity:0}to{opacity:1}}
.fp-wrap{max-width:640px;margin:0 auto;padding:34px 18px 40px;text-align:center}
.fp-title{font-size:20px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 6px}
.fp-sub{font-size:13px;font-weight:400;color:var(--green2);margin:6px 0 10px}
.fp-count{color:var(--dim);font-size:11px;margin:0 0 12px}
.fp-body{text-align:left}.fp-body>.fp-sub,.fp-body>.fp-count,.fp-body>.dl-cond,.fp-body>.dl-fx,.fp-body>.dl-hi,.fp-body>.dl-rumor{text-align:center}
.fp-foot{margin-top:22px;text-align:center}
.fp-nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.fp-link{background:none;border:0;color:var(--green);font:inherit;font-size:12px;cursor:var(--cur-a,pointer);text-decoration:underline;text-underline-offset:3px}
.nw-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.nw-item{display:flex;gap:9px;font-size:12px;line-height:1.5;color:var(--white);padding-bottom:9px;border-bottom:1px solid rgba(var(--g),.12)}
.nw-ico{color:var(--green);margin-top:2px;flex:none}
.nw-when{color:var(--dim)}
.nw-p{background:none;border:0;padding:0;font:inherit;color:var(--green2);cursor:var(--cur-a,pointer)}.nw-p:hover{text-decoration:underline}
.nw-m{color:#e0897a}.nw-l{color:#8cc0e8}.nw-i{color:#e8c56a}.nw-n{color:var(--green2)}.nw-q{color:#c9a0e8}
.nw-quote{color:var(--dim);font-style:italic;margin-top:2px}
.nw-item.k-death .nw-ico{color:#e0897a}.nw-item.k-boss .nw-ico,.nw-item.k-rare .nw-ico{color:#e8c56a}
.dl-cond{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;color:var(--white);font-size:12px;margin:0 0 6px}
.dl-fx{color:var(--green2);font-size:11px;margin:0 0 10px}.dl-hi{color:var(--white);font-size:12px;margin:8px 0 12px}
.dl-list{margin:0 0 6px;padding-left:18px;font-size:12px;line-height:1.7;color:var(--white)}
.dl-rumor{color:var(--dim);font-style:italic;font-size:12px;margin:16px 0 8px}
.cond-chip{display:flex;align-items:center;gap:5px;width:100%;justify-content:flex-start;background:none;border:0;padding:3px 0 0;font:inherit;font-size:11px;color:var(--dim);cursor:var(--cur-a,pointer)}
.cond-chip .ico{color:var(--green)}
/* arena */
.ar-head{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-bottom:8px}.ar-head b{color:var(--green2);font-weight:500}
.ar-rank{width:18px;color:var(--dim);font-size:11px;text-align:center}
.ttl{color:var(--dim);font-style:italic;font-size:.92em}
.who .ttl{display:inline-block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.pf-title{color:var(--green2);font-style:italic;margin:-4px 0 4px;font-size:12px}
.fullpage.wide .fp-wrap{max-width:760px}
.fp-who{color:var(--green2);font-size:12px;margin:0 0 10px;text-align:center}
.ac-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;border-bottom:1px solid rgba(var(--g),.18);margin-bottom:14px}
.ac-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:5px 10px;font:inherit;font-size:12px;letter-spacing:.05em;color:var(--dim);cursor:var(--cur-a,pointer)}
.ac-tab.on{color:var(--green);border-bottom-color:var(--green)}
.ac-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 22px;font-size:12px;margin-bottom:6px}
.ac-stats div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(var(--g),.08);padding:3px 0}.ac-stats span{color:var(--dim)}.ac-stats b{color:var(--green2);font-weight:500}
.ac-cat{display:grid;grid-template-columns:110px 1fr 46px;gap:10px;align-items:center;font-size:12px;padding:4px 0;cursor:var(--cur-a,pointer)}.ac-cat b{text-align:right;font-weight:400;color:var(--dim)}
.ac-row{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(var(--g),.1);font-size:12px}
.ac-ico{color:var(--dim);margin-top:1px;flex:none}.ac-row.done .ac-ico{color:#e8c56a}
.ac-main{flex:1;min-width:0}.ac-name{color:var(--white)}.ac-name em{color:var(--green2);font-style:normal;font-size:11px;margin-left:6px}
.ac-desc{color:var(--dim);font-size:11px;margin-top:1px}
.ac-prog{display:flex;align-items:center;gap:10px;margin-top:6px}.ac-prog .bar{flex:1}.ac-prog span{color:var(--dim);font-size:10px;min-width:70px;text-align:right}
.ac-gold{color:var(--green);font-size:11px;white-space:nowrap}
.ac-title-row{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:10px;font-size:12px}.ac-title-row b{color:var(--green2);font-weight:500}
.ac-more{display:flex;flex-wrap:wrap;gap:6px}
.ac-ref{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px 0}.ac-ref div{display:flex;flex-direction:column;font-size:11px;color:var(--dim)}.ac-ref b{color:var(--green2);font-size:16px;font-weight:500}
.stats .kin{flex-wrap:wrap}.stats .kin .kt{flex-basis:100%;font-style:italic;color:var(--green2)}.stats .kin .kt+span::before{content:none}
/* map (compact cards) */
.mp{width:min(430px,100%)}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mp-cell{aspect-ratio:auto;justify-content:flex-start;gap:8px;text-align:left;padding:6px 8px;min-height:42px;font-size:11px;border-radius:7px}
.mp-cell .ico{color:var(--green);flex:none}.mp-cell.unknown .ico{color:var(--dim)}
.mp-txt{display:flex;flex-direction:column;min-width:0;flex:1}.mp-txt b{font-weight:400;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-txt em{font-style:normal;color:var(--dim);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-lv{font-style:normal;font-size:9px;color:var(--green2);border:1px solid var(--line2);border-radius:99px;padding:1px 6px;flex:none}.mp-lv.hard{color:#e0897a;border-color:#e0897a66}
.mp-cell.unknown{font-size:11px;border-style:dashed}
.mp-dot{display:none}
.mp-grid[style*="repeat(2"] .mp-cell{aspect-ratio:auto}
/* layout round: left-aligned stats, XP bar in the stats box, quest button by the map, fixed gold */
.stats .sv>div:not(.bar),.stats .day-row,.stats .who-row{justify-content:flex-start;gap:10px}
.stats .sv>div:not(.bar)>span:first-child{min-width:86px}
.stats .who-row>span:first-child,.stats .day-row>span:first-child{min-width:0}
.stats .day-row>span:first-child{min-width:86px}
.stats .xp-bar{margin:4px 0 6px;height:7px}
.pt-btns{display:flex;gap:6px;align-items:center}
.inv .stats-head .inv-gold{margin-left:auto;margin-right:10px}
.lb-tabs .lb-swap{margin-left:0}.lb-tabs{gap:8px}.lb-friends{position:relative}.lb-friends .badge{position:absolute;top:-5px;right:-6px}
/* forum overlay + admin editing */
#forum-overlay{position:fixed;inset:0;z-index:95;background:#000}#forum-overlay iframe{width:100%;height:100%;border:0;display:block}
.forum-x{position:absolute;top:10px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.45);color:var(--white);font:inherit;font-size:18px;line-height:1;cursor:var(--cur-a,pointer)}
.embedded .toolbar{display:none}
.f-admin{display:flex;gap:10px;align-items:center;margin-top:3px}.f-mv{background:none;border:0;color:var(--dim);cursor:var(--cur-a,pointer);font-size:9px;padding:0 2px}.f-mv:hover{color:var(--green)}
.f-staff{color:var(--dim);font-size:10px;font-style:italic}
.f-edit{display:flex;flex-direction:column;gap:6px;padding:8px 0}.f-edit input[type=text],.f-edit input:not([type]){background:var(--field-bg);border:1px solid var(--line);color:var(--white);padding:6px 8px;font:inherit;border-radius:6px}
.f-edit-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.f-chk{font-size:11px;color:var(--dim)}.f-del{color:#e0897a}
.f-add{margin-top:8px}

/* stat values never wrap (HP 150 / 150) */
.stats .green-value { white-space: nowrap; }
.stats .sv>div:not(.bar)>span:first-child{min-width:72px}
.stats .sv>div:not(.bar){gap:6px}

/* guild detail page */
.gi-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:10px}
.gi-stat{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line2);border-radius:6px}
.gi-row{display:grid;grid-template-columns:28px minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line2)}
.gi-name{display:flex;gap:6px;align-items:center;min-width:0}.gi-lead{color:var(--green);font-size:.85em}.gi-lv{text-align:right}.gi-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi-row.q{grid-template-columns:1fr auto}

/* cutscene skip button: small, white, bottom centre */
.scene-skip{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);background:transparent;color:#fff;border:1px solid rgba(255,255,255,.75);border-radius:99px;padding:5px 18px;font:inherit;font-size:11px;letter-spacing:.12em;cursor:var(--cur-a,pointer);opacity:.8}
.scene-skip:focus-visible{opacity:1;background:rgba(255,255,255,.12)} .scene-skip:hover{opacity:1}

/* item rarity: the item's picture takes the color */
.ico.r-uncommon{color:#6fcf6f}.ico.r-rare{color:#5aa9ff}.ico.r-legendary{color:#ffa94d}.ico.r-mythic{color:#ff6ad5;filter:drop-shadow(0 0 3px rgba(255,106,213,.7))}
.rar-uncommon{color:#6fcf6f}.rar-rare{color:#5aa9ff}.rar-legendary{color:#ffa94d}.rar-mythic{color:#ff6ad5}

/* gems, taming and farm panels */
.xtra .xt-sel{background:rgba(var(--sh),.3);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:3px 6px;font:inherit;font-size:11px;max-width:210px}
.xt-bait{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.house .shop-row.xt-row{grid-template-columns:24px minmax(0,1fr) 50px auto}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:6px}
.fm-plot{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:8px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.18)}
.fm-plot.empty{opacity:.75;border-style:dashed}.fm-plot.ready{border-color:var(--green)}
.fm-plot .bar{width:100%;margin:0}.fm-name{font-size:12px}.fm-ico{display:inline-flex}
.house.xtra{max-height:230px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
@media (min-height:1000px){.house.xtra{max-height:340px}}
/* the skills list scrolls inside the box instead of making the Stats box taller as skills are added */
.stats .sv-stack>.sv:nth-child(2){contain:size;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

.ann .horn{background:none;border:0;padding:0;margin:0;color:inherit;cursor:var(--cur-a,pointer);display:inline-flex;align-self:flex-start;opacity:.85}.ann .horn:hover{opacity:1;color:var(--green)}
.ann-row{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line2);font-size:12px}

/* popup pages: the game screen fades out quickly, the page fades in, and fades away when closed */
#root.quick{transition-duration:.25s}
.fullpage .pf-x{position:fixed;top:14px;right:22px;z-index:2;font-size:24px;width:32px;height:32px}
.modal,.fullpage{animation:fadein .25s ease both}.modal.leaving,.fullpage.leaving,#forum-overlay.leaving{opacity:0;transition:opacity .2s ease;pointer-events:none}
.ann .horn .ico{margin-top:3px;color:var(--green)}

/* achievements home: totals, the latest four, and big category tiles */
.ac-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:center;margin-bottom:6px}
.ac-big{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.2)}
.ac-big b{font-size:34px;font-weight:500;color:var(--green2);line-height:1}.ac-big span,.ac-big em{font-size:12px;color:var(--dim);font-style:normal}
.ac-mini{display:grid;gap:8px}.ac-mini div{display:flex;justify-content:space-between;align-items:baseline;padding:8px 12px;border:1px solid var(--line2);border-radius:8px}.ac-mini b{font-weight:500;color:var(--green2)}.ac-mini span{font-size:11px;color:var(--dim)}
.ac-recent{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}@media(max-width:760px){.ac-recent{grid-template-columns:1fr 1fr}}@media(max-width:480px){.ac-recent{grid-template-columns:1fr}}
.ac-rec{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line2);border-left:3px solid var(--green);border-radius:8px;background:rgba(var(--sh),.18)}
.ac-rec>div{display:flex;flex-direction:column;gap:2px;min-width:0}.ac-rec span{font-size:11px;color:var(--dim)}.ac-rec em{font-size:11px;color:var(--green);font-style:normal}
.ac-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ac-tile{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:16px;min-height:130px;border:1px solid var(--line2);border-radius:12px;background:rgba(var(--sh),.2);color:var(--white);font:inherit;cursor:var(--cur-a,pointer);transition:border-color .15s,background .15s,transform .15s}
.ac-tile:hover{transform:translateY(-2px)}.ac-tile b{font-size:15px;font-weight:500}.ac-tile .bar{width:100%;margin-top:auto}.ac-tile-ico{color:var(--green)}
.ac-back{display:flex;align-items:center;gap:14px;margin-bottom:14px}.ac-back b{font-size:16px;font-weight:500;color:var(--green2)}
@media (max-width:700px){.ac-hero{grid-template-columns:1fr}}

/* watercolor battle backgrounds */
.scene.combat{overflow:hidden}
.cb-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease;z-index:0}.cb-bg.on{opacity:1}
.cb-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(14,8,6,.08),rgba(14,8,6,.4))}
.scene.combat>.cb{position:relative;z-index:1}

/* stat values right-aligned; Day number sits next to "Day" */
.stats .sv>div:not(.bar):not(.day-row):not(.who-row){justify-content:space-between}
.stats .sv>div:not(.bar):not(.day-row):not(.who-row)>.green-value{margin-left:auto;text-align:right}
.stats .day-row{justify-content:flex-start;gap:6px}.stats .day-row>span:first-child{min-width:0}

/* custom retro dark cursor, always on (replaces the system pointer, incl. the not-allowed one) */
body.dragging,body.dragging *{cursor:var(--cur-n,default)!important}

/* trading cards */
.tc-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.tc{position:relative;width:78px;padding:6px 6px 5px;border:1px solid var(--line);border-radius:7px;background:rgba(var(--sh),.22);display:flex;flex-direction:column;gap:2px;font-size:10px;line-height:1.25}
.tc b{font-weight:500;color:var(--white);min-height:25px}.tc-el{position:absolute;top:4px;right:6px;color:var(--dim);font-size:9px}.tc-st{color:var(--green)}.tc-n{position:absolute;bottom:4px;right:6px;font-style:normal;color:var(--dim)}
.tc-common{border-color:var(--line)}.tc-uncommon{border-color:#6fcf6f}.tc-rare{border-color:#5aa9ff}.tc-legendary{border-color:#ffa94d;box-shadow:0 0 8px rgba(255,169,77,.3)}.tc-mythic{border-color:#ff6ad5;box-shadow:0 0 10px rgba(255,106,213,.4)}
.tc.click{cursor:var(--cur-a,pointer)}.tc.on{outline:1px solid var(--green);background:rgba(var(--g),.14)}
.tc-flip{animation:tcflip .6s ease both}@keyframes tcflip{0%{opacity:0;transform:rotateY(90deg) scale(.8)}100%{opacity:1;transform:none}}
.tc-rounds{display:flex;flex-direction:column;gap:5px;margin-top:4px}.tc-round{display:flex;align-items:center;gap:8px;padding:3px 5px;border-radius:7px;border:1px solid var(--line2)}.tc-round.w{border-color:var(--green)}.tc-round.l{border-color:var(--bad)}.tc-vs{color:var(--dim);flex:1;text-align:center}

/* dungeon grid */
.scene.dungeon{flex-direction:column;gap:14px;background:rgba(6,5,10,.96);animation:fadein .6s .65s backwards;z-index:92}
.scene.dungeon .dg-name{font-size:22px;letter-spacing:.14em;color:var(--white);animation:fadein 1s .2s backwards}
.dg-title{color:var(--green)!important;letter-spacing:.14em!important;font-size:13px!important;line-height:1.4!important}
.dg-grid{display:grid;gap:6px;width:min(78vw,330px)}
.dg-cell{aspect-ratio:1;border:1px solid rgba(var(--hi),.07);border-radius:6px;background:rgba(var(--hi),.02);display:flex;align-items:center;justify-content:center;padding:0;color:var(--green);transition:background .25s,border-color .25s}
.dg-cell:disabled{cursor:var(--cur-n,default)}
.dg-cell.s1{border-color:var(--line);background:rgba(var(--g),.05);animation:dgpulse 2.2s ease-in-out infinite}.dg-cell.s1:hover:not(:disabled){background:rgba(var(--g),.18);border-color:var(--green)}
.dg-cell.s2{border-color:var(--green);background:rgba(var(--g),.14);box-shadow:0 0 14px rgba(var(--g),.25)}.dg-cell.boss{border-color:#ff6ad5;box-shadow:0 0 16px rgba(255,106,213,.35);color:#ff6ad5}
.dg-cell.flash{animation:dgflash 1s ease-in-out 3}
.dg-me{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
@keyframes dgpulse{0%,100%{opacity:.55}50%{opacity:1}}@keyframes dgflash{0%,100%{box-shadow:0 0 6px rgba(var(--g),.2)}50%{box-shadow:0 0 26px rgba(var(--g),.9);background:rgba(var(--g),.35)}}
.dg-prompt{font-size:12px!important;color:var(--white)}.dg-sub{font-size:10px!important;color:var(--dim)!important;line-height:1.4!important}
.dg-esc{display:flex;gap:10px;align-items:center;color:var(--green);font-size:11px}
.tc b{padding-right:10px}.tc-bal{display:flex;gap:14px;margin:0 0 4px;color:var(--green);font-size:11px}

/* clickable achievement lines, struck-through rewards, glowing wilderness and quest book */
.ach-link{cursor:var(--cur-a,pointer);color:var(--green);text-decoration:underline;text-decoration-color:rgba(var(--g),.35);text-underline-offset:3px}.ach-link:hover{text-decoration-color:var(--green)}
.struck{text-decoration:line-through;opacity:.5}
.loc-head.glow{animation:softglow 2.2s ease-in-out infinite}
.tool.prog,.questbtn.prog{animation:softglow 2.2s ease-in-out infinite}
@keyframes softglow{0%,100%{box-shadow:0 0 0 rgba(var(--g),0);color:var(--green)}50%{box-shadow:0 0 14px rgba(var(--g),.65);color:var(--green2,var(--green))}}
.cb-now.still,.cb-now.still.t-hurt,.cb-now.still.t-crit,.cb-now.still.pop{animation:none!important}

.tw-rows{display:flex;flex-direction:column;gap:2px}.tw-row{display:grid;grid-template-columns:36px 1fr auto;gap:8px;padding:3px 6px;border-radius:6px}.tw-row.me{background:rgba(var(--g),.12)}.tw-row b{color:var(--green);font-weight:500}
.ma-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.ma-card{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.ma-card.cur{border-color:var(--green);background:rgba(var(--g),.06)}
.ma-head{display:flex;justify-content:space-between}.ma-perk{display:flex;gap:10px;font-size:10px;color:var(--dim)}.ma-perk span:first-child{min-width:34px}.ma-perk.got{color:var(--green)}.ma-weps{font-size:10px}

/* lower-left box: two icon tabs + players/guilds switch */
.lb-tabs{gap:6px;justify-content:flex-start}.lb-tabs .lb-swap{margin-left:0;padding:4px 7px;border:1px solid var(--line,#2a3a2a);border-radius:3px}
.lb-tabs .lb-swap.on{color:var(--green);border-color:var(--green)}
.lb-sub{display:flex;gap:12px;margin:2px 0 6px}.lb-sub[hidden]{display:none}
.lb-sub-btn{background:none;border:0;border-bottom:1px solid transparent;padding:0;font-size:11px;letter-spacing:.04em;color:var(--dim);cursor:var(--cur-a,pointer)}
.lb-sub-btn.on{color:var(--green);border-bottom-color:var(--green)}
.who .rk.lvn{min-width:34px;text-align:left;margin-right:6px}
.cc-ref{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:10px;color:var(--dim)}.cc-ref input{width:110px;font-size:11px;padding:3px 6px}
.inv .stats-head .inv-gold{margin:0 12px 0 0;font-size:15px;gap:6px;font-weight:600}.inv .stats-head .inv-gold svg{width:20px;height:20px}
.inv .stats-head .inv-title{margin-right:auto}

/* forest: a big Explore button and a gathering group */
.forest-explore{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;width:100%;flex:0 0 100%;text-align:left;padding:12px 16px;margin:2px 0 8px;background:linear-gradient(120deg,rgba(95,224,138,.16),rgba(95,224,138,.03));border:1px solid var(--green);border-radius:4px;color:var(--white);cursor:var(--cur-a,pointer);font:inherit;animation:softglow 3.2s ease-in-out infinite}
.forest-explore svg{grid-row:1/3;stroke:var(--green);width:26px;height:26px}.forest-explore .fe-t{font-size:14px;letter-spacing:.08em;color:var(--green);text-transform:uppercase}.forest-explore .fe-s{font-size:10px;color:var(--dim)}
.forest-explore:disabled{opacity:.5;animation:none;cursor:var(--cur-n,default)}
.gather-group{flex:0 0 100%;width:100%;border:1px solid var(--line,#2a3a2a);border-radius:4px;padding:8px 10px}
.gg-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}.gg-head em{font-style:normal;letter-spacing:.03em}
.gg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gg-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;background:none;border:1px solid var(--line,#2a3a2a);border-radius:3px;color:var(--white);font:inherit;cursor:var(--cur-a,pointer);text-align:center}
.gg-tile svg{stroke:var(--green)}.gg-name{font-size:12px}.gg-sub{font-size:10px;color:var(--green2,var(--green))}.gg-sub.dim{color:var(--dim)}
.gg-tile:disabled{opacity:.45;cursor:var(--cur-n,default)}

/* ===== phones and tablets (iPhone / iPad Safari) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,a,select,summary,.slot,.gg-tile,.forest-explore{touch-action:manipulation}
.toolbar{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
@media(max-width:800px){
  :root{--zoom:1}
  #game.on,.view.on{padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right));padding-bottom:calc(14px + env(safe-area-inset-bottom));padding-top:calc(54px + env(safe-area-inset-top));justify-content:flex-start}
  .window{display:flex;flex-direction:column;gap:10px;height:auto}
  .side,.center{display:contents}
  .window .ann{order:0}.window .place-panel{order:1}.window .locs{order:2;max-height:none;height:auto!important}.window .chat-panel{order:3}
  .window .stats{order:4}.window .inv{order:5}.window #lb-wrap{order:6}.window .pet-chip{order:7}.window .support{order:8}
  .window>*,.window .panel{min-width:0}
  .chat-panel{height:min(420px,60dvh)}
  .toolbar{gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 20px)}.toolbar .tool{width:36px;height:36px}
  .tier-tip,.pal-menu{max-width:calc(100vw - 20px)}
  .game-foot{padding-bottom:env(safe-area-inset-bottom)}
  .gg-row{gap:6px}.gg-tile{padding:10px 2px}.gg-name{font-size:11px}
  .forest-explore{padding:14px}
  .cb-acts button,.acts button,.q-btn,.mini-button{min-height:40px}
  .acts{gap:8px}
  .fullpage,.fp,.modal{max-width:100vw}
}
/* iOS zooms the page when you tap a field with text under 16px, so fields are 16px on touch screens */
@media(pointer:coarse){
  input,select,textarea{font-size:16px!important}
  .say input{min-height:42px}
  .lb-sub-btn,.lb-tab,.namelink{padding-top:4px;padding-bottom:4px}
  *{cursor:auto!important}
}
@media(max-width:520px){
  .window{gap:8px}.panel{padding-left:12px;padding-right:12px}
  .stat-grid{gap:6px}.place-title{flex-wrap:wrap}
  .cb-now{font-size:20px}
}
@supports(height:100dvh){@media(max-width:800px){.fullpage,#forum-overlay{height:100dvh}}}
.fullpage{padding-top:env(safe-area-inset-top)}
.idle-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0 8px}.idle-pick .q-btn{display:inline-flex;align-items:center;gap:5px}.idle-pick .q-btn.on{border-color:var(--green);color:var(--green)}.idle-pick b{min-width:20px;text-align:center}
.house.xtra.tall{max-height:none;overflow:visible}
.forest-explore .fe-t,.forest-explore .fe-s{text-align:left;justify-self:start}
.place-panel .xtra:not([hidden]){margin-top:10px}
.acts .forest-explore{border-radius:8px;padding:12px 16px;min-height:0}.acts .gg-tile{border-radius:8px;min-height:0}
@media(max-width:520px){.gg-sub{font-size:9px}.gg-name{font-size:11px}.forest-explore .fe-t{font-size:12px}.forest-explore .fe-s{font-size:9px}.acts .gg-tile{padding:8px 2px}}
.acts .forest-explore{background:linear-gradient(120deg,rgba(var(--g),.18),rgba(var(--g),.03));color:var(--white);border-color:var(--green)}

.acts .gg-tile{border-color:var(--line2);color:var(--white)}
.acts .forest-explore{display:flex;align-items:center;gap:14px;text-align:left}.forest-explore .fe-txt{display:flex;flex-direction:column;gap:3px;min-width:0}.forest-explore .fe-t{white-space:nowrap}
@media(max-width:800px){.toolbar{position:absolute}}

/* first load: only Locations, the announcement bar and your stats, until you reach the Town Hall */
#game.intro-min .center>:not(.ann),#game.intro-min .side:first-child>:not(.locs),#game.intro-min aside.side>:not(.stats){display:none!important}
#game.intro-in .center>:not(.ann),#game.intro-in .side:first-child>:not(.locs),#game.intro-in aside.side>:not(.stats){animation:introIn 2.2s ease both}
@keyframes introIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ann-text p.welcome-glow{color:var(--green);white-space:normal;animation:welcomeGlow 2.6s ease-in-out infinite}
@keyframes welcomeGlow{0%,100%{text-shadow:0 0 4px currentColor,0 0 10px currentColor;opacity:.85}50%{text-shadow:0 0 10px currentColor,0 0 24px currentColor;opacity:1}}
@media(prefers-reduced-motion:reduce){.ann-text p.welcome-glow{animation:none;text-shadow:0 0 8px currentColor}#game.intro-in *{animation:none!important}}

/* batch 5 */
.ann{align-items:flex-end}.ann .horn{align-self:flex-end}.ann .horn .ico,.ann>.ico{margin-top:0}
.ann-text{transition:opacity 1.2s ease}.ann-text.faded{opacity:0}.ann-text .older{font-size:calc(1em - 2px)}
#lb,#social{margin-right:-8px;padding-right:8px}
.sk-row.click{cursor:var(--cur-a,pointer)}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}.cal-nav .fp-sub{margin:0;text-align:center;flex:1}
.cal-legend{display:flex;gap:14px;align-items:center;font-size:10px;color:var(--dim);margin:8px 0;flex-wrap:wrap}.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal-dow{font-size:10px;color:var(--dim);text-align:center;padding:2px 0}
.cal-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;min-height:58px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--hi),.02);color:var(--white);cursor:var(--cur-a,pointer);font:inherit}
.cal-day.today{border-color:var(--green);box-shadow:0 0 10px rgba(var(--g),.25)}.cal-day.sel{background:rgba(var(--g),.14)}
.cal-n{font-size:11px}.cal-w{display:flex;gap:1px;color:var(--green)}.cal-ev{display:flex;gap:3px;min-height:6px}
i.ev-buff,i.ev-event,i.ev-debuff{display:inline-block;width:6px;height:6px;border-radius:50%}i.ev-buff{background:#6d6}i.ev-event{background:#6af}i.ev-debuff{background:#f66}
.cal-detail{margin-top:14px}.cal-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap;color:var(--white)}.cal-row.now{color:var(--green)}.cal-fx{flex:1 1 100%;font-size:11px}
.cal-evrow{border:1px solid var(--line2);border-radius:8px;padding:8px 10px;margin-top:8px}.cal-evrow p{margin:4px 0 0;color:var(--dim);font-size:11px}.cal-evrow.ev-buff b{color:#6d6}.cal-evrow.ev-debuff b{color:#f66}.cal-evrow.ev-event b{color:#6af}
.ev-tag{float:right;font-size:10px;color:var(--dim)}
.fish-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.fish-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;border:1px solid var(--line2);border-radius:99px;padding:2px 8px;color:var(--green)}.fish-chip.locked{opacity:.4;color:var(--dim)}
.fishgame{position:fixed;inset:0;z-index:120;background:var(--field-bg,#050b16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;color:var(--white);user-select:none;touch-action:none}
.fishgame h2{margin:0;color:var(--green);letter-spacing:.14em;font-size:14px}.fg-diff{margin:0;font-size:10px;color:var(--fc)}
.fg-x{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--dim);font-size:22px;cursor:var(--cur-a,pointer)}
.fg-water{position:relative;width:min(92vw,420px);height:170px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:linear-gradient(rgba(var(--g),.04),rgba(var(--g),.14));cursor:var(--cur-a,pointer)}
.fg-bob{position:absolute;left:50%;top:48%;width:10px;height:10px;border-radius:50%;background:var(--fc);box-shadow:0 0 10px var(--fc);transform:translate(-50%,-50%);opacity:.9}
.fg-rip{position:absolute;left:50%;top:48%;width:34px;height:12px;border:1px solid rgba(var(--g),.5);border-radius:50%;transform:translate(-50%,-50%);animation:fgrip 2.6s ease-out infinite}
@keyframes fgrip{0%{transform:translate(-50%,-50%) scale(.4);opacity:.9}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
.fishgame:not(.cast) .fg-bob,.fishgame:not(.cast) .fg-rip{display:none}
.fishgame.bite .fg-bob{animation:fgdip .25s ease-in-out infinite;background:#fff;box-shadow:0 0 16px #fff}.fishgame.bite .fg-water{border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.35)}
@keyframes fgdip{50%{transform:translate(-50%,-30%)}}
.fg-arrow{position:absolute;left:0;right:0;bottom:8px;font-size:12px;color:#fb4;letter-spacing:.08em}
.fishgame.pulling .fg-water{border-color:#fb4}.fishgame.danger .fg-safe{box-shadow:0 0 12px #f66}.fishgame.slack .fg-safe{box-shadow:0 0 12px #6af}
.fg-msg{margin:0;min-height:18px;color:var(--green);font-size:13px}.fg-sub{margin:0;min-height:14px;color:var(--dim);font-size:11px}
.fg-meters{display:flex;flex-direction:column;gap:8px;width:min(92vw,420px)}.fg-m{display:flex;flex-direction:column;gap:3px;text-align:left;font-size:10px;color:var(--dim)}.fg-m.cast{width:min(92vw,420px)}
.fg-bar{height:8px;border:1px solid var(--line2);border-radius:99px;overflow:hidden}.fg-bar i{display:block;height:100%;width:0;background:var(--green)}.fg-bar.d i{background:#6af}
.fg-safe{position:relative;height:12px;border:1px solid var(--line2);border-radius:99px;background:linear-gradient(90deg,rgba(102,170,255,.25) 0 12%,rgba(102,221,102,.25) 12% 82%,rgba(255,102,102,.35) 82% 100%)}
.fg-t{position:absolute;top:-3px;width:4px;height:16px;border-radius:2px;background:#fff;box-shadow:0 0 8px #fff;transform:translateX(-50%);left:35%}
.fg-ctrls{display:flex;gap:8px;width:min(92vw,420px);opacity:.35}.fg-ctrls.on{opacity:1}.fg-btn{flex:1;padding:14px 6px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--g),.06);color:var(--white);font:inherit;font-size:12px;cursor:var(--cur-a,pointer);touch-action:none}.fg-btn.reel{flex:1.6;color:var(--green)}.fg-btn:active{background:rgba(var(--g),.25)}
.fishgame.won h2,.fishgame.won .fg-msg{color:#6d6}.fishgame.lost .fg-msg{color:#f66}
.at-row,.be-row,.bn-row,.pk-row{padding:7px 0;border-bottom:1px solid var(--line2);display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}.at-row b{color:var(--white)}.at-foes{flex:1 1 100%;margin:0;font-size:11px;color:var(--dim)}.at-foes.chest{color:#fb4}
.pk-row{opacity:.45}.pk-row.on{opacity:1;color:var(--green)}.pk-row b{min-width:42px}
.be-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:11px}.be-main b{color:var(--white)}.be-row.unk{opacity:.45;align-items:center}
.bn-row{align-items:center}.bn-main{display:flex;flex-direction:column;flex:1;min-width:0;font-size:11px}.bn-main b{color:var(--white)}.bn-row.on .bn-main b{color:var(--green)}
.dg-scout{opacity:.45}.dg-scout.b{color:#ff6ad5;opacity:.7}
@media(min-width:801px){.locs{height:clamp(240px,calc(100vh - 500px),400px)!important;max-height:none;overflow-y:auto}}

/* HUD symmetry: equal space on the left and right inside every box */
.panel .sv-stack{grid-template-columns:minmax(0,1fr)}.sv-stack>.sv{width:100%;min-width:0}
.side>.stats{flex:0 0 auto}
.ann-text{display:flex;flex-direction:column;justify-content:flex-end}
/* uniform inner spacing: 14px inside every box, nothing pokes past the edge */
.stats,.inv,.support,.locs,.place-panel,.chat-panel,#lb-wrap{padding:14px}
.pet-chip{padding:10px 14px}.ann{padding:10px 14px}
.stats-footer:empty{display:none}
.inv .stats-head{gap:8px;min-width:0}.inv .stats-head .inv-gold{margin:0 4px 0 0;font-size:14px;flex:none}.inv .stats-head .inv-title{flex:1;min-width:0;margin-right:0}.inv .stats-head .inv-title h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inv .stats-head .tool{flex:none}
/* the middle boxes never grow past the content area: the place box scrolls inside itself, scrollbar on its far right edge */
@media(min-width:801px){
  .place-panel{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
  .chat-panel{flex:0 0 clamp(170px,26%,240px);min-height:0}
  .house.xtra,.house.xtra.tall{max-height:none;overflow:visible}
}

/* combat: one big dark box over the whole middle area, quick-look icons in its bottom right */
.cb.wide{position:absolute!important;max-width:none;box-sizing:border-box;justify-content:center;align-items:stretch;padding:28px 40px 56px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--sh),.62);backdrop-filter:blur(2px);overflow:hidden}
.cb.wide.full{inset:10px;width:auto!important;height:auto!important;left:10px!important;top:10px!important}
.cb.wide .cb-box{border:0;background:transparent;padding:0}
.cb.wide .cb-hist{background:rgba(var(--sh),.3)}
.cb-tools{position:absolute;right:14px;bottom:12px;display:flex;gap:8px}
.cb-tool{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:rgba(var(--sh),.5);color:var(--green);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:var(--cur-a,pointer)}
.cb-tool.locked{opacity:.4;cursor:var(--cur-n,not-allowed);color:var(--dim)}
.modal,.fullpage{z-index:130}
.stats{padding:12px 14px}.inv{padding:10px 14px}.support{padding:12px 14px}.side>.stats{flex:1 1 auto;min-height:0}
.inv .stats-head .inv-gold{font-size:13px;margin:0}.inv .stats-head .inv-title h2{font-size:12px}
.pet-chip{gap:6px}
#game.intro-min .side>.stats{flex:0 0 auto;align-self:stretch}#game.intro-min .stats .srow{flex:0 0 auto}
.inv .stats-head .inv-gold svg{width:16px;height:16px}.inv .stats-head .inv-gold{font-size:12px;gap:4px}.inv .stats-head .inv-title h2{letter-spacing:0}
.inv .stats-head .inv-title h2{font-size:11px}

/* pet box now sits bottom right, support box bottom left */
.side>.pet-chip{flex:none;min-height:84px;padding:14px}.side>.support{flex:0 0 auto;padding:10px 14px}
.support .support-copy{display:none}.support .support-row{margin-bottom:2px}.support .bar,.support .meter{margin:4px 0}.support .begin,.support .mini-button,.support button{margin-top:4px}
.place-panel.qmode{display:flex;flex-direction:column;overflow:hidden}.place-panel.qmode>.qbook{flex:1;min-height:0;display:flex;flex-direction:column}.qbook .qb-body{flex:1;min-height:0;max-height:none}
/* every popup page is a box with its own scrollbar; the page behind never scrolls */
.fullpage{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:24px}
.fullpage>.fp-wrap{width:100%;max-width:640px;max-height:calc(100vh / var(--zoom) - 48px);overflow-y:auto;box-sizing:border-box;padding:26px 24px 24px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 35px rgba(var(--sh),.35);scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.fullpage.wide>.fp-wrap{max-width:760px}
@supports(height:100dvh){.fullpage>.fp-wrap{max-height:calc(100dvh / var(--zoom) - 48px)}}

.pane p.qst{color:#b98cff!important}
.inv .stats-head{gap:6px}.inv .stats-head .inv-title h2{letter-spacing:-.02em}.inv .stats-head .inv-gold svg{width:14px;height:14px}

/* no cut-off words: smaller type in tight HUD spots, wrapping instead of ellipsis in lists */
.inv .stats-head .inv-title h2{font-size:10px;letter-spacing:-.03em;text-overflow:clip}
.inv .stats-head .inv-gold{font-size:11px}
.pet-name{font-size:11px;text-overflow:clip;letter-spacing:-.02em}.pet-name em{font-size:9px}
.sk-name{font-size:9px;text-overflow:clip}
.shop-name span{white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
.mp-txt b{text-overflow:clip;white-space:normal}
.pick-btn>span:not(.ico),.pick-opt>span:not(.ico){white-space:normal;text-overflow:clip}
.place-desc:not(.small){font-style:italic}

/* stats panel: three views (stats / skills / weapon mastery) */
.stats .sv-stack>.sv:nth-child(n+2){contain:size;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.stats .pt-btns .tool.on{border-color:var(--green);color:var(--green);background:rgba(var(--g),.12)}
.sk-row.cur .sk-name{color:var(--green)}

/* achievements: the unfilled (max) part of every progress bar is white */
.ac-prog .bar,.ac-tile .bar,.ac-big .bar,.ac-row .bar,.ac-cat .bar{background:#f2efe9}

/* announcement bar 35% shorter; icon on the text baseline row */
.ann{padding:2px 14px;min-height:0;height:42px;box-sizing:border-box}.ann-text{min-height:0;height:100%}
.ann>.tool,.ann .horn{align-self:flex-end;margin:0;height:18px;width:18px;display:inline-flex;align-items:center;justify-content:center}
/* gold higher and further left; Equipment/Inventory right-aligned beside its button */
.inv .stats-head .inv-gold{margin:-6px 0 0 -6px}
.inv .stats-head .inv-title{text-align:right}.inv .stats-head .inv-title h2{text-align:right}
.qb-tab .ico{display:inline-flex;vertical-align:middle}
.inv .stats-head .inv-title{display:flex;justify-content:flex-end;align-items:center}
.inv .stats-head .inv-gold{align-self:flex-start;margin:-6px 0 0 -6px}

/* calendar: past days grey, a week ahead in colour, later days blank; compact so the page never scrolls */
.cal-day.past{opacity:.45;filter:grayscale(1);color:#8a8a8a;cursor:var(--cur-a,pointer)}.cal-day.past .cal-w{color:#777}.cal-day.past .cal-ev{display:none}
.cal-day.far{opacity:.22;cursor:var(--cur-n,default);pointer-events:none;border-style:dashed}
.cal-day{min-height:44px;padding:3px 2px;gap:2px}.cal-grid{gap:3px}.cal-legend{margin:4px 0}
.cal-detail{margin-top:8px}.cal-row{padding:3px 0}.cal-evrow{padding:5px 8px;margin-top:5px}.cal-evrow p{margin:2px 0 0}

/* top-right: [icons...] [arrow] [Logout]; the arrow folds the icons away and fans them back out */
.toolbar{--tw:22px;--tg:6px;align-items:center}
.toolbar .tb-fold{transition:margin-right .45s cubic-bezier(.22,.8,.3,1),opacity .3s ease,transform .45s cubic-bezier(.22,.8,.3,1);transform-origin:right center}
.toolbar:not(.tb-open) .tb-fold{margin-right:calc(-1 * (var(--tw) + var(--tg)));opacity:0;transform:scale(.4);pointer-events:none;visibility:hidden;transition:margin-right .45s cubic-bezier(.22,.8,.3,1),opacity .25s ease,transform .45s cubic-bezier(.22,.8,.3,1),visibility 0s .45s}
.toolbar.tb-open .tb-fold{opacity:1;transform:none}
.tb-toggle svg{transition:transform .45s cubic-bezier(.22,.8,.3,1);transform:rotate(90deg)}.toolbar.tb-open .tb-toggle svg{transform:rotate(-90deg)}
.tool.tb-logout{width:auto;padding:0 10px;font:inherit;font-size:11px;letter-spacing:.04em}
@media(max-width:800px){.toolbar{--tw:36px;--tg:4px}.toolbar .tool.tb-logout{width:auto;height:36px}}
.cal-fx{font-size:10px!important;line-height:1.35}.cal-day{min-height:40px}

/* chat tabs sit to the right of the message bar, so more messages fit above it */
.say{align-items:center}.say .tabs{margin:0;flex:none;gap:5px}.say .tabs button{flex:none;padding:0 11px;height:38px;font-size:12px}

/* closing a popup: it fades out first, then the game screen fades back in (never both at once) */
.modal.leaving,.fullpage.leaving,#forum-overlay.leaving{transition:opacity .25s ease}
#root{transition:opacity .45s ease}#root.quick{transition-duration:.3s}

/* controller: the highlighted button shows only while a gamepad is in use */
.pad-on .pad-focus{outline:2px solid var(--green)!important;outline-offset:2px;box-shadow:0 0 12px rgba(var(--g),.55)!important;border-radius:6px}
.pad-hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:300;padding:8px 14px;font-size:11px;color:var(--white);background:var(--field-bg);border:1px solid var(--line);border-radius:8px;animation:fadein .4s ease both;transition:opacity .8s ease;pointer-events:none;max-width:92vw;text-align:center}.pad-hint.out{opacity:0}

/* top-right menu, v2: [arrow][Logout] on the content's right edge; the icons drop downward beside it */
.toolbar{flex-wrap:nowrap}
.toolbar .tb-col{position:absolute;left:calc(100% + 8px);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--tg)}
.toolbar.tb-over .tb-col{left:auto;right:0;top:calc(100% + 6px);align-items:flex-end}
.toolbar .tb-fold{transition:margin-bottom .45s cubic-bezier(.22,.8,.3,1),margin-right 0s,opacity .3s ease,transform .45s cubic-bezier(.22,.8,.3,1);transform-origin:center top}
.toolbar:not(.tb-open) .tb-fold{margin-right:0;margin-bottom:calc(-1 * (var(--tw) + var(--tg)));transform:translateY(-10px) scale(.4);transition:margin-bottom .45s cubic-bezier(.22,.8,.3,1),opacity .25s ease,transform .45s cubic-bezier(.22,.8,.3,1),visibility 0s .45s}
.toolbar.tb-open .tb-fold{margin-bottom:0;transform:none}
.tb-toggle svg{transform:rotate(-90deg)}.toolbar.tb-open .tb-toggle svg{transform:rotate(0deg)}
.toolbar .pal-menu{top:0;left:calc(100% + 40px);right:auto}.toolbar.tb-over .pal-menu{left:auto;right:0;top:calc(100% + 40px)}

/* "Connected" lives at the right end of the announcement bar */
.ann .connection-text{flex:none;align-self:center;margin-left:10px;white-space:nowrap;font-size:10px;color:var(--dim)}
.ann .connection-text::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--dim);vertical-align:middle}
.ann .connection-text[data-state=connected]::before{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.toolbar .pal-menu,.toolbar.tb-over .pal-menu{left:auto;right:0;top:calc(100% + 6px)}

/* world events and legends */
.ann-text p.world{color:#f2c14e;text-shadow:0 0 8px rgba(242,193,78,.45)}
.world-shadow{position:fixed;inset:0;z-index:120;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,.2),rgba(0,0,0,.82));opacity:0;animation:wshadow 6.5s ease-in-out both}
@keyframes wshadow{0%{opacity:0}25%{opacity:1}65%{opacity:.9}100%{opacity:0}}
.wd-name{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--white)}.wd-name .ico{color:#f2c14e}
.wd-bar{height:10px;margin:6px 0 3px}.wd-nums{display:flex;justify-content:space-between;font-size:11px}
.wd-strike{border-color:#f2c14e;color:#f2c14e}.wd-top{margin-top:8px}.wd-top .tw-row{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:2px 0;font-size:12px}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:8px 0 14px}
.lg-card{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 10px;min-height:120px;border:1px solid var(--line2);border-radius:12px;background:rgba(var(--sh),.2);color:var(--white);font:inherit}
.lg-card.found{cursor:var(--cur-a,pointer);border-color:rgba(242,193,78,.5);box-shadow:0 0 14px rgba(242,193,78,.12)}.lg-card.found:hover{border-color:#f2c14e;transform:translateY(-2px)}
.lg-card b{font-weight:500;color:#f2c14e}.lg-card.hidden{opacity:.55;border-style:dashed}.lg-card.hidden b{color:var(--dim)}.lg-ico{color:#f2c14e}.lg-card.hidden .lg-ico{color:var(--dim)}
.lg-hist{color:#f2c14e}
.lg-quote{font-style:italic;color:var(--white);text-align:center;margin:6px 0 14px;font-size:14px}
.lg-stats{border:1px solid var(--line2);border-radius:10px;padding:6px 12px;margin-bottom:10px}.lg-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid rgba(var(--hi),.05);font-size:12px}.lg-row:last-child{border:0}.lg-row b{font-weight:500;color:var(--green2);text-align:right}
.lg-sec{text-align:left;margin:10px 0}.lg-sec>span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.lg-sec p{margin:3px 0 0;color:var(--white);font-size:12px;line-height:1.55}.lg-pass{display:block;color:#f2c14e;font-weight:500;margin-top:2px}.lg-by{color:var(--dim)!important}
.wd-top .tw-row{align-items:center}

/* fishing, cleaner: step guide, a clear "steer this way" hint, and tall narrow buttons */
.fg-steps{display:flex;gap:6px;font-size:10px;color:var(--dim)}.fg-steps span{padding:3px 9px;border:1px solid var(--line2);border-radius:99px}.fg-steps .on{color:var(--green);border-color:var(--green)}.fg-steps .done{opacity:.5}
.fg-water{height:150px}.fg-arrow{bottom:10px;font-size:13px;font-weight:600}
.fg-ctrls{width:auto;gap:10px;justify-content:center;align-items:stretch}
.fg-btn{flex:none;width:92px;height:118px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:12px}
.fg-btn b{font-size:26px;font-weight:400;line-height:1}.fg-btn span{font-size:11px;line-height:1.2}
.fg-btn.reel{width:112px;height:140px;align-self:center;border-color:var(--green)}
.fg-ctrls.hl .fg-btn:nth-child(3),.fg-ctrls.hr .fg-btn:nth-child(1){border-color:#fb4;background:rgba(251,187,68,.16);box-shadow:0 0 14px rgba(251,187,68,.35)}
.fg-meters{gap:10px}.fg-bar{height:10px}

/* top-right menu, v3: [icons...][arrow][Logout]; the icons fan out to the LEFT of the arrow */
.toolbar .tb-col,.toolbar.tb-over .tb-col{position:absolute;left:auto;right:calc(100% + var(--tg));top:0;bottom:auto;display:flex;flex-direction:row;align-items:center;gap:var(--tg)}
.toolbar .tb-fold,.toolbar:not(.tb-open) .tb-fold{margin:0;transform-origin:right center;transition:opacity .3s ease,transform .45s cubic-bezier(.22,.8,.3,1),visibility 0s}
.toolbar:not(.tb-open) .tb-fold{opacity:0;transform:translateX(28px) scale(.4);pointer-events:none;visibility:hidden;transition:opacity .25s ease,transform .45s cubic-bezier(.22,.8,.3,1),visibility 0s .45s}
.toolbar.tb-open .tb-fold{opacity:1;transform:none;visibility:visible}
.tb-toggle svg{transform:rotate(90deg)}.toolbar.tb-open .tb-toggle svg{transform:rotate(-90deg)}
.toolbar .pal-menu,.toolbar.tb-over .pal-menu{left:auto;right:0;top:calc(100% + 6px)}

/* announcement bar: one centered line; long lines scroll, then fade */
.ann{align-items:center!important}.ann .horn,.ann>.tool{align-self:center!important}
.ann-text{display:flex!important;flex-direction:column;justify-content:center!important;align-self:stretch;overflow:hidden}
.ann-text p{display:block;overflow:hidden;text-overflow:clip;white-space:nowrap;line-height:1.2}
.ann-text p.welcome-glow{white-space:nowrap}
.ann-inner{display:inline-block;white-space:nowrap}
.ann-inner.scrolling{animation:annscroll var(--dur,6s) linear 1.4s both}
@keyframes annscroll{from{transform:translateX(0)}to{transform:translateX(var(--sc,0))}}
@media(prefers-reduced-motion:reduce){.ann-inner.scrolling{animation:none}.ann-text p{text-overflow:ellipsis}}

/* one chat channel button, left of the message box */
.say .chan-btn{flex:none;min-width:78px;height:38px;padding:0 12px;background:rgba(var(--g),.06);border:1px solid var(--green);color:var(--green);border-radius:8px;font:inherit;font-size:12px;cursor:var(--cur-a,pointer)}
.say .chan-btn.glow{animation:tabglow 1.6s ease-in-out infinite}
.pane p.ann-line{color:var(--green2,var(--green))}.pane .when{color:var(--dim)}.pane p.gld strong{color:var(--green)}.pane p.ach{color:var(--green)}
.place-panel .place-desc{font-style:normal}

/* shop: a title, category buttons, and a window that reaches down the box */
.place-panel.hasshop{display:flex;flex-direction:column;overflow:hidden}
.place-panel.hasshop .shop{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;margin-bottom:0;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.shop-top{position:sticky;top:0;z-index:2;background:var(--field-bg,#120a08);margin:0 -12px;padding:8px 12px 6px;border-bottom:1px solid var(--line2)}
.shop-title{color:var(--green);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.shop-cats{display:flex;flex-wrap:wrap;gap:5px}.shop-cat{background:none;border:1px solid var(--line2);color:var(--dim);border-radius:99px;padding:3px 10px;font:inherit;font-size:10px;cursor:var(--cur-a,pointer)}
.shop-cat.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.07)}

/* the pointer: chosen in the palette menu (silver gauntlet by default); --cur-n is the normal one, --cur-a the one over clickable things */
html,body{cursor:var(--cur-n,default)}
a[href],button:not(:disabled),[role=button],select:not(:disabled),summary,label[for],input[type=checkbox],input[type=submit],.namelink,.pick-btn,.pick-opt,.loc-btn,.loc-head,.slot.click,.chip,.q-btn:not(:disabled),.tool,.lb-tab,.shop-cat,.home,.fg-water,.fg-btn,.fg-x,.msg-x,.horn{cursor:var(--cur-a,pointer)}
button:disabled,.q-btn:disabled{cursor:var(--cur-n,not-allowed)}
.tip{cursor:var(--cur-n,help)}

/* controller: a drop-down list that the D-pad can drive */
.pad-picker{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:400;min-width:220px;max-width:86vw;max-height:70vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--field-bg,#120a08);border:1px solid var(--green);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.pad-picker button{background:none;border:1px solid var(--line2);color:var(--white);border-radius:6px;padding:9px 12px;font:inherit;font-size:12px;text-align:left}
.pad-picker button.on{color:var(--green);border-color:var(--green)}

/* fishing: one ring */
.fg-water{position:relative;width:min(92vw,420px);height:230px;display:flex;align-items:center;justify-content:center;cursor:var(--cur-a,pointer);overflow:hidden;background:linear-gradient(rgba(var(--g),.03),rgba(var(--g),.14))}
.fg-ring{position:relative;width:128px;height:128px;touch-action:none}.fg-ring svg{width:100%;height:100%;display:block}
.fg-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:7}.fg-prog{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}
.fg-core{fill:#08090c}
.fg-gem{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;background:#3ddc84;transform:translate(-50%,-50%) scale(.28);box-shadow:0 0 14px rgba(61,220,132,.45);opacity:0;transition:opacity .3s}
.fg-gem::after{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;background:rgba(255,255,255,.55);transform:translateX(-50%)}
.fishgame.reeling .fg-gem{opacity:1}
.fg-dist{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:11px;color:var(--white);opacity:0}.fishgame.reeling .fg-dist{opacity:.9}
.fg-bob{position:absolute;left:50%;top:18%;width:10px;height:10px;border-radius:50%;background:var(--fc);box-shadow:0 0 10px var(--fc);transform:translateX(-50%);opacity:0}
.fishgame.cast:not(.reeling) .fg-bob{opacity:.9}.fishgame.cast:not(.reeling) .fg-ring{opacity:.35}
.fishgame.bite .fg-ring{opacity:1;animation:fgdip .25s ease-in-out infinite}
.fishgame.danger .fg-ring{filter:drop-shadow(0 0 10px rgba(255,59,59,.7))}

.toolbar{transition:opacity .5s ease}body.scene-on .toolbar{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
@keyframes fgdip2{50%{transform:scale(1.06)}}
.fishgame.bite .fg-ring{animation:fgdip2 .25s ease-in-out infinite}

/* gold sits on the same line as the Equipment text and its button */
.inv .stats-head{align-items:center!important}
.inv .stats-head .inv-gold{align-self:center!important;margin:0 0 0 -6px!important;display:inline-flex;align-items:center;gap:4px;line-height:1}
.inv .stats-head .inv-title,.inv .stats-head .inv-title h2{line-height:1;margin-top:0;margin-bottom:0}
.inv .stats-head .tool{margin-top:0!important;margin-bottom:0!important;align-self:center!important}

/* the X lives inside its own box, top right */
.fullpage>.fp-wrap{position:relative}
.fullpage .fp-wrap>.pf-x{position:sticky;top:-14px;float:right;z-index:3;margin:-12px -10px 0 0;width:30px;height:30px;font-size:22px;line-height:1}
.none.fr-none{font-size:9px;line-height:1.4}

/* the map takes over the place box, like the quest book */
.place-panel.mapmode>:not(.place-title):not(.mapbook){display:none!important}.mapbook{display:none!important}
.place-panel.mapmode>.mapbook{display:block!important;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;padding-right:4px}
.place-panel.mapmode{display:flex;flex-direction:column;overflow:hidden}
.place-panel.qmode>.mapbook{display:none!important}
.mapbook .pf-head{margin:6px 0 4px}.mapbook .pf-head h2{font-size:12px;color:var(--green);letter-spacing:.1em;text-transform:uppercase;margin:0}
:root{--xp-col:#b794ff;--q-col:#4fd1c5}
:root[data-theme="alt"]{--xp-col:#b9a3e3;--q-col:#8fc7c0}
:root[data-theme="light"]{--xp-col:#6b3fc4;--q-col:#0d7f78}
:root[data-theme="dark"]{--xp-col:#c4a1ff;--q-col:#3fd0c0}
:root[data-theme="ember"]{--xp-col:#d3a8ff;--q-col:#5fd4c8}
:root[data-theme="royal"]{--xp-col:#e6c4ff;--q-col:#7fe3d4}
:root[data-theme="water"]{--xp-col:#d2a8ff;--q-col:#ffd27a}
:root[data-theme="earth"]{--xp-col:#d0a8ff;--q-col:#f0b66a}
/* local chat: XP lines and quest lines each get their own color, tuned per palette */
.pane p.xpl{color:var(--xp-col)!important}.pane p.qst{color:var(--q-col)!important}

.pal-sec{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:8px 6px 2px;padding-top:6px;border-top:1px solid var(--line2)}
.pal-cur{grid-row:1/3;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.pal-cur img{width:22px;height:22px;display:block}
.pal-menu{max-height:calc(100vh / var(--zoom, 1) - 90px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

/* the invite box matches the other dark boxes */
.cc-field.cc-ref{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:12px 0 4px;font-size:inherit;color:inherit;text-align:left}
.cc-field.cc-ref input{width:100%;font-size:inherit;padding:10px}
.cc-field select,.cc-field input{height:42px;box-sizing:border-box}

/* the announcement history takes over the place box */
.place-panel.annmode>:not(.place-title):not(.annbook){display:none!important}.annbook{display:none!important}
.place-panel.annmode>.annbook{display:flex!important;flex-direction:column;flex:1;min-height:0}
.place-panel.annmode{display:flex;flex-direction:column;overflow:hidden}
.place-panel.mapmode>.annbook,.place-panel.qmode>.annbook{display:none!important}
.annbook .pf-head{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 6px}.annbook .pf-head h2{font-size:12px;color:var(--green);letter-spacing:.1em;text-transform:uppercase;margin:0}
.annbook .ann-list{flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

/* stats views: one fixed box, scrollbar always at the far right */
.stats .sv-stack>.sv{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;scrollbar-gutter:stable;min-height:0}
.stats .sv-stack>.sv:nth-child(n+2){contain:size}
.stats .sv-stack>.sv:first-child{contain:inline-size}
.stats{overflow:hidden}

.tool.tb-logout{width:var(--tw,35px);padding:0}
.inv .stats-head .inv-gold{margin-left:0!important}
.inv .stats-head .tool{transform:translateY(-3px)}

.pane p.ach-click{cursor:var(--cur-a,pointer);text-decoration:none}.pane p.ach-click:hover{color:var(--gold,var(--green));filter:brightness(1.25)}
.ac-go{cursor:var(--cur-a,pointer)}
.ac-row.ac-go .ac-desc{opacity:.85}

/* forum: no colour flash while the frame loads, and a tidier header */
#forum-overlay{background:transparent}   /* the animated waves of the game page keep moving behind the forum */
.f-head{padding:16px 18px}.f-titles h1{font-size:16px;letter-spacing:.04em;line-height:1.3}.f-tag{margin:3px 0 0;color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.f-nav{gap:8px}.f-nav .f-me{margin-right:6px;color:var(--value)}
.f-nav a.f-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:rgba(var(--sh),.25);color:var(--green);font-size:11px;letter-spacing:.04em;text-decoration:none;transition:background .15s,border-color .15s}
.f-nav a.f-btn:hover{border-color:var(--green);background:rgba(var(--g),.12)}
.forum .panel{padding:14px 18px}.forum .f-cat h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
.f-row:not(.cols):hover{background:rgba(var(--g),.05)}.f-row{padding:11px 6px}

/* pet box: big icons left, dots in the middle, details stacked right */
.pet-chip{display:flex;align-items:center;gap:10px}
.pet-icons{display:inline-flex;align-items:center;gap:8px;flex:none}.pet-chip .pet-face{display:inline-flex}
.pet-chip .pet-dots{flex:1;justify-content:center}
.pet-info{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0;flex:none;max-width:45%}
.pet-info .pet-name{flex:none;font-size:11px;max-width:100%}.pet-info em{font-style:normal;color:var(--dim);font-size:10px}
/* chat channel menu */
.say{position:relative}
.chan-menu{position:absolute;left:0;bottom:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;min-width:96px;padding:4px;background:#0b0705;background:color-mix(in srgb,#000 82%,var(--panel-bot,#000));border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.chan-opt{background:none;border:0;border-radius:5px;padding:6px 10px;text-align:left;font:inherit;font-size:11px;color:var(--dim);cursor:var(--cur-a,pointer)}
.chan-opt.on{color:var(--green)}.chan-opt.glow{animation:tabtext 1.6s ease-in-out infinite}
/* leaderboard: one pixel smaller */
#lb p,#lb .none{font-size:11px}

.place-title .pt-left{display:flex;align-items:center;gap:12px;min-width:0}.pt-act:empty{display:none}
.rest-btn{background:rgba(var(--g),.06);border:1px solid var(--green);color:var(--green);border-radius:99px;padding:3px 12px;font:inherit;font-size:11px;cursor:var(--cur-a,pointer)}.rest-btn:disabled{opacity:.45;cursor:var(--cur-n,default)}

/* combat v2: a compact dark box (enemy, log, buttons) with the four quick buttons underneath it */
.cb-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(540px,94vw)}
.cb-wrap.placed{position:absolute}.cb-wrap.full{position:static}
.cb-stack>.cb{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;max-width:none;padding:22px 32px 20px;gap:10px}
.cb-stack>.cb .cb-hist{background:none;border:0;padding:0;height:78px}
.cb-stack .cb-box{border:0;background:transparent;padding:0;gap:12px}
.cb-stack .cb-now{min-height:64px}
.cb-tools-slot{width:100%}.cb-tools-slot .cb-tools{position:static;display:flex;justify-content:center;gap:10px}
.cb-tool.locked{cursor:var(--cur-n,not-allowed)}
.cb-acts button:disabled{opacity:.35}

/* combat side panel (small font like the stat-box skills) and bigger action tiles */
.cb-side{position:absolute;left:calc(100% + 12px);top:0;width:230px;padding:12px 14px;background:rgba(var(--sh),.72);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(2px);animation:fadein .25s both}
.cb-wrap.full .cb-side{position:static;width:100%;box-sizing:border-box}
.cbs-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--green);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.cbs-x{background:none;border:0;color:var(--dim);font:inherit;font-size:16px;line-height:1;cursor:var(--cur-a,pointer);padding:0 2px}
.cbs-list .sk-row{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:1px 8px;padding:3px 0;border-bottom:1px solid rgba(var(--hi),.035);color:var(--green);font-size:10px}
.cbs-list .sk-name{font-size:10px}.cbs-list .sk-lv{font-size:10px;color:var(--dim)}.cbs-list .sk-bar{grid-column:2/4}
.cbs-note{margin:6px 0 0;color:var(--dim);font-size:10px}
.cb-tool.on{border-color:var(--green);background:rgba(var(--g),.18)}
.cb-stack>.cb .cb-acts{gap:10px;flex-wrap:nowrap;height:auto;min-height:0;overflow:visible}
.cb-stack>.cb .cb-acts button{flex:1 1 0;min-width:0;height:54px;border-radius:10px;font-size:13px;letter-spacing:.06em;background:rgba(var(--g),.06)}

.cb-stack>.cb .cb-hist{height:60px}

.cb-result.fled h1{color:var(--dim)}

.game-foot .foot-link{color:#fff;text-decoration:none}.game-foot .foot-link:hover{color:#fff;text-decoration:underline}

/* stats box header: icons and title nudged up to give the text below more room */
.stats .stats-head .pt-btns{transform:translate(4px,-4px)}
.stats .stats-head h2{transform:translateY(-3px)}

/* room above the content for the top-right icons (one HUD gap between them and the stats box) */
@media(min-width:801px){#game.on{padding-top:46px}}
/* gold and the Equipment title sit a little higher */
.inv .stats-head .inv-gold,.inv .stats-head .inv-title{transform:translateY(-3px)}

.cb-stack{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.cb-wrap.placed{display:flex;align-items:center;justify-content:center}
@media(min-width:801px){.window{height:clamp(660px,calc(100vh / var(--zoom) - 104px),var(--wh,760px))}}

.cb-stack>.cb .cb-acts button{font-weight:700}
.cb-stack>.cb .cb-acts button.locked:disabled{opacity:.18}
.cb-tool{font-weight:700}
.cb-band{margin:4px -32px;padding:10px 32px;background:rgba(0,0,0,.24);display:flex;flex-direction:column;gap:6px}
.cb-wrap.full .cb-band{margin-left:-20px;margin-right:-20px}

/* the animated waves stay visible behind every popup page */
.fullpage{background:rgba(var(--sh),.28)}
.modal{background:rgba(var(--sh),.45)}
.cb-stack .cb-foe{width:92%}

body.page-on .toolbar{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.col-grid{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.col-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.25);font-size:11px;color:var(--green)}
.col-chip.unk{color:var(--dim);opacity:.6}
.col-chip.rar-uncommon{color:#6fcf6f}.col-chip.rar-rare{color:#5aa9ff}.col-chip.rar-legendary{color:#ffa94d}.col-chip.rar-mythic{color:#ff6ad5}
.spellsv .none{margin:6px 0;color:var(--dim);font-size:11px}

/* announcement: letters print one by one; long messages use two centred lines */
.ann-inner{display:inline-block;max-width:100%;white-space:inherit}
.ann-inner i{font-style:normal;opacity:0}.ann-inner i.on{opacity:1}
.ann-inner .aw{white-space:nowrap}
.ann-text p.multi{white-space:normal!important;max-height:calc(2.4em + 1px);overflow:hidden;display:flex;align-items:center}
.ann-text p.multi .ann-inner{display:block;width:100%}
.ann-text p{text-overflow:clip}

/* chat: text one size smaller, panel a little taller (room for one more message) */
.chat-panel .pane p,.chat-panel .pane .when,.chat-panel .pane strong,.chat-panel .say input,.chat-panel .say .chan-btn,.chat-panel .say button,.chat-panel .cmds button{font-size:11px}
@media(min-width:801px){.chat-panel{flex:0 0 clamp(194px,28%,262px)}}

/* daily news: buffs as columns of bubbles */
.bf-grid{display:flex;gap:10px;justify-content:center;align-items:flex-start;margin:6px 0 14px;flex-wrap:wrap}
.bf-col{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:96px}
.bf-cat{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim,#8a8f98);margin-bottom:2px}
.bf-bub{font-size:11px;padding:3px 11px;border-radius:99px;border:1px solid var(--line2);background:rgba(var(--sh),.28);color:var(--white);cursor:var(--cur-a,pointer);white-space:nowrap}
.bf-bub.buff{border-color:var(--green);color:var(--green)}.bf-bub.debuff{border-color:#c0605a;color:#e08a84}.bf-bub.event{border-color:#c9a24b;color:#e0c070}
.bf-none{font-size:10px;opacity:.45}
.nw-list.small{font-size:10px}.nw-list.small .nw-text{font-size:10px}
.dl-count{display:flex;gap:18px;justify-content:center;font-size:11px;margin-top:12px;color:var(--dim,#8a8f98)}.dl-count b{color:var(--white)}

/* close X: a real, easy-to-hit button */
.pf-x,.fullpage .pf-x,.fullpage .fp-wrap>.pf-x,.cbs-x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.35);color:var(--dim);font:inherit;font-size:16px;line-height:1;cursor:var(--cur-a,pointer);transition:color .15s,border-color .15s,background .15s}
.pf-x:focus-visible{color:var(--white);border-color:var(--green);background:rgba(var(--g),.12);outline:none} .pf-x:hover,.cbs-x:hover{outline:none}
.fullpage .fp-wrap>.pf-x{width:28px;height:28px}
.dl-hi{font-size:15px!important;color:#f0c674!important;margin:10px 0 14px!important;letter-spacing:.01em}

/* pet button: front (icons) and back (text) fade into each other */
.pet-chip{position:relative;display:grid!important;grid-template-columns:1fr;align-items:center}
.pet-chip>.pc-front,.pet-chip>.pc-back{grid-area:1/1;transition:opacity .35s ease;min-width:0}
.pet-chip>.pc-front{display:flex;align-items:center;gap:10px}
.pet-chip>.pc-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;font-size:10px;line-height:1.35;opacity:0;pointer-events:none}
.pet-chip.flip>.pc-front{opacity:0;pointer-events:none}.pet-chip.flip>.pc-back{opacity:1;pointer-events:auto}
.pc-l1{color:var(--white);font-size:11px}.pc-l2,.pc-dim{color:var(--dim)}.pc-need{color:var(--green)}
.pc-act,.pc-more{font:inherit;font-size:10px;border:1px solid var(--line2);background:rgba(var(--sh),.3);color:var(--white);border-radius:99px;padding:1px 9px;cursor:var(--cur-a,pointer)}
.pc-act:disabled{opacity:.45}
.pc-more{margin-top:2px;color:var(--dim)}
.pet-need{position:absolute;top:6px;right:8px;display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border:1px solid var(--green);border-radius:50%;color:var(--green);animation:petblink 1.6s ease-in-out infinite}
@keyframes petblink{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.pet-need{animation:none}}

/* subscribe: a small gold link in the header of the support box; chat channel: a quiet text chip with a caret */
.support-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.support-head h2{margin:0}
.sub-link{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#e0c070;text-decoration:none;border-bottom:1px solid rgba(224,192,112,.4);padding:1px 1px 2px;cursor:var(--cur-a,pointer);transition:color .15s,border-color .15s}

.say .chan-btn{min-width:0!important;height:30px!important;padding:0 8px 0 4px!important;background:none!important;border:0!important;border-bottom:1px solid var(--line2)!important;border-radius:0!important;color:var(--white)!important;display:inline-flex;align-items:center;gap:5px}
.say .chan-btn::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}

.say .send-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;margin:0;border:1px solid var(--line2);border-radius:50%;background:none;color:var(--green);cursor:var(--cur-a,pointer)}
.say .send-ico:disabled{opacity:.4;cursor:var(--cur-n,default)}

.chg{color:#fff;font-weight:600}

/* footer: copyright bottom-left, menu icons bottom-right */
.game-foot{text-align:left!important}
.toolbar.tb-bottom .pal-menu,.toolbar.tb-bottom.tb-over .pal-menu{top:auto;bottom:calc(100% + 6px)}
.square{grid-template-columns:minmax(0,1fr) 150px!important;gap:12px!important}
.sq-online{padding-left:10px!important}.sq-online .online-list,.sq-online h3{font-size:10px}

.place-panel.smith{overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.place-panel.smith>*{flex:none!important}
.place-panel.smith .shop{overflow:visible!important;max-height:none!important;height:auto!important}
.place-panel.smith .xtra,.place-panel.smith .xtra.tall{max-height:none!important;overflow:visible!important}
.support-head h2{white-space:nowrap}

/* chronicle */
.cp{font-style:normal;margin-left:6px;font-size:10px;font-weight:600}
.cp0{color:#e0746c}.cp1{color:#e0955c}.cp2{color:#e0c070}.cp3{color:#8fd18a}.cp4{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.5)}
.fp-foot.right{text-align:right}
.ch-wrap{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;margin-top:10px}
.ch-side{display:flex;flex-direction:column;gap:2px;min-width:0}.ch-list{display:flex;flex-direction:column;gap:1px}
.ch-loc{display:flex;justify-content:space-between;align-items:center;gap:6px;background:none;border:0;border-left:2px solid transparent;color:var(--white);font:inherit;font-size:11px;padding:3px 8px;text-align:left;cursor:var(--cur-a,pointer)}
.ch-loc.on{border-left-color:var(--green);background:rgba(var(--g),.12);color:var(--green)}
.ch-page{min-width:0}.ch-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}.ch-head h3{margin:0;font-size:14px;color:var(--place)}
.ch-cat{margin-top:12px}.ch-cat-h{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green);margin-bottom:5px}.ch-cat-h em{margin-left:auto;font-style:normal;color:var(--dim)}
.ch-items{display:flex;flex-wrap:wrap;gap:5px}
.ch-it{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:2px 9px;border:1px solid var(--line2);border-radius:99px;color:var(--dim)}.ch-it.done{color:var(--white);border-color:var(--green)}.ch-it em{font-style:normal;color:#e0c070}
.mp-txt b .cp{margin-left:5px}
@media(max-width:700px){.ch-wrap{grid-template-columns:1fr}.ch-list{flex-direction:row;flex-wrap:wrap}}

.chest-row{display:flex;align-items:center;gap:8px;margin:8px 0}.chest-lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.chest-ico{display:inline-flex;color:var(--dim);opacity:.55;transition:color .3s,opacity .3s,filter .3s}.chest-ico.got{color:#f0c674;opacity:1;filter:drop-shadow(0 0 4px rgba(240,198,116,.6))}
.chest-n{font-size:10px}
.pf-season{background:none;border:0;border-bottom:1px dotted var(--green);padding:0;color:var(--green);font:inherit;cursor:var(--cur-a,pointer)}

/* ---- combat v3 ---- */
/* the combat box is always dark, whatever palette is chosen */
.scene.combat{--sh:0,0,0;--hi:255,255,255;--white:#f1ede8;--dim:#a3a8b0;--line2:rgba(255,255,255,.18);--track:#6a2a1e}
:root[data-theme="light"] .scene.combat{--green:#7fd6a4;--green2:#9be0b8;--g:127,214,164;--line:rgba(127,214,164,.4);--bar-hp:#3fc07e;--bar-mp:#6aa5ee;--bar-en:#e2b95a;--bad:#e0746c;--warn:#e2b95a;--cmb:#f0b46a;--on-accent:#000}
.cb.wide,.cb-stack>.cb{background:rgba(12,7,6,.8)!important}
/* action buttons: icons, same size, dark until it is your turn */
.cb-acts.in>*{animation:fadein .5s backwards!important}
.cb-stack>.cb .cb-acts button.ico{display:inline-flex;align-items:center;justify-content:center;padding:0}
.cb-stack>.cb .cb-acts button:disabled,.cb-stack>.cb .cb-acts.wait button{opacity:.28!important;filter:grayscale(.6);cursor:var(--cur-n,not-allowed)}
.cb-stack>.cb .cb-acts button.locked:disabled{opacity:.14!important}
.cb-acts .none{font-size:11px;color:var(--dim)}
/* bars closer together, centered */
.cb-stack .cb-me{display:grid;grid-template-columns:repeat(3,minmax(0,104px))!important;justify-content:center;gap:10px!important}
.cb-stack .cb-me .cb-stat{align-items:center}
/* enemy symbols and inspect popup */
.cb-foe .cb-name{display:flex;align-items:center;justify-content:center;gap:8px}
.cb-syms{display:inline-flex;align-items:center;gap:5px}
.cb-sym{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--line2);border-radius:6px;color:var(--green);cursor:help;background:rgba(var(--g),.06)}
.cb-foe{cursor:help}
.cb-inspect{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:6;width:min(310px,88%);box-sizing:border-box;padding:14px 16px;border:1px solid var(--green);border-radius:12px;background:rgba(10,6,5,.95);color:var(--white);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s .2s;text-align:center}
.cb-inspect.on{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .2s ease,transform .2s ease}
.ci-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;color:var(--green)}.ci-head b{color:var(--white);font-size:14px;font-weight:600}.ci-head span{color:var(--dim);font-size:11px}
.ci-tags{display:flex;justify-content:center;gap:6px;margin-bottom:8px}.ci-tags span{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:2px 9px;border:1px solid var(--line2);border-radius:99px;color:var(--green)}
.ci-lore{margin:0 0 8px;font-size:11px;line-height:1.55;color:var(--white)}.ci-hp{margin:0;font-size:10px;color:var(--dim)}
/* a defeat keeps the whole screen dark until Continue */
body.dead::after{opacity:.62}
.sk-row.inv-use .q-btn{margin-left:auto;padding:1px 9px;font-size:10px}
.cb-inspect p{font-size:11px!important;line-height:1.5!important}

/* fishing: the float sits dead centre of the ring while you wait, with a soft pulse */
.fg-bob{top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:12px;height:12px;z-index:2;animation:fgpulse 1.8s ease-in-out infinite}
.fishgame.bite .fg-bob{animation:fgflash .22s ease-in-out infinite;background:#fff;box-shadow:0 0 18px #fff}
.fishgame.reeling .fg-bob{opacity:0!important;animation:none}
@keyframes fgpulse{50%{transform:translate(-50%,-50%) scale(1.5);opacity:.6}}
@keyframes fgflash{50%{transform:translate(-50%,-50%) scale(1.9)}}
.fishgame.cast:not(.reeling) .fg-ring{opacity:.55}

.q-help{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:6px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--dim);font:500 9px/1 inherit;font-family:inherit;vertical-align:middle;cursor:var(--cur-a,pointer)}


/* stats box header: small title, four icons on one fixed line that never moves between views */
.stats .stats-head{display:flex;justify-content:space-between;align-items:center;height:26px;min-height:26px;margin:0 0 8px}
.stats .stats-head h2{font-size:10px!important;letter-spacing:.16em;line-height:26px;margin:0!important;transform:none!important;white-space:nowrap}
.stats .stats-head .pt-btns{transform:none!important;gap:5px;height:26px;align-items:center;flex:none}
.stats .stats-head .pt-btns .tool{width:24px;height:24px;margin:0!important;transform:none!important;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}

/* spell tree inside the stats box: icon nodes joined by a line, lit when learned */
.st-tabs{display:flex;gap:4px;justify-content:center;margin:2px 0 6px;flex-wrap:wrap}
.st-el{background:none;border:1px solid var(--line2);border-radius:99px;color:var(--dim);font:inherit;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;cursor:var(--cur-a,pointer)}
.st-el.on{color:var(--green);border-color:var(--green)}
.st-tree{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 4px;justify-items:center;padding:4px 2px;position:relative}
.st-node{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:rgba(var(--g),.04);color:var(--dim);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:var(--cur-a,pointer)}
.st-node::after{content:"";position:absolute;left:100%;top:50%;width:10px;height:1px;background:var(--line2)}
.st-node:nth-child(5n)::after,.st-node:last-child::after{display:none}
.st-node.known{color:var(--green);border-color:var(--green);background:rgba(var(--g),.14);box-shadow:0 0 10px rgba(var(--g),.35)}
.st-node.open{color:var(--white);border-color:#fb4;box-shadow:0 0 8px rgba(251,187,68,.3)}
.st-node.locked{opacity:.45}
.st-node{min-width:34px;max-width:34px;box-sizing:border-box;flex:none;aspect-ratio:1/1}

.glo.arena-line{color:#f6b94a}.glo .arena-tag{display:inline-flex;align-items:center;gap:4px;color:#ff8a4a}

.cc-hc{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:11px;color:var(--dim);cursor:var(--cur-a,pointer)}.cc-hc input{accent-color:var(--green)}.cc-hc:has(input:checked){color:#f66}
.hc-end{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadein .8s both}
.hc-card{max-width:380px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--white)}.hc-card h2{margin:0;letter-spacing:.14em;font-size:16px;color:#f66}.hc-card p{margin:0;font-size:12px;line-height:1.6;color:var(--dim)}.hc-card svg{color:#f66}
.pf-hc{color:#f66}.sq-hall{margin-top:10px;display:inline-flex;gap:6px;align-items:center}

.poll{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line2)}.poll:first-of-type{border-top:0}.poll-q{color:var(--white);font-size:13px}
.poll-opt{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(var(--g),.04);color:var(--white);font:inherit;font-size:12px;overflow:hidden;cursor:var(--cur-a,pointer)}
.poll-opt.res{cursor:default}.poll-opt.res i{position:absolute;left:0;top:0;bottom:0;background:rgba(var(--g),.18)}.poll-opt.res span,.poll-opt.res b{position:relative}.poll-opt.mine{border-color:var(--green)}
.poll.closed .poll-q{color:var(--dim)}
.stats .pt-btns .tool[hidden]{display:none}.fresh-tab{animation:freshtab 1s ease-in-out 4}@keyframes freshtab{50%{box-shadow:0 0 12px var(--green);border-color:var(--green)}}

/* pointer highlight colors (the pointer art itself lives in common.js) */
.hot-red:not(:disabled){cursor:var(--cur-red,pointer)!important}
button:disabled,.locked{cursor:var(--cur-n,not-allowed)!important}
body{cursor:var(--cur-n,default)}

/* character creation: race, gender and element share one line */
#cc-form{grid-template-columns:repeat(3,1fr)}#cc-form .cc-field.full{grid-column:auto}#cc-form>.cc-field:nth-child(5){grid-column:span 2}
@media(max-width:520px){#cc-form{grid-template-columns:1fr 1fr}#cc-form>.cc-field:nth-child(5){grid-column:auto}}

/* a custom pointer never turns back into the system one: text boxes, tips, scrollbars' neighbours and everything else keep it */
:where(html.cur-custom) *{cursor:var(--cur-n)}
html.cur-custom input[type=checkbox],html.cur-custom input[type=radio],html.cur-custom summary{cursor:var(--cur-a)}
html.cur-custom .poll-opt.res{cursor:var(--cur-n)}
/* controller pointer (left stick) */
#pad-layer{position:fixed;inset:0;z-index:2147483000;cursor:none!important;background:transparent}
#pad-layer *{cursor:none!important}#pad-cur{position:fixed;left:0;top:0;width:32px;height:32px;pointer-events:none;image-rendering:auto}
.pad-hover:not(:disabled){filter:brightness(1.25)}
.chg{font-weight:400!important}

/* pointer colors by what is under it (no outline at all when nothing can be clicked) */
[data-cur=red]:not(:disabled),.hot-red:not(:disabled){cursor:var(--cur-red,pointer)!important}
[data-cur=green]:not(:disabled){cursor:var(--cur-green,pointer)!important}
[data-cur=yellow]:not(:disabled){cursor:var(--cur-yellow,pointer)!important}
[data-cur=a]:not(:disabled){cursor:var(--cur-a,pointer)}
.namelink,.lb-tab,.lb-swap,.mail,.q-help,.pf-season,.sp-tabs button,.st-el,.gd-tabs button,.qb-tabs button,.cb-foe,.cb-tool,.poll-opt,.f-link,.pf-x,.chip,.loc-btn,.loc-head,.forest-explore,.mp-cell:not(:disabled),.fe-txt,.fish-chip{cursor:var(--cur-a,pointer)}
html.cur-custom input:not([type=checkbox]):not([type=radio]),html.cur-custom textarea,html.cur-custom label,html.cur-custom select,html.cur-custom .cb-foe,html.cur-custom .tip,html.cur-custom .xp-bar,html.cur-custom .pet-title{cursor:var(--cur-n)}
button:disabled,.locked{cursor:var(--cur-n,not-allowed)!important}

/* map: completion in a small white box beside the place name */
.mp-txt b .cp.cp-box{display:inline-block;margin-left:7px;padding:0 5px;font-size:9px;line-height:14px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:4px;text-shadow:none;vertical-align:middle}

.sq-intro .sq-name{color:#fff;font-weight:400}

.sq-story{margin-top:12px;padding-top:10px;border-top:1px solid var(--line2);max-width:460px}
.sq-story:empty{display:none}
.sq-story .st-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.sq-story .st-num{color:var(--value)}
.sq-story .st-dots{display:flex;gap:4px;margin-bottom:8px}
.sq-story .st-dots i{flex:1;height:3px;border-radius:2px;background:var(--line2);position:relative}
.sq-story .st-dots i.d{background:var(--green)}
.sq-story .st-dots i.c{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7);animation:stPulse 2.4s ease-in-out infinite}
@keyframes stPulse{50%{opacity:.35}}
.sq-main .sq-story p{margin:0 0 3px}
.sq-story .st-now b{color:#fff;font-weight:500}.sq-story .st-at{color:var(--dim)}
.sq-story .st-next{color:var(--green)!important;font-size:11px}
.shop-top{position:static!important}

.pt-chest{display:inline-flex;align-items:center;margin-left:12px}
.pt-chest .chest-row{margin:0;gap:6px}
.pt-chest .chest-n{font-size:10px}

.stats .sv-stack>.sv:nth-child(n+2){margin-right:-9px;width:calc(100% + 9px)!important;padding-right:5px}
.stats .sv-stack>.sv:first-child{margin-right:-6px;width:calc(100% + 6px)!important}

.pet-need{width:12px!important;height:12px!important;top:9px!important;right:11px!important;background:rgba(var(--hi),.08);box-shadow:0 0 8px 2px var(--green);animation:petglow 1.8s ease-in-out infinite!important}
@keyframes petglow{0%,100%{box-shadow:0 0 3px 0 var(--green);opacity:.55}50%{box-shadow:0 0 10px 3px var(--green);opacity:1}}
.scene p.rv .chest-loot{margin-top:10px;font-size:13px;gap:6px}.scene .chest-loot .cb-item{color:var(--white)}
.ann.clickable{cursor:var(--cur-a,pointer)}
@media(min-width:801px){#game.on{padding-top:24px;padding-bottom:42px}}
.sub-link{border-bottom:0!important;padding:1px!important}
.fresh-tab{animation:freshtab 1.4s ease-in-out infinite!important}.rv-sub{max-width:420px;text-align:center;line-height:1.7}
#pad-cur{width:auto!important;height:auto!important;max-width:64px}

.fg-cast{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.fg-cast path{fill:none;stroke:var(--fc,var(--green));stroke-linecap:round;vector-effect:non-scaling-stroke}
.fg-cast .fg-rod{stroke:var(--white);stroke-width:3;opacity:.85;transform-origin:2px 59px;animation:fgrod .9s ease-out both}
.fg-cast .fg-line{stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:fgline .85s cubic-bezier(.3,.6,.4,1) .12s forwards}
.fg-cast .fg-fly{fill:var(--fc,var(--green));offset-path:path("M11 47 Q42 -18 50 30");offset-rotate:0deg;animation:fgfly .85s cubic-bezier(.3,.6,.4,1) .12s both}
.fg-cast.land .fg-line{opacity:0;transition:opacity .4s}.fg-cast.land .fg-fly{opacity:0;transition:opacity .4s}
@keyframes fgline{to{stroke-dashoffset:0}}
@keyframes fgfly{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes fgrod{0%{transform:rotate(18deg)}30%{transform:rotate(-24deg)}100%{transform:rotate(0)}}
.fg-cast .fg-line{vector-effect:none!important;stroke-width:.7!important}

#game.intro-min .center>.place-panel.mini-inn{display:flex!important;flex:none;height:auto;min-height:0;max-height:none;padding:12px 16px;margin-top:0}
#game.intro-min .place-panel.mini-inn>:not(.place-title):not(.place-desc){display:none!important}
#game.intro-min .place-panel.mini-inn .pt-btns{display:none}
#game.intro-min .place-panel.mini-inn .place-desc{margin:8px 0 0;font-size:11px}
.rest-btn.glow-rest{border-color:var(--green);color:#fff;animation:restglow 1.6s ease-in-out infinite}
@keyframes restglow{0%,100%{box-shadow:0 0 4px 0 rgba(var(--g),.35)}50%{box-shadow:0 0 16px 4px rgba(var(--g),.85)}}
#game.intro-min .center>.place-panel.mini-inn{flex-direction:column;align-items:stretch;gap:0}#game.intro-min .place-panel.mini-inn .rest-btn{white-space:nowrap}#game.intro-min .place-panel.mini-inn .place-title{margin:0}
.lb-tabs{justify-content:center!important}
.toolbar.tb-bottom .tier-tip{top:auto!important;bottom:calc(100% + 8px)}
.cc-hc input{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin:0;flex:none;border:1px solid #7a2222;border-radius:3px;background:#1d0707;display:inline-grid;place-content:center}

.cc-hc input:checked{background:#8b1a1a;border-color:#e44}
.cc-hc input:checked::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.begin:active:not(:disabled){transform:none!important}.begin{transition:background .15s,border-color .15s,color .15s}
.dl-stats b{font-weight:500}.dl-stats .c-lv{color:#fff}.dl-stats .c-hp{color:var(--bar-hp,#e0675a)}.dl-stats .c-en{color:var(--bar-en,#e8c24a)}
.fp-body>.dl-hi:not(.dl-stats){margin-bottom:2px!important}.fp-body>.dl-hi.dl-stats{margin-top:0!important;color:var(--white)!important;font-size:13px!important}

.inv{position:relative}
.inv.pet-open>:not(.pet-inline){display:none!important}
.inv .pet-inline{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-top:2px;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.pi-x{position:absolute;top:8px;right:10px;z-index:2;width:20px;height:20px;line-height:1;font-size:15px;border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--dim);cursor:var(--cur-a,pointer);padding:0}

.pet-chip.needs{border-color:var(--green);animation:petboxglow 2s ease-in-out infinite}
@keyframes petboxglow{0%,100%{box-shadow:0 0 4px 0 rgba(var(--g),.3)}50%{box-shadow:0 0 18px 3px rgba(var(--g),.75)}}
@media(prefers-reduced-motion:reduce){.pet-chip.needs{animation:none;box-shadow:0 0 12px 2px rgba(var(--g),.6)}}
.pet-inline .pet-body{padding-right:2px}

.inv.pet-open{display:flex;flex-direction:column;flex:0 0 auto!important;min-height:0;overflow:hidden;position:relative}
.side>.stats{min-height:90px}
.inv .pet-inline{flex:1 1 0;min-height:0}
.pet-inline .pet-head{flex-direction:column;align-items:center;text-align:center;gap:6px}
.pet-inline .pet-who{width:100%}
.pet-inline .pet-stats{grid-template-columns:1fr!important}
.pet-inline .pet-slot{flex-wrap:wrap}

.shop-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:6px 0;margin:0;font-family:inherit;text-align:left;cursor:var(--cur-a,pointer)}
.shop-toggle .ico{display:inline-flex;transition:transform .2s ease;transform:rotate(-90deg)}
.shop.open .shop-toggle .ico{transform:rotate(0)}

.place-panel.hasshop .shop.collapsed{flex:none!important;max-height:none!important;overflow:visible!important}
.shop.collapsed .shop-top{border-bottom:0}

.bank .bk-sec{border:1px solid var(--line2);border-radius:8px;padding:9px 12px 10px;margin-top:8px;background:rgba(var(--sh),.22)}
.bk-lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.bk-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-card{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--sh),.3)}
.bk-card.vault{border-color:var(--green)}
.bk-cl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bk-big{font-size:20px;font-weight:500;line-height:1.2;color:#fff}.bk-card.vault .bk-big{color:var(--green)}
.bk-card em{font-style:normal;font-size:10px;color:var(--dim)}
.bk-info{margin:8px 0 0;font-size:10px;line-height:1.5;color:var(--dim)}.bk-info:first-of-type{margin-top:9px}
.bk-act .bk-money{margin-top:0}.bk-act .bk-itemqty{margin-top:0;align-items:flex-start}
.bk-money input{flex:1;min-width:110px;width:auto}
.bk-itemqty span{padding-top:5px;color:var(--white)}
@media(max-width:600px){.bk-cards{grid-template-columns:1fr}}

.rest-btn.rest-wait{opacity:0;pointer-events:none;visibility:hidden}
.rest-btn.rest-fade{animation:restfade 1.4s ease both,restglow 1.6s ease-in-out 1.4s infinite}
@keyframes restfade{from{opacity:0}to{opacity:1}}

.loc-btn.glow{color:#fff;animation:softglow 2.2s ease-in-out infinite;border-radius:6px}
@media(prefers-reduced-motion:reduce){.loc-btn.glow,.loc-head.glow{animation:none;box-shadow:0 0 10px rgba(var(--g),.55)}}

.cal-tabs{position:absolute;top:58px;right:26px;display:flex;gap:6px;z-index:2}
.cal-tab{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11px;padding:4px 9px;border:1px solid var(--line,#444);background:transparent;color:inherit;cursor:inherit;border-radius:3px;opacity:.7}
.cal-tab.on{opacity:1;border-color:var(--accent,#c9a45c);color:var(--accent,#c9a45c)} .cal-tab:hover{opacity:1}
@media (max-width:800px){.cal-tab span{display:none}}

.cc-pet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cc-pet{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font:inherit;font-size:11px;background:transparent;color:inherit;border:1px solid var(--line,#444);border-radius:3px;cursor:inherit;opacity:.75}
.cc-pet:hover{opacity:1}.cc-pet.on{opacity:1;border-color:var(--accent,#c9a45c);color:var(--accent,#c9a45c);background:rgba(201,164,92,.1)}
#cc-form .cc-field.cc-pets{grid-column:1/-1}
.cc-pet{flex-direction:row;justify-content:center;gap:6px;padding:5px 2px}.cc-pet-grid{gap:5px}

.craftbox{margin-top:8px}
.craftbox.open .shop-toggle .ico{transform:rotate(0)}
.craftbox.collapsed{max-height:none;overflow:visible}.craftbox.collapsed .shop-top{border-bottom:0}
.place-panel.hasshop.hascraft .craftbox{flex:none}
.place-panel.hasshop.hascraft .craftbox.open{flex:1 1 0;min-height:90px;max-height:none}
.place-panel.hasshop.hascraft .shop.open{flex:1 1 0}
.scene p.rv .chest-loot{line-height:1.35;gap:7px;margin-top:6px}.scene p.rv .chest-loot>div{line-height:1.35}
.scene p.rv:has(.chest-loot){gap:8px;line-height:1.4}

.cb-inspect{left:auto!important;right:calc(100% + 12px);top:0!important;bottom:auto;transform:translateX(8px)!important;width:230px!important;text-align:left!important;background:rgba(var(--sh),.92)!important;border-color:var(--line)!important;border-radius:10px!important;padding:12px 14px!important}
.cb-inspect.on{transform:translateX(0)!important}
.cb-inspect .ci-head,.cb-inspect .ci-tags{justify-content:flex-start}
.cb-wrap.full .cb-inspect{left:50%!important;right:auto;top:50%!important;transform:translate(-50%,-50%) scale(.96)!important;width:min(310px,88%)!important}
.cb-wrap.full .cb-inspect.on{transform:translate(-50%,-50%)!important}
.cb-hoverable{cursor:var(--cur-n,help)}
.cb-inspect p,.cb-inspect .ci-lore,.cb-inspect .ci-hp{text-align:left!important}

.bk-balance .bk-move{margin-top:10px}
.qty-pop{position:fixed;z-index:200;display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:rgba(10,6,5,.97);border:1px solid var(--green);border-radius:10px;font-size:11px;color:var(--white)}
.qty-pop div{display:flex;gap:6px;align-items:center}.qty-pop input{width:80px;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;font:inherit;font-size:11px;outline:none}.qty-pop input.bad{border-color:#e05050}

@keyframes hurtwhite{0%{opacity:.7}100%{opacity:0}}

/* combat: shorter box, your bars under it on the left, the five icons on the right */
.cb-stack>.cb .cb-hist{height:44px}.cb-stack .cb-now{min-height:50px}.cb-now{min-height:50px}
.cb-band{margin:0 -32px;padding:6px 32px;gap:4px}
.cb-stack>.cb .cb-acts button{height:44px}
.cb-tools-slot{width:100%}
.cb-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
.cb-foot .cb-me,.cb-stack .cb-foot .cb-me{display:flex!important;grid-template-columns:none!important;gap:14px!important;justify-content:flex-start}
.cb-foot .cb-stat{width:92px;align-items:flex-start;gap:5px;font-size:12px}.cb-foot .cb-stat>span{text-align:left}
.cb-foot .cb-track{width:100%;height:9px;margin:0}
.cb-tools-slot .cb-tools{position:static;justify-content:flex-end}
/* the victory box is narrower */
.cb-wrap:has(.cb-result) .cb-stack{max-width:400px}
/* past text slides up and fades down smoothly instead of jumping */
@keyframes histfade{from{opacity:var(--f,1)}}
@keyframes histshrink{from{font-size:24px;opacity:1;color:var(--white);transform:translateY(34px)}to{transform:none}}
.cb-hl.snap{animation:snapup 1.1s cubic-bezier(.2,.7,.2,1)}
.cb-hl.snap p{animation:histfade 1.1s ease both}
.cb-hl.snap p.h0{--f:1;animation:histshrink 1.1s cubic-bezier(.2,.7,.2,1) both}
.cb-hl.snap p.h1{--f:.85}.cb-hl.snap p.h2{--f:.7}.cb-hl.snap p.h3{--f:.55}.cb-hl.snap p.h4{--f:.42}.cb-hl.snap p.h5{--f:.3}
.cb-hist p{transition:opacity .6s ease}

.stats .kin .kin-el{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--green);cursor:var(--cur-a,pointer);text-decoration:underline dotted;text-underline-offset:3px}
.stats .kin .kin-el:hover{color:#fff}
/* spellbook: four spells to a row, as many rows as it takes */
.st-tree{grid-template-columns:repeat(4,1fr)!important;gap:10px 4px!important}
.st-node:nth-child(5n)::after{display:block}.st-node:nth-child(4n)::after,.st-node:last-child::after{display:none!important}
.stats .stats-head h2{font-size:9px!important}
.stats .sk-row,.stats .st-el{font-size:calc(1em - 1px)}
.st-tree{display:grid!important;overflow:visible!important;flex-wrap:initial}

.qbook .qb-sum .qb-f{background:none;border:0;border-bottom:1px solid transparent;padding:0 0 1px;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dim);cursor:var(--cur-a,pointer)}
.qbook .qb-sum .qb-f:first-child{color:var(--green)}
.qbook .qb-sum .qb-f:hover{color:#fff}.qbook .qb-sum .qb-f.on{color:var(--green);border-bottom-color:var(--green)}
.bk-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px}.bk-tabs[hidden]{display:none}
.bk-tab{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--line2);color:var(--dim);border-radius:99px;padding:3px 9px;font:inherit;font-size:10px;max-width:100%}
.bk-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}.bk-tab.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.07)}
.bank>.shop{max-height:230px}
.bk-tabrow{padding:6px 0;border-bottom:1px solid rgba(var(--hi),.04)}.bk-tabrow:last-child{border-bottom:0}
.bk-tabhead{display:flex;align-items:center;gap:8px;margin-bottom:5px}.bk-tabno{color:var(--dim);font-size:10px;min-width:40px}
.bk-tabname{flex:1;min-width:0;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;outline:none;font:inherit;font-size:11px}.bk-tabname:focus{border-color:var(--green)}
.bk-icons{display:flex;flex-wrap:wrap;gap:4px}
.bk-ic{background:none;border:1px solid var(--line2);color:var(--dim);border-radius:6px;padding:4px 6px;display:inline-flex}.bk-ic.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.07)}
.pc-more.pc-ico{padding:3px 8px;display:inline-flex;align-items:center;justify-content:center;color:var(--green)}
.bank .bk-balance{position:relative}
.bk-headrow{display:flex;align-items:center;gap:8px;margin-bottom:7px}.bk-headrow .bk-lab{margin:0;margin-right:auto}
.bk-headrow input{width:110px;flex:none;background:var(--field-bg);color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:3px 8px;outline:none;font:inherit;font-size:11px}.bk-headrow input:focus{border-color:var(--green)}
.bk-help{width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--dim);font:inherit;font-size:11px;line-height:1;padding:0;cursor:var(--cur-a,pointer)}.bk-help[aria-expanded=true]{color:var(--green);border-color:var(--green)}
.bk-helpbox{position:absolute;right:10px;top:34px;z-index:5;width:min(340px,calc(100% - 20px));padding:9px 12px;background:var(--field-bg,#120a08);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.5);font-size:10px;line-height:1.5;color:var(--dim)}.bk-helpbox[hidden]{display:none}
.bk-helpbox p{margin:6px 0 0}.bk-helpbox .bk-note,.bk-helpbox>p:first-child{margin-top:0}
.bk-card{flex-direction:row!important;align-items:center;justify-content:space-between;gap:8px}.bk-cardtxt{display:flex;flex-direction:column;gap:2px;min-width:0}.bk-card .q-btn{flex:none;width:auto}
.sp-cats{display:inline-flex;gap:4px;margin-left:auto;align-items:center}
.sp-cat{background:none;border:1px solid var(--line2);color:var(--dim);border-radius:6px;padding:3px 5px;display:inline-flex;cursor:var(--cur-a,pointer)}.sp-cat.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.07)}
.sp-sec{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:8px 0 2px}
.st-tabs{display:flex;align-items:center}
.cb-foot .cb-mebar{display:flex;align-items:center;gap:7px;width:132px}
.cb-meico{display:inline-flex;flex:none;color:var(--dim)}.cb-meico.hp{color:var(--bar-hp)}.cb-meico.mp{color:var(--bar-mp)}.cb-meico.en{color:var(--bar-en)}
.cb-foot .cb-mebar .cb-track{flex:1;width:auto;height:12px;margin:0}
.cb-stack>.cb .cb-acts button.hot-red{font-weight:400}
.cb-foot .cb-mebar .cb-track{box-shadow:inset 0 0 0 1px var(--line2)}
.gd-body:has(.gd-bank){max-height:none;overflow:visible;padding-right:0}
.tc{width:84px;align-items:center;text-align:center;padding-top:8px}.tc .tc-el{position:static;font-size:9px;color:var(--dim)}
.tc-pic{display:flex;align-items:center;justify-content:center;height:34px;color:var(--green)}.tc.tc-large .tc-pic{height:70px}
.tc-rar{position:absolute;top:4px;left:5px;display:inline-flex;color:var(--dim)}
.tc-uncommon .tc-rar{color:#6fcf6f}.tc-rare .tc-rar{color:#5aa9ff}.tc-legendary .tc-rar{color:#ffa94d}.tc-mythic .tc-rar{color:#ff6ad5}
.tc-unk{opacity:.4;border-style:dashed}.tc-unk .tc-pic{color:var(--dim)}
.tc.tc-large{width:150px;margin:6px auto 4px;padding:14px 8px;font-size:12px}.tc.tc-large b{min-height:0;font-size:13px}
.cardbig{text-align:center;max-width:260px}.cardbig h2{margin:6px 0 2px;font-size:16px}.tc-rarlab{display:inline-flex;align-items:center;gap:4px}
.pk-reveal{display:flex;gap:10px;justify-content:center;margin-top:14px}
.pk-card{width:92px;min-height:104px}.pk-card.back{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:rgba(var(--sh),.3);color:var(--green)}
.pk-card.flipin{animation:tcflip .6s ease both}
.locs-head{display:flex;align-items:center}.locs-chron{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:24px;border:1px solid var(--line2);border-radius:6px;background:none;color:var(--green);cursor:var(--cur-a,pointer)}
.seedbox.open{max-height:210px;overflow-y:auto;scrollbar-width:thin}.seedbox{margin-top:0;margin-bottom:8px}
.cb-track i.hp.hpflash{animation:hpwhite .5s ease-out}@keyframes hpwhite{0%{background:#fff;box-shadow:0 0 8px #fff}100%{background:var(--bar-hp);box-shadow:none}}
.pt-lv{margin-left:10px;font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--dim)}
.locs{padding-top:0!important}.locs .locs-head{position:sticky;top:0;z-index:3;margin:0 -14px 6px;padding:14px 14px 8px;background:var(--field-bg,#120a08);border-bottom:1px solid var(--line2);border-radius:10px 10px 0 0}
.green-value.stat-up{font-weight:700;color:#7dff9a;text-shadow:0 0 8px #3dff72,0 0 16px rgba(61,255,114,.6);animation:statglow 2.2s ease-out}
.green-value.stat-down{font-weight:700;color:#ff6b6b;text-shadow:0 0 8px #ff3b3b,0 0 16px rgba(255,59,59,.6);animation:statglowr 2.2s ease-out}
@keyframes statglow{0%{text-shadow:0 0 2px #3dff72}15%{text-shadow:0 0 10px #3dff72,0 0 20px #3dff72}100%{text-shadow:0 0 4px rgba(61,255,114,.2)}}
@keyframes statglowr{0%{text-shadow:0 0 2px #ff3b3b}15%{text-shadow:0 0 10px #ff3b3b,0 0 20px #ff3b3b}100%{text-shadow:0 0 4px rgba(255,59,59,.2)}}
.bk-btns{display:inline-flex;gap:5px;flex:none}
.sec-head:has(.sec-all){display:flex;align-items:center;justify-content:space-between;gap:8px}
.q-btn.sec-all{padding:2px 9px;font-size:10px;width:auto}

.bank .bk-vaultcol{margin-top:8px}.bank .bk-vaultcol .bk-tabs{margin:0 0 6px}.bank .bk-vaultcol .sec-head{margin-top:4px}
.bank .bk-grid{grid-template-columns:repeat(10,1fr);max-height:230px}
.bk-allbtns{display:inline-flex;gap:6px}

.ac-sticky{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:10px 38px 10px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--field-bg,#1a0f0c);box-shadow:0 6px 10px -6px rgba(0,0,0,.6)}
.ac-sticky>b{font-size:30px;font-weight:500;color:var(--green2);line-height:1}.ac-sticky>div{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.ac-sticky span,.ac-sticky em{font-size:12px;color:var(--dim);font-style:normal}.ac-sticky .bar{background:#f2efe9}
.ac-hero.one{grid-template-columns:1fr}
.ac-sticky{top:-27px;margin-top:0;padding-top:34px;border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}

.stats .srow.minor{flex:0 0 auto;font-size:11px;opacity:.85;padding-top:1px;padding-bottom:1px}
.stats .srow.minor-first{margin-top:6px;border-top:1px solid var(--line2);padding-top:6px}

/* stat numbers: small clean buttons. Top five in the accent colour, the lower three in a cooler, quieter one. */
.stats .stat-btn{font:inherit;font-size:12px;min-width:26px;padding:0 7px;line-height:18px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.28);color:var(--green);text-align:center;cursor:default;margin-left:auto}
.stats .srow.lo .stat-btn{font-size:11px;min-width:24px;line-height:16px;color:#9db7cf;border-color:rgba(157,183,207,.3)}
.stats .srow.lo>span:first-child{color:#9db7cf}
.stats .stat-btn.top{cursor:var(--cur-a,pointer);color:#7fe8ff;border-color:#7fe8ff;box-shadow:0 0 8px rgba(127,232,255,.55),inset 0 0 6px rgba(127,232,255,.25);animation:topstat 2.4s ease-in-out infinite}
.stats .stat-btn.top.chosen{background:rgba(127,232,255,.16);animation:none;box-shadow:0 0 10px rgba(127,232,255,.7)}

@keyframes topstat{0%,100%{box-shadow:0 0 4px rgba(127,232,255,.35),inset 0 0 4px rgba(127,232,255,.15)}50%{box-shadow:0 0 12px rgba(127,232,255,.8),inset 0 0 7px rgba(127,232,255,.3)}}
.stats .stat-btn{height:17px;line-height:15px;padding-top:0;padding-bottom:0;box-sizing:border-box}
.stats .srow.lo .stat-btn{height:15px;line-height:13px}
.inv-btns{display:inline-flex;gap:6px}
.support-head .support-title{display:inline-flex;align-items:center;gap:7px;font-size:13px;letter-spacing:.04em;padding:5px 12px}

/* ---------- Chronicle: one screen, no scrolling ---------- */
.fullpage.chron>.fp-wrap{max-width:1120px;height:calc(100vh / var(--zoom) - 48px);display:flex;flex-direction:column;overflow:hidden;padding:18px 20px 16px}
@supports(height:100dvh){.fullpage.chron>.fp-wrap{height:calc(100dvh / var(--zoom) - 48px)}}
.fullpage.chron .fp-title{margin:0 0 10px;text-align:left;flex:0 0 auto}
.fullpage.chron .fp-body,.ch2{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ch2-top{position:absolute;top:14px;right:64px;display:flex;gap:8px;align-items:center;z-index:3}
.ch2-shards{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line2);border-radius:99px;color:var(--green);background:rgba(var(--sh),.3);font-size:12px}.ch2-shards b{font-weight:500}
.ch2-shop{display:inline-flex;align-items:center;gap:6px}.ch2-shop.on{border-color:var(--green)}
.ch2-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:12px}
.ch2-col{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.2)}
.ch2-col:hover{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.ch2-locs .pf-label{margin:2px 0 0}
.ch2-lgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ch2-loc{position:relative;overflow:hidden;display:flex;align-items:center;gap:5px;padding:5px 6px 7px;border:1px solid var(--line2);border-radius:7px;background:rgba(var(--sh),.25);color:var(--dim);font:inherit;font-size:10.5px;cursor:var(--cur-a,pointer);text-align:left;transition:transform .12s,border-color .15s,color .15s}
.ch2-loc:hover{transform:translateY(-1px)}
.ch2-loc.on{border-color:var(--green);color:var(--white);background:rgba(var(--g),.12)}
.ch2-loc.full{color:var(--green)}
.ch2-ln{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch2-loc i{font-style:normal;font-size:9.5px;opacity:.8}
.ch2-lb{position:absolute;left:0;bottom:0;height:2px;background:var(--green);opacity:.8}
.ch2-head{display:flex;align-items:center;gap:14px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.ch2-hn{display:flex;flex-direction:column;gap:3px}.ch2-hn h3{margin:0;font-size:18px;font-weight:500;color:var(--white)}
.ch2-rw{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--green)}.ch2-rw.got{color:var(--dim)}
.ch2-ring{--s:60px;position:relative;flex:0 0 auto;width:var(--s);height:var(--s);border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*1%),rgba(255,255,255,.1) 0);display:grid;place-items:center}
.ch2-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--field-bg,#1a0f0c)}
.ch2-ring b{position:relative;font-size:calc(var(--s)*.22);font-weight:500;color:var(--white)}
.ch2-ring.gold{box-shadow:0 0 14px rgba(255,210,90,.45)}
.ch2-cat,.ch2-lst{display:flex;flex-direction:column;gap:5px}
.ch2-ch{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green2,var(--green));letter-spacing:.04em}.ch2-ch em{margin-left:auto;font-style:normal;color:var(--dim);font-size:10px}
.ch2-tiles{display:flex;flex-wrap:wrap;gap:5px}
.ch2-tile{position:relative;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid var(--line2);border-radius:7px;background:rgba(var(--sh),.3);color:var(--dim);cursor:var(--cur-a,pointer);transition:transform .12s,border-color .15s,box-shadow .15s}
.ch2-tile:hover{transform:translateY(-2px) scale(1.06)}
.ch2-tile.done{color:var(--green);border-color:rgba(var(--g),.5)}
.ch2-tile.boss{border-color:rgba(255,200,90,.6)}
.ch2-tile.sel{border-color:var(--white);box-shadow:0 0 10px rgba(var(--g),.6)}
.ch2-tile.pop{animation:ch2pop .35s ease}
@keyframes ch2pop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.ch2-ck{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;background:var(--green);color:#111;display:grid;place-items:center}
.ch2-detail{margin-top:auto;display:flex;align-items:center;gap:8px;min-height:34px;padding:7px 10px;border:1px dashed var(--line2);border-radius:8px;font-size:12px}.ch2-detail.on{border-style:solid;border-color:rgba(var(--g),.5)}
.ch2-li{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--dim)}.ch2-li.done{color:var(--white)}.ch2-li.done .ico{color:var(--green)}
.ch2-realm{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:8px;border-top:1px solid var(--line2)}.ch2-realm>div:not(.ch2-ring){display:flex;flex-direction:column;gap:2px;font-size:11px}.ch2-realm b{font-weight:500;color:var(--white)}
.ch2-shopv{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.ch2-shophead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}.ch2-shophead h3{margin:0 0 3px;font-size:17px;font-weight:500}
.ch2-fgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-content:start}
.ch2-fu{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border:1px solid var(--line2);border-radius:9px;background:rgba(var(--sh),.25);text-align:center;font-size:11px;transition:transform .12s,border-color .15s}
.ch2-fu:hover{transform:translateY(-2px)}.ch2-fu b{font-weight:500;color:var(--white)}.ch2-fu.own{opacity:.75}
.ch2-fico{color:var(--green)}.ch2-owned{display:inline-flex;align-items:center;gap:4px;color:var(--green)}
.ch2-fu .q-btn{display:inline-flex;align-items:center;gap:5px;padding:3px 12px}
@media(max-width:900px){.fullpage.chron>.fp-wrap{height:auto;max-height:calc(100dvh - 24px);overflow-y:auto}.ch2-grid{grid-template-columns:1fr}.ch2-fgrid{grid-template-columns:repeat(3,1fr)}.ch2-top{position:static;margin-bottom:6px}}
/* the room in your house */
.rm{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:rgba(var(--sh),.25)}
.rm-wall,.rm-shelf,.rm-floor{display:flex;justify-content:center;gap:10px;padding:8px}
.rm-wall{background:rgba(255,255,255,.04);border-bottom:1px solid var(--line2)}
.rm-shelf{border-bottom:3px solid rgba(160,110,60,.55);padding-bottom:6px}
.rm-floor{background:linear-gradient(rgba(120,80,40,.12),rgba(120,80,40,.25))}
.rm-spot{width:54px;height:54px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--dim);cursor:var(--cur-a,pointer);font:inherit;font-size:9px;transition:transform .12s,border-color .15s}
.rm-spot:hover{transform:translateY(-2px)}.rm-spot.full{border-style:solid;color:var(--green)}.rm-spot.sel{border-color:var(--white);box-shadow:0 0 10px rgba(var(--g),.5)}
.rm-spot.sm{width:42px;height:42px}.rm-lab{font-size:9px;color:var(--dim);text-align:center;padding:2px 0 0}
.rm-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fullpage.chron .fp-wrap{position:relative}
.fullpage.chron .fp-wrap>.pf-x{position:absolute;top:12px;right:14px;float:none;margin:0}
.ch2-top{top:12px;right:54px}.ch2-hn{align-items:flex-start;text-align:left}
.ch2-shophead>div,.ch2-shophead h3{text-align:left}.fullpage.chron .ch2-shopv{text-align:left}
.support-head .support-title{white-space:nowrap;font-size:11px;letter-spacing:.02em;padding:6px 12px;width:100%;box-sizing:border-box;justify-content:center}.support-head .support-title .ico{display:inline-flex}
.inv .stats-head{gap:5px}.inv .inv-btns{gap:4px}.inv .inv-btns .tool{width:24px;min-width:24px}.inv .inv-title{letter-spacing:0;overflow:visible;white-space:nowrap;min-width:0}

/* combat: icon buttons + sharp rectangular bars, and the spell / ability list under them */
.cb-footwrap{width:100%;display:flex;flex-direction:column;gap:8px}
.cb-foot .cb-mebar{display:flex;align-items:center;gap:6px;width:140px}
.cb-meico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border:1px solid var(--line);border-radius:3px;background:rgba(var(--sh),.4)}
.cb-foot .cb-mebar .cb-track{flex:1;width:auto;height:14px;margin:0;border-radius:0;background:rgba(255,255,255,.1);border:1px solid var(--line);box-shadow:none}
.cb-foot .cb-mebar .cb-track i{border-radius:0}
.cb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;padding:8px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.3)}
.cb-lh{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cb-li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;font:inherit;font-size:12px;font-weight:400;border:1px solid var(--line2);border-radius:5px;background:rgba(var(--g),.05);color:var(--white);cursor:var(--cur-a,pointer);text-align:left}
.cb-li:disabled{opacity:.4;cursor:default}.cb-lc{color:var(--dim);font-size:11px}
/* stat buttons scale with the text (so they stay proportional on a TV or any zoom) */
.stats .srow{font-size:inherit}
.stats .stat-btn,.stats .srow.lo .stat-btn{font-size:1em;height:1.5em;line-height:1.4em;min-width:2.1em;padding:0 .5em;border-radius:.4em;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.stats .srow.lo{font-size:.88em;flex:0 0 auto;padding:.15em 0}
.stats .srow.lo .stat-btn{height:1.4em;min-width:2em}
.stats .srow.minor-first{margin-top:.5em;padding-top:.5em}
.stats .srow.hi{align-items:center}
@media (max-height:820px){
  .stats .srow{line-height:1.1;min-height:0;flex:0 1 auto}
  .stats .stat-btn,.stats .srow.lo .stat-btn{height:1.3em;line-height:1.2em}
  .stats .srow.lo{font-size:.85em;padding:0}
  .stats .srow.minor-first{margin-top:.25em;padding-top:.25em}
  .stats .sv:first-child hr{margin:3px 0}
}

/* the house room: a top-down grid */
.pt-stables{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;padding:0;border:1px solid var(--line);border-radius:5px;background:rgba(var(--sh),.35);color:var(--green);cursor:var(--cur-a,pointer);vertical-align:middle}.pt-stables.on{border-color:var(--green);background:rgba(var(--g),.15)}
.hx{display:flex;gap:12px;align-items:flex-start}.hx-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.hx-room{display:flex;justify-content:center;padding:10px;border:1px solid var(--line2);background:rgba(var(--sh),.25)}
.hx-grid{display:grid;gap:0;border:0}
.hx-cell{width:var(--hc,34px);height:var(--hc,34px);box-sizing:border-box;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:0;background:rgba(120,80,40,.18);color:var(--green);cursor:var(--cur-a,pointer);font:inherit}
.hx-cell.void{border:0;background:transparent;cursor:default;pointer-events:none}
.hx-cell:hover:not(.void){border-color:var(--green)}.hx-cell.has{color:var(--white)}.hx-cell.sel{outline:2px solid var(--white);outline-offset:-2px;z-index:1}.hx-cell.drop:hover{background:rgba(var(--g),.35)}
.hx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:28px}.hx-bar b{font-weight:500;color:var(--white)}
.hx-hint{margin:0}.hx-pal{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hx-sw{display:inline-block;width:13px;height:13px;border:1px solid rgba(255,255,255,.4);vertical-align:middle}
.chip.on{border-color:var(--white);background:rgba(var(--g),.2)}
.hx-trophies{flex:0 0 150px;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line2);background:rgba(var(--sh),.25)}
.hx-trophies .pf-label{margin:0}
.hx-tr{display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid var(--line2);background:transparent;color:var(--white);font:inherit;font-size:11px;text-align:left;cursor:var(--cur-a,pointer)}.hx-tr.in{opacity:.45;cursor:default}.hx-tr.on{border-color:var(--white);background:rgba(var(--g),.2)}
.hx-panel{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line2);background:rgba(var(--sh),.2)}
.ch2-cpt{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.3)}.ch2-fu.lockd{opacity:.6}

.sq-hall{grid-column:1/-1;justify-self:end;margin-top:4px!important}

/* stats box: same cursor on every stat, and tighter spacing on shorter screens so the last row (Creativity) is never cut off */
.stats .stat-btn,.stats .srow,.stats .srow *{cursor:var(--cur-a,pointer)!important}
@media (max-height:820px){
  .stats .stats-head{margin-bottom:4px}
  .stats .kin{margin-bottom:2px}
  .stats .xp-bar{margin:3px 0 4px}
  .stats .day-row,.stats .cond-chip,.stats .who-row{line-height:1.15}
  .stats>hr,.stats .sv-stack>hr{margin:3px 0}
}
@media (max-height:790px){
  .stats{padding-top:9px;padding-bottom:7px}
  .stats .srow{line-height:1.0}
  .stats .srow.lo{font-size:.8em}
}

/* house v2: room on the left with category buttons underneath, details on the right; nothing scrolls the page */
.hx{display:flex;gap:12px;align-items:stretch}
.hx-main{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.hx-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px;padding:8px 10px;border:1px solid var(--line2);background:rgba(var(--sh),.22);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;max-height:330px}
.slot.hx-cell{aspect-ratio:auto;border-style:solid;border-radius:0;border-width:1px;border-color:rgba(255,255,255,.08);position:relative}
.slot.hx-cell.full{border-color:rgba(255,255,255,.2);color:var(--white)}
.slot.hx-cell.void{border:0;background:transparent}
.hx-cell.sel{outline:2px solid var(--white);outline-offset:-2px;z-index:1}.hx-cell.pick:hover{background:rgba(var(--g),.3)}
.hx-tabs{display:flex;flex-wrap:wrap;gap:6px}
.hx-tab{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--dim);font:inherit;font-size:10px;cursor:var(--cur-a,pointer)}
.hx-tab.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.1)}
.hx-sgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;flex:0 0 auto}
.hx-sgrid .slot{aspect-ratio:1;position:relative}.hx-sgrid .slot .ico svg{width:18px;height:18px}
.hx-on{position:absolute;left:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.hx-pet{display:flex;align-items:center;gap:10px}.hx-shop{align-self:flex-start}
.hx-side .sec-head{display:flex;justify-content:space-between;align-items:center}
.hx-side .pf-label{margin:0}
body.dragging .hx-cell.void{pointer-events:none}
.hx-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.hx-tab{justify-content:center;padding:4px 4px;white-space:nowrap}
.hx-sgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
.hx-sgrid.sm{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}.hx-sgrid.sm .slot .ico svg{width:14px;height:14px}

/* farm: centered grid, icon buttons, clock timers */
.xt-bait{justify-content:center;flex-wrap:wrap}.fm-tools{display:inline-flex;gap:6px}
.q-btn.ib{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:4px 8px;border-radius:7px;min-width:30px}.q-btn.ib b{font-weight:500;font-size:10px}
.fm-grid{grid-template-columns:repeat(var(--fc,4),112px);justify-content:center;gap:8px}
.fm-plot{align-items:center;text-align:center;justify-content:center;min-height:96px}.fm-plot .bar{margin:0 auto}
.fm-foot{display:inline-flex;align-items:center;justify-content:center;gap:8px}.fm-foot .clk.done{color:var(--green)}
.farm-note,.place-desc.fm-note{text-align:center}
.clk{display:inline-flex;align-items:center;color:var(--green);cursor:var(--cur-n,help)}.clk svg{display:block}
.clk-line{display:inline-flex;align-items:center;gap:6px}
.fm-grid{display:flex;flex-wrap:wrap;justify-content:center;max-width:calc(var(--fc,4)*120px);margin-left:auto;margin-right:auto}.fm-plot{width:112px;flex:0 0 112px;box-sizing:border-box}

.tt .tn{color:#fff;font-weight:600}
/* the stat you picked as your playstyle: no glow, just a calm outline */
.stats .stat-btn.top.chosen{animation:none!important;box-shadow:none!important;background:rgba(127,232,255,.08);border-color:rgba(127,232,255,.55);color:#bff3ff}
.pet-chip .pet-info{margin-left:auto;flex:0 1 auto;min-width:0;max-width:48%;align-items:flex-end;text-align:right}
.pet-info .pet-name{display:block;flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.pc-l1{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the pet box keeps one fixed size whatever its pet needs */
.side>.pet-chip{height:101px;min-height:101px;max-height:101px;flex:0 0 auto!important;overflow:hidden;position:relative;box-sizing:border-box}
.pet-chip>.pc-back{overflow:hidden;gap:1px}.pet-chip .pc-need{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.ch2-split{grid-column:1/-1;margin:6px 0 0}
.ch2-fgrid{grid-template-columns:repeat(8,1fr)!important;gap:6px}.ch2-fu{padding:7px 4px;gap:3px;font-size:10px}.ch2-fu .ch2-fico svg{width:28px;height:28px}.ch2-cpt{width:30px;height:30px}
.ch2-realm>div:not(.ch2-ring){align-items:flex-start;text-align:left}

/* Stat Shard: every stat flashes slowly until one is chosen */
@keyframes shardflash{0%,100%{box-shadow:0 0 0 0 rgba(255,235,150,0);border-color:var(--line2)}50%{box-shadow:0 0 12px 2px rgba(255,235,150,.75);border-color:#ffe99a;background:rgba(255,233,150,.18)}}
.stats .stat-btn.shard-pick{animation:shardflash 1.6s ease-in-out infinite!important;cursor:var(--cur-a,pointer)!important}
.stats .stat-btn.spark{animation:none!important;transform:scale(1.18);transition:transform .25s;box-shadow:0 0 14px 3px rgba(255,235,150,.8)}
.sparkle{position:fixed;z-index:500;width:6px;height:6px;pointer-events:none;background:#ffeaa0;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 8px 2px rgba(255,230,140,.9)}

/* combat: the spell / ability list floats under the bars, so the fight window never moves or changes size */
.cb-footwrap{position:relative}
.cb-footwrap>.cb-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:6;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:5px;padding:8px;background:rgba(12,7,6,.94);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.45);overflow:visible;max-height:none}
.cb-footwrap>.cb-list .cb-li{padding:6px 8px;font-size:11px;min-width:0}.cb-footwrap>.cb-list .cb-ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* floating combat numbers */
.fnum{position:fixed;z-index:450;pointer-events:none;font-weight:700;font-size:15px;letter-spacing:.02em;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.7);white-space:nowrap}
.fnum.dmg{color:#ff6b5e}.fnum.dmg.big{font-size:19px}.fnum.heal{color:#7dffb0}.fnum.miss{color:#fff;font-weight:500;font-size:13px}.fnum.crit{color:#ffd35a;font-size:17px;letter-spacing:.08em}

.fhp{color:#ffd24a;font-weight:700;text-shadow:0 0 10px rgba(255,210,74,.55)}
.cb-now i.fhp{color:#ffd24a}

.bk-tabs{gap:6px;margin:4px 0 8px}
.bk-tab{width:46px;height:46px;padding:0;justify-content:center;border-radius:8px;background:rgba(var(--sh),.55);border:1px solid var(--line2);color:var(--dim);cursor:var(--cur-a,pointer)}

.bk-tab.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.12)}
.bk-tab.drop{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}

/* co-op expeditions */
.scene.coop{gap:14px;justify-content:flex-start;padding-top:5vh;overflow:hidden}
.co-top{display:flex;align-items:center;justify-content:space-between;width:min(92vw,620px)}
.co-title{color:var(--green);letter-spacing:.14em;font-size:13px;text-transform:uppercase}
.co-party{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(92vw,620px)}
.co-hero{border:1px solid var(--line2);border-radius:8px;padding:9px 12px;background:rgba(var(--sh),.4);display:flex;flex-direction:column;gap:5px;position:relative}
.co-hero.turn{border-color:var(--green);box-shadow:0 0 14px rgba(var(--g),.25)}.co-hero.down{opacity:.55}.co-hero.guard{border-color:#8fb4ff}.co-hero.target{border-color:#ff5a5a;box-shadow:0 0 16px rgba(255,90,90,.45)}
.co-hn{display:flex;justify-content:space-between;font-size:12px;color:var(--white)}.co-hn span{color:var(--dim);font-size:11px}
.co-nums{display:flex;justify-content:space-between;font-size:10px;color:var(--dim)}
.co-hero em{position:absolute;right:10px;bottom:8px;font-style:normal;font-size:10px;color:var(--dim)}
.co-foe{width:min(92vw,620px);border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:rgba(var(--sh),.5);display:flex;flex-direction:column;gap:6px}
.co-fn{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--white)}.co-fn span{font-size:11px;color:#ffd24a}
.co-foe .cb-track i.foe{background:#e24b4b}
.co-traits{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--dim)}
.co-log{width:min(92vw,620px);height:104px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;font-size:11px}
.co-l{margin:0;color:var(--dim)}.co-l.hurt,.co-l.foe{color:#ff8a7a}.co-l.hit,.co-l.crit{color:#5fe08a}.co-l.crit{font-weight:700}.co-l.heal{color:#8fb4ff}.co-l.warn{color:#ffd24a;font-weight:700}.co-l.win{color:#ffd24a}.co-l.miss{color:var(--white)}
.co-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:min(92vw,620px)}
.co-act{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font:inherit;font-size:11px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--g),.05);color:var(--white);cursor:var(--cur-a,pointer)}
.co-act:disabled{opacity:.4;cursor:var(--cur-n,default)}

.co-invite{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:90;padding:14px 20px;border:1px solid var(--green);border-radius:10px;background:rgba(12,7,6,.96);box-shadow:0 10px 30px rgba(0,0,0,.5);text-align:center;font-size:12px;color:var(--white)}
.co-invite p{margin:0 0 6px}.co-inv-btns{display:flex;gap:10px;justify-content:center;margin-top:8px}
.co-form{flex-wrap:wrap}.co-name{min-width:130px}.co-err{color:#ff8a7a}
.scene.coop{flex-direction:column;align-items:center}
.co-hero .cb-track,.co-foe .cb-track{width:100%;flex:none}

.sq-story{background:rgba(0,0,0,.34);border:1px solid var(--line2);border-radius:8px;padding:11px 14px 12px;box-shadow:inset 0 0 22px rgba(0,0,0,.35)}
.sq-main .sq-story p.st-lore{margin:8px 0 0;font-size:11px;line-height:1.55;color:var(--white);opacity:.82}
.sq-main .sq-story p.st-quote{margin:7px 0 0;font-size:10px;line-height:1.45;font-style:italic;color:#c9a6ff}
.sq-main>p{margin-bottom:3px}
.sq-story{max-width:none;margin-top:8px;padding:9px 14px 10px}
.sq-main .sq-story p.st-lore{margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.sq-main .sq-story p.st-quote{margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* hover highlight (driven by script, see common.js): white by default, green for gathering and crafting, blue for healing, red for combat */
.hv-w:not(:disabled){border-color:#fff!important;background-color:rgba(255,255,255,.10)!important;color:#fff!important}
.hv-g:not(:disabled){border-color:#5fe08a!important;background-color:rgba(95,224,138,.14)!important;color:#5fe08a!important}
.hv-b:not(:disabled){border-color:#6eaaff!important;background-color:rgba(110,170,255,.15)!important;color:#8fb8ff!important}
.hv-r:not(:disabled){border-color:#ff5a5a!important;background-color:rgba(255,90,90,.15)!important;color:#ff7a7a!important}

.co-grid{display:grid;gap:4px;width:min(90vw,352px)}
.co-grid .dg-cell{aspect-ratio:1;border-radius:4px;min-width:0}
.co-duo{display:inline-flex;gap:0;color:var(--green);filter:drop-shadow(0 0 5px rgba(var(--g),.7))}.co-duo .ico{margin:0 -1px}
.scene.coop{gap:10px;padding-top:3.5vh}

/* PvP reward track */
.pt-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--white);margin-bottom:5px}.pt-head b{color:#fff;font-weight:500}
.pt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0}
.pt-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.3);font-size:10px;min-height:88px;justify-content:space-between}
.pt-card>b{font-size:13px;color:var(--white);font-weight:500}.pt-g{color:#ffd24a}.pt-i{display:flex;gap:3px;min-height:14px;color:var(--green)}
.pt-card.ready{border-color:var(--green);background:rgba(var(--g),.08)}.pt-card.got{opacity:.5}.pt-card em{font-style:normal;color:var(--dim);font-size:9px}
.pt-card .q-btn{padding:1px 8px;font-size:9px}
.pt-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-duel{margin-bottom:2px}

/* co-op fight uses the normal battle layout */
.scene.combat.coop{padding:0}
.scene.coop .co-map{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:3.5vh;height:100%;box-sizing:border-box}
.cb-footwrap .co-party{width:100%}
.co-status{margin:0;text-align:center;font-size:11px;color:var(--dim)}.co-warn{color:#ffd24a;font-weight:700}
.scene.coop .cb-footwrap{position:relative}

.game-foot .foot-ver{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:var(--cur-a,pointer)}.game-foot .foot-ver:hover{color:#fff;text-decoration:underline}
.pf.vn{max-width:440px}.pf.vn .dl-list{max-height:52vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;padding-right:6px}
/* co-op: location cards, details, history */
.co-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:6px 0}
.co-card{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.25);color:var(--fg);font:inherit;font-size:11px;text-align:left;transition:border-color .2s,box-shadow .2s,background .2s}
.co-card span{color:var(--dim);font-size:10px}
.co-card.on{border-color:var(--green);box-shadow:0 0 10px rgba(120,220,150,.25);background:rgba(120,220,150,.07)}
.co-det{border:1px solid var(--line);border-radius:6px;padding:7px 9px;margin:4px 0;font-size:11px;display:grid;gap:3px;background:rgba(0,0,0,.2)}
.co-dh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.co-dr{display:flex;gap:10px}.co-dr>span:first-child{width:50px;flex:none}
.co-gold{color:#e8c46a}
.co-online{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}
.co-hist{margin-top:6px;border-top:1px solid var(--line);padding-top:5px;font-size:11px}
.co-hh{margin-bottom:3px}
.co-hr{display:grid;grid-template-columns:52px 1fr auto auto;gap:8px;padding:2px 0}
.co-hr.win .co-hs{color:#e8c46a}.co-hr.lose .co-hs{color:#c06060}
.co-none{margin:0}
.co-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:6px}
.co-stats b{color:var(--fg)}
.co-top .co-title{font-size:18px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 14px rgba(232,196,106,.55)}
.co-grid .dg-cell.s1:not(:disabled){animation:coPulse 2s ease-in-out infinite}
@keyframes coPulse{0%,100%{box-shadow:0 0 0 rgba(120,220,150,0)}50%{box-shadow:0 0 8px rgba(120,220,150,.5)}}
@media (prefers-reduced-motion:reduce){.co-grid .dg-cell.s1{animation:none!important}}
/* bank shop: stands out */
.bank .shop.collapsed{border:1px solid rgba(232,196,106,.55)!important;background:rgba(232,196,106,.08)!important;border-radius:6px;box-shadow:0 0 12px rgba(232,196,106,.22);animation:bkGlow 3s ease-in-out infinite}
.bank .shop.collapsed .shop-toggle{padding:6px 8px;color:#e8c46a;font-weight:600}
.bank .shop.collapsed .shop-toggle::after{content:"slots & tabs";margin-left:auto;font-size:10px;font-weight:400;color:var(--dim);letter-spacing:.06em}
.bank .shop.open{border:1px solid rgba(232,196,106,.55)!important;border-radius:6px}
.bank .shop .shop-title{color:#e8c46a}
@keyframes bkGlow{0%,100%{box-shadow:0 0 6px rgba(232,196,106,.15)}50%{box-shadow:0 0 14px rgba(232,196,106,.38)}}
@media (prefers-reduced-motion:reduce){.bank .shop.collapsed{animation:none}}
.craftbox .shop-top:has(.q-help){display:flex;align-items:center;gap:6px}
.craftbox .shop-top:has(.q-help) .shop-toggle{width:auto}
.co-card{padding:5px 8px}.co-cards{margin:4px 0}
.co-det{padding:5px 8px;font-size:10.5px;gap:2px}
.co-hr{padding:1px 0}
.co-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;align-items:start}
.co-l,.co-r{min-width:0}
.co-r .co-form{display:flex;gap:6px;margin:4px 0}.co-r .co-form .q-btn{flex:none}
.co-name{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--fg);font:inherit;padding:4px 6px;border-radius:5px}
.co-hist{margin-top:4px;padding-top:4px}
.co-hr{grid-template-columns:50px 1fr auto}.co-hr>span:nth-child(3){display:none}
/* fishing: the painting of the place, a pool where the line is cast, dark glow on the text around it */
.fishgame{background-size:cover;background-position:center;background-color:var(--field-bg,#050b16)}
.fishgame.at-lake{background-size:150%;background-position:12% 92%}
.fishgame.at-sea{background-size:150%;background-position:88% 88%}
.fishgame::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(8,12,18,.25),rgba(8,12,18,.7));pointer-events:none}
.fishgame>*:not(.fg-x):not(.fg-lake){position:relative;z-index:1}
.fishgame>.fg-lake{position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-30%);pointer-events:none;overflow:hidden}
.fishgame.at-lake>.fg-lake{width:min(96vw,560px);height:230px;border-radius:50%;background:radial-gradient(ellipse at 40% 40%,rgba(120,190,215,.8),rgba(50,110,150,.85) 70%,rgba(30,70,100,.9));box-shadow:0 0 40px rgba(20,50,70,.6),inset 0 0 30px rgba(10,40,60,.5)}
.fishgame.at-sea>.fg-lake{width:100vw;height:260px;border-radius:0;background:linear-gradient(rgba(110,170,210,.55),rgba(30,80,130,.9));box-shadow:0 -6px 20px rgba(160,210,240,.2)}
.fg-lake i{position:absolute;left:-20%;width:140%;height:2px;background:rgba(255,255,255,.35);filter:blur(1px);animation:fgwave 6s linear infinite}
.fg-lake i:nth-child(1){top:30%}.fg-lake i:nth-child(2){top:55%;animation-duration:8s;opacity:.7}.fg-lake i:nth-child(3){top:78%;animation-duration:10s;opacity:.5}
@keyframes fgwave{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.fishgame h2,.fg-diff,.fg-msg,.fg-sub,.fg-steps,.fg-m,.fg-x{text-shadow:0 0 6px #000,0 0 12px rgba(0,0,0,.9),0 0 22px rgba(0,0,0,.7)}
.fg-water{background:rgba(10,30,50,.18)!important}
@media (prefers-reduced-motion:reduce){.fg-lake i{animation:none}}
.game-foot,.game-foot *{text-shadow:0 0 6px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.6)}
.cb-flies{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* parry */
.cb-acts{position:relative}
.parry{position:absolute;left:10px;bottom:calc(100% + 1px);z-index:3;color:#fff;font:600 13px/1 inherit;font-family:inherit;white-space:nowrap}
.parry.bang{font-size:22px;left:18px;text-shadow:0 0 10px #fff;animation:parryBang .25s ease-out}
.parry.go{padding:5px 14px;border:1px solid #fff;border-radius:99px;background:rgba(255,255,255,.14);box-shadow:0 0 14px #fff,0 0 30px rgba(255,255,255,.6);animation:parryGlow .5s ease-in-out infinite alternate;cursor:var(--cur-a,pointer)}
@keyframes parryBang{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes parryGlow{from{box-shadow:0 0 8px #fff,0 0 18px rgba(255,255,255,.4)}to{box-shadow:0 0 18px #fff,0 0 38px rgba(255,255,255,.75)}}
.parry{left:8px;bottom:auto;top:-15px}
.parry.go{padding:3px 12px;font-size:12px;color:#fff;background:rgba(20,20,24,.9)}
.parry.bang{top:-12px}
.cb-acts .parry.go{height:24px!important;min-height:0!important;width:auto!important;flex:none!important;padding:0 12px!important;line-height:22px;top:-13px;left:6px;display:inline-flex;align-items:center}
.pop-note{position:fixed;left:50%;top:38%;transform:translate(-50%,-6px);z-index:300;padding:10px 18px;border:1px solid var(--warn,#e2b95a);border-radius:8px;background:rgba(14,10,8,.94);color:var(--white,#f1ede8);font-size:13px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.6)}
.pop-note.in{opacity:1;transform:translate(-50%,0)}
.q-btn.ico-btn{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px}
/* short screens (TVs, small windows): a long title adds a line, so squeeze the stats panel a little so Creativity is never cut off */
@media (max-height:820px){
  .stats{padding:8px 12px!important;line-height:1.25!important}
  .stats-head h2{margin:0 0 4px!important}
  .stats .kin{margin:0 0 2px!important;font-size:10px}
  .stats .who-row{line-height:1.15!important}
  .stats .day-row{margin:0!important}
  .stats .xp-bar{margin:2px 0 3px!important}
  .stats hr{margin:3px 0!important}
  .stats .sv>div:not(.bar){line-height:1.2}
  .stats .srow.minor-first{margin-top:.15em!important;padding-top:.15em!important}
}
/* pet care: compact, no scrolling */
.pet-inline{overflow:hidden!important;font-size:11px}
.pet-inline .pet-body{display:flex;flex-direction:column;gap:6px;padding:0 2px}
.pet-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-right:24px}
.pet-top .pet-title{font-size:15px;margin:0}.pet-lv{color:var(--green);font-size:12px}
.pet-top .pet-rename{flex:1}
.pet-xp{display:flex;align-items:center;gap:8px}.pet-xp>:first-child{flex:1}
.pet-inline .pet-stats{grid-template-columns:1fr 1fr auto!important;gap:4px 10px;font-size:10px}
.pet-inline .pet-acts{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0}
.pet-inline .pet-acts .q-btn{padding:3px 8px;font-size:10.5px}
.pet-sep{color:var(--dim);font-size:10px;margin-left:4px}
.pet-inline .pf-label{margin:2px 0 0;font-size:10px}
.pet-inline .pet-slot{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:10.5px;margin:0}
.pet-inline .pet-slot .q-btn{padding:2px 7px;font-size:10px}
.pet-inline .pet-sl{width:52px;color:var(--dim)}
.hx-side .shop-row{padding:4px 0}
/* pet care, ultra compact */
.pet-inline .pet-body{gap:3px!important}
.pet-top{line-height:1.1}
.pet-meter{position:relative;height:13px;border:1px solid var(--line2);border-radius:99px;overflow:hidden;min-width:0}
.pet-meter>i{position:absolute;left:0;top:0;bottom:0;background:rgba(var(--g),.45)}.pet-meter.low>i{background:rgba(224,117,108,.55)}
.pet-meter>span{position:relative;display:block;text-align:center;font-size:9px;line-height:11px;color:var(--white);text-shadow:0 0 3px #000;white-space:nowrap}
.pet-meter.xp>i{background:rgba(232,196,106,.45)}
.pet-inline .pet-stats{display:grid!important;grid-template-columns:1fr 1fr auto!important;gap:6px!important;align-items:center}
.pet-inline .pet-acts{gap:4px!important}.pet-inline .pet-acts .q-btn{height:20px;padding:0 7px!important;font-size:10px!important;display:inline-flex;align-items:center;gap:3px;line-height:1}
.pet-inline .pet-gear{gap:3px 8px!important}.pet-inline .pet-slot .q-btn{height:18px;padding:0 5px!important;display:inline-flex;align-items:center;line-height:1}
.pet-inline .pet-sl{font-size:9.5px}
.pet-inline .pet-power{font-size:9.5px;color:var(--dim);white-space:nowrap}
.pet-inline .pet-gear{display:grid!important;grid-template-columns:1fr 1fr!important}
.pet-inline .pet-slot{padding:0!important;border:0!important;height:20px}
.pet-inline .pet-slot .none{font-size:10px}
.wt-head{display:flex;align-items:center;gap:10px;margin:6px 0}.wt-head .sk-bar{flex:1}
.wt-tree .sp-node{align-items:center}
.modal:has(.pf.sp){z-index:250}
/* centered grids: a 7 x 7 window slides over the map, you stay in the middle */
.dg-void{aspect-ratio:1;visibility:hidden}
.dg-trail{width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.6;display:block}
.dg-grid.centered{overflow:visible}
.dg-grid.centered.slide,.co-grid.centered.slide{animation:dgSlide .4s ease-out}
@keyframes dgSlide{from{transform:translate(calc(var(--dx,0) * 9.09%),calc(var(--dy,0) * 9.09%))}to{transform:none}}
.dg-grid.centered{gap:4px}
@media (prefers-reduced-motion:reduce){.dg-grid.centered.slide,.co-grid.centered.slide{animation:none}}

/* ---------- walking around the house ---------- */
.hx-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.hx-tab{gap:3px;padding:4px 2px}
.hx-stage{position:relative;flex:0 0 auto}
.hx-layer{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:4}
.hx-av{position:absolute;left:0;top:0;box-sizing:border-box;transition-property:transform;transition-timing-function:linear;transition-duration:180ms;will-change:transform}
.hx-av .hx-sv{position:absolute;left:4%;top:0;right:4%;bottom:4%;display:block}
.hx-av svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:crispEdges;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.hx-av.me::after{content:"";position:absolute;left:30%;right:30%;bottom:2%;height:3px;border-radius:50%;background:var(--green);opacity:.8;box-shadow:0 0 6px var(--green)}
.hx-av.walk svg{animation:hxBob 180ms steps(2) infinite}
.hx-av.bump svg{animation:hxBump 120ms linear}
@keyframes hxBob{50%{transform:translateY(-7%)}}
@keyframes hxBump{30%{transform:translateX(-5%)}70%{transform:translateX(5%)}}
.hx-nm{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-size:9px;font-weight:500;color:var(--white);background:rgba(0,0,0,.6);padding:0 4px;white-space:nowrap}
.hx-bl{position:absolute;left:0;top:0;box-sizing:border-box;border:2px solid rgba(255,225,130,.9);box-shadow:0 0 14px 2px rgba(255,215,100,.7),inset 0 0 10px rgba(255,225,130,.5);animation:hxGlow 2.2s ease-in-out infinite;pointer-events:auto}
@keyframes hxGlow{50%{box-shadow:0 0 22px 5px rgba(255,215,100,.95),inset 0 0 14px rgba(255,225,130,.7)}}
.hx.walking .hx-room{padding:10px}
.hx-enterbar{justify-content:space-between}.hx-enter{letter-spacing:.1em}.hx-enter.on{border-color:var(--green);color:var(--green)}
.hx-sel{background:transparent;color:var(--white);border:1px solid var(--line);font:inherit;font-size:11px;padding:3px 6px}
.hx-blessed{color:rgb(255,225,130)}
.hv-people{display:flex;flex-direction:column;gap:3px}.hv-p{display:flex;align-items:center;gap:6px;font-size:11px}.hv-pi{width:22px;height:22px;display:inline-block}.hv-pi svg{width:100%;height:100%;shape-rendering:crispEdges}
.hv-scene{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(6,10,14,.94);opacity:0;transition:opacity .35s}.hv-scene.in{opacity:1}
.hv-wrap{display:flex;gap:16px;align-items:flex-start;max-width:96vw}
.hv-main{display:flex;flex-direction:column;gap:8px}
.hv-side{width:240px;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line2);background:rgba(var(--sh),.3);max-height:86vh;overflow-y:auto}
@media (max-width:760px){.hv-wrap{flex-direction:column;align-items:center}.hv-side{width:min(92vw,360px)}}

/* fog of war: squares you can see but have not cleared */
.dg-cell.s3{border-color:rgba(var(--hi),.14);background:rgba(var(--hi),.05)}
.dg-seen{display:inline-flex;align-items:center;justify-content:center;opacity:.7;color:var(--dim)}
.dg-seen.f{width:5px;height:5px;border-radius:50%;background:var(--dim);opacity:.55}
.dg-seen.e{color:#ffb347;opacity:.9}.dg-seen.x{color:var(--green);opacity:.9}.dg-seen.b{color:#ff6ad5;opacity:.95}
.dg-cell.s0{opacity:.45}

/* dungeons: painted corridor with torches, and drifting fog instead of fireflies */
.cb-fog{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.scene.dungeon>*:not(.cb-bg):not(.cb-fog){position:relative;z-index:2}
.scene.dungeon .cb-bg::after{background:radial-gradient(ellipse at 50% 50%,rgba(8,6,12,.18),rgba(8,6,12,.55))}

/* VICTORY / DEFEAT / ESCAPED: snap in with a hard little slam, in exactly the same place (no spacing change, so nothing squishes) */
.cb-result h1{letter-spacing:.3em;animation:vicsnap .55s cubic-bezier(.16,.9,.3,1) both;transform-origin:50% 55%}
@keyframes vicsnap{0%{opacity:0;transform:scale(2.7);filter:blur(5px)}38%{opacity:1;transform:scale(.88);filter:none}58%{transform:scale(1.08)}76%{transform:scale(.97)}100%{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.cb-result h1{animation:none}}

/* walking characters: white line drawings (dark on the light theme), slower and smoother steps */
.avg{fill:rgba(8,6,12,.45);stroke:currentColor;stroke-width:.72;stroke-linecap:round;stroke-linejoin:round}
.avg .dot{fill:currentColor;stroke:none}
:root[data-theme="light"] .avg{fill:rgba(255,255,255,.55)}
.hx-av{color:var(--white);transition-timing-function:cubic-bezier(.4,.05,.55,.95)}
.hx-av svg{filter:none}
.hx-av.walk svg{animation:hxBob 340ms ease-in-out infinite}
.hx-av.bump svg{animation:hxBump 220ms ease-in-out}
@keyframes hxBob{50%{transform:translateY(-6%)}}
.hv-pi{color:var(--white)}
.hx-av svg,.hv-pi svg{shape-rendering:auto}
.hw-own .hx-room{padding:14px}
.hw-set{flex:0 0 270px;width:270px;box-sizing:border-box;overflow-y:auto}
.hw-set .hx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.hw-scene{background:rgba(6,10,14,.97)}
.hw-set>*{flex:0 0 auto}

/* parry: harder to miss. A gold flash, a big pulsing PARRY button, and the Attack button glows while the window is open */
.parry-flash{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(255,214,110,0) 35%,rgba(255,200,80,.5) 100%);animation:parryFlash .6s ease-out forwards}
@keyframes parryFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.parry.bang{font-size:30px!important;color:#ffd36a;text-shadow:0 0 12px #ffb02e,0 0 26px #ff8a1f;top:-22px!important;left:10px!important;animation:parryBang .3s cubic-bezier(.2,1.6,.4,1)}
.cb-acts .parry.go{color:#1a1206!important;background:linear-gradient(#ffe08a,#ffb02e)!important;border:1px solid #fff2c4!important;font-weight:700;letter-spacing:.12em;height:28px!important;line-height:26px;top:-17px!important;padding:0 16px!important;font-size:13px;box-shadow:0 0 12px #ffb02e,0 0 28px rgba(255,176,46,.8);animation:parryPulse .38s ease-in-out infinite alternate!important}
@keyframes parryPulse{from{transform:scale(1);box-shadow:0 0 10px #ffb02e,0 0 22px rgba(255,176,46,.6)}to{transform:scale(1.1);box-shadow:0 0 20px #ffd36a,0 0 44px rgba(255,176,46,.95)}}
.cb-acts:has(.parry.go) button[aria-label=Attack]{border-color:#ffd36a!important;box-shadow:0 0 14px rgba(255,176,46,.7);animation:parryEdge .38s ease-in-out infinite alternate}
@keyframes parryEdge{to{box-shadow:0 0 24px rgba(255,200,80,1)}}
@media (prefers-reduced-motion:reduce){.parry-flash{display:none}.cb-acts .parry.go,.cb-acts:has(.parry.go) button[aria-label=Attack]{animation:none!important}}

.hv-y:not(:disabled){border-color:#ffd23f!important;background-color:rgba(255,210,63,.16)!important;color:#ffd23f!important}

/* parry window: the whole Attack button turns white */
.cb-acts:has(.parry.go) button[aria-label=Attack],.cb-acts:has(.parry.go) button[aria-label=Attack].hv{background:#fff!important;background-color:#fff!important;border-color:#fff!important;color:#14100a!important;box-shadow:0 0 16px rgba(255,255,255,.85);animation:parryWhite .38s ease-in-out infinite alternate}
.cb-acts:has(.parry.go) button[aria-label=Attack] svg{color:#14100a!important;stroke:#14100a!important}
@keyframes parryWhite{to{box-shadow:0 0 28px rgba(255,255,255,1)}}
@media (prefers-reduced-motion:reduce){.cb-acts:has(.parry.go) button[aria-label=Attack]{animation:none!important}}

/* house: no glow under the hero, slow fade in, big house button, help button, carried furniture */
.hx-av.me::after{display:none}
.hw-scene{opacity:0;transition:opacity .35s ease}
.hw-scene.in{opacity:1;transition:opacity 2.2s ease 1s}
.hx-enter-big{display:inline-flex;align-items:center;justify-content:center;width:64px;height:56px;padding:0;border:1px solid var(--line2);background:rgba(var(--sh),.3);color:var(--white);cursor:pointer;transition:border-color .15s,color .15s}

.hx-enter-big:disabled{opacity:.4;cursor:default}
.hx-enterbar{align-items:center}
.hx-help{flex:0 0 auto}
.hx-carry{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4;transition-property:transform;transition-timing-function:cubic-bezier(.4,.05,.55,.95);filter:drop-shadow(0 5px 3px rgba(0,0,0,.45));animation:hxFloat 1.2s ease-in-out infinite alternate}
@keyframes hxFloat{from{margin-top:-2px}to{margin-top:-6px}}
.hw-set .hx-cell.void{background:none}
.hw-set{overflow:hidden}

/* seed picker + square calendar button */
.xt-bait .pick{position:relative;flex:0 1 230px;min-width:150px}
.xt-bait .pick-list{max-height:170px;z-index:60}
.sq-cal{display:inline-flex;vertical-align:middle;margin-left:10px;width:24px;height:22px;padding:0;align-items:center;justify-content:center}

/* a landed parry: a big shield */
.parry-shield{position:absolute;left:50%;top:44%;width:120px;height:120px;margin:-60px 0 0 -60px;z-index:20;pointer-events:none;color:var(--white);display:flex;align-items:center;justify-content:center;animation:shieldPop 1.05s ease-out forwards;filter:drop-shadow(0 0 14px rgba(255,255,255,.6))}
.parry-shield svg{width:120px;height:120px;stroke-width:1.4}
@keyframes shieldPop{0%{transform:scale(.3);opacity:0}18%{transform:scale(1.15);opacity:1}35%{transform:scale(1)}80%{opacity:1}100%{transform:scale(1.05);opacity:0}}

/* party box in the announcements bar, and the small right-click menu */
.pty{flex:0 1 auto;display:flex;align-items:center;gap:8px;min-width:0;max-width:52%;font-size:11px;color:var(--dim)}
.pty[hidden]{display:none}
.pty-ic{color:var(--green);display:inline-flex}
.pty-m{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--dim)}.pty-m>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:84px}
.pty-m.on{color:var(--white)}.pty-m .ico{color:var(--green)}
.pty-d{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}.pty-m.on .pty-d{background:var(--green)}
.pty-x{flex:none;background:none;border:1px solid var(--line);border-radius:5px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--dim)}

.connection-text[hidden]{display:none}
.ctx-menu{position:fixed;z-index:120;min-width:150px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg,#0c0706);box-shadow:0 10px 28px rgba(0,0,0,.5);display:flex;flex-direction:column}
.ctx-menu button{background:none;border:0;border-radius:5px;color:var(--white);padding:7px 10px;font-size:11px;text-align:left}
.ctx-menu button:hover{background:rgba(var(--g),.12);color:var(--green)}

/* pet pane: fewer rows (XP and Fed share one, Love lives on the pet button), and it scrolls instead of cutting off */
.pet-inline{overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.pet-inline .pet-stats{grid-template-columns:1fr 1fr auto!important}
.pet-inline .pet-power{display:inline-flex;align-items:baseline;gap:3px}.pet-inline .pet-power b{font-size:12px}
.pet-inline .pet-gear{grid-template-columns:1fr!important}
.pet-inline .pet-slot{height:auto!important;min-height:18px;flex-wrap:nowrap!important;overflow:hidden}
.pet-inline .pet-sl{width:40px!important;flex:none}
.pet-inline .pet-cur{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap}

.pet-pw{color:var(--dim);font-size:10px}
.pet-inline .pet-stats{grid-template-columns:1fr 1fr!important}
.pet-inline .pet-gear{grid-template-columns:1fr 1fr!important;gap:2px 6px!important}
.pet-inline .pet-slot{flex-wrap:nowrap!important}.pet-inline .pet-sl{width:26px!important}
.pet-inline .pet-slot .q-btn,.pet-inline .pet-acts .q-btn{padding:0 5px!important}
.pet-inline .pet-slot .pet-cur{font-size:0}.pet-inline .pet-slot .pet-cur svg{font-size:11px}
.pet-inline .pet-slot span.pet-cur{font-size:10px}
.pet-inline .pet-slot .none{font-size:9.5px;color:var(--dim)}

/* 11 x 11 window: the square you stand on is lit, the rest fade out with distance, a square you can reach lights up under the cursor */
.dg-grid.centered .dg-cell,.co-grid.centered .dg-cell{opacity:var(--o,1);transition:opacity .25s,background .25s,border-color .25s,box-shadow .25s;animation:none!important;box-shadow:none}
.dg-grid.centered .dg-cell.s2:not(.flash),.co-grid.centered .dg-cell.s2:not(.flash){box-shadow:0 0 10px rgba(var(--g),.2)}
.dg-grid.centered .dg-cell:hover:not(:disabled),.co-grid.centered .dg-cell:hover:not(:disabled){opacity:1}
.dg-grid.centered .dg-cell.boss{box-shadow:0 0 10px rgba(255,106,213,.3)}
.dg-grid.centered,.co-grid.centered{gap:3px}
.dg-grid.centered .dg-cell{border-radius:4px}

/* dungeon title and its info icons; a larger, brighter grid */
.dg-title{font-size:22px!important;letter-spacing:.16em!important;line-height:1.2!important}
.dg-info{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:-2px 0 4px}
.dg-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line2);border-radius:99px;font-size:10.5px;color:var(--green);background:rgba(0,0,0,.28);cursor:var(--cur-a,help)}
.dg-chip em{font-style:normal;color:var(--white)}.dg-chip.boss{color:#ff6ad5;border-color:rgba(255,106,213,.4)}.dg-chip.bad{color:var(--warn);border-color:rgba(224,160,80,.45)}
.dg-chip:focus-visible{border-color:var(--green);outline:none} .dg-chip:hover{outline:none}
.dg-grid.centered{width:min(78vw,420px)}
.dg-grid.centered .dg-cell{border-color:rgba(var(--hi),.2);background:rgba(var(--hi),.05)}
.dg-grid.centered .dg-cell.s1{border-color:var(--line)}

.qc-sync{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}.qc-sync .qc-rl{display:inline-flex;align-items:center;gap:4px}
.qc-sync .q-btn{padding:2px 9px;font-size:10.5px}

/* auto battle button: top right of the combat box */
.cb-auto{position:absolute;top:6px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;font-size:10.5px;font-family:inherit;letter-spacing:.06em;color:var(--dim);background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:99px;cursor:var(--cur-a,pointer)}

.cb-auto.on{color:var(--green);border-color:var(--green);box-shadow:0 0 10px rgba(var(--g),.35);animation:autoPulse 1.6s ease-in-out infinite}
@keyframes autoPulse{50%{box-shadow:0 0 16px rgba(var(--g),.6)}}
@media (prefers-reduced-motion:reduce){.cb-auto.on{animation:none}}

.cb-dev{position:absolute;top:6px;left:8px;z-index:5;padding:3px 9px;font-size:10.5px;font-family:inherit;letter-spacing:.06em;color:var(--dim);background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:99px;cursor:var(--cur-a,pointer)}
.cb-dev.on{color:var(--white);border-color:var(--green)}
.cb-dev-bar{position:absolute;top:30px;left:8px;right:8px;z-index:6;display:flex}
.cb-dev-bar[hidden]{display:none}
.cb-dev-in{flex:1;min-width:0;padding:5px 8px;font:inherit;font-size:12px;color:var(--white);background:rgba(0,0,0,.8);border:1px solid var(--green);border-radius:4px;outline:none}

/* bank: the chat bar steps aside and the vault fills the whole middle column */
#game.at-bank:not(.intro-min) .chat-panel{display:none}
.place-panel.bankview{display:flex;flex-direction:column;overflow:hidden}
.place-panel.bankview>.bank{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:8px}
.bank .bk-top{display:flex;gap:10px;align-items:flex-start;flex:none;position:relative}
.bank .bk-top .bk-balance{flex:1 1 auto;min-width:0;margin-top:0}
.bank .bk-tools{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;position:relative;width:230px}
.bank .bk-tools .shop{position:static;width:100%;max-height:none;margin:0;padding:0}
.bank .bk-tools .shop.open{position:absolute;top:0;right:0;z-index:30;width:340px;max-height:360px;overflow-y:auto;background:var(--field-bg,#120a08);box-shadow:0 8px 28px rgba(0,0,0,.6);scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.bank .bk-tools .shop.collapsed .shop-toggle::after{content:none}
.bank .bk-tools .shop-toggle{width:100%;justify-content:flex-start;font-size:11px;padding:6px 10px}
.bank .bk-tools .bk-allbtns{flex-wrap:wrap;justify-content:flex-end}
.bank .bk-tools .bk-allbtns .q-btn{padding:4px 8px}
.bank .bk-vaultcol{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.bank .bk-vaultcol .bk-grid{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;align-content:start;grid-template-columns:repeat(10,1fr)}
@media(max-width:800px){.bank .bk-top{flex-direction:column}.bank .bk-tools{width:100%}#game.at-bank .chat-panel{display:flex}}
.bank .bk-tools{width:210px}
.bank .bk-tools .shop{box-sizing:border-box;margin:0!important;width:100%!important;min-width:0;border-radius:6px}
.bank .bk-tools .shop.open{width:340px!important;box-sizing:border-box}
.bank .bk-top .bk-card{flex-direction:column!important;align-items:flex-start;justify-content:flex-start;gap:8px}
.bank .bk-top .bk-cards{gap:8px}
.bank .bk-tools .shop-top,.bank .bk-tools .shop-toggle{box-sizing:border-box;width:100%;min-width:0;margin:0}
.bank .bk-tools .shop.open{padding:2px 12px 8px!important}

/* Wizard's Tower: the full spell tree under the attunement */
.tt-tree{margin-top:12px;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;background:rgba(var(--sh),.22)}
.tt-tree[hidden]{display:none}
.tt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tt-head h3{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--place,var(--green))}
.tt-tog{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tt-body{display:flex;gap:16px;align-items:flex-start}
.tt-grid{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;min-width:0}
.tt-row{display:flex;gap:10px;justify-content:center;align-items:center;position:relative}
.tt-label{position:absolute;left:calc(100% + 10px);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.tt-tile{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:6px;background:rgba(0,0,0,.35);border:1px solid var(--line2);color:var(--dim);cursor:var(--cur-a,pointer)}
.tt-tile::before,.tt-tile::after{content:"";position:absolute;left:50%;width:1px;height:12px;background:#8a76c8;opacity:.7}
.tt-tile::before{bottom:100%}.tt-tile::after{top:100%}
.tt-row:first-child .tt-tile::before,.tt-row:last-child .tt-tile::after{display:none}

.tt-tile.known{color:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(var(--g),.4)}
.tt-tile.ready{color:#e8c46a;border-color:#e8c46a}
.tt-tile.open{color:var(--white)}
.tt-tile.locked{opacity:.45}
.tt-tile.sel{outline:1px solid #fff;outline-offset:2px}
.tt-lv{position:absolute;right:2px;bottom:1px;font-size:9px;font-style:normal;color:var(--dim)}
.tt-gap{position:relative;height:24px;width:100%;display:flex;justify-content:center}
.tt-bar{position:absolute;top:12px;height:1px;background:#8a76c8;opacity:.7}
.tt-dot{position:absolute;top:8px;width:7px;height:7px;border-radius:50%;background:#8a76c8;border:1px solid var(--body-bg,#120a08)}
.tt-info{flex:0 0 210px;border:1px solid var(--line2);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:6px;font-size:11px}
.tt-itop{display:flex;justify-content:space-between;gap:8px}.tt-itop b{color:var(--white);font-weight:500;font-size:12px}.tt-itop span{color:var(--dim)}
.tt-istat{color:var(--green)}.tt-itext{color:var(--dim);line-height:1.5}
@media(max-width:800px){.tt-body{flex-direction:column;align-items:stretch}.tt-info{flex:none}}

/* Bank v2: whole page scrolls, small non-overlapping slots, one top row (Balance | Bank Shop | the four buttons), dark scrollbar */
.place-panel.bankview{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#3a2018 #120a08}
.place-panel.bankview::-webkit-scrollbar{width:8px}.place-panel.bankview::-webkit-scrollbar-track{background:#120a08}.place-panel.bankview::-webkit-scrollbar-thumb{background:#3a2018;border-radius:4px}
.place-panel.bankview>.bank{flex:0 0 auto;min-height:auto;display:block}
.bank .bk-top{flex-wrap:wrap;align-items:stretch}
.bank .bk-top .bk-balance{flex:1 1 360px}
.bank .bk-tools{flex:0 0 auto;width:auto!important;flex-direction:row;flex-wrap:wrap;align-items:center;align-self:flex-start;justify-content:flex-start;gap:6px;margin-top:8px}
.bank .bk-tools .shop{width:auto!important}
.bank .bk-tools .shop-toggle{width:auto;white-space:nowrap}
.bank .bk-tools .shop.open{position:absolute;top:34px;right:0;left:auto;width:340px!important;z-index:30}
.bank .bk-tools .bk-allbtns{flex-wrap:nowrap;justify-content:flex-start}
.bank .bk-tools .bk-allbtns .q-btn{padding:4px 7px;font-size:10px;white-space:nowrap}
.bank .bk-top .bk-card{flex-direction:row!important;align-items:center;justify-content:flex-start;gap:12px}
.bank .bk-card .bk-cardtxt{flex:0 0 auto}.bank .bk-big{font-size:17px}
.bank .bk-vaultcol{display:block;margin-top:8px}
.bank .bk-vaultcol .bk-grid{display:grid;grid-template-columns:repeat(auto-fill,34px);grid-auto-rows:34px;gap:4px;justify-content:start;max-height:none;overflow:visible;flex:none}
.bank .bk-vaultcol .bk-grid .slot{width:34px;height:34px;aspect-ratio:auto;box-sizing:border-box}
.bank .bk-vaultcol .bk-grid .slot .ico svg{width:14px;height:14px}
.bank .bk-top .bk-balance{flex:1 1 100%}
.bank .bk-headrow{gap:10px}.bank .bk-headrow .bk-lab{margin-right:0}
.bank .bk-headrow .bk-tools{margin:0 auto 0 4px;position:static;align-self:center;flex:1 1 auto}
.bank .bk-headrow .bk-help{margin-left:auto}
.bank .bk-tools .shop.open{top:42px;right:10px}
.bank .bk-cards{grid-template-columns:1fr 1fr}
.bank .bk-headrow .bk-tools .shop.open{position:static;width:auto!important;max-height:none;overflow:visible;background:none;box-shadow:none;padding:0!important;border:1px solid rgba(232,196,106,.55)!important}
.bank .bk-headrow .bk-tools .shop-pop{position:absolute;top:42px;right:10px;z-index:30;width:340px;max-height:380px;overflow-y:auto;box-sizing:border-box;padding:4px 12px 8px;background:var(--field-bg,#120a08);border:1px solid rgba(232,196,106,.55);border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.6);scrollbar-width:thin;scrollbar-color:#3a2018 #120a08}
.bank .bk-headrow .bk-tools .shop-top{margin:0}
.bank .bk-headrow .bk-tools .shop-top{background:none;padding:0!important;border:0;width:auto!important}
.bank .bk-headrow .bk-tools .shop-toggle{background:none!important;padding:4px 10px;width:auto!important;font-size:10px}
.bank .bk-headrow .bk-tools .shop{flex:none}
.bank .bk-headrow .bk-tools .shop.open{box-shadow:0 0 12px rgba(232,196,106,.22)}

/* combat / explore / dungeon UI pass: auto battle fast-forward button, dev button above the box, fading side boxes, stamina flash, dungeon grid shadow */
.cb-stack>.cb-auto{top:10px;right:12px;width:28px;height:28px;padding:0;gap:0;justify-content:center;border-radius:50%}
.cb-stack>.cb-auto svg{width:14px;height:14px}
.cb-stack>.cb-dev{top:auto;left:0;bottom:calc(100% + 6px)}
.cb-stack>.cb-dev-bar{top:auto;left:64px;right:0;bottom:calc(100% + 4px)}
.cb-side,.cb-list{transition:opacity .45s ease}
.cb-side.idle-out,.cb-list.idle-out{opacity:0;pointer-events:none}
.bar.stam-flash{animation:stamFlash .65s ease-out}
.bar.stam-flash>i{background:#fff!important;box-shadow:0 0 10px #fff}
@keyframes stamFlash{0%{box-shadow:0 0 0 2px #fff,0 0 14px #fff;background:#fff}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.forest-explore.nostam,.gg-tile.nostam{opacity:.5}
.dg-grid,.co-grid{position:relative;box-sizing:content-box;padding:12px;border-radius:16px;background:rgba(0,0,0,.42);box-shadow:0 0 26px 12px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.bar.stam-flash{animation:none}.cb-side,.cb-list{transition:none}}

/* Support the Game: a small bordered box, centered */
.support-head{justify-content:center}
.support-head .support-title.sub-link{width:auto!important;display:inline-flex;justify-content:center;border:1px solid rgba(224,192,112,.55)!important;border-radius:6px;padding:5px 14px!important;margin:0 auto;background:rgba(224,192,112,.06)}


/* ===== House: pixel-art floor and rugs, thick grid, tidy grouped toolbar, roomier Stables panel ===== */
.hx-stage{image-rendering:pixelated;box-shadow:0 0 0 3px #d9cdb0,0 0 0 6px #2a2018}
.hx-cell,.slot.hx-cell{image-rendering:pixelated;border:0!important;background-repeat:no-repeat;box-shadow:inset -2px -2px 0 rgba(255,238,205,.30),inset 1px 1px 0 rgba(255,238,205,.30);transition:box-shadow .12s}
.hx-cell.void,.slot.hx-cell.void{box-shadow:none;background:none!important}
.slot.hx-cell.full{box-shadow:inset -2px -2px 0 rgba(255,238,205,.30),inset 1px 1px 0 rgba(255,238,205,.30)}
.hx-cell:hover:not(.void),.slot.hx-cell:hover:not(.void){box-shadow:inset 0 0 0 3px var(--green),0 0 10px rgba(var(--g),.45);z-index:2}
.hx-cell.sel{outline:2px solid var(--green);outline-offset:-3px}
.hx-enter-big{width:54px;height:46px}
.hx-enterbar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.hx-grow{flex:1 1 auto}
.hx-enterbar .hx-tab{flex:0 0 auto}
.hx-side .hx-tabs,.hw-set .hx-tabs{display:flex;flex-direction:column;grid-template-columns:none;gap:7px}
.hx-grp{display:flex;flex-direction:column;gap:4px}
.hx-gl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hx-gr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hx-gr .hx-tab{justify-content:center;padding:5px 2px;gap:4px;min-width:0}
.hw-set,.hx-side{gap:9px}
.hw-set{overflow-y:auto!important;max-height:calc(100vh / var(--zoom, 1) - 30px)!important;flex:0 0 290px;width:290px}
.hx-side .xt-row,.hw-set .xt-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line2)}
.hx-side .xt-row>span:empty,.hw-set .xt-row>span:empty{display:none}
.hx-side .xt-row .shop-btns,.hw-set .xt-row .shop-btns{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.hx-side .xt-row .gd-dim,.hw-set .xt-row .gd-dim{grid-column:1/-1}
.hx-side .xt-row .shop-name em,.hw-set .xt-row .shop-name em{white-space:normal}

/* Calendar: fixed-size box (the day detail scrolls inside), tab buttons sit in flow under the title so nothing overlaps */
.cal-tabs{position:static!important;justify-content:center;margin:-4px 0 10px}
.fullpage.calpage>.fp-wrap{height:min(660px,calc(100vh / var(--zoom) - 48px));display:flex;flex-direction:column;overflow:hidden}
.fullpage.calpage .fp-body.cal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.fullpage.calpage .cal-legend,.fullpage.calpage .cal-grid,.fullpage.calpage .fp-sub{flex:none}
.fullpage.calpage .cal-detail{flex:1 1 auto;min-height:0;overflow-y:auto;text-align:left;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.fullpage.calpage{animation:none}

/* Sound switcher: a small text dropdown like the palettes */
.pal-menu.snd-menu{width:150px;padding:4px}
.snd-opt{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;font:inherit;font-size:11px;letter-spacing:.04em}
.snd-opt b{font-weight:500;color:var(--dim)}.snd-opt.on b{color:var(--green)}
.snd-opt.on{border-color:transparent}
.hx-sw{width:17px;height:17px;image-rendering:pixelated;border:0}
.hx-side{max-height:450px}

/* Town Board button beside the Town Square title; bounty page */
.pt-board{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}.pt-board[hidden]{display:none}
.fp-body.bounty{text-align:left}.fp-body.bounty .quests{display:flex;flex-direction:column;gap:6px;margin-top:8px}

/* Chronicle: places not found yet are grayed out and read ??? */
.ch2-loc.unfound{opacity:.38;filter:grayscale(1);cursor:var(--cur-n,default);pointer-events:none;color:var(--dim)}
.fullpage.calpage .fp-wrap>.pf-x{position:absolute;top:12px;right:14px;float:none;margin:0}

/* ===== Inn / Monastery: the open Kitchen (craft box) reaches the bottom of its panel, with the same gap as left and right ===== */
.place-panel.hascraft:not(.hasshop):not(.smith):not(.qmode):not(.mapmode):not(.annmode){display:flex;flex-direction:column;overflow:hidden}
.place-panel.hascraft:not(.hasshop):not(.smith)>*{flex:none}
.place-panel.hascraft:not(.hasshop):not(.smith)>.craftbox.open{flex:1 1 0;min-height:90px;max-height:none;margin-bottom:0;overflow-y:auto}

/* ===== Explore row: Solo / Co-op switch, co-op invite box, gathering everywhere, unique Blacksmith gear, card shop scrolling ===== */
.explore-row{display:flex;gap:8px;flex:0 0 100%;width:100%;align-items:stretch}
.explore-row .forest-explore{flex:1 1 auto;width:auto;min-width:0;margin:2px 0 8px}
.co-toggle{display:flex;flex:0 0 auto;margin:2px 0 8px;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.acts .co-toggle button{border:0;border-radius:0;background:transparent;color:var(--dim);padding:0 14px;min-height:0;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.acts .co-toggle button+button{border-left:1px solid var(--line2)}
.acts .co-toggle .co-opt.on{background:rgba(var(--g),.18);color:var(--green)}
.acts .co-toggle .co-opt:hover:not(:disabled):not(.on){color:var(--white)}
.co-wait{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:2px 0 8px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;font-size:11px;white-space:nowrap}
.co-invbox{width:min(460px,100%);text-align:left}.co-invbox h3{margin:0 0 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.co-invbox .co-pick p{margin:0 0 10px;font-size:12px}.co-invbox .co-sect{font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:8px 0 2px}
.co-invbox .co-form{margin-top:12px}.co-invbox .note-ok{margin-top:14px;text-align:center}
@media(max-width:520px){.explore-row{flex-wrap:wrap}.co-toggle{flex:1 1 100%;margin-top:0}.acts .co-toggle button{flex:1;padding:9px 14px}.co-wait{flex:1 1 100%;justify-content:space-between;padding:8px 12px}}
.place-panel.hasshop .xtra.cardscroll{flex:1 1 0;min-height:90px;max-height:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.place-panel.hasshop .xtra.cardscroll .seedbox.open{max-height:none;overflow:visible}
.shop-row.uniq .shop-name>span{color:var(--green)}
.uniq-tag{margin-left:8px;font-size:9px;font-weight:500;letter-spacing:.14em;color:var(--green);border:1px solid var(--green);border-radius:3px;padding:0 4px;vertical-align:middle}
.uniq-more{font-size:11px;margin:4px 0 6px 6px}

/* ===== One hover language: green border and a soft glow on everything you can press; no white or blue except the fight buttons and healing ===== */
.hv-g:not(:disabled){border-color:#5fe08a!important;background-color:rgba(95,224,138,.12)!important;color:#5fe08a!important;box-shadow:0 0 0 1px rgba(95,224,138,.30),0 0 10px rgba(95,224,138,.20)!important}
.hv-g svg{stroke:currentColor}
.gg-tile.hv-g .gg-sub,.gg-tile.hv-g .gg-name{color:#5fe08a}
.gg-tile:hover:not(:disabled),.acts .gg-tile:hover:not(:disabled){border-color:var(--green);background:rgba(95,224,138,.12);box-shadow:0 0 0 1px rgba(95,224,138,.30),0 0 10px rgba(95,224,138,.20)}
.pick-btn:hover{border-color:var(--green)}
/* lifts and zooms on hover moved things around; hover now only changes color */
.ch2-fu:hover,.rm-spot:hover,.lg-card.found:hover{transform:none} .ac-tile:hover,.ch2-loc:hover,.ch2-tile:hover{transform:none}
.lg-card.found:hover{border-color:var(--green)}
/* the stray white hovers */


.pf-season:hover,.stats .kin .kin-el:hover,.qbook .qb-sum .qb-f:hover,.cb-auto:hover,.cb-dev:hover{color:var(--green)}


.scene-skip:focus-visible{background:rgba(var(--g),.18)}
.game-foot .foot-link:hover,.game-foot .foot-ver:hover{color:var(--green)}

.hx-cell:hover:not(.void),.slot.hx-cell:hover:not(.void){border-color:transparent}
/* places with a long panel (Harbor, Farm) scroll inside the box so the Gathering tiles are always reachable */
.place-panel:has(.gather-group){overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

/* PET CARE PANE: one compact pane that covers the Inventory/Equipment box and the pet box together, so nothing is cut off; it fades back after about 4 seconds without a click or pointer move */
.side{position:relative}
.pet-pane{position:absolute;left:0;right:0;z-index:5;box-sizing:border-box;padding:8px 10px;overflow:hidden;display:flex;flex-direction:column;font-size:10.5px;opacity:1;transition:opacity .45s ease;animation:ppin .25s ease}
@keyframes ppin{from{opacity:0}to{opacity:1}}
.pet-pane.fade{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.pet-pane{animation:none;transition:none}}
.pet-pane .pi-x{top:6px;right:8px}
.pet-pane .pet-body{display:flex;flex-direction:column;gap:5px;min-height:0;flex:1;padding:0}
.pet-pane .pet-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin:0 24px 0 0;line-height:1.1}
.pet-pane .pet-title{font-size:14px;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pet-pane .pet-lv{flex:none;font-size:11px}.pet-pane .pet-pw{font-size:10px}
.pet-pane .pet-rename{flex:1;display:flex;gap:4px;min-width:0}.pet-pane .pet-rename input{flex:1;min-width:0;height:20px;font-size:11px;padding:0 6px}
.pet-pane .pp-meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pet-pane .pet-meter{height:14px}
.pet-pane .pet-meter>span{font-size:8.5px;line-height:12px;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.pet-meter.love>i{background:rgba(224,120,170,.5)}
.pet-pane .pp-need{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid var(--line2);border-radius:6px;padding:2px 6px;min-height:22px}
.pet-pane .pp-nt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--green);font-size:10px}
.pet-pane .pet-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0}
.pet-pane .q-btn{height:19px;padding:0 6px;font-size:10px;display:inline-flex;align-items:center;gap:3px;line-height:1;flex:none}
.pet-pane .pet-dim{font-size:10px;margin:0}
.pet-pane .pet-gear{display:flex;flex-direction:column;gap:3px;margin:0}
.pet-pane .pet-slot{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-height:19px;padding:0;border:0;overflow:hidden;font-size:10px}
.pet-pane .pet-sl{width:28px;flex:none;font-size:9.5px;color:var(--dim)}
.pet-pane .pet-slot .pet-cur{min-width:0;max-width:62%;overflow:hidden;white-space:nowrap;font-size:10px}
.pet-pane .pet-slot .none{font-size:9.5px;color:var(--dim)}
/* pet pane: solid backdrop and tighter rows so even a fully geared pet fits at 1280x720 */
.pet-pane{background:linear-gradient(180deg,var(--panel-top),var(--panel-bot)),var(--field-bg);padding:7px 9px;font-size:10px}
.pet-pane .pet-body{gap:3px}
.pet-pane .pet-top{margin-right:22px}.pet-pane .pet-title{font-size:13px}
.pet-pane .pet-meter{height:13px}
.pet-pane .pp-need{min-height:19px;padding:1px 5px}
.pet-pane .q-btn{height:17px;padding:0 5px;font-size:9.5px}
.pet-pane .pet-acts{gap:3px}
.pet-pane .pet-gear{gap:3px}
.pet-pane .pet-slot{flex-wrap:wrap;overflow:visible;min-height:17px;align-items:flex-start;gap:3px}
.pet-pane .pet-sl{width:25px;line-height:17px;font-size:9px}
.pet-pane .pet-slot .none{line-height:17px}
.pet-pane .pet-slot .q-btn:not(.pet-cur){flex:none}
.pet-pane .pet-cnt{font-size:8.5px;color:var(--dim)}
.pet-pane .pet-slot .pet-cur{max-width:none}
.pet-pane .pet-slot .q-btn{padding:0 4px}

/* CONTROLLER ON-SCREEN KEYBOARD: opens when you click a text box with the controller pointer */
.pad-kb{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:2147482000;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--field-bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 35px rgba(0,0,0,.5)}
.pad-kb.top{bottom:auto;top:12px}
.pad-kb .pk-row{display:flex;gap:4px;justify-content:center}
.pad-kb .pk{min-width:34px;height:32px;padding:0 8px;font:inherit;font-size:13px;color:var(--white);background:rgba(var(--sh),.35);border:1px solid var(--line2);border-radius:6px;cursor:none}
.pad-kb .pk.pk-sp{min-width:140px}.pad-kb .pk.on{color:var(--green);border-color:var(--green)}
.pad-kb .pk.pk-x,.pad-kb .pk.pk-enter{border-color:var(--green);color:var(--green)}
.pad-kb .pk.pad-hover{filter:brightness(1.4)}
.pad-kb .pk-row{border:0!important;padding:0!important;margin:0!important;background:none!important}

/* Stat Shard pick: every stat glows, including the chosen playstyle stat */
.stats .stat-btn.top.chosen.shard-pick,.stats .stat-btn.chosen.shard-pick,.stats .stat-btn.top.shard-pick{animation:shardflash 1.6s ease-in-out infinite!important;border-color:#ffe99a;color:inherit}
@media (prefers-reduced-motion:reduce){.stats .stat-btn.shard-pick,.stats .stat-btn.top.chosen.shard-pick{animation:none!important;box-shadow:0 0 10px 2px rgba(255,235,150,.75)!important;border-color:#ffe99a!important}}

/* Dragging a vault item over worn-gear slots: valid slots glow green, the rest dim */
.slot.gear-ok{border-color:var(--green)!important;box-shadow:0 0 8px rgba(var(--g),.6)}
.slot.gear-no{opacity:.4}
.slot.gear-no.drop{border-color:#d46a6a!important;background:rgba(212,106,106,.15)!important}

/* Notification dots in the Locations list */
.loc-btn,.loc-head{position:relative}
.ndot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold,#ffd34d);box-shadow:0 0 5px rgba(255,211,77,.8);margin-left:7px;vertical-align:middle;animation:ndotpulse 2s ease-in-out infinite}
@keyframes ndotpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){.ndot{animation:none}}

/* Controller mode: hide the real mouse cursor everywhere while the gamepad pointer is active (comes back when the real mouse moves) */
html.pad-on,html.pad-on *,body.pad-on,body.pad-on *,html.pad-on body.dragging,html.pad-on body.dragging *,.pad-on button,.pad-on a,.pad-on .slot,.pad-on input,.pad-on select,.pad-on textarea{cursor:none!important}
#pad-ring{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--green);box-shadow:0 0 8px rgba(var(--g),.6),inset 0 0 6px rgba(var(--g),.35);pointer-events:none;transition:width .08s ease,height .08s ease,margin .08s ease,background .08s ease;opacity:.9}
#pad-ring.down{width:18px;height:18px;margin:-9px 0 0 -9px;background:rgba(var(--g),.35)}

/* ---- Monster outlines (monsters.js): the monster view, its breathing, and the silhouette for monsters not met yet ---- */
.mv{display:flex;align-items:flex-end;justify-content:center;color:var(--white,#fff);min-height:0}
.mv-svg{width:100%;height:100%;display:block;overflow:visible;fill:#0c0a10;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}
.mv-svg *{vector-effect:non-scaling-stroke}
.mv-svg .nf{fill:none}
.mv-svg .dot{fill:currentColor;stroke:none}
:root[data-theme="light"] .mv-svg{fill:#fff}
.mv-b{transform-origin:60px 94px;animation:mvbreathe 3.4s ease-in-out infinite}
@keyframes mvbreathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-.7px) scale(1.016,1.034)}}
@media (prefers-reduced-motion:reduce){.mv-b{animation:none}}
.mv.sil .mv-svg{fill:currentColor;stroke:none;opacity:.2}
.mv.sil .mv-svg .dot,.mv.sil .mv-svg .nf{display:none}
.mv.sil .mv-b{animation:none}
.mv.thumb .mv-svg{stroke-width:1.5px}
/* (extra-strong version so no page rule with !important can bring the real cursor back) */
html.pad-on :not(#pad-x):not(#pad-y):not(#pad-z),html.pad-on body.dragging :not(#pad-x):not(#pad-y):not(#pad-z),html.pad-on :not(#pad-x):not(#pad-y):not(#pad-z):disabled{cursor:none!important} html.pad-on :not(#pad-x):not(#pad-y):not(#pad-z):hover{cursor:none!important}

/* ---- Foe info box: as tall as the fight box, monster view on top, text at the bottom ---- */
.cb-inspect{display:flex!important;flex-direction:column;justify-content:flex-end;box-sizing:border-box;gap:0;min-height:260px}
.cb-wrap.full .cb-inspect{min-height:300px}
.ci-view{flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;justify-content:center;margin:0 0 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);padding:8px 8px 10px;position:relative;overflow:hidden}
.ci-view::after{content:"";position:absolute;left:12%;right:12%;bottom:10px;border-top:1px dashed var(--line2,var(--line));opacity:.6;pointer-events:none}
.ci-view .mv{width:100%;height:100%;position:relative;z-index:1}
.cb-inspect .ci-head{margin-bottom:6px;flex:none}.cb-inspect .ci-tags,.cb-inspect .ci-lore,.cb-inspect .ci-hp{flex:none}

/* ---- Bestiary inside the Chronicle ---- */
.bs{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.bs-head{display:flex;align-items:center;gap:12px;flex:none}.bs-head h3{margin:0;font-size:16px}.bs-head .bar{flex:1;max-width:260px;margin:0}
.bs-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px}
.bs-list{min-height:0;overflow-y:auto;scrollbar-width:thin;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;align-content:start;padding:10px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.2)}
.bs-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.3);color:var(--white);font:inherit;cursor:var(--cur-a,pointer);transition:border-color .15s,transform .12s}
.bs-tile:hover{border-color:var(--green);transform:translateY(-1px)}.bs-tile.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}.bs-tile.boss{border-color:rgba(var(--g),.5)}
.bs-tile .mv{width:100%;height:68px}.bs-tile .mv-b{animation:none}
.bs-n{font-size:11px;line-height:1.2;text-align:center;min-height:26px;display:flex;align-items:center;justify-content:center}.bs-tile em{font-style:normal;font-size:10px;color:var(--dim)}
.bs-tile.unk .bs-n{color:var(--dim)}
.bs-detail{min-height:0;display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.2)}
.bs-view{flex:1 1 auto;min-height:150px;display:flex;align-items:flex-end;justify-content:center;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);padding:8px 8px 10px;position:relative;overflow:hidden}
.bs-view::after{content:"";position:absolute;left:12%;right:12%;bottom:10px;border-top:1px dashed var(--line2,var(--line));opacity:.6;pointer-events:none}
.bs-view .mv{width:100%;height:100%;position:relative;z-index:1}
.bs-info{flex:none;max-height:48%;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.5}
.bs-name b{font-size:15px}.bs-line{display:flex;flex-direction:column;gap:0}.bs-line .gd-dim{font-size:10px}
@media(max-width:900px){.bs-body{grid-template-columns:1fr}.bs-detail{min-height:300px}}

/* fishing: catch card */
.fg-catch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 22px;text-align:center}
.fgc-ico{color:var(--fc,var(--green));filter:drop-shadow(0 0 10px var(--fc,var(--green)));animation:fgcIn .5s ease both}
.fg-catch.lost .fgc-ico{opacity:.5;filter:none}
.fgc-head{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fgc-name{font-size:18px;color:var(--white)}
.fgc-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.fgc-tags span{border:1px solid var(--line2);border-radius:99px;padding:2px 9px;font-size:10px;color:var(--fc,var(--green))}
.fgc-note{font-size:11px;color:var(--dim)}
.fgc-btns{display:flex;gap:8px;margin-top:6px}
@keyframes fgcIn{from{transform:scale(.6) translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.fgc-ico{animation:none}}

/* fishing: no painted lake behind the minigame, just the normal dimmed screen */
.fishgame{background:rgba(5,8,14,.78)!important;background-image:none!important}
.fishgame::before{display:none!important}
.fishgame>.fg-lake{display:none!important}
@keyframes fgshake{0%{transform:translate(calc(var(--shk,0px)*-1),calc(var(--shk,0px)*.5))}20%{transform:translate(calc(var(--shk,0px)*.8),calc(var(--shk,0px)*-.7))}40%{transform:translate(calc(var(--shk,0px)*-.6),calc(var(--shk,0px)*-.4))}60%{transform:translate(calc(var(--shk,0px)*.9),calc(var(--shk,0px)*.6))}80%{transform:translate(calc(var(--shk,0px)*-.7),calc(var(--shk,0px)*.8))}100%{transform:translate(calc(var(--shk,0px)*1),calc(var(--shk,0px)*-.5))}}
.fishgame.reeling.pulling .fg-ring{animation:fgshake .09s linear infinite}
@media (prefers-reduced-motion:reduce){.fishgame.reeling.pulling .fg-ring{animation:none}}

/* ===== Bank: bigger vault slots, vault grid scrolls inside the Bank view; Town Board button sits left of the title and is hidden inside the Quest Book ===== */
.place-panel.bankview{display:flex;flex-direction:column;overflow:hidden}
.place-panel.bankview>.bank{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.bank .bk-top{flex:none}
.bank .bk-vaultcol{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.bank .bk-vaultcol .bk-grid{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;grid-template-columns:repeat(auto-fill,40px);grid-auto-rows:40px;gap:4px;padding-right:6px;scrollbar-width:thin;scrollbar-color:#3a2018 #120a08}
.bank .bk-vaultcol .bk-grid::-webkit-scrollbar{width:8px}.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-track{background:#120a08}.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb{background:#3a2018;border-radius:4px}
.bank .bk-vaultcol .bk-grid .slot{width:40px;height:40px}
.bank .bk-vaultcol .bk-grid .slot .ico svg{width:17px;height:17px}
.place-panel.qmode .pt-board,.place-panel.mapmode .pt-board,.place-panel.annmode .pt-board{display:none!important}

/* house walk mode: floor planks about 20% darker, grid lines a little more visible */
.hv-scene .hx-cell:not(.void){position:relative;isolation:isolate}
.hv-scene .hx-cell:not(.void)::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.2);pointer-events:none}
.hv-scene .hx-cell:not(.void),.hv-scene .slot.hx-cell.full{box-shadow:inset -2px -2px 0 rgba(255,238,205,.5),inset 1px 1px 0 rgba(255,238,205,.5)}
.hv-scene .hx-cell:hover:not(.void),.hv-scene .slot.hx-cell:hover:not(.void){box-shadow:inset 0 0 0 3px var(--green),0 0 10px rgba(var(--g),.45)}

/* dungeon: the panel behind the grid is as dark as the combat box */
.dg-grid,.co-grid{background:rgba(4,6,10,.9)!important}
.dg-blackout{position:fixed;inset:0;z-index:300;background:#000;opacity:0;pointer-events:all;transition:opacity .3s ease}
.dg-blackout.on{opacity:1}
@media (prefers-reduced-motion:reduce){.dg-blackout{transition:none}}

/* ---- Monster idle: a calm few-frame loop. Body bob with a tiny squash and stretch, head sway, tails and wings drift. Each monster has its own timing (--d, --t from monsters.js). Lines stay crisp (non-scaling stroke). ---- */
.mv-b{transform-origin:60px 94px;animation:mvIdle var(--t,3.6s) ease-in-out var(--d,0s) infinite}
.mv-hd,.mv-ap,.mv-tail,.mv-wing,.mv-wl,.mv-wr{transform-box:fill-box}
.mv-hd{transform-origin:50% 92%;animation:mvHead calc(var(--t,3.6s) * 1.15) ease-in-out calc(var(--d,0s) - .35s) infinite}
.mv-ap{transform-origin:50% 25%;animation:mvSway calc(var(--t,3.6s) * .9) ease-in-out calc(var(--d,0s) - .6s) infinite}
.mv-tail{transform-origin:100% 55%;animation:mvSway calc(var(--t,3.6s) * .85) ease-in-out calc(var(--d,0s) - .5s) infinite}
.mv-wing{transform-origin:85% 90%;animation:mvWing calc(var(--t,3.6s) * .8) ease-in-out calc(var(--d,0s) - .2s) infinite}
.mv-wl{transform-origin:100% 40%;animation:mvWingL calc(var(--t,3.6s) * .6) ease-in-out var(--d,0s) infinite}
.mv-wr{transform-origin:0% 40%;animation:mvWingR calc(var(--t,3.6s) * .6) ease-in-out var(--d,0s) infinite}
@keyframes mvIdle{0%,100%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-1.4px) scale(.992,1.014)}70%{transform:translateY(.3px) scale(1.006,.992)}}
@keyframes mvHead{0%,100%{transform:rotate(0) translateY(0)}33%{transform:rotate(-2.4deg) translateY(-.6px)}66%{transform:rotate(1.9deg) translateY(.3px)}}
@keyframes mvSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg)}}
@keyframes mvWing{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(3deg)}}
@keyframes mvWingL{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}
@keyframes mvWingR{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-3deg)}}
.mv.sil .mv-b,.mv.sil .mv-hd,.mv.sil .mv-ap,.mv.sil .mv-tail,.mv.sil .mv-wing,.mv.sil .mv-wl,.mv.sil .mv-wr,.bs-tile .mv-hd,.bs-tile .mv-ap,.bs-tile .mv-tail,.bs-tile .mv-wing,.bs-tile .mv-wl,.bs-tile .mv-wr{animation:none}
@media (prefers-reduced-motion:reduce){.mv-b,.mv-hd,.mv-ap,.mv-tail,.mv-wing,.mv-wl,.mv-wr{animation:none!important}}

/* Wizard's Tower: daily attunement rune button */
.rune-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;font:inherit;font-size:11px;letter-spacing:.06em;color:#c9a8ff;background:rgba(140,100,220,.12);border:1px solid rgba(170,130,255,.6);border-radius:99px;cursor:var(--cur-a,pointer);box-shadow:0 0 12px rgba(150,110,255,.35);animation:runeGlow 2.6s ease-in-out infinite}

.rune-btn.done,.rune-btn:disabled{animation:none;box-shadow:none;opacity:.5;color:var(--dim);border-color:var(--line2);background:none}
.rune-btn .ico{filter:drop-shadow(0 0 4px currentColor)}
@keyframes runeGlow{0%,100%{box-shadow:0 0 6px rgba(150,110,255,.25)}50%{box-shadow:0 0 16px rgba(170,130,255,.6)}}
@media (prefers-reduced-motion:reduce){.rune-btn{animation:none}}

/* enemy health bar: the part just lost flashes white and fades (the whole bar only flashes on a crit) */
.cb-ftrack{position:relative}
.cb-ghost{position:absolute;top:0;bottom:0;background:#fff;border-radius:0;pointer-events:none;box-shadow:0 0 8px #fff;animation:ghostFade 1.3s ease-out .15s forwards}
@keyframes ghostFade{0%{opacity:1}35%{opacity:1}100%{opacity:0}}
.cb-foe.hit{animation:hitflash 1s ease-out}
@media (prefers-reduced-motion:reduce){.cb-ghost{animation:none;opacity:0}}

/* parry overhaul: PARRY! button text and the red PARRY FAILED! banner */
.cb-acts .parry.go{font-size:15px!important;height:32px!important;line-height:30px!important;top:-20px!important;padding:0 20px!important;letter-spacing:.18em}
.parry-banner{position:absolute;left:50%;top:40%;z-index:21;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;font-weight:700;font-size:34px;letter-spacing:.14em;animation:parryBannerIn 1.7s ease-out forwards}
.parry-banner.fail{color:#ff4a4a;text-shadow:0 0 14px rgba(255,60,60,.85),0 2px 4px #000}
@keyframes parryBannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}22%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
@media (prefers-reduced-motion:reduce){.parry-banner{animation:none}}
.cb-auto[hidden]{display:none!important}

/* gear cannot be swapped in a fight, a dungeon or the Tower: the slots grey out */
.slot.gear-lock{opacity:.45;filter:grayscale(.7)}
.slot.gear-lock.click{cursor:not-allowed}

/* ---- Oct 8 patch: timed places in the Wilderness (gold dawn, sky day, violet night), glow when open ---- */
.locs button.loc-btn.tm{--tm:#f2c36b;--tmr:242,195,107;display:block;color:var(--tm);box-shadow:inset 2px 0 0 rgba(var(--tmr),.55)}
.locs button.loc-btn.tm-day{--tm:#6cc6ff;--tmr:108,198,255}
.locs button.loc-btn.tm-night{--tm:#a98bff;--tmr:169,139,255}
.locs button.loc-btn.tm-open{background:rgba(var(--tmr),.10);box-shadow:inset 2px 0 0 var(--tm),0 0 12px rgba(var(--tmr),.35);animation:tmglow 3s ease-in-out infinite}
.locs button.loc-btn.tm-closed{opacity:.5}
.locs button.loc-btn.tm.here{color:var(--tm);background:rgba(var(--tmr),.16)}
.locs button.loc-btn.tm-ping,.locs button.loc-head.tm-ping{animation:tmping 1.1s ease-in-out 8}
@keyframes tmglow{0%,100%{box-shadow:inset 2px 0 0 var(--tm),0 0 6px rgba(var(--tmr),.18)}50%{box-shadow:inset 2px 0 0 var(--tm),0 0 16px rgba(var(--tmr),.55)}}
@keyframes tmping{0%,100%{box-shadow:0 0 0 rgba(var(--g),0)}50%{box-shadow:0 0 16px rgba(var(--g),.8)}}
.ch2-loc.tm-morning i,.ch2-loc.tm-morning svg{color:#f2c36b}.ch2-loc.tm-day svg{color:#6cc6ff}.ch2-loc.tm-night svg{color:#a98bff}
@media(prefers-reduced-motion:reduce){.locs button.loc-btn.tm-open{animation:none}.locs button.loc-btn.tm-ping,.locs button.loc-head.tm-ping{animation:none;box-shadow:0 0 12px rgba(var(--g),.7)}}

/* Oct 8: dungeon rows (castle icon, Solo / Duo switch, glowing Enter), a much darker grid with a bright player square, and dungeon cutscene fades */
.shop-row.dg-row{grid-template-columns:30px minmax(0,1fr) auto!important;gap:10px;padding:10px 0;align-items:center}
.dg-row>.ico{justify-self:center;filter:drop-shadow(0 0 5px rgba(var(--g),.55))}
.dg-row.low>.ico{filter:none;opacity:.5}
.dg-row .shop-name em{white-space:normal}
.dg-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dg-row .co-toggle{display:flex;margin:0;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.dg-row .co-toggle button{border:0;border-radius:0;background:transparent;color:var(--dim);padding:7px 10px;min-height:0;font:inherit;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;width:auto}
.dg-row .co-toggle button+button{border-left:1px solid var(--line2)}
.dg-row .co-toggle .co-opt.on{background:rgba(var(--g),.18);color:var(--green)}
.dg-row .co-toggle .co-opt:hover:not(:disabled):not(.on){color:var(--white)}
.dg-row .co-wait{display:flex;align-items:center;gap:8px}
.dg-enter{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:8px 16px 8px 18px;font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);background:linear-gradient(120deg,rgba(var(--g),.2),rgba(0,0,0,.55));border:1px solid var(--green);border-radius:8px;cursor:var(--cur-a,pointer);box-shadow:0 0 10px rgba(var(--g),.25),inset 0 0 12px rgba(var(--g),.12);transition:background .25s,color .25s,box-shadow .25s,letter-spacing .25s}
.dg-enter.ready{animation:dgEnterGlow 2.6s ease-in-out infinite}
.dg-enter::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);opacity:0}
.dg-enter:hover:not(:disabled){background:linear-gradient(120deg,rgba(var(--g),.55),rgba(var(--g),.2));color:#fff;letter-spacing:.3em;box-shadow:0 0 22px rgba(var(--g),.65),inset 0 0 14px rgba(var(--g),.3)}
.dg-enter:hover:not(:disabled)::after{opacity:1;animation:dgEnterSweep .9s ease-out}
.dg-enter .ico{transform:rotate(-90deg);transition:transform .25s}.dg-enter:hover:not(:disabled) .ico{transform:rotate(-90deg) translateY(3px)}
.dg-enter.duo{color:#e8c46a;border-color:#e8c46a;background:linear-gradient(120deg,rgba(232,196,106,.2),rgba(0,0,0,.55));box-shadow:0 0 10px rgba(232,196,106,.25),inset 0 0 12px rgba(232,196,106,.12)}
.dg-enter.duo:hover:not(:disabled){background:linear-gradient(120deg,rgba(232,196,106,.5),rgba(232,196,106,.18));color:#fff;box-shadow:0 0 22px rgba(232,196,106,.6),inset 0 0 14px rgba(232,196,106,.3)}
.dg-enter:disabled{opacity:.4;animation:none;box-shadow:none;cursor:var(--cur-n,not-allowed)}
@keyframes dgEnterGlow{0%,100%{box-shadow:0 0 6px rgba(var(--g),.2),inset 0 0 10px rgba(var(--g),.1)}50%{box-shadow:0 0 18px rgba(var(--g),.55),inset 0 0 14px rgba(var(--g),.22)}}
@keyframes dgEnterSweep{from{left:-60%}to{left:130%}}
@media (prefers-reduced-motion:reduce){.dg-enter.ready{animation:none}.dg-enter:hover::after{animation:none}}
.dg-group .shop-top{display:flex;align-items:center;gap:6px}
/* the box behind the grid is as dark as the combat box; your square glows; the squares you can reach light up when you mouse over one of them */
.scene.dungeon{background:rgba(2,2,4,.98)}
.dg-grid,.co-grid{background:rgba(3,3,5,.97)!important;box-shadow:0 0 34px 16px rgba(0,0,0,.75)}
.dg-grid.centered .dg-cell{background:rgba(255,255,255,.012);border-color:rgba(var(--hi),.09)}
.dg-grid.centered .dg-cell.s2:has(.dg-me),.co-grid.centered .dg-cell.s2:has(.co-duo){opacity:1;background:rgba(var(--g),.24);border-color:var(--green);box-shadow:0 0 18px 3px rgba(var(--g),.55)!important}
.dg-me{width:13px;height:13px;box-shadow:0 0 14px 3px var(--green),0 0 4px #fff}
.dg-grid.centered .dg-cell.s1:not(:disabled),.co-grid.centered .dg-cell.s1:not(:disabled){border-color:rgba(var(--g),.3)}
.dg-grid.centered:has(.dg-cell.s1:not(:disabled):hover) .dg-cell.s1:not(:disabled),.co-grid.centered:has(.dg-cell.s1:not(:disabled):hover) .dg-cell.s1:not(:disabled){opacity:1;background:rgba(var(--g),.16);border-color:var(--green);box-shadow:0 0 12px rgba(var(--g),.4)}
.dg-grid.centered .dg-cell.s1:not(:disabled):hover,.co-grid.centered .dg-cell.s1:not(:disabled):hover{background:rgba(var(--g),.34);box-shadow:0 0 18px rgba(var(--g),.7)}

/* Bank: placeholders, search box, repair icon (Oct 8 patch) */
.slot.ph{position:relative;border-style:dashed;border-color:rgba(var(--hi),.18)}
.slot.ph .ico{opacity:.28;filter:grayscale(.6)}
.slot.ph .cnt{color:var(--dim);opacity:.8}
.slot.has-ph::after{content:"";position:absolute;left:3px;top:3px;width:5px;height:5px;border-radius:50%;border:1px solid var(--green);opacity:.7;pointer-events:none}
.bk-badge{position:absolute;left:2px;bottom:1px;font-size:8px;font-weight:500;line-height:1;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.72);border:1px solid var(--line2);color:var(--green);pointer-events:none}
.bk-srow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bk-srow .sec-head{flex:1 1 auto;min-width:0}
.bk-search{position:relative;flex:0 1 190px;display:flex;align-items:center}
.bk-search-in{width:100%;box-sizing:border-box;background:#0a0605;color:var(--white);border:1px solid var(--line2);border-radius:6px;padding:4px 24px 4px 9px;font:inherit;font-size:11px;outline:none}
.bk-search-in::placeholder{color:var(--dim);opacity:.8}
.bk-search-in:focus{border-color:var(--green)}
.bk-search-x{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:18px;height:18px;padding:0;border:0;border-radius:4px;background:none;color:var(--dim);font:inherit;font-size:11px;line-height:1}
.bk-search-x[hidden]{display:none}
.bk-grid.searching .bk-nohit{grid-column:1/-1}
.rest-btn.repair-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;padding:0;border-radius:8px}

/* ---- Oct 8 patch: daylight bloom (replaces fireflies in daytime fight backgrounds), behind the content windows ---- */
.cb-bloom{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 62% 55% at 50% 42%,rgba(255,244,206,.16),rgba(255,236,180,.06) 55%,transparent 78%);mix-blend-mode:screen;animation:cbbloom 9s ease-in-out infinite}
.cb-bloom.morning{background:radial-gradient(ellipse 62% 55% at 40% 48%,rgba(255,214,160,.17),rgba(255,196,150,.06) 55%,transparent 78%)}
.cb-bloom.soft{opacity:.55}
@keyframes cbbloom{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}
@media(prefers-reduced-motion:reduce){.cb-bloom{animation:none}}
/* lantern */
.dg-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin:0}
.dg-foot .dg-sub{margin:0}
.q-btn.dg-lantern{display:inline-flex;align-items:center;gap:6px;color:#e8c46a;border-color:rgba(232,196,106,.55);background:rgba(232,196,106,.08);box-shadow:0 0 10px rgba(232,196,106,.2)}

.q-btn.dg-lantern.on{background:rgba(232,196,106,.28);color:#fff;box-shadow:0 0 16px rgba(232,196,106,.55)}
.q-btn.dg-lantern.used,.q-btn.dg-lantern:disabled{color:var(--dim);border-color:var(--line2);background:none;box-shadow:none;opacity:.6}
.dg-cell.lant:not(:disabled){opacity:1!important;border-color:#e8c46a!important;background:rgba(232,196,106,.14)!important;box-shadow:0 0 14px rgba(232,196,106,.55)!important;animation:dgLant 1.2s ease-in-out infinite!important}
.dg-cell.lant:not(:disabled):hover{background:rgba(232,196,106,.38)!important}
@keyframes dgLant{0%,100%{box-shadow:0 0 6px rgba(232,196,106,.3)}50%{box-shadow:0 0 18px rgba(232,196,106,.8)}}
.co-map .dg-lantern{align-self:center}
@media (prefers-reduced-motion:reduce){.dg-cell.lant:not(:disabled){animation:none!important}}

/* ---- Oct 8 patch: Race / Element / Pet as three wide icon chips across the stats box ---- */
.stats .kin{display:block}
.stats .kin .kt{display:block;margin:0 0 4px}
.stats .kin .kin-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.stats .kin .kin-chip{display:flex;align-items:center;justify-content:center;height:22px;border:1px solid var(--line);border-radius:5px;background:rgba(var(--g),.05);color:var(--green);transition:background .15s,border-color .15s,color .15s}
.stats .kin .kin-chip::before{content:none!important;margin:0!important}
.stats .kin .kin-chip:focus-visible{border-color:var(--green);background:rgba(var(--g),.14);color:var(--green2,var(--green));outline:0} .stats .kin .kin-chip:hover{outline:0}
@media (max-height:820px){.stats .kin .kin-chip{height:19px}}

/* ===== Hardcore and seasons: hero kind choice, dark dropdowns, no menu arrow on the start/support pages, Patreon box ===== */
body.no-tb .toolbar{display:none!important}
.cc-field select,.mk-sell select,.pet-adopt select{background-color:var(--field-bg);color:var(--white);color-scheme:dark;-webkit-appearance:none;appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cc-field select:hover,.cc-field select:focus{border-color:var(--green)}
select option,select optgroup{background:var(--field-bg);color:var(--white)}
select option:checked,select option:hover{background:var(--scroll);color:var(--green)}
.cc-hc .text-button{margin-left:auto;font-size:10px}.cc-seasonal{display:flex;align-items:center;gap:8px;color:#ff7a6e}
.kind-wrap{width:min(860px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.kind-head h2{margin:0;font-size:16px;letter-spacing:.16em;text-transform:uppercase}.kind-head .sub{margin:4px 0 0}
.kind-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;min-height:0}
.kind-box{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0;max-height:min(520px,calc(100vh - 170px));overflow:auto;padding:22px 20px 18px;text-align:left;font:inherit;color:var(--white);background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--line2);border-radius:12px;cursor:var(--cur-a,pointer);transition:border-color .2s ease,box-shadow .2s ease}
.kind-box h2{margin:0;font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-align:center}.kind-box svg{flex:none}
.kind-tag{margin:0;font-size:11px;line-height:1.5;color:var(--dim);text-align:center}
.kind-box ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:7px;font-size:11px;line-height:1.5;flex:1}
.kind-go{margin-top:auto;align-self:stretch;text-align:center;padding:8px 0;border:1px solid var(--line2);border-radius:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.kind-std:hover,.kind-std:focus-visible{border-color:var(--green);box-shadow:0 0 18px rgba(var(--g),.15)}.kind-std:hover .kind-go{border-color:var(--green);color:var(--green)}
.kind-sea{border-color:#8c2a2f;background:linear-gradient(180deg,rgba(70,12,14,.92),rgba(24,4,6,.94));color:#f3d9d6}
.kind-sea h2,.kind-sea>svg{color:#ff6a5e}.kind-sea .kind-tag{color:#e6a49d}.kind-sea .kind-go{border-color:#8c2a2f;color:#ff8a7e}
.kind-sea:hover,.kind-sea:focus-visible{border-color:#ff5a4c;box-shadow:0 0 22px rgba(255,70,60,.28)}.kind-sea:hover .kind-go{background:#8c2a2f;color:#fff}
@media(max-width:700px){.kind-row{grid-template-columns:1fr}.kind-box{max-height:none}.kind-wrap{max-height:none}}
.hall-season{margin:14px 0 4px;font-size:12px;letter-spacing:.08em}.hall-season.sea{color:#ff7a6e}
.sub-patreon{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:18px 22px}.sub-patreon h2{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}.sub-patreon p{margin:0;font-size:12px;line-height:1.6;color:var(--white);max-width:640px}
.sub-patreon-btn{display:inline-block;width:auto!important;padding:9px 26px!important;text-decoration:none;text-align:center}

/* ---- Oct 8 patch: clickable main-story tracker with chapter arrows; Quest Book pager; glowing "Turn in" ---- */
.sq-story{cursor:var(--cur-a,pointer);transition:border-color .15s,box-shadow .15s}
.sq-story:hover,.sq-story:focus-visible{border-color:var(--green);outline:0;box-shadow:inset 0 0 22px rgba(0,0,0,.35),0 0 10px rgba(var(--g),.18)}
.sq-story .st-head{align-items:center;gap:8px}.sq-story .st-head .st-lab{flex:1}
.st-nav{background:none;border:1px solid var(--line);border-radius:5px;color:var(--green);width:20px;height:18px;line-height:14px;padding:0;font:inherit;font-size:14px;cursor:var(--cur-a,pointer)}
.st-nav:disabled{opacity:.3;cursor:default}
.sq-story .st-dots i.go{cursor:var(--cur-a,pointer);height:4px}.sq-story .st-dots i.sel{outline:1px solid var(--green);outline-offset:2px}
.sq-story .st-done{margin-left:8px;color:var(--green);font-size:10px;letter-spacing:.08em}
.sq-main .sq-story p.st-step{display:flex;align-items:center;gap:7px;margin:4px 0 0;font-size:11px;color:var(--white)}
.qc-pager{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--white);margin:0 0 8px;padding:4px 6px;border:1px solid var(--line2);border-radius:6px}
.qc-pager span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qc-pager b{font-weight:500;color:var(--green)}.qc-pager em{font-style:normal;color:var(--dim);font-size:10px}
.qc.focus{border-color:var(--green)}
.qc.ready .qc-next b{color:var(--green);text-shadow:0 0 8px rgba(var(--g),.9),0 0 16px rgba(var(--g),.5);animation:turnGlow 1.8s ease-in-out infinite}
@keyframes turnGlow{0%,100%{text-shadow:0 0 4px rgba(var(--g),.5)}50%{text-shadow:0 0 10px rgba(var(--g),1),0 0 20px rgba(var(--g),.65)}}
@media(prefers-reduced-motion:reduce){.qc.ready .qc-next b{animation:none}}

/* ---- Oct 8 patch: shared "?" info buttons and their bubble ---- */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:6px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--dim);font:500 9px/1 inherit;font-family:inherit;vertical-align:middle;flex:none;cursor:var(--cur-a,pointer)}
.info-btn:focus-visible{color:var(--green);border-color:var(--green);outline:0} .info-btn:hover{outline:0}
.info-bubble{position:fixed;z-index:3000;max-width:min(300px,calc(100vw - 16px));max-height:40vh;overflow:auto;padding:8px 10px;border:1px solid var(--green);border-radius:7px;background:var(--field-bg,#0d1216);color:var(--white);font-size:11px;line-height:1.5;box-shadow:0 6px 24px rgba(0,0,0,.5)}

/* ===== Weapon Mastery tree (Blacksmith page, reuses the Wizard's Tower tree tiles) ===== */
.place-panel.wmmode>:not(.place-title):not(.wmbook){display:none!important}.wmbook{display:none!important}
.place-panel.wmmode>.wmbook{display:flex!important;flex-direction:column;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.place-panel.wmmode{display:flex;flex-direction:column;overflow:hidden}
.place-panel.wmmode .pt-board{display:none!important}
.tool[hidden]{display:none!important}
.wm-wrap{border:1px solid var(--line2);border-radius:8px;padding:10px 12px;background:rgba(var(--sh),.22);margin-top:8px}
.wm-types{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.wm-tiles{display:flex;flex-wrap:wrap;gap:4px}
.wm-ty{width:28px;height:28px}.wm-ty::before,.wm-ty::after{display:none!important}
.wm-ty.cur:not(.sel){border-color:rgba(var(--g),.6)}
.wm-wrap{padding:8px 10px}
.wm-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-size:12px}.wm-head b{color:var(--white);font-weight:500}.wm-head .sk-bar{flex:1 1 80px;min-width:60px}
.wm-pts{color:var(--green);white-space:nowrap}
.wm-cols{gap:22px;margin-bottom:0}.wm-col{width:44px;text-align:center;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:visible;display:inline-flex;justify-content:center}
.wm-tier{gap:22px}
.wm-wrap .tt-tile{width:40px;height:40px}.wm-wrap .wm-ty{width:28px;height:28px}
.wm-wrap .tt-gap{height:14px}.wm-wrap .tt-tile::before,.wm-wrap .tt-tile::after{height:7px;background:var(--line2);opacity:1}
.wm-tier:nth-child(3) .tt-tile::before{display:none}
.wm-cols+.tt-gap{height:4px}
.wm-note{margin:8px 0 0;font-size:10px;line-height:1.5;color:var(--dim)}
.cb-li.ult{flex:0 0 auto;min-width:210px}.cb-li.ult .cb-ln{white-space:nowrap}.cb-li.ult .cb-lc{white-space:nowrap}

/* ===== Oct 8 patch: skills sections, gathering cost, pets (no pet, acquisition tip, bigger paw), fishing rows, baits, bobber shake, calm water ===== */
.gg-head .gg-cost,.fish-row .gg-cost{display:inline-flex;align-items:center;gap:2px;color:var(--green);font-style:normal}
.sk-sec{grid-column:1/-1;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:7px 0 2px;padding-top:6px;border-top:1px solid var(--line2)}
.sk-sec.first{margin-top:0;padding-top:0;border-top:0}
.pet-pic.none{animation:none;color:var(--dim);width:52px;height:52px;align-items:center;justify-content:center}
.pet-none{font-size:30px;line-height:1;color:var(--dim)}
.pet-face.blank{width:24px;height:24px;display:inline-block}
.pc-tame{white-space:normal;text-align:center;line-height:1.4;font-size:11px;color:var(--white)}
.pet-chip .pc-more.pc-ico{position:absolute;right:8px;bottom:6px;margin:0;padding:3px 6px;border-radius:10px;line-height:0}
.pet-chip .pc-more.pc-ico .ico svg{width:26px;height:26px}
.pet-meals{font-size:10px;color:var(--dim);align-self:center;white-space:nowrap}
.cb-pxp{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--dim)}
.fish-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(var(--hi),.035)}
.fish-row .fr-name{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;color:var(--white);font-size:11px}
.fish-row .fr-name em{font-size:10px}
.fish-types{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.fish-cast-btn{flex:none;width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:var(--green)}
.fish-cast-btn .ico{display:inline-flex}
.fish-baits{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:5px 0 2px}
.fish-baits .fb-l{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.fish-bait{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:10px;border:1px solid var(--line2);border-radius:99px;padding:2px 9px;background:transparent;color:var(--white);cursor:var(--cur-a,pointer)}
.fish-bait.on{border-color:var(--green);color:var(--green)}.fish-bait:disabled{opacity:.45}
.fish-bait.buy{color:var(--dim)}
.fish-baits.card{justify-content:center}
/* the bobber itself shakes while you hold the reel (it replaces the old shaking of the circle) */
.fishgame.reeling .fg-bob{opacity:1!important;left:16%!important;top:50%!important;width:16px;height:16px;animation:none;box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 14px var(--fc)}
.fishgame.reeling.pulling .fg-bob{animation:fgbobshake .09s linear infinite!important}
.fishgame.reeling.pulling .fg-ring{animation:none!important}
@keyframes fgbobshake{0%{translate:0 0;rotate:0deg}20%{translate:calc(var(--shk,4px)*-1) calc(var(--shk,4px)*.6);rotate:-14deg}40%{translate:var(--shk,4px) calc(var(--shk,4px)*-.8);rotate:12deg}60%{translate:calc(var(--shk,4px)*-.7) calc(var(--shk,4px)*-.5);rotate:-10deg}80%{translate:calc(var(--shk,4px)*.8) calc(var(--shk,4px)*.7);rotate:14deg}100%{translate:0 0;rotate:0deg}}
/* a calm lake: slow drifting light behind everything, and a soft fade whenever a card or a new cast appears */
.fishgame{overflow:hidden}
.fishgame::after{content:"";position:absolute;inset:-12%;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 28% 72%,rgba(110,180,210,.12),transparent 55%),radial-gradient(ellipse at 74% 28%,rgba(110,200,170,.09),transparent 52%);animation:fgdrift 22s ease-in-out infinite alternate}
@keyframes fgdrift{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2%,-1%,0) scale(1.06)}}
.fishgame>.fg-water,.fishgame>.fg-catch{animation:fgsoft .7s ease both}
.fishgame.again>.fg-catch{animation:fgsoft .9s ease both}
@keyframes fgsoft{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fishgame::after,.fishgame>.fg-water,.fishgame>.fg-catch{animation:none}.fishgame.reeling.pulling .fg-bob{animation:none!important}}

/* ---- Oct 8 patch: the Town Board takes over the Town Square text area (scrollable), then fades back ---- */
.sq-main{position:relative}
.sq-main>*:not(.sq-board){transition:opacity .45s ease,visibility .45s}
.sq-main.board>*:not(.sq-board){opacity:0;visibility:hidden}
.sq-board{position:absolute;inset:0;z-index:3;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s;padding:0 4px 0 0;display:flex;flex-direction:column;gap:5px}
.sq-main.board .sq-board{opacity:1;visibility:visible;pointer-events:auto}
.sq-board .bd-head{display:flex;align-items:center;gap:6px;color:var(--green);font-size:11px;letter-spacing:.1em;text-transform:uppercase;position:sticky;top:0;background:var(--field-bg,#0d1216);padding:2px 0 3px;z-index:1}
.sq-board .bd-head span{display:inline-flex;align-items:center;gap:6px}
.sq-board .bd-sec{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:4px 0 0}
.sq-board .quest.bnty{grid-template-columns:128px minmax(0,1fr) 34px auto;gap:8px;padding:4px 8px}
.sq-board .quest.bnty .q-reward{min-width:48px;white-space:nowrap}
.sq-board .quest.bnty.ready{cursor:var(--cur-a,pointer);animation:bnGlow 1.6s ease-in-out infinite}
.sq-board .quest.bnty.ready:hover{background:rgba(var(--g),.12)}
@keyframes bnGlow{0%,100%{box-shadow:0 0 6px rgba(var(--g),.25),inset 0 0 6px rgba(var(--g),.08)}50%{box-shadow:0 0 18px rgba(var(--g),.6),inset 0 0 12px rgba(var(--g),.2)}}
.sq-board .quest .q-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-board .quest .q-btn{padding:2px 6px;font-size:10px}
@media(prefers-reduced-motion:reduce){.sq-main>*:not(.sq-board),.sq-board{transition:none}}

/* ---- Oct 8 patch: Dailies page (compact icon list) ---- */
.fp-body.dy{text-align:left}
.dy-sum{margin:0 0 10px;font-size:11px;color:var(--dim)}.dy-sum b{color:var(--green);font-weight:500}.dy-q{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid var(--line);border-radius:50%;font-size:9px;color:var(--dim)}
.dy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.dy-row{display:flex;align-items:center;gap:9px;padding:5px 9px;border:1px solid var(--line2);border-radius:7px;font-size:11px;color:var(--white);background:rgba(var(--sh),.14);transition:border-color .15s,background .15s}

.dy-ico{display:inline-flex;color:var(--green);flex:none}.dy-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-s{width:16px;text-align:center;color:var(--green);flex:none}
.dy-row.done{color:var(--dim)}.dy-row.done .dy-ico{color:var(--dim)}.dy-row.open .dy-s{text-shadow:0 0 6px rgba(var(--g),.8)}
.dy-row.lock{opacity:.55}.dy-row.lock .dy-ico,.dy-row.lock .dy-s{color:var(--dim)}
@media(max-width:640px){.dy-list{grid-template-columns:1fr}}

/* ---- Oct 8 patch: quest pager and note rows ---- */
.qbook .qc-pager{position:sticky;top:0;z-index:2;background:var(--field-bg,#0d1216)}
.note-row{display:flex;align-items:center;gap:0;margin:4px 0}.qc-title .info-btn{margin-left:2px}.st-now .info-btn{margin-left:6px}.place-desc .info-btn{margin-left:8px}
/* duo invite toast: a small banner over every screen except a fight */
.co-invite{z-index:140!important;top:12px!important;display:flex;align-items:center;gap:16px;padding:10px 16px!important;width:max-content;max-width:min(620px,94vw);text-align:left!important;animation:fadein .3s ease}
.co-invite p{margin:0!important;font-size:12px}.co-invite .co-inv-txt{display:flex;flex-direction:column;gap:3px}
.co-invite .co-inv-btns{margin-top:0!important;flex:none}
@media(max-width:520px){.co-invite{flex-wrap:wrap;gap:8px}.co-invite .co-inv-btns{width:100%}}
.pet-chip>.pc-back{padding-right:40px}
/* duo fights: encounter card, dungeon name card, soft fades */
.co-enc{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(3,3,5,.94);animation:fadein .35s ease both;transition:opacity .5s ease}
.co-enc.out{opacity:0;pointer-events:none}
.co-enc.co-title{background:#020204;animation:fadein .7s ease both;transition:opacity .9s ease}
.co-enc .tier{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 0;letter-spacing:.14em;font-size:12px;text-transform:uppercase;color:var(--tc);animation:tierin .7s cubic-bezier(.2,1.4,.4,1) both}
.co-enc .tier .ico svg{width:22px;height:22px;stroke:var(--tc)}
.co-enc .dg-name{font-size:22px;letter-spacing:.14em;color:var(--white);margin:0;animation:fadein 1.3s .5s backwards}
.co-fadein{animation:fadein .6s ease both}
.co-map{animation:fadein .6s ease both}
@media (prefers-reduced-motion:reduce){.co-fadein,.co-map,.co-enc{animation:none}}
.sub-patreon .sub-fine{color:var(--dim);font-size:10px}.kind-box li{color:inherit}
/* dungeon cutscene card and smooth fades (Oct 8) */
.scene.dungeon{animation:fadein .8s ease backwards}
.scene.dungeon .dg-name{animation:fadein 1.3s .7s backwards;transition:opacity .8s ease}
.scene.dungeon .dg-name.out{opacity:0}
.scene.dungeon.title .cb-bg{opacity:0!important}.scene.dungeon.title .cb-fog{opacity:0}
.scene.dungeon .cb-fog{transition:opacity 1.2s ease}
.dg-appear{animation:fadein 1.1s ease backwards}
.scene.combat{z-index:93}
@media (prefers-reduced-motion:reduce){.scene.dungeon,.scene.dungeon .dg-name,.dg-appear{animation:none}}

/* ===== New local chat line glows for a few seconds (patch line 101) ===== */
@keyframes newline{0%{background:rgba(var(--g),.38);box-shadow:0 0 14px rgba(var(--g),.55);text-shadow:0 0 8px currentColor}35%{background:rgba(var(--g),.2);box-shadow:0 0 10px rgba(var(--g),.3);text-shadow:0 0 6px currentColor}100%{background:transparent;box-shadow:0 0 0 transparent;text-shadow:0 0 0 transparent}}
.pane p.fresh.newline{animation:newline 3.4s ease-out;border-radius:3px}
@media(prefers-reduced-motion:reduce){.pane p.fresh.newline{animation:none}}

/* ===== Explore glow never restarts or switches off (patch line 180) =====
   The box is rebuilt on every refresh, which used to restart the pulse from "no glow" (and a disabled box switched it off). Now each new box starts at the same
   point of the pulse as the old one (see exploreRow), and a disabled or tired box keeps pulsing, just dimmer. */
.forest-explore:disabled,.forest-explore.nostam{animation:softglow 3.2s ease-in-out infinite}

/* ===== Co-op needs a party: the Explore box greys out (patch line 182) ===== */
.forest-explore.needparty,.forest-explore.needparty:disabled{opacity:.45;filter:grayscale(.9);animation:none;border-color:var(--line2);background:rgba(var(--sh),.2);cursor:var(--cur-n,not-allowed)}
.forest-explore.needparty .fe-t,.forest-explore.needparty .fe-s{color:var(--dim)}
.forest-explore.needparty svg{stroke:var(--dim)}

/* Guild invite-only controls */
.gd-recruit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gd-recruit .gd-form { display: flex; gap: 6px; margin: 0; }
.gd-recruit .mk-in { width: 120px; }
.gd-io { display: inline-flex; align-items: center; gap: 4px; }

/* ===== Continue button after a fight + the quest section at places (patch line 93) ===== */
.cont-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:176px;padding:11px 26px;background:linear-gradient(rgba(var(--g),.2),rgba(var(--g),.2)) no-repeat left center/0 100%;border:1px solid rgba(var(--g),.55);border-radius:3px;color:var(--green);font:inherit;font-size:12px;letter-spacing:.3em;text-transform:uppercase;cursor:var(--cur-a,pointer);transition:background-size .35s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s,box-shadow .25s,transform .12s}
.cont-btn svg{stroke:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cont-btn:hover:not(:disabled),.cont-btn:focus-visible{background-size:100% 100%;border-color:var(--green);color:var(--white);box-shadow:0 0 14px rgba(var(--g),.35)}
.cont-btn:hover:not(:disabled) svg,.cont-btn:focus-visible svg{transform:translateX(5px)}
.cont-btn:active:not(:disabled){transform:scale(.97);box-shadow:0 0 22px rgba(var(--g),.6),inset 0 0 12px rgba(var(--g),.35)}
.cont-btn.go{background-size:100% 100%;border-color:var(--green);color:var(--white)}.cont-btn:disabled{cursor:var(--cur-n,default)}
@media (prefers-reduced-motion:reduce){.cont-btn,.cont-btn svg{transition:none}}
.q-dock{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0;flex:0 1 auto;justify-content:flex-end}.q-dock:empty{display:none}
.qst-btn{display:inline-flex;align-items:center;gap:6px;max-width:260px;min-width:0;height:24px;padding:0 11px;background:rgba(var(--g),.06);border:1px solid rgba(var(--g),.5);border-radius:4px;color:var(--green);font:inherit;font-size:10.5px;letter-spacing:.04em;cursor:var(--cur-a,pointer);transition:background .15s,border-color .15s,box-shadow .2s,transform .1s}
.qst-btn svg{flex:none;stroke:currentColor}.qst-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.qst-btn:hover:not(:disabled){background:rgba(var(--g),.18);border-color:var(--green);color:var(--white);box-shadow:0 0 10px rgba(var(--g),.35)}
.qst-btn:active:not(:disabled){transform:translateY(1px)}
.qst-btn:disabled{opacity:.4;border-color:var(--line2);background:none;cursor:var(--cur-n,not-allowed)}
.place-panel.qmode .q-dock,.place-panel.mapmode .q-dock,.place-panel.annmode .q-dock,.place-panel.wmmode .q-dock{display:none}
@media(max-width:520px){.q-dock{flex:1 1 100%;justify-content:flex-start}.qst-btn{max-width:100%}}

/* Playstyle tag on a hero's profile */
.pf-style{display:inline-flex;align-items:center;gap:5px;margin:2px 0 0;padding:1px 8px;border:1px solid var(--green2);color:var(--green2);font-size:11px;letter-spacing:.04em;text-transform:uppercase}

/* ===== Encounter cutscene: monster card before a fight (patch line 147) ===== */
.scene.combat.enc .cb-wrap{opacity:0;visibility:hidden;pointer-events:none}
.scene.combat .cb-wrap{transition:opacity .6s ease}
.enc-wrap{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .65s ease;pointer-events:none}
.enc-wrap.in{opacity:1}
.enc-title{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);text-align:center}
.enc-title.new{font-size:15px;color:var(--green);animation:glow 2.2s ease-in-out infinite alternate;text-shadow:0 0 8px rgba(var(--g),.6)}
.enc-card{width:min(320px,86vw);box-sizing:border-box;padding:14px 16px;border:1px solid var(--green);border-radius:12px;background:rgba(10,6,5,.95);color:var(--white);text-align:center;box-shadow:0 0 24px rgba(var(--g),.18)}
.enc-card .ci-view{flex:none;height:150px;display:flex;align-items:flex-end;justify-content:center;margin:0 0 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);padding:8px 8px 10px;position:relative;overflow:hidden}
.enc-card .ci-view .mv{width:100%;height:100%;position:relative;z-index:1}
.enc-card .ci-lore{margin:0}

/* ===== What a lucky find gave you, written on the trip screen (patch line 99) ===== */
.scene.work .tier-find{max-width:min(440px,86vw);margin:2px 0 0;text-align:center;font-size:12px;line-height:1.65;color:var(--white);animation:fadein 1s .35s both}
.scene.work .tier-find .chg{color:var(--green)}

/* ===== Gear compare in item tooltips: green = better than what you wear, red = worse (patch line 100) ===== */
.tt .tgood{color:#5fe08a;font-weight:600}.tt .tbad{color:#ff6b5e;font-weight:600}

/* ===== Duo fight chat bar, collapsible, under you and your partner (patch line 94) ===== */
.co-chat{width:100%;box-sizing:border-box;margin-top:8px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.55);overflow:hidden}
.cc-head{display:flex;align-items:center;gap:7px;width:100%;padding:5px 10px;background:none;border:0;color:var(--dim);font:inherit;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:var(--cur-a,pointer)}
.cc-head:hover{color:var(--green)}.cc-head span{flex:1;text-align:left}.cc-head svg:last-child{transition:transform .2s;transform:rotate(90deg)}.co-chat.open .cc-head svg:last-child{transform:rotate(-90deg)}
.cc-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:coPulse 1.4s ease-in-out infinite}.cc-dot[hidden]{display:none}
.cc-body{display:none;padding:0 8px 8px}.co-chat.open .cc-body{display:block}
.cc-msgs{max-height:78px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;font-size:11px;line-height:1.5;margin-bottom:6px}
.cc-msgs:empty::before{content:"No messages yet.";color:var(--dim)}
.cc-msgs p{margin:0 0 2px;color:var(--white);word-break:break-word}.cc-msgs b{font-weight:500}.cc-msgs .me b{color:var(--green)}.cc-msgs .them b{color:#e8c46a}
.cc-msgs p.new{animation:newline 3s ease-out;border-radius:3px}
.cc-form{display:flex;gap:6px}.cc-in{flex:1;min-width:0;background:rgba(0,0,0,.45);border:1px solid var(--line2);border-radius:6px;color:var(--white);font:inherit;font-size:11px;padding:5px 8px}.cc-in:focus{outline:none;border-color:var(--green)}
.cc-send{flex:none;width:28px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:6px;color:var(--green);cursor:var(--cur-a,pointer)}

/* ---- Oct 8 patch (agent: story/quest/chronicle): quest reward icon chips, level-up lock lines ---- */
.qc-chip.rw{display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 6px}
.qc-chip.rw .ico{display:inline-flex;color:var(--green)}.qc.done .qc-chip.rw .ico{color:var(--dim)}
.qc-lock,.sq-story .st-lock,.st-lock{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--danger);margin:2px 0}
.qc-lock .ico,.st-lock .ico{display:inline-flex;flex:none}

/* ===== combat overhaul: status effects, weakness chips, gem socket (Oct 8) ===== */
.cb-fx{display:flex;align-items:center;gap:4px;width:76px;height:24px;flex:none;justify-content:flex-start}
.cb-foot .cb-me .cb-fx{margin-left:auto}.cb-foot .cb-mebar{flex:none}
.cb-foe{position:relative}
.cb-foe>.cb-fx{position:absolute;right:0;top:0;width:auto;justify-content:flex-end}
.fx-i{position:relative;width:22px;height:22px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.55);display:inline-flex;align-items:center;justify-content:center;color:var(--white);cursor:var(--cur-a,help);flex:none}
.fx-i.debuff{border-color:#ff5a5a;color:#ff8a8a}.fx-i.buff{border-color:#5fe08a;color:#7ff0a4}.fx-i.more{font-size:10px;color:var(--dim);border-style:dashed}
.fx-i em{position:absolute;right:-3px;bottom:-4px;min-width:11px;padding:0 2px;border-radius:5px;background:#0b0f12;border:1px solid currentColor;font:700 8px/10px var(--mono,inherit);font-style:normal;text-align:center;color:inherit}

.fx-none{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--dim);opacity:.45;border:1px dashed var(--line2);border-radius:6px;font-size:11px;cursor:help}
.el-chip{display:inline-flex;align-items:center;padding:1px 7px;border:1px solid var(--ec,var(--line2));border-radius:999px;color:var(--ec,var(--white));font-size:10px;line-height:15px;background:rgba(var(--sh),.4)}
.el-chip.wpn{--ec:#c9d1d6;border-color:var(--line2)}
.ci-wk{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px;font-size:10px}
.bs-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
/* main story cutscenes: "Chapter IV" above "Main Story" */
.rv-chap{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--green);margin-top:2px}
.scene-tag{position:absolute;top:13%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;animation:fadein .8s backwards}
.scene-tag span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}.scene-tag b{font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
/* Chronicle: Achievements and Titles panels (inner box scrolls, the page never does) */
.ach-embed{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;text-align:left;padding:2px 6px 8px 2px}
.ach-embed .fp-who{display:none}
.ch2-top{gap:6px}.ch2-top .ch2-shop{padding:3px 9px;font-size:11px}

/* Player menu, report, scene chat, Market room and trading */
.rp-reasons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hx-av.other{pointer-events:auto;cursor:var(--cur-a,pointer)}
.sc-chat{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line2);background:rgba(var(--sh),.35);box-sizing:border-box;max-width:100%}
.sc-log{height:74px;overflow-y:auto;font-size:11px;line-height:1.4;color:var(--white);overscroll-behavior:contain}
.sc-log p{margin:0}.sc-log .arena-line{color:var(--place)}.sc-log .sys,.sc-log .prv{color:var(--dim)}
.sc-log strong{font-weight:normal;color:var(--green)}.sc-log .namelink{padding:0;font-size:11px}
.sc-form{display:flex;gap:6px}
.sc-in{flex:1;min-width:0;background:rgba(0,0,0,.4);border:1px solid var(--line2);color:var(--white);padding:4px 8px;font:inherit;font-size:11px;border-radius:0}
.sc-in:focus{outline:none;border-color:var(--green)}
.mk-enterbar{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.mk-enter{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--green);color:var(--green);padding:6px 16px;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:var(--cur-a,pointer);transition:background .15s,box-shadow .15s}
.mk-enter:hover{background:rgba(var(--g),.14);box-shadow:0 0 10px rgba(var(--g),.35)}
.mk-dropnote{font-size:10px;color:var(--place);animation:mkGlow 1.6s ease-in-out infinite}
@keyframes mkGlow{50%{opacity:.45}}
.mk-side{width:270px}
.mk-p{background:none;border:0;color:var(--white);text-align:left;cursor:var(--cur-a,pointer);padding:2px 4px;font:inherit}

.mk-p:disabled{opacity:1;cursor:default}
.mk-drops{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--place)}
.mk-drops span{display:flex;align-items:center;gap:6px}
.mk-drain{display:block;height:3px;background:var(--place);transform-origin:left;animation:mkDrain linear forwards}
@keyframes mkDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.hx-cell.drop{box-shadow:inset 0 0 0 2px var(--place),0 0 12px rgba(var(--g),.4)!important}
.hx-drop{position:relative;display:flex;align-items:center;justify-content:center;animation:mkGlow 1.4s ease-in-out infinite}
.tr-box{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line2);font-size:11px}
.tr-h{font-size:10px;color:var(--dim);letter-spacing:.06em}.tr-h em{color:var(--green);font-style:normal}
.tr-list{display:flex;flex-wrap:wrap;gap:4px;min-height:22px;align-items:center}
.tr-chip{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid var(--line2);color:var(--white);font:inherit;font-size:10px;padding:2px 6px;cursor:var(--cur-a,pointer)}

.tr-chip:disabled{cursor:default;opacity:1}
.tr-g{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--dim)}
.tr-gold{width:90px;background:rgba(0,0,0,.4);border:1px solid var(--line2);color:var(--white);font:inherit;font-size:11px;padding:2px 6px}
.tr-gold:focus{outline:none;border-color:var(--green)}
.tr-pack{max-height:96px;overflow-y:auto}
.tr-pack .slot.dim{opacity:.35}
.locs-chron.on{border-color:var(--green);background:rgba(var(--g),.12)}

/* ---- October 8 patch: Stone Codex (Lithomancy), Enchanting altar, even shop spacing ---- */
.li-bench{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.li-slot,.li-out{display:flex;align-items:center;gap:8px;min-width:150px;min-height:38px;padding:4px 10px;background:rgba(var(--sh),.38);border:1px solid var(--line2);border-radius:8px;color:var(--white);font:inherit;font-size:11px;cursor:var(--cur-a,pointer)}
.li-slot.on,.li-out.on{border-color:var(--line)}.li-out{cursor:default}.li-plus{color:var(--dim)}
.li-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid rgba(var(--hi),.04);border-radius:6px}
.li-row.click{cursor:var(--cur-a,pointer)}
.li-name{display:flex;flex-direction:column;min-width:0}.li-name em{font-style:normal;color:var(--dim);font-size:10px}.li-n{font-size:10px;white-space:nowrap}
.en-pick{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}.en-opt.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.07)}.en-opt:disabled{opacity:.4}
.en-cost{margin:4px 0 6px;font-size:10px;color:var(--green)}.en-cost.short{color:var(--dim)}

/* ===== Sailing expedition: the sea grid (Oct 8 patch) ===== */
.scene.dungeon.sea{gap:10px}
.sea-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(92vw,560px);align-items:end}
.sea-stat{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;font-size:11px;color:var(--dim)}
.sea-stat .bar{margin:2px 0 0}.sea-stat>span{letter-spacing:.06em}
.sea-loot b{font-weight:400;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.sea-grid{display:grid;gap:4px;width:min(90vw,56vh,540px)}
.sea-cell{aspect-ratio:1;padding:0;min-width:0}
.sea-cell.s0{opacity:.35;background:rgba(var(--hi),.02)}
.sea-cell.s3{opacity:.7}
.sea-cell.s1{opacity:1}
.sea-cell.s2{opacity:.9}
.sea-cell.s2:not(.here) .ico{opacity:.45}
.sea-cell.t-x:not(.s0),.sea-cell.boss{border-color:#ff6ad5;color:#ff6ad5}
.sea-cell.t-s:not(.s2){color:#ffb347}.sea-cell.t-m:not(.s2){color:#ff8a7a}.sea-cell.t-f{color:#7fd4ff}.sea-cell.t-p{color:#d9c7ff}
.sea-msg{max-width:min(92vw,560px)!important;min-height:2.6em;line-height:1.4!important}
.sea-foot{width:min(92vw,560px);justify-content:space-between}
.sea-home{display:inline-flex;align-items:center;gap:6px}
@media(max-width:560px){.sea-hud{grid-template-columns:1fr 1fr}.sea-loot{grid-column:1/3}}
.cb-foot .cb-mebar{width:118px}
.cb-stack .cb-me .cb-fx{grid-column:1/-1;justify-self:center;margin:0}

/* ---- Dungeon rooms (chest rooms and trap rooms) and the Dungeon of the Day ---- */
.dg-seen.c{color:#f2c14e;opacity:.95}.dg-seen.t{color:#ff7a6b;opacity:.95}
.dr-insc{margin:0;max-width:min(90vw,560px);text-align:center;font-size:11px;line-height:1.5;color:var(--dim);min-height:34px}
.dr-stage{position:relative;flex:0 0 auto;box-shadow:0 0 0 1px var(--line2),0 0 30px rgba(0,0,0,.7);background:#08080b}
.dr-grid{display:grid;gap:0}
.dr-cell{width:var(--hc);height:var(--hc);box-sizing:border-box;background:rgba(120,110,100,.10);border:1px solid rgba(255,255,255,.04)}
.dr-cell.alt{background:rgba(120,110,100,.06)}.dr-cell.wall{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.03)}
.dr-objs{position:absolute;left:0;top:0;right:0;bottom:0;z-index:3}
.dr-obj{position:absolute;display:grid;place-items:center;box-sizing:border-box;color:var(--white);cursor:var(--cur-a,pointer)}
.dr-obj:hover{color:var(--green)}
.dr-obj.door{color:var(--green)}
.dr-obj.chest{color:#f2c14e}.dr-obj.chest.locked{color:var(--dim)}.dr-obj.chest.used,.dr-obj.totem.used{opacity:.3}
.dr-obj.totem.hp{color:#ff7a6b}.dr-obj.totem.mp{color:#6ab0ff}.dr-obj.totem.en{color:#9be37a}
.dr-obj.plate{cursor:default;color:var(--dim);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);width:calc(var(--hc) - 6px)!important;height:calc(var(--hc) - 6px)!important;margin:3px;box-shadow:inset 0 0 8px rgba(0,0,0,.6)}
.dr-obj.plate.lit{color:var(--green);border-color:var(--green);background:rgba(var(--g),.16);box-shadow:0 0 12px rgba(var(--g),.45)}
.dr-fadein .hx-av{animation:drIn 1.1s ease-out .15s backwards}
@keyframes drIn{from{opacity:0}to{opacity:1}}
.dr-msg{margin:0;min-height:30px;max-width:min(90vw,560px);text-align:center;font-size:11px;line-height:1.5;color:var(--white)}
.dr-foot{display:flex;flex-direction:column;align-items:center;gap:6px}
.dr-use{font-size:11px}
.dr-pad{display:flex;gap:6px}.dr-arrow{min-width:44px;min-height:40px}
.scene.dungeon>.dr-intro:not(.cb-bg):not(.cb-fog){position:absolute;left:0;top:0;right:0;bottom:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000;opacity:1;transition:opacity .8s ease}
.dr-intro.out{opacity:0;pointer-events:none}
.dr-intro-ico{color:var(--green);animation:fadein .5s both}.dr-intro-t{margin:0;font-size:18px;letter-spacing:.12em;color:var(--white);animation:fadein .7s .15s both}.dr-intro-s{margin:0;font-size:11px;color:var(--dim);animation:fadein .7s .4s both}
.sq-daily{margin-top:8px;padding:8px 14px 9px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.34);box-shadow:inset 0 0 22px rgba(0,0,0,.35)}
.sq-daily[hidden]{display:none}
.sq-daily .dd-head{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.sq-daily .dd-lab{flex:1}.sq-daily .dd-state.open{color:var(--green)}.sq-daily .dd-state.done{color:var(--dim)}
.sq-daily .dd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sq-daily .dd-info{display:flex;flex-direction:column;min-width:0;flex:1 1 180px}.sq-daily .dd-info b{font-weight:500;color:var(--white);font-size:12px}
.sq-daily .dd-sub{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.dr-fadein .hx-av,.dr-intro-ico,.dr-intro-t,.dr-intro-s{animation:none}.dr-intro{transition:none}}

/* ===== Arena: recent battles (Oct 8 patch) ===== */
.bl-filt{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.bl-filt .chip.on{border-color:var(--green);color:var(--green)}
.bl-row{border:1px solid var(--line2);border-radius:8px;margin:0 0 6px;background:rgba(var(--sh),.2)}
.bl-row.open{border-color:var(--green)}
.bl-main{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}

.bl-row.w .bl-main>.ico{color:var(--green)}.bl-row.l .bl-main>.ico{color:#ff8a7a}.bl-row.f .bl-main>.ico{color:#ffb347}
.bl-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.bl-t b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bl-t em{font-style:normal;font-size:11px;color:var(--dim)}
.bl-when{flex:none;font-size:11px}
.bl-det{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;padding:4px 12px 10px;font-size:12px}
.bl-kv{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed rgba(var(--hi),.08);padding:2px 0}.bl-kv b{font-weight:400;text-align:right}
@media(max-width:560px){.bl-det{grid-template-columns:1fr}}
/* ---- stats box layer: Equipment / Inventory / Quest Journal; the Quest Journal button under the stats ---- */
.stats{position:relative}
.qj-row{display:block!important;flex:0 0 auto}
.qj-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:24px;padding:0 10px;background:rgba(var(--sh),.25);border:1px solid var(--line);border-radius:6px;color:var(--green);font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:var(--cur-a,pointer);transition:background .15s,border-color .15s}
.qj-btn.open,.qj-btn.on{border-color:var(--green);background:rgba(var(--g),.12)}
.qj-btn.prog{animation:softglow 2.2s ease-in-out infinite}
.qj-btn.ready::after{content:"";position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.inv-expand{cursor:var(--cur-a,pointer);transition:color .15s}.inv-expand:hover,.inv-expand.open{color:var(--green2);text-shadow:0 0 8px rgba(var(--g),.5)}
.inv-expand::after{content:"\2197";font-size:9px;margin-left:6px;color:var(--dim);vertical-align:2px}
.st-over{position:absolute;inset:0;z-index:6;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:8px;padding:12px 14px;border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot)),var(--field-bg);animation:fadein .2s backwards}
.st-over[hidden]{display:none!important}
.so-head{display:flex!important;align-items:center;justify-content:space-between;flex:none}
.so-title{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.so-x{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--green);font:inherit;font-size:16px;line-height:1;cursor:var(--cur-a,pointer)}
.so-body{flex:1 1 auto!important;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:4px}
.so-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:5px 7px;background:rgba(var(--sh),.2);border:1px solid var(--line2);border-radius:6px;color:var(--white);font:inherit;cursor:var(--cur-a,pointer);flex:none;transition:border-color .15s,background .15s}
.so-row:disabled{cursor:var(--cur-n,default)}.so-row.empty{opacity:.55}.so-row.broken{border-color:var(--bad)}
.so-ico{flex:none;width:22px;display:flex;justify-content:center;color:var(--green)}
.so-main{display:flex;flex-direction:column;min-width:0;gap:1px}.so-main b{font-weight:500;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.so-main span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-total{display:flex;flex-direction:column;gap:2px;padding:6px 4px 0;border-top:1px solid var(--line2);margin-top:2px;font-size:11px}.so-total b{font-weight:500;color:var(--green2)}
.so-count{font-size:10px;padding:0 2px 2px}
.so-sec{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:6px 2px 0}
.so-q{display:flex!important;flex-direction:column;align-items:stretch;gap:3px;padding:6px 8px;background:rgba(var(--sh),.2);border:1px solid var(--line2);border-radius:6px;font-size:11px;flex:none}
.so-q b{font-weight:500}.so-q.ready{border-color:var(--green)}.so-q .q-bar{margin:0}.so-step{display:flex;align-items:center;gap:6px;color:var(--white)}.so-next{color:var(--green);font-size:10px}
.so-lock{display:flex;align-items:center;gap:5px;color:var(--danger);font-size:10px}
.so-expand{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px!important;flex:none}

/* ===== Atlas: a large drawn map (Oct 8 patch). Same window as the Chronicle; the map on the left, all info in one bar on the right. ===== */
.fullpage.atlaspage .fp-title{margin:0 0 8px}
.at2{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;text-align:left}
.at2-mapwrap{min-height:0;min-width:0;container-type:size;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.28);overflow:hidden}
.at2-map{position:relative;width:min(100cqw,166.6cqh);aspect-ratio:20/12;display:grid;gap:0}
.at2-c{position:relative;min-width:0;min-height:0;padding:0;margin:0;border:1px solid rgba(var(--hi),.05);border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--dim);box-sizing:border-box}
.at2-c>.ico{opacity:.28}.at2-c>.ico svg{width:11px;height:11px}
.at2-c.tr-sea{background:rgba(var(--hi),.012)}
.at2-c.tr-sea.wv::after{content:"~";font-size:11px;color:var(--dim);opacity:.28}
.at2-c.tr-town{background:rgba(var(--g),.16)}.at2-c.tr-field{background:rgba(var(--g),.11)}
.at2-c.tr-grass{background:rgba(var(--g),.08)}.at2-c.tr-wood{background:rgba(var(--g),.13)}.at2-c.tr-mount{background:rgba(var(--hi),.11)}
.at2-c.tr-swamp{background:rgba(var(--g),.06);background-image:repeating-linear-gradient(0deg,rgba(var(--g),.1) 0 1px,transparent 1px 6px)}
.at2-c.tr-hill{background:rgba(var(--hi),.07)}.at2-c.tr-ash{background:rgba(255,140,80,.08)}.at2-c.tr-ruin{background:rgba(var(--hi),.09)}
.at2-c.tr-isle{background:rgba(var(--g),.12)}.at2-c.tr-ice{background:rgba(150,210,255,.1)}.at2-c.tr-rock{background:rgba(var(--hi),.1)}
.at2-c.tr-sand{background:rgba(230,190,110,.1)}.at2-c.tr-lava{background:rgba(255,100,70,.12)}.at2-c.tr-heart{background:rgba(255,200,90,.14)}
.at2-c.bt{border-top:2px solid rgba(var(--g),.55)}.at2-c.br{border-right:2px solid rgba(var(--g),.55)}.at2-c.bb{border-bottom:2px solid rgba(var(--g),.55)}.at2-c.bl{border-left:2px solid rgba(var(--g),.55)}
.at2-loc{cursor:pointer;z-index:3;color:var(--green);transition:background .2s,box-shadow .2s}
.at2-loc>.ico svg{width:17px;height:17px}.at2-loc>.ico{opacity:1}
.at2-loc:hover:not(:disabled),.at2-loc:focus-visible{background:rgba(var(--g),.3);box-shadow:inset 0 0 0 1px var(--green)}
.at2-loc.sel{background:rgba(var(--g),.34);box-shadow:inset 0 0 0 2px var(--green);z-index:4}
.at2-loc.unk{color:var(--dim)}.at2-loc.unk>.ico{opacity:.55}
.at2-loc.hard{color:#ff8a7a}
.at2-loc.here::before{content:"";position:absolute;inset:3px;border:1px solid var(--green);border-radius:50%;animation:at2ping 1.8s ease-out infinite}
@keyframes at2ping{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.at2-dot{position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green)}
.at2-roads{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.at2-roads .rd{stroke:rgba(var(--g),.55);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.at2-roads .rd.sea{stroke:rgba(150,210,255,.5);stroke-dasharray:1 5;stroke-linecap:round;stroke-width:2}
.at2-labels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(12,1fr);z-index:2;pointer-events:none}
.at2-lbl{display:flex;align-items:center;justify-content:center;font-size:clamp(7px,1.15cqw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);opacity:.8;white-space:nowrap}
.at2-compass{display:flex;align-items:center;justify-content:center;color:var(--dim);opacity:.45}
.at2-side{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.2)}
.at2-card{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.at2-ch{display:flex;align-items:center;gap:10px}.at2-ch h3{margin:0;font-size:16px;font-weight:500;color:var(--green)}
.at2-flavor{margin:0;font-size:12px;line-height:1.5;color:var(--dim)}
.at2-kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;border-bottom:1px dashed rgba(var(--hi),.08);padding:2px 0}.at2-kv b{font-weight:400;text-align:right}
.at2-foes{margin:2px 0;font-size:12px;line-height:1.4}.at2-foes.chest{color:#ffd166}
.at2-go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.at2-sec{display:flex;flex-direction:column;gap:4px}.at2-note{margin:0 0 4px;font-size:11px;line-height:1.4}
.at2-reg{display:flex;justify-content:space-between;font-size:12px;padding:3px 8px;border:1px solid transparent;border-radius:6px}.at2-reg.on{border-color:var(--line2);color:var(--green)}.at2-reg b{font-weight:400}
.at2-side .pk-row{font-size:11px}
.at2-lg{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.at2-lg .lg{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid var(--green);box-sizing:border-box}
.at2-lg .lg.chd{background:var(--green);width:6px;height:6px;margin:0 3px;box-shadow:0 0 5px var(--green)}.at2-lg .lg.hard{border-color:#ff8a7a;background:rgba(255,138,122,.3)}
.at2-lg .lg.rd{border:0;border-top:2px dashed rgba(var(--g),.8);border-radius:0;height:0;margin-top:1px}.at2-lg .lg.sea{border:0;border-top:2px dotted rgba(150,210,255,.9);border-radius:0;height:0}
@media(max-width:900px){.at2{grid-template-columns:1fr;grid-auto-rows:auto;overflow-y:auto}.at2-mapwrap{height:min(60vw,380px)}.at2-side{overflow:visible}.fullpage.atlaspage>.fp-wrap{overflow-y:auto}}
/* ---- Dev Wheel (admins) and the Dev Library ---- */
.dev-wheel{position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 5px;border:1px solid var(--line);border-radius:99px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));animation:fadein .25s backwards}
.dev-wheel .dw-tag{font-size:8px;letter-spacing:.18em;color:var(--dim)}
.dev-wheel .dw-b{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:rgba(var(--sh),.25);border:1px solid var(--line2);color:var(--green);cursor:var(--cur-a,pointer);transition:border-color .15s,background .15s}

@media(max-width:1180px),(max-height:640px){.dev-wheel{display:none}}
.fullpage.devlib>.fp-wrap{max-width:1000px;height:calc(100vh / var(--zoom) - 48px);display:flex;flex-direction:column;overflow:hidden;padding:18px 20px 16px;position:relative}
@supports(height:100dvh){.fullpage.devlib>.fp-wrap{height:calc(100dvh / var(--zoom) - 48px)}}
.fullpage.devlib .fp-title{margin:0 0 10px;text-align:left;flex:none}
.dv{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.dv-top{display:flex;align-items:center;gap:12px;flex:none}.dv-q{flex:1;max-width:420px;background:var(--field-bg);border:1px solid var(--line2);border-radius:8px;color:var(--white);font:inherit;font-size:12px;padding:7px 10px}.dv-q:focus{outline:none;border-color:var(--green)}
.dv-main{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px}
.dv-side{min-height:0;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:3px;padding:8px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.2)}
.dv-cat{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--white);font:inherit;font-size:11px;text-align:left;cursor:var(--cur-a,pointer);flex:none}
.dv-cat span{flex:1}.dv-cat i{font-style:normal;font-size:10px;color:var(--dim)}.dv-cat .ico{color:var(--green)}
.dv-cat.on{border-color:var(--green);background:rgba(var(--g),.14)}
.dv-list{min-height:0;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid var(--line2);border-radius:10px;background:rgba(var(--sh),.2);content-visibility:auto}
.dv-row{display:grid;grid-template-columns:minmax(120px,220px) 110px minmax(0,1fr);gap:10px;align-items:baseline;padding:4px 6px;border-radius:5px;font-size:11px;flex:none}
.dv-row b{font-weight:500;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dv-row em{font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}.dv-row span{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.dv-main{grid-template-columns:1fr}.dv-side{flex-direction:row;overflow-x:auto;overflow-y:hidden}.dv-row{grid-template-columns:1fr}}
/* make room for the Quest Journal button under the stats without growing the box */
.stats .sv:first-child hr{margin:4px 0}
.stats .sv:first-child>.bar{margin-top:2px}
.stats .srow.minor-first{margin-top:3px!important}
.qj-row .qj-btn{height:20px;font-size:10px}
.so-title{font-size:12px;letter-spacing:.1em;white-space:nowrap}
/* bestiary: only the hovered card lights up green, the selected card is white, boss cards no longer look highlighted */
.bs-tile,.bs-tile:hover{transform:none}
.bs-tile:hover:not(.hv){border-color:var(--line2);box-shadow:none}
.bs-tile.boss{border-color:var(--line2)}.bs-tile.boss em{color:#e0b84a}
.bs-tile.on{border-color:#fff;box-shadow:0 0 0 1px #fff inset;background:rgba(255,255,255,.07)}
.bs-tile.on.hv{border-color:#5fe08a;box-shadow:0 0 0 1px #5fe08a inset}
.enbox.open{max-height:340px}
.enbox .shop-top{position:sticky!important;top:0;z-index:3}
.shop .en-pick .q-btn.en-opt{width:auto;flex:0 0 auto;min-width:38px;padding:3px 10px}
.place-panel.hascraft .xtra:not([hidden]){margin-top:6px}
.sea-cell.s0{opacity:.7;background:rgba(6,8,14,.55);border-color:rgba(var(--hi),.22)}
.scene.dungeon.sea .cb-bg::after{background:radial-gradient(ellipse at 50% 50%,rgba(8,6,12,.45),rgba(8,6,12,.78))}
.at2-c.bt{border-top-color:rgba(var(--g),.35)}.at2-c.br{border-right-color:rgba(var(--g),.35)}.at2-c.bb{border-bottom-color:rgba(var(--g),.35)}.at2-c.bl{border-left-color:rgba(var(--g),.35)}
.cont-btn svg{transform:rotate(-90deg)}
.cont-btn:hover:not(:disabled) svg,.cont-btn:focus-visible svg{transform:rotate(-90deg) translateY(5px)}
/* Town Square: the main column scrolls inside itself so the Dungeon of the Day box is never cut off */
.square{min-height:0;max-height:100%}.sq-main{min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.sq-daily{margin-bottom:2px}
.square{grid-template-rows:minmax(0,1fr) auto}
/* the Dungeon of the Day card lives in the right-hand column of the Town Square */
.sq-online .sq-daily{margin:0 0 10px;padding:7px 9px 8px}
.sq-online .sq-daily .dd-row{flex-direction:column;align-items:stretch;gap:6px}
.sq-online .sq-daily .dd-info{flex:0 0 auto}.sq-online .sq-daily .dd-sub{white-space:normal;font-size:9px;line-height:1.4}
.sq-online .sq-daily .dd-head{margin-bottom:4px;letter-spacing:.08em;font-size:9px}
.sq-online .sq-daily .dg-ctl{display:flex;gap:6px;align-items:center;justify-content:space-between}
.sq-online{overflow-y:auto;min-height:0;scrollbar-width:thin}

/* ===== Apprentice work: masters and the daily walking mini game ===== */
.scene.dungeon.mg{gap:8px}
.mg-top{display:flex;align-items:center;gap:10px;width:min(90vw,420px)}
.mg-top b{font-weight:500;font-size:12px;color:var(--white);min-width:34px;text-align:right}
.mg-time{flex:1 1 auto;height:8px;border:1px solid var(--line2);background:rgba(0,0,0,.45)}
.mg-time i{display:block;height:100%;width:100%;background:var(--green);transition:width .25s linear}
.mg-time i.low{background:var(--bad)}
.cb-bg.mg-forest{image-rendering:pixelated}.scene.dungeon .cb-bg.mg-forest::after{background:radial-gradient(ellipse at 50% 50%,rgba(8,6,12,.04),rgba(8,6,12,.32))}
.mg-prog{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:min(92vw,560px)}
.mg-chip{font-size:10px;letter-spacing:.06em;padding:3px 8px;border:1px solid var(--line2);color:var(--dim);background:rgba(0,0,0,.35)}
.mg-chip.ok{color:var(--green);border-color:var(--green)}
.mg-btns{display:flex;gap:8px;align-items:center}
.dr-obj.mg-target{color:#7fd08a}.dr-obj.mg-target.mining{color:#c9c2b4}.dr-obj.mg-target.cooking,.dr-obj.mg-target.smithing,.dr-obj.mg-target.alchemy,.dr-obj.mg-target.artisan{color:#d9b46a}
.dr-obj.mg-target.used{opacity:.3;cursor:default}
.dr-obj.mg-station{color:#f2c14e}
.dr-obj.mg-gate{color:var(--green)}
.dr-obj.mg-decor{opacity:.28;color:var(--dim);cursor:default}.dr-obj.mg-decor:hover{color:var(--dim)}
.dr-obj.hit svg{animation:mgShake .26s ease}
@keyframes mgShake{20%{transform:translateX(-3px) rotate(-6deg)}50%{transform:translateX(3px) rotate(6deg)}80%{transform:translateX(-2px)}}
.mg-bang{position:absolute;display:grid;place-items:center;color:#ff3b30;z-index:6;pointer-events:none;animation:mgBang 1.4s ease-out both;filter:drop-shadow(0 0 6px rgba(255,59,48,.8))}
.mg-bang svg{stroke-width:3}
@keyframes mgBang{0%{transform:translateY(8px) scale(.4);opacity:0}15%{transform:translateY(0) scale(1.25);opacity:1}30%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
.scene.dungeon>.mg-end:not(.cb-bg):not(.cb-fog){background:rgba(0,0,0,.82);animation:fadein .5s both}
.ap-box .shop-row .gd-dim{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.dr-obj.hit svg,.mg-bang{animation:none}.mg-time i{transition:none}}
.ap-ready{font-size:10px;letter-spacing:.08em;color:var(--green)}

/* ===== House: daily blessings, armor stands, planning table, hero sheets (patch: house gear and plans) ===== */
.hb-box{display:flex;flex-direction:column;gap:6px;padding-bottom:6px;border-bottom:1px solid var(--line2)}
.hb-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.hb-kind{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:10px;padding:5px 4px}
.hb-on{display:flex;align-items:center;gap:8px;color:var(--green)}.hb-t{display:flex;flex-direction:column;gap:2px;min-width:0}.hb-t b{font-weight:500;color:var(--white);font-size:11px}.hb-t .gd-dim{font-size:10px}
.sd-swap{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;box-sizing:border-box;padding:6px 8px}
.sd-head,.sd-row{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1fr);gap:4px;align-items:center}
.sd-head span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sd-rows{display:flex;flex-direction:column;gap:3px}
.sd-lab{font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-c{display:flex;align-items:center;gap:4px;min-width:0;padding:3px 4px;background:transparent;border:1px dashed var(--line2);border-radius:5px;color:var(--dim);font:inherit;font-size:9px;text-align:left;cursor:default}
.sd-c span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-c.has{border-style:solid;border-color:var(--line);color:var(--white)}
.sd-c.has:not(:disabled){cursor:var(--cur-a,pointer)}
.pt-slots{display:grid;grid-template-columns:repeat(5,40px);gap:6px;justify-content:start}
.hx-none{font-size:10px;margin:0}
.sh-modal{z-index:110}
.sh-box{width:min(760px,100%);max-height:calc(100vh / var(--zoom, 1) - 32px);display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:14px 16px;box-sizing:border-box}
.sh-box h3{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.sh-cols,.pp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.sh-hero{display:flex;flex-direction:column;gap:5px;min-width:0;padding:8px 10px;border:1px solid var(--line2);background:rgba(var(--sh),.22)}
.sh-top{display:flex;align-items:center;gap:8px}.sh-av{width:34px;height:34px;flex:0 0 34px;display:flex}.sh-av svg{width:100%;height:100%}
.sh-nm{display:flex;flex-direction:column;min-width:0}.sh-nm b{font-weight:500;color:var(--white)}.sh-nm span{font-size:10px}
.sh-sec{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.sh-gear{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.sh-g{display:flex;align-items:center;gap:4px;min-width:0;padding:2px 4px;border:1px solid var(--line2);border-radius:4px;font-size:9px;color:var(--white)}.sh-g.none{color:var(--dim);border-style:dashed}
.sh-g span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.sh-s{display:flex;justify-content:space-between;gap:3px;padding:2px 4px;border:1px solid var(--line2);border-radius:4px;font-size:9px}.sh-s em{font-style:normal;color:var(--dim)}.sh-s b{font-weight:500;color:var(--white)}.sh-s.wide{grid-column:span 2}
.sh-p{margin:0;font-size:10px;color:var(--white);display:flex;align-items:center;gap:5px}.sh-p.dim{color:var(--dim)}.sh-p.on{color:var(--green)}
.sh-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.pp-scene{z-index:75}
.pp-wrap{display:flex;flex-direction:column;gap:10px;width:min(820px,94vw);max-height:calc(100vh / var(--zoom, 1) - 32px)}
.pp-head{display:flex;align-items:center;gap:10px;color:var(--green)}.pp-head>div{display:flex;flex-direction:column;gap:2px}.pp-head b{font-weight:500;color:var(--white);font-size:13px;letter-spacing:.06em}.pp-head .gd-dim{font-size:10px}
.pp-acts{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:6px;border-top:1px solid var(--line2)}
.pp-bar{display:flex;justify-content:center;align-items:center;gap:12px}
.pp-go:disabled{opacity:.5}.pp-go.on{border-color:var(--green);color:var(--green)}
.dg-kit{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--dim);font-size:10px;min-height:26px}
.dg-kit .dg-kit-i{width:26px;height:26px;aspect-ratio:auto;background:transparent;padding:0;font:inherit}

.pp-acts>.q-btn,.hv-side>.q-btn,.sh-foot .q-btn,.hx-side>.q-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ap-box>.shop-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.sh-box{background:var(--field-bg,#1b1210)}
.ap-ready{white-space:nowrap;flex:0 0 auto}
/* duo rooms: the cutscene card also covers the duo screen */
.scene.coop>.dr-intro:not(.cb-bg):not(.cb-fog){position:absolute;left:0;top:0;right:0;bottom:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000;opacity:1;transition:opacity .8s ease}
.co-room .dr-stage{margin:0 auto}

/* ---- start page: small "Fullscreen recommended" button above the title ---- */
.fs-rec { display: block; margin: 0 auto 18px; padding: 4px 12px; font: inherit; font-size: 11px; letter-spacing: .08em; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; opacity: .7; cursor: pointer; }
.fs-rec:hover { opacity: 1}

/* ---- Pet left notice (one time, inside the pet box) ---- */
.pet-chip>.pc-left{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:10.5px;line-height:1.35;color:var(--white);min-width:0}
.pet-chip>.pc-left .pc-more{position:static;margin:0}

/* ===== Equipment / Inventory in the big middle window (Oct 8 patch): paper doll, bank-style pack grid, darker scrollbar ===== */
.invbook{display:none!important}
.place-panel.invmode>:not(.place-title):not(.invbook){display:none!important}
.place-panel.invmode>.invbook{display:flex!important;flex-direction:column;flex:1;min-height:0}
.place-panel.invmode{display:flex;flex-direction:column;overflow:hidden}
.place-panel.qmode>.invbook,.place-panel.mapmode>.invbook,.place-panel.annmode>.invbook{display:none!important}
.place-panel.invmode .pt-board{display:none!important}
.invbook .ib-head{display:flex;justify-content:space-between;align-items:center;margin:6px 0 8px;flex:none}
.invbook .ib-head h2{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--green);letter-spacing:.1em;text-transform:uppercase;margin:0}
.invbook .ib-body{flex:1;min-height:0;display:flex;gap:16px;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:4px 6px 4px 0}
.pd{display:flex;gap:14px;align-items:flex-start;justify-content:center;flex:0 1 auto}
.pd-col{display:flex;flex-direction:column;gap:8px}
.pd-mid{display:flex;flex-direction:column;align-items:center;gap:8px}
.pd-fig{width:104px;height:216px;color:var(--green);opacity:.6;display:flex;justify-content:center}
.pd-fig svg{width:100%;height:100%}
.pd-row{display:flex;gap:8px}
.pd-cell{display:flex;flex-direction:column;align-items:center;gap:2px;width:52px}
.pd-cell .slot{width:46px;height:46px;aspect-ratio:auto;box-sizing:border-box}
.pd-cell .slot .ico svg{width:20px;height:20px}
.pd-lab{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.pd-side{flex:0 0 190px;min-width:0;display:flex;flex-direction:column;gap:5px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.22)}
.pd-stat{display:flex;justify-content:space-between;gap:8px;font-size:11px}.pd-stat b{font-weight:500;color:var(--green2,var(--green))}.pd-stat.bad{color:var(--bad)}.pd-stat.bad b{color:var(--bad)}
.invbook .invbank{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.invbook .invbank .bk-vaultcol{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:0}
.invbook .invbank .bk-vaultcol .bk-grid{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:repeat(auto-fill,40px);grid-auto-rows:40px;gap:4px;justify-content:start;align-content:start;max-height:none;padding-right:6px}
.invbook .invbank .bk-vaultcol .bk-grid .slot{width:40px;height:40px;aspect-ratio:auto;box-sizing:border-box}
.invbook .invbank .bk-vaultcol .bk-grid .slot .ico svg{width:17px;height:17px}
.invbook .invbank .bk-srow{margin-bottom:6px}
@media(max-width:700px){.invbook .ib-body{flex-direction:column;align-items:center}.pd-side{flex:none;width:100%;box-sizing:border-box}}
/* one dark, thin scrollbar for the bank vault, the big inventory and the big equipment screen: the theme's own colours, just darker */
.bank .bk-vaultcol .bk-grid,.invbook .ib-body,.place-panel.bankview,.place-panel.invmode{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--scroll) 62%,#000) rgba(0,0,0,.28)}
.bank .bk-vaultcol .bk-grid::-webkit-scrollbar,.invbook .ib-body::-webkit-scrollbar,.place-panel.bankview::-webkit-scrollbar{width:6px;height:6px}
.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-track,.invbook .ib-body::-webkit-scrollbar-track,.place-panel.bankview::-webkit-scrollbar-track{background:rgba(0,0,0,.28);border-radius:99px}
.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb,.invbook .ib-body::-webkit-scrollbar-thumb,.place-panel.bankview::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--scroll) 62%,#000);border-radius:99px}
.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb:hover,.invbook .ib-body::-webkit-scrollbar-thumb:hover,.place-panel.bankview::-webkit-scrollbar-thumb:hover{background:var(--scroll)}

/* ---- "?" details on monster pictures (fight inspect box, encounter card, Bestiary) ---- */
.ci-view,.bs-view{position:relative}
.mq{position:absolute;top:6px;right:6px;z-index:3;display:block;outline:none}
.mq-b{display:flex;align-items:center;justify-content:center;width:22px;height:22px;box-sizing:border-box;border:1px solid var(--green);border-radius:50%;background:rgba(10,6,5,.85);color:var(--green);font-size:13px;font-weight:600;line-height:1;cursor:var(--cur-a,pointer)}
.mq:hover .mq-b,.mq:focus .mq-b,.mq.open .mq-b{background:var(--green);color:#0a0605}
.mq-pop{position:absolute;top:-6px;right:-6px;width:calc(var(--mqw,100%));min-width:0;display:none;box-sizing:border-box;text-align:left;padding:10px 34px 10px 12px;border:1px solid var(--green);border-radius:8px;background:rgba(10,6,5,.97);color:var(--white);font-size:11px;line-height:1.5}
.ci-view .mq-pop,.bs-view .mq-pop{width:auto;top:-6px;right:-6px}
.mq:hover .mq-pop,.mq:focus .mq-pop,.mq.open .mq-pop{display:block}
.ci-view .mq,.bs-view .mq{position:absolute;inset:0;pointer-events:none}
.ci-view .mq-b,.bs-view .mq-b{position:absolute;top:6px;right:6px;pointer-events:auto}
.ci-view .mq-pop,.bs-view .mq-pop{position:absolute;inset:0;max-height:none;overflow-y:auto;scrollbar-width:thin;pointer-events:auto}
.ci-view .mq:hover .mq-pop,.ci-view .mq:focus .mq-pop,.ci-view .mq.open .mq-pop,.bs-view .mq:hover .mq-pop,.bs-view .mq.open .mq-pop{display:block}
.cb-inspect.on{pointer-events:auto}
.mq-pop .ci-tags{justify-content:flex-start;flex-wrap:wrap;margin-bottom:6px}.mq-pop p{margin:0 0 6px}
.mq-pop .bs-info{max-height:none;overflow:visible}
.ci-view .mq-b,.bs-view .mq-b{z-index:2}.ci-view .mq-pop,.bs-view .mq-pop{z-index:1}

/* ---- Dungeon of the Day: Solo / Duo switch looks like the one on the normal dungeon rows ---- */
.sq-daily .co-toggle{display:flex;flex:0 0 auto;margin:0;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.sq-daily .co-toggle button{border:0;border-radius:0;background:transparent;color:var(--dim);padding:7px 10px;min-height:0;width:auto;font:inherit;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.sq-daily .co-toggle button+button{border-left:1px solid var(--line2)}
.sq-daily .co-toggle .co-opt.on{background:rgba(var(--g),.18);color:var(--green)}
.sq-daily .co-toggle .co-opt:hover:not(:disabled):not(.on){color:var(--white)}

/* ---- Parry look: everything about a parry is blue and white ---- */
:root{--parry:#4da3ff;--parry-hi:#d9ecff}
.cb-now.t-parry{color:var(--parry-hi)!important;text-shadow:0 0 6px #fff,0 0 22px var(--parry),0 0 40px rgba(77,163,255,.7)!important}
.cb-hist p.parryl,.parryl{color:var(--parry)!important;text-shadow:0 0 8px rgba(77,163,255,.55)}
.cb-acts .parry.go{color:#fff!important;background:linear-gradient(#5aa9ff,#1f5fd6)!important;border:1px solid #fff!important;box-shadow:0 0 12px #4da3ff,0 0 28px rgba(77,163,255,.85)!important;animation:parryPulseB .38s ease-in-out infinite alternate!important}
@keyframes parryPulseB{from{transform:scale(1);box-shadow:0 0 10px #4da3ff,0 0 22px rgba(77,163,255,.6)}to{transform:scale(1.1);box-shadow:0 0 20px #fff,0 0 44px rgba(77,163,255,.95)}}
.parry.bang{color:var(--parry-hi)!important;text-shadow:0 0 12px var(--parry),0 0 26px var(--parry)!important}
.cb-acts:has(.parry.go) button[aria-label=Attack],.cb-acts:has(.parry.go) button[aria-label=Attack].hv{border-color:#fff!important;box-shadow:0 0 16px rgba(77,163,255,.95),0 0 30px rgba(77,163,255,.6)!important;animation:parryWhiteB .38s ease-in-out infinite alternate!important}
@keyframes parryWhiteB{to{box-shadow:0 0 28px #fff,0 0 44px rgba(77,163,255,1)}}
.parry-flash{background:radial-gradient(ellipse at 50% 50%,rgba(77,163,255,0) 35%,rgba(77,163,255,.5) 100%)!important}
.parry-banner.fail{color:var(--parry-hi)!important;text-shadow:0 0 8px #fff,0 0 22px var(--parry),0 0 42px rgba(77,163,255,.8),0 2px 4px #000!important}
.parry-shield{color:var(--parry-hi)!important;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px var(--parry)) drop-shadow(0 0 38px var(--parry)) drop-shadow(0 0 64px rgba(77,163,255,.9))!important}
.parry-shield svg{stroke-width:1.8!important}
.parry-shield::before{content:"";position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle,rgba(120,185,255,.75) 0,rgba(77,163,255,.35) 45%,rgba(77,163,255,0) 72%);z-index:-1}
@media (prefers-reduced-motion:reduce){.cb-acts .parry.go,.cb-acts:has(.parry.go) button[aria-label=Attack]{animation:none!important}}

/* ---- Status effect icons: the turn count sits just below the icon, never on top of it ---- */
.fx-i em{right:auto;left:50%;bottom:-13px;transform:translateX(-50%);min-width:0;padding:0;border:0;background:none;font:700 9px/11px var(--mono,inherit);color:inherit;pointer-events:none}
.cb-fx{height:36px;align-items:flex-start;padding-bottom:12px;box-sizing:border-box;margin-bottom:-12px}
.cb-fx .fx-none{align-self:center}

/* ---- Quest Journal button: the glow is the same on all four sides (an even ring that stays inside the box, so nothing gets clipped) ---- */
.qj-btn.prog{animation:qjglow 2.2s ease-in-out infinite!important}
@keyframes qjglow{0%,100%{box-shadow:0 0 0 0 rgba(var(--g),0),inset 0 0 0 0 rgba(var(--g),0);border-color:var(--line)}50%{box-shadow:0 0 0 2px rgba(var(--g),.35),inset 0 0 8px 1px rgba(var(--g),.5);border-color:var(--green)}}
@media(prefers-reduced-motion:reduce){.qj-btn.prog{animation:none!important;box-shadow:0 0 0 2px rgba(var(--g),.35),inset 0 0 8px 1px rgba(var(--g),.5)}}

/* ---- The five social/board buttons: squeezed together so there is clear space at the left and right of the group ---- */
.lb-tabs{justify-content:center!important;gap:3px!important;padding:0 10px;box-sizing:border-box;min-width:0}
.lb-tabs .lb-swap{flex:0 0 auto;margin:0!important;padding:4px 5px!important}
.lb-tabs .lb-swap{width:24px!important;min-width:0!important;padding:4px 0!important;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.cb-foe>.cb-fx{width:max-content;flex-wrap:nowrap;flex-direction:row;margin-bottom:0;height:34px}

/* ===== Bigger mini games and rooms: one-line header with a ? icon, stage fills the screen ===== */
.dr-head{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;max-width:94vw;white-space:nowrap}
.dr-head .dg-title{font-size:14px!important;letter-spacing:.14em!important;line-height:1.2!important}
.dr-head .dg-sub{margin:0}
.scene.dungeon.mg,.scene.dungeon:has(.dr-stage){gap:6px;padding:12px;overflow:hidden}
.dr-msg{height:34px;min-height:34px;overflow:hidden}
.dr-insc{min-height:0}
.scene.coop .dr-foot{flex-direction:row;justify-content:center}
.mg-top{width:min(90vw,520px)}

/* ===== Fishing: larger play area, instructions behind the ? ===== */
.fishgame .fg-sub{display:none}
.fishgame .fg-head{display:flex;align-items:center;justify-content:center;gap:8px}
.fishgame .fg-water{width:min(94vw,820px);height:min(54vh,480px)}
.fishgame .fg-ring{width:clamp(128px,34vh,300px);height:clamp(128px,34vh,300px)}
.fishgame .fg-gem{width:48%;height:48%}
.fishgame .fg-msg{font-size:15px;min-height:22px}

/* ===== Oct 8 polish: tame page, quiet bank search, Elemental Mastery tabs ===== */
.place-panel.tamemode>:not(.place-title):not(.tamebook){display:none!important}.tamebook{display:none!important}
.place-panel.tamemode>.tamebook{display:flex!important;flex-direction:column;flex:1;min-height:0}
.place-panel.tamemode{display:flex;flex-direction:column;overflow:hidden}
.place-panel.tamemode .pt-board,.place-panel.tamemode .q-dock{display:none!important}
.place-panel.qmode>.tamebook,.place-panel.mapmode>.tamebook,.place-panel.annmode>.tamebook,.place-panel.wmmode>.tamebook{display:none!important}
.tamebook .tb-head{display:flex;justify-content:space-between;align-items:center;margin:6px 0}.tamebook .tb-head b{font-weight:500;font-size:12px;color:var(--green);letter-spacing:.1em;text-transform:uppercase}
.tamebook .tb-x{font-size:15px;line-height:1}
.tamebook .tb-list{flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.pt-btns .tool.on{border-color:var(--green);background:rgba(var(--g),.12)}
.bk-search{flex:0 1 150px}
.bk-search-in{background:rgba(var(--sh),.35);border:1px solid var(--line2);border-radius:5px;padding:3px 20px 3px 8px;font-size:10px;color:var(--white)}
.bk-search-in::placeholder{color:var(--dim);opacity:.55}
.bk-search-in:focus{border-color:var(--green);background:rgba(var(--g),.05)}
.bk-search-x{right:2px;width:16px;height:16px;border-radius:50%;font-size:10px;display:inline-flex;align-items:center;justify-content:center;cursor:var(--cur-a,pointer)}

.em-tabs{display:flex;gap:6px;margin:6px 0}
.em-tab{position:relative;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;background:linear-gradient(rgba(var(--g),.2),rgba(var(--g),.2)) no-repeat left center/0 100%;border:1px solid rgba(var(--g),.35);border-radius:3px;color:var(--dim);font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:var(--cur-a,pointer);transition:background-size .3s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s,box-shadow .25s}
.em-tab span{overflow:hidden;text-overflow:ellipsis}.em-tab svg{flex:none}
.em-tab i{font-style:normal;font-size:10px;color:var(--dim);letter-spacing:0}
.em-tab:hover{background-size:100% 100%;border-color:var(--green);color:var(--white);box-shadow:0 0 10px rgba(var(--g),.3)}
.em-tab.on{background-size:100% 100%;border-color:var(--green);color:var(--green);box-shadow:0 0 10px rgba(var(--g),.25)}
.em-tab.on i,.em-tab:hover i{color:inherit}
.dr-insc{flex:0 0 auto;max-width:min(94vw,900px);min-height:0;font-size:12px;color:var(--white)}
.dr-msg,.dr-foot,.dr-head,.mg-top,.mg-prog{flex:0 0 auto}
.dr-insc{line-height:1.4}.scene.coop .co-map{gap:6px}
.fishgame{background:rgba(5,8,14,.94)!important}

/* ===== Equipment paper doll v2 (Oct 8): framed panel, big body, framed slot boxes on and around it ===== */
.pd{flex:0 0 auto;display:block;padding:6px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 0 4px var(--line2)}
.pd-stage{position:relative;width:340px;height:380px;background:radial-gradient(ellipse at 50% 45%,rgba(var(--g),.07),transparent 65%)}
.pd-fig{position:absolute;left:50%;top:0;transform:translateX(-50%);width:230px;height:380px;opacity:.28;pointer-events:none}
.pd-fig svg{width:100%;height:100%}
.pd-cell{position:absolute;display:block;width:auto}
.pd-cell .slot{width:100%;height:100%;aspect-ratio:auto;box-sizing:border-box;border:1px solid var(--line2);border-radius:4px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 2px rgba(0,0,0,.4),inset 0 0 0 3px rgba(var(--hi),.08)}
.pd-cell.on .slot{border-color:var(--green);background:rgba(var(--g),.14);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 0 10px rgba(var(--g),.25)}
.pd-cell .slot.broken{border-color:var(--bad);background:rgba(212,106,106,.14)}

.pd-cell .slot .ico svg{width:55%;height:55%}
.pd-cell .slot:not(.full) .ico svg{width:50%;height:50%}
.invbook .ib-body:has(.pd){align-items:flex-start;justify-content:center}
.pd-stage{zoom:.88}
.pd-fig{opacity:.42}
.pd-cell .slot .ico svg{width:62%;height:62%}.pd-cell .slot:not(.full) .ico svg{width:52%;height:52%}
.pd-cell .slot{color:var(--green)}.pd-cell .slot:not(.full){color:var(--dim)}
.pd-cell .slot .ico{width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}.pd-cell .slot:not(.full) .ico{opacity:.5}
.pd-cell .slot .ico svg{width:64%!important;height:64%!important}

/* Place names inside the Quest Journal and Quest Book travel there when clicked */
.loc-link{cursor:var(--cur-a,pointer)}.loc-link:focus-visible{color:var(--green)!important;border-color:var(--green)!important;outline:none} .loc-link:hover{outline:none}

/* Locations: only the list scrolls (under the header), so the scrollbar never touches the header icons; names stay on one line */
.locs{display:flex;flex-direction:column;overflow:hidden!important}
.locs .locs-head{position:static;flex:none}
.locs-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;margin:0 -14px 0 -14px;padding:0 6px 0 14px}
.loc-list{margin-left:8px}
.locs button.loc-btn{font-size:.94em;padding:5px 4px 5px 10px;white-space:nowrap}
@media(max-width:800px){.locs{display:block;overflow:visible!important}.locs-scroll{overflow:visible;margin:0;padding:0}}

/* ===== Shop overlays: an open shop (any box with a folded header row) covers the whole place window; X top right, Esc or B closes ===== */
.place-panel{position:relative}
.place-panel:has(.shop.open>.shop-top>.shop-toggle){overflow:hidden!important}
.place-panel :has(.shop.open>.shop-top>.shop-toggle){position:static!important;transform:none!important;filter:none!important;contain:none!important}
.place-panel .shop.open:has(>.shop-top>.shop-toggle){position:absolute!important;inset:0!important;z-index:60!important;margin:0!important;width:auto!important;height:auto!important;max-height:none!important;min-height:0!important;flex:none!important;overflow-x:hidden!important;overflow-y:auto!important;box-sizing:border-box!important;padding:0 16px 14px!important;border:0!important;border-radius:9px!important;box-shadow:none!important;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot)),var(--field-bg,#120a08)!important;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.place-panel .shop.open:has(>.shop-top>.shop-toggle)>.shop-top{position:sticky!important;top:0;z-index:5;display:flex!important;align-items:center;gap:8px;width:auto!important;box-sizing:border-box;margin:0 -16px 6px!important;padding:12px 54px 10px 16px!important;background:var(--field-bg,#120a08)!important;border:0!important;border-bottom:1px solid var(--line2)!important}
.place-panel .shop.open:has(>.shop-top>.shop-toggle)>.shop-top .shop-toggle{flex:1 1 auto;width:auto!important;min-width:0;margin:0!important;padding:0!important;text-align:left}
.ovl-x{display:none!important}
.place-panel .shop.open>.shop-top>.ovl-x{display:inline-flex!important;position:absolute!important;right:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;margin:0!important;float:none}
.place-panel .shop.open[data-ovl-in]{animation:ovlIn .25s ease both}
@keyframes ovlIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.place-panel .shop.open[data-ovl-in]{animation:none}}

/* Pet window: the Spar button looks muted while the pet is too hungry (it still answers with a small popup) */
.pet-acts .q-btn.hungry{opacity:.55}

/* Admin commands popup: each command is clickable (runs it, or fills the chat box when it needs a name) */
.cmds .cmd-run{cursor:var(--cur-a,pointer);border-radius:4px;padding:1px 4px;margin-left:-4px}.cmds .cmd-run:focus-visible{background:rgba(var(--g),.10);outline:none} .cmds .cmd-run:hover{outline:none}.cmds .cmd-run:hover b{color:var(--green2)}

/* Dungeon of the Day: grayed out once today's bonus is claimed, until the next game day */
.sq-daily.spent{filter:grayscale(1);opacity:.5}
.sq-daily.spent .dg-enter.ready,.sq-daily.spent .dg-enter{box-shadow:none;animation:none}
.place-panel .shop.open>.shop-pop{position:static!important;width:auto!important;max-height:none!important;overflow:visible!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important}
.place-panel .shop.open .mk-list{max-height:none!important;overflow:visible!important}
.place-panel .shop.open .mk-sell{padding-bottom:4px}
.shop .mk-sell .q-btn{width:auto;flex:0 0 auto}
.cmds{max-height:calc(100vh - 220px);overflow-y:auto;scrollbar-width:thin}

/* ===== Oct 8 fishing v3: the place's watercolor behind the game, fade in, clean square dark controls ===== */
.fishgame{background:#05080e!important;animation:fgfade .6s ease both}
@keyframes fgfade{from{opacity:0}to{opacity:1}}
.fishgame>.fg-bg:not(.fg-x):not(.fg-lake){position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;animation:fgbgin 1.1s ease .45s forwards;pointer-events:none}
.fishgame>.fg-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(5,8,14,.22),rgba(5,8,14,.55))}
.fishgame.again>.fg-bg{animation:none;opacity:1}
@keyframes fgbgin{from{opacity:0}to{opacity:1}}
.fishgame::after{z-index:0}
.fishgame>.fg-water,.fishgame>.fg-catch{animation-delay:.5s}
.fishgame.again>.fg-water,.fishgame.again>.fg-catch{animation-delay:0s}
.fishgame .fg-water{background:rgba(5,8,14,.28);border:1px solid rgba(255,255,255,.35);border-radius:0}
.fishgame.reeling .fg-bob,.fishgame.reeling.pulling .fg-bob{display:none!important}
.fishgame .fg-head{color:#fff;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.fishgame .fg-steps{gap:0}
.fishgame .fg-steps span{border-radius:0;border:1px solid rgba(255,255,255,.4);background:#05080e;color:#bfc7d2;padding:5px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-left:-1px}
.fishgame .fg-steps .on{background:#fff;color:#05080e;border-color:#fff;font-weight:600}
.fishgame .fg-steps .done{opacity:1;color:#fff;border-color:rgba(255,255,255,.7)}
.fishgame .fg-diff{background:#05080e;border:1px solid rgba(255,255,255,.3);padding:3px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:none}
.fishgame .fg-msg{background:#05080e;color:#fff;padding:6px 16px;border-left:3px solid var(--fc,#fff);font-size:14px;letter-spacing:.04em;text-shadow:none}
.fishgame .fg-msg:empty{display:none}
.fishgame .q-btn,.fishgame .fish-bait{border-radius:0;background:#05080e;color:#fff;border:1px solid rgba(255,255,255,.55);padding:8px 20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.fishgame .q-btn:hover:not(:disabled),.fishgame .fish-bait:hover:not(:disabled){background:#fff;color:#05080e;border-color:#fff}
.fishgame .q-btn:disabled{opacity:.45;color:#9aa3ad}
.fishgame .fish-bait{padding:4px 12px}.fishgame .fish-bait.on{background:#fff;color:#05080e;border-color:#fff}
.fishgame .fish-baits .fb-l{color:#d6dce4;text-shadow:none}
.fishgame .fg-x{color:#fff;background:#05080e;border:1px solid rgba(255,255,255,.4);width:30px;height:30px;line-height:1;font-size:18px;border-radius:0;padding:0}
.fishgame .fg-x:hover{background:#fff;color:#05080e}
.fishgame .fg-catch{background:rgba(5,8,14,.92);border:1px solid rgba(255,255,255,.35);border-radius:0;max-width:min(92vw,440px)}
.fishgame .fgc-head{color:#d6dce4;text-shadow:none}.fishgame .fgc-name{color:#fff;text-shadow:none}.fishgame .fgc-note{color:#d6dce4;text-shadow:none}
.fishgame .fgc-tags span{border-radius:0;background:#05080e;border:1px solid rgba(255,255,255,.45);color:#fff;text-transform:uppercase;letter-spacing:.1em;padding:3px 10px}
/* the fishing row on the Forest / Harbor page */
.fish-row .fish-cast-btn{border-radius:0;background:#05080e;color:#fff;border:1px solid rgba(255,255,255,.5)}

.fish-chip,.fish-bait{border-radius:0}

/* ===== Oct 8: channel switch in the room chat (Market room, houses) ===== */
.sc-form .sc-chan{flex:none;min-width:64px;border-radius:0;padding:4px 10px;font-size:10px}

/* ---- Oct 8 patch: hardcore heroes show in red on leaderboards ---- */
.namelink.hc-name,.namelink.hc-name:visited{color:#e5484d}
.namelink.hc-name:hover{color:var(--green)}

/* ---- Oct 8 patch: no title keeps the same reserved title line in the stats box ---- */
.stats .kin .kt.kt-empty{display:block;min-height:1.3em;font-style:italic;visibility:hidden}

/* ===== Oct 8 patch: one general hover rule (20% darker, short fade), party stack, Blacksmith/Market/Bank layout tweaks ===== */
button:not(:disabled),.tool,.home,.slot.click,.tt-tile,.chip,.q-btn,.shop-cat,.hx-tab,.bk-tab,.ac-tile,.cb-li,.mp-cell,.cal-day,.pick-btn,.pet-chip,.rest-btn,.shard-opt,.ch2-loc,.ch2-tile,.ch2-fu,.rm-spot,.ac-row.ac-go,.ac-rec.ac-go,.poll-opt,.pc-act,.dg-chip,.pal-opt,.forest-explore,.gg-tile,.sub-link,.loc-btn,.dy-row,.so-row,.dv-cat,.st-nav,.co-act,.cb-tool,.bs-tile,.qj-btn,.li-slot,.tr-chip,.info-btn,.shop-row{transition:filter .15s ease}
button:not(:disabled):hover,.tool:hover,.home:hover,.slot.click:hover,.tt-tile:hover,.chip:hover:not(:disabled),.q-btn:hover:not(:disabled),.shop-cat:hover,.hx-tab:hover,.bk-tab:hover,.ac-tile:hover,.cb-li:hover:not(:disabled),.mp-cell:hover:not(:disabled),.cal-day:hover,.pick-btn:hover,.pet-chip:hover,.rest-btn:hover:not(:disabled),.shard-opt:hover,.ch2-loc:hover,.ch2-tile:hover,.ch2-fu:hover,.rm-spot:hover,.ac-row.ac-go:hover,.ac-rec.ac-go:hover,.poll-opt:hover,.pc-act:hover:not(:disabled),.dg-chip:hover,.pal-opt:hover,.forest-explore:hover:not(:disabled),.gg-tile:hover:not(:disabled),.sub-link:hover,.loc-btn:hover,.dy-row:hover,.so-row:hover:not(:disabled),.dv-cat:hover,.st-nav:hover:not(:disabled),.co-act:hover:not(:disabled),.cb-tool:hover:not(.locked),.bs-tile:hover,.qj-btn:hover,.li-slot:hover,.tr-chip:hover:not(:disabled),.info-btn:hover,.shop-row:hover:not(:has(button:hover,input:hover)){filter:brightness(.8)}

/* announcements bar: party members stacked in the space the "Connected" text uses */
.ann .pty{flex:none;box-sizing:border-box;width:96px;max-width:96px;height:100%;display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:5px;align-items:center;margin-left:8px;font-size:9px;line-height:1.15;overflow:hidden}
.ann .pty[hidden]{display:none}
.pty-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.pty-list{display:flex;flex-direction:column;gap:0;min-width:0;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.pty-list::-webkit-scrollbar{display:none}
.pty-m{font-size:9px;line-height:11px;flex:none;display:flex;align-items:center;gap:3px;min-width:0}.pty-m>span{max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pty-m .ico{flex:none}.pty-d{width:5px;height:5px;margin:0 2px}
.pty-x{border:0!important;background:none!important;width:14px!important;height:14px!important;padding:0;border-radius:3px;color:var(--dim);display:inline-flex;align-items:center;justify-content:center}

/* Blacksmith title bar: Weapon Mastery (icon + text) first, then the repair hammer */
.pt-act .wm-txt{display:inline-flex;align-items:center;gap:5px;width:auto;height:26px;padding:0 9px;font-size:10px;white-space:nowrap;box-sizing:border-box}
.pt-act .wm-txt[hidden]{display:none}.pt-act{display:inline-flex;align-items:center;gap:8px}
.pt-act .repair-ico .ico svg{width:17px;height:17px}

/* Town Hall Market: category tabs are icons */
.shop-cat.shop-cat-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;padding:0;border-radius:6px}

/* Bank: Slots & Tabs sits right beside the "?" */
.bank .bk-headrow .bk-tools{margin:0 0 0 auto!important;flex:0 0 auto!important}
.bank .bk-headrow .bk-help{margin-left:0!important}

/* Weapon Mastery page: bigger tree, "?" at the top right */
.wm-head{position:relative;padding-right:26px}.wm-head .wm-info{position:absolute;top:0;right:0}
.wm-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.wm-wrap .tt-body{flex:1;min-height:0;align-items:stretch}
.wm-wrap .tt-grid{justify-content:space-evenly}
.wm-wrap .tt-tile{width:56px;height:56px}.wm-wrap .wm-ty{width:30px;height:30px}
.wm-cols{gap:34px!important}.wm-tier{gap:34px!important}.wm-col{width:56px!important}
.wm-wrap .tt-gap{height:22px}.wm-wrap .tt-tile::before,.wm-wrap .tt-tile::after{height:11px}

/* Support the Game: a slightly shorter button */
.support-head .support-title.sub-link{padding:2px 14px!important;line-height:1.2}
.wm-wrap .tt-tile{width:clamp(36px,5.6vh,52px);height:clamp(36px,5.6vh,52px)}.wm-wrap .wm-ty{width:30px;height:30px}
.wm-cols{gap:clamp(30px,6vw,80px)!important}.wm-tier{gap:clamp(30px,6vw,80px)!important}.wm-col{width:clamp(36px,5.6vh,52px)!important}
.wm-wrap .tt-gap{height:clamp(12px,2.2vh,22px)}.wm-wrap .tt-tile::before,.wm-wrap .tt-tile::after{height:clamp(6px,1.1vh,11px)}
.wm-wrap .tt-tile{width:clamp(30px,4.6vh,46px);height:clamp(30px,4.6vh,46px)}.wm-wrap .tt-tile .ico svg{width:clamp(16px,2.4vh,24px);height:clamp(16px,2.4vh,24px)}
.wm-col{width:clamp(30px,4.6vh,46px)!important}.wm-wrap .tt-gap{height:clamp(8px,1.5vh,14px)}.wm-wrap .tt-tile::before,.wm-wrap .tt-tile::after{height:clamp(4px,.75vh,7px)}
.wm-wrap .tt-grid{justify-content:center}
.wm-wrap .tt-tile.wm-ty{width:28px;height:28px}.wm-wrap .tt-tile.wm-ty .ico svg{width:16px;height:16px}
.wm-wrap .tt-tile{width:clamp(30px,5.4vh,52px)}.wm-wrap .tt-tile.wm-ty{width:28px}
.wm-wrap .tt-tile:not(.wm-ty){height:clamp(30px,5.4vh,52px)}.wm-col{width:clamp(30px,5.4vh,52px)!important}
.wm-wrap .tt-tile:not(.wm-ty){width:clamp(32px,6.2vh,56px);height:clamp(32px,6.2vh,56px)}.wm-col{width:clamp(32px,6.2vh,56px)!important}

/* ===== Oct 8: forum pages start at the top, so the header and the Return to Game button never jump between pages ===== */
.view.on.forum-view{justify-content:flex-start;padding-top:56px;padding-bottom:40px}
.fishgame .fg-steps span,.fishgame .fg-head{text-shadow:none}

/* ===== combat polish (Oct 8): hit glow behind the monster box, square taller enemy bar with flowing water and numbers inside, one-line duo status, chat that never moves the fight ===== */
.cb-glow{position:absolute;z-index:-1;pointer-events:none;opacity:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(var(--g),.95) 0,rgba(var(--g),.55) 28%,rgba(var(--g),.18) 55%,transparent 72%);animation:cbGlow .6s cubic-bezier(.1,.7,.3,1) forwards}
.cb-glow.crit{animation-duration:1s;background:radial-gradient(ellipse at center,rgba(255,238,196,1) 0,rgba(var(--g),.92) 24%,rgba(var(--g),.42) 52%,transparent 74%)}
@keyframes cbGlow{0%{opacity:0;transform:scale(.7)}10%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.2)}}
.cb-glow .ring{z-index:0}
.cb-glow-sp.crit i{animation-duration:.85s}
@keyframes cbSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}
.cb-glow .ring{position:absolute;left:50%;top:50%;width:60%;height:70%;border:2px solid rgba(255,170,60,.9);border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;animation:cbRing .7s ease-out forwards}
@keyframes cbRing{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.cb-foe .cb-ftrack{width:60%;height:24px;margin:0 auto;border-radius:0;position:relative;overflow:hidden;background:#3a0b11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cb-foe .cb-ftrack i{border-radius:0;background-color:#e03a3a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q12 2 24 8 T48 8' fill='none' stroke='white' stroke-opacity='.2' stroke-width='2'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24' preserveAspectRatio='none'%3E%3Cpath d='M0 17 Q8 12 16 17 T32 17' fill='none' stroke='white' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E"),linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0) 50%);background-repeat:repeat-x,repeat-x,no-repeat;background-size:48px 100%,32px 100%,100% 100%;animation:cbFlow 3.2s linear infinite}
@keyframes cbFlow{from{background-position:0 0,0 0,0 0}to{background-position:-48px 0,32px 0,0 0}}
.cb-fnum{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;letter-spacing:.08em;color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9);pointer-events:none}
@media (prefers-reduced-motion:reduce){.cb-foe .cb-ftrack i{animation:none}}
.cb-foot .cb-track,.cb-foot .cb-track i,.co-hero .cb-track,.co-hero .cb-track i{border-radius:0}
.co-status{display:flex;justify-content:center;align-items:center;height:16px;line-height:16px;white-space:nowrap;overflow:hidden}
.co-status .co-msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-status .co-left{flex:none;white-space:pre}
.cb.hitglow{animation:cbBoxGlow .6s ease-out}.cb.hitglow-crit{animation:cbBoxGlow 1s ease-out}
@keyframes cbBoxGlow{0%{box-shadow:0 0 0 0 rgba(var(--g),0)}10%{box-shadow:0 0 46px 6px rgba(var(--g),.85),inset 0 0 40px rgba(var(--g),.28)}100%{box-shadow:0 0 70px 14px rgba(var(--g),0),inset 0 0 40px rgba(var(--g),0)}}
@media (prefers-reduced-motion:reduce){.cb.hitglow,.cb.hitglow-crit{animation:none}}

/* ---------- duo explore at ordinary places (no grid) and the paper doll on the planning pages ---------- */
.ca-scene{display:flex;flex-direction:column;gap:10px;width:min(92vw,620px);padding:12px 14px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.5);box-sizing:border-box;height:min(300px,46vh);min-height:0}
.ca-log{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.ca-l{margin:0;font-size:12px;line-height:1.5;color:var(--dim)}.ca-l.now{color:var(--white);animation:fadein .5s ease both}.ca-l.dim{color:var(--dim)}
.ca-bless{margin:0;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green)}
.ca-acts,.ca-event{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.ca-event{flex-direction:column;gap:8px}
.ca-evt{margin:0;color:var(--green);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.ca-clue{margin:0;font-size:12px;color:var(--white);text-align:center;line-height:1.5}.ca-clue em{font-style:normal;color:var(--dim)}
.ca-hint,.ca-wait{margin:0;font-size:10px;text-align:center}
.ca-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.ca-opt.on{border-color:var(--green);color:var(--green)}
.ca-go{display:inline-flex;align-items:center;gap:8px}
.sh-doll{display:flex;justify-content:center;overflow:hidden}
.sh-doll .pd{padding:4px}
.sh-doll .pd-stage{zoom:.68}
.pp-wrap.solo{width:min(520px,94vw)}
@media (max-height:760px){.ca-scene{height:min(240px,40vh)}}
.cb-glow-sp{position:absolute;z-index:6;pointer-events:none}
.cb-glow-sp i{position:absolute;left:50%;top:50%;border-radius:50%;opacity:0;animation:cbSpark .6s cubic-bezier(.1,.8,.3,1) forwards}
.ca-main{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.ca-chat{width:min(92vw,620px);position:relative;z-index:3}

/* ---- Oct 8 patch: dungeon lighting (torch glow, light pools, vignette) and the chest room / trap room looks ---- */
.scene .dg-light{position:absolute!important;inset:0;z-index:1!important;pointer-events:none;overflow:hidden;--tc:255,170,70;--tc2:255,110,30}
.dg-light i{position:absolute;display:block}
.dg-light .gl{left:calc(var(--x) - var(--s) / 2);top:calc(var(--y) - var(--s) / 2);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(closest-side,rgba(var(--tc),.34),rgba(var(--tc2),.12) 55%,transparent 78%);animation:dgFlick 2.3s ease-in-out infinite;will-change:opacity}
.dg-light .gl.l{--x:8%;--y:40%;--s:64vmin}.dg-light .gl.l2{--x:25%;--y:43%;--s:36vmin;animation-duration:3.1s;animation-delay:-.8s}
.dg-light .gl.r2{--x:75%;--y:43%;--s:36vmin;animation-duration:2.7s;animation-delay:-1.6s}.dg-light .gl.r{--x:92%;--y:40%;--s:64vmin;animation-duration:2.9s;animation-delay:-1.1s}
.dg-light .pool{left:50%;bottom:-14%;width:96vmin;height:50vmin;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(var(--tc),.16),transparent 72%);animation:dgFlick 4.1s ease-in-out infinite;animation-delay:-2s}
.dg-light .ray{left:50%;top:-6%;width:70vmin;height:80%;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(var(--tc),.12),transparent 72%);opacity:.9}
.dg-light .vig{inset:0;background:radial-gradient(ellipse at 50% 46%,transparent 36%,rgba(2,1,4,.5) 74%,rgba(2,1,4,.86) 100%)}
.dg-light .tint{inset:0;background:rgba(120,0,12,.30);opacity:0;transition:opacity 1.4s ease}
@keyframes dgFlick{0%,100%{opacity:.82}16%{opacity:1}33%{opacity:.68}51%{opacity:.96}72%{opacity:.76}}
.scene .cb-bg{transition:opacity .9s ease,filter 1.4s ease}
.scene.rm-bright .cb-bg{filter:brightness(1.4) saturate(1.15)}
.scene.rm-bright .dg-light{--tc:255,206,120;--tc2:255,150,60}
.scene.rm-bright .dg-light .gl{opacity:1;background:radial-gradient(closest-side,rgba(var(--tc),.5),rgba(var(--tc2),.18) 58%,transparent 80%)}
.scene.rm-bright .dg-light .vig{background:radial-gradient(ellipse at 50% 46%,transparent 55%,rgba(2,1,4,.32) 85%,rgba(2,1,4,.6) 100%)}
.scene.rm-trap .cb-bg{filter:brightness(.38) saturate(.45) hue-rotate(-14deg)}
.scene.rm-trap .dg-light{--tc:150,190,255;--tc2:190,30,40}
.scene.rm-trap .dg-light .tint{opacity:1}
.scene.rm-trap .dg-light .gl{background:radial-gradient(closest-side,rgba(var(--tc2),.34),rgba(120,10,20,.12) 55%,transparent 78%)}
.scene.rm-trap .dg-light .vig{background:radial-gradient(ellipse at 50% 46%,transparent 22%,rgba(30,0,4,.66) 66%,rgba(8,0,2,.95) 100%);animation:rmPulse 2.8s ease-in-out infinite}
@keyframes rmPulse{0%,100%{opacity:.88}50%{opacity:1}}
.scene.rm-trap .dg-light .ray{background:radial-gradient(ellipse 40% 62% at 50% 0%,rgba(170,205,255,.22),transparent 72%)}
.scene.rm-trap .cb-fog{opacity:.5}
.dr-cell.pl{position:relative}
.dr-stage{transition:box-shadow 1.2s ease,background 1.2s ease}
.dr-grid,.dr-objs,.dr-spikes{transition:opacity 1s ease}
.dr-grid>.dr-cell,.dr-objs>.dr-obj{transition:opacity 1s ease,background 1s ease}
.dr-stage .hx-layer{transition:opacity .9s ease}
.dr-stage.rm-c{background:#2b2218;box-shadow:0 0 0 1px rgba(255,214,140,.55),0 0 70px rgba(255,190,100,.42)}
.dr-stage.rm-c .dr-cell{background:rgba(255,226,172,.20);border-color:rgba(255,236,200,.13)}
.dr-stage.rm-c .dr-cell.alt{background:rgba(255,226,172,.13)}.dr-stage.rm-c .dr-cell.wall{background:rgba(255,232,190,.30)}
.dr-stage.rm-c::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,rgba(255,226,160,.30),transparent 72%)}
.dr-stage.rm-c .dr-obj.chest:not(.used):not(.locked){filter:drop-shadow(0 0 7px rgba(255,200,90,.9))}
.dr-stage.rm-t{background:#0a0204;box-shadow:0 0 0 1px rgba(255,64,52,.6),0 0 54px rgba(210,20,24,.5),0 0 130px rgba(120,0,0,.55)}
.dr-stage.rm-t .dr-cell{background:rgba(118,12,18,.22);border-color:rgba(255,70,60,.10)}
.dr-stage.rm-t .dr-cell.alt{background:rgba(66,6,10,.34)}.dr-stage.rm-t .dr-cell.wall{background:rgba(26,36,70,.62);border-color:rgba(150,190,255,.14)}
.dr-stage.rm-t::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 46% 78% at 50% 0%,rgba(150,190,255,.26),transparent 72%),radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(40,0,6,.74) 100%)}
.dr-stage.rm-t .dr-obj{color:#cfd8ee}.dr-stage.rm-t .dr-obj.door{color:#8fd0b0}.dr-stage.rm-t .dr-obj.chest{color:#caa04a}.dr-stage.rm-t .dr-obj.chest.locked{color:#6a5a5a}
.dr-stage.rm-t .dr-obj.plate{border-color:rgba(190,215,255,.7);color:#bcd2ff;background:rgba(120,160,255,.10);box-shadow:0 0 14px rgba(150,190,255,.4),inset 0 0 8px rgba(0,0,0,.7)}
.dr-stage.rm-t .dr-obj.plate.lit{color:var(--green);border-color:var(--green);background:rgba(var(--g),.18);box-shadow:0 0 16px rgba(var(--g),.6)}
.dr-obj.plate.on{border-color:#ffd36a!important;box-shadow:0 0 16px rgba(255,200,90,.85),inset 0 0 10px rgba(255,200,90,.3)!important;color:#ffe29a!important}
.dr-obj.plate.pon{border-color:#7fc8ff!important;box-shadow:0 0 16px rgba(127,200,255,.85),inset 0 0 10px rgba(127,200,255,.3)!important;color:#bfe3ff!important}
.dr-obj.plate.on.pon{border-color:#fff!important;box-shadow:0 0 20px rgba(255,255,255,.9)!important}
.dr-stage.rv0 .dr-grid,.dr-stage.rv0 .dr-objs,.dr-stage.rv0 .dr-spikes{opacity:0}
.dr-stage.rm-t.rv1 .dr-grid>.dr-cell:not(.pl),.dr-stage.rm-t.rv1 .dr-objs>.dr-obj:not(.plate),.dr-stage.rm-t.rv1 .dr-spikes{opacity:0}
.dr-stage.rm-t:not(.rv2) .hx-layer{opacity:0}
.dr-stage.rm-t.rv1 .dr-cell.pl,.dr-stage.rm-t.rv2 .dr-cell.pl{background:rgba(190,30,36,.5);border-color:rgba(255,120,110,.55);box-shadow:inset 0 0 14px rgba(255,60,50,.55);animation:rmPlIn .9s ease both;animation-delay:var(--d,0ms)}
@keyframes rmPlIn{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
.dr-spikes{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;pointer-events:none}
.dr-spk{position:absolute;background:linear-gradient(#d7d9e6,#4b4e63);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.7,.4,1);transition-delay:calc(var(--i) * 22ms)}
.dr-spk.d{clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0}.dr-spk.u{clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 100%}
.dr-spk.r{clip-path:polygon(0 0,100% 50%,0 100%);transform-origin:0 50%}.dr-spk.l{clip-path:polygon(100% 0,0 50%,100% 100%);transform-origin:100% 50%}
.dr-stage.rv2 .dr-spk{transform:scale(1)}
.dr-trapban{position:absolute;left:0;right:0;top:36%;z-index:6;text-align:center;font-size:clamp(18px,3.4vmin,34px);letter-spacing:.34em;color:#ff4a3a;text-shadow:0 0 18px rgba(255,40,30,.8),0 2px 0 #000;pointer-events:none;animation:rmBan 2.2s ease both}
@keyframes rmBan{0%{opacity:0;transform:scale(1.8);filter:blur(4px)}16%{opacity:1;transform:scale(.96);filter:none}30%{transform:scale(1.04)}42%{transform:none}78%{opacity:1}100%{opacity:0}}
.dg-title.trap{color:#ff6a5a;text-shadow:0 0 14px rgba(255,50,40,.55)}
.dr-plst{margin:0;flex:0 0 auto;height:16px;font-size:11px;line-height:16px;color:var(--white);text-align:center;white-space:nowrap}
.dr-plst.off{visibility:hidden}
.hx-av.rm-hurt{animation:rmHurt .6s ease-out 1}
@keyframes rmHurt{0%{color:#ff2a1a;filter:drop-shadow(0 0 9px #ff2a1a)}55%{color:#ff2a1a;filter:drop-shadow(0 0 11px #ff2a1a)}100%{color:var(--white);filter:none}}
.dr-insc{min-height:34px}
@media (prefers-reduced-motion:reduce){.dg-light .gl,.dg-light .pool,.scene.rm-trap .dg-light .vig,.dr-trapban,.hx-av.rm-hurt,.dr-stage.rm-t.rv1 .dr-cell.pl,.dr-stage.rm-t.rv2 .dr-cell.pl{animation:none}.dr-spk{transition:none}}

/* ===== Duo dungeon patch (Oct 8): square-select cinematic, victory cutscene, encounter stages, Duo Special, Block, stun, small chat button ===== */
.co-sel{position:absolute;inset:0;z-index:30;pointer-events:all}
.co-sel .cs-shade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 1s ease}
.co-sel.on .cs-shade{opacity:.94}
.co-sel.end .cs-shade{opacity:1;transition:opacity .7s ease}
.co-sel .cs-clone{position:absolute;margin:0;z-index:2;pointer-events:none;box-shadow:0 0 18px rgba(255,255,255,.22);transition:opacity .7s ease;transform:none!important}
.co-sel .cs-clone.cs-pick{box-shadow:0 0 28px rgba(255,214,140,.55);animation:csPulse 1.8s ease-in-out infinite alternate}
.co-sel.end .cs-clone{opacity:0!important}
@keyframes csPulse{to{box-shadow:0 0 40px rgba(255,214,140,.85)}}
.co-sel .cs-msg{position:absolute;left:0;right:0;top:10%;z-index:3;margin:0;padding:0 16px;text-align:center;font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);opacity:0;transform:translateY(-6px);transition:opacity 1.2s ease,transform 1.2s ease}
.co-sel .cs-msg.in{opacity:1;transform:none}
.co-sel .cs-ans{position:absolute;left:0;right:0;top:17%;z-index:3;margin:0 auto;max-width:82%;text-align:center;font-size:30px;letter-spacing:.12em;color:#e8e2d6;opacity:0;filter:blur(22px) brightness(.25);transform:scale(1.12);transition:opacity 2.8s ease,filter 3s cubic-bezier(.2,.7,.2,1),transform 3s ease;text-shadow:0 0 22px rgba(0,0,0,.9)}
.co-sel .cs-ans.in{opacity:1;filter:blur(0) brightness(1);transform:none}
.co-sel.late{cursor:var(--cur-a,pointer)}
.co-vic{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:300px;overflow:hidden;animation:fadein .6s ease both}
.co-vic .cv-rays{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,214,110,0) 0 7deg,rgba(255,214,110,.3) 7deg 11deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 66%);mask:radial-gradient(circle,#000 0,transparent 66%);animation:cvSpin 16s linear infinite,cvRays 1.6s ease-out both}
.co-vic .cv-ring{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:2px solid rgba(255,226,150,.9);box-shadow:0 0 30px rgba(255,190,70,.8);animation:cvRing 1.8s ease-out .2s both}
.co-vic h1{position:relative;z-index:1;margin:0;font-size:44px;letter-spacing:.3em;padding-left:.3em;color:#ffe8a8;text-shadow:0 0 18px rgba(255,190,70,.9),0 0 46px rgba(255,150,40,.6);animation:cvTitle 2.2s cubic-bezier(.2,1.2,.3,1) .3s both}
.co-vic .cv-sub{position:relative;z-index:1;margin:0;color:var(--dim);letter-spacing:.14em;font-size:12px;animation:fadein 1.4s 1.1s both}
@keyframes cvSpin{to{transform:rotate(360deg)}}
@keyframes cvRays{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes cvRing{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(9)}}
@keyframes cvTitle{0%{opacity:0;transform:scale(1.8);filter:blur(14px)}45%{opacity:1;transform:scale(.97);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
.cb-result.co-vic-in{animation:fadein .9s ease both}
.co-enc.co-stage{background:#030305;gap:16px;animation:fadein .5s ease both;transition:opacity .9s ease}
.co-enc.co-stage.out{opacity:0;pointer-events:none}
.co-stage .stage-pic,.co-stage .dots{transition:opacity .45s ease}
.co-stage.swap .stage-pic,.co-stage.swap .dots{opacity:0}
.co-stage .enc-wrap{position:absolute}
.cb-acts .duo-sp{position:absolute;right:6px;top:-20px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 14px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;color:#14100a;background:linear-gradient(#fff4c8,#ffc94a);border:1px solid #fff;border-radius:99px;box-shadow:0 0 14px rgba(255,200,80,.8);cursor:var(--cur-a,pointer);animation:duoReady .8s ease-in-out infinite alternate}
.cb-acts .duo-sp svg{stroke:#14100a}
@keyframes duoReady{to{box-shadow:0 0 26px rgba(255,235,160,1);transform:scale(1.05)}}
.cb-list.duo .cb-li .cb-lc{white-space:nowrap}
.cb-acts button.need-guard{border-color:#8fb4ff!important;animation:needGuard .7s ease-in-out infinite alternate}
@keyframes needGuard{to{box-shadow:0 0 18px rgba(143,180,255,.9)}}
.co-hero.stun{border-color:#ffd24a;box-shadow:0 0 16px rgba(255,210,74,.45)}
.co-warn.blk{color:#8fc4ff}
.co-duoflash{position:absolute;inset:0;z-index:25;pointer-events:none;display:flex;align-items:center;justify-content:center;animation:duoFlash 1.6s ease-out forwards}
.co-duoflash .cdf-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,244,200,.95) 0,rgba(255,200,80,.55) 30%,rgba(77,163,255,.25) 60%,transparent 80%)}
.co-duoflash .cdf-t{position:relative;margin:0;text-align:center;font-size:30px;font-weight:700;letter-spacing:.2em;color:#fff;text-shadow:0 0 14px #ffc94a,0 0 34px rgba(255,190,70,.9);animation:cvTitle 1.4s cubic-bezier(.2,1.2,.3,1) both}
.co-duoflash .cdf-t small{display:block;font-size:11px;letter-spacing:.4em;margin-bottom:6px;color:#ffe8a8}
@keyframes duoFlash{0%{opacity:0}12%{opacity:1}60%{opacity:1}100%{opacity:0}}
.cc-wrap{position:absolute;right:14px;bottom:14px;z-index:12;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.cc-wrap>*{pointer-events:auto}
.cc-btn{position:relative;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(var(--sh),.55);border:1px solid var(--line2);border-radius:0;color:var(--dim);cursor:var(--cur-a,pointer)}
.cc-btn:hover,.cc-wrap.open .cc-btn{color:var(--green);border-color:var(--green)}
.cc-btn .cc-dot{position:absolute;right:-3px;top:-3px}
.cc-pop{display:none;width:min(320px,calc(100vw - 28px))}
.cc-wrap.open .cc-pop{display:block}
.cc-pop .sc-chat{background:rgba(6,5,10,.92)}
/* dungeon flow: the dungeon fades in after its title card; the skull stage over black before "You encountered" */
.scene.work.dgstage{z-index:310;background:#000;animation:fadein .5s ease both}
.scene.dungeon .cb-bg{transition:opacity 1.2s ease}
.scene.dungeon.dgfade>*:not(.cb-bg):not(.cb-fog){animation:fadein 1.2s ease both}
@media (prefers-reduced-motion:reduce){.scene.dungeon.dgfade>*{animation:none}}
.co-map .ca-scene p.ca-l{font-size:12px;text-align:left;line-height:1.55;letter-spacing:0;text-transform:none}
.co-map .ca-scene p.ca-bless,.co-map .ca-scene p.ca-hint,.co-map .ca-scene p.ca-wait,.co-map .ca-scene p.ca-clue,.co-map .ca-scene .ca-evt{letter-spacing:0}
.ca-chat{height:30px;flex:none}
.ca-chat .cc-wrap{right:0;top:4px;bottom:auto;align-items:flex-end}
.co-map .ca-scene p.ca-clue{font-size:12px;line-height:1.55}.co-map .ca-scene p.ca-hint,.co-map .ca-scene p.ca-wait{font-size:10px;line-height:1.4}.co-map .ca-scene p.ca-bless{font-size:11px}
.co-map .ca-scene .ca-evt{font-size:12px;text-align:center}.co-map .ca-scene .ca-opt{font-size:11px}
.dr-head .dg-title.trap,.co-title.trap{color:#ff5a4a!important;text-shadow:0 0 14px rgba(255,50,40,.6)!important}
.dr-msg{max-width:min(94vw,900px)}
.co-sel .cs-msg,.co-sel .cs-ans{width:auto!important;max-width:none!important;box-sizing:border-box}
.co-sel .cs-ans{left:9%;right:9%}
.dr-msg{height:44px;min-height:44px;line-height:1.35}
.scene.coop .dr-insc{font-size:11px;line-height:1.35;max-width:min(94vw,640px)}
.cb-acts button.duo-sp{position:absolute!important;right:6px!important;top:-20px!important;width:auto!important;flex:none!important;min-height:0!important;height:28px!important;padding:0 14px!important;line-height:26px;border-radius:99px!important;color:#14100a!important;background:linear-gradient(#fff4c8,#ffc94a)!important;border:1px solid #fff!important;display:inline-flex!important;align-items:center;gap:6px;font-size:11px!important;letter-spacing:.16em}
.cb-acts button.duo-sp svg{stroke:#14100a!important;color:#14100a!important}
.scene.coop:has(.co-sel,.co-stage) .cc-wrap{opacity:0;pointer-events:none}
.cb-list.duo{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cb-footwrap>.cb-list.duo .cb-ln,.cb-list.duo .cb-ln{overflow:visible;text-overflow:clip;white-space:nowrap}
/* BLOCK: the partner's version of PARRY! (blue and white, same pulse), shown even while the other buttons wait */
.cb-stack>.cb .cb-acts button.blockbtn,.cb-acts button.blockbtn{position:absolute!important;left:6px!important;top:-20px!important;z-index:3;width:auto!important;flex:none!important;min-height:0!important;height:32px!important;padding:0 20px!important;line-height:30px;display:inline-flex!important;align-items:center;font-size:15px!important;font-weight:700;letter-spacing:.18em;color:#fff!important;background:linear-gradient(#5aa9ff,#1f5fd6)!important;border:1px solid #fff!important;border-radius:99px!important;box-shadow:0 0 12px #4da3ff,0 0 28px rgba(77,163,255,.85)!important;opacity:1!important;filter:none!important;cursor:var(--cur-a,pointer)!important;animation:parryPulseB .38s ease-in-out infinite alternate!important}
@media (prefers-reduced-motion:reduce){.cb-acts button.blockbtn{animation:none!important}}
.co-hero.stun em,.co-hero.guard em{top:9px;right:70px;bottom:auto}

/* the heroes on the dungeon grid: your character model (both models in a duo) stands on the middle square, faces the way you moved and walks to the square you click */
.dg-hero{position:absolute;left:7%;top:7%;z-index:4;display:flex;align-items:flex-end;justify-content:center;width:86%;height:86%;color:var(--white);pointer-events:none}
.dg-hero.duo{left:-25%;width:150%}
.dg-cell:has(>.dg-hero)>:not(.dg-hero){opacity:0}
.dg-hv{display:block;flex:1 1 0;min-width:0;height:100%}
.dg-hero.duo .dg-hv{margin:0 -9%}
.dg-hv svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 4px rgba(var(--g),.65))}
.dg-hero.walk .dg-hv{animation:dgStep 260ms ease-in-out infinite;transform-origin:50% 100%}
.dg-hero.walk .dg-hv:nth-child(2){animation-delay:-130ms}
@keyframes dgStep{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12%) rotate(3deg)}}
.dg-cell:has(>.dg-hero){opacity:1!important;z-index:3;overflow:visible;position:relative}
.dg-grid.centered .dg-cell.s2:has(>.dg-hero),.co-grid.centered .dg-cell.s2:has(>.dg-hero){opacity:1;background:rgba(var(--g),.24);border-color:var(--green);box-shadow:0 0 18px 3px rgba(var(--g),.55)!important}
@media (prefers-reduced-motion:reduce){.dg-hero.walk .dg-hv{animation:none}}

/* ===== Stats box: Expand button, stacked Mastery titles, compact Elemental Mastery tab (Oct 8 patch) ===== */
.so-jfoot{position:static!important;flex:none;margin:0!important}
.so-jfoot .qj-btn{width:100%;height:20px}
.so-jfoot .qj-btn{background:linear-gradient(rgba(var(--sh),.25),rgba(var(--sh),.25)),var(--panel-bot)}   /* solid, so the Quest Journal button underneath never shows through */
.st-over:has(>.so-jfoot){padding-bottom:14px}
.stats .stats-head h2.stk{display:flex;flex-direction:column;justify-content:center;line-height:11px!important;letter-spacing:.12em}
.stats .stats-head h2.stk span{display:block}
.spellsv .em-page.compact{display:flex;flex-direction:column;gap:6px;padding:2px 0 6px;min-width:0}
.em-eltog{display:flex;gap:6px;width:100%;flex-wrap:nowrap}
.em-el{flex:1 1 0;min-width:0;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:rgba(var(--sh),.25);border:1px solid var(--line);border-radius:6px;color:var(--dim);font:inherit;cursor:var(--cur-a,pointer)}
.em-el.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.12)}
.spellsv .em-page.compact .em-runes{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:9px;line-height:1.3}
.spellsv .em-page.compact .em-rl{width:100%;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}
.spellsv .em-page.compact .em-rune{display:inline-flex;align-items:center;gap:2px;font-style:normal}.spellsv .em-page.compact .em-rune em{display:none}
.spellsv .em-page.compact .em-tabs{margin:0;gap:4px}
.spellsv .em-page.compact .em-tab{padding:4px 2px;gap:3px;font-size:9px}.spellsv .em-page.compact .em-tab span{display:none}
.spellsv .em-page.compact .tt-body{flex-direction:column;gap:8px;align-items:stretch}
.spellsv .em-page.compact .tt-info{flex:none;padding:7px 8px}
.spellsv .em-page.compact .tt-row{gap:7px}
.spellsv .em-page.compact .tt-tile{width:34px;height:34px}
.spellsv .em-page.compact .tt-gap{height:16px}.spellsv .em-page.compact .tt-tile::before,.spellsv .em-page.compact .tt-tile::after{height:8px}
.spellsv .em-page.compact .em-sec{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:4px 0 2px;text-align:center}
.spellsv .em-page.compact .em-ult{font-size:10px;width:100%}.spellsv .em-page.compact .em-note{font-size:10px;color:var(--dim);margin:2px 0 6px}
.spellsv .em-page.compact .em-slots{display:flex;flex-direction:column;gap:2px}.spellsv .em-page.compact .em-slot{display:flex;align-items:center;gap:5px;color:var(--dim)}.spellsv .em-page.compact .em-slot.on{color:var(--green)}
.spellsv .em-page.compact .em-btns{display:flex;gap:6px;flex-wrap:wrap}

/* House: compact side menu, the Planning Table section under the room, darker floor and contrast shadows (Oct 8 patch) */
.hx-side .hx-gl,.hw-set .hx-gl{display:none}
.hx-side .hx-tabs,.hw-set .hx-tabs{gap:5px}
.hx-side .hx-grp,.hw-set .hx-grp{gap:0}
.hx-side .hx-gr .hx-tab,.hw-set .hx-gr .hx-tab{padding:3px 2px;font-size:10px}
.hx-side,.hw-set{gap:6px}
.hx-side .hx-enter-big{width:44px;height:36px}
.hx-side .hx-enter-big svg{width:26px;height:26px}
.hx-side .hx-sgrid .slot{aspect-ratio:1/.82}
.hx-side .hx-sgrid{max-height:none}
.hx-side .pf-label{font-size:10px}
.hx-main{gap:6px}
.pt-box{display:flex;flex-direction:column;gap:5px;padding:7px 8px;border:1px solid var(--line2);background:rgba(var(--sh),.22);min-width:0}
.pt-head{display:flex;align-items:center;gap:6px;color:var(--white);font-size:11px;letter-spacing:.04em}
.pt-head b{font-weight:500;flex:1 1 auto}.pt-head .pt-n{font-size:10px}
.pt-row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.pt-box .pt-slots{grid-template-columns:repeat(5,30px);gap:4px}
.pt-box .pt-slots .slot{width:30px;height:30px;aspect-ratio:auto}
.pt-sheet{padding:3px 6px;font-size:10px;white-space:nowrap}
.pt-lab{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.pt-pack{max-height:50px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;grid-template-columns:repeat(8,minmax(0,1fr))}
.pt-pack .slot{aspect-ratio:1}
.pt-box .hx-none{margin:0}
/* contrast: a soft dark shadow under every piece of furniture and every character */
.hx-cell .ico,.hx-cell>svg,.hx-carry svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(0,0,0,.6))}
.hx-av svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(0,0,0,.55))}
.hx-av .hx-sv::before{content:"";position:absolute;left:14%;right:14%;bottom:-1%;height:16%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,0) 70%);z-index:-1}
.stats .stats-head h2.stk{font-size:9px!important;letter-spacing:.03em!important;min-width:0}
.spellsv .em-page.compact .em-ult,.spellsv .em-page.compact .em-q,.spellsv .em-page.compact .em-opts{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:3px;min-width:0}
.spellsv .em-page.compact .em-ult .em-sec{text-align:left}
.spellsv .em-page.compact .em-sn,.spellsv .em-page.compact .em-qt{white-space:normal;overflow-wrap:anywhere}
.spellsv .em-page.compact .tt-grid,.spellsv .em-page.compact .tt-info{min-width:0;width:100%;box-sizing:border-box}
.spellsv .em-page.compact .tt-itop,.spellsv .em-page.compact .tt-istat,.spellsv .em-page.compact .tt-itext{display:block}
.spellsv .em-page.compact .tt-itop{display:flex}
/* House: the whole menu fits the content window; long lists scroll inside their own box */
.place-panel:has(>.house>.hx){display:flex;flex-direction:column;overflow:hidden}
.place-panel:has(>.house>.hx)>.house{flex:1 1 auto;min-height:0}
.house>.hx{height:100%;min-height:0}
.house .hx-main{min-height:0;flex:0 0 auto}
.house .hx-side{max-height:none;min-height:0;overflow-y:auto}
.hx-side>.hx-sgrid{flex:1 1 0;min-height:44px;overflow-y:auto;align-content:start;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.hx-side>.sd-rows,.hx-side>.hb-box{flex:0 1 auto;min-height:0}
.hx-side .sd-rows{overflow-y:auto;min-height:56px;flex:1 1 0}
.hx-side>*{flex-shrink:0}
.hx-side>.hx-sgrid,.hx-side>.sd-rows{flex-shrink:1}
.stats .stats-head h2.stk{font-size:8px!important;letter-spacing:.01em!important}

/* ===== v0.03a: more palettes (Legend, Crimson, Amethyst, Dune, Terminal, Rose) ===== */
/* Legend: inspired by the old Legend of the Green Dragon look: black page, dark forest-green panels, bright green headers and links */
:root[data-theme="legend"]{
  --white:#d4e6d0;--green:#22d822;--green2:#6df06d;--dim:#7fa67f;--g:34,216,34;
  --line:#1f6a1f;--line2:#134413;--danger:#e8c04a;
  --body-bg:#000;--bg-top:#030c03;--bg-mid:#010601;--bg-bot:#000;--bg-glow:rgba(20,120,20,.10);
  --wave-a:#041204;--wave-b:#000;
  --panel-top:#0c3a0c;--panel-bot:#082c08;--field-bg:#041a04;
  --track:#5a1a1a;--bar-hp:#22b822;--bar-mp:#3fb8d8;--bar-en:#d8c040;
  --value:#e6f2e0;--place:var(--green);--on-accent:#021002;
  --cmb:#e8c04a;--glo:#4fd8d8;--glo2:#9ff0f0;--ok:#22d822;--bad:#e05a4a;--warn:#e8c04a;
  --scroll:#134413;--scroll-hover:#1f6a1f;--sh:0,8,0;--hi:200,255,200;--xp-col:#b9a3e3;--q-col:#4fd8d8;
}
/* Crimson: blood red and bone */
:root[data-theme="crimson"]{
  --white:#f3e6e6;--green:#ff6b6b;--green2:#ff9a9a;--dim:#b49494;--g:255,107,107;
  --line:rgba(255,107,107,.28);--line2:rgba(255,220,220,.09);--danger:#ffb14a;
  --body-bg:#0e0305;--bg-top:#3a0a12;--bg-mid:#240810;--bg-bot:#0c0204;--bg-glow:rgba(200,30,50,.24);
  --wave-a:#34101a;--wave-b:#1c070c;
  --panel-top:rgba(52,14,22,.9);--panel-bot:rgba(32,9,14,.92);--field-bg:#1a0709;
  --track:#6a1f2a;--bar-hp:#e0455a;--bar-mp:#b07acb;--bar-en:#e6c15a;
  --value:var(--green);--place:var(--green);--on-accent:#240509;
  --cmb:#ffb14a;--glo:#d9a0a0;--glo2:#f3c9c9;--ok:#ff6b6b;--bad:#ff8a5b;--warn:#e6c15a;
  --scroll:#4d1a24;--scroll-hover:#6d2736;--sh:20,0,4;--hi:255,210,210;--xp-col:#d3a8ff;--q-col:#5fd4c8;
}
/* Amethyst: violet and lilac */
:root[data-theme="amethyst"]{
  --white:#f1eaff;--green:#c39bff;--green2:#dcc4ff;--dim:#a99cc4;--g:195,155,255;
  --line:rgba(195,155,255,.30);--line2:rgba(235,220,255,.10);--danger:#ffc27a;
  --body-bg:#0d0817;--bg-top:#2a1750;--bg-mid:#1a0f33;--bg-bot:#0a0614;--bg-glow:rgba(140,80,230,.26);
  --wave-a:#251546;--wave-b:#150c2b;
  --panel-top:rgba(40,22,76,.9);--panel-bot:rgba(24,13,48,.92);--field-bg:#140a26;
  --track:#4e2060;--bar-hp:#b08aff;--bar-mp:#6fb0ff;--bar-en:#e6c15a;
  --value:var(--green);--place:var(--green);--on-accent:#190a30;
  --cmb:#ffc27a;--glo:#a8b8ff;--glo2:#cfd8ff;--ok:#8fe0b0;--bad:#f0709a;--warn:#e6c15a;
  --scroll:#35205f;--scroll-hover:#4a3080;--sh:8,0,20;--hi:240,225,255;--xp-col:#e6c4ff;--q-col:#7fe3d4;
}
/* Dune: warm sand and rust */
:root[data-theme="dune"]{
  --white:#f6ecd8;--green:#e0a45a;--green2:#f0c488;--dim:#bba98a;--g:224,164,90;
  --line:rgba(224,164,90,.30);--line2:rgba(255,235,200,.10);--danger:#e8794a;
  --body-bg:#1c140a;--bg-top:#4a3519;--bg-mid:#30220f;--bg-bot:#171007;--bg-glow:rgba(220,150,60,.22);
  --wave-a:#43301a;--wave-b:#2a1d0e;
  --panel-top:rgba(66,48,26,.9);--panel-bot:rgba(44,31,16,.92);--field-bg:#21170c;
  --track:#6a3a22;--bar-hp:#d4703a;--bar-mp:#7aa8b8;--bar-en:#e8c860;
  --value:var(--green);--place:var(--green);--on-accent:#2a1a08;
  --cmb:#e8794a;--glo:#a8b8a0;--glo2:#d0dcc8;--ok:#a8c46a;--bad:#d0583a;--warn:#e8c860;
  --scroll:#54401f;--scroll-hover:#745a2e;--sh:20,10,0;--hi:255,235,200;--xp-col:#d0a8ff;--q-col:#6fd0b8;
}
/* Terminal: black with amber text, like an old monitor */
:root[data-theme="terminal"]{
  --white:#ffd98a;--green:#ffb000;--green2:#ffcb4d;--dim:#a8802a;--g:255,176,0;
  --line:rgba(255,176,0,.30);--line2:rgba(255,176,0,.12);--danger:#ff7a3a;
  --body-bg:#050400;--bg-top:#0e0a00;--bg-mid:#080600;--bg-bot:#030200;--bg-glow:rgba(255,160,0,.07);
  --wave-a:#0c0800;--wave-b:#040300;
  --panel-top:rgba(20,14,0,.94);--panel-bot:rgba(12,8,0,.94);--field-bg:#0a0700;
  --track:#4a1a00;--bar-hp:#e08a00;--bar-mp:#c8a040;--bar-en:#ffd24d;
  --value:var(--green);--place:var(--green);--on-accent:#0a0600;
  --cmb:#ff7a3a;--glo:#d8b060;--glo2:#f0d090;--ok:#ffb000;--bad:#ff6a3a;--warn:#ffd24d;
  --scroll:#3a2800;--scroll-hover:#5a3e00;--sh:0,0,0;--hi:255,200,100;--xp-col:#d0a8ff;--q-col:#6fd0b8;
}
/* Rose: soft pink and plum */
:root[data-theme="rose"]{
  --white:#fbeef3;--green:#f48fb1;--green2:#f8b4cb;--dim:#c4a0b0;--g:244,143,177;
  --line:rgba(244,143,177,.30);--line2:rgba(255,225,238,.10);--danger:#ffc27a;
  --body-bg:#16080f;--bg-top:#4a1a33;--bg-mid:#2e1020;--bg-bot:#12060b;--bg-glow:rgba(230,90,150,.24);
  --wave-a:#40162d;--wave-b:#240c18;
  --panel-top:rgba(66,26,48,.9);--panel-bot:rgba(42,16,30,.92);--field-bg:#220d17;
  --track:#6a2442;--bar-hp:#e0608a;--bar-mp:#8aa8e8;--bar-en:#e8c870;
  --value:var(--green);--place:var(--green);--on-accent:#2a0c1c;
  --cmb:#ffc27a;--glo:#d0a8c8;--glo2:#ecd0e4;--ok:#8fd8b0;--bad:#f06a7a;--warn:#e8c870;
  --scroll:#552440;--scroll-hover:#7a3659;--sh:20,0,10;--hi:255,225,238;--xp-col:#e6c4ff;--q-col:#7fe3d4;
}

/* v0.03a: compact palette and cursor menu (small swatches in a grid) */
.pal-menu:not(.snd-menu){width:216px;padding:6px}
.pal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.pal-sw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:5px 2px 4px;background:none;border:1px solid transparent;border-radius:6px;color:var(--white);font:inherit;font-size:9px;letter-spacing:.03em;cursor:var(--cur-a,pointer)}
.pal-sw:hover{border-color:var(--line)}.pal-sw.on{border-color:var(--green);color:var(--green)}
.pal-sw .pal-dots{grid-row:auto;justify-content:center;padding-right:4px}.pal-sw .pal-dots i{width:11px;height:11px;margin-right:-4px}
.pal-sw .pal-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-sw .pal-cur{grid-row:auto;width:22px;height:22px;font-size:8px;color:var(--dim)}.pal-sw .pal-cur img{width:20px;height:20px}

/* ===== v0.03a: the custom pointer everywhere. Anything that hard-codes help/default/pointer/not-allowed gets the chosen pointer instead. ===== */
html.cur-custom .cb-sym,html.cur-custom .cb-foe,html.cur-custom .fx-none,html.cur-custom .cb-sym *,html.cur-custom .fx-none *,html.cur-custom .tt,html.cur-custom .tier-tip,html.cur-custom .scene{cursor:var(--cur-n)}
html.cur-custom .stats .stat-btn,html.cur-custom .hx-cell.void,html.cur-custom .li-out,html.cur-custom .dr-obj.plate,html.cur-custom .dr-obj.mg-target.used,html.cur-custom .dr-obj.mg-decor,html.cur-custom .sd-c,html.cur-custom .slot.gear-lock.click,html.cur-custom .tr-chip:disabled,html.cur-custom .mk-p:disabled,html.cur-custom .st-nav:disabled,html.cur-custom .cb-li:disabled,html.cur-custom .hx-enter-big:disabled{cursor:var(--cur-n)}
html.cur-custom .at2-loc,html.cur-custom .bl-main,html.cur-custom .hx-enter-big:not(:disabled),html.cur-custom .fs-rec{cursor:var(--cur-a)}
html.cur-custom .cal-tab,html.cur-custom .cc-pet{cursor:var(--cur-a)}

/* ===== v0.03a: parry words, encounter cutscene glow, darker dungeons with strong torch glow, victory fade-in lock, dungeon RPG font ===== */
/* Encounter cutscene: dark backdrop, bigger title with a dark halo, and a rarity glow behind the whole creature box */
.scene.combat.enc{background:#050407}
.scene.combat.enc .cb-bg,.scene.combat.enc .cb-fog{opacity:.14!important}
.enc-title{position:relative;font-size:20px;letter-spacing:.3em;color:var(--white);text-shadow:0 0 6px #000,0 0 14px #000,0 0 30px #000,0 0 54px #000}
.enc-title::before{content:"";position:absolute;left:-60px;right:-60px;top:-26px;bottom:-26px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.6) 55%,transparent);filter:blur(8px)}
.enc-title.new{font-size:26px;text-shadow:0 0 8px rgba(var(--g),.6),0 0 14px #000,0 0 30px #000,0 0 54px #000}
@media(max-width:600px){.enc-title{font-size:15px;letter-spacing:.22em}.enc-title.new{font-size:19px}}
.enc-card{--rg:200,200,205;position:relative;border-color:rgba(var(--rg),.8);background:rgba(8,5,6,.97);box-shadow:0 0 22px rgba(var(--rg),.4),0 0 60px rgba(var(--rg),.28),0 0 120px rgba(var(--rg),.16)}
.enc-card::before{content:"";position:absolute;inset:-46px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--rg),.34),rgba(var(--rg),.12) 60%,transparent);pointer-events:none}
.enc-card.rar-common{--rg:205,205,212}
.enc-card.rar-uncommon{--rg:70,220,110}
.enc-card.rar-elite{--rg:120,110,255}
.enc-card.rar-boss{--rg:255,110,36}
.enc-card.rar-boss{animation:encBoss 1.8s ease-in-out infinite alternate}
@keyframes encBoss{from{box-shadow:0 0 22px rgba(var(--rg),.45),0 0 60px rgba(255,60,30,.3),0 0 120px rgba(var(--rg),.16)}to{box-shadow:0 0 30px rgba(var(--rg),.7),0 0 80px rgba(255,60,30,.5),0 0 150px rgba(var(--rg),.28)}}
@media(prefers-reduced-motion:reduce){.enc-card.rar-boss{animation:none}}
.co-enc.co-stage{background:#030305}
/* Failed parry: the big word over the fight says why ("TOO SLOW!" / "TOO QUICK!") */
.parry-banner.fail{letter-spacing:.12em}
/* Dungeons: darker rooms, much stronger glow around the torches */
.scene.dungeon:not(.rm-bright):not(.rm-trap) .cb-bg{filter:brightness(.6) saturate(.92)}
.scene .dg-light .gl{background:radial-gradient(closest-side,rgba(var(--tc),.74),rgba(var(--tc2),.34) 46%,rgba(var(--tc2),.1) 68%,transparent 84%);mix-blend-mode:screen}
.scene .dg-light .gl.l,.scene .dg-light .gl.r{--s:78vmin}
.scene .dg-light .gl.l2,.scene .dg-light .gl.r2{--s:46vmin}
.scene .dg-light .pool{background:radial-gradient(closest-side,rgba(var(--tc),.2),transparent 72%)}
.scene .dg-light .vig{background:radial-gradient(ellipse at 50% 46%,transparent 26%,rgba(2,1,4,.6) 68%,rgba(2,1,4,.92) 100%)}
.scene.rm-bright .dg-light .gl,.scene.rm-trap .dg-light .gl{mix-blend-mode:normal}
/* VICTORY / DEFEAT card: nothing can be hovered or clicked until the whole card has faded in */
.cb-result:not(.rdy){pointer-events:none}
.cb-result:not(.rdy) *{pointer-events:none!important}
/* Dungeon RPG font: only the big battle line and monster names in the combat and duo combat screens. Drop the latin .woff2 at public/fonts/dungeon-rpg.woff2; if it is missing the normal font is used. */
@font-face{font-family:"DungeonRPG";src:url("/fonts/dungeon-rpg.woff2") format("woff2"),url("/fonts/dungeon-rpg.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
.cb-now,.cb-now span,.cb-foe .cb-name b{font-family:"DungeonRPG","IBM Plex Mono",monospace}
.cb-now{letter-spacing:.03em}

/* ===== Title screen intro: title fades in, then the parchment scroll button ===== */
.land{position:relative;overflow:hidden}
.land .lg-late{opacity:0}
.land .land-sub,.land .scroll-btn{opacity:0}
.land .tl{opacity:0}
.land.run .lg-late{animation:lgin .8s ease-out 800ms both}
.land.run .tl{animation:lgin 1s ease-out 700ms both}
.land.run .land-sub{animation:lgin 1s ease-out 1700ms both}
.land.run.ready .scroll-btn{opacity:1}.land.run:not(.ready) .scroll-btn{visibility:hidden}
.land.done .lg-late,.land.done .tl,.land.done .land-sub,.land.done .scroll-btn{opacity:1;animation:none}
.land .land-title{margin:0 0 4px;text-align:center;font-size:clamp(18px,5.4vw,30px);white-space:nowrap}
.land .land-sub{margin:0 0 22px}
.land .lg-late{margin-bottom:12px}
.scroll-btn{display:block;background:none;border:0;padding:0;margin:0 auto;cursor:var(--cur-a,pointer);line-height:0;transition:filter .12s}
.scroll-btn:hover{filter:brightness(.8)}.scroll-btn:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.scroll-cv{image-rendering:pixelated;display:block}
@keyframes lgin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.land .lg-late,.land .tl,.land .land-sub,.land .scroll-btn{animation:none!important;opacity:1}.land.run:not(.ready) .scroll-btn{visibility:visible}}

/* ===== v0.03a: Light mode with black outlines and black text, plus red, blue and green accents ===== */
:root[data-theme="light"]{
  --white:#000;--dim:#33383f;--line:rgba(0,0,0,.8);--line2:rgba(0,0,0,.45);
  --value:#1a4fb0;--place:#b3261e;--cmb:#b3261e;--glo:#1a4fb0;--glo2:#123a85;--bad:#c0281e;--ok:#1b7a3a;--danger:#b3261e;
  --green:#157a38;--green2:#0f5e2a;--scroll:#6b7480;--scroll-hover:#3d444d;--xp-col:#1a4fb0;--q-col:#b3261e;
}
:root[data-theme="light"] .pal-sw.on,:root[data-theme="light"] .pal-opt.on{border-color:#000}

/* ===== v0.03a: Race / Element / Pet popup in the Stats box (floats, never resizes the HUD) and the Chronicle button glow ===== */
.kin-pop{position:fixed;z-index:400;width:250px;max-height:calc(100vh / var(--zoom, 1) - 24px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:9px 10px;box-shadow:0 10px 28px rgba(var(--sh),.5);font-size:10px;line-height:1.45;color:var(--white);text-align:left}
.kin-pop .kp-title{display:block;font-weight:500;color:var(--green);letter-spacing:.05em;margin-bottom:5px}.kin-pop .kp-sub{margin:0 0 5px;color:var(--dim)}
.kp-list{display:flex;flex-direction:column;gap:5px}.kp-row{display:flex;gap:7px;align-items:flex-start;padding:3px 4px;border:1px solid transparent;border-radius:5px}.kp-row.me{border-color:var(--line)}
.kp-ic{flex:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--green);margin-top:1px}
.kp-tx{display:flex;flex-direction:column;min-width:0}.kp-tx b{font-weight:500;color:var(--green2,var(--green))}.kp-tx span{color:var(--dim)}
.kp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line2);color:var(--dim)}
.kp-chron{flex:none;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--sh),.25);border:1px solid var(--line);border-radius:5px;color:var(--green);cursor:var(--cur-a,pointer)}.kp-chron:hover{border-color:var(--green)}
.tool.chron-glow{animation:softglow 1.4s ease-in-out infinite;border-color:var(--green)}
.stats .kin .kin-chip.click{cursor:var(--cur-a,pointer)}

/* ---- Monster pixel art (monsters.js, v0.03a): crisp pixel canvases, thick black outline is part of the sprite ---- */
.mv .mv-cv{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%;flex:none}
.mv.sil .mv-cv{filter:brightness(0) invert(1) opacity(.2)}
:root[data-theme="light"] .mv.sil .mv-cv{filter:brightness(0) opacity(.2)}
.bs-tile .mv{height:72px}
.mv.thumb{align-items:center}


/* ---------- pixel-art heroes (0.03a): sprite sheets from sprites.js, 16 x 20 logical pixels, crisp ---------- */
.px-sp{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:300% 300%;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}
.hx-av{transition-timing-function:linear}
.hx-av .hx-sv{position:absolute;left:0;right:0;top:-25%;bottom:0;display:block}
.hx-av .hx-sv::before{left:18%;right:18%;bottom:3%;height:8%}
.hx-av .px-sp{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.hx-av.bump .hx-sv{animation:pxBump 200ms ease-in-out}
@keyframes pxBump{25%{transform:translateX(-6%)}75%{transform:translateX(6%)}}
.hx-nm{top:calc(-25% - 10px)}
.hv-pi,.sh-av{display:inline-flex;justify-content:center}
.hv-pi .px-sp,.sh-av .px-sp{width:auto;height:100%;aspect-ratio:16/21}
.dg-hv{display:flex;justify-content:center}
.dg-hv .px-sp{width:auto;height:100%;aspect-ratio:16/21;filter:drop-shadow(0 0 4px rgba(var(--g),.65))}
.dg-hero.walk .dg-hv{animation:none}
@media (prefers-reduced-motion:reduce){.hx-av.bump .hx-sv{animation:none}}
.create-head{position:relative}.cc-prev{position:absolute;right:0;top:-4px;width:44px;height:55px;display:block;cursor:var(--cur-a,pointer)}
.pd-fig.px{align-items:flex-start}.pd-fig.px .px-sp{width:auto;height:288px;aspect-ratio:16/21;margin-top:36px}

/* ---------- pixel-art houses (v0.03a): the room is drawn in the middle of black, with its own walls, windows and floor ---------- */
.hx-room.hp-room{background:#000;border-color:#1c1620;box-sizing:content-box}
.hx-stage.hp-stage{box-shadow:none;image-rendering:pixelated}
.hp-shell{position:absolute;max-width:none;image-rendering:pixelated;pointer-events:none;user-select:none;z-index:0}
.hp-stage .hx-grid{position:relative;z-index:1}
.hp-stage .hx-cell:not(.void),.hp-stage .slot.hx-cell:not(.void),.hv-scene .hp-stage .hx-cell:not(.void),.hv-scene .hp-stage .slot.hx-cell.full{box-shadow:inset 0 0 0 1px rgba(255,238,205,.05);overflow:visible}
.hp-stage .hx-cell:hover:not(.void),.hp-stage .slot.hx-cell:hover:not(.void),.hv-scene .hp-stage .hx-cell:hover:not(.void){box-shadow:inset 0 0 0 2px var(--green),0 0 10px rgba(var(--g),.45)}
.hp-stage .hx-cell.sel{outline:2px solid var(--green);outline-offset:-2px}
.hp-stage .hx-cell.hp-stair{cursor:default}
.hx-cell .hp-spr{position:absolute;left:0;bottom:0;display:block;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.hx-cell .hp-spr img{display:block;image-rendering:pixelated}
.hx-carry .hp-ico img,.hx-sgrid .hp-ico img{image-rendering:pixelated}
.hx-carry .hp-ico{filter:drop-shadow(0 5px 3px rgba(0,0,0,.5))}
.hx-floors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.hx-fl{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 7px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--dim);font:inherit;font-size:10px;white-space:nowrap}
.hx-fl.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.1)}
.hx-fl.buy{border-style:dashed}.hx-fl.buy span{color:#e8b860}.hx-fl:disabled{opacity:.45}
.hp-ico{display:inline-block;line-height:0}
.hx-cell{position:relative}
.hv-scene .hp-stage .hx-cell:not(.void),.hv-scene .hp-stage .slot.hx-cell.full{box-shadow:none}
.cc-prev{width:58px;height:72px;top:-8px}
.pd-fig.px{opacity:.62}

/* v0.03a: Main Story chapter arrows sit together, crisp and centered */
.st-navs{display:inline-flex;gap:4px;flex:none}
.st-nav{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;line-height:1;font-size:0}
.st-nav .st-arr{display:flex;align-items:center;justify-content:center;pointer-events:none}

/* v0.03a: the masters button sits in the place title bar */
.ap-btn{position:relative;display:inline-flex;align-items:center;gap:5px}
.ap-btn-txt{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.ap-btn.on{border-color:var(--green)}
.ap-dot{position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.ap-dot[hidden]{display:none}
.ap-btn-txt{display:none}

/* ===== Pixel world map inside the middle window (replaces the old full-screen overlay) ===== */
.place-panel.mapmode>.mapbook.wmbook{display:flex!important;flex-direction:row;gap:0;overflow:hidden;padding:0;container-type:inline-size;border:1px solid var(--line);border-radius:8px}
.wm-vp{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:#1d140d;touch-action:none;cursor:grab;outline:0;user-select:none}
.wm-vp.drag{cursor:grabbing}
.wm-world{position:absolute;left:0;top:0;width:320px;height:180px;transform-origin:0 0;will-change:transform;box-shadow:0 0 0 2px #000}
.wm-cv{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.wm-layer{position:absolute;inset:0;pointer-events:none}
.wm-spot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);padding:0;margin:0;background:transparent;border:0;border-radius:3px;cursor:var(--cur-a,pointer)}
.wm-spot:hover,.wm-spot:focus-visible,.wm-spot.pad-hover{filter:none!important;outline:0;background:rgba(246,231,180,.22);box-shadow:0 0 0 2px #f6e7b4,0 0 0 4px #2f8a45}
.wm-spot.sel{box-shadow:0 0 0 2px #f6e7b4,0 0 0 3px #3a2616;background:rgba(246,231,180,.16)}
.wm-spot.sel:hover,.wm-spot.sel:focus-visible,.wm-spot.sel.pad-hover{box-shadow:0 0 0 2px #f6e7b4,0 0 0 4px #2f8a45}
.wm-spot.here:not(:hover):not(.sel){animation:wmring 1.6s ease-in-out infinite}
.wm-here{position:absolute;z-index:3;transform:translate(-50%,-100%);pointer-events:none;animation:wmbob 1s ease-in-out infinite}
.wm-here i{position:relative;display:block;width:100%;height:100%;background:#3a2616;clip-path:polygon(0 0,100% 0,100% 45%,50% 100%,0 45%)}
.wm-here i::after{content:"";position:absolute;left:14%;right:14%;top:14%;bottom:25%;background:#e0402e;clip-path:polygon(0 0,100% 0,100% 40%,50% 100%,0 40%)}
.wm-tools{position:absolute;left:8px;top:8px;z-index:5;display:flex;gap:4px}
.wm-tb,.wm-x{height:26px;min-width:26px;padding:0 7px;font:600 13px/1 "IBM Plex Mono",monospace;background:rgba(var(--sh),.85);color:var(--green);border:1px solid var(--line);border-radius:5px;cursor:var(--cur-a,pointer)}
.wm-x{position:absolute;right:8px;top:8px;z-index:5;width:26px;padding:0;font-size:18px}
.wm-tb:hover,.wm-x:hover,.wm-tb.pad-hover,.wm-x.pad-hover{border-color:var(--green);background:rgba(var(--g),.18);filter:none}
.wm-panel{flex:0 0 clamp(190px,30%,250px);min-height:0;box-sizing:border-box;padding:10px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;border-left:1px solid var(--line);font-size:11px;line-height:1.5;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.wm-ph{display:flex;gap:9px;align-items:center;min-height:30px}
.wm-ph .ico{flex:none;color:var(--green)}
.wm-ph h3{margin:0;font-size:13px;font-weight:600;color:var(--white)}
.wm-ph span{color:var(--dim);font-size:10px}
.wm-fl{margin:0;font-style:italic;color:var(--dim)}
.wm-rows{display:flex;flex-direction:column;gap:4px}
.wm-kv{display:flex;justify-content:space-between;gap:8px;padding-bottom:3px;border-bottom:1px dotted var(--line2)}
.wm-kv span{color:var(--dim)}.wm-kv b{font-weight:500;text-align:right}.wm-kv b.bad{color:#e0604e}
.wm-foes{margin:2px 0 0;font-size:10px}.wm-foes.dim{color:var(--dim)}.wm-foes.chest{color:#e8b860}
.wm-go{margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px}
.wm-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line2);font-size:9.5px;color:var(--dim)}
@keyframes wmbob{0%,100%{margin-top:0}50%{margin-top:-4px}}
@keyframes wmring{0%,100%{box-shadow:0 0 0 2px rgba(224,64,46,.9)}50%{box-shadow:0 0 0 4px rgba(224,64,46,.35)}}
@container (max-width:560px){.place-panel.mapmode>.mapbook.wmbook{flex-direction:column}.wm-panel{flex:0 0 auto;max-height:38%;border-left:0;border-top:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.wm-here,.wm-spot.here{animation:none!important}}

/* ---- Oct 9 fix: the pet in the bottom-right pet box floats smoothly (one element, GPU transform, no 1px frame swaps; the phase survives redraws) ---- */
.pet-chip .pet-pic{animation:petfloat2 4.5s ease-in-out infinite;will-change:transform}
.pet-chip .pet-pic.none{animation:none;will-change:auto}
.pet-chip .pet-pic .pix-wrap,.pet-chip .pet-pic canvas{display:block}
@keyframes petfloat2{0%,100%{transform:translate3d(0,1px,0)}50%{transform:translate3d(0,-2px,0)}}
@media(prefers-reduced-motion:reduce){.pet-chip .pet-pic{animation:none}}

/* ---- Oct 9 fix: bank header order is the gold boxes (with Deposit / Withdraw) on top, then the row of Deposit stacks / Deposit all / Withdraw all / Sort / Slots & Tabs ---- */
.bank .bk-balance .bk-toolrow{margin:8px 0 0}
.bank .bk-balance .bk-toolrow .bk-tools{margin:0!important;position:static;flex:1 1 auto;align-self:center}
.bank .bk-balance .bk-labrow .bk-help{margin-left:auto!important}

/* Chronicle: four location groups (same as the Locations list) can be taller than the column, so the list scrolls inside its box */
.ch2-col.ch2-locs{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;flex-shrink:0}
.ch2-locs .pf-label{flex:none}

/* ---- Oct 9 fix: smooth pet idle. One sprite frame only, moved by an eased CSS transform (breathing bob), no layout shift ---- */
.pet-chip .pet-pic{animation:petfloat3 5.2s cubic-bezier(.45,0,.55,1) infinite;will-change:transform;transform-origin:50% 100%;backface-visibility:hidden}
.pet-chip .pet-pic.none{animation:none;will-change:auto}
.pet-chip .pet-pic .pix-wrap,.pet-chip .pet-pic canvas{display:block;transform:none!important}
@keyframes petfloat3{0%,100%{transform:translate3d(0,1px,0) scale(1,1)}50%{transform:translate3d(0,-2px,0) scale(1.015,1.03)}}
@media(prefers-reduced-motion:reduce){.pet-chip .pet-pic{animation:none}}

/* ---- Oct 9: map snap pulse ring, name tag and shake ---- */
.wm-pulse{position:absolute;z-index:4;width:0;height:0;pointer-events:none}
.wm-pulse::before{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:2px solid #f6e7b4;border-radius:50%;animation:wmpulse .8s ease-out 3}
.wm-pulse span{position:absolute;left:0;top:-30px;transform:translateX(-50%);white-space:nowrap;padding:2px 7px;font:500 11px/1.4 "IBM Plex Mono",monospace;color:var(--white);background:rgba(var(--sh),.92);border:1px solid var(--green);border-radius:4px}
@keyframes wmpulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.5);opacity:0}}
.wm-vp.wm-shake{animation:wmshake .4s ease}
@keyframes wmshake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.wm-pulse::before,.wm-vp.wm-shake{animation:none}}

/* ===== Oct 9 fix: fishing always stays on the place's watercolor (never goes dark), a light 30% veil sits on the centre box, and the UI uses the player's palette ===== */
.fishgame{background:var(--field-bg,#05080e)!important}
.fishgame.again>.fg-bg:not(.fg-x):not(.fg-lake),.fishgame.catching>.fg-bg:not(.fg-x):not(.fg-lake){animation:none;opacity:1}
.fishgame>.fg-bg::after{background:radial-gradient(ellipse at 50% 50%,rgba(var(--sh),.04),rgba(var(--sh),.18))}
.fishgame::after{display:none}
.fishgame .fg-water,.fishgame .fg-catch{background:rgba(var(--sh),.3);border:1px solid var(--line);color:var(--white);box-shadow:none;backdrop-filter:none}
:root[data-theme="light"] .fishgame .fg-water,:root[data-theme="light"] .fishgame .fg-catch{background:rgba(255,255,255,.55)}
.fishgame .fg-catch{max-width:min(92vw,440px)}
.fishgame.bite .fg-water{border-color:var(--green);box-shadow:0 0 18px rgba(var(--g),.35)}
.fishgame.pulling .fg-water{border-color:var(--value)}
.fishgame h2,.fishgame .fg-head{color:var(--green);text-shadow:none}
.fishgame .fg-steps span{background:var(--field-bg);color:var(--dim);border:1px solid var(--line);text-shadow:none}
.fishgame .fg-steps .on{background:var(--green);color:var(--field-bg);border-color:var(--green)}
.fishgame .fg-steps .done{color:var(--green);border-color:var(--green)}
.fishgame .fg-diff{background:var(--field-bg);border:1px solid var(--line);color:var(--white)}
.fishgame .fg-msg{background:var(--field-bg);color:var(--white);border-left:3px solid var(--fc,var(--green));text-shadow:none}
.fishgame .q-btn,.fishgame .fish-bait{background:var(--field-bg);color:var(--white);border:1px solid var(--line)}
.fishgame .q-btn:hover:not(:disabled),.fishgame .fish-bait:hover:not(:disabled){background:var(--green);color:var(--field-bg);border-color:var(--green)}
.fishgame .q-btn:disabled{opacity:.45;color:var(--dim)}
.fishgame .fish-bait.on{background:var(--green);color:var(--field-bg);border-color:var(--green)}
.fishgame .fish-baits .fb-l{color:var(--dim)}
.fishgame .fg-x{background:var(--field-bg);color:var(--white);border:1px solid var(--line)}
.fishgame .fg-x:hover{background:var(--green);color:var(--field-bg);border-color:var(--green)}
.fishgame .fgc-head,.fishgame .fgc-note{color:var(--dim)}.fishgame .fgc-name{color:var(--white)}
.fishgame .fgc-tags span{background:var(--field-bg);border:1px solid var(--line);color:var(--fc,var(--green))}
.fishgame .fg-track{stroke:rgba(var(--hi),.18)}.fishgame .fg-prog{stroke:var(--green);filter:drop-shadow(0 0 4px rgba(var(--g),.5))}
.fishgame .fg-core{fill:var(--field-bg)}
.fishgame .fg-gem{background:var(--green);box-shadow:0 0 14px rgba(var(--g),.45)}.fishgame .fg-gem::after{background:rgba(var(--hi),.55)}
.fishgame.bite .fg-bob{background:var(--green);box-shadow:0 0 18px var(--green)}
.fishgame .fg-dist{color:var(--white)}
.fish-row .fish-cast-btn{background:var(--field-bg);color:var(--green);border:1px solid var(--line)}
.fishgame .fg-head{background:var(--field-bg);border:1px solid var(--line);padding:4px 14px}
.fishgame .fgc-head,.fishgame .fgc-note,.fishgame .fish-baits .fb-l,.fishgame .fgc-name{color:var(--white);text-shadow:0 0 3px var(--field-bg),0 0 8px var(--field-bg),0 0 14px var(--field-bg)}

/* ---- Oct 9: map on phones. The stacked layout gives the place box no fixed height, so the map gets its own ---- */
@media (max-width:900px){.place-panel.mapmode>.mapbook.wmbook{flex:none;height:min(80vh,600px);min-height:420px}.wm-vp{flex:1 1 0}.wm-panel{min-width:0;max-height:36%}}

/* Oct 9 fix: the encounter card fades in and out quicker so the fight window is never kept waiting */
.enc-wrap{transition-duration:.45s}
@media (max-width:900px){.place-panel.mapmode>.mapbook.wmbook{flex-direction:column}.wm-panel{flex:0 0 auto;border-left:0;border-top:1px solid var(--line)}.wm-vp{min-height:0}}

/* Oct 9 fix: the stats rows scroll inside the stats box and the Quest Journal button stays pinned at the bottom, fully visible */
.stats .sv-stack{min-height:0;grid-template-rows:minmax(0,1fr)}
.stats .sv-stack>.sv:first-child{max-height:100%}
.stats .sv:first-child>.qj-row{position:sticky;bottom:0;z-index:2;background:var(--panel-bot);padding-top:3px;margin-top:auto}

/* Oct 9 fix: the place title never wraps (the buttons beside it shrink instead); the Elemental Mastery runes line has gaps and separators; the Dungeons count sits right */
.place-title .pt-left>h2{flex:none;white-space:nowrap}
.place-title .pt-btns{min-width:0}
.em-page:not(.compact) .em-runes{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:11px}
.em-page:not(.compact) .em-rl{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.em-page:not(.compact) .em-rune{display:inline-flex;align-items:center;gap:4px}
.em-page:not(.compact) .em-rune+.em-rune::before{content:"\00b7";color:var(--dim);margin-right:5px}
.em-page:not(.compact) .em-rune em{font-style:normal;color:var(--dim);margin-left:2px}

/* ===== Oct 9 combat timing pass: quick battle text, the monster fades as it dies, and VICTORY / DEFEAT is ready in about a second ===== */
.cb-now.pop{animation-duration:.4s}
.cb-now.t-crit{animation-duration:.55s}
.cb-now.t-hurt{animation-duration:.4s}
.cb-now .w i{transition-duration:.18s}
.cb-hl.snap{animation-duration:.3s}
.cb-foe .cb-ftrack i{transition-duration:.4s}
.cb-ghost{animation-duration:.8s}
.cb-foe.dying{animation:foeDie .8s ease-in forwards}
@keyframes foeDie{0%{opacity:1;filter:none}35%{opacity:1;filter:brightness(1.6)}100%{opacity:.18;filter:grayscale(1) blur(1.5px)}}
@media (prefers-reduced-motion:reduce){.cb-foe.dying{animation:none;opacity:.4}}
.cb.leave{transition-duration:.28s}
.scene.combat.gone{transition-duration:.35s}
.cb-result>*{animation-duration:.4s}
.cb-result>:nth-child(2){animation-delay:.1s}.cb-result>:nth-child(3){animation-delay:.2s}.cb-result>:nth-child(4){animation-delay:.3s}.cb-result>:nth-child(5){animation-delay:.4s}
.cb-result h1{animation-duration:.45s}
.co-vic .cv-ring{animation-duration:1s}
.co-vic h1{animation-duration:1.1s;animation-delay:.1s}
.co-vic .cv-sub{animation-duration:.6s;animation-delay:.5s}
.cb-result.co-vic-in{animation-duration:.4s}

/* Oct 9 (0.03b): the Gathering & Crafting Masters button sits right of the place title; hidden in every special view */
.place-title .pt-left{flex:1 1 auto;min-width:0}
.place-title .pt-left>.ap-btn{display:inline-flex;width:auto;flex:0 1 auto;min-width:26px;max-width:100%;height:26px;padding:0 9px;margin:-4px 0;box-sizing:border-box;overflow:visible}
.place-title .pt-left>.ap-btn[hidden]{display:none!important}
.place-title .pt-left>.ap-btn .ap-btn-txt{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.place-title .pt-left>.ap-btn svg{flex:none}
.place-panel.qmode .ap-btn,.place-panel.mapmode .ap-btn,.place-panel.annmode .ap-btn,.place-panel.wmmode .ap-btn,.place-panel.invmode .ap-btn,.place-panel.tamemode .ap-btn{display:none!important}
@media(max-width:700px){.place-title .pt-left>.ap-btn .ap-btn-txt{display:none}.place-title .pt-left>.ap-btn{padding:0;width:26px;justify-content:center}}
.place-title .pt-left>.ap-btn{gap:6px}

/* Oct 9 (0.03b): Equipment page: the hero on the left, the slot list to the right (nothing overlaps) */
.invbook .ib-body.eq-body{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:16px;overflow-y:auto;overflow-x:hidden;min-height:0}
.eq-doll{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border:1px solid var(--line2);border-radius:8px;background:radial-gradient(ellipse at 50% 45%,rgba(var(--g),.07),transparent 65%);box-sizing:border-box}
.eq-fig{width:120px;height:150px;display:flex;justify-content:center}
.eq-fig .px-sp{width:auto;height:100%;aspect-ratio:16/21;filter:drop-shadow(0 0 4px rgba(var(--g),.5))}
.eq-name{font-size:11px;color:var(--green);letter-spacing:.08em;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.eq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px}
.eq-row{display:flex;align-items:center;gap:8px;min-width:0;padding:3px 6px 3px 3px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.18)}
.eq-row.on{border-color:color-mix(in srgb,var(--green) 55%,transparent);cursor:var(--cur-a,pointer)}
.eq-row.on:hover{border-color:var(--green);background:rgba(var(--g),.1)}
.eq-row.broken{border-color:var(--bad)}
.eq-row .slot{flex:none;width:30px;height:30px;aspect-ratio:auto;box-sizing:border-box}
.eq-row .slot .ico svg{width:17px;height:17px}
.eq-txt{min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;line-height:1.25}.eq-item{grid-column:1/-1;grid-row:2}.eq-dur{grid-column:2;grid-row:1}
.eq-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-slot{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.eq-item{font-size:11px;color:var(--fg,inherit)}.eq-row:not(.on) .eq-item{color:var(--dim)}
.eq-dur{font-size:9px;color:var(--dim)}.eq-row.broken .eq-dur{color:var(--bad)}
.eq-right .pd-side{flex:none;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px}
.eq-right .pd-side .so-sec,.eq-right .pd-side .pf-note{grid-column:1/-1}
@media(max-width:900px){.eq-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.invbook .ib-body.eq-body{flex-direction:column;align-items:center}.eq-right{width:100%}}
.eq-left{flex:0 0 190px;display:flex;flex-direction:column;gap:8px;min-width:0}
.eq-left .eq-doll{flex:none;width:100%}
.eq-left .pd-side{flex:none;width:100%;box-sizing:border-box}
.eq-dur{font-size:9px}
@media(max-width:700px){.eq-left{flex:none;width:100%}}

/* ===== Oct 9 (0.03b): pixel-style segmented enemy health bar (no flowing lines). Ten chunky segments, tiny bright dashes, a white leading edge, and the lost chunk empties toward dark maroon segments ===== */
.cb-foe .cb-ftrack{--ol:color-mix(in srgb,var(--track,#7a1f2b) 30%,#000);--dv:color-mix(in srgb,var(--ol) 50%,transparent);container-type:inline-size;box-sizing:border-box;width:60%;height:24px;border:2px solid var(--ol);border-radius:0;box-shadow:none;overflow:hidden;position:relative;
  background-color:color-mix(in srgb,var(--track,#7a1f2b) 42%,#000);
  background-image:linear-gradient(90deg,transparent calc(100% - 2px),var(--dv) 0),linear-gradient(90deg,rgba(255,255,255,.05) 50%,transparent 50%),linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,0) 45%);
  background-size:10% 100%,20% 100%,100% 100%;background-repeat:repeat-x,repeat-x,no-repeat}
.cb-foe .cb-ftrack i{position:relative;display:block;height:100%;border-radius:0;animation:none;transition:width .22s steps(6,end);background-color:#e5473f;
  background-image:linear-gradient(90deg,transparent calc(100% - 2px),var(--dv) 0),linear-gradient(90deg,rgba(255,255,255,.1) 50%,rgba(0,0,0,.06) 50%),linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,0) 38%,rgba(0,0,0,0) 66%,rgba(0,0,0,.3));
  background-size:10cqw 100%,20cqw 100%,100% 100%;background-position:0 0,0 0,0 0;background-repeat:repeat-x,repeat-x,no-repeat}
.cb-foe .cb-ftrack i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:#fff4ec;box-shadow:0 0 0 1px rgba(255,244,236,.25)}
.cb-foe .cb-ftrack.full i::after{display:none}
.cb-foe .cb-ghost{top:0;bottom:0;box-shadow:none;border-radius:0;background-color:#8c2a33;
  background-image:linear-gradient(90deg,transparent calc(100% - 2px),var(--dv) 0),linear-gradient(rgba(255,255,255,.12),rgba(0,0,0,.2));background-size:10cqw 100%,100% 100%;background-repeat:repeat-x,no-repeat;
  animation:ghostDeplete .7s steps(7,end) .12s forwards}
@keyframes ghostDeplete{0%{opacity:1;filter:none}35%{opacity:1}100%{opacity:0;filter:brightness(.45)}}
.cb-foe .cb-fnum{z-index:3;font-weight:700}
@media (prefers-reduced-motion:reduce){.cb-foe .cb-ftrack i{transition:none}.cb-foe .cb-ghost{animation:none;opacity:0}}
.cb-foe .cb-ghost{background-position:calc(var(--gl,0) * -1cqw) 0,0 0}

/* ===== Oct 9 (0.03b): a little pixel sparkle when the PARRY! / BLOCK! button becomes usable ===== */
.parry.go,.blockbtn{overflow:visible}
.psp-star,.psp-px{position:absolute;pointer-events:none;display:block;z-index:4}
.psp-star{left:92%;top:8%;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--white);box-shadow:-6px 0 0 var(--green2),6px 0 0 var(--green2),0 -6px 0 var(--green2),0 6px 0 var(--green2);opacity:0;animation:pspStar .6s steps(6,end) 1 both}
@keyframes pspStar{0%{opacity:1;transform:scale(.4) rotate(0)}40%{opacity:1;transform:scale(1.5) rotate(0)}100%{opacity:0;transform:scale(2.2) rotate(45deg)}}
.psp-px{left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;opacity:0;background:var(--white);animation:pspPx .6s steps(7,end) 1 both}
.psp-px.c1{background:var(--green2)}.psp-px.c2{background:var(--green)}
@keyframes pspPx{0%{opacity:1;transform:translate(0,0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y))}}

/* ===== Oct 9 (0.03b): the encounter card fades out and the fight window fades in over solid dark: the old window (dungeon grid, place box, page backdrop) never shows in between ===== */
.scene.combat{background:#050407}
.scene.combat.enc{animation:fadein .3s backwards}

/* v0.03b: the fishing ring's filling bar is always white */
.fishgame .fg-prog{stroke:#fff!important;filter:drop-shadow(0 0 4px rgba(255,255,255,.55))!important}

/* ===== Planning Table in the house: the little reminder popup, the persistent hint line and the table button ===== */
.pt-pop{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:140;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;width:max-content;max-width:min(560px,94vw);border:1px solid var(--green);border-radius:10px;background:rgba(12,7,6,.96);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:12px;color:var(--white);opacity:0;transition:opacity .6s ease}
.pt-pop.in{opacity:1}
.pt-pop-t{display:flex;flex-direction:column;gap:3px;text-align:left}.pt-pop-t span{color:var(--dim,#9a928a)}
.pt-pop-x{padding:2px 9px;flex:none}
.pt-hint{display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;border:1px dashed var(--green);border-radius:6px;background:transparent;color:var(--green);font:inherit;font-size:11px;text-align:left;cursor:pointer}
.pt-hint:hover{background:rgba(var(--g),.12)}
.pt-use{display:flex;align-items:center;justify-content:center;gap:7px;width:100%}
.pt-st{margin:2px 0;font-size:11px;line-height:1.4}
.pp-scene{background:#06090c}

.stats .stat-btn.cre-gift{animation:shardflash 1.6s ease-in-out infinite!important;cursor:var(--cur-a,pointer)!important}
@media (prefers-reduced-motion:reduce){.stats .stat-btn.cre-gift{animation:none!important;box-shadow:0 0 10px 2px rgba(255,235,150,.75)!important;border-color:#ffe99a!important}}
.stats .stat-btn.top.chosen.cre-gift,.stats .stat-btn.chosen.cre-gift,.stats .stat-btn.top.cre-gift{animation:shardflash 1.6s ease-in-out infinite!important;border-color:#ffe99a}
#lb{scrollbar-width:none;-ms-overflow-style:none}#lb::-webkit-scrollbar{display:none;width:0;height:0}
.ap-box>.shop-top{position:relative;padding-right:44px}.ap-box>.shop-top>.shop-toggle{flex:1 1 auto;width:auto;min-width:0}

/* Town Square: Hall of Legends sits above Hall of the Fallen */
.sq-halls{grid-column:1/-1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:4px}
.sq-halls .sq-hall{margin-top:0!important;justify-self:auto}
/* Bank: slots grow slightly so the grid fills the width (scrollbar untouched) */
.place-panel.bankview .bank .bk-vaultcol .bk-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))!important;grid-auto-rows:auto!important}
.place-panel.bankview .bank .bk-vaultcol .bk-grid .slot{width:100%!important;height:auto!important;aspect-ratio:1/1}

/* Wild places: Taming button sits right of Gathering & Crafting Masters, larger, vertically centred */
.place-title .pt-left>.tool[aria-label="Taming"]{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;margin:-7px 0;box-sizing:border-box}
.place-title .pt-left>.tool[aria-label="Taming"][hidden]{display:none!important}
.place-title .pt-left>.tool[aria-label="Taming"].on{border-color:var(--green);background:rgba(var(--g),.12)}

/* Weapon Mastery page: the Map shares the "wmbook" class, so it must never be shown (or counted as part of) the Mastery page, and Mastery never shows in other modes */
.place-panel.wmmode:not(.mapmode)>.mapbook.wmbook{display:none!important}
.place-panel:not(.wmmode)>.wmbook:not(.mapbook){display:none!important}
.place-panel.mapmode>.wmbook:not(.mapbook),.place-panel.qmode>.wmbook:not(.mapbook),.place-panel.annmode>.wmbook:not(.mapbook),.place-panel.invmode>.wmbook:not(.mapbook),.place-panel.tamemode>.wmbook:not(.mapbook){display:none!important}

/* start page: a small fullscreen button with a glowing ! beside it until it is clicked */
.fs-rec-wrap{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 auto 12px}
.fs-rec-wrap .fs-rec{display:flex;align-items:center;justify-content:center;margin:0;width:28px;height:26px;padding:0;font-size:15px;line-height:1;letter-spacing:0}
.fs-bang{display:inline-block;font-size:17px;font-weight:700;line-height:1;color:#ffd24a;text-shadow:0 0 6px rgba(255,210,74,.9),0 0 14px rgba(255,210,74,.55);animation:fsBang 1.6s ease-in-out infinite;transition:opacity .6s ease;pointer-events:none}
.fs-bang.gone{opacity:0;animation:none}
@keyframes fsBang{0%,100%{opacity:.55;text-shadow:0 0 4px rgba(255,210,74,.5)}50%{opacity:1;text-shadow:0 0 8px rgba(255,210,74,1),0 0 18px rgba(255,210,74,.7)}}
@media (prefers-reduced-motion:reduce){.fs-bang{animation:none}}

/* Bank: the search box is a small magnifying glass and SEARCH, lifted a few pixels off the controls below it */
.bk-search.bk-search-sm{flex:0 1 112px;position:relative;top:-5px}
.bk-search.bk-search-sm .bk-search-ico{position:absolute;left:7px;top:50%;width:11px;height:11px;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.bk-search.bk-search-sm .bk-search-in{padding-left:23px}
.bk-search.bk-search-sm .bk-search-in::placeholder{letter-spacing:.1em;opacity:.7}
.bk-search.bk-search-sm .bk-search-in:focus~.bk-search-ico,.bk-search.bk-search-sm:focus-within .bk-search-ico{color:var(--green)}

/* Dungeons: the dungeon list fills nearly the whole middle window instead of stopping halfway down */
.place-panel.atdg:not(.qmode):not(.mapmode):not(.annmode):not(.wmmode):not(.invmode):not(.tamemode){display:flex;flex-direction:column;overflow:hidden}
.place-panel.atdg:not(.qmode):not(.mapmode):not(.annmode):not(.wmmode):not(.invmode):not(.tamemode)>*{flex:none}
.place-panel.atdg:not(.qmode):not(.mapmode):not(.annmode):not(.wmmode):not(.invmode):not(.tamemode)>.xtra.dgfill:not([hidden]){flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.xtra.dgfill>.dg-group,.xtra.dgfill>.dg-group.open,.xtra.dgfill>.dg-group.shop{flex:1 1 auto;min-height:0;max-height:none;height:auto;margin-bottom:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

.st-over.so-fade{opacity:0;transition:opacity .22s ease;pointer-events:none}

/* "Dungeon Complete!" is longer than VICTORY: a little smaller and tighter so it fits the screen */
.cb-result h1.dc-title{font-size:34px;letter-spacing:.12em;margin-left:0}
.co-vic h1.dc-title{font-size:34px;letter-spacing:.12em;padding-left:.12em}
@media(max-width:600px){.cb-result h1.dc-title,.co-vic h1.dc-title{font-size:22px}}

/* start page: BEGIN ADVENTURE is a plain button again (same reveal as before) */
.land .land-begin{display:block;margin:0 auto;opacity:0}
.land.run.ready .land-begin{opacity:1;transition:opacity .6s ease}.land.run:not(.ready) .land-begin{visibility:hidden}
.land.done .land-begin{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.land .land-begin{animation:none!important;opacity:1}.land.run:not(.ready) .land-begin{visibility:visible}}
/* start page: the fullscreen button is exactly centred; the glowing ! hangs off its right side */
.fs-rec-wrap{position:relative;width:max-content;max-width:100%;margin:0 auto 12px!important;display:block}
.fs-rec-wrap .fs-rec{margin:0 auto}
.fs-rec-wrap .fs-bang{position:absolute;left:100%;top:50%;margin-left:7px;transform:translateY(-50%)}

/* after the fullscreen button is clicked, the whole thing (button and !) fades away */
.land .fs-rec-wrap.fs-gone,.land.done .fs-rec-wrap.fs-gone,.land.run .fs-rec-wrap.fs-gone{opacity:0!important;animation:none!important;transition:opacity .6s ease;pointer-events:none}

/* ===== Patch: Town Square. The Main Story box reaches down to the bottom of the content window (the same gap below it as on its left side), with room for the chapter lore; the two Hall buttons are the same width ===== */
@media(min-width:901px){
  .place-panel:has(>.square:not([hidden])){display:flex;flex-direction:column}
  .place-panel>.square:not([hidden]){flex:1 1 0;min-height:0;max-height:none}
  .square>.sq-main{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column}
  .square>.sq-online{grid-column:2;grid-row:1}
  .square>.sq-halls{grid-column:2;grid-row:2}
  .sq-main>.sq-story{flex:1 0 auto;margin-top:5px}
  /* a touch less air inside the box so the chapter, its lore and the quote all fit in the taller space */
  .sq-main>.sq-story{padding-top:8px;padding-bottom:8px}
  .sq-main>.sq-story .st-head{margin-bottom:4px}.sq-main>.sq-story .st-dots{margin-bottom:6px}
  .sq-main .sq-story p.st-now,.sq-main .sq-story p.st-next{margin-bottom:2px}
  .sq-main .sq-story p.st-lore{margin-top:4px}.sq-main .sq-story p.st-quote{margin-top:4px}
}
.sq-halls{align-items:stretch}
.sq-halls .sq-hall{justify-content:center;white-space:nowrap}

/* territory standing rows: wider name column, the bar fills from the left */
.rep.terr{grid-template-columns:112px 66px minmax(0,1fr) 50px}.rep.terr .rep-bar::after{display:none}.rep.terr .q-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* battle history scrolls (no scroll bar) */
.cb-hist{overflow-y:auto;overflow-x:hidden;justify-content:flex-start;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.cb-hist::-webkit-scrollbar{display:none;width:0;height:0}.cb-hist>.cb-hl{margin-top:auto;flex:none}.cb-hist p.hs{opacity:.4}

/* house: one floor selector on the room preview, and even spacing around every box */
.hx-room.hp-room{position:relative}
.hx-flsel{position:absolute;top:8px;left:8px;z-index:30}
.hx-fcur{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;background:rgba(var(--sh),.82);border:1px solid var(--line);border-radius:6px;color:var(--green);font:inherit;font-size:10px;white-space:nowrap;cursor:var(--cur-a,pointer)}
.hx-fcur:hover,.hx-fcur.on{border-color:var(--green);background:rgba(var(--g),.14)}
.hx-car{font-style:normal;font-size:9px;line-height:1}
.hx-fmenu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;display:flex;flex-direction:column;gap:3px;padding:4px;background:rgba(var(--sh),.96);border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.hx-fi{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 8px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--dim);font:inherit;font-size:10px;white-space:nowrap;text-align:left;cursor:var(--cur-a,pointer)}
.hx-fi:hover:not(:disabled){border-color:var(--line);color:var(--white)}
.hx-fi.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.1)}
.hx-fi.buy{border-style:dashed}.hx-fi.buy span{color:#e8b860}.hx-fi:disabled{opacity:.45}
.house>.hx{gap:8px}.house .hx-main{gap:8px}
.house .hx-side,.hw-set{padding:8px;gap:8px}

/* Support the Game: nudged up a couple of pixels */
.support-head .support-title.sub-link{position:relative;top:-2px}

/* ===== Enemy health bar: no stripes. One red with a smooth gradient, a matching dark track, and no white end bar ===== */
.cb-foe .cb-ftrack{
  background-color:color-mix(in srgb,var(--track,#7a1f2b) 36%,#000);
  background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,0) 40%,rgba(0,0,0,.28)),linear-gradient(90deg,color-mix(in srgb,var(--track,#7a1f2b) 48%,#000),color-mix(in srgb,var(--track,#7a1f2b) 22%,#000));
  background-size:100% 100%,100% 100%;background-repeat:no-repeat,no-repeat}
.cb-foe .cb-ftrack i{
  background-color:#e5473f;
  background-image:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,0) 38%,rgba(0,0,0,0) 66%,rgba(0,0,0,.3)),linear-gradient(90deg,#f26a5f,#c9332f);
  background-size:100% 100%,100cqw 100%;background-position:0 0,0 0;background-repeat:no-repeat,no-repeat}
.cb-foe .cb-ftrack i::after,.cb-foe .cb-ftrack.full i::after{display:none!important;content:none}
.cb-foe .cb-ghost{
  background-color:#8c2a33;
  background-image:linear-gradient(rgba(255,255,255,.12),rgba(0,0,0,.2)),linear-gradient(90deg,#9a323a,#6e1f27);
  background-size:100% 100%,100cqw 100%;background-repeat:no-repeat,no-repeat;background-position:0 0,calc(var(--gl,0) * -1cqw) 0}

/* patch: Quest Book close X (top right of the center window) and the locked Quest Journal button before the Town Hall cutscene */
.qbook .qb-sum{align-items:center}.qbook .qb-sum .qb-x{margin-left:auto;flex:0 0 auto}
.qj-btn:disabled,.qj-btn.qj-lock{opacity:.35;filter:grayscale(1);cursor:default;animation:none!important;pointer-events:auto}

/* patch: Castle Town grayed out until the first rest */
.loc-head.loc-lock,.loc-head:disabled{opacity:.35;filter:grayscale(1);cursor:default;animation:none!important}

/* patch: Map button grayed out until the Town Hall reveal */
.locs-chron.map-lock,.locs-chron:disabled{opacity:.35;filter:grayscale(1);cursor:default;animation:none!important}

/* patch: the stats window glows white once when you rest or meditate (its own keyframes name, so the Rest button glow is untouched) */
.stats.rest-glow{animation:statsRestGlow 1.4s ease-out 1}
@keyframes statsRestGlow{0%{box-shadow:0 0 0 0 rgba(255,255,255,0),inset 0 0 0 0 rgba(255,255,255,0)}30%{box-shadow:0 0 24px 5px rgba(255,255,255,.75),inset 0 0 28px 6px rgba(255,255,255,.45)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0),inset 0 0 0 0 rgba(255,255,255,0)}}

/* patch: Hall of the Legends / Hall of the Fallen buttons are identical: same size, icons in the same spot, text starting at the same spot */
.sq-halls .sq-hall{justify-content:flex-start!important;gap:8px!important;padding:3px 12px!important;min-height:24px;box-sizing:border-box}
.sq-halls .sq-hall>:first-child{flex:0 0 14px;width:14px!important;height:14px!important;display:inline-flex;align-items:center;justify-content:center}
.sq-halls .sq-hall>:first-child svg,.sq-halls .sq-hall>:first-child canvas,.sq-halls .sq-hall>svg{width:14px!important;height:14px!important}

/* 0.03 patch: Weapon Mastery is an icon-only button beside the repair icon (Blacksmith only); the Masters button sits right next to them */
.pt-act .wm-txt.wm-ico{width:30px;height:26px;padding:0;gap:0;justify-content:center;border-radius:8px}
.pt-act .wm-txt.wm-ico .ico svg{width:17px;height:17px}
.place-title .pt-left>.pt-chest:empty{display:none}
.place-title .pt-left>.pt-act:not(:empty)~.ap-btn{margin-left:-4px}
.place-panel.qmode .wm-txt,.place-panel.mapmode .wm-txt,.place-panel.annmode .wm-txt,.place-panel.invmode .wm-txt,.place-panel.tamemode .wm-txt{display:none!important}

/* ===== 0.04 Map page: everything fades out except the footer text and the bottom-right buttons; the map fills the whole content area ===== */
.window>.side,.window>.center{transition:opacity .4s ease,visibility 0s}
#game.mapfs .window>.side,#game.mapfs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.mapfs .window{position:relative}
#game.mapfs .window>.mapbook.wmbook{display:flex!important;flex-direction:row;gap:0;position:absolute;inset:0;z-index:8;margin:0;padding:0;overflow:hidden;box-sizing:border-box;container-type:inline-size;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both}
@keyframes wmfsin{from{opacity:0}to{opacity:1}}
.wm-vp{border-radius:9px 0 0 9px}
.wm-x{position:absolute;right:8px;top:8px;z-index:9}
.wm-panel{padding-top:42px;transition:flex-basis .3s ease,padding .3s ease,opacity .25s ease,border-width .3s ease}
.wm-sbt{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:16px;height:44px;padding:0;font:600 15px/1 "IBM Plex Mono",monospace;background:rgba(var(--sh),.85);color:var(--green);border:1px solid var(--line);border-right:0;border-radius:6px 0 0 6px;cursor:var(--cur-a,pointer)}
.wm-sbt:hover,.wm-sbt.pad-hover{border-color:var(--green);background:rgba(var(--g),.18);filter:none}
.mapbook.wm-side-off>.wm-panel{flex:0 0 0!important;flex-basis:0!important;padding:0!important;border-left-width:0;opacity:0;overflow:hidden;pointer-events:none}
.mapbook.wm-side-off>.wm-vp{border-radius:9px}
@media(max-width:800px){
  #game.mapfs .window>.side,#game.mapfs .window>.center{display:none}
  #game.mapfs .window>.mapbook.wmbook{position:relative;inset:auto;flex-direction:column;height:calc(100vh / var(--zoom,1) - 150px);min-height:380px}
  .wm-vp{border-radius:9px 9px 0 0}
  .wm-panel{flex:0 0 auto;max-height:38%;border-left:0;border-top:1px solid var(--line);padding-top:10px}
  .mapbook.wm-side-off>.wm-panel{border-top-width:0}
  .wm-sbt{top:auto;bottom:0;right:50%;transform:translateX(50%);width:44px;height:16px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0}
  .mapbook.wm-side-off>.wm-vp{border-radius:9px}
}

/* ===== 0.06: the Quest Book's X sits exactly where the Chronicle button was; Bait Shop at the Harbor ===== */
.tool.qx-btn{font-size:18px;line-height:1;color:var(--green);padding:0;display:inline-flex;align-items:center;justify-content:center}
.tool.qx-btn[style*="display: none"]{display:none!important}

/* 0.08: Hall buttons nudged right; pet front shows only a larger, vertically centred level */
.sq-halls{margin-right:-6px}
.pet-chip .pet-info{justify-content:center;align-self:center}
.pet-chip .pet-info em{font-size:15px;line-height:1}

/* ===== 0.09 patch: map colors + richer map sidebar ===== */
.wm-vp{background:#000}
.wm-tb{color:#fff;border-color:rgba(255,255,255,.55)}
.wm-tb:hover,.wm-tb.pad-hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.16)}
.wm-panel{flex-basis:clamp(210px,32%,300px);gap:8px}
.wm-ph{gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.wm-ph .wm-pt{min-width:0;flex:1 1 auto}
.wm-ph h3{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.wm-lv{flex:none;align-self:flex-start;padding:2px 8px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green);border:1px solid var(--green);border-radius:99px;background:rgba(var(--g),.12);white-space:nowrap}
.wm-lv.hard{color:#e0604e;border-color:#e0604e;background:rgba(224,96,78,.12)}
.wm-lv.town{color:var(--dim);border-color:var(--line);background:transparent}
.wm-chips{display:flex;flex-wrap:wrap;gap:5px}
.wm-chip{padding:1px 8px;font-size:9.5px;line-height:16px;color:var(--dim);border:1px solid var(--line2);border-radius:99px}
.wm-chip.bad{color:#e0604e;border-color:#e0604e}.wm-chip.here{color:var(--green);border-color:var(--green)}.wm-chip.chest{color:#e8b860;border-color:#e8b860}
.wm-sec{margin-top:4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.wm-fl{font-style:normal;color:var(--fg,inherit)}
.wm-lore{margin:0;font-style:italic;color:var(--dim);line-height:1.6;padding-left:8px;border-left:2px solid var(--line)}
.wm-feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.wm-feat li{position:relative;padding-left:12px}
.wm-feat li::before{content:"";position:absolute;left:1px;top:.6em;width:4px;height:4px;background:var(--green);transform:rotate(45deg)}
.wm-near{display:flex;flex-wrap:wrap;gap:5px}
.wm-nb{padding:2px 8px;font:inherit;font-size:10px;line-height:16px;color:var(--fg,inherit);background:transparent;border:1px solid var(--line);border-radius:5px;cursor:var(--cur-a,pointer)}
.wm-nb.unk{color:var(--dim);border-style:dashed;cursor:var(--cur-n,default)}
.wm-nb:not(.unk):hover{border-color:var(--green);background:rgba(var(--g),.12)}
.wm-go{align-self:stretch;justify-content:center;margin-top:4px}

/* ===== 0.09 patch: Equipment window (three categories, slimmer boxes, unequipped gear) ===== */
.eq-cats{display:flex;flex-direction:column;gap:12px}
.eq-cat{display:flex;flex-direction:column;gap:6px}
.eq-cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:3px;border-bottom:1px solid var(--line2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.eq-cat-n{font-size:9px;letter-spacing:.04em;text-transform:none;color:var(--dim)}
.eq-cats .eq-list{grid-template-columns:repeat(auto-fill,minmax(136px,150px));gap:6px;justify-content:start}
.eq-cats .eq-row{padding:3px 6px 3px 3px;gap:6px}
.eq-row.two-lock,.slot.two-lock{opacity:.5;border-style:dashed}
.eq-row.two-lock .eq-item{font-style:italic}
.eq-uneq{margin-top:14px}
.uneq{display:grid;grid-template-columns:repeat(auto-fill,38px);gap:6px;align-content:start;min-height:52px;padding:8px;box-sizing:border-box;border:1px dashed var(--line2);border-radius:8px;background:rgba(var(--sh),.14)}
.uneq .slot{width:38px;height:38px;aspect-ratio:auto;box-sizing:border-box}
.uneq.drop{border-color:var(--green);background:rgba(var(--g),.12)}
.eq-none{grid-column:1/-1;margin:0;align-self:center;font-size:10px;color:var(--dim)}
@media(max-width:900px){.eq-cats .eq-list{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}}

/* ===== 0.09 patch: small equipment box (two big weapon slots, four armor slots) ===== */
.inv-eq.eqm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:2px 0}
.eqm-hands,.eqm-armor{display:flex;justify-content:center;align-items:center}
.eqm-hands{gap:14px}.eqm-armor{gap:6px}
.eqm-hands .slot{flex:none;width:54px;height:54px;aspect-ratio:auto;box-sizing:border-box}
.eqm-armor .slot{flex:none;width:34px;height:34px;aspect-ratio:auto;box-sizing:border-box}
.eqm-hands .slot .ico svg{width:30px;height:30px}.eqm-armor .slot .ico svg{width:17px;height:17px}

/* ===== 0.09b: pet level on one line, 1pt smaller ===== */
.pet-chip .pet-info{max-width:none;flex:none}
.pet-chip .pet-info em{font-size:13.67px;line-height:1;white-space:nowrap;flex:none}

/* ===== 0.09b: Equipment window fits with no scrolling (only the unequipped pack list may scroll, with no visible bar) ===== */
.invbook .ib-body.eq-body{overflow:hidden;align-items:stretch;gap:12px;padding:2px 4px 2px 0}
.eq-body .eq-left{flex:0 0 168px;min-height:0;overflow:hidden;gap:6px}
.eq-body .eq-fig{width:96px;height:112px}
.eq-body .eq-doll{padding:6px 4px;gap:3px}
.eq-body .eq-left .pd-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;font-size:10px;line-height:1.35}
.eq-body .eq-left .pd-side .so-sec,.eq-body .eq-left .pd-side .pf-note{grid-column:1/-1;margin:2px 0 0}
.eq-body .eq-left .pd-side .pf-note{font-size:9px;line-height:1.3}
.eq-body .eq-right{flex:1 1 auto;min-width:0;min-height:0;gap:6px;overflow:hidden}
.eq-body .eq-cats{gap:7px;flex:none}
.eq-body .eq-cat{gap:4px}
.eq-body .eq-cat-h{font-size:9px;padding-bottom:2px}
.eq-body .eq-cats .eq-list{grid-template-columns:repeat(auto-fill,minmax(122px,138px));gap:4px 5px}
.eq-body .eq-row{padding:2px 5px 2px 2px;gap:5px}
.eq-body .eq-row .slot{width:26px;height:26px}
.eq-body .eq-row .slot .ico svg{width:15px;height:15px}
.eq-body .eq-slot{font-size:7.5px}.eq-body .eq-item{font-size:10px}.eq-body .eq-dur{font-size:8px}
.eq-body .eq-uneq{margin-top:2px;flex:1 1 auto;min-height:0}
.eq-body .uneq{flex:1 1 auto;min-height:44px;grid-template-columns:repeat(auto-fill,32px);grid-auto-rows:32px;gap:4px;padding:6px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.eq-body .uneq::-webkit-scrollbar{display:none;width:0;height:0}
.eq-body .uneq .slot{width:32px;height:32px}
.eq-body .uneq .slot .ico svg{width:16px;height:16px}
@media(max-width:700px){.invbook .ib-body.eq-body{overflow-y:auto}.eq-body .eq-left{flex:none;width:100%}}

/* ===== 0.09d: Equipment window never shows a scroll bar; Total bonus is a table ===== */
.place-panel.invgear{overflow:hidden!important}
.place-panel.invgear .invbook{overflow:hidden}
.invbook .ib-body.eq-body,.eq-body .eq-left,.eq-body .eq-right{scrollbar-width:none}
.invbook .ib-body.eq-body::-webkit-scrollbar{display:none;width:0;height:0}
.eq-body .bt{display:flex;flex-direction:column;gap:5px}
.eq-body .bt-head{display:flex;align-items:center;justify-content:space-between;margin:0}
.eq-body .bt-head .info-btn{flex:none}
.bt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(0,0,0,.32);border-left:1px solid rgba(0,0,0,.32);border-radius:3px}
.bt-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;padding:3px 4px;border-right:1px solid rgba(0,0,0,.32);border-bottom:1px solid rgba(0,0,0,.32);background:rgba(0,0,0,.14);text-align:center}
.bt-k{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.5px;letter-spacing:.04em;color:var(--dim)}
.bt-v{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--green)}
.bt-cell.bad .bt-v{color:var(--bad)}

/* ===== patch: map full screen, two-handed small equipment box, grayed off hand ===== */
.wm-tb.on{border-color:var(--green);background:rgba(var(--g),.18)}
#game.mapfs .window>.mapbook.wmbook.wm-full{position:fixed!important;inset:0!important;z-index:400;border-radius:0;border:0;animation:none}
.mapbook.wm-full>.wm-vp{border-radius:0}
.mapbook.wm-full .wm-x{top:10px;right:10px}
@media(max-width:800px){#game.mapfs .window>.mapbook.wmbook.wm-full{height:auto!important;min-height:0!important;position:fixed!important}}
.eqm-hands.two{justify-content:center}
.eqm-hands.two .slot{margin:0 auto}
.eq-row.two-lock,.slot.two-lock{opacity:.4;filter:grayscale(1);border-style:dashed}
.eq-row.two-lock .eq-item{font-style:italic;color:var(--dim,#888)}

/* ===== patch: Total bonus boxes fill the whole box evenly; Slots filled has a bright outline ===== */
.eq-body .eq-left .pd-side .bt-grid{grid-column:1/-1;width:100%;box-sizing:border-box;grid-auto-rows:1fr}
.eq-body .bt-cell{padding:6px 4px;min-height:34px;box-sizing:border-box}
.eq-body .bt-k{font-size:9px}.eq-body .bt-v{font-size:13px}
.bt-cell.bt-slots{position:relative;z-index:1;box-shadow:inset 0 0 0 1px var(--green),0 0 6px rgba(var(--g),.55);border-color:var(--green)}

/* ===== patch: gold costs show the gold icon and the amount ===== */
.g-cost{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;vertical-align:middle}
.g-cost .ico,.g-cost svg{flex:none}

/* ===== patch: gold icon and number sit on the same line, vertically centred ===== */
.g-cost{line-height:1;vertical-align:middle}
.g-cost .ico{display:inline-flex;align-items:center;line-height:0;vertical-align:baseline}
.g-cost .ico svg{display:block}
.rest-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1}
.rest-btn .g-cost{gap:3px}
.q-btn:has(.g-cost){display:inline-flex;align-items:center;justify-content:center;gap:2px}
.shop-price,.mk-price,.pt-g,.ac-gold,.q-reward{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px}
.pt-g{justify-content:center}

/* ===== patch: bright gold costs; the Rest/Meditate cooldown sits outside the button ===== */
.g-cost,.shop-price .g-cost,.mk-price .g-cost,.q-reward .g-cost,.ac-gold .g-cost{color:#ffd24a}
.rest-btn .g-cost,.q-btn .g-cost,.hx-fl .g-cost{color:#ffd24a}
.g-cost .ico svg{stroke:currentColor}
.rest-cd{margin-left:0;font-size:11px;color:var(--dim);white-space:nowrap;vertical-align:middle}
.pt-act{display:inline-flex;align-items:center}

/* ===== patch: bank Deposit all / Withdraw all sit left of Sort with a white outline ===== */
.q-btn.bk-white{border-color:#fff}
.q-btn.bk-white:not(:disabled):hover{border-color:#fff;background:rgba(255,255,255,.14)}
.q-btn.bk-white:disabled{border-color:rgba(255,255,255,.4)}
.q-btn.bk-white,.q-btn.bk-white .ico,.q-btn.bk-white svg{color:#fff}
.q-btn.bk-white:disabled,.q-btn.bk-white:disabled .ico{color:rgba(255,255,255,.4)}

/* ===== patch: the bank's Slots & Tabs button no longer glows ===== */
.bank .shop.collapsed,.bank .bk-headrow .bk-tools .shop.collapsed,.bank .bk-headrow .bk-tools .shop.open,.bank .bk-tools .shop.collapsed{animation:none!important;box-shadow:none!important}

/* ===== patch: bank search sits in the top box beside the buttons; the ? sits next to the Bank title ===== */
.bank .bk-balance .bk-toolrow{flex-wrap:wrap}
.bank .bk-balance .bk-toolrow .bk-search.bk-search-sm{top:0;flex:0 1 150px;margin-left:auto}
.place-title h2 .bk-help{margin-left:8px;vertical-align:middle;flex:none}

/* ===== patch: every weapon in Weapon Mastery is the same white ===== */
.sk-row.cur .sk-name,.cbs-list .sk-row .sk-name,.sv .sk-row .sk-name{color:var(--white)}
.wm-ty,.wm-ty.known,.wm-ty.sel,.wm-ty.cur{color:var(--white)}

/* ===== Oct 10 patch: house views open in the Map's content window (same box, black room area on the left, sidebar on the right) ===== */
#game.hvfs .window>.side,#game.hvfs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.hvfs .window{position:relative}
.hv-scene.hv-win{position:absolute;inset:0;z-index:8;display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;margin:0;padding:0;overflow:hidden;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);opacity:0;transition:opacity .35s ease}
.hv-scene.hv-win.in{opacity:1;transition:opacity .5s ease .22s}
.hv-scene.hv-win.leaving{transition:opacity .3s ease;opacity:0;pointer-events:none}
.hv-win>.hv-wrap{flex:1 1 auto;min-width:0;min-height:0;width:100%;max-width:none;height:100%;display:flex;flex-direction:row;gap:0;align-items:stretch}
.hv-win .hv-main{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;box-sizing:border-box;background:#04070a;border-radius:9px 0 0 9px;overflow:hidden}
.hv-win .hv-side,.hv-win .hw-set{flex:0 0 clamp(220px,30%,290px)!important;width:auto!important;min-width:0;max-height:none!important;height:auto;box-sizing:border-box;margin:0;padding:10px 12px!important;border:0;border-left:1px solid var(--line);border-radius:0;background:none;display:flex;flex-direction:column;gap:7px;overflow-y:auto!important;overflow-x:hidden;font-size:11px;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.hv-win .hv-side>*,.hv-win .hw-set>*{flex:0 0 auto}
@media(max-width:800px){
  #game.hvfs .window>.side,#game.hvfs .window>.center{display:none}
  .hv-scene.hv-win{position:relative;inset:auto;height:calc(100vh / var(--zoom,1) - 150px);min-height:380px}
  .hv-win>.hv-wrap{flex-direction:column}
  .hv-win .hv-main{border-radius:9px 9px 0 0}
  .hv-win .hv-side,.hv-win .hw-set{flex:0 0 auto!important;max-height:38%!important;border-left:0;border-top:1px solid var(--line)}
}

/* Patch: arrow-only Enter buttons (Dungeons menu, Town Square daily dungeon) */
.dg-enter.dg-arrow{padding:8px 11px;gap:0;letter-spacing:0}
.dg-enter.dg-arrow:hover:not(:disabled){letter-spacing:0}
.dg-enter.dg-arrow .ico{width:14px;height:14px}
.sq-daily .dd-lab{flex:0 1 auto;cursor:var(--cur-a,default)}
.sq-daily .dd-head .info-btn{margin-left:0;flex:none}
.sq-daily .dd-head::after{content:"";flex:1}
/* Patch: planning window, equipment layout at the top */
.pp-wrap.solo{width:min(700px,94vw)}
.pp-eqtop{display:flex;flex-direction:row;align-items:flex-start;gap:12px}
.pp-eqtop .eq-left{flex:0 0 150px;min-width:0}
.pp-eqtop .eq-right{flex:1 1 auto;min-width:0}
.pp-eqtop .eq-row{cursor:default}.pp-eqtop .eq-row.on:hover{background:rgba(var(--sh),.18);border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.pp-eqtop .eq-cats{gap:7px}
.pp-eqtop .eq-cats .eq-list{grid-template-columns:repeat(auto-fill,minmax(122px,138px));gap:4px 5px}
@media(max-width:700px){.pp-eqtop{flex-direction:column;align-items:center}.pp-eqtop .eq-left,.pp-eqtop .eq-right{flex:none;width:100%}}
.pp-bar .dg-enter{flex:none}
/* Patch: slow entrance into a dungeon */
.dg-enterblk{position:fixed;inset:0;z-index:400;background:#000;opacity:0;pointer-events:all;transition:opacity 1.6s ease}
.dg-enterblk.on{opacity:1}
.dg-enterblk.slow{transition:opacity 2.8s ease}
@keyframes dgZoomOut{from{transform:scale(6.5)}to{transform:scale(1)}}
.scene.dungeon.lightup>*:not(.cb-bg):not(.cb-fog):not(.dg-light){animation:fadein 1s ease backwards}
.scene.dungeon.lightup .dg-grid.centered .dg-cell:not(:has(.dg-hero)){animation:dgLightUp .6s ease-out backwards!important;animation-delay:calc(var(--dl,0) * .16s)!important}
@keyframes dgLightUp{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.dg-enterblk{transition:none}}

/* Patch: Chronicle + Map box under Locations (the Support box is gone) */
.side>.side-nav{flex:none;display:flex;gap:8px;padding:10px 14px;box-sizing:border-box}
.side-nav .nav-wide{flex:1 1 0;min-width:0;margin:0;width:auto;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line2);border-radius:6px;background:none;color:var(--green);font:inherit;font-size:12px;letter-spacing:.08em;cursor:var(--cur-a,pointer)}
.side-nav .nav-wide:hover:not(:disabled){border-color:var(--green);background:rgba(var(--g),.12)}
.side-nav .nav-wide.on{border-color:var(--green);background:rgba(var(--g),.12)}
.side-nav .nav-wide.chron-glow{animation:softglow 1.4s ease-in-out infinite;border-color:var(--green)}
.side-nav .nav-wide.map-lock,.side-nav .nav-wide:disabled{opacity:.35;filter:grayscale(1);cursor:default;animation:none!important}
.side-nav .nav-lab{white-space:nowrap}
@media(max-width:800px){.side>.side-nav{grid-column:1/-1}.window .side-nav{order:2}}
#game.intro-min .side-nav .chron-btn{display:none}
.pt-btns .tool[hidden]{display:none!important}
/* Patch: the tier star glows gold */
.toolbar .tool[data-k="tier"]{cursor:var(--cur-a,pointer)}
.toolbar .tool[data-k="tier"]:hover svg,.toolbar .tool[data-k="tier"]:focus-visible svg{color:#f2c94c!important;fill:#f2c94c!important;stroke:#f2c94c!important;filter:drop-shadow(0 0 3px rgba(242,201,76,.95)) drop-shadow(0 0 9px rgba(242,201,76,.65))}
/* Patch: the expanded pet window, a header and two sections */
.pet-pane{font-size:11px;padding:10px 12px}
.pet-pane .pet-body{gap:8px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.pet-pane .pp-header{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--g),.06)}
.pet-pane .pp-header .pet-top{margin:0 22px 0 0}
.pet-pane .pp-header .pet-title{font-size:15px}
.pet-pane .pp-header .pet-lv{font-size:12px}
.pet-pane .pp-header .pet-meter{height:16px}
.pet-pane .pp-header .pet-meter>span{font-size:9.5px;line-height:14px}
.pet-pane .pp-sec{display:flex;flex-direction:column;gap:6px;padding:7px 10px 9px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.18)}
.pet-pane .pp-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:3px;border-bottom:1px solid var(--line2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.pet-pane .pp-sec-h .pet-meals{font-size:10px;letter-spacing:.04em;text-transform:none}
.pet-pane .pp-line{display:flex;align-items:center;gap:8px;min-width:0}
.pet-pane .pp-lab{flex:0 0 46px;font-size:10px;color:var(--dim)}
.pet-pane .pp-line .pet-acts{flex:1;min-width:0;gap:5px}
.pet-pane .pp-sec .q-btn{height:22px;padding:0 9px;font-size:10.5px}
.pet-pane .pp-need{min-height:24px;padding:3px 8px}
.pet-pane .pp-need .pp-nt{font-size:10.5px;white-space:normal}
.pet-pane .pet-gear{display:flex;flex-direction:column;gap:5px}
.pet-pane .pp-sec .pet-slot{flex-wrap:wrap;align-items:center;gap:5px;min-height:22px}
.pet-pane .pp-sec .pet-sl{width:52px;flex:0 0 52px;line-height:22px;font-size:10px}
.pet-pane .pp-sec .pet-slot .none{line-height:22px;font-size:10.5px}
.pet-pane .pp-sec .pet-slot .pet-cur{max-width:none;font-size:10.5px}

/* Patch: Chronicle + Map buttons are icon-only and darker for contrast; more breathing room above the bottom menu (tab) buttons */
.side-nav .nav-wide{background:rgba(0,0,0,.62);border-color:var(--line)}
.side-nav .nav-wide:hover:not(:disabled),.side-nav .nav-wide.on{background:rgba(0,0,0,.62);box-shadow:inset 0 0 0 100px rgba(var(--g),.12)}
#lb-wrap .lb-tabs{margin-top:4px;margin-bottom:10px}

/* Patch: dungeon entry sequence. The title text fades out slowly; ONLY your hero fades in (zoomed in: no grid boxes, no assets, no lighting, no backdrop);
   a short pause; the zoom out; the grid is revealed; then the text, the assets and the room's lighting (backdrop, fog, torch glow) all fade in at the same time. */
.scene.dungeon.enterfx,.scene.dungeon.entered{animation:none}   /* "entered" stays on afterwards so the screen's own fade-in can never replay */
.scene.dungeon.enterfx{overflow:hidden;pointer-events:none}
@keyframes dgHeroIn{from{opacity:0}to{opacity:1}}
/* the title: appears slowly, and its text fades out slowly */
.scene.dungeon.enterfx .dg-name{animation:fadein 2.4s .9s backwards;transition:opacity 2.2s ease}
/* until the final step: no text, no assets, no backdrop, no fog (the torch glow stays on behind the title, your hero and the zoom out) */
.scene.dungeon.enterfx .dg-grid{animation:none!important}
.scene.dungeon.enterfx:not(.assetsin)>*:not(.dg-grid):not(.dg-name){opacity:0!important}   /* (the torch glow waits too: it fades in with everything else) */
/* step 1 and 2: the grid is drawn zoomed in on your hero. Every square is hidden and so is the hero's own square (its box), only the character model shows */
.scene.dungeon.enterfx.zoomfx .dg-grid{transform:scale(6.5);transform-origin:50% 50%;will-change:transform;animation:none!important}
.scene.dungeon.enterfx.zoomfx .dg-grid .dg-cell:not(:has(>.dg-hero)){opacity:0!important}
.scene.dungeon.enterfx.zoomfx .dg-grid.centered .dg-cell:has(>.dg-hero){background:transparent!important;border-color:transparent!important;box-shadow:none!important;animation:none!important}
.scene.dungeon.enterfx.zoomfx.herofade .dg-hero{animation:dgHeroIn 1.8s ease-in-out both}
.scene.dungeon.enterfx.zoomfx.zoomout .dg-grid{animation:dgZoomOut 3.4s cubic-bezier(.5,0,.3,1) forwards!important}
/* step 3: the whole grid fades in evenly, in one piece, with your hero's own square (its box) fading in alongside */
.scene.dungeon.enterfx.gridin .dg-grid.centered .dg-cell:not(:has(>.dg-hero)){animation:dgLightUp 2.4s ease-in-out backwards!important}
.scene.dungeon.enterfx.gridin .dg-grid.centered .dg-cell:has(>.dg-hero){transition:background 2.4s ease-in-out,border-color 2.4s ease-in-out,box-shadow 2.4s ease-in-out}
/* step 4: the backdrop, fog, text and assets all fade in together, slowly (same length, same easing) */
.scene.dungeon.enterfx.assetsin>*:not(.dg-grid){animation:fadein 4.5s ease-in-out backwards}
@media (prefers-reduced-motion:reduce){.scene.dungeon.enterfx .dg-grid{transform:none!important;animation:none!important}}

/* Patch: planning screen back arrow (small, tip says Return to house) */
.pp-bar .pp-back{padding:0;width:34px;min-width:0;height:34px;display:inline-flex;align-items:center;justify-content:center}
.pp-bar .pp-back .pp-back-arr{display:inline-flex;line-height:0}

/* Patch: Daily Dungeon label is bright green while the bonus is ready */
.sq-daily .dd-lab.open{color:var(--green)}

/* Patch: hovering the chapter arrows does not light up the Main Story box (and shows no "Open the Quest Book" tip) */
.sq-story:has(.st-navs:hover){border-color:var(--line2);box-shadow:inset 0 0 22px rgba(0,0,0,.35)}

/* ===== Patch: Fishing + Taming buttons move to the top right of the place (where the Chronicle button used to be); the fishing minigame is just a ring ===== */
/* Taming (paw) now sits in the top-right button group, just left of Fishing. Same size as before. */
.place-title .pt-btns>.tool[aria-label="Taming"]{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;margin:-7px 0;box-sizing:border-box}
.place-title .pt-btns>.tool[aria-label="Taming"][hidden]{display:none!important}
.place-title .pt-btns>.tool[aria-label="Taming"].on{border-color:var(--green);background:rgba(var(--g),.12)}
/* Fishing: the same 42px button it always was, now in the title row (negative margin so the row does not grow) */
.place-title .pt-btns>.pt-fish{flex:none;width:42px;height:42px;padding:0;margin:-8px 0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border-radius:0;background:var(--field-bg);color:var(--green);border:1px solid var(--line)}
.place-title .pt-btns>.pt-fish .ico{display:inline-flex}
.place-title .pt-btns>.pt-fish[hidden]{display:none!important}
.place-title .pt-btns>.pt-fish:hover:not(:disabled){border-color:var(--green);background:rgba(var(--g),.12)}
.place-panel.qmode .pt-fish,.place-panel.mapmode .pt-fish,.place-panel.annmode .pt-fish,.place-panel.wmmode .pt-fish,.place-panel.invmode .pt-fish,.place-panel.tamemode .pt-fish{display:none!important}
.place-panel.qmode .pt-btns>.tool[aria-label="Taming"],.place-panel.mapmode .pt-btns>.tool[aria-label="Taming"],.place-panel.annmode .pt-btns>.tool[aria-label="Taming"],.place-panel.wmmode .pt-btns>.tool[aria-label="Taming"],.place-panel.invmode .pt-btns>.tool[aria-label="Taming"]{display:none!important}

/* Fishing minigame: backdrop, then the rod, then the ring. No texts on the page: only the ?, the X and the ring. */
.fishgame{--rs:clamp(128px,34vh,300px);--ws:min(calc(var(--rs) + 76px),94vw)}
.fishgame>.fg-bg:not(.fg-x):not(.fg-lake){animation:fgbgin 1.2s ease .6s forwards}   /* the HUD fades out first, then the watercolor fades in */
.fishgame .fg-head,.fishgame .fg-steps,.fishgame .fg-diff,.fishgame .fg-msg,.fishgame .fg-sub{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important}   /* kept for screen readers only */
.fishgame .fg-dist{display:none!important}
.fishgame .fg-water{width:var(--ws);height:var(--ws);border-radius:50%!important;border:2px solid color-mix(in srgb,var(--green) 85%,transparent);background:transparent!important;box-shadow:0 0 0 1px rgba(5,8,14,.4),0 0 22px rgba(var(--sh),.45),inset 0 0 0 1px rgba(5,8,14,.3),inset 0 0 26px rgba(var(--sh),.3);overflow:visible;flex:none;opacity:0;animation:none!important;backdrop-filter:none}
.fishgame.ring-in .fg-water{animation:fgring .85s ease both!important}   /* fades in as the ripples start */
@keyframes fgring{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.fishgame .fg-ring{width:var(--rs);height:var(--rs)}
.fishgame.bite .fg-water{border-color:var(--green);box-shadow:0 0 26px rgba(var(--g),.45),inset 0 0 18px rgba(var(--g),.18)}
.fishgame.pulling .fg-water{border-color:var(--value)}
.fishgame.danger .fg-water{border-color:#ff3b3b;box-shadow:0 0 22px rgba(255,59,59,.45)}
/* the question mark sits left of the X, same size */
.fishgame .fg-info{position:absolute!important;top:10px;right:52px;z-index:5;width:30px;height:30px;margin:0;padding:0;border-radius:0;font-size:15px;line-height:1;background:var(--field-bg);color:var(--white);border:1px solid var(--line);text-shadow:none}
.fishgame .fg-info:hover{background:var(--green);color:var(--field-bg);border-color:var(--green)}
.fishgame .fg-x{z-index:5}
/* the cast is drawn over the whole screen */
.fishgame>svg.fg-cast{position:absolute!important;inset:0;width:100%;height:100%;z-index:3!important;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.fishgame .fg-cast .fc-rod{fill:none;stroke:var(--white);stroke-linecap:round}
.fishgame .fg-cast .fc-line{fill:none;stroke:var(--white);opacity:.8}
.fishgame .fg-cast .fc-bob{fill:var(--fc,var(--green));stroke:var(--white);stroke-width:1}
.fishgame .fg-cast .fc-rip{fill:none;stroke:var(--white)}
@media (prefers-reduced-motion:reduce){.fishgame.ring-in .fg-water{animation:none!important;opacity:1}}

/* ===== Patch: enemy window X (it is open by default now); Town Board names show in full on hover ===== */
.cb-inspect .ci-head{position:relative;padding-right:30px}
.cb-inspect .ci-x{position:absolute;right:0;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;background:rgba(var(--sh),.25);border:1px solid var(--line);border-radius:5px;color:var(--dim);cursor:var(--cur-a,pointer)}
.cb-inspect .ci-x:hover{color:var(--green);border-color:var(--green)}
.sq-board .quest .q-name{cursor:var(--cur-n,default)}

/* Patch: the fight monster card: the "?" and the close X swap places (X in the corner of the picture, "?" at the right of the name row) */
.cb-inspect .ci-view .mq-b{display:none}
.cb-inspect .ci-view .mq.peek .mq-pop{display:block}
.cb-inspect .ci-view .ci-x{position:absolute;right:6px;top:6px;transform:none;z-index:4}
.cb-inspect .ci-head .ci-q{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;font-family:inherit}
.cb-inspect .ci-head .ci-q:hover,.cb-inspect .ci-head .ci-q:focus-visible,.cb-inspect .ci-head .ci-q.on{background:var(--green);color:#0a0605}

/* Patch: Market. ENTER sits right of the "Market" title with the trade note right of it; the listings are always shown underneath */
.place-title .mk-enter{padding:3px 12px;font-size:10px;gap:6px;flex:none}
.place-title .mk-enter[hidden],.place-title .mk-note[hidden]{display:none}
.place-title .mk-note{margin:0;min-width:0}
.market>.mk-dropnote{display:block;margin-bottom:8px}.market>.mk-dropnote[hidden]{display:none}
.fm-tools .q-btn.ib:disabled{filter:grayscale(1)}
.place-panel .market>.shop.open{max-height:none;overflow:visible;margin-bottom:0}
.place-panel .market>.shop.open .mk-list{max-height:260px!important;overflow-y:auto!important}

/* Patch: house mode. The chat channel button and Send button match the main chat; EXIT looks like the Enter button with an arrow; Guests is an Invite drop box. */
.sc-form{position:relative;align-items:center}
.sc-form .chan-btn{flex:none;min-width:0;height:30px;padding:0 8px 0 4px;background:none;border:0;border-bottom:1px solid var(--line2);border-radius:0;color:var(--white);display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11px;cursor:var(--cur-a,pointer)}
.sc-form .chan-btn::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.sc-form .send-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;margin:0;border:1px solid var(--line2);border-radius:50%;background:none;color:var(--green);cursor:var(--cur-a,pointer)}
.sc-form .send-ico:disabled{opacity:.4;cursor:var(--cur-n,default)}
.hx-side .hx-enter-big.hx-exit{width:64px;gap:5px}
.hx-side .hx-enter-big.hx-exit svg{width:26px;height:26px}
.hx-side .hx-enter-big.hx-exit .hx-arr{display:inline-flex;line-height:0;color:var(--green)}
.hx-side .hx-enter-big.hx-exit .hx-arr svg{width:8px;height:12px}
.hx-enter-big.hx-exit:hover:not(:disabled){border-color:var(--green)}
.hx-invite::after{content:"";width:5px;height:5px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.inv-pop{position:fixed;z-index:400;width:230px;max-height:calc(100vh / var(--zoom, 1) - 24px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:9px 10px;box-shadow:0 10px 28px rgba(var(--sh),.5);font-size:11px;line-height:1.45;color:var(--white);text-align:left}
.inv-pop .kp-title{display:block;font-weight:500;font-size:10px;color:var(--green);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--line2)}
.inv-pop .kp-sub{display:block;margin:0 0 4px;color:var(--dim);font-size:10px}
.inv-list{display:flex;flex-direction:column;gap:3px;max-height:190px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.inv-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:5px 8px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--white);font:inherit;font-size:11px;text-align:left;cursor:var(--cur-a,pointer)}
.inv-row:hover,.inv-row:focus-visible{background:rgba(var(--g),.1);border-color:var(--green);outline:none}
.inv-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-go{flex:none;color:var(--green);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.inv-here{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line2)}
.inv-pop .kp-foot{margin-top:8px;padding-top:6px;border-top:1px solid var(--line2);color:var(--dim);font-size:10px}

/* Patch: the solo planning page fades into the Map-style content box (no sidebar), the Enter button sits at the bottom */
.hv-scene.hv-win.pp-win{flex-direction:column;align-items:stretch;justify-content:flex-start}
.pp-win>.pp-wrap.solo{flex:1 1 auto;width:100%;max-width:none;height:100%;max-height:none;min-height:0;box-sizing:border-box;padding:14px 18px 12px;gap:12px}
.pp-win .pp-head{flex:none}
.pp-win .pp-cols{flex:1 1 auto;min-height:0;width:100%;max-width:760px;margin:0 auto;grid-template-columns:minmax(0,1fr);align-content:start}
.pp-win .pp-bar{flex:none;padding-top:4px}

/* Patch: dungeon entry, the hero fades in over the glow. The grid's own dark backing (and its shadow) is zoomed 6.5x with the grid and used to black out the glow; it stays clear until the grid is revealed, then fades in with it. */
.scene.dungeon.enterfx .dg-grid{transition:background-color 2.4s ease-in-out,box-shadow 2.4s ease-in-out}
.scene.dungeon.enterfx.zoomfx .dg-grid{background:transparent!important;box-shadow:none!important}

/* Patch: battle text moving into the past-text box. Each past line keeps the colour it had as the big line, and the move is one smooth glide
   (the line shrinks with a transform instead of a font-size jump, and its colour never changes). */
.cb-hist p.t-intro{color:var(--white)}
.cb-hist p.t-hit{color:#5fe08a}
.cb-hist p.t-magic{color:#8fb4ff}
.cb-hist p.t-crit{color:#ffb83d}
.cb-hist p.t-hurt{color:#ff5a4a}
.cb-hist p.t-miss{color:#8d9db3}
.cb-hist p.t-dodge{color:#6fd3c8}
.cb-hist p.t-heal{color:#7fe3a0}
.cb-hist p.t-loot{color:#ffd36b}
.cb-hist p.parryl{color:var(--parry-hi)!important}
@keyframes histland{from{opacity:1;transform:translateY(34px) scale(1.55)}to{opacity:var(--to,.85);transform:none}}
@keyframes histglide{from{transform:translateY(26px)}to{transform:none}}
.cb-hl.snap{animation:histglide .85s cubic-bezier(.22,.7,.2,1)}
.cb-hl.snap p{animation:histfade .85s ease both}
.cb-hl.snap p.h0{--f:1;--to:.85;transform-origin:50% 100%;animation:histland .85s cubic-bezier(.22,.7,.2,1) both;will-change:transform,opacity}
.cb-hl.snap p.hs{--f:.4}

/* Patch: a timed place stops glowing once you have been there at least once (it keeps its colour and the bar at its side) */
.locs button.loc-btn.tm-open.tm-seen:not(.tm-ping){animation:none;box-shadow:inset 2px 0 0 var(--tm);background:none}
.locs button.loc-btn.tm-open.tm-seen.here{background:rgba(var(--tmr),.16)}

/* Patch: the Chronicle opens in the Map's content window (same size and place, over the whole content area) instead of its own page size */
.hv-scene.hv-win.fullpage.chron-win{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;animation:none;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot))}
.hv-win.fullpage.chron-win>.fp-wrap{max-width:none;width:100%;height:100%;max-height:none;flex:1 1 auto;min-height:0;border:0;border-radius:0;box-shadow:none;background:none;box-sizing:border-box;padding:18px 20px 16px}
@media(max-width:900px){.hv-win.fullpage.chron-win>.fp-wrap{overflow-y:auto}}

/* ===== Patch: fishing minigame softer (see-through centre and gem), no hover text while fishing ===== */
.fishgame .fg-core{fill-opacity:.85;transition:fill-opacity .9s ease}
.fishgame.reeling .fg-gem{opacity:.92}
.fishgame .fg-gem{box-shadow:0 0 10px rgba(var(--g),.25)}
.fishgame.danger .fg-ring{filter:drop-shadow(0 0 8px rgba(255,59,59,.4))}
body:has(.fishgame:not(.catching)) .tt{display:none!important}

/* ===== Patch: Race / Element / Pet pages show your own details ===== */
.kin-pop.kp-detail{width:300px}.kin-pop.kp-detail .kp-tx span{display:block}

/* ===== Patch: continuous explore (checkbox in the Explore box, check button beside Auto battle) ===== */
.explore-row .fe-wrap{position:relative;display:flex;flex:1 1 auto;min-width:0}
.fe-cont{position:absolute;top:8px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.06em;color:var(--dim);cursor:var(--cur-a,pointer);user-select:none}
.fe-cont input{-webkit-appearance:none;appearance:none;margin:0;width:13px;height:13px;flex:none;position:relative;background:rgba(0,0,0,.45);border:1px solid var(--line2);border-radius:3px;cursor:var(--cur-a,pointer);transition:border-color .15s,background .15s,box-shadow .15s}
.fe-cont input:hover{border-color:var(--green)}
.fe-cont input:checked{background:rgba(var(--g),.18);border-color:var(--green);box-shadow:0 0 6px rgba(var(--g),.35)}
.fe-cont input:checked::after{content:"";position:absolute;left:3px;top:0;width:3px;height:7px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fe-cont input:focus-visible{outline:1px solid var(--green);outline-offset:1px}
.fe-cont:hover{color:var(--green)}
.cb-stack>.cb-cont{right:46px}
.cb-cont.on{animation:none}
.fe-wrap .forest-explore{padding-right:62px}

/* ===== Patch: the ESCAPED screen is smaller and quieter (title and Continue are the focus) ===== */
.cb-wrap:has(.cb-result.fled) .cb-stack{max-width:300px}
.cb-result.fled{gap:8px}
.cb-result.fled h1{font-size:28px;letter-spacing:.22em;margin-left:.22em}
.cb-result.fled .cb-sub{font-size:10px;line-height:1.4;max-width:260px;color:var(--dim)}
.cb-result.fled .cb-dim{font-size:9px;line-height:1.4;max-width:260px}
.cb-result.fled .cont-btn{transform:scale(.88)}
@media(max-width:600px){.cb-result.fled h1{font-size:22px}}

/* ===== Patch: fishing ring fades between its see-through and solid looks; Fishing button matches the Taming button ===== */
.fishgame .fg-ring{transition:opacity .9s ease}
.fishgame .fg-gem{transition:opacity .9s ease}
.place-title .pt-btns>.pt-fish{width:32px;height:32px;margin:-7px 0}

/* ===== fishing: softly shaded centre circle, and it trembles just before the line breaks from inactivity ===== */
.fishgame .fg-gem{--gc:#3ddc84;background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--gc) 62%,#fff) 0,var(--gc) 42%,color-mix(in srgb,var(--gc) 72%,#000) 100%)}
@keyframes fggemtrem{0%{translate:calc(var(--gshk,0px)*-1) calc(var(--gshk,0px)*.4)}25%{translate:calc(var(--gshk,0px)*.8) calc(var(--gshk,0px)*-.6)}50%{translate:calc(var(--gshk,0px)*-.5) calc(var(--gshk,0px)*-.5)}75%{translate:calc(var(--gshk,0px)*.9) calc(var(--gshk,0px)*.5)}100%{translate:calc(var(--gshk,0px)*-.8) calc(var(--gshk,0px)*-.3)}}
.fishgame .fg-gem.tremble{animation:fggemtrem .08s linear infinite}
@media (prefers-reduced-motion:reduce){.fishgame .fg-gem.tremble{animation:none}}

/* ===== battle text: the glide is now played from app.js (flyStart); the old drop-in / fade / resize animations on the history are switched off ===== */
.cb-hl.snap,.cb-hl.snap p,.cb-hl.snap p.h0,.cb-hl.snap p.hs{animation:none!important}
.cb-hist p{transition:none}

/* ===== killing blow: the enemy box splits along a jagged, glowing red crack ===== */
.cs-stage{position:absolute;inset:0;pointer-events:none;z-index:8}
.cb-inspect.cs-half{pointer-events:none!important;overflow:visible}
.cs-half .cs-tint{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,70,55,.6),rgba(255,30,30,.2) 70%)}
.cs-crack{position:absolute;opacity:0}
.cs-crack svg{width:100%;height:100%;display:block;overflow:visible}
.cs-crack polyline{fill:none;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.cs-crack .cs-glow{stroke:#ff3b30;stroke-width:7;opacity:.75;filter:blur(3px)}
.cs-crack .cs-core{stroke:#ffd9d2;stroke-width:1.8}

/* ===== solo planning page: Equipment on top, then Stats | Passives, buffs and blessing | Items to bring across the full width; all in one view ===== */
.pp-solo{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,12px);min-width:0}
.pp-solo .pp-eqbox{padding:6px 10px}
.pp-low{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.05fr) minmax(0,1.3fr);gap:clamp(6px,1.4vh,12px);align-items:stretch;min-width:0}
.pp-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px 10px;border:1px solid var(--line2);background:rgba(var(--sh),.22)}
.pp-card .sh-sec{margin-top:0;padding-bottom:3px;border-bottom:1px solid var(--line2);color:var(--green)}
.pp-card .sh-p{line-height:1.35}
.pp-card .sh-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.pp-card .sh-s{padding:3px 6px;font-size:10px}
.pp-card .sh-s.wide{grid-column:span 1}
.pp-card .hb-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-card .pt-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.pp-card .pt-slots .slot{width:100%;height:auto;aspect-ratio:1/1;max-width:44px}
.pp-card .pt-lab{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.pp-card .hx-sgrid.sm{grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px;max-height:none}
.pp-card .hx-sgrid .slot{aspect-ratio:1/1}
.pp-win .pp-cols{overflow-y:auto}
.pp-win .pp-eqtop{gap:10px}.pp-win .pp-eqtop .eq-cats{gap:5px}
@media(max-width:760px){.pp-low{grid-template-columns:minmax(0,1fr)}}
@media(max-height:760px){.pp-win>.pp-wrap.solo{padding:8px 14px 8px;gap:6px}.pp-card{padding:6px 8px;gap:4px}.pp-card .sh-s{padding:2px 5px}.pp-win .pp-eqtop .eq-fig{width:80px;height:94px}}
.pp-card .hx-sgrid.sm{max-height:112px;overflow-y:auto;align-content:start;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

/* ===== pixel-art icons (pixgear.js): they keep their own colours, so the tile states dim them instead of recolouring ===== */
.px-ico canvas{pointer-events:none}
.tt-tile.locked .px-ico{opacity:.35;filter:grayscale(.7)}
.tt-tile.open .px-ico{opacity:.85}
.em-el:not(.on) .px-ico{opacity:.6}
.em-el.on .px-ico{filter:drop-shadow(0 0 4px rgba(var(--g),.55))}

/* ===== PATCH 36 ===== */

/* Locations list: still scrolls (wheel, touch, keys) but shows no scrollbar */
.locs,.locs-scroll{scrollbar-width:none!important;-ms-overflow-style:none}
.locs::-webkit-scrollbar,.locs-scroll::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}

/* Bank: the page and everything inside it still scrolls, but no scrollbar is drawn */
.place-panel.bankview,.place-panel.bankview *,.bank,.bank *{scrollbar-width:none!important;-ms-overflow-style:none}
.place-panel.bankview::-webkit-scrollbar,.place-panel.bankview *::-webkit-scrollbar,.bank::-webkit-scrollbar,.bank *::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}

/* Quest Book (opened from the Quest Journal's Expand button): the centre box keeps one fixed layout no matter which place you are at,
   so leftover layout rules from a place (shops, crafting, world panels, dungeon grid) can never bend or stretch it */
.place-panel.qmode{display:flex!important;flex-direction:column!important;overflow:hidden!important;justify-content:flex-start!important;align-items:stretch!important}
.place-panel.qmode>:not(.place-title):not(.qbook){display:none!important}
.place-panel.qmode>.qbook:not(.mapbook):not(.annbook):not(.invbook):not(.wmbook):not(.tamebook){display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;min-width:0!important;max-height:none!important;position:static!important;margin:0}
.place-panel.qmode>.place-title{flex:none}
.place-panel.qmode>.qbook .qb-body{flex:1 1 auto;min-height:0;max-height:none;overflow-x:hidden}

/* Planning Table page: the page behind the content boxes is darker than the boxes, for contrast */
:root:not([data-theme="light"]) .hv-scene.hv-win.pp-win{background:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.52)),linear-gradient(180deg,var(--panel-top),var(--panel-bot))}
:root[data-theme="light"] .hv-scene.hv-win.pp-win{background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),linear-gradient(180deg,var(--panel-top),var(--panel-bot))}
.pp-win .pp-card,.pp-win .pp-eqbox,.pp-win .sh-hero{background:linear-gradient(180deg,var(--panel-top),var(--panel-bot))!important;border-color:var(--line2)}

/* Patch 36b: Chronicle and Map buttons use the same colour as the Locations header */
.side-nav .nav-wide{background:var(--field-bg,#120a08)}
.side-nav .nav-wide:hover:not(:disabled),.side-nav .nav-wide.on{background:var(--field-bg,#120a08);box-shadow:inset 0 0 0 100px rgba(var(--g),.12)}

/* Patch 36c: the house Invite button is a little darker */
.hx-invite{background:rgba(0,0,0,.30)}
.hx-invite:hover{background:rgba(0,0,0,.30);box-shadow:inset 0 0 0 100px rgba(var(--g),.10)}

/* Patch 36d: the house floor selector sits at the bottom right of the room window (its list opens upward) */
.hx-flsel{top:auto;bottom:8px;left:auto;right:8px}
.hx-fmenu{top:auto;bottom:calc(100% + 4px);left:auto;right:0}

/* Patch 36e: "Day X, Season I" in the stats box; the season part is a darker shade and shows the season info on hover */
.stats .day-row>.day-season{margin-left:-6px;white-space:nowrap;color:color-mix(in srgb,var(--green) 62%,#000);cursor:var(--cur-a,pointer);outline:none}
.stats .day-row>.day-season:hover,.stats .day-row>.day-season:focus-visible{color:var(--green)}

/* Patch 38: the Blacksmith's Weapon Mastery button (26px) no longer makes the title row taller than other places, so every Castle Town title sits in the same spot */
.pt-act .wm-txt,.pt-act .wm-txt.wm-ico{margin-top:-5px;margin-bottom:-5px}
.pt-act:has(>.wm-txt){align-items:center}

/* ===== Patch 40: the Kitchen at the Inn. One block over the whole content area, exactly like the Map: a big animated pixel pot, your ingredients below, the recipe book on the right ===== */
.kitchbook{display:none}
#game.kitchfs .window>.side,#game.kitchfs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.kitchfs .window{position:relative}
#game.kitchfs .window>.kitchbook{display:flex;flex-direction:row;gap:0;position:absolute;inset:0;z-index:8;margin:0;padding:0;overflow:hidden;box-sizing:border-box;container-type:inline-size;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both}
.kt-main{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}
.kt-scene{position:relative;flex:1 1 50%;min-height:150px;overflow:hidden;background:#0b0f0c;border-radius:9px 0 0 0}
.kt-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%;image-rendering:pixelated;image-rendering:crisp-edges}
.kt-hd{position:absolute;left:10px;top:9px;z-index:2;display:flex;align-items:center;gap:12px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(var(--sh),.62);font-size:11px;letter-spacing:.06em}
.kt-t{display:inline-flex;align-items:center;gap:6px;color:var(--green);text-transform:uppercase;font-weight:600}
.kt-lv{display:inline-flex;align-items:center;gap:8px;color:var(--dim)}
.kt-xp{display:inline-block;width:54px;height:5px;border:1px solid var(--line);background:rgba(var(--sh),.5);position:relative}
.kt-xp b{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.kt-popwrap{position:absolute;left:50%;top:44%;transform:translateX(-50%);z-index:3;pointer-events:none}
.kt-pop{display:flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--green);border-radius:99px;background:rgba(var(--sh),.78);color:var(--white);font-size:12px;white-space:nowrap;animation:ktpop 2.2s ease-out both}
.kt-pop.bad{border-color:#e0583e;color:#f4b8a8}
@keyframes ktpop{0%{opacity:0;transform:translateY(14px) scale(.9)}15%{opacity:1;transform:translateY(0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
.kt-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:8px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(var(--sh),.28)}
.kt-slots{display:flex;gap:6px}
.kt-slot{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;border:1px dashed var(--line);border-radius:7px;background:rgba(var(--sh),.4);color:var(--dim);font:500 14px/1 "IBM Plex Mono",monospace}
button.kt-slot.full{border-style:solid;border-color:var(--green);background:rgba(var(--g),.12);cursor:var(--cur-a,pointer)}
button.kt-slot.full:hover:not(:disabled),button.kt-slot.full.pad-hover{background:rgba(var(--g),.24);filter:none}
.kt-acts{display:flex;gap:8px;align-items:center}
.kt-cook{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;font-size:11px}
.kt-cook:not(:disabled){box-shadow:0 0 10px rgba(var(--g),.35)}
.kt-msg{flex:1 1 100%;margin:0;text-align:center;font-size:11px;line-height:1.4;color:var(--dim);min-height:15px}
.kt-msg.bad{color:#f0a08a}
.kt-ings{flex:0 1 36%;min-height:84px;overflow-y:auto;padding:8px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px;align-content:start;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.kt-ing{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 7px;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--white);font:inherit;font-size:11px;text-align:left;cursor:var(--cur-a,pointer)}
.kt-ing .ico,.kt-rn .ico,.kt-hd .ico,.kt-pop .ico,.kt-cook .ico,.kt-slot .ico{flex:none;margin:0}
.kt-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-ct{flex:none;font-weight:500;font-size:10px;color:var(--dim)}
.kt-ing:hover:not(:disabled),.kt-ing.pad-hover{border-color:var(--green);background:rgba(var(--g),.18);filter:none}
.kt-ing.on{border-color:var(--green);background:rgba(var(--g),.16)}
.kt-ing.on .kt-ct{color:var(--green)}
.kt-ing:disabled{opacity:.5;cursor:var(--cur-n,not-allowed)}
.kt-none{grid-column:1/-1;margin:6px 4px;color:var(--dim);font-size:11px;line-height:1.5}
.kt-panel .wm-fl{font-size:10px}
.kt-rc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:5px 7px;border:1px solid var(--line2);border-radius:6px}
.kt-rc.can{border-color:var(--line)}
.kt-rc.low{opacity:.6}
.kt-rc.hid{opacity:.55}
.kt-rn{display:flex;align-items:center;gap:6px;min-width:0;grid-column:1/-1}
.kt-rn b{font-weight:500;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-rn span{margin-left:auto;flex:none;color:var(--dim);font-size:10px}
.kt-ri{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:10px;color:var(--dim)}
.kt-ri .ok{color:var(--green)}.kt-ri .no{color:var(--dim)}
.kt-use{padding:2px 9px}
@media(max-width:800px){
  #game.kitchfs .window>.side,#game.kitchfs .window>.center{display:none}
  #game.kitchfs .window>.kitchbook{position:relative;inset:auto;flex-direction:column;height:calc(100vh / var(--zoom,1) - 150px);min-height:480px}
  .kt-scene{border-radius:9px 9px 0 0;min-height:130px}
  .kt-panel.wm-panel{flex:0 0 auto;max-height:34%}
}

/* ===== Patch: the Alchemy Table at the Witch's Hut. Exactly the Kitchen's window (same picture box, slots, reagent grid and recipe book), with a clockwork table instead of a pot ===== */
.alchbook{display:none}
#game.alchfs .window>.side,#game.alchfs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.alchfs .window{position:relative}
#game.alchfs .window>.alchbook{display:flex;flex-direction:row;gap:0;position:absolute;inset:0;z-index:8;margin:0;padding:0;overflow:hidden;box-sizing:border-box;container-type:inline-size;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both}
.al-pick{flex:1 1 100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.al-pick[hidden]{display:none}
.al-pl{color:var(--dim);font-size:11px}
.al-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px}
.al-chip .ico{flex:none;margin:0}
.al-chip.on{border-color:var(--green);color:var(--green);background:rgba(var(--g),.16)}
.al-brew .ico{flex:none;margin:0}
@media(max-width:800px){
  #game.alchfs .window>.side,#game.alchfs .window>.center{display:none}
  #game.alchfs .window>.alchbook{position:relative;inset:auto;flex-direction:column;height:calc(100vh / var(--zoom,1) - 150px);min-height:480px}
}

/* Patch: item pictures in the small bottom-right inventory fill more of their box (same 7-column grid, same width and spacing) */
.inv .pk-grid .slot .ico{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.inv .pk-grid .slot .ico svg,.inv .pk-grid .slot .ico canvas{width:68%!important;height:68%!important}
.inv .pk-grid .slot:not(.full) .ico svg,.inv .pk-grid .slot:not(.full) .ico canvas{width:52%!important;height:52%!important}

/* ===== Buffs / debuffs button: one wide, clear button. The enemy's sits just left of its race and rarity icons; yours sits centered between the Stamina bar and the inventory icon ===== */
.cb-fx.fxbtn{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:7px;width:auto;min-width:64px;height:24px;padding:0 8px;margin:0;box-sizing:border-box;flex:none;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--g),.06);color:var(--dim);cursor:var(--cur-a,help);white-space:nowrap}
.cb-fx.fxbtn:hover{border-color:var(--green)}
.cb-fx.fxbtn:has(.fx-i.debuff){border-color:rgba(255,90,90,.6)}
.cb-fx.fxbtn:has(.fx-i.buff){border-color:rgba(95,224,138,.6)}
.cb-fx.fxbtn:has(.fx-i.debuff):has(.fx-i.buff){border-color:var(--line2)}
.cb-fx.fxbtn .fx-i{position:static;display:inline-flex;align-items:center;gap:3px;width:auto;height:auto;padding:0;border:0;background:none}
.cb-fx.fxbtn .fx-i.more{border:0;font-size:11px}
.cb-fx.fxbtn .fx-i em{position:static;transform:none;min-width:0;padding:0;border:0;background:none;font:700 10px/1 var(--mono,inherit);color:inherit}
.cb-fx.fxbtn .fx-none{width:auto;height:auto;border:0;opacity:.7;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.cb-syms .cb-fx.fxbtn{margin-right:3px}
.cb-foot .cb-me{flex:1 1 auto;min-width:0}
.cb-foot .cb-me .cb-fx.fxbtn{margin:0 auto}
/* ===== Patch: the Forge at the Blacksmith. Built exactly like the Kitchen: one block over the whole content area, a big animated pixel smelter and anvil, your materials below, the recipe book on the right ===== */
.forgebook{display:none}
#game.forgefs .window>.side,#game.forgefs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.forgefs .window{position:relative}
#game.forgefs .window>.forgebook{display:flex;flex-direction:row;gap:0;position:absolute;inset:0;z-index:8;margin:0;padding:0;overflow:hidden;box-sizing:border-box;container-type:inline-size;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both}
.forgebook .kt-scene{background:#0d0910}
.forgebook .kt-cv{object-position:50% 62%}
.kt-pickrow{flex:1 1 100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.kt-pickrow[hidden]{display:none}
.kt-pk{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;font-size:11px}
.kt-pk .ico{flex:none;margin:0}
.kt-pk i{font-style:normal;color:var(--dim);font-size:10px}
.kt-pk.on{border-color:var(--green);background:rgba(var(--g),.16)}
.kt-gifts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.forgebook .kt-ing .ico,.forgebook .kt-rn .ico,.forgebook .kt-hd .ico,.forgebook .kt-pop .ico,.forgebook .kt-cook .ico,.forgebook .kt-slot .ico{flex:none;margin:0}
@media(max-width:800px){
  #game.forgefs .window>.side,#game.forgefs .window>.center{display:none}
  #game.forgefs .window>.forgebook{position:relative;inset:auto;flex-direction:column;height:calc(100vh / var(--zoom,1) - 150px);min-height:480px}
  .forgebook .kt-scene{border-radius:9px 9px 0 0;min-height:130px}
  .forgebook .kt-panel.wm-panel{flex:0 0 auto;max-height:34%}
}

/* ===== Patch: the Song choice in the sound menu (a third button that opens a list of songs) ===== */
.pal-menu.snd-menu{width:168px}
.snd-songs{display:flex;flex-direction:column;gap:1px;margin:2px 0 2px 8px;padding-left:6px;border-left:1px solid var(--line)}
.snd-songs[hidden]{display:none}
.snd-pick{display:flex!important;align-items:center;width:100%;box-sizing:border-box;font:inherit;font-size:11px;letter-spacing:.04em;padding:4px 8px;color:var(--dim)}
.snd-pick.on{color:var(--green);border-color:transparent}
.snd-pick:hover{color:var(--white)}
.snd-pick.on:hover{color:var(--green)}

/* ===== Patch: the Artisan Workshop at the Town Hall. Built exactly like the Kitchen, the Forge and the Alchemy Table: one block over the whole content area, a big animated pixel workbench, your materials below, the recipe book on the right ===== */
.artbook{display:none}
#game.artfs .window>.side,#game.artfs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.artfs .window{position:relative}
#game.artfs .window>.artbook{display:flex;flex-direction:row;gap:0;position:absolute;inset:0;z-index:8;margin:0;padding:0;overflow:hidden;box-sizing:border-box;container-type:inline-size;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both}
.artbook .kt-scene{background:#150e09}
.artbook .kt-cv{object-position:50% 60%}
.at-pickrow{max-height:74px;overflow-y:auto;align-content:flex-start}
.artbook .kt-ing .ico,.artbook .kt-rn .ico,.artbook .kt-hd .ico,.artbook .kt-pop .ico,.artbook .kt-cook .ico,.artbook .kt-slot .ico{flex:none;margin:0}
@media(max-width:800px){
  #game.artfs .window>.side,#game.artfs .window>.center{display:none}
  #game.artfs .window>.artbook{position:relative;inset:auto;flex-direction:column;height:calc(100vh / var(--zoom,1) - 150px);min-height:480px}
  .artbook .kt-scene{border-radius:9px 9px 0 0;min-height:130px}
  .artbook .kt-panel.wm-panel{flex:0 0 auto;max-height:34%}
}

/* ===== Patch: Enchanting, Gemcutting and Lithomancy windows. Built exactly like the Kitchen, the Forge and the Alchemy Table: one block over the whole content area, a big animated pixel workbench, your materials below, the recipe book on the right ===== */
.cwbook{display:none}
#game.cwfs .window>.cwbook:not(.on){display:none}
#game.cwfs .window>.side,#game.cwfs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.cwfs .window{position:relative}
#game.cwfs .window>.cwbook.on{display:flex;flex-direction:row;gap:0;position:absolute;inset:0;z-index:8;margin:0;padding:0;overflow:hidden;box-sizing:border-box;container-type:inline-size;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both}
.cwbook.cw-ench .kt-scene{background:#0a0711}
.cwbook.cw-gem .kt-scene{background:#0d1a20}
.cwbook.cw-litho .kt-scene{background:#0a1014}
.cwbook .kt-cv{object-position:50% 60%}
.at-pickrow{max-height:74px;overflow-y:auto;align-content:flex-start}
.cwbook .kt-ing .ico,.cwbook .kt-rn .ico,.cwbook .kt-hd .ico,.cwbook .kt-pop .ico,.cwbook .kt-cook .ico,.cwbook .kt-slot .ico{flex:none;margin:0}
@media(max-width:800px){
  #game.cwfs .window>.side,#game.cwfs .window>.center{display:none}
  #game.cwfs .window>.cwbook.on{position:relative;inset:auto;flex-direction:column;height:calc(100vh / var(--zoom,1) - 150px);min-height:480px}
  .cwbook .kt-scene{border-radius:9px 9px 0 0;min-height:130px}
  .cwbook .kt-panel.wm-panel{flex:0 0 auto;max-height:34%}
}

/* new-day login: the day post fades in slowly over the waves, and the "best in full screen" prompt fades in slowly once the game screen is back */
.fullpage.daily-in{animation:fadein .9s ease both}
.modal.fs-ask{animation:fadein 1.6s ease both}
/* the forum frame shows the game page's waves instead of its own */
html.framed,html.framed body{background:transparent}html.framed .bg{display:none}

/* start-up and new-day transitions */
.boot-late{opacity:0;animation:fadein .6s ease 1.5s both}   /* "Entering the kingdom..." only shows if the realm is slow to answer */
#root.boot-in{animation:fadein .5s ease backwards}
body.tb-hold .toolbar{opacity:0!important;visibility:hidden;transition:none!important}   /* the menu icons appear only once they are in place */
body.login-hold .toolbar{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.modal.fs-ask{animation:fadein 2.2s ease both}

/* sound menu: icons instead of words, and Auto as the header on top */
.snd-ico{display:inline-flex;align-items:center;color:var(--white)}.snd-opt.on .snd-ico{color:var(--green)}
.snd-auto{display:block!important;width:100%;box-sizing:border-box;margin:0 0 4px;padding:5px 8px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:6px 6px 0 0;font:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--dim)}
.snd-auto:hover{color:var(--white)}.snd-auto.on,.snd-auto.on:hover{color:var(--green);text-shadow:0 0 8px currentColor}

/* Inn Event Board: a plain, tidy list of the month's events */
.evbox .evb-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 8px}
.evbox .evb-mon{color:var(--white);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.evbox .evb-row{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(var(--hi),.04)}.evbox .evb-row:last-child{border-bottom:0}
.evbox .evb-date{color:var(--green);font-size:11px;letter-spacing:.04em}
.evbox .evb-main{display:flex;flex-direction:column;gap:2px;min-width:0}.evbox .evb-name{color:var(--white)}.evbox .evb-text{color:var(--dim);font-size:11px;line-height:1.35}
.evbox .evb-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap}.evbox .evb-tag.now{color:var(--green)}
.evbox .evb-row.past{opacity:.5}
.evbox .evb-none{color:var(--dim);margin:6px 0;text-align:center}

/* Patch: the House title gets a few pixels of room beneath it */
.place-panel>.place-title~.house:not([hidden]){margin-top:6px}

/* Patch: Wizard's Tower. The spell page fits without scrolling: the two spell trees sit side by side, the ultimates are one tidy strip, and the element picker uses the pixel-art element icons. */
.tt-tree{margin-top:8px;padding:8px 12px}
.tt-head{margin-bottom:6px}
.tt-head .em-eltog-h{width:auto;flex:none;gap:6px}
.tt-head .em-eltog-h .em-el{flex:none;width:34px;height:28px}
.tt-tree .em-tabs{margin:4px 0}
.em-page:not(.compact) .tt-trees{display:flex;gap:28px;justify-content:center;align-items:flex-start;flex-wrap:wrap;width:100%}
.em-page:not(.compact) .tt-tcol{display:flex;flex-direction:column;align-items:center}
.em-page:not(.compact) .tt-tcol>.em-sec{margin:0 0 6px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.em-page:not(.compact) .em-ult{width:100%;box-sizing:border-box;margin-top:8px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.18);display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.em-page:not(.compact) .em-ult>.em-sec{margin:0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.em-page:not(.compact) .em-slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.em-page:not(.compact) .em-slot{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line2);border-radius:6px;font-size:10px;color:var(--dim)}
.em-page:not(.compact) .em-slot.on{color:var(--green);border-color:var(--green)}
.em-page:not(.compact) .em-ult>.em-q,.em-page:not(.compact) .em-ult>.em-note{grid-column:1/-1;margin:0;font-size:10px;line-height:1.4;color:var(--dim)}
.em-page:not(.compact) .em-q{display:flex;align-items:center;justify-content:space-between;gap:10px}.em-page:not(.compact) .em-q .qst-btn{white-space:nowrap;flex:none}
.em-page:not(.compact) .em-q.col{flex-direction:column;align-items:flex-start;gap:6px}
.em-page:not(.compact) .em-opts{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:800px){.em-page:not(.compact) .em-ult{grid-template-columns:1fr}.em-page:not(.compact) .em-slots{justify-content:flex-start}}
/* Patch: Wizard's Tower on shorter windows: the same page, a little tighter, so it still fits without scrolling */
@media(max-height:820px) and (min-width:801px){
  .tt-tree{padding:6px 10px;margin-top:6px}
  .tt-head{margin-bottom:3px}
  .tt-tree .em-tabs{margin:3px 0}
  .tt-tree .em-tab{padding:4px 8px}
  .tt-tree .tt-info{padding:6px 9px;gap:4px}
  .tt-tree .tt-info .q-btn{padding:3px 8px}
  .tt-tree .tt-tcol>.em-sec{margin-bottom:3px}
  .tt-tree .tt-tile{height:36px}
  .tt-tree .tt-gap{height:20px}.tt-tree .tt-gap .tt-bar{top:10px}.tt-tree .tt-gap .tt-dot{top:6px}
  .em-page:not(.compact) .em-ult{margin-top:5px;padding:5px 9px;gap:4px 12px}
  .em-page:not(.compact) .em-slot{padding:2px 8px}
}

/* ===== Location button rows: Kitchen | Pub, Artisan | Shop, Forge | Gemcutting, Enchanting | Faith, Alchemy | Lithomancy ===== */
.loc-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;flex:none}
.loc-duo[hidden]{display:none}
.loc-duo-btn{display:flex;align-items:center;justify-content:center;min-height:68px;padding:10px 8px;background:rgba(var(--sh),.38);border:1px solid var(--line2);border-radius:8px;color:var(--green);font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:center;cursor:var(--cur-a,pointer)}
.loc-duo-btn:disabled{opacity:.45;cursor:var(--cur-n,default)}
.duo-box.collapsed{display:none}

/* The button rows stretch across the page and down to the bottom of the place window */
.place-panel.hasduo{display:flex;flex-direction:column;overflow:hidden}
.place-panel.hasduo>*{flex:none}
.place-panel.hasduo>.loc-duo{flex:1 1 auto!important;min-height:68px;grid-template-rows:minmax(0,1fr);margin-bottom:0}
.place-panel.hasduo>.loc-duo[hidden]{display:none}
.loc-duo-btn{height:100%;width:100%;box-sizing:border-box}

/* ===== Player profile popup: compact card with pixel icons ===== */
.pf.pf-card{width:min(390px,100%);padding-bottom:12px}
.pf-card .pf-top{display:flex;align-items:center;gap:10px;margin-right:30px}
.pf-card .pf-face{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.4)}
.pf-card .pf-who{min-width:0;flex:1}
.pf-card .pf-head{margin-right:0}.pf-card .pf-head h2{font-size:14px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pf-card .pf-sub{margin:2px 0 0}.pf-card .pf-title{margin:2px 0 0}
.pf-card .pf-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.pf-card .pf-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border:1px solid var(--line2);border-radius:99px;background:rgba(var(--sh),.3);color:var(--white);font:inherit;font-size:10.5px;letter-spacing:.02em}
.pf-card .pf-season{color:var(--green);cursor:var(--cur-a,pointer);border-bottom:1px solid var(--line2)}
.pf-card .pf-stats{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:10px}
.pf-card .pf-st{display:flex;flex-direction:column;align-items:center;padding:3px 0;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.3);font-size:9px;color:var(--dim);letter-spacing:.06em}
.pf-card .pf-st b{font-weight:500;color:var(--value);font-size:12px;letter-spacing:0}.pf-card .pf-st em{font-style:normal;color:var(--green);font-size:8px;margin-left:1px}
.pf-card .pf-label{margin:10px 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.pf-card .pf-eq{grid-template-columns:repeat(8,1fr);gap:4px}
.pf-card .pf-skrow{display:flex;align-items:center;gap:8px;margin-top:4px}
.pf-card .pf-sklbl{flex:none;width:58px;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.pf-card .pf-sks{display:flex;flex-wrap:wrap;gap:4px}
.pf-card .pf-sk{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 3px;border:1px solid var(--line2);border-radius:6px;background:rgba(var(--sh),.3);font-size:10.5px}
.pf-card .pf-sk b{font-weight:500;color:var(--value)}
.pf-card .pf-actions{margin-top:12px}

/* Player popup: small, about the size of the Stats box */
.pf.pf-card{width:min(280px,100%);padding:10px 12px 10px;font-size:11px;max-height:calc(100vh / var(--zoom) - 32px)}
.pf-card .pf-top{gap:8px;margin-right:26px}
.pf-card .pf-face{width:38px;height:38px}
.pf-card .pf-head h2{font-size:12px;gap:4px}
.pf-card .pf-tier{display:none}
.pf-card .pf-sub{font-size:10px}.pf-card .pf-title{font-size:10.5px}
.pf-card .pf-chips{gap:4px;margin-top:6px}
.pf-card .pf-chip{padding:1px 6px;font-size:9.5px;gap:4px}
.pf-card .pf-stats{grid-template-columns:repeat(4,1fr);gap:3px;margin-top:7px}
.pf-card .pf-st{flex-direction:row;justify-content:space-between;padding:2px 6px;font-size:9px}
.pf-card .pf-st b{font-size:11px}
.pf-card .pf-label{margin:7px 0 3px;font-size:9px}
.pf-card .pf-eq{grid-template-columns:repeat(8,1fr);gap:3px}
.pf-card .pf-skrow{gap:5px;margin-top:3px;align-items:flex-start}
.pf-card .pf-sklbl{width:46px;font-size:8px;padding-top:4px}
.pf-card .pf-sks{gap:3px}
.pf-card .pf-sk{padding:0 4px 0 2px;font-size:10px}
.pf-card .pf-actions{margin-top:8px;gap:5px}.pf-card .pf-actions .mini-button{padding:2px 9px;font-size:10px}

/* ===== Patch: location button rows. Steady height (no jumping), larger centered title, dark vector silhouette behind it ===== */
@media(min-width:801px){
  .place-panel.hasduo>.loc-duo{flex:0 1 auto!important;height:var(--duo-h,auto);margin-top:auto}
}
.loc-duo-btn{position:relative;overflow:hidden;font-size:18px;letter-spacing:.14em}
.loc-duo-btn .duo-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.055;pointer-events:none}
.loc-duo-btn .duo-art svg{--px:10px;width:calc(var(--w) * var(--px));height:calc(var(--h) * var(--px));max-width:88%;max-height:88%;display:block;fill:#a9c0e0}
.loc-duo-btn .duo-name{position:relative;z-index:1}
@media(max-width:520px){.loc-duo-btn{font-size:14px;letter-spacing:.1em}.loc-duo-btn .duo-art svg{--px:5px}}

/* ===== Patch: House Enter button (title row, like the Market) and a little more contrast on both Enter buttons ===== */
.mk-enter{background:rgba(var(--sh),.62)}
.place-title .hs-enter[hidden],.place-title .hs-enter~.mk-note[hidden]{display:none}
.mk-enter:disabled{opacity:.45;cursor:var(--cur-n,default)}

/* ===== Patch: Wizard's Tower. The Elemental Mastery box reaches down to the bottom of the content window, so the gap beneath it matches the gap on its left and right ===== */
@media(min-width:801px){
  .place-panel.hastower{display:flex;flex-direction:column}
  .place-panel.hastower>*{flex:none}
  .place-panel.hastower>.tt-tree:not([hidden]){flex:1 0 auto}
}

/* ===== Patch: the Pub is a duo spot. Drink rows have a Buy and a Round button ===== */
.shop-row.pub-row{grid-template-columns:24px minmax(0,1fr) auto 58px 62px}
.pub-note{margin:8px 0 6px;color:var(--dim);font-size:11px;line-height:1.5}
.pub-active{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:5px 9px;border:1px solid var(--green);border-radius:6px;background:rgba(var(--g),.08);color:var(--green);font-size:11px}
.pub-active .ico{flex:none}
.shop-row.pub-row .q-btn:disabled{opacity:.4}

/* ===== Patch: dungeons are walked with W A S D. Squares no longer react to the mouse (the lantern, which still uses clicks, turns the pointer back on); the square you are facing lights up while a key is down ===== */
.dg-grid.keys .dg-cell,.co-grid.keys .dg-cell{pointer-events:none}
.dg-grid .dg-cell.dg-ahead,.co-grid .dg-cell.dg-ahead{opacity:1!important;background:rgba(var(--g),.34)!important;border-color:var(--green)!important;box-shadow:0 0 18px rgba(var(--g),.7)!important}

/* ===== Farm: a pixel-art preview like the House, with an Enter button in the title row ===== */
.place-title .fm-enter[hidden],.place-title .fm-enter~.mk-note[hidden]{display:none}
.fm-cv{position:absolute;left:0;top:0;display:block;image-rendering:pixelated}
.fm-stage{position:relative;flex:0 0 auto;background:#59993d}
.fm-room{display:flex;justify-content:center}
.fm-hit{position:absolute;inset:0;z-index:2;cursor:var(--cur-a,pointer)}
.fm-ghost{position:absolute;z-index:3;pointer-events:none;box-sizing:border-box}
.fm-ghost.hov{border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.08)}
.fm-ghost.ok{border:2px solid var(--green);background:rgba(var(--g),.25)}
.fm-ghost.no{border:2px solid #ff5a5a;background:rgba(255,90,90,.25)}
.fm-sel{position:absolute;z-index:3;pointer-events:none;box-sizing:border-box;border:2px solid var(--green);box-shadow:0 0 10px rgba(var(--g),.5)}
.fm-face{position:absolute;left:0;top:0;z-index:3;pointer-events:none;box-sizing:border-box;border:2px dashed rgba(255,255,255,.7);transition:transform 90ms linear}
.fm-face.ok{border-style:solid;border-color:var(--green);box-shadow:0 0 10px rgba(var(--g),.55)}
.fm-ico-cv{display:block;image-rendering:pixelated;flex:none}
.fm-stash .slot{display:flex;align-items:center;justify-content:center}
.fm-stash .slot.on{border-color:var(--green)}
.hx-side .shop-row .fm-ico-cv{margin:auto}
.fm-plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.fm-prow{display:flex;align-items:center;gap:6px;padding:3px 6px;background:transparent;border:1px solid var(--line);color:var(--white);font:inherit;font-size:10px;text-align:left;cursor:var(--cur-a,pointer);min-width:0}
.fm-prow.ready{border-color:var(--green);color:var(--green)}
.fm-prow:hover{border-color:var(--white)}
.fm-pn{color:var(--dim);flex:none;width:12px}.fm-pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fm-faceline{font-size:11px;min-height:15px;line-height:15px}
.fm-seeds{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.fm-seed{display:flex;align-items:center;gap:7px;padding:4px 8px;background:transparent;border:1px solid var(--line);color:var(--white);font:inherit;font-size:11px;text-align:left;cursor:var(--cur-a,pointer)}
.fm-seed .fm-sn{text-align:left;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fm-seed b{font-weight:500;color:var(--dim)}
.fm-seed.on{border-color:var(--green);color:var(--green);background:rgba(var(--g),.1)}
.fm-quick{display:flex;flex-wrap:wrap;gap:6px}
.fm-arrows{display:flex;gap:6px;flex-wrap:wrap}
.fm-under{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line2);background:rgba(var(--sh),.22)}
.fm-under .pf-label{margin:0}

/* ---------- gathering masters, the training table, tools, and the walking gathering scene (gather.js) ---------- */
.pop-note{max-width:min(88vw,430px);text-align:center;line-height:1.45}
.gw-ti,.gw-cv,.gw-bgc,.gw-fx,.gw-ov{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.gw-ti,.gw-cv{display:block}
.shop.craftbox.seedbox.ap-box.gw-box.open{max-height:none;overflow:visible}
.gw-cards{display:flex;flex-direction:column;gap:10px;padding:8px 2px 4px}
.gw-card{display:flex;flex-direction:column;gap:8px;min-height:clamp(215px,calc((100vh / var(--zoom, 1) - 330px) / 3),330px);padding:12px 14px 12px;border:1px solid var(--line2);border-radius:10px;background:linear-gradient(180deg,rgba(var(--g),.07),rgba(0,0,0,.3));box-sizing:border-box;min-width:0}
.gw-card.done{opacity:.74}
.gw-card-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.gw-art{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center;width:104px;height:96px;padding:4px 4px 8px;border:1px solid var(--line2);border-radius:8px;background:linear-gradient(180deg,#9fd6ef 0,#cfe9d0 62%,#4f9f45 62%,#3f8a3a 100%);box-sizing:border-box;overflow:hidden}
.gw-who{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 220px}
.gw-name{font-weight:500;font-size:15px;letter-spacing:.04em;color:var(--white)}
.gw-sub{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green);letter-spacing:.06em}
.gw-quote{margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--dim);font-style:italic}
.gw-tool{flex:1 1 200px;max-width:260px;display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.25);box-sizing:border-box}
.gw-tool>div{display:flex;flex-direction:column;gap:2px;min-width:0}.gw-tool b{font-weight:500;font-size:12px;color:var(--white)}.gw-tool em{font-style:normal;font-size:10.5px;color:var(--dim);line-height:1.35}
.gw-sec{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);padding-bottom:3px;border-bottom:1px solid var(--line2)}
.gw-card-bot{display:flex;gap:14px;align-items:stretch;flex:1 1 auto;flex-wrap:wrap}
.gw-facts{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:5px;font-size:11.5px;line-height:1.45;color:var(--white);flex:1 1 260px;min-width:0}
.gw-facts li::marker{color:var(--green)}
.gw-side{flex:0 0 160px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;margin-left:auto}
.gw-prog{margin:0;font-size:10.5px;line-height:1.4;color:var(--dim);letter-spacing:.03em;text-align:center}.gw-prog.ok{color:var(--green)}
.gw-go{justify-content:center;padding:12px 16px}
/* the training table */
.gw-plan .gw-wrap{width:100%;max-width:none;box-sizing:border-box}
.gw-cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%;max-width:900px;margin:0 auto;overflow-y:auto;align-content:start;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.gw-col{display:flex;flex-direction:column;gap:10px;min-width:0}
@media(max-width:760px){.gw-cols{grid-template-columns:minmax(0,1fr)}}
.gw-plan .pp-head .sh-av{margin-left:auto;width:34px;height:42px}
.gw-eq{display:flex;gap:10px;align-items:center;padding:7px 8px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.2)}
.gw-eq.on{border-color:var(--green);background:rgba(var(--g),.1)}
.gw-eq-ico{flex:0 0 auto;display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line2);border-radius:6px;background:rgba(0,0,0,.3)}
.gw-eq-txt{display:flex;flex-direction:column;gap:2px;min-width:0}.gw-eq-txt b{font-weight:500;font-size:12px;color:var(--white)}
.gw-eq-bonus{font-size:10.5px;color:var(--green)}
.gw-eq-next{font-size:10px;color:var(--dim)}.gw-eq-next.ok{color:var(--green)}
.gw-pips{display:flex;gap:3px;margin:1px 0}.gw-pips i{width:12px;height:5px;border:1px solid var(--line2);background:rgba(0,0,0,.3)}.gw-pips i.on{background:var(--green);border-color:var(--green)}
.gw-places{display:flex;flex-wrap:wrap;gap:5px}.gw-place{font-size:10.5px;padding:3px 8px;border:1px solid var(--line2);border-radius:20px;color:var(--white);background:rgba(0,0,0,.25)}.gw-place.on{border-color:var(--green);color:var(--green)}
.gw-shop-note{margin:2px 0 6px}
/* the scene: a painted map, you stand on it */
.gw-stage{position:relative;flex:0 0 auto;box-shadow:0 0 0 3px #d9cdb0,0 0 0 6px #2a2018,0 0 34px rgba(0,0,0,.7);background:#08080b;overflow:hidden}
.gw-bgc{position:absolute;left:0;top:0}
.gw-layer{overflow:visible}
.gw-ob{position:absolute;pointer-events:auto;cursor:var(--cur-a,pointer)}
.gw-ob.gw-decor{pointer-events:none;cursor:default}
.gw-ob canvas{display:block}
.gw-top{position:absolute;pointer-events:none;z-index:60;transition:opacity .25s steps(3)}.gw-top.see{opacity:.34}
.gw-fx{position:absolute;left:0;top:0;pointer-events:none;z-index:70}
.gw-ob.flash canvas,.gw-top.flash canvas{filter:brightness(2.4) saturate(.3)}
.gw-ob.shake,.gw-top.shake{animation:gwShake .26s steps(1,end)}
@keyframes gwShake{0%{transform:translateX(0)}20%{transform:translateX(calc(var(--u,3px)*-1))}40%{transform:translateX(var(--u,3px))}60%{transform:translateX(calc(var(--u,3px)*-1))}80%{transform:translateX(0)}}
.gw-ov{position:absolute;left:-50%;top:-40%;width:200%;height:180%;pointer-events:none}.gw-ov.flip{transform:scaleX(-1)}
.hx-av .hx-sv{will-change:transform}
.cb-bg.gw-bgblur{background-size:cover;background-position:center;filter:blur(7px) brightness(.5) saturate(.9);transform:scale(1.06);image-rendering:auto}
@media(prefers-reduced-motion:reduce){.gw-ob.shake,.gw-top.shake{animation:none}.gw-top{transition:none}}

/* ---------- pixel-art items: rarity shows as a soft glow around the picture ---------- */
.px-it.r-uncommon{filter:drop-shadow(0 0 1px #6fcf6f) drop-shadow(0 0 2px rgba(111,207,111,.55))}
.px-it.r-rare{filter:drop-shadow(0 0 1px #5aa9ff) drop-shadow(0 0 2px rgba(90,169,255,.6))}
.px-it.r-legendary{filter:drop-shadow(0 0 1px #ffa94d) drop-shadow(0 0 3px rgba(255,169,77,.7))}
.px-it.r-mythic{filter:drop-shadow(0 0 1px #ff6ad5) drop-shadow(0 0 3px rgba(255,106,213,.8))}

/* ---------- wilderness: Enter | Expeditions, the public map and Safari taming ---------- */
.wild-hub{display:flex;gap:10px;margin:0 0 10px}
.wild-hub[hidden]{display:none}
.wh-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 12px;font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:rgba(var(--g),.05);border:1px solid var(--green);border-radius:8px;cursor:var(--cur-a,pointer);transition:background .15s,box-shadow .15s,transform .15s}
.wh-btn:hover:not(:disabled){background:rgba(var(--g),.14);box-shadow:0 0 12px rgba(var(--g),.35)}
.wh-btn:disabled{opacity:.45;cursor:var(--cur-n,not-allowed)}
.wh-btn.on{background:rgba(var(--g),.16);box-shadow:inset 0 0 0 1px rgba(var(--g),.5)}
.wh-ico{display:grid;place-items:center;flex:0 0 auto}
.wh-ico canvas{image-rendering:pixelated}
.wh-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;text-align:left}
.wh-t b{font-weight:600}
.wh-t em{font-style:normal;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--dim);line-height:1.35;white-space:normal}
.wild-hub.big{margin:6px 0 4px;gap:16px}
.wild-hub.big .wh-btn{flex-direction:column;gap:12px;padding:26px 16px;font-size:16px;min-height:200px;border-radius:12px;text-align:center}
.wild-hub.big .wh-t{align-items:center;text-align:center}
.wild-hub.big .wh-t b{font-size:18px;letter-spacing:.14em}
.wild-hub.big .wh-t em{font-size:11.5px;max-width:230px}
.wild-hub.big .wh-btn:hover:not(:disabled){transform:translateY(-2px)}
.place-panel.wild-on>*:not(.place-title):not(.wild-hub){display:none!important}
@media(max-width:560px){.wild-hub.big{gap:10px}.wild-hub.big .wh-btn{padding:18px 8px;min-height:150px}.wild-hub.big .wh-t em{font-size:10.5px}}

/* the public map */
.pmap .gw-stage{max-width:100%}
.pm-gr,.pm-gf{position:absolute;pointer-events:none}
.pm-gr canvas,.pm-gf canvas{display:block}
.pm-gr.rustle canvas,.pm-gf.rustle canvas{animation:pmRustle .32s steps(1,end)}
@keyframes pmRustle{0%{transform:translate(calc(var(--u,3px)*-1),0)}34%{transform:translate(var(--u,3px),calc(var(--u,3px)*-1))}67%{transform:translate(calc(var(--u,3px)*-1),0)}100%{transform:none}}
.pm-water canvas{position:absolute;left:0;top:0}
.pm-water{width:calc(var(--u,3px)*48);height:calc(var(--u,3px)*32)}
.pm-water .pm-w1{animation:pmWat 1.6s steps(1,end) infinite}
@keyframes pmWat{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.pm-node{transition:opacity .45s steps(5)}
.pm-node.gone,.gw-top.gone,.pm-tag.gone{opacity:0;pointer-events:none}
.pm-node.ready::after{content:"";position:absolute;right:calc(var(--u,3px)*2);top:calc(var(--u,3px)*2);width:calc(var(--u,3px)*2);height:calc(var(--u,3px)*2);background:#fff;box-shadow:0 0 0 var(--u,3px) rgba(255,255,255,.35);animation:pmGlint 1.6s steps(2,end) infinite;pointer-events:none}
@keyframes pmGlint{0%,60%{opacity:0}61%,100%{opacity:1}}
.pm-node.work canvas{filter:drop-shadow(0 0 calc(var(--u,3px)*1.5) rgba(255,226,122,.95))}
.pm-node.mine canvas{filter:drop-shadow(0 0 calc(var(--u,3px)*1.5) rgba(95,224,138,.95))}
.pm-tag{position:absolute;display:none;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.pm-tag.on{display:flex}
.pm-bar{width:70%;height:calc(var(--u,3px)*2);background:#1c2036;box-shadow:0 0 0 calc(var(--u,3px)*.5) #000}
.pm-bar i{display:block;height:100%;background:#ffe27a;transition:width .22s linear}
.pm-cnt{font-size:11px;font-weight:700;color:#ffe27a;text-shadow:0 1px 0 #000,0 0 3px #000}
.pmap .mg-chip{white-space:nowrap}

/* Safari: the wild creature screen shares the fight screen */
.sf-foe .sf-track i{background-color:#46c768;background-image:none}
.sf-foe .sf-track{background:#10331a}
.sf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.sf-chip{font-size:11px;letter-spacing:.04em;padding:3px 10px;border:1px solid var(--line2);border-radius:20px;color:var(--white);background:rgba(0,0,0,.28)}
.sf-chip.ok{border-color:var(--green);color:var(--green)}.sf-chip.bad{border-color:#e07a6a;color:#e07a6a}
.sf-acts button.sf-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:auto!important;min-height:54px;padding:6px 4px}
.sf-act .sf-lab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.sf-act.on{background:rgba(var(--g),.18)!important}
.sf-view{display:grid;place-items:center;min-height:120px}
.sf-view canvas{image-rendering:pixelated}
.sf-card .sf-view{min-height:130px}
.ci-hp.bad{color:#e07a6a}
.sf-got{display:flex;align-items:center;justify-content:center;gap:12px}
.sf-result h1{letter-spacing:.14em}
.sf-list .cb-ln{display:flex;align-items:center;gap:6px}
.xt-safari{margin:2px 0 8px;font-size:11px;line-height:1.45}
.place-panel.wild-x>.wild-hub{position:relative;z-index:61;margin:0 0 8px}
.place-panel.wild-x .shop.open:has(>.shop-top>.shop-toggle){top:var(--wh-h,46px)!important}
.dr-msg.pm-msg{height:auto;min-height:34px;overflow:visible;line-height:1.4;max-width:min(94vw,780px)}
.dgm-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0 4px}
.dgm-ctl .dg-enter{padding:8px 14px 8px 16px;gap:8px}
.q-help.dgm-help{width:auto;height:auto;border-radius:6px;padding:5px 10px;margin:10px 0 0;font-size:10.5px;letter-spacing:.06em}
/* Guild Hall: everything on one page */
.gh-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:8px}
.gh-name{display:flex;align-items:center;gap:8px;color:var(--green)}.gh-name b{font-weight:500;letter-spacing:.06em;font-size:14px}
.gh-chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.gh-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line2);border-radius:999px;font-size:10.5px;color:var(--white)}
.gh-xp{flex:1 0 100%;height:4px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}.gh-xp i{display:block;height:100%;background:var(--green);opacity:.8}
.gh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:8px;align-items:start}
.gh-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.gh-card{border:1px solid var(--line2);border-radius:8px;padding:8px 10px;background:rgba(0,0,0,.18);min-width:0}
.gh-ct{display:flex;align-items:center;gap:7px;margin-bottom:4px;color:var(--green)}.gh-ct b{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.gh-ct .gd-dim{margin-left:auto}
.gh-list{display:flex;flex-direction:column}
.gh-mem{padding:3px 0}.gh-dot{width:12px;height:12px;display:inline-block;flex:none}
.gh-mem .gd-btns{display:flex;gap:4px}
.gh-rec{margin-top:6px;border-bottom:0}.gh-rec .gd-form{flex:1;margin:0}.gh-rec .mk-in{width:100%;min-width:0}
.gh-card>.q-btn{margin-top:8px}
.gh-q{padding:4px 0}.gh-q.done>span:first-child{color:var(--green)}
.gh-bn{padding:4px 0;flex-wrap:nowrap;gap:8px}.gh-bn .bn-main span{font-size:10px}.gh-bn .q-btn{flex:none}
.gh-card .gd-bank{margin-top:0}
@media (max-width:760px){.gh-grid{grid-template-columns:minmax(0,1fr)}.gh-chips{margin-left:0}}
.guild{flex:0 0 auto}
.gh-q{gap:2px 10px;padding:3px 0}.gh-q .bar{height:4px;margin:0}.gh-q .bar i{height:100%}
.gh-card+.gh-card,.gh-grid+.gh-card{margin-top:8px}
.gh-bl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gh-bl .gh-bn{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 8px;border:1px solid var(--line2);border-radius:7px;border-bottom:1px solid var(--line2)}
.gh-bl .gh-bn.on{border-color:var(--green)}
.gh-bl .bn-main{flex:1 1 60%}.gh-bl .gh-bn .shop-price{margin-left:0}.gh-bl .gh-bn .q-btn{margin-left:auto}
@media (max-width:760px){.gh-bl{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* crafting master card: the master's tree */
.ct-art{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border:1px solid var(--line2);border-radius:10px;background:rgba(0,0,0,.25);color:var(--green)}
.ct-card{min-height:0}
.mt-tree{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mt-node{display:flex;flex-direction:column;gap:4px;padding:7px 7px 8px;border:1px solid var(--line2);border-radius:8px;background:rgba(0,0,0,.2);min-width:0}
.mt-node.cur{border-color:var(--green);box-shadow:0 0 10px rgba(var(--g),.25)}
.mt-node.locked{opacity:.6}
.mt-nh{display:flex;align-items:center;gap:5px;color:var(--green);font-size:11px}.mt-nh b{font-weight:500}
.mt-node em{font-size:9.5px;color:var(--dim);font-style:normal}
.mt-bonus{font-size:10px;color:var(--white)}.mt-bonus.dim{color:var(--dim)}
.mt-craft{display:flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid var(--line2);border-radius:6px;font:inherit;font-size:10px;color:var(--dim);background:transparent;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-craft.done{color:var(--green)}.mt-craft.open{color:var(--white);border-color:var(--green);cursor:var(--cur-p,pointer)}.mt-craft.open:hover{background:rgba(var(--g),.15)}
@media (max-width:900px){.mt-tree{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt-craft{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;align-items:flex-start}.mt-craft .ico{flex:none;margin-top:1px}

/* start page: BEGIN ADVENTURE has no outline. A soft dark glow sits behind it and fades out to where the outline used to be; hovering makes it darker */
.land .land-begin{position:relative;isolation:isolate;border-color:color-mix(in srgb,var(--green) 62%,#000)!important;background:transparent!important;box-shadow:none}
.land .land-begin::before{content:"";position:absolute;inset:7px 9px;border-radius:99px;background:#000;opacity:.34;filter:blur(8px);z-index:-1;pointer-events:none;transition:opacity .25s ease}
.land .land-begin:hover:not(:disabled)::before,.land .land-begin:focus-visible::before{opacity:.82}
.land .land-begin:hover:not(:disabled),.land .land-begin:focus-visible{background:transparent!important;border-color:color-mix(in srgb,var(--green) 62%,#000)!important;outline:none}


/* Encounter screen: the creature stands on its own, with no box around it. Its size follows how rare and dangerous it is (set in app.js), and the rarity colour glows softly behind it */
.enc-card,.enc-card.rar-common,.enc-card.rar-uncommon,.enc-card.rar-elite,.enc-card.rar-boss{width:auto;max-width:94vw;padding:0;border:0;border-radius:0;background:none;box-shadow:none;animation:none}
.enc-card .ci-view{height:auto;min-height:0;margin:0 0 8px;border:0;border-radius:0;background:none;padding:0;overflow:visible;justify-content:center}
.enc-card .ci-view::after{display:none}
.enc-card .ci-view .mv{width:auto;height:auto;display:flex;justify-content:center;align-items:flex-end}
.enc-card::before{inset:-14% -34%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--rg),.30),rgba(var(--rg),.12) 55%,transparent)}
.enc-card.rar-boss::before{animation:encAura 1.8s ease-in-out infinite alternate}
@keyframes encAura{from{opacity:.65}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.enc-card.rar-boss::before{animation:none}}

/* ===== Patch: one-line place text, hover "?" beside every title, even button rows, tall buttons like the glowing Explore box, wilderness Enter / Expeditions ===== */
.place-desc.one-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.place-title .loc-q,.place-title h2 .loc-q{margin-left:8px;flex:none}
.info-btn.loc-q:hover,.info-btn.loc-q:focus-visible{color:var(--green);border-color:var(--green)}
.place-title .pt-left:has(.mk-note:not([hidden])){flex:1 1 0;min-width:0}
.place-title .mk-note{display:block;flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gd-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place-panel.hasduo .place-title{min-height:30px}
.place-panel.hasduo>.place-desc.one-line{margin:10px 0 0}
@media(min-width:801px){.place-panel.hasduo>.loc-duo{flex:0 0 auto!important;height:var(--duo-h,auto);margin-top:var(--duo-gap,15px);margin-bottom:0}}
@media(max-width:800px){.loc-duo{margin-top:14px}}
/* the tall buttons: lighter body, a barely visible icon, and the gradient + capital letters of the Explore box; they glow when the mouse is over them */
.loc-duo-btn{background:linear-gradient(120deg,rgba(var(--g),.18),rgba(var(--g),.03)),rgba(var(--sh),.2);border:1px solid var(--green);border-radius:8px;color:var(--green);font-size:14px;letter-spacing:.08em;transition:box-shadow .2s,background .2s}
.loc-duo-btn .duo-art{opacity:.05}
.loc-duo-btn .duo-art svg{fill:#000}
.loc-duo-btn:hover:not(:disabled),.loc-duo-btn:focus-visible:not(:disabled){animation:softglow 2.2s ease-in-out infinite;box-shadow:0 0 14px rgba(var(--g),.65);color:var(--green2,var(--green))}
.loc-duo-btn:disabled{border-color:var(--line2);background:rgba(var(--sh),.3)}
@media(max-width:520px){.loc-duo-btn{font-size:12px}}
/* wilderness: back arrow, and the big Enter | Expeditions buttons filling the box under the title and its one line of text */
.wild-back{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
.place-panel.wild-on{display:flex;flex-direction:column;overflow:hidden}
.place-panel.wild-on>*{flex:none}
.place-panel.wild-on>.place-desc:not([hidden]){display:block!important;margin:10px 0 0}
.place-panel.wild-on .pt-btns{display:none!important}
.wild-hub.big{flex:1 1 auto!important;min-height:200px;margin:14px 0 0;gap:14px;align-items:stretch}
.wild-hub.big .wh-btn{min-height:0;height:auto;padding:16px;justify-content:center}
.wh-enter{position:relative;overflow:hidden;background:#150c0a}
.wh-pan{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.9}
.wh-enter::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.05),rgba(0,0,0,.45));pointer-events:none}
.wh-go{position:relative;z-index:1;padding:14px 38px;background:rgba(10,6,5,.82);border:0;border-radius:12px;color:var(--green);font-size:18px;letter-spacing:.16em;text-transform:uppercase;transition:background .15s,box-shadow .15s}
.wh-enter:hover:not(:disabled) .wh-go{background:rgba(10,6,5,.94);box-shadow:0 0 14px rgba(var(--g),.45)}
.wild-hub.big .wh-exp .wh-ico canvas{image-rendering:pixelated}

/* Fishing, Taming, Logging, Prospecting and Foraging boxes share one darkness (the Taming box's, made 15% lighter-weight) */
:root{--wild-box:rgba(20,5,0,.2125)}
.place-title .pt-btns>.tame-btn:not(.on),.place-title .pt-btns>.pt-fish:not(:hover),.acts .gg-tile:not(:hover){background:var(--wild-box)}

/* masters button: glows while the daily work is not done yet */
.ap-btn.glow{border-color:var(--green);color:#fff;animation:apGlow 1.8s ease-in-out infinite}
@keyframes apGlow{0%,100%{box-shadow:0 0 4px 0 rgba(var(--g),.35)}50%{box-shadow:0 0 14px 3px rgba(var(--g),.8)}}
@media (prefers-reduced-motion:reduce){.ap-btn.glow{animation:none;box-shadow:0 0 10px 2px rgba(var(--g),.6)}}

/* Dungeoneering side panel: the dungeon list and back link; the screen fades into the map */
.wm-dgrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;margin:0 0 6px;background:rgba(var(--sh),.55);border:1px solid var(--line);border-radius:8px;color:var(--white);font:inherit;cursor:var(--cur-a,pointer);transition:border-color .15s,background .15s}
.wm-dgrow:hover{border-color:var(--green);background:rgba(var(--g),.1)}
.wm-dgrow .wm-dgtx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.wm-dgrow b{font-weight:500;font-size:12px}.wm-dgrow em{font-style:normal;font-size:10px;color:var(--dim);line-height:1.35}
.wm-dgrow.low{opacity:.7}.wm-dgrow.done b{color:var(--green)}
.wm-back{display:inline-flex;align-items:center;gap:5px;margin:0 0 8px;padding:3px 8px;background:transparent;border:1px solid var(--line);border-radius:99px;color:var(--dim);font:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:var(--cur-a,pointer)}
.wm-back:hover{color:var(--green);border-color:var(--green)}
#game.mapfs.dgmap .window>:not(.mapbook){opacity:0;transition:opacity .4s ease;pointer-events:none}

/* Market, Farm and House: the title, the ? icon and the Enter button sit in exactly the same places on all three pages */
.place-title:has(.mk-enter:not([hidden])) h2{display:inline-flex;align-items:center;box-sizing:border-box;width:112px;min-width:112px;max-width:112px;gap:6px;white-space:nowrap}
.place-title:has(.mk-enter:not([hidden])) h2 .loc-q{margin-left:auto;flex:none}

/* Wizard's Tower: smaller Elemental Mastery title, Ultimate tab beside it, runes under the three tabs */
.tt-head h3{font-size:12px}
.tt-hl{display:flex;align-items:center;gap:10px;min-width:0}
.em-ulttab{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:transparent;border:1px solid var(--line);border-radius:99px;color:var(--dim);font:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:var(--cur-a,pointer);transition:border-color .15s,color .15s,box-shadow .15s}
.em-ulttab:hover{border-color:var(--green);color:var(--white)}.em-ulttab.on{border-color:var(--green);color:var(--green);box-shadow:0 0 10px rgba(var(--g),.25)}
.em-page .em-runes{margin:6px 0 4px}
.em-ultbody{display:block}.em-ultbody .em-ult{margin:4px 0 0}

/* wilderness map window: same size as the map window, X top right, full screen button top left, a camera that follows you */
.window:has(>.pmwin){position:relative}
.scene.pmap.pmwin{position:absolute;inset:0;z-index:8;padding:10px 14px 12px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both;overflow:hidden;gap:8px;justify-content:flex-start}
.scene.pmap.pmwin .cb-bg{border-radius:10px}
.scene.pmap.pmfs{padding:14px 20px}
.pmap .pm-vp{position:relative;overflow:hidden;flex:none;margin:0 auto;border-radius:6px}
.pmap .pm-vp .pm-stage{position:relative;max-width:none;will-change:transform}
.pmap .dr-head{margin-top:26px}
.pmap .pm-x{position:absolute;right:10px;top:10px;z-index:9}
.pmap .pm-tl{position:absolute;left:10px;top:10px;z-index:9;display:flex;align-items:center;gap:8px;transition:opacity .2s ease}
.pmap .pm-tl .pm-fsb.on{border-color:var(--green)}
.pmap .pm-always{display:flex;align-items:center;gap:5px;font:600 11px/1 "IBM Plex Mono",monospace;color:var(--green);cursor:var(--cur-a,pointer);background:rgba(var(--sh),.85);border:1px solid var(--line);border-radius:5px;height:26px;padding:0 8px;white-space:nowrap}
.pmap .pm-always input{margin:0;accent-color:var(--green);cursor:var(--cur-a,pointer)}
.pmap .pm-hot{display:none}
.pmap.pmfs .pm-hot{display:block;position:absolute;left:0;top:0;width:300px;height:70px;z-index:8}
.pmap.pmfs .pm-tl{opacity:0}
.pmap.pmfs .pm-hot:hover+.pm-tl,.pmap.pmfs .pm-tl:hover,.pmap.pmfs .pm-tl:focus-within{opacity:1}
.scene.dungeon.pmap>.pm-x{position:absolute;right:10px;top:10px;z-index:9}
.scene.dungeon.pmap>.pm-tl{position:absolute;left:10px;top:10px;z-index:9}
.scene.dungeon.pmap>.pm-hot{position:absolute}
.scene.dungeon.pmap.pmwin{position:absolute}
.scene.dungeon.pmap>.pm-vp{position:relative}
.scene.dungeon.pmap.pmwin>.cb-bg{display:none}
.window:has(>.pmwin)>:not(.pmwin){opacity:0;transition:opacity .4s ease;pointer-events:none}
.scene.pmap.pmwin{background-color:var(--bg-mid)}

/* v19: bank vault with many slots. The rows keep their height (they used to squash past ~140 slots) and the list scrolls with a thin bar on the right. */
.place-panel.bankview .bank .bk-vaultcol .bk-grid{grid-auto-rows:auto!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start;padding-right:6px;scrollbar-width:thin!important;scrollbar-color:#3a2018 #120a08!important;-ms-overflow-style:auto!important}
.place-panel.bankview .bank .bk-vaultcol .bk-grid .slot{aspect-ratio:auto!important;height:100%!important;min-height:0}
.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar{width:8px!important;height:8px!important;display:block!important}
.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar-track{background:#120a08}
.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb{background:#3a2018;border-radius:4px}

/* v19: the small bait button under the catch card buttons */
.fgc-baitrow{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px}.fgc-baitrow .fb-l{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fishgame .fgc-bait{padding:3px 10px;font-size:10px}

/* v19: Hall / Bank tabs at the top right of the Guild Hall */
.gh-head .gh-chips{margin-left:auto}.gh-tabs{display:flex;gap:4px;margin-left:6px}
.gh-tab{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--line2);color:var(--dim);border-radius:99px;padding:3px 11px;font:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.gh-tab:hover{color:var(--white)}.gh-tab.on{color:var(--green);border-color:var(--green);background:rgba(var(--g),.07)}
@media (max-width:760px){.gh-tabs{margin-left:0}}

/* v19: Gathering & Crafting Gear tab */
.pt-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0 2px;margin-right:14px;cursor:pointer}
.pt-tab:hover{color:var(--white)}.pt-tab.on{color:var(--green);border-bottom-color:var(--green)}
.gc-body{padding:4px 2px;display:flex;flex-direction:column;gap:12px}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.gc-card{display:flex;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.22)}
.gc-tool{flex:0 0 auto;width:54px;height:54px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:8px;background:var(--field-bg)}
.gc-tool canvas{image-rendering:pixelated;max-width:48px;max-height:48px}
.gc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}.gc-sk{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.gc-name{font-weight:500;color:var(--white);font-size:12px}.gc-next{font-size:10px;color:var(--dim);opacity:.8}
.gc-rod{border:1px solid var(--line2);border-radius:8px;padding:8px 10px;background:rgba(var(--sh),.22)}
.gc-rodrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}.gc-rodico{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:8px;background:var(--field-bg)}
.gc-baits{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}

/* v19: the equipment item card (hover popup) and rarity-tinted tiles behind gear icons */
.tt.rich{max-width:280px;min-width:220px;padding:0;overflow:hidden}
.ic{display:flex;flex-direction:column;gap:7px;padding:11px 12px 10px;font-size:10px;line-height:1.5}
.ic-head{display:flex;gap:11px;align-items:center}
.ic-ico{flex:0 0 auto;width:62px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(var(--rc),.55);background:radial-gradient(circle at 50% 38%,rgba(var(--rc),.34),rgba(var(--rc),.12) 70%)}
.ic-ico .ico,.ic-ico canvas{display:block}
.ic-title{display:flex;flex-direction:column;gap:2px;min-width:0}.ic-name{font-size:13px;font-weight:600;line-height:1.25;display:block}.ic .ic-name:not(:last-child){margin:0}
.ic-sub{color:var(--dim);font-size:10px;letter-spacing:.04em}
.ic-sec{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border-top:1px solid rgba(var(--hi),.08);padding-top:6px}
.ic-stats{display:flex;flex-direction:column;gap:2px}.ic-stat{display:flex;align-items:baseline;gap:8px}.ic-stat span{flex:1;color:var(--white)}.ic-stat b{color:var(--green);font-weight:600}.ic-stat em{font-style:normal;font-size:9px;min-width:30px;text-align:right}.ic-stat em.up{color:#5fe08a}.ic-stat em.dn{color:#ff6b5e}
.ic-fx{margin:0;color:var(--white)}.ic-note{margin:0;color:var(--dim);font-style:italic}
.ic-dur{display:flex;align-items:center;gap:8px;color:var(--dim)}.ic-bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}.ic-bar i{display:block;height:100%;background:var(--green)}.ic-dur.low .ic-bar i{background:#e0a82e}.ic-dur.broken .ic-bar i{background:#ff6b5e}.ic-dur.broken span{color:#ff6b5e}.ic-dur b{color:var(--white);font-weight:500}
.ic-facts{display:flex;flex-direction:column;gap:1px;border-top:1px solid rgba(var(--hi),.08);padding-top:6px}.ic-facts div{display:flex;gap:8px;justify-content:space-between}.ic-facts span{color:var(--dim)}.ic-facts b{color:var(--white);font-weight:500;text-align:right}
.ic-cmp{margin:0;color:var(--dim);font-size:9px}.ic-hint{margin:0;color:var(--green);opacity:.85;border-top:1px solid rgba(var(--hi),.08);padding-top:6px}
.rt-bg-common{--rc:150,160,180}.rt-bg-uncommon{--rc:111,207,111}.rt-bg-rare{--rc:90,169,255}.rt-bg-legendary{--rc:255,169,77}.rt-bg-mythic{--rc:255,106,213}
.ic .rar-common{color:#d8dce6}
/* every gear icon gets a faint tile of its rarity colour */
.slot.full:has(>.eqt.rt-common),.pd-cell .slot.full:has(>.eqt.rt-common){background:rgba(150,160,180,.14)}
.slot.full:has(>.eqt.rt-uncommon){background:rgba(111,207,111,.15)}
.slot.full:has(>.eqt.rt-rare){background:rgba(90,169,255,.17)}
.slot.full:has(>.eqt.rt-legendary){background:rgba(255,169,77,.19)}
.slot.full:has(>.eqt.rt-mythic){background:rgba(255,106,213,.2)}
.so-ico:has(>.eqt),.shop-row>.eqt,.cb-item>.eqt,.sk-row>.eqt{border-radius:5px}
.eqt.rt-common{background:rgba(150,160,180,.14)}.eqt.rt-uncommon{background:rgba(111,207,111,.15)}.eqt.rt-rare{background:rgba(90,169,255,.17)}.eqt.rt-legendary{background:rgba(255,169,77,.19)}.eqt.rt-mythic{background:rgba(255,106,213,.2)}
.slot>.eqt{background:none}
.tt .ic-name.rar-common{color:#d8dce6}.tt .ic-name.rar-uncommon{color:#6fcf6f}.tt .ic-name.rar-rare{color:#5aa9ff}.tt .ic-name.rar-legendary{color:#ffa94d}.tt .ic-name.rar-mythic{color:#ff6ad5}
.invbook .ib-body.gc-body{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px}

/* v19: Bestiary detail: monster card and picture on the top two thirds, description and your progress on the bottom third (scrolls) */
.bs-detail{padding:10px;gap:10px}
.bs-top{flex:2 1 0;min-height:0;display:flex;flex-direction:column;gap:6px}
.bs-top .bs-view{flex:1 1 auto;min-height:0}
.bs-title{flex:none;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.bs-title b{font-size:15px;font-weight:500;color:var(--white)}
.bs-bottom{flex:1 1 0;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;padding-right:4px;border-top:1px solid var(--line2);padding-top:8px}
.bs-bottom .bs-info{max-height:none;overflow:visible}
@media(max-width:900px){.bs-detail{min-height:420px}}

/* v19: the tall place buttons (Kitchen, Forge, Shop...): a dark border instead of the bright one, and the silhouette behind the name 5 points more visible */
.loc-duo-btn{border-color:rgba(0,0,0,.55)}
.loc-duo-btn .duo-art{opacity:.10}
.loc-duo-btn:hover:not(:disabled),.loc-duo-btn:focus-visible:not(:disabled){border-color:rgba(0,0,0,.55)}
.loc-duo-btn:disabled{border-color:rgba(0,0,0,.4)}

/* v21: Faith tree */
.faith-win .fa-body{padding:6px 2px 24px}
.fa-tree{display:flex;flex-direction:column;align-items:center;gap:0}
.fa-root{display:flex;gap:12px;align-items:center;padding:12px 22px;border:1px solid var(--gold,#c9a24b);border-radius:10px;background:rgba(var(--sh),.25);position:relative;margin-bottom:26px}
.fa-root::after{content:"";position:absolute;left:50%;top:100%;height:26px;border-left:2px solid var(--line)}
.fa-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;position:relative;padding-top:0}
.fa-col{display:flex;flex-direction:column;align-items:stretch;position:relative}
.fa-col::before{content:"";position:absolute;left:50%;top:-14px;height:14px;border-left:2px solid var(--line)}
.fa-node{display:flex;flex-direction:column;align-items:stretch}
.fa-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--sh),.2);position:relative}
.fa-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:6px;background:rgba(var(--sh),.3)}
.fa-tx{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px}
.fa-tx b{font-size:13px}
.fa-tx em{font-style:normal;opacity:.65;font-size:11px;line-height:1.35}
.fa-tag{position:absolute;top:6px;right:8px;font-size:10px;padding:1px 6px;border-radius:8px;background:rgba(120,200,120,.25)}
.fa-node.on>.fa-card{border-color:#7fc97f;box-shadow:0 0 10px rgba(127,201,127,.35)}
.fa-kids{display:flex;flex-direction:column;gap:8px;margin:8px 0 0 18px;padding-left:14px;border-left:2px solid var(--line)}
.fa-kids .fa-node{position:relative}
.fa-kids .fa-node::before{content:"";position:absolute;left:-14px;top:22px;width:12px;border-top:2px solid var(--line)}
.fa-col>.fa-node:not(:last-child){margin-bottom:10px}
@media(max-width:900px){.fa-branches{grid-template-columns:1fr}.fa-col::before{display:none}}
.fa-tx,.fa-tx *{text-align:left}
.fa-root{margin-bottom:28px}
.fa-branches::before{content:"";position:absolute;top:-14px;left:16.6%;right:16.6%;border-top:2px solid var(--line)}
.fa-body>.pf-note{text-align:center;margin-bottom:14px}
@media(max-width:900px){.fa-branches::before{display:none}}
.hv-win.fullpage.faith-win>.fp-wrap{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

/* v22: the whole worn-gear row is a drop target in the expanded Equipment window */
.eq-row.drop{border-color:var(--green)!important;background:rgba(var(--g),.18)!important}
.eq-row.gear-ok{border-color:var(--green)!important;box-shadow:0 0 8px rgba(var(--g),.45)}
.eq-row.gear-no{opacity:.45}
.eq-row.gear-no.drop{border-color:#d46a6a!important;background:rgba(212,106,106,.15)!important}
/* v22: nothing from the location (the wild-place text, buttons, overlays) may show through the expanded Equipment window */
.place-panel.invmode.invmode>:not(.place-title):not(.invbook){display:none!important}
.place-panel.invmode.invmode .pt-btns,.place-panel.invmode.invmode .place-desc{display:none!important}
.place-panel.invmode>.invbook{position:relative;z-index:70}

/* v22: error popup + red flash on the button you pressed */
.tt.err-tip{opacity:0;transition:opacity .15s;border-color:#c0392b;color:#ffd7d0}
.tt.err-tip.in{opacity:1}
@keyframes errflash{0%{box-shadow:0 0 0 0 rgba(212,70,60,0)}25%{border-color:#d4463c!important;background-color:rgba(212,70,60,.28)!important;box-shadow:0 0 8px 1px rgba(212,70,60,.55)}100%{box-shadow:0 0 0 0 rgba(212,70,60,0)}}
.err-flash{animation:errflash .8s ease-out 1}

/* v22: equipment card laid out like a classic loot tooltip */
.tt.rich{max-width:300px;min-width:270px}
.ic2{gap:6px;padding:10px 14px 11px;background:linear-gradient(180deg,rgba(var(--rc),.07),transparent 40%)}
.rt-card-common{--rc:150,160,180}.rt-card-uncommon{--rc:111,207,111}.rt-card-rare{--rc:90,169,255}.rt-card-legendary{--rc:255,169,77}.rt-card-mythic{--rc:255,106,213}
.ic2 .ic-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;border-bottom:1px solid rgba(var(--rc),.35);padding-bottom:6px}
.ic2 .ic-top .ic-name{font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.ic2 .ic-top .ic-sub{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}
.ic2 .ic-head{align-items:flex-start;gap:10px;margin-top:2px}
.ic2 .ic-ico{width:64px;height:78px;border-radius:3px}
.ic2 .ic-big{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:4px}
.ic2 .ic-bigrow{display:flex;align-items:center;gap:7px}
.ic2 .ic-num{font-size:24px;line-height:1;color:var(--green)}
.ic2 .ic-bigsub{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ic2 .ic-rar{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:9px;gap:0}
.ic2 .ic-rar b{font-size:10px;letter-spacing:.08em}
.ic2 .ic-rar span{color:#d46a6a;font-size:9px}
.ic2 .ic-rar .rar-common{color:#d8dce6}.ic2 .ic-rar .rar-uncommon{color:#6fcf6f}.ic2 .ic-rar .rar-rare{color:#5aa9ff}.ic2 .ic-rar .rar-legendary{color:#ffa94d}.ic2 .ic-rar .rar-mythic{color:#ff6ad5}
.ic2 .ic-req{text-align:center;color:#e0503f;font-size:10px;letter-spacing:.1em;border-top:1px solid rgba(var(--rc),.3);border-bottom:1px solid rgba(var(--rc),.3);padding:3px 0;margin-top:2px}
.ic2 .ic-list{display:flex;flex-direction:column;gap:2px;padding:2px 0}
.ic2 .ic-line{display:flex;align-items:center;gap:7px}
.ic2 .ic-dia{flex:none;width:7px;height:7px;transform:rotate(45deg);background:#5fd36a;border:1px solid #1a3a1d}
.ic2 .ic-dia.gold{background:#f0b84a;border-color:#4a3410}
.ic2 .ic-lt{flex:1;color:var(--green)}
.ic2 .ic-line em{font-style:normal;font-size:9px}.ic2 em.up,.ic2 b.up{color:#6fcf6f}.ic2 em.dn,.ic2 b.dn{color:#e0503f}
.ic2 .ic-grey{border-top:1px solid rgba(var(--rc),.3);padding-top:5px;color:var(--dim)}.ic2 .ic-grey p{margin:0;font-style:italic}
.ic2 .ic-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(var(--rc),.3);padding-top:6px}
.ic2 .ic-dur,.ic2 .ic-sell{display:flex;align-items:center;gap:4px;color:var(--white)}.ic2 .ic-dur span,.ic2 .ic-sell span{color:var(--dim)}
.ic2 .ic-dur.low b{color:#e0a82e}.ic2 .ic-dur.broken b{color:#e0503f}
.ic2 .ic-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-top:1px solid rgba(var(--rc),.3);padding-top:6px;text-align:center}
.ic2 .ic-col{display:flex;flex-direction:column;gap:1px}.ic2 .ic-col span{font-size:8.5px;letter-spacing:.14em;color:var(--white)}.ic2 .ic-col b{font-size:11px;color:var(--green)}
.ic2 .ic-hint{text-align:center}

/* v22: combat menu button + flee button, Dodge word, Block */
.cb-tools{position:relative}
.cb-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:30;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--field-bg);border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 28px rgba(var(--sh),.45);min-width:170px}
.cb-mi{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--white);font-size:11px;text-align:left}
.cb-mi:hover:not(.locked){border-color:var(--line);background:rgba(var(--g),.12)}
.cb-mi.on{border-color:var(--green)}.cb-mi.locked{opacity:.45}
.cb-mi>span{flex:1}
.cb-flee:disabled{opacity:.4}
.cb-now.dodge-now{display:flex;align-items:center;justify-content:center}
.dodge-btn{font-size:18px;font-weight:700;letter-spacing:.16em;color:#fff;background:rgba(77,163,255,.18);border:1px solid var(--parry-hi,#8cc8ff);border-radius:8px;padding:4px 22px;text-shadow:0 0 10px var(--parry,#4da3ff);animation:dodgePulse .35s ease-in-out infinite alternate}
@keyframes dodgePulse{from{box-shadow:0 0 6px rgba(77,163,255,.5)}to{box-shadow:0 0 18px rgba(77,163,255,.95)}}
.cb-tools-slot .cb-tools{position:relative}
.cb-mi{justify-content:flex-start!important;white-space:nowrap;text-align:left}.cb-mi>span{text-align:left;flex:none!important}

/* v22: chat on the wilderness map (faint channel button; the whole box fades in on hover and leaves at once) */
.scene.pmap .chat-panel.pmchat{position:absolute;left:50%;right:auto;transform:translateX(-50%);width:min(732px,calc(100% - 28px));bottom:0;height:206px;z-index:12;flex:none;min-height:0;transition:opacity .25s ease,background .25s ease,border-color .25s ease}
.scene.pmap .chat-panel.pmchat.pmchat-fs{bottom:28px}
.chat-panel.pmchat:not(.open){background:transparent!important;border-color:transparent!important;box-shadow:none!important;pointer-events:none;transition:none!important}
.chat-panel.pmchat:not(.open) *{transition:none!important}
.chat-panel.pmchat:not(.open)>*:not(form){opacity:0;pointer-events:none}
.chat-panel.pmchat:not(.open) form>*{opacity:0;pointer-events:none}
.chat-panel.pmchat:not(.open) form>.chan-btn{opacity:.3;pointer-events:auto}
.chat-panel.pmchat.open>*,.chat-panel.pmchat.open form>*{transition:opacity .25s ease}
/* v22: the Continue button always uses the player's palette (never a hover/accent colour from another rule) */
.cont-btn,.cont-btn.hv,.cont-btn[class*="hv-"]{border-color:rgba(var(--g),.55)!important;color:var(--green)!important;background-color:transparent!important}
.cont-btn:hover:not(:disabled),.cont-btn:focus-visible,.cont-btn.go,.cont-btn.hv:hover{border-color:var(--green)!important;color:var(--white)!important;background-color:transparent!important}

/* v22: one line of chat in the dungeon */
.dg-chat{width:min(560px,92%);margin:6px auto 0}
.dg-chat .sc-chat{padding:5px 8px;gap:4px;background:rgba(var(--sh),.28)}
.dg-chat .sc-log{height:18px;max-height:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-size:11px}
.dg-chat .sc-log p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v22: seed bag in the farm walk view */
.fm-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:5px}
.fm-bagslot{position:relative;aspect-ratio:1/1;min-height:40px;display:flex;align-items:center;justify-content:center;padding:0}
.fm-bagslot.on{border-color:var(--green);background:rgba(var(--g),.14)}.fm-bagslot.locked{opacity:.4}
.fm-bn{position:absolute;right:3px;bottom:1px;font-size:9px;color:var(--white);text-shadow:0 1px 2px #000}
.fm-hit{touch-action:none}
/* v22: pixel-art chest and trap rooms */
.dr-stage .dr-cell{background-image:var(--tA)!important;background-size:var(--hc) var(--hc)!important;image-rendering:pixelated;border:0!important;background-blend-mode:multiply}
.dr-stage .dr-cell.alt{background-image:var(--tB)!important}
.dr-stage .dr-cell.wall{background-image:var(--tW)!important}
.dr-stage.rm-c .dr-grid{filter:sepia(.35) saturate(1.3) brightness(1.18)}
.dr-stage.rm-t .dr-grid{filter:sepia(.7) hue-rotate(-38deg) saturate(2.4) brightness(.78) contrast(1.1)}
.dr-obj.px{color:inherit;background:none!important;border:0!important;box-shadow:none!important;margin:0!important;width:var(--hc);height:var(--hc)}
.dr-obj.px .rm-spr{grid-area:1/1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.dr-obj.px.chest .rm-spr:nth-child(2),.dr-obj.px.totem .rm-spr:nth-child(2){display:none}
.dr-obj.px.chest.used .rm-spr:nth-child(1),.dr-obj.px.totem.used .rm-spr:nth-child(1){display:none}
.dr-obj.px.chest.used .rm-spr:nth-child(2),.dr-obj.px.totem.used .rm-spr:nth-child(2){display:block}
.dr-obj.px.chest.used,.dr-obj.px.totem.used{opacity:.85}
.dr-obj.px.chest.locked .rm-spr{filter:grayscale(.85) brightness(.7)}
.dr-obj.px:hover .rm-spr{filter:drop-shadow(0 0 5px rgba(255,230,150,.9))}
.dr-obj.px.plate{cursor:default}.dr-obj.px.plate .rm-gl{filter:grayscale(1) brightness(.55);opacity:.8;z-index:1}
.dr-obj.px.plate:hover .rm-spr{filter:none}.dr-obj.px.plate:hover .rm-gl{filter:grayscale(1) brightness(.55)}
.dr-obj.px.plate.lit .rm-gl{filter:none;opacity:1;animation:rmGl 1.2s ease-in-out infinite}
.dr-obj.px.plate.lit .rm-spr:first-child,.dr-obj.px.plate.on .rm-spr:first-child,.dr-obj.px.plate.pon .rm-spr:first-child{filter:drop-shadow(0 0 7px rgba(var(--g),.8))}
.dr-obj.px.plate.on .rm-gl{filter:none;opacity:1}.dr-obj.px.plate.pon .rm-gl{filter:hue-rotate(160deg);opacity:1}
.dr-stage.rm-c .dr-obj.chest:not(.used):not(.locked) .rm-spr{filter:drop-shadow(0 0 7px rgba(255,200,90,.9))}
.dr-obj.px.door .rm-spr{filter:drop-shadow(0 0 6px rgba(var(--g),.5))}
@keyframes rmGl{50%{transform:scale(1.12)}}
.dr-stage .dr-spk{background:linear-gradient(#e6e8f2,#7a7e94 60%,#3a3c4c);image-rendering:pixelated}
/* v23: public pixel scenes (Open Sea, Tower of Trials grounds, Arena stands) */
.ps-map .ps-stage canvas.gw-bgc{position:absolute;left:0;top:0;image-rendering:pixelated;display:block}
.ps-map .ps-w2{animation:psWave 1.6s steps(1) infinite}
@keyframes psWave{0%,49%{opacity:0}50%,100%{opacity:1}}
.ps-map .ps-ob{position:absolute;image-rendering:pixelated;pointer-events:auto}
.ps-map .ps-treas,.ps-map .ps-foe{cursor:var(--cur-a,pointer);animation:psBob 2.4s ease-in-out infinite}
.ps-map .ps-b1{animation-delay:-.8s}.ps-map .ps-b2{animation-delay:-1.6s}
@keyframes psBob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u) * -1))}}
.ps-map .ps-treas:hover,.ps-map .ps-foe:hover{filter:drop-shadow(0 0 5px rgba(255,230,150,.95))}
.ps-map .ps-foe{filter:drop-shadow(0 0 3px rgba(255,60,60,.7))}
.ps-map .ps-got{opacity:0;transform:translateY(calc(var(--u) * -6));transition:opacity .45s ease,transform .45s ease;animation:none}
.ps-map .ps-dock{position:absolute;z-index:3;pointer-events:auto;cursor:var(--cur-a,pointer)}
.ps-sea .hx-av{background:var(--boat) center 78%/100% auto no-repeat;image-rendering:pixelated}
.ps-sea .hx-av.me::after{display:none}
.ps-sea .hx-av .hx-sv{bottom:14%}
.ps-sea .ps-chip.warn{color:#ff8a7a}
.ps-map .ps-sign,.ps-map .ps-warrior{cursor:var(--cur-a,pointer)}
.ps-map .ps-sign:hover,.ps-map .ps-warrior:hover{filter:drop-shadow(0 0 5px rgba(255,230,150,.9))}
.ps-map .ps-torch,.ps-map .ps-brazier{animation:psFlame .5s steps(2) infinite}
@keyframes psFlame{50%{filter:brightness(1.25) saturate(1.2)}}
.ps-map .ps-warrior{animation:psBreathe 2.8s ease-in-out infinite}
@keyframes psBreathe{50%{transform:translateY(calc(var(--u) * -1))}}
.ps-map .ps-fight{pointer-events:none;image-rendering:pixelated;z-index:1}
.ps-map .ps-side{position:absolute;right:14px;top:70px;bottom:64px;width:min(400px,calc(100% - 28px));z-index:11;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 35px rgba(var(--sh),.5);animation:psSideIn .22s ease both;overflow:hidden}
@keyframes psSideIn{from{opacity:0;transform:translateX(24px)}}
.ps-map .ps-side-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line);font:700 13px/1 "IBM Plex Mono",monospace;color:var(--green)}
.ps-map .ps-side-body{flex:1 1 auto;min-height:0;overflow:auto;padding:8px 10px 10px}
.ps-map .ps-side-body>.house,.ps-map .ps-side-body>.xtra,.ps-map .ps-side-body>.arena{display:block;position:static;margin:0;width:auto;max-height:none;opacity:1}
.ps-map .ps-side-body>[hidden]{display:none}
.ps-enter{margin-bottom:8px}
.scene.dungeon.pmap.ps-map>.ps-side{position:absolute!important;right:14px;top:70px;bottom:64px;left:auto}
.sub-overlay{position:fixed;inset:0;z-index:9999;background:var(--bg-mid,#150d0b)}
.sub-overlay iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.sub-overlay .sub-x{position:absolute;right:12px;top:12px;z-index:2}
.embed .toolbar{display:none!important}
/* v23: crisp heroes. The sprite is 16 x 21 pixels, so the box is exactly one tile wide and 21/16 tiles tall (one even scale on both axes, no smoothing), and a walking hero bobs by a whole pixel. */
.hx-av .hx-sv{left:0;right:0;top:-31.25%;bottom:0}
.hx-av .px-sp{image-rendering:pixelated;filter:none;backface-visibility:hidden}
.hx-av .hx-sv{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.hx-nm{top:calc(-31.25% - 10px)}
.hx-av.walk .hx-sv{animation:pxStep 360ms steps(1) infinite}
@keyframes pxStep{0%{transform:translateY(0)}50%{transform:translateY(-4.76%)}}
.hx-av.bump .hx-sv{animation:pxBump 200ms ease-in-out}
@media (prefers-reduced-motion:reduce){.hx-av.walk .hx-sv{animation:none}}

/* ---- v24: smaller side-by-side boxes, restyled crafting buttons, no hover lift, masters on the place page ---- */
.wild-hub.big{width:85%;margin-left:auto;margin-right:auto;align-items:flex-start}
.wild-hub.big .wh-btn{height:35%;min-height:0;padding:10px 12px;gap:8px;flex-direction:column}
.wild-hub.big .wh-btn:hover:not(:disabled){transform:none!important}
.wild-hub.big .wh-t em{font-size:10.5px}
.wh-go{padding:8px 24px;font-size:15px;border-radius:9px}
.wh-exp{position:relative;overflow:hidden;background:#150c0a}
.wh-expbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:.38;pointer-events:none}
.wh-exp::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.1),rgba(0,0,0,.5));pointer-events:none}
.wh-exp>.wh-ico,.wh-exp>.wh-t{position:relative;z-index:1}
@media(min-width:801px){.place-panel.hasduo>.loc-duo{height:calc(var(--duo-h,0px)*.35);min-height:44px}}
.loc-duo{width:85%;margin-left:auto;margin-right:auto}
.loc-duo-btn{background:rgba(var(--sh),.3);border:1px solid var(--green);color:rgba(var(--g),.55);transition:background .2s,color .2s}
.loc-duo-btn:hover:not(:disabled),.loc-duo-btn:focus-visible:not(:disabled){background:linear-gradient(120deg,rgba(var(--g),.18),rgba(var(--g),.03)),rgba(var(--sh),.2);color:var(--green2,var(--green));box-shadow:0 0 14px rgba(var(--g),.65);animation:softglow 2.2s ease-in-out -1.1s infinite;transition:none}
.loc-duo-btn:disabled{opacity:1;background:rgba(0,0,0,.45);border-color:var(--line2);color:rgba(var(--g),.25)}
.loc-duo-btn .duo-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:0;filter:brightness(.55);transition:opacity 1.4s ease;pointer-events:none;z-index:0}
.loc-duo-btn:hover:not(:disabled) .duo-live,.loc-duo-btn:focus-visible:not(:disabled) .duo-live{opacity:.85}
.loc-duo-btn .duo-name{text-shadow:0 1px 3px #000}
.place-panel.wild-on.ap-open>.xtra:not([hidden]){display:flex!important;flex-direction:column;margin-top:10px;min-height:0;overflow:auto}
.place-panel.wild-on.ap-open>.xtra>*:not(.ap-box){display:none!important}
.cb-tools-slot .cb-tools{margin-top:12px}
.wild-hub.big .wh-btn .wh-ico canvas{width:36px!important;height:36px!important}
.wild-hub.big .wh-exp{gap:4px}
@media(min-width:901px){.kt-panel.wm-panel{padding-top:10px}.kt-panel.wm-panel>.wm-ph:first-child{padding-right:38px;min-height:30px}}

.pm-q{position:absolute;display:grid;place-items:center;cursor:var(--cur-a,pointer);animation:pmqBob 1.1s ease-in-out infinite alternate;filter:drop-shadow(0 0 7px rgba(255,214,90,.95))}
.pm-q .gw-cv{image-rendering:pixelated;width:100%;height:100%}
.pm-q-foe{filter:drop-shadow(0 0 7px rgba(255,60,60,.95))}
.pm-q-cache{filter:drop-shadow(0 0 5px rgba(255,214,90,.8))}
@keyframes pmqBob{from{transform:translateY(0)}to{transform:translateY(-6%)}}
@media (prefers-reduced-motion:reduce){.pm-q{animation:none}}

/* ---- v25: side-by-side buttons: apart, tall and narrow ---- */
.wild-hub.big{width:60%;gap:44px;align-items:stretch}
.wild-hub.big .wh-btn{height:auto;align-self:stretch}
@media(min-width:801px){.place-panel.hasduo>.loc-duo{height:var(--duo-h,auto);min-height:120px}}
.loc-duo{width:60%;gap:44px}
.loc-duo-btn .duo-live{object-fit:cover;object-position:50% 60%;transform:scale(1.5)}
@media(max-width:800px){.wild-hub.big,.loc-duo{width:92%;gap:14px}}

/* ---- v25: side-by-side buttons: apart, tall and narrow, with matching space above ---- */
.wild-hub.big{width:60%;gap:44px;align-items:stretch;margin-top:34px}
.wild-hub.big .wh-btn{height:auto;align-self:stretch}
@media(min-width:801px){.place-panel.hasduo>.loc-duo{height:calc(var(--duo-h,0px) - 20px);min-height:120px;margin-top:calc(var(--duo-gap,15px) + 20px)}}
.loc-duo{width:60%;gap:44px}
.loc-duo-btn .duo-live{object-fit:cover;object-position:50% 60%;transform:scale(1.5)}
@media(max-width:800px){.wild-hub.big,.loc-duo{width:92%;gap:14px}}

/* ---- v26: the bank scrollbar follows the palette (dark blue on Midnight) instead of a fixed brown ---- */
.place-panel.bankview,.bank .bk-vaultcol .bk-grid,.place-panel.bankview .bank .bk-vaultcol .bk-grid{scrollbar-color:var(--scroll) rgba(0,0,0,.28)!important}
.place-panel.bankview::-webkit-scrollbar-track,.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-track,.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
.place-panel.bankview::-webkit-scrollbar-thumb,.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb,.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb{background:var(--scroll)}
.place-panel.bankview::-webkit-scrollbar-thumb:hover,.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb:hover,.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover)}

/* ---- v27: buttons packed to the left (edge gap = gap between them) with a dark preview box filling the rest ---- */
.wild-hub.big,.loc-duo{width:auto!important;margin-left:0!important;margin-right:0!important;padding-left:18px;gap:18px!important}
.loc-duo{display:flex!important}
.loc-duo[hidden]{display:none!important}
.wild-hub.big .wh-btn,.loc-duo-btn{flex:0 0 180px!important;width:180px;min-width:0}
.duo-pv{flex:1 1 0;min-width:0;box-sizing:border-box;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px 22px;background:rgba(0,0,0,.42);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.duo-pv b{font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.duo-pv p{margin:0;font-size:13px;line-height:1.55;color:var(--dim)}
.duo-pv p.pv-idle{opacity:.55}
@media(max-width:800px){.wild-hub.big,.loc-duo{flex-wrap:wrap;padding-left:0}.wild-hub.big .wh-btn,.loc-duo-btn{flex:1 1 40%!important;width:auto}.duo-pv{flex:1 1 100%;min-height:80px}}
.wild-hub.big,.loc-duo{padding-left:0!important;gap:16px!important}
.duo-pv .pv-npc{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--line2)}
.duo-pv p.pv-lore{font-style:italic;font-size:12.5px;line-height:1.6;color:var(--dim)}

/* ---- v28: slightly wider buttons, smaller preview box, all three back at the original height and top/bottom position ---- */
.wild-hub.big .wh-btn,.loc-duo-btn{flex:0 0 198px!important;width:198px}
.duo-pv{flex:0 1 300px;max-width:300px;padding:14px 16px}
.duo-pv p,.duo-pv p.pv-lore{font-size:12px;line-height:1.5}
.wild-hub.big{margin-top:14px}
@media(min-width:801px){.place-panel.hasduo>.loc-duo{height:var(--duo-h,auto);min-height:68px;margin-top:var(--duo-gap,15px)}}
@media(max-width:800px){.duo-pv{flex:1 1 100%;max-width:none}}

/* ---- v29: guild bank fits the page with no scrollbar (the slot grids scroll under the wheel instead), darker bank scrollbar, tighter ? on Market/Farm/House ---- */
.place-panel:has(.gd-bank){scrollbar-width:none}
.place-panel:has(.gd-bank)::-webkit-scrollbar{display:none;width:0;height:0}
.gd-bank .bk-cols .bk-grid{max-height:72px!important;overflow-y:auto!important;scrollbar-width:none!important;-ms-overflow-style:none}
.gd-bank .bk-cols .bk-grid::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.place-panel.bankview,.bank .bk-vaultcol .bk-grid,.place-panel.bankview .bank .bk-vaultcol .bk-grid{scrollbar-color:color-mix(in srgb,var(--scroll) 55%,#000) rgba(0,0,0,.4)!important}
.place-panel.bankview::-webkit-scrollbar-thumb,.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb,.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--scroll) 55%,#000)}
.place-panel.bankview::-webkit-scrollbar-track,.bank .bk-vaultcol .bk-grid::-webkit-scrollbar-track,.place-panel.bankview .bank .bk-vaultcol .bk-grid::-webkit-scrollbar-track{background:rgba(0,0,0,.4)}
.place-title:has(.mk-enter:not([hidden])) h2 .loc-q{margin-left:6px!important}

/* ---- v30: pixel backdrops behind the Tavern, Shop and Faith pages ---- */
.pl-bgw{position:sticky;top:0;left:0;height:0;z-index:0;pointer-events:none;overflow:visible}
.pl-bg{position:absolute;top:0;left:0;display:block;width:100%;object-fit:cover;image-rendering:pixelated;pointer-events:none;filter:brightness(var(--pl-dim,.3))}
.pl-bgw~*{position:relative;z-index:1}

/* ---- v31: the same title row height (so the title sits in the same spot) on Guild Hall, Bank, Market, Farm and House as on the Inn and Town Hall ---- */
.place-panel[data-loc="Guild Hall"]>.place-title,.place-panel[data-loc="Bank"]>.place-title,.place-panel[data-loc="Market"]>.place-title,.place-panel[data-loc="Farm"]>.place-title,.place-panel[data-loc="House"]>.place-title{min-height:30px;box-sizing:border-box}
/* v32: map side panel header sits in the X's row; Back button lines up with the X */
@media(min-width:901px){
#game.mapfs .wmbook>.wm-panel:not(.kt-panel){padding-top:10px}
#game.mapfs .wmbook>.wm-panel:not(.kt-panel)>.wm-ph:first-child{padding-right:38px;min-height:26px}
#game.mapfs .wmbook>.wm-panel>.wm-back{box-sizing:border-box;height:26px;margin:0 0 4px;align-self:flex-start}
}
/* v33: wilderness / Tower / Arena / Open Sea full screen: the map fills the screen, everything else lives in a sidebar */
.scene.dungeon.pmap>.cb-bg{display:none!important}
.scene.pmap.pmfs{padding:0!important;gap:0!important;flex-direction:row!important;align-items:stretch;justify-content:flex-start;background:var(--bg-mid);animation:wmfsin .5s ease .22s both}
.scene.pmap.pmfs>.pm-main{flex:1 1 0;min-width:0;position:relative;overflow:hidden;display:block}
.scene.pmap.pmfs .pm-vp{margin:0;border-radius:0}
.scene.pmap.pmfs>.pm-side{flex:0 0 272px;width:272px;box-sizing:border-box;position:relative;z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 14px;overflow-y:auto;border-left:1px solid var(--line);background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;text-align:left}
.pmfs>.pm-side>.dr-head{margin:0;max-width:none;white-space:normal;justify-content:flex-start;flex-wrap:wrap;padding-right:34px;gap:6px 8px;min-height:26px}
.pmfs>.pm-side>.mg-prog{justify-content:flex-start;max-width:none}
.pmfs>.pm-side>.dr-msg{max-width:none;text-align:left;height:auto;min-height:0;overflow:visible}
.pmfs>.pm-side>.dr-foot{align-items:stretch}
.pmfs>.pm-side .ps-side{position:static!important;width:auto;max-height:none;box-shadow:none;animation:none;flex:1 1 auto;min-height:160px}
.scene.dungeon.pmap.pmfs>.pm-x{top:10px;right:10px;z-index:12}
.scene.dungeon.pmap.pmfs>.pm-tl{z-index:12}
/* v34: hover box keeps a fixed header; body below changes */
.duo-pv{justify-content:flex-start!important;gap:0!important}
.duo-pv .pv-npc{flex:0 0 auto;display:block;width:100%;box-sizing:border-box;margin:0 0 8px;padding-bottom:8px}
.duo-pv .pv-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.duo-pv p.pv-info{font-size:12px;line-height:1.45;color:var(--white,#e8eef2);opacity:.9}
.duo-pv p.pv-info.dim{font-size:11px;color:var(--dim);opacity:1}
.duo-pv p.pv-lore{font-size:10.5px;line-height:1.45;margin-top:2px}
.duo-pv .pv-npc{letter-spacing:.1em;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duo-pv p.pv-lore{font-size:10px;line-height:1.4}
.gd-bank .bk-cols .bk-grid{max-height:67px!important}
/* v35: farm plots list scrolls inside its box (no scrollbar) and the box ends with the page */
.fm-under{border-radius:8px;box-sizing:border-box}
.fm-plist{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;align-content:start}
.fm-plist::-webkit-scrollbar{display:none;width:0;height:0}
.scene.pmap.pmfs>.pm-side.off{display:none}
.scene.pmap.pmfs>.pm-sbt{position:absolute;right:272px;top:50%;transform:translateY(-50%);z-index:12;width:18px;height:56px;padding:0;display:flex;align-items:center;justify-content:center;font:700 16px/1 "IBM Plex Mono",monospace;color:var(--green);background:rgba(var(--sh),.9);border:1px solid var(--line);border-right:0;border-radius:6px 0 0 6px;cursor:var(--cur-a,pointer)}
.scene.pmap.pmfs>.pm-sbt:hover{border-color:var(--green);background:rgba(var(--g),.18)}
.scene.pmap.pmfs>.pm-sbt.off{right:0}
/* v36: the faint Local/Global channel button on the walkable maps gets a soft dark backing so it can be seen */
.chat-panel.pmchat:not(.open) form>.chan-btn{opacity:.85!important;background:rgba(4,6,12,.62)!important;border-radius:6px;padding:4px 8px;box-shadow:0 0 10px 4px rgba(4,6,12,.5);color:var(--white,#e8eef2)}
/* v37: Enter and Expeditions share one centred label box, kept close around the text */
.wild-hub.big .wh-btn .wh-go{padding:5px 13px;font-size:15px;letter-spacing:.12em;border-radius:8px;white-space:nowrap}
.wh-exp:hover:not(:disabled) .wh-go{background:rgba(10,6,5,.94);box-shadow:0 0 14px rgba(var(--g),.45)}
.wh-exp .wh-go{position:relative;z-index:1}
.gh-grid .gh-bl{grid-template-columns:repeat(2,minmax(0,1fr))}
/* v38: the vault card has the same border as the gold card; Slots & Tabs is not bold */
.bank .bk-card.vault,.bk-card.vault{border-color:var(--line)!important}
.bank .shop-title,.bank .shop-toggle,.bank .shop-top .shop-title,.bank .shop-top *{font-weight:400!important}
/* v39: Market page = pixel preview of the room + a condensed side box (Listings / Sell tabs), like the House and Farm */
.market>.shop.mk-open{}
.market>.shop.seedbox{padding:0;border:0;background:none}
.mk-page{align-items:stretch!important}
.mk-page .mk-side{max-height:none;min-height:0;flex:1 1 0;gap:8px;overflow:hidden}
.mk-page .mk-side .hx-tabs{flex:0 0 auto}
.mk-page .mk-filter input{width:100%;box-sizing:border-box}
.mk-page .mk-list{flex:1 1 0;min-height:0;max-height:none!important;overflow-y:auto!important;scrollbar-width:none;border:0;background:none;padding:0}
.mk-page .mk-list::-webkit-scrollbar{display:none}
.mk-page .mk-row{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto;gap:2px 8px;padding:6px 0}
.mk-page .mk-row .mk-item{grid-column:1;grid-row:1}
.mk-page .mk-row .mk-price{grid-column:2;grid-row:1;text-align:right}
.mk-page .mk-row .mk-seller{grid-column:1;grid-row:2;font-size:10px}
.mk-page .mk-row .mk-buy,.mk-page .mk-row .mk-act{grid-column:2;grid-row:2;justify-self:end}
.mk-page .mk-row .q-btn{padding:2px 10px;font-size:11px}
.mk-page .mk-qty{width:44px}
.mk-page .mk-sell{display:flex;flex-direction:column;gap:8px;margin:0}
.mk-page .mk-sell2{display:flex;gap:8px}.mk-page .mk-sell2 input{flex:1 1 0;min-width:0}
.mk-page .mk-sell .q-btn{align-self:flex-start}
.mk-page .mk-sellnote{margin:0;font-size:11px;line-height:1.5}
@media(max-width:800px){.mk-page{flex-direction:column}.mk-page .mk-side{max-height:340px}}
/* v40: Harbor buttons: drifting sea behind Open Sea, still harbour picture behind Sailing Expeditions */
.loc-duo-btn.duo-sea{position:relative;overflow:hidden}
.loc-duo-btn.duo-sea .wh-pan,.loc-duo-btn.duo-sea .wh-expbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;pointer-events:none}
.loc-duo-btn.duo-sea .wh-pan{opacity:.8;filter:brightness(.7)}
.loc-duo-btn.duo-sea .wh-expbg{opacity:.5;filter:brightness(.75)}
.loc-duo-btn.duo-sea .duo-name{position:relative;z-index:1;padding:5px 13px;background:rgba(10,6,5,.82);border-radius:8px;color:var(--green);font-size:15px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.loc-duo-btn.duo-sea:hover:not(:disabled) .duo-name{background:rgba(10,6,5,.94);box-shadow:0 0 14px rgba(var(--g),.45)}
.loc-duo-btn.duo-sea:disabled{opacity:.6}
.loc-duo-btn.duo-sea .duo-name{white-space:normal;text-align:center;font-size:14px;line-height:1.25;max-width:84%}

/* v41 combat menu drops downward and stays open; Character card sits on the right, same size as the monster card */
.cb-menu{bottom:auto!important;top:calc(100% + 8px)}
.cb-inspect.cb-char{left:calc(100% + 12px)!important;right:auto!important;transform:translateX(-8px)!important}
.cb-inspect.cb-char.on{transform:translateX(0)!important}
.cb-wrap.full .cb-inspect.cb-char{position:static;left:auto!important;transform:none!important;width:100%!important;margin-top:10px}
.cc-hero{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;position:relative;z-index:1}
.cc-hero .px-sp{width:auto;height:92%;aspect-ratio:16/21;filter:drop-shadow(0 0 4px rgba(var(--g),.5))}
.cb-char .ci-head{padding-right:0!important}

/* v42 the small equipment box shows plain slots again (no rarity tile) */
.eqm-hands .slot.full,.eqm-armor .slot.full{background:none!important}

/* v43 Lv text in the small pet window is 20% less opaque */
.pet-chip .pet-info em{opacity:.8}

/* v44 Kitchen and Tavern buttons get a dark blue border (lighter than the button's own dark blue) */
.loc-duo-btn.duo-blue,.loc-duo-btn.duo-blue:hover:not(:disabled),.loc-duo-btn.duo-blue:focus-visible:not(:disabled){border-color:#27456b}

/* v44 guild bank grids show every row of slots (the panel scrolls if the window is short) */
.gd-bank .bk-cols .bk-grid{max-height:none!important;overflow:visible!important}

/* v45 Farm, Market and House: the ENTER button sits as close to the ? as the ? sits to the title */
.place-title:has(.mk-enter:not([hidden])) h2{width:auto!important;min-width:0!important;max-width:none!important;flex:none}
.place-title:has(.mk-enter:not([hidden])) h2 .loc-q{margin-left:6px!important}
.place-title:has(.mk-enter:not([hidden])) .pt-left{gap:13px}

/* v46 House Planning Table box is compact so the room and the box both fit above the bottom line */
.hx-main>.pt-box{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:5px;padding:6px 8px}
.hx-main>.pt-box>.pt-head{grid-column:1 / -1;grid-row:1;white-space:nowrap}
.hx-main>.pt-box>.pt-row{grid-column:1;grid-row:2}
.hx-main>.pt-box>.pt-lab{display:none}
.hx-main>.pt-box>.pt-pack,.hx-main>.pt-box>.hx-none{grid-column:2;grid-row:2;min-width:0}
.hx-main>.pt-box .pt-pack{max-height:34px;grid-template-columns:repeat(auto-fill,minmax(24px,1fr))}
.hx-main>.pt-box .hx-none{font-size:10px;line-height:1.3}
.cc-hero .px-sp{height:37%!important}

/* v47 centre text on the Kitchen/Tavern/Forge/... buttons is 25% lighter while idle */
.loc-duo-btn:not(:disabled):not(:hover):not(:focus-visible){color:color-mix(in srgb,rgba(var(--g),.55),#fff 25%)}

/* v48 Market search box matches the Bank search: dark, thin line, green on focus */
.mk-page .mk-filter input{background:rgba(var(--sh),.55)!important;border:1px solid var(--line2)!important;border-radius:6px!important;padding:6px 10px 6px 28px!important;font:inherit;font-size:11px!important;color:var(--white)!important;outline:none;box-shadow:none!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237d8a93' stroke-width='1.6'><circle cx='6.5' cy='6.5' r='4.5'/><path d='M10 10l4.5 4.5'/></svg>")!important;background-repeat:no-repeat!important;background-position:9px 50%!important;background-size:11px 11px!important}
.mk-page .mk-filter input::placeholder{color:var(--dim);letter-spacing:.1em;opacity:.7}
.mk-page .mk-filter input:focus{border-color:var(--green)!important}

/* v49 Bank: Balance and In the vault are one condensed box in the title row, right of the ? */
.place-title .pt-left>.bk-cards{display:flex!important;grid-template-columns:none;align-items:center;gap:0!important;flex:0 1 auto;min-width:0;margin-left:6px;padding:2px 4px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--sh),.4)}
.place-title .pt-left>.bk-cards .bk-card{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:2px 8px!important;border:0!important;border-radius:0!important;background:none!important;min-width:0}
.place-title .pt-left>.bk-cards .bk-card+.bk-card{border-left:1px solid var(--line2)!important}
.place-title .pt-left>.bk-cards .bk-cardtxt{flex-direction:row!important;align-items:baseline;gap:6px!important;flex:0 0 auto}
.place-title .pt-left>.bk-cards .bk-cl{font-size:8.5px;letter-spacing:.1em;white-space:nowrap}
.place-title .pt-left>.bk-cards .bk-big{font-size:13px!important;white-space:nowrap}
.place-title .pt-left>.bk-cards .bk-btns{gap:4px}
.place-title .pt-left>.bk-cards .q-btn{padding:2px 8px!important;font-size:10px!important;min-height:0}
.place-title .pt-left>.bk-cards .ico-btn{padding:2px 5px!important}

/* v50 a little more room above and around the panel headings (World of Aeternum, Recipe Book, and the other side panels that share this layout) */
@media(min-width:901px){
  #game .wmbook>.wm-panel,.kitchbook>.kt-panel.wm-panel,.alchbook>.kt-panel.wm-panel,.forgebook>.kt-panel.wm-panel,.artbook>.kt-panel.wm-panel,.cwbook>.kt-panel.wm-panel{padding-top:18px!important;padding-left:14px;padding-right:14px}
  #game .wmbook>.wm-panel>.wm-ph:first-child,.kt-panel.wm-panel>.wm-ph:first-child{min-height:34px;padding-right:42px;padding-bottom:10px}
  .wmbook>.wm-x,.kitchbook>.wm-x,.alchbook>.wm-x,.forgebook>.wm-x,.artbook>.wm-x,.cwbook>.wm-x{top:14px;right:14px}
}

/* v51 Card Shop window (same layout as the Kitchen) and the new card designs */
.cardbook{display:none}
#game.cardfs .window>.side,#game.cardfs .window>.center{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
#game.cardfs .window{position:relative}
#game.cardfs .window>.cardbook{display:flex;flex-direction:row;gap:0;position:absolute;inset:0;z-index:8;margin:0;padding:0;overflow:hidden;box-sizing:border-box;container-type:inline-size;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));box-shadow:0 10px 35px rgba(var(--sh),.22);animation:wmfsin .5s ease .22s both}
@media(max-width:800px){
  #game.cardfs .window>.side,#game.cardfs .window>.center{display:none}
  #game.cardfs .window>.cardbook{position:relative;inset:auto;flex-direction:column;height:calc(100vh / var(--zoom,1) - 150px);min-height:480px}
}
.cardbook .kt-scene{background:#1a1030}
.cardbook .kt-cv{object-position:50% 58%}
@media(min-width:901px){.cardbook>.kt-panel.wm-panel{padding-top:18px;padding-left:14px;padding-right:14px}.cardbook>.wm-x{top:14px;right:14px}}
.cardbook .kt-hd .ico,.cardbook .kt-cook .ico{flex:none;margin:0}
.cardbook .kt-lv i{font-style:normal;margin-left:2px}
.cs-fan{position:relative;width:84px;height:44px;gap:0;margin-right:22px}
.cs-fan .tc{position:absolute;bottom:0;width:30px!important}
.cs-b1{left:4px;transform:rotate(-16deg);transform-origin:50% 100%}.cs-b2{left:27px;z-index:1}.cs-b3{left:50px;transform:rotate(16deg);transform-origin:50% 100%}
.cs-sets{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.cs-set{position:relative;flex-wrap:wrap;padding-bottom:9px}
.cs-set .cs-bar{position:absolute;left:7px;right:7px;bottom:3px;height:3px;background:rgba(var(--sh),.6);border:0}
.cs-set .cs-bar b{position:absolute;left:0;top:0;bottom:0;background:var(--ec,var(--green))}
.cs-set.on{border-color:var(--ec,var(--green))}
.cs-chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
.cs-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:10px}
.cs-chip .ico{flex:none;margin:0}
.cs-chip.on{border-color:var(--green);color:var(--green);background:rgba(var(--g),.16)}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;justify-items:center;margin:0 0 8px}
.cs-grid .tc{width:100%!important;max-width:104px}

/* the card face: frame image behind, everything laid out in percentages of the card so it scales cleanly */
.tc.tcx{position:relative;display:block;box-sizing:border-box;width:84px;aspect-ratio:64/90;min-height:0;padding:0;border:0;border-radius:5px;background:var(--tcf-common) center/100% 100% no-repeat;image-rendering:pixelated;container-type:inline-size;overflow:visible;color:var(--white);text-align:center}
.tc.tcx.tc-uncommon{background-image:var(--tcf-uncommon)}.tc.tcx.tc-rare{background-image:var(--tcf-rare)}.tc.tcx.tc-legendary{background-image:var(--tcf-legendary)}.tc.tcx.tc-mythic{background-image:var(--tcf-mythic)}
.tc.tcx.tc-back{background-image:var(--tcf-back)}
.tc.tcx.tc-legendary{box-shadow:0 0 10px rgba(240,144,48,.45)}
.tc.tcx.tc-mythic{box-shadow:0 0 12px rgba(240,80,208,.5)}
.tc.tcx.click{cursor:var(--cur-a,pointer);transition:transform .15s ease,filter .15s ease}
.tc.tcx.click:hover{transform:translateY(-3px);filter:brightness(1.12)}
.tc.tcx.tc-unk{opacity:.55;filter:grayscale(.7) brightness(.8);border:0}
.tcx-art{position:absolute;left:15.6%;top:10.5%;width:68.8%;height:42.5%;overflow:hidden;clip-path:polygon(7% 0,93% 0,100% 7%,100% 92%,94% 100%,6% 100%,0 92%,0 7%);background:radial-gradient(ellipse at 50% 62%,var(--e2,#ffc060) 0%,var(--e1,#e0661a) 38%,var(--e0,#3a0e06) 100%);display:flex;align-items:center;justify-content:center}
.tc-unk .tcx-art{background:radial-gradient(ellipse at 50% 60%,#2a2f48,#0b1020)}
.tcx-pic{display:flex;align-items:center;justify-content:center;width:78%;height:78%;margin-top:-4%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 4px rgba(255,255,255,.35))}
.tcx-pic>*{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
.tcx-stars{position:absolute;left:0;right:0;bottom:2%;display:flex;justify-content:center;gap:1px;font-size:6.6cqw;line-height:1;pointer-events:none}
.tcx-stars i{font-style:normal;color:#1c1830;text-shadow:0 0 1px #000}.tcx-stars i.on{color:#ffc03a;text-shadow:0 0 2px #a85a10}
.tcx-lv{position:absolute;left:50%;top:1.6%;transform:translateX(-50%);width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7ab4f8,#2a5aa8 70%);border:1px solid #f3dc8a;display:flex;align-items:center;justify-content:center;font-size:6.4cqw;font-weight:700;line-height:1;color:#fff;text-shadow:0 1px 0 #10306a;z-index:2}
.tcx-name{position:absolute;left:9.5%;right:9.5%;top:55.3%;height:11.6%;display:flex;align-items:center;justify-content:center;font-size:var(--nf,7cqw);font-weight:600;line-height:1.05;letter-spacing:-.01em;color:#eef4ff;text-shadow:0 1px 0 #10306a,0 0 2px #10306a;text-transform:uppercase;overflow:hidden}
.tcx-name span{display:block;max-width:100%;text-align:center;overflow:hidden}
.tcx-stats{position:absolute;left:13%;right:13%;top:69.8%;height:6.4%;display:flex;align-items:center;justify-content:space-between;font-size:6.2cqw;font-weight:600;color:#f3dc8a}
.tcx-stats span{display:inline-flex;align-items:center;gap:2px}
.tcx-stats .ico{flex:none;margin:0;width:6.8cqw!important;height:6.8cqw!important;color:#f3dc8a}
.tcx-text{position:absolute;left:17%;right:17%;top:79.6%;height:15%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#3a2c18;overflow:hidden}
.tcx-text b{font-size:5.8cqw;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4a3418}
.tcx-text p{margin:0;font-size:5cqw;line-height:1.25;font-style:italic;color:#3a2c18}
.tc.tcx .tc-n{position:absolute;right:5%;top:46%;bottom:auto;z-index:3;font-style:normal;font-size:7cqw;font-weight:700;color:#fff;background:rgba(10,14,30,.85);border:1px solid #f3dc8a;border-radius:99px;padding:0 .35em;line-height:1.4}
.tc.tcx.tc-mythic::after{content:"";position:absolute;inset:3%;border-radius:4px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,200,250,.35) 50%,transparent 65%);background-size:250% 100%;animation:tcshine 3.2s linear infinite;mix-blend-mode:screen}
.tc.tcx.tc-legendary::after{content:"";position:absolute;inset:3%;border-radius:4px;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,220,150,.28) 50%,transparent 60%);background-size:250% 100%;animation:tcshine 4.5s linear infinite;mix-blend-mode:screen}
@keyframes tcshine{0%{background-position:150% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.tc.tcx.tc-mythic::after,.tc.tcx.tc-legendary::after{animation:none}}
/* big card (when you look closely) and the pack-opening scene */
.tc.tcx.tc-large{width:200px;margin:8px auto 6px;padding:0}
.tc.tcx.tc-large .tcx-text p{font-size:4.4cqw}
.cardbig{max-width:300px}
.pk-card.tcx{width:118px;min-height:0}
.pk-card.back{display:block;width:118px;min-height:0;aspect-ratio:64/90;border:0;border-radius:5px;background:var(--tcf-back) center/100% 100% no-repeat;image-rendering:pixelated}
.pk-card.back>*{display:none}
.tc.tcx.tc-large .tcx-text b{display:none}
.tc.tcx.tc-large .tcx-text p{font-size:4.8cqw;line-height:1.3}
.tcx-pic{width:72%;height:70%;margin-top:-6%}
.cs-fan{width:78px!important;margin-right:34px!important;margin-left:0}
.cs-b1{left:0!important}.cs-b2{left:24px!important}.cs-b3{left:46px!important}
.cs-fan{margin-right:46px!important}

/* v52 crafting-station buttons follow the palette's own line colour; Midnight (the default palette) gets a dark blue a touch lighter than its background */
:root:not([data-theme]),:root[data-theme=""]{--duo-bd:#183560}
.loc-duo-btn.loc-duo-btn,.loc-duo-btn.loc-duo-btn:disabled,.loc-duo-btn.duo-blue.duo-blue{border-color:var(--duo-bd,var(--line))}
/* hovering still lights the border up exactly as before */
.loc-duo-btn.loc-duo-btn:hover:not(:disabled),.loc-duo-btn.loc-duo-btn:focus-visible:not(:disabled),.loc-duo-btn.duo-blue.duo-blue:hover:not(:disabled),.loc-duo-btn.duo-blue.duo-blue:focus-visible:not(:disabled){border-color:var(--green)}

/* v53 the Auto checkmark sits in the middle of its box */
.fe-cont input:checked::after{left:50%;top:50%;width:3px;height:6px;margin:0;transform:translate(-50%,-62%) rotate(45deg)}
.pm-main .dr-foot .mg-btns:empty,.scene.pmap .dr-foot .mg-btns:empty{display:none}
/* v54: forest / wilderness maps: side panel hidden by default, overlaps the map's right edge (camera untouched); chat text left aligned */
.scene.pmap.pmfs>.pm-side.ovl{background-color:var(--bg-mid);position:absolute;top:0;right:0;bottom:0;flex:none;box-shadow:-8px 0 24px rgba(0,0,0,.45)}
.scene.pmap.pmfs>.pm-side.ovl.off{display:none}
.scene.pmap .chat-panel.pmchat .pane p{text-align:left;max-width:none;font-size:11px;line-height:normal;letter-spacing:normal;margin:0 0 4px}
/* v55 Bank: the Balance / vault box stretches to the right and the two halves are equal, so the buttons stay put whatever the gold */
.place-title .pt-left>.bk-cards{flex:1 1 auto!important;align-self:center}
.place-title .pt-left>.bk-cards .bk-card{flex:1 1 0!important}
.place-title .pt-left>.bk-cards .bk-btns{margin-left:auto}
.place-title .pt-left>.bk-cards .bk-card{padding:2px 8px 2px 12px!important}
/* v56 Begin Adventure: dark blue, text lights up white and glows on hover */
.land .land-begin{color:#3a6db5!important;border-color:#1b4378!important;transition:color .25s ease,text-shadow .25s ease,border-color .25s ease}
.land .land-begin:hover:not(:disabled),.land .land-begin:focus-visible{color:#fff!important;border-color:#1b4378!important;text-shadow:0 0 6px rgba(255,255,255,.95),0 0 14px rgba(190,220,255,.8),0 0 26px rgba(120,170,255,.6)}
/* v57 side-by-side buttons (crafting stations, Forest/Wilderness Enter | Expeditions) use the same outline colour as the rest of the UI */
:root:not([data-theme]),:root[data-theme=""]{--duo-bd:var(--line)}
.loc-duo-btn.loc-duo-btn,.loc-duo-btn.loc-duo-btn:disabled,.loc-duo-btn.duo-blue.duo-blue,.wild-hub .wh-btn,.wild-hub .wh-btn:disabled{border-color:var(--line)}
.loc-duo-btn.loc-duo-btn:hover:not(:disabled),.loc-duo-btn.loc-duo-btn:focus-visible:not(:disabled),.loc-duo-btn.duo-blue.duo-blue:hover:not(:disabled),.loc-duo-btn.duo-blue.duo-blue:focus-visible:not(:disabled),.wild-hub .wh-btn:hover:not(:disabled){border-color:var(--green)}
/* v58 hover box: header, then the lore quote (both fixed), then the section that changes with the hover */
.duo-pv p.pv-lore{flex:0 0 auto;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
/* v59 hover box: the changing info sits in its own inset box, a little apart from the lore */
.duo-pv p.pv-lore{margin:0 0 12px;padding-bottom:0;border-bottom:0}
.duo-pv .pv-body{box-sizing:border-box;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:rgba(var(--sh),.35)}
/* v60 the Arena and Tower of Trials have no old page any more: they open straight into their map */
.place-panel.ps-hide{visibility:hidden!important}
/* v61 Sailing Expeditions page: a section for each thing, long lists scroll inside their own section */
.place-panel .sp-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;height:100%;min-height:0;margin-top:6px}
.sp-col{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.sp-card{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--sh),.35)}
.sp-card.sp-exp{flex:0 0 auto}.sp-card.sp-routes{flex:1 1 0}.sp-card.sp-ships{flex:1 1 auto}
.sp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:7px;margin-bottom:6px;border-bottom:1px solid var(--line2)}
.sp-head b{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sp-head .gd-dim{font-size:10px;text-align:right}
.sp-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;padding-right:4px}
.sp-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;border:1px solid transparent;border-radius:8px;border-bottom:1px solid rgba(var(--hi),.05)}
.sp-row.own{cursor:var(--cur-a,pointer)}.sp-row.own:hover{background:rgba(var(--g),.06)}
.sp-row.sel{border-color:var(--green);background:rgba(var(--g),.08)}
.sp-name{display:flex;flex-direction:column;min-width:0;gap:2px}.sp-name span{color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-name em{font-style:normal;font-size:10.5px;color:var(--dim)}
.sp-name .bar{margin-top:4px}
.sp-buy{display:flex;align-items:center;gap:8px}
.sp-note{margin:0 0 8px;font-size:11px;line-height:1.5;color:var(--dim)}
.sp-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sp-crates{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:11px}.sp-crates b{min-width:18px;text-align:center;color:var(--white)}
.place-panel:has(.sp-page){display:flex;flex-direction:column;overflow:hidden}
.place-panel:has(.sp-page)>.house.xtra{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.place-panel:has(.sp-page) .sp-page{flex:1 1 auto}
.place-panel:has(.sp-page)>.place-desc{flex:none}
.place-panel:has(.sp-page)>.place-title{flex:none}
.sp-note.sp-tiny{font-size:10px;margin:0 0 6px}
.place-panel .sp-page{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.sp-name span{font-size:12.5px}
.sp-col{overflow:hidden}.sp-card.sp-routes{min-height:150px}
/* v62 the Arena / Tower menus riding in the map's side panel read like the normal pages (the map scene centres its paragraphs) */
.scene.pmap .ps-side p,.scene.pmap .ps-side-body p{text-align:left;max-width:none;font-size:11.5px;line-height:1.5;letter-spacing:normal}
.scene.pmap .ps-side .tabs,.scene.pmap .ps-side-body .tabs{flex-wrap:wrap}
/* v63 crafting stations: craftable recipes glow instead of having Use buttons; a tick at the top right turns it off */
.wm-panel .wm-ph{position:relative}
.kt-glowopt{position:absolute;right:0;top:0;display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.06em;color:var(--dim);cursor:var(--cur-a,pointer);user-select:none}
.kt-glowopt input{width:13px;height:13px;margin:0;accent-color:var(--green);cursor:inherit}
.kt-glowopt:hover{color:var(--white)}
.kt-rc.cuse{cursor:var(--cur-a,pointer)}
.wm-panel:not(.noglow) .kt-rc.cglow{border-color:var(--green);background:rgba(var(--g),.07);animation:ktglow 2.2s ease-in-out infinite}
@keyframes ktglow{0%,100%{box-shadow:0 0 0 rgba(var(--g),0)}50%{box-shadow:0 0 12px rgba(var(--g),.5),inset 0 0 8px rgba(var(--g),.14)}}
.kt-rc.cuse:hover{border-color:var(--green)}
@media(prefers-reduced-motion:reduce){.wm-panel:not(.noglow) .kt-rc.cglow{animation:none;box-shadow:0 0 10px rgba(var(--g),.4)}}
.kt-glowopt{right:48px;top:50%;transform:translateY(-50%);white-space:nowrap}
.kt-glowopt{position:static;transform:none;margin-left:auto;margin-right:42px;flex:none}
.wm-panel.kt-panel .wm-ph h3{white-space:nowrap}
/* v64 pet face follows the UI (white in Midnight), paw button a little higher, Wizard's Tower Standard button white */
.pet-face{color:var(--white,#e8eef2);opacity:1}
.pet-chip .pc-more.pc-ico{bottom:14px}
.em-ulttab.on{color:var(--white,#e8eef2)}
.em-ulttab.on svg,.em-ulttab.on canvas{color:var(--white,#e8eef2)}
/* v65 Equipment / Gathering & Crafting Gear tabs are dark rectangle buttons; a little less space above the bank's button row */
.place-title .pt-tab{background:rgba(var(--sh),.55);border:1px solid var(--line);border-radius:6px;padding:4px 12px;margin-right:8px;color:var(--dim)}
.place-title .pt-tab:hover{color:var(--white);border-color:var(--green)}
.place-title .pt-tab.on{color:var(--white);border:1px solid var(--green);background:rgba(var(--g),.1)}
.bank .bk-balance .bk-toolrow,.bank .bk-top .bk-toolrow{margin-top:3px!important}

/* v66 small equipment box: main hand / off hand get a very slight rarity glow behind the icon */
.eqm-hands .slot.full{--gl:150,160,180;background:radial-gradient(circle at 50% 50%,rgba(var(--gl),.2) 0%,rgba(var(--gl),.07) 55%,transparent 80%)!important;box-shadow:0 0 7px rgba(var(--gl),.16)}
.eqm-hands .slot.full:has(>.eqt.rt-uncommon){--gl:111,207,111}
.eqm-hands .slot.full:has(>.eqt.rt-rare){--gl:90,169,255}
.eqm-hands .slot.full:has(>.eqt.rt-legendary){--gl:255,169,77}
.eqm-hands .slot.full:has(>.eqt.rt-mythic){--gl:255,106,213}

/* v67 side Elemental Mastery tabs: tiny ACTIVES / PASSIVES / UTILITY labels back inside the three boxes */
.spellsv .em-page.compact .em-tab{flex-direction:column;gap:2px;padding:4px 1px}
.spellsv .em-page.compact .em-tab span{display:block;max-width:100%;font-size:7px;line-height:1;letter-spacing:.04em;text-transform:uppercase}

/* v68 Elemental Mastery side page: no scrollbar (it was squeezing the skill tree and cutting off the left squares); it still scrolls */
.stats .sv-stack>.sv.spellsv{scrollbar-width:none;-ms-overflow-style:none;scrollbar-gutter:auto;margin-right:0;width:100%!important;padding-right:0}
.stats .sv-stack>.sv.spellsv::-webkit-scrollbar{display:none;width:0;height:0}


/* v69 Old Brannoch's gift in the Forge: no Choose buttons; the whole box glows on hover and a click accepts it */
.kt-rc.kt-gift{cursor:var(--cur-a,pointer);transition:border-color .2s,box-shadow .25s,background-color .2s}
.kt-rc.kt-gift:hover,.kt-rc.kt-gift:focus-visible{border-color:var(--green);background:rgba(var(--g),.12);box-shadow:0 0 12px rgba(var(--g),.35);outline:none}

/* v70 the combat window never shows while it is still empty (a wide blank box used to flash in the centre before the fight drew itself) */
.scene.combat .cb-wrap:has(.cb:empty){opacity:0!important;visibility:hidden!important}

/* v71 combat: the player's pixel model stands above the dashed line the same distance as the monster on the left (about 10px) */
.cb-inspect.cb-char .cc-hero .px-sp{margin-bottom:8px}

/* ======================= CLASSIC SERVER: fully text-based (html.classic is set by /mode.js) ======================= */
/* Safety net: no pictures of any kind. Every screen that used pixel art has a text version (classic-ui.js), and anything missed stays hidden. */
html.classic canvas,html.classic img{display:none!important}
html.classic .pl-bgw,html.classic .duo-live,html.classic .cc-prev,html.classic .cl-hero{display:none!important}
/* a hero on a grid is the first letter of their name */
html.classic .dg-hv .cl-hero,html.classic .hx-av .cl-hero{display:inline-flex!important;align-items:center;justify-content:center;width:1.6em;height:1.6em;border:1px solid var(--green,#5be37d);border-radius:50%;font-weight:500;font-size:13px;color:var(--green,#5be37d);background:rgba(0,0,0,.35)}
html.classic .fm-enter{display:none!important}
/* the pixel battle font is replaced by the game's own typewriter font */
html.classic .cb-now,html.classic .cb-now span,html.classic .cb-foe .cb-name b{font-family:"IBM Plex Mono",monospace!important}
/* monsters are a name card instead of a sprite */
html.classic .cl-mv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:120px;min-height:64px;padding:12px 18px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25);text-align:center;color:var(--white)}
html.classic .cl-mv .cl-mv-n{font-size:14px;letter-spacing:.06em;text-transform:uppercase}
html.classic .cl-mv .cl-mv-s{font-size:10px;color:var(--dim);letter-spacing:.08em}
html.classic .cl-mv.boss{border-color:#c94a4a;color:#ff9a9a}
html.classic .cl-mv.sil .cl-mv-n{color:var(--dim)}
html.classic .cl-mv.thumb{min-width:0;min-height:0;padding:6px 8px;border:0;background:none}
html.classic .cl-mv.thumb .cl-mv-n{font-size:10px}
html.classic .cl-mv.thumb .cl-mv-s{display:none}
html.classic .cl-mv.cl-spawn{animation:clSpawn .7s ease-out}
@keyframes clSpawn{0%{opacity:0;transform:scale(.9)}40%{opacity:1;transform:scale(1.06)}100%{transform:none}}
/* the map: only its text side (places, dungeons, details, travel), filling the middle window */
html.classic .wm-vp,html.classic .wm-sbt{display:none!important}
html.classic .wm-panel{flex:1 1 auto!important;max-height:none!important;border-left:0!important;border-top:0!important;padding:4px 6px}
html.classic #game.mapfs .window>.mapbook.wmbook{background:var(--panel-bg,#06101f)}
html.classic #game.mapfs .wmbook>.wm-panel{padding:14px 18px;font-size:12px}
html.classic .duo-art{display:none!important}
html.classic .cl-mood{font-size:10px;letter-spacing:.06em;text-transform:lowercase;color:var(--dim);width:auto!important;height:auto!important}
html.classic .cl-mood-joyful,html.classic .cl-mood-content{color:var(--green,#5be37d)}
html.classic .cl-mood-hungry{color:#e8b64a}
html.classic .cl-mood-lonely{color:#e06060}
/* the farm as text */
html.classic .cl-farm .hx-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
html.classic .cl-field{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
html.classic .cl-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html.classic .cl-seed{background:transparent;color:var(--white);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font:inherit}
html.classic .cl-plist{display:flex;flex-direction:column;gap:4px;overflow-y:auto}
html.classic .cl-prow{display:flex;align-items:center;gap:10px;padding:4px 8px;border:1px solid var(--line);border-radius:6px}
html.classic .cl-prow .fm-pt{flex:1}
html.classic .cl-prow.ready .fm-pt{color:var(--green,#5be37d)}
html.classic .cl-farm .hx-main{flex:1 1 58%}
html.classic .cl-farm .hx-side{flex:1 1 42%;min-width:250px;width:auto!important;max-width:none!important}
/* crafting windows (Kitchen, Forge, Alchemy, Artisan, Enchanting, Gemcutting, Lithomancy, Card Shop): no scene, just the title bar, the bench and the book */
html.classic .kt-scene{flex:0 0 auto!important;min-height:48px!important;background:transparent!important;border-bottom:1px solid var(--line)}
html.classic .kt-popwrap{display:none!important}
/* dungeon rooms as text */
html.classic .cl-room{display:flex;flex-direction:column;gap:8px;width:min(640px,92vw);margin:0 auto;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(3,8,16,.7);position:relative;z-index:2}
html.classic .cl-room .dg-title.trap,html.classic .cl-room .co-title.trap{color:#ff8a8a}
html.classic .cl-room-exit{display:flex;justify-content:flex-end}
html.classic .cl-sea-row,html.classic .cl-room-row{grid-template-columns:auto 1fr auto auto}
html.classic .dg-cell.s1:not([disabled]){cursor:var(--cur-a,pointer)}

/* ======================= the two servers: the small switch at the bottom right of the start page ======================= */
.land .srv-switch{position:fixed;right:calc(20px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:5;margin:0!important;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(4,10,22,.55);color:var(--dim);font:500 10px/1.2 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:var(--cur-a,pointer);transition:color .2s,border-color .2s,background .2s}
.land .srv-switch:hover,.land .srv-switch:focus-visible{color:var(--green,#5be37d);border-color:var(--green,#5be37d);background:rgba(4,14,22,.8);outline:none}
.land .srv-switch .srv-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
/* trading cards as plain text cards (the older card look, no pixel frames) */
html.classic .tc.tcx{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;aspect-ratio:auto;min-height:124px;padding:16px 6px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.3)!important;image-rendering:auto;text-align:center;container-type:normal;overflow:hidden}
html.classic .tc.tcx.tc-uncommon{border-color:#6fcf6f}html.classic .tc.tcx.tc-rare{border-color:#5aa9ff}html.classic .tc.tcx.tc-legendary{border-color:#ffa94d}html.classic .tc.tcx.tc-mythic{border-color:#ff6ad5}
html.classic .tc.tcx::after{display:none!important}
html.classic .tc.tcx.tc-unk{filter:none;opacity:.45;border:1px dashed var(--line)}
html.classic .tcx-art{position:static;width:auto;height:auto;clip-path:none;background:none!important;display:flex;flex-direction:column;align-items:center;gap:3px;overflow:visible}
html.classic .tcx-pic{width:auto;height:auto;margin:0;filter:none;color:var(--green,#5be37d)}
html.classic .tcx-pic>*{width:26px!important;height:26px!important;image-rendering:auto}
html.classic .tcx-stars{position:static;font-size:9px;gap:1px}
html.classic .tcx-stars i{color:var(--line);text-shadow:none}html.classic .tcx-stars i.on{color:#ffc03a;text-shadow:none}
html.classic .tcx-lv{position:absolute;left:6px;top:4px;transform:none;width:auto;aspect-ratio:auto;background:none;border:0;color:var(--dim);font-size:9px;box-shadow:none}
html.classic .tcx-name{position:static;height:auto;font-size:11px!important;font-weight:500;color:var(--white);text-shadow:none;letter-spacing:0}
html.classic .tcx-stats{position:static;height:auto;gap:8px;justify-content:center;font-size:10px;color:var(--white)}
html.classic .tcx-stats .ico{width:10px!important;height:10px!important;color:var(--dim)}
html.classic .tcx-text{position:static;height:auto;color:var(--dim)}
html.classic .tcx-text b{font-size:8px;color:var(--dim)}
html.classic .tcx-text p{font-size:10px;color:var(--dim)}
html.classic .tc.tcx .tc-n{top:4px;right:6px;font-size:9px;border-color:var(--line)}
html.classic .tc.tcx.tc-large{width:220px}
html.classic .tc.tcx.tc-large .tcx-name{font-size:14px!important}
html.classic .tc.tcx.tc-large .tcx-pic>*{width:44px!important;height:44px!important}
html.classic .tc.tcx.tc-large .tcx-text p{font-size:11px}
html.classic .tc.tcx.tc-back,html.classic .pk-card.back{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35)!important;border:1px solid var(--line);border-radius:8px;min-height:124px}
html.classic .tc.tcx.tc-back::before,html.classic .pk-card.back::before{content:"?";font-size:12px;letter-spacing:.3em;color:var(--dim)}
html.classic .cs-fan{display:none!important}
html.classic .cc-hero .cl-mv{display:flex}
html.classic .cl-me{border-color:var(--green,#5be37d);color:var(--green,#5be37d)}