@font-face { font-family: 'Bungee'; src: url(../fonts/bungee-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(../fonts/barlow-condensed-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --night: #0b1842;
  --deep: #060c24;
  --panel: rgba(6, 12, 36, 0.86);
  --amber: #ffc23d;
  --aurora: #46f08f;
  --red: #ff4d5e;
  --ice: #e6efff;
  --mist: #9cb2db;
  --steel: #24325a;
  --display: 'Bungee', 'Arial Black', sans-serif;
  --ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--deep); color: var(--ice); font-family: var(--ui); font-weight: 500; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#game {
  position: fixed; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  touch-action: none; cursor: crosshair; display: block;
}

/* --- yläpalkki --- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: calc(8px + var(--safe-t)) 12px 8px;
  background: linear-gradient(180deg, rgba(4, 8, 24, 0.85), rgba(4, 8, 24, 0));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.back { color: var(--mist); text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.back:hover, .back:focus-visible { color: var(--amber); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 0.02em; color: var(--ice); text-shadow: 2px 2px 0 #1d3c8f; }
.modes { display: flex; gap: 2px; background: rgba(36, 50, 90, 0.55); padding: 3px; border-radius: 4px; }
.modes button, .hills button {
  border: 0; background: transparent; padding: 5px 10px; border-radius: 3px;
  font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mist);
}
.modes button[aria-pressed='true'], .hills button[aria-pressed='true'] { background: var(--amber); color: var(--deep); }
.modes button:hover, .hills button:hover { color: var(--ice); }
.modes button[aria-pressed='true']:hover, .hills button[aria-pressed='true']:hover { color: var(--deep); }
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; order: 4; }
.back { order: 0; } .brand { order: 1; } .modes { order: 2; } .hills { order: 3; }
.hills { display: flex; gap: 2px; background: rgba(36, 50, 90, 0.55); padding: 3px; border-radius: 4px; }
.hills button { font-variant-numeric: tabular-nums; padding: 5px 8px; }
.hills.locked button:not([aria-pressed='true']) { opacity: 0.35; pointer-events: none; }
.ico {
  width: 34px; height: 34px; border: 0; border-radius: 4px; background: rgba(36, 50, 90, 0.55);
  display: grid; place-items: center; padding: 0;
}
.ico svg { width: 20px; height: 20px; fill: none; stroke: var(--ice); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico:hover svg { stroke: var(--amber); }
.ico.txt { font-weight: 700; font-size: 14px; letter-spacing: 0.05em; }
.ico .snd-off { display: none; }
.ico.muted .snd-on { display: none; }
.ico.muted .snd-off { display: inline; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* --- HUD --- */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.hud-left { position: absolute; left: 12px; top: calc(62px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hud-right { position: absolute; right: 12px; top: calc(62px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.chip {
  background: var(--panel); border-left: 4px solid var(--amber); padding: 4px 10px 4px 8px;
  font-size: 16px; display: flex; gap: 8px; align-items: baseline; text-transform: uppercase; letter-spacing: 0.03em;
}
.chip b { font-weight: 700; }
.chip span { color: var(--mist); font-variant-numeric: tabular-nums; }
.chip.info { border-left-color: var(--aurora); font-weight: 700; max-width: 62vw; }
.chip.info em { font-style: normal; color: var(--amber); }
.wind { background: var(--panel); padding: 4px 10px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-variant-numeric: tabular-nums; }
.wind svg { width: 34px; height: 17px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s; }
.wind.head svg { stroke: var(--aurora); transform: scaleX(-1); }
.wind.tail svg { stroke: var(--red); }
.wind b { font-weight: 700; font-size: 19px; }
.wind small { color: var(--mist); text-transform: uppercase; }
.speed { background: var(--panel); padding: 2px 10px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.speed b { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--amber); min-width: 2.6ch; text-align: right; }
.speed small { color: var(--mist); font-size: 14px; }

.gauge { position: absolute; left: 12px; bottom: calc(14px + var(--safe-b)); width: 150px; background: var(--panel); padding: 6px 8px 2px; }
.gauge svg { width: 100%; display: block; overflow: visible; }
.g-track { fill: none; stroke: #24325a; stroke-width: 9; }
.g-zone { fill: none; stroke: var(--aurora); stroke-width: 9; }
.g-needle { stroke: var(--amber); stroke-width: 4; stroke-linecap: round; }
.g-needle.off { stroke: var(--red); }
.g-hub { fill: var(--ice); }

.hint {
  position: absolute; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%);
  background: var(--panel); padding: 7px 16px; font-size: 19px; font-weight: 700; letter-spacing: 0.02em;
  text-align: center; white-space: nowrap; border-bottom: 3px solid var(--amber); max-width: calc(100vw - 24px);
  white-space: normal;
}
.hint:empty { display: none; }
.hint small { display: block; font-weight: 500; font-size: 14px; color: var(--mist); text-transform: uppercase; letter-spacing: 0.08em; }
.hint.pulse { animation: pulse 0.9s ease-in-out infinite alternate; }
@keyframes pulse { from { border-bottom-color: var(--amber); } to { border-bottom-color: var(--aurora); } }

.pop { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); text-align: center; opacity: 0; }
.pop b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 7vw, 64px); line-height: 1; color: var(--amber); text-shadow: 3px 3px 0 #1d3c8f, 0 0 24px rgba(255, 194, 61, 0.35); white-space: nowrap; }
.pop span { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 20px; background: var(--panel); padding: 2px 10px; letter-spacing: 0.04em; }
.pop.show { animation: popin 1.6s ease-out forwards; }
.pop.good b { color: var(--aurora); }
.pop.bad b { color: var(--red); }
.pop.ok b { color: var(--ice); }
.pop.stay { animation: popstay 0.4s ease-out forwards; }
@keyframes popin { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%); } }
@keyframes popstay { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* --- TV-tulostaulu --- */
.board {
  position: fixed; z-index: 6; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%);
  width: min(620px, calc(100vw - 20px)); max-height: calc(100vh - 90px - var(--safe-t)); overflow: auto;
  font-variant-numeric: tabular-nums; animation: boardin 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  scrollbar-width: thin;
}
@keyframes boardin { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.b-head { display: flex; align-items: stretch; }
.b-tag { background: var(--amber); color: var(--deep); font-family: var(--display); font-size: 18px; padding: 4px 14px 2px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.b-title { background: #1d3c8f; color: var(--ice); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 22px 3px 14px; margin-left: -10px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-body { background: var(--panel); border-top: 3px solid var(--amber); }
.b-row { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 12px; animation: rowin 0.35s backwards; }
.b-row:nth-child(2) { animation-delay: 0.06s; } .b-row:nth-child(3) { animation-delay: 0.12s; } .b-row:nth-child(4) { animation-delay: 0.18s; }
@keyframes rowin { from { opacity: 0; transform: translateX(-16px); } }
.b-main { background: linear-gradient(90deg, rgba(255, 194, 61, 0.16), transparent 70%); }
.b-rank { font-family: var(--display); font-size: 22px; color: var(--deep); background: var(--ice); text-align: center; line-height: 30px; height: 30px; }
.b-main .b-rank { background: var(--amber); }
.b-name { font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-name small { color: var(--mist); font-size: 15px; margin-left: 6px; }
.b-dist { font-weight: 700; font-size: 22px; }
.b-total { font-family: var(--display); font-size: 26px; color: var(--amber); min-width: 4.2ch; text-align: right; }
.b-break { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 4px 12px 8px 60px; color: var(--mist); font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; }
.b-break b { color: var(--ice); font-weight: 700; margin-left: 4px; }
.b-judges { display: flex; gap: 4px; padding: 0 12px 8px 60px; flex-wrap: wrap; align-items: center; }
.b-judges .lbl { color: var(--mist); font-size: 14px; text-transform: uppercase; margin-right: 4px; }
.jd { background: #16244c; padding: 2px 6px; font-weight: 700; font-size: 17px; display: flex; flex-direction: column; align-items: center; min-width: 42px; line-height: 1.05; }
.jd small { font-size: 11px; color: var(--mist); font-weight: 500; letter-spacing: 0.06em; }
.jd.drop { opacity: 0.45; text-decoration: line-through; }
.b-grades { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 12px 10px 60px; font-size: 16px; }
.grade { display: inline-flex; align-items: center; gap: 6px; }
.grade i { width: 12px; height: 12px; display: inline-block; background: var(--red); }
.grade i.g2 { background: var(--aurora); } .grade i.g1 { background: var(--amber); }
.grade span { color: var(--mist); text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; }
.b-banner { margin: 0 12px 10px; padding: 6px 12px; background: var(--aurora); color: var(--deep); font-family: var(--display); font-size: 17px; text-align: center; }
.b-banner.red { background: var(--red); color: var(--ice); }
.b-banner.amber { background: var(--amber); }
.b-table { padding: 2px 0 6px; border-top: 1px solid #24325a; }
.b-table .b-row { padding: 3px 12px; grid-template-columns: 30px 1fr auto auto; }
.b-table .b-rank { font-size: 15px; line-height: 22px; height: 22px; background: #24325a; color: var(--ice); }
.b-table .b-name { font-size: 17px; }
.b-table .b-dist { font-size: 16px; font-weight: 500; color: var(--mist); }
.b-table .b-total { font-size: 18px; color: var(--ice); }
.b-table .me { background: rgba(255, 194, 61, 0.18); }
.b-table .me .b-total { color: var(--amber); }
.b-table .medal1 .b-rank { background: #ffc23d; color: var(--deep); }
.b-table .medal2 .b-rank { background: #c9d6f2; color: var(--deep); }
.b-table .medal3 .b-rank { background: #d98a4e; color: var(--deep); }
.b-sub { padding: 6px 12px 2px; color: var(--mist); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.b-actions { display: flex; gap: 8px; padding: 10px 12px 12px; flex-wrap: wrap; background: var(--panel); }

.btn {
  border: 0; background: #24325a; color: var(--ice); padding: 9px 16px; font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: 0.05em; border-radius: 3px; display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { background: #2f4170; }
.btn.primary { background: var(--amber); color: var(--deep); }
.btn.primary:hover { background: #ffd36b; }
.btn kbd { font-family: var(--ui); font-size: 12px; opacity: 0.7; border: 1px solid currentColor; padding: 0 4px; border-radius: 2px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* --- modaalit --- */
.modal { position: fixed; inset: 0; z-index: 8; background: rgba(4, 8, 24, 0.6); display: grid; place-items: center; padding: 16px; }
.panel { background: var(--deep); border-top: 4px solid var(--amber); width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 18px; box-shadow: 8px 8px 0 #1d3c8f; }
.panel h2 { font-family: var(--display); font-weight: 400; margin: 0 0 10px; font-size: 24px; color: var(--amber); }
.panel h3 { margin: 6px 0; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mist); }
.panel p { font-size: 17px; margin: 0 0 12px; }
.help { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.45; }
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; margin-bottom: 8px; }
.tabs button { border: 0; background: #16244c; padding: 6px 12px; font-weight: 700; font-size: 15px; color: var(--mist); }
.tabs button[aria-pressed='true'] { background: var(--amber); color: var(--deep); }
.reclist { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.reclist li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; padding: 5px 4px; border-bottom: 1px solid #16244c; font-size: 17px; align-items: baseline; }
.reclist li .r { color: var(--mist); }
.reclist li .p { font-weight: 700; color: var(--amber); }
.reclist li .w { color: var(--mist); font-size: 14px; }
.reclist .empty { display: block; color: var(--mist); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--mist); text-transform: uppercase; letter-spacing: 0.05em; }
.field input, input.link { font: inherit; font-size: 18px; padding: 8px 10px; background: #16244c; border: 2px solid #24325a; color: var(--ice); border-radius: 3px; text-transform: none; letter-spacing: 0; -webkit-user-select: text; user-select: text; width: 100%; }
input.link { margin-top: 10px; font-size: 14px; color: var(--mist); }
.field input:focus { border-color: var(--amber); outline: none; }

.toast { position: fixed; z-index: 9; left: 50%; top: calc(70px + var(--safe-t)); transform: translateX(-50%); background: var(--aurora); color: var(--deep); padding: 6px 14px; font-weight: 700; font-size: 17px; }
.embedlink { position: fixed; z-index: 4; right: 8px; bottom: 8px; color: var(--ice); background: var(--panel); padding: 3px 8px; font-weight: 700; font-size: 14px; text-decoration: none; letter-spacing: 0.04em; }
.embedlink:hover { color: var(--amber); }
.noscript { position: fixed; inset: 40% 0 auto; text-align: center; font-size: 20px; }

body.embed .top { display: none; }
body.embed .hud-left, body.embed .hud-right { top: 10px; }
body.paused #game { filter: saturate(0.5) brightness(0.7); }

@media (max-width: 720px) {
  .top { gap: 6px 8px; padding: calc(6px + var(--safe-t)) 8px 6px; }
  .brand b { font-size: 16px; }
  .brand img { width: 24px; height: 24px; }
  .modes { order: 5; flex: 1 1 auto; }
  .modes button { flex: 1; padding: 5px 4px; font-size: 14px; }
  .tools { gap: 4px; order: 3; }
  .hills { order: 6; }
  .hills button { padding: 5px 6px; font-size: 14px; }
  .ico { width: 32px; height: 32px; }
  .hud-left, .hud-right { top: calc(92px + var(--safe-t)); }
  .chip, .wind { font-size: 14px; }
  .speed b { font-size: 20px; }
  .gauge { width: 118px; }
  .hint { font-size: 16px; bottom: calc(104px + var(--safe-b)); }
  .gauge { bottom: calc(10px + var(--safe-b)); }
  .b-row { grid-template-columns: 30px 1fr auto auto; gap: 8px; padding: 6px 8px; }
  .b-break, .b-judges, .b-grades { padding-left: 8px; }
  .b-name { font-size: 18px; }
  .b-total { font-size: 22px; }
  .jd { min-width: 36px; font-size: 15px; }
}
@media (max-width: 720px) and (max-height: 500px) {
  .hud-left, .hud-right { top: calc(48px + var(--safe-t)); }
}
@media (prefers-reduced-motion: reduce) {
  .pop.show, .board, .b-row { animation-duration: 0.01s !important; }
}