:root{
  --bg:#000;
  --fg:#eaf6ff;
  --muted:rgba(234,246,255,.78);
  --glass:rgba(10,22,32,.58);
  --stroke:rgba(255,255,255,.16);
  --shadow:rgba(0,0,0,.45);
  --btn:rgba(255,255,255,.08);
  --btn2:rgba(255,255,255,.14);
  --primary:#ffdf3a;
  --primaryText:#0b1a22;
  --primary:#f5c400;
}

*{box-sizing:border-box}
html,body{height:100%}

@media (min-width: 900px){
  #wrap{
    border-radius:18px;
    box-shadow:0 30px 90px rgba(0,0,0,.65);
  }
}

#poster{
  position:absolute; inset:0;
  background:#000 url('Kajak-run-poster.PNG') center/cover no-repeat;
  opacity:0;
  transform:scale(1.02);
  transition:opacity .55s ease, transform .85s ease;
}
body.poster-show #poster{opacity:1;transform:scale(1)}

#c{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  opacity:0;
  transition:opacity .20s ease, filter .15s ease;
}
body.playing #c{opacity:1}
body.is-paused #c,
body.is-gameover #c{ filter:grayscale(1) brightness(.75) contrast(.95); }

#hud{
  position:absolute; left:0; right:0; top:0;
  display:flex; justify-content:space-between; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 10px 10px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}
body.playing #hud{opacity:1}

.hud-left,.hud-right{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.hud-right{padding-right:58px}

.pill{
  background:var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter: blur(8px);
  padding:8px 10px;
  border-radius:999px;
  box-shadow:0 10px 30px var(--shadow);
  font-weight:800;
  letter-spacing:.2px;
}
.pill .lbl{font-size:11px;opacity:.86;margin-right:6px;font-weight:900;letter-spacing:.6px}

/* Distance pill: label on first line, value+unit on line under */
.distPill{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:118px}
.distPill .lbl{margin-right:0;opacity:.92}
.distPill .val{display:flex;align-items:baseline;gap:6px}
.distPill .num{font-size:22px;font-weight:1000;line-height:1}
.distPill .unit{font-size:14px;font-weight:900;opacity:.92}

/* Pause button pinned top-right */
.pauseBtn{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  right:10px;
  z-index:5;
}

.pillBtn{
  pointer-events:auto;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
}

/* Screens */
.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease;
}
.screen.show{opacity:1;pointer-events:auto}

/* Lower boot/lang/name/menu so poster logo stays visible */
#boot.screen,
#lang.screen,
#name.screen{
  align-items:flex-end;
  justify-content:center;
  padding:0 20px calc(clamp(170px, 26vh, 340px) + env(safe-area-inset-bottom));
}

#menu.screen{
  align-items:flex-end;
  justify-content:center;
  padding:0;
}

/* Cards / controls */
.card{
  width:min(520px, 92vw);
  background:rgba(10,22,32,.72);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.card.center{text-align:center}
.card.wide{width:min(720px, 94vw)}

.title{font-size:20px;font-weight:950;margin:0 0 12px}
.big{font-size:22px;font-weight:950;letter-spacing:.3px}
.desc{color:var(--muted);line-height:1.55;margin:0;white-space:pre-line}

.btnrow{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}

.btn, .back, .iconBtn, .bigPlay{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background:var(--btn);
  color:rgba(255,255,255,.92);
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
}
.btn:active, .back:active, .iconBtn:active, .bigPlay:active{transform:translateY(1px)}

.btn.primary{
  background: var(--primary);
  color: var(--primaryText);
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.input{
  width:100%;
  margin:10px 0 14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.95);
  font-weight:800;
  font-size:16px;
  outline:none;
}

/* Menu bottom panel */
.menuPanel{
  width:min(680px, 100vw);
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:rgba(10,22,32,.42);
  border-top:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.menuHeader{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.menuNameRow{display:flex;align-items:center;gap:10px}
.menuName{font-weight:950;font-size:18px;line-height:1.1}
.menuLast{margin-top:4px;color:rgba(255,255,255,.72);font-weight:800}
.menuBtns{display:grid;grid-template-columns:1fr;gap:10px}

.iconBtn{
  width:38px;height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(10,22,32,.55);
}

/* How / Highscore */
#high.screen{
  align-items:flex-end;
  justify-content:center;
  padding:0 20px calc(18px + env(safe-area-inset-bottom));
}

#high .card.wide{
  display:flex;
  flex-direction:column;
  width:min(520px, 92vw);
  max-height: calc(100dvh - 170px);
}

.highList{
  margin-top:12px;
  display:grid;
  gap:8px;
}
#highList.highList{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-right:4px;
  margin-bottom:10px;
}

.rowItem{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  font-weight:850;
}
.rowItem .sub{font-weight:750;color:rgba(255,255,255,.72)}

