:root {
  --skog:      #1d5847;
  --skog-djup: #143f33;
  --skog-ljus: #2c7a62;
  --amber:     #d97528;
  --papper:    #f5f7f4;
  --yta:       #ffffff;
  --yta-alt:   #eaefe9;
  --text:      #16211d;
  --text-svag: #5d6b65;
  --linje:     #d4dcd6;
  --birdie:    #1a7f4f;
  --bogey:     #c96a1c;
  --dubbel:    #bf3b30;
  --radie:     12px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --skog:      #2c7a62;
    --skog-djup: #1d5847;
    --skog-ljus: #3f9c80;
    --amber:     #e8883a;
    --papper:    #101614;
    --yta:       #18211e;
    --yta-alt:   #202b27;
    --text:      #e4eae6;
    --text-svag: #93a29b;
    --linje:     #2c3a34;
    --birdie:    #4cc088;
    --bogey:     #e8973f;
    --dubbel:    #e4695c;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Klassregler som sätter display (t.ex. .btn) vinner annars över
   webbläsarens [hidden]-regel, så hidden slutar fungera på knappar. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--papper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

.view { min-height: 100dvh; display: flex; flex-direction: column; }
.view[hidden] { display: none; }
.overlay { position: fixed; inset: 0; background: var(--papper); z-index: 20; }

.pad { padding: 1rem 1rem 1.5rem; }

/* ---------- topbar ---------- */
.topbar {
  background: var(--skog);
  color: #fff;
  padding: max(0.9rem, env(safe-area-inset-top)) 0.6rem 0.9rem;
  display: flex; align-items: center; gap: 0.4rem;
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; text-align: center; }
.brand { font-size: 1.2rem !important; letter-spacing: -0.02em; }
.brand span { opacity: 0.65; font-weight: 400; }

.ikonknapp {
  background: rgba(255,255,255,0.14); color: #fff; border: 0;
  width: 40px; height: 40px; border-radius: 10px;
  font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none;
}
.ikonknapp:active { background: rgba(255,255,255,0.28); }
.topbar h1 + .ikonknapp { margin-left: auto; }
.topbar > h1:first-child { margin-left: 44px; }

/* ---------- knappar ---------- */
.btn {
  display: block; width: 100%; border: 0; border-radius: var(--radie);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: 0.85rem 1rem; cursor: pointer; margin-top: 0.75rem;
}
.btn-lg { padding: 1.05rem 1rem; font-size: 1.08rem; }
.btn-primary { background: var(--skog); color: #fff; }
.btn-primary:active { background: var(--skog-djup); }
.btn-sekundar { background: var(--yta-alt); color: var(--text); }
.btn-sekundar:active { filter: brightness(0.94); }
.btn-fara { background: transparent; color: var(--dubbel); box-shadow: inset 0 0 0 1.5px var(--dubbel); }

/* ---------- formulär ---------- */
.falt { display: block; margin-bottom: 1.35rem; }
.falt-etikett {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-svag); margin-bottom: 0.45rem;
}
input[type=text], input[type=number] {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.8rem 0.9rem;
}
input:focus-visible { outline: 2px solid var(--skog-ljus); outline-offset: 1px; border-color: transparent; }
.dolj { display: none; }
.dolj.visa { display: block; margin-top: 0.5rem; }

.segment { display: flex; gap: 0.4rem; }
.segment button {
  flex: 1; padding: 0.75rem 0.4rem; font-family: inherit; font-size: 1rem; font-weight: 600;
  background: var(--yta); color: var(--text);
  border: 1.5px solid var(--linje); border-radius: var(--radie); cursor: pointer;
}
.segment button.aktiv { background: var(--skog); color: #fff; border-color: var(--skog); }

/* ---------- spelare ---------- */
.spelarlista { display: flex; flex-direction: column; gap: 0.5rem; }
.spelarrad { display: flex; gap: 0.5rem; align-items: center; }
.spelarrad input { flex: 1; }
.tabort {
  flex: none; width: 44px; height: 47px; border-radius: var(--radie);
  background: var(--yta-alt); color: var(--text-svag);
  border: 0; font-size: 1.3rem; cursor: pointer;
}
.tabort:active { background: var(--dubbel); color: #fff; }

/* ---------- par-rutnät ---------- */
.par-detaljer {
  background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.75rem 0.9rem; margin-bottom: 1.35rem;
}
.par-detaljer summary { font-weight: 600; cursor: pointer; font-size: 0.95rem; }
.par-rutnat {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 0.45rem; margin-top: 0.85rem;
}
.par-cell { text-align: center; }
.par-cell .nr { font-size: 0.68rem; color: var(--text-svag); font-weight: 700; }
.par-cell input {
  padding: 0.4rem 0.2rem; text-align: center; font-weight: 700; font-size: 0.95rem;
  -moz-appearance: textfield;
}
.par-cell input::-webkit-outer-spin-button,
.par-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- hålnavigering ---------- */
.halnav {
  background: var(--skog-djup); color: #fff;
  display: flex; align-items: stretch;
}
.halpil {
  background: transparent; color: #fff; border: 0;
  width: 58px; font-size: 2rem; line-height: 1; cursor: pointer;
}
.halpil:disabled { opacity: 0.25; }
.halpil:active:not(:disabled) { background: rgba(255,255,255,0.12); }
.halinfo { flex: 1; text-align: center; padding: 0.85rem 0 1rem; }
.hal-rubrik { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; }
.hal-rubrik strong { font-size: 3.1rem; font-weight: 800; }
.hal-rubrik .av { opacity: 0.62; font-size: 1.15rem; font-weight: 500; }
.parjustera {
  background: rgba(255,255,255,0.17); color: #fff; border: 0;
  border-radius: 999px; padding: 0.35rem 1.15rem; margin-top: 0.55rem;
  font-family: inherit; font-size: 1.15rem; font-weight: 600; cursor: pointer;
}
.parjustera strong { font-size: 1.4rem; font-weight: 800; }
.parjustera span { opacity: 0.7; font-weight: 500; }
.parjustera:active { background: rgba(255,255,255,0.3); }

/* ---------- kastrader ---------- */
.kastrad {
  background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.75rem 0.85rem; margin-bottom: 0.7rem;
}
.kastrad-topp { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.kastrad-namn {
  font-weight: 700; font-size: 1.05rem; font-family: inherit;
  background: none; border: 0; padding: 0; color: inherit;
  text-align: left; cursor: pointer;
  border-bottom: 1px dashed var(--linje);
}
.kastrad-namn:active { color: var(--skog); }
.kastrad-total { font-size: 0.85rem; color: var(--text-svag); }
.kastrad-total b { color: var(--text); font-variant-numeric: tabular-nums; }
.stegare { display: flex; align-items: center; gap: 0.6rem; }
.steg {
  width: 56px; height: 56px; flex: none; border: 0; border-radius: var(--radie);
  background: var(--yta-alt); color: var(--text);
  font-size: 1.7rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.steg:active { background: var(--skog); color: #fff; }
.steg:disabled { opacity: 0.3; }
.kastvarde {
  flex: 1; text-align: center; font-size: 2rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kastvarde small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }

.f-birdie { color: var(--birdie); }
.f-par    { color: var(--text-svag); }
.f-bogey  { color: var(--bogey); }
.f-dubbel { color: var(--dubbel); }

/* ---------- pågående ---------- */
.pagaende {
  background: var(--yta); border: 1.5px solid var(--skog);
  border-radius: var(--radie); padding: 1rem; margin-bottom: 0.5rem;
}
.pagaende .etikett {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--skog); margin-bottom: 0.3rem;
}
.pagaende .bana { font-size: 1.15rem; font-weight: 700; }
.pagaende .meta { font-size: 0.88rem; color: var(--text-svag); margin-top: 0.15rem; }

/* ---------- historik ---------- */
.section-rubrik {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-svag); margin: 2rem 0 0.7rem;
}
.historik { display: flex; flex-direction: column; gap: 0.5rem; }
.hist-kort {
  background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.8rem 0.9rem;
  display: flex; align-items: center; gap: 0.8rem; cursor: pointer;
}
.hist-kort .h-txt { flex: 1; min-width: 0; }
.hist-kort .h-bana { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-kort .h-meta { font-size: 0.82rem; color: var(--text-svag); }
.hist-kort .h-vinst { text-align: right; font-size: 0.82rem; }
.hist-kort .h-vinst b { display: block; font-size: 1rem; }
.tom { color: var(--text-svag); font-size: 0.92rem; padding: 0.5rem 0; }

/* ---------- scorekort ---------- */
.kort-scroll { overflow: auto; flex: 1; padding: 0 0 2rem; -webkit-overflow-scrolling: touch; }
table.kort { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
table.kort th, table.kort td {
  border-bottom: 1px solid var(--linje); padding: 0.5rem 0.55rem; text-align: center; white-space: nowrap;
}
table.kort thead th { background: var(--yta-alt); font-size: 0.78rem; position: sticky; top: 0; }
table.kort th.namn, table.kort td.namn {
  text-align: left; position: sticky; left: 0; background: var(--papper);
  font-weight: 700; max-width: 8rem; overflow: hidden; text-overflow: ellipsis;
}
table.kort thead th.namn { background: var(--yta-alt); z-index: 2; }
table.kort tfoot td { font-weight: 700; background: var(--yta-alt); }

/* ---------- resultat ---------- */
.podium { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.plats {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.9rem 1rem;
}
.plats.etta { border-color: var(--amber); border-width: 2.5px; }
.plats-nr {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--yta-alt); color: var(--text-svag);
  display: grid; place-items: center; font-weight: 700; font-size: 0.95rem;
}
.plats.etta .plats-nr { background: var(--amber); color: #fff; }
.plats-namn { flex: 1; font-weight: 700; font-size: 1.05rem; }
.plats-res { text-align: right; font-variant-numeric: tabular-nums; }
.plats-res b { font-size: 1.15rem; display: block; }
.plats-res small { color: var(--text-svag); }

.statrad { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.stat {
  flex: 1; background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.7rem 0.4rem; text-align: center;
}
.stat b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.72rem; color: var(--text-svag); font-weight: 600; letter-spacing: 0.03em; }

.fel { color: var(--dubbel); font-size: 0.9rem; font-weight: 600; margin-top: 0.75rem; }


/* ---------- hero (startvy efter QR-scan) ---------- */
.hero {
  background: var(--skog); color: #fff;
  padding: max(2.2rem, calc(env(safe-area-inset-top) + 1.5rem)) 1.15rem 1.9rem;
  text-align: center;
}
.hero-etikett {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.6; margin-bottom: 0.5rem;
}
.hero-bana {
  font-size: 2.05rem; font-weight: 800; line-height: 1.12;
  letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.hero-meta { font-size: 0.95rem; opacity: 0.75; margin-top: 0.5rem; }

/* ---------- infobox ---------- */
.infobox {
  background: var(--yta); border-left: 4px solid var(--amber);
  border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 1.4rem;
  font-size: 0.94rem; line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.infobox strong { display: block; margin-bottom: 0.15rem; }
.infobox.varning { border-left-color: var(--dubbel); }

/* ---------- antal spelare ---------- */
.antal-valjare {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.5rem;
}
.antal-steg {
  width: 62px; height: 62px; flex: none; border: 0; border-radius: 10px;
  background: var(--yta-alt); color: var(--text);
  font-size: 1.9rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.antal-steg:active { background: var(--skog); color: #fff; }
.antal-steg:disabled { opacity: 0.3; }
.antal-varde {
  flex: 1; text-align: center; font-size: 2.6rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* ---------- banlista ---------- */
.banlista { display: flex; flex-direction: column; gap: 0.5rem; }
.bankort {
  display: flex; align-items: center; gap: 0.8rem; text-align: left;
  width: 100%; background: var(--yta); border: 1.5px solid var(--linje);
  border-radius: var(--radie); padding: 0.9rem 1rem;
  font-family: inherit; font-size: 1rem; color: var(--text); cursor: pointer;
}
.bankort:active { border-color: var(--skog); }
.bankort .b-namn { flex: 1; font-weight: 700; }
.bankort .b-meta { font-size: 0.85rem; color: var(--text-svag); }

.hjalp { font-size: 0.86rem; color: var(--text-svag); margin: 0.8rem 0 0; line-height: 1.5; }

.btn-lank {
  background: transparent; color: var(--text-svag);
  font-weight: 600; font-size: 0.94rem; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- namnfält i startvyn ---------- */
.namnlista { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.7rem; }
.namnrad { display: flex; align-items: center; gap: 0.6rem; }
.namnrad .nr {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--yta-alt); color: var(--text-svag);
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.namnrad input { flex: 1; }

/* ---------- egen dialogruta ---------- */
.dialog-bakgrund {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 20, 17, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.dialog-bakgrund[hidden] { display: none; }
.dialog {
  background: var(--yta); color: var(--text);
  border-radius: 16px; padding: 1.35rem 1.35rem 1.15rem;
  width: 100%; max-width: 22rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}
.dialog-rubrik {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-svag);
  margin: 0 0 0.7rem;
}
.dialog input { font-size: 1.15rem; font-weight: 600; }
.dialog-knappar { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.dialog-knappar .btn { margin-top: 0; flex: 1; }