/* ===========================
   HOME MENU (home-menu.js)
   Ported from ~/wikiderby-redesign/index-tetr-idea-photos.html with its
   dark TETR pass (tetr.css) folded in. Everything is in cqw of a container
   as wide as the window, so the whole thing scales with the window the way
   the mockup did. Prefixed wdm- so nothing here meets style.css.
   =========================== */

/* The mockup's labels are Mono, the same as the rest of the site. The global rule
   at the end of style.css is !important on `*`, so this has to be too, and
   wins on specificity. */
.wdm-chrome, .wdm-chrome *, .wdm-screen, .wdm-screen *, .wdm-screen *::after {
    font-family: Mono, Consolas, monospace !important;
    font-weight: normal;
}
.wdm-chrome *, .wdm-screen * { box-sizing: border-box; border-radius: 0; }

/* The floating corner pieces the banner replaces. */
body.wdm-on:not(.wiki-reading) #profileBtn,
body.wdm-on:not(.wiki-reading) #discordBtn,
body.wdm-on:not(.wiki-reading) .site-logo,
body.wdm-on:not(.wiki-reading) #backButton { display: none !important; }
body:not(.wdm-on) .wdm-chrome { display: none; }

/* ── Chrome ── */
:root {
    /* The banner is drawn at 80% of its designed size (home-menu.js BANNER_SCALE
       is the same number). --q is one cqw at that scale, for everything sized by
       the banner. It lives on the root because the screens around it read it too. */
    --wdm-k: .8;
    --q: calc(1cqw * var(--wdm-k));
}
.wdm-chrome {
    position: fixed;
    inset: 0;
    z-index: 102; /* above the room screen (101), so the Start button can rise over its columns */
    pointer-events: none;
    container-type: inline-size;
    /* Whatever else changes, the layer is the window's size and stays on. */
    min-width: 100%;
    min-height: 100%;
    --u: calc(var(--q) / 19.2); /* one unit of the banner's viewBox */
    --s-plate: #2a2a2a;
    --s-bright: #e2e2e2;
}
.wdm-banner {
    position: fixed; /* pinned to the window itself, not just to the chrome layer */
    /* The artwork starts at y=12 in its 122-tall viewBox. */
    top: calc(-12 * var(--u)); /* the artwork starts at y=12 */
    left: 0;
    width: 100%;
}
.wdm-banner > svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    
}
.wdm-bn-band { fill: #1a1a1a; }
.wdm-bn-red { fill: var(--fav, #d8302c); }
.wdm-bn-plateL { fill: var(--s-plate); stroke: #141414; stroke-width: 2; }
.wdm-bn-plateR { fill: #303030; stroke: #141414; stroke-width: 2; }
.wdm-bn-plateM { display: none; cursor: pointer; pointer-events: auto; outline: none; }
.wdm-bn-plateM image { transition: filter .12s; }
.wdm-chrome.plate-in .wdm-bn-plateM {
    display: inline;
    /* Drops in a beat after the bundles block starts sliding down. */
    animation: wdm-plateM-drop 520ms cubic-bezier(.16, 1, .3, 1) 420ms backwards;
}
/* Leaving, it goes back up the way it came, inside the screen swap's time. */
.wdm-chrome.plate-out .wdm-bn-plateM {
    display: inline;
    animation: wdm-plateM-lift 260ms cubic-bezier(.7, 0, 1, .35) forwards;
}
@keyframes wdm-plateM-lift { to { translate: 0 -150px; } }
@keyframes wdm-plateM-drop { from { translate: 0 -150px; } }
.wdm-bn-plateM:hover image, .wdm-bn-plateM:focus-visible image { filter: brightness(1.15); }
/* The band's own dark, carried round the centre hexagon where it dips below the band. */
.wdm-bn-back { fill: #1a1a1a; }
.wdm-bn-plateM-edge { fill: transparent; stroke: #141414; stroke-width: 2; }
/* A room's code, in the same gap as NO W-BUCKS?, coming and going the same way. */
.wdm-bn-roomM { display: none; cursor: pointer; pointer-events: auto; outline: none; }
.wdm-bn-roomM-fill { transition: filter .12s; }
.wdm-chrome.room-in .wdm-bn-roomM {
    display: inline;
    animation: wdm-plateM-drop 520ms cubic-bezier(.16, 1, .3, 1) 120ms backwards;
}
.wdm-chrome.room-out .wdm-bn-roomM {
    display: inline;
    animation: wdm-plateM-lift 260ms cubic-bezier(.7, 0, 1, .35) forwards;
}
.wdm-bn-roomM:hover .wdm-bn-roomM-fill, .wdm-bn-roomM:focus-visible .wdm-bn-roomM-fill { filter: brightness(1.15); }
.wdm-bn-roomM-fill { fill: var(--s-plate); stroke: #141414; stroke-width: 2; }
.wdm-bn-roomM.is-copied .wdm-bn-roomM-fill { fill: #1f5a2e; }
.wdm-bn-roomM.is-failed .wdm-bn-roomM-fill { fill: #5a1f1f; }
.wdm-bn-roomM-label { fill: #b0b0b0; font-size: 20px; letter-spacing: .08em; }
.wdm-bn-roomM-code { fill: var(--s-bright); font-size: 44px; letter-spacing: .12em; }
/* The daily challenge: the room plate drawn wider, in the same gap, on Home only. */
.wdm-bn-daily { display: none; cursor: pointer; pointer-events: auto; outline: none; }
.wdm-chrome.is-home .wdm-bn-daily {
    display: inline;
    animation: wdm-plateM-drop 520ms cubic-bezier(.16, 1, .3, 1) 300ms backwards;
}
.wdm-chrome.is-compact .wdm-bn-daily { display: none !important; }
.wdm-bn-daily-fill { fill: var(--s-plate); }
.wdm-bn-daily-edge { fill: transparent; stroke: #141414; stroke-width: 2; }
.wdm-bn-daily image { transition: filter .12s; }
.wdm-bn-daily:hover image, .wdm-bn-daily:focus-visible image { filter: brightness(1.15); }
.wdm-bn-daily-t { fill: #fff; font-size: 30px; letter-spacing: .06em; stroke: #141414; stroke-width: 5px; stroke-linejoin: miter; paint-order: stroke; pointer-events: none; }
.wdm-bn-daily-tab { fill: #1a1a1a; }
.wdm-bn-daily-head { fill: var(--daily-head-color, #fff); opacity: var(--daily-head-opacity, 1); font-size: var(--daily-head-size, 22px); letter-spacing: .1em; transform: translateY(var(--daily-head-y, 0px)); }
/* The arrow wears the tabs' dark: a rectangle and a solid triangle. */
.wdm-bn-daily-arrow { fill: #1a1a1a; pointer-events: none; }
.wdm-bn-daily-arrowSvg { overflow: visible; }
.wdm-bn-label { fill: #d6d6d6; font-size: 40px; letter-spacing: .06em; }
.wdm-bn-title { fill: var(--s-bright); }
.wdm-bn-lvl { font-size: 34px; letter-spacing: 0; }
.wdm-bn-bell { fill: #8a8a8a; }

.wdm-pfp {
    position: absolute;
    appearance: none;
    border: 0;
    padding: 0;
    background: #303030;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    transition: filter .12s;
}
.wdm-pfp:hover, .wdm-pfp:focus-visible { filter: brightness(1.15); outline: none; }
.wdm-pfp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }

.wdm-emblem {
    position: absolute;
    transform: translate(-50%, -50%);
}
.wdm-back {
    appearance: none;
    border: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12 * var(--u));
    color: #d6d6d6;
    font: inherit;
    transition: color .12s;
}
.wdm-back svg {
    flex: none;
    width: calc(59 * var(--u));
    height: calc(30 * var(--u));
}
.wdm-back-text {
    flex: none;
    font-size: calc(54 * var(--u));
    line-height: 1;
    letter-spacing: .06em;
}
.wdm-back:hover, .wdm-back:focus-visible { color: #ffd400; outline: none; }
.wdm-logo {
    position: absolute;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.wdm-chrome.is-home .wdm-emblem { display: none; }
.wdm-chrome:not(.is-home) .wdm-logo { display: none; }

/* Infobar: two dark tabs rising at the screen edges (counts on the left,
   links on the right), the panel with the description line, and a thin line
   under it that takes the hovered button's colour. */
.wdm-infobar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(4.4 * var(--q));
}
.wdm-tab {
    position: absolute;
    top: calc(-1.2 * var(--q));
    left: 0;
    width: calc(24 * var(--q));
    height: calc(2.35 * var(--q));
    clip-path: polygon(0 0, calc(100% - calc(1.357 * var(--q))) 0, 100% 100%, 0 100%); /* .578 run per rise, the banner hexagons' slant */
    background: #1a1a1a;
}
.wdm-tab--r {
    left: auto;
    right: 0;
    clip-path: polygon(calc(1.357 * var(--q)) 0, 100% 0, 100% 100%, 0 100%);
}
.wdm-trim {
    position: absolute;
    inset: calc(2.1 * var(--q)) 0 0;
    background: #1a1a1a;
    clip-path: polygon(0 0, 100% 0, 100% 13%, 98.59375% 13%, 96.09375% 100%, 3.90625% 100%, 1.40625% 13%, 0 13%);
    border-bottom: calc(.104167 * var(--q)) solid #141414;
}
.wdm-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(1.041667 * var(--q));
    height: calc(3 * var(--q));
    clip-path: polygon(0 0, 100% 0, 100% 41.333333%, 93.958333% 41.333333%, 91.71875% 100%, 8.28125% 100%, 6.041667% 41.333333%, 0 41.333333%);
    background: #2a2a2a;
    border-top: calc(.15625 * var(--q)) solid #141414;
}
.wdm-line {
    position: absolute;
    /* Sits inside the panel with its shadow. The panel's lower corners are cut
       in percent of the window width (ending at 8.28%, slanting 1.27 across per
       1 down, over a panel that ends at 4.04 q), so the line's ends are in cqw
       too; in q they would drift out of the panel whenever q is not 1cqw. */
    top: calc(3.3 * var(--q));
    left: 7.7cqw;
    right: 7.7cqw;
    height: calc(.416667 * var(--q));
    clip-path: polygon(0 0, 100% 0, calc(100% - .53cqw) 100%, .53cqw 100%);
    background: var(--line, var(--fav, #d8302c));
    box-shadow: 0 calc(.15 * var(--q)) 0 rgb(0 0 0 / .4);
    transition: background .12s;
}
.wdm-infobar p {
    position: absolute;
    top: calc(1.42 * var(--q));
    left: 50%;
    margin: 0;
    color: #d6d6d6;
    font-size: calc(1.5 * var(--q));
    line-height: 1.2;
    letter-spacing: .04em;
    white-space: nowrap;
    transform: translateX(-50%) scale(.888, .87);
    transform-origin: center;
}
/* A screen's main button in the middle of the infobar (a room's Start).
   The panel's own shape, inset, in Multiplayer's colour. */
.wdm-infobar.has-go p { display: none; }
.wdm-go {
    position: absolute;
    /* The plate's outer (backing) edge on the tabs' top edge: the svg's box starts 1 unit above it. */
    top: calc(calc(-1.2 * var(--q)) - var(--u));
    left: 50%;
    width: calc(501 * var(--u));
    height: calc(52 * var(--u));
    transform: translateX(-50%);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    clip-path: inset(-300px -50px calc(6 * var(--u)) -50px); /* cut at the tabs' foot, free above */
    transition: filter .12s;
}
.wdm-go-body { transition: transform .16s ease-out; }
.wdm-go svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wdm-go-fill { fill: var(--s-plate); }
.wdm-go-label {
    fill: var(--s-bright);
    font-size: 25px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.wdm-go[hidden] { display: none; }
.wdm-go:hover:not(:disabled), .wdm-go:focus-visible { filter: brightness(1.15); outline: none; }
/* Rises out of the bar on hover, and settles part-way back when pressed. */
.wdm-go:hover:not(:disabled) .wdm-go-body, .wdm-go:focus-visible .wdm-go-body { transform: translateY(-30px); }
.wdm-go:active:not(:disabled) .wdm-go-body { transform: translateY(-12px); }
.wdm-go:active:not(:disabled) { filter: brightness(.88); }
.wdm-go:disabled { cursor: default; }
.wdm-go:disabled .wdm-go-fill { fill: #3a3a3a; }
.wdm-go:disabled .wdm-go-label { fill: #8a8a8a; }
html.theme-light .wdm-go-fill { fill: color-mix(in srgb, var(--s-bright) 30%, #f4f2ee); }
html.theme-light .wdm-go-label { fill: var(--s-plate); }
.wdm-stats {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(.5 * var(--q));
    padding: calc(.7 * var(--q)) calc(.9 * var(--q)) 0 0;
    color: #b0b0b0;
    font-size: calc(.9 * var(--q));
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
}
.wdm-stats i {
    width: calc(.6 * var(--q));
    height: calc(.6 * var(--q));
    margin-top: calc(.2 * var(--q));
    background: #3ddc5a;
    clip-path: circle(50%);
}
.wdm-links {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(.35 * var(--q));
    padding: calc(.27 * var(--q)) 0 0 calc(.9 * var(--q));
}
.wdm-links a {
    display: grid;
    place-items: center;
    width: calc(3.2 * var(--q));
    height: calc(1.7 * var(--q));
    --lean: calc(.982 * var(--q)); /* 1.7 tall x .578, the same slant as the tab's edge */
    clip-path: polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%);
    background: #303030;
    color: #9a9a9a;
    box-shadow: inset calc(-.1 * var(--q)) calc(-.1 * var(--q)) 0 rgb(0 0 0 / .45);
    pointer-events: auto;
    transition: background .12s, color .12s;
}
.wdm-links a:hover, .wdm-links a:focus-visible { background: #3a2a1a; color: #f8d08f; outline: none; }
/* Red callout over the Discord tab: text, then an arrow pointing down at it. Placed by home-menu.js. */
.wdm-claim {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}
.wdm-claim span {
    background: #e8262b;
    color: #fff;
    padding: calc(.3 * var(--q)) calc(.7 * var(--q));
    font-weight: 700;
    font-size: calc(1.05 * var(--q));
    letter-spacing: .02em;
    white-space: nowrap;
}
.wdm-claim svg { width: calc(1.3 * var(--q)); height: calc(1.8 * var(--q)); fill: #e8262b; filter: drop-shadow(0 0 calc(.1 * var(--q)) rgb(0 0 0 / .6)); animation: wdm-claim-bob 1s ease-in-out infinite; }
@keyframes wdm-claim-bob { 50% { transform: translateY(calc(.35 * var(--q))); } }
.wdm-links svg { width: calc(1.1 * var(--q)); height: calc(1.1 * var(--q)); fill: currentColor; }

/* ── Screens ── */
.menu-stage:has(> .wdm-root) { padding: 0; }
.grid-container.wdm-root { display: block; max-width: none; }
.wdm-screen {
    position: fixed;
    inset: 0;
    z-index: 1;
    container-type: inline-size;
}
.wdm-root.is-exiting .wdm-screen { animation: trainingScreenOutLeft 260ms cubic-bezier(0.7, 0, 1, 0.35) forwards; }
.wdm-root.is-entering .wdm-screen { animation: trainingScreenInRight 260ms cubic-bezier(0.04, 0.82, 0.18, 1) backwards; }
.wdm-root.is-exiting-back .wdm-screen { animation: trainingScreenOutRight 260ms cubic-bezier(0.7, 0, 1, 0.35) forwards; }
.wdm-root.is-entering-back .wdm-screen { animation: trainingScreenInLeft 260ms cubic-bezier(0.04, 0.82, 0.18, 1) backwards; }

/* Home: six plain slabs, placed by home-menu.js over the window. Only the
   slabs take the pointer, so the space round them is the sunset's. */
.wdm-traced {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Sub-screens: a grid of the same slabs. Each button keeps a hue of its own. */
.wdm-grid {
    position: absolute;
    top: calc(9 * var(--q));
    bottom: calc(10 * var(--q));
    left: 4cqw;
    right: 4cqw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.54cqw;
}
.wdm-grid--4 {
    left: 20cqw;
    right: 20cqw;
    grid-template-columns: repeat(2, 1fr);
}
.wdm-grid--2 { grid-template-rows: 1fr; top: calc(22 * var(--q)); bottom: calc(22 * var(--q)); }
.wdm-grid > :nth-child(5n+1) { --mid: #c8457f; }
.wdm-grid > :nth-child(5n+2) { --mid: #7f66c9; }
.wdm-grid > :nth-child(5n+3) { --mid: #55b95c; }
.wdm-grid > :nth-child(5n+4) { --mid: #4c82d8; }
.wdm-grid > :nth-child(5n+5) { --mid: #d68c2a; }

/* The slab: a block leaning 9 degrees, a hard shadow under it, its picture on the right, the name big along the bottom leaning
   with it. Hover lifts the block off its shadow. Its own container, so every
   size inside is in its own units. */
.wdm-card {
    --mid: #a0a0a0;
    --lean: -9deg;
    --lift: 0cqw;
    position: relative;
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    container-type: size;
    text-align: left;
    background: transparent;
    pointer-events: auto;
}
.wdm-card:is(:hover, :focus-visible) { --lift: 1cqw; }
.wdm-card:focus-visible { outline: none; }
.wdm-card-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--wdm-fill);
    box-shadow: calc(2.4cqw - var(--lift)) calc(2.4cqw - var(--lift)) 0 var(--wdm-shadow);
    transform: skewX(var(--lean)) translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
    transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s cubic-bezier(.2, .8, .2, 1);
}
.wdm-card:active .wdm-card-bg { transform: skewX(var(--lean)); box-shadow: 1cqw 1cqw 0 var(--wdm-shadow); }
/* The picture: on the right of the block, behind the name, in the button's
   colour with the bars' edge round it. Upright, the block leans under it. */
.wdm-art {
    position: absolute;
    right: 5cqw;
    top: 50%;
    height: 76cqh;
    translate: calc(var(--lift) * -1) calc(-50% - var(--lift));
    --mid: var(--wdm-art);
    color: var(--wdm-art);
    transition: translate .16s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}
.wdm-art svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.wdm-art svg :is(path, rect, polygon, circle) {
    fill: currentColor;
    stroke: none;
}
.wdm-art svg .wdm-hole { fill: var(--wdm-fill); stroke: none; }
.wdm-art .wdm-swing { transform-origin: 19px 30px; animation: wdm-swing 3s ease-in-out infinite alternate; }
@keyframes wdm-swing { from { rotate: -9deg; } to { rotate: 9deg; } }
.wdm-art svg [stroke="currentColor"] { fill: none; stroke: currentColor; }
.wdm-art .wdm-spin { transform-box: fill-box; transform-origin: center; animation: wdm-spin 6s linear infinite; }
.wdm-art .wdm-pc { transform-box: fill-box; animation: wdm-float 2.4s ease-in-out infinite; }
.wdm-art .wdm-px { image-rendering: pixelated; filter: url(#wdm-paint); }
.wdm-art .wdm-hue { animation: wdm-float 2.4s ease-in-out infinite, wdm-hue 3s linear infinite; }
@keyframes wdm-hue { to { filter: hue-rotate(360deg); } }
@keyframes wdm-spin { to { transform: rotate(360deg); } }
@keyframes wdm-float { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }
/* The sub-screens' small motions. */
.wdm-art :is(.wdm-ic-flip, .wdm-ic-knob, .wdm-ic-rank, .wdm-ic-zap, .wdm-ic-enter, .wdm-ic-blink) { transform-box: fill-box; }
.wdm-ic-hand { transform-origin: 12px 14px; animation: wdm-spin 4s linear infinite; }
.wdm-ic-flip { transform-origin: center; animation: wdm-ic-flip 4s cubic-bezier(.6, 0, .3, 1) infinite; }
.wdm-ic-knob { animation: wdm-ic-knob 3s ease-in-out infinite; }
.wdm-ic-rank { animation: wdm-ic-rank 2.4s ease-in-out infinite; }
.wdm-ic-zap { transform-origin: center; animation: wdm-ic-zap 2.4s ease-in-out infinite; }
.wdm-ic-enter { animation: wdm-ic-enter 2.4s ease-in-out infinite; }
.wdm-ic-blink { animation: wdm-ic-blink 2s steps(1) infinite; }
@keyframes wdm-ic-flip { 0%, 75% { rotate: 0deg; } 100% { rotate: 180deg; } }
@keyframes wdm-ic-knob { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }
@keyframes wdm-ic-rank { 0%, 100% { translate: 0 0; } 30% { translate: 0 -1.2px; } 60% { translate: 0 0; } }
@keyframes wdm-ic-zap { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes wdm-ic-enter { 0%, 100% { translate: -2px 0; } 50% { translate: 1px 0; } }
@keyframes wdm-ic-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .wdm-art svg * { animation: none !important; }
}
.wdm-card-name {
    position: absolute;
    left: 6cqw;
    bottom: 12cqh;
    z-index: 2;
    color: #fff;
    /* As big as fits the width and 34% of the height. */
    font-size: min(34cqh, 86cqw / (var(--n, 12) * .6));
    line-height: 1;
    white-space: nowrap;
    transform-origin: left bottom;
    transform: skewX(var(--lean)) translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
    transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
/* Multiplayer's wedge (home-menu.js mountWedge): drawn by hand in
   tester.jpg. A see-through quad on its own full-window layer, so only the
   quad takes the pointer. The four corner handles and the panel are for pulling it into shape. */
.wdm-wedge {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: none;
}
/* Pressing a wedge (home-menu.js leave): each one slides off its own side in
   turn, --dx the way and --d the wait. */
.wdm-traced.is-leaving .wdm-wedge { animation: wdm-wedge-out 280ms cubic-bezier(.7, 0, 1, .35) var(--d) both; }
.wdm-traced.is-leaving .wdm-wedge-hit { pointer-events: none; }
@keyframes wdm-wedge-out { to { translate: var(--dx) 0; } }
/* Arriving (home-menu.js arrive): the same slide the other way, settling. */
.wdm-traced.is-arriving .wdm-wedge { animation: wdm-wedge-in 340ms cubic-bezier(.04, .82, .18, 1) var(--d) backwards; }
@keyframes wdm-wedge-in { from { translate: var(--dx) 0; } }
.wdm-wedge-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wdm-wedge-hit { fill: #1a1a1a; fill-opacity: var(--slab-o, .75); pointer-events: auto; transition: fill .15s, fill-opacity .15s; }
.wdm-wedge-light { fill: #303030; fill-opacity: var(--check-o, .7); pointer-events: none; }
.wdm-wedge-name { fill: #fff; pointer-events: none; }
/* Multiplayer's and Single Player's cursors (home-menu.js cursorRun):
   .wdm-wedge-art is a flat rectangle carried onto the quad by a matrix3d set
   from JS, so the row has the quad's perspective. The strip holds two
   copies of the button's flat row PNG, so sliding from -50% to 0 is exactly
   one copy and the loop has no seam; transform only, so it runs on the
   compositor with no repaints. --lp is one PNG texture px on screen and --ph
   the PNG's height in them. */
.wdm-wedge-art { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; transform-origin: 0 0; }
.wdm-strip {
    position: absolute;
    left: 0;
    display: flex;
    width: max-content;
    will-change: transform;
    animation: wdm-strip-run 30s linear infinite;
}
.wdm-strip img {
    display: block;
    width: auto;
    height: calc(var(--ph) * var(--lp));
    user-select: none;
}
@keyframes wdm-strip-run {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .wdm-strip { animation: none; } }
/* Leaderboards' podium (home-menu.js podium), flat in .wdm-wedge-art like the
   rows: white blocks and cursors on the dark look, black on the light one. */
.wdm-podium { position: absolute; inset: 0; width: 100%; height: 100%; }
.wdm-podium-block { fill: #fff; }
html.theme-light .wdm-podium-block { fill: #141414; }
html.theme-light .wdm-podium image { filter: brightness(0); }
/* Single Player's cursor is a white silhouette: black on the light look. */
html.theme-light .wdm-wedge-art[data-k="sp"] img { filter: brightness(0); }
/* About's info mark and Settings' gear (home-menu.js wedgeIcon), centred
   under the name in the quad's flat rectangle. */
.wdm-wedge-icon { position: absolute; left: 0; top: 38%; width: 100%; height: 52%; fill: #fff; color: #fff; }
.wdm-wedge-icon [stroke="currentColor"] { fill: none; }
/* The gear turns as the whole svg, not its inner <g>: an HTML-level transform
   gets its own compositor layer, an SVG child's runs on the main thread. */
.wdm-wedge-icon:has(> .wdm-spin) { transform-origin: center; will-change: transform; animation: wdm-spin 6s linear infinite; }
html.theme-light .wdm-wedge-icon { fill: #141414; color: #141414; }
html.theme-light .wdm-wedge-icon image { filter: brightness(0); }
@media (prefers-reduced-motion: reduce) { .wdm-wedge-icon:has(> .wdm-spin) { animation: none; } }
.wdm-handle {
    position: absolute;
    z-index: 5;
    width: 18px;
    height: 18px;
    translate: -50% -50%;
    background: #fff;
    box-shadow: 0 0 0 2px #0d0d0d;
    cursor: move;
    pointer-events: auto;
}
.wdm-handle:hover { background: #ffd54a; }
.wdm-wedge-panel {
    position: absolute;
    z-index: 5;
    left: 16px;
    bottom: 12%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    pointer-events: auto;
}
.wdm-wedge-panel label { display: flex; align-items: center; gap: 8px; }
.wdm-wedge-panel input { width: 160px; }
.wdm-wedge-panel button {
    appearance: none;
    border: 0;
    padding: 4px 8px;
    background: #303030;
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.wdm-wedge-panel button:hover { background: #3a2a1a; color: #f8d08f; }
@media (prefers-reduced-motion: reduce) {
    .wdm-card-bg, .wdm-card-name, .wdm-art { transition: none; }
}
/* Join Room's count of open public rooms. */
/* Inside the button, so in the button's own units. */
.wdm-card-badge {
    position: absolute;
    top: 5.5cqw;
    right: 2.7cqw;
    min-width: 7cqw;
    padding: .7cqw 1.7cqw;
    z-index: 3;
    background: var(--mid);
    color: #111;
    font-size: 3.4cqw;
    text-align: center;
}
.wdm-card-badge[hidden] { display: none; }
/* On a wedge the count sits at its right side; home-menu.js sets left and top. */
.wdm-wedge .wdm-card-badge { right: auto; translate: -100% -50%; background: #fff; pointer-events: none; }
html.theme-light .wdm-wedge .wdm-card-badge { background: #141414; color: #fff; }

/* Multiplayer's error line (a failed queue, say) sits over the grid. */
.wdm-screen .mp-error {
    position: absolute;
    top: 6.5cqw;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: #ff6565;
    font-size: 1.1cqw;
}

/* The banner and infobar stay on every screen and leave when a match starts
   (the race puts wiki-reading on <body>): the banner up, the infobar down.
   They slide back when the match is left. */
.wdm-banner, .wdm-infobar {
    transition: transform .45s cubic-bezier(.7, 0, 1, .35), visibility 0s .45s;
}
body.wiki-reading .wdm-banner { transform: translateY(-130%); visibility: hidden; }
body.wiki-reading .wdm-infobar { transform: translateY(130%); visibility: hidden; }
body:not(.wiki-reading) .wdm-banner, body:not(.wiki-reading) .wdm-infobar {
    transition: transform .45s cubic-bezier(.04, .82, .18, 1);
}

/* ===========================
   UI THEME (Settings > Customization > UI theme)
   Dark is the default and the look everything above is written in. Light is
   the same screens with the values flipped: pale plates, mid-grey band, dark
   text, every hue kept. Theme keeps dark and puts the equipped shop theme on
   the band, the tabs and the bottom bar (home-menu.js sets the variables).
   =========================== */
:root {
    /* The banner's band, plates and edge, so the buttons and the bars are
       one set. */
    --wdm-fill: #1a1a1a;
    --wdm-edge: #141414;
    --wdm-deco: #303030;
    --wdm-shadow: #0b0b0b;
    --wdm-art: #d8302c;
}
.wdm-fill { fill: var(--wdm-fill); }
.wdm-edge { stroke: var(--wdm-edge); }
.wdm-deco { fill: var(--wdm-deco); }

/* ── Theme ── */
.wdm-bn-art { display: none; pointer-events: none; }
.wdm-chrome.has-theme .wdm-bn-art { display: block; }
.wdm-bn-art > div,
.wdm-chrome.has-theme :is(.wdm-tab, .wdm-trim, .wdm-panel) {
    background: linear-gradient(var(--wdm-theme-wash), var(--wdm-theme-wash)), var(--wdm-theme-art);
}
.wdm-bn-art > div { width: 100%; height: 100%; }
.wdm-chrome.has-theme :is(.wdm-tab, .wdm-trim, .wdm-panel) { background-attachment: fixed; }
.wdm-chrome.has-theme :is(.wdm-infobar p, .wdm-stats) { color: var(--wdm-theme-ink); }

/* ── Light ── */
html.theme-light {
    --wdm-fill: #eeece8;
    --wdm-edge: #a9a6a0;
    --wdm-deco: #d6d3cd;
    --wdm-shadow: #bdbab3;
}
html.theme-light .wdm-bn-band { fill: #cfcdc8; }
html.theme-light .wdm-bn-back { fill: #cfcdc8; }
html.theme-light .wdm-bn-plateL { fill: color-mix(in srgb, var(--s-bright) 30%, #f4f2ee); stroke: #a9a6a0; }
html.theme-light .wdm-bn-plateR { fill: #f4f2ee; stroke: #a9a6a0; }
html.theme-light .wdm-bn-label { fill: #2c2b29; }
html.theme-light .wdm-bn-title { fill: var(--s-plate); }
html.theme-light .wdm-bn-bell { fill: #6e6c68; }
html.theme-light .wdm-bn-roomM-fill { fill: color-mix(in srgb, var(--s-bright) 30%, #f4f2ee); stroke: #a9a6a0; }
html.theme-light .wdm-bn-roomM-label { fill: #5a5955; }
html.theme-light .wdm-bn-roomM-code { fill: var(--s-plate); }
html.theme-light .wdm-pfp { background: #f4f2ee; }

html.theme-light :is(.wdm-tab, .wdm-trim) { background: #cfcdc8; }
html.theme-light .wdm-trim { border-bottom-color: transparent; }
html.theme-light .wdm-panel { background: #eeece8; border-top-color: transparent; }
html.theme-light .wdm-bn-daily-tab { fill: #cfcdc8; }
html.theme-light .wdm-bn-daily-arrow { fill: #cfcdc8; }
html.theme-light .wdm-bn-plateM-edge, html.theme-light .wdm-bn-daily-edge { stroke: none; }
html.theme-light .wdm-line { box-shadow: 0 calc(.15 * var(--q)) 0 rgb(0 0 0 / .14); }
html.theme-light .wdm-infobar p { color: #2c2b29; }
html.theme-light .wdm-stats { color: #3e3d3a; }
html.theme-light .wdm-links a {
    background: #f4f2ee;
    color: #6e6c68;
    box-shadow: inset calc(-.1 * var(--q)) calc(-.1 * var(--q)) 0 rgb(0 0 0 / .14);
}
html.theme-light .wdm-links a:hover,
html.theme-light .wdm-links a:focus-visible { background: #f8e7c9; color: #8a520f; }

html.theme-light .wdm-card-name { color: #141414; }
html.theme-light .wdm-card-badge { color: #141414; }

/* Home's wedges: pale glass over the sunset, dark lettering. */
html.theme-light .wdm-wedge-hit { fill: rgb(244 242 238 / .8); }
html.theme-light .wdm-wedge-light { fill: rgb(205 202 196 / .7); }
html.theme-light .wdm-wedge-name { fill: #141414; }
html.theme-light .wdm-wedge-panel { background: #eeece8; color: #141414; }
html.theme-light .wdm-wedge-panel button { background: #d6d3cd; color: #141414; }
html.theme-light .wdm-wedge-panel button:hover { background: #f8e7c9; color: #8a520f; }
html.theme-light .wdm-screen .mp-error { color: #c62828; }


/* ── Bell: the hit area over the banner's bell, and its unread count ── */
.wdm-bellbtn {
    position: absolute;
    transform: translate(-50%, -50%);
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}
.wdm-bellbtn:focus-visible { outline: none; }
/* The button sits after the banner svg, so reach back to the bell through the banner. */
.wdm-bn-bell { transition: fill .12s; }
.wdm-bn-plateNt { transition: fill .12s, stroke .12s; }
.wdm-banner:has(.wdm-bellbtn:is(:hover, :focus-visible)) .wdm-bn-plateNt { fill: var(--fav, #d8302c); stroke: var(--fav-deep, #8f1f1c); }
.wdm-banner:has(.wdm-bellbtn:is(:hover, :focus-visible)) .wdm-bn-bell { fill: #fff; }
.wdm-bellbtn i {
    position: absolute;
    top: 8%;
    right: 4%;
    min-width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    padding: 0 calc(4 * var(--u));
    background: var(--fav, #d8302c);
    color: var(--fav-ink, #fff);
    font: normal calc(13 * var(--u))/calc(18 * var(--u)) Mono, Consolas, monospace !important;
    text-align: center;
}
.wdm-bellbtn i[hidden] { display: none; }

/* The banner's plates (title, name, level, bell, room code) have no outline. */
.wdm-bn-plateL, .wdm-bn-plateR, .wdm-bn-roomM-fill,
html.theme-light :is(.wdm-bn-plateL, .wdm-bn-plateR, .wdm-bn-roomM-fill),
.wdm-banner:has(.wdm-bellbtn:is(:hover, :focus-visible)) .wdm-bn-plateNt { stroke: none; }


/* ── Phone ──
   home-menu.js draws the banner about twice as big on a phone (--wdm-k goes
   up to 2.4) and switches it to the compact layout: no name, no NO W-BUCKS?
   plate, the room code over the title plate. The infobar scales with the
   same --q, so its tabs shrink to their contents to leave the line room. */
.wdm-chrome.is-compact .wdm-bn-name,
.wdm-chrome.is-compact .wdm-bn-plateM { display: none !important; }
.wdm-chrome.is-compact .wdm-bn-title { font-size: 34px; }
.wdm-chrome.is-compact .wdm-bn-roomM-label { font-size: 18px; }
.wdm-chrome.is-compact .wdm-bn-roomM-code { font-size: 34px; }
.wdm-chrome.is-compact .wdm-tab { width: auto; padding-left: calc(.9 * var(--q)); padding-right: calc(2.2 * var(--q)); }
.wdm-chrome.is-compact .wdm-tab--r { padding-left: calc(2.2 * var(--q)); padding-right: calc(.6 * var(--q)); }
.wdm-chrome.is-compact .wdm-infobar p {
    font-size: calc(1.15 * var(--q));
    max-width: 94cqw;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%);
}
.wdm-chrome.is-compact .wdm-links a { width: calc(3.6 * var(--q)); height: calc(1.9 * var(--q)); --lean: calc(1.098 * var(--q)); }
.wdm-chrome.is-compact .wdm-links svg { width: calc(1.2 * var(--q)); height: calc(1.2 * var(--q)); }

/* ── Look experiments (dev menu's Look checklist, home-menu.js LOOKS) ──
   Ways to make the buttons read on a dark wallpaper. Each one is a class on
   <html>, so any mix works. --ac is the slab's accent; Colour-from-wallpaper
   swaps it for the picture's own (--wp-accent, set by menu-wallpaper.js). */
.wdm-wedge { --ac: #fff; }
.wdm-wedge[data-k="mp"] { --ac: #ff4f9a; }
.wdm-wedge[data-k="shop"] { --ac: #ffb347; }
.wdm-wedge[data-k="sp"] { --ac: #8d6bff; }
.wdm-wedge[data-k="lb"] { --ac: #3ddc84; }
.wdm-wedge[data-k="about"] { --ac: #4aa8ff; }
.wdm-wedge[data-k="settings"] { --ac: #b6bfcc; }
html .wdm-wedge[data-k] { --ac: var(--btn-accent, var(--accent, #f8d08f)); }
html.look-wpcolor .wdm-wedge[data-k] { --ac: var(--wp-accent, #fff); }

html .wdm-wedge-hit { fill: color-mix(in srgb, var(--ac) 42%, rgb(12 14 14)); fill-opacity: var(--slab-o, .75); }
html .wdm-wedge-light { fill: color-mix(in srgb, var(--ac) 55%, rgb(40 42 42)); }
/* Buttons use my accent colour: the worked-out slab and squares for the signup
   colours (game/colors.js ACCENT_TUNE), when the accent is one of them. */
html:not(.look-wpcolor) .wdm-wedge-hit { fill: var(--slab-c, color-mix(in srgb, var(--ac) 42%, rgb(12 14 14))); }
html:not(.look-wpcolor) .wdm-wedge-light { fill: var(--sq-c, color-mix(in srgb, var(--ac) 55%, rgb(40 42 42))); }

html.look-edge .wdm-wedge-hit { stroke: var(--ac); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ac) 70%, transparent)); }

html.look-text .wdm-wedge-name { fill: var(--ac); filter: drop-shadow(0 2px 3px rgb(0 0 0 / .7)); }
html.look-text .wdm-wedge-icon { fill: var(--ac); color: var(--ac); }

html.look-lighter .mm-scene.is-live .mm-scene-stage::after { background: rgba(0, 0, 0, 0.45); }

html.look-panel .wdm-traced::before {
    content: '';
    position: absolute;
    inset: 12% 14%;
    background: rgb(244 242 238 / .14);
    border: 1px solid rgb(255 255 255 / .25);
    backdrop-filter: blur(14px) saturate(1.2);
    pointer-events: none;
}

/* Hovering a Home button swells it 4% around its own centre (--cx, --cy are set
   by home-menu.js drawWedge). */
.wdm-wedge { transform-origin: var(--cx, 50%) var(--cy, 50%); transition: transform .2s; }
.wdm-wedge:has(.wdm-wedge-hit:hover) { transform: scale(1.04); }

/* Guests get red Home buttons until they sign up and pick their own colour.
   Last in the file so it beats the plain and light-theme slab fills. */
html.is-guest .wdm-wedge-hit { fill: var(--fav, #d8302c); fill-opacity: 1; }
html.is-guest .wdm-wedge-light { fill: var(--fav-deep, #a82220); fill-opacity: 1; }