/* ===== 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:hover:not(:disabled){background:var(--green);color:var(--on-accent)}.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:hover:not(:disabled){background:rgba(var(--g),.12)}.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)}.text-button:hover{color:var(--green)}

/* ===== 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:hover,.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}.mini-button:hover{color:var(--green2)}

.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:hover:not(:disabled),.quests button:hover:not(:disabled){background:rgba(var(--g),.10)}.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:hover,.tool:focus-visible{border-color:var(--green);background:rgba(var(--g),.10);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:hover,.home:focus-visible,.home.here{border-color:var(--green);background:rgba(var(--g),.10);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:hover{color:var(--white)}.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:hover:not(:disabled){background:rgba(var(--g),.10)}.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:hover:not(:disabled){border-color:var(--green);color:var(--green)}.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.click:hover{border-color:var(--green);background:rgba(var(--g),.08)}.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-x:hover{color:var(--green)}
.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}
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:thin;scrollbar-color:var(--scroll) transparent}
.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}
.shard-opt:hover{border-color:var(--green);background:rgba(var(--g),.08)}
.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 .28s 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:hover:not(:disabled){background:rgba(var(--g),.10)}.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:hover{color:var(--white)}.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:hover{background:rgba(var(--g),.10)}.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}
button.mp-cell:not(:disabled):hover{border-color:var(--green);color:var(--green)}.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:hover{color:var(--white)}.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-chip:hover{border-color:var(--green)}
.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}.msg-x:hover{color:#c66}
/* 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:hover{color:var(--green)}
.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:hover{color:var(--white)}.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:hover span{color:var(--green)}.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)}.forum-x:hover{color:var(--green);border-color:var(--green)}
.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:hover,.scene-skip:focus-visible{opacity:1;background:rgba(255,255,255,.12)}

/* 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{border-color:var(--green);background:rgba(var(--sh),.34);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,.42),rgba(14,8,6,.72))}
.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.click:hover{background:rgba(var(--g),.10)}.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:hover{color:var(--white)}.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:hover:not(:disabled){background:rgba(95,224,138,.22)}.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:hover:not(:disabled){border-color:var(--green);background:rgba(95,224,138,.08)}.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 .forest-explore:hover:not(:disabled){background:rgba(var(--g),.24)}
.acts .gg-tile{border-color:var(--line2);color:var(--white)}.acts .gg-tile:hover:not(:disabled){border-color:var(--green);background:rgba(var(--g),.10)}
.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)}.sk-row.click:hover .sk-name{color:var(--green)}
.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:hover{border-color:var(--green)}.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:hover:not(.locked){background:rgba(var(--g),.18)}.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:start}#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:hover{color:var(--green);border-color:var(--line)}.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:hover,.ac-rec.ac-go:hover{border-color:var(--green)}
.ac-row.ac-go .ac-desc{opacity:.85}

/* forum: no colour flash while the frame loads, and a tidier header */
#forum-overlay{background:var(--field-bg,#000)}
.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:hover{background:rgba(var(--g),.1);color:var(--white)}.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:hover:not(:disabled){background:rgba(var(--g),.16)}.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-x:hover{color:var(--white)}
.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-acts button:hover:not(:disabled){background:rgba(var(--g),.18);border-color:var(--green)}
.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:hover,.pf-x:focus-visible,.cbs-x:hover{color:var(--white);border-color:var(--green);background:rgba(var(--g),.12);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:hover:not(:disabled),.pc-more:hover{border-color:var(--green);color:var(--green)}.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}
.sub-link:hover{color:#fff;border-color:#fff}
.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 .chan-btn:hover{border-bottom-color:var(--green)!important;color:var(--green)!important}
.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:hover:not(:disabled){background:rgba(var(--g),.14);border-color:var(--green)}.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:hover{background:rgba(var(--g),.08)}.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)}.pf-season:hover{color:#fff;border-color:#fff}

/* ---- 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)}
.q-help:hover{color:var(--green);border-color:var(--green)}

/* 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)}
button.poll-opt:hover{border-color:var(--green);color:var(--green)}.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:hover{border-color:#c33}
.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}
.pi-x:hover{color:#fff;border-color:#fff}
.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)}
.shop-toggle:hover{color:#fff}
.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:hover,.cal-tab.on{opacity:1;border-color:var(--accent,#c9a45c);color:var(--accent,#c9a45c)}
@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:hover{color:var(--green);border-color:var(--line)}.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:hover{color:var(--green);border-color:var(--line)}.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:hover,.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:hover{color:var(--green);border-color:var(--line)}.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)}.locs-chron:hover{border-color:var(--green);background:rgba(var(--g),.08)}
.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)}
.stats .stat-btn.top:hover{background:rgba(127,232,255,.18)}
@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);border-color:var(--green);color:var(--white)}
.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);border-color:var(--green);color:var(--white)}
.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);border-color:var(--green)}.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);border-color:var(--green)}.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:hover:not(:disabled){border-color:var(--green);background:rgba(var(--g),.16)}.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,.pt-stables:hover{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:hover:not(:disabled){border-color:var(--green)}.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:hover{color:var(--white);border-color:var(--green)}.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:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(var(--sh),.35)}
.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-act:hover:not(:disabled){border-color:#fff;background:rgba(255,255,255,.1)}.co-act.hot-red:hover:not(:disabled){border-color:#ff5a5a;background:rgba(255,90,90,.14)}.co-act.hot-blue:hover:not(:disabled){border-color:#6eaaff;background:rgba(110,170,255,.14)}
.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) * 14.3%),calc(var(--dy,0) * 14.3%))}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}}