: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;
}

[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);
}

#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: 3px solid var(--ink);
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 4px 0 var(--ink);
    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 5px 0 var(--ink); }
#themeToggleBtn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 var(--ink); }
#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: 3px solid var(--ink);
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 4px 0 var(--ink);
    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 5px 0 var(--ink); 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 var(--ink); }
#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 Ubuntu;
}
.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 Ubuntu;
    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: 3px solid var(--ink);
    border-radius: 14px;
    color: var(--text);
    box-shadow: inset 0 0 0 2px var(--bevel), 0 6px 0 var(--ink);
    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: 3px solid var(--ink); 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 .credit-card { background: var(--surface2); border: 2px solid var(--ink); 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 Ubuntu; color: var(--text2); margin-top: 3px; }
#contributorsPanel .credit-role { font: 700 11px Ubuntu; 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: 3px solid var(--ink);
    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 0 0 2px var(--bevel), 0 6px 0 var(--ink);
}
#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; }
/* the old 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: 2.5px solid var(--ink);
    border-radius: 9px;
    background: var(--danger, #e0473b);
    box-shadow: inset 0 -4px 0 var(--danger-dk, #9c2a21), 0 3px 0 var(--ink);
    color: #fff;
    font: 700 15px/1 Ubuntu;
    -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 var(--ink); }

.sp-tabs { display: flex; padding: 0 12px; gap: 4px; border-bottom: 3px solid var(--ink); flex-shrink: 0; }
.sp-tab {
    position: relative;
    top: 3px;
    padding: 6px 12px 5px;
    font: 400 14px var(--display);
    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: 400 14px var(--display);
    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 Ubuntu;
    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 Ubuntu; 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 Ubuntu;
    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 Ubuntu; 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: 2px solid var(--ink);
    border-radius: 8px;
    padding: 7px 10px;
    font: 600 12px Ubuntu;
    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: 3px solid var(--ink);
    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 0 0 2px var(--bevel), 0 6px 0 var(--ink);
}
#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: 3px solid var(--ink);
    flex-shrink: 0;
}
.cl-tab {
    position: relative;
    top: 3px;
    padding: 6px 12px 5px;
    font: 400 14px var(--display);
    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: 2px solid var(--ink);
    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: 400 16px/1.2 var(--display);
    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 Ubuntu;
    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 Ubuntu;
    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 Ubuntu;
    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 Ubuntu;
    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 Ubuntu;
    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 Ubuntu; color: var(--text2); }
.kb-note { font: 500 10px Ubuntu; 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: 18px 16px 20px 15px;
    background: var(--surface);
    border: 3px solid var(--ink);
    overflow: visible;
    box-shadow: inset 0 0 0 3px var(--bevel), 0 7px 0 var(--ink);
    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 Ubuntu; 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 Ubuntu; margin-bottom: 4px; }
.credit-name.zyrox { color: var(--credit1); }
.credit-info { font: 500 12px Ubuntu; color: var(--text2); margin-bottom: 3px; }
.credit-info::before { content: "Discord: "; font-weight: 600; color: var(--text2); }
.credit-role { font: 600 11px Ubuntu; 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 Ubuntu;
    color: #fff;
    letter-spacing: -1px;
}
h1 {
    padding: 0 10px;
    margin: 0;
    font: 700 36px/1.3 Ubuntu;
    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: 400 14px var(--display);
    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: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: inset 0 -4px 0 var(--face-dk);
    color: var(--input-fg);
    font: 700 14px Ubuntu;
    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 4px 0 var(--ink);
    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: 400 17px var(--display);
    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 Ubuntu;
    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: 3px solid var(--ink);
    border-radius: 10px;
    padding: 9px 16px 10px 16px;
    color: var(--heading);
    font: 700 13.5px Ubuntu;
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 4px 0 var(--ink);
    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 Ubuntu;
    transition: border-color .15s;
}
input:focus { border-color: var(--border-hl); }
#playerNameInput {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    height: 48px;
    border: 3px solid var(--ink);
    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 Ubuntu;
    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 Ubuntu;
    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: 3px solid var(--ink);
    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 5px 0 var(--ink);
    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: 6px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 3px 0 var(--ink);
    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: 3px solid var(--ink); 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 6px 0 var(--ink); }
#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 var(--ink);
}
#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 Ubuntu;
    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: 2px solid var(--ink);
    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 Ubuntu; 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 Ubuntu;
    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, .dw-igbtn,
body.in-game #homeSettingsPanel, body.in-game #homeSettingsOverlay,
body.in-game .igc, body.in-game .igc-pip {
    --surface: #2b2533; --surface2: #352e3f; --panel-bg: #2b2533; --hub-bg: #2b2533;
    --border: #4b4158; --border-hl: #e07b2e;
    --text: #e9e0cc; --text2: #a597b0; --heading: #fff3d9;
    --input-bg: #1e1924; --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;
}
/* one button recipe for all of them: .dw-btn / #homeSettingsBtn */
#ingameSettingsBtn, #ingameChatModeBtn, #ingameTutorialBtn, .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: 3px solid var(--ink);
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 0 var(--ink);
    color: var(--heading);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font: 400 15px/1 var(--display);
    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, .dw-igbtn:hover { filter: brightness(1.08); }
