*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
:root{
  --bg-dark:#050714;
  --card-dark:#0a0a0a;
  --card-mid:#1f1f23;
  --cell-grad-start:#0b0b0b;
  --cell-grad-end:#2a2a2d;
  --x-neon:#33ccff;
  --o-neon:#ff3ba6;
  --glass:rgba(255,255,255,0.03);
}
html,body{height:100%}
body{
  background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.04) 0, transparent 8%),
              linear-gradient(180deg,#020613 0%,#071026 50%,#05030a 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden;
}
body:after{content:'';position:fixed;inset:-20%;z-index:-4;background:conic-gradient(from 210deg at 50% 0%,transparent 0 18%,rgba(40,255,170,.24),rgba(43,170,255,.18),transparent 46% 62%,rgba(194,74,255,.2),transparent 78%);filter:blur(55px);animation:aurora 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes aurora{to{transform:rotate(12deg) scale(1.15) translateY(5%);filter:blur(75px)}}

/* skyline layer */
/* busy skyline layer (slightly blurred) */
body::before{
  content:'';position:fixed;left:0;right:0;bottom:0;height:62%;
  background:
    radial-gradient(1200px 200px at 10% 30%, rgba(52,255,138,0.06), transparent 10%),
    radial-gradient(800px 140px at 80% 20%, rgba(51,204,255,0.05), transparent 8%),
    linear-gradient(180deg,#020617 0%, #071026 40%, #020613 70%);
  z-index:-3;filter:blur(6px);opacity:0.95;transform:translateZ(0);
}

/* foreground skyline silhouettes with windows and neon signs */
.skyline{position:fixed;left:0;right:0;bottom:0;height:56vh;max-height:620px;width:100%;z-index:-2;pointer-events:none;filter:blur(2px) saturate(1.08);opacity:0.995}

/* reduce the old procedural shapes influence (if any) */
.skyline + .app{position:relative}

.app{width:560px;max-width:94vw;margin:10px auto;padding:22px;border-radius:22px;display:flex;flex-direction:column;gap:16px;position:relative}

.topbar{display:flex;flex-direction:column;gap:10px;align-items:center}.eyebrow,.dice-kicker{font-size:.64rem;letter-spacing:.28em;color:#8cebd0;font-weight:800}.topbar h1{font-size:clamp(2.5rem,9vw,4.1rem);letter-spacing:-.08em;text-transform:uppercase;font-style:italic;text-shadow:0 0 25px rgba(83,244,195,.35)}.topbar h1 span{font-size:.48em;letter-spacing:-.04em;color:#ff55ae}.catchphrase{color:#b5bdd8;font-size:.85rem;letter-spacing:.12em}
.scoreboard{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--card-dark),var(--card-mid));padding:10px 14px;border-radius:12px;box-shadow:0 6px 30px rgba(0,0,0,0.6)}
.score-item{font-weight:700;color:#fff;font-size:1rem}
.score-item span{margin-left:6px;font-weight:900}
.score-sep{opacity:0.45}

.controls{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mode-buttons{display:flex;gap:8px}
.mode{background:linear-gradient(180deg,#020203,#0a0a0d);color:#fff;padding:8px 12px;border-radius:12px;border:none;cursor:pointer;font-weight:700;box-shadow:0 8px 22px rgba(0,0,0,0.75);transition:box-shadow 180ms ease, transform 120ms ease, border-color 180ms ease}
.mode.active{box-shadow:0 10px 44px rgba(0,0,0,0.6), 0 0 18px rgba(51,204,255,0.06) inset;border:1px solid rgba(255,255,255,0.9)}
.small-controls button{background:linear-gradient(180deg,#050506,#0f0f12);color:#fff;border:none;padding:8px 10px;border-radius:10px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,0.75)}

.status{background:linear-gradient(100deg,rgba(4,21,40,.94),rgba(35,8,35,.94));padding:11px 18px;border-radius:10px;font-weight:900;color:#fff;display:inline-block;border:1px solid rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.08em}.status.shake{animation:shake .42s both}@keyframes shake{20%{transform:translateX(-5px) rotate(-2deg)}40%{transform:translateX(5px) rotate(2deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)} }

.board-wrapper{display:flex;justify-content:center}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px;width:420px;max-width:92vw;animation:boardIn .6s cubic-bezier(.2,1.4,.4,1)}.board.is-hidden{display:none}@keyframes boardIn{from{opacity:0;transform:scale(.8) rotate(-3deg)}to{opacity:1;transform:none}}
.cell{background:linear-gradient(180deg,var(--cell-grad-start),var(--cell-grad-end));aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:3.6rem;border-radius:12px;cursor:pointer;user-select:none;position:relative;box-shadow:0 8px 20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02)}
.cell::before{content:'';position:absolute;inset:0;border-radius:12px;background:var(--glass)}
.cell{transition:transform .2s ease,box-shadow .2s ease}.cell:hover{transform:translateY(-6px) rotate(1deg);box-shadow:0 14px 30px rgba(0,0,0,.8),0 0 18px rgba(84,243,198,.18)}.cell:active{transform:scale(.92)}

.mark{font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;line-height:1}
.mark.x{color:var(--x-neon);text-shadow:0 0 44px rgba(51,204,255,0.42),0 0 18px rgba(51,204,255,0.26);filter:drop-shadow(0 10px 32px rgba(51,204,255,0.22))}
.mark.o{color:var(--o-neon);text-shadow:0 0 46px rgba(255,59,166,0.42),0 0 18px rgba(255,59,166,0.28);filter:drop-shadow(0 10px 32px rgba(255,59,166,0.22))}

/* neon spill under each mark */
.cell{overflow:visible}
.cell.x::after,.cell.o::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86%;height:86%;border-radius:44%;z-index:0;opacity:0.42;pointer-events:none}
.cell.x::after{background:radial-gradient(circle at 40% 30%, rgba(51,204,255,0.66), rgba(51,204,255,0.12) 30%, transparent 55%)}
.cell.o::after{background:radial-gradient(circle at 60% 40%, rgba(255,59,166,0.66), rgba(255,59,166,0.12) 28%, transparent 55%)}
.cell .mark{position:relative;z-index:2}
.cell.winner{box-shadow:0 10px 40px rgba(0,0,0,0.6), 0 0 28px rgba(255,255,255,0.02) inset}
.mark{animation:markIn .45s cubic-bezier(.2,1.5,.4,1)}@keyframes markIn{from{opacity:0;transform:scale(2) rotate(35deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.dice-panel{width:min(420px,92vw);padding:22px;text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(5,10,28,.74);box-shadow:0 20px 60px rgba(0,0,0,.35);backdrop-filter:blur(12px)}.dice-arena{display:flex;justify-content:center;align-items:center;gap:18px;margin:16px 0}.die-card span{display:block;color:#abb4d1;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;margin-bottom:7px}.die{width:66px;height:66px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#f8ffff,#90c8d3);color:#081827;font-size:2rem;font-weight:900;box-shadow:0 8px 20px #020812;transition:transform .2s}.die.rolling{animation:dieRoll .55s ease-in-out}@keyframes dieRoll{50%{transform:rotate(180deg) scale(1.2)}}.versus{font-weight:900;font-style:italic;color:#ff55ae}.roll-button{border:0;border-radius:10px;padding:11px 18px;color:#04101a;background:#72f1c5;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;box-shadow:0 0 22px rgba(114,241,197,.28)}.roll-button:hover{transform:translateY(-2px);filter:brightness(1.1)}.dice-result{min-height:1.2em;margin-top:12px;color:#dce4ff;font-size:.82rem}.rover-law{text-align:center;color:#73809f;font-size:.62rem;letter-spacing:.16em}.rover-law span{color:#ff55ae;margin:0 7px}

@media (max-width:420px){.cell{font-size:2.4rem;border-radius:10px}}
.eyebrow{color:#59f29b;text-shadow:0 0 14px rgba(89,242,155,.5)}
.die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:12px;gap:3px}.pip{width:11px;height:11px;border-radius:50%;background:#081827;align-self:center;justify-self:center}.die[data-value="1"] .pip{grid-area:2/2}.die[data-value="2"] .pip:nth-child(1){grid-area:1/1}.die[data-value="2"] .pip:nth-child(2){grid-area:3/3}.die[data-value="3"] .pip:nth-child(1){grid-area:1/1}.die[data-value="3"] .pip:nth-child(2){grid-area:2/2}.die[data-value="3"] .pip:nth-child(3){grid-area:3/3}.die[data-value="4"] .pip:nth-child(1){grid-area:1/1}.die[data-value="4"] .pip:nth-child(2){grid-area:1/3}.die[data-value="4"] .pip:nth-child(3){grid-area:3/1}.die[data-value="4"] .pip:nth-child(4){grid-area:3/3}.die[data-value="5"] .pip:nth-child(1){grid-area:1/1}.die[data-value="5"] .pip:nth-child(2){grid-area:1/3}.die[data-value="5"] .pip:nth-child(3){grid-area:2/2}.die[data-value="5"] .pip:nth-child(4){grid-area:3/1}.die[data-value="5"] .pip:nth-child(5){grid-area:3/3}.die[data-value="6"] .pip:nth-child(1){grid-area:1/1}.die[data-value="6"] .pip:nth-child(2){grid-area:1/3}.die[data-value="6"] .pip:nth-child(3){grid-area:2/1}.die[data-value="6"] .pip:nth-child(4){grid-area:2/3}.die[data-value="6"] .pip:nth-child(5){grid-area:3/1}.die[data-value="6"] .pip:nth-child(6){grid-area:3/3}
.board-wrapper{flex-direction:column;align-items:center}.dice-panel{margin-inline:auto}.board{margin-inline:auto}
body:after{inset:-35%;background:conic-gradient(from 180deg at 35% 5%,transparent 0 13%,rgba(32,255,125,.34),rgba(80,255,185,.18),transparent 29% 42%,rgba(24,220,118,.3),transparent 56%),conic-gradient(from 35deg at 82% 35%,transparent 0 22%,rgba(54,255,142,.28),transparent 38% 63%,rgba(23,190,113,.22),transparent 78%),radial-gradient(ellipse at 50% 0%,rgba(30,255,135,.25),transparent 42%);animation:aurora 13s ease-in-out infinite alternate;filter:blur(70px)}
body:before{background:radial-gradient(circle at 7% 12%,#fff 0 1px,transparent 2px),radial-gradient(circle at 19% 27%,#fff 0 1px,transparent 2px),radial-gradient(circle at 31% 9%,#fff 0 1px,transparent 2px),radial-gradient(circle at 46% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 62% 8%,#fff 0 1px,transparent 2px),radial-gradient(circle at 77% 29%,#fff 0 1px,transparent 2px),radial-gradient(circle at 91% 13%,#fff 0 1px,transparent 2px),radial-gradient(circle at 12% 61%,#fff 0 1px,transparent 2px),radial-gradient(circle at 38% 72%,#fff 0 1px,transparent 2px),radial-gradient(circle at 71% 66%,#fff 0 1px,transparent 2px),radial-gradient(circle at 88% 78%,#fff 0 1px,transparent 2px),linear-gradient(180deg,#020617 0%,#071026 40%,#020613 70%);background-size:auto;filter:blur(1px);opacity:.95}
body:before{background:radial-gradient(circle at 4% 8%,#fff 0 1px,transparent 2px),radial-gradient(circle at 11% 31%,#fff 0 1px,transparent 2px),radial-gradient(circle at 18% 16%,#fff 0 1px,transparent 2px),radial-gradient(circle at 26% 42%,#fff 0 1px,transparent 2px),radial-gradient(circle at 34% 11%,#fff 0 1px,transparent 2px),radial-gradient(circle at 43% 28%,#fff 0 1px,transparent 2px),radial-gradient(circle at 51% 7%,#fff 0 1px,transparent 2px),radial-gradient(circle at 59% 37%,#fff 0 1px,transparent 2px),radial-gradient(circle at 67% 15%,#fff 0 1px,transparent 2px),radial-gradient(circle at 74% 48%,#fff 0 1px,transparent 2px),radial-gradient(circle at 82% 9%,#fff 0 1px,transparent 2px),radial-gradient(circle at 91% 24%,#fff 0 1px,transparent 2px),radial-gradient(circle at 96% 58%,#fff 0 1px,transparent 2px),radial-gradient(circle at 8% 78%,#fff 0 1px,transparent 2px),radial-gradient(circle at 22% 88%,#fff 0 1px,transparent 2px),radial-gradient(circle at 39% 67%,#fff 0 1px,transparent 2px),radial-gradient(circle at 56% 84%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 73%,#fff 0 1px,transparent 2px),radial-gradient(circle at 86% 89%,#fff 0 1px,transparent 2px),radial-gradient(circle at 97% 76%,#fff 0 1px,transparent 2px),linear-gradient(180deg,#020617 0%,#071026 40%,#020613 70%);background-size:auto;filter:blur(1px);opacity:.95}
.die[data-value="0"]{display:flex;align-items:center;justify-content:center;text-align:center}
.status em{font-style:normal;color:#72f1c5;font-size:.72em;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.35}}
.confetti{position:fixed;top:-15px;width:9px;height:15px;z-index:20;animation:fall 2s cubic-bezier(.2,.7,.4,1) forwards}@keyframes fall{to{top:105vh;transform:translateX(30px) rotate(720deg)}}
.victory-shake .app{animation:screenShake .8s ease both}@keyframes screenShake{15%{transform:translateX(-7px) rotate(-.6deg)}30%{transform:translateX(7px) rotate(.6deg)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-2px)}100%{transform:none}}
.mode,.small-controls button{background:rgba(9,20,38,.62);border:1px solid rgba(150,220,220,.2);box-shadow:0 8px 22px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(10px)}.mode.active{border-color:#72f1c5;box-shadow:0 0 18px rgba(114,241,197,.18),inset 0 1px rgba(255,255,255,.14)}