:root, [data-theme="dark"] {
    /* dark: cave rock. purples/greys, copper, emerald, gold */
    --bg: #18141d;
    --surface: #2b2533;
    --surface2: #352e3f;
    --border: #4b4158;
    --border-hl: #e07b2e;
    --accent: #e07b2e;
    --accent2: #4fcf5c;
    --play: #4fcf5c;
    --play-dk: #2c8f37;
    --text: #e9e0cc;
    --text2: #a597b0;
    --heading: #fff3d9;
    --input-bg: #1e1924;
    --input-bd: #0c0a0e;
    --input-fg: #f1e8d4;
    --tab-bg: #e07b2e;
    --tab-fg: #fff;
    --sel: #4fcf5c;
    --check: #4fcf5c;
    --snow: rgba(170,150,200,0.22);
    --panel-bg: #2b2533;
    --shadow: rgba(0,0,0,0.6);
    --kb-bg: #352e3f;
    --kb-bd: #4b4158;
    --kb-hl: #f0b53a;
    --link: #f39a52;
    --credit1: #4fcf5c;
    --scroll-t: #4b4158;
    --tank-a: #4ec4e8;
    --tank-a-line: #142838;
    --tank-b: #e86262;
    --tank-b-line: #4a1818;
    --tank-c: #5ed86a;
    --tank-c-line: #1a381c;
    --tank-d: #9b78e0;
    --tank-d-line: #2a2048;
    --tank-e: #e8c04a;
    --tank-e-line: #4a3c10;
    --tank-gun: #9a9288;
    /* the hand-drawn bits: outline ink, the button lips, plate bevels */
    --ink: #0c0a0e;
    --copper: #e07b2e;
    --copper-dk: #9e4a14;
    --gold: #f2b83c;
    --gold-dk: #a8750f;
    --emerald: #3fcf7a;
    --rock: #5a5670;
    --rock-dk: #3a3748;
    --face: #4a4156;          /* plain button face */
    --face-dk: #2e2837;       /* ...and its lip */
    --bevel: rgba(255,255,255,.07);
    --dim: rgba(8,6,12,.62);  /* behind dialogs */
    --display: 'Lilita One', 'Rubik', Ubuntu, sans-serif;
    /* Lilita is for titles only; everything you read or click is Rubik,
       the same face the in-game HUD text uses */
    --ui: 'Rubik', Ubuntu, sans-serif;
    /* edges and shadows: a hairline in the surface's own family and a soft
       cast shadow */
    --line: #120e16;
    --line-soft: rgba(255,255,255,.06);
    --cast: rgba(0,0,0,.42);
    --well: rgba(0,0,0,.22);
    --focus: rgba(224,123,46,.55);
}

[data-theme="light"] {
    /* light: sandstone and parchment, same inks */
    --bg: #eadbb6;
    --surface: #fbf3de;
    --surface2: #f1e3c1;
    --border: #cfb88c;
    --border-hl: #d46a1f;
    --accent: #d46a1f;
    --accent2: #3fae3a;
    --play: #4cc24a;
    --play-dk: #2b8a2c;
    --text: #2a1f12;
    --text2: #7a6446;
    --heading: #1b1208;
    --input-bg: #fffaec;
    --input-bd: #1b1510;
    --input-fg: #2a1f12;
    --tab-bg: #d46a1f;
    --tab-fg: #fff;
    --sel: #3a9a2b;
    --check: #3fae3a;
    --snow: rgba(150,110,50,0.2);
    --panel-bg: #fbf3de;
    --shadow: rgba(50,35,10,0.15);
    --kb-bg: #f1e3c1;
    --kb-bd: #cfb88c;
    --kb-hl: #b0561a;
    --link: #b0561a;
    --credit1: #3a9a2b;
    --scroll-t: #c8b484;
    --tank-a: #3d8ec4;
    --tank-a-line: #1a3048;
    --tank-b: #c85050;
    --tank-b-line: #5a2222;
    --tank-c: #4aa85a;
    --tank-c-line: #244828;
    --tank-d: #7a5cb8;
    --tank-d-line: #322850;
    --tank-e: #c49a28;
    --tank-e-line: #5a4818;
    --tank-gun: #b0a894;
    --ink: #1b1510;
    --copper: #e07b2e;
    --copper-dk: #a4521a;
    --gold: #f2b83c;
    --gold-dk: #b07c14;
    --emerald: #2fb866;
    --rock: #5a5670;
    --rock-dk: #3a3748;
    --face: #fff6df;
    --face-dk: #d9c298;
    --bevel: rgba(255,255,255,.7);
    --dim: rgba(40,28,14,.5);
    --line: #cdb68b;
    --line-soft: rgba(255,255,255,.7);
    --cast: rgba(96,66,22,.2);
    --well: rgba(120,90,40,.1);
    --focus: rgba(212,106,31,.45);
}

#snowCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

body {
    background-color: var(--bg) !important;
    color: var(--text);
    transition: background-color .25s, color .25s;
}

/* one set of metrics for all the menu chrome: the nav bar, the account
   chip, the theme toggle and the left rail all share a top edge, a height
   and a gap, so everything sits on one line */
:root { --bar-top: 12px; --bar-h: 52px; --bar-gap: 10px; --bar-ic: 28px; }

#themeToggleBtn {
    position: fixed;
    top: var(--bar-top); right: var(--bar-top);
    z-index: 200;
    width: var(--bar-h); height: var(--bar-h);
    margin: 0;
    padding: 0 0 4px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 6px var(--cast);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
#themeToggleBtn:hover { box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 8px var(--cast); }
#themeToggleBtn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent; }
#themeIcon { display: none; }
#themeToggleBtn .dw-ic { width: var(--bar-ic); height: var(--bar-ic); }
[data-theme="light"] #themeToggleBtn .th-moon, [data-theme="dark"] #themeToggleBtn .th-sun { display: none; }

/* left rail: settings + what's new, a short dashed rule, then the socials.
   Same button as the theme toggle, one column, one gap. */
#homeSidebar {
    position: fixed;
    top: var(--bar-top); left: var(--bar-top);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bar-gap);
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
#homeSidebar button { margin: 0; }
#homeSettingsBtn, #homeChangelogBtn, #homeSidebar .social-btn {
    width: var(--bar-h); height: var(--bar-h);
    padding: 0 0 4px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 6px var(--cast);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
#homeSettingsBtn:hover, #homeChangelogBtn:hover, #homeSidebar .social-btn:hover { box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 8px var(--cast); border-color: var(--ink); }
#homeSettingsBtn:active, #homeChangelogBtn:active, #homeSidebar .social-btn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent; }
#homeSidebar .dw-ic { width: var(--bar-ic); height: var(--bar-ic); }
#homeSettingsBtn .dw-ic { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
#homeSettingsBtn:hover .dw-ic { transform: rotate(45deg); }
#homeSidebar .social-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bar-gap);
    margin: 0;
}
/* the rule between the two groups */
#homeSidebar .social-buttons::before {
    content: '';
    width: 24px;
    height: 3px;
    margin: 1px 0;
    border-radius: 2px;
    background: var(--text2);
    opacity: .35;
}
#homeSidebar .social-buttons a { display: block; line-height: 0; }
#homeSidebar .social-btn .dw-ic.dc { --ic-discord: #7c87ff; }

/* credits line under the play button */
.menu-credits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--text2);
    font: 500 12px var(--ui);
}
.menu-credits .dev-by b { color: var(--heading); font-weight: 700; }
.menu-credits .credit-sep { opacity: .6; }
.menu-credits .contrib-link {
    background: transparent;
    border: none;
    color: var(--link);
    cursor: pointer;
    font: 700 12px var(--ui);
    padding: 0;
    text-decoration: none;
}
.menu-credits .contrib-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* contributors: a small plate */
#contributorsPanel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%) scale(.92);
    z-index: 300;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    box-shadow: inset 0 1px 0 var(--bevel), 0 3px 10px var(--cast);
    opacity: 0;
    pointer-events: none;
    transition: transform .16s cubic-bezier(.3,1.5,.6,1), opacity .1s;
}
#contributorsPanel.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
#contributorsPanel .cl-header { background: none; border-bottom: 1px solid var(--line); border-radius: 11px 11px 0 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px 18px; }
#contributorsPanel .cl-header span { color: var(--heading); font: 400 21px var(--display); }
#contributorsPanel .contrib-list { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
#contributorsPanel .contrib-foot { padding: 0 14px 12px; text-align: center; font: 500 11px var(--ui); }
#contributorsPanel .contrib-foot a { color: var(--text2); opacity: .7; text-decoration: none; }
#contributorsPanel .contrib-foot a:hover { opacity: 1; text-decoration: underline; }
#contributorsPanel .credit-card { background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
#contributorsPanel .credit-card:nth-child(2) { transform: rotate(.6deg); }
#contributorsPanel .credit-card:nth-child(3) { transform: rotate(-.5deg); }
#contributorsPanel .credit-name { font: 400 19px var(--display); margin-bottom: 2px; color: var(--heading); }
#contributorsPanel .credit-name.zyrox { color: var(--copper); }
#contributorsPanel .credit-info { font: 500 12px var(--ui); color: var(--text2); margin-top: 3px; }
#contributorsPanel .credit-role { font: 700 11px var(--ui); letter-spacing: .04em; color: var(--text2); margin-top: 2px; }
#contributorsOverlay { position: fixed; inset: 0; background: var(--dim); z-index: 299; display: none; }
#contributorsOverlay.visible { display: block; }

#homeSettingsPanel {
    position: fixed;
    top: 50%; left: 50%;
    width: 360px;
    max-height: 88vh;
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -46%) scale(0.94);
    opacity: 0;
    pointer-events: none;
    transition: transform .16s cubic-bezier(.3,1.5,.6,1), opacity .1s;
    box-shadow: inset 0 1px 0 var(--bevel), 0 3px 10px var(--cast);
}
#homeSettingsPanel.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
#homeSettingsOverlay { position: fixed; inset: 0; background: var(--dim); z-index: 299; display: none; }
#homeSettingsOverlay.visible { display: block; }

.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px 18px;
    flex-shrink: 0;
    border-radius: 11px 11px 0 0;
}
.sp-header span { font: 400 22px var(--display); color: var(--heading); letter-spacing: .01em; }
/* legacy panels' ✕ buttons get the same little red button as the hub */
#homeSettingsClose, #homeChangelogClose, #contributorsPanel .cl-header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin: 0 0 3px;
    padding: 0 0 3px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--danger, #e0473b);
    box-shadow: inset 0 -4px 0 var(--danger-dk, #9c2a21), 0 2px 5px var(--cast);
    color: #fff;
    font: 700 15px/1 var(--ui);
    -webkit-text-stroke: 1px #fff;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
#homeSettingsClose:active, #homeChangelogClose:active, #contributorsPanel .cl-header button:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--danger-dk, #9c2a21), 0 0 0 transparent; }

/* Save & leave, in a raid only (saveCode.js) */
.sp-save { display: flex; align-items: center; gap: 12px; padding: 2px 16px 12px 18px; flex-shrink: 0; }
.sp-save .dw-btn { flex-shrink: 0; gap: 8px; }
.sp-save kbd { font: 700 11px/1 var(--ui); padding: 4px 6px 3px; border-radius: 5px; background: rgba(0,0,0,.22); color: inherit; }
.sp-save-note { font: 500 12px/1.35 var(--ui); color: var(--text2); }
.sp-save-note b { color: var(--heading); }
.sp-tabs { display: flex; padding: 0 12px; gap: 4px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sp-tab {
    position: relative;
    top: 3px;
    padding: 6px 12px 5px;
    font: 700 14px var(--ui);
    letter-spacing: .02em;
    color: var(--text2);
    cursor: pointer;
    border: 3px solid transparent;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}
.sp-tab:hover { color: var(--text); }
.sp-tab.active { background: var(--surface2); color: var(--heading); border-color: var(--ink); }

.sp-body { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scroll-t) transparent; }
.sp-body::-webkit-scrollbar { width: 3px; }
.sp-body::-webkit-scrollbar-thumb { background: var(--scroll-t); border-radius: 2px; }
.sp-pane { display: none; padding: 12px 16px 20px; }
.sp-pane.active { display: block; }

.sp-label {
    font: 700 14px var(--ui);
    letter-spacing: .02em;
    color: var(--copper);
    margin: 14px 0 6px;
}
.sp-label:first-child { margin-top: 2px; }

.sp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-bottom: 6px; }
.sp-checks .container { min-height: 16px; line-height: 15px; display: block; overflow: visible; }

.sp-slider {
    display: grid;
    grid-template-columns: 1fr 110px 40px;
    align-items: center;
    gap: 8px;
    margin: 8px 0 10px;
    font: 600 12px var(--ui);
    color: var(--text);
}
.sp-slider input[type=range], .sp-mix input[type=range] {
    width: 100%;
    accent-color: var(--heading, #ffd75e);
    cursor: pointer;
}
.sp-slider b { font: 700 11px var(--ui); color: var(--text2); text-align: right; }
.sp-mix { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 10px; }
.sp-mix-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 92px 36px;
    align-items: center;
    gap: 8px;
    font: 600 12px var(--ui);
    color: var(--text);
}
.sp-mix-row .container { margin: 0; min-height: 16px; }
.sp-mix-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mix-row b { font: 700 10px var(--ui); color: var(--text2); text-align: right; }
#sp-sound.is-muted #sfxMix { opacity: .38; pointer-events: none; }

#homeSettingsPanel select {
    display: block;
    width: 100%;
    height: auto;
    min-height: 32px;
    margin: 4px 0 10px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    font: 600 12px var(--ui);
    line-height: 1.3;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    box-sizing: border-box;
    transition: border-color .12s;
}
#homeSettingsPanel select:hover { border-color: var(--border-hl); }
#homeSettingsPanel #optCustom { margin: 3px 0; }

.mobile-only { display: none; }
body.mobile .mobile-only { display: grid; }
body.mobile .sp-desktop-only { display: none; }
body.mobile #homeSettingsPanel { width: 90%; max-width: 340px; }

#homeChangelogPanel {
    position: fixed;
    top: 50%; left: 50%;
    width: 540px;
    max-height: 84vh;
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -46%) scale(0.94);
    opacity: 0;
    pointer-events: none;
    transition: transform .16s cubic-bezier(.3,1.5,.6,1), opacity .1s;
    box-shadow: inset 0 1px 0 var(--bevel), 0 3px 10px var(--cast);
}
#homeChangelogPanel.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
#homeChangelogOverlay { position: fixed; inset: 0; background: var(--dim); z-index: 299; display: none; }
#homeChangelogOverlay.visible { display: block; }

.cl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 8px 20px;
    flex-shrink: 0;
    border-radius: 11px 11px 0 0;
}
.cl-header span { font: 400 24px var(--display); color: var(--heading); letter-spacing: .01em; }


.cl-tabs {
    display: flex;
    padding: 0 14px;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.cl-tab {
    position: relative;
    top: 3px;
    padding: 6px 12px 5px;
    font: 700 14px var(--ui);
    letter-spacing: .02em;
    color: var(--text2);
    cursor: pointer;
    border: 3px solid transparent;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}
.cl-tab:hover { color: var(--text); }
.cl-tab.active { color: var(--heading); background: var(--surface2); border-color: var(--ink); }

#homeChangelogPanel #patchNotes {
    max-width: none;
    width: 100%;
    height: auto;
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 22px;
    box-sizing: border-box;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-t) transparent;
}
#homeChangelogPanel #patchNotes::-webkit-scrollbar { width: 3px; }
#homeChangelogPanel #patchNotes::-webkit-scrollbar-thumb { background: var(--scroll-t); border-radius: 2px; }

#homeChangelogPanel #patchNotes > div {
    background: var(--surface2);
    border: 1px solid var(--line);
    border-left: 7px solid var(--border-hl);
    border-radius: 6px 10px 10px 6px;
    padding: 12px 16px 11px;
    margin-bottom: 10px;
    max-height: 1500px;
    opacity: 1;
    line-height: 1.2;
    overflow: hidden;
    transition: border-color .15s, max-height 400ms ease, opacity 300ms ease, padding 300ms ease, margin 300ms ease;
}
#homeChangelogPanel #patchNotes > div.announcement { border-left-color: var(--gold); }
#homeChangelogPanel #patchNotes > div.update { border-left-color: var(--play); }
#homeChangelogPanel #patchNotes > div.balance { border-left-color: #4a9ee0; }
#homeChangelogPanel #patchNotes > div.event { border-left-color: #e0508a; }
#homeChangelogPanel #patchNotes > div.poll { border-left-color: var(--copper); }
#homeChangelogPanel #patchNotes > div.patch { border-left-color: var(--text2); }

#homeChangelogPanel #patchNotes > div > b {
    display: block;
    font: 700 16px/1.2 var(--ui);
    letter-spacing: .01em;
    color: var(--heading);
    margin-bottom: 8px;
    line-height: 1.4;
}

#homeChangelogPanel #patchNotes > div > ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#homeChangelogPanel #patchNotes > div > ul > li {
    position: relative;
    padding-left: 14px;
    font: 400 12px/1.55 var(--ui);
    color: var(--text);
    margin-bottom: 2px;
}
#homeChangelogPanel #patchNotes > div > ul > li::before {
    content: '';
    position: absolute;
    left: 1px; top: .6em;
    width: 5px; height: 5px;
    border-radius: 1px;
    background: var(--text2);
    transform: rotate(45deg);
}
#homeChangelogPanel #patchNotes > div > b small {
    margin-left: 6px;
    color: var(--text2);
    font: 700 11px var(--ui);
    letter-spacing: 0;
    white-space: nowrap;
}

#homeChangelogPanel #patchNotes div::after { display: none !important; }

#homeChangelogPanel #patchNotes.default > div.balance,
#homeChangelogPanel #patchNotes.default > div.patch,
#homeChangelogPanel #patchNotes.updates > div.announcement,
#homeChangelogPanel #patchNotes.updates > div.poll,
#homeChangelogPanel #patchNotes.updates > div.event,
#homeChangelogPanel #patchNotes.updates > div.balance,
#homeChangelogPanel #patchNotes.updates > div.patch,
#homeChangelogPanel #patchNotes.balance > div.update,
#homeChangelogPanel #patchNotes.balance > div.announcement,
#homeChangelogPanel #patchNotes.balance > div.poll,
#homeChangelogPanel #patchNotes.balance > div.event,
#homeChangelogPanel #patchNotes.balance > div.patch { max-height: 0; opacity: 0; padding: 0; margin: 0; border-width: 0; pointer-events: none; overflow: hidden; }

.kb-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 700 10px var(--ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 8px;
}
.kb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.kb-section {
    font: 700 9px var(--ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text2);
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid var(--border);
}
.kb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--kb-bg);
    border: 1px solid var(--kb-bd);
    border-radius: 6px;
    padding: 6px 9px;
    transition: border-color .12s;
}
.kb-row:hover { border-color: var(--border-hl); }
.kb-row b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--kb-bd);
    font: 700 11px var(--ui);
    color: var(--kb-hl);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.kb-row b:hover { background: var(--kb-hl); color: #fff; border-color: var(--kb-hl); }
.kb-row span { font: 500 11px var(--ui); color: var(--text2); }
.kb-note { font: 500 10px var(--ui); color: var(--text2); margin-top: 8px; text-align: center; }

.mainWrapper {
    padding: 50px 20px 0;
    position: relative;
    z-index: 10;
}
body.mobile .mainWrapper { padding: 10px 10px 0; }

/* the menu card: one big plate, slightly uneven corners, a hard ink drop */
.startMenu {
    display: flex;
    max-height: none;
    padding: 12px 14px 18px;
    border-radius: 17px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: visible;
    box-shadow: inset 0 1px 0 var(--bevel), 0 4px 11px var(--cast);
    transition: background-color .25s;
    width: fit-content;
    margin: 18px auto 0;
}

.startMenuHolder { position: relative; width: 360px; height: auto; margin: 6px 10px; overflow: visible; }

.startMenuHolder.mainHolder { flex-shrink: 0; }
body.mobile .startMenuHolder.linkHolder { display: none; }

.credits-panel { padding: 16px 12px; text-align: center; }
.credits-title { font: 700 15px var(--ui); color: var(--heading); margin-bottom: 16px; letter-spacing: .04em; }
.credit-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 12px;
    margin-bottom: 10px;
    transition: border-color .15s;
}
.credit-card:hover { border-color: var(--border-hl); }
.credit-name { font: 700 16px var(--ui); margin-bottom: 4px; }
.credit-name.zyrox { color: var(--credit1); }
.credit-info { font: 500 12px var(--ui); color: var(--text2); margin-bottom: 3px; }
.credit-info::before { content: "Discord: "; font-weight: 600; color: var(--text2); }
.credit-role { font: 600 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }

.social-buttons { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.social-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s, color .12s;
}
.social-btn:hover { border-color: var(--border-hl); color: var(--accent2); }

.icon { width: 54px; height: 54px; }
.icon > img { width: 100%; height: 100%; }
.placeholder-logo {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 24px var(--ui);
    color: #fff;
    letter-spacing: -1px;
}
h1 {
    padding: 0 10px;
    margin: 0;
    font: 700 36px/1.3 var(--ui);
    color: var(--heading);
    letter-spacing: -.5px;
}
body.mobile h1 { font-size: 28px; }
/* the title: the emblem, then a chunky tilted wordmark with a thick ink
   outline and a hard offset shadow (the stroke is paint-order'd under the
   fill so the letters stay fat) */
.game-title {
    font: 400 58px/1 var(--display);
    text-align: center;
    margin: 2px 0 6px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.game-logo {
    width: 76px;
    height: 76px;
    flex: none;
    margin: -6px 0 -4px -8px;
    transform: rotate(-8deg);
    user-select: none;
    -webkit-user-drag: none;
}
.wordmark {
    position: relative;
    display: inline-block;
    color: #ffd24a;
    letter-spacing: .5px;
    transform: rotate(-3deg) translateY(-2px);
    -webkit-text-stroke: 9px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 5px 0 var(--ink), 3px 5px 0 var(--ink);
}
.wordmark i { font-style: normal; color: var(--copper); font-size: .66em; margin-left: 1px; }
[data-theme="light"] .wordmark { color: #ffc93a; }
.wordmark.sm { font-size: 44px; -webkit-text-stroke-width: 7px; text-shadow: 0 4px 0 var(--ink), 2px 4px 0 var(--ink); }
body.mobile .game-title { font-size: 42px; margin: 2px 0 8px; }
body.mobile .game-logo { width: 56px; height: 56px; }

/* two-column row: name (left) + region dropdown (right) */
.menu-row {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 10px;
    margin-top: 16px;
}
.menu-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label {
    padding-left: 3px;
    font: 700 14px var(--ui);
    letter-spacing: .02em;
    color: var(--text2);
    text-align: left;
}

/* clean region dropdown */
.region-dropdown { position: relative; width: 100%; }
.region-dropdown-trigger {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0 12px 0 14px;
    box-sizing: border-box;
    background: var(--face);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: inset 0 -4px 0 var(--face-dk);
    color: var(--input-fg);
    font: 700 14px var(--ui);
    cursor: pointer;
    text-align: left;
    box-shadow: none;
    text-shadow: none;
    transition: border-color .15s, background .15s;
}
.region-dropdown-trigger:hover,
.region-dropdown.open .region-dropdown-trigger { background: var(--surface2); }
#serverDropdownLabel {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
}
.region-dropdown-arrow {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--ink);
    stroke-width: 3;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.region-dropdown.open .region-dropdown-arrow { transform: rotate(180deg); }

.region-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: var(--surface);
    border: 0 solid var(--ink);
    border-radius: 10px;
    box-shadow: 0 2px 6px var(--cast);
    z-index: 50;
    transform: translateY(-8px) scaleY(.96);
    transform-origin: top center;
    transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease, transform .32s cubic-bezier(.4,0,.2,1), border-width .01s, visibility 0s .32s;
}
.region-dropdown.open .region-dropdown-menu {
    max-height: 260px;
    opacity: 1;
    visibility: visible;
    border-width: 3px;
    transform: translateY(0) scaleY(1);
    overflow-y: auto;
    transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease, transform .32s cubic-bezier(.4,0,.2,1), border-width 0s;
}