#ingameSettingsBtn:active, #ingameChatModeBtn:active, #ingameTutorialBtn:active, .dw-igbtn:active {
    transform: translateY(3px);
    box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 var(--ink);
}
/* 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 3px 0 var(--ink); 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 var(--ink); }

/* 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: 3px solid var(--ink);
    border-radius: .9em;
    background: var(--surface);
    box-shadow: inset 0 -.25em 0 var(--face-dk), 0 .3em 0 var(--ink);
    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: 2px solid var(--ink);
    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: 2px solid var(--ink);
    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: 2px solid var(--ink);
    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: 2px solid var(--ink);
    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: 2px solid var(--ink);
    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, Ubuntu, sans-serif;
    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: 3px solid var(--ink);
    border-radius: .5em;
    background: var(--play);
    color: #fff;
    font: 400 1.05em/1 var(--display);
    -webkit-text-stroke: 4px var(--ink);
    paint-order: stroke fill;
    box-shadow: 0 .18em 0 var(--ink);
    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 .3em 0 var(--ink), 0 0 0 0 var(--play); }
    35%  { box-shadow: inset 0 -.25em 0 var(--face-dk), 0 .3em 0 var(--ink), 0 0 0 .35em var(--play); }
    100% { box-shadow: inset 0 -.25em 0 var(--face-dk), 0 .3em 0 var(--ink), 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: 3px solid var(--ink);
    border-radius: 1.1em;
    background: var(--surface);
    box-shadow: inset 0 -.3em 0 var(--face-dk), 0 .4em 0 var(--ink);
    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: 2px solid var(--ink);
    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: 7px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 .08em 0 var(--ink);
    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: 3px solid var(--ink);
    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: 3px solid var(--ink);
    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 .12em 0 var(--ink);
    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: 5px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 .07em 0 var(--ink);
    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 var(--ink); }
.dwt-menu {
    display: block;
    width: 100%;
    margin-top: .75em;
    padding: .55em 0 .62em;
    border: 3px solid var(--ink);
    border-radius: .6em;
    background: var(--face);
    box-shadow: inset 0 -.22em 0 var(--face-dk), 0 .16em 0 var(--ink);
    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 var(--ink); }
.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; }

/* ── Mobile / tablet gate ──────────────────────────────────────────────
   Covers the home screen on touch-primary devices. `hidden` keeps it out
   of the way until home.js decides the device can't play. */
#mobileGate {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--dim);
    animation: mgFade .2s ease both;
}
#mobileGate[hidden] { display: none; }

@keyframes mgFade { from { opacity: 0; } }

.mg-card {
    max-width: 340px;
    padding: 30px 26px 24px;
    text-align: center;
    background: var(--surface);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px var(--bevel), 0 6px 0 var(--ink);
}
.mg-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
}
.mg-card h2 {
    margin: 0 0 8px;
    font: 400 26px var(--display);
    letter-spacing: .01em;
    color: var(--heading);
}
.mg-card p {
    margin: 0;
    font: 400 13.5px/1.55 Rubik, Ubuntu, sans-serif;
    color: var(--text);
    opacity: .82;
}
#mobileGateOverride {
    margin-top: 20px;
    padding: 8px 4px 0;
    width: 100%;
    background: 0 0;
    border: 0;
    border-top: 2px dashed var(--border);
    font: 700 12px Ubuntu, sans-serif;
    color: var(--link);
    cursor: pointer;
    opacity: .75;
    transition: opacity .18s;
}
#mobileGateOverride:hover, #mobileGateOverride:active { opacity: 1; }

