/* Retro card/button treatments adapted from DigneZzZ games-site; notices accompany this site. */
:root {
  color-scheme: dark;
  --bg: #0c111b; --panel: #141c29; --ink: #f6f1e8; --muted: #a6b2c3;
  --line: #303a49; --mint: #b3fa84; --pink: #fa8cbf; --orange: #fbb36e;
  --font: "Cabinet Grotesk", "Trebuchet MS", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 35px; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, input { touch-action: manipulation; }
button:disabled, [aria-disabled="true"] { cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { line-height: 1.04; letter-spacing: -.04em; }
h2 { font-size: clamp(2.65rem, 4.8vw, 4.4rem); font-weight: 700; }
h3 { font-size: 1.8rem; font-weight: 700; }
p { color: var(--muted); }
svg { display: block; max-width: 100%; }
::selection { color: var(--bg); background: var(--mint); }
main { width: 100%; max-width: 100%; overflow-x: clip; }
.container { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.section-space { padding-block: 130px; }
.eyebrow { color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .17em; margin-bottom: 26px; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -100px; background: var(--mint); color: var(--bg); padding: 14px 20px; }
.skip-link:focus { top: 12px; }
.site-header { border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.header-layout { display: flex; gap: 30px; align-items: center; justify-content: space-between; height: 100px; }
.brand { display: inline-flex; align-items: center; font-size: 27px; font-weight: 800; letter-spacing: -1.1px; white-space: nowrap; }
.brand svg { width: 34px; margin-right: 13px; color: var(--mint); fill: var(--mint); }
.brand-play { color: var(--mint); }
#main-nav { display: flex; gap: 32px; font-size: 13px; font-weight: 700; }
#main-nav a { padding-block: 12px; }
#main-nav a:hover { color: var(--mint); }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); padding: 6px 12px; }
.button { border: 1px solid var(--mint); padding: 16px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 48px; background: var(--mint); color: #14200f; border-radius: 4px; font-size: 14px; font-weight: 800; line-height: 1.4; box-shadow: 0 4px 0 #679551; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #679551; background: #c7ffa2; }
.button:active { transform: translateY(3px); box-shadow: none; }
.button span { font-size: 22px; }
.button.secondary { background: transparent; color: var(--ink); border-color: #667181; box-shadow: none; }
.button.secondary:hover { background: #ffffff0b; }
.button.compact { min-height: 42px; padding: 9px 16px; font-size: 12px; gap: 14px; }
.hero { padding-top: 72px; background: radial-gradient(ellipse at 75% 48%, #14363077, transparent 55%); }
.hero-layout { min-height: 570px; display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; gap: 35px; }
.hero-copy { z-index: 2; padding-block: 40px; min-width: 0; }
.hero-copy h1 { max-width: 72rem; font-size: clamp(3.5rem, 6.5vw, 6.6rem); line-height: .98; font-weight: 800; letter-spacing: -.065em; }
.hero-copy h1 span { color: var(--mint); }
.pixel-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--mint); box-shadow: 3px -3px 0 #b3fa8450; }
.hero-description { font-size: 17px; max-width: 425px; line-height: 1.85; margin: 32px 0 38px; }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-art { position: relative; height: 555px; display: grid; place-items: center; isolation: isolate; }
.art-orbit { position: absolute; width: 110%; aspect-ratio: 1; border: 1px solid #506b503d; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 46px, #43644a20 47px 48px); }
.cabinet { position: relative; width: 84%; max-width: 430px; transform: rotate(6deg); background: #74877d; border: 5px solid #0a0f13; border-radius: 17px 17px 5px 5px; box-shadow: 17px 19px 0 #223029, 38px 45px 65px #0008; padding: 15px; }
.cabinet-label { padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #e5eedf; background: #1b2c24; font-family: monospace; font-size: 11px; letter-spacing: .13em; border: 2px solid #0b1713; }
.cabinet-label span:last-child { color: var(--mint); }
.cabinet-screen { position: relative; background: #0e2023; border: 13px solid #344b41; border-radius: 10px; margin-top: 14px; color: var(--mint); text-align: center; overflow: hidden; }
.cabinet-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, #0002 3px 4px); }
.screen-caption { display: block; margin-top: 17px; font-family: monospace; font-size: 11px; letter-spacing: .14em; }
.screen-board { width: 100%; padding: 4px 20px 12px; }
.screen-bottom { display: block; font: 8px monospace; letter-spacing: .06em; margin-bottom: 14px; }
.cabinet-controls { height: 86px; margin-top: 10px; background: #a5b89c; border: 2px solid #334c37; display: flex; align-items: center; justify-content: space-around; }
.joystick { position: relative; width: 62px; height: 25px; border-radius: 50%; background: #27392e; box-shadow: 0 5px 0 #657b63; margin-top: 25px; }
.joystick::before { content: ""; position: absolute; width: 10px; height: 39px; background: #24302b; bottom: 13px; left: 26px; }
.joystick i { position: absolute; bottom: 42px; left: 11px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #ffc48c, #d67439 67%); box-shadow: 3px 5px 0 #4a3d24; }
.arcade-buttons { display: flex; gap: 12px; transform: rotate(-14deg); }
.arcade-buttons i { width: 31px; height: 31px; border: 3px solid #233829; border-radius: 50%; background: var(--pink); box-shadow: 0 4px 0 #344332; }
.arcade-buttons i:nth-child(2) { background: var(--orange); }
.arcade-buttons i:nth-child(3) { background: var(--mint); }
.cabinet-base { display: flex; justify-content: space-between; align-items: center; padding: 18px 8px 3px; color: #18291f; font: 9px monospace; letter-spacing: .04em; }
.cabinet-base i { height: 5px; width: 36px; background: #1b2e23; box-shadow: 0 6px 0 #1b2e23; }
.play-ticket { position: absolute; right: -4%; bottom: 10px; padding: 22px 26px; background: var(--orange); color: #231a10; transform: rotate(-12deg); border: 2px dashed #34251c; box-shadow: 8px 9px 0 #0007; }
.play-ticket span { font: 9px monospace; letter-spacing: .06em; }
.play-ticket strong { display: block; font-size: 40px; line-height: .94; letter-spacing: -.07em; margin-block: 12px; }
.pixel-spark { position: absolute; font: 50px monospace; color: var(--mint); }
.spark-one { left: 2%; top: 0; }
.spark-two { right: 2%; top: 90px; font-size: 28px; color: var(--pink); }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 62px 0 36px; color: var(--muted); font-size: 11px; }
.hero-bottom a { color: var(--ink); }
.hero-bottom a span { margin-left: 20px; }
.ticker { background: var(--mint); color: #182713; overflow: hidden; position: relative; padding-block: 21px; }
.ticker-track { width: max-content; display: flex; }
.js-ready .ticker-track { animation: ticker 45s linear infinite; }
.ticker-track > div { display: flex; gap: 45px; align-items: center; padding-right: 45px; }
.ticker-track span { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.ticker-track i { font-style: normal; font-size: 25px; line-height: 1; }
#motion-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1; background: var(--mint); color: #14200f; border: 1px solid #365329; border-radius: 3px; padding: 8px 12px; font-size: 10px; font-weight: 700; box-shadow: 0 0 20px 15px var(--mint); }
.motion-paused .ticker-track, .ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 45px; }
.section-heading .eyebrow { margin-bottom: 20px; }
.section-heading > p { font-size: 15px; line-height: 1.8; }
.outline-word { color: var(--mint); }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button { background: transparent; border: 1px solid var(--line); border-radius: 3px; padding: 9px 19px; font-size: 12px; font-weight: 700; color: var(--muted); }
.filters button.active { color: var(--ink); border-color: var(--ink); background: #ffffff0a; }
#filter-status { color: var(--muted); font-size: 12px; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 24px; align-items: stretch; }
.game-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); transition: border-color .25s, box-shadow .25s; }
.game-card:hover { border-color: #6d8d72; box-shadow: 0 9px 40px #0005; }
.poster { height: 330px; position: relative; overflow: hidden; color: #182323; isolation: isolate; }
.poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, #00000007 3px 4px); }
.poster-caption { position: absolute; top: 20px; left: 22px; font: 8px monospace; letter-spacing: .08em; }
.poster > strong { position: absolute; left: 25px; bottom: 23px; font-size: 53px; font-weight: 800; line-height: .86; letter-spacing: -.07em; }
.memory-poster { background: radial-gradient(circle at 80% 0, #e1fcca, #85cba9); }
.mini-memory { display: grid; grid-template-columns: repeat(3, 61px); gap: 7px; position: absolute; right: -20px; top: 48px; transform: rotate(18deg); transition: transform .5s; }
.mini-memory i { width: 61px; height: 71px; background: #183e36; border: 2px solid #376c57; color: #bef5c8; display: grid; place-items: center; font: 32px var(--font); box-shadow: 3px 5px 0 #3c7a60; border-radius: 4px; }
.mini-memory i:nth-child(3n+1) { background: #e3f5d4; color: #234d3b; }
.game-card:hover .mini-memory { transform: rotate(11deg) scale(1.05); }
.xo-poster { background: radial-gradient(circle at 80% 0, #ffe1ec, #eb9cba); }
.mini-xo { position: absolute; top: 58px; right: 12px; display: grid; grid-template-columns: repeat(3, 55px); gap: 4px; transform: rotate(-17deg); background: #753e5c; box-shadow: 10px 10px 0 #a55779; border: 4px solid #753e5c; transition: transform .5s; }
.mini-xo i { width: 55px; height: 55px; font: 700 38px var(--font); display: grid; place-items: center; background: #f4c2d5; color: #65304f; }
.game-card:hover .mini-xo { transform: rotate(-8deg) scale(1.05); }
.reaction-poster { background: radial-gradient(circle at 70% 20%, #ffdab4, #e99b62); }
.reaction-poster > svg { position: absolute; height: 192px; top: 39px; right: 15px; transform: rotate(11deg); transition: transform .5s; }
.game-card:hover .reaction-poster > svg { transform: rotate(2deg) scale(1.07); }
.reaction-rings { position: absolute; inset: 10px -60px 80px 20px; border-radius: 50%; background: repeating-radial-gradient(ellipse, transparent 0 24px, #794b361c 25px 26px); }
.card-content { padding: 27px; }
.card-kind { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 14px; }
.card-content h3 { font-size: 27px; margin-bottom: 16px; }
.card-content > p:not(.card-kind) { font-size: 14px; min-height: 70px; }
.card-score { display: flex; justify-content: space-between; gap: 12px; padding-block: 24px; margin-top: 10px; border-top: 1px solid var(--line); font-size: 11px; }
.card-score span { color: var(--muted); }
.card-score strong { font-weight: 500; text-align: right; color: var(--mint); }
.card-button { width: 100%; justify-content: space-between; font-size: 12px; padding: 12px 15px; background: transparent; color: var(--ink); border-color: #687482; box-shadow: none; }
.card-button:hover { color: var(--bg); }
.notice { margin-top: 24px; font-size: 14px; }
.break-section { text-align: center; border-block: 1px solid var(--line); background: radial-gradient(ellipse at 50% 65%, #25423644, transparent 65%); }
.break-section h2 { font-size: clamp(2.7rem, 5.4vw, 5rem); line-height: 1.15; }
.inline-game { display: inline-block; width: 100px; vertical-align: middle; margin-inline: 12px; transform: rotate(-8deg); }
.scrub-copy { max-width: 680px; margin: 40px auto 0; font-size: 21px; line-height: 1.8; color: #ced9d0; }
.guide-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
.guide-heading > p:not(.eyebrow) { margin-block: 28px 32px; font-size: 15px; }
.ritual-list { display: grid; gap: 24px; }
.ritual-card { position: relative; display: grid; grid-template-columns: 85px 1fr; gap: 22px; padding: 35px 30px; min-height: 295px; border: 1px solid var(--line); border-radius: 6px; background: #17251f; }
.ritual-card:nth-child(2) { background: #28202d; }
.ritual-card:nth-child(3) { background: #2b241b; }
.ritual-art { color: var(--mint); font-size: 50px; font-weight: 800; line-height: 1; letter-spacing: -.1em; }
.ritual-card:nth-child(2) .ritual-art { color: var(--pink); }
.ritual-card:nth-child(3) .ritual-art { color: var(--orange); }
.ritual-card h3 { font-size: 28px; margin-bottom: 18px; }
.ritual-card p:not(.card-kind) { font-size: 14px; }
.text-button { display: inline-flex; align-items: center; gap: 20px; border: 0; border-bottom: 1px solid #718474; background: none; font-size: 12px; font-weight: 700; margin-top: 22px; padding: 5px 0; }
.text-button:hover { color: var(--mint); }
.picks-section { border-block: 1px solid var(--line); background: #121b22; }
.pick-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.pick-controls { display: flex; gap: 10px; align-items: center; margin-top: 40px; }
.pick-controls button { height: 44px; width: 44px; background: transparent; border: 1px solid #6d7a81; border-radius: 3px; font-size: 20px; }
.pick-controls button:hover { background: var(--mint); color: var(--bg); }
#pick-count { margin-left: 18px; font-size: 12px; color: var(--muted); }
.pick-card { padding: 40px; border: 1px solid #4c6859; background: #183128; border-radius: 8px; min-height: 380px; }
#pick-art { display: inline-block; font-size: 78px; font-weight: 800; letter-spacing: -.08em; line-height: 1; color: var(--mint); margin-bottom: 30px; }
#pick-art[data-game="reaction"] { color: var(--orange); }
#pick-art[data-game="tictactoe"] { color: var(--pink); }
#pick-copy { min-height: 70px; margin-block: 20px 27px; font-size: 15px; color: #c0cfc7; }
.faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-size: 17px; line-height: 1.5; font-weight: 700; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { font-size: 25px; color: var(--mint); }
details[open] summary span { transform: rotate(45deg); }
details p { font-size: 14px; line-height: 1.85; padding: 0 35px 27px 0; }
.last-call { position: relative; background: #b3fa84; color: #162910; padding-block: 96px; overflow: hidden; }
.last-call .container { position: relative; z-index: 1; }
.last-call .eyebrow { color: #375130; }
.last-call h2 { max-width: 850px; font-size: clamp(3rem, 6vw, 6rem); margin-bottom: 40px; }
.last-call h2 span { color: #476d32; }
.last-call .button { background: #14200f; color: var(--mint); border-color: #14200f; box-shadow: 0 4px 0 #799d64; }
.giant-plus { position: absolute; top: -85px; right: -20px; font: 400px/1 monospace; color: #7bb64c55; z-index: -1; transform: rotate(-12deg); }
footer { border-top: 1px solid var(--line); }
.footer-layout { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 38px; font-size: 11px; }
.footer-layout .brand { font-size: 24px; margin-right: auto; }
.footer-layout a:not(.brand):hover { color: var(--mint); }
body.dialog-open { overflow: hidden; }
dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 32px; color: var(--ink); background: #131d29; border: 1px solid #617c64; border-radius: 10px; box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: #03070cdd; backdrop-filter: blur(9px); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; color: var(--mint); font: 11px monospace; letter-spacing: .08em; }
.icon-button { background: transparent; border: 1px solid #596675; width: 38px; height: 38px; color: var(--ink); font-size: 26px; border-radius: 3px; }
dialog h2 { font-size: clamp(1.9rem, 5vw, 2.65rem); }
#login-dialog { width: min(510px, calc(100% - 32px)); padding: 24px; background: radial-gradient(ellipse at 100% 5%, #29423266, transparent 60%), #131d29; }
#login-dialog .dialog-top { position: sticky; top: 0; z-index: 1; margin-bottom: 12px; background: #131d29; }
#login-dialog .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
.login-symbol { color: var(--mint); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.09em; margin-bottom: 8px; }
.login-symbol span { color: var(--pink); margin-left: 7px; }
#login-title { font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.05; }
#login-description { margin-block: 12px 16px; font-size: 14px; }
#login-form { display: grid; gap: 6px; }
#login-form label { font-size: 12px; font-weight: 700; color: #d5e0d9; }
#login-form input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #647a70; border-radius: 4px; color: var(--ink); background: #0e171f; font: 16px var(--font); margin-bottom: 4px; }
#login-form input:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
#login-status { min-height: 40px; margin-block: 4px 0; color: #ffc6d8; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.login-submit { width: 100%; min-height: 48px; padding-block: 9px; justify-content: space-between; }
.login-submit:disabled { opacity: .55; cursor: wait; transform: none; }
.login-back { min-height: 44px; margin-top: 8px; padding-block: 10px; font-size: 12px; }
#game-subtitle { font-size: 14px; margin-top: 16px; }
.game-meta { display: flex; justify-content: space-between; gap: 15px; margin-block: 23px; padding-block: 14px; border-block: 1px solid var(--line); font-size: 11px; }
.game-meta span { color: var(--muted); }
.game-meta strong { color: var(--mint); }
#game-stage { min-height: 220px; }
#game-status { min-height: 48px; margin-block: 20px; font-size: 13px; color: #d6dfd9; }
.game-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 13px; }
.game-actions .button { font-size: 12px; padding: 11px 17px; }
.memory-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 390px; margin-inline: auto; }
.memory-tile { aspect-ratio: 1.15; border-radius: 4px; border: 1px solid #748776; background: #273a35; color: #bfd9c5; font: 700 27px var(--font); transition: background .15s, color .15s; }
.memory-tile:hover:not([aria-disabled="true"]) { background: #3d5548; }
.memory-tile.is-open { background: var(--orange); border-color: var(--orange); color: #281e12; }
.memory-tile.is-matched { background: var(--mint); border-color: var(--mint); color: #20301a; }
.xo-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 330px; margin-inline: auto; }
.xo-cell { aspect-ratio: 1.1; border-radius: 4px; border: 1px solid #707f8e; background: #202c3c; font: 700 48px var(--font); color: var(--mint); }
.xo-cell:hover:not([aria-disabled="true"]) { background: #344331; }
.xo-cell[data-mark="O"] { color: var(--pink); }
.xo-cell.is-win { background: #3f3445; border-color: var(--pink); }
.reaction-round { font-size: 12px; text-align: center; margin-bottom: 15px; }
.reaction-pad { width: 100%; min-height: 220px; display: grid; place-items: center; border: 2px solid #667882; border-radius: 6px; padding: 25px; background: #263540; color: var(--ink); font: 700 26px/1.3 var(--font); }
.reaction-pad[data-state="waiting"] { background: #713b25; color: #ffdcc0; border-color: #e6a878; }
.reaction-pad[data-state="ready"] { background: var(--mint); color: #14270e; border-color: var(--mint); }
.reaction-pad[data-state="early"] { background: #65364e; color: #ffe5ee; border-color: #e2a2c1; }
.reaction-pad[data-state="result"] { background: #273f39; color: var(--mint); border-color: #7aba92; }
.game-result { font-size: 13px; text-align: center; padding: 16px 8px; color: var(--muted); }
@media (max-width:1100px) {
  .container { width: calc(100% - 64px); } .hero-layout { gap: 20px; }
  .hero-art { height: 490px; } .cabinet { width: 87%; padding: 10px; }
  .cabinet-label { font-size: 8px; } .play-ticket { right: -2%; bottom: 12px; padding: 16px; }
  .play-ticket strong { font-size: 33px; } .hero-copy h1 { font-size: 6.9vw; }
  .game-grid { gap: 16px; } .poster { height: 290px; }
  .card-content { padding: 22px; } .card-content h3 { font-size: 24px; }
  .mini-memory { right: -55px; } .mini-xo { right: -30px; }
  .guide-layout,.pick-layout,.faq-layout { gap: 55px; } .ritual-card { grid-template-columns: 58px 1fr; gap: 15px; padding: 28px; }
  .ritual-art { font-size: 40px; } #main-nav { gap: 22px; }
}
@media (max-width:800px) {
  .container { width: calc(100% - 40px); } .section-space { padding-block: 85px; }
  .header-layout { height: auto; min-height: 86px; flex-wrap: wrap; padding-block: 18px; gap: 15px; }
  .header-layout>.button { display: none; } .menu-toggle:not([hidden]) { display: flex; gap: 15px; align-items: center; font-size: 12px; margin-left: auto; }
  #main-nav { width: 100%; justify-content: space-between; gap: 15px; order: 3; border-top: 1px solid var(--line); padding-top: 10px; }
  .js-ready #main-nav:not(.is-open) { display: none; }
  .hero { padding-top: 35px; } .hero-layout { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { padding-block: 20px; } .hero-copy h1 { font-size: clamp(3.8rem, 11vw, 5.5rem); }
  .hero-description { margin-block: 25px 30px; max-width: 470px; font-size: 16px; }
  .hero-art { width: min(520px,100%); margin-inline: auto; height: 490px; }
  .cabinet { width: 79%; } .play-ticket { right: 0; bottom: 10px; }
  .hero-bottom { padding-block: 38px 24px; font-size: 10px; } .hero-bottom a span { margin-left: 8px; }
  .eyebrow { font-size: 10px; margin-bottom: 22px; } h2 { font-size: 43px; }
  .section-heading { flex-direction: column; align-items: start; gap: 25px; margin-bottom: 32px; }
  .library-toolbar { align-items: start; flex-direction: column; gap: 14px; }
  .game-grid { grid-template-columns: 1fr; gap: 25px; }
  .game-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .poster { height: 100%; min-height: 330px; }
  .mini-memory { right: -52px; top: 50px; } .mini-xo { right: -40px; }
  .poster>strong { font-size: 44px; left: 20px; }
  .card-content h3 { font-size: 26px; } .card-content>p:not(.card-kind) { min-height: 0; }
  .break-section h2 { font-size: 42px; } .inline-game { width: 65px; margin-inline: 5px; }
  .scrub-copy { font-size: 19px; margin-top: 28px; }
  .guide-layout,.pick-layout,.faq-layout { grid-template-columns: 1fr; gap: 42px; }
  .ritual-card { min-height: 0; padding: 28px; grid-template-columns: 65px 1fr; }
  .ritual-card h3 { font-size: 27px; }
  .pick-card { padding: 32px; } .pick-controls { margin-top: 30px; }
  .last-call { padding-block: 72px; } .last-call h2 { font-size: 52px; max-width: 550px; }
  .giant-plus { right: -75px; opacity: .4; }
  .footer-layout { flex-wrap: wrap; gap: 24px; } .footer-layout .brand { width: 50%; margin: 0; } .footer-layout>p { margin-left: auto; }
}
@media (max-width:480px) {
  .brand { font-size: 25px; } .brand svg { width: 29px; margin-right: 9px; }
  .hero-copy h1 { font-size: clamp(3.4rem, 12vw, 4.5rem); } .hero-actions { gap: 14px; }
  .hero-actions .button { font-size: 12px; padding: 14px 15px; gap: 12px; }
  .hero-art { height: 410px; } .cabinet { width: 85%; padding: 9px; border-width: 4px; }
  .cabinet-label { padding: 7px; font-size: 7px; } .cabinet-screen { border-width: 9px; }
  .screen-caption { font-size: 8px; } .screen-bottom { font-size: 6px; }
  .cabinet-controls { height: 65px; } .arcade-buttons { gap: 7px; } .arcade-buttons i { width: 25px; height: 25px; }
  .joystick { transform: scale(.8); } .play-ticket { padding: 12px; right: 0; bottom: 0; } .play-ticket strong { font-size: 29px; } .play-ticket span { font-size: 7px; }
  .art-orbit { width: 108%; } .hero-bottom>span { max-width: 140px; }
  .ticker { padding-block: 17px; } .ticker-track span { font-size: 12px; }
  .game-card { display: block; } .poster { height: 315px; min-height: 0; } .poster>strong { font-size: 56px; left: 25px; }
  .mini-memory { right: -5px; } .mini-xo { right: 17px; }
  .card-content { padding: 25px; } .card-content h3 { font-size: 29px; }
  .card-score { padding-block: 19px; margin-top: 23px; }
  .card-button { font-size: 13px; }
  .break-section h2 { font-size: 35px; } .inline-game { width: 59px; margin-inline: 0; }
  .ritual-card { grid-template-columns: 1fr; gap: 20px; } .ritual-art { font-size: 44px; }
  .pick-card { padding: 28px; } summary { font-size: 16px; }
  .last-call h2 { font-size: 47px; } .last-call h2 span { white-space: nowrap; }
  .footer-layout .brand { width: 100%; } .footer-layout>p { margin-left: 0; }
  dialog { padding: 23px; } .game-meta { font-size: 10px; } .memory-board { gap: 8px; }
  .memory-tile { font-size: 23px; } .xo-cell { font-size: 39px; }
  .game-actions .button { padding-inline: 12px; font-size: 11px; gap: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .scrub-copy span { opacity: 1 !important; }
}