/* hide raw server table; regions are the dropdown rows */
.region-dropdown-menu .serverSelector,
.region-dropdown-menu #serverFilterRegion {
    display: none !important;
}

/* vertical region list like a simple select menu */
.region-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    border-bottom: none;
}
.region-option {
    width: 100%;
    flex: none;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid var(--border);
    background: transparent;
    color: var(--heading);
    font: 700 17px var(--ui);
    letter-spacing: .02em;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    transition: background .12s, color .12s;
}
.region-option:last-child { border-bottom: none; }
.region-option:hover { background: var(--surface2); color: var(--heading); }
.region-option.selected {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--heading);
    cursor: default;
}
.region-option .region-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
}
.region-option .region-count {
    flex-shrink: 0;
    font: 700 14px var(--ui);
    color: var(--sel);
    text-shadow: none;
}
.region-option .region-count:not(:empty)::before { content: "("; font-weight: 700; }
.region-option .region-count:not(:empty)::after { content: ")"; font-weight: 700; }

/* toasts: little banner plates that drop in from the top middle */
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.toast {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 16px 10px 16px;
    color: var(--heading);
    font: 700 13.5px var(--ui);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 6px var(--cast);
    opacity: 0;
    transform: translateY(-14px);
    animation: toastIn .26s cubic-bezier(.3,1.6,.5,1) forwards;
    pointer-events: auto;
}
.toast.hide { animation: toastOut .14s ease-in forwards; pointer-events: none; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) rotate(-1deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }

.serverSelector tr { color: var(--text2); cursor: pointer; transition: color .12s; text-shadow: none; }
.serverSelector tr:hover { color: var(--text); }
.serverSelector tr.featured { color: #e8ae00; text-shadow: none; }
.serverSelector tr.message { color: var(--text2); cursor: default; font-style: italic; }
.serverSelector tr.selected { color: var(--sel); cursor: default; text-shadow: none; }

.shadowScroll {
    overflow-y: scroll;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-t) transparent;
}
.shadowScroll::-webkit-scrollbar { width: 3px; }
.shadowScroll::-webkit-scrollbar-thumb { background: var(--scroll-t); border-radius: 2px; }

input {
    text-align: center;
    width: 100%;
    padding: 9px;
    border: 2px solid var(--input-bd);
    color: var(--input-fg);
    background: var(--input-bg);
    box-sizing: border-box;
    border-radius: 8px;
    margin-top: 4px;
    margin-bottom: 3px;
    outline: 0;
    font: 600 13px var(--ui);
    transition: border-color .15s;
}
input:focus { border-color: var(--border-hl); }
#playerNameInput {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: inset 0 3px 0 rgba(0,0,0,.08);
    margin: 0;
    padding: 0 14px;
}
#playerNameInput:focus { border-color: var(--ink); box-shadow: inset 0 3px 0 rgba(0,0,0,.08), 0 0 0 3px var(--copper); }
#playerNameInput::placeholder { color: var(--text2); opacity: .7; }
#playerKeyInput { display: none; }

.horizontalSelector {
    padding: 2px 0;
    margin-bottom: 2px;
    font: 700 11px var(--ui);
    text-align: center;
    overflow: auto hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    white-space: nowrap;
}
.horizontalSelector span {
    padding: 3px 9px;
    color: var(--text2);
    cursor: pointer;
    border-radius: 4px;
    transition: color .12s;
}
.horizontalSelector span:hover { color: var(--text); }
.horizontalSelector span.active {
    background: var(--tab-bg);
    color: var(--tab-fg);
    border-radius: 5px;
    cursor: default;
}

#serverFilterRegion span {
    display: inline-block;
    padding: 2px 6px;
    margin: 1px 1px;
    border-radius: 4px;
    font: 700 9px var(--ui);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
#serverFilterRegion span:hover { color: var(--text); border-color: var(--border-hl); }

#serverFilterRegion span.active { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }

/* PLAY: the one thing on this screen that has to be obvious. Big green
   slab, ink outline, dark lip; it drops onto the lip when you press it */
.startButtonHolder { margin-top: 16px; }
#startButton {
    display: block;
    width: 100%;
    height: 72px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px 14px 16px 16px;
    background: var(--play);
    box-shadow: inset 0 -7px 0 var(--play-dk), inset 0 3px 0 rgba(255,255,255,.35), 0 3px 8px var(--cast);
    color: #fff;
    font: 400 38px/1 var(--display);
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, filter .12s;
}
#startButton b {
    font-weight: 400;
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    text-shadow: 0 2px 5px var(--cast);
    position: relative;
    top: -3px;
}
/* main.css (legacy) shrinks the button to 38px on :hover/:active; pin the
   box so hovering can't resize it or move its edge out from under the cursor */
#startButton, #startButton:hover, #startButton:active { position: relative; height: 72px; margin: 0; border: 1px solid var(--line); background: var(--play); outline: none; }
#startButton:hover { filter: brightness(1.06); box-shadow: inset 0 -7px 0 var(--play-dk), inset 0 3px 0 rgba(255,255,255,.35), 0 3px 10px var(--cast); }
#startButton:active {
    transform: translateY(5px);
    box-shadow: inset 0 -3px 0 var(--play-dk), inset 0 3px 0 rgba(255,255,255,.25), 0 0 0 transparent;
}
#startButton:disabled { filter: saturate(.25) brightness(.95); opacity: .7; cursor: not-allowed; transform: none; }

#patchNotes {
    max-width: 330px;
    height: calc(100% - 38px);
    padding: 8px 14px 10px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    text-align: center;
}
#patchNotes div { text-align: left; }
#patchNotes ul { padding-left: 14px; margin-left: 8px; }
#patchNotes div {
    transition: max-height 500ms, opacity 500ms, line-height 500ms;
    max-height: 1500px;
    opacity: 1;
    line-height: 1.2;
}
#patchNotes div:nth-last-child(n+2)::after {
    content: '';
    display: block;
    border: .5px solid var(--border);
    margin: 14px 0;
    transition: margin 500ms;
}
#patchNotes.default div.balance,
#patchNotes.default div.patch,
#patchNotes.updates div.announcement,
#patchNotes.updates div.poll,
#patchNotes.updates div.event,
#patchNotes.updates div.balance,
#patchNotes.updates div.patch,
#patchNotes.balance div.update,
#patchNotes.balance div.announcement,
#patchNotes.balance div.poll,
#patchNotes.balance div.event,
#patchNotes.balance div.patch { max-height: 0; opacity: 0; line-height: 0; pointer-events: none; }
#patchNotes.default div.balance::after,
#patchNotes.default div.patch::after,
#patchNotes.updates div.announcement::after,
#patchNotes.updates div.poll::after,
#patchNotes.updates div.event::after,
#patchNotes.updates div.balance::after,
#patchNotes.updates div.patch::after,
#patchNotes.balance div.update::after,
#patchNotes.balance div.announcement::after,
#patchNotes.balance div.poll::after,
#patchNotes.balance div.event::after,
#patchNotes.balance div.patch::after { margin: 0; }

.container {
    position: relative;
    padding-left: 18px;
    cursor: pointer;
    user-select: none;
    font: 500 12px var(--ui);
    color: var(--text);
}
.container input { position: absolute; visibility: hidden; width: 0; height: 0; }
.checkmark {
    position: absolute;
    top: 0; left: 0;
    height: 12px; width: 12px;
    border-radius: 4px;
    background: var(--input-bg);
    border: 1px solid var(--line);
    transition: background 60ms, transform 60ms;
}
.container:hover input ~ .checkmark { transform: scale(1.1); }
.container input:checked ~ .checkmark { background: var(--check); border-color: var(--check); }
.container .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 3px; top: 0;
    width: 3px; height: 7px;
    border: solid var(--ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.container input:checked ~ .checkmark::after { display: block; }

div.optionsHeader { display: block; margin: 8px 0 3px; font: 700 12px/1 var(--ui); color: var(--text2); text-align: center; }

a:link, a:visited { color: var(--link); }
a:link:hover, a:visited:hover { opacity: .8; }

.menuTabs { height: 28px; margin: 0 8px; }
.menuTab {
    font: 13px/28px var(--ui);
    padding: 6px 11px;
    border-radius: 5px 5px 0 0;
    color: #fff !important;
    margin: 0 6px;
}
.menuTab.warning { background: #e90; }
.menuTab.critical { background: #f00; }
.menuTab.discord { padding: 6px 12px 6px 36px; background: #7289da url(/img/discord.png) 8px 4px/23px no-repeat; }
.menuTab.achieve { background: var(--accent); }
.menuTab > a { color: #fff !important; text-decoration: none; }

.sliderHolder { width: 360px; height: auto; overflow: visible; }
body.mobile .sliderHolder { height: 260px; }
.slider { position: relative; top: 0; opacity: 1; width: 100%; transition: top 500ms, opacity 500ms; }
.slided .slider { top: -280px; }
.startMenuSlidingContent { height: auto; display: flex; flex-direction: column; overflow: visible; }
body.mobile .startMenuSlidingContent { height: 255px; }


::-webkit-scrollbar { width: 3px; height: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 2px; background: var(--scroll-t); }

i { transition: transform 500ms; }
i.arrow { border: solid var(--text2); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; }
i.reset {
    display: inline-block;
    width: 8px; height: 8px;
    border: var(--text2) 2px solid;
    border-right-color: transparent;
    border-radius: 50%;
    position: relative; top: 3px;
    opacity: 0;
    transition: opacity 1s, margin 1s;
    margin: 0 -6px;
}
i.reset.active { opacity: 1; margin: 0 5px; cursor: pointer; }
.resetControls.spin { transition: transform 500ms, opacity 1s 150ms, margin 1s 150ms; transform: rotate(360deg); }
i.reset::after {
    content: "";
    display: inline-block;
    border: 3px solid;
    border-color: transparent var(--text2) var(--text2) transparent;
    position: relative; left: 3px; bottom: 8px;
}

.tdCenter { width: 350px; }
h3 { font-size: 14px; line-height: 16px; color: var(--text2); text-align: center; padding: 0; margin: 9px 0 0; }

/* ── in-game DOM chrome ────────────────────────────────────────────────
   The gear, the chat toggle, the spectate / death buttons and the settings
   panel opened from the game are the MENU's own pieces (chunky face, ink
   outline, lip, hard ink drop, Lilita labels), always in the dark cave
   palette so they match the canvas HUD (app.js HUD tokens) whatever the
   site theme is. Dark tokens are scoped to these elements only. */
#ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn, .dw-igbtn,
body.in-game #homeSettingsPanel, body.in-game #homeSettingsOverlay,
body.in-game .igc, body.in-game .igc-pip, .gt-stack {
    --surface: #2b2533; --surface2: #352e3f; --panel-bg: #2b2533; --hub-bg: #2b2533;
    --border: #4b4158; --border-hl: #e07b2e;
    --text: #e9e0cc; --text2: #a597b0; --heading: #fff3d9;
    /* input colours too, or a light site theme leaves dark ink on this
       dark field and in-game chat text is invisible */
    --input-bg: #1e1924; --input-fg: #f1e8d4; --input-bd: #0c0a0e; --ink: #120e15;
    --copper: #e07b2e; --copper-dk: #9e4a14; --gold: #f2b83c;
    --play: #4fcf5c; --play-dk: #2c8f37; --check: #4fcf5c; --sel: #4fcf5c;
    --face: #4a4156; --face-dk: #2e2837; --bevel: rgba(255,255,255,.07);
    --kb-bg: #352e3f; --kb-bd: #4b4158; --kb-hl: #f0b53a;
    --scroll-t: #4b4158; --dim: rgba(8,6,12,.62);
    --danger: #e0473b; --danger-dk: #9c2a21;
    --line: #120e16; --line-soft: rgba(255,255,255,.06); --cast: rgba(0,0,0,.42); --well: rgba(0,0,0,.22);
}
/* one button recipe for all of them: .dw-btn / #homeSettingsBtn */
#ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn, .dw-igbtn {
    position: fixed;
    top: 10px;
    z-index: 30;
    height: 42px;
    margin: 0;
    padding: 0 0 4px;
    box-sizing: border-box;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    color: var(--heading);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font: 700 15px/1 var(--ui);
    letter-spacing: .03em;
    white-space: nowrap;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, filter 80ms;
}
#ingameSettingsBtn { left: 10px; width: 42px; }
#ingameSettingsBtn .dw-ic { width: 24px; height: 24px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
#ingameSettingsBtn:hover .dw-ic { transform: rotate(45deg); }
#ingameChatModeBtn { left: 62px; padding: 0 14px 4px; }
#ingameTutorialBtn { left: 170px; width: 42px; color: var(--gold); font-size: 20px; }
#ingameSettingsBtn:hover, #ingameChatModeBtn:hover, #ingameTutorialBtn:hover, #ingameFullscreenBtn:hover, .dw-igbtn:hover { filter: brightness(1.08); }
#ingameSettingsBtn:active, #ingameChatModeBtn:active, #ingameTutorialBtn:active, #ingameFullscreenBtn:active, .dw-igbtn:active {
    transform: translateY(3px);
    box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent;
}
/* spectate / death rows (app.js royaleDomBtn): same face, in a flex row */
.dw-igbtn { position: static; display: inline-flex; padding: 0 16px 4px; min-width: 84px; }
.dw-igbtn.accent { background: var(--copper); box-shadow: inset 0 -4px 0 var(--copper-dk), 0 2px 5px var(--cast); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.dw-igbtn.accent:active { box-shadow: inset 0 -2px 0 var(--copper-dk), 0 0 0 transparent; }
/* the death card's Play again (app.js updateRoyaleDomButtons): the menu's
   big green key; greyed while the 3 s wait counts down */
.dw-igbtn.play { gap: 12px; border-radius: 14px; font: 400 26px/1 var(--display); letter-spacing: .02em; }
.dw-igbtn.play .pa-key { font: 700 12px/1 var(--ui); letter-spacing: .04em; padding: 5px 7px 4px; border-radius: 6px; background: rgba(0,0,0,.22); color: rgba(255,255,255,.9); text-shadow: none; }
.dw-igbtn.play:disabled { cursor: default; font-size: 22px; color: var(--text2); text-shadow: none; filter: none; transform: none; }

/* In-game the settings panel is simply the menu's dark panel (tokens
   above); only the keybind "press a key" state needs its own look. */
body.in-game #homeSettingsPanel .kb-row b.kb-editing {
    border-color: var(--gold);
    background: #3a2e14;
    color: #fff;
    animation: kbPulse 1s ease-in-out infinite;
}
@keyframes kbPulse {
    50% { border-color: var(--copper); }
}

/* ── tutorial (client/tutorial.js) ─────────────────────────────────────
   One instruction card, top-centre, in the menu's chunky style: ink outline,
   flat surface, Lilita heading, keycaps for keys. Everything is sized in em
   off --dwt-s, which tutorial.js sets from the UI Scale option and the
   viewport, so it tracks the HUD and never outgrows a phone. */
:root { --dwt-s: 1; }
#dwTut {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 45;
    width: min(calc(470px * var(--dwt-s)), calc(100vw - 24px));
    transform: translate(-50%, -14px);
    font-size: calc(16px * var(--dwt-s));
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
#dwTut.show { opacity: 1; transform: translate(-50%, 0); }
#dwTut.hidden, #dwTutEnd.hidden { visibility: hidden; }
#dwTut.mobile { top: 8px; width: min(calc(430px * var(--dwt-s)), 60vw); }
/* short screens (phones in landscape): the card must stay clear of the tank
   at dead centre, so drop the chrome and let a hint stand in for the text */
#dwTut.short .dwt-eyebrow, #dwTut.short .dwt-bar { display: none; }
#dwTut.short .dwt-card { padding: .5em .75em .6em; }
#dwTut.short .dwt-title { font-size: 1.25em; }
#dwTut.short .dwt-hint.show ~ .dwt-text, #dwTut.short .dwt-card.hinting .dwt-text { display: none; }
#dwTut.short .dwt-hint { margin-top: .35em; padding-top: .35em; }

.dwt-card {
    position: relative;
    padding: .7em .95em .8em;
    border: 1px solid var(--line);
    border-radius: .9em;
    background: var(--surface);
    box-shadow: inset 0 -.25em 0 var(--face-dk), 0 0.15em 0.48em var(--cast);
    color: var(--text);
    font-family: Rubik, Ubuntu, sans-serif;
}
.dwt-card.enter { animation: dwtIn .38s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes dwtIn {
    0%   { transform: translateY(-.5em) scale(.96); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

.dwt-top { display: flex; align-items: center; gap: .6em; margin-bottom: .25em; }
.dwt-eyebrow {
    font: 400 .72em/1 var(--display);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}
.dwt-dots { display: flex; gap: .28em; align-items: center; flex: 1; }
.dwt-dots i {
    display: block;
    width: .55em; height: .55em;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--input-bg);
    transition: width .25s ease, background .2s;
}
.dwt-dots i.cur { width: 1.4em; background: var(--gold); }
.dwt-dots i.on { background: var(--play); }
.dwt-dots i.pop { animation: dwtPop .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes dwtPop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

.dwt-skip {
    pointer-events: auto;
    padding: .28em .6em .34em;
    border: 1px solid var(--line);
    border-radius: .5em;
    background: var(--face);
    box-shadow: inset 0 -.14em 0 var(--face-dk);
    color: var(--muted, var(--text));
    font: 400 .72em/1 var(--display);
    letter-spacing: .02em;
    cursor: pointer;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .12s, transform 60ms;
}
.dwt-skip:hover { opacity: 1; }
.dwt-skip:active { transform: translateY(1px); }

.dwt-title {
    font: 400 1.5em/1.1 var(--display);
    color: var(--heading);
    letter-spacing: .01em;
    -webkit-text-stroke: 0;
}
.dwt-text {
    margin-top: .3em;
    font-size: .92em;
    font-weight: 500;
    line-height: 1.55;
}
.dwt-text b, .dwt-hint b { color: var(--gold); font-weight: 700; }
#dwTut kbd, .dwt-end-card kbd {
    display: inline-block;
    min-width: 1.55em;
    padding: .1em .38em .16em;
    margin: 0 .06em;
    border: 1px solid var(--line);
    border-bottom-width: 4px;
    border-radius: .42em;
    background: var(--face);
    color: var(--heading);
    font: 400 .95em/1.1 var(--display);
    text-align: center;
    vertical-align: .05em;
}

.dwt-bar {
    height: .6em;
    margin-top: .55em;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--input-bg);
    overflow: hidden;
}
.dwt-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: inset 0 -.15em 0 var(--gold-dk);
    transition: width .25s ease, background .2s;
}
.dwt-card.done .dwt-bar i { background: var(--play); box-shadow: inset 0 -.15em 0 var(--play-dk); }

.dwt-hint {
    display: none;
    align-items: center;
    gap: .5em;
    flex-wrap: wrap;
    margin-top: .6em;
    padding-top: .55em;
    border-top: 2px dashed var(--border);
    font-size: .84em;
    line-height: 1.45;
}
.dwt-hint.show { display: flex; animation: dwtIn .3s ease; }
.dwt-hint-text { flex: 1; min-width: 10em; }
.dwt-tip {
    padding: .18em .45em .24em;
    border: 1px solid var(--line);
    border-radius: .4em;
    background: var(--gold);
    color: var(--ink);
    font: 400 .85em/1 var(--display);
    transform: rotate(-4deg);
}
.dwt-stuck {
    display: none;
    pointer-events: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font: 600 .95em Rubik, var(--ui);
    text-decoration: underline;
    cursor: pointer;
}
.dwt-hint.stuck .dwt-stuck { display: inline; }

/* step complete: the card flashes green and a sticker slaps on */
.dwt-stamp {
    position: absolute;
    top: 1.55em;
    right: .9em;
    padding: .25em .6em .32em;
    border: 1px solid var(--line);
    border-radius: .5em;
    background: var(--play);
    color: #fff;
    font: 400 1.05em/1 var(--display);
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    box-shadow: 0 0.09em 0.29em var(--cast);
    opacity: 0;
    transform: rotate(8deg) scale(.4);
    pointer-events: none;
}
.dwt-card.done .dwt-stamp { animation: dwtStamp .5s cubic-bezier(.2, 1.7, .4, 1) forwards; }
@keyframes dwtStamp {
    0%   { opacity: 0; transform: rotate(18deg) scale(2); }
    100% { opacity: 1; transform: rotate(6deg) scale(1); }
}
.dwt-card.done { animation: dwtFlash .5s ease; }
@keyframes dwtFlash {
    0%   { box-shadow: inset 0 -.25em 0 var(--face-dk), 0 0.15em 0.48em var(--cast), 0 0 0 0 var(--play); }
    35%  { box-shadow: inset 0 -.25em 0 var(--face-dk), 0 0.15em 0.48em var(--cast), 0 0 0 .35em var(--play); }
    100% { box-shadow: inset 0 -.25em 0 var(--face-dk), 0 0.15em 0.48em var(--cast), 0 0 0 0 var(--play); }
}

/* over the shop panel: one line only, so it never sits on the shop's tabs */
#dwTut.compact .dwt-text, #dwTut.compact .dwt-bar,
#dwTut.compact .dwt-hint, #dwTut.compact .dwt-eyebrow, #dwTut.compact .dwt-dots { display: none; }
#dwTut.compact .dwt-card { display: flex; align-items: center; flex-direction: row-reverse; gap: .7em; padding: .45em .7em; }
#dwTut.compact .dwt-top { margin: 0; }
#dwTut.compact .dwt-title { font-size: 1.15em; flex: 1; }

/* ── the send-off ─────────────────────────────────────────────────── */
#dwTutEnd {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--dim);
    font-size: calc(16px * var(--dwt-s));
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
#dwTutEnd.show { opacity: 1; pointer-events: auto; }
#dwTutEnd.leaving { opacity: 0; transition: opacity .2s ease; }
.dwt-end-card {
    position: relative;
    width: min(26em, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 1.5em 1.5em 1.1em;
    border: 1px solid var(--line);
    border-radius: 1.1em;
    background: var(--surface);
    box-shadow: inset 0 -.3em 0 var(--face-dk), 0 0.20em 0.64em var(--cast);
    color: var(--text);
    font-family: Rubik, Ubuntu, sans-serif;
    text-align: center;
    transform: scale(.9);
    transition: transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
#dwTutEnd.show .dwt-end-card { transform: none; }
.dwt-end-badge {
    display: inline-block;
    margin-bottom: .55em;
    padding: .28em .7em .34em;
    border: 1px solid var(--line);
    border-radius: .45em;
    background: var(--gold);
    color: var(--ink);
    font: 400 .82em/1 var(--display);
    white-space: nowrap;
    transform: rotate(-3deg);
}
.dwt-end-title {
    font: 400 2.5em/1 var(--display);
    color: var(--gold);
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    text-shadow: 0 0.04em 0.13em var(--cast);
    letter-spacing: .01em;
}
.dwt-end-sub { margin: .5em 0 .9em; font-size: .9em; opacity: .85; }
.dwt-end-list {
    list-style: none;
    margin: 0 0 1.1em;
    padding: .2em .9em;
    border: 1px solid var(--line);
    border-radius: .8em;
    background: var(--input-bg);
    text-align: left;
}
.dwt-end-list li {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: .6em 0;
    font-size: .92em;
    line-height: 1.4;
}
.dwt-end-list li + li { border-top: 2px dashed var(--border); }
.dwt-end-list svg { flex: none; width: 2.1em; height: 2.1em; }
.dwt-end-list b { color: var(--heading); font-weight: 700; }
.dwt-play {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: .32em .32em .37em .37em;
    background: var(--play);
    box-shadow: inset 0 -.17em 0 var(--play-dk), inset 0 .07em 0 rgba(255,255,255,.35), 0 0.06em 0.19em var(--cast);
    color: #fff;
    font: 400 1.9em/1 var(--display);
    height: 1.7em;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, filter .12s;
}
.dwt-play b {
    font-weight: 400;
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    text-shadow: 0 0.04em 0.11em var(--cast);
    position: relative;
    top: -.06em;
}
.dwt-play:hover { filter: brightness(1.06); }
.dwt-play:active { transform: translateY(.1em); box-shadow: inset 0 -.07em 0 var(--play-dk), 0 0 0 transparent; }
.dwt-menu {
    display: block;
    width: 100%;
    margin-top: .75em;
    padding: .55em 0 .62em;
    border: 1px solid var(--line);
    border-radius: .6em;
    background: var(--face);
    box-shadow: inset 0 -.22em 0 var(--face-dk), 0 0.08em 0.26em var(--cast);
    color: var(--heading);
    font: 400 1.05em/1 var(--display);
    cursor: pointer;
    transition: transform 60ms ease-out;
}
.dwt-menu:active { transform: translateY(.12em); box-shadow: inset 0 -.1em 0 var(--face-dk), 0 0 0 transparent; }
.dwt-end-foot { margin-top: .9em; font-size: .78em; opacity: .7; }

/* ── responsive menu: stacked fields + inline dropdown on small screens ── */
@media (max-width: 640px) {
    .menu-row { grid-template-columns: 1fr; gap: 12px; }
}
body.mobile .startMenuSlidingContent { height: auto; }
body.mobile .sliderHolder { height: auto; }
body.mobile .region-dropdown-menu { position: static; }

/* ── touch-screen hint above Play (home.js initMobileNote): one quiet
   line, the upright or the sideways version by orientation ── */
.mobile-note {
    margin: 12px 0 -4px;
    color: var(--text2);
    font: 600 12.5px/1.35 var(--ui);
    text-align: center;
    text-wrap: balance;
}
.mobile-note[hidden] { display: none; }
.mobile-note .mn-wide { display: none; }
@media (orientation: landscape) {
    .mobile-note .mn-tall { display: none; }
    .mobile-note .mn-wide { display: inline; }
}
/* upright on a phone: the sideways ask is a gold key you can't miss, with a
   little phone that turns */
.mobile-note .mn-tall {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--gold);
    box-shadow: inset 0 -3px 0 var(--gold-dk), 0 2px 5px var(--cast);
    color: var(--ink);
    font: 700 14px/1.1 var(--ui);
}
.mn-phone {
    flex: none; position: relative;
    width: 11px; height: 18px; box-sizing: border-box;
    border: 2px solid var(--ink); border-radius: 3px;
    animation: mnTurn 2.4s cubic-bezier(.6,0,.3,1) infinite;
}
.mn-phone::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 1.5px; margin-left: -1.5px; background: var(--ink); border-radius: 1px; }
@keyframes mnTurn { 0%, 25% { transform: rotate(0); } 55%, 90% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: landscape) { .mobile-note .mn-tall { display: none; } }
@media (prefers-reduced-motion: reduce) { .mn-phone { animation: none; transform: rotate(-90deg); } }

/* iPhone Safari: how to get full screen (Add to Home Screen) */
.a2hs-tip {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 -2px; padding: 6px 6px 6px 12px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface2);
    color: var(--text); font: 600 12.5px/1.35 var(--ui);
    text-align: left;
}
.a2hs-tip[hidden] { display: none; }
.a2hs-tip span { flex: 1; min-width: 0; }
.a2hs-tip b { color: var(--heading); }
.a2hs-x {
    flex: none; width: 32px; height: 32px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    touch-action: manipulation;
}
.a2hs-x .dw-ic { width: 16px; height: 16px; }

/* ── Tutorial button ───────────────────────────────────────────────────
   Secondary to Play: same shape and motion, accent-outlined instead of
   filled, so it reads as the calmer of the two choices. */
#tutorialButton {
    position: relative;
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    color: var(--heading);
    font: 400 19px/1 var(--display);
    letter-spacing: .03em;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
#tutorialButton b { font-weight: 400; position: relative; top: -2px; }
#tutorialButton:hover { box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 6px var(--cast); }
#tutorialButton:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent; }
#tutorialButton:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* "new? start here" sticker for players who never finished the tutorial */
.tut-badge {
    position: absolute;
    top: -11px;
    right: -8px;
    padding: 3px 8px 4px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--gold);
    color: var(--ink);
    font: 700 12px/1 var(--ui);
    letter-spacing: .02em;
    transform: rotate(6deg);
    animation: tutBadgeWiggle 3s ease-in-out infinite;
}
.tut-badge[hidden] { display: none; }
@keyframes tutBadgeWiggle {
    0%, 86%, 100% { transform: rotate(6deg); }
    90% { transform: rotate(-2deg) scale(1.08); }
    95% { transform: rotate(9deg); }
}

/* ── Accounts (Phase 1) ─────────────────────────────────────────────────
   Welcome gate, account chip, top nav, hub panel and the Account pane
   (client/account/*). Same look as the game: thick ink outlines, flat
   fills, buttons with a dark lip that you push them down onto. No
   gradients, no soft shadows; the only "shadow" is a hard ink drop.
   Own class prefixes (wl-, hub-, as-, ac-, dw-) because home.js wires
   every .sp-tab and .cl-tab on the page.
   Layers: hub overlay 299, hub 300, nav + chip 310, modals 320+, welcome
   400, toasts 500. */
:root, [data-theme="dark"] {
    --dust: #b89cff;
    --danger: #e0473b;
    --danger-dk: #9c2a21;
    --danger-text: #ff8b7e;
    --discord: #5865f2;
    --discord-dk: #3a45b8;
    --online: #5fd24c;
    --hub-bg: #2b2533;
}
/* motion: snappy. Buttons press in 60ms; panels pop with a small
   overshoot (ui.js EASE / T_FAST / T_MID / T_SLOW match the durations) */
:root {
    --dw-ease: cubic-bezier(.2, .8, .2, 1);
    --dw-pop: cubic-bezier(.3, 1.5, .6, 1);
    --dw-t1: 150ms;
    --dw-t2: 220ms;
    --dw-t3: 300ms;
}
[data-theme="light"] {
    --dust: #6d42d6;
    --danger: #e0473b;
    --danger-dk: #9c2a21;
    --danger-text: #b02a20;
    --discord: #5865f2;
    --discord-dk: #3a45b8;
    --online: #2f8f22;
    --hub-bg: #fbf3de;
}

.dw-ic { width: 16px; height: 16px; flex: none; display: block; overflow: visible; }

/* on the menu, toasts pop up from the bottom middle, clear of the logo */
body:not(.in-game) .toast-container { top: auto; bottom: 28px; flex-direction: column-reverse; }
body:not(.in-game) .toast { animation-name: toastUp; }
body:not(.in-game) .toast.hide { animation-name: toastDown; }
@keyframes toastUp { from { opacity: 0; transform: translateY(16px) rotate(1deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes toastDown { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } }
.toast.dw-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(520px, calc(100vw - 32px));
    box-sizing: border-box;
    padding-left: 14px;
}
.toast.dw-toast::before {
    content: '';
    flex: none;
    width: 10px; height: 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--gold);
    transform: rotate(45deg);
}
.toast.dw-toast.ok::before { background: var(--play); }
.toast.dw-toast.error::before { background: var(--danger); border-radius: 50%; transform: none; }
.dw-toast-act {
    flex: none;
    height: 26px;
    margin: 0 -6px 0 0;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--copper);
    box-shadow: inset 0 -3px 0 var(--copper-dk), 0 1px 3px var(--cast);
    color: #fff;
    font: 700 14px/1 var(--ui);
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.dw-toast-act:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--copper-dk), 0 0 0 transparent; }

