:root{
  --navy:#0a1f44; --navy2:#13294f; --red:#d4232f; --blue:#1d4ed8;
  --bg:#f4f6fb; --card:#ffffff; --ink:#13243a; --muted:#6b7a90;
  --line:#e4e9f2; --good:#1a9e54; --gold:#e8b71d; --shadow:0 1px 3px rgba(13,30,60,.08),0 6px 18px rgba(13,30,60,.06);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* Topbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  background:var(--navy);color:#fff;padding:10px 16px;box-shadow:var(--shadow)}
.brand{font-weight:800;font-size:18px;letter-spacing:.2px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .ball{font-size:20px}
.brand-sub{font-weight:500;color:#aab8d4;font-size:12px}
.nav{display:flex;gap:4px;margin-left:6px;flex-wrap:wrap}
.nav a{padding:7px 12px;border-radius:999px;color:#d6deef;font-weight:600;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a.active{background:#fff;color:var(--navy)}
.userbox{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px}
.userbox .uname{font-weight:700}
.app{max-width:980px;margin:0 auto;padding:18px 16px 40px}
.loading{color:var(--muted);padding:40px;text-align:center}

/* Knapper */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 14px;border-radius:10px;font-weight:600}
.btn:hover{border-color:#c4ccdb}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:#0c2752}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Kort + seksjoner */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
h1{font-size:24px;margin:6px 0 14px}
h2{font-size:17px;margin:0 0 12px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 4px 10px}
.section-title h2{margin:0}
.muted{color:var(--muted)}
.pill{display:inline-block;background:#eef2fb;color:#41506b;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
.pill.live{background:#fde8e8;color:#c0202c}
.pill.ft{background:#e7f4ec;color:#157a42}
.pill.nor{background:#ffe9ea;color:var(--red)}

/* Hero (dagens kamp) */
.hero{background:linear-gradient(135deg,var(--navy),#1b3a73);color:#fff;border:none}
.hero .when{color:#bcd0f5;font-weight:600;font-size:13px;letter-spacing:.3px;text-transform:uppercase}
.hero .teams{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0;text-align:center}
.hero .team{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.hero .team .flag{font-size:46px;line-height:1}
.hero .team .nm{font-weight:800;font-size:18px}
.hero .team .hrank{color:#bcd0f5;font-size:11px;font-weight:700;margin-top:3px}
.hero .vs{font-weight:800;color:#9fb6e6;font-size:15px}
.hero .score{font-size:34px;font-weight:900}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;color:#cfe;font-size:14px;margin-top:6px}
.hero-meta .chip{background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;color:#eaf1ff;font-weight:600}
.countdown{font-variant-numeric:tabular-nums;font-weight:800}

/* Kampliste */
.matchrow{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;
  padding:10px 8px;border-bottom:1px solid var(--line)}
.matchrow:last-child{border-bottom:none}
.matchrow .time{font-size:12px;color:var(--muted);font-weight:600;line-height:1.2}
.matchrow .mt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0}
.matchrow .mt-teams{display:flex;justify-content:center;align-items:flex-start;gap:12px;min-width:0;max-width:100%}
.matchrow .mt-stage{font-size:10px;font-weight:800;color:#5b6b85;background:#eef2fb;border-radius:6px;padding:1px 8px;letter-spacing:.2px;white-space:nowrap}
.matchrow .side{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;max-width:46%}
.matchrow .side .flag{font-size:21px;line-height:1}
.matchrow .side .nm{font-size:11px;font-weight:700;text-align:center;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.matchrow .mid{color:var(--muted);font-weight:700;align-self:flex-start;margin-top:5px}
.matchrow .right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;justify-self:end;text-align:right}
.tiptag{font-size:11px;font-weight:800;color:var(--blue);background:#eaf0ff;border-radius:6px;padding:1px 8px}
.myguess.sm{font-size:11px;padding:2px 7px}
.matchrow.norge{background:linear-gradient(90deg,#fff,#fff7f7)}
.chan{font-size:12px;font-weight:700;color:#3a4a66;background:#eef2fb;padding:3px 8px;border-radius:7px;white-space:nowrap}
.myguess{font-size:13px;font-weight:800;color:var(--navy);background:#eaf0ff;border-radius:8px;padding:3px 9px;white-space:nowrap}
.myguess.empty{color:#9aa7bd;background:#f1f4f9;font-weight:700}
.res{font-weight:900;font-size:15px;color:var(--ink)}
.trank{font-size:11px;color:var(--muted);font-weight:700;margin-left:4px;white-space:nowrap}

/* Filtre */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.filters select,.filters input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit}

/* Tippe-felt */
.guess{display:inline-flex;align-items:center;gap:6px}
.guess input{width:46px;text-align:center;font-size:18px;font-weight:800;padding:8px 4px;border:2px solid var(--line);border-radius:10px}
.guess input:focus{outline:none;border-color:var(--blue)}
.guess .dash{font-weight:800;color:var(--muted)}
.locktag{font-size:12px;font-weight:700;color:#b06a00;background:#fff4e0;padding:4px 9px;border-radius:8px}

/* Tabell */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.3px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.me{background:#eef4ff}
.rankbadge{font-weight:800;width:26px;display:inline-block;text-align:center}
.rank-1{color:#caa200}.rank-2{color:#7d8aa0}.rank-3{color:#b07a3c}

/* Kampside */
.matchhead{display:flex;align-items:center;justify-content:center;gap:18px;text-align:center;margin:4px 0 12px}
.matchhead .team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.matchhead .flag{font-size:54px}
.matchhead .nm{font-weight:800;font-size:18px}
.matchhead .rank{font-size:12px;color:var(--muted)}
.matchhead .center{min-width:90px}
.oddsbar{display:flex;gap:8px;margin:10px 0}
.oddsbar .o{flex:1;text-align:center;background:#f5f8ff;border:1px solid var(--line);border-radius:10px;padding:8px}
.oddsbar .o b{display:block;font-size:18px}
.oddsbar .o span{font-size:12px;color:var(--muted)}
.formline{display:flex;gap:5px;flex-wrap:wrap}
.fdot{width:22px;height:22px;border-radius:6px;color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.fW{background:var(--good)}.fD{background:#9aa7bd}.fL{background:var(--red)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-child{border:none}
.picks-grid{display:grid;grid-template-columns:1fr auto auto;gap:0}
.picks-grid .ph{color:var(--muted);font-size:12px;text-transform:uppercase}
.picks-grid > div{padding:7px 6px;border-bottom:1px solid var(--line)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(8,18,40,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-bg[hidden]{display:none}
.modal{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:380px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-x{position:absolute;top:10px;right:12px;border:none;background:none;font-size:24px;color:var(--muted)}
.tabs{display:flex;gap:6px;margin-bottom:16px}
.tab{flex:1;padding:9px;border:none;background:#eef2fb;border-radius:9px;font-weight:700;color:#5b6b85}
.tab.active{background:var(--navy);color:#fff}
.authform{display:flex;flex-direction:column;gap:12px}
.authform label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px}
.authform input{padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit}
.hint{color:var(--muted);font-size:13px;margin:0}
.formerr{color:var(--red);font-size:13px;font-weight:600;margin:0;min-height:1em}
.banner{background:#fff7e6;border:1px solid #f3dfa6;color:#7a5a00;padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:14px}
.empty{color:var(--muted);text-align:center;padding:26px}
.provisional{font-size:11px;color:#b06a00}

/* ---------- VM-fest: farger og dekor ---------- */
.topbar{border-bottom:4px solid #0a1f44;border-image:linear-gradient(90deg,#d4232f,#e8b71d,#1a9e54,#1d4ed8,#8b2fb0) 1}
.hero{background:linear-gradient(135deg,#0a1f44 0%,#163a7a 55%,#1d4ed8 100%);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 2px,transparent 2px),radial-gradient(rgba(232,183,29,.22) 2px,transparent 2px);
  background-size:34px 34px,56px 56px;background-position:0 0,18px 24px}
.hero > *{position:relative;z-index:1}
.hero .ballmark{position:absolute;right:-8px;top:-14px;font-size:120px;opacity:.08;transform:rotate(-15deg);z-index:0;pointer-events:none}
.section-title h2{display:flex;align-items:center;gap:9px}
.section-title h2::before{content:"";width:6px;height:20px;border-radius:4px;flex:none;background:linear-gradient(180deg,var(--red),var(--gold))}
.btn.primary{background:linear-gradient(135deg,#13294f,#1d4ed8);border-color:#13294f}
.btn.primary:hover{background:linear-gradient(135deg,#0c2752,#1a44c0)}
.medal{font-size:17px}
.fi{width:1.25em;height:auto;display:inline-block;vertical-align:-.2em;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.ficode{font-weight:800;font-size:.7em;color:var(--muted)}
.authform[hidden]{display:none}
.gpill{color:#fff;font-weight:800;border:none}
.card.hero h2,.card.hero .when{position:relative;z-index:1}
.foot{max-width:980px;margin:0 auto;padding:14px 16px 26px;display:flex;justify-content:center;gap:12px;color:var(--muted);font-size:12px;border-top:3px solid;border-image:linear-gradient(90deg,#d4232f,#e8b71d,#1a9e54,#1d4ed8) 1}

@media (max-width:560px){
  .brand-sub{display:none}
  .nav a{padding:6px 9px;font-size:13px}
  .hero .team .nm{font-size:15px}
  .matchrow{grid-template-columns:54px 1fr auto}
  .app{padding:14px 12px 40px}
}

/* ---------- Stor, sentral tippe-boks ---------- */
.card.tip{border:2px solid #1d4ed8;background:linear-gradient(180deg,#eff4ff,#fff)}
.tiptitle{font-size:20px;color:var(--navy);text-align:center;margin:0 0 4px}
.tipgrid{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 14px}
.tipside{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}
.tipside .flag{font-size:40px;line-height:1}
.tipside .nm{font-weight:800;font-size:14px;text-align:center;line-height:1.15}
.tipinput{width:62px;height:62px;text-align:center;font-size:30px;font-weight:900;border:2px solid var(--line);border-radius:14px;color:var(--navy);background:#fff}
.tipinput:focus{outline:none;border-color:var(--blue)}
.tipdash{font-size:24px;font-weight:900;color:var(--muted)}
.tipsave{width:100%;font-size:17px;padding:13px;margin-top:2px}

/* ---------- Bunn-navigasjon (mobil) ---------- */
.botnav{display:none}
@media (max-width:640px){
  .topbar .nav{display:none}
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(13,30,60,.10);
    padding-bottom:env(safe-area-inset-bottom)}
  .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;color:var(--muted)}
  .botnav a .ic{font-size:20px;line-height:1.1}
  .botnav a .lb{font-size:10px;font-weight:700}
  .botnav a.active{color:var(--navy)}
  body{padding-bottom:66px}
  .brand{font-size:17px}
  .tipinput{width:56px;height:56px;font-size:26px}
  .tipside .flag{font-size:32px}
  /* kamprader: navn under flagg, litt større flagg */
  .matchrow .side .flag{font-size:22px}
  .matchrow{grid-template-columns:50px 1fr auto}
}