/* CSS scenery: three arenas, no sprite or image dependencies. */
:root { --text:#fff4ec; --muted:#c1b5d4; --line:#ffffff24; --lime:#ffd18c; --surface:#211c3ce0; --coral:#ff7891; --gold:#ffd077; background:#17132d; }
body { min-height:100dvh; --sky-top:#161633; --sky-bottom:#a05f87; --sun:#ffcbaa; --mountain:#3d355e; --front:#242442; --water:#5c4980; }
body[data-map="aurora"] { --sky-top:#061e31; --sky-bottom:#377f87; --sun:#b8ffe2; --mountain:#205361; --front:#143644; --water:#368e94; }
body[data-map="neon"] { --sky-top:#16092e; --sky-bottom:#67225e; --sun:#fa76ca; --mountain:#321b57; --front:#1b1239; --water:#82397c; }
.world { position:fixed; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(var(--sky-top),var(--sky-bottom)); }
.stars { position:absolute; inset:0; opacity:.6; background-image:radial-gradient(1px 1px at 12% 25%,white 99%,transparent),radial-gradient(2px 2px at 78% 12%,white 99%,transparent),radial-gradient(1px 1px at 56% 32%,white 99%,transparent); background-size:310px 230px; animation:twinkle 6s ease-in-out infinite alternate; }
.sun { position:absolute; width:260px; aspect-ratio:1; border-radius:50%; top:27%; left:calc(50% - 130px); background:var(--sun); box-shadow:0 0 90px 30px color-mix(in srgb,var(--sun) 25%,transparent); opacity:.7; }
.mountain { position:absolute; width:110%; left:-5%; height:58%; bottom:11%; background:var(--mountain); clip-path:polygon(0 50%,9% 31%,17% 48%,28% 10%,36% 36%,44% 23%,53% 54%,64% 5%,73% 30%,79% 20%,89% 45%,100% 16%,100% 100%,0 100%); }
.mountain.near { height:42%; bottom:0; background:var(--front); transform:scaleX(-1); }
.lake { position:absolute; inset:74% 0 0; background:linear-gradient(180deg,var(--water),#10162c); opacity:.7; clip-path:polygon(42% 0,60% 0,70% 30%,59% 44%,90% 100%,9% 100%,41% 42%,33% 31%); }
.island { position:absolute; width:27%; height:130px; top:47%; background:linear-gradient(#978caf 3%,#534766 5%,#29253f 70%); clip-path:polygon(5% 0,85% 0,100% 17%,77% 41%,64% 88%,48% 56%,33% 100%,16% 37%,0 14%); animation:float 7s ease-in-out infinite; opacity:.7; }
.island.left { left:-7%; transform:rotate(-8deg); }.island.right { right:-9%; top:37%; animation-delay:-3s; }
[data-map="aurora"] .stars { background-image:linear-gradient(115deg,transparent 15%,#63ffc855 26%,transparent 35%,#53acd055 50%,transparent 65%); background-size:100% 100%; filter:blur(20px); transform:skewY(-18deg); }
[data-map="neon"] .mountain { clip-path:polygon(0 100%,0 25%,8% 25%,8% 40%,14% 40%,14% 0,21% 0,21% 50%,32% 50%,32% 20%,40% 20%,40% 60%,64% 60%,64% 5%,71% 5%,71% 35%,82% 35%,82% 14%,90% 14%,90% 40%,100% 40%,100% 100%); background-image:repeating-linear-gradient(0deg,transparent 0 15px,#ed6cff22 16px 18px); }
[data-map="neon"] .lake { clip-path:none; background:repeating-linear-gradient(0deg,transparent 0 24px,#db64fb55 25px 26px),repeating-linear-gradient(90deg,transparent 0 70px,#db64fb55 71px 72px); transform:perspective(150px) rotateX(35deg); }
header { height:85px; max-width:none; padding:0 40px; border:0; }.brand { font-size:19px; gap:10px; }.brand small { font-size:9px; letter-spacing:3px; opacity:.55; }.brand-icon { background:#ffd08a; box-shadow:0 4px 0 #ac6845; }
main { padding:0 24px 24px; max-width:1200px; }#home { max-width:840px; margin:auto; text-align:center; animation:enter .5s ease-out; }.game-title { padding:8px 0 20px; }.game-title .eyebrow { font-size:9px; letter-spacing:4px; color:#eed9e5; }.game-title h1 { margin:10px 0 0; font-family:'Space Grotesk',sans-serif; font-style:italic; font-weight:700; font-size:clamp(58px,7vw,90px); line-height:.95; letter-spacing:-5px; color:#fff1d5; text-shadow:0 5px 0 #886387,0 10px 25px #19122f99; }.game-title h1 span { display:block; font-size:15px; letter-spacing:13px; margin:16px 0 0 13px; color:#ffcea7; }
.lobby-players { display:flex; justify-content:center; align-items:center; gap:22px; margin:8px 0 24px; }.fighter { display:flex; align-items:center; gap:12px; width:255px; text-align:left; padding:15px; border:1px solid #ffffff29; background:linear-gradient(120deg,#332940d9,#211d39b0); border-radius:14px; box-shadow:0 8px 30px #100d2822; }.fighter small,.fighter b,.fighter em { display:block; }.fighter small { font-size:8px; letter-spacing:1.5px; color:var(--muted); }.fighter b { font-size:19px; max-width:155px; overflow:hidden; text-overflow:ellipsis; margin:3px 0; }.fighter em { font-size:10px; font-style:normal; color:#dac9df; }.fighter i { margin-left:auto; color:#d2bedb; }.portrait { width:49px; height:49px; flex-shrink:0; display:grid; place-items:center; font-size:28px; border-radius:13px; color:#3a2340; box-shadow:inset 0 2px 0 #fff8,0 4px 0 #0003; }.versus { color:#ffe3bc; font-style:italic; font-size:26px; text-shadow:0 3px #533650; }
.mode-picker { display:flex; justify-content:center; gap:10px; }.mode-picker button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:162px; height:105px; background:#211c3bcc; border:1px solid #ffffff2b; border-radius:12px; font-weight:700; font-size:13px; transition:.2s; }.mode-picker button>span { font-size:27px; color:#cbb5ed; line-height:1; }.mode-picker small { color:#b9a9c9; font-size:9px; font-weight:400; }.mode-picker button[aria-pressed="true"] { background:linear-gradient(#69506a,#3f324e); border-color:#ffd7a6; box-shadow:0 0 20px #ffd09d15,inset 0 0 0 2px #ffcd9215; transform:translateY(-3px); }.mode-picker button[aria-pressed="true"]>span { color:#ffd49b; }
.launch { display:block; width:300px; max-width:100%; margin:24px auto; padding:17px 24px; background:linear-gradient(#ffdda0,#f4b563); color:#492e32; border:1px solid #ffe3b2; border-radius:12px; box-shadow:0 5px 0 #a96744,0 12px 35px #f5b65f30; font-weight:900; font-size:19px; letter-spacing:3px; transition:transform .15s,filter .15s; }.launch:hover { filter:brightness(1.1); transform:translateY(-2px); }.launch:active { transform:translateY(3px); }.launch span { margin-left:25px; font-size:14px; }.map-picker { padding-top:9px; }.map-picker>.eyebrow { font-size:9px; letter-spacing:3px; color:#ddcfe5; }.maps { display:flex; justify-content:center; gap:13px; margin-top:12px; }.maps button { position:relative; width:172px; border:1px solid #ffffff40; border-radius:10px; padding:0; overflow:hidden; background:#241e37; transition:transform .2s; }.maps button:hover { transform:translateY(-3px); }.maps button[aria-pressed="true"] { border-color:#ffe0b2; box-shadow:0 0 0 2px #ffd4a033; }.maps b { position:absolute; bottom:0; left:0; right:0; padding:18px 4px 9px; background:linear-gradient(transparent,#120e24e6); font-size:10px; font-weight:500; }.map-preview { display:block; height:82px; background:radial-gradient(circle at 60% 30%,#ffd2a7 0 14%,transparent 15%),linear-gradient(#3c365b,#cb8595); }.map-preview:after { content:''; display:block; height:100%; background:#38304f; clip-path:polygon(0 80%,20% 30%,40% 76%,70% 15%,100% 65%,100% 100%,0 100%); }.map-preview.aurora { background:radial-gradient(ellipse at 50% 0,#9aefcc,transparent 70%),#173c53; }.map-preview.aurora:after { background:#215058; }.map-preview.neon { background:radial-gradient(circle at 60% 30%,#ff8acb 0 14%,transparent 15%),#3c1754; }.map-preview.neon:after { background:#271238; clip-path:polygon(0 100%,0 50%,20% 50%,20% 20%,35% 20%,35% 65%,65% 65%,65% 10%,80% 10%,80% 40%,100% 40%,100% 100%); }
#game { animation:enter .5s ease-out; }.game-heading { margin:15px 0 10px; }.quiet { background:#211b38b8; border-color:#ffffff30; }.arena { grid-template-columns:160px minmax(0,490px) 160px; gap:25px; }.board { background:linear-gradient(140deg,#9382b6,#645a87 40%,#514971); border:2px solid #c4b2df; padding:12px; gap:8px; border-radius:19px; box-shadow:0 8px 0 #302c4d,0 11px 0 #857597,0 22px 50px #110c36a0,inset 0 2px 0 #fff6; }.cell { background:#211d38e8; box-shadow:inset 0 4px 8px #0a071bc9,0 1px 0 #ffffff40; }.column { gap:8px; }.column-marker { color:#f9e6ff; }.disc { box-shadow:inset 0 4px 2px #fff6,inset 0 -5px 0 #0003,0 0 10px #0002; }.disc.winning { animation:winPulse .85s infinite alternate; outline-color:#fff4cc; }.player-panel { margin-top:100px; background:#201b35b3; border:1px solid #ffffff1c; }.player-panel.active { border-color:#ffd3a7; background:#3b2c4ed9; box-shadow:0 0 25px #ffd3a717; }.avatar { border-radius:14px; font-size:30px; box-shadow:0 4px 0 #0003; }.player-panel h2 { overflow-wrap:anywhere; font-size:20px; }.player-status { min-height:15px; }.turn-message { margin:14px 0 16px; font-size:19px; text-shadow:0 2px 10px #0008; }.hint { margin:18px 0 8px; min-height:20px; color:#efdfef; }.rules { font-size:11px; margin-top:10px; padding:8px 12px; background:#18142e99; border-radius:8px; }.power { background:#594263; border-color:#9c78a3; }.power[aria-pressed="true"] { background:#846080; }.power:disabled { opacity:.3; }
dialog { width:500px; max-width:calc(100vw - 32px); border:1px solid #c4a4d788; border-radius:22px; background:linear-gradient(150deg,#3f3156,#201b36); color:var(--text); padding:35px; box-shadow:0 25px 100px #06031699; }dialog::backdrop { background:#100b29b0; backdrop-filter:blur(8px); }dialog[open] { animation:enter .35s ease-out; }dialog h2 { font-family:'Space Grotesk',sans-serif; font-size:30px; margin:12px 0 25px; }.close-dialog { position:absolute; right:15px; top:12px; background:none; border:0; font-size:26px; }.profile-fields { display:grid; gap:20px; }.profile-fields label { display:block; font-size:10px; letter-spacing:2px; margin-bottom:8px; }.profile-fields input { width:100%; border:1px solid #9b81ae77; background:#17132999; color:white; font:inherit; padding:12px; border-radius:8px; }.avatar-options { display:flex; gap:8px; margin-top:10px; }.avatar-options button { width:36px; height:36px; font-size:22px; background:#ffffff0c; border:1px solid #ffffff22; border-radius:8px; }.avatar-options button[aria-pressed="true"] { color:#ffcf8b; border-color:#ffcf8b; background:#f6c87b22; }.storage-note { font-size:11px; color:var(--muted); text-align:center; margin-bottom:0; }#profile-error { font-size:12px; color:#ffb3bd; }#victory { text-align:center; width:440px; }#victory .trophy { font-size:80px; color:#ffd386; text-shadow:0 0 40px #ffc97399; animation:float 3s infinite; }#victory h2 { font-size:38px; overflow-wrap:anywhere; margin:12px 0; }#result-detail { font-size:13px; color:#d9c5e6; }#confetti { position:fixed; inset:0; z-index:100; pointer-events:none; overflow:hidden; }#confetti i { position:absolute; left:var(--x); top:-20px; width:9px; height:17px; border-radius:2px; animation:confetti 3.5s var(--delay) ease-in forwards; }
@keyframes confetti { to { transform:translateY(110vh) rotate(var(--spin)); } }@keyframes float { 50% { translate:0 -12px; } }@keyframes twinkle { to { opacity:.25; } }@keyframes enter { from { opacity:0; transform:translateY(15px) scale(.98); } to { opacity:1; transform:none; } }@keyframes winPulse { to { filter:brightness(1.3); box-shadow:0 0 18px #ffe9a8; } }
@media(max-width:700px) { header { height:70px; padding:0 18px; }.brand small { display:none; }main { padding:0 14px 25px; }.game-title h1 { font-size:64px; }.game-title { padding:12px 0 20px; }.lobby-players { gap:8px; margin-bottom:22px; }.fighter { width:calc(50% - 22px); gap:8px; padding:10px 8px; }.portrait { width:33px; height:38px; font-size:22px; }.fighter b { font-size:14px; max-width:95px; }.fighter small { font-size:7px; }.fighter em { font-size:8px; }.fighter i { display:none; }.versus { font-size:18px; }.mode-picker { gap:8px; }.mode-picker button { width:31%; height:96px; font-size:11px; }.launch { width:280px; margin:21px auto; }.maps { gap:8px; }.maps button { width:32%; }.maps b { font-size:8px; }.map-preview { height:79px; }.arena { grid-template-columns:1fr 1fr; gap:12px; }.player-panel { margin:4px 0 0; }.avatar { font-size:21px; }.player-panel h2 { font-size:16px; }.board { gap:5px; padding:8px; }.column { gap:5px; }.turn-message { margin:0 0 15px; font-size:17px; }.game-heading { margin:8px 0 16px; }.sun { width:200px; left:calc(50% - 100px); top:30%; }dialog { padding:28px 22px; }.rules { margin-top:5px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; }#confetti { display:none; } }
/* Keep the board below both players through the tablet breakpoint. */
@media (min-width:681px) and (max-width:700px) {
  .board-area { grid-column:1 / -1; grid-row:2; }
}