/* ── top nav: a compact bar of icon buttons; the name pops up under the
   icon on hover/focus like a game tooltip ── */
#menuNav {
    position: fixed;
    top: var(--bar-top); left: 50%;
    transform: translateX(-50%);
    z-index: 310;
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--bar-h);
    padding: 0 4px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--bevel), 0 2px 6px var(--cast);
}
.dw-nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 40px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    transition: transform 60ms ease-out, background-color 80ms, box-shadow 60ms ease-out;
}
.dw-nav-btn .dw-ic { width: var(--bar-ic); height: var(--bar-ic); transition: transform .18s var(--dw-pop); }
.dw-nav-btn:hover { background: var(--surface2); }
.dw-nav-btn:hover .dw-ic { transform: translateY(-2px) rotate(-6deg); }
.dw-nav-btn:active { transform: translateY(2px); }
.dw-nav-btn.active, .dw-nav-btn.active:hover {
    background: var(--copper);
    border-color: var(--ink);
    box-shadow: inset 0 -4px 0 var(--copper-dk);
}
.dw-nav-btn.active { padding-bottom: 3px; }
/* Play sits a little apart from the rest: it's "back to the game" */
.dw-nav-btn[data-pane="play"] { margin-right: 6px; }
.dw-nav-btn[data-pane="play"]::after {
    content: '';
    position: absolute;
    right: -9px; top: 6px; bottom: 6px;
    border-left: 2px dashed var(--border);
}
.dw-nav-btn[data-pane="play"].active { background: var(--play); box-shadow: inset 0 -4px 0 var(--play-dk); }
.dw-nav-btn[data-pane="play"].active .dw-ic { --ic-play: #fff; }
/* the label: hidden until you hover, then a little ink tag under the icon */
.dw-nav-btn > span:not(.dw-nav-count) {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    padding: 4px 8px 5px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--ink);
    color: #fff4dc;
    font: 700 14px/1 var(--ui);
    letter-spacing: .03em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity 80ms, transform .12s var(--dw-pop);
}
.dw-nav-btn:hover > span:not(.dw-nav-count),
.dw-nav-btn:focus-visible > span:not(.dw-nav-count) { opacity: 1; transform: translate(-50%, 0); }
.dw-nav-btn:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
/* accounts: later panes say "Coming soon" */
.dw-nav-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.dw-nav-btn[aria-disabled="true"]:hover { background: transparent; }
.dw-nav-btn[aria-disabled="true"]:active { transform: none; }
/* guests: the same panes are account-only, marked with a small padlock in
   the corner (from CSS, so it's there on first paint) */
.dw-nav-lock { display: none; position: absolute; right: -3px; bottom: -3px; width: 16px !important; height: 16px !important; }
html[data-acct="guest"] .dw-nav-btn[aria-disabled="true"],
.dw-nav-btn.locked { opacity: 1; cursor: pointer; }
html[data-acct="guest"] .dw-nav-btn[data-pane]:not([data-pane="play"]) > .dw-ic:not(.dw-nav-lock),
.dw-nav-btn.locked > .dw-ic:not(.dw-nav-lock) { filter: saturate(.35); opacity: .75; }
html[data-acct="guest"] .dw-nav-btn[data-pane]:not([data-pane="play"]) .dw-nav-lock,
.dw-nav-btn.locked .dw-nav-lock { display: block; }
.dw-nav-btn.locked:hover .dw-nav-lock { transform: none; }
/* the menu's own dialogs sit above the nav and chip, like everything else */
body:has(#homeSettingsPanel.open, #homeChangelogPanel.open, #contributorsPanel.open) #menuNav,
body:has(#homeSettingsPanel.open, #homeChangelogPanel.open, #contributorsPanel.open) #accountChip { z-index: 298; }

/* ── account chip (left of the theme toggle, same row and height) ── */
#accountChip {
    position: fixed;
    top: var(--bar-top); right: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap));
    z-index: 310;
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--bar-h);
    max-width: 340px;
    margin: 0;
    padding: 0 7px 4px 7px;
    box-sizing: border-box;
    background: var(--face);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 6px var(--cast);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
#accountChip.ready { animation: dwFade var(--dw-t2) var(--dw-ease) both; }
#accountChip:hover { box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 8px var(--cast); }
#accountChip:active, #accountChip.active { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent; }
#accountChip.guest { padding-right: 14px; }
#accountChip:empty { visibility: hidden; }
.ac-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ac-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--heading);
    font: 700 16px/1.1 var(--ui);
    letter-spacing: .02em;
}
.ac-sub { color: var(--text2); font: 700 11px/1.15 var(--ui); white-space: nowrap; }
.ac-sub.ac-link { color: var(--link); }
.ac-sub.ac-rank { display: inline-flex; align-items: center; gap: 4px; }
.ac-badge { width: 15px; height: 15px; flex: none; display: block; margin: -1px 0; }
#accountChip:hover .ac-link { text-decoration: underline; text-decoration-thickness: 2px; }
/* narrow windows: the chip shrinks to avatar + dust so it clears the nav */
@media (max-width: 1000px) {
    #accountChip .ac-text { display: none; }
    #accountChip .ac-dust { margin-left: 12px; }
    #accountChip.guest .ac-text { display: flex; }
    #accountChip.guest .ac-name { display: none; }
}
/* gemdust counter: a dark slot with the gem hanging off its left edge */
.ac-dust {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    margin: 0 0 0 12px;
    padding: 0 10px 0 17px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--ink);
    color: #dccfff;
    font: 700 15px/1 var(--ui);
    letter-spacing: .03em;
    white-space: nowrap;
    position: relative;
}
.ac-dust .dw-ic { position: absolute; left: -11px; top: 50%; width: 24px; height: 24px; margin-top: -12px; }

/* avatars: a flat circle in one of the menu tank colours, outlined like a hull */
.dw-av {
    --sz: 26px;
    width: var(--sz); height: var(--sz);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 50%;
    border: max(2px, calc(var(--sz) * .09)) solid var(--ink) !important;
    font: 400 calc(var(--sz) * .5)/1 var(--display);
    user-select: none;
}
.dw-av.t-a { background: var(--tank-a); color: var(--tank-a-line); }
.dw-av.t-b { background: var(--tank-b); color: var(--tank-b-line); }
.dw-av.t-c { background: var(--tank-c); color: var(--tank-c-line); }
.dw-av.t-d { background: var(--tank-d); color: var(--tank-d-line); }
.dw-av.t-e { background: var(--tank-e); color: var(--tank-e-line); }
.dw-av.img { background: var(--surface); }
.dw-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dw-av.guest { background: var(--surface2); color: var(--text2); overflow: visible; }
.dw-av.guest .dw-ic { width: 72%; height: 72%; --ic-user: #b9b2a4; }

/* ── the "You" box that replaces the name input when logged in ── */
.dw-lbl-user, #acctNameBox { display: none; }
html[data-acct="user"] .dw-lbl-guest,
html[data-acct="user"] #playerNameInput { display: none; }
html[data-acct="user"] .dw-lbl-user { display: inline; }
html[data-acct="user"] #acctNameBox { display: flex; }
#acctNameBox {
    position: relative;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 30px 0 10px;
    box-sizing: border-box;
    background: var(--input-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: inset 0 3px 0 rgba(0,0,0,.08);
    color: var(--heading);
    font: 700 15px var(--ui);
    cursor: pointer;
    gap: 7px;
    transition: transform 60ms ease-out;
}
#acctNameBox:active { transform: translateY(1px); }
/* your rank badge, left of the name */
.an-badge { width: 26px; height: 26px; flex: none; display: block; margin: -1px 0 0 -2px; animation: dwFade var(--dw-t2) var(--dw-ease) both; }
#acctNameText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#acctNameBox .dw-ic { position: absolute; right: 9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; opacity: .55; transition: opacity 80ms; }
#acctNameBox:hover .dw-ic { opacity: 1; }

/* ── shared form bits ── */
.dw-form { display: flex; flex-direction: column; gap: 12px; }
.dw-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
input.dw-input {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 13px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--input-bg);
    box-shadow: inset 0 3px 0 rgba(0,0,0,.07);
    color: var(--input-fg);
    font: 700 14px var(--ui);
    text-align: left;
    outline: 0;
    -webkit-user-select: text;
    user-select: text;
    transition: box-shadow 80ms;
}
input.dw-input::placeholder { color: var(--text2); opacity: .7; font-weight: 500; }
input.dw-input:focus { border-color: var(--ink); box-shadow: inset 0 3px 0 rgba(0,0,0,.07), 0 0 0 3px var(--copper); }
input.dw-input.bad { border-color: var(--danger); box-shadow: inset 0 3px 0 rgba(0,0,0,.07), 0 0 0 2px var(--danger); }
input.dw-input:disabled { opacity: .55; cursor: not-allowed; }
input.dw-input.mono { font: 700 16px 'Ubuntu Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
input.dw-input.mono::placeholder { letter-spacing: .12em; }
.dw-field > .field-label { font-size: 15px; }
.dw-hint { min-height: 14px; margin-top: -1px; padding-left: 3px; color: var(--text2); font: 600 11.5px/1.3 var(--ui); }
.dw-hint:empty { min-height: 0; margin-top: -6px; }
.dw-hint.ok { color: var(--online); }
.dw-hint.bad { color: var(--danger-text); }

.dw-alert {
    display: none;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-left-width: 6px;
    border-left-color: var(--danger);
    border-radius: 6px 9px 9px 6px;
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    color: var(--danger-text);
    font: 700 12.5px/1.45 var(--ui);
}
.dw-alert.show { display: block; animation: dwShake .28s ease-out; }
.dw-alert.info {
    border-left-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 16%, var(--surface));
    color: var(--text);
    animation: none;
}
@keyframes dwShake { 25% { transform: translateX(-3px); } 55% { transform: translateX(3px); } 80% { transform: translateX(-1px); } }

/* buttons: chunky, outlined, with a dark lip you push them down onto */
.dw-btn {
    --face-c: var(--face);
    --lip-c: var(--face-dk);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    margin: 0 0 3px;
    padding: 0 15px 3px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--face-c);
    box-shadow: inset 0 -4px 0 var(--lip-c), 0 2px 5px var(--cast);
    color: var(--heading);
    font: 700 16px/1 var(--ui);
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, filter 80ms;
}
.dw-btn:hover:not(:disabled) { filter: brightness(1.05); }
.dw-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--lip-c), 0 0 0 transparent; }
.dw-btn .dw-ic { width: 20px; height: 20px; margin: 0 1px 0 -3px; }
.dw-btn:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.4); }
.dw-btn.done { --face-c: color-mix(in srgb, var(--play) 30%, var(--face)); }
.dw-btn.block { width: 100%; height: 52px; font-size: 22px; border-width: 3px; }
.dw-btn.primary, .dw-btn.danger, .dw-btn.discord, .dw-btn.accent-fill { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.dw-btn.primary { --face-c: var(--play); --lip-c: var(--play-dk); }
.dw-btn.danger { --face-c: var(--danger); --lip-c: var(--danger-dk); }
.dw-btn.discord { --face-c: var(--discord); --lip-c: var(--discord-dk); --ic-discord: #fff; }
.dw-btn.accent-fill { --face-c: var(--copper); --lip-c: var(--copper-dk); }
.dw-btn.danger-outline { --face-c: var(--face); color: var(--danger-text); }
.dw-btn.danger-outline:hover { --face-c: var(--danger); --lip-c: var(--danger-dk); color: #fff; }
.dw-btn.busy { cursor: progress; }
.dw-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font: 700 12.5px var(--ui);
    cursor: pointer;
}
.dw-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* ── modals ── */
.dw-layer {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: var(--dim);
    animation: dwFade var(--dw-t1) ease-out both;
}
.dw-layer.closing { pointer-events: none; }
.dw-modal {
    width: 380px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 18px 20px 18px;
    box-sizing: border-box;
    background: var(--hub-bg);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 var(--bevel), 0 3px 10px var(--cast);
    color: var(--text);
    animation: dwPop var(--dw-t2) var(--dw-pop) both;
}
.dw-modal-sm { width: 340px; }
.dw-modal-danger { border-top-width: 8px; border-top-color: var(--danger); }
.dw-modal-h { margin-bottom: 6px; color: var(--heading); font: 400 24px/1.1 var(--display); letter-spacing: .01em; }
.dw-modal-p { margin-bottom: 16px; color: var(--text2); font: 500 13px/1.5 var(--ui); }
.dw-modal-p b { color: var(--text); }
.dw-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.as-kbd { color: var(--heading); font-family: 'Ubuntu Mono', monospace; letter-spacing: .08em; }
@keyframes dwFade { from { opacity: 0; } }
@keyframes dwPop { from { opacity: 0; transform: translateY(10px) scale(.94); } 60% { opacity: 1; } }

/* ── hub panel ── */
#dwHubOverlay {
    position: fixed; inset: 0; z-index: 299;
    background: var(--dim);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dw-t1) ease, visibility 0s var(--dw-t1);
}
#dwHubOverlay.visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dw-t1) ease; }
#dwHub {
    position: fixed;
    top: 90px; left: 50%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100vh - 110px);
    box-sizing: border-box;
    background: var(--hub-bg);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 var(--bevel), 0 4px 11px var(--cast);
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-14px) scale(.97);
    transform-origin: 50% 0;
    transition: transform var(--dw-t1) ease-in, opacity 90ms ease-in, visibility 0s var(--dw-t1);
}
#dwHub.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%);
    transition: transform var(--dw-t2) var(--dw-pop), opacity 90ms ease-out;
}
#dwHub.has-notch::before {
    content: '';
    position: absolute;
    top: -12px;
    left: calc(var(--notch-x, 50%) - 11px);
    width: 20px; height: 20px;
    background: var(--surface2);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: 4px 0 0 0;
    transform: rotate(45deg);
    transition: left .12s var(--dw-pop);
}
.hub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 10px 12px 9px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface2);
    border-radius: 13px 11px 0 0;
}
.hub-title { color: var(--heading); font: 400 28px/1 var(--display); letter-spacing: .01em; }
/* close: a small red button, same press as the rest */
.hub-close, .wl-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin: 0 0 3px;
    padding: 0 0 3px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--danger);
    box-shadow: inset 0 -4px 0 var(--danger-dk), 0 2px 5px var(--cast);
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.hub-close .dw-ic, .wl-x .dw-ic { width: 22px; height: 22px; }
.hub-close:active, .wl-x:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--danger-dk), 0 0 0 transparent; }
.wl-back, .as-copy { transition: background-color 80ms, transform 60ms ease-out; }
.wl-back:active, .as-copy:active { transform: translateY(2px); }
.hub-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-t) transparent;
}
.hub-pane { display: none; }
.hub-pane.active { display: block; }

/* ── Account pane ── */
.as-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 var(--face-dk);
}
.as-who { flex: 1; min-width: 0; }
.as-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 400 28px/1.1 var(--display); letter-spacing: .01em; }
.as-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; color: var(--text2); font: 600 12px var(--ui); }
.as-dot { opacity: .6; }
.as-rank { display: inline-flex; align-items: center; gap: 4px; }
.as-badge { width: 20px; height: 20px; flex: none; display: block; margin: -2px 0 -2px -1px; }
.as-dustline { display: inline-flex; align-items: center; gap: 4px; color: var(--dust); font-weight: 700; }
.as-dustline .dw-ic { width: 16px; height: 16px; }
.as-tags { display: flex; gap: 6px; margin-top: 8px; }
.as-tags:empty { display: none; }
.as-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text2);
    font: 700 10.5px var(--ui);
}
.as-tag .dw-ic { width: 14px; height: 14px; }
.as-tag.discord .dw-ic { --ic-discord: var(--discord); }
.as-id { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.as-id-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 3px 0 11px;
    box-sizing: border-box;
    background: var(--input-bg);
    border: 2px dashed var(--ink);
    border-radius: 8px;
}
.as-id-val {
    color: var(--heading);
    font: 700 14px 'Ubuntu Mono', monospace;
    letter-spacing: .06em;
    -webkit-user-select: all;
    user-select: all;
}
.as-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.as-copy:hover { background: var(--surface2); }
.as-copy .dw-ic { width: 20px; height: 20px; }
.as-id-hint { max-width: 190px; color: var(--text2); font: 500 11px/1.35 var(--ui); text-align: right; }