/* Countdown */
#countdown{background:rgba(0,0,0,.35)}
.countNum{font-size:96px;font-weight:1000;letter-spacing:2px;text-shadow:0 20px 60px rgba(0,0,0,.65)}

/* Pause overlay (neutral, no accent colors) */
#pause{background:rgba(0,0,0,.40)}
.pauseCard{background:rgba(0,0,0,.35)}
.bigPlay{
  width:110px;height:110px;
  margin:10px auto 14px;
  padding:0;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:54px;
  background:rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}

/* Game over (black/white) */
#go{background:rgba(0,0,0,.55)}
.goCard{
  background:rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.18);
}
.goScore{
  font-size:54px;
  font-weight:1000;
  letter-spacing:.5px;
  margin:4px 0 8px;
}
.goTimerWrap{margin:2px 0 12px}
.goTimer{
  font-size:34px;
  font-weight:950;
  opacity:.92;
}
#go .btn.primary{
  background:rgba(255,255,255,.92);
  color:#000;
  border-color:rgba(255,255,255,.85);
}
#go .btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);
}

/* D-pad stays in DOM but hidden */
#dpad{display:none}

@media (max-width:420px){
  .pill{padding:7px 9px}
  .btn{min-width:140px}
}

.menuName{font-weight:950;font-size:18px;line-height:1.1}
.menuLast{margin-top:4px;color:rgba(255,255,255,.72);font-weight:800}

.btn{
  appearance:none;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  min-width:160px;
}

.iconBtn{
  width:52px;height:52px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,22,32,.55);
  color:rgba(255,255,255,.95);
  font-weight:950;
  font-size:22px;
  backdrop-filter: blur(8px);
}

/* ===== Force dialogs near bottom (Username / Language / Loading) ===== */
#lang.screen,
#name.screen,
#boot.screen{
  align-items:flex-end !important;
  justify-content:center !important;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom)) !important;
}

/* remove the extra lift */
#lang .card,
#name .card,
#boot .card{
  margin-bottom: 0 !important;
}

/* ===== iOS/Safari: tvinga bort native button styling ===== */
button.btn,
button.back,
button.iconBtn,
button.pillBtn{
  -webkit-appearance: none;
  appearance: none;
}

/* ===== GULA knappar: alltid svart text (även Safari) ===== */
.btn.primary{
  color: #0b1a22 !important;
  -webkit-text-fill-color: #0b1a22 !important;
}

/* Om du även har gula "pill" någonstans */
.pill.primary{
  color: #0b1a22 !important;
  -webkit-text-fill-color: #0b1a22 !important;
}

/* ===== Pause-knapp: byt emoji -> monokrom ikon, större, matchar edit-knappen ===== */
#btnPause{
  width:52px;
  height:52px;
  padding:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}

.livesVkvPill .row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.livesVkvPill .lbl {
  font-size: 9px;
  opacity: 0.86;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.livesVkvPill .val {
  font-size: 16px;
  font-weight: 800;
}

.speedPill {
  min-width: 90px;
}

body { overscroll-behavior: none; }
#wrap, #c { touch-action: none; }

/* =========================
   CORE LAYOUT (mobile first)
   ========================= */
html, body { height: 100%; }

body{
  margin: 0;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: stretch;

  background: #000;          /* mobil: bara svart bakom spelet */
  padding: 0;                /* viktigt: nollställ din gamla 50vw-padding */
}

/* spelcontainer */
#wrap{
  width: min(460px, 100vw);
  height: 100vh; /* fallback */
  position: relative;
  z-index: 2;
}

/* iOS/Safari/modern browsers: använd synlig viewport (tar hänsyn till URL-bar) */
@supports (height: 100dvh){
  #wrap{ height: 100dvh; }
}
@supports (height: 100svh){
  #wrap{ height: 100svh; } /* extra fallback för vissa Safari-versioner */
}

/* lager i spelet */
#poster, #c{
  position: absolute;
  inset: 0;
}

/* HUD ska INTE ha bottom:0 */
#hud{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
}
/* =========================
   DESKTOP BACKGROUND HALVES
   ========================= */
@media (min-width: 900px){
  body::before,
  body::after{
    content:"";
    position: fixed;
    top: 0; bottom: 0;
    width: 50vw;
background-color:#000;

    background: #000 url("vkv_kajak_run_bg.png") left top / auto 100vh no-repeat;

    pointer-events: none;
    z-index: 0;
  }

  body::before{ left: 0;  background-position: left top; }
  body::after { right: 0; background-position: right top; }
}

/* Force text color back to white (username/title etc) */
body{
  color: var(--fg);
}

#hud,
#name,
#menu,
#boot,
#lang,
.screen,
.card,
.title,
.big,
.desc{
  color: var(--fg);
}