/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ CASTLE THEME (player site) — owner 2026-10-14: "make a theme to the site where the main thing is like a castle and its almost minecraft look but not minecraft the website should feel like art", then "the underground part should begin around where the red line [above Recent Wins] … the stars shoudlnt be in the backround of the games sections the banner should bend in the artwork above the floor it should look like one piece of art". ONE PIECE OF ART, from the top of the page down: SKY starry night sky with far hills, across the whole width, behind the header and the home banner; CASTLE the banner IS the castle (no box): towers, banners, lit windows, torches at the gate, a moon; the banner's words sit in its sky; GROUND the castle stands on a grass line that runs across the whole page, the dirt fading downwards; UNDERGROUND everything under the ground line (Recent Wins, the tabs, every game row, the bets table) sits on calm deep stone — no stars, no panels — so games and options are easy to see. Pages without the castle banner (games, account …) are underground from the top. The header / side menu / phone bar / footer are stone (the footer is bedrock); buttons are chunky blocks; accents are torch gold; in-game Bet stays green (--bet). ONE SWITCH: in index.html; every rule below is scoped to it. Art: public/theme/castle/*.png, drawn in code by ../banner-work/castle-theme-2026-10-14/tools/make-art.mjs (our own pixel art). The 4× files are shown at half size (crisp without a rule); the castle and the stone are scaled with image-rendering: pixelated on their own layer only (never inherited by photos / game pictures). ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ html[data-site-theme="castle"] { /* royal navy (owner 2026-10-14: "make the website slightly more trustworthy through the colour pallatte"): the surfaces are a deep royal navy instead of near-black, the words a clean cool white with blue-grey secondary text instead of warm parchment, the gold a touch calmer and less orange, focus rings royal blue. Was (v12): surfaces #131a2d / #0f131e / #212637 / #2b3145 / #3b4259, text #f4efe2 / #bdb6a6, gold #f0b43a, focus #ffd36b. */ --bg-primary: #14203a; --bg-primary-rgb: 20, 32, 58; --bg-sidebar: #0e1628; --bg-sidebar-rgb: 14, 22, 40; --bg-input: #0f1829; --bg-secondary: #1c2843; --bg-secondary-rgb: 28, 40, 67; --bg-card: #24334f; --bg-card-rgb: 36, 51, 79; --bg-elevated: #33456a; --bg-elevated-rgb: 51, 69, 106; --bg-elevated-hover: #405480; --bg-popup: #172238; --bg-popup-rgb: 23, 34, 56; --bg-chip: #1e2a44; --bg-chip-rgb: 30, 42, 68; --bg-chip-hover: #283757; /* royal gold (the main buttons) — an orange gold since 2026-10-25 (owner: "Make the yellow colour you use on the site for example the wallet icon … the same colour you use for the logged in banner the kinda orange gold text … use that colour not yellow"; it was #ebb84e, hover #f6c96a; the site's other gold, --gold, was the lemon #ffd54a). Undo ../removed-features-backup/gold-colour-2026-10-25/README.txt */ --accent: #e6a43c; --accent-rgb: 230, 164, 60; --accent-light: #e6a43c; --accent-hover: #eeb553; --accent-light-hover: #eeb553; --accent-text: #1c1407; --cashier: #e6a43c; --cashier-hover: #eeb553; /* the one gold for wins, frames, VIP (frame.css's lemon #ffd54a) and a lighter one for gold words / rings on dark */ --gold: #e6a43c; --gold-rgb: 230, 164, 60; --gold-light: #f0b95a; --info: #7fb2ff; --info-rgb: 127, 178, 255; --badge-blue: #5b8cff; --progress: #e6a43c; --progress-dark: #b47b22; /* clean, cool text */ --text-primary: #eef2f8; --text-bright: #ffffff; --text-muted: #a9b3c7; --text-muted-2: #a9b3c7; --text-dim: #8690a8; --text-disabled: rgba(169, 179, 199, 0.45); --border-color: #2e3e5e; --border-strong: #42557c; --focus-ring: #7fb2ff; --ring-tile-hover: 0 0 0 2px rgba(230, 164, 60, 0.55); --glow-tile-hover: 0 0 16px rgba(230, 164, 60, 0.22); --ring-tile-inset: inset 0 0 0 2px rgba(230, 164, 60, 0.9); /* hard, block-like shadows */ --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.35); --shadow-md: 3px 3px 0 rgba(0, 0, 0, 0.38); --shadow-lg: 4px 4px 0 rgba(0, 0, 0, 0.42), 0 10px 22px rgba(0, 0, 0, 0.35); --shadow-xl: 6px 6px 0 rgba(0, 0, 0, 0.45), 0 18px 32px rgba(0, 0, 0, 0.4); --shadow-tile-hover: 4px 6px 0 rgba(0, 0, 0, 0.5); /* the art's own colours */ --castle-ink: #0a0f1c; /* the darkest stone: block edges (was #0a0d15) */ --castle-ink-rgb: 10, 15, 28; --castle-sky-top: #1e2b54; /* the darkest band of the sky (sky-bands.png fills below it); v13 brighter (v12 #141c38, first #0a0f1f) */ --castle-under: #121829; /* underground rock (under.png) */ --castle-stone: url("/theme/castle/stone.png"); --castle-stone-size: 64px 64px; } /* ── UNDERGROUND: the page itself (everything under the ground line, and every page without the castle) ───────── */ /* dark chunky stone, a touch darker further down (owner 2026-10-14: the features — miner, lava … — removed, "keep the actual underground") */ html[data-site-theme="castle"] body { background: linear-gradient(180deg, rgba(var(--castle-ink-rgb), 0) 900px, rgba(var(--castle-ink-rgb), 0.45) 4200px), url("/theme/castle/under.png") 0 0 / 1800px 1200px repeat, var(--castle-under); } /* the things buried in the rock (the fallen frogs, roots, shields, crowns; the old foundations; the royal mines; the lost treasury) are laid out layer by layer in the side margins by src/components/UndergroundDecor.tsx (owner 2026-10-14: the underground "from top to bottom"); the old repeating relic strips (.main-content::before / ::after) are in ../removed-features-backup/underground-layers-2026-10-14/relic-strips.removed.css */ /* caskets just under the surface (owner 2026-10-14: "Put like underground caskets in these positions", then "lay out the coffins better less random and wierd u pick where to put them close to the surface"): flat, in the ground strip right under the grass (every page with a ground line: the home banner, the signed-in promotions, the race page) — the Blue Crown's fallen king left of the column (just the one, centred where two lay — owner: "put just one coffin on the left side more close to centre of where the 2 are"; beside the column on narrower screens), right of it an iron-bound one lower down, a little further out (owner: "move right throne here"; the Red Crown's king beside it was removed on 2026-10-15: "remove this coffen" — undo ../removed-features-backup/red-coffin-removed-2026-10-15/README.txt). (The small frog skeleton that lay under the blue king moved into the underground's pieces, UndergroundDecor.tsx — owner 2026-10-14.) The ground strip's left edge is 100vw left of the 1280 px column, so the places are calc(100vw ± …). Only where the margins hold them whole: the blue king from 1600 px, the iron-bound one too from 1860 (with the menu open: next paragraph). casket-1 … 4.png by ../banner-work/castle-theme-2026-10-14/tools/make-caskets.mjs. Undo: ../removed-features-backup/underground-caskets-2026-10-14/ */ /* THEY RIDE WITH THE GROUND since 2026-10-25 (owner: "opening the side bar glitches the coffin next to it too much": the open and the closed menu had separate lists of coffins, so at 1860–2080 px the blue king jumped 68 px sideways and 5 px up the moment the menu opened and the iron-bound one blinked out; at 1600–1820 px the king vanished). Now WHICH coffins lie there depends on the window only (the blue king from 1600 px, the iron-bound one too from 1860 px), and WHERE each lies follows the room beside the 1280 px column (--ck-room: the window less the side menu — the 52 px strip or the open menu — less a docked chat / rewards panel, halved): at the owner's place while it fits whole (the king 196 px left of the column, 128 px below 1860 px; the iron-bound one 122 px right of it), only as far toward the column as it must (at least 16 px from the menu / the page's edge), and where it can't fit whole, just under the side menu (the king) or past the page's edge, under a docked panel (the iron-bound one) — so the menu slides over it like a door instead of it popping out. A change glides in the side menu's own time (the ground strips' background-position transition, below). Check ../banner-work/sidebar-coffin-2026-10-25/tools/coffin-frames.mjs; undo ../removed-features-backup/sidebar-coffin-2026-10-25/README.txt */ html[data-site-theme="castle"] body { --castle-caskets: none; --ck-side: 52px; /* the side menu: the closed strip … */ --ck-dock: 0px; /* … and a docked right-hand panel (none) */ } html[data-site-theme="castle"] body.sidebar-open { --ck-side: var(--sidebar-w, 272px); } @media (min-width: 1100px) { html[data-site-theme="castle"] body:is(.kc-open, .rpn-open) { --ck-dock: var(--kc-w, 340px); } } @media (min-width: 1600px) { html[data-site-theme="castle"] body { /* (never under the page's 32 px gutter: a page too narrow for the 1280 px column keeps its gutter, the column shrinks) */ --ck-room: max(32px, calc((100vw - var(--ck-side) - var(--ck-dock) - 1280px) / 2)); /* the blue king's distance left of the column: its own place (--ck1-far) when it fits (a room of 136 px or more), never nearer than 128 px; else room + 136 px = its right edge 16 px under the menu */ --ck1-far: 128px; --ck1-y: 48px; --ck1-a: max(max(128px, min(var(--ck1-far), var(--ck-room) - 16px)), var(--ck-room) + 136px - 1000 * max(0px, var(--ck-room) - 135px)); --castle-caskets: url("/theme/castle/casket-1.png") calc(100vw - var(--ck1-a)) var(--ck1-y) / 120px 60px no-repeat; } } @media (min-width: 1860px) { html[data-site-theme="castle"] body { --ck1-far: 196px; --ck1-y: 53px; /* the iron-bound one's distance right of the column: 122 px when it fits (a room of 132 px or more), never nearer than 8 px; else room + 16 px = 16 px past the page's edge (off the screen / under the docked panel) */ --ck4-b: max(max(8px, min(122px, var(--ck-room) - 124px)), var(--ck-room) + 16px - 1000 * max(0px, var(--ck-room) - 131px)); --castle-caskets: url("/theme/castle/casket-1.png") calc(100vw - var(--ck1-a)) var(--ck1-y) / 120px 60px no-repeat, url("/theme/castle/casket-4.png") calc(100vw + 1280px + var(--ck4-b)) 130px / 108px 60px no-repeat; } } /* every ground strip that carries them: a coffin's new place glides in the menu's time (the page column itself moves with the menu, so a coffin that keeps its place beside the column rides with the grass and never moves on its own) */ html[data-site-theme="castle"] :is(.home-hero, .banners-wrapper, .cph__stage, .rwh__stage)::after { transition: background-position var(--dur-sidebar, .4s) var(--ease-sidebar, ease); } /* a docking chat / rewards panel: the page glides in the panel's own time (lib/dockShift.ts — body.dock-snap is on while the new layout is taken, which is when the glide starts), so the coffins glide in it too */ html[data-site-theme="castle"] body.dock-snap :is(.home-hero, .banners-wrapper, .cph__stage, .rwh__stage)::after { transition-duration: var(--dur-dock, .26s); transition-timing-function: var(--ease-dock, ease-out); } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] :is(.home-hero, .banners-wrapper, .cph__stage, .rwh__stage)::after { transition: none; } } /* nothing paints a panel behind the games: the main column, the tab bar, the bets table and the game page's bar / info panel sit straight on the underground (controls inside keep a light dark track so they still read) */ html[data-site-theme="castle"] :is(.main-content, .lobby, .rb-container, .sg-info-top, .sg-bar) { background: transparent; box-shadow: none; } /* the sky / ground / forest layers reach 100vw past the column to fill the page: they are clipped at the screen's edges (#root, the whole width), so they never make the page wider. Before, the body was a hidden sideways scroller twice the screen's width (found 2026-10-14 night: body.scrollLeft could shift a phone page by 374 px — a focus or find-in-page could leave it stuck off-centre). clip, not hidden: no scroll container, so sticky bars keep working. Undo: ../removed-features-backup/overnight-audit-2026-10-14/README.txt The clip is on #root, not on .main-content, since 2026-10-24 (owner: "when I pop out the chat it lags the left side menu making it expand out"): docking the chat / rewards panel glides the page box by transform (lib/dockShift.ts), and a clip on that moving box cut the sky off along its edge, opening a strip of bare page beside the side menu (170 px at 1920 px, closing over 0.26 s) and one beside the incoming panel. Now the layers run on under the side menu and a docked panel (both solid stone) and stop only at the screen's edges. Check ../banner-work/chat-dock-gap-2026-10-24/tools/gap-frames.mjs; undo ../removed-features-backup/chat-dock-gap-2026-10-24/README.txt */ html[data-site-theme="castle"] #root { overflow-x: clip; } html[data-site-theme="castle"] .category-nav { background: none; box-shadow: none; } /* the tab bar sits above the home banner's ground strip: the banner is positioned, so its sky + ground layer would otherwise paint over the next block that is not (the search box, when Recent Wins is hidden — owner 2026-10-14: "the searchbar next to my favourties is being displayed wierd because of the dirt into underground") */ html[data-site-theme="castle"] .category-nav { position: relative; } /* …and so does the content under the tab bar (the first game row's title and View All sat in the ground band once Recent Wins was taken off the lobby — owner 2026-10-14: "remove recent wins the one above lobby button") */ html[data-site-theme="castle"] .lobby > .tab-content-host { position: relative; } html[data-site-theme="castle"] :is(.category-tabs, .rb-tabs__track) { background: rgba(var(--bg-sidebar-rgb), 0.6); } /* the lobby tab bar (owner 2026-10-14: "Make this better"): the tabs lie in the SAME dark slot as the search box beside them — solid (the see-through track let the dirt show through and the words got lost), the box's thin edge, its height (48 px; the track was 44), a hard shadow under both so the bar stands on the soil; the chosen tab is the raised block with its icon and name in gold, the others brighten on hover. (Earlier tries — a stone ledge, a wooden sign — were reverted by the owner.) Undo: ../removed-features-backup/tab-bar-slot-2026-10-14/README.txt */ /* (then "make this look better") — the tabs and the search box are ONE kind of slot carved into the stone: a dark channel with the castle's ink outline, a sunken top edge and a faint lit lower lip; the chosen tab is a raised GOLD castle block with dark words (the site's gold buttons), the others brighten on a soft highlight when pointed at. */ html[data-site-theme="castle"] .category-nav :is(.category-tabs, .search-tab) { border: 0; border-radius: 3px; background: var(--bg-input); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(255, 255, 255, 0.07), 0 2px 0 rgba(255, 255, 255, 0.06); } /* the box hugs the gold tab (owner: "dont make the outside box thicker than where the yellow ends and make the searchbar inline with where the yellow ends"): no padding, every tab, the box, the search box and Providers / Sort by 40 px, so their tops and bottoms meet the gold block's */ html[data-site-theme="castle"] .category-nav .category-tabs { padding: 0; } html[data-site-theme="castle"] .category-nav .category-tabs > .lobby-tab { height: 40px; } html[data-site-theme="castle"] .category-nav :is(.search-tab, .category-nav__tools .catnav-dd-btn) { height: 40px; min-height: 40px; } html[data-site-theme="castle"] .category-nav .search-tab:focus-within { box-shadow: inset 0 0 0 2px var(--accent), inset 0 4px 0 rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.06); } html[data-site-theme="castle"] .category-tabs .category-tabs__pill { background-color: var(--accent); box-shadow: var(--castle-block); } html[data-site-theme="castle"] .category-tabs > .lobby-tab { color: var(--text-muted); } html[data-site-theme="castle"] .category-tabs > .lobby-tab.active { color: var(--accent-text); text-shadow: 0 1px 0 rgba(255, 246, 214, 0.45); } @media (hover: hover) { html[data-site-theme="castle"] .category-tabs > .lobby-tab:not(.active):hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } } html[data-site-theme="castle"] .rb-container { border: 1px solid rgba(var(--bg-elevated-rgb), 0.45); } /* the "Read more" fade of a game's description fades the text itself (there is no panel colour to fade into) */ html[data-site-theme="castle"] .ogi-desc-fade { display: none; } html[data-site-theme="castle"] .ogi-desc-body:not(.expanded) { mask-image: linear-gradient(180deg, black calc(100% - 80px), transparent); } /* ── stone: header, side menu, phone bottom bar; the footer is bedrock ───────────────────────────────────────── */ html[data-site-theme="castle"] :is(.header, .mobile-header, .sidebar, .mobile-bottom-nav, .main-footer) { background: linear-gradient(rgba(var(--bg-sidebar-rgb), 0.86), rgba(var(--bg-sidebar-rgb), 0.86)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; image-rendering: pixelated; } html[data-site-theme="castle"] :is(.header, .mobile-header, .sidebar, .mobile-bottom-nav, .main-footer) * { image-rendering: auto; } /* the edge under the top bar, Stake's way (owner 2026-10-14: "add a more clear seperator line under the search bar", then "make the search bar seperator line more like how stake does"): no drawn line, a soft shadow that fades out under the bar (the base site's 24 px fade, 28 % dark at the edge) under the header, the phone header and the side menu's search row alike, so it reads as one edge across the page */ /* (then "still make sure it seperates clear and sudden here": the bar ends on one crisp light line, the fade below it) */ html[data-site-theme="castle"] :is(.header, .mobile-header, .sidebar-top-nav) { border-bottom: 1px solid var(--border-strong); } html[data-site-theme="castle"] .sidebar-top-nav { box-shadow: none; } html[data-site-theme="castle"] .sidebar-top-nav::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 100%); pointer-events: none; } html[data-site-theme="castle"] .sidebar { box-shadow: inset -2px 0 0 var(--castle-ink); } html[data-site-theme="castle"] .main-footer { position: relative; background: linear-gradient(rgba(var(--bg-sidebar-rgb), 0.93), rgba(var(--bg-sidebar-rgb), 0.93)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; border-top: 2px solid var(--castle-ink); } /* ── THE FOOTER (owner 2026-10-15: "Make this section look better"): bedrock with a stone ledge along its top edge; the brand block (logo, line, e-mails, the socials as square stone blocks), the link columns under cream headings with a short pixel rule (a hovered link steps in behind a small block), then the payments SLOT carved into the rock (the label, each coin on its own dark tile, the 18+ badge with the way to responsible gambling), then the copyright line. Undo: ../removed-features-backup/footer-castle-2026-10-15/README.txt ── */ /* the ledge (with the 2 px ink line over it) and the bedrock under it reach 100vw past the footer on both sides: under the side menu and a docked panel (solid stone), clipped at the screen's edges (#root). The footer's box glides when the chat / rewards panel docks (lib/dockShift.ts), and its edge must never open a strip beside the side menu (2026-10-24, with #root's clip above; the stone tiles line up with the box's own: background-position 100vw) */ html[data-site-theme="castle"] .main-footer::before { content: ''; position: absolute; left: -100vw; right: -100vw; top: -2px; height: 10px; background: linear-gradient(180deg, var(--castle-ink) 0, var(--castle-ink) 2px, #4a5470 2px, #4a5470 4px, #353d55 4px, #353d55 8px, var(--castle-ink) 8px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); pointer-events: none; } html[data-site-theme="castle"] .main-footer::after { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: 0; bottom: 0; background: linear-gradient(rgba(var(--bg-sidebar-rgb), 0.93), rgba(var(--bg-sidebar-rgb), 0.93)), var(--castle-stone) 100vw 0 / var(--castle-stone-size) repeat; pointer-events: none; } html[data-site-theme="castle"] .main-footer { padding-top: 44px; } html[data-site-theme="castle"] .footer-top { border-bottom: 0; padding-bottom: 34px; } html[data-site-theme="castle"] .footer-tagline { color: var(--text-muted); font-size: 14px; } html[data-site-theme="castle"] .footer-email { color: var(--text-muted); font-size: 14px; } html[data-site-theme="castle"] .footer-email:hover { color: var(--castle-cream, var(--text-bright)); } html[data-site-theme="castle"] .footer-socials { gap: 10px; } html[data-site-theme="castle"] .footer-social-icon { width: 40px; height: 40px; border: 0; border-radius: 2px; background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } html[data-site-theme="castle"] .footer-social-icon:hover { background: var(--bg-elevated); filter: brightness(1.15); color: var(--text-bright); } html[data-site-theme="castle"] .footer-social-icon:active { transform: translateY(2px); box-shadow: var(--castle-block-down); } html[data-site-theme="castle"] .footer-social-icon:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* the column headings: cream, with a short rule under them */ html[data-site-theme="castle"] .footer-col-title { position: relative; padding-bottom: 9px; margin-bottom: 14px; font-size: 15px; letter-spacing: 0.1em; color: var(--castle-cream, var(--text-bright)); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); } html[data-site-theme="castle"] .footer-col-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; background: var(--castle-cream-dark, var(--border-strong)); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); } html[data-site-theme="castle"] .footer-col a { position: relative; font-size: 15px; color: var(--text-muted); transition: color 0.12s, transform 0.12s; } html[data-site-theme="castle"] .footer-col a::before { content: ''; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--castle-cream, currentColor); opacity: 0; transition: opacity 0.12s; } @media (hover: hover) { html[data-site-theme="castle"] .footer-col a:hover { color: var(--castle-cream, var(--text-bright)); transform: translateX(10px); } html[data-site-theme="castle"] .footer-col a:hover::before { opacity: 1; } } /* the payments slot carved into the rock */ html[data-site-theme="castle"] .footer-payments { margin: 0 0 6px; padding: 12px 16px; border-bottom: 0; background: rgba(var(--castle-ink-rgb), 0.55); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 5px 0 rgba(0, 0, 0, 0.35), inset 0 -2px 0 rgba(255, 255, 255, 0.05); border-radius: 2px; } html[data-site-theme="castle"] .footer-pay-label { font-size: 13px; letter-spacing: 0.1em; color: var(--text-muted); } html[data-site-theme="castle"] .footer-coins { gap: 8px; } html[data-site-theme="castle"] .footer-coin { width: 40px; height: 40px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 2px 0 rgba(255, 255, 255, 0.05), 2px 2px 0 rgba(0, 0, 0, 0.35); border-radius: 2px; } html[data-site-theme="castle"] .footer-coin-icon { width: 24px; height: 24px; opacity: 1; filter: none; } html[data-site-theme="castle"] .footer-coin-icon:hover { transform: none; } html[data-site-theme="castle"] .footer-adult { font-size: 14px; color: var(--text-muted); } html[data-site-theme="castle"] .footer-adult b { color: var(--castle-cream, var(--text-bright)); border-color: var(--castle-cream-dark, currentColor); text-shadow: none; } html[data-site-theme="castle"] .footer-adult:hover { color: var(--castle-cream, var(--text-bright)); } html[data-site-theme="castle"] .footer-bottom { padding-top: 16px; font-size: 13px; } html[data-site-theme="castle"] .footer-bottom-link { font-size: 13px; color: var(--text-muted); } html[data-site-theme="castle"] .footer-bottom-link:hover { color: var(--castle-cream, var(--text-bright)); } @media (max-width: 768px) { html[data-site-theme="castle"] .main-footer { padding-top: 36px; } html[data-site-theme="castle"] .footer-top { padding-bottom: 0; } /* the phone's folding link list keeps its rows; the rule under a heading would sit in the row */ html[data-site-theme="castle"] .footer-col-title { padding-bottom: 0; margin-bottom: 0; font-size: 14px; } html[data-site-theme="castle"] .footer-col-title::after { display: none; } html[data-site-theme="castle"] .footer-col a { transform: none; } html[data-site-theme="castle"] .footer-payments { margin-top: 20px; padding: 14px 10px; } html[data-site-theme="castle"] .footer-coins { gap: 6px; flex-wrap: wrap; } html[data-site-theme="castle"] .footer-coin { width: 36px; height: 36px; } html[data-site-theme="castle"] .footer-coin-icon { width: 22px; height: 22px; } html[data-site-theme="castle"] .footer-coins .footer-coin:nth-child(7), html[data-site-theme="castle"] .footer-coins .footer-coin:nth-child(8) { display: flex; } /* every coin fits on its tile row */ } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] .footer-col a, html[data-site-theme="castle"] .footer-social-icon { transition: none; } } /* ── FONT (owner 2026-10-14: "Re style all of the fonts and buttons to fit the site"): Jersey 10, a chunky pixel font (OFL; files in public/fonts/jersey10, licence in ../banner-work/castle-theme-2026-10-14/font/). Chosen after side-by-side checks at the site's own sizes (font/compare*.png there): Pixelify Sans closes its C at bold ("The Orypto Oasino") and Tiny5 garbles figures ("$1,098.16" read as "$1,038.16"); Jersey 10 keeps C / c, 5 / S and every digit clear from 13 px up. It is drawn smaller than Figtree, so font-size-adjust gives it Figtree's letter height: no text changes size or line, and its narrow letters never make a label longer. It has one weight (already heavy), so the browser never fakes a bold. Every word on the site uses it (bet amounts and other fields too), except what has to be read exactly or at length: free-text boxes, crypto addresses, code, the icon font, and the long reading pages (terms, help articles, a game's description, the fairness explanation) keep Figtree. A character the pixel font lacks (×, ½, arrows …) falls back to Figtree by itself. The font file loads only when the theme is on. ──────────────────────────────────────────────────────── */ @font-face { font-family: "Castle Pixel"; src: url("/fonts/jersey10/jersey-10-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Castle Pixel"; src: url("/fonts/jersey10/jersey-10-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html[data-site-theme="castle"] { --castle-font: "Castle Pixel", "RM Neue", Helvetica, Arial, sans-serif; --castle-read-font: "RM Neue", Helvetica, Arial, sans-serif; --castle-font-adjust: 0.53; /* Figtree's x-height: the pixel font is drawn at the same letter height */ --og-font: var(--castle-font); } /* (!important: many components name their font themselves; the theme is the one place that overrides them all) */ html[data-site-theme="castle"] body, html[data-site-theme="castle"] body *:not(textarea):not(code):not(pre):not(kbd):not(samp):not(input[name="address"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) { font-family: var(--castle-font) !important; font-size-adjust: var(--castle-font-adjust) !important; font-synthesis: none !important; } /* the long reading texts in Figtree. ":not(#gz-read-font)" (no element has that id) only adds weight: the rule above, with its eight :not()s, outweighed this one, so terms, game descriptions and the fairness pages were in the pixel font with Figtree's tall line spacing (owner 2026-10-16: "Fix wierd text spacing issues on mobile") */ html[data-site-theme="castle"] :is(.legal-page, .blog-article__content, .ogi-desc-content, .fair-prose, .gw-desc__text) :is(p, li, td, dd, blockquote):not(#gz-read-font), html[data-site-theme="castle"] :is(.legal-page, .blog-article__content, .ogi-desc-content, .fair-prose, .gw-desc__text) :is(p, li, td, dd, blockquote) *:not(#gz-read-font):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; } /* typed free text, crypto addresses and code: Figtree, every character exact */ html[data-site-theme="castle"] body :is(textarea, code, pre, kbd, samp, input[name="address"]) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; } /* ── headings: chunky, with a hard pixel shadow ────────────────────────────────────────────────────────────── */ html[data-site-theme="castle"] :is(.section-title h2, .home-hero__title, .page-title, h1, h2) { letter-spacing: 0.03em; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); } /* ── BUTTONS: castle blocks. One look for every button, in its own colour (gold, stone, the green Bet): a dark pixel outline, a light top edge, a darker bottom edge, a hard shadow; pressed, it sinks 2 px. The outline and edges are inset shadows, so no button changes size; focus shows as a gold outline. ─────────────────────────── */ html[data-site-theme="castle"] { --castle-block: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(255, 255, 255, 0.34), inset 4px 0 0 rgba(255, 255, 255, 0.12), inset 0 -6px 0 rgba(0, 0, 0, 0.3), inset -4px 0 0 rgba(0, 0, 0, 0.14), 3px 3px 0 rgba(0, 0, 0, 0.42); --castle-block-down: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.22), inset 0 -3px 0 rgba(255, 255, 255, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.42); --castle-block-flat: inset 0 0 0 2px rgba(var(--castle-ink-rgb), 0.85); } /* every block button (gold / stone / green) */ html[data-site-theme="castle"] :is( .btn-register, .btn-login, .home-hero__register, .home-hero__tile, .ac-social-btn, .header-cashier-btn, .btn-view-all, .btn-arrow, .og-btn, .sg-btn-register, .sg-btn-demo, .sg-btn-back, .sg-arrow-btn, .sg-m-btn-register, .sg-m-btn-login, .sg-m-play-btn, .ac-btn-submit, .ob-btn-confirm, .ap-btn, .acr-btn, .wlt-primary, .ls-btn, .rd-claim, .rwp-btn, .rwp-claim, .cp-btn, .fair-cta, .fav-empty__btn, .rp-empty__btn, .blog-cta-btn, .blog-back-btn, .cu-chat-btn, .seo-landing__cta, .wbp-cta, .slots-load-btn, .search-modal-btn-load-more, .slots-provider-btn-mobile, .catnav-dd-btn, .rw-hide-btn, .rw-pause-btn, .wr-howbtn, .mn-play-btn, .mn-btn-sm, .mn-preset-btn, .pfp-btn, .bjh-btn, .search-tab__fate, .vl-btn, .vl-chip ) { border-radius: 2px; border-color: transparent; box-shadow: var(--castle-block); font-weight: 700; letter-spacing: 0.02em; transition: filter 0.12s, transform 0.06s; } @media (hover: hover) { html[data-site-theme="castle"] :is( .btn-register, .btn-login, .home-hero__register, .home-hero__tile, .ac-social-btn, .header-cashier-btn, .btn-view-all, .btn-arrow, .og-btn, .sg-btn-register, .sg-btn-demo, .sg-btn-back, .sg-arrow-btn, .sg-m-btn-register, .sg-m-btn-login, .sg-m-play-btn, .ac-btn-submit, .ob-btn-confirm, .ap-btn, .acr-btn, .wlt-primary, .ls-btn, .rd-claim, .rwp-btn, .rwp-claim, .cp-btn, .fair-cta, .fav-empty__btn, .rp-empty__btn, .blog-cta-btn, .blog-back-btn, .cu-chat-btn, .seo-landing__cta, .wbp-cta, .slots-load-btn, .search-modal-btn-load-more, .slots-provider-btn-mobile, .catnav-dd-btn, .rw-hide-btn, .rw-pause-btn, .wr-howbtn, .mn-play-btn, .mn-btn-sm, .mn-preset-btn, .pfp-btn, .bjh-btn, .search-tab__fate, .vl-btn, .vl-chip ):not(:disabled):not([aria-disabled="true"]):hover { filter: brightness(1.1); box-shadow: var(--castle-block); } } html[data-site-theme="castle"] :is( .btn-register, .btn-login, .home-hero__register, .home-hero__tile, .ac-social-btn, .header-cashier-btn, .btn-view-all, .btn-arrow, .og-btn, .sg-btn-register, .sg-btn-demo, .sg-btn-back, .sg-arrow-btn, .sg-m-btn-register, .sg-m-btn-login, .sg-m-play-btn, .ac-btn-submit, .ob-btn-confirm, .ap-btn, .acr-btn, .wlt-primary, .ls-btn, .rd-claim, .rwp-btn, .rwp-claim, .cp-btn, .fair-cta, .fav-empty__btn, .rp-empty__btn, .blog-cta-btn, .blog-back-btn, .cu-chat-btn, .seo-landing__cta, .wbp-cta, .slots-load-btn, .search-modal-btn-load-more, .slots-provider-btn-mobile, .catnav-dd-btn, .rw-hide-btn, .rw-pause-btn, .wr-howbtn, .mn-play-btn, .mn-btn-sm, .mn-preset-btn, .pfp-btn, .bjh-btn, .search-tab__fate, .vl-btn, .vl-chip ):not(:disabled):not([aria-disabled="true"]):active { transform: translateY(2px); box-shadow: var(--castle-block-down); } html[data-site-theme="castle"] :is( .btn-register, .btn-login, .home-hero__register, .home-hero__tile, .ac-social-btn, .header-cashier-btn, .btn-view-all, .btn-arrow, .og-btn, .sg-btn-register, .sg-btn-demo, .sg-btn-back, .sg-arrow-btn, .sg-m-btn-register, .sg-m-btn-login, .sg-m-play-btn, .ac-btn-submit, .ob-btn-confirm, .ap-btn, .acr-btn, .wlt-primary, .ls-btn, .rd-claim, .rwp-btn, .rwp-claim, .cp-btn, .fair-cta, .fav-empty__btn, .rp-empty__btn, .blog-cta-btn, .blog-back-btn, .cu-chat-btn, .seo-landing__cta, .wbp-cta, .slots-load-btn, .search-modal-btn-load-more, .slots-provider-btn-mobile, .catnav-dd-btn, .rw-hide-btn, .rw-pause-btn, .wr-howbtn, .mn-play-btn, .mn-btn-sm, .mn-preset-btn, .pfp-btn, .bjh-btn, .search-tab__fate, .vl-btn, .vl-chip ):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* words on a gold block get a light pixel edge; on stone / green a dark one (and dark words on gold: white ones were hard to read there) */ html[data-site-theme="castle"] :is(.btn-register, .home-hero__register, .header-cashier-btn, .sg-btn-register, .sg-m-btn-register, .sg-m-play-btn, .ac-btn-submit, .ob-btn-confirm, .ap-btn, .acr-btn--primary, .wlt-primary, .ls-btn:not(.ls-btn--quiet), .rd-claim, .rwp-btn--primary, .rwp-claim, .cp-btn--primary, .fair-cta:not(.fair-cta--alt), .fav-empty__btn, .rp-empty__btn, .blog-cta-btn, .cu-chat-btn, .seo-landing__cta:not(.seo-landing__cta--alt), .wbp-cta, .og-btn--bet:not(.og-btn--stop), .pfp-btn:not(.pfp-btn-ghost), .bjh-btn--gold, .vl-btn--gold) { text-shadow: 0 1px 0 rgba(255, 246, 214, 0.45); color: var(--accent-text); } /* a gold Claim that is switched off (a reward still waiting: the rewards menu's, My Kingdom's) is not gold any more — its own CSS greys it out — so it gets light "off" words instead of the gold's dark ones (owner 2026-10-15: "hard to read"; undo ../removed-features-backup/claim-off-words-2026-10-15/README.txt) */ html[data-site-theme="castle"] :is(.rd-claim--off, .rwp-claim:disabled:not(.rwp-claim--busy)) { color: var(--text-dim); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); } /* everything else painted in the accent (= the castle gold) gets the gold's dark words too (overnight audit 2026-10-14: these kept the slate look's white words on what is gold here — 1.8 : 1, hard to read; found by a contrast scan of every page): numbered steps, the help chat's round button + send, the phone bar's Soon tag, the chosen phone game-info tab, the chosen game on Provably fair (its white icon turns dark), a claim being sent, the search window's filtered Providers, the chosen phone provider, the Verify page's suggestion, the race's "You" badge */ html[data-site-theme="castle"] :is(.acc-step__num, .pfp-step-num, .lc-fab, .lc-send, .ogi-m-tab.active, .pfp-pill.is-active, .rwp-claim--busy:disabled, .search-modal-search-row .catnav-dd-btn.is-filtered, .slots-provider-btn-mobile.active, .vfc-choice, .wr-self-badge) { color: var(--accent-text); } html[data-site-theme="castle"] .pfp-pill.is-active img { filter: brightness(0); opacity: 0.85; } /* the header's gold Wallet button (desktop: icon + "Wallet", whose label header.css paints white) and the phone header's gold Deposit button: dark word and icon like every gold block (they were white on gold on every signed-in page) */ html[data-site-theme="castle"] .header-cashier-btn span { color: inherit; } html[data-site-theme="castle"] :is(.header-cashier-btn, .mobile-header__badge) .header-btn-icon { color: #000; opacity: 0.85; } /* the PC header's balance, cleaner (owner 2026-10-22: "how can we make this a bit cleaner espeically the number"): the figure in the reading font, bold, every digit one width — the pixel font drew it soft at this size (its pixels landed between the screen's) — like the house games' figures (.og-num); the pixel coin without its dark tile; the chevron right after the figure instead of at the far end of a fixed 150 px box. "Playing" (a slot is open) stays pixel. ":not(#gz-read-font)" outranks the theme's font rule. Undo ../removed-features-backup/header-balance-clean-2026-10-22/ Back on computers since 2026-10-25, at 16 px (owner, the "Block Digits" figure of 2026-10-22 beside the Wallet: "make this look better numbers are slightly too big and change style"; the variants tried ../banner-work/header-balance-style-2026-10-25/tools/balance-styles.mjs; undo ../removed-features-backup/header-balance-style-2026-10-25/README.txt). Phones keep Block Digits (below). */ html[data-site-theme="castle"] .header .header-balance-cashier-row__balance { min-width: 0; padding: 0 12px 0 10px; } html[data-site-theme="castle"] .header .header-balance-static { gap: 10px; } html[data-site-theme="castle"] .header .header-balance-coin { width: 22px; height: 22px; background: none; border-radius: 0; } html[data-site-theme="castle"] .header .header-balance-coin img { width: 22px; height: 22px; } html[data-site-theme="castle"] .header .header-balance-amount { flex: 0 0 auto; color: #fff; } html[data-site-theme="castle"] .header .header-balance-amount:not(.header-balance-playing):not(#gz-read-font) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: 0; /* level with the coin (owner 2026-10-22: "The $ and the money are slightly out of line"): the digits' middle sat 1 px above the coin's — read off the screen by ../banner-work/header-balance-clean-2026-10-22/tools/align-check.mjs */ translate: 0 1px; } html[data-site-theme="castle"] .header .bal-drop-chevron { margin-left: 0; } /* the header's balance in Minecraft-style block digits (Aurėja 2026-10-22: "make numbers look minecraft style, and remake the buttons so they look like they fit better there"): "Block Digits", a 712-byte font of our own with only the digits, $ , . - + and the K M B T of short amounts, drawn on a 5 x 7 grid (../banner-work/header-minecraft-2026-10-22/tools/make-block-digits.py), white with the dark drop shadow one font pixel down and right. Its pixels are whole screen pixels (20 px on computers = 2 px per font pixel; 15 px on phones = 3 device pixels on a 2x screen, smaller only for very large balances), so it stays sharp where the stretched pixel font was soft. Anything else (a currency's letters) falls back to the pixel font. The balance + Wallet frame is an inset slot, and the Wallet is a 40 px block with 16 px words like the icon buttons beside it. Undo ../removed-features-backup/header-minecraft-2026-10-22/README.txt Phones only since 2026-10-25: the computer header's figure is the reading font again (above). */ @font-face { font-family: "Block Digits"; src: url("/fonts/block-digits/block-digits.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } html[data-site-theme="castle"] .mobile-header__balance-text:not(#gz-read-font) { font-family: "Block Digits", var(--castle-font) !important; font-size-adjust: none !important; font-synthesis: none !important; font-size: 15px; font-weight: 400; font-variant-numeric: normal; line-height: 1; letter-spacing: 0; color: #fff; text-shadow: 0.1em 0.1em 0 #3f3f3f; } /* the phone's fit ladder (MobileHeader.tsx measures each step) keeps working: the same steps, one size each */ html[data-site-theme="castle"] .mobile-header:is([data-balance-fit="2"], [data-balance-fit="3"], [data-balance-fit="6"]) .mobile-header__balance-text:not(#gz-read-font) { font-size: 13.5px; } html[data-site-theme="castle"] .mobile-header[data-balance-fit="4"] .mobile-header__balance-text:not(#gz-read-font) { font-size: 12px; } html[data-site-theme="castle"] .mobile-header:is([data-balance-fit="5"], [data-balance-fit="7"]) .mobile-header__balance-text:not(#gz-read-font) { font-size: 10.5px; } html[data-site-theme="castle"] .header .header-balance-cashier-row { padding: 2px; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 4px 4px 0 rgba(0, 0, 0, 0.45), inset -2px -2px 0 rgba(255, 255, 255, 0.07); } /* 44 px with 18 px words since 2026-10-25, with the taller header (owner: "make this top header slightly thicker and all the buttons text bigger with it"; was 40 / 16 — header.css "The computer header a little taller") */ html[data-site-theme="castle"] .header .header-balance-cashier-row .header-cashier-btn { height: 44px; } html[data-site-theme="castle"] .header .header-cashier-btn span { font-size: 18px; } /* the Fairness page's second button ("Check a bet") is a stone block with light words (it had the gold block's dark words on its dark face — unreadable; found in the overnight audit 2026-10-14) */ html[data-site-theme="castle"] .fair-cta--alt { background: var(--bg-elevated); color: var(--text-primary); border: 0; } html[data-site-theme="castle"] :is(.btn-login, .home-hero__tile, .ac-social-btn, .btn-view-all, .btn-arrow, .og-btn:not(.og-btn--bet), .og-btn--stop, .sg-btn-demo, .sg-btn-back, .sg-arrow-btn, .sg-m-btn-login, .acr-btn:not(.acr-btn--primary), .blog-back-btn, .slots-load-btn, .search-modal-btn-load-more, .slots-provider-btn-mobile, .catnav-dd-btn, .rw-hide-btn, .rw-pause-btn, .wr-howbtn, .mn-btn-sm, .mn-preset-btn, .seo-landing__cta--alt, .mn-play-btn, .fair-cta--alt, .pfp-btn-ghost) { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); } /* THE PHONE X BLOCK (owner 2026-10-23, the phone list: "restyle the X in the search bar to match the Providers button next to it (same size, shape, background, border, icon weight). Same for the X on the Wallet page."): on phones the search pop-up's X and the wallet's X (.gz-close--block-m, frame.css) are the Providers button's stone castle block — the ink outline, light top / dark bottom edge, hard shadow, sinking 2 px when pressed — with the pixel X. Undo ../removed-features-backup/mobile-list-2026-10-23/README.txt (item 6) */ @media (max-width: 768px) { html[data-site-theme="castle"] .gz-close--block-m { border-radius: 2px; background: var(--bg-chip); box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } html[data-site-theme="castle"] .gz-close--block-m:active { transform: translateY(2px); box-shadow: var(--castle-block-down); } html[data-site-theme="castle"] .gz-close--block-m:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } } @media (max-width: 768px) and (hover: hover) { html[data-site-theme="castle"] .gz-close--block-m:hover { background: var(--bg-chip); filter: brightness(1.1); } } /* the header's icon buttons — chat, search, rewards, notifications, and the phone header's present (owner 2026-10-15: "make the chat button fit the site style"; 2026-10-18: "other buttons look so differnt to chat be consistant with the style"): ONE stone castle block like Sign In (same 40 px, outline, light top / dark bottom edge, hard shadow, sinks when pressed) with a pixel icon from the one set (SiteIcon "pixel:chat|search|gift|bell"); while its chat / menu is open it has the chosen look: a gold outline (.is-active). The loading placeholder keeps its flat look. Undo ../removed-features-backup/header-buttons-castle-2026-10-18/README.txt (the chat alone: ../removed-features-backup/chat-button-castle-2026-10-15/README.txt) */ /* (the house games' phone speaker, .og-speaker, was the same block 2026-10-23 … 10-24, the Meme rewards button next to the Wallet, .wcb, 2026-10-22 … 10-23 — both removed) */ html[data-site-theme="castle"] :is(.header-icon-btn, .mobile-header__rewards-btn:not(.mobile-header__rewards-btn--skeleton), .mobile-header__account-btn:not(.mobile-header__account-btn--skeleton)) { border-radius: 2px; background: var(--bg-elevated); box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } @media (hover: hover) { html[data-site-theme="castle"] :is(.header-icon-btn, .mobile-header__rewards-btn:not(.mobile-header__rewards-btn--skeleton), .mobile-header__account-btn:not(.mobile-header__account-btn--skeleton)):hover { background: var(--bg-elevated); filter: brightness(1.1); } } html[data-site-theme="castle"] :is(.header-icon-btn, .mobile-header__rewards-btn:not(.mobile-header__rewards-btn--skeleton), .mobile-header__account-btn:not(.mobile-header__account-btn--skeleton)):active { background: var(--bg-elevated); transform: translateY(2px); box-shadow: var(--castle-block-down); } html[data-site-theme="castle"] :is(.header-icon-btn, .mobile-header__rewards-btn, .mobile-header__account-btn):focus-visible { background: var(--bg-elevated); outline: 2px solid var(--focus-ring); outline-offset: 2px; } html[data-site-theme="castle"] :is(.header-icon-btn, .mobile-header__rewards-btn, .mobile-header__account-btn).is-active { box-shadow: inset 0 0 0 2px var(--accent), inset 0 4px 0 rgba(255, 255, 255, 0.12), inset 0 -4px 0 rgba(0, 0, 0, 0.25), 3px 3px 0 rgba(0, 0, 0, 0.42); } /* the phone header's gold wallet button: the PC Wallet's gold castle block (it was the old rounded flat chip beside the present's block) */ html[data-site-theme="castle"] .mobile-header__badge:not(.mobile-header__badge--skeleton) { border-radius: 2px; box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } @media (hover: hover) { html[data-site-theme="castle"] .mobile-header__badge:not(.mobile-header__badge--skeleton):hover { filter: brightness(1.1); } } html[data-site-theme="castle"] .mobile-header__badge:not(.mobile-header__badge--skeleton):active { transform: translateY(2px); box-shadow: var(--castle-block-down); } html[data-site-theme="castle"] .mobile-header__badge:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* tabs and option switches: the chosen one is a raised block, the others lie flat in their dark track */ html[data-site-theme="castle"] :is(.lobby-tab, .og-tab, .wlt-tab, .search-modal-tab, .rb-tab, .wr-tab, .ogi-m-tab, .blog-cat-btn, .og-seg__btn, .search-tab) { border-radius: 2px; } html[data-site-theme="castle"] :is(.lobby-tab.active, .og-tab:is(.is-active, [aria-selected="true"]), .wlt-tab[aria-selected="true"], .search-modal-tab.active, .rb-tab--active, .wr-tab--active, .ogi-m-tab.active, .blog-cat-btn.active, .og-seg__btn:is(.is-active, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"])) { box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 0 rgba(0, 0, 0, 0.28); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } /* the lobby tab bar marks its chosen tab with a sliding pill drawn over the tab's own background: the pill is the block */ html[data-site-theme="castle"] .category-tabs__pill { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 0 rgba(0, 0, 0, 0.28), 2px 2px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .category-tabs.has-pill > .lobby-tab.active { box-shadow: none; } html[data-site-theme="castle"] :is(.wlt-tab[aria-selected="true"], .search-modal-tab.active, .wr-tab--active, .ogi-m-tab.active, .blog-cat-btn.active) { text-shadow: 0 1px 0 rgba(255, 246, 214, 0.45); } /* the small ½ / 2× chips, amount presets and filter chips: little blocks */ html[data-site-theme="castle"] :is(.og-chip, .wlt-chip-btn, .wlt-preset, .search-modal-chip) { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.26); } html[data-site-theme="castle"] :is(.og-chip, .wlt-chip-btn, .wlt-preset, .search-modal-chip):not(:disabled):active { transform: translateY(1px); } /* fields: plain and dark inside, ONE thin edge, square corners (owner 2026-10-14: "the search bar which is still on old style", then "wierd box around … no brick wall thing just dark inside it": no stone texture, no double outline / lip) */ html[data-site-theme="castle"] :is(.search-tab, .catnav-search, .catnav-dd-search) { border-radius: 2px; border: 1px solid var(--border-color); background: var(--bg-input); box-shadow: none; } html[data-site-theme="castle"] :is(.search-tab, .catnav-search, .catnav-dd-search):focus-within { border-color: var(--focus-ring); box-shadow: none; } /* the house games' stat panel (OgStats, 2026-10-21): the same sunken slot as the fields; the next step in cream */ html[data-site-theme="castle"] .og-stats { border-radius: 2px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .og-stats__row + .og-stats__row { border-top: 1px dashed rgba(var(--castle-ink-rgb, 10, 15, 28), 0.9); } html[data-site-theme="castle"] .og-stats--inline .og-stats__row + .og-stats__row { border-top: 0; border-left: 1px dashed rgba(var(--castle-ink-rgb, 10, 15, 28), 0.9); } html[data-site-theme="castle"] .og-stats--inline .og-stats__label { font-size: 13px; } html[data-site-theme="castle"] .og-stats__label { font-weight: 400; font-size: 13px; letter-spacing: 0.02em; } /* 15 px until 2026-10-21 ("make this a bit smaller") */ html[data-site-theme="castle"] .og-stats__row--next .og-stats__main { color: var(--castle-cream, #f4e7c5); } /* the house games' bet fields: a sunken slot (dark top edge), square corners — as before */ html[data-site-theme="castle"] :is(.og-amount, .og-field) { border-radius: 2px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] :is(.og-amount, .og-field):focus-within { box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 2px var(--focus-ring); } @media (hover: hover) { html[data-site-theme="castle"] :is(.search-tab, .catnav-search):hover .search-icon-tab { color: var(--text-primary); } } /* "Let fate decide" (owner 2026-10-17; was the "Ctrl + K" key cap): a stone castle block (it is in the BUTTONS list), the gold pixel dice, a little shorter than the box so the slot shows round it */ html[data-site-theme="castle"] .search-tab__fate { height: 30px; padding: 0 10px 2px; font-weight: 400; font-size: 16px; letter-spacing: 0.02em; } html[data-site-theme="castle"] .search-tab__fate:active { box-shadow: var(--castle-block-down); transform: translateY(1px); } /* Providers and Sort by beside the search box: plain blocks (no stone texture) of the box's height */ html[data-site-theme="castle"] .category-nav .category-nav__tools .catnav-dd-btn { height: 40px; /* level with the tabs and the search box (owner 2026-10-14) */ background: var(--bg-elevated); color: var(--text-primary); } /* Sort by shows its whole choice ("Sort by Most Popular"; the native density's 150 px cut it to "Most …") */ html[data-site-theme="castle"] .category-nav .category-nav__tools .catnav-sort-btn { width: auto; min-width: 150px; } /* their lists: a stone panel with a pixel frame and a hard shadow; the chosen row and the hovered one lie in a lighter slot */ html[data-site-theme="castle"] :is(.catnav-dd-panel, .slots-provider-panel-mobile) { border-radius: 2px; background: var(--bg-popup); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.08), 4px 4px 0 rgba(0, 0, 0, 0.45); } html[data-site-theme="castle"] :is(.catnav-dd-item, .slots-provider-panel-item) { border-radius: 0; } /* THE LISTS' CHOICE (owner 2026-10-19 on Providers / Sort by: "these look bad fix"): no tick boxes — both are pick-one lists, the empty squares read as a form. Rows 40 px in the reading size; the chosen one is the refined palette's chosen state — a raised stone row with a thin gold outline and cream words — with a small gold pixel tick on the right; a row lights up while pointed at. The tick is box-shadow pixels on a 2 px grid (never a mask or a picture: iPhone rule). Undo ../removed-features-backup/dropdown-lists-2026-10-19/README.txt */ html[data-site-theme="castle"] .catnav-dd-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 0; } /* phones: the panel holds the rows itself — the same inset, so the chosen row's outline never touches the frame */ html[data-site-theme="castle"] .slots-provider-panel-mobile { padding: 6px; } html[data-site-theme="castle"] .slots-provider-panel-mobile .sort-menu__list { gap: 2px; } html[data-site-theme="castle"] .slots-provider-panel-mobile > .slots-provider-panel-item + .slots-provider-panel-item { margin-top: 2px; } html[data-site-theme="castle"] .catnav-dd-item .catnav-dd-check { display: none; } html[data-site-theme="castle"] :is(.catnav-dd-item, .slots-provider-panel-item) { position: relative; min-height: 40px; padding: 8px 40px 8px 12px; gap: 0; font-size: 15px; color: var(--text-dim); background: transparent; } @media (hover: hover) { html[data-site-theme="castle"] :is(.catnav-dd-item, .slots-provider-panel-item):hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } } html[data-site-theme="castle"] :is(.catnav-dd-item, .slots-provider-panel-item).selected, html[data-site-theme="castle"] :is(.catnav-dd-item, .slots-provider-panel-item).selected:hover { color: var(--castle-cream, var(--text-bright)); background: var(--bg-elevated); box-shadow: inset 0 0 0 2px var(--accent), inset 0 4px 0 rgba(255, 255, 255, 0.07), inset 0 -4px 0 rgba(0, 0, 0, 0.22); } html[data-site-theme="castle"] :is(.catnav-dd-item, .slots-provider-panel-item).selected::after { content: ""; position: absolute; right: 28px; top: 50%; width: 2px; height: 2px; margin-top: -6px; pointer-events: none; box-shadow: 0 4px var(--accent), 2px 6px var(--accent), 4px 8px var(--accent), 6px 6px var(--accent), 8px 4px var(--accent), 10px 2px var(--accent), 12px 0 var(--accent), 0 6px var(--accent), 2px 8px var(--accent), 4px 10px var(--accent), 6px 8px var(--accent), 8px 6px var(--accent), 10px 4px var(--accent), 12px 2px var(--accent); } /* the side menu's Sound switch (SidebarSound.tsx): a square pixel switch, a stone knob */ html[data-site-theme="castle"] .sidebar-sound__switch { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .sidebar-sound__knob { top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--castle-ink), inset 0 -2px 0 rgba(0, 0, 0, 0.28); } /* every other on / off switch the same way (overnight audit 2026-10-14: there were four looks — a blue round iOS switch on a slot's phone page, a green one in Account → Settings, round ones in the games (Demo, Advanced, hotkeys, the Wheel) and in the chat): square, the ink edge, a square knob; on = the gold of the main buttons */ html[data-site-theme="castle"] :is(.og-switch, .sg-m-switch, .kc__switch, .mk-switch__box, .acc-toggle) { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] :is(.og-switch__knob, .sg-m-switch-knob, .kc__knob, .mk-switch__knob, .acc-toggle__knob) { border-radius: 1px; box-shadow: inset 0 0 0 1px var(--castle-ink), inset 0 -2px 0 rgba(0, 0, 0, 0.28); } html[data-site-theme="castle"] :is(.og-switch:is(.is-active, [aria-checked="true"], [aria-pressed="true"]), .sg-m-switch.active, .kc__anon.is-on .kc__switch, .mk-switch.is-on .mk-switch__box, .acc-toggle:is(.acc-toggle--on, [aria-checked="true"], [aria-pressed="true"])) { background: var(--accent); } /* MY ACCOUNT → SETTINGS, EASIER TO READ (owner 2026-10-23: "make settings more readable"): every word was 12–14 px in the pixel font, the values and the hint a dim grey. Now the names (Username, Email, Appear anonymous in chat) are 17 px pixel letters in white, what they ARE (your username, your e-mail) and the hint are in the reading font — 16 px / 15 px, brighter, more room between the lines —, the rows taller, the icons and the Change buttons bigger, the headings bigger, and on computers the account's side menu 16 px. ":not(#gz-read-font)" outweighs the global pixel-font rule. Phones: the switch was the castle's square edge drawn round a round green pill (account-layout.css draws the 44 px touch switch's track with ::before) — now one square castle switch, gold when on. Check ../banner-work/account-settings-readable-2026-10-23/tools/settings-shots.mjs desk,i14,se; undo ../removed-features-backup/account-settings-readable-2026-10-23/README.txt */ html[data-site-theme="castle"] .acc-settings .acc-section-title { font-size: 24px; line-height: 1.2; } html[data-site-theme="castle"] .acc-settings .acc-subsection-title { font-size: 20px; line-height: 1.2; } html[data-site-theme="castle"] .acc-settings .acc-settings__group { margin-top: 28px; } html[data-site-theme="castle"] .acc-settings .acc-list-item { min-height: 80px; padding: 16px 20px; gap: 16px; } html[data-site-theme="castle"] .acc-settings .acc-list-item__main { gap: 5px; } html[data-site-theme="castle"] .acc-settings .acc-list-item__label { font-size: 17px; line-height: 1.2; color: var(--text-bright); letter-spacing: 0.01em; } html[data-site-theme="castle"] .acc-settings :is(.acc-list-item__value, .acc-list-item__hint):not(#gz-read-font) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; } html[data-site-theme="castle"] .acc-settings .acc-list-item__value:not(#gz-read-font) { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text-primary); } html[data-site-theme="castle"] .acc-settings .acc-list-item__hint:not(#gz-read-font) { font-size: 15px; font-weight: 500; line-height: 1.55; color: #cdd5e4; max-width: 62ch; } html[data-site-theme="castle"] .acc-settings .acc-settings__cooldown { display: inline-flex; align-items: center; gap: 6px; } html[data-site-theme="castle"] .acc-settings .acc-icon-chip--sm { width: 40px; height: 40px; font-size: 17px; color: var(--text-muted); } html[data-site-theme="castle"] .acc-settings .acc-list-item__side .acc-btn { min-height: 40px; padding: 0 18px; font-size: 16px; } @media (min-width: 769px) { html[data-site-theme="castle"] .acc-nav-item { font-size: 16px; } html[data-site-theme="castle"] .acc-nav-item i { font-size: 17px; } } @media (max-width: 768px) { html[data-site-theme="castle"] .acc-settings .acc-section-title { font-size: 22px; } html[data-site-theme="castle"] .acc-settings .acc-subsection-title { font-size: 19px; } html[data-site-theme="castle"] .acc-settings .acc-list-item { padding: 14px 16px; gap: 14px; } } @media (max-width: 768px), (pointer: coarse) { html[data-site-theme="castle"] .acc-toggle { box-shadow: none; border-radius: 0; } html[data-site-theme="castle"] .acc-toggle::before { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .acc-toggle.acc-toggle:is(.acc-toggle--on, [aria-checked="true"], [aria-pressed="true"]) { background: transparent; } html[data-site-theme="castle"] .acc-toggle:is(.acc-toggle--on, [aria-checked="true"], [aria-pressed="true"])::before { background: var(--accent); } } /* MY ACCOUNT, EVERY SECTION EASIER TO READ (owner 2026-10-27: "Make the settings easier to read all of it"): every section of My Account and its pop-ups had most of its words in 12–14 px pixel letters in grey — the explanations, the notifications, the break choices, the tables, and on phones the bet history at 12 px. Now: - one step bigger everywhere: the account's own type scale inside .acc-page and its pop-ups (.acc-modal-portal) — --fs-xs 12 → 15, sm 14 → 16, md 16 → 18, lg 18 → 22, xl 24 → 28 —, so headings, names, labels, buttons, tabs and table headings grow together; - brighter secondary words (--text-muted #bcc6d9 → #d3dbe9, --text-dim #a3adc4 → #b8c2d6); - every explanation and every piece of data (notes, hints, messages, alerts, empty lines, table cells, the phone cards, what is typed, addresses, e-mails) in the reading font, 15–16 px, with room between the lines; headings, names, labels, buttons and the big figures stay pixel letters. Settings keeps its own rules above. ":not(#gz-read-font)" outweighs the global pixel-font rule. Check ../banner-work/account-readable-2026-10-27/tools/account-shots.mjs desk,i14,se mid (EXPECT=after); undo ../removed-features-backup/account-readable-2026-10-27/README.txt */ html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) { --fs-xs: 15px; --fs-sm: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --text-muted: #d3dbe9; --text-muted-2: #d3dbe9; --text-dim: #b8c2d6; } html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) :is(.acc-section-sub, .acc-card__sub, .acc-security__text, .se-intro, .acc-alert__text, .acc-empty-state__text, .acc-inset, .acc-notif-msg, .acc-profile-vip--paused, .acc-hint, .acc-list-item__hint, .acc-list-item__value, .acc-choice__sub, .acc-field-msg, .kyc-upload__hint, .acc-notif-time, .acc-table td, .acc-table-count, .acc-mcard__meta, .acc-mcard__value, .acc-login-card__date, .acc-login-card__location, .acc-login-card__ip, .acc-copy__value, .acc-profile-static, .acc-kv__value, .acc-tx-link, .acc-input, .acc-select, .acc-textarea, .acc-modal-field :is(input, select, textarea)):not(#gz-read-font), html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) :is(.acc-section-sub, .acc-card__sub, .acc-security__text, .se-intro, .acc-alert__text, .acc-empty-state__text, .acc-inset, .acc-notif-msg, .acc-profile-vip--paused, .acc-hint, .acc-list-item__hint, .acc-list-item__value, .acc-choice__sub, .acc-field-msg, .kyc-upload__hint, .acc-notif-time, .acc-table td, .acc-table-count, .acc-mcard__meta, .acc-mcard__value, .acc-login-card__date, .acc-login-card__location, .acc-login-card__ip, .acc-copy__value, .acc-profile-static, .acc-kv__value, .acc-tx-link) *:not(#gz-read-font):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; } /* the explanations: 16 px, room between the lines, never wider than a comfortable line */ html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) :is(.acc-section-sub, .acc-card__sub, .acc-security__text, .se-intro, .acc-alert__text, .acc-empty-state__text, .acc-notif-msg, .acc-profile-vip--paused):not(#gz-read-font) { font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--text-muted); max-width: 70ch; } /* notes under fields and choices, times, counts: 15 px */ html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) :is(.acc-hint, .acc-list-item__hint, .acc-choice__sub, .acc-field-msg, .kyc-upload__hint, .acc-notif-time, .acc-table-count, .acc-mcard__meta, .acc-login-card__date, .acc-login-card__location, .acc-login-card__ip, .acc-tx-link):not(#gz-read-font) { font-size: 15px; font-weight: 500; line-height: 1.5; } /* the data: table cells 15 px, values and what is typed 16 px */ html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) .acc-table td:not(#gz-read-font) { font-size: 15px; font-weight: 500; } html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) :is(.acc-list-item__value, .acc-copy__value, .acc-profile-static, .acc-kv__value, .acc-input, .acc-select, .acc-textarea, .acc-modal-field :is(input, select, textarea)):not(#gz-read-font) { font-size: 16px; font-weight: 600; } html[data-site-theme="castle"] :is(.acc-page, .acc-modal-portal) .acc-mcard__value:not(#gz-read-font) { font-size: 16px; font-weight: 700; } /* pixel words that had their own small size: the break groups' headings, the notification titles */ html[data-site-theme="castle"] .acc-page .se-group__title { font-size: 17px; color: var(--text-bright); } html[data-site-theme="castle"] .acc-page .acc-notif-title { font-size: 17px; } /* the phones' bet cards: the bet line and the date each stay whole; when both don't fit side by side the date drops under the bet line, on the right (at 15 px the date broke over two lines) */ html[data-site-theme="castle"] .acc-page .acc-bets-cards .acc-mcard__row:last-child { flex-wrap: wrap; row-gap: 2px; } html[data-site-theme="castle"] .acc-page .acc-bets-cards .acc-bets-when { margin-left: auto; white-space: nowrap; } /* the phones' sign-in cards the same way: the browser's name whole, the date under it when both don't fit */ html[data-site-theme="castle"] .acc-page .acc-login-card__top { flex-wrap: wrap; row-gap: 2px; } html[data-site-theme="castle"] .acc-page .acc-login-card__browser { flex: 1 0 auto; max-width: 100%; } html[data-site-theme="castle"] .acc-page .acc-login-card__date { margin-left: auto; white-space: nowrap; } /* THE REFERRALS PAGE, EASIER TO READ (owner 2026-10-26: "Make refferal page easier to read"): the explanations — the hero's lead, the steps, the reasons, the facts, the example, the answers — and the link are in the reading font; titles, figures and buttons stay pixel letters. Sizes and layout: referrals.css "EASIER TO READ". ":not(#gz-read-font)" outweighs the global pixel-font rule. Undo ../removed-features-backup/referrals-readable-2026-10-26/README.txt */ html[data-site-theme="castle"] .rf-page :is(.cph__lead, .cph__small, .cpb__desc, .cpb-faq__a, .cpb__ticks li, .rf-example, .rf-link__url):not(#gz-read-font) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; text-shadow: none; } html[data-site-theme="castle"] .rf-page :is(.cph__lead, .cph__small):not(#gz-read-font) { text-shadow: 1px 1px 0 rgba(var(--castle-ink-rgb), 0.85); } /* the Sound / Music volume sliders: a square track, a block knob */ html[data-site-theme="castle"] .sidebar-audio-slider { border-radius: 0; box-shadow: inset 0 0 0 1px var(--castle-ink); } html[data-site-theme="castle"] .sidebar-audio-slider::-webkit-slider-thumb { width: 14px; height: 18px; border-radius: 1px; background: var(--text-primary); box-shadow: inset 0 0 0 1px var(--castle-ink), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 1px 1px 0 rgba(0, 0, 0, 0.45); } html[data-site-theme="castle"] .sidebar-audio-slider::-moz-range-thumb { width: 14px; height: 18px; border-radius: 1px; background: var(--text-primary); box-shadow: inset 0 0 0 1px var(--castle-ink), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 1px 1px 0 rgba(0, 0, 0, 0.45); } /* touch screens: the ink edge drawn on the 6 px track only (the touch area is 28 px tall, sidebar.css) */ @media (hover: none) and (pointer: coarse) { html[data-site-theme="castle"] .sidebar-audio-slider { box-shadow: none; background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--val, 50%), var(--bg-elevated) var(--val, 50%)) center / calc(100% - 2px) 4px no-repeat, linear-gradient(var(--castle-ink), var(--castle-ink)) center / 100% 6px no-repeat; } } /* ── EDGE FADES (owner 2026-10-14: "fix whatever this box on the right side when games fade out is"): a game row's own fade covers was painted in the old flat page colour, a dark rectangle over the underground's stone. In the theme they are off and the row itself fades out (a mask), so the stone shows through; nothing fades at a row's start or at its end. ── */ html[data-site-theme="castle"] :is(.game-grid-wrapper, .sg-suggested-wrap, .sg-m-suggested-wrap)::before, html[data-site-theme="castle"] :is(.game-grid-wrapper, .sg-suggested-wrap, .sg-m-suggested-wrap)::after { display: none; } html[data-site-theme="castle"] :is(.game-grid, .sg-suggested-grid, .sg-m-suggested-grid) { --fade-l: 0px; --fade-r: 48px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); } html[data-site-theme="castle"] .game-section:not(.at-start) .game-grid, html[data-site-theme="castle"] :is(.sg-suggested-wrap, .sg-m-suggested-wrap):not(.at-start) > :is(.sg-suggested-grid, .sg-m-suggested-grid) { --fade-l: 48px; } html[data-site-theme="castle"] :is(.game-section.at-end .game-grid, .game-grid-wrapper.at-end .game-grid, .sg-suggested-wrap.at-end > .sg-suggested-grid, .sg-m-suggested-wrap.at-end > .sg-m-suggested-grid) { --fade-r: 0px; } /* "Games You Might Like" opened by More Games (SuggestedGames.tsx) is a grid that doesn't scroll: no fade at all (2026-10-24: it kept fading the grid's right column, and after a sideways scroll its left one too). */ html[data-site-theme="castle"] .sgx--expanded :is(.sg-suggested-grid, .sg-m-suggested-grid) { -webkit-mask-image: none; mask-image: none; } html[data-site-theme="castle"] .btn-register::after { border-radius: 3px; } /* (The header's Sign In / Register words were 18 / 16 px without Register's light edge for a few hours on 2026-10-22 — reverted the same day, owner: "revert the sign in register button back to the text it was before"; undo ../removed-features-backup/header-register-readable-2026-10-22/README.txt) */ /* ── game pictures: rounder corners and a hard block shadow ───────────────────────────────────────────────────── (owner 2026-10-17: "add slightly more rounding to all game thumbnails on the edges" — "like duel do", with a picture of Duel's tiles: about 10 px on a 130 px tile; it was 4 px). ONE value for every game thumbnail — lobby rows and grids, the Originals, search, Favourites, Recently Played, Recent Wins, the game page's suggestions, /house —: --tile-radius, 10 px on computers, 8 px on phones (smaller tiles). Every one of these boxes clips its picture (overflow: hidden), so the picture follows; the hover outline inherits it. The game boards' own tiles (.og-tile: Mines, Keno …) keep 4 px. Undo ../removed-features-backup/tile-corners-2026-10-17/README.txt */ html[data-site-theme="castle"] { --tile-radius: 10px; } @media (max-width: 768px) { html[data-site-theme="castle"] { --tile-radius: 8px; } } html[data-site-theme="castle"] :is(.game-card, .lobby-tile, .rw-card__img, .rw-card__thumb, .slot-tile, .slot-card, .search-modal-game-card, .fav-card__link, .rp-card__link, .related-originals__img-wrap, .sg-suggested-card, .original-card, .originals-index-card, .lobby-skel-tile), html[data-site-theme="castle"] .sg-m-suggested-card img, html[data-site-theme="castle"] .sg-m-suggested-card::before, html[data-site-theme="castle"] .sg-m-suggested-card::after { border-radius: var(--tile-radius); } html[data-site-theme="castle"] .og-tile { border-radius: 4px; } html[data-site-theme="castle"] .game-grid .game-card { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); } /* ── SKY + CASTLE + GROUND: the home banner (signed out) is the castle in one picture with the page ───────────── */ html[data-site-theme="castle"] .home-hero { overflow: visible; /* the sky and the ground reach past the banner, across the whole page */ } /* (phones: lobby.css clips every block of the lobby column under 600 px — the full banner may reach past it) */ html[data-site-theme="castle"] .lobby > .home-hero:not(.home-hero--compact) { overflow: visible; } html[data-site-theme="castle"] .home-hero { border-radius: 0; background: none; box-shadow: none; } /* the sky: from the top of the page down to the banner's bottom, across the whole width; far hills along the horizon */ html[data-site-theme="castle"] .home-hero::before { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -100vh; bottom: 0; /* the stars (blue left / red right since 2026-10-17: "for the logged out banner make the stars on the left side blue and right side red"; stars-split.png, ../banner-work/home-split-stars-2026-10-17), the clouds and the hills are on .home-hero__sky (below) since 2026-10-22 */ background: url("/theme/castle/sky-bands.png") 0 bottom / 24px 420px repeat-x, var(--castle-sky-top); image-rendering: pixelated; pointer-events: none; } /* the stars, the clouds and the far hills on their own layer, between the sky above and the forest (owner 2026-10-22: "remove the starts from behind the or continue with"): .home-hero__sky (HomeHero.tsx, first in the banner), its ::before the stars, its ::after the clouds + hills, both on the sky's own box (so every star, cloud and hill stands exactly where it stood). On computers the stars fade out round "or continue with" and the social tiles (a mask: clear in the middle of an ellipse, full from its edge); from 769 px the banner is 430 px tall and the line sits 154–167 px, the tiles 102–146 px above the ground line at every width. Phones need none: the clear pool covers them. Check ../banner-work/home-label-stars-2026-10-22/tools/label-stars.mjs; undo ../removed-features-backup/home-label-stars-2026-10-22/README.txt */ html[data-site-theme="castle"] .home-hero__sky { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; } html[data-site-theme="castle"] .home-hero__sky::before, html[data-site-theme="castle"] .home-hero__sky::after { content: ''; position: absolute; left: -100vw; right: -100vw; top: -100vh; bottom: 0; image-rendering: pixelated; pointer-events: none; } /* blue stars over the blue castle's side, red over the red one's (2026-10-17, stars-split.png) */ html[data-site-theme="castle"] .home-hero__sky::before { background: url("/theme/castle/stars-split.png") center 0 / 4800px 480px repeat-y; } html[data-site-theme="castle"] .home-hero__sky::after { background: url("/theme/castle/hills.png") center bottom / 1800px 192px repeat-x, url("/theme/castle/clouds.png") center bottom 230px / 1800px 120px repeat-x; } @media (min-width: 769px) { html[data-site-theme="castle"] .home-hero__sky::before { -webkit-mask-image: radial-gradient(ellipse 280px 80px at 50% calc(100% - 134px), transparent 0, transparent 70%, #000 100%); mask-image: radial-gradient(ellipse 280px 80px at 50% calc(100% - 134px), transparent 0, transparent 70%, #000 100%); } } /* the forest, in depth (owner 2026-10-14, a reference picture: "use trees like this in the backround", then "like they are far in the middle and close on the outer sides of the towers"): small faded pines in the middle, taller ones by the castles, big dark ones outside the keeps. forest.png is drawn on hero.png's own grid (its middle third = the castle picture), so it is 3 x the banner's width, centred, standing on the ground line, behind the castles; phones: forest-narrow.png around hero-narrow.png. Art: ../banner-work/castle-theme-2026-10-14/tools/make-forest.mjs */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__forest { display: block; position: absolute; z-index: -1; left: 50%; bottom: 0; width: 300%; aspect-ratio: 1200 / 120; transform: translateX(-50%); background: var(--hero-forest, url("/theme/castle/forest.png")) center bottom / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; } @media (max-width: 768px) { /* forest-phone.png (320 x 72) around the bigger phone castle hero-phone.png (its middle 120 px, 2026-10-16; the race page and the castle pages keep forest-narrow.png around hero-narrow.png) */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__forest { width: calc(320px * var(--hp-s, 3)); /* on the castle picture's own whole-number scale */ aspect-ratio: 320 / 72; background-image: var(--hero-forest-phone, url("/theme/castle/forest-phone.png")); } } /* the castle (and the moon), standing on the banner's bottom edge = the ground line */ html[data-site-theme="castle"] .home-hero__art img { display: none; } html[data-site-theme="castle"] .home-hero__art { background: url("/theme/castle/moon.png") right 14% top 6% / 81px 81px no-repeat, radial-gradient(ellipse 400px 160px at 50% 32%, var(--castle-sky-top) 0, var(--castle-sky-top) 60%, rgba(30, 43, 84, 0) 100%); image-rendering: pixelated; } /* windows 769–1023 px wide (a phone held sideways, a small tablet or laptop window): the headline is nearly as wide as the sky there and the moon sat behind "CASINO" (overnight check 2026-10-16) — it moves into the corner, a little smaller. Undo: ../removed-features-backup/overnight-2026-10-16/moon-landscape/ */ @media (min-width: 769px) and (max-width: 1023px) { html[data-site-theme="castle"] .home-hero__art { background-position: right 1% top 2%, 0% 0%; background-size: 60px 60px, auto; } } /* the castles on their own layer, so they can make way for an offer (2026-10-15, "THE HOME BANNER'S OFFERS" below). --hero-castle (and --hero-castle-phone, --hero-forest, --hero-forest-phone) = a fresh copy of the picture when the first one arrived only in part (HomeHero.tsx, src/lib/wholePicture.ts; 2026-10-26 the castles stood with only their roofs). Undo ../removed-features-backup/home-castles-whole-2026-10-26/README.txt */ html[data-site-theme="castle"] .home-hero__art::before { content: ''; position: absolute; inset: 0; background: var(--hero-castle, url("/theme/castle/hero.png")) center bottom / 100% auto no-repeat; image-rendering: pixelated; transition: opacity 0.9s ease 0.15s; } /* the words and buttons (owner 2026-10-14, a reference picture: "make the layout for the signed out banner like this … just format of words and buttons"): a taller banner with sky above the keeps; on top this week's score line, the big two-line headline, one line under it, ONE gold button, "or continue with" between two thin lines, three square social tiles — all centred. Undo: ../removed-features-backup/home-banner-layout-2026-10-14/README.txt */ @media (min-width: 769px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) { aspect-ratio: auto; height: 430px; min-height: 0; max-height: none; align-items: flex-start; padding: 44px 0 0; } /* packed close together (owner 2026-10-14: "move the words and buttons closer together so they have some room for pepes fighting at bottom"): the tiles end ~110 px above the ground, clear of the battle */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__content { width: min(440px, 100% - 40px); gap: 0; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__title { margin: 0 0 6px; font-size: 50px; line-height: 0.96; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__sub { margin: 0 0 14px; font-size: 17px; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__register { height: 46px; font-size: 18px; margin-bottom: 12px; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__label { margin-bottom: 8px; } } html[data-site-theme="castle"] .home-hero__title { text-transform: uppercase; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); } html[data-site-theme="castle"] .home-hero__title-line { display: block; } html[data-site-theme="castle"] .home-hero__sub { color: var(--text-primary); opacity: 0.86; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__register { align-self: center; width: min(300px, 100%); } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__label { display: flex; align-items: center; gap: 12px; align-self: center; width: min(300px, 100%); font-weight: 400; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__label::before, html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__label::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.28); } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__tiles { grid-template-columns: repeat(3, 66px); justify-content: center; gap: 16px; margin-top: 0; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__tile { height: 44px; } @media (max-width: 768px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__content { gap: 12px; } /* each of the two lines fits on one line down to a 320 px phone ("THE CRYPTO CASINO" is 309 px wide at 36 px; the room is the screen minus 64 px) — owner 2026-10-15's headline */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__title { font-size: min(36px, calc((100vw - 64px) * 0.113)); line-height: 1; } /* 14 px under the line (was 4): the button section 10 px further from the words (owner 2026-10-16, with the banner's top 10 px less: "move the words and buttons section a little bit lower …") */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__sub { margin: -4px 0 14px; font-size: 14px; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__register { height: 46px; font-size: 17px; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__tile { height: 44px; } } /* "BATTLE FOR / THE THRONE" bigger (owner 2026-10-16: "make the top text bigger"): the castles' slide only — the offers' longer lines ("ON YOUR DEPOSIT") keep the sizes above. Its widest line is 5.14 x the font size: 68 px = 349 px of the 440 px column on computers; on phones up to 50 px, never wider than the screen minus 64 px. The words start 12 px higher on computers so the button and tiles stay clear of the fight. A shorter offer slide's spare room goes ABOVE its headline (auto margin), so its words sit right on its button (owner 2026-10-16: "the other banners text is too far from buttons" — the room was split above the headline and under the line) and the button stays where the castles' slide has it. Undo: ../removed-features-backup/home-banner-throne-words-2026-10-16/README.txt */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__words > .home-hero__title { margin-top: auto; } @media (min-width: 769px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) { padding-top: 32px; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__words--castle .home-hero__title { font-size: 68px; line-height: 0.96; } } @media (max-width: 768px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__words--castle .home-hero__title { font-size: min(50px, calc((100vw - 64px) * 0.18)); } } /* no wager bar on the home banner since 2026-10-15 (owner: "get rid of the wager bar on home screen banner"): the castles with their own small keep flags on every screen, the words in their usual place, the moon back on phones. Undo: ../removed-features-backup/home-war-bar-removed-2026-10-15/README.txt */ /* the battle's lights (torches, the burning walls, the two hits, the cannon's flash) glow and flicker; hero-glow.png is drawn on the castles' own pixel grid and placed exactly like hero.png */ html[data-site-theme="castle"] .home-hero__content::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url("/theme/castle/hero-glow.png") center bottom / 100% auto no-repeat; image-rendering: pixelated; mix-blend-mode: screen; pointer-events: none; animation: castle-flicker 1.9s steps(5, end) infinite; } html[data-site-theme="castle"] .home-hero__title { color: var(--text-bright); } /* the ground: grass along the banner's bottom edge across the whole page, a band of dirt that darkens step by step into the underground's stone (owner 2026-10-14: "blend this better"); its last rows break up so the rock shows through */ html[data-site-theme="castle"] .home-hero::after { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: 100%; height: 196px; /* the ground (102 px) + room for the caskets under it (one lies deeper) */ background: var(--castle-caskets), url("/theme/castle/ground.png") 0 0 / 192px 102px repeat-x; image-rendering: pixelated; pointer-events: none; } /* phones: the words on top, the castle under them standing on the ground line */ @media (max-width: 768px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) { background: none; /* half the sky above the words (owner 2026-10-16: "remove the mobile sky section from the top of the text words like battle for the thrones to the top header by half": 60 → 30 px with the content's 8 px margin; was 52 px, room for the moon — the moon is now a little smaller in the top right corner, clear of the headline) */ /* 22 → 12 px (owner 2026-10-16, the same evening: "move the words and buttons section a little bit lower and reduce the distance between top of text and header sky as much as you move it down"): the headline 10 px higher, the button and what follows 10 px further from the words above them (.home-hero__sub below) — the button, tiles and castles stay where they were, the banner keeps its height */ padding-top: 12px; padding-bottom: 0; /* the castle picture's whole-number scale (2x / 3x / 4x / 5x by width, below): every art pixel the same size */ --hp-s: 3; } /* the BIGGER phone castles (owner 2026-10-16: "Redesign the mobile homepage banner art to be bigger same style just bigger"): hero-phone.png, the same pieces on a 120 x 60 grid (was hero-narrow.png, 168 x 48) — at the column's width every pixel ~40 % bigger (about 3x on an iPhone 14), the picture ~180 px tall instead of ~100; its lights flicker on ::after like the wide banner's (hero-phone-glow.png). Art ../banner-work/castle-theme-2026-10-14/tools/ make-art.mjs heroPhone; undo ../removed-features-backup/phone-banner-bigger-2026-10-16/README.txt */ /* at a whole-number scale (owner 2026-10-16: "Make sure its still decent quality the mobile art"): 120 x 60 art px at --hp-s, centred — 360 px on most phones, a little past the words' column into the banner's sides (the keeps stand just outside the column); at 2.7x some art pixels were drawn 2 px wide and some 3 */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__mobile-art { order: 2; width: calc(120px * var(--hp-s)); max-width: none; height: auto; aspect-ratio: 120 / 60; flex-shrink: 0; align-self: center; margin: 18px 0 0; image-rendering: pixelated; } /* the phone castles on their own layer too (they make way for an offer like the wide ones) */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__mobile-art::before { content: ''; position: absolute; inset: 0; background: var(--hero-castle-phone, url("/theme/castle/hero-phone.png")) center bottom / 100% auto no-repeat; image-rendering: pixelated; transition: opacity 0.9s ease 0.15s; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__mobile-art::after { content: ''; position: absolute; inset: 0; background: url("/theme/castle/hero-phone-glow.png") center bottom / 100% auto no-repeat; image-rendering: pixelated; mix-blend-mode: screen; pointer-events: none; animation: castle-flicker 1.9s steps(5, end) infinite; transition: filter 0.9s ease 0.15s; } html[data-site-theme="castle"] .home-hero__mobile-art img { display: none; } /* the words' layer carries the moon on phones (no torch glow: the phone castle is small) */ html[data-site-theme="castle"] .home-hero__content::before { left: -50vw; /* past the banner's side margins, so the clear area fades out with no edge */ right: -50vw; background: url("/theme/castle/moon.png") right calc(50vw - 2px) top 2px / 36px 36px no-repeat, radial-gradient(ellipse 300px 230px at 50% 175px, var(--castle-sky-top) 0, var(--castle-sky-top) 66%, rgba(30, 43, 84, 0) 100%); mix-blend-mode: normal; animation: none; image-rendering: pixelated; } html[data-site-theme="castle"] .home-hero::before { background: url("/theme/castle/sky-bands.png") 0 bottom / 16px 280px repeat-x, var(--castle-sky-top); } html[data-site-theme="castle"] .home-hero__sky::before { background: url("/theme/castle/stars-split.png") center 0 / 3200px 320px repeat-y; } html[data-site-theme="castle"] .home-hero__sky::after { background: url("/theme/castle/hills.png") center bottom / 1200px 128px repeat-x, url("/theme/castle/clouds.png") center bottom 200px / 1200px 80px repeat-x; } html[data-site-theme="castle"] .home-hero::after { height: 68px; background-size: 128px 68px; } } /* the phone castles' whole-number scale by width (the picture is 120 art px wide): 2x up to 359 px (240 px, an SE), 3x up to 479 (360 px: most phones), 4x up to 599, 5x up to 768 (600 px, an iPad held upright) — never wider than the screen */ @media (max-width: 359px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) { --hp-s: 2; } } @media (min-width: 480px) and (max-width: 599px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) { --hp-s: 4; } } @media (min-width: 600px) and (max-width: 768px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) { --hp-s: 5; } } /* the compact banner on phones (Slots / Originals … tabs): a stone card underground, no sky */ @media (max-width: 768px), (max-height: 500px) { html[data-site-theme="castle"] .lobby .home-hero.home-hero--compact { overflow: hidden; border-radius: 4px; background: linear-gradient(rgba(var(--bg-secondary-rgb), 0.9), rgba(var(--bg-secondary-rgb), 0.9)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; image-rendering: pixelated; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); } html[data-site-theme="castle"] .lobby .home-hero.home-hero--compact * { image-rendering: auto; } html[data-site-theme="castle"] .home-hero--compact::before, html[data-site-theme="castle"] .home-hero--compact::after, html[data-site-theme="castle"] .home-hero--compact .home-hero__sky, html[data-site-theme="castle"] .home-hero--compact .home-hero__content::before { display: none; } } @keyframes castle-flicker { 0% { opacity: 0.75; } 25% { opacity: 1; } 50% { opacity: 0.6; } 75% { opacity: 0.95; } 100% { opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] .home-hero__content::before { animation: none; } } /* ── THE HOME BANNER'S OFFERS (owner 2026-10-15: "Just like the logged in banner on mobile switches to the next offer i want you to do it with the home page where there is the castle battle it should occasionally switch to the offers … they should be where the castle is make sure they are in a cool style of the art"): now and then (HomeHero.tsx) the castles, their lights and the war flags fade out and an offer's own pixel scene stands where they stood — on the same grid (400 x 112, phones 168 x 48) and the same ground line: the royal treasury (the deposit bonus) or the trenches with the rocket to the moon (the meme coins). The sky, the forest, the moon and the ground stay. Art: public/theme/castle/offers/*, ../banner-work/home-offers-2026-10-15/tools/make-offer-scenes.mjs. Undo: ../removed-features-backup/home-offers-2026-10-15/README.txt ── */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__scenes { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__scene { display: block; position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(2%); background: center bottom / 100% auto no-repeat; image-rendering: pixelated; transition: opacity 0.7s ease, transform 0.7s steps(4, end), visibility 0s linear 0.7s; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.9s ease 0.35s, transform 0.9s steps(4, end) 0.35s, visibility 0s; } /* the scene's lights (gold, the vault, the rocket's flame) glow and flicker like the castles' */ html[data-site-theme="castle"] .home-hero__scenes .home-hero__scene::after { content: ''; position: absolute; inset: 0; background: center bottom / 100% auto no-repeat; image-rendering: pixelated; mix-blend-mode: screen; animation: castle-flicker 1.9s steps(5, end) infinite; } @media (max-width: 768px) { /* phones: the scenes stand in the phone picture's box (under the words), not across the banner */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__scenes { display: none; } } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__scenes .home-hero__scene--deposit { background-image: url("/theme/castle/offers/offer-deposit.png"); } html[data-site-theme="castle"] .home-hero__scenes .home-hero__scene--deposit::after { background-image: url("/theme/castle/offers/offer-deposit-glow.png"); } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__scenes .home-hero__scene--wallet { background-image: url("/theme/castle/offers/offer-wallet.png"); } html[data-site-theme="castle"] .home-hero__scenes .home-hero__scene--wallet::after { background-image: url("/theme/castle/offers/offer-wallet-glow.png"); } /* phones: the 120 x 60 scenes of the bigger phone picture (2026-10-16; were the 168 x 48 -narrow ones), with their lights */ html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__mobile-art .home-hero__scene--deposit { background-image: url("/theme/castle/offers/offer-deposit-phone.png"); } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__mobile-art .home-hero__scene--wallet { background-image: url("/theme/castle/offers/offer-wallet-phone.png"); } html[data-site-theme="castle"] .home-hero__mobile-art .home-hero__scene::after { content: ''; position: absolute; inset: 0; background: center bottom / 100% auto no-repeat; image-rendering: pixelated; mix-blend-mode: screen; animation: castle-flicker 1.9s steps(5, end) infinite; } html[data-site-theme="castle"] .home-hero__mobile-art .home-hero__scene--deposit::after { background-image: url("/theme/castle/offers/offer-deposit-phone-glow.png"); } html[data-site-theme="castle"] .home-hero__mobile-art .home-hero__scene--wallet::after { background-image: url("/theme/castle/offers/offer-wallet-phone-glow.png"); } /* the castles, their lights and the war flags make way */ html[data-site-theme="castle"] .home-hero--offer .home-hero__art::before, html[data-site-theme="castle"] .home-hero--offer .home-hero__mobile-art::before { opacity: 0; transition: opacity 0.7s ease; } /* the phone castles' lights: the flicker animates their opacity, so they go dark (screened, black = no light) instead */ html[data-site-theme="castle"] .home-hero--offer .home-hero__mobile-art::after { filter: brightness(0); transition: filter 0.6s ease; } @media (min-width: 769px) { html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__content::before { transition: filter 0.9s ease 0.15s; } /* the lights are screened on, so black = no light: they fade with the castles without stopping their flicker */ html[data-site-theme="castle"] .home-hero--offer .home-hero__content::before { filter: brightness(0); transition: filter 0.6s ease; } } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] .home-hero__scenes .home-hero__scene::after, html[data-site-theme="castle"] .home-hero__mobile-art .home-hero__scene::after, html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__mobile-art::after { animation: none; } html[data-site-theme="castle"] .home-hero:not(.home-hero--compact) .home-hero__scene { transition: none; transform: none; } } /* The Originals covers are full cards (owner 2026-10-14: "add the shine and the outline and stuff for the originals"): they take the same tile shine, hover outline, corners and shadow as every other game tile. The rules that stripped those for the cut-out pictures are in ../removed-features-backup/originals-tinted-2026-10-14/theme-castle.before-shine.css */ /* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ PAGES IN THE CASTLE STYLE (owner 2026-10-14: "redesign all the pages that are still in the old style to fit this new style"). Our pixel art for the old cartoon pictures (public/theme/castle/pages/*, drawn by ../banner-work/castle-theme-2026-10-14/tools/make-pages-art.mjs): an old picture stays in the page but is pushed out of its own box (object-position) and its box shows the new art instead, so removing the theme brings the old pictures back. The pages' own blue colour ramps become the castle's gold and navy. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* chunkier corners everywhere (pixel blocks, not soft cards) */ html[data-site-theme="castle"] { --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 6px; } /* the THRONED logo instead of the old "TRAP" mark in the page heroes */ html[data-site-theme="castle"] .rwp-eyebrow__logo { object-position: -9999px 0; background: url("/mobile-header/icons/logo.png") left center / contain no-repeat; width: 92px; height: 15px; } /* ── Rewards: gold instead of the blue crystal ramp, castle navy panels (VIP Club and Referrals are castle pages since 2026-10-15: castle-page.css) ── */ html[data-site-theme="castle"] .rwp-page { --crystal-0: #fff5d6; --crystal-1: #ffd75a; --crystal-2: #f2c440; --crystal-3: #c98f24; --crystal-4: #8a5a12; --crystal-rgb: 242, 196, 64; --rwp-ink: #1c1407; --rwp-soft: var(--text-primary); --rwp-panel: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%); } /* the hero panels: the castle's night sky (the far hills) instead of blue glass — no star field behind the words (owner 2026-10-14: "fix anywhere where its really hard to read for example here too many stars"); the pictures keep their own sparkles */ html[data-site-theme="castle"] .rwp-hero__in { background: url("/theme/castle/hills.png") center bottom / 1200px 128px repeat-x, linear-gradient(180deg, var(--castle-sky-top) 0%, #2a3866 100%); image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.12), 3px 3px 0 rgba(0, 0, 0, 0.42); } html[data-site-theme="castle"] .rwp-hero__in * { image-rendering: auto; } html[data-site-theme="castle"] .rwp-hero__in::before { display: none; } html[data-site-theme="castle"] .rwp-hero__art::before { background: radial-gradient(closest-side, rgba(242, 196, 64, 0.28), transparent); } html[data-site-theme="castle"] .rwp-plate { background: rgba(var(--bg-sidebar-rgb), 0.88); } html[data-site-theme="castle"] .rwp-plate__lvl { background: var(--castle-ink); } /* the new pictures: the old one pushed out of its box, the pixel art drawn in it (sharp, never blurred) */ html[data-site-theme="castle"] .rwp-hero__art img, html[data-site-theme="castle"] .rwp-foot__img { object-position: -9999px 0 !important; background-repeat: no-repeat; background-position: center bottom; background-size: contain; image-rendering: pixelated; } html[data-site-theme="castle"] .rwp-hero__art img { background-image: url("/theme/castle/pages/hero-rewards.png"); } html[data-site-theme="castle"] .rwp-foot__img { background-image: url("/theme/castle/pages/frog-wave.png"); } /* ── THE LOBBY'S PROMOTIONS AS ONE LAND (owner 2026-10-14: "Just like the home page not logged in make this section an above land piece of art it shouldnt be castels battling but the promotions should be engrained into the piece of art"). Like the signed-out home banner: the night sky from the top of the page down to the cards' bottom edge = the grass line, across the whole width, and under it the grass, the dirt and the underground. The three cards are no longer boxes but three places on that land, each standing on the grass line (public/theme/castle/lobby/promo-*.png, 139 x 60 = the cards' 416 : 180 shape, drawn by ../banner-work/castle-theme-2026-10-14/tools/make-lobby-scene.mjs): the royal treasury (deposit bonus), the royal dais (VIP), the coin dig (wallet rewards). Desktop: the three touch, one picture; phones: the same places swipe one by one over the same sky. The words sit in a clear pool of night sky; the lanterns, torches and the dug-up chest glow (the cards' spare .banner-promo__clouds layer). The old pictures () are not shown in the theme. Undo: ../removed-features-backup/castle-lobby-scene-2026-10-14/. ── */ html[data-site-theme="castle"] .banners-wrapper { position: relative; } html[data-site-theme="castle"] .banners-wrapper::before { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -100vh; bottom: 0; /* a smooth sky (owner: "theres this wierd line on the art banners above them"): the home banner's stepped colour bands are drawn for its tall sky; in this short strip their steps showed as lines under the header */ background: url("/theme/castle/hills.png") center bottom / 1800px 192px repeat-x, var(--castle-stars, url("/theme/castle/stars-tile.png")) 0 0 / 480px 480px repeat, /* the crown's stars: team-stars.css */ linear-gradient(180deg, var(--castle-sky-top) calc(100% - 300px), #2c3c6e 100%); image-rendering: pixelated; pointer-events: none; } html[data-site-theme="castle"] .banners-wrapper::after { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: 100%; height: 196px; /* the ground (102 px) + room for the caskets under it (one lies deeper) */ background: var(--castle-caskets), url("/theme/castle/ground.png") 0 0 / 192px 102px repeat-x; image-rendering: pixelated; pointer-events: none; } /* the places: no box, no frame, no lift — the picture is the card */ html[data-site-theme="castle"] .banners-wrapper .banner-card--promo { background: center bottom / 100% 100% no-repeat; image-rendering: pixelated; border: 0; border-radius: 0; box-shadow: none; transform: none; overflow: visible; /* the lights may shine past the place's edge (no box around a light) */ } html[data-site-theme="castle"] .banners-wrapper .banner-card--deposit { background-image: url("/theme/castle/lobby/promo-deposit.png"); } /* no crown yet: the red copy (2026-10-19, Aurėja: "make sure the middle mascot has red robe and flags, not purple"); a crown still picks its own copy (team-banners.css). The purple promo-vip.png is in ../removed-features-backup/throne-red-default-2026-10-19/ */ html[data-site-theme="castle"] .banners-wrapper .banner-card--vip { background-image: url("/theme/castle/lobby/promo-vip-red.png"); } html[data-site-theme="castle"] .banners-wrapper .banner-card--wallet { background-image: url("/theme/castle/lobby/promo-wallet.png"); } /* three more places (owner 2026-10-20: "Make 3 more banners for logged in"; ../banner-work/lobby-banners-more-2026-10-20/ tools/make-more-banners.mts): the VIP terrace with the host, your kingdom growing (the crown's copy in team-banners.css; no crown = red, like the VIP card), the weekly war */ html[data-site-theme="castle"] .banners-wrapper .banner-card--lounge { background-image: url("/theme/castle/lobby/promo-lounge.png"); } html[data-site-theme="castle"] .banners-wrapper .banner-card--kingdom { background-image: url("/theme/castle/lobby/promo-kingdom-red.png"); } html[data-site-theme="castle"] .banners-wrapper .banner-card--war { background-image: url("/theme/castle/lobby/promo-war.png"); } /* The host on the terrace: drawn SMOOTH by the lounge's rasteriser (owner 2026-10-20: "show the girl properly properly render her in"), her own layer standing on the step's gold edge — the place in % of the card is what make-more-banners.mts prints */ html[data-site-theme="castle"] .banners-wrapper .banner-lounge__host { display: block; position: absolute; left: 73.471%; top: 15.208%; width: 14.209%; height: 74.792%; z-index: 2; /* over the words' dark pool (::before, z 1), under the words (z 3) */ background: url("/theme/castle/lobby/promo-lounge-host.png") center / 100% 100% no-repeat; image-rendering: auto; pointer-events: none; } /* the "VIP" sign drawn again ABOVE the words' dark pool (::before), so it stays crisp and bright (owner 2026-10-20: "dont blur the vip sign next to her" — the pool and a glow lay over its left half); the same 139 x 60 grid as the place's picture */ html[data-site-theme="castle"] .banners-wrapper .banner-lounge__sign { display: block; position: absolute; inset: 0; z-index: 2; /* over the pool (::before, z 1), under the words (z 3) */ background: url("/theme/castle/lobby/promo-lounge-sign.png") center bottom / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; } html[data-site-theme="castle"] .banners-wrapper .banner-card--promo * { image-rendering: auto; } html[data-site-theme="castle"] .banners-wrapper .banner-card--promo .banner-lounge__sign { image-rendering: pixelated; } /* the terrace's glints over the sign layer too (the one on the sign's own sparkle) */ html[data-site-theme="castle"] .banners-wrapper .banner-card--lounge .banner-sparkles { z-index: 2; } html[data-site-theme="castle"] .banners-wrapper .banner-card--promo .banner-promo__art { display: none; } html[data-site-theme="castle"] .banner-life { display: none; } /* a clear pool of night sky behind the words ("extremely easy to read", like the home banner) */ html[data-site-theme="castle"] .banners-wrapper .banner-card--promo::before { /* fades out inside the card on every side, so the three places meet with no seam */ background: radial-gradient(ellipse 31% 50% at 31% 50%, rgba(30, 43, 84, 0.88) 0, rgba(30, 43, 84, 0.62) 55%, rgba(30, 43, 84, 0) 100%); } /* the lights: the lanterns between the places, the torches by the throne, the dug-up chest, flickering like the home banner's. The layer reaches 12 % past the card's sides and 30 % above / below it (owner: "its wierd how the lights are boxed so you can see the light cutting off"), so every glow fades out on its own: a point at (x, y) of the card sits at ((x + 12) / 1.24, (y + 30) / 1.6) % of the layer; the sizes are in px from each light's centre. */ html[data-site-theme="castle"] .banners-wrapper .banner-promo__clouds { display: block; position: absolute; inset: -30% -12%; overflow: visible; pointer-events: none; mix-blend-mode: screen; animation: castle-flicker 1.9s steps(5, end) infinite; } html[data-site-theme="castle"] .banners-wrapper .banner-promo__clouds::before, html[data-site-theme="castle"] .banners-wrapper .banner-promo__clouds::after { display: none; } html[data-site-theme="castle"] .banner-card--deposit .banner-promo__clouds { background: radial-gradient(circle 46px at 86.3% 43.8%, rgba(255, 194, 61, 0.5) 0, rgba(255, 122, 26, 0.16) 45%, rgba(255, 122, 26, 0) 100%); } html[data-site-theme="castle"] .banner-card--vip .banner-promo__clouds { background: radial-gradient(circle 46px at 86.3% 43.8%, rgba(255, 194, 61, 0.5) 0, rgba(255, 122, 26, 0.16) 45%, rgba(255, 122, 26, 0) 100%), radial-gradient(circle 30px at 63.1% 59.4%, rgba(255, 194, 61, 0.42) 0, rgba(255, 122, 26, 0.12) 45%, rgba(255, 122, 26, 0) 100%), radial-gradient(circle 30px at 79.8% 59.4%, rgba(255, 194, 61, 0.42) 0, rgba(255, 122, 26, 0.12) 45%, rgba(255, 122, 26, 0) 100%); animation-delay: -0.7s; } html[data-site-theme="castle"] .banner-card--wallet .banner-promo__clouds { background: radial-gradient(ellipse 62px 74px at 69.4% 66.7%, rgba(255, 238, 160, 0.42) 0, rgba(255, 194, 61, 0.14) 55%, rgba(255, 194, 61, 0) 100%); animation-delay: -1.2s; } /* the new places' lights: the keep's windows and the chest / the spark on the rope. The VIP terrace has none since 2026-10-20 (owner: "remove the lights from above her head", "dont blur the vip sign": the string of lights and the sign's glow are gone) */ html[data-site-theme="castle"] .banner-card--lounge .banner-promo__clouds { background: none; } html[data-site-theme="castle"] .banner-card--kingdom .banner-promo__clouds { background: radial-gradient(circle 30px at 87.4% 70.8%, rgba(255, 238, 160, 0.42) 0, rgba(255, 194, 61, 0.14) 55%, rgba(255, 194, 61, 0) 100%), radial-gradient(ellipse 48px 40px at 74.7% 58.3%, rgba(255, 200, 110, 0.26) 0, rgba(255, 150, 50, 0.08) 55%, rgba(255, 150, 50, 0) 100%); animation-delay: -1s; } /* the war: the spark where the two Pepes' swords cross (redrawn 2026-10-21 — owner: "Make this banner cleaner maybe just 2 pepes blue and red clashing swords"; undo ../removed-features-backup/war-banner-clean-2026-10-21/README.txt) */ html[data-site-theme="castle"] .banner-card--war .banner-promo__clouds { background: radial-gradient(circle 30px at 70.86% 70.83%, rgba(255, 246, 200, 0.5) 0, rgba(255, 170, 60, 0.16) 45%, rgba(255, 170, 60, 0) 100%); animation-duration: 0.9s; } /* hover / keyboard focus: the place lights up (a warm glow on it) and the words brighten; the arrow steps forward */ html[data-site-theme="castle"] .banners-wrapper .banner-card--promo::after { content: ''; position: absolute; inset: -20% -10%; /* past the edges too, so the glow fades out on its own */ pointer-events: none; background: radial-gradient(ellipse 130px 110px at 70% 61.4%, rgba(255, 215, 90, 0.2) 0, rgba(255, 215, 90, 0) 100%); opacity: 0; transition: opacity 0.18s; } html[data-site-theme="castle"] .banners-wrapper .banner-card--promo:is(:hover, :focus-visible)::after { opacity: 1; } html[data-site-theme="castle"] .banners-wrapper .banner-card--promo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } html[data-site-theme="castle"] .banner-promo__accent { color: var(--accent); } /* desktop: the three places touch — one picture; the first place's words start on the column's edge, in line with Recent Wins, the section titles and the game rows (owner: "make sure everything starts and ends inline") — on EVERY page of three since 2026-10-22 (owner: "banners should be inline with site": the second page's first place, My Kingdom, kept its 20 px; the row stops only at a page's start, banners.css "SIX BANNERS") */ @media (min-width: 769px) { html[data-site-theme="castle"] .banners-wrapper .banners { gap: 0; } html[data-site-theme="castle"] .banners-wrapper .banner-card--promo:nth-child(3n + 1) .banner-promo__copy { padding-left: 0; } } /* phones / tablets: each place fills the column, so its words start on the column's edge too */ @media (max-width: 768px) { html[data-site-theme="castle"] .banners-wrapper .banner-promo__copy { padding-left: 0; } } /* phones: each place is the screen's whole width, its picture edge to edge (owner 2026-10-25, a picture of the war place: "On mobile this banner looks cut off fix that" — the places were the column's width with 16 px of the row's own sky on each side, so a picture that reaches its edge — the war's far hills, the lounge's terrace — stopped in a hard line 16 px before the screen's edge). No padding or gap in the row (a swipe still brings one whole place); the words keep the column's 16 px gutter. Check ../banner-work/phone-banner-edge-2026-10-25/tools/banner-edge.mjs; undo ../removed-features-backup/phone-banner-edge-2026-10-25/README.txt */ @media (max-width: 600px) { html[data-site-theme="castle"] .banners-wrapper .banners { gap: 0; padding-left: 0; padding-right: 0; scroll-padding-inline: 0; } html[data-site-theme="castle"] .banners-wrapper .banner-card { flex: 0 0 100%; width: 100%; } html[data-site-theme="castle"] .banners-wrapper .banner-promo__copy { padding-left: 16px; } } /* phones: the sky's layers at the phone sizes (as the home banner) */ @media (max-width: 768px) { html[data-site-theme="castle"] .banners-wrapper::before { background: url("/theme/castle/hills.png") center bottom / 1200px 128px repeat-x, var(--castle-stars, url("/theme/castle/stars-tile.png")) 0 0 / 320px 320px repeat, linear-gradient(180deg, var(--castle-sky-top) calc(100% - 240px), #2c3c6e 100%); } html[data-site-theme="castle"] .banners-wrapper::after { height: 68px; background-size: 128px 68px; } } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] .banners-wrapper .banner-promo__clouds { animation: none; } html[data-site-theme="castle"] .banners-wrapper .banner-card--promo::after { transition: none; } } /* ── Weekly Race: the castle sky with a gold trophy instead of the old picture (no star field behind the prize pool and the countdown: "too many stars", owner 2026-10-14) ── */ html[data-site-theme="castle"] .wr-hero { background: url("/theme/castle/pages/race-trophy.png") right 34% center / auto 78% no-repeat, url("/theme/castle/hills.png") center bottom / 1200px 128px repeat-x, linear-gradient(180deg, var(--castle-sky-top) 0%, #2a3866 100%); image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.12), 3px 3px 0 rgba(0, 0, 0, 0.42); } html[data-site-theme="castle"] .wr-hero * { image-rendering: auto; } /* ── Welcome bonus page (overnight audit 2026-10-14: the one promotion page still a plain title): the same hero panel (the castle sky + far hills, the block edge, no star field behind the words); on wide screens the royal treasury of the lobby's deposit card (its right part: the market stall + the chest) stands on the hills at the right. The page stays simple (owner decision); no figure is drawn in the picture (the offer's numbers are live). ── */ html[data-site-theme="castle"] .wbp-hero { position: relative; padding: 36px 24px 44px; border-radius: 4px; background: url("/theme/castle/hills.png") center bottom / 1200px 128px repeat-x, linear-gradient(180deg, var(--castle-sky-top) 0%, #2a3866 100%); image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.12), 3px 3px 0 rgba(0, 0, 0, 0.42); } html[data-site-theme="castle"] .wbp-hero * { image-rendering: auto; } @media (min-width: 1100px) { html[data-site-theme="castle"] .wbp-hero::after { content: ''; position: absolute; right: 4%; bottom: 2px; width: 237px; height: 180px; background: url("/theme/castle/lobby/promo-deposit.png") right bottom / 417px 180px no-repeat; image-rendering: pixelated; pointer-events: none; } } /* ── Help Center: a pixel icon per category instead of the emoji, on a stone tile ── */ html[data-site-theme="castle"] .blog-card__icon-wrap { background: linear-gradient(rgba(var(--bg-sidebar-rgb), 0.82), rgba(var(--bg-sidebar-rgb), 0.82)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; image-rendering: pixelated; } html[data-site-theme="castle"] .blog-card[data-category] .blog-card__icon { font-size: 0; width: 48px; height: 48px; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.45)); } html[data-site-theme="castle"] .blog-card[data-category="getting-started"] .blog-card__icon { background-image: url("/theme/castle/pages/help-getting-started.png"); } html[data-site-theme="castle"] .blog-card[data-category="games"] .blog-card__icon { background-image: url("/theme/castle/pages/help-games.png"); } html[data-site-theme="castle"] .blog-card[data-category="fairness"] .blog-card__icon { background-image: url("/theme/castle/pages/help-fairness.png"); } html[data-site-theme="castle"] .blog-card[data-category="payments"] .blog-card__icon { background-image: url("/theme/castle/pages/help-payments.png"); } html[data-site-theme="castle"] .blog-card[data-category="rewards"] .blog-card__icon { background-image: url("/theme/castle/pages/help-rewards.png"); } html[data-site-theme="castle"] .blog-card[data-category="account"] .blog-card__icon { background-image: url("/theme/castle/pages/help-account.png"); } html[data-site-theme="castle"] .blog-card[data-category="rules"] .blog-card__icon { background-image: url("/theme/castle/pages/help-rules.png"); } html[data-site-theme="castle"] .blog-card[data-category="partnerships"] .blog-card__icon { background-image: url("/theme/castle/pages/help-partnerships.png"); } /* the second headline line of these heroes: gold with a hard pixel shadow (was a cyan glow) */ html[data-site-theme="castle"] .rwp-hero__tag { color: var(--accent); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); } /* ── THE WIN PLAQUE (owner 2026-10-15: the house games' win pop-up "needs to change its bad … its not in the style of the site"; 2026-10-21, with a reference card: "make the original wins banner more like this but still our pixelated style dont use the solana thing just the structure with the multiplier and amount usd in the bottom section"): Mines', Keno's and HiLo's win card (OgWinCard; Dice, Limbo and Blackjack show none) is two bands — the multiplier big in the castle's dark ink on an emerald top band (a light top / dark bottom block edge), the site's pixel gold coin and the payout in cream on a dark stone bottom band — inside the castle's ink outline, square corners, a hard shadow; two of the night sky's stars (twinkle.png) wink once at its top corners. No glow, no gradient, no sweep. Undo: ../removed-features-backup/win-card-reference-2026-10-21/README.txt (before that win-card-2026-10-15) */ html[data-site-theme="castle"] .og-win__card { min-width: 176px; overflow: visible; /* the stars sit over the corners */ border: 0; border-radius: 0; background: var(--bg-input); box-shadow: 0 0 0 2px var(--castle-ink), 6px 6px 0 0 rgba(0, 0, 0, 0.5); } html[data-site-theme="castle"] .og-win__card * { image-rendering: auto; } html[data-site-theme="castle"] .og-win__top { padding: 10px 26px 9px; background: var(--success); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.22); color: var(--castle-ink); } html[data-site-theme="castle"] .og-win__mult { color: var(--castle-ink); font-size: 36px; font-weight: 400; letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.22); } html[data-site-theme="castle"] .og-win__bottom { gap: 8px; padding: 8px 18px 7px; background: linear-gradient(rgba(var(--bg-secondary-rgb), 0.88), rgba(var(--bg-secondary-rgb), 0.88)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat, var(--bg-secondary); box-shadow: inset 0 2px 0 var(--castle-ink), inset 0 -3px 0 rgba(0, 0, 0, 0.25); } html[data-site-theme="castle"] .og-win__bottom { image-rendering: pixelated; } html[data-site-theme="castle"] .og-win__coin { width: 18px; height: 18px; image-rendering: pixelated; } html[data-site-theme="castle"] .og-win__amount { color: var(--castle-cream, #f4e7c5); font-size: 20px; font-weight: 400; text-shadow: 2px 2px 0 var(--castle-ink); } html[data-site-theme="castle"] .og-win__tag { border-radius: 2px; background: var(--bg-elevated); box-shadow: inset 0 0 0 2px var(--castle-ink); color: var(--castle-cream, #f4e7c5); padding: 2px 8px 1px; } html[data-site-theme="castle"] .og-win__star { display: block; position: absolute; top: 0; width: 21px; height: 21px; background: url("/theme/castle/twinkle.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; opacity: 0; pointer-events: none; animation: og-win-star 0.6s steps(4, end) 0.18s both; } html[data-site-theme="castle"] .og-win__star--l { left: 0; transform: translate(-45%, -45%); } html[data-site-theme="castle"] .og-win__star--r { right: 0; transform: translate(45%, -45%); animation-delay: 0.32s; } @keyframes og-win-star { 0% { opacity: 0; scale: 0.4; } 35% { opacity: 1; scale: 1.15; } 100% { opacity: 0; scale: 0.6; } } @media (max-width: 400px) { html[data-site-theme="castle"] .og-win__card { min-width: 156px; } html[data-site-theme="castle"] .og-win__top { padding: 9px 20px 8px; } html[data-site-theme="castle"] .og-win__mult { font-size: 32px; } html[data-site-theme="castle"] .og-win__amount { font-size: 18px; } } /* the win's size (owner 2026-10-21, "Win emphasis": OgWinCard — Mines, Keno, HiLo): a medium win bigger figures, a big one bigger still with BIG WIN over the multiplier (in the top band's dark ink) */ html[data-site-theme="castle"] .og-win__kicker { color: var(--castle-ink); font-size: 22px; font-weight: 400; letter-spacing: 0.06em; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.22); } html[data-site-theme="castle"] .og-win--medium .og-win__mult { font-size: 44px; } html[data-site-theme="castle"] .og-win--medium .og-win__amount { font-size: 23px; } html[data-site-theme="castle"] .og-win--big .og-win__card { min-width: 230px; } html[data-site-theme="castle"] .og-win--big .og-win__top { padding: 12px 30px 10px; } html[data-site-theme="castle"] .og-win--big .og-win__mult { font-size: 54px; } html[data-site-theme="castle"] .og-win--big .og-win__amount { font-size: 27px; } html[data-site-theme="castle"] .og-win--big .og-win__coin { width: 22px; height: 22px; } @media (max-width: 400px) { html[data-site-theme="castle"] .og-win__kicker { font-size: 18px; } html[data-site-theme="castle"] .og-win--medium .og-win__mult { font-size: 38px; } html[data-site-theme="castle"] .og-win--medium .og-win__amount { font-size: 20px; } html[data-site-theme="castle"] .og-win--big .og-win__card { min-width: 190px; } html[data-site-theme="castle"] .og-win--big .og-win__top { padding: 10px 22px 9px; } html[data-site-theme="castle"] .og-win--big .og-win__mult { font-size: 44px; } html[data-site-theme="castle"] .og-win--big .og-win__amount { font-size: 23px; } } /* ── house games: unopened tiles (Mines, Keno …) are stone blocks; the Blackjack table has a gold trim ── */ html[data-site-theme="castle"] .og-shell { --og-tile-bg: #3a4766; --og-tile-bg-hover: #4a5a80; --og-tile-face-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(255, 255, 255, 0.16), inset 0 -5px 0 rgba(0, 0, 0, 0.3); --og-tile-ledge: 3px 3px 0 rgba(0, 0, 0, 0.42); --og-tile-ledge-hover: 3px 5px 0 rgba(0, 0, 0, 0.42); --og-tile-shadow: var(--og-tile-face-shadow), var(--og-tile-ledge); --og-tile-shadow-hover: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(255, 255, 255, 0.2), inset 0 -5px 0 rgba(0, 0, 0, 0.3), var(--og-tile-ledge-hover); } /* the game card itself in the castle look (overnight audit 2026-10-14 — owner: "every single feature is made in the style of the site"): the controls column and the bottom toolbar are stone like the side menu and the header, the card has the castle's ink edge and ink lines between its parts; the stage is a darker stone wall lit from the middle (the game is the picture; Blackjack / HiLo keep their felt). Only colours / backgrounds — no size or game logic changes. Undo: ../removed-features-backup/overnight-audit-2026-10-14/README.txt */ html[data-site-theme="castle"] .og-shell { box-shadow: 0 0 0 2px var(--castle-ink); } html[data-site-theme="castle"] :is(.og-panel, .og-toolbar) { background: linear-gradient(rgba(var(--bg-secondary-rgb), 0.9), rgba(var(--bg-secondary-rgb), 0.9)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; image-rendering: pixelated; } html[data-site-theme="castle"] :is(.og-panel, .og-toolbar) * { image-rendering: auto; } html[data-site-theme="castle"] .og-stage:not(.og-stage--felt) { background: radial-gradient(110% 85% at 50% 40%, rgba(var(--bg-secondary-rgb), 0.55) 0%, rgba(var(--bg-secondary-rgb), 0) 65%), linear-gradient(rgba(var(--bg-sidebar-rgb), 0.93), rgba(var(--bg-sidebar-rgb), 0.93)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; image-rendering: pixelated; } html[data-site-theme="castle"] .og-stage:not(.og-stage--felt) * { image-rendering: auto; } html[data-site-theme="castle"] .og-panel { border-color: var(--castle-ink); border-right-width: 2px; border-top-width: 2px; } html[data-site-theme="castle"] .og-toolbar { border-top: 2px solid var(--castle-ink); } /* a slot's page before the game starts (Register / Play Demo, loading, an error): the same dark stone wall lit from the middle in an ink edge, instead of a flat panel */ html[data-site-theme="castle"] .sg-frame { box-shadow: 0 0 0 2px var(--castle-ink); } html[data-site-theme="castle"] .sg-placeholder { background: radial-gradient(60% 55% at 50% 50%, rgba(var(--bg-secondary-rgb), 0.75) 0%, rgba(var(--bg-secondary-rgb), 0) 70%), linear-gradient(rgba(var(--bg-sidebar-rgb), 0.9), rgba(var(--bg-sidebar-rgb), 0.9)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; image-rendering: pixelated; } html[data-site-theme="castle"] .sg-placeholder * { image-rendering: auto; } html[data-site-theme="castle"] [class*="tableContainer"] { border: 3px solid #c98f24; box-shadow: inset 0 0 0 3px var(--castle-ink), 0 0 0 3px var(--castle-ink); background: radial-gradient(70% 70% at 50% 50%, rgba(var(--bg-card-rgb), 0.85) 0%, rgba(var(--bg-secondary-rgb), 0.6) 100%); } @media (max-width: 768px) { /* phones: the trophy small in the top-right corner, clear of the buttons and the countdown */ html[data-site-theme="castle"] .wr-hero { background-position: right 14px top 14px, center bottom, 0 0, 0 0; background-size: auto 64px, 1200px 128px, 320px 320px, auto; } } /* ── SIGN-IN SHEET: a battle about to start (owner 2026-10-23, of God Pepe on his throne: "make this image kinda a birds eye view but not directly down kinda looking down on an angle of a big war about to start between red vs blue mini pepe charecters like on the homa page banner different charecters some seem to be on horses and one team is on one half of the image other team is on other half and the word throned is between them"). The panel shows teams/battle.png (150 x 246 art px) at --pp per art pixel, centred, cut by the panel: a field seen from above at an angle, the forest and the two camps at the far edge, the Blue Crown's army on the left half and the Red Crown's on the right — the home banner's frog soldiers: pikemen, archers, swordsmen, shield walls, banners, knights on horses with lances, a trebuchet, a cannon — and THRONED, the real logo (a crisp layer, never in the picture), in the trampled clearing between them. 3 px a pixel at every computer size: the panel (400 x 655 … 448 x 734) is never bigger than the picture (450 x 738), and the clearing stays in its middle when a short window cuts the top and bottom. The cards-and-chip picture of the slate look is hidden. Phones show no picture panel (auth.css). Art ../banner-work/auth-battle-2026-10-23/tools/ make-auth-battle.mjs; checks there: sheet-shot.mjs. Was God Pepe on his throne with a scroll (2026-10-14 … 10-23). Undo ../removed-features-backup/auth-battle-2026-10-23/README.txt ── */ html[data-site-theme="castle"] :is(.ac-card--branded, .ac-overlay--gate .ac-card) .ac-card__left { --pp: 3px; background: url("/theme/castle/teams/battle.png") center / calc(150 * var(--pp)) calc(246 * var(--pp)) no-repeat, #1f3f27; image-rendering: pixelated; border-right-color: var(--border-color); } html[data-site-theme="castle"] .ac-card--branded .ac-brand__graphic { display: none; } /* THRONED between the two armies: 86 art px wide, centred in the picture's clearing (whole pixels, no transform) */ html[data-site-theme="castle"] .ac-card--branded .ac-card__left > .ac-brand__logo { position: absolute; inset: 0; width: calc(86 * var(--pp)); height: auto; margin: auto; image-rendering: auto; filter: drop-shadow(0 var(--pp) 0 rgba(var(--castle-ink-rgb), 0.55)); } /* what the player TYPES on the sheet and its code windows (owner 2026-10-23: "make is easier to read in the typing box as you type"): the reading font, not the pixel font (it drew typed letters small and the password's dots as dashes), bright white, 17 px on computers (phones keep their own 16 px+ sizes); the password's dots spaced out a little; the placeholders the same font, dimmer. ":not(#gz-read-font)" outweighs the global pixel-font rule (like the sign-up pop-up's fields). Undo ../removed-features-backup/auth-typing-readable-2026-10-23/README.txt */ html[data-site-theme="castle"] .ac-overlay :is(.ac-field__input, .ac-field__referral-input, .ac-mfa-code-input):not(#gz-read-font) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; color: var(--text-bright); caret-color: var(--text-bright); } html[data-site-theme="castle"] .ac-overlay :is(.ac-field__input, .ac-field__referral-input):not(#gz-read-font) { font-weight: 600; letter-spacing: 0.01em; } html[data-site-theme="castle"] .ac-overlay .ac-field__input[type="password"]:not(#gz-read-font) { letter-spacing: 0.14em; } html[data-site-theme="castle"] .ac-overlay :is(.ac-field__input, .ac-field__referral-input)::placeholder { color: var(--text-dim); opacity: 1; font-weight: 500; letter-spacing: 0.01em; } @media (min-width: 769px) { html[data-site-theme="castle"] .ac-overlay :is(.ac-field__input, .ac-field__referral-input):not(#gz-read-font) { font-size: 17px; } } /* the sheet's Google / Facebook / X row (owner 2026-10-20): the home banner's look — "or use your email" between two thin lines, three 66 x 44 stone blocks (the block itself comes from the BUTTONS lists above). Undo ../removed-features-backup/search-and-social-signin-2026-10-20/README.txt */ html[data-site-theme="castle"] .ac-social .ac-divider span { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text-muted); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } html[data-site-theme="castle"] .ac-social .ac-divider::before, html[data-site-theme="castle"] .ac-social .ac-divider::after { background: rgba(255, 255, 255, 0.28); } html[data-site-theme="castle"] .ac-social-row { gap: 16px; } html[data-site-theme="castle"] .ac-social-btn { width: 66px; height: 44px; border: 0; background: var(--bg-elevated); } /* the PC card: 4 px less, so Register's button fits without a scroll down to a 700 px tall window */ @media (min-width: 769px) { html[data-site-theme="castle"] .ac-social-btn { height: 40px; } } /* the e-mail code and authenticator code windows (Email2FAVerify, AppCodeGate: the same card, without the sheet's logo): the same battle (the rule above) with THRONED in its clearing; their old picture is pushed out of its box like everywhere in the theme (overnight audit 2026-10-14; God Pepe on his throne until 2026-10-23). Undo ../removed-features-backup/auth-battle-2026-10-23/README.txt */ html[data-site-theme="castle"] .ac-overlay--gate .ac-card__art { object-position: -9999px 0; } html[data-site-theme="castle"] .ac-overlay--gate .ac-card__left::after { content: ''; position: absolute; inset: 0; width: calc(86 * var(--pp)); height: calc(86 * var(--pp) * 268 / 775); /* the official logo's shape (2026-10-24) */ margin: auto; background: url("/mobile-header/icons/logo.png") 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 var(--pp) 0 rgba(var(--castle-ink-rgb), 0.55)); pointer-events: none; } /* ── THE CHAT (owner 2026-10-14: "add a chat … make the chat really cool"; chat/KingdomChat.tsx, kingdom-chat.css): a stone panel like the side menu, its buttons castle blocks, the chosen tab a raised block (a war room's in its crown's colour), square pictures with the crown's colour round them. Undo: ../removed-features-backup/kingdom-chat-2026-10-14/ ── */ html[data-site-theme="castle"] :is(.kc, .rpn) { /* the rewards panel stands in the chat's place, the same stone (2026-10-23) */ border: 0; border-radius: 4px; background: linear-gradient(rgba(var(--bg-sidebar-rgb), 0.9), rgba(var(--bg-sidebar-rgb), 0.9)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--castle-ink), 4px 4px 0 rgba(0, 0, 0, 0.45); } html[data-site-theme="castle"] :is(.kc, .rpn) * { image-rendering: auto; } /* docked on wide screens (kingdom-chat.css): a stone wall on the right like the side menu, one dark edge toward the page */ @media (min-width: 1100px) { html[data-site-theme="castle"] :is(.kc, .rpn) { border-radius: 0; box-shadow: inset 2px 0 0 var(--castle-ink), -4px 0 0 rgba(0, 0, 0, 0.3); } } /* ── THE REWARDS PANEL: one piece of art like the lobby's banners (owner 2026-10-23: the present opens "a side bar like this with the rewards and good logos for each", then "This is so ugly give it more art vibe like the style art of the banners its so ugly things are out of line like the claim button … make it art"; RewardsPanel.tsx, rewards-panel.css). The chat's stone round it (above). ABOVE GROUND: the lobby's smooth night sky, the crown's stars (team-stars.css), the hills, a moon, a few winking stars, a clear pool of sky behind the words (words never sit on a star field); the rank in cream with its badge, a cream castle-block bar to the next rank's badge; under them the treasure camp standing on the grass line — public/theme/castle/rewards/scene-.png (112 x 28 art px at 3 screen px each; no crown = red, like the lobby's banners): a lantern, coin sacks, the chest overflowing, a frog in the crown's tunic holding up a coin, a rake on a coin stack, the crown's pennant — its lantern and chest glowing. UNDERGROUND: the page's ground band (grass, dirt into rock) and the rock; the rewards ONE board cut into it, a row each (since 2026-10-25 — owner: "make it cleaner it's too chunky and bad"; until then each reward was a stone niche, rewards/niche.png, now in ../removed-features-backup/rewards-panel-clean-2026-10-25/); buried treasure (the underground's own pieces) in the rock left below. Art: ../banner-work/rewards-panel-art-2026-10-23/tools/make-panel-art.mjs. Undo ../removed-features-backup/rewards-panel-clean-2026-10-25/README.txt (before: rewards-panel-art-2026-10-23/, rewards-panel-2026-10-23/) ── */ html[data-site-theme="castle"] .rpn__foot { border-color: rgba(var(--castle-ink-rgb), 0.9); } /* (no head bar since 2026-10-24: the X sits on the sky, rewards-panel.css; the moon and its star moved left of it) */ /* ABOVE GROUND */ html[data-site-theme="castle"] .rpn-hero { isolation: isolate; overflow: hidden; padding: 14px 16px 0; background: linear-gradient(180deg, var(--castle-sky-top) 0, var(--castle-sky-top) 30%, #2c3c6e 100%); } html[data-site-theme="castle"] .rpn-hero__sky { display: block; position: absolute; inset: 0; z-index: -1; background: url("/theme/castle/hills.png") center calc(100% + 78px) / 1800px 192px repeat-x, radial-gradient(ellipse 88% 58% at 34% 26%, rgba(30, 43, 84, 0.94) 0, rgba(30, 43, 84, 0.8) 52%, rgba(30, 43, 84, 0) 100%), var(--castle-stars, url("/theme/castle/stars-tile.png")) 0 0 / 480px 480px repeat; image-rendering: pixelated; } html[data-site-theme="castle"] .rpn-hero__moon { display: block; position: absolute; z-index: -1; right: 52px; /* left of the X (no head bar since 2026-10-24) */ top: -14px; width: 54px; /* the moon's 27 x 27 art at 2 px a block */ height: 54px; background: url("/theme/castle/moon.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; } html[data-site-theme="castle"] .rpn-hero__twinkle { display: block; position: absolute; z-index: -1; width: 21px; /* twinkle.png's 7 x 7 at 3 px a block */ height: 21px; background: var(--castle-twinkle, url("/theme/castle/twinkle.png")) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; opacity: 0; animation: rpn-wink 6.5s steps(1, end) infinite; } /* the three winking stars: by the moon, and in the open sky between the words and the camp */ html[data-site-theme="castle"] .rpn-hero__twinkle:nth-of-type(3) { right: 118px; top: 6px; } html[data-site-theme="castle"] .rpn-hero__twinkle:nth-of-type(4) { left: 44px; bottom: 62px; animation-duration: 8.5s; animation-delay: -3s; } html[data-site-theme="castle"] .rpn-hero__twinkle:nth-of-type(5) { right: 64px; bottom: 64px; animation-duration: 10s; animation-delay: -6s; } @keyframes rpn-wink { 0%, 88%, 100% { opacity: 0; } 90% { opacity: 0.55; } 92% { opacity: 1; } 95% { opacity: 0.45; } } /* the rank: no box, in the clear pool of sky */ html[data-site-theme="castle"] .rpn-rank { gap: 8px; padding: 0; background: none; box-shadow: none; border-radius: 0; } html[data-site-theme="castle"] .rpn-rank__name { font-size: 24px; line-height: 1; color: var(--castle-cream, #f3ead2); text-shadow: 2px 2px 0 rgba(var(--castle-ink-rgb), 0.9); } html[data-site-theme="castle"] .rpn-rank__badge { filter: drop-shadow(2px 2px 0 rgba(var(--castle-ink-rgb), 0.8)); } /* the bar: a carved channel with a cream castle block in it */ html[data-site-theme="castle"] .rpn-rank__bar { height: 15px; border-radius: 0; background: rgba(var(--castle-ink-rgb), 0.7); box-shadow: inset 0 0 0 3px var(--castle-ink), inset 0 6px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .rpn-rank__fill { border-radius: 0; box-shadow: inset 0 0 0 3px var(--castle-ink), inset 0 6px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.22); } html[data-site-theme="castle"][data-palette="refined"] .rpn-rank__fill { background: var(--castle-cream); } html[data-site-theme="castle"] .rpn-rank__meta { font-size: 15px; color: #c4d0e6; text-shadow: 1px 1px 0 rgba(var(--castle-ink-rgb), 0.9); } html[data-site-theme="castle"] .rpn-rank__left b { color: var(--castle-cream, #f3ead2); } html[data-site-theme="castle"] .rpn-rank__link { color: #c4d0e6; } @media (hover: hover) { html[data-site-theme="castle"] .rpn-rank__link:hover { color: var(--castle-cream, #f3ead2); } } html[data-site-theme="castle"] .rpn-rank--skeleton .rpn-skel { background: rgba(255, 255, 255, 0.1); } /* the treasure camp on the grass line: the whole width, the picture in the middle */ html[data-site-theme="castle"] .rpn-hero__scene { display: block; position: relative; height: 84px; /* 28 art px at 3 */ margin: 4px -16px 0; background: url("/theme/castle/rewards/scene-red.png") center bottom / 336px 84px no-repeat; image-rendering: pixelated; } html[data-site-theme="castle"][data-crown="blue"] .rpn-hero__scene { background-image: url("/theme/castle/rewards/scene-blue.png"); } /* the lantern's and the chest's light, flickering like the lobby's (a box 456 x 164 round the 336 x 84 picture, so no light is cut by its own box: a point (x, y) of the picture is (x + 60, y + 40) here) */ html[data-site-theme="castle"] .rpn-hero__lights { display: block; position: absolute; left: 50%; bottom: -40px; width: 456px; height: 164px; margin-left: -228px; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle 44px at 92px 75px, rgba(255, 194, 61, 0.55) 0, rgba(255, 122, 26, 0.18) 45%, rgba(255, 122, 26, 0) 100%), radial-gradient(ellipse 58px 36px at 193px 92px, rgba(255, 215, 90, 0.42) 0, rgba(255, 170, 40, 0.12) 50%, rgba(255, 170, 40, 0) 100%); animation: castle-flicker 1.9s steps(5, end) infinite; } /* UNDERGROUND: the ground band (grass, dirt) running into the rock; the rewards dug into it */ html[data-site-theme="castle"] .rpn-under { gap: 10px; padding: 30px 12px 12px; background: url("/theme/castle/ground.png") 0 0 / 192px 102px repeat-x, url("/theme/castle/under.png") 0 0 / 1800px 1200px repeat, var(--castle-under); image-rendering: pixelated; } /* the rewards: ONE board cut into the rock (owner 2026-10-25, a picture of the panel on the phone: "This sucks make it cleaner it's too chunky and bad" — the stone niches of 2026-10-23, two across with 15 px frames and ledges, are gone): a dark slot with the castle's ink outline, a row per reward split by a carved line; a reward ready to claim has a warm light behind its picture and winks now and then, its amount and its Claim gold. Undo ../removed-features-backup/rewards-panel-clean-2026-10-25/README.txt */ html[data-site-theme="castle"] .rpn-grid { border-radius: 2px; background: rgba(6, 9, 20, 0.86); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.42); } html[data-site-theme="castle"] .rpn-card { padding: 10px 14px; } /* the narrowest phones (320 px, the first iPhone SE): a little less room round the list so the longest name, "Monthly Rakeback", is never cut to "Monthly Rakeba…" (overnight check 2026-10-25) */ @media (max-width: 359px) { html[data-site-theme="castle"] .rpn-under { padding-left: 8px; padding-right: 8px; } html[data-site-theme="castle"] .rpn-card { column-gap: 10px; padding-left: 10px; padding-right: 10px; } } html[data-site-theme="castle"] .rpn-card + .rpn-card { border-top: 2px solid rgba(var(--castle-ink-rgb), 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); } /* the light behind the picture: warm when it can be claimed, faint while it waits, none when empty */ html[data-site-theme="castle"] .rpn-card__stage::after { content: ''; position: absolute; inset: -8px; background: radial-gradient(circle closest-side, rgba(130, 160, 230, 0.12), rgba(130, 160, 230, 0)); } html[data-site-theme="castle"] .rpn-card.is-ready .rpn-card__stage::after { background: radial-gradient(circle closest-side, rgba(255, 190, 80, 0.32), rgba(255, 150, 40, 0.08) 60%, rgba(255, 150, 40, 0)); animation: castle-flicker 2.3s steps(5, end) infinite; } html[data-site-theme="castle"] .rpn-card.is-empty .rpn-card__stage::after { display: none; } html[data-site-theme="castle"] .rpn-card__stage > * { position: relative; z-index: 1; } /* a reward ready to claim winks now and then, at its picture's top-right (twinkle.png's 7 x 7 at 2 px a block) */ html[data-site-theme="castle"] .rpn-card.is-ready::after { content: ''; position: absolute; z-index: 2; left: 52px; top: 5px; width: 14px; height: 14px; background: url("/theme/castle/twinkle.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; opacity: 0; animation: rpn-wink 4.5s steps(1, end) infinite; } html[data-site-theme="castle"] .rpn-grid > .rpn-card.is-ready:nth-child(even)::after { animation-delay: -2.2s; } html[data-site-theme="castle"] .rpn-card__name { font-size: 15px; color: var(--castle-cream, #f3ead2); text-shadow: 1px 1px 0 rgba(var(--castle-ink-rgb), 0.9); } html[data-site-theme="castle"] .rpn-card__line { color: #9fb0cc; } html[data-site-theme="castle"] .rpn-card__amt { color: #ffffff; text-shadow: 1px 1px 0 rgba(var(--castle-ink-rgb), 0.9); } html[data-site-theme="castle"] .rpn-card.is-ready .rpn-card__amt { color: var(--accent); } html[data-site-theme="castle"] .rpn-card.is-empty .rpn-card__status { color: var(--text-dim); } html[data-site-theme="castle"] .rpn-card__sub { color: var(--accent); text-shadow: 1px 1px 0 rgba(var(--castle-ink-rgb), 0.9); } /* when it unlocks: a small carved slot with the time */ html[data-site-theme="castle"] .rpn-card__wait { border-radius: 2px; color: var(--castle-cream, #f3ead2); background: rgba(var(--castle-ink-rgb), 0.75); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.4); } /* nothing to claim yet: a quiet outline instead of a dark slab */ html[data-site-theme="castle"] .rpn-card .rd-claim--off, html[data-site-theme="castle"] .rpn-card .rd-claim--off:hover { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08); color: var(--text-dim); filter: none; transform: none; } html[data-site-theme="castle"] .rpn-msg { color: #c4d0e6; text-shadow: 1px 1px 0 rgba(var(--castle-ink-rgb), 0.9); } /* deeper: buried treasure (the underground's pieces, 3 px a block) in whatever rock is left; each piece only when there is room for all of it (a size container). Spread over the whole rock since 2026-10-25 (owner, a picture of the panel: "the icons like diamond and emerold etc should be more spread out not all at the bottom area" — each stood a fixed distance above the bottom, so a tall panel had all five in its last ~170 px): a piece's place is now a share of the rock's height — the sword near the top, the emerald, the diamond, the coins, the chest on the bottom —, left and right in turn; the thresholds below still show a piece only where it fits clear of the others (checked at each one). Undo ../removed-features-backup/rewards-treasure-spread-2026-10-25/README.txt */ html[data-site-theme="castle"] .rpn-deep { display: block; flex: 1 0 0; min-height: 0; margin: 0 -12px -12px; position: relative; overflow: hidden; container-type: size; } html[data-site-theme="castle"] .rpn-deep__p { display: none; position: absolute; background: 0 0 / 100% 100% no-repeat; image-rendering: pixelated; } html[data-site-theme="castle"] .rpn-deep__p--coins { left: 18px; top: min(calc(76% - 10px), calc(100% - 41px)); width: 72px; height: 21px; background-image: url("/theme/castle/under/coins-1.png"); } html[data-site-theme="castle"] .rpn-deep__p--chest { right: 18%; bottom: 14px; width: 72px; height: 54px; background-image: url("/theme/castle/under/chest-open.png"); } html[data-site-theme="castle"] .rpn-deep__p--diamond { left: 40%; top: calc(53% - 20px); width: 51px; height: 39px; background-image: url("/theme/castle/under/diamond-rock.png"); } html[data-site-theme="castle"] .rpn-deep__p--emerald { right: 26px; top: calc(32% - 18px); width: 42px; height: 36px; background-image: url("/theme/castle/under/emerald-rock.png"); } html[data-site-theme="castle"] .rpn-deep__p--sword { left: 26px; top: calc(12% - 9px); width: 57px; height: 18px; background-image: url("/theme/castle/under/sword-lying.png"); } @container (min-height: 60px) { html[data-site-theme="castle"] .rpn-deep__p--coins { display: block; } } @container (min-height: 84px) { html[data-site-theme="castle"] .rpn-deep__p--chest { display: block; } } @container (min-height: 146px) { html[data-site-theme="castle"] .rpn-deep__p--diamond { display: block; } } @container (min-height: 184px) { html[data-site-theme="castle"] .rpn-deep__p--emerald { display: block; } } @container (min-height: 186px) { html[data-site-theme="castle"] .rpn-deep__p--sword { display: block; } } /* the diamond catches the light now and then */ html[data-site-theme="castle"] .rpn-deep__p--diamond::after { content: ''; position: absolute; left: 30%; top: -6px; width: 21px; height: 21px; background: url("/theme/castle/twinkle.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; opacity: 0; animation: rpn-wink 7s steps(1, end) infinite; } html[data-site-theme="castle"] .rpn-foot-btn { border-radius: 2px; background: var(--bg-card); box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } html[data-site-theme="castle"] .rpn-foot-btn:active { box-shadow: var(--castle-block-down); transform: translateY(2px); } html[data-site-theme="castle"] .rpn-skel { border-radius: 1px; } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] :is(.rpn-hero__twinkle, .rpn-hero__lights, .rpn-card.is-ready .rpn-card__stage::after, .rpn-card.is-ready::after, .rpn-deep__p--diamond::after) { animation: none; } } html[data-site-theme="castle"] :is(.kc__head, .kc__hint, .kc__foot) { border-color: rgba(var(--castle-ink-rgb), 0.9); } html[data-site-theme="castle"] .kc__hint { background: rgba(var(--castle-ink-rgb), 0.35); } html[data-site-theme="castle"] .kc__tab { border-radius: 2px; } html[data-site-theme="castle"] .kc__tab.is-on { background: var(--bg-elevated); box-shadow: var(--castle-block); } html[data-site-theme="castle"] .kc__tab--blue.is-on { box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 -5px 0 var(--team-blue), inset 0 4px 0 rgba(255, 255, 255, 0.2), 3px 3px 0 rgba(0, 0, 0, 0.42); } html[data-site-theme="castle"] .kc__tab--red.is-on { box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 -5px 0 var(--team-red), inset 0 4px 0 rgba(255, 255, 255, 0.2), 3px 3px 0 rgba(0, 0, 0, 0.42); } html[data-site-theme="castle"] :is(.kc__send, .kc__signin, .kc__new) { border-radius: 2px; box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } @media (hover: hover) { html[data-site-theme="castle"] :is(.kc__send, .kc__signin, .kc__new):not(:disabled):hover { filter: brightness(1.1); } } html[data-site-theme="castle"] :is(.kc__send, .kc__signin, .kc__new):not(:disabled):active { box-shadow: var(--castle-block-down); transform: translateY(2px); } html[data-site-theme="castle"] :is(.kc__send, .kc__signin, .kc__new, .kc__tab):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html[data-site-theme="castle"] .kc__input { border-radius: 2px; border-color: rgba(var(--castle-ink-rgb), 0.9); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] :is(.kc-msg__avatar, .kc-msg__hood) { border-radius: 2px; } html[data-site-theme="castle"] .kc-msg { border-radius: 2px; } /* the speech bubbles (2026-10-16): square pixel corners like the direct messages' */ html[data-site-theme="castle"] .kc__list { --kc-bubble-radius: 2px; } html[data-site-theme="castle"] .kc-msg__staff { border-radius: 1px; } html[data-site-theme="castle"] .kc-msg__name { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); } /* what people write — in the chat, the war rooms and direct messages — and the boxes they type it in: the reading font (owner 2026-10-16: "make it easier to read"); names, ranks, times and buttons stay pixel. The selector repeats the theme's font rule (body *:not(…)) and adds the chat's classes, so it outranks it. */ html[data-site-theme="castle"] body *:not(textarea):not(code):not(pre):not(kbd):not(samp):not(input[name="address"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):is(.kc-msg__text, .kc-msg__text *, .kc__input, .mk-msg__bubble, .mk-msg__bubble *, .mk-talk__send .mk-input, .kc-msg__reply span, .kc-replying__text) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; } /* Figures that must read exactly in the house games (owner 2026-10-21, Keno's paytable: "Use a clearer font for the multiplier numbers (in the pixel font the 9 looks like an 8)"): .og-num — multipliers, payouts, profits, chances — in the reading font, bold, every figure one width. The selector repeats the theme's font rule so it outranks it. */ html[data-site-theme="castle"] body *:not(textarea):not(code):not(pre):not(kbd):not(samp):not(input[name="address"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):is(.og-num, .og-num *) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-synthesis: weight style !important; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-site-theme="castle"] :is(.kc-msg.mentions-me, .kc-mention, .kc-msg__you) { border-radius: 2px; } html[data-site-theme="castle"] .kc-msg__gif { border-color: rgba(var(--castle-ink-rgb), 0.9); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .kc-day::before, html[data-site-theme="castle"] .kc-day::after { background: rgba(var(--castle-ink-rgb), 0.9); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); } /* GIFs (owner 2026-10-16, KLIPY; gif-picker.css) and the DMs tab: the GIF button a stone block, the picker a slot in the stone like the message box, square corners on the pictures. Undo: ../removed-features-backup/chat-gifs-2026-10-16/ */ html[data-site-theme="castle"] .gif-btn { border-radius: 2px; box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } @media (hover: hover) { html[data-site-theme="castle"] .gif-btn:not(:disabled):hover { filter: brightness(1.12); } } html[data-site-theme="castle"] .gif-btn:not(:disabled):active { box-shadow: var(--castle-block-down); transform: translateY(2px); } html[data-site-theme="castle"] .gif-btn[aria-expanded="true"] { box-shadow: var(--castle-block), inset 0 0 0 2px var(--castle-cream, var(--accent)); } html[data-site-theme="castle"] .gif-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html[data-site-theme="castle"] .gifp { border-radius: 2px; border-color: rgba(var(--castle-ink-rgb), 0.9); background: rgba(var(--castle-ink-rgb), 0.6); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .gifp__search { border-radius: 2px; border-color: rgba(var(--castle-ink-rgb), 0.9); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35); } html[data-site-theme="castle"] .gifp__brand { border-color: rgba(var(--castle-ink-rgb), 0.9); } html[data-site-theme="castle"] :is(.gifp__item, .gifp__ghost, .gif-img, .kc-dm, .kc-dms__requests) { border-radius: 2px; } html[data-site-theme="castle"] .kc__tab-count { border-radius: 2px; } /* replies, reactions, @names, the player card (owner 2026-10-16): stone like the panel, castle blocks, square corners */ html[data-site-theme="castle"] :is(.kc-msg__acts, .kc-picker, .kc-mentions, .kc-card) { border-color: rgba(var(--castle-ink-rgb), 0.9); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 3px 3px 0 rgba(0, 0, 0, 0.45); } html[data-site-theme="castle"] .kc-card { background: linear-gradient(rgba(var(--bg-sidebar-rgb), 0.94), rgba(var(--bg-sidebar-rgb), 0.94)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat; box-shadow: inset 0 0 0 2px var(--castle-ink), 4px 4px 0 rgba(0, 0, 0, 0.5); } html[data-site-theme="castle"] :is(.kc-card__btn, .kc-react, .kc-msg__act, .kc-picker__btn, .kc-mentions__item, .kc-msg__reply, .kc-replying, .kc-card__stats > div, .kc-card__avatar, .kc-card__hood, .kc-msg__face) { border-radius: 2px; } html[data-site-theme="castle"] .kc-card__btn { box-shadow: var(--castle-block); } html[data-site-theme="castle"] .kc-card__btn:not(:disabled):active { box-shadow: var(--castle-block-down); transform: translateY(2px); } html[data-site-theme="castle"] .kc-card__stats > div { background: rgba(var(--castle-ink-rgb), 0.5); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3); } /* Calmer colour treatment for custom slot covers (owner choice, 2026-10-15). Keep source artwork intact and apply consistently on every castle-theme slot surface. */ html[data-site-theme="castle"] img[src^="/lobby/slots-pixel-v1/"]:not(.sg-iframe-overlay__bg) { filter: saturate(0.85) brightness(0.92); } /* the Originals showcase's tiles (lobby.css "ORIGINALS SHOWCASE"): the same hard block shadow as the rows' tiles */ html[data-site-theme="castle"] .originals-showcase .game-card { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); } html[data-site-theme="castle"] .os-shield__img { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.4)); } @media (hover: hover) and (pointer: fine) { html[data-site-theme="castle"] .os-shield:hover .os-shield__img { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.4)) brightness(1.06); } } /* Game tiles stand flat on the page: no hard shadow under them at rest (owner 2026-10-16: "remove this layer that sits under the games on search bar and anywhere else it is" — the theme's 3 px block shadow, --shadow-md, read as a dark band under every picture on a phone); pointing at / focusing a tile keeps its ring. The search and phone suggested tiles are also shaped 3:4 like their pictures now (search.css, slot-game.css, game-shine.css), so no strip of card shows under the picture. Undo ../removed-features-backup/tile-strip-removed-2026-10-16/README.txt */ html[data-site-theme="castle"] :is(.game-card, .slot-card, .search-modal-game-card, .original-card, .originals-index-card, .fav-card__link, .rp-card__link, .rw-card__thumb, .related-originals__img-wrap, .sg-suggested-card, .lobby-skel-tile):not(:hover):not(:focus-visible), html[data-site-theme="castle"] .sg-m-suggested-card:not(:hover):not(:focus-visible) img { box-shadow: none; } /* ── THE MOMENTS (owner 2026-10-17, the deposit pop-up: "this doesnt fit the site change all animations that are similiar to how this one is to ones that fit the style of the site"): every card of the shared moment kit (src/components/ui/fx — the deposit / bonus / funds pop-ups, the bell's pop-ups, the cashier's events, wallet rewards, My Kingdom's notes, the status moments) is a stone plaque like the house games' win plaque: the castle block's ink outline, a frame in the moment's colour (gold for money in, blue for a process, orange waiting, coral for a problem, grey stone for news), light top / dark bottom edges, a hard shadow, square corners. Instead of the soft glow, the light sweep and the round glowing sparks: two of the sky's pixel stars wink at its top corners (FxGlow), square pixel sparks fly out in steps, the card pops in in pixel steps; the cash mark is the pixel gold coin; the check badge is a square pixel badge; process steps are square. Undo: ../removed-features-backup/castle-moments-2026-10-17/README.txt */ html[data-site-theme="castle"] .fx-tone--success { --fx-frame: var(--gold, #f2c440); } html[data-site-theme="castle"] .fx-tone--process { --fx-frame: #4a7fd0; } html[data-site-theme="castle"] .fx-tone--waiting { --fx-frame: var(--warning, #f0a030); } html[data-site-theme="castle"] .fx-tone--error { --fx-frame: var(--danger, #ff7a6a); } html[data-site-theme="castle"] .fx-tone--neutral { --fx-frame: #6b7188; } html[data-site-theme="castle"] .fx-card { border: 0; border-radius: 2px; background: linear-gradient(rgba(var(--bg-secondary-rgb), 0.9), rgba(var(--bg-secondary-rgb), 0.9)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat, var(--bg-secondary); image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 0 0 4px var(--fx-frame, #6b7188), inset 0 0 0 6px var(--castle-ink), inset 0 8px 0 rgba(255, 255, 255, 0.05), inset 0 -8px 0 rgba(0, 0, 0, 0.22), 4px 4px 0 rgba(0, 0, 0, 0.5); } html[data-site-theme="castle"] .fx-card * { image-rendering: auto; } /* entrances and the end: pixel steps, no overshoot curve */ html[data-site-theme="castle"] .fx-pop { animation: fx-pop-px 0.3s steps(4, end) backwards; } html[data-site-theme="castle"] .fx-enter { animation: fx-enter-px 0.18s steps(3, end) backwards; } html[data-site-theme="castle"] .fx-leave { animation: fx-leave-px 0.4s steps(4, end) forwards !important; } @keyframes fx-pop-px { 0% { opacity: 0; transform: translateY(8px) scale(0.88); } 60% { opacity: 1; transform: translateY(-2px) scale(1.03); } 100% { opacity: 1; transform: none; } } @keyframes fx-enter-px { from { opacity: 0; transform: translateY(4px); } } @keyframes fx-leave-px { to { opacity: 0; transform: translateY(-4px); } } /* no light sweep */ html[data-site-theme="castle"] .fx-sweep { display: none; } /* the glow → two of the sky's pixel stars winking at the card's top corners (the win plaque's) */ html[data-site-theme="castle"] .fx-glow { inset: 0; z-index: 2; border-radius: 0; background: url("/theme/castle/twinkle.png") left -10px top -10px / 21px 21px no-repeat, url("/theme/castle/twinkle.png") right -10px top -10px / 21px 21px no-repeat; image-rendering: pixelated; opacity: 0; animation: fx-wink 0.6s steps(4, end) 0.2s both; } @keyframes fx-wink { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } } /* square pixel sparks with a hard shadow, flying out in steps */ html[data-site-theme="castle"] .fx-sparks > i { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 0; background: var(--gold, #f2c440); box-shadow: 2px 2px 0 var(--castle-ink); animation-timing-function: steps(6, end); } html[data-site-theme="castle"] .fx-sparks > i:nth-child(even) { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--castle-cream, #f4e7c5); } html[data-site-theme="castle"] .fx-sparks > i:nth-child(3n) { background: var(--fx-frame, var(--gold, #f2c440)); box-shadow: 2px 2px 0 var(--castle-ink); } /* the coin: no soft shadow, drops in in steps */ html[data-site-theme="castle"] .fx-coin > img { filter: none; } html[data-site-theme="castle"] .fx-coin--cash > img { border-radius: 0; image-rendering: pixelated; } html[data-site-theme="castle"] .fx-pop .fx-coin > img { animation: fx-coin-px 0.36s steps(5, end) 0.06s backwards; } @keyframes fx-coin-px { 0% { opacity: 0; transform: translateY(-10px) scale(0.6); } 70% { opacity: 1; transform: translateY(2px) scale(1.06); } 100% { opacity: 1; transform: none; } } /* the check: a square pixel badge, the check drawn with square ends */ html[data-site-theme="castle"] .fx-receipt__ring { display: none; } html[data-site-theme="castle"] .fx-receipt__symbol { stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; } html[data-site-theme="castle"] .fx-receipt--received.fx-receipt--animate .fx-receipt__symbol { animation-timing-function: steps(4, end); } /* process steps: square dots, the active one blinks in steps */ html[data-site-theme="castle"] .fx-step__dot { border-radius: 0; } html[data-site-theme="castle"] .fx-step.is-active .fx-step__dot::after { border-radius: 0; animation-timing-function: steps(4, end); } /* the money pop-up (BalanceToast): a cream label, the amount in emerald with the pixel font's hard shadow (like the win plaque's multiplier) — no gradient text, no soft shadow; a square badge on the coin */ html[data-site-theme="castle"] .balance-toast { padding: 14px 44px 14px 16px; } html[data-site-theme="castle"] .balance-toast__title { color: var(--castle-cream, #f4e7c5); text-shadow: 2px 2px 0 var(--castle-ink); } html[data-site-theme="castle"] .balance-toast__amount { font-size: 32px; line-height: 34px; letter-spacing: 0.01em; } html[data-site-theme="castle"] .balance-toast__amount .fx-count__live { background: none; -webkit-text-fill-color: currentColor; color: var(--success); filter: none; text-shadow: 2px 2px 0 var(--castle-ink); } html[data-site-theme="castle"] .balance-toast__received { right: -7px; bottom: -6px; border-radius: 2px; background: var(--bg-secondary); box-shadow: inset 0 0 0 2px var(--castle-ink), 2px 2px 0 rgba(0, 0, 0, 0.5); } /* phones: the 14 px badge (balance-toast.css) on the 28 px coin's corner (owner 2026-10-25: the deposit pop-up's icon "way too big on mobile") */ @media (max-width: 768px) { html[data-site-theme="castle"] .balance-toast .balance-toast__received { right: -5px; bottom: -5px; box-shadow: inset 0 0 0 2px var(--castle-ink), 1px 1px 0 rgba(0, 0, 0, 0.5); } } /* the bell's pop-ups: the label in cream with the hard shadow, good news in emerald */ html[data-site-theme="castle"] .ntoast-title { color: var(--castle-cream, #f4e7c5); text-shadow: 2px 2px 0 var(--castle-ink); } html[data-site-theme="castle"] .fx-tone--success .ntoast-money.is-key { color: var(--success); } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] .fx-pop, html[data-site-theme="castle"] .fx-enter { animation: fx-fade 0.2s ease backwards; } html[data-site-theme="castle"] .fx-leave { animation: fx-fade-out 0.4s ease forwards !important; } html[data-site-theme="castle"] .fx-glow { animation: none; opacity: 0; } html[data-site-theme="castle"] .fx-pop .fx-coin > img { animation: none; } } /* ── THE CLAIM CELEBRATION in the castle look (owner 2026-10-17, same request: "change all animations that are similiar … to ones that fit the style of the site"; src/lib/claimFx.ts + claim-fx.css, the motion unchanged): the coins are the pixel gold coin (they still flip as they fly), the sparkles pixel crosses, the confetti square pixels, the ring a square gold frame, the "+$" chip and the big card stone plaques with a gold frame, the amount flat gold with the pixel font's hard shadow; no soft flash, trail glow, rays, shine or halo; the claim button's success fill opens as a square in steps with a square-ended check. ── */ html[data-site-theme="castle"] .cfx-coin { border-radius: 0; background: url("/currency/dollar.svg") center / 100% 100% no-repeat; image-rendering: pixelated; box-shadow: none; } html[data-site-theme="castle"] .cfx-coin--mark::after { content: none; } html[data-site-theme="castle"] .cfx-spark { background: rgb(var(--cfx-sp)); -webkit-clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); } html[data-site-theme="castle"] .cfx-spark--gold { --cfx-sp: 242, 196, 64; } html[data-site-theme="castle"] :is(.cfx-spark--white, .cfx-spark--blue) { --cfx-sp: 244, 231, 197; } html[data-site-theme="castle"] .cfx-spark--dot { -webkit-clip-path: none; clip-path: none; border-radius: 0; } html[data-site-theme="castle"] :is(.cfx-flash, .cfx-rays, .cfx-card__shine) { display: none; } html[data-site-theme="castle"] .cfx-ring { border-radius: 0; border: 3px solid var(--gold, #f2c440); box-shadow: 2px 2px 0 var(--castle-ink), inset 0 0 0 2px var(--castle-ink); } html[data-site-theme="castle"] .cfx-trail { border-radius: 0; background: var(--gold, #f2c440); } html[data-site-theme="castle"] .cfx-glow { border-radius: 2px; box-shadow: 0 0 0 2px var(--gold, #f2c440), 0 0 0 4px var(--castle-ink); } html[data-site-theme="castle"] .cfx-glow--ring { border: 2px solid var(--gold, #f2c440); box-shadow: 2px 2px 0 var(--castle-ink); } html[data-site-theme="castle"] .cfx-chip { height: 30px; border: 0; border-radius: 2px; background: var(--bg-secondary); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 0 0 4px var(--gold, #f2c440), inset 0 0 0 6px var(--castle-ink), 3px 3px 0 rgba(0, 0, 0, 0.5); padding: 0 12px 0 7px; color: var(--castle-cream, #f4e7c5); font-weight: 400; text-shadow: 2px 2px 0 var(--castle-ink); } html[data-site-theme="castle"] .cfx-cf, html[data-site-theme="castle"] .cfx-cf--round { border-radius: 0; } html[data-site-theme="castle"] .cfx-cf--gold { --cfx-c: var(--gold, #f2c440); } html[data-site-theme="castle"] .cfx-cf--blue, html[data-site-theme="castle"] .cfx-cf--sky { --cfx-c: var(--castle-cream, #f4e7c5); } html[data-site-theme="castle"] .cfx-card { border: 0; border-radius: 2px; background: linear-gradient(rgba(var(--bg-secondary-rgb), 0.88), rgba(var(--bg-secondary-rgb), 0.88)), var(--castle-stone) 0 0 / var(--castle-stone-size) repeat, var(--bg-secondary); image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 0 0 4px var(--gold, #f2c440), inset 0 0 0 6px var(--castle-ink), inset 0 9px 0 rgba(255, 255, 255, 0.06), inset 0 -9px 0 rgba(0, 0, 0, 0.22), 5px 5px 0 rgba(0, 0, 0, 0.5); } html[data-site-theme="castle"] .cfx-card__medal::before { content: none; } html[data-site-theme="castle"] .cfx-card__title { color: var(--castle-cream, #f4e7c5); font-weight: 400; text-shadow: 2px 2px 0 var(--castle-ink); } html[data-site-theme="castle"] .cfx-card__amount { font-weight: 400; background: none; -webkit-text-fill-color: currentColor; color: var(--gold, #f2c440); text-shadow: 3px 3px 0 var(--castle-ink); } html[data-site-theme="castle"] [data-claim-fx][data-claim-fx]::before { border-radius: 2px; background: var(--accent); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.3); -webkit-clip-path: inset(50% 50% 50% 50%); clip-path: inset(50% 50% 50% 50%); animation: cfx-btn-fill-px 0.32s steps(4, end) forwards; } html[data-site-theme="castle"] [data-claim-fx][data-claim-fx]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1206' stroke-width='3.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); color: var(--accent-text, #1a1206); font-weight: 400; animation: cfx-btn-check-px 0.36s steps(4, end) 0.1s forwards; } html[data-site-theme="castle"] [data-claim-fx="out"][data-claim-fx="out"]::before { -webkit-clip-path: inset(0); clip-path: inset(0); animation: cfx-btn-out 0.24s steps(3, end) forwards; } html[data-site-theme="castle"] [data-claim-fx="out"][data-claim-fx="out"]::after { animation: cfx-btn-out 0.24s steps(3, end) forwards; } @keyframes cfx-btn-fill-px { to { -webkit-clip-path: inset(0); clip-path: inset(0); } } @keyframes cfx-btn-check-px { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { html[data-site-theme="castle"] [data-claim-fx][data-claim-fx]::before { -webkit-clip-path: none; clip-path: none; animation: cfx-fade-in 0.2s ease forwards; } html[data-site-theme="castle"] [data-claim-fx][data-claim-fx]::after { transform: translate(-50%, -50%); animation: cfx-fade-in 0.2s ease forwards; } } /* ── the side menu's Search box, slimmer (owner 2026-10-17, a picture of the menu button and the box: "this is too thick make it more inline with the menu button", then "make the search bar a bit bigger not as big as before but slightly bigger"): 36 px tall instead of 40 (it was 32 for a moment), centred on the menu button, an 18 px magnifier (the lobby search box's own vector one since 2026-10-25 — it was the pixel set's at 20 px: "make the overly pixelated magnifyer look like the other one") and 16 px words, so it sits in line with the menu button's three lines instead of towering beside them. Undo: delete this block (../removed-features-backup/sidebar-search-slim-2026-10-17/README.txt). ── */ html[data-site-theme="castle"] .sidebar-top-nav .sidebar-search-bar { height: 36px; min-height: 36px; padding: 0 10px; gap: 8px; align-self: center; } html[data-site-theme="castle"] .sidebar-top-nav .sidebar-search-bar input { font-size: 16px; } html[data-site-theme="castle"] .sidebar-top-nav .sidebar-search-bar input::placeholder { font-weight: 600; } /* ===== THE SIDE MENU: THE PAGE YOU ARE ON (owner 2026-10-18: "could we add maybe some yellow to side bar when you click an option stays their highlighting the tab u r on", then "dont highlight the whole box with that ring just the logo and word") ===== The page you are on: its icon and its name in gold — no box, no ring, no lighter tile (the row only lights up while pointed at, like every row) — in the open menu, the phone menu and on the closed icon strip. A folded Slots / Originals header carries it while you are on one of its pages (unfolded, its own row does). It was a slightly lighter tile with a white icon. Undo: ../removed-features-backup/sidebar-current-gold-2026-10-18/README.txt Since 2026-10-25 the icons are in their own colours (pixel-icons.css "COLOUR"): the page you are on shows its icon at full colour (the others rest a little dim) and its name in gold; the gold below still paints a one-colour icon. */ html[data-site-theme="castle"] .sidebar.sidebar :is(.sidebar-pc-menu-item.active, .sidebar-pc-group-header.has-current[aria-expanded="false"]):not(:hover, .is-pressed) { background: transparent; box-shadow: none; } html[data-site-theme="castle"] .sidebar.sidebar :is(.sidebar-pc-menu-item.active, .sidebar-pc-group-header.has-current[aria-expanded="false"]) :is(.sidebar-pc-glyph, .sidebar-pc-icon > svg, svg.sidebar-pc-glyph) { color: var(--accent); } html[data-site-theme="castle"] .sidebar.sidebar :is(.sidebar-pc-menu-item.active, .sidebar-pc-group-header.has-current[aria-expanded="false"]) .sidebar-pc-text { color: var(--accent); opacity: 1; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } /* ── THE WALLET (owner 2026-10-19: "make the wallet section look better / deposit / withdraw / tip"): the cashier overlay (CashierOverlay.tsx + components/cashier/*, cashier.css, cashier-nowpayments.css) as a castle board — the card and the coin panel beside it are stone boards with the cream edge on top and a hard shadow (phones: the sheet keeps its full height, with the cream edge); the balance sits in a carved slot with the pixel gold coin; the tabs lie in a carved slot like the lobby's (the chosen one raised with the gold outline: the refined palette's chosen list); section headings in cream with a dashed pixel rule; the coin tiles are castle blocks that sink when pressed; fields stay plain and dark with one thin edge and square corners (owner 2026-10-14), a gold edge while typing; Copy / Paste / Max are small stone blocks; the main button is gold only when it can be pressed (grey stone while it can't); the QR sits in a stone mount with gold pixel corners; the deposit address reads in Figtree (checked character by character); square radio marks and progress bars. Styles only — every class, rig selector and request unchanged. Check ../banner-work/wallet-look-2026-10-19/tools/wallet-shots.mjs [fixture] [devices]; undo ../removed-features-backup/wallet-look-2026-10-19/README.txt ── */ html[data-site-theme="castle"] .cashier-overlay { --wlt-line: rgba(255, 255, 255, 0.06); background: rgba(var(--castle-ink-rgb), 0.72); } @media (min-width: 769px) { html[data-site-theme="castle"] :is(.wlt, .wlt-panel--side) { background: var(--bg-secondary); border: 1px solid var(--border-color); border-top: 3px solid var(--castle-cream-dark); border-radius: 3px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5), 0 28px 60px -24px rgba(0, 0, 0, 0.75); } } @media (max-width: 768px) { html[data-site-theme="castle"] .wlt { border-top: 3px solid var(--castle-cream-dark); } } /* the header: "Wallet", then the balance in a carved slot — the gold coin, the total, Cash | Bonus */ /* (a grid: the title and the X on the first row, the balance slot across the whole width under them) */ html[data-site-theme="castle"] .wlt-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; } html[data-site-theme="castle"] .wlt-head__main { display: contents; } html[data-site-theme="castle"] .wlt-head__title-row { grid-row: 1; grid-column: 1; } html[data-site-theme="castle"] .wlt-head__close { grid-row: 1; grid-column: 2; margin: 0 -4px 0 0; } html[data-site-theme="castle"] .wlt-head__bal { grid-row: 2; grid-column: 1 / -1; } html[data-site-theme="castle"] .wlt-head__title { color: var(--castle-cream); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); } html[data-site-theme="castle"] .wlt-head__bal { align-items: center; gap: 4px 12px; padding: 8px 12px 8px 10px; background: var(--bg-input); border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 -2px 0 rgba(255, 255, 255, 0.06); color: var(--text-muted); } html[data-site-theme="castle"] .wlt-head__amount { display: inline-flex; align-items: center; gap: 8px; font-size: 1.3em; color: var(--text-bright); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); } html[data-site-theme="castle"] .wlt-head__amount::before { content: ''; flex: none; width: 1.05em; height: 1.05em; background: url("/currency/dollar.svg") center / contain no-repeat; } html[data-site-theme="castle"] .wlt-head__part { padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, 0.1); } html[data-site-theme="castle"] .wlt-head__bal:is([data-fit="2"], [data-fit="3"]) { align-items: flex-start; } html[data-site-theme="castle"] .wlt-head__bal:is([data-fit="2"], [data-fit="3"]) .wlt-head__part { padding-left: 0; border-left: 0; } /* the narrowest phones wrap Bonus onto a second line: no divider there (it would start the line) */ @media (max-width: 380px) { html[data-site-theme="castle"] .wlt-head__part { padding-left: 0; border-left: 0; } } /* the tabs: one carved slot (the lobby tab bar's), the chosen tab raised in it */ html[data-site-theme="castle"] .wlt-tabs { gap: 3px; padding: 3px; border-radius: 3px; background: var(--bg-input); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(255, 255, 255, 0.07), 0 2px 0 rgba(255, 255, 255, 0.06); } html[data-site-theme="castle"] .wlt-tab[aria-selected="false"] { color: var(--text-muted); } @media (hover: hover) { html[data-site-theme="castle"] .wlt-tab[aria-selected="false"]:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } } /* section headings (Bonuses, Crypto, Recent withdrawals / tips) in cream with a dashed pixel rule to the edge */ html[data-site-theme="castle"] :is(.wlt-section-title, .wlt-bonus > .wlt-label) { display: flex; align-items: center; gap: 10px; color: var(--castle-cream); letter-spacing: 0.03em; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); } html[data-site-theme="castle"] :is(.wlt-section-title, .wlt-bonus > .wlt-label)::after { content: ''; flex: 1 1 auto; height: 2px; background: linear-gradient(90deg, var(--castle-cream-dark) 50%, transparent 50%) 0 0 / 6px 2px repeat-x; opacity: 0.32; } html[data-site-theme="castle"] .wlt-label { color: var(--text-muted); } /* fields: plain and dark, one thin edge, square corners; a gold edge while typing */ html[data-site-theme="castle"] :is(.wlt-input-wrap, .wlt-bonus__btn, .wlt-select__native, .wlt-search, .wlt-readout, .wlt-bonus__list), html[data-site-theme="castle"] .cashier-overlay .np-copy__field { border-radius: 2px; background-color: var(--bg-input); } html[data-site-theme="castle"] .wlt-bonus.is-open .wlt-bonus__btn { border-radius: 2px 2px 0 0; } html[data-site-theme="castle"] .wlt-bonus__list { border-radius: 0 0 2px 2px; } html[data-site-theme="castle"] :is(.wlt-input-wrap, .wlt-search):focus-within, html[data-site-theme="castle"] .wlt-select__native:focus-visible { border-color: rgba(var(--accent-rgb), 0.75); } html[data-site-theme="castle"] .wlt-input-wrap.is-invalid { border-color: rgba(var(--danger-rgb), 0.7); } html[data-site-theme="castle"] .wlt-readout { border-color: var(--border-color); } html[data-site-theme="castle"] :is(.wlt-readout__value, .wlt-avail__value) { color: var(--text-bright); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); } /* the bonus choices: square pixel radio marks, gold when picked */ html[data-site-theme="castle"] .wlt-radio { border-radius: 1px; border: 2px solid var(--text-dim); } html[data-site-theme="castle"] [aria-checked="true"] > .wlt-radio { border-color: var(--accent); } html[data-site-theme="castle"] [aria-checked="true"] > .wlt-radio::after { width: 6px; height: 6px; border-radius: 0; background: var(--accent); } html[data-site-theme="castle"] .wlt-bonus__opt { border-radius: 2px; } /* the coin tiles: castle blocks (the picked one keeps the refined palette's gold outline) */ html[data-site-theme="castle"] .cashier-overlay .wlt-coin--tile { border: 0; border-radius: 2px; background-color: var(--bg-card); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.08), inset 0 -4px 0 rgba(0, 0, 0, 0.28), 2px 2px 0 rgba(0, 0, 0, 0.4); transition: background-color 0.12s, transform 0.06s; } @media (hover: hover) { html[data-site-theme="castle"] .cashier-overlay .wlt-coin--tile:not(.is-on):hover { background-color: var(--bg-card); background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)); } } html[data-site-theme="castle"] .cashier-overlay .wlt-coin--tile:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.22), 1px 1px 0 rgba(0, 0, 0, 0.4); } html[data-site-theme="castle"][data-palette="refined"] .cashier-overlay .wlt-coin.wlt-coin--tile.is-on { box-shadow: inset 0 0 0 2px var(--accent), inset 0 4px 0 rgba(255, 255, 255, 0.12), inset 0 -4px 0 rgba(0, 0, 0, 0.25), 2px 2px 0 rgba(0, 0, 0, 0.4); } html[data-site-theme="castle"] .cashier-overlay .wlt-coin--more { color: var(--text-muted); } /* the phones' coin list: rows split by a carved groove */ html[data-site-theme="castle"] .wlt-coin-list:not(.wlt-grid) > li + li { border-top: 1px solid rgba(var(--castle-ink-rgb), 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); } html[data-site-theme="castle"] .wlt-coin-list:not(.wlt-grid) .wlt-coin { border-radius: 2px; } /* small stone blocks: Copy, Paste / Max (the chips already are: "the small ½ / 2× chips" above), the back arrow */ html[data-site-theme="castle"] .cashier-overlay .np-copy__btn, html[data-site-theme="castle"] .wlt-back { border-radius: 2px; background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.26); } html[data-site-theme="castle"] :is(.cashier-overlay .np-copy__btn, .wlt-back):not(:disabled):active { transform: translateY(1px); } @media (hover: hover) { html[data-site-theme="castle"] :is(.cashier-overlay .np-copy__btn, .wlt-back):hover { background: var(--bg-elevated-hover); } } html[data-site-theme="castle"] .cashier-overlay .np-copy__field.is-copied { border-color: rgba(var(--accent-rgb), 0.75); } /* the deposit address in Figtree: every character exact (the pixel font's 0 / O and 1 / l are too close) */ html[data-site-theme="castle"] .cashier-overlay .np-copy__value:not(.np-copy__value--strong):not(#gz-read-font) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; letter-spacing: 0.01em; } /* the main button: gold only when it can be pressed; grey stone while it can't (it was a muddy see-through gold) */ html[data-site-theme="castle"] .wlt-primary:disabled { opacity: 1; background: var(--bg-chip); color: var(--text-dim); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 2px 2px 0 rgba(0, 0, 0, 0.35); filter: none; } /* the QR in a stone mount with gold pixel corners */ html[data-site-theme="castle"] .cashier-overlay .qr-wrapper { position: relative; border-radius: 2px; box-shadow: 0 0 0 5px var(--bg-card), 0 0 0 7px var(--castle-ink), 6px 6px 0 7px rgba(0, 0, 0, 0.42); } html[data-site-theme="castle"] .cashier-overlay .qr-wrapper::before { content: ''; position: absolute; inset: -7px; pointer-events: none; background: linear-gradient(var(--accent), var(--accent)) left top / 14px 3px, linear-gradient(var(--accent), var(--accent)) left top / 3px 14px, linear-gradient(var(--accent), var(--accent)) right top / 14px 3px, linear-gradient(var(--accent), var(--accent)) right top / 3px 14px, linear-gradient(var(--accent), var(--accent)) left bottom / 14px 3px, linear-gradient(var(--accent), var(--accent)) left bottom / 3px 14px, linear-gradient(var(--accent), var(--accent)) right bottom / 14px 3px, linear-gradient(var(--accent), var(--accent)) right bottom / 3px 14px; background-repeat: no-repeat; } html[data-site-theme="castle"] .cashier-overlay .deposit-qr__coin { border-radius: 3px; } html[data-site-theme="castle"] .cashier-overlay :is(.qr-skeleton-pulse, .np-skel__qr) { border-radius: 2px; } /* the coin panel's head: the cream edge is the board's; a carved line under the head */ html[data-site-theme="castle"] .wlt-panel--side .wlt-panel__head { border-bottom: 2px solid rgba(var(--castle-ink-rgb), 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-site-theme="castle"] .wlt-panel__title { color: var(--castle-cream); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); } html[data-site-theme="castle"] .wlt-panel__net { color: var(--text-muted); } /* Withdraw: what can go out, in a carved slot of its own */ html[data-site-theme="castle"] .wlt-avail { gap: 8px; padding: 12px 14px; background: var(--bg-input); border-bottom: 0; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 -2px 0 rgba(255, 255, 255, 0.06); } html[data-site-theme="castle"] .wlt-hold { border-top-color: rgba(255, 255, 255, 0.07); } html[data-site-theme="castle"] .wlt-hold__bar { height: 6px; border-radius: 0; background: rgba(var(--castle-ink-rgb), 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } html[data-site-theme="castle"] .wlt-hold__bar > span { border-radius: 0; background: var(--castle-cream); } /* the history rows: tidy grooves */ html[data-site-theme="castle"] .wlt-history__row { border-top-color: rgba(255, 255, 255, 0.07); } html[data-site-theme="castle"] .wlt-history__row:last-child { border-bottom-color: rgba(255, 255, 255, 0.07); } html[data-site-theme="castle"] .wlt-history__cancel { border-radius: 2px; } /* ── THE WALLET'S "MORE OPTIONS…" (owner 2026-10-19: "make the more options page better"): on wide screens the full coin list (.wlt-dep-list / .wlt-wd-list, CoinPicker) is a grid of castle-block tiles like the Crypto grid — three across, each the coin, its ticker, its name and how many networks, the picked one with the gold outline, a coin the deposit flow does not take dimmed with "Not available"; the search box a plain dark field with the gold edge while typing. Phones keep their downward list (owner 2026-10-10). Undo ../removed-features-backup/wallet-more-options-2026-10-19/README.txt ── */ html[data-site-theme="castle"] .wlt-step-head__title { color: var(--castle-cream); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); } @media (min-width: 769px) { html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin-list > li { display: flex; min-width: 0; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin-list > li + li { border-top: 0; box-shadow: none; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; /* the words centred whether they are one, two or three lines */ align-items: center; column-gap: 10px; row-gap: 0; min-height: 66px; padding: 10px 12px; border-radius: 2px; background-color: var(--bg-card); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 3px 0 rgba(255, 255, 255, 0.08), inset 0 -4px 0 rgba(0, 0, 0, 0.28), 2px 2px 0 rgba(0, 0, 0, 0.4); transition: background-color 0.12s, transform 0.06s; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin__icon { grid-row: 1 / span 4; width: 32px; height: 32px; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin__text { grid-column: 2; grid-row: 2; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin__ticker { font-size: 16px; line-height: 1.15; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin__name { font-size: 13px; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin__meta { grid-column: 2; grid-row: 3; margin: 2px 0 0; padding: 0; font-size: 12px; color: var(--castle-cream-dark); } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin__meta:empty { display: none; } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin .wlt-chev { display: none; } @media (hover: hover) { html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin:not(.is-on):hover { background-color: var(--bg-card); background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)); } } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 4px 0 rgba(0, 0, 0, 0.22), 1px 1px 0 rgba(0, 0, 0, 0.4); } html[data-site-theme="castle"][data-palette="refined"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin-list .wlt-coin.is-on { background-color: var(--bg-elevated); box-shadow: inset 0 0 0 2px var(--accent), inset 0 4px 0 rgba(255, 255, 255, 0.12), inset 0 -4px 0 rgba(0, 0, 0, 0.25), 2px 2px 0 rgba(0, 0, 0, 0.4); } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin.is-off { background-color: rgba(var(--bg-card-rgb), 0.55); } html[data-site-theme="castle"] :is(.wlt-dep-list, .wlt-wd-list) .wlt-coin.is-off .wlt-coin__meta { color: var(--text-dim); } } /* ── THE SIGN-UP POP-UP (owner 2026-10-21, a screenshot of "Complete your profile": "make this better and easier to read"): OnboardingPopup.tsx as a castle board like the wallet — a darker backdrop so the lobby behind stops competing, the card a stone board with the cream edge on top and a hard shadow, a cream title, bright labels, fields that are plain and dark with square corners and a gold edge while typing, what the player types in the reading font at 16 px (every character of a username exact: the pixel font's l / 1 / I and 0 / O are too close), placeholders and the rule under each field readable, and the button gold only when it can be pressed (grey stone while it can't — it was a muddy see-through gold). Styles only. Check ../banner-work/onboarding-readable-2026-10-21/tools/onboarding-shots.mjs ; undo ../removed-features-backup/onboarding-readable-2026-10-21/README.txt ── */ html[data-site-theme="castle"] .ob-overlay { background: rgba(var(--castle-ink-rgb), 0.86); } @media (min-width: 769px) { html[data-site-theme="castle"] .ob-card { width: 460px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-top: 3px solid var(--castle-cream-dark, var(--border-strong)); border-radius: 3px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5), 0 28px 60px -24px rgba(0, 0, 0, 0.75); } } @media (max-width: 768px) { html[data-site-theme="castle"] .ob-card { border-top: 3px solid var(--castle-cream-dark, var(--border-strong)); } } html[data-site-theme="castle"] .ob-header { gap: 8px; padding-top: 26px; } html[data-site-theme="castle"] .ob-header__title { font-size: 26px; line-height: 1.1; color: var(--castle-cream, var(--text-bright)); letter-spacing: 0.02em; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); } html[data-site-theme="castle"] .ob-header__desc { font-size: 16px; color: var(--text-muted); } html[data-site-theme="castle"] .ob-body { gap: 18px; padding-top: 16px; } html[data-site-theme="castle"] .ob-field { gap: 7px; } html[data-site-theme="castle"] .ob-field__label { font-size: 16px; color: var(--text-primary); letter-spacing: 0.02em; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } /* fields: plain and dark, one thin edge, square corners; a gold edge while typing (the wallet's) */ html[data-site-theme="castle"] .ob-field__input-wrap { height: 48px; padding: 0 14px; border-radius: 2px; background-color: var(--bg-input); border-color: var(--border-strong, var(--border-color)); } html[data-site-theme="castle"] .ob-field__input-wrap:focus-within { border-color: rgba(var(--accent-rgb), 0.85); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.22); } html[data-site-theme="castle"] .ob-field__input-wrap.ob-field__input-wrap--invalid { border-color: rgba(var(--danger-rgb), 0.8); } html[data-site-theme="castle"] .ob-field__input-wrap.ob-field__input-wrap--invalid:focus-within { box-shadow: 0 0 0 2px rgba(var(--danger-rgb), 0.22); } /* what the player types, and the placeholders: the reading font, 16 px (also iPhone Safari's no-zoom size) */ html[data-site-theme="castle"] .ob-card .ob-field__input:not(#gz-read-font) { font-family: var(--castle-read-font) !important; font-size-adjust: none !important; font-size: 16px; font-weight: 500; color: var(--text-bright); letter-spacing: 0.01em; } html[data-site-theme="castle"] .ob-card .ob-field__input::placeholder { color: var(--text-dim); opacity: 1; } html[data-site-theme="castle"] .ob-field__input:-webkit-autofill, html[data-site-theme="castle"] .ob-field__input:-webkit-autofill:hover, html[data-site-theme="castle"] .ob-field__input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset; } /* the rule under each field, its problem and the form's error line: readable sizes */ html[data-site-theme="castle"] :is(.ob-field__hint, .ob-field__underage, .ob-wallet-note) { font-size: 14px; line-height: 1.3; } html[data-site-theme="castle"] .ob-field__hint { color: var(--text-muted); } html[data-site-theme="castle"] .ob-field__underage { color: var(--text-primary); } html[data-site-theme="castle"] :is(.ob-field__hint.is-ok, .ob-field__underage)::before { border-radius: 0; } html[data-site-theme="castle"] .ob-error { font-size: 15px; color: var(--text-primary); } html[data-site-theme="castle"] .ob-error::before { border-radius: 0; } /* the button: gold only when it can be pressed; grey stone while it can't */ html[data-site-theme="castle"] .ob-btn-confirm { min-height: 50px; margin-top: 8px; font-size: 18px; } html[data-site-theme="castle"] .ob-btn-confirm.ob-btn-confirm--disabled { opacity: 1; background: var(--bg-chip); color: var(--text-dim); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 2px 2px 0 rgba(0, 0, 0, 0.35); filter: none; } /* ── THE LIVE BETS TABLE (2026-10-23, after Gamdom's — owner: "take insiration from gamdoms one … but keep it our style"): every bet a stone slab with the castle's ink outline and a faint lit top edge, the multiplier a small castle block in the result's colour (emerald win, gold from 100×, dark stone loss, grey push), the pixel coin drawn crisp. Layout and colours in recentbets.css; undo ../removed-features-backup/live-bets-gamdom-style-2026-10-23/. ── */ html[data-site-theme="castle"] .rb-tabs { border-bottom: 1px solid rgba(var(--bg-elevated-rgb), 0.35); margin-bottom: 6px; } html[data-site-theme="castle"] .rb-header-row { border-top: none; } html[data-site-theme="castle"] .rb-row { border-radius: 3px; background: rgba(var(--bg-card-rgb), 0.62); box-shadow: inset 0 0 0 2px rgba(var(--castle-ink-rgb), 0.75), inset 0 3px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 0 rgba(0, 0, 0, 0.2); } @media (hover: hover) { html[data-site-theme="castle"] .rb-body .rb-row:hover { background: rgba(var(--bg-elevated-rgb), 0.6); } } html[data-site-theme="castle"] .rb-row--big { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.06) 45%, rgba(var(--bg-card-rgb), 0.62) 75%); box-shadow: inset 0 0 0 2px rgba(var(--castle-ink-rgb), 0.75), inset 6px 0 0 var(--accent), inset 0 3px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 0 rgba(0, 0, 0, 0.2); } html[data-site-theme="castle"] .rb-row--big .rb-payout--win { color: var(--accent); } html[data-site-theme="castle"] .rb-game__thumb { border-radius: 6px; box-shadow: 0 0 0 2px rgba(var(--castle-ink-rgb), 0.85); } html[data-site-theme="castle"] .rb-coin { image-rendering: pixelated; } html[data-site-theme="castle"] .rb-multi { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--castle-ink), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.25); } html[data-site-theme="castle"] .rb-multi--lose { background: rgba(var(--castle-ink-rgb), 0.55); color: var(--text-dim); box-shadow: inset 0 0 0 2px rgba(var(--castle-ink-rgb), 0.9); } html[data-site-theme="castle"] .rb-multi--even { background: var(--bg-chip, rgba(255, 255, 255, 0.12)); color: var(--text-muted); } html[data-site-theme="castle"] .rb-multi--win { color: var(--castle-ink); } html[data-site-theme="castle"] .rb-multi--epic { background: var(--accent); color: var(--accent-text); } /* ── THE TOP WINS PANEL under every game (owner 2026-10-25, a picture of Shuffle's: "this area on our games are too empty put something like this"; GameWins.tsx, layout in game-wins.css): a stone board like the castle pages' (the cream top edge, the ink outline), the studio tag a small stone chip, the record in a carved slot, the fold button and the period stone blocks, the places' pixel crowns gold / silver / bronze; the rows are the live bets table's slabs. Undo ../removed-features-backup/game-top-wins-2026-10-25/README.txt ── */ html[data-site-theme="castle"] .gw { border-radius: 4px; border-top: 2px solid var(--castle-cream-dark, var(--border-strong)); box-shadow: inset 0 0 0 2px rgba(var(--castle-ink-rgb), 0.55); } html[data-site-theme="castle"] .gw-sample { border-radius: 2px; background: rgba(var(--bg-elevated-rgb), 0.55); box-shadow: var(--castle-block-flat); } /* the bar's fold button is quiet (2026-10-27: "cleaner … thinner"): no raised block, it lights with the bar on hover */ html[data-site-theme="castle"] .gw-toggle { border-radius: 2px; } html[data-site-theme="castle"] .gw-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } html[data-site-theme="castle"] .gw-record { border-radius: 2px; background: rgba(var(--castle-ink-rgb), 0.5); box-shadow: inset 0 0 0 2px rgba(var(--castle-ink-rgb), 0.9), inset 0 3px 0 rgba(0, 0, 0, 0.3); } html[data-site-theme="castle"] .gw-record__crown { color: var(--gold); } html[data-site-theme="castle"] .gw-period__btn { border-radius: 2px; box-shadow: var(--castle-block); transition: filter 0.12s, transform 0.06s; } @media (hover: hover) { html[data-site-theme="castle"] .gw-period__btn:hover { filter: brightness(1.1); } } html[data-site-theme="castle"] .gw-period__btn:active { transform: translateY(2px); box-shadow: var(--castle-block-down); } html[data-site-theme="castle"] :is(.gw-period__btn, .gw-period__item, .gw-retry):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } html[data-site-theme="castle"] .gw-period__list { border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(var(--castle-ink-rgb), 0.85), 4px 4px 0 rgba(0, 0, 0, 0.45); } html[data-site-theme="castle"] .gw-period__item { border-radius: 2px; } html[data-site-theme="castle"] .gw-period__item.is-on { color: var(--castle-cream, var(--text-bright)); box-shadow: inset 0 0 0 2px var(--gold); background: rgba(var(--bg-elevated-rgb), 0.5); } html[data-site-theme="castle"] .gw-face { border-radius: 3px; } html[data-site-theme="castle"] .gw-retry { color: var(--gold-light, var(--gold)); }