/* settings: one list, a row per setting */
.as-list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.as-row + .as-row { border-top: 2px dashed var(--border); }
.as-row-main {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 9px 14px 9px 16px;
    box-sizing: border-box;
}
.as-row-label { color: var(--text2); font: 700 16px var(--ui); letter-spacing: .02em; }
.as-row-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 700 14px var(--ui); }
.as-row-act { display: flex; justify-content: flex-end; }
.as-row-note { color: var(--text2); font: 500 12px var(--ui); }
.as-muted { color: var(--text2); font-weight: 500; }
.as-dots { letter-spacing: .12em; color: var(--text2); }
.as-form { padding: 2px 16px 16px; }
.as-form input.dw-input { height: 40px; }
.dw-btn.sm { height: 34px; padding: 0 12px 3px; font-size: 15px; border-radius: 9px; }
.dw-btn.sm .dw-ic { width: 18px; height: 18px; }
.as-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 0 4px; }
.as-foot-gap { flex: 1; }
.dw-link.as-quiet { color: var(--text2); font: 700 12.5px var(--ui); }
.dw-link.as-quiet:hover { color: var(--text); }
.dw-link.as-del:hover { color: var(--danger-text); }
@media (max-width: 640px) {
    .as-row-main { grid-template-columns: 1fr auto; row-gap: 2px; }
    .as-row-label { grid-column: 1 / -1; }
}
.dw-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    box-sizing: border-box;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.dw-card input.dw-input { height: 40px; }
.as-h { color: var(--heading); font: 400 18px var(--display); letter-spacing: .01em; }
.as-p { margin: 0; color: var(--text2); font: 500 12.5px/1.5 var(--ui); }
.as-p b { color: var(--text); font-weight: 700; }
.as-small { font-size: 11.5px; }
.as-wait { display: flex; align-items: center; gap: 7px; color: var(--text); }
.as-wait .dw-ic { width: 15px; height: 15px; }
.as-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 2px; }
.dw-form .as-actions { margin-top: 0; justify-content: flex-end; }
.as-linked { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.as-linked > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.as-linked-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.as-linked-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 700 13px var(--ui); }
.as-linked-txt span { color: var(--online); font: 700 11px var(--ui); }
.dw-card.as-danger { border-color: var(--danger); }
.dw-card.as-danger .as-h { color: var(--danger-text); }

/* ── welcome gate ── */
#dwWelcome {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    overflow-y: auto;
    padding: 24px 16px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}
html[data-acct="new"] #dwWelcome, #dwWelcome.open { display: flex; animation: dwFade var(--dw-t2) ease both; }
#dwWelcome.wl-closing { pointer-events: none; }
/* the menu card would fight the welcome card; the drifting tanks stay */
html[data-acct="new"] .mainWrapper, html.dw-wl-open .mainWrapper,
html[data-acct="new"] #menuNav, html.dw-wl-open #menuNav,
html[data-acct="new"] #accountChip, html.dw-wl-open #accountChip { visibility: hidden; }
.wl-card {
    position: relative;
    width: 390px;
    max-width: 100%;
    margin: auto;
    padding: 22px 24px 22px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: inset 0 1px 0 var(--bevel), 0 4px 11px var(--cast);
    color: var(--text);
    animation: dwPop var(--dw-t3) var(--dw-pop) both;
}
/* the old view, fading out on top while the next one slides in */
.wl-ghost { position: absolute; margin: 0; pointer-events: none; }
.wl-view[hidden] { display: none !important; }
.wl-close { position: absolute; top: 12px; right: 12px; }
.wl-close[hidden] { display: none; }
#wlChoose { display: flex; flex-direction: column; text-align: center; }
.wl-logo { display: block; width: 84px; height: 84px; margin: -4px auto -2px; transform: rotate(-8deg); user-select: none; -webkit-user-drag: none; }
.wl-title { margin-bottom: 14px; color: var(--heading); font: 400 44px/1 var(--display); }
.wl-opts { display: flex; flex-direction: column; gap: 10px; }
.wl-sub { color: var(--text2); font: 600 12.5px var(--ui); margin-bottom: -2px; }
.wl-login-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--text2); font: 700 15px var(--ui); letter-spacing: .04em; }
.wl-or::before, .wl-or::after { content: ''; flex: 1; border-top: 2px dashed var(--border); }
.wl-opt {
    --face-c: var(--face);
    --lip-c: var(--face-dk);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin: 0 0 3px;
    padding: 0 12px 3px;
    box-sizing: border-box;
    background: var(--face-c);
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: inset 0 -4px 0 var(--lip-c), 0 2px 5px var(--cast);
    color: var(--heading);
    font: 400 19px/1 var(--display);
    letter-spacing: .03em;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, filter 80ms;
}
.wl-opt:hover { filter: brightness(1.05); }
.wl-opt:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--lip-c), 0 0 0 transparent; }
.wl-opt > .dw-ic { width: 24px; height: 24px; }
.wl-opt-discord { --face-c: var(--discord); --lip-c: var(--discord-dk); --ic-discord: #fff; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.wl-opt-guest {
    --face-c: var(--play); --lip-c: var(--play-dk);
    height: 62px;
    border-radius: 13px;
    box-shadow: inset 0 -6px 0 var(--lip-c), inset 0 3px 0 rgba(255,255,255,.3), 0 2px 6px var(--cast);
    color: #fff;
    font-size: 30px;
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
}
.wl-opt-guest:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--lip-c), 0 0 0 transparent; }
.wl-opt-guest > .dw-ic { width: 30px; height: 30px; --ic-play: #fff; }
.wl-offline-note {
    display: none;
    margin-top: 12px;
    padding: 9px 12px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    color: var(--text2);
    font: 600 12px var(--ui);
}
#dwWelcome.wl-offline #wlDiscord, #dwWelcome.wl-offline #wlPassword,
#dwWelcome.wl-offline .wl-sub, #dwWelcome.wl-offline .wl-or, #dwWelcome.wl-offline .wl-login-row,
#dwWelcome.wl-nodiscord #wlDiscord { display: none; }
#dwWelcome.wl-nodiscord .wl-login-row { grid-template-columns: 1fr; }
#dwWelcome.wl-offline .wl-offline-note { display: block; }

.wl-top { display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin: -8px -8px 12px; }
.wl-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    margin: 0;
    padding: 0 10px 0 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text2);
    font: 700 16px var(--ui);
    letter-spacing: .02em;
    cursor: pointer;
}
.wl-back:hover { color: var(--text); background: var(--surface2); }
.wl-back .dw-ic { width: 22px; height: 22px; }
.wl-h { margin: 0 0 4px; color: var(--heading); font: 400 28px/1.1 var(--display); letter-spacing: .01em; }
.wl-p { margin: 0 0 16px; color: var(--text2); font: 500 13px/1.5 var(--ui); }
.wl-p b { color: var(--text); font-weight: 700; }
.wl-form { display: flex; flex-direction: column; gap: 12px; }
.wl-form .dw-btn.block { margin-top: 4px; }
/* log in / sign up: two chunky toggles; the picked one is pushed in */
.wl-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.wl-tab {
    height: 40px;
    margin: 0 0 3px;
    padding: 0 0 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    color: var(--text2);
    font: 400 18px/1 var(--display);
    letter-spacing: .03em;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, background-color 80ms;
}
.wl-tab:hover { color: var(--text); }
.wl-tab.active {
    background: var(--copper);
    color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
    transform: translateY(3px);
    box-shadow: inset 0 -2px 0 var(--copper-dk), 0 0 0 transparent;
}
.wl-tab-pill { display: none; }
.wl-foot { margin-top: 2px; text-align: center; }
.wl-note { color: var(--text2); font: 500 11.5px/1.45 var(--ui); }
.wl-note a, .wl-legal a { color: var(--text2); text-decoration: underline; text-underline-offset: 2px; }
.wl-legal { margin-top: 14px; text-align: center; color: var(--text2); font: 500 11.5px/1.45 var(--ui); opacity: .8; }
.wl-note-left { text-align: left; }
.wl-addpw { align-self: flex-start; }
.wl-addpw[hidden], .wl-optional[hidden] { display: none; }
.wl-optional { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 2px dashed var(--border); }
.wl-who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.wl-who-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-who-k { color: var(--text2); font: 700 11px var(--ui); }
.wl-who-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 400 19px var(--display); letter-spacing: .02em; }
.wl-codeview { text-align: center; }
.wl-codeview .wl-p { text-align: center; text-wrap: balance; }
.wl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px; height: 58px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface2);
    transform: rotate(-6deg);
}
.wl-badge .dw-ic { width: 38px; height: 38px; }
.wl-code {
    padding: 18px 8px;
    background: var(--input-bg);
    border: 3px dashed var(--ink);
    border-radius: 12px;
    color: var(--heading);
    font: 700 28px/1 'Ubuntu Mono', monospace;
    letter-spacing: .14em;
    white-space: nowrap;
    cursor: text;
    -webkit-user-select: all;
    user-select: all;
}
.wl-code:focus { outline: 0; border-style: solid; }
.wl-code-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 16px; }
.container.wl-check {
    display: block;
    width: fit-content;
    margin: 0 auto 16px;
    padding-left: 24px;
    color: var(--text);
    font: 700 13px/17px var(--ui);
    text-align: left;
}
.container.wl-check .checkmark { top: 0; width: 14px; height: 14px; }
.container.wl-check .checkmark::after { left: 4px; top: 1px; }

/* nothing account-related shows over a running game */
body.in-game #menuNav,
body.in-game #accountChip,
body.in-game #dwHub,
body.in-game #dwHubOverlay,
body.in-game #dwWelcome,
body.in-game #dwModalRoot { display: none !important; }

/* reduced motion: things still change, they just don't travel */
@media (prefers-reduced-motion: reduce) {
    #menuNav, #menuNav *, #accountChip, #accountChip *, #acctNameBox, .an-badge,
    #dwHub, #dwHub *, #dwHubOverlay, #dwWelcome, #dwWelcome *, #dwModalRoot, #dwModalRoot *, .toast, .tut-badge {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

/* ── Item Shop and Locker (Phase 3) ────────────────────────────────────
   Rarity is a fat band across the top of a card and a text colour (--rc,
   set per rarity class). The only gradients anywhere are inside the name
   styles, drawn on canvas. Preview wells are the cave floor colour. */
:root, [data-theme="dark"], [data-theme="light"] {
    --r-common: #b4b8bd;
    --r-uncommon: #5fd068;
    --r-rare: #4aa3ff;
    --r-epic: #b06bff;
    --r-legendary: #ffb23d;
    --dw-floor: #1e1d1b;
}
[data-theme="light"] { --r-common: #8a8f96; --r-uncommon: #2f9e3a; --r-rare: #2f7fd6; --r-epic: #8a45d6; --r-legendary: #c77f0a; }
.r-common { --rc: var(--r-common); }
.r-uncommon { --rc: var(--r-uncommon); }
.r-rare { --rc: var(--r-rare); }
.r-epic { --rc: var(--r-epic); }
.r-legendary { --rc: var(--r-legendary); }
.r-none { --rc: var(--text2); }
.dw-prev, .dw-name-cv { display: block; }

/* the nav's "new items" dot */
.dw-nav-btn.has-new::before {
    content: '';
    position: absolute;
    top: -5px; right: -5px;
    z-index: 1;
    width: 9px; height: 9px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--danger);
    animation: dwPop var(--dw-t2) var(--dw-pop) both;
}
/* styled names in the chip and the name box */
.ac-name-cv { max-width: 150px; margin: -2px 0 -1px -2px; }
#acctNameText .an-name { margin: 0; }

.shop-loading { padding: 40px 0; color: var(--text2); font: 700 17px var(--ui); letter-spacing: .03em; text-align: center; animation: dwFade var(--dw-t3) var(--dw-ease) both; }
.shop-empty { padding: 30px 12px; text-align: center; }
.shop-empty-h { color: var(--heading); font: 400 22px var(--display); }
.shop-empty-p { margin: 6px 0 14px; color: var(--text2); font: 500 13px/1.5 var(--ui); }

.shop-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shop-reset { display: inline-flex; align-items: baseline; gap: 6px; }
.shop-reset-l { color: var(--text2); font: 600 12.5px var(--ui); }
.shop-count {
    padding: 3px 8px 4px;
    border-radius: 6px;
    background: var(--ink);
    color: #fff4dc;
    font: 700 15px/1 var(--ui);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.shop-count.soon { background: var(--danger); }
.shop-top-r { display: flex; align-items: center; gap: 14px; }
.shop-bal {
    position: relative;
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 11px 0 22px;
    border-radius: 8px;
    background: var(--ink);
    color: #dccfff;
    font: 400 18px/1 var(--display);
    letter-spacing: .03em;
}
.shop-bal .dw-ic { position: absolute; left: -12px; top: 50%; width: 28px; height: 28px; margin-top: -15px; }

.shop-sec { margin-top: 20px; animation: dwPop var(--dw-t3) var(--dw-pop) both; }
.shop-sec + .shop-sec { animation-delay: 40ms; }
.shop-sec + .shop-sec + .shop-sec { animation-delay: 80ms; }
.shop-h { margin: 0 0 10px 2px; color: var(--heading); font: 400 22px/1 var(--display); letter-spacing: .02em; }
.shop-sec.feat .shop-h, .shop-h.feat { color: var(--copper); }
.shop-grid { display: grid; gap: 14px; }
.shop-grid.feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-grid.daily { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.shop-grid.perm { grid-template-columns: repeat(auto-fill, minmax(200px, 250px)); }
@media (max-width: 680px) {
    .shop-grid.daily { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-grid.feat { grid-template-columns: minmax(0, 1fr); }
}

.shop-card {
    position: relative;
    display: flex; flex-direction: column;
    min-width: 0;
    margin: 0 0 4px; padding: 0;
    overflow: hidden;
    background: var(--face);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 2px 6px var(--cast);
    color: var(--text);
    font: inherit; text-align: left;
    cursor: pointer;
    transition: transform .12s var(--dw-pop), box-shadow 60ms ease-out;
}
.shop-grid .shop-card:nth-child(odd):hover { transform: translateY(-3px) rotate(-.6deg); }
.shop-grid .shop-card:nth-child(even):hover { transform: translateY(-3px) rotate(.6deg); }
.shop-card:hover { box-shadow: 0 4px 11px var(--cast); }
.shop-grid .shop-card:active { transform: translateY(3px); box-shadow: 0 1px 2px var(--cast); transition-duration: 60ms; }
.shop-card:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.shop-band { display: block; height: 7px; flex: none; background: var(--rc); border-bottom: 1px solid var(--line); }
.shop-prev { display: block; line-height: 0; background: var(--dw-floor); border-bottom: 1px solid var(--line); }
.shop-prev canvas { width: 100%; height: auto; }
.shop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 11px 10px; }
.shop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 400 18px/1.15 var(--display); letter-spacing: .02em; }
.feat .shop-name { font-size: 22px; }
.shop-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0; color: var(--text2); font: 600 11.5px/1.3 var(--ui); }
.shop-rar { color: var(--rc); font-weight: 700; }
.shop-tag {
    margin-left: 6px; padding: 0 5px;
    border: 1.5px solid currentColor;
    border-radius: 5px;
    color: var(--rc);
    font: 700 10px/1.5 var(--ui);
}
.shop-foot { display: flex; align-items: center; margin-top: 6px; min-height: 22px; }
.shop-price { display: inline-flex; align-items: center; gap: 4px; color: var(--dust); font: 400 18px/1 var(--display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.shop-price .dw-ic { width: 18px; height: 18px; margin-top: -1px; }
.shop-price.big { font-size: 30px; gap: 6px; }
.shop-price.big .dw-ic { width: 28px; height: 28px; }
.shop-price.sm { font-size: 15px; }
.shop-price.sm .dw-ic { width: 15px; height: 15px; }
/* owned: a stamp */
.shop-owned {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 7px;
    border: 2.5px solid var(--online);
    border-radius: 6px;
    color: var(--online);
    font: 700 15px/1 var(--ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-5deg);
}

/* item modal */
.dw-modal.shop-modal { width: 660px; padding: 0; border-top-width: 10px; border-top-color: var(--rc); }
.shop-mbody { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; padding: 20px 22px 20px 20px; }
.shop-mx { position: absolute; top: 12px; right: 12px; }
.shop-mprev { width: 300px; height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; box-sizing: border-box; background: var(--dw-floor); line-height: 0; }
.shop-mprev canvas { margin: -3px; }
.shop-swatches, .lk-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-swatches { margin-top: 12px; }
.shop-sw {
    width: 20px; height: 20px;
    margin: 0; padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    cursor: pointer;
    transition: transform 80ms var(--dw-pop);
}
.shop-sw.sm { width: 17px; height: 17px; }
.shop-sw:hover { transform: scale(1.15); }
.shop-sw.on { transform: scale(1.2); box-shadow: 0 0 0 2px var(--hub-bg), 0 0 0 4.5px var(--ink); }
.lk-swatches .shop-sw { border-color: #0c0a0e; }
.lk-swatches .shop-sw.on { box-shadow: 0 0 0 2px var(--dw-floor), 0 0 0 4px #f2f2f2; }
.shop-tankrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--text2); font: 700 15px var(--ui); letter-spacing: .02em; }
select.dw-input {
    height: 34px; padding: 0 10px;
    background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px;
    color: var(--input-fg);
    font: 700 13px var(--ui);
    cursor: pointer;
}
.shop-minfo { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.shop-mrar { color: var(--rc); font: 700 16px var(--ui); letter-spacing: .04em; }
.shop-mname { margin-top: -6px; color: var(--heading); font: 400 36px/1.05 var(--display); letter-spacing: .01em; }
.shop-mdesc { color: var(--text2); font: 500 13px/1.5 var(--ui); }
.shop-mprice { display: flex; margin: 8px 0 4px; transform-origin: 0 50%; }
.shop-mact { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.shop-mact .dw-btn { min-width: 110px; height: 46px; font-size: 20px; }
.shop-mact .dw-link { font-size: 12.5px; }
.shop-mnote { color: var(--text2); font: 500 12px/1.45 var(--ui); }
.shop-mnote:empty { display: none; }
@media (max-width: 700px) {
    .shop-mbody { grid-template-columns: minmax(0, 1fr); }
    .shop-mprev { margin: 0 auto; }
}

/* gifts */
.shop-gift { display: flex; flex-direction: column; gap: 10px; }
.shop-gline { display: flex; align-items: center; justify-content: space-between; color: var(--text2); font: 600 13px var(--ui); }
.shop-glist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 2px; }
.shop-gfriend, .shop-gmsg {
    margin: 0; padding: 0 12px;
    background: var(--face); border: 1px solid var(--line); border-radius: 9px;
    color: var(--text); font: 700 13px var(--ui); text-align: left;
    cursor: pointer;
    transition: background-color 80ms, transform 60ms ease-out;
}
.shop-gfriend { height: 40px; font: 700 17px var(--ui); letter-spacing: .02em; }
.shop-gmsg { height: 32px; }
.shop-gfriend:active, .shop-gmsg:active { transform: translateY(2px); }
.shop-gfriend.on, .shop-gmsg.on { background: var(--copper); color: #fff; }
.shop-glabel { color: var(--text2); font: 700 15px var(--ui); letter-spacing: .02em; }
.shop-gmsgs { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-gnone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 8px; text-align: center; color: var(--text2); }
.shop-gnone .dw-ic { width: 44px; height: 44px; }
.shop-gnone-h { color: var(--heading); font: 400 20px var(--display); }
.shop-gnone-p { font: 500 12.5px/1.5 var(--ui); max-width: 280px; }

/* history + refund tokens */
.dw-modal.shop-histm { width: 460px; }
.shop-tokens { display: flex; align-items: center; justify-content: space-between; color: var(--heading); font: 700 17px var(--ui); letter-spacing: .02em; }
.shop-tokens-p { margin: 2px 0 12px; color: var(--text2); font: 500 12.5px/1.5 var(--ui); }
.shop-pips { display: inline-flex; gap: 8px; }
.shop-pip {
    width: 11px; height: 11px;
    border: 1px solid var(--line); border-radius: 3px;
    background: var(--surface2);
    transform: rotate(45deg);
    transition: background-color var(--dw-t2) var(--dw-ease);
}
.shop-pip.on { background: var(--dust); }
.shop-hist { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; margin-bottom: 8px; }
.shop-hrow { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 2px dashed var(--border); }
.shop-hdot { width: 10px; height: 10px; flex: none; border: 1px solid var(--line); border-radius: 3px; background: var(--rc); transform: rotate(45deg); }
.shop-hmain { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.shop-hname { color: var(--heading); font: 700 16px var(--ui); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-hsub { color: var(--text2); font: 500 11.5px var(--ui); }
.shop-htag { padding: 2px 7px; border: 2px solid var(--border); border-radius: 6px; color: var(--text2); font: 700 10.5px var(--ui); }
.shop-hnone { padding: 22px 0; color: var(--text2); font: 500 13px var(--ui); text-align: center; }

/* Locker */
.lk-stagewrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--dw-floor); line-height: 0; animation: dwPop var(--dw-t3) var(--dw-pop) both; }
.lk-stage canvas { width: 100%; height: auto; }
.lk-swatches { position: absolute; left: 12px; bottom: 11px; gap: 6px; line-height: normal; }
/* tabs (locker + friends): chunky toggles; the picked one is pushed in */
.lk-tabs { display: inline-flex; gap: 8px; margin: 16px 0 14px; padding: 0; }
.lk-tab {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; margin: 0 0 3px; padding: 0 13px 3px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    color: var(--text2);
    font: 700 17px/1 var(--ui); letter-spacing: .03em;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, background-color 80ms;
}
.lk-tab:hover { color: var(--text); }
.lk-tab.on {
    background: var(--copper); color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
    transform: translateY(3px);
    box-shadow: inset 0 -2px 0 var(--copper-dk), 0 0 0 transparent;
}
.lk-count { min-width: 20px; padding: 2px 5px 3px; box-sizing: border-box; border-radius: 6px; background: var(--ink); color: #fff4dc; font: 700 13px/1 var(--ui); text-align: center; text-shadow: none; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.lk-tile {
    position: relative;
    display: flex; flex-direction: column;
    min-width: 0; margin: 0 0 3px; padding: 0 0 9px;
    overflow: hidden;
    background: var(--face);
    border: 1px solid var(--line); border-radius: 11px;
    box-shadow: 0 2px 5px var(--cast);
    color: var(--text); font: inherit; text-align: left;
    cursor: pointer;
    transition: transform .12s var(--dw-pop), box-shadow 60ms ease-out;
}
.lk-tile:hover { transform: translateY(-2px); box-shadow: 0 3px 8px var(--cast); }
.lk-tile:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; transition-duration: 60ms; }
.lk-tile.sel { box-shadow: 0 2px 5px var(--cast), 0 0 0 3px var(--hub-bg), 0 0 0 6px var(--copper); }
.lk-tprev { display: flex; align-items: center; justify-content: center; height: 92px; background: var(--dw-floor); border-bottom: 1px solid var(--line); line-height: 0; }
.lk-tprev canvas { max-width: 100%; }
.lk-tname { padding: 7px 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 700 16px var(--ui); letter-spacing: .02em; }
.lk-tsub { padding: 0 10px; color: var(--rc); font: 700 11px var(--ui); }
.lk-ribbon {
    position: absolute; top: 6px; left: 6px; z-index: 1;
    padding: 3px 6px 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--play); color: #fff;
    font: 700 12px/1 var(--ui); letter-spacing: .05em;
    text-transform: uppercase;
    transform: rotate(-4deg);
}
.lk-empty { grid-column: 1 / -1; padding: 16px 10px 6px; text-align: center; }
.lk-empty-h { color: var(--heading); font: 400 20px var(--display); }
.lk-empty-p { margin: 4px 0 12px; color: var(--text2); font: 500 12.5px/1.5 var(--ui); }
.lk-bar { margin-top: 14px; padding: 10px 12px 10px 14px; background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; box-shadow: inset 0 -4px 0 var(--face-dk); }
.lk-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lk-bar-name { color: var(--heading); font: 400 21px var(--display); letter-spacing: .02em; }
.lk-bar-sub { margin-top: 1px; color: var(--text2); font: 600 12px var(--ui); }
.lk-bar-r { display: flex; align-items: center; gap: 10px; }
.lk-eqlabel { color: var(--online); font: 700 17px var(--ui); letter-spacing: .03em; }
.lk-note { margin-top: 10px; color: var(--text2); font: 600 12px var(--ui); text-align: center; }
.lk-color { margin-top: 12px; }
.lk-crow { display: flex; align-items: center; gap: 8px; }
.lk-picker { width: 44px; height: 44px; flex: none; margin: 0; padding: 2px; background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
input.dw-input.lk-hex { width: 128px; height: 44px; font-family: 'Ubuntu Mono', monospace; letter-spacing: .06em; text-transform: lowercase; }
input.dw-input.lk-hex.bad { border-color: var(--danger); }
.lk-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.lk-preset {
    width: 24px; height: 24px; margin: 0; padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    cursor: pointer;
    transition: transform 80ms var(--dw-pop);
}
.lk-preset:hover { transform: scale(1.15); }
.lk-preset.on { transform: scale(1.15); box-shadow: 0 0 0 2px var(--hub-bg), 0 0 0 4.5px var(--ink); }
.lk-cmsg { max-height: 0; overflow: hidden; color: var(--danger-text); font: 700 12px/1.4 var(--ui); opacity: 0; transition: max-height var(--dw-t2) var(--dw-ease), opacity var(--dw-t2) var(--dw-ease), margin var(--dw-t2) var(--dw-ease); }
.lk-cmsg.show { max-height: 40px; margin-top: 8px; opacity: 1; }

/* ── Friends, Profile, Leaderboard, Daily Quests (Phases 4 and 5) ──────
   Same plates and inks; tier colours arrive as --tc (people.js
   tierColor), achievement colours as --ac. */
:root, [data-theme="dark"] {
    --in-raid: #ffb23d;
    --medal-gold: #ffc34f;
    --medal-silver: #c2cbd8;
    --medal-bronze: #cf7634;
}
[data-theme="light"] {
    --in-raid: #b86d00;
    --medal-gold: #f2b83c;
    --medal-silver: #b9c2cf;
    --medal-bronze: #cf7634;
}

/* the nav's request count */
.dw-nav-btn[data-count] { position: relative; }
.dw-nav-count {
    position: absolute;
    top: -8px; right: -8px;
    z-index: 1;
    min-width: 20px; height: 20px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font: 700 13px/16px var(--ui);
    text-align: center;
    pointer-events: none;
    animation: dwPop var(--dw-t2) var(--dw-pop) both;
}
.dw-nav-btn .dw-nav-count { display: block; }
html[data-acct="guest"] .dw-nav-count, html[data-acct="new"] .dw-nav-count { display: none; }

/* names and badges shared by the panes */
.pp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 700 17px var(--ui); letter-spacing: .02em; }
.pp-name-cv { max-width: 100%; margin: -2px 0 -2px -2px; }
.pp-nobadge { display: inline-block; flex: none; }

/* ── Friends ── */
.fr-add { margin-bottom: 6px; }
.fr-add-row { display: flex; gap: 8px; align-items: flex-start; }
input.dw-input.fr-add-in { flex: 1; min-width: 0; height: 42px; }
.fr-add-go { height: 42px; min-width: 80px; }
.fr-add-msg { max-height: 0; overflow: hidden; opacity: 0; color: var(--text2); font: 700 12.5px/1.4 var(--ui); transition: max-height var(--dw-t2) var(--dw-ease), opacity var(--dw-t2) var(--dw-ease), margin var(--dw-t2) var(--dw-ease); }
.fr-add-msg.show { max-height: 40px; margin-top: 6px; opacity: 1; }
.fr-add-msg.ok { color: var(--online); }
.fr-add-msg.bad { color: var(--danger-text); }
.lk-count.fr-hot { background: var(--danger); color: #fff; }
.fr-list { display: flex; flex-direction: column; gap: 0; min-height: 120px; }
.fr-h { margin: 12px 0 4px 4px; color: var(--text2); font: 700 16px var(--ui); letter-spacing: .03em; }
.fr-h:first-child { margin-top: 0; }
.fr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border-radius: 12px;
    transition: background-color 80ms;
    animation: dwFade var(--dw-t2) var(--dw-ease) both;
}
.fr-row:hover { background: var(--surface2); }
.fr-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.fr-main.static { cursor: default; }
.fr-main:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.fr-avwrap { position: relative; flex: none; line-height: 0; }
.fr-dot {
    display: inline-block;
    width: 12px; height: 12px;
    flex: none;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--text2);
    transition: background-color var(--dw-t2) var(--dw-ease);
}
.fr-avwrap .fr-dot { position: absolute; right: -3px; bottom: -3px; }
.fr-dot.menu { background: var(--online); }
.fr-dot.raid { background: var(--in-raid); }
.fr-dot.offline { background: var(--border); }
.fr-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fr-badge { width: 30px; height: 30px; flex: none; display: block; }
.fr-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fr-name { display: flex; align-items: center; min-width: 0; height: 21px; }
.fr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); font: 600 12px var(--ui); }
.fr-sub.st-raid { color: var(--in-raid); font-weight: 700; }
.fr-sub.st-menu { color: var(--online); font-weight: 700; }
.fr-row.st-offline .fr-name, .fr-row.st-offline .fr-badge { opacity: .7; }
.fr-acts { display: flex; align-items: center; gap: 6px; flex: none; }
/* little square icon buttons: the same chunky press, just smaller */
.fr-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 34px;
    margin: 0 0 3px; padding: 0 0 3px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.fr-ic .dw-ic { width: 22px; height: 22px; }