/* ── 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: 3px solid var(--ink);
    border-radius: 11px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 0 var(--ink);
    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 4px 0 var(--ink); }
#tutorialButton:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 var(--ink); }
#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: 2px solid var(--ink);
    border-radius: 7px;
    background: var(--gold);
    color: var(--ink);
    font: 400 12px/1 var(--display);
    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; }

/* toasts sit under the nav while on the menu */
/* 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: 2px solid var(--ink);
    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: 2px solid var(--ink);
    border-radius: 7px;
    background: var(--copper);
    box-shadow: inset 0 -3px 0 var(--copper-dk), 0 2px 0 var(--ink);
    color: #fff;
    font: 400 14px/1 var(--display);
    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 var(--ink); }

/* ── 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: 3px solid var(--ink);
    border-radius: 13px 15px 14px 13px;
    box-shadow: inset 0 0 0 2px var(--bevel), 0 4px 0 var(--ink);
}
.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: 2px solid var(--ink);
    border-radius: 7px;
    background: var(--ink);
    color: #fff4dc;
    font: 400 14px/1 var(--display);
    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: 3px solid var(--ink);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 4px 0 var(--ink);
    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 5px 0 var(--ink); }
#accountChip:active, #accountChip.active { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--face-dk), 0 0 0 var(--ink); }
#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: 400 16px/1.1 var(--display);
    letter-spacing: .02em;
}
.ac-sub { color: var(--text2); font: 700 11px/1.15 Ubuntu; 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: 400 15px/1 var(--display);
    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: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: inset 0 3px 0 rgba(0,0,0,.08);
    color: var(--heading);
    font: 700 15px Ubuntu;
    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: 2.5px solid var(--ink);
    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 Ubuntu;
    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 Ubuntu; }
.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: 2px solid var(--ink);
    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 Ubuntu;
}
.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: 2.5px solid var(--ink);
    border-radius: 10px;
    background: var(--face-c);
    box-shadow: inset 0 -4px 0 var(--lip-c), 0 3px 0 var(--ink);
    color: var(--heading);
    font: 400 16px/1 var(--display);
    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 var(--ink); }
.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 Ubuntu;
    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: 3px solid var(--ink);
    border-radius: 14px 16px 14px 15px;
    box-shadow: inset 0 0 0 2px var(--bevel), 0 6px 0 var(--ink);
    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 Ubuntu; }
.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: 3px solid var(--ink);
    border-radius: 16px 14px 16px 15px;
    box-shadow: inset 0 0 0 2px var(--bevel), 0 7px 0 var(--ink);
    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: 3px solid var(--ink);
    border-left: 3px solid var(--ink);
    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: 3px solid var(--ink);
    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: 2.5px solid var(--ink);
    border-radius: 9px;
    background: var(--danger);
    box-shadow: inset 0 -4px 0 var(--danger-dk), 0 3px 0 var(--ink);
    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 var(--ink); }
.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: 2.5px solid var(--ink);
    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 Ubuntu; }
.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: 2px solid var(--ink);
    color: var(--text2);
    font: 700 10.5px Ubuntu;
}
.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 Ubuntu; text-align: right; }

/* settings: one list, a row per setting */
.as-list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 2.5px solid var(--ink);
    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: 400 16px var(--display); letter-spacing: .02em; }
.as-row-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font: 700 14px Ubuntu; }
.as-row-act { display: flex; justify-content: flex-end; }
.as-row-note { color: var(--text2); font: 500 12px Ubuntu; }
.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 Ubuntu; }
.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: 2.5px solid var(--ink);
    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 Ubuntu; }
.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 Ubuntu; }
.as-linked-txt span { color: var(--online); font: 700 11px Ubuntu; }
.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: 3px solid var(--ink);
    border-radius: 18px 15px 19px 16px;
    box-shadow: inset 0 0 0 3px var(--bevel), 0 7px 0 var(--ink);
    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 Ubuntu; 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: 400 15px var(--display); 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: 3px solid var(--ink);
    border-radius: 11px;
    box-shadow: inset 0 -4px 0 var(--lip-c), 0 3px 0 var(--ink);
    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 var(--ink); }
