:root { color-scheme:dark; --black:#000; --white:#f1f1f1; --muted:#777; --line:#242424; }
* { box-sizing:border-box; }
html,body { min-width:320px; min-height:100%; margin:0; background:var(--black); color:var(--white); }
body { display:flex; min-height:100svh; flex-direction:column; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,a { color:inherit; font:inherit; }
button { cursor:pointer; }
a { text-decoration:none; }
.arena-header,footer { display:flex; width:min(calc(100% - 48px),1240px); margin:auto; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.arena-header { padding:26px 0; }
.arena-header>a { font-size:1.1rem; font-weight:750; letter-spacing:-.06em; }
.arena-header>span,footer { color:var(--muted); font-size:.65rem; letter-spacing:.13em; }
.arena-header button { border:0; background:transparent; color:var(--muted); font-size:.65rem; letter-spacing:.12em; }
.arena-header b { display:inline-grid; width:21px; height:21px; margin-left:7px; place-items:center; border:1px solid #555; border-radius:50%; color:var(--white); font-size:.65rem; }
main { width:min(calc(100% - 48px),900px); margin:auto; padding:80px 0 100px; }
.eyebrow { margin:0 0 25px; color:var(--muted); font-size:.65rem; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(3rem,8vw,7rem); font-weight:650; letter-spacing:-.08em; line-height:.87; }
h1 em { color:#888; font-style:normal; }
.prompt { margin:26px 0 60px; color:#909090; font-size:.95rem; }
.duel { display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; gap:18px; }
.choice { position:relative; display:flex; min-height:340px; padding:28px; flex-direction:column; align-items:flex-start; justify-content:flex-end; overflow:hidden; border:1px solid #333; background:#050505; text-align:left; transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s ease; }
.choice:hover,.choice:focus-visible { transform:translateY(-8px); border-color:#aaa; }
.choice-index { position:absolute; top:18px; right:20px; color:#777; font-size:.7rem; letter-spacing:.1em; }
.choice strong { position:relative; z-index:1; font-size:1.55rem; font-weight:600; letter-spacing:-.06em; line-height:.9; }
.choice small { position:relative; z-index:1; margin-top:12px; color:#888; font-size:.7rem; }
.shape { position:absolute; inset:18% 15% 25%; display:block; border:1px solid #777; opacity:.65; }
.shape-a { transform:rotate(-27deg) skewX(-13deg); border-radius:50%; box-shadow:18px 18px 0 -1px #111, 18px 18px 0 0 #555; }
.shape-b { transform:rotate(34deg); border-color:#aaa; box-shadow:inset 0 0 0 24px #090909, inset 0 0 0 25px #555; }
.versus { color:#444; font-size:.6rem; letter-spacing:.14em; text-align:center; }
.result { display:flex; margin-top:22px; padding:18px 20px; align-items:center; gap:18px; border:1px solid #333; }
.result span { color:#777; font-size:.62rem; letter-spacing:.12em; }.result strong { font-size:1.2rem; }.result p { margin:0 0 0 auto; color:#999; font-size:.8rem; }
.meta { display:flex; margin-top:22px; justify-content:space-between; color:#666; font-size:.7rem; }
footer { width:min(calc(100% - 48px),1240px); padding:22px 0 28px; border-top:1px solid var(--line); border-bottom:0; }
@media(max-width:600px) { .arena-header,footer,main { width:calc(100% - 32px); } main { padding:55px 0 70px; } .duel { grid-template-columns:1fr; gap:12px; }.versus { display:none; }.choice { min-height:240px; }.result { align-items:flex-start; flex-direction:column; gap:8px; }.result p { margin:0; }.meta { flex-direction:column; gap:8px; } }