.fr-ic:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent; }
/* remove / block stay out of the way until you're on the row */
.fr-row .fr-ic:not(.fr-chatbtn) { opacity: 0; transition: opacity 80ms, transform 60ms ease-out, box-shadow 60ms ease-out; }
.fr-row:hover .fr-ic, .fr-row:focus-within .fr-ic { opacity: 1; }
@media (hover: none) { .fr-row .fr-ic:not(.fr-chatbtn) { opacity: 1; } }
.fr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px 24px; color: var(--text2); text-align: center; }
.fr-empty .dw-ic { width: 52px; height: 52px; margin-bottom: 2px; }
.fr-empty-h { color: var(--heading); font: 400 22px var(--display); letter-spacing: .01em; }
.fr-empty-p { max-width: 340px; font: 500 12.5px/1.5 var(--ui); }

/* Requests: red only for ones waiting on you; unread chat on friend rows */
.fr-hotdot { width: 9px; height: 9px; margin-left: -3px; border: 1px solid var(--line); border-radius: 50%; background: var(--danger); animation: dwPop var(--dw-t2) var(--dw-pop) both; }
.fr-unread {
    min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--copper); color: #fff;
    font: 700 13px/16px var(--ui); text-align: center; font-variant-numeric: tabular-nums;
    animation: dwPop var(--dw-t2) var(--dw-pop) both;
}
.fr-sub.st-msg { color: var(--heading); font-weight: 700; }
.fr-chatbtn { position: relative; }
.fr-chatbtn.hot { --face: var(--gold); --face-dk: var(--gold-dk); }
.fr-ic-count {
    position: absolute; top: -9px; right: -9px;
    min-width: 19px; height: 19px; padding: 0 4px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--danger); color: #fff;
    font: 700 12px/15px var(--ui); text-align: center; font-variant-numeric: tabular-nums;
    pointer-events: none; animation: dwPop var(--dw-t2) var(--dw-pop) both;
}

/* Chat */
.fr-home[hidden] { display: none; }
.fr-chat { display: flex; flex-direction: column; height: clamp(300px, calc(100vh - 212px), 620px); margin: -4px -4px -8px; }
.fr-chat-head { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 0 10px; border-bottom: 2px dashed var(--border); }
.fr-back {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 36px; margin: 0 0 3px; padding: 0 0 3px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--face); box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.fr-back .dw-ic { width: 22px; height: 22px; --ic-x: var(--copper); }
.fr-back:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent; }
.fr-chat-who {
    display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 3px 10px 3px 4px;
    border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background-color 80ms;
}
.fr-chat-who:hover { background: var(--surface2); }
.fr-chat-who:focus-visible, .fr-back:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.fr-chat-badge { line-height: 0; }
.fr-chat-badge .fr-badge { width: 34px; height: 34px; }
.fr-chat-pres { display: flex; align-items: center; gap: 6px; }
.fr-chat-pres .fr-dot { width: 10px; height: 10px; border-width: 2px; flex: none; }
.fr-chat-pres-t { overflow: hidden; text-overflow: ellipsis; }
.fr-chat-pres-t.st-raid { color: var(--in-raid); font-weight: 700; }
.fr-chat-pres-t.st-menu { color: var(--online); font-weight: 700; }
.fr-chat-logwrap { position: relative; flex: 1; min-height: 0; }
.fr-chat-log {
    height: 100%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 8px 6px 10px;
    scrollbar-width: thin; scrollbar-color: var(--scroll-t) transparent;
}
.fr-chat-top { display: flex; justify-content: center; min-height: 26px; padding: 2px 0 6px; }
.fr-chat-hint { color: var(--text2); font: 600 11.5px var(--ui); animation: dwFade var(--dw-t2) var(--dw-ease) both; }
.fr-chat-older, .fr-chat-retry {
    height: 28px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--face); color: var(--text); font: 700 14px var(--ui); letter-spacing: .02em; cursor: pointer;
}
.fr-chat-older:active, .fr-chat-retry:active { transform: translateY(1px); }
.fr-chat-msgs { display: flex; flex-direction: column; }
.fr-chat-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; color: var(--text2); text-align: center; animation: dwPop var(--dw-t3) var(--dw-pop) both; }
.fr-chat-empty .dw-ic { width: 52px; height: 52px; margin-bottom: 2px; }
.fr-chat-time { align-self: center; margin: 14px 0 6px; padding: 2px 8px; border-radius: 6px; background: var(--surface2); color: var(--text2); font: 700 10.5px var(--ui); }
.fr-chat-time:first-child { margin-top: 2px; }
.fr-msg { display: flex; max-width: 78%; margin-top: 8px; }
.fr-msg.cont { margin-top: 3px; }
.fr-msg.me { align-self: flex-end; }
.fr-msg.them { align-self: flex-start; }
.fr-bubble {
    padding: 6px 12px 7px; border: 1px solid var(--line); border-radius: 14px;
    font: 600 13.5px/1.4 var(--ui); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    transition: opacity var(--dw-t2) var(--dw-ease), background-color var(--dw-t2) var(--dw-ease);
}
.fr-msg.me .fr-bubble { background: var(--copper); color: #fff; }
.fr-msg.them .fr-bubble { background: var(--face); color: var(--text); }
.fr-msg.me.cont .fr-bubble { border-top-right-radius: 5px; }
.fr-msg.me:not(.tail) .fr-bubble { border-bottom-right-radius: 5px; }
.fr-msg.me.tail .fr-bubble { border-bottom-right-radius: 3px; }
.fr-msg.them.cont .fr-bubble { border-top-left-radius: 5px; }
.fr-msg.them:not(.tail) .fr-bubble { border-bottom-left-radius: 5px; }
.fr-msg.them.tail .fr-bubble { border-bottom-left-radius: 3px; }
.fr-msg.sending .fr-bubble { opacity: .6; }
.fr-msg.failed .fr-bubble { background: color-mix(in srgb, var(--danger) 30%, var(--face)); color: var(--text); }
.fr-msg-retry {
    align-self: flex-end; margin: 3px 2px 0; padding: 0; border: 0; background: none;
    color: var(--danger-text); font: 700 11px var(--ui); cursor: pointer; animation: dwFade var(--dw-t2) var(--dw-ease) both;
}
.fr-msg-retry b { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fr-msg-seen { align-self: flex-end; margin: 3px 4px 0; color: var(--text2); font: 700 10.5px var(--ui); animation: dwFade var(--dw-t3) var(--dw-ease) both; }
.fr-chat-pill {
    position: absolute; left: 50%; bottom: 10px; height: 30px; margin: 0; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 9px; background: var(--copper); color: #fff;
    box-shadow: 0 2px 5px var(--cast);
    font: 700 15px var(--ui); letter-spacing: .02em; cursor: pointer;
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
    transition: opacity var(--dw-t1) ease-out, transform var(--dw-t2) var(--dw-pop), visibility 0s var(--dw-t2);
}
.fr-chat-pill.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--dw-t1) ease-out, transform var(--dw-t2) var(--dw-pop); }
.fr-chat-form { display: flex; gap: 8px; flex: none; padding-top: 10px; border-top: 2px dashed var(--border); }
.fr-chat-inwrap { position: relative; flex: 1; min-width: 0; }
input.dw-input.fr-chat-in { width: 100%; height: 44px; box-sizing: border-box; padding-right: 44px; }
.fr-chat-left {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text2); font: 700 11px var(--ui); font-variant-numeric: tabular-nums; pointer-events: none;
    opacity: 0; transition: opacity var(--dw-t1) var(--dw-ease), color var(--dw-t1) var(--dw-ease);
}
.fr-chat-left.show { opacity: .9; }
.fr-chat-left.warn { color: var(--danger-text); }
.fr-chat-send { height: 44px; min-width: 80px; }

/* ── Profile ── */
.wl-back.pf-back { margin: -6px 0 10px -6px; }
.pf-top {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 150px;
    align-items: center;
    gap: 20px;
    padding: 14px 16px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: inset 0 -5px 0 var(--face-dk);
}
.pf-badge { width: 112px; height: 112px; line-height: 0; }
.pf-badge-img { width: 112px; height: 112px; display: block; animation: dwPop var(--dw-t3) var(--dw-pop) both; }
.pf-id { display: flex; flex-direction: column; min-width: 0; }
.pf-name { display: flex; align-items: center; min-height: 34px; min-width: 0; }
.pf-name .pp-name { font-size: 30px; }
.pf-rank { margin-top: 0; color: var(--tc, var(--heading)); font: 400 20px var(--display); letter-spacing: .03em; }
[data-theme="light"] .pf-rank { color: var(--heading); }
.pf-bar { position: relative; height: 14px; margin-top: 8px; overflow: hidden; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); }
.pf-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--tc, var(--copper)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); transition: width 700ms var(--dw-ease); }
[data-theme="light"] .pf-fill { background: color-mix(in srgb, var(--tc, var(--copper)) 80%, #000); }
.pf-bartext { margin-top: 6px; color: var(--text); font: 700 12px var(--ui); font-variant-numeric: tabular-nums; }
.pf-meta { margin-top: 2px; color: var(--text2); font: 600 12px var(--ui); }
.pf-pres { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--text2); font: 700 12px var(--ui); }
.pf-pres .fr-dot { width: 11px; height: 11px; border-width: 2px; }
.pf-pres.st-raid { color: var(--in-raid); }
.pf-pres.st-menu { color: var(--online); }
.pf-tank { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--dw-floor); }
.pf-tankcv { display: block; }
.pf-tank-l { max-width: 138px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9d0bb; font: 700 14px var(--ui); letter-spacing: .03em; }
.pf-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-acts:empty { display: none; }
.pf-note { margin-right: auto; color: var(--text2); font: 600 12.5px var(--ui); }
.pf-sec { margin-top: 20px; animation: dwPop var(--dw-t3) var(--dw-pop) both; }
.pf-sec + .pf-sec { animation-delay: 40ms; }
.pf-sec + .pf-sec + .pf-sec { animation-delay: 80ms; }
.pf-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 9px; color: var(--heading); font: 400 21px var(--display); letter-spacing: .02em; }
.pf-h-r { color: var(--text2); font: 700 12px var(--ui); letter-spacing: 0; }
.pf-tiers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pf-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 7px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); }
.pf-tier:not(.on) { border-style: dashed; border-color: var(--border); background: transparent; }
.pf-tier-img { width: 50px; height: 50px; display: block; transition: transform .15s var(--dw-pop); }
.pf-tier.on:hover .pf-tier-img { transform: translateY(-3px) rotate(-5deg) scale(1.06); }
/* not reached yet: the real badge, greyed and dimmed, so it stays crisp */
.pf-tier:not(.on) .pf-tier-img { filter: grayscale(1) brightness(.62); opacity: .5; }
[data-theme="light"] .pf-tier:not(.on) .pf-tier-img { filter: grayscale(1) brightness(.9); opacity: .45; }
.pf-tier-l { color: var(--text); font: 700 14px var(--ui); letter-spacing: .03em; }
.pf-tier:not(.on) .pf-tier-l { color: var(--text2); opacity: .7; }
/* achievements: a tray of little medals. Name and how to get it on hover */
.pf-achs { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-ach { position: relative; display: flex; align-items: center; gap: 0; min-width: 0; padding: 0; border: 0; background: none; }
.pf-ach-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none; box-sizing: border-box;
    border: 3px dashed var(--border); border-radius: 50%;
    background: transparent; color: var(--text2);
}
.pf-ach.on .pf-ach-ic { border: 1px solid var(--line); background: var(--ac); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 2px 5px var(--cast); color: var(--ink); }
.pf-ach.on:nth-child(3n) .pf-ach-ic { transform: rotate(-6deg); }
.pf-ach.on:nth-child(3n+1) .pf-ach-ic { transform: rotate(4deg); }
.pf-ach-ic .dw-ic { width: 24px; height: 24px; }
.pf-ach:not(.on) .pf-ach-ic .dw-ic { opacity: .45; }
.pf-ach-txt {
    position: absolute; bottom: calc(100% + 8px); left: -4px; z-index: 2;
    display: flex; flex-direction: column; gap: 1px;
    width: max-content; max-width: 200px;
    padding: 6px 9px 7px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--ink); color: #fff4dc;
    pointer-events: none;
    opacity: 0; transform: translateY(4px);
    transition: opacity 80ms, transform .12s var(--dw-pop);
}
.pf-ach:nth-last-child(-n+4) .pf-ach-txt { left: auto; right: -4px; }
.pf-ach:hover .pf-ach-txt, .pf-ach:focus-visible .pf-ach-txt { opacity: 1; transform: none; }
.pf-ach:focus-visible { outline: none; }
.pf-ach:focus-visible .pf-ach-ic { outline: 3px solid var(--copper); outline-offset: 2px; }
.pf-ach-n { color: #fff4dc; font: 700 15px var(--ui); letter-spacing: .02em; white-space: nowrap; }
.pf-ach-d { color: #c9bfae; font: 600 11px/1.3 var(--ui); }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-stat { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px 10px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); }
.pf-stat:nth-child(1) { border-radius: 12px; }
.pf-stat:nth-child(5) { border-radius: 12px; }
.pf-stat-v { color: var(--heading); font: 400 27px/1.05 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pf-stat-k { color: var(--text2); font: 700 11.5px var(--ui); }
@media (max-width: 640px) {
    .pf-top { grid-template-columns: 84px minmax(0, 1fr); }
    .pf-badge, .pf-badge-img { width: 84px; height: 84px; }
    .pf-tank { display: none; }
    .pf-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Leaderboard ── */
.lb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lb-title { display: flex; align-items: baseline; gap: 8px; color: var(--heading); font: 400 22px var(--display); letter-spacing: .02em; }
.lb-sub, .lb-upd { color: var(--text2); font: 600 12px var(--ui); letter-spacing: 0; }
.lb-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.lb-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 128px 76px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 16px 0 10px;
    box-sizing: border-box;
    border: 0;
    border-top: 2px solid color-mix(in srgb, var(--border) 60%, transparent);
    background: transparent;
    color: var(--text);
    font: 600 13px var(--ui);
    text-align: left;
}
.lb-row:nth-child(even):not(.lb-head) { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.lb-head { min-height: 36px; border-top: 0; border-bottom: 1px solid var(--line); background: var(--surface2); color: var(--text2); font: 700 15px var(--ui); letter-spacing: .03em; }
.lb-head + .lb-row { border-top: 0; }
.lb-row.click { cursor: pointer; transition: background-color 80ms; }
.lb-row.click:hover { background: var(--surface2); }
.lb-row.click:focus-visible { outline: 3px solid var(--copper); outline-offset: -3px; }
.lb-row.me, .lb-row.me:nth-child(even) { background: color-mix(in srgb, var(--copper) 22%, var(--surface)); }
.lb-place { display: flex; justify-content: center; }
.lb-pl { min-width: 30px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 13px; color: var(--text2); font: 700 16px/26px var(--ui); text-align: center; font-variant-numeric: tabular-nums; }
.lb-pl.gold, .lb-pl.silver, .lb-pl.bronze { border: 1px solid var(--line); line-height: 21px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.lb-pl.gold { background: var(--medal-gold); color: var(--ink); }
.lb-pl.silver { background: var(--medal-silver); color: var(--ink); }
.lb-pl.bronze { background: var(--medal-bronze); color: #fff3e6; }
.lb-row.top .lb-name.pp-name { font-size: 18px; }
.lb-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-badge { width: 28px; height: 28px; flex: none; display: block; }
.lb-you { flex: none; padding: 1px 7px 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--copper); color: #fff; font: 700 12px/15px var(--ui); letter-spacing: .04em; transform: rotate(-4deg); }
.lb-rank { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tc, var(--text)); font-weight: 700; }
[data-theme="light"] .lb-rank { color: var(--text); }
.lb-head .lb-rank { color: var(--text2); font-weight: 400; }
.lb-rp { color: var(--heading); font: 700 17px var(--ui); letter-spacing: .02em; text-align: right; font-variant-numeric: tabular-nums; }
.lb-head .lb-rp { color: var(--text2); font-size: 15px; }
.lb-pin { position: sticky; bottom: -20px; margin-top: 10px; padding-bottom: 6px; border-radius: 14px; background: var(--hub-bg); }
.lb-pin .lb-row { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 5px var(--cast); }
.lb-guest { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--surface2); border: 2.5px dashed var(--ink); color: var(--text2); font: 600 12.5px var(--ui); }
@media (max-width: 560px) {
    .lb-row { grid-template-columns: 44px minmax(0, 1fr) 64px; }
    .lb-rank { display: none; }
}

/* ── Raid Night card above Play (client/account/eventCard.js) ──
   a quiet strip: name and countdown, when in your time and the blurb,
   then the Discord and calendar links. Live: a green edge, a pulsing dot,
   and Play pulses with it. */
.ev-card {
    margin: 0 0 12px;
    padding: 9px 12px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface2);
    box-shadow: inset 0 1px 0 var(--line-soft), 0 2px 5px var(--cast);
    text-align: left;
    animation: dwFade var(--dw-t2) var(--dw-ease) both;
}
.ev-card[hidden] { display: none; }
/* when the name and the countdown don't fit on one line, the countdown wraps under it */
.ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ev-title { white-space: nowrap; color: var(--copper); font: 400 19px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ev-cd { flex: none; margin-left: auto; padding: 3px 8px 4px; border-radius: 7px; background: var(--ink); color: #fff4dc; font: 700 13px/1 var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-blurb { margin: 5px 0 0; color: var(--text2); font: 600 12.5px/1.35 var(--ui); }
.ev-when { color: var(--heading); font-weight: 700; }
.ev-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.ev-link { display: inline-flex; align-items: center; gap: 5px; color: var(--link); font: 700 12.5px/1.2 var(--ui); text-decoration: none; }
.ev-link:hover { text-decoration: underline; }
.ev-link .dw-ic { width: 17px; height: 17px; --ic-sw: 0; --ic-discord: #7c87ff; }
.ev-card.live { border-color: var(--play-dk); box-shadow: inset 0 1px 0 var(--line-soft), 0 0 0 2px color-mix(in srgb, var(--play) 45%, transparent), 0 2px 5px var(--cast); }
.ev-card.live .ev-title { color: var(--play-dk); }
[data-theme="dark"] .ev-card.live .ev-title { color: var(--play); }
.ev-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--play); box-shadow: 0 0 0 0 var(--play); animation: evDot 1.4s ease-out infinite; }
@keyframes evDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--play) 70%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
/* Play, while it is live: a ring breathing out from the button */
#startButton.ev-live::after {
    content: '';
    position: absolute; inset: -3px;
    border: 3px solid var(--play);
    border-radius: 17px;
    pointer-events: none;
    animation: evRing 1.6s ease-out infinite;
}
@keyframes evRing { 0% { opacity: .85; transform: none; } 100% { opacity: 0; transform: scale(1.04, 1.22); } }
@media (prefers-reduced-motion: reduce) {
    .ev-card, .ev-dot, #startButton.ev-live::after { animation: none; }
}
body.mobile .ev-card { margin-bottom: 10px; }
body.mobile .ev-link { padding: 6px 0; margin: -6px 0; }

/* ── Daily Quests (beside the menu card): a note pinned next to it ── */
.startMenu { position: relative; }
#lobbySide {
    position: absolute;
    top: 14px;
    left: calc(100% + 18px);
    width: 258px;
    z-index: 1;
}
#lobbySide[hidden], body.in-game #lobbySide, body.mobile #lobbySide { display: none; }
@media (max-width: 1040px) { #lobbySide { display: none; } }
.q-card {
    position: relative;
    padding: 12px 14px 12px;
    border-radius: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--bevel), 0 3px 8px var(--cast);
    transform: rotate(1.2deg);
    transform-origin: 0 0;
    transition: background-color .25s;
}
/* a strip of tape holding it on */
.q-card::before {
    content: '';
    position: absolute;
    top: -11px; left: 50%;
    width: 70px; height: 20px;
    margin-left: -35px;
    background: color-mix(in srgb, var(--gold) 55%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
    transform: rotate(-4deg);
}
.q-skel { min-height: 150px; }
.q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.q-title { color: var(--heading); font: 400 21px/1 var(--display); letter-spacing: .02em; }
.q-reset { color: var(--text2); font: 700 11.5px var(--ui); white-space: nowrap; }
.q-list { display: flex; flex-direction: column; gap: 10px; }
.q-row { display: flex; flex-direction: column; gap: 5px; }
.q-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.q-text { color: var(--text); font: 700 12.5px/1.35 var(--ui); }
.q-row.done .q-text { color: var(--text2); text-decoration: line-through; text-decoration-thickness: 2px; }
.q-reward { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--dust); font: 700 15px/1.2 var(--ui); letter-spacing: .02em; }
.q-reward .dw-ic { width: 15px; height: 15px; }
.q-row.done .q-reward { opacity: .55; }
.q-barrow { display: flex; align-items: center; gap: 8px; }
.q-bar { position: relative; flex: 1; height: 11px; overflow: hidden; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); }
.q-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--copper); box-shadow: inset 0 -2px 0 var(--copper-dk); transition: width 600ms var(--dw-ease); }
.q-row.done .q-fill { background: var(--play); box-shadow: inset 0 -2px 0 var(--play-dk); }
.q-num { min-width: 42px; color: var(--text2); font: 700 14px var(--ui); text-align: right; font-variant-numeric: tabular-nums; }
.q-done { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 42px; color: var(--online); font: 700 14px var(--ui); letter-spacing: .02em; }
.q-done .dw-ic { width: 16px; height: 16px; }
.q-foot { margin-top: 12px; padding-top: 8px; border-top: 2px dashed var(--border); color: var(--online); font: 700 15px var(--ui); letter-spacing: .02em; text-align: center; }
/* the Streaks card under the quests: a medal (the profile's medal look) per streak */
.st-card { margin-top: 12px; }
.st-utc { color: var(--text2); font: 700 11.5px var(--ui); white-space: nowrap; }
.st-row { display: flex; align-items: flex-start; gap: 10px; }
.st-row + .st-row { margin-top: 10px; }
.st-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.st-medal {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; box-sizing: border-box;
    border: 3px dashed var(--border); border-radius: 50%;
    color: var(--text2);
}
.st-medal.on { border: 1px solid var(--line); background: var(--ac); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 2px 5px var(--cast); color: var(--ink); transform: rotate(-6deg); }
.st-medal .dw-ic { width: 21px; height: 21px; }
.st-medal:not(.on) .dw-ic { opacity: .45; }
.st-n {
    position: absolute; right: -7px; bottom: -5px;
    min-width: 13px; padding: 0 4px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--heading); font: 700 11px/15px var(--ui); text-align: center;
    transform: rotate(6deg);
}
.st-sub { color: var(--text2); font: 700 11.5px/1.3 var(--ui); }
.st-tier { flex: none; color: var(--text2); font: 700 11px var(--ui); white-space: nowrap; }
.st-best { flex: none; color: var(--text2); font: 700 12.5px/1.35 var(--ui); }
.st-row.off .q-text { color: var(--text2); }
.q-guest {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 3px;
    padding: 8px 12px 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    color: var(--heading);
    font: 700 15px var(--ui);
    letter-spacing: .02em;
    cursor: pointer;
    transform: rotate(1.2deg);
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
    animation: dwFade var(--dw-t2) var(--dw-ease) both;
}
.q-guest .dw-ic { width: 22px; height: 22px; }
.q-guest:active { transform: rotate(1.2deg) translateY(3px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 transparent; }

/* the reset-password view */
.wl-reset .wl-badge { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    #lobbySide, #lobbySide *, .dw-nav-count { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ── In-game friend chat (client/account/ingameChat.js) ──
   right edge, middle height: clear of the leaderboard, minimap and the
   HUD centre. Always the dark plate, like the rest of the in-game HUD. */
.igc {
    position: fixed; right: 14px; top: 50%; z-index: 60;
    display: flex; flex-direction: column;
    width: 300px; max-width: calc(100vw - 28px);
    height: min(420px, calc(100vh - 120px));
    margin-top: calc(min(420px, calc(100vh - 120px)) / -2);
    box-sizing: border-box; padding: 10px 12px 12px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--hub-bg); color: var(--text);
    box-shadow: inset 0 1px 0 var(--bevel), 0 3px 8px var(--cast);
    font-family: Ubuntu, sans-serif;
    animation: dwPop var(--dw-t2) var(--dw-pop) both;
}
.igc[hidden] { display: none; }
.igc-head { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 0 8px 2px; }
.igc-title { color: var(--heading); font: 400 20px var(--display); letter-spacing: .02em; }
.igc-hint { flex: 1; color: var(--text2); font: 600 11px var(--ui); text-align: right; }
.igc-x {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; margin: 0 0 3px; padding: 0 0 3px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--danger); box-shadow: inset 0 -3px 0 var(--danger-dk), 0 1px 3px var(--cast);
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.igc-x .dw-ic { width: 18px; height: 18px; }
.igc-x:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--danger-dk), 0 0 0 transparent; }
.igc-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.igc-list {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 2px;
    scrollbar-width: thin; scrollbar-color: var(--scroll-t) transparent;
}
.igc-row {
    display: flex; align-items: center; gap: 10px; flex: none;
    margin: 0; padding: 6px 8px 6px 6px; border: 0; border-radius: 10px;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background-color 80ms;
}
.igc-row:hover, .igc-row:focus-visible { background: var(--surface2); outline: none; }
.igc-row .fr-txt { flex: 1; }
.igc-row .fr-name { height: 19px; }
.igc-row.st-offline .fr-name { opacity: .75; }
.igc-empty { padding: 40px 12px; color: var(--text2); font: 600 12.5px/1.5 var(--ui); text-align: center; animation: dwFade var(--dw-t2) var(--dw-ease) both; }
.igc .fr-chat { flex: 1; min-height: 0; height: auto; margin: 0; }
.igc .fr-chat-head { padding-bottom: 8px; }
.igc .fr-chat-who { pointer-events: none; }
.igc .fr-msg { max-width: 86%; }
.igc .fr-bubble { font-size: 13px; padding: 5px 10px 6px; }
.igc input.dw-input.fr-chat-in { height: 40px; }
.igc .fr-chat-send { height: 40px; min-width: 62px; }
.igc .fr-chat-empty { padding: 24px 12px; }