.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 4px 0 var(--ink);
    color: #fff;
    font-size: 30px;
    -webkit-text-stroke: 5px var(--ink);
    paint-order: stroke fill;
}
.wl-opt-guest:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--lip-c), 0 0 0 var(--ink); }
.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 Ubuntu;
}
#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: 400 16px var(--display);
    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 Ubuntu; }
.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: 2.5px solid var(--ink);
    border-radius: 10px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 0 var(--ink);
    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 var(--ink);
}
.wl-tab-pill { display: none; }
.wl-foot { margin-top: 2px; text-align: center; }
.wl-note { color: var(--text2); font: 500 11.5px/1.45 Ubuntu; }
.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 Ubuntu; 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: 2.5px solid var(--ink);
    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 Ubuntu; }
.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: 3px solid var(--ink);
    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 Ubuntu;
    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: 2px solid var(--ink);
    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: 400 17px var(--display); 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 Ubuntu; }

.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 Ubuntu; }
.shop-count {
    padding: 3px 8px 4px;
    border-radius: 6px;
    background: var(--ink);
    color: #fff4dc;
    font: 400 15px/1 var(--display);
    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: 3px solid var(--ink);
    border-radius: 12px;
    box-shadow: 0 4px 0 var(--ink);
    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 7px 0 var(--ink); }
.shop-grid .shop-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); 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: 3px solid var(--ink); }
.shop-prev { display: block; line-height: 0; background: var(--dw-floor); border-bottom: 3px solid var(--ink); }
.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 Ubuntu; }
.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 Ubuntu;
}
.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: 400 15px/1 var(--display);
    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: 3px solid var(--ink); 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: 2.5px solid var(--ink); 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: 400 15px var(--display); letter-spacing: .02em; }
select.dw-input {
    height: 34px; padding: 0 10px;
    background: var(--input-bg); border: 2.5px solid var(--ink); border-radius: 8px;
    color: var(--input-fg);
    font: 700 13px Ubuntu;
    cursor: pointer;
}
.shop-minfo { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.shop-mrar { color: var(--rc); font: 400 16px var(--display); 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 Ubuntu; }
.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 Ubuntu; }
.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 Ubuntu; }
.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: 2.5px solid var(--ink); border-radius: 9px;
    color: var(--text); font: 700 13px Ubuntu; text-align: left;
    cursor: pointer;
    transition: background-color 80ms, transform 60ms ease-out;
}
.shop-gfriend { height: 40px; font: 400 17px var(--display); 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: 400 15px var(--display); 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 Ubuntu; 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: 400 17px var(--display); letter-spacing: .02em; }
.shop-tokens-p { margin: 2px 0 12px; color: var(--text2); font: 500 12.5px/1.5 Ubuntu; }
.shop-pips { display: inline-flex; gap: 8px; }
.shop-pip {
    width: 11px; height: 11px;
    border: 2.5px solid var(--ink); 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: 2px solid var(--ink); 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: 400 16px var(--display); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-hsub { color: var(--text2); font: 500 11.5px Ubuntu; }
.shop-htag { padding: 2px 7px; border: 2px solid var(--border); border-radius: 6px; color: var(--text2); font: 700 10.5px Ubuntu; }
.shop-hnone { padding: 22px 0; color: var(--text2); font: 500 13px Ubuntu; text-align: center; }

/* Locker */
.lk-stagewrap { position: relative; overflow: hidden; border: 3px solid var(--ink); 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: 2.5px solid var(--ink); border-radius: 10px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 0 var(--ink);
    color: var(--text2);
    font: 400 17px/1 var(--display); 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 var(--ink);
}
.lk-count { min-width: 20px; padding: 2px 5px 3px; box-sizing: border-box; border-radius: 6px; background: var(--ink); color: #fff4dc; font: 400 13px/1 var(--display); 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: 3px solid var(--ink); border-radius: 11px;
    box-shadow: 0 3px 0 var(--ink);
    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 5px 0 var(--ink); }
.lk-tile:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); transition-duration: 60ms; }
.lk-tile.sel { box-shadow: 0 3px 0 var(--ink), 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: 3px solid var(--ink); 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: 400 16px var(--display); letter-spacing: .02em; }
.lk-tsub { padding: 0 10px; color: var(--rc); font: 700 11px Ubuntu; }
.lk-ribbon {
    position: absolute; top: 6px; left: 6px; z-index: 1;
    padding: 3px 6px 4px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--play); color: #fff;
    font: 400 12px/1 var(--display); 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 Ubuntu; }
