/* ===========================
   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: #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; }
.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;
    top: calc(3.6 * var(--q));
    left: calc(7.8125 * var(--q));
    right: calc(7.8125 * var(--q));
    height: calc(.416667 * var(--q));
    clip-path: polygon(0 0, 100% 0, calc(100% - calc(.415 * var(--q))) 100%, calc(.415 * var(--q)) 100%);
    background: var(--line, #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));
    clip-path: polygon(calc(.5 * var(--q)) 0, 100% 0, calc(100% - calc(.5 * var(--q))) 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; }
.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: the six traced buttons, placed in % of the window by home-menu.js. */
.wdm-traced {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wdm-tcard {
    position: absolute;
    display: block;
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transition: filter .12s;
}
.wdm-tcard:hover { filter: brightness(1.15); }
.wdm-tcard:focus-visible { outline: none; filter: brightness(1.3) ; }
.wdm-tcard:active { filter: brightness(.88); }
.wdm-card-body, .wdm-card-top {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.wdm-traced-label {
    fill: #fff;
    stroke: #0d0d0d;
    stroke-width: 6px;
    paint-order: stroke fill;
    stroke-linejoin: miter;
}
.wdm-globe {
    position: absolute;
    aspect-ratio: 1;
    width: auto;
    transform: translateX(-50%);
    pointer-events: none;
}
.wdm-art {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.wdm-art svg { display: block; width: 100%; height: 100%; }
.wdm-art svg g, .wdm-art svg path, .wdm-art svg rect, .wdm-art svg polygon, .wdm-art svg circle { fill: inherit; }
.wdm-art .wdm-spin { animation: wdm-spin 6s linear infinite; }
.wdm-art .wdm-pc { transform-box: fill-box; animation: wdm-float 2.4s ease-in-out infinite; }
@keyframes wdm-spin { to { transform: rotate(360deg); } }
@keyframes wdm-float { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }
@media (prefers-reduced-motion: reduce) {
    .wdm-art .wdm-spin, .wdm-art .wdm-pc { animation: none; }
}

/* Sub-screens: a grid of buttons dressed like Home's traced ones: the same
   fill, edge, racing stripes (over the picture, as on Home) and outlined
   label, with a picture behind the label in the stripes' colour. Each button
   keeps a hue of its own, but only for the infobar line it lights. Stripe
   sizes are Home's (11 of its 1818 units, the thin one a third of that). */
.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-card {
    --mid: #a0a0a0;
    position: relative;
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    container-type: size;
    background: var(--wdm-fill);
    box-shadow: inset 0 0 0 .14cqw var(--wdm-edge);
    transition: filter .12s;
}
.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; }
.wdm-card::before {
    --d: linear-gradient(var(--wdm-deco), var(--wdm-deco));
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        var(--d) 0 0 / 100% .6cqw no-repeat,
        var(--d) 0 .9cqw / 100% .2cqw no-repeat,
        var(--d) 0 100% / 100% .6cqw no-repeat,
        var(--d) 0 calc(100% - .9cqw) / 100% .2cqw no-repeat;
}
.wdm-card:hover { filter: brightness(1.15); }
.wdm-card:focus-visible { outline: none; filter: brightness(1.3); }
.wdm-card:active { filter: brightness(.88); }
.wdm-card-art {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--wdm-deco);
}
.wdm-card-art svg { width: 70cqh; height: 70cqh; fill: currentColor; overflow: visible; }
.wdm-card-name {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #fff;
    /* As big as fits 80% of the width and 32% of the height, like Home. */
    font-size: min(32cqh, 80cqw / (var(--n, 12) * .6));
    line-height: 1;
    white-space: nowrap;
    -webkit-text-stroke: .18em #0d0d0d;
    paint-order: stroke fill;
}

/* The pictures' small motions, Home's gear and cursors in kind. */
.wdm-card-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 steps(60) 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-card-art svg * { animation: none !important; }
}
/* Join Room's count of open public rooms. */
/* Inside the button, so in the button's own units, under the stripes. */
.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; }

/* 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 {
    --wdm-fill: #111;
    --wdm-edge: #0d0d0d;
    --wdm-deco: #2c2c2c;
}
.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;
}
html.theme-light .wdm-banner > svg { filter: drop-shadow(0 calc(.3 * var(--q)) 0 rgb(0 0 0 / .14)); }
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: #a9a6a0; }
html.theme-light .wdm-panel { background: #eeece8; border-top-color: #a9a6a0; }
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-traced-label { fill: #141414; stroke: #fbfaf8; }
html.theme-light .wdm-tcard:hover { filter: brightness(.96); }
html.theme-light .wdm-tcard:focus-visible { filter: brightness(.92); }

html.theme-light .wdm-card-name { color: #141414; -webkit-text-stroke-color: #fbfaf8; }
html.theme-light .wdm-card:hover { filter: brightness(.96); }
html.theme-light .wdm-card:focus-visible { filter: brightness(.92); }
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: #d8302c; stroke: #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: #d8302c;
    color: #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; }