/* the pip: tiny, faint until something's unread */
.igc-pip {
    position: fixed; right: 14px; top: 50%; z-index: 59;
    display: none; align-items: center; gap: 5px;
    height: 32px; margin: -16px 0 0; padding: 0 8px 2px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--hub-bg); box-shadow: 0 1px 3px var(--cast); color: var(--text2); cursor: pointer;
    opacity: .55;
    transition: opacity var(--dw-t2) var(--dw-ease), transform 60ms ease-out;
}
.igc-pip.show { display: inline-flex; }
.igc-pip:hover { opacity: 1; }
.igc-pip:active { transform: translateY(2px); }
.igc-pip .dw-ic { width: 20px; height: 20px; }
.igc-pip.hot { opacity: 1; animation: igcNudge 2.6s ease-in-out infinite; }
@keyframes igcNudge { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-8deg); } 96% { transform: rotate(6deg); } }
.igc-pip-n:empty { display: none; }
.igc-pip-n {
    min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px;
    background: var(--danger); color: #fff; font: 700 12px/14px var(--ui); text-align: center; font-variant-numeric: tabular-nums;
    animation: dwPop var(--dw-t2) var(--dw-pop) both;
}

/* a DM with the panel shut: slides in just above the pip */
.igc-toast {
    position: fixed; right: 14px; top: 50%; z-index: 59;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    max-width: min(280px, calc(100vw - 28px)); margin: -62px 0 0; padding: 6px 12px 8px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--hub-bg); box-shadow: inset 0 -3px 0 var(--face-dk), 0 2px 5px var(--cast); color: var(--text); cursor: pointer; text-align: right;
    opacity: 0; visibility: hidden; transform: translateX(14px); pointer-events: none;
    transition: opacity var(--dw-t1) ease-out, transform var(--dw-t2) var(--dw-pop), visibility 0s var(--dw-t2);
}
.igc-toast.show { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--dw-t1) ease-out, transform var(--dw-t2) var(--dw-pop); }
.igc-toast-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12.5px var(--ui); }
.igc-toast-k { color: var(--text2); font: 600 10.5px var(--ui); }
.igc-toast-k kbd { padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; color: var(--heading); font: 700 10px 'Ubuntu Mono', monospace; }
@media (prefers-reduced-motion: reduce) { .igc-toast, .igc-toast.show { transition: none; } .igc, .igc-pip.hot { animation: none; } }

/* ── Hover/press stability for chunky buttons ──
   Hover never moves or resizes a button (only colour/lip). Press still drops
   the face with translateY, which would pull the top edge out from under the
   cursor and eat the click (mouseup lands on the parent); while pressed, an
   invisible shim re-covers the original box. Lifted cards get the same shim
   below them on hover so their bottom edge doesn't flicker. */
/* (the pressed transform makes each button the shim's containing block) */
:is(#startButton, #tutorialButton, #themeToggleBtn, #accountChip, #homeSettingsBtn, #homeChangelogBtn,
    #homeSidebar .social-btn, #homeSettingsClose, #homeChangelogClose, .dw-btn, .wl-opt, .dwt-play,
    .dwt-menu, .fr-ic, .fr-back, .hub-close, .wl-x, .dw-toast-act,
    #ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn, .dw-igbtn):active::after {
    content: ''; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -4px; z-index: -1;
}
.shop-grid .shop-card:hover::after, .lk-tile:hover::after {
    content: ''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -8px; z-index: -1;
}

/* ── Join / connection plate (app.js updateJoinState) ──
   Connecting, reconnecting, disconnected / kicked, and the wait before your
   first spawn. Same theme as the menu you just left: the menu's card on
   the menu's backdrop. */
#dwJoin {
    --warn: var(--gold); --good: var(--play); --bad: #ff8f7e;
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 45%, var(--surface2) 0%, var(--bg) 62%);
    color: var(--text);
    user-select: none;
}
[data-theme="light"] #dwJoin { --warn: #c27a0e; --good: var(--play-dk); --bad: #c8392d; }
/* Share on the raid-end result (raidShare.js). Placed by its bottom-right
   corner over the canvas, so it follows the raid card at any UI scale. The
   note under it keeps the in-game HUD's dark plate in either menu theme. */
#dwShareBtn {
    position: fixed; z-index: 40; left: 0; top: 0;
    transform: translate(-100%, -100%) scale(.85);
    opacity: 0; pointer-events: none;
    height: 44px; padding: 0 18px 4px; font: 400 21px/1 var(--display); letter-spacing: .02em;
    border: 2px solid #120e15;
    transition: opacity 180ms ease-out, transform 220ms cubic-bezier(.3, 1.5, .6, 1), filter 80ms;
}
#dwShareBtn.open { opacity: 1; pointer-events: auto; transform: translate(-100%, -100%); }
#dwShareBtn.open:active { transform: translate(-100%, calc(-100% + 3px)); }
#dwShareNote {
    position: fixed; z-index: 41; left: 0; top: 0;
    transform: translate(-100%, -100%);
    display: none; flex-direction: column; align-items: flex-end; gap: 8px;
    padding: 10px 12px; box-sizing: border-box; max-width: calc(100vw - 16px);
    background: rgba(43, 37, 51, .97); border: 2px solid #120e15; border-radius: 13px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .32);
    color: #fff3d9; user-select: none;
}
#dwShareNote.open { display: flex; animation: dwFade 180ms ease-out both; }
#dwShareNote .dws-msg { font: 400 20px/1.1 var(--display); color: #4fcf5c; text-align: right; max-width: 360px; overflow-wrap: anywhere; }
#dwShareNote .dws-btns { display: flex; gap: 8px; }
#dwShareNote .dw-btn[hidden] { display: none; }
#dwJoin.open { display: flex; animation: dwFade 180ms ease both; }
/* disconnected mid-game: the world stays faintly visible behind the plate */
#dwJoin.see { background: rgba(14, 11, 18, .66); }
.dwj-card {
    position: relative;
    width: 380px; max-width: 100%;
    padding: 20px 24px 22px; box-sizing: border-box;
    background: var(--surface);
    border-radius: 17px;
    text-align: center;
    animation: dwPop 300ms cubic-bezier(.3, 1.5, .6, 1) both;
}
.dwj-logo { display: block; width: 72px; height: 72px; margin: -2px auto 4px; transform: rotate(-8deg); -webkit-user-drag: none; }
.dwj-title {
    color: var(--heading);
    font: 400 34px/1.05 var(--display);
    letter-spacing: .01em;
    -webkit-text-stroke: 0;
}
#dwJoin[data-mode="down"] .dwj-title { color: var(--bad); }
#dwJoin[data-mode="lock"] .dwj-title, #dwJoin[data-mode="late"] .dwj-title, #dwJoin[data-mode="fillbot"] .dwj-title { color: var(--warn); }
#dwJoin[data-mode="paired"] .dwj-title { color: var(--good); }
.dwj-btns[hidden] { display: none; }
.dwj-count {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin: 12px auto 0; padding: 8px 18px 10px; width: max-content; max-width: 100%;
    background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: inset 0 2px 0 var(--well);
}
.dwj-count[hidden], .dwj-line[hidden], .dwj-dots[hidden], .dwj-btns [hidden] { display: none; }
.dwj-count-lbl { color: var(--text2); font: 700 14px/1 var(--ui); letter-spacing: .04em; }
.dwj-count-n {
    color: var(--heading); font: 400 44px/1 var(--display); font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 0;
}
.dwj-line { margin: 12px 4px 0; color: var(--text); font: 600 14px/1.4 var(--ui); }
.dwj-dots { display: flex; justify-content: center; gap: 7px; height: 12px; margin-top: 14px; }
.dwj-dots i {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--copper); box-shadow: 0 0 0 1px var(--copper-dk); box-sizing: border-box;
    animation: dwjDot 1.2s ease-in-out infinite;
}
.dwj-dots i:nth-child(2) { animation-delay: .15s; }
.dwj-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dwjDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dwj-dots i { animation-duration: 2.4s; } .dwj-card { animation: none; } }
.dwj-btns { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.dwj-btns .dw-btn { min-width: 132px; }
/* secondary buttons: the menu's own secondary plate */
#dwJoin .dwj-btns .dw-btn:not(.primary) {
    background: var(--btn); color: var(--heading);
    border: 1px solid var(--btn-edge);
    box-shadow: inset 0 -3px 0 var(--btn-shade), 0 2px 5px var(--cast);
}
#dwJoin .dwj-btns .dw-btn:not(.primary):hover { background: var(--btn-hover); }
#dwJoin .dwj-btns .dw-btn:not(.primary):active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--btn-shade); }
@media (max-width: 420px) { .dwj-title { font-size: 28px; } .dwj-btns .dw-btn { min-width: 0; flex: 1; } }

/* ── SOLO | DUOS and the duo party (client/account/party.js) ───────────
   The toggle is the Locker tab recipe stretched to the card; the party is
   one plate with two slots, the same ink outlines and lips as everything
   else on the menu. */
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mode-opt {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; margin: 0 0 3px; padding: 0 12px 3px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 2px 5px var(--cast);
    color: var(--text2);
    font: 400 19px/1 var(--display); letter-spacing: .04em;
    cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out, background-color 80ms, color 80ms;
}
.mode-opt:hover { color: var(--text); }
.mode-opt.on {
    background: var(--copper); color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
    transform: translateY(3px);
    box-shadow: inset 0 -2px 0 var(--copper-dk), 0 0 0 transparent;
    cursor: default;
}
.mode-count:empty { display: none; }
.mode-count {
    min-width: 22px; padding: 2px 6px 3px; box-sizing: border-box;
    border-radius: 6px; background: var(--ink); color: #fff4dc;
    font: 700 13px/1 var(--ui); text-align: center; text-shadow: none;
    font-variant-numeric: tabular-nums;
}
/* in a party but looking at Solo: a dot on Duos */
.mode-opt.has-party::after {
    content: ''; position: absolute; top: -6px; right: -6px;
    width: 12px; height: 12px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 50%; background: var(--play);
}

.duo-panel {
    margin-top: 10px; padding: 10px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 2px 5px var(--cast);
    text-align: left;
    animation: dwFade var(--dw-t2) var(--dw-ease) both;
}
.duo-panel[hidden] { display: none; }
.duo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duo-slot {
    position: relative;
    display: flex; align-items: center; gap: 8px; min-width: 0;
    height: 54px; margin: 0; padding: 0 9px 3px;
    box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk);
    color: var(--text); font: inherit; text-align: left;
}
.duo-slot.empty {
    border-style: dashed; background: transparent; box-shadow: none;
    cursor: pointer;
    transition: background-color 80ms, transform 60ms ease-out;
}
.duo-slot.empty:hover, .duo-slot.empty.open { background: var(--surface2); }
.duo-slot.empty:active { transform: translateY(2px); }
.duo-av, .duo-plus {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--emerald); color: #fff;
    font: 700 17px/1 var(--ui);
    -webkit-text-stroke: 0;
}
.duo-slot.you .duo-av { background: var(--copper); }
.duo-plus { border-style: dashed; background: transparent; color: var(--text2); -webkit-text-stroke: 0; font-size: 22px; }
.duo-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.duo-name { overflow: hidden; color: var(--heading); font: 700 15px/1.05 var(--ui); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.duo-you { color: var(--text2); font-size: 12px; }
.duo-sub { overflow: hidden; color: var(--text2); font: 700 11px/1.1 var(--ui); text-overflow: ellipsis; white-space: nowrap; }
.duo-sub.st-menu { color: var(--online); }
.duo-sub.st-playing { color: var(--in-raid, var(--gold)); }
.duo-crown {
    position: absolute; top: -7px; right: 8px;
    width: 11px; height: 11px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 2px;
    background: var(--gold); transform: rotate(45deg);
}
.duo-drawer { margin-top: 10px; padding-top: 8px; border-top: 2px dashed var(--border); animation: dwFade var(--dw-t2) var(--dw-ease) both; }
.duo-h { margin: 2px 0 6px 3px; color: var(--text2); font: 700 14px/1 var(--ui); letter-spacing: .02em; }
.duo-h + .duo-friends { margin-bottom: 8px; }
.duo-friends { display: flex; flex-direction: column; gap: 4px; max-height: 152px; overflow-y: auto; }
.duo-friend { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px 0 4px; }
.duo-dot { width: 10px; height: 10px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 50%; background: var(--text2); }
.duo-dot.st-menu { background: var(--online); }
.duo-dot.st-raid { background: var(--in-raid, var(--gold)); }
.duo-fname { overflow: hidden; color: var(--heading); font: 700 15px var(--ui); text-overflow: ellipsis; white-space: nowrap; }
.duo-fsub { color: var(--text2); font: 700 11px var(--ui); white-space: nowrap; }
.duo-friend.st-offline .duo-fname { opacity: .6; }
.duo-friend .dw-btn { min-width: 66px; }
.duo-code, .duo-join { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.duo-join { margin-top: 6px; }
.duo-lbl { flex: 1; min-width: 0; color: var(--text2); font: 700 12px/1.3 var(--ui); }
.duo-code-val {
    padding: 5px 10px 6px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--input-bg); color: var(--heading);
    font: 700 19px/1 'Ubuntu Mono', monospace; letter-spacing: .22em;
    user-select: all; -webkit-user-select: all;
}
input.dw-input.duo-code-in { width: 104px; height: 34px; padding: 0 8px; font-size: 15px; text-align: center; }
.duo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; min-height: 30px; }
.duo-note { color: var(--text2); font: 600 12px/1.35 var(--ui); }
.duo-leave { flex: none; --face-c: var(--face); color: var(--danger-text); }
.duo-leave:hover:not(:disabled) { --face-c: var(--danger); --lip-c: var(--danger-dk); color: #fff; }
.duo-fill { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font: 700 12px/1.3 var(--ui); cursor: pointer; user-select: none; }
.duo-fill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.duo-check {
    position: relative; flex: none;
    width: 20px; height: 20px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--input-bg);
    box-shadow: inset 0 2px 0 rgba(0,0,0,.08);
}
.duo-fill input:checked + .duo-check { background: var(--check); }
.duo-fill input:checked + .duo-check::after {
    content: ''; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px; box-sizing: border-box;
    border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.duo-fill input:focus-visible + .duo-check { box-shadow: 0 0 0 3px var(--copper); }
/* Friends pane: the invite-to-duo button */
.fr-duo:disabled { opacity: .35 !important; cursor: not-allowed; }
.fr-duo.on { --face: color-mix(in srgb, var(--play) 35%, var(--face)); cursor: default; }
.fr-row .fr-ic.fr-duo:not(:disabled) { opacity: 1; }
@media (max-width: 420px) {
    .duo-slots { grid-template-columns: 1fr; }
    .duo-foot { flex-wrap: wrap; }
}

/* ── In-raid notification cards (client/account/gameToasts.js) ──
   top centre under the raid clock (top set from app.js), never in the
   way: only the cards take clicks. The in-game plate: dark face, ink
   outline, hard drop, Lilita title. */
.gt-stack {
    position: fixed; left: 50%; top: 64px; z-index: 58;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: max-content; max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    pointer-events: none;
    font-family: Ubuntu, sans-serif;
}
body:not(.in-game) .gt-stack { display: none; }
.gt-card {
    pointer-events: auto;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 230px; max-width: min(360px, calc(100vw - 32px));
    box-sizing: border-box; padding: 7px 12px 9px;
    border: 1px solid var(--line); border-radius: 12px;
    background: rgba(43,37,51,0.94); color: var(--text);
    box-shadow: inset 0 1px 0 var(--bevel), 0 2px 6px var(--cast);
    animation: gtIn var(--dw-t2) var(--dw-pop) both;
}
.gt-card.click { cursor: pointer; }
.gt-card.click:hover { filter: brightness(1.08); }
.gt-card.out { animation: gtOut 170ms ease-in both; }
@keyframes gtIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gtOut { to { opacity: 0; transform: translateY(-8px) scale(.97); } }
.gt-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gt-tag {
    flex: none; padding: 1px 7px 2px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--copper); color: #fff; font: 700 11px/1.1 var(--ui); letter-spacing: .03em;
}
.gt-dm .gt-tag { background: #4ec4e8; }
.gt-invite .gt-tag { background: var(--play); }
.gt-error .gt-tag { background: var(--danger); }
.gt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 700 16px/1.15 var(--ui); letter-spacing: .02em; }
.gt-count { flex: none; color: var(--gold); font: 700 13px var(--ui); }
.gt-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12.5px/1.35 var(--ui); color: var(--text); }
.gt-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gt-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 11px 2px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--face); box-shadow: inset 0 -3px 0 var(--face-dk), 0 1px 3px var(--cast);
    color: var(--heading); font: 700 14px/1 var(--ui); letter-spacing: .02em; cursor: pointer;
    transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.gt-btn.primary { background: var(--play); box-shadow: inset 0 -3px 0 var(--play-dk), 0 1px 3px var(--cast); color: #fff; }
.gt-btn:hover { filter: brightness(1.08); }
.gt-btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--face-dk), 0 0 0 transparent; }
.gt-card kbd {
    display: inline-block; min-width: 12px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px;
    background: rgba(0,0,0,.22); color: var(--heading); font: 700 10.5px/1.45 'Ubuntu Mono', monospace; text-align: center;
}
.gt-hint { margin-left: auto; color: var(--text2); font: 600 11px var(--ui); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gt-card, .gt-card.out { animation: none; } }