.lk-bar { margin-top: 14px; padding: 10px 12px 10px 14px; background: var(--surface2); border: 2.5px solid var(--ink); 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 Ubuntu; }
.lk-bar-r { display: flex; align-items: center; gap: 10px; }
.lk-eqlabel { color: var(--online); font: 400 17px var(--display); letter-spacing: .03em; }
.lk-note { margin-top: 10px; color: var(--text2); font: 600 12px Ubuntu; 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: 2.5px solid var(--ink); 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: 2.5px solid var(--ink); 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 Ubuntu; 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: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font: 400 13px/16px var(--display);
    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: 400 17px var(--display); 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 Ubuntu; 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: 400 16px var(--display); 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: 2.5px solid var(--ink);
    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 Ubuntu; }
.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: 2.5px solid var(--ink);
    border-radius: 9px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 0 var(--ink);
    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 var(--ink); }
/* 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 Ubuntu; }

/* Requests: red only for ones waiting on you; unread chat on friend rows */
.fr-hotdot { width: 9px; height: 9px; margin-left: -3px; border: 2px solid var(--ink); 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: 2px solid var(--ink); border-radius: 10px; background: var(--copper); color: #fff;
    font: 400 13px/16px var(--display); 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: 2px solid var(--ink); border-radius: 10px; background: var(--danger); color: #fff;
    font: 400 12px/15px var(--display); 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: 2.5px solid var(--ink); border-radius: 9px;
    background: var(--face); box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 0 var(--ink);
    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 var(--ink); }
.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 Ubuntu; animation: dwFade var(--dw-t2) var(--dw-ease) both; }
.fr-chat-older, .fr-chat-retry {
    height: 28px; margin: 0; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px;
    background: var(--face); color: var(--text); font: 400 14px var(--display); 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 Ubuntu; }
.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: 2.5px solid var(--ink); border-radius: 14px;
    font: 600 13.5px/1.4 Ubuntu; 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 Ubuntu; 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 Ubuntu; 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: 2.5px solid var(--ink); border-radius: 9px; background: var(--copper); color: #fff;
    box-shadow: 0 3px 0 var(--ink);
    font: 400 15px var(--display); 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 Ubuntu; 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: 3px solid var(--ink);
    border-radius: 16px 13px 15px 14px;
    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: 2.5px solid var(--ink); 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 Ubuntu; font-variant-numeric: tabular-nums; }
.pf-meta { margin-top: 2px; color: var(--text2); font: 600 12px Ubuntu; }
.pf-pres { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--text2); font: 700 12px Ubuntu; }
.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: 3px solid var(--ink); 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: 400 14px var(--display); 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 Ubuntu; }
.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 Ubuntu; 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: 2.5px solid var(--ink); }
.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); }
.pf-tier:not(.on) .pf-tier-img { filter: brightness(0) invert(1); opacity: .1; }
[data-theme="light"] .pf-tier:not(.on) .pf-tier-img { filter: brightness(0); opacity: .14; }
.pf-tier-l { color: var(--text); font: 400 14px var(--display); 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: 3px solid var(--ink); background: var(--ac); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ink); 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: 2px solid var(--ink); 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: 400 15px var(--display); letter-spacing: .02em; white-space: nowrap; }
.pf-ach-d { color: #c9bfae; font: 600 11px/1.3 Ubuntu; }
.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: 2.5px solid var(--ink); }
.pf-stat:nth-child(1) { border-radius: 14px 10px 12px 12px; }
.pf-stat:nth-child(5) { border-radius: 10px 14px 12px 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 Ubuntu; }
@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 Ubuntu; letter-spacing: 0; }
.lb-table { border: 3px solid var(--ink); 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 Ubuntu;
    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: 3px solid var(--ink); background: var(--surface2); color: var(--text2); font: 400 15px var(--display); 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: 400 16px/26px var(--display); text-align: center; font-variant-numeric: tabular-nums; }
