:root { --ink:#16100c; --sun:#ffd400; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:#f5c16e; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.intro-page { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 50% 0%,#fff9d9 0,transparent 36rem),linear-gradient(180deg,#fff3c4 0%,#f7bd62 100%); }
.site-header { position:relative; z-index:3; display:grid; justify-items:center; padding:clamp(1.25rem,3vw,2.4rem) 1rem; text-align:center; }
h1 { margin:0; font-size:clamp(2rem,6.2vw,5.7rem); font-weight:1000; letter-spacing:-.075em; line-height:.88; text-transform:uppercase; text-shadow:.045em .045em 0 var(--sun),.08em .08em 0 var(--ink); }
h1>span:first-child,.domain { color:var(--sun); -webkit-text-stroke:.025em var(--ink); text-shadow:.05em .05em 0 var(--ink); }
.domain { font-size:.42em; letter-spacing:-.045em; }
.site-tagline { margin:1rem 0 0; padding:.42rem 1.1rem .36rem; border:3px solid var(--ink); background:var(--sun); font-size:clamp(.75rem,1.45vw,1.18rem); font-weight:1000; letter-spacing:.18em; line-height:1; box-shadow:5px 5px 0 var(--ink); }
.race-scene { position:relative; width:100%; height:min(72vh,780px); min-height:430px; overflow:hidden; border-block:5px solid var(--ink); background:#45aef4; isolation:isolate; }
.desert-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; }
.road-layer { position:absolute; z-index:2; right:0; bottom:0; left:0; height:18%; overflow:hidden; border-top:5px solid #f4d187; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 34%),repeating-linear-gradient(103deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px),#343638; box-shadow:inset 0 .8rem 1.1rem rgba(19,16,13,.35),0 -.25rem 0 #17120f; }
.road-center-line { position:absolute; top:53%; right:0; left:0; height:6px; background:repeating-linear-gradient(90deg,#f5c21e 0 64px,transparent 64px 105px); }
.cyclist { position:absolute; z-index:4; left:37.5%; bottom:8.3%; translate:-50% 0; width:clamp(240px,27vw,470px); height:auto; user-select:none; filter:drop-shadow(0 .55rem .28rem rgba(24,13,8,.27)); }
.cyclist.is-pedaling { animation:rider-bob 720ms ease-in-out infinite; }
@keyframes rider-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.race-die { position:absolute; z-index:7; right:clamp(1rem,2.4vw,2.25rem); bottom:clamp(1rem,2.4vw,2.25rem); width:clamp(68px,7vw,96px); aspect-ratio:1; padding:0; cursor:pointer; border:4px solid var(--ink); border-radius:22%; background:linear-gradient(145deg,#fffef7 8%,#f8e9c8 76%,#dfbc79 100%); box-shadow:0 .55rem 0 #9f4d1e,0 .72rem 1rem rgba(37,17,7,.35),inset .28rem .28rem .4rem rgba(255,255,255,.85),inset -.28rem -.28rem .45rem rgba(134,78,32,.2); transform:rotate(-4deg); transition:transform 150ms ease,box-shadow 150ms ease; }
.race-die:hover { transform:rotate(2deg) translateY(-3px); }
.race-die.is-rolling { animation:dice-shake 210ms linear infinite; cursor:wait; }
@keyframes dice-shake { 0% { transform:rotate(-8deg); } 33% { transform:rotate(7deg) translate(-3px,-4px); } 66% { transform:rotate(-2deg) translate(3px,-1px); } 100% { transform:rotate(-8deg); } }
.race-die:focus-visible { outline:5px solid var(--sun); outline-offset:5px; }
.die-grid { position:absolute; inset:15%; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:7%; }
.die-slot { display:grid; place-items:center; }
.die-slot.has-pip::before { width:72%; aspect-ratio:1; content:""; border:2px solid #000; border-radius:50%; background:#1b120d; }
.race-entry { display:grid; place-items:center; padding:clamp(1.4rem,4vw,2.8rem) 1rem; }
.enter-race-button { display:inline-block; padding:.9rem 1.8rem .78rem; border:4px solid var(--ink); background:var(--sun); color:var(--ink); font-size:clamp(1rem,2.2vw,1.5rem); font-weight:1000; letter-spacing:.12em; line-height:1; text-decoration:none; box-shadow:7px 7px 0 var(--ink); transition:transform 140ms ease,box-shadow 140ms ease; }
.enter-race-button:hover,.enter-race-button:focus-visible { transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--ink); }
.enter-race-button:active { transform:translate(5px,5px); box-shadow:2px 2px 0 var(--ink); }
.enter-race-button:focus-visible { outline:4px solid #fff; outline-offset:5px; }
.scene-vignette { position:absolute; z-index:5; inset:0; pointer-events:none; box-shadow:inset 0 0 4rem rgba(31,15,8,.2); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:640px) { .race-scene { height:56vh; min-height:360px; } .cyclist { left:42%; width:clamp(220px,62vw,330px); } }