/* ══ Surfaces and controls, by role ═══════════════════════════════════
   Each role has its own shape (these override the chunky styles above):
     panels      a hairline edge, a soft cast shadow, one top highlight
     keys        the coloured actions (Play, confirm, Discord): a lip in the
                 key's own darker tone that you press it down onto
     buttons     everything secondary: flat, tonal, pressed = sunk in
     segments    one track per choice (Solo|Duos, tabs), the pick raised
     icon tiles  the rail and the theme toggle
   Hover only changes colour (see the press shim above): nothing moves
   until you press. */
:root, [data-theme="dark"] {
    --btn: #3a3344;
    --btn-hover: #443c50;
    --btn-edge: #17131c;
    --btn-shade: rgba(0,0,0,.34);
    --track: rgba(0,0,0,.24);
    --tip-bg: #0f0c12;
    --panel-cast: 0 1px 2px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.7);
}
[data-theme="light"] {
    --btn: #fffbf2;
    --btn-hover: #ffffff;
    --btn-edge: #d2bd93;
    --btn-shade: rgba(120,88,34,.2);
    --track: rgba(140,104,44,.12);
    --tip-bg: #2a2016;
    --panel-cast: 0 1px 2px rgba(96,66,22,.12), 0 18px 40px -18px rgba(96,66,22,.4);
}
#ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn, .dw-igbtn,
body.in-game #homeSettingsPanel, body.in-game #homeSettingsOverlay,
body.in-game .igc, body.in-game .igc-pip, .gt-stack {
    --btn: #3a3344; --btn-hover: #443c50; --btn-edge: #17131c; --btn-shade: rgba(0,0,0,.34);
    --track: rgba(0,0,0,.24); --tip-bg: #0f0c12; --focus: rgba(224,123,46,.55);
    --panel-cast: 0 1px 2px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.7);
}

/* ── panels ── */
.startMenu, #homeSettingsPanel, #homeChangelogPanel, #contributorsPanel,
.dw-modal, #dwHub, .wl-card, .q-card, .dwj-card {
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--line-soft), var(--panel-cast);
}
.startMenu { border-radius: 18px; }
#homeSettingsPanel, #homeChangelogPanel, #contributorsPanel, .dw-modal, .wl-card { border-radius: 16px; }
#dwHub { border-radius: 16px; }
.hub-head { border-bottom: 1px solid var(--line); border-radius: 15px 15px 0 0; padding: 12px 12px 11px 20px; }
#dwHub.has-notch::before { border-top: 1px solid var(--line); border-left: 1px solid var(--line); top: -10px; width: 18px; height: 18px; }
.dw-modal-danger { border-top: 4px solid var(--danger); }
/* the quests note: a plain side card, no tape, no tilt */
.q-card { transform: none; border-radius: 14px; }
.q-card::before { display: none; }
.q-guest, .q-guest:active { transform: none; }
.q-bar { height: 8px; border: 0; border-radius: 4px; background: var(--track); }
.q-fill { box-shadow: none; border-radius: 4px; }
.q-foot, .duo-drawer, .wl-optional { border-top-style: solid; border-top-width: 1px; }
.q-foot { border-top-color: var(--line); }
#contributorsPanel .credit-card, #contributorsPanel .credit-card:nth-child(2), #contributorsPanel .credit-card:nth-child(3) { transform: none; border-width: 1px; }
.toast { border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--line-soft), 0 10px 24px -10px var(--cast), 0 1px 2px var(--cast); }
.toast.dw-toast::before { border: 0; width: 9px; height: 9px; }

/* ── field labels, inputs, selects: recessed wells ── */
.field-label { font: 700 11.5px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; padding-left: 2px; }
#playerNameInput, #acctNameBox, .region-dropdown-trigger, input.dw-input, #homeSettingsPanel select, .duo-code-val {
    border: 1px solid var(--line);
    background-color: var(--input-bg);
    box-shadow: inset 0 2px 3px var(--well);
}
#playerNameInput, #acctNameBox, .region-dropdown-trigger { border-radius: 11px; height: 46px; }
#playerNameInput:focus, input.dw-input:focus { border-color: var(--copper); box-shadow: inset 0 2px 3px var(--well), 0 0 0 3px var(--focus); }
input.dw-input.bad { border-color: var(--danger); box-shadow: inset 0 2px 3px var(--well), 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent); }
.region-dropdown-trigger { font: 600 14px var(--ui); }
.region-dropdown-trigger:hover, .region-dropdown.open .region-dropdown-trigger { background-color: var(--input-bg); border-color: color-mix(in srgb, var(--copper) 55%, var(--line)); }
.region-dropdown-arrow { color: var(--text2); stroke-width: 2.4; }
.region-dropdown-menu { border-color: var(--line); border-radius: 12px; box-shadow: var(--panel-cast); }
.region-dropdown.open .region-dropdown-menu { border-width: 1px; }
.region-option { font: 600 14px var(--ui); letter-spacing: 0; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.region-option .region-count { font: 600 13px var(--ui); color: var(--text2); }
.region-option.selected .region-name { color: var(--copper); }
#acctNameBox { font: 700 15px var(--ui); }
#homeSettingsPanel select { border-radius: 9px; font: 600 12.5px var(--ui); }
#homeSettingsPanel select:hover { border-color: color-mix(in srgb, var(--copper) 55%, var(--line)); }

/* checkboxes */
.checkmark { width: 14px; height: 14px; top: -1px; border: 1px solid var(--line); border-radius: 4px; box-shadow: inset 0 1px 2px var(--well); box-sizing: border-box; }
.container { padding-left: 21px; font: 500 12.5px var(--ui); }
.container:hover input ~ .checkmark { transform: none; border-color: var(--copper); }
.container input:checked ~ .checkmark { box-shadow: none; }
.container .checkmark::after { left: 4px; top: 1px; width: 3px; height: 7px; border-color: #fff; }
.duo-check { border-width: 1px; box-shadow: inset 0 1px 2px var(--well); border-radius: 5px; }

/* ── buttons: flat and tonal. Pressed = sunk in, not pushed off a lip ── */
.dw-btn, #tutorialButton, .wl-opt, .fr-ic, .fr-back, .gt-btn, .q-guest, .dw-igbtn, #ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn {
    --face-c: var(--btn);
    --lip-c: var(--btn-edge);
    border: 1px solid var(--btn-edge);
    background: var(--face-c);
    box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 0 var(--btn-shade), 0 3px 8px -4px var(--cast);
    color: var(--heading);
    text-shadow: none;
    letter-spacing: .01em;
    transition: transform 60ms ease-out, box-shadow 80ms ease-out, background-color 80ms, border-color 80ms, filter 80ms;
}
.dw-btn, .wl-opt, .fr-ic, .fr-back, .gt-btn, .q-guest { margin-bottom: 0; padding-bottom: 0; }
.dw-btn { font: 600 14px/1 var(--ui); height: 38px; border-radius: 10px; }
.dw-btn .dw-ic { width: 18px; height: 18px; }
.dw-btn.block { height: 48px; font: 700 16px/1 var(--ui); border-width: 1px; border-radius: 12px; }
:is(.dw-btn, #tutorialButton, .wl-opt, .fr-ic, .fr-back, .gt-btn, .q-guest, .dw-igbtn, #ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn):hover:not(:disabled) {
    background-color: var(--btn-hover);
    filter: none;
}
:is(.dw-btn, #tutorialButton, .wl-opt, .fr-ic, .fr-back, .gt-btn, .q-guest, .dw-igbtn, #ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn):active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px var(--well), 0 0 0 transparent;
}
.dw-btn.done { --face-c: color-mix(in srgb, var(--play) 22%, var(--btn)); }
.dw-btn.danger-outline, .duo-leave { --face-c: var(--btn); color: var(--danger-text); }
.dw-btn.danger-outline:hover:not(:disabled), .duo-leave:hover:not(:disabled) { --face-c: var(--btn); background-color: color-mix(in srgb, var(--danger) 12%, var(--btn)); border-color: color-mix(in srgb, var(--danger) 45%, var(--btn-edge)); color: var(--danger-text); }
#tutorialButton { height: 42px; margin-top: 10px; border-radius: 11px; font: 700 15px/1 var(--ui); }
#tutorialButton b { font-weight: 700; top: 0; }
.fr-ic { width: 34px; height: 32px; border-radius: 9px; }
.fr-ic .dw-ic { width: 19px; height: 19px; }
.gt-btn { height: 28px; border-radius: 8px; font: 600 13px/1 var(--ui); }
.dw-igbtn, #ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, #ingameFullscreenBtn { padding-bottom: 0; border-radius: 11px; font: 700 14px/1 var(--ui); }
.dw-igbtn { padding: 0 16px; }
#ingameChatModeBtn { padding: 0 14px; }
.wl-opt { height: 46px; border-radius: 12px; font: 700 15px/1 var(--ui); }
.wl-opt > .dw-ic { width: 20px; height: 20px; }

/* ── keys: the coloured actions keep a lip, in their own darker tone ── */
#startButton, .dw-btn.primary, .dw-btn.danger, .dw-btn.discord, .dw-btn.accent-fill,
.wl-opt-guest, .wl-opt-discord, .gt-btn.primary, .dw-igbtn.accent, .dw-igbtn.play:not(:disabled), .dw-toast-act {
    border: 1px solid var(--lip-c);
    background-color: var(--face-c);
    background-image: linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,0) 55%);
    box-shadow: inset 0 -4px 0 var(--lip-c), inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px -4px var(--cast);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.22);
    padding-bottom: 4px;
}
.dw-btn.primary { --face-c: var(--play); --lip-c: var(--play-dk); }
.dw-btn.danger { --face-c: var(--danger); --lip-c: var(--danger-dk); }
.dw-btn.discord, .wl-opt-discord { --face-c: var(--discord); --lip-c: var(--discord-dk); --ic-discord: #fff; }
.dw-btn.accent-fill, .dw-igbtn.accent, .dw-toast-act { --face-c: var(--copper); --lip-c: var(--copper-dk); }
.gt-btn.primary, .wl-opt-guest, .dw-igbtn.play:not(:disabled) { --face-c: var(--play); --lip-c: var(--play-dk); }
.dw-igbtn.play:not(:disabled) { border-radius: 14px; padding-bottom: 5px; text-shadow: 0 2px 0 color-mix(in srgb, var(--play-dk) 80%, #000); box-shadow: inset 0 -5px 0 var(--lip-c), inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -6px color-mix(in srgb, var(--play-dk) 70%, transparent); }
:is(#startButton, .dw-btn.primary, .dw-btn.danger, .dw-btn.discord, .dw-btn.accent-fill, .wl-opt-guest, .wl-opt-discord, .gt-btn.primary, .dw-igbtn.accent, .dw-toast-act):hover:not(:disabled) {
    background-color: var(--face-c);
    filter: brightness(1.06);
}
:is(#startButton, .dw-btn.primary, .dw-btn.danger, .dw-btn.discord, .dw-btn.accent-fill, .wl-opt-guest, .wl-opt-discord, .gt-btn.primary, .dw-igbtn.accent, .dw-igbtn.play, .dw-toast-act):active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: inset 0 -1px 0 var(--lip-c), inset 0 2px 3px rgba(0,0,0,.12), 0 0 0 transparent;
}
.dw-toast-act { height: 26px; border-radius: 7px; font: 600 13px/1 var(--ui); padding-bottom: 3px; box-shadow: inset 0 -3px 0 var(--lip-c), inset 0 1px 0 rgba(255,255,255,.28); }
/* PLAY: the biggest key on the screen */
#startButton, #startButton:hover, #startButton:active { --face-c: var(--play); --lip-c: var(--play-dk); border: 1px solid var(--play-dk); background-color: var(--play); }
#startButton { height: 70px; border-radius: 15px; box-shadow: inset 0 -6px 0 var(--play-dk), inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px color-mix(in srgb, var(--play-dk) 70%, transparent); }
#startButton, #startButton:hover, #startButton:active { height: 70px; }
#startButton:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--play-dk), inset 0 2px 4px rgba(0,0,0,.14), 0 0 0 transparent; }
#startButton b { top: -2px; -webkit-text-stroke: 0; text-shadow: 0 2px 0 color-mix(in srgb, var(--play-dk) 80%, #000); letter-spacing: .02em; }
.wl-opt-guest { height: 58px; border-radius: 14px; font: 400 27px/1 var(--display); letter-spacing: .02em; text-shadow: 0 2px 0 color-mix(in srgb, var(--play-dk) 80%, #000); box-shadow: inset 0 -5px 0 var(--lip-c), inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -6px color-mix(in srgb, var(--play-dk) 70%, transparent); }
.wl-opt-guest > .dw-ic { width: 24px; height: 24px; --ink: transparent; }
.wl-opt-discord > .dw-ic { --ink: transparent; }

/* the "new? start here" sticker: a small flat tag */
.tut-badge { top: -9px; right: -6px; padding: 3px 7px; border: 0; border-radius: 6px; font: 700 11px/1 var(--ui); letter-spacing: .01em; color: #2a1d06; box-shadow: 0 2px 5px -1px var(--cast); transform: rotate(3deg); animation: none; }

/* ── segments: one track, the pick raised out of it ── */
.mode-toggle, .lk-tabs, .wl-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--track);
    box-shadow: inset 0 1px 2px var(--well);
}
.lk-tabs { display: inline-grid; grid-auto-columns: auto; }
.mode-opt, .lk-tab, .wl-tab {
    height: 38px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--text2);
    font: 700 14.5px/1 var(--ui);
    letter-spacing: .01em;
    text-shadow: none;
    transform: none;
    transition: background-color 90ms, color 90ms, box-shadow 90ms;
}
.lk-tab { height: 34px; font-size: 14px; }
.mode-opt:hover, .lk-tab:hover, .wl-tab:hover { color: var(--heading); background: color-mix(in srgb, var(--btn) 45%, transparent); }
.mode-opt.on, .lk-tab.on, .wl-tab.active {
    background: var(--btn);
    color: var(--heading);
    text-shadow: none;
    transform: none;
    box-shadow: 0 1px 0 var(--btn-shade), 0 2px 6px -2px var(--cast);
}
/* Solo | Duos is the one choice that decides the match: its pick is lit */
.mode-opt { height: 40px; font-size: 15.5px; }
.mode-opt.on { background: var(--copper); color: #fff; box-shadow: inset 0 -3px 0 var(--copper-dk), 0 2px 6px -2px var(--cast); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.mode-count, .lk-count { min-width: 20px; padding: 3px 6px; border-radius: 6px; font: 700 12px/1 var(--ui); background: color-mix(in srgb, var(--text2) 22%, transparent); color: var(--text); }
.mode-opt.on .mode-count { background: rgba(0,0,0,.22); color: #fff; }
.lk-tab.on .lk-count { background: color-mix(in srgb, var(--copper) 22%, transparent); color: var(--heading); }
.mode-opt.has-party::after { border-width: 2px; border-color: var(--surface); top: -4px; right: -4px; }

/* settings / what's new tabs: an underline */
.sp-tabs, .cl-tabs { border-bottom: 1px solid var(--line); gap: 2px; }
.sp-tab, .cl-tab {
    top: 1px;
    padding: 8px 10px 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: 600 13.5px var(--ui);
    letter-spacing: 0;
    box-shadow: none;
}
.sp-tab.active, .cl-tab.active { background: transparent; color: var(--heading); border: 0; box-shadow: inset 0 -2px 0 var(--copper); }
.sp-label { font: 700 11.5px var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--copper); margin: 16px 0 8px; }

/* ── close: a quiet icon button that only turns red when you mean it ── */
.hub-close, .wl-x, #homeSettingsClose, #homeChangelogClose, #contributorsPanel .cl-header button {
    --ink: transparent;
    --ic-x: var(--text2);
    width: 34px; height: 34px;
    margin: 0; padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--text2);
    font: 500 17px/1 var(--ui);
    -webkit-text-stroke: 0;
    transition: background-color 80ms, color 80ms, border-color 80ms, transform 60ms ease-out;
}
.hub-close .dw-ic, .wl-x .dw-ic { width: 22px; height: 22px; }
:is(.hub-close, .wl-x, #homeSettingsClose, #homeChangelogClose, #contributorsPanel .cl-header button):hover {
    --ic-x: #fff; color: #fff; background: var(--danger); border-color: var(--danger-dk);
}
:is(.hub-close, .wl-x, #homeSettingsClose, #homeChangelogClose, #contributorsPanel .cl-header button):active {
    transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}

/* ── icon tiles: the left rail and the theme toggle ── */
#themeToggleBtn, #homeSettingsBtn, #homeChangelogBtn, #homeSidebar .social-btn {
    width: 48px; height: 48px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 1px var(--cast), 0 8px 18px -12px var(--cast);
    transition: background-color 80ms, transform 60ms ease-out, box-shadow 80ms;
}
:is(#themeToggleBtn, #homeSettingsBtn, #homeChangelogBtn, #homeSidebar .social-btn):hover {
    background: var(--btn-hover); border-color: var(--line);
    box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 1px var(--cast), 0 8px 18px -12px var(--cast);
}
:is(#themeToggleBtn, #homeSettingsBtn, #homeChangelogBtn, #homeSidebar .social-btn):active {
    transform: translateY(1px); box-shadow: inset 0 2px 4px var(--well);
}
#homeSidebar .dw-ic, #themeToggleBtn .dw-ic { width: 24px; height: 24px; }
/* rail tiles: a crisp edge so they don't wash into the background; the
   brand marks (Discord, YouTube) are flat, as the brands draw them */
#themeToggleBtn, #homeSettingsBtn, #homeChangelogBtn, #homeSidebar .social-btn { border: 1.5px solid var(--ink-line, rgba(27, 21, 16, .28)); }
[data-theme="dark"] :is(#themeToggleBtn, #homeSettingsBtn, #homeChangelogBtn, #homeSidebar .social-btn) { border-color: rgba(255, 255, 255, .16); }
#homeSidebar .social-btn .dw-ic { --ic-sw: 0; }
/* the guest quests pill: even padding so the icon and text sit centred */
.q-guest { padding: 9px 14px; line-height: 1; box-shadow: 0 1px 1px var(--cast), 0 6px 14px -10px var(--cast); }
.q-guest span { display: block; }
.q-guest:active { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--well); }
#homeSidebar .social-buttons::before { width: 20px; height: 1px; opacity: .5; background: var(--line); }

/* ── top nav: one bar, the open pane lit from below ── */
#menuNav {
    height: 52px;
    gap: 2px;
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 1px var(--cast), 0 10px 22px -14px var(--cast);
}
.dw-nav-btn { width: 48px; height: 40px; border: 0; border-radius: 10px; }
.dw-nav-btn .dw-ic { width: 26px; height: 26px; }
.dw-nav-btn:hover { background: var(--surface2); }
.dw-nav-btn:hover .dw-ic { transform: translateY(-1px); }
.dw-nav-btn:active { transform: translateY(1px); }
.dw-nav-btn.active, .dw-nav-btn.active:hover {
    padding-bottom: 0;
    border: 0;
    background: color-mix(in srgb, var(--copper) 17%, transparent);
    box-shadow: inset 0 -3px 0 var(--copper);
}
.dw-nav-btn[data-pane="play"].active { background: color-mix(in srgb, var(--play) 20%, transparent); box-shadow: inset 0 -3px 0 var(--play); }
.dw-nav-btn[data-pane="play"].active .dw-ic { --ic-play: var(--play); }
.dw-nav-btn[data-pane="play"]::after { border-left: 1px solid var(--line); right: -7px; top: 9px; bottom: 9px; }
.dw-nav-btn[data-pane="play"] { margin-right: 10px; }
.dw-nav-btn > span:not(.dw-nav-count) {
    top: calc(100% + 11px);
    padding: 5px 9px;
    border: 0;
    border-radius: 7px;
    background: var(--tip-bg);
    color: #f6efe2;
    font: 600 12.5px/1 var(--ui);
    letter-spacing: .01em;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.5);
}
.dw-nav-btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; }

