/* ===== Grønn Jakke — tokens ===== */
:root{
  --green-900:#0A2E22;
  --green-800:#0B3D2E;
  --green-700:#145A38;
  --green-600:#1C6E44;
  --green-500:#268354;
  --gold-700:#8F6E17;
  --gold-600:#B9911F;
  --gold-500:#C9A227;
  --gold-300:#E4C767;
  --gold-200:#EFDB9C;
  --azalea-700:#A83655;
  --azalea-600:#C24463;
  --azalea-500:#D8546E;
  --azalea-300:#F0A6B7;
  --cream-050:#FBF8EF;
  --cream-100:#F5EFDD;
  --cream-200:#EDE3C6;
  --ink-900:#16241C;
  --ink-700:#3B4A40;
  --ink-500:#5B6C60;

  --bg:var(--cream-050);
  --surface:#FFFFFF;
  --surface-2:var(--cream-100);
  --surface-3:var(--cream-200);
  --text:var(--ink-900);
  --text-muted:var(--ink-700);
  --text-faint:var(--ink-500);
  --line:rgba(11,61,46,.15);
  --accent:var(--gold-600);
  --accent-strong:var(--gold-700);
  --accent-ink:#3B2E06;
  --brand:var(--green-800);
  --brand-strong:var(--green-900);
  --brand-ink:#FBF8EF;
  --yes:var(--green-700);
  --no:var(--azalea-600);
  --danger:var(--azalea-700);
  --shadow-sm: 0 1px 2px rgba(11,61,46,.08);
  --shadow-md: 0 10px 28px -14px rgba(11,61,46,.35);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1310;
    --surface:#101F17;
    --surface-2:#152A1F;
    --surface-3:#1B3526;
    --text:#EFEAD6;
    --text-muted:#C3CFC5;
    --text-faint:#8FA096;
    --line:rgba(228,199,103,.18);
    --accent:var(--gold-300);
    --accent-strong:var(--gold-200);
    --accent-ink:#241D02;
    --brand:var(--green-600);
    --brand-strong:var(--green-500);
    --brand-ink:#0A1310;
    --yes:#3E9E6C;
    --no:#E97C93;
    --danger:#F0899E;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 14px 32px -16px rgba(0,0,0,.65);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1310;
  --surface:#101F17;
  --surface-2:#152A1F;
  --surface-3:#1B3526;
  --text:#EFEAD6;
  --text-muted:#C3CFC5;
  --text-faint:#8FA096;
  --line:rgba(228,199,103,.18);
  --accent:var(--gold-300);
  --accent-strong:var(--gold-200);
  --accent-ink:#241D02;
  --brand:var(--green-600);
  --brand-strong:var(--green-500);
  --brand-ink:#0A1310;
  --yes:#3E9E6C;
  --no:#E97C93;
  --danger:#F0899E;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 14px 32px -16px rgba(0,0,0,.65);
  color-scheme: dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; overscroll-behavior-y:none; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; }
h1,h2,h3,h4{ font-family:"Fraunces", Georgia, serif; margin:0; text-wrap:balance; }
p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
::selection{ background:var(--gold-300); color:var(--accent-ink); }
.mono{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; font-variant-numeric: tabular-nums; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===== phone shell ===== */
.stage{
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:32px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
    var(--bg);
}
.phone{
  width:100%;
  max-width:428px;
  min-height:calc(100vh - 64px);
  background:var(--bg);
  border-radius:40px;
  box-shadow:var(--shadow-md), 0 0 0 10px var(--surface), 0 0 0 11px var(--line);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}
@media (max-width:480px){
  .stage{ padding:0; }
  .phone{
    max-width:none; border-radius:0; box-shadow:none;
    height:100vh; height:100dvh;
  }
}

/* ===== header ===== */
.masthead{
  background:
    linear-gradient(180deg, var(--brand-strong), var(--brand) 70%);
  color:var(--brand-ink);
  padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 20px;
  position:relative;
  border-bottom:3px solid var(--gold-500);
}
.masthead::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold-300), transparent);
}
.masthead-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.masthead-title{
  font-size:26px; font-weight:700; letter-spacing:.02em; line-height:1.05;
  display:flex; align-items:center; gap:9px;
}
.masthead-title .flag{ width:22px; height:22px; flex:none; color:var(--gold-300); }
.masthead-sub{
  margin-top:4px; font-size:12.5px; color:color-mix(in srgb, var(--brand-ink) 72%, transparent);
  letter-spacing:.03em;
}
.icon-btn{
  background:color-mix(in srgb, var(--brand-ink) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand-ink) 22%, transparent);
  color:var(--brand-ink);
  width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:18px; height:18px; }