.lb-pl.gold, .lb-pl.silver, .lb-pl.bronze { border: 2.5px solid var(--ink); 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: 2px solid var(--ink); border-radius: 6px; background: var(--copper); color: #fff; font: 400 12px/15px var(--display); 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: 400 17px var(--display); 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: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.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 Ubuntu; }
@media (max-width: 560px) {
    .lb-row { grid-template-columns: 44px minmax(0, 1fr) 64px; }
    .lb-rank { display: none; }
}

/* ── 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: 12px 14px 13px 12px;
    background: var(--surface);
    border: 3px solid var(--ink);
    box-shadow: inset 0 0 0 2px var(--bevel), 0 5px 0 var(--ink);
    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 Ubuntu; 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 Ubuntu; }
.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: 400 15px/1.2 var(--display); 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: 2px solid var(--ink); 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: 400 14px var(--display); 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: 400 14px var(--display); 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: 400 15px var(--display); letter-spacing: .02em; text-align: center; }
.q-guest {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 3px;
    padding: 8px 12px 10px;
    border: 2.5px solid var(--ink);
    border-radius: 11px;
    background: var(--face);
    box-shadow: inset 0 -4px 0 var(--face-dk), 0 3px 0 var(--ink);
    color: var(--heading);
    font: 400 15px var(--display);
    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 var(--ink); }

/* 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: 3px solid var(--ink); border-radius: 14px;
    background: var(--hub-bg); color: var(--text);
    box-shadow: inset 0 0 0 2px var(--bevel), 0 5px 0 var(--ink);
    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 Ubuntu; 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: 2.5px solid var(--ink); border-radius: 8px;
    background: var(--danger); box-shadow: inset 0 -3px 0 var(--danger-dk), 0 2px 0 var(--ink);
    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 var(--ink); }
.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 Ubuntu; 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: 2.5px solid var(--ink); border-radius: 9px;
    background: var(--hub-bg); box-shadow: 0 2px 0 var(--ink); 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: 2px solid var(--ink); border-radius: 9px;
    background: var(--danger); color: #fff; font: 400 12px/14px var(--display); 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: 2.5px solid var(--ink); border-radius: 10px;
    background: var(--hub-bg); box-shadow: inset 0 -3px 0 var(--face-dk), 0 3px 0 var(--ink); 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 Ubuntu; }
.igc-toast-k { color: var(--text2); font: 600 10.5px Ubuntu; }
.igc-toast-k kbd { padding: 0 4px; border: 1.5px solid var(--ink); 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, .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. Always the dark cave palette, like the in-game buttons. */
#dwJoin {
    --surface: #2b2533; --surface2: #352e3f; --ink: #120e15; --bevel: rgba(255,255,255,.07);
    --text: #e9e0cc; --text2: #a597b0; --heading: #fff3d9; --gold: #f2b83c; --copper: #e07b2e;
    --play: #4fcf5c; --play-dk: #2c8f37; --face: #4a4156; --face-dk: #2e2837;
    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% 42%, #231d2b 0%, #16121b 70%);
    color: var(--text);
    user-select: 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: 3px solid var(--ink);
    border-radius: 18px 15px 19px 16px;
    box-shadow: inset 0 0 0 3px var(--bevel), 0 7px 0 var(--ink);
    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: 5px var(--ink); paint-order: stroke fill;
    text-shadow: 0 3px 0 var(--ink);
}
#dwJoin[data-mode="down"] .dwj-title { color: #ff8f7e; }
#dwJoin[data-mode="lock"] .dwj-title, #dwJoin[data-mode="late"] .dwj-title { color: var(--gold); }
.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: #1e1924; border: 2px solid var(--ink); border-radius: 12px;
}
.dwj-count[hidden], .dwj-line[hidden], .dwj-dots[hidden], .dwj-btns [hidden] { display: none; }
.dwj-count-lbl { color: var(--text2); font: 400 14px/1 var(--display); letter-spacing: .04em; }
.dwj-count-n {
    color: #fff; font: 400 44px/1 var(--display); font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink);
}
.dwj-line { margin: 12px 4px 0; color: var(--text); font: 600 14px/1.4 Ubuntu, sans-serif; }
.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); border: 2px solid var(--ink); 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; }
@media (max-width: 420px) { .dwj-title { font-size: 28px; } .dwj-btns .dw-btn { min-width: 0; flex: 1; } }