:root { color-scheme: dark; --ink:#172b3d; --ice:#d8eaf3; --red:#cb3048; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:#b5cbd7; color:#f5f9fc;
  font-family:"Avenir Next", "Segoe UI", sans-serif; user-select:none; }
#c { display:block; width:100vw; height:100vh; }
#vig { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 55% 42%,transparent 58%,rgba(26,46,65,.16)); }
.hud { position:fixed; pointer-events:none; text-shadow:0 1px 3px #172b3d66; font-variant-numeric:tabular-nums; }
#tl { top:24px; left:28px; font-size:12px; line-height:1.7; padding:11px 16px; background:#172b3ddb; border-left:3px solid #cb3048; border-radius:3px; }
#tl:empty { display:none; } #tl b { font-size:16px; font-weight:600; }
#tr { top:24px; right:28px; text-align:right; display:none; }
#windBox { background:#172b3ddb; border-radius:3px; padding:11px 16px; width:140px; white-space:nowrap; }
#windBox .v { display:flex; align-items:center; justify-content:flex-end; gap:8px; height:34px; line-height:34px; font-size:27px; font-weight:600; letter-spacing:-1px; }
#windBox .l { font-size:11px; line-height:16px; color:#d8eaf3; }
#windArrow { flex:0 0 14px; height:16px; background:currentColor; clip-path:polygon(0 50%,100% 0,100% 100%); }
#live { top:28px; left:50%; transform:translateX(-50%); font-size:19px; padding:10px 18px; background:#172b3ddb; border-radius:3px; display:none; }
#big { top:108px; left:28px; max-width:430px; font-size:50px; font-weight:600; letter-spacing:-2px; display:none; }
#big .box { padding:18px 22px; background:#172b3def; border-radius:4px; border-top:3px solid #cb3048; }
#big small { display:block; font-size:14px; font-weight:500; line-height:1.6; letter-spacing:0; }
#hint { bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 36px); width:max-content; font-size:13px; text-align:center; line-height:1.55; padding:9px 18px; background:#172b3de8; border-radius:4px; display:none; }
#aoa { bottom:93px; left:50%; transform:translateX(-50%); width:240px; height:6px; border-radius:3px; display:none;
  background:linear-gradient(90deg,#d77673,#d7be84 35%,#8acbb0 43% 57%,#d7be84 65%,#d77673); box-shadow:0 0 0 5px #172b3dba; }
#aoa i { position:absolute; top:-5px; width:3px; height:16px; margin-left:-1px; background:white; border-radius:2px; box-shadow:0 1px 3px #172b3d; }
#aoa span { position:absolute; top:-28px; left:-20px; right:-20px; text-align:center; font-size:12px; color:white; text-shadow:0 1px 4px #172b3d; }
#panel { position:fixed; inset:0; display:flex; align-items:center; padding:clamp(24px,6vw,90px); background:linear-gradient(90deg,#102b4266,transparent 70%); }
#panel.hidden { display:none; }
.card { background:#173047ed; border:1px solid #ffffff24; border-radius:6px; padding:30px; width:380px; max-width:100%; max-height:90vh; overflow:auto; box-shadow:0 18px 60px #10223540; }
.logo { display:block; width:150px; margin:-6px 0 22px; }
.hill-meta { display:flex; justify-content:space-between; font-size:13px; color:#c6dce8; margin-bottom:22px; }
.hill-meta .flag { display:inline-block; width:19px; height:12px; background:linear-gradient(#fff 50%,#d43850 50%); margin-right:7px; }
h1 { margin:0; font-size:55px; font-weight:600; line-height:1; letter-spacing:-2px; }
.subtitle { font-size:18px; color:#c6dce8; margin:9px 0 25px; }
p { margin:8px 0; line-height:1.6; }
.settings { padding:16px 0; border-top:1px solid #ffffff22; border-bottom:1px solid #ffffff22; }
label { display:flex; align-items:center; gap:12px; font-size:13px; margin:12px 0; }
label input { margin-left:auto; width:116px; } label span { width:24px; text-align:right; font-variant-numeric:tabular-nums; }
select { margin-left:auto; appearance:none; color:#fff; border:1px solid #7791a3; border-radius:3px; padding:5px 26px 5px 8px; font:inherit;
  background:#263e52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center; }
input[type=range] { accent-color:#b8d7e8; }
button { width:100%; background:#cb3048; color:#fff; border:1px solid #e45c70; border-radius:3px; padding:13px 18px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; margin:20px 0 6px; transition:background .15s; }
button:hover { background:#de3a52; } button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.personal { color:#aec5d4; font-size:12px; text-align:center; }
#dev { position:fixed; bottom:24px; left:28px; display:flex; align-items:center; gap:8px; font:12px ui-monospace, Menlo, monospace; padding:6px 6px 6px 12px; background:#172b3de8; border-radius:4px; }
#dev:empty { display:none; }
#dev button { width:auto; margin:0; padding:4px 10px; font-size:12px; background:#263e52; border-color:#7791a3; }
#panel .dev { width:210px; padding:22px; margin-left:16px; display:flex; flex-direction:column; gap:8px; }
/* until the game fills them in (and the dev card off localhost) */
#panel .card:empty { display:none; }
.dev:empty { display:none !important; }
.dev h2 { margin:0; font-size:15px; font-weight:600; } .dev .personal { margin:0 0 6px; text-align:left; }
.dev button { margin:0; padding:8px 10px; font-size:13px; font-weight:500; background:#263e52; border-color:#7791a3; }
.dev button:hover { background:#34506a; }
.judges { display:flex; gap:6px; margin:12px 0; font-size:18px; letter-spacing:0; }
.judges span { width:48px; text-align:center; padding:5px 0; background:#ffffff0e; border-radius:2px; }
.judges span.drop { opacity:.4; text-decoration:line-through; }
.good { color:#a5e5c7; } .bad { color:#ffaaa7; } .meh { color:#f2cc60; }
.pb { position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; margin-top:6px; padding:7px 12px; background:#172b3def; border-left:3px solid #f2cc60; border-radius:3px; font-size:13px; font-weight:500; letter-spacing:0; animation:pbIn .4s ease-out; }
.pb span { color:#f2cc60; } .pb b { margin-left:auto; font-size:18px; font-weight:600; }
.pb::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 35%,#f2cc6040 50%,transparent 65%); transform:translateX(-100%); animation:pbShine 2.8s .4s ease-in-out infinite; }
@keyframes pbIn { from { opacity:0; transform:translateY(-6px); } }
@keyframes pbShine { 55%, 100% { transform:translateX(100%); } }
@media(max-width:650px) { #panel { padding:18px; justify-content:center; } .card { padding:22px; } #panel .dev { display:none; } #tl { top:12px;left:12px; } #tr { top:12px;right:12px; } #live { top:103px; } #big { top:155px;left:12px;font-size:40px; } #hint { bottom:14px;font-size:12px; } #aoa { bottom:112px; } }
@media(prefers-reduced-motion:reduce) { button { transition:none; } .pb, .pb::after { animation:none; } }