/* MerryArcade — "Sunny Fairground" theme (v24 · premium pass) Warm cream + coral + gold + sea-green. Big type, big buttons, gentle motion. v24 keeps the sunny identity but layers in depth: soft large-radius shadows, warmer gradients, springier 150–250ms micro-interactions and a clearer type scale. Every JS-referenced id/class from the previous theme is preserved. */ :root { /* surfaces */ --bg: #FFF7EC; /* warm cream page */ --bg-peach: #FFE9D3; /* soft peach wash */ --surface: #ffffff; --surface-warm: #FFFDF8; /* warm white for inputs / pressed cards */ --ink: #342A58; /* deep warm navy */ --muted: #6E6386; --line: #F0DFC8; /* warm hairline — every light warm border */ --line-strong: #E9CFA4; /* warm hairline, emphasised — hover / dashed accents */ /* brand */ --coral: #D64425; /* primary — coral red (AA with white text) */ --coral-hi: #F0663F; --coral-deep: #A93318; /* pressed / underside of coral buttons */ --gold: #F5A623; /* secondary — golden yellow */ --gold-hi: #FFD97A; --gold-soft: #FFE7B0; --green: #0E8F72; /* accent — sea green */ --green-hi: #18AE8C; --plum: #3B2D62; /* dark warm navy bands / frames */ --plum-deep: #2A1F49; /* shape + rhythm */ --radius-sm: 14px; --radius: 20px; --radius-lg: 28px; --font-display: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* motion: quick, slightly springy, never bouncy */ --ease-out: cubic-bezier(.22, .9, .35, 1); --ease-spring: cubic-bezier(.3, 1.25, .5, 1); /* layered warm shadows — a tight contact line plus a soft wide bloom */ --shadow-soft: 0 1px 2px rgba(122, 60, 24, .07), 0 4px 14px rgba(122, 60, 24, .09); --shadow: 0 2px 5px rgba(122, 60, 24, .10), 0 12px 28px -10px rgba(122, 60, 24, .18); --shadow-lift: 0 6px 12px -4px rgba(122, 60, 24, .16), 0 26px 52px -14px rgba(122, 60, 24, .32); /* showpiece glow — the marquee frame shared by the hero tile and the game stage (thin plum line, gold halo, warm bloom) */ --shadow-pop: 0 0 0 1px rgba(59, 45, 98, .4), 0 0 0 5px rgba(245, 166, 35, .25), 0 12px 34px rgba(214, 68, 37, .24), 0 24px 52px -10px rgba(122, 60, 24, .3); --ring: 0 0 0 4px rgba(245, 166, 35, .24); } * { box-sizing: border-box; } html { color-scheme: light; } html, body { overflow-x: clip; } /* full-bleed bands use 100vw; never allow sideways scroll */ body { margin: 0; color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; /* 45+ friendly base */ line-height: 1.55; -webkit-font-smoothing: antialiased; background-color: var(--bg); /* cream washing into soft peach — two warm glows plus a faint gold haze at the very top, and the same gentle confetti drifting underneath */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='%23E8945A' fill-opacity='0.07'%3E%3Ccircle cx='120' cy='140' r='60'/%3E%3Cpath d='M700 60l90 160H610z'/%3E%3Crect x='390' y='260' width='120' height='120' rx='34' transform='rotate(18 450 320)'/%3E%3Ccircle cx='790' cy='520' r='52'/%3E%3Cpath d='M150 630l85 150H65z'/%3E%3Crect x='560' y='690' width='104' height='104' rx='30' transform='rotate(-14 612 742)'/%3E%3Ccircle cx='330' cy='520' r='38'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255, 215, 122, .18), transparent 420px), radial-gradient(1100px 500px at 85% -100px, var(--bg-peach), transparent 70%), radial-gradient(900px 480px at -120px 30%, #FFEFDA, transparent 65%); background-size: 900px 900px, auto, auto, auto; } ::selection { background: var(--gold-soft); color: var(--ink); } h1, h2, h3, .logo, .nav a, .btn-play, .random-btn, .tile-title, .tile-badge, .stage-bar button, .faux-exit, .search-toggle { font-family: var(--font-display); } a { color: var(--coral); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; } /* ---------- Header: floating warm card ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 247, 236, .82); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); padding: 10px 10px 2px; } .header-inner { display: flex; align-items: center; gap: 14px; padding: 10px 16px; max-width: 1160px; margin: 0 auto; background: linear-gradient(180deg, #FFFFFF, var(--surface-warm)); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow); } .logo { font-size: 1.4rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 6px 10px 6px 6px; border-radius: var(--radius-sm); transition: transform .18s var(--ease-spring); } .logo:hover { text-decoration: none; transform: translateY(-1px) rotate(-1deg); } .logo:active { transform: scale(.96); } .logo-mark { flex-shrink: 0; } .logo-word { color: var(--ink); } .logo-word span { background: linear-gradient(90deg, var(--coral-hi), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 0; } .nav::-webkit-scrollbar { display: none; } .nav a { color: var(--ink); background: linear-gradient(180deg, #FFF6E8, #FFEFD8); border: 2px solid var(--line); padding: 10px 18px; min-height: 48px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 1rem; font-weight: 700; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); transition: transform .18s var(--ease-spring), box-shadow .18s ease, background .18s ease, border-color .18s ease; } .nav a:hover { text-decoration: none; transform: translateY(-2px); background: linear-gradient(180deg, var(--gold-hi), var(--gold-soft)); border-color: var(--gold); box-shadow: var(--shadow); } .nav a:active { transform: translateY(0) scale(.96); } .nav-emoji { margin-right: 6px; display: inline-flex; align-items: center; } /* Bespoke SVG glyphs (issue 10): stroke icons that render identically on every OS, replacing the system emoji in nav chips, the Random button and the game-page h1. They inherit the text colour of whatever they sit in. */ .pf-ic { display: block; flex-shrink: 0; } .h1-ic { display: inline-flex; align-items: center; color: var(--coral); } /* ---------- Header tools: search + random ---------- */ .header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } .search-toggle { display: none; } .search { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 14px; font-size: .9rem; pointer-events: none; opacity: .75; transition: opacity .18s ease, transform .25s var(--ease-out); } .search input { width: 200px; border: 2px solid var(--line); border-radius: 999px; padding: 11px 14px 11px 38px; min-height: 48px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--surface-warm); box-shadow: inset 0 2px 4px rgba(122, 60, 24, .06); outline: none; transition: width .25s var(--ease-out), margin-left .25s var(--ease-out), border-color .18s ease, box-shadow .18s ease, background .18s ease; -webkit-appearance: none; appearance: none; } .search input:hover { border-color: var(--line-strong); } /* Focus growth expands LEFT into the header's slack (negative margin keeps the layout width constant), so the Random button and nav chips never get shoved sideways mid-interaction (issue 13). The icon rides along. */ .search input:focus { width: 260px; margin-left: -60px; border-color: var(--gold); background: #fff; box-shadow: inset 0 1px 2px rgba(122, 60, 24, .04), var(--ring); } .search:focus-within .search-icon { opacity: 1; transform: translateX(-60px); } .search input::placeholder { color: var(--muted); font-weight: 600; } .search-results { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-lift); padding: 8px; z-index: 60; max-height: 60vh; overflow-y: auto; } .search-results[hidden] { display: none; } .search-hit { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); min-height: 48px; } .search-hit img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; } .search-hit:hover, .search-hit.active { background: #FFF1DE; text-decoration: none; } .search-hit-title { font-weight: 800; font-size: 1rem; } .search-hit-cat { font-size: .8rem; color: var(--muted); font-weight: 700; text-transform: capitalize; } .search-none { padding: 14px; color: var(--muted); font-size: .95rem; font-weight: 600; text-align: center; } .search-label { padding: 10px 10px 6px; color: var(--muted); font-size: .85rem; font-weight: 700; line-height: 1.35; } .random-btn { color: #fff; background: linear-gradient(180deg, var(--green-hi), var(--green)); padding: 10px 18px; min-height: 48px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 1rem; font-weight: 700; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #0A6B55, 0 6px 14px rgba(14, 143, 114, .32); transition: transform .18s var(--ease-spring), box-shadow .18s ease; } .random-btn:hover { text-decoration: none; color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #0A6B55, 0 10px 20px rgba(14, 143, 114, .4); } .random-btn:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 #0A6B55, 0 4px 10px rgba(14, 143, 114, .3); } /* ---------- Section headings (ink on cream, coral→gold accent stroke) ---------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 18px; } .section-head h2 { font-size: 1.75rem; margin: 0; font-weight: 800; color: var(--ink); letter-spacing: -.015em; line-height: 1.15; } .section-head h2::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--coral-hi), var(--gold)); } .section-head a { font-size: 1rem; font-weight: 700; color: var(--coral); text-decoration: none; background: #FFEDE4; border: 1.5px solid #F7CDB8; padding: 8px 16px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: transform .18s var(--ease-spring), background .18s ease, box-shadow .18s ease; } .section-head a:hover { text-decoration: none; background: #FFE3D4; transform: translateY(-2px); box-shadow: var(--shadow-soft); } .section-head a:active { transform: scale(.96); } .section-blurb { font-size: .95rem; font-weight: 600; color: var(--muted); } /* ---------- Tile grid ---------- */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; gap: 18px; margin-top: 16px; } .tile { position: relative; display: block; aspect-ratio: 1 / 1; /* square when it occupies a single cell; grid wins when it spans */ border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 0 rgba(255, 255, 255, .55) inset, var(--shadow); transition: transform .22s var(--ease-spring), box-shadow .22s ease; color: #fff; background: var(--plum); } .tile-featured { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* candy lift + gentle tilt — pointer devices only, so phones never jiggle */ @media (hover: hover) and (pointer: fine) { .tile:hover { transform: translateY(-6px) rotate(-1.2deg) scale(1.03); box-shadow: var(--shadow-lift); text-decoration: none; z-index: 2; color: #fff; } } .tile:hover { text-decoration: none; color: #fff; } /* press feedback everywhere — especially the only cue a phone gets mid-tap */ .tile:active { transform: translateY(0) scale(.965); transition-duration: .1s; } /* Always fills the tile exactly — an aspect-ratio here fought the grid on spanning tiles and left dead space under the artwork. */ .tile-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .tile-glow { position: absolute; inset: 0; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.34), transparent 42%), radial-gradient(circle at 82% 88%, rgba(0,0,0,.16), transparent 46%); } .tile-emoji { font-size: clamp(3.4rem, 9vw, 4.6rem); line-height: 1; z-index: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.3)); transition: transform .25s ease; } .tile-featured .tile-emoji { font-size: clamp(5rem, 13vw, 7.5rem); } .tile:hover .tile-emoji { transform: scale(1.12) rotate(-4deg); } /* Persistent name strip (issues 2 + 7): every tile wears its name at rest on every device — hover-only names left desktop tiles anonymous, and several covers are near-identical. */ .tile-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 12px 10px; background: linear-gradient(180deg, transparent, rgba(30, 18, 46, .85)); display: flex; justify-content: center; pointer-events: none; } .tile-title { font-weight: 800; font-size: 1rem; color: #fff; text-align: center; /* Wrap to two lines rather than truncating. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.18; text-shadow: 0 1px 4px rgba(0,0,0,.55); } .tile-featured .tile-title { font-size: 1.2rem; } /* Touch devices: names stay visible, and every tile wears a small ▶ chip in the bottom-right corner so "tap = play" is obvious without hover (hover-only cues are invisible here). Names shift left to make room. */ @media (hover: none) { .tile-overlay { padding: 20px 40px 9px 10px; justify-content: flex-start; } .tile-overlay .tile-title { text-align: left; } .tile::after { content: "\25B6\FE0E"; /* ▶ forced to text style, never emoji */ position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding-left: 2px; background: linear-gradient(180deg, var(--coral-hi), var(--coral)); color: #fff; font-size: .62rem; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px rgba(0, 0, 0, .3); } .tile-hero::after { display: none; } /* the hero has its own Play pill */ } /* ---------- Game-of-the-day hero: fairground marquee billboard ---------- */ .tile-hero { grid-column: span 3; grid-row: span 2; aspect-ratio: auto; border: 9px solid var(--plum); outline: 3px dotted var(--gold); /* bulb-dot marquee border */ outline-offset: -7px; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); } @media (hover: hover) and (pointer: fine) { .tile-hero:hover { transform: translateY(-4px) scale(1.008); } } .tile-preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: transparent; } .tile-hero.has-preview .tile-preview { opacity: 1; } /* Hover previews on ordinary tiles: rendered at 2x and scaled down so the game is legible inside a small card. */ /* The demo's own top HUD band (score bars, timers, buttons) read as broken chrome inside a small card, so the frame is drawn 15% taller and shifted up: the HUD is cropped away above the tile's edge while the playfield fills it. Slight transparency keeps the painted art glowing faintly underneath. */ .tile:not(.tile-hero) .tile-preview { width: 200%; height: 230%; transform: scale(.5) translateY(-13%); transform-origin: 0 0; } .tile.has-live .tile-preview { opacity: 1; } .tile:not(.tile-hero).has-live .tile-overlay { padding-top: 40px; background: linear-gradient(180deg, transparent, rgba(30, 18, 46, .62) 34%, rgba(30, 18, 46, .96)); } /* Live previews play AT REST on every device — owner requirement (phones are most of the traffic and have no hover). The HUD crop above plus the stronger has-live scrim keep the tile reading as motion, not micro-chrome. */ .tile:not(.tile-hero).has-live .tile-preview { opacity: .92; } /* Issue 1: fade the hero demo out toward the overlay zone (its own buttons lived exactly under the Play pill) and soften its top chrome, so the billboard text never collides with live game UI. */ .tile-hero .tile-preview { /* Billboard treatment: the demo's own top HUD band (title bar, score chips, timers) is cropped above the frame, and the playfield fades to nothing well before the kicker/title/CTA zone — no game UI ever shares ground with the billboard text. */ height: 116%; transform: translateY(-12%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), #000 12%, #000 26%, rgba(0, 0, 0, .06) 44%, transparent 54%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), #000 12%, #000 26%, rgba(0, 0, 0, .06) 44%, transparent 54%); } .tile-hero.has-preview .tile-hero-overlay { background: linear-gradient(180deg, transparent, rgba(26, 15, 41, .88) 16%, rgba(26, 15, 41, .98) 38%, #190F27 80%); } .tile-hero .tile-emoji { font-size: clamp(6rem, 16vw, 9rem); } /* The bottom ~44% of the hero is reserved for the overlay under a solid-to-strong scrim, so title and Play pill sit on their own ground. */ .tile-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 84px 24px 22px; min-height: 44%; background: linear-gradient(180deg, transparent, rgba(30, 18, 46, .55) 28%, rgba(26, 15, 41, .92) 58%, rgba(26, 15, 41, .98)); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px; } .tile-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 800; color: #2A1F14; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); padding: 5px 14px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 8px rgba(0, 0, 0, .35); } .tile-hero .tile-title { font-size: clamp(1.7rem, 3.8vw, 2.4rem); white-space: normal; text-align: left; letter-spacing: -.015em; line-height: 1.08; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); } .btn-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, var(--coral-hi), var(--coral)); color: #fff; font-weight: 800; font-size: 1.1rem; padding: 12px 32px; min-height: 48px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 0 var(--coral-deep), 0 12px 26px rgba(214, 68, 37, .45); transition: transform .18s var(--ease-spring), box-shadow .18s ease; margin-top: 8px; } .tile-hero:hover .btn-play { transform: scale(1.05); } a.btn-play:hover { transform: translateY(-2px) scale(1.03); text-decoration: none; color: #fff; } .btn-play:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 var(--coral-deep), 0 6px 14px rgba(214, 68, 37, .35); } /* POPULAR / NEW badge — little prize rosette */ .tile-badge { position: absolute; top: 10px; left: 10px; z-index: 3; background: linear-gradient(180deg, var(--coral-hi), var(--coral)); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .06em; padding: 5px 13px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 2.5px #fff, 0 0 0 5px var(--gold), 0 4px 10px rgba(0, 0, 0, .3); } .tile-badge-new { background: linear-gradient(180deg, var(--green-hi), var(--green)); } /* Tile art fallback gradient. Per-game gradients are data, not style: they live in includes/art.php (TILE_GRADS) and arrive as an inline background on .tile-art, so this stylesheet stays game-agnostic. */ .tile .tile-art { background: linear-gradient(135deg, #F0663F, #B93A7D); } /* Collection rows: one horizontal strip that scrolls sideways (all screens) */ .game-grid.game-grid-row { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; scroll-snap-type: x proximity; } .game-grid-row::-webkit-scrollbar { display: none; } .game-grid-row .tile { flex: 0 0 150px; aspect-ratio: 1 / 1; scroll-snap-align: start; } /* ---------- Full-bleed section bands (the "no repetitive design" layer) ------ .band stretches its background edge-to-edge while its content stays aligned with the page column. Each band has its own personality. */ .band { margin: 30px calc(50% - 50vw) 0; padding: 6px calc(50vw - 50%) 30px; } .band .section-head { margin-top: 22px; } /* New Games — a film strip: deep plum band with sprocket-hole dots and a soft spotlight falling from the top edge */ .band-new { background-color: var(--plum); background-image: radial-gradient(circle 4px at 16px 50%, var(--bg) 97%, transparent), radial-gradient(circle 4px at 16px 50%, var(--bg) 97%, transparent), radial-gradient(900px 300px at 50% -80px, rgba(245, 166, 35, .22), transparent 70%), linear-gradient(180deg, #46367A, var(--plum) 55%, #332757); background-size: 32px 12px, 32px 12px, auto, auto; background-position: 0 10px, 0 calc(100% - 22px), 0 0, 0 0; background-repeat: repeat-x, repeat-x, no-repeat, no-repeat; padding-top: 26px; padding-bottom: 48px; } .band-new .section-head h2 { color: #FFF3E0; } .band-new .section-head h2::after { background: linear-gradient(90deg, var(--gold-hi), var(--gold)); } .band-new .tile { box-shadow: 0 2px 0 rgba(255, 255, 255, .25) inset, 0 8px 22px rgba(0, 0, 0, .45); } /* Trending — bold sunny banner: warm gradient with faint sun rays */ .band-trend { background: repeating-linear-gradient(-48deg, rgba(255, 255, 255, .17) 0 26px, transparent 26px 64px), linear-gradient(180deg, #FFE9CE, #FFD6A6); border-top: 3px solid #F3C98A; border-bottom: 3px solid #F3C98A; padding-top: 12px; padding-bottom: 34px; } .band-trend .section-head h2 { font-size: clamp(1.7rem, 4vw, 2.15rem); color: #7A2E12; } .band-trend .section-head h2::after { background: linear-gradient(90deg, #7A2E12, var(--coral-hi)); } /* Collections — tilted ticket-stub row labels on plain cream */ .band-collection { margin-top: 6px; padding-top: 0; padding-bottom: 8px; } .band-collection .section-head h2 { display: inline-block; background: linear-gradient(180deg, #FFFFFF, var(--surface-warm)); border: 2px dashed #E4B478; border-radius: var(--radius-sm); padding: 7px 18px; font-size: 1.25rem; box-shadow: var(--shadow); transform: rotate(-1.2deg); } .band-collection .section-head h2::after { display: none; } /* Category rows — alternating soft tints with a gentle top light */ .band-cat { padding-top: 4px; padding-bottom: 34px; } .band-tint-a { background: linear-gradient(180deg, #FEF4E4, #FCEDD3); } /* butter */ .band-tint-b { background: linear-gradient(180deg, #EEF8F2, #E3F3EA); } /* mint */ .band-tint-c { background: linear-gradient(180deg, #FDEFE8, #FCE5DA); } /* blush */ .band-cat .section-head h2 { font-size: 1.55rem; } /* All Games — calm clean closing gallery on white */ .band-all { background: linear-gradient(180deg, #FFFDF8, var(--surface) 120px); border-top: 3px solid var(--line); padding-top: 14px; padding-bottom: 42px; } .band-all .section-head h2 { font-size: 1.7rem; } .band-all .tile { box-shadow: var(--shadow); } /* Continue / Favorites — personal shelf */ .band-mine { margin-top: 14px; padding-top: 0; padding-bottom: 4px; } /* ---------- Tile artwork (SVG thumbnails) ---------- */ .tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .tile:hover .tile-img { transform: scale(1.3); } /* The artwork is drawn with breathing room around the subject; zooming it in a touch crops that margin so the picture fills the tile edge to edge. */ .tile-img { transform: scale(1.18); transform-origin: 50% 50%; } .tile-hero .tile-img { transform: scale(1.02); } .tile-hero:hover .tile-img { transform: scale(1.06); } /* the sheen overlay is for emoji tiles; real artwork brings its own lighting */ .tile-art.has-art .tile-glow { display: none; } /* ---------- Pre-play splash ---------- */ .game-splash { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; transition: opacity .35s ease; } .game-splash.no-art { background: linear-gradient(135deg, #2B2144, #170F28); } .game-splash::before { content: ''; position: absolute; inset: 0; background: rgba(20, 12, 34, .64); backdrop-filter: blur(3px); } /* The self-playing preview sits under a lighter scrim than the artwork did, so the motion reads clearly; the scrim darkens toward the centre for the text. */ .splash-preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; z-index: 0; background: #14101F; filter: saturate(1.05); } /* Issue 4: a near-solid centre over the live board — white card faces and red pips were bleeding straight through the old thin scrim. */ .game-splash.has-preview::before { background: radial-gradient(ellipse at center, rgba(20, 12, 34, .88), rgba(20, 12, 34, .6) 55%, rgba(20, 12, 34, .3)); backdrop-filter: none; } .game-splash.branding .splash-preview { display: none; } .game-splash.gone { opacity: 0; pointer-events: none; } /* The title/blurb/Play block sits on its own solid panel, so it stays readable whatever the demo (or artwork) is doing behind it. */ .splash-inner { position: relative; z-index: 1; text-align: center; color: #fff; padding: 26px 30px 30px; max-width: 520px; margin: 16px; background: rgba(22, 13, 38, .78); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); } .splash-emoji { font-size: 4rem; line-height: 1; margin-bottom: 10px; } .splash-inner h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 8px; font-weight: 800; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); } .splash-inner p { margin: 0 0 22px; font-size: 1.05rem; opacity: .95; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } .splash-play { font-size: 1.35rem; padding: 18px 60px; min-height: 60px; border: 0; cursor: pointer; } .splash-play:disabled { opacity: .55; cursor: default; transform: none; } .splash-status { margin-top: 14px; font-size: 1rem; opacity: .9; } /* ---------- Branded load screen (shown while the game boots) ---------- */ .game-splash.branding::before { background: rgba(16, 10, 28, .9); backdrop-filter: blur(6px); } .brand-screen { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; } /* an author `display` beats the UA stylesheet's [hidden], so restore it explicitly */ .brand-screen[hidden], .splash-inner[hidden] { display: none; } .brand-screen-mark { filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .45)); animation: brandPop .5s cubic-bezier(.2, 1.3, .5, 1) both; } .brand-screen-word { font-family: var(--font-display); font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 800; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); animation: brandRise .45s .12s ease both; } .brand-screen-word span { color: #FFCF7E; } .brand-screen-bar { width: min(200px, 60vw); height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .22); animation: brandRise .45s .2s ease both; } .brand-screen-bar i { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), #FFD98A); animation: brandSlide 1.1s ease-in-out infinite; } /* Same living face as the page loader, so the logo behaves consistently. */ .bs-eye { transform-box: fill-box; transform-origin: center; animation: bsBlink 2.8s infinite; } .bs-eye.r { animation-delay: .06s; } .bs-smile { stroke-dasharray: 100; stroke-dashoffset: 100; animation: bsDraw 1.8s ease-in-out infinite; } @keyframes bsBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } } @keyframes bsDraw { 0% { stroke-dashoffset: 100; } 45% { stroke-dashoffset: 0; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } } @media (prefers-reduced-motion: reduce) { .bs-eye, .bs-smile { animation: none; } .bs-smile { stroke-dashoffset: 0; } } @keyframes brandPop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } } @keyframes brandRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes brandSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } @media (prefers-reduced-motion: reduce) { .brand-screen-mark, .brand-screen-word, .brand-screen-bar { animation: none; } .brand-screen-bar i { animation: none; width: 100%; } } /* ---------- Game page ---------- */ .crumbs { margin-top: 16px; font-size: .95rem; font-weight: 700; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; } .crumbs a { color: var(--coral); padding: 4px 2px; } .crumbs .crumb-current { color: var(--muted); } .game-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } .game-main { min-width: 0; } .play-next { display: none; } @media (min-width: 1100px) { .game-layout { grid-template-columns: minmax(0, 1fr) 230px; } .play-next { display: block; position: sticky; top: 92px; margin-top: 18px; } } .play-next-head { font-family: var(--font-display); color: var(--ink); font-weight: 800; font-size: 1.15rem; margin: 0 0 10px; } .play-next-item { display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: linear-gradient(180deg, #FFFFFF, var(--surface-warm)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px; margin-bottom: 10px; color: var(--ink); min-height: 56px; box-shadow: var(--shadow-soft); transition: transform .18s var(--ease-spring), box-shadow .18s ease, border-color .18s ease; } .play-next-item:hover { text-decoration: none; transform: translateX(4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); } .play-next-item:active { transform: translateX(2px) scale(.98); } .play-next-item img, .play-next-dice { grid-row: 1 / 3; width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; } .play-next-dice { display: flex; align-items: center; justify-content: center; font-size: 1.9rem; background: linear-gradient(135deg, var(--coral-hi), var(--gold)); } .play-next-title { font-weight: 800; font-size: .95rem; line-height: 1.2; } .play-next-cat { font-size: .8rem; color: var(--muted); font-weight: 700; } .game-stage-wrap { margin-top: 18px; } .game-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .game-title-row h1 { font-size: 1.85rem; margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); letter-spacing: -.015em; } .game-title-row .plays { color: var(--muted); font-size: .95rem; font-weight: 700; } /* Arcade cabinet screen: warm dark frame with marquee bulbs, dark stage inside. The gold halo + warm bloom make it read as the lit-up stage of the page. */ .game-stage { position: relative; background: #14101F; border: 9px solid var(--plum); outline: 3px dotted var(--gold); outline-offset: -7px; border-radius: var(--radius-lg); overflow: hidden; height: min(78vh, 720px); height: min(78dvh, 720px); /* dvh accounts for mobile browser chrome; vh does not */ min-height: 420px; box-shadow: var(--shadow-pop); } .game-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 2px; } .stage-bar-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .like-btn .like-heart { display: inline-block; filter: grayscale(1); opacity: .65; transition: transform .2s ease, filter .2s, opacity .2s; } .like-btn.liked { color: var(--green); } .like-btn.liked .like-heart { filter: none; opacity: 1; transform: scale(1.25); } .dislike-btn { filter: grayscale(1); opacity: .8; } .dislike-btn.disliked { filter: none; opacity: 1; color: var(--coral); } .rating-pill { align-self: center; font-size: .9rem; font-weight: 800; color: var(--ink); padding: 0 4px; } .rating-pill[hidden] { display: none; } .fav-btn .fav-star { color: #E29310; font-size: 1.1rem; line-height: 1; } .fav-btn.on { background: var(--gold-soft); border-color: var(--gold); } .stage-bar button { background: linear-gradient(180deg, #FFFFFF, var(--surface-warm)); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 10px 20px; min-height: 48px; font-size: 1rem; cursor: pointer; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-soft); transition: transform .18s var(--ease-spring), box-shadow .18s ease, background .18s ease, border-color .18s ease; } .stage-bar button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); background: #fff; border-color: var(--line-strong); } .stage-bar button:active { transform: translateY(0) scale(.96); box-shadow: var(--shadow-soft); } .game-stage:fullscreen { height: 100%; max-height: none; border-radius: 0; border: 0; outline: 0; } /* Fallback fullscreen for browsers with no Fullscreen API on ordinary elements (notably iOS Safari, where only