:root { --ink:#17211f; --navy:#102a56; --paper:#c8793f; --line:#8f542f; --mint:#b9ddca; --coral:#7dff38; --blue:#ff3fa4; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:'Space Grotesk',sans-serif; }
body:before { content:''; position:fixed; inset:0; opacity:.22; pointer-events:none; background-image:radial-gradient(#898e83 0.55px,transparent .55px); background-size:7px 7px; }
.shell { max-width:1100px; min-height:100vh; margin:auto; padding:28px 54px 26px; display:flex; flex-direction:column; position:relative; }
.topbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:20px; font:500 11px 'DM Mono',monospace; letter-spacing:.13em; }
.brand { display:flex; gap:10px; align-items:center; } .brand-mark { font-size:22px; line-height:10px; color:var(--coral); } .round-label { color:var(--navy); font-size:10px; } .live-dot { display:inline-block; width:7px;height:7px;border-radius:50%;background:var(--coral); margin-right:8px; }
.intro { padding:60px 0 43px; } .eyebrow,.card-label { font:500 11px 'DM Mono',monospace; letter-spacing:.16em; color:var(--navy); margin:0 0 16px; } h1 { font-size:clamp(54px,8vw,88px); line-height:.95; letter-spacing:-.075em; margin:0; font-weight:600; } h1 span { color:var(--coral); } .subtitle { margin:18px 0 0; color:var(--navy); font-size:17px; }
.game-layout { display:grid; grid-template-columns:220px 1fr; gap:68px; align-items:start; flex:1; } .score-card { border:1px solid var(--line); padding:21px 20px 17px; background:rgba(255,255,255,.14); } .card-label { margin-bottom:17px; font-size:10px; }
.score-row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ccd0c7; padding:14px 0 13px; font:500 11px 'DM Mono',monospace; letter-spacing:.04em; color:var(--navy); } .score-row div { display:flex; align-items:center; gap:9px; } .score-row strong { font:500 22px 'Space Grotesk'; color:var(--navy); } .score-row.muted { color:var(--navy); } .player-symbol { width:20px; display:inline-block; text-align:center; font:400 28px 'Space Grotesk'; line-height:15px; } .x-symbol { color:var(--coral); } .o-symbol { color:var(--blue); } .dash-symbol { color:var(--navy); font-size:20px; }
.text-button,.new-round { background:none; border:0; cursor:pointer; font:500 10px 'DM Mono',monospace; letter-spacing:.1em; color:var(--navy); padding:16px 0 0; } .text-button span,.new-round span { color:var(--coral); font-size:16px; vertical-align:-2px; margin-left:8px; }
.board-area { max-width:530px; width:100%; margin:auto; } .turn-indicator { display:flex; align-items:center; gap:12px; font:500 12px 'DM Mono',monospace; letter-spacing:.1em; margin-bottom:19px; } .turn-icon { font:400 30px 'Space Grotesk'; line-height:20px; }
.board { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--ink); background:var(--ink); gap:1px; } .cell { aspect-ratio:1; border:0; background:var(--paper); cursor:pointer; font:400 clamp(60px,11vw,106px) 'Space Grotesk'; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s; } .cell:hover:not(:disabled) { background:#e9e3d8; } .cell:disabled { cursor:default; } .cell.x { color:var(--coral); } .cell.o { color:var(--blue); } .cell.win { background:var(--mint); transform:scale(.96); z-index:1; }
.new-round { display:block; margin:21px 0 0 auto; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:5px; } footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:17px; margin-top:45px; color:#89918b; font:500 9px 'DM Mono',monospace; letter-spacing:.1em; } .game-over { position:fixed; inset:0; z-index:5; display:grid; place-items:center; background:rgba(23,33,31,.72); cursor:pointer; } .game-over[hidden] { display:none; } .game-over-card { max-width:min(680px,90vw); padding:clamp(28px,6vw,70px); text-align:center; background:var(--paper); border:4px solid var(--ink); box-shadow:14px 14px 0 var(--ink); cursor:default; } .game-over-card h2 { margin:0; font-size:clamp(54px,11vw,120px); line-height:.9; letter-spacing:-.08em; } .game-over-card p:not(.eyebrow) { margin:22px 0 30px; font-size:clamp(22px,4vw,42px); font-weight:700; color:var(--coral); } .game-over-card small { font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }
@media(max-width:700px) { .shell { padding:20px 22px; } .intro { padding:44px 0 36px; } .game-layout { grid-template-columns:1fr; gap:35px; } .score-card { order:2; } .board-area { order:1; } footer { margin-top:35px; } }

/* Retro arcade cabinet treatment */
:root { --arcade-black:#090b16; --arcade-purple:#241446; --arcade-yellow:#ffe65c; --arcade-cyan:#32f4ff; --arcade-pink:#ff3fa4; --arcade-navy:#a9d7ff; }
body { background:radial-gradient(circle at 50% 18%,#30205b 0,#100d24 42%,#05060c 100%); color:#f4f1ff; font-family:'DM Mono',monospace; }
body:before { opacity:.16; background-image:radial-gradient(#fff 0.6px,transparent .6px); background-size:5px 5px; }
.shell { max-width:1000px; padding:38px 54px 30px; }
.shell:before { content:''; position:absolute; z-index:-1; inset:18px 12px 0; border:12px solid #151827; border-radius:28px 28px 8px 8px; background:linear-gradient(135deg,#343957,#111426 38%,#090a12); box-shadow:0 0 0 4px #05060c,0 0 45px rgba(50,244,255,.18),18px 20px 0 rgba(0,0,0,.5); }
.topbar { border-bottom:3px solid var(--arcade-cyan); padding:14px 18px 18px; text-shadow:0 0 9px var(--arcade-cyan); }
.brand { color:var(--arcade-yellow); font-weight:700; letter-spacing:.2em; } .brand-mark { color:var(--arcade-pink); text-shadow:0 0 10px var(--arcade-pink); } .round-label,.eyebrow,.card-label { color:var(--arcade-navy); }
.intro { padding:42px 18px 30px; text-align:center; } h1 { color:var(--arcade-yellow); font-family:'Space Grotesk',sans-serif; text-transform:uppercase; text-shadow:4px 4px 0 #a82d9a,0 0 14px #ffe65c; } h1 span { color:var(--arcade-cyan); } .subtitle { color:#d9d0ff; }
.game-layout { grid-template-columns:200px 1fr; gap:46px; padding:28px 30px 35px; border:5px solid #070810; border-radius:12px 12px 32px 32px; background:linear-gradient(160deg,#21143b,#100d20); box-shadow:inset 0 0 0 3px #4a356b, inset 0 -18px 0 #0a0b13,0 8px 0 #05060b; }
.score-card { border:3px solid var(--arcade-cyan); border-radius:6px; background:#0b1022; box-shadow:0 0 15px rgba(50,244,255,.35),inset 0 0 20px rgba(50,244,255,.08); } .score-row { border-top-color:#293b68; color:var(--arcade-navy); } .score-row strong { color:var(--arcade-yellow); } .text-button,.new-round { color:var(--arcade-yellow); }
.board-area { background:#05060c; padding:22px; border:8px solid #171b2d; border-radius:18px; box-shadow:inset 0 0 0 3px #39415d,inset 0 0 35px #000; }
.turn-indicator { color:var(--arcade-yellow); text-shadow:0 0 8px var(--arcade-yellow); } .board { border:4px solid #111729; box-shadow:0 0 0 3px #070810,0 0 25px rgba(50,244,255,.3); } .cell { background:#101935; color:#fff; } .cell:hover:not(:disabled) { background:#182653; } .cell.win { background:#263d70; }
.cell.x { color:#7dff38; text-shadow:0 0 14px #7dff38; } .cell.o { color:var(--arcade-pink); text-shadow:0 0 14px var(--arcade-pink); }
.new-round { border-bottom-color:var(--arcade-yellow); } footer { border-top-color:#35446c; color:#8197c5; }
.game-over { background:rgba(3,4,12,.88); } .game-over-card { background:#171238; border-color:var(--arcade-yellow); box-shadow:0 0 0 5px #ff3fa4,0 0 35px var(--arcade-yellow); } .game-over-card h2 { color:var(--arcade-yellow); text-shadow:4px 4px 0 #ff3fa4,0 0 15px var(--arcade-yellow); } .game-over-card p:not(.eyebrow) { color:var(--arcade-cyan); text-shadow:0 0 10px var(--arcade-cyan); }
@media(max-width:700px) { .shell { padding:24px 28px; } .shell:before { inset:12px 5px 0; } .game-layout { padding:20px 15px 28px; } }

/* Boot screen and illuminated arcade marquee */
.shell > *:not(.arcade-home):not(.game-on-sign) { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .55s ease; }
.shell.started > *:not(.arcade-home):not(.game-on-sign) { opacity:1; visibility:visible; pointer-events:auto; }
.arcade-home { position:absolute; z-index:4; inset:75px 70px 45px; display:grid; place-items:center; background:linear-gradient(145deg,#141936,#060812); border:8px solid #242c48; border-radius:14px 14px 38px 38px; box-shadow:inset 0 0 0 3px #090b17,inset 0 0 40px #000; transition:opacity .45s ease,visibility .45s ease; }
.home-monitor { width:min(700px,90%); padding:clamp(38px,8vw,85px) 24px; text-align:center; background:#081126; border:8px solid #1e2b4e; border-radius:20px; box-shadow:inset 0 0 0 3px #050711, inset 0 0 35px #000, 0 0 30px rgba(50,244,255,.3); overflow:hidden; }
.home-monitor:after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.14; background:repeating-linear-gradient(0deg,transparent 0 4px,#8eeaff 5px 6px); }
.home-kicker { color:var(--arcade-cyan); font:500 11px 'DM Mono',monospace; letter-spacing:.18em; }
.home-monitor h1 { margin:24px 0; font-size:clamp(48px,9vw,100px); }
.home-monitor h1 span { color:var(--arcade-pink); }
.home-prompt { color:var(--arcade-yellow); font-size:clamp(16px,3vw,25px); letter-spacing:.14em; animation:blink 1s steps(2,end) infinite; }
.coin-button { position:relative; z-index:1; margin-top:28px; padding:16px 24px; color:#10101b; background:var(--arcade-yellow); border:4px solid #fff2a0; box-shadow:0 0 18px var(--arcade-yellow),4px 4px 0 var(--arcade-pink); cursor:pointer; font:700 13px 'DM Mono',monospace; letter-spacing:.12em; }
.coin-button:hover { transform:translate(-2px,-2px); box-shadow:0 0 28px var(--arcade-yellow),6px 6px 0 var(--arcade-pink); }
.coin-button span { color:var(--arcade-pink); margin-left:10px; }
.home-controls { position:absolute; bottom:20px; color:var(--arcade-navy); font:500 10px 'DM Mono',monospace; letter-spacing:.16em; }
.game-on-sign { position:absolute; z-index:6; top:28px; left:50%; transform:translate(-50%,-30px) scale(.7); opacity:0; padding:10px 25px; color:#150b25; background:var(--arcade-yellow); border:4px solid var(--arcade-pink); box-shadow:0 0 22px var(--arcade-yellow),0 0 35px var(--arcade-pink); font:700 clamp(20px,4vw,34px) 'DM Mono',monospace; letter-spacing:.12em; pointer-events:none; }
.game-on-sign.show { animation:gameOn 1.8s steps(2,end) forwards; }
.shell.started .arcade-home { opacity:0; visibility:hidden; pointer-events:none; }
@keyframes blink { 50% { opacity:.25; } }
@keyframes gameOn { 0%,100% { opacity:0; transform:translate(-50%,-30px) scale(.7); } 15%,70% { opacity:1; transform:translate(-50%,0) scale(1); } 30%,50% { opacity:.2; } }
@media(max-width:700px) { .arcade-home { inset:58px 35px 30px; } .game-on-sign { top:15px; } }

/* Keep the cabinet and game together as one continuous electronic display */
.shell { overflow:hidden; }
.shell.started:after { content:''; position:absolute; z-index:-1; inset:35px 35px 25px; border:3px solid #263e6d; border-radius:18px; background:radial-gradient(ellipse at center,#111f43 0,#080d1d 72%); box-shadow:inset 0 0 45px #02030a,0 0 25px rgba(50,244,255,.22); pointer-events:none; animation:screenWake .7s ease-out; }
.shell.started > *:not(.arcade-home):not(.game-on-sign) { animation:screenReveal .65s ease-out both; }
.shell.started .topbar { animation-delay:.04s; }
.shell.started .intro { animation-delay:.1s; }
.shell.started .game-layout { animation-delay:.16s; }
.shell.started footer { animation-delay:.22s; }
.topbar,.intro,.game-layout,footer { position:relative; z-index:1; }
.topbar { border-bottom-color:#2c5b91; }
.intro { padding-top:34px; padding-bottom:22px; }
.game-layout { border:0; border-radius:0; padding:18px 30px 25px; background:transparent; box-shadow:none; }
.board-area { padding:14px; border:3px solid #263e6d; border-radius:10px; box-shadow:inset 0 0 0 2px #080c18,inset 0 0 25px #000,0 0 15px rgba(50,244,255,.18); }
.round-result { min-height:0; height:0; overflow:hidden; text-align:center; color:var(--arcade-yellow); font:700 16px 'DM Mono',monospace; letter-spacing:.08em; text-shadow:0 0 10px var(--arcade-yellow); opacity:0; transition:opacity .2s,height .2s; }
.round-result.show { height:24px; opacity:1; }
.score-card { box-shadow:0 0 12px rgba(50,244,255,.25),inset 0 0 16px rgba(50,244,255,.08); }
.board { animation:boardPulse 2.8s ease-in-out infinite; }
.cell { animation:cellBoot .45s ease-out backwards; }
.cell:nth-child(2n) { animation-delay:.06s; } .cell:nth-child(3n) { animation-delay:.12s; }
.cell:hover:not(:disabled) { transform:scale(.96); box-shadow:inset 0 0 22px rgba(50,244,255,.4); }
.turn-indicator { animation:neonFlicker 3.5s steps(2,end) infinite; }
.coin-button:active { transform:translate(2px,2px); box-shadow:0 0 10px var(--arcade-yellow),1px 1px 0 var(--arcade-pink); }
@keyframes screenWake { 0% { opacity:0; transform:scaleY(.02); filter:brightness(4); } 35% { opacity:1; transform:scaleY(1); } 100% { filter:brightness(1); } }
@keyframes screenReveal { 0% { opacity:0; transform:translateY(8px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes boardPulse { 50% { box-shadow:0 0 0 3px #070810,0 0 34px rgba(50,244,255,.45); } }
@keyframes cellBoot { 0% { opacity:0; transform:scale(.7); } 100% { opacity:1; transform:scale(1); } }
@keyframes neonFlicker { 0%,92%,100% { opacity:1; } 94% { opacity:.35; } 96% { opacity:.9; } }

/* Centered game layout with a single smooth entrance */
:root { --coral:#32f4ff; }
.shell.started > *:not(.arcade-home):not(.game-on-sign) { animation:screenReveal .7s ease-out both; }
.shell.started .topbar,.shell.started .intro,.shell.started .game-layout,.shell.started footer { animation-delay:0s; }
.game-layout { display:flex; flex-direction:column; align-items:center; gap:24px; padding:18px 30px 24px; }
.board-area { order:1; width:min(620px,100%); margin:0 auto; }
.score-card { order:2; width:min(760px,100%); display:flex; align-items:center; gap:24px; padding:15px 22px; }
.score-card .card-label { margin:0; white-space:nowrap; }
.score-row { flex:1; border-top:0; border-left:1px solid #293b68; padding:8px 18px; }
.score-card .text-button { margin-left:auto; padding:0; white-space:nowrap; }
.cell.x { color:#32f4ff; text-shadow:0 0 14px #32f4ff,0 0 28px #32f4ff; }
.cell { animation:cellBoot .55s ease-out both; }
.cell:nth-child(2n),.cell:nth-child(3n) { animation-delay:0s; }
.board { animation:boardPulse 3.5s ease-in-out infinite; }
@media(max-width:700px) { .game-layout { padding:12px 12px 22px; } .score-card { flex-wrap:wrap; gap:8px; } .score-card .card-label { width:100%; } .score-row { min-width:45%; padding:8px 6px; } .score-card .text-button { margin-left:0; } }

/* Vintage player marks, mode menu, and dice challenge */
.cell,.player-symbol,.turn-icon { font-family:Georgia,'Times New Roman',serif; font-weight:900; }
.cell.x { font-style:italic; } .cell.o { font-style:normal; }
.mode-select { position:absolute; z-index:5; inset:75px 70px 45px; display:grid; place-items:center; background:linear-gradient(145deg,#141936,#060812); border:8px solid #242c48; border-radius:14px 14px 38px 38px; }
.mode-select[hidden],.difficulty[hidden] { display:none; }
.mode-monitor { display:flex; flex-direction:column; align-items:center; gap:14px; padding:44px 28px; }
.mode-button,.roll-button { position:relative; z-index:1; min-width:210px; padding:13px 18px; color:#10101b; background:var(--arcade-cyan); border:3px solid #b9fbff; box-shadow:0 0 15px var(--arcade-cyan),4px 4px 0 var(--arcade-pink); cursor:pointer; font:700 12px 'DM Mono',monospace; letter-spacing:.1em; }
.mode-button:hover,.roll-button:hover { transform:translate(-2px,-2px); filter:brightness(1.2); }
.difficulty { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--arcade-yellow); text-align:center; }
.difficulty p { margin:8px 0 2px; font-size:11px; letter-spacing:.12em; }
.difficulty .mode-button { min-width:180px; background:var(--arcade-pink); border-color:#ffb3db; box-shadow:0 0 15px var(--arcade-pink),4px 4px 0 var(--arcade-yellow); }
.draw-sign { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(3,4,12,.9); }
.draw-sign[hidden] { display:none; }
.draw-sign.fade { opacity:0; transition:opacity .8s ease; }
.draw-card { width:min(580px,90vw); padding:38px 25px; text-align:center; background:#171238; border:4px solid var(--arcade-yellow); box-shadow:0 0 0 5px var(--arcade-pink),0 0 35px var(--arcade-cyan); }
.draw-card h2 { margin:0; color:var(--arcade-yellow); font-size:clamp(24px,5vw,44px); text-shadow:3px 3px 0 var(--arcade-pink); }
.draw-card p { color:var(--arcade-cyan); font-size:20px; letter-spacing:.1em; }
.die { width:86px; height:86px; margin:20px auto; display:grid; place-items:center; color:#161128; background:#f4f1ff; border:5px solid var(--arcade-pink); border-radius:14px; box-shadow:0 0 20px var(--arcade-pink); font:bold 46px Georgia,serif; }
.roll-button { background:var(--arcade-yellow); border-color:#fff2a0; box-shadow:0 0 15px var(--arcade-yellow),4px 4px 0 var(--arcade-cyan); }
.draw-card small { display:block; margin-top:20px; color:var(--arcade-navy); font:11px 'DM Mono',monospace; letter-spacing:.08em; }
@media(max-width:700px) { .mode-select { inset:58px 35px 30px; } }