:root{
  --h-top: minmax(110px, 19vh);
  --h-mid: minmax(calc(var(--row-h) * 4 + 2px), 1fr);
  --h-bot: minmax(280px, 38vh);
  --r-sm: 8px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --gridA:#e9eef6;
  --gridB:#f6f9ff;
  --gridMid:#d5d5d5;
  --gridLine:#b6b6b6;
  --yellow:#eef28b;

  --btnDarkTop:#0a1a2e;
  --btnDarkBot:#040a12;

  --greenTop:#1e8a46;
  --greenBot:#0f5f2f;

  --redTop:#a31818;
  --redBot:#5a0c0c;

  --missTop:#7a1111;
  --missBot:#3c0707;

  --tbTop:#8a7a16;
  --tbBot:#4d430c;

  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --shadow2: 0 2px 0 rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset;

  /* Protokollradens höjd (Nakka visar ca 4 rader samtidigt) */
  --row-h: 84px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body.stdf-match-body{
  margin:0;
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 50% -100px, rgba(255,255,255,.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #030915, #02060f);
  color:#fff;
  overflow:hidden;
}

/* === APP CONTAINER (kritisk) ===
   Utan denna hamnar topp/mitt/botten i normal dokumentflow och kan se “dött” ut
   eller hamna utanför viewport. */
.stdf-app{
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: var(--h-top) 1fr var(--h-bot);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

#stdf-match-root{
  position:fixed;
  inset:0;
  display:grid;
  grid-template-rows: var(--h-top) 1fr var(--h-bot);
  overflow:hidden;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

/* Toast för BUST/ogiltigt */
.stdf-toast{
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  transform: translateX(-50%);
  padding: .55em .9em;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 99999;
}

/* --- Checkout modal --- */
.stdf-modal[hidden]{ display:none; }
.stdf-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
}
.stdf-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.stdf-modal__panel{
  position:relative;
  width:min(640px, 92vw);
  background:linear-gradient(180deg, rgba(10,26,46,.98), rgba(4,10,18,.98));
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  padding:18px 16px;
  color:#fff;
}
.stdf-modal__title{
  font-size:20px;
  font-weight:700;
  margin:0 0 6px 0;
}
.stdf-modal__hint{
  opacity:.92;
  margin:0 0 14px 0;
}
.stdf-modal__buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stdf-modal__btn{
  flex:1 1 90px;
  border-radius:10px;
  padding:10px 12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:#fff;
  cursor:pointer;
}
.stdf-modal__btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.stdf-modal__btn--cancel{
  flex:2 1 140px;
  background:linear-gradient(180deg, rgba(163,24,24,.85), rgba(90,12,12,.85));
}
.stdf-toast.is-show{ opacity: 1; }

/* TOP */
.stdf-top{
  min-height:140px;
  background: linear-gradient(180deg, #0e3a6a, #071a33 60%, #06162a);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.stdf-top-row1{
  height:82%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 1.1vw;
  gap:.9vw;
}
.stdf-top-row2{
  height:18%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 1.1vw;
  border-top:1px solid rgba(255,255,255,.08);
  gap:1.0vw;
}

.stdf-score501{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight:500;
  letter-spacing:.5px;
  font-size: clamp(62px, 12.4vh, 152px);
  line-height:1;
  opacity:.98;
}
.stdf-score501.left{ justify-self:start; }
.stdf-score501.right{ justify-self:end; }

.stdf-legs{
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22em;
  height:78%;
  min-height:64px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  padding:.58em .46em;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  letter-spacing:1px;
  transform: translateY(-4%);
}
.stdf-legsMain{
  font-weight:500;
  font-size: clamp(24px, 5.6vh, 68px);
  line-height:1;
  white-space:nowrap;
}
.stdf-legsMeta{
  font-size: clamp(13px, 2.0vh, 18px);
  font-weight:600;
  letter-spacing:.4px;
  line-height:1.05;
  opacity:.92;
}

.stdf-name{
  font-size: clamp(18px, 3.2vh, 34px);
  font-weight:500;
  opacity:.95;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.0;
  padding:0;
}
.stdf-name.left{ justify-self:start; }
.stdf-name.right{ justify-self:end; text-align:right; }
.stdf-star{ margin-right:.45em; opacity:.9; }

/* MID */
.stdf-mid{ min-height: calc(var(--row-h) * 4); display:flex; overflow:hidden; }
.stdf-scorewrap{
  width:100%;
  /* visa 4 rader och scrolla resten */
  height: calc(var(--row-h) * 4);
  flex:0 0 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
}

.stdf-scoregrid{
  width:100%;
  min-height:100%;
  border-top:1px solid rgba(0,0,0,.55);
  border-bottom:1px solid rgba(0,0,0,.55);
  background: var(--gridB);
  display:grid;
  grid-template-columns: 1.05fr 1.05fr .38fr 1.05fr 1.05fr;
  /* fast radhöjd så att scorewrap kan visa exakt 4 rader */
  grid-auto-rows: var(--row-h);
}

.stdf-cell{
  min-height:0;
  border-right:1px solid var(--gridLine);
  border-bottom:1px solid var(--gridLine);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0b0b0b;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight:500;
  font-size: clamp(30px, 7.0vh, 84px);
  line-height:1;
  padding:.36em;
  user-select:none;
}
.stdf-cell.base{ background: var(--gridB); }
.stdf-cell.alt{ background: var(--gridA); }
.stdf-cell.yellow{ background: var(--yellow); }

/* mittkolumnen: ALLTID fast bakgrund */
.stdf-cell.midcol{
  background: var(--gridMid) !important;
  font-size: clamp(22px, 5.2vh, 62px);
  letter-spacing: -0.06em;
}

/* sista 3 raderna färgtoner */
.stdf-cell.mid33{ background: #dbe4e0 !important; }
.stdf-cell.mid36{ background: #e5e0d2 !important; }
.stdf-cell.mid39{ background: #e4d7d7 !important; }

.stdf-scoregrid > .stdf-cell:nth-child(5n){ border-right:none; }

/* BOT */
.stdf-bot{ min-height:250px; display:grid; grid-template-rows:minmax(44px, auto) minmax(160px, 1fr) minmax(46px, auto); overflow:hidden; }
.stdf-quick{ min-height:44px; display:grid; grid-template-columns: repeat(5,1fr); gap:.65vw; padding:.45vh 1.0vw; align-items:stretch; overflow:hidden; }
.stdf-qbtn{ height:100%; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, var(--btnDarkTop), var(--btnDarkBot)); border-radius: var(--r-sm); box-shadow: var(--shadow2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; font-size: clamp(16px, 2.45vh, 24px); letter-spacing:.4px; user-select:none; line-height:1; cursor:pointer; }

.stdf-pad{ min-height:160px; display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(4,1fr); gap:0; padding:0 1.0vw; overflow:hidden; }
.stdf-pbtn{ border:1px solid rgba(255,255,255,.08); background: radial-gradient(120% 140% at 50% 10%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%), linear-gradient(180deg, #081a2f, #030a12); color:#fff; display:flex; align-items:center; justify-content:center; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; font-weight:600; font-size: clamp(20px, 4.4vh, 44px); line-height:1; user-select:none; cursor:pointer; }

.stdf-row4-left{ grid-column:1/2; display:grid; grid-template-columns:1fr 1fr; height:100%; }
.stdf-row4-mid{ grid-column:2/3; height:100%; }
.stdf-row4-right{ grid-column:3/4; height:100%; }

.stdf-pbtn.back{ background: linear-gradient(180deg, rgba(163,24,24,.60), rgba(90,12,12,.60)); font-weight:800; padding:0; }
.stdf-backIcon{ width: clamp(28px, 5.2vh, 54px); height: clamp(28px, 5.2vh, 54px); display:block; }
.stdf-backIcon path{ stroke:#fff; stroke-width:3.8; stroke-linecap:round; stroke-linejoin:round; fill:none; opacity:.98; }

.stdf-pbtn.miss{ background: linear-gradient(180deg, rgba(122,17,17,1), rgba(60,7,7,1)); font-size: clamp(16px, 2.9vh, 28px); font-weight:500; letter-spacing:.25px; box-shadow: 0 1px 0 rgba(255,255,255,.10) inset; }
.stdf-pbtn.enter{ background: linear-gradient(180deg, var(--greenTop), var(--greenBot)); font-size: clamp(18px, 3.8vh, 38px); font-weight:800; }

.stdf-row4-left .stdf-pbtn{ border-right:2px solid rgba(255,255,255,.28); }

.stdf-footer{ min-height:46px; background: linear-gradient(180deg, rgba(140,16,16,.95), rgba(55,5,5,.95)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:.25vh 1.0vw; gap:1.0vw; border-top:1px solid rgba(0,0,0,.45); overflow:hidden; }
.stdf-f-left{ display:flex; align-items:center; gap:.6vw; }
.stdf-f-center{ display:flex; align-items:center; justify-content:center; gap:.8vw; }
.stdf-f-right{ display:flex; align-items:center; justify-content:flex-end; }

.stdf-fbtn{ border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); border-radius: var(--r-sm); color:#fff; display:flex; align-items:center; justify-content:center; padding:.22em .70em; font-size: clamp(13px, 2.0vh, 18px); font-weight:600; line-height:1.1; user-select:none; white-space:nowrap; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; cursor:pointer; }

.stdf-kvarInput{ width: 4.2ch; text-align:center; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; font-weight:600; font-size: clamp(13px, 2.0vh, 18px); color:#fff; background: rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.14); border-radius: var(--r-sm); padding:.22em .4em; outline:none; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }

.stdf-fbtn.tb{ background: linear-gradient(180deg, var(--tbTop), var(--tbBot)); border-color: rgba(255,255,255,.12); }
.stdf-fbtn.is-active{ outline:2px solid rgba(255,255,255,.35); }

.stdf-gear{ width:40px; height:34px; border-radius: var(--r-sm); border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); display:grid; place-items:center; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.stdf-gear svg{ width:18px; height:18px; fill:#fff; opacity:.95; }

@media (max-width:520px){
  .stdf-top-row1, .stdf-top-row2{ padding:0 2.0vw; }
  .stdf-quick{ gap:2.0vw; padding:.45vh 2.0vw; }
  .stdf-pad{ padding:0 2.0vw; }
  .stdf-footer{ padding:.22vh 2.0vw; }
  .stdf-gear{ width:38px; }
}


/* Hover/focus: behåll ljus text */
.stdf-qbtn:hover,.stdf-qbtn:focus,.stdf-pbtn:hover,.stdf-pbtn:focus,.stdf-fbtn:hover,.stdf-fbtn:focus,.stdf-gear:hover,.stdf-gear:focus,.stdf-modal__btn:hover,.stdf-modal__btn:focus{
  color:#f3f7fb;
  text-shadow:0 0 1px rgba(255,255,255,.18);
}

.stdf-tb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:10px;
}
.stdf-tb-side{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.stdf-tb-box{
  width:100%; min-height:126px; display:grid; place-items:center;
  background:#166287; color:#fff; border:2px solid rgba(0,0,0,.35);
  font-size:clamp(54px, 8vw, 96px); line-height:1; font-variant-numeric:tabular-nums;
}
.stdf-tb-name{ color:#111; background:#fff; width:100%; text-align:center; font-size:18px; }
.stdf-tb-input,.stdf-kvar-modal-input{
  width:100%; height:58px; text-align:center; font-size:34px; font-weight:700;
  border:1px solid rgba(255,255,255,.18); border-radius:10px;
  background:rgba(255,255,255,.10); color:#fff;
}
.stdf-tb-actions{ margin-top:18px; display:flex; justify-content:center; }
.stdf-modal__panel--tb{ width:min(760px, 94vw); }
.stdf-modal__panel--kvar{ width:min(420px, 92vw); display:grid; gap:14px; }


.stdf-kvar-display[hidden]{ display:none !important; }

.stdf-kvar-display{
  position:fixed; inset:0; z-index:10001; display:grid; place-items:center;
  background:rgba(0,0,0,.45);
}
.stdf-kvar-display__value{
  min-width:240px; min-height:180px; padding:20px 34px;
  display:grid; place-items:center; border-radius:18px;
  background:linear-gradient(180deg, #0e3a6a, #071a33 60%, #06162a);
  border:2px solid rgba(255,255,255,.12); color:#fff;
  font-size:clamp(90px, 18vw, 180px); font-weight:500; line-height:1;
  font-variant-numeric:tabular-nums;
}

.stdf-tb-col{ display:grid; gap:18px; }
.stdf-tb-grid--team .stdf-tb-col{ gap:14px; }
.stdf-tb-totalrow{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:14px; }
.stdf-tb-total{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.stdf-tb-total span{ opacity:.9; font-weight:600; }
.stdf-tb-total strong{ font-size:28px; }


.stdf-modal__panel--setup{ width:min(980px,95vw); }
.stdf-setup-grid{ display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:14px; }
.stdf-setup-grid label,.stdf-setup-names label{ display:grid; gap:6px; font-weight:600; }
.stdf-setup-grid input,.stdf-setup-grid select,.stdf-setup-names input{ width:100%; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; padding:0 12px; }
.stdf-setup-check{ align-self:end; display:flex !important; align-items:center; gap:10px; }
.stdf-setup-names{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px; }
.stdf-setup-names h4{ margin:0 0 10px; }
.stdf-setup-names > div > div{ display:grid; gap:10px; }
.stdf-setup-actions{ margin-top:18px; display:flex; justify-content:center; }
.stdf-modal__panel--stats{ width:min(1100px,96vw); max-height:90vh; overflow:auto; }
.stdf-stats-head{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; }
.stdf-stats-tabs{ display:flex; gap:10px; }
.stdf-stats-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stdf-stats-cols dl{ display:grid; grid-template-columns:1fr auto; gap:8px 14px; margin:0; }
.stdf-stats-cols dt,.stdf-stats-cols dd{ margin:0; }
.stdf-stats-protocol table{ width:100%; border-collapse:collapse; }
.stdf-stats-protocol th,.stdf-stats-protocol td{ border:1px solid rgba(255,255,255,.15); padding:10px; text-align:center; }
@media (max-width:700px){ .stdf-setup-grid,.stdf-setup-names,.stdf-stats-cols{ grid-template-columns:1fr; } }