.btn svg{ width:15px; height:15px; flex:none; }
.btn.sm svg{ width:13px; height:13px; }
.masthead-meta{
  margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;
}
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--brand-ink) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--brand-ink) 22%, transparent);
}
.pill.gold{ background:color-mix(in srgb, var(--gold-300) 88%, transparent); color:var(--accent-ink); border-color:transparent; }
.pill.azalea{ background:color-mix(in srgb, var(--azalea-300) 85%, transparent); color:#4A1424; border-color:transparent; }
.pill.muted{ opacity:.75; }

/* ===== main content ===== */
main#app{
  flex:1;
  min-height:0;
  padding:16px 16px 20px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.section-title{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); margin: 22px 2px 10px;
}
.section-title:first-child{ margin-top:2px; }
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:16px;
}
.card + .card{ margin-top:12px; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.row{ display:flex; align-items:center; gap:10px; }
.row.between{ justify-content:space-between; }
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.small{ font-size:12.5px; }
.divider{ height:1px; background:var(--line); border:none; margin:12px 0; }

/* ===== buttons / forms ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:12px; border:1px solid transparent;
  padding:10px 16px; font-weight:700; font-size:14px; letter-spacing:.01em;
  background:var(--surface-2); color:var(--text); border-color:var(--line);
  transition:transform .08s ease;
}
.btn:active{ transform:scale(.97); }
.btn.block{ width:100%; }
.btn.primary{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.btn.gold{ background:var(--gold-500); color:var(--accent-ink); border-color:var(--gold-500); }
.btn.yes{ background:color-mix(in srgb, var(--yes) 14%, var(--surface)); color:var(--yes); border-color:color-mix(in srgb, var(--yes) 35%, var(--line)); }
.btn.no{ background:color-mix(in srgb, var(--no) 14%, var(--surface)); color:var(--no); border-color:color-mix(in srgb, var(--no) 35%, var(--line)); }
.btn.ghost{ background:transparent; border-color:var(--line); }
.btn.danger{ background:transparent; color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn.sm{ padding:7px 12px; font-size:12.5px; border-radius:10px; }
.btn:disabled{ opacity:.45; pointer-events:none; }
label.field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-muted); }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], select, textarea{
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 11px; font-size:15px; color:var(--text); width:100%;
}
textarea{ resize:vertical; min-height:64px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .tab-btn:focus-visible{
  outline:2px solid var(--gold-500); outline-offset:2px;
}
.field-row{ display:flex; gap:10px; }
.field-row > *{ flex:1; min-width:0; }
.hint{ font-size:11.5px; color:var(--text-faint); }
.err{ font-size:12px; color:var(--danger); font-weight:600; }

/* ===== leaderboard ===== */
.podium-lead{
  display:flex; align-items:center; gap:12px; padding:4px 2px 14px;
}
.rank-badge{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",serif; font-weight:700; font-size:13.5px;
  background:var(--surface-2); color:var(--text-muted); border:1px solid var(--line);
}
.rank-badge.r1{ background:linear-gradient(160deg,#F4DE8C,#C9A227); color:#3B2E06; border-color:transparent; }
.rank-badge.r2{ background:linear-gradient(160deg,#E7E9EA,#B9C0C4); color:#2A2E30; border-color:transparent; }
.rank-badge.r3{ background:linear-gradient(160deg,#D9A672,#B5763A); color:#3A2308; border-color:transparent; }
.lb-row{ display:flex; align-items:center; gap:12px; padding:11px 4px; }
.lb-row + .lb-row{ border-top:1px solid var(--line); }
.lb-name{ font-family:"Fraunces",serif; font-weight:600; font-size:16px; flex:1; min-width:0; }
.lb-name small{ display:block; font-family:"Public Sans",sans-serif; font-weight:500; color:var(--text-faint); font-size:11.5px; }
.lb-pts{ font-size:19px; font-weight:600; }
.avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#fff;
}
.badge-c{
  display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700;
  color:var(--gold-700); letter-spacing:.03em; text-transform:uppercase;
}
:root:not([data-theme="light"]) .badge-c, :root[data-theme="dark"] .badge-c{ color:var(--gold-300); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge-c{ color:var(--gold-300); } }

/* ceremony banner */
.ceremony{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--brand-strong), var(--brand) 55%, var(--green-600));
  color:var(--brand-ink); border-radius:var(--radius-lg);
  padding:22px 18px; text-align:center; margin-bottom:14px;
  border:1px solid var(--gold-500);
}
.ceremony .jacket{ display:flex; justify-content:center; margin-bottom:2px; }
.ceremony .jacket svg{ width:38px; height:38px; }
.ceremony h3{ font-size:21px; margin-top:8px; }
.ceremony p{ margin-top:4px; font-size:13px; color:color-mix(in srgb, var(--brand-ink) 78%, transparent); }
.confetti{ position:absolute; inset:0; pointer-events:none; }
.confetti i{
  position:absolute; top:-10%; width:6px; height:12px; background:var(--gold-300);
  opacity:.85; animation:fall 3.6s linear infinite;
}
@keyframes fall{ to{ transform:translateY(140%) rotate(200deg); opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .confetti{ display:none; } }

.activity-list{ display:flex; flex-direction:column; }
.activity-item{ display:flex; gap:10px; padding:9px 2px; align-items:flex-start; }
.activity-item + .activity-item{ border-top:1px dashed var(--line); }
.activity-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-500); margin-top:7px; flex:none; }
.activity-text{ font-size:13.5px; }
.activity-time{ font-size:11px; color:var(--text-faint); white-space:nowrap; }

/* ===== rounds ===== */
.round-card .round-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.round-name{ font-family:"Fraunces",serif; font-weight:600; font-size:17px; }
.round-meta{ margin-top:3px; font-size:12px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:8px; }
.type-pill{ background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px; font-size:11px; font-weight:700; color:var(--text-muted); }
.lock-pill{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; }
.lock-pill svg{ width:12px; height:12px; flex:none; }
.type-pill svg{ width:12px; height:12px; flex:none; vertical-align:-2px; }
.lock-pill.locked{ color:var(--gold-700); }
:root:not([data-theme="light"]) .lock-pill.locked{ color:var(--gold-300); }
.score-grid{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.score-row{ display:flex; align-items:center; gap:10px; }
.score-row .who{ flex:1; font-size:14px; display:flex; align-items:center; gap:8px; min-width:0; }
.score-row input{ width:78px; text-align:center; }
.round-actions{ display:flex; gap:8px; margin-top:14px; }

/* ===== market ===== */
.market-card .q{ font-family:"Fraunces",serif; font-size:16.5px; font-weight:600; line-height:1.3; }
.status-pill{ font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.status-pill.open{ background:color-mix(in srgb, var(--yes) 16%, var(--surface)); color:var(--yes); }
.status-pill.resolved{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--line); }
.pool-bar{ height:9px; border-radius:999px; overflow:hidden; display:flex; background:var(--surface-2); margin:10px 0 6px; }
.pool-bar .yes{ background:var(--yes); }
.pool-bar .no{ background:var(--no); }
.pool-labels{ display:flex; justify-content:space-between; font-size:11.5px; }
.pool-labels .y{ color:var(--yes); font-weight:700; }
.pool-labels .n{ color:var(--no); font-weight:700; }
.stake-form{ margin-top:12px; }
.your-position{ margin-top:10px; font-size:12.5px; padding:8px 10px; border-radius:10px; background:var(--surface-2); }
.resolve-row{ display:flex; gap:8px; margin-top:12px; }
.outcome-banner{ margin-top:10px; font-size:13px; font-weight:700; padding:9px 11px; border-radius:10px; }
.outcome-banner.y{ background:color-mix(in srgb, var(--yes) 16%, var(--surface)); color:var(--yes); }
.outcome-banner.n{ background:color-mix(in srgb, var(--no) 16%, var(--surface)); color:var(--no); }

/* ===== profile ===== */
.player-chip{
  display:flex; align-items:center; gap:11px; padding:10px 4px; border-radius:12px;
}
.player-chip + .player-chip{ border-top:1px solid var(--line); }
.balance-figure{ font-size:34px; font-weight:600; letter-spacing:-.01em; }
.you-flag{ font-size:10.5px; font-weight:700; color:var(--brand); background:color-mix(in srgb, var(--brand) 14%, var(--surface)); padding:2px 8px; border-radius:999px; }
:root:not([data-theme="light"]) .you-flag{ color:var(--gold-300); background:color-mix(in srgb, var(--gold-300) 16%, var(--surface)); }

/* ===== klubb ===== */
.next-round{ background:linear-gradient(150deg, var(--brand-strong), var(--brand) 80%); color:var(--brand-ink); border:1px solid var(--gold-500); }
.next-round .muted{ color:color-mix(in srgb, var(--brand-ink) 75%, transparent); }
.next-round .pill.gold{ flex:none; }
.schedule-row{ display:flex; align-items:center; gap:10px; padding:9px 4px; font-size:13.5px; }
.schedule-row + .schedule-row{ border-top:1px solid var(--line); }
.schedule-row.past{ opacity:.45; }
.schedule-row.next{ background:var(--surface-2); border-radius:10px; padding:9px 8px; margin:2px -4px; border-top:none; }
.schedule-row .field-row select, .schedule-row .field-row input{ font-size:13px; padding:8px; }

/* ===== tabbar ===== */
nav.tabbar{
  display:flex;
  flex:none;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);
  gap:2px;
}
.tab-btn{
  flex:1; background:transparent; border:none; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px; color:var(--text-faint);
}
.tab-btn svg{ width:22px; height:22px; }
.tab-btn span{ font-size:10.5px; font-weight:700; letter-spacing:.01em; }
.tab-btn.active{ color:var(--brand); }
:root:not([data-theme="light"]) .tab-btn.active{ color:var(--gold-300); }
.tab-btn.active svg{ filter:drop-shadow(0 0 0 currentColor); }

/* ===== toast ===== */
#toast{
  position:absolute; left:16px; right:16px; bottom:78px; z-index:50;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast-msg{
  background:var(--brand-strong); color:var(--brand-ink); border-radius:12px;
  padding:11px 14px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-md);
  animation:toast-in .22s ease-out; opacity:.98;
}
.toast-msg.error{ background:var(--danger); }
@keyframes toast-in{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:.98; } }
@media (prefers-reduced-motion: reduce){ .toast-msg{ animation:none; } }

/* ===== overlay / modal ===== */
.overlay-root:empty{ display:none; }
.scrim{
  position:absolute; inset:0; z-index:60; background:rgba(10,19,15,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.sheet{
  width:100%; max-width:428px; background:var(--surface); border-radius:22px 22px 0 0;
  padding:20px 18px calc(env(safe-area-inset-bottom,0px) + 20px);
  max-height:82vh; max-height:82dvh; overflow-y:auto; box-shadow:var(--shadow-md);
}
.sheet h3{ font-size:19px; }
.sheet .close{ position:absolute; right:14px; top:14px; }
.name-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface-2); margin:4px 6px 4px 0; font-weight:600;
}
.chip-wrap{ display:flex; flex-wrap:wrap; margin:8px 0 4px -6px; padding-left:6px;}

.empty-state{ text-align:center; padding:34px 12px; color:var(--text-faint); }
.empty-state .ico{ font-size:30px; margin-bottom:8px; }