/* ── account chip: a readout on the same bar height ── */
#accountChip {
    height: 52px;
    padding: 0 8px 0 7px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 1px var(--cast), 0 10px 22px -14px var(--cast);
    transition: background-color 80ms, transform 60ms ease-out;
}
#accountChip:hover { background: var(--btn-hover); box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 1px var(--cast), 0 10px 22px -14px var(--cast); }
#accountChip:active, #accountChip.active { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--well); }
.ac-name { font: 700 14.5px/1.1 var(--ui); letter-spacing: 0; }
.ac-sub { font: 500 11.5px/1.15 var(--ui); }
.ac-dust { height: 32px; padding: 0 11px 0 18px; border-radius: 9px; font: 700 14px/1 var(--ui); letter-spacing: .01em; background: var(--tip-bg); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.dw-av { border-width: max(1.5px, calc(var(--sz) * .07)) !important; }

/* ── duo party: two tonal slots ── */
.duo-panel { border: 1px solid var(--line); border-radius: 13px; background: var(--track); box-shadow: inset 0 1px 2px var(--well); }
.duo-slot { height: 52px; padding: 0 10px; border: 1px solid var(--btn-edge); border-radius: 10px; background: var(--btn); box-shadow: 0 1px 0 var(--btn-shade); }
.duo-slot.empty { border: 1px dashed color-mix(in srgb, var(--text2) 55%, transparent); background: transparent; box-shadow: none; }
.duo-av, .duo-plus { width: 30px; height: 30px; border-width: 1.5px; font: 700 15px/1 var(--ui); }
.duo-plus { border-color: color-mix(in srgb, var(--text2) 60%, transparent); }
.duo-name, .duo-fname { letter-spacing: 0; font-size: 14px; }
.duo-drawer { border-top-color: var(--line); }

/* ── welcome gate ── */
.wl-or { font: 600 12px var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.wl-or::before, .wl-or::after { border-top: 1px solid var(--line); }
.wl-badge { transform: none; border-width: 1px; }
.wl-code { border: 1.5px dashed var(--line); }
.wl-back { font: 600 14px var(--ui); }

/* ── small odds and ends ── */
.dw-link, .menu-credits .contrib-link { font-weight: 600; }
.menu-credits { font: 400 12px var(--ui); }
.menu-credits .dev-by b { font-weight: 600; }
.kb-row { border-radius: 8px; }
.kb-row b { border-radius: 5px; box-shadow: 0 1px 0 var(--btn-shade); }
#homeChangelogPanel #patchNotes > div { border-width: 1px; border-left-width: 4px; border-radius: 6px 10px 10px 6px; }
/* icon outlines: a fine keyline, not a sticker border (index.html sprite) */
.dw-ic { --ic-sw: 2; }
/* plates inside panels: no lip, just the top highlight */
.as-profile, .pf-top, .lk-bar, .igc-toast { box-shadow: inset 0 1px 0 var(--line-soft); }
.pf-top { border-radius: 14px; }
.pf-stat, .pf-tier { border-radius: 11px; }
/* cards lift on hover, no wobble */
.shop-grid .shop-card:nth-child(odd):hover, .shop-grid .shop-card:nth-child(even):hover { transform: translateY(-2px); }
.shop-card { box-shadow: 0 1px 2px var(--cast), 0 6px 14px -8px var(--cast); }
.shop-card:hover { box-shadow: 0 1px 2px var(--cast), 0 10px 20px -10px var(--cast); }
.shop-grid .shop-card:active { transform: translateY(1px); box-shadow: 0 1px 1px var(--cast); }
.lk-tile { box-shadow: 0 1px 2px var(--cast), 0 6px 14px -8px var(--cast); }
.lk-tile:hover { box-shadow: 0 1px 2px var(--cast), 0 10px 20px -10px var(--cast); }
.lk-tile:active { transform: translateY(1px); }
.lk-tile.sel { box-shadow: 0 0 0 2px var(--hub-bg), 0 0 0 4px var(--copper); }

/* ── invites: the Invite tile left of the account chip (invite.js sets
   its right edge from the chip's width) and the invite panel ── */
#inviteBtn {
    position: fixed;
    top: var(--bar-top); right: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap) + 200px);
    z-index: 310;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 52px;
    margin: 0;
    padding: 0 14px 0 11px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 1px var(--cast), 0 10px 22px -14px var(--cast);
    color: var(--heading);
    font: 600 14.5px/1 var(--ui);
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color 80ms, transform 60ms ease-out;
    animation: dwFade var(--dw-t2) var(--dw-ease) both;
}
#inviteBtn .dw-ic { width: 26px; height: 26px; }
#inviteBtn:hover { background: var(--btn-hover); }
#inviteBtn:active, #inviteBtn.active { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--well); }
#inviteBtn:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; }
#inviteBtn:active::after { content: ''; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -4px; z-index: -1; }
/* no room beside the chip: an icon tile under the theme toggle */
#inviteBtn.stacked { top: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap)); right: var(--bar-top); width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 13px; }
#inviteBtn.stacked .ib-label { display: none; }
@media (max-width: 1000px) { #inviteBtn .ib-label { display: none; } #inviteBtn { padding: 0 12px; } }
html[data-acct="new"] #inviteBtn, html.dw-wl-open #inviteBtn { visibility: hidden; }
body.in-game #inviteBtn { display: none !important; }
body:has(#homeSettingsPanel.open, #homeChangelogPanel.open, #contributorsPanel.open) #inviteBtn { z-index: 298; }

.dw-modal.dw-invite { width: 440px; }
.iv-body { display: flex; flex-direction: column; gap: 14px; }
.iv-loading, .iv-err { padding: 26px 0; color: var(--text2); font: 600 14px var(--ui); text-align: center; }
.iv-err { color: var(--danger-text); }

.iv-link { display: flex; align-items: center; gap: 8px; }
.iv-link-in {
    flex: 1;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--heading);
    font: 700 14px 'Ubuntu Mono', monospace;
    letter-spacing: .02em;
    outline: none;
}
.iv-link-in:focus { border-color: var(--copper); border-style: solid; }
.iv-copy { min-width: 88px; height: 42px; margin: 0; }
.iv-copy.copied { --face-c: var(--play); --lip-c: var(--play-dk); }

.iv-progress { padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: inset 0 1px 0 var(--line-soft); }
.iv-count { display: flex; align-items: baseline; gap: 8px; }
.iv-count-n { color: var(--heading); font: 400 34px/1 var(--display); }
.iv-count-t { color: var(--heading); font: 700 16px var(--ui); }
.iv-count-sub { margin-top: 3px; color: var(--text2); font: 500 12px var(--ui); }
.iv-pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 11px; }
.iv-pip { position: relative; height: 10px; border-radius: 5px; background: var(--track); box-shadow: inset 0 1px 2px var(--well); }
.iv-pip.on { background: var(--copper); box-shadow: inset 0 -2px 0 var(--copper-dk); }
.iv-pip.goal.on { background: var(--gold); box-shadow: inset 0 -2px 0 var(--gold-dk); }
.iv-pip-n { position: absolute; right: -1px; top: 14px; color: var(--text2); font: 700 11px/1 var(--ui); }
.iv-pip.goal.on .iv-pip-n { color: var(--heading); }
.iv-progress:has(.iv-pip-n) { padding-bottom: 24px; }

.iv-rewards { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.iv-reward { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.iv-reward + .iv-reward { border-top: 1px solid var(--line); }
.iv-rw-art {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    width: 124px; height: 48px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--dw-floor);
    line-height: 0;
}
.iv-rw-text { flex: 1; min-width: 0; }
.iv-rw-tag { color: var(--copper); font: 700 10.5px/1.2 var(--ui); letter-spacing: .07em; text-transform: uppercase; }
.iv-rw-name { margin-top: 2px; color: var(--heading); font: 700 14.5px/1.2 var(--ui); }
.iv-rw-sub { margin-top: 2px; color: var(--text2); font: 500 12px/1.35 var(--ui); }
.iv-rw-sub b { color: var(--text); }
.iv-rw-sub a { color: var(--link); font-weight: 700; }
.iv-reward:not(.on) .iv-rw-art > canvas, .iv-reward:not(.on) .iv-skin-art { opacity: .8; }
.iv-state {
    flex: none;
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: 7px;
    background: var(--track);
    color: var(--text2);
    font: 700 11.5px/1 var(--ui);
    white-space: nowrap;
}
.iv-state .dw-ic { width: 14px; height: 14px; }
.iv-state.on { background: color-mix(in srgb, var(--play) 18%, transparent); color: var(--online); }
.iv-dust { display: inline-flex; align-items: center; gap: 6px; color: #dccfff; font: 400 22px/1 var(--display); }
.iv-dust .dw-ic { width: 26px; height: 26px; }
.iv-skin-art { display: block; line-height: 0; }
.iv-skin-q {
    position: absolute; right: 22px; top: 7px;
    width: 18px; height: 18px;
    border: 1.5px solid #0c0a0e;
    border-radius: 50%;
    background: var(--gold);
    color: #2a1d06;
    font: 700 12px/15px var(--ui);
    text-align: center;
}

.iv-sec-h { margin: 0 0 6px 2px; color: var(--text2); font: 700 11.5px var(--ui); letter-spacing: .07em; text-transform: uppercase; }
.iv-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.iv-friend { display: flex; align-items: center; gap: 9px; padding: 7px 10px; }
.iv-friend + .iv-friend { border-top: 1px solid var(--line); }
.iv-f-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 700 13.5px var(--ui); }
.iv-f-st { flex: none; padding: 4px 7px; border-radius: 6px; font: 700 11px/1 var(--ui); white-space: nowrap; }
.iv-f-st.ok { background: color-mix(in srgb, var(--play) 18%, transparent); color: var(--online); }
.iv-f-st.wait { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--heading); }
.iv-f-st.no { background: var(--track); color: var(--text2); }
.iv-fine { color: var(--text2); font: 500 11.5px/1.45 var(--ui); }

.iv-guest { padding: 14px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface); text-align: center; }
.iv-guest-t { color: var(--heading); font: 700 15.5px/1.3 var(--ui); }
.iv-guest-p { margin-top: 3px; color: var(--text2); font: 500 12.5px var(--ui); }
@media (max-width: 480px) { .iv-rw-art { width: 96px; } }

/* ── Fullscreen buttons (home.js dwFullscreen, app.js in game) ── */
#homeFullscreenBtn[hidden] { display: none; }
/* social-btn look, but keep the ink outline: the glyph is thin lines */
#homeSidebar #homeFullscreenBtn .dw-ic { --ic-sw: 2; }
.dw-fs-toggle .fs-off, html.dw-fs .dw-fs-toggle .fs-on { display: none; }
html.dw-fs .dw-fs-toggle .fs-off { display: inline; }
#ingameFullscreenBtn { width: 42px; }
#ingameFullscreenBtn .dw-ic { width: 24px; height: 24px; }

/* ── Framed on a portal (index.html sets html.dw-embed) ── */
.wl-embed-note { display: none; margin-top: 12px; color: var(--text2); font: 600 12px/1.4 var(--ui); text-align: center; }
html.dw-embed #dwWelcome:not(.wl-offline) .wl-embed-note { display: block; }

/* ── Feedback (client/account/feedback.js): a rail button and a small modal ── */
/* social-btn look, but keep the ink outline like the settings / news icons */
#homeSidebar #homeFeedbackBtn .dw-ic { --ic-sw: 2; }
.fb-modal { width: 400px; }
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-btn.fb-chip { height: 32px; padding: 0 12px 3px; border-radius: 9px; font-size: 14px; }
.dw-btn.fb-chip.on { --face-c: var(--copper); --lip-c: var(--copper-dk); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.fb-field { position: relative; display: block; }
textarea.dw-input.fb-text {
    display: block;
    width: 100%;
    min-height: 118px;
    max-height: 40vh;
    margin: 0;
    padding: 10px 13px 22px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--input-bg);
    box-shadow: inset 0 2px 3px var(--well);
    color: var(--input-fg);
    font: 600 14px/1.45 var(--ui);
    resize: vertical;
    outline: 0;
    -webkit-user-select: text;
    user-select: text;
}
textarea.dw-input.fb-text::placeholder { color: var(--text2); opacity: .7; font-weight: 500; }
textarea.dw-input.fb-text:focus { border-color: var(--copper); box-shadow: inset 0 2px 3px var(--well), 0 0 0 3px var(--focus); }
.fb-count { position: absolute; right: 10px; bottom: 6px; color: var(--text2); font: 600 11px var(--ui); opacity: .75; pointer-events: none; }
.fb-count.near { color: var(--danger-text, var(--danger)); opacity: 1; }
.fb-attach { display: flex; align-items: flex-start; gap: 8px; color: var(--text2); font: 500 12px/1.45 var(--ui); cursor: pointer; }
.fb-attach-box { flex: none; width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--copper); cursor: pointer; }
.fb-thanks { text-align: center; }
.fb-thanks .dw-modal-actions { justify-content: center; }
.fb-thanks-ic .dw-ic { width: 44px; height: 44px; margin: 2px auto 6px; }


/* ══ Phones and tablets ═════════════════════════════════════════════════
   Everything below is scoped to body.mobile (app.js sets it from the user
   agent), so desktop never sees it. The page is viewport-fit=cover, so the
   fixed chrome steps in by the safe-area insets (notch, home bar), and the
   menu card scrolls inside .mainWrapper because the body never does. */
body.mobile {
    --sa-t: env(safe-area-inset-top, 0px);
    --sa-r: env(safe-area-inset-right, 0px);
    --sa-b: env(safe-area-inset-bottom, 0px);
    --sa-l: env(safe-area-inset-left, 0px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
/* no double-tap zoom on anything you tap */
body.mobile :is(button, a, label, select, input, textarea, [role="button"], .sp-tab, .cl-tab) { touch-action: manipulation; }
/* iOS zooms in on any field under 16px when it gets focus */
body.mobile :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea),
body.mobile #playerNameInput, body.mobile input.dw-input, body.mobile #homeSettingsPanel select { font-size: 16px; }

body.mobile #themeToggleBtn { top: calc(var(--bar-top) + var(--sa-t)); right: calc(var(--bar-top) + var(--sa-r)); }
body.mobile #homeSidebar { top: calc(var(--bar-top) + var(--sa-t)); left: calc(var(--bar-top) + var(--sa-l)); }
body.mobile #menuNav { top: calc(var(--bar-top) + var(--sa-t)); }
body.mobile #accountChip { top: calc(var(--bar-top) + var(--sa-t)); right: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap) + var(--sa-r)); }
body.mobile #inviteBtn { top: calc(var(--bar-top) + var(--sa-t)); }
body.mobile #inviteBtn.stacked { top: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap) + var(--sa-t)); right: calc(var(--bar-top) + var(--sa-r)); }

/* nav icons: a full 44px square to hit with a thumb */
body.mobile .dw-nav-btn { width: 46px; height: 44px; }
/* on touch the hover tag would stick after a tap, so the icons speak for themselves */
body.mobile .dw-nav-btn > span:not(.dw-nav-count) { display: none; }

body.mobile .mainWrapper {
    height: 100vh;
    height: 100dvh;
    padding: calc(var(--bar-top) + var(--bar-h) + 6px + var(--sa-t)) calc(10px + var(--sa-r)) calc(24px + var(--sa-b)) calc(10px + var(--sa-l));
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* the old fixed heights clipped Play and Tutorial off the bottom of the card */
body.mobile .startMenu { max-height: none; max-width: 100%; box-sizing: border-box; margin-bottom: 8px; }
body.mobile .startMenuHolder, body.mobile .sliderHolder, body.mobile .startMenuSlidingContent { height: auto; }
body.mobile .sliderHolder { width: auto; }
body.mobile .startMenuHolder.mainHolder { max-width: 100%; min-width: 0; }
/* the card sits in the middle of whatever room the bars leave (auto margins,
   so a card taller than the screen still scrolls from its top) */
body.mobile .mainWrapper { display: flex; flex-direction: column; }
body.mobile #startMenuWrapper { margin: auto 0; }
body.mobile #tutorialButton { height: 46px; }
/* the credits link is tiny text; give it a taller hit area without moving it */
body.mobile .menu-credits .contrib-link { padding: 12px 4px; margin: -12px -4px; }

/* the menu's panels fit the screen and scroll inside; they keep clear of
   the notch and the home bar */
body.mobile :is(#homeSettingsPanel, #homeChangelogPanel, #contributorsPanel) {
    max-width: calc(100vw - 24px - var(--sa-l) - var(--sa-r));
    max-height: calc(100vh - 24px - var(--sa-t) - var(--sa-b));
    max-height: calc(100dvh - 24px - var(--sa-t) - var(--sa-b));
}
body.mobile #homeSettingsPanel { width: 360px; }
body.mobile #homeChangelogPanel { width: 540px; }
body.mobile #contributorsPanel { display: flex; flex-direction: column; }
body.mobile #contributorsPanel .contrib-list { max-height: none; min-height: 0; flex: 1; }
/* four tabs are wider than a phone: they scroll sideways instead of spilling */
body.mobile .cl-tabs { overflow-x: auto; scrollbar-width: none; padding-right: 14px; }
body.mobile .cl-tabs::-webkit-scrollbar { display: none; }
body.mobile .cl-tab { flex: none; white-space: nowrap; }
body.mobile :is(.sp-tab, .cl-tab) { padding-top: 14px; padding-bottom: 14px; }
/* settings rows: the whole line is the checkbox, so give each one a thumb's height */
body.mobile .sp-checks { gap: 0 8px; }
body.mobile .sp-checks .container { display: flex; align-items: center; min-height: 44px; line-height: 1.2; font-size: 14px; padding-left: 26px; }
body.mobile .sp-checks .container .checkmark { top: 50%; margin-top: -8px; width: 16px; height: 16px; box-sizing: border-box; }
body.mobile .sp-checks .container .checkmark::after { left: 5px; top: 2px; }
body.mobile #homeSettingsPanel select { min-height: 44px; }
body.mobile .mode-opt, body.mobile .region-option { min-height: 44px; }
body.mobile .wl-opt { height: 48px; }
body.mobile :is(#homeSettingsClose, #homeChangelogClose, #contributorsClose, .hub-close, .wl-x) { min-width: 44px; min-height: 44px; }
/* the hub hangs under the nav; while it is open the chip and the invite
   tile go under the dim instead of sitting on its header */
body.mobile #dwHub {
    top: calc(var(--bar-top) + var(--bar-h) + 14px + var(--sa-t));
    width: min(780px, calc(100vw - 20px - var(--sa-l) - var(--sa-r)));
    max-height: calc(100vh - var(--bar-top) - var(--bar-h) - 26px - var(--sa-t) - var(--sa-b));
    max-height: calc(100dvh - var(--bar-top) - var(--bar-h) - 26px - var(--sa-t) - var(--sa-b));
}
body.mobile:has(#dwHub.open) :is(#accountChip, #inviteBtn) { z-index: 298; }
body.mobile .dw-layer { padding: calc(12px + var(--sa-t)) calc(12px + var(--sa-r)) calc(12px + var(--sa-b)) calc(12px + var(--sa-l)); }
body.mobile .dw-modal { max-height: calc(100vh - 24px - var(--sa-t) - var(--sa-b)); max-height: calc(100dvh - 24px - var(--sa-t) - var(--sa-b)); }

/* the welcome gate keeps clear of the notch and home bar too */
body.mobile .wl-legal a { display: inline-block; padding: 10px 2px; margin: -10px 0; }
body.mobile #dwWelcome { padding: calc(16px + var(--sa-t)) calc(12px + var(--sa-r)) calc(16px + var(--sa-b)) calc(12px + var(--sa-l)); overscroll-behavior: contain; }

/* ── phone held upright ── */
@media (max-width: 560px) {
    body.mobile .startMenu { width: auto; padding: 10px 12px 16px; }
    body.mobile .startMenuHolder.mainHolder { width: auto; flex: 1 1 auto; margin: 6px 2px; }
    /* nav top left, account chip under it, the rail along the bottom */
    body.mobile #menuNav { left: calc(var(--bar-top) + var(--sa-l)); transform: none; padding: 0 3px; }
    body.mobile .dw-nav-btn { width: 44px; }
    body.mobile .dw-nav-btn[data-pane="play"] { margin-right: 8px; }
    body.mobile .dw-nav-btn[data-pane="play"]::after { right: -5px; }
    body.mobile #accountChip { top: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap) + var(--sa-t)); right: auto; left: calc(var(--bar-top) + var(--sa-l)); }
    body.mobile #homeSidebar {
        top: auto; bottom: calc(var(--bar-top) + var(--sa-b));
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }
    body.mobile #homeSidebar .social-buttons { flex-direction: row; }
    body.mobile #homeSidebar .social-buttons::before { width: 1px; height: 20px; }
    body.mobile .mainWrapper {
        padding-top: calc(var(--bar-top) + 2 * var(--bar-h) + var(--bar-gap) + 12px + var(--sa-t));
        padding-bottom: calc(48px + 2 * var(--bar-top) + 8px + var(--sa-b));
    }
    body.mobile .game-title { font-size: 40px; margin: 4px 0 2px; }
    body.mobile .menu-row { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
}

/* ── phone on its side: the card goes wide and splits in two, fields on
   the left and Play on the right, so it all fits under the nav ── */
@media (orientation: landscape) and (max-height: 500px) {
    body.mobile .mainWrapper { padding-top: calc(var(--bar-top) + var(--bar-h) + 8px + var(--sa-t)); padding-bottom: calc(12px + var(--sa-b)); }
    body.mobile .startMenu { margin-top: 0; padding: 8px 14px 12px; }
    body.mobile .startMenuHolder.mainHolder { width: min(560px, calc(100vw - 180px - var(--sa-l) - var(--sa-r))); margin: 4px 6px; }
    body.mobile .startMenuSlidingContent {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
    }
    body.mobile .startMenuSlidingContent > * { grid-column: 1; }
    body.mobile .startMenuSlidingContent > .game-title,
    body.mobile .startMenuSlidingContent > .menu-credits { grid-column: 1 / -1; }
    body.mobile .startMenuSlidingContent > .game-title { grid-row: 1; font-size: 34px; margin: 2px 0 0; }
    /* Play lines up with the fields, so a tall duo party never pushes it down */
    body.mobile .startMenuSlidingContent > .startButtonHolder { grid-column: 2; grid-row: 2 / span 5; margin-top: 26px; }
    /* with the Raid Night card on top, the card lines up with the labels instead */
    body.mobile .startMenuSlidingContent > .startButtonHolder:has(> .ev-card:not([hidden])) { margin-top: 8px; }
    body.mobile .ev-card { padding: 7px 10px 8px; margin-bottom: 8px; }
    body.mobile .ev-title { font-size: 17px; }
    body.mobile .ev-blurb { margin-top: 3px; font-size: 11.5px; }
    body.mobile .ev-links { margin-top: 4px; }
    body.mobile .startButtonHolder:has(> .ev-card:not([hidden])) #startButton { height: 56px; }
    body.mobile .region-dropdown-menu { position: absolute; }
    body.mobile .duo-slots { grid-template-columns: 1fr; }
    body.mobile .game-logo { width: 44px; height: 44px; }
    body.mobile .menu-row { margin-top: 8px; gap: 8px; }
    body.mobile .field-label { font-size: 12px; }
    body.mobile .menu-field { gap: 3px; }
    body.mobile .mobile-note { margin: 8px 0 0; font-size: 11.5px; }
    body.mobile .a2hs-tip { margin-top: 6px; font-size: 11.5px; }
    body.mobile .menu-credits { margin-top: 10px; }
    body.mobile #startButton { height: 64px; }

    /* welcome card: emblem and wordmark share a line */
    body.mobile #wlChoose { flex-flow: row wrap; justify-content: center; align-items: center; column-gap: 4px; }
    body.mobile #wlChoose > :not(.wl-logo):not(.wl-title) { flex-basis: 100%; }
    body.mobile .wl-card { width: 420px; padding: 14px 20px 14px; }
    body.mobile .wl-logo { width: 52px; height: 52px; margin: -4px 0; }
    body.mobile .wl-title { margin-bottom: 10px; }
    body.mobile .wl-sub { margin-top: 4px; }
    body.mobile .wl-title .wordmark.sm { font-size: 36px; }
    body.mobile .wl-opts { gap: 8px; }
    body.mobile .wl-opt-guest { height: 56px; }

    /* feedback: a shorter box so Send is on screen without scrolling */
    body.mobile textarea.dw-input.fb-text { height: 92px; min-height: 92px; }

    /* hub: a slimmer header leaves more room for the pane */
    body.mobile .hub-head { padding: 4px 8px 4px 18px; }
    body.mobile .hub-title { font-size: 22px; }
    body.mobile .hub-body { padding-top: 12px; }
    body.mobile .wl-legal { margin-top: 10px; }
}

/* ── Save & leave (saveCode.js) ─────────────────────────────────────────
   The countdown sits top centre over the canvas, in the in-game palette;
   the code modal is the menu's own modal. */
#dwSaveBar {
    position: fixed;
    top: 64px;
    left: 50%;
    z-index: 32;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 10px;
    border: 1px solid #120e16;
    border-radius: 14px;
    background: #2b2533;
    box-shadow: inset 0 -4px 0 #1e1924, 0 3px 8px rgba(0,0,0,.45);
    color: #fff3d9;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity .15s ease-out, transform .15s ease-out;
}
#dwSaveBar.show { opacity: 1; transform: translate(-50%, 0); }
#dwSaveBar .sv-ring { width: 44px; height: 44px; flex-shrink: 0; transform: rotate(-90deg); }
#dwSaveBar .sv-ring circle { fill: none; stroke-width: 4.5; }
#dwSaveBar .sv-ring-bg { stroke: #1e1924; }
#dwSaveBar .sv-ring-fg { stroke: #4fcf5c; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
#dwSaveBar .sv-ring-n { transform: rotate(90deg); transform-origin: 20px 20px; fill: #fff3d9; font: 400 15px 'Lilita One', Rubik, sans-serif; }
#dwSaveBar .sv-txt { display: flex; flex-direction: column; gap: 3px; }
#dwSaveBar .sv-txt b { font: 400 19px/1 'Lilita One', Rubik, sans-serif; letter-spacing: .02em; }
#dwSaveBar .sv-sub { font: 500 12px/1.2 Rubik, Ubuntu, sans-serif; color: #a597b0; }
body.mobile #dwSaveBar { top: calc(max(8px, env(safe-area-inset-top)) + 56px); }
.sv-modal { text-align: center; }
.sv-code {
    margin: 4px 0 12px;
    padding: 14px 8px;
    background: var(--input-bg);
    border: 3px dashed var(--ink);
    border-radius: 12px;
    color: var(--heading);
    font: 700 17px/1.35 'Ubuntu Mono', monospace;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}
.sv-how { margin: 0 0 6px; font: 500 14px/1.4 var(--ui); color: var(--text); }
.sv-how b { font-family: 'Ubuntu Mono', monospace; color: var(--heading); word-break: break-all; }
.sv-note { margin: 0 0 14px; font: 500 12px/1.4 var(--ui); color: var(--text2); text-wrap: balance; }
.sv-modal .dw-modal-actions { justify-content: center; }