/* =========================== GLOBAL STYLES =========================== */ /* Default UI colours. Accent defaults to the stock gold so every accent part (header/footer trim, checker flags, card goldframe) matches out of the box; ColorTheme.apply() overrides these inline on when a colour is chosen and removes them (falling back to gold) when it's cleared. Theme (the card body/wash) stays white/neutral by default, so those vars are left unset. */ :root { --accent: #d0d20d; --accent-deep: #ac8f0d; --accent-soft: #eaeb92; /* Height of the fixed header and footer bands. Everything drawn inside them is sized from this rather than hard-coded, so a band that shrinks on a short viewport takes its contents down with it. Before this, the checkerboards kept 44x46px squares at every size and simply showed fewer of them — one single row of squares by 620px tall. Overridden in the height/width breakpoints at the bottom of this file. */ --chrome-h: 90px; /* How far in from the left edge the fixed wordmark reaches, plus a little air. Measured, not guessed: .site-logo is "WikiDerby.io" at 72px italic squashed to 0.63 of its width, sitting at left: 26px, so it ends at 299. Anything anchored to the top of the screen has to start after this or it runs underneath the mark, which stays put for the whole race. Overridden wherever the wordmark is resized — the same breakpoints as --chrome-h. */ --logo-clear: 314px; /* Surfaces and ink. The defaults are exactly the literals these replaced, so the classic theme renders as it always did; midnight repaints them below and every panel follows without a filter. */ --surface: #fff; /* The two steps below white. Half a dozen near-identical lavenders (#f2f4ff, #f4f6ff, #eef1ff …) collapsed into one token each: they were within a few units of one another, close enough that no one could pick them apart, and far enough apart to make a dark palette impossible to define. Classic shifts by at most 4/255 on a channel as a result. */ --surface-2: #f2f4ff; --surface-3: #e8e8f0; --ink: #111; --ink-strong: #000; /* The neutral text scale, darkest to faintest. Near-identical values were folded together the same way the surfaces were (#333/#37424f/#445 into one step); coloured inks — the blue links, the red warnings, the gold prices — are left alone, because their hue is the message. */ --ink-navy: #17233b; --ink-mid: #333; --ink-muted: #5b6474; --ink-faint: #888; /* The standard panel gradient: settings rows, dialogs, list rows, cards. It was written out thirteen times with alphas between 0.95 and 0.99 that nobody could tell apart, which is the same reason the surfaces above were folded into tokens — a literal repeated that many times cannot be repainted for a dark theme, and every one of those panels carries var(--ink) text that midnight turns near-white. White on white. */ --panel-top: rgba(255, 255, 255, 0.97); --panel-bottom: rgba(236, 240, 255, 0.97); /* The brand blue, as INK. Only the text uses are tokenised: the same hex is also a fill under white text in 32 places, and those want no theming at all. On white it is the link colour it always was; midnight needs it lifted, because #0032ff on a dark panel is a navy smudge. */ --ink-link: #0032ff; /* Theme slots. ColorTheme.apply() overrides these inline on when the player picks a theme colour, and REMOVES them when they clear it — at which point these are what shows through. They used to exist only as hardcoded white fallbacks inside each var() call, so clearing the theme colour under midnight put white cards back under white text. */ --theme-card: rgba(255, 255, 255, 0.72); --theme-tint: #ffffff; --theme-tint2: #eef0f4; --theme-wash: #fefefe; --theme-wash2: #f2f2f2; } * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; overflow-y: auto; } /* Child-scoped on purpose. An article is rendered as its own
inside the stage (see WikiSkin.pageHtml), so a bare `main` selector hits it too and turns the article into a centred flex ROW: the title, the CC BY-SA footer and the "Target reached!" panel get squeezed to ~140px and centred against a 12,000px-tall .wiki-content, i.e. thousands of pixels off screen, while the content itself overhangs both edges on a phone. Every rule meant for the app shell is `body > main`. */ body > main { flex: 1; width: min(100%, 2200px); margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 20px; } /* =========================== GRID LAYOUT =========================== */ .menu-stage { width: 100%; overflow: visible; padding: 120px 0; } .grid-container { display: grid; grid-template-columns: repeat(3, minmax(420px, 504px)); gap: 50px 170px; width: 100%; max-width: 2100px; justify-content: center; } /* Cards are things you click, not things you read, so a double-click on one should not leave its title highlighted the way it would on a web page. Scoped to the card class rather than to .grid-container: #menuGrid carries .grid-container on EVERY screen (see renderScreen), so a rule there is inherited by all of them, which is how the legal text, the About page, the shop and the settings all ended up unselectable. Keyed on .glass rather than on a direct child of the grid so the training difficulty bars — cards that sit two levels down — behave the same way. */ .glass { user-select: none; } /* ── Card menus never scroll ────────────────────────────────────────────── A menu is meant to be taken in at a glance, so the stage is exactly the space between the fixed header and footer and the page does not scroll. When the cards do not fit, MenuFit in script.js shrinks them via --menu-fit rather than letting the page grow. Only card screens opt in. The shop, the lobby lists and a race's article are lists that are supposed to scroll, so they never get this class — and :not(.wiki-reading) is belt-and-braces for a race started from here. The stage has to clip: a transform does not affect layout, so the grid's unscaled box still overflows even while it looks like it fits. That is the same property that lets MenuFit measure the natural size at any time without first undoing the scale. */ body.menu-fit:not(.wiki-reading) { height: 100dvh; min-height: 0; overflow: hidden; } body.menu-fit:not(.wiki-reading) main { min-height: 0; overflow: hidden; } body.menu-fit:not(.wiki-reading) .menu-stage { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } body.menu-fit:not(.wiki-reading) .grid-container { transform: scale(var(--menu-fit, 1)); transform-origin: center center; } /* Safety valve: below the floor in MenuFit the cards would be unreadable, so the page is allowed to scroll again rather than clipping them out of reach. */ body.menu-fit.menu-fit-overflow:not(.wiki-reading), body.menu-fit.menu-fit-overflow:not(.wiki-reading) main, body.menu-fit.menu-fit-overflow:not(.wiki-reading) .menu-stage { height: auto; overflow: visible; } .grid-container.is-exiting, .grid-container.is-entering, .grid-container.is-exiting-back, .grid-container.is-entering-back { pointer-events: none; } .grid-container.is-exiting .glass { animation: cardSlideOutLeft 260ms cubic-bezier(0.7, 0, 1, 0.35) forwards; animation-delay: var(--row-delay); } .grid-container.is-entering .glass { animation: cardSlideInRight 260ms cubic-bezier(0.04, 0.82, 0.18, 1) backwards; animation-delay: var(--row-delay); } .grid-container.is-exiting-back .glass { animation: cardSlideOutRight 260ms cubic-bezier(0.7, 0, 1, 0.35) forwards; animation-delay: var(--row-delay); } .grid-container.is-entering-back .glass { animation: cardSlideInLeft 260ms cubic-bezier(0.04, 0.82, 0.18, 1) backwards; animation-delay: var(--row-delay); } .training-container.is-exiting .training-screen { animation: trainingScreenOutLeft 260ms cubic-bezier(0.7, 0, 1, 0.35) forwards; } .training-container.is-entering .training-screen { animation: trainingScreenInRight 260ms cubic-bezier(0.04, 0.82, 0.18, 1) backwards; } .training-container.is-exiting-back .training-screen { animation: trainingScreenOutRight 260ms cubic-bezier(0.7, 0, 1, 0.35) forwards; } .training-container.is-entering-back .training-screen { animation: trainingScreenInLeft 260ms cubic-bezier(0.04, 0.82, 0.18, 1) backwards; } @keyframes cardSlideOutLeft { from { transform: translateX(0); opacity: 1; } 68% { opacity: 1; } to { transform: translateX(-135vw); opacity: 0; } } @keyframes cardSlideInRight { from { transform: translateX(135vw); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(0); opacity: 1; } } @keyframes cardSlideOutRight { from { transform: translateX(0); opacity: 1; } 68% { opacity: 1; } to { transform: translateX(135vw); opacity: 0; } } @keyframes cardSlideInLeft { from { transform: translateX(-135vw); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(0); opacity: 1; } } @keyframes trainingScreenOutLeft { from { transform: translateX(0); opacity: 1; } 68% { opacity: 1; } to { transform: translateX(-115vw); opacity: 0; } } @keyframes trainingScreenInRight { from { transform: translateX(115vw); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(0); opacity: 1; } } @keyframes trainingScreenOutRight { from { transform: translateX(0); opacity: 1; } 68% { opacity: 1; } to { transform: translateX(115vw); opacity: 0; } } @keyframes trainingScreenInLeft { from { transform: translateX(-115vw); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(0); opacity: 1; } } /* =========================== GLASS CARD COMPONENTS =========================== */ .glass { appearance: none; font: inherit; width: 100%; aspect-ratio: 13 / 8; background: rgba(255, 255, 255, 0.0); border-radius: 7px; padding: 10px 15px; box-shadow: inset 0 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 0 12px 9px rgba(255, 255, 255, 0.25), inset 0 0 30px 15px rgba(255, 255, 255, 0.15); position: relative; border-bottom: rgba(0, 0, 0, 0.267) 4px solid; transition: transform 0.2s ease; cursor: pointer; border: 0; will-change: transform, opacity; container-type: inline-size; } .glass:hover { transform: scale(1.1); z-index: 10; } .blur { position: absolute; top: 10px; left: 15px; right: 15px; bottom: 10px; /* --theme-card: the player's theme colour (white by default) */ background: var(--theme-card, rgba(255, 255, 255, 0.6)); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15.1px); -webkit-backdrop-filter: blur(15.1px); border: 1px solid rgba(255, 255, 255, 0.3); z-index: -1; } .blue-card { width: 100%; height: 100%; padding: 7px 10px; border-radius: 7px; border: 2px solid black; position: relative; } .blue-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 0% 0%, var(--theme-tint, #ffffff) 0%, transparent 50%), radial-gradient(circle at 100% 0%, var(--theme-tint2, #eef0f4) 0%, transparent 50%), radial-gradient(circle at 0% 100%, var(--theme-tint2, #eef0f4) 0%, transparent 50%), radial-gradient(circle at 100% 100%, var(--theme-tint, #ffffff) 0%, transparent 50%), linear-gradient(135deg, var(--theme-tint, #ffffff), var(--theme-tint2, #eef0f4)); background-blend-mode: normal; border-radius: 5px; z-index: -1; -webkit-mask: linear-gradient(#fff 0 0) exclude, linear-gradient(#fff 0 0) 50% 90% / 93% 65% no-repeat; mask: linear-gradient(#fff 0 0) exclude, linear-gradient(#fff 0 0) 50% 87% / 93% 64% no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; } .inner { height: 100%; background: rgba(255, 255, 255, 0.0); border-radius: 7px; border: 1.5px solid rgba(63, 63, 63, 0.671); box-shadow: inset 0 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 0 12px 9px rgba(255, 255, 255, 0.25), inset 0 0 30px 15px rgba(255, 255, 255, 0.15); padding: 1px 1px; } .square { position: absolute; background-color: #0033ff00; width: 97%; height: 65%; top: 65%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 2px 3px rgba(255, 255, 255, 0.5), 0 0 12px 9px rgba(255, 255, 255, 0.25), 0 0 30px 15px rgba(255, 255, 255, 0.15); z-index: 2; } /* =========================== CARD PATTERNS =========================== */ .chess { position: relative; width: 100%; height: 30%; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.171); background: repeating-conic-gradient(#ffffff27 0 25%, #0000 0 50%) 50% / 30px 30px; } /* =========================== GOLD FRAME COMPONENTS =========================== */ .goldframe { width: 100%; height: 70%; padding: 5px 10px 10px 10px; transition: transform 0.2s ease; } .glass:hover .goldframe { transform: scale(1.09) translateY(5px); } .goldframe2 { width: 100%; height: 100%; /* --accent-deep/--accent: the player's accent colour (ColorTheme.apply); unset, the frame keeps its stock gold. */ background: radial-gradient(circle at 0% 0%, var(--accent-deep, #ac8f0d) 0%, transparent 50%), radial-gradient(circle at 100% 0%, var(--accent, #d0d20d) 0%, transparent 50%), radial-gradient(circle at 0% 100%, var(--accent, #d0d20d) 0%, transparent 50%), radial-gradient(circle at 100% 100%, var(--accent-deep, #ac8f0d) 0%, transparent 50%), linear-gradient(135deg, var(--accent-deep, #ac8f0d), var(--accent, #d0d20d)); border-radius: 1px; border-left: 4px solid black; border-right: 4px solid black; border-top: 2px solid black; border-bottom: 2px solid black; padding: 4px 0px; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.247); } .goldframe3 { width: 100%; height: 100%; /* black → accent colour → black (stock gold when no colour is set) */ background: linear-gradient(to bottom, black 0%, var(--accent-deep, #ac8f0d) 10%, var(--accent-deep, #ac8f0d) 30%, var(--accent, #d0d20d) 70%, var(--accent, #d0d20d) 90%, black 100%); padding-left: 4px; padding-right: 4px; border-radius: 1px; } /* `contain`, not `cover`. The frame is wide and short while the card art is square, so cover crops the subject's head and feet off — which is fatal when the subject is a single figure. Contain shows the whole thing and lets the white studio background of the art meet the frame, so the letterboxing is invisible rather than looking like a mistake. */ /* is an inline wrapper with no box of its own, so without this the img inside it sizes against the line box instead of the frame. */ .goldframe3 picture { display: block; width: 100%; height: 100%; } .goldframe3 img { background-color: var(--surface); width: 100%; height: 100%; object-fit: contain; } /* =========================== TEXT ON SURFACES =========================== One face throughout. What changes is the fill and the colour of the edge around it, and both are read off whatever the text is standing on — the same trick the Mario Kart Wii menus play, where a card title and the "Main Menu" label share a typeface and share nothing else. Over card art the text is white with a hard black edge, because the art underneath is arbitrary and only black is guaranteed to separate from it. On the flat panels of the multiplayer screens it inverts: dark ink with a white edge, which lifts the letters off a panel that is itself translucent over the page background, without shouting the way white-on-black would in a place with no photo to compete with. Set --edge and --edge-w per surface; the recipe below does the rest. Eight directions rather than -webkit-text-stroke, which is centred on the glyph path and eats into the letterform — this sits entirely outside it. */ .cardtitle, .cardtitle2, .mp-title, .mp-lobby-title { text-shadow: calc(var(--edge-w) * -1) calc(var(--edge-w) * -1) 0 var(--edge), var(--edge-w) calc(var(--edge-w) * -1) 0 var(--edge), calc(var(--edge-w) * -1) var(--edge-w) 0 var(--edge), var(--edge-w) var(--edge-w) 0 var(--edge), calc(var(--edge-w) * -1) 0 0 var(--edge), var(--edge-w) 0 0 var(--edge), 0 calc(var(--edge-w) * -1) 0 var(--edge), 0 var(--edge-w) 0 var(--edge); } /* =========================== CARD TITLES =========================== */ .cardtitle { /* Over card art: white on hard black, the heaviest treatment there is. */ --edge: #000; --edge-w: 3px; font-family: Arial, sans-serif; font-weight: bold; font-size: clamp(16px, 11.5cqw, 55px); color: rgb(255, 255, 255); text-align: center; border-radius: 7px; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 3; } .cardtitle2 { /* The echo behind the title: same colours, wider edge, so it reads as the same words further away rather than as a second label. */ --edge: #000; --edge-w: 5px; font-family: Arial, sans-serif; font-weight: bold; font-size: clamp(14px, 10cqw, 48px); color: rgba(255, 255, 255, 0.5); text-align: center; border-radius: 7px; opacity: 0.3; white-space: nowrap; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); z-index: 1; } /* =========================== CARD BARS =========================== The stacked variant of the same card: a menu laid down a column instead of across a grid, with the art half taken out. Used by the training difficulties and by every card menu below the main one — only the main menu keeps the card shape, because only its cards carry art for that shape to be built around. Everything here overrides the shared card styling above rather than forking it, so the colours and the title treatment keep working as they change. createCard() in script.js drops .square, .cardtitle2 and .goldframe from the markup; what is left is layout. */ .card-bars { display: flex; flex-direction: column; gap: 16px; width: min(720px, 92vw); margin: 0 auto; } .card-bars .glass { /* .glass is a 13/8 card by default; these are bars, so the ratio goes and a height takes over. */ aspect-ratio: auto; height: 88px; padding: 6px 10px; } /* The card lift is scale(1.1). On a bar that is 720px wide that throws the edges outside the column and under the neighbours; a smaller lift reads the same at this width. */ .card-bars .glass:hover { transform: scale(1.03); } /* The gradient's mask carves a window out of the middle so the colour reads as a frame around the card art. There is no art here, so the mask would just be a hole down the middle of the bar - drop it and let the colour fill. */ .card-bars .blue-card::before { -webkit-mask: none; mask: none; } .card-bars .chess { height: 100%; display: flex; align-items: center; justify-content: center; } /* .cardtitle is sized in cqw - a percentage of the container's own width - and pinned to the top edge. A bar is two to three times wider than a card, so the card's multiplier runs straight into the clamp ceiling and every title comes out at the maximum; a smaller one lands back inside the range. The pinning goes too, and the flex centring above places it instead. */ .card-bars .cardtitle { position: static; transform: none; font-size: clamp(20px, 4.2cqw, 34px); } @media (max-width: 560px) { .card-bars { gap: 12px; } .card-bars .glass { height: 72px; } } /* =========================== HEADER =========================== */ .mkwii-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--chrome-h); overflow: hidden; border-bottom: 4px solid var(--accent-soft, #b0b0ff); flex-shrink: 0; z-index: 100; } .header-bg { position: absolute; inset: 0; } .header-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(var(--theme-wash, #fefefe), var(--theme-wash, #fefefe) 3px, var(--theme-wash2, #f2f2f2) 3px, var(--theme-wash2, #f2f2f2) 6px); } /* MKWii checkered-flag trim, drawn in CSS so it tints with the accent colour. A single 4-quadrant conic gradient tiles into a 2×2 checkerboard, then a left→right mask fades it in from transparent to fully visible. Falls back to the original PNG colours (#ddd9f0 / #696bb6) when unset. */ /* =========================== SITE LOGO (TEMPORARY) =========================== */ /* Placeholder wordmark until a real one exists — "WikiDerby.io" set nearly the full height of the header bar it sits in. Mixed case, not uppercased: the camel hump in WikiDerby is what makes the two words readable at a glance. Same face and weight as .cardtitle (the menu tiles), just italic, so it reads as part of the same set rather than as a pasted-on logo. --logo-sx / --logo-sy squash the wordmark without changing its type size, so it can be made to fit a band it would otherwise overflow while staying just as legible on a stream. Tune them live with ?logotune=1 (public/logo-tuner.js) and paste the numbers back here — they are plain multipliers, 1 = untouched. */ /* Fixed to the viewport rather than parented to the header, because the header leaves during a race and would take the wordmark with it. The element spans the header band (same height, so `align-items: center` reproduces the old `top: 50%` centring) and every media query that resizes the bar resizes this to match. z-index sits above the article stage (300) and the retreating chrome (340), but far below the modal range (900+) so dialogs still cover it. */ .site-logo { position: fixed; top: 0; left: 26px; height: 90px; display: flex; align-items: center; /* The bar used to clip this; keep doing so now that it stands alone. */ overflow: hidden; z-index: 341; pointer-events: none; user-select: none; white-space: nowrap; font-family: Arial, sans-serif; font-weight: bold; font-style: italic; font-size: 72px; line-height: 1; /* Squash factors, overridable at runtime by the tuner. Tuned against a live race rather than the menu, which is the view that has to hold up. */ --logo-sx: 0.63; --logo-sy: 0.81; /* Slid sideways by the back-button rule below rather than by overwriting `transform`, so the squash and the slide can coexist. */ --logo-shift: 0px; transform: translateX(var(--logo-shift)) scale(var(--logo-sx), var(--logo-sy)); /* Squash toward the left edge so the wordmark stays pinned to its margin instead of drifting inward as it narrows. */ transform-origin: left center; color: var(--accent, #d0d20d); /* Eight-direction shadow, the same outline recipe as .cardtitle. Preferred over -webkit-text-stroke here: stroke is centred on the path and eats into thin cursive strokes, while this sits entirely outside the glyph. The outline colour is NOT fixed at black. The glyphs are painted in the player's accent, and a black accent made the fill and the outline the same colour: the wordmark collapsed into a silhouette, and on midnight's near-black page it vanished completely. ColorTheme.apply() flips this to a light outline when the accent is too dark to carry a black one. */ text-shadow: -3px -3px 0 var(--logo-outline, #000), 3px -3px 0 var(--logo-outline, #000), -3px 3px 0 var(--logo-outline, #000), 3px 3px 0 var(--logo-outline, #000), -3px 0 0 var(--logo-outline, #000), 3px 0 0 var(--logo-outline, #000), 0 -3px 0 var(--logo-outline, #000), 0 3px 0 var(--logo-outline, #000); transition: transform 120ms ease; } /* Back button occupies the same corner once there's history to go back to. Slide rather than hide — a wordmark that vanishes on navigation reads as a bug. 78px clears the button's 26px offset plus its 64px width. Matched via :has() rather than the old sibling combinator, because the two no longer share a parent — the wordmark moved out of the header. Excluded during a race: the button stays flagged visible while the header carries it off-screen, and without the guard the wordmark would shuffle sideways to clear something the player can no longer see. */ body:not(.wiki-reading):has(.back-button.is-visible) .site-logo { --logo-shift: 78px; } /* Race start: the chrome leaves, the wordmark stays — at full size, through the part of the session anyone actually broadcasts. It deliberately does NOT shrink here: a mark that resizes the moment the race begins reads as smaller in every frame that gets streamed, which is backwards. Use --logo-sx / --logo-sy to fit it instead; squashing keeps the type size, and with it the legibility, that shrinking throws away. The route is anchored to y=0 and would run straight under it, so the route keeps its hands off this corner — see --logo-clear below. */ @media (max-height: 820px) { .site-logo { height: 60px; font-size: 48px; } } @media (max-height: 620px) { .site-logo { height: 46px; font-size: 36px; } } @media (max-width: 480px) { .site-logo { height: 50px; font-size: 30px; left: 16px; } } /* Width and square both scale off the band height, so the pattern keeps its proportions instead of losing rows: two rows of squares at every size, and the same ~3.44:1 band that 310px gave against the original 90px header. */ .checkerboard { position: absolute; top: 0; right: 0; width: calc(var(--chrome-h) * 3.44); height: 100%; opacity: 0.85; background-image: conic-gradient( var(--accent-soft, #ddd9f0) 0deg 90deg, transparent 90deg 180deg, var(--accent-soft, #ddd9f0) 180deg 270deg, transparent 270deg 360deg); background-size: calc(var(--chrome-h) / 2) calc(var(--chrome-h) / 2); background-position: top right; -webkit-mask-image: linear-gradient(to right, transparent, #000 72%); mask-image: linear-gradient(to right, transparent, #000 72%); } .back-button { appearance: none; position: absolute; top: 50%; left: 26px; width: 64px; height: 54px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-18px); transition: opacity 120ms ease, transform 120ms ease; z-index: 2; } .back-button:disabled { cursor: default; } .back-button::before { content: ""; position: absolute; top: 50%; left: 22px; width: 24px; height: 24px; border-left: 7px solid #1f1f1f; border-bottom: 7px solid #1f1f1f; transform: translateY(-50%) rotate(45deg); filter: drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.9)); } .back-button.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); } .back-button:hover::before { border-color: #0032ff; } /* =========================== PROFILE BUTTON =========================== */ /* Profile: a square mini-card, styled like a menu tile (wikichannel/settings), pinned to the top-right corner. */ .profile-btn { appearance: none; font: inherit; position: fixed; background: transparent; padding: 0; border: 0; cursor: pointer; z-index: 9999; will-change: transform; transition: transform 0.2s ease; transform-origin: center; } .profile-btn:hover { z-index: 10000; transform: scale(1.08); } .profile-card { width: 100%; height: 100%; box-sizing: border-box; padding: 7px; border-radius: 16px; background: var(--theme-card, rgba(255, 255, 255, 0.72)); border: 3px solid var(--accent, #d0d20d); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .profile-avatar { width: 100%; height: 100%; border-radius: 9px; display: block; background-color: var(--surface); background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } /* =========================== DISCORD BUTTON =========================== */ /* The profile card's twin in the opposite corner: same mini-card language (radius, accent border, blur, hover lift), smaller because it is a secondary action and shouldn't compete with the profile for attention. Sized/placed here rather than in JS — unlike .profile-btn there is nothing dynamic about it, so it costs no script and can't flash unpositioned. */ .discord-btn { position: fixed; width: 64px; height: 64px; right: 44px; /* Clears the 90px fixed footer. Both values track the footer's own height breakpoints below — change one, change the other. */ bottom: 108px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 9999; will-change: transform; transition: transform 0.2s ease; transform-origin: center; -webkit-tap-highlight-color: transparent; } .discord-btn:hover { z-index: 10000; transform: scale(1.08); } .discord-btn:focus-visible { outline: 3px solid var(--accent, #d0d20d); outline-offset: 4px; border-radius: 14px; } .discord-card { width: 100%; height: 100%; box-sizing: border-box; padding: 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--theme-card, rgba(255, 255, 255, 0.72)); border: 3px solid var(--accent, #d0d20d); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .discord-logo { width: 100%; height: auto; display: block; /* Takes the theme accent rather than Discord blurple, so the mark recolours with the rest of the UI. The is fill="currentColor", which is what lets a single colour property drive it. */ color: var(--accent, #d0d20d); } @media (max-height: 820px) { .discord-btn { bottom: 78px; } .notif-layer { bottom: 158px; } } @media (max-height: 620px) { .discord-btn { bottom: 60px; width: 54px; height: 54px; } /* Clears the shrunken button (60 + 54 + air) — and the cards themselves get shorter here, because at this height a 300px column would fill the screen. */ .notif-layer { bottom: 130px; } .notif-card { width: 260px; } } /* The footer also shrinks to 50px on narrow screens — a WIDTH query, so it can apply on a tall phone where neither height query above does. Must stay last of the three: same specificity, so source order is what decides when a small phone matches both this and a max-height rule. */ @media (max-width: 480px) { .discord-btn { bottom: 68px; } /* The Discord button is already hidden by the 768px rule below, so this only has to clear the 50px footer. */ .notif-layer { right: 16px; bottom: 66px; } } /* =========================== FRIENDS BUTTON + PANEL =========================== */ /* Third of the corner mini-cards, same language as .profile-btn and .discord-btn (radius, accent border, blur, hover lift), sized like Discord's because it is also a secondary action. Placed to the LEFT of the profile card, not below it. Below would put it at y 172-236, straight through the multiplayer room header at y 139-181 — the collision the room layout already had to solve once for the profile button. At 64px tall from y 72 it ends at 136, clear of the header band. */ .friends-btn { position: fixed; width: 64px; height: 64px; top: 72px; /* 44px (the profile/discord gutter) + 100px (profile width) + 16px gap. */ right: 160px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 9999; will-change: transform; transition: transform 0.2s ease; transform-origin: center; -webkit-tap-highlight-color: transparent; } .friends-btn:hover { z-index: 10000; transform: scale(1.08); } .friends-btn:focus-visible { outline: 3px solid var(--accent, #d0d20d); outline-offset: 4px; border-radius: 14px; } .friends-card { width: 100%; height: 100%; box-sizing: border-box; padding: 6px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--theme-card, rgba(255, 255, 255, 0.72)); border: 3px solid var(--accent, #d0d20d); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink, #16161d); overflow: hidden; } /* Undrawn icon slots render nothing at all (public/icons.js), so this must not reserve space until there is art in it — otherwise the label sits off-centre against a gap. :empty is what collapses it. */ .friends-icon { display: block; font-size: 18px; line-height: 1; } .friends-icon:empty { display: none; } /* The count of friends online. The label alone would be a button that says what it is and nothing more; the number is the reason to look at it. */ .friends-count { font-size: 19px; font-weight: 800; line-height: 1; } .friends-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; opacity: 0.72; } /* Pending requests: the one thing here that is asking for an answer, so it gets the accent and sits proud of the card corner. */ .friends-badge { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: var(--accent, #d0d20d); color: var(--ink, #16161d); border: 2px solid var(--theme-card, #fff); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; pointer-events: none; } /* ── The panel ── */ .friends-panel { position: fixed; /* Below the PROFILE card (y 56-156), not just below the friends button that opens it. The two share this corner, and the panel's z-index is above both, so anything less would draw over the profile card's bottom edge. */ top: 164px; right: 44px; width: 300px; max-height: min(60vh, 460px); display: flex; flex-direction: column; z-index: 10001; box-sizing: border-box; padding: 14px; border-radius: 16px; background: var(--theme-card, rgba(255, 255, 255, 0.92)); border: 3px solid var(--accent, #d0d20d); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink, #16161d); } .friends-panel[hidden] { display: none; } .friends-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .friends-panel-title { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; } .friends-panel-sub { font-size: 11px; opacity: 0.68; } .friends-add { display: flex; gap: 6px; margin-bottom: 10px; } .friends-add input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 9px; border: 2px solid rgba(0, 0, 0, 0.18); background: var(--surface, #fff); color: inherit; } .friends-add input:focus { outline: 2px solid var(--accent, #d0d20d); outline-offset: 1px; } .friends-btn-sm { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 9px; border: 2px solid var(--accent, #d0d20d); background: var(--accent, #d0d20d); color: var(--ink, #16161d); cursor: pointer; white-space: nowrap; } .friends-btn-sm.is-quiet { background: transparent; border-color: rgba(0, 0, 0, 0.2); } .friends-btn-sm:hover { filter: brightness(1.06); } .friends-btn-sm:disabled { opacity: 0.5; cursor: default; } /* The list is the only part that scrolls — the add box and the heading stay put however many friends there are. */ .friends-scroll { overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; } .friends-section { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin: 8px 0 4px; } .friends-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .friends-row:first-of-type { border-top: 0; } .friends-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); } .friends-dot.is-online { background: #3fbf5f; box-shadow: 0 0 0 2px rgba(63, 191, 95, 0.25); } .friends-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .friends-row .friends-btn-sm { font-size: 11px; padding: 4px 8px; } .friends-empty { font-size: 12px; opacity: 0.7; line-height: 1.45; padding: 6px 0; } .friends-note { font-size: 11.5px; line-height: 1.45; opacity: 0.8; } .friends-error { font-size: 12px; color: #c0392b; font-weight: 600; padding: 4px 0 0; } /* Track the same height breakpoints the Discord button uses — the corner furniture has to shrink together or it stops looking like one set. */ @media (max-height: 620px) { .friends-btn { width: 54px; height: 54px; top: 64px; right: 150px; } .friends-count { font-size: 16px; } } /* Narrow screens have no room for a third card in the top-right row, so the button moves to the opposite corner and stacks above Discord — NOT hidden. Hiding it would make friends unreachable on a phone, and the panel is only ever opened from this button. The bottom values clear Discord at each of its own breakpoints (64px tall at 108/78/68, 54px at 60). */ @media (max-width: 720px) { .friends-btn { top: auto; right: 44px; bottom: 188px; } /* A sheet rather than a dropdown: anchoring a 300px panel to a button that is now near the bottom edge would push it off-screen. */ .friends-panel { top: auto; right: 12px; left: 12px; bottom: 12px; width: auto; max-height: min(70vh, 460px); } } @media (max-width: 720px) and (max-height: 620px) { .friends-btn { bottom: 128px; right: 44px; } } @media (max-width: 480px) { .friends-btn { bottom: 148px; } } /* A race takes the whole screen and the corner furniture gets out of the way — the same rule the profile and Discord buttons follow. */ body.wiki-reading .friends-btn, body.wiki-reading .friends-panel { display: none; } /* =========================== TRAINING MODE =========================== */ /* The user-select: auto that used to be here is gone with the blanket rule it was fighting — training was the one screen that opted back into selectable text, and now every screen is selectable by default. */ .training-container { display: block; max-width: min(1180px, calc(100vw - 40px)); margin: 0 auto; } .training-screen { width: 100%; padding: 16px 0 120px; color: var(--ink); will-change: transform, opacity; } .training-route { position: sticky; top: 106px; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 18px; width: min(100%, 980px); min-height: 74px; margin: 0 auto 24px; padding: 10px 18px; border: 3px solid #000; border-radius: 7px; background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 3px rgba(176, 176, 255, 0.55); } .route-pill { min-width: 260px; max-width: 360px; padding: 8px 14px; border: 2px solid #101010; border-radius: 6px; background: var(--surface); color: var(--ink-link); font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; line-height: 1.1; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .route-pill.is-empty { color: rgba(0, 0, 0, 0.38); } /* ── Rally: the waypoint ── Smaller than the two ends, because it is a place you pass through rather than a place the race is between — and it goes green once stamped, which is the only feedback the header ever gives. */ .route-pill--via { min-width: 180px; max-width: 260px; font-size: 20px; padding: 6px 12px; } .route-pill--via.is-stamped { border-color: #2e7d32; color: #2e7d32; background: color-mix(in srgb, #2e7d32 10%, var(--surface)); } /* The target while the waypoint is still unstamped. Dimmed rather than hidden: you are allowed to walk over it, it just will not end anything yet. */ .route-pill.is-shut { opacity: 0.5; border-style: dashed; } .route-target-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; } .route-target-desc { max-width: 360px; font-family: Arial, sans-serif; font-size: 13px; font-style: italic; color: var(--ink-muted); text-align: center; line-height: 1.35; } .route-to { color: var(--ink-strong); font-family: Arial, sans-serif; font-size: 30px; font-weight: bold; letter-spacing: 0; text-shadow: 2px 2px 0 rgba(176, 176, 255, 0.9); } .roulette-area { display: flex; align-items: center; justify-content: center; min-height: 280px; margin: 16px auto 24px; } .roulette-area[hidden], .article-stage[hidden] { display: none; } .roulette-card { display: grid; place-items: center; width: min(760px, 100%); min-height: 240px; padding: 28px; border: 5px solid #f6d83f; border-radius: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)), #55129a; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.36), inset 0 0 0 4px rgba(0, 0, 0, 0.22); color: #ffe45c; font-family: Arial, sans-serif; text-align: center; } .roulette-label { margin-bottom: 18px; color: #fff; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 0 #000; } .roulette-title { min-height: 76px; color: #ffe45c; font-size: 58px; font-weight: bold; line-height: 1.05; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000; } .roulette-title.is-ticking { animation: rouletteTick 55ms linear; } .roulette-title.is-selected { animation: rouletteSelected 420ms ease-out; } @keyframes rouletteTick { from { transform: translateY(-10px); opacity: 0.35; } to { transform: translateY(0); opacity: 1; } } @keyframes rouletteSelected { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } } /* The only way out of a race once the header has retreated. Kept quiet: it is a permanent fixture on screen during every race, including the frames a streamer broadcasts, so it reads as chrome rather than as a call to action. */ .training-quit { padding: 5px 12px; border: 2px solid rgba(0, 0, 0, 0.55); border-radius: 6px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; } .training-quit:hover { background: #ffd9d9; border-color: #000; } .training-progress { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(100%, 980px); min-height: 52px; margin: 0 auto 14px; padding: 10px 14px; border: 2px solid rgba(0, 0, 0, 0.34); border-radius: 7px; background: color-mix(in srgb, var(--surface) 88%, transparent); font-family: Arial, sans-serif; font-size: 18px; } .progress-trail { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; color: var(--ink-link); font-weight: bold; } .progress-step { white-space: nowrap; } .article-stage { width: min(100%, 980px); margin: 0 auto; } /* Colour theme tokens (light default; dark + auto below). */ .article-stage, .rc-scroll { --wiki-bg: #fff; --wiki-fg: #202122; /* --color-base */ --wiki-link: #36c; /* --color-progressive */ --wiki-border: #a2a9b1; /* --border-color-base */ --wiki-input-border: #72777d; --wiki-soft: #f8f9fa; /* --background-color-neutral-subtle */ --wiki-th: #eaecf0; /* --background-color-neutral */ --wiki-muted: #54595d; /* --color-subtle */ --wiki-burnt: #3a2f27; /* charred link (Fahrenheit 451) */ } /* Wikipedia "night" (skin-theme-clientpref-night) tokens. */ .article-stage[data-wiki-color="dark"], .rc-scroll[data-wiki-color="dark"] { --wiki-bg: #101418; --wiki-fg: #eaecf0; --wiki-link: #88a3e8; --wiki-border: #54595d; --wiki-input-border: #72777d; --wiki-soft: #27292d; --wiki-th: #2a2d31; --wiki-muted: #a2a9b1; --wiki-burnt: #8d7f72; } @media (prefers-color-scheme: dark) { .article-stage[data-wiki-color="auto"], .rc-scroll[data-wiki-color="auto"] { --wiki-bg: #101418; --wiki-fg: #eaecf0; --wiki-link: #88a3e8; --wiki-border: #54595d; --wiki-input-border: #72777d; --wiki-soft: #27292d; --wiki-th: #2a2d31; --wiki-muted: #a2a9b1; --wiki-burnt: #8d7f72; } } /* ── Reading an article: it becomes the whole page, in every mode ── Fixed layer below the game header (so the header's Back button still works); the game HUD (route, racers, moves) floats on top. */ body.wiki-reading .bg-slide { opacity: 0 !important; } body.wiki-reading .profile-btn, body.wiki-reading .notif-layer, body.wiki-reading .discord-btn { display: none; } /* Drop the will-change containing block (it would trap the fixed article layer inside the mode screen) and strip the width caps between screen and article. */ body.wiki-reading .multiplayer-screen, body.wiki-reading .training-screen, body.wiki-reading .custom-screen, body.wiki-reading .challenges-screen { will-change: auto; } body.wiki-reading .training-container, body.wiki-reading .grid-container { transform: none; } body.wiki-reading .multiplayer-container { max-width: none; margin: 0; } body.wiki-reading > main { max-width: none; width: 100%; padding: 0; } body.wiki-reading .menu-stage { padding: 0; } body.wiki-reading .mp-game { position: static; width: 100%; max-width: none; margin: 0; padding: 0; } body.wiki-reading .mp-game-body { display: block; } body.wiki-reading .article-stage { position: fixed; /* Full-bleed: the header and footer retreat when a race starts (see "Race start" below), so the article owns the whole viewport. */ inset: 0; z-index: 300; width: 100vw; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--wiki-bg); } /* ── Race start: the chrome gets out of the way ─────────────────────────────── The header pulls up, flinches — as if it catches itself halfway — then commits and leaves for good. The footer mirrors it downward. After this the player sees nothing but the Wikipedia article. Both bars are lifted above the article stage for the duration, because the stage is opaque and z-index 300: left at their usual 100 they would simply be covered on frame one and the retreat would never be seen. The hidden transform is declared OUTSIDE the animation on purpose. Potato mode and prefers-reduced-motion both kill animations outright, and the chrome still has to end up gone — with the end state on the rule itself, those users get the same result instantly instead of a bar stuck across the article. */ body.wiki-reading .mkwii-header, body.wiki-reading .mkwii-footer { z-index: 340; pointer-events: none; } body.wiki-reading .mkwii-header { transform: translateY(-100%); animation: chromeRetreatUp 1800ms both; } body.wiki-reading .mkwii-footer { transform: translateY(100%); animation: chromeRetreatDown 1800ms both; } @keyframes chromeRetreatUp { /* pull away */ 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.55, 0, .85, .25); } /* caught halfway */ 30% { transform: translateY(-64%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } /* the flinch: springs back toward where it was */ 44% { transform: translateY(-38%); animation-timing-function: ease-in-out; } /* settles, gathers itself */ 60% { transform: translateY(-46%); animation-timing-function: cubic-bezier(.6, 0, .85, .2); } /* and goes */ 100% { transform: translateY(-100%); } } @keyframes chromeRetreatDown { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.55, 0, .85, .25); } 30% { transform: translateY(64%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 44% { transform: translateY(38%); animation-timing-function: ease-in-out; } 60% { transform: translateY(46%); animation-timing-function: cubic-bezier(.6, 0, .85, .2); } 100% { transform: translateY(100%); } } /* The race HUD: two article pills and the arrow between them, flush to the top of the screen, and nothing else. Flush to y=0 — that band belongs to the route, which is why .site-logo now leaves for the duration of a race (see "Race start" above). No banner: the frame the pill wears everywhere else — border, gradient fill, inset outline, drop shadow — and its 74px floor all come off, so what sits on the article is the three things the player is actually reading. This is deliberately written for BOTH of the route's homes, so the two are indistinguishable. The element is stowed out of the stage and re-adopted on every single move (its parent's innerHTML is replaced each time), and any difference between the two states shows up as a flicker on every click. */ body.wiki-reading .training-route { position: fixed; top: 0; left: 0; z-index: 320; box-sizing: border-box; width: 100%; max-width: none; min-height: 0; margin: 0; /* Left padding is the wordmark's corner (see --logo-clear). The route stays flush to the top and simply starts after the mark instead of under it. */ padding: 8px 18px 12px var(--logo-clear); transform: none; border: 0; border-radius: 0; background: none; box-shadow: none; } /* Under ~1100px there is no longer room for both across one line: the pills need about 670px between them and the wordmark is eating 314 of it. Below that the route stops sharing the row and drops under the wordmark's band instead — still the top of the article, just the second line of it. */ @media (max-width: 1100px) { body.wiki-reading .training-route { margin-top: var(--chrome-h); padding-left: 18px; } } /* Adopted into the stage, it drops out of the viewport and joins the article's flow, so it scrolls away instead of covering the text. Pinned, it sat over the first ~190px of every article — exactly where the lead paragraph and its first links are — and players said so. The stage is the scroll container (JS resets its scrollTop on every move), which is why "scrolls away" has to mean "lives in the stage's flow" rather than "let the page scroll". Everything else is inherited from the shared rule above. */ body.wiki-reading .article-stage > .training-route { position: static; } /* The target's one-line gloss ("Sport of shooting arrows"), under the target pill. It follows the article's own muted ink rather than the menu's, since with the banner gone it sits straight on the page; the fallback covers the stowed state, where --wiki-* is out of scope. */ body.wiki-reading .training-route .route-target-desc { color: var(--wiki-muted, #54595d); } /* The target pill and its gloss are a COLUMN inside the route's row, and that is a trap: the narrow-width `.route-pill { flex: 1 1 0 }` — written for the row — also matches the pill in here, where the main axis is vertical, so the basis resolved against its HEIGHT and collapsed the target to 20px, cutting the article name in half. (Live on phones since 8abe22e, under the banner.) Pinning the pill to its own content height is what stops that; stretch makes it span the column so the gloss centres under a full-width pill instead of a text-width one. */ body.wiki-reading .training-route .route-target-wrap { align-items: stretch; } body.wiki-reading .training-route .route-target-wrap .route-pill { flex: 0 0 auto; } /* The arrow has no pill behind it, so it sits straight on the article and has to follow the article's theme: near-black #000 on Wikipedia's night palette was all but invisible. --wiki-fg is the same token the article body uses, so the arrow flips with light/dark/auto for free. The lavender drop shadow goes with it — it read as an outline against the banner and as mush against a dark page. The fallback covers the stowed state, where the route sits outside the stage and --wiki-fg is not in scope to inherit. */ body.wiki-reading .training-route .route-to { color: var(--wiki-fg, #202122); text-shadow: none; } body.wiki-reading .training-progress { position: fixed; bottom: 12px; left: 12px; /* Shrink to its contents while racing. At the base 980px it stretched most of the way across the foot of the article for the sake of one "Moves: 3", sitting on top of the wallpaper attribution. */ width: auto; margin: 0; padding: 6px 14px; border: 2px solid #000; border-radius: 8px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); z-index: 320; } body.wiki-reading .progress-trail, body.wiki-reading .roulette-area { display: none; } body.wiki-reading .mp-side { position: fixed; bottom: 12px; right: 12px; width: 220px; max-height: 48vh; overflow-y: auto; z-index: 320; } /* ── Wikipedia skin: Contents | article | Appearance ── */ .wiki-skin { display: grid; grid-template-columns: 220px minmax(0, 1fr) 232px; gap: 0 26px; align-items: start; min-height: 100%; box-sizing: border-box; padding: 74px 26px 90px; background: var(--wiki-bg); color: var(--wiki-fg); font-family: sans-serif; } .wiki-toc, .wiki-appearance { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; font-size: 13px; color: var(--wiki-fg); } .wiki-toc-head, .wiki-app-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--wiki-border); font-weight: bold; } .wiki-toc-toggle, .wiki-app-toggle { margin-left: auto; background: none; border: 0; padding: 0; color: var(--wiki-link); font-size: 12px; cursor: pointer; } .wiki-toc-list { list-style: none; margin: 0; padding: 0; } .wiki-toc-item button { display: block; width: 100%; padding: 4px 8px; border: 0; border-left: 2px solid transparent; background: none; color: var(--wiki-fg); font: inherit; text-align: left; cursor: pointer; } .wiki-toc-item button:hover { border-left-color: var(--wiki-link); color: var(--wiki-link); background: rgba(128, 128, 128, 0.12); } .wiki-toc-item.is-sub button { padding-left: 22px; font-size: 12.5px; color: var(--wiki-muted); } .wiki-toc-item.is-top button { font-weight: bold; } .wiki-skin.is-toc-collapsed .wiki-toc-body, .wiki-skin.is-app-collapsed .wiki-app-body { display: none; } .wiki-app-group { margin-bottom: 16px; } .wiki-app-label { margin-bottom: 4px; font-size: 14px; font-weight: bold; color: var(--wiki-fg); } /* Codex radio: circle + inner dot, exactly like Wikipedia's Appearance menu. */ .wiki-app-opt { display: flex; align-items: center; gap: 10px; padding: 5px 4px; cursor: pointer; font-size: 14px; color: var(--wiki-fg); border-radius: 2px; } .wiki-app-opt:hover { background: rgba(128, 128, 128, 0.08); } .wiki-app-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .wiki-radio { position: relative; flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--wiki-input-border, #72777d); border-radius: 50%; background: var(--wiki-bg); box-sizing: border-box; transition: border-color 100ms ease, box-shadow 100ms ease; } .wiki-app-opt:hover .wiki-radio { border-color: var(--wiki-link); } .wiki-app-opt input:checked ~ .wiki-radio { border-color: var(--wiki-link); } .wiki-app-opt input:checked ~ .wiki-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--wiki-link); } .wiki-app-opt input:focus-visible ~ .wiki-radio { box-shadow: 0 0 0 2px var(--wiki-bg), 0 0 0 4px var(--wiki-link); } .wiki-page { min-width: 0; } /* CC BY-SA attribution + non-affiliation line under every article. */ .wiki-attrib { margin-top: 34px; padding-top: 10px; border-top: 1px solid var(--wiki-border); font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--wiki-fg) 62%, transparent); } .wiki-attrib a { color: var(--wiki-link); text-decoration: none; } /* Width setting, done the way Vector 2022 does it: "Standard" caps and centres the WHOLE three-column layout, so the rails sit next to the article. It used to cap only the middle column (max-width: 820px) while the grid track itself stayed 1fr — so on a wide screen the track grew to ~1360px, the article used 820 of it, and the leftover ~540px opened as dead space between the article and the Appearance rail. Capping the container instead means the middle track is exactly the space that's left: no slack, and a ~960px article column rather than 820px. */ .wiki-skin[data-width="standard"] { max-width: 1520px; /* 26 + 220 + 26 + ~964 + 26 + 232 + 26 */ margin-inline: auto; } .wiki-skin[data-width="standard"] .wiki-page, .wiki-skin[data-width="wide"] .wiki-page { max-width: none; } .wiki-skin[data-text="small"] .wiki-content { font-size: 13px; } .wiki-skin[data-text="standard"] .wiki-content { font-size: 14.4px; } .wiki-skin[data-text="large"] .wiki-content { font-size: 16.5px; } /* ── Phone layout ───────────────────────────────────────────────────────── Wikipedia serves the Minerva skin at this width, which has neither Vector rail. Ours kept the desktop 220px | 1fr | 232px grid at every width, so on a ~390px phone the fixed tracks alone (220 + 232 + 52 gap + 52 padding = 556px) outran the viewport and `minmax(0, 1fr)` collapsed the article column — the one part the player actually has to read — to a sliver. The stage stays the scroll container: JS resets `stage.scrollTop` on every move, so letting the document scroll instead would break the jump-to-top between articles. That means the HUD is placed relative to the stage, not the page. The route now scrolls away at every width (see the .article-stage > .training-route rule above); here the item slot is the one thing still pinned to the viewport. */ @media (max-width: 768px) { .wiki-toc, .wiki-appearance { display: none; } .wiki-skin { grid-template-columns: minmax(0, 1fr); gap: 0; /* The bottom pad clears the pinned item bar. Without it the article's last links sit underneath it and can't be tapped. */ padding: 12px 14px 104px; } .wiki-skin .wiki-page { padding: 0; } .wiki-title { font-size: 26px; } /* Tighter side padding for the route; the rest of it is shared. Both of its homes, so a stowed loading state matches the article that follows. */ body.wiki-reading .training-route { padding: 8px 12px 10px; } /* The target column takes the row space its pill would have taken, so the two sides stay symmetric once .route-pill starts flexing at this width. */ body.wiki-reading .training-route .route-target-wrap { flex: 1 1 0; min-width: 0; } /* The side rail stops floating and just follows the article. */ body.wiki-reading .mp-side { position: static; width: auto; max-height: none; margin: 0 14px 104px; overflow-y: visible; } /* …all except the item, which is the one control that has to stay in reach no matter how far down the article you are. */ body.wiki-reading .mp-side-block--item { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 3px solid #000; background: var(--surface); z-index: 330; } } /* ── The article body (page) ── */ .wiki-article { color: var(--wiki-fg); font-family: sans-serif; font-size: 14.4px; line-height: 1.6; text-align: left; } .wiki-title { margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--wiki-border); font-family: "Linux Libertine", "Georgia", "Times", serif; font-size: 28px; font-weight: normal; line-height: 1.3; } .training-complete { display: grid; gap: 4px; margin-bottom: 14px; padding: 14px 18px; border: 3px solid #000; border-radius: 7px; background: #ffe45c; color: var(--ink); font-family: Arial, sans-serif; font-size: 20px; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22); } .training-complete strong { font-size: 26px; } .article-loading { padding: 40px 24px; border: 2px solid #a2a9b1; border-radius: 3px; background: color-mix(in srgb, var(--surface) 96%, transparent); color: #54595d; font-family: Arial, sans-serif; font-size: 20px; text-align: center; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22); } .article-error { display: grid; gap: 6px; padding: 20px 24px; border: 3px solid #d33; border-radius: 7px; background: #fff8f8; color: var(--ink-mid); font-family: Arial, sans-serif; font-size: 18px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.14); } .article-error strong { color: #d33; font-size: 20px; } .wiki-content { margin-top: 12px; /* Contain floated infoboxes/thumbnails within the article page. */ display: flow-root; } /* Headings (Parsoid wraps them in .mw-heading). */ .wiki-content h2, .wiki-content .mw-heading2 { margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--wiki-border); font-family: "Linux Libertine", "Georgia", "Times", serif; font-size: 22px; font-weight: normal; line-height: 1.3; } .wiki-content h3, .wiki-content .mw-heading3 { margin: 18px 0 6px; font-size: 17px; font-weight: bold; } .wiki-content h4, .wiki-content .mw-heading4 { margin: 14px 0 6px; font-size: 15px; font-weight: bold; } .wiki-content .mw-heading { border: 0; } .wiki-content p { margin: 0.5em 0; } .wiki-content ul, .wiki-content ol { margin: 0.3em 0 0.6em 1.6em; } .wiki-content li { margin-bottom: 0.1em; } .wiki-content dl { margin: 0.2em 0; } .wiki-content dd { margin-left: 1.6em; } .wiki-content b, .wiki-content strong { font-weight: bold; } /* Links: Wikipedia blue, underline only on hover. */ .wiki-link-inline { appearance: none; border: 0; background: transparent; color: var(--wiki-link); cursor: pointer; font: inherit; text-align: left; text-decoration: none; padding: 0; margin: 0; line-height: inherit; /* Subtle glow in the link's own text color (follows theme overrides). */ text-shadow: 0 0 6px color-mix(in srgb, currentColor 45%, transparent); } .wiki-link-inline:hover { text-decoration: underline; } .wiki-link-inline:active { color: #faa700; } /* Non-navigable links (File:, citations, external) read as plain text. */ .wiki-link-dead { color: inherit; text-decoration: none; } /* Images. */ .wiki-content img { max-width: 100%; height: auto; } .wiki-content figure, .wiki-content .thumb { margin: 4px 0 14px; font-size: 13.6px; } .wiki-content figure[typeof*="mw:File/Thumb"], .wiki-content figure.mw-default-size, .wiki-content .tright, .wiki-content .mw-halign-right { float: right; clear: right; margin: 6px 0 12px 18px; } .wiki-content .tleft, .wiki-content .mw-halign-left { float: left; clear: left; margin: 6px 18px 12px 0; } .wiki-content figure img, .wiki-content .thumbinner img { border: 1px solid var(--wiki-border); background: var(--surface); } .wiki-content figure, .wiki-content .thumbinner { max-width: 320px; padding: 3px; border: 1px solid var(--wiki-border); background: var(--wiki-soft); } .wiki-content figcaption, .wiki-content .thumbcaption { padding: 4px 2px 2px; color: var(--wiki-muted); line-height: 1.4; text-align: left; } /* Infoboxes. */ .wiki-content .infobox { float: right; clear: right; width: 22em; max-width: 45%; margin: 4px 0 16px 18px; padding: 0; border: 1px solid var(--wiki-border); border-spacing: 3px; background: var(--wiki-soft); font-size: 12.6px; line-height: 1.5; } .wiki-content .infobox caption, .wiki-content .infobox-title, .wiki-content .infobox-above { padding: 6px 8px; font-size: 15px; font-weight: bold; text-align: center; } .wiki-content .infobox th, .wiki-content .infobox td { padding: 4px 8px; vertical-align: top; text-align: left; } .wiki-content .infobox-image, .wiki-content .infobox td[colspan] { text-align: center; } /* ── Templates that ship their own CSS ──────────────────────────────────────── Wikipedia articles don't carry their layout in HTML: they carry it in TemplateStyles, per-template stylesheets delivered inside the page. The Cat article alone ships 21