/* ============================================================
   GRENAA DISC GOLF — Scorekort & Hyggeturneringer
   Design: skov-signage. Grøn "banetavle" + kridt-scorekort.
   ============================================================ */

/* Fonts loaded non-blocking via index.html */

:root{
  /* Skov / banetavle */
  --pine:      #123425;
  --pine-2:    #17402E;
  --pine-3:    #1E5039;
  --moss:      #2C6B4A;

  /* Fairway = primær handling */
  --fairway:   #62A844;
  --fairway-2: #4E8C34;
  --fairway-lo:#3C6E28;

  /* Kridt / papir-scorekort */
  --chalk:     #F6F3E6;
  --chalk-2:   #ECE6D2;
  --chalk-3:   #DED7BE;
  --ink:       #1C2A20;
  --ink-soft:  #4C5B4F;

  /* Kæde / stål */
  --chain:     #B7BEC0;
  --chain-dk:  #7E888A;

  /* Tee-farver (banens system) */
  --tee-gul:   #F3C220;
  --tee-hvid:  #FDFCF6;
  --tee-rod:   #D5474A;

  /* Score-status */
  --ace:       #7C5CFF;
  --eagle:     #1E8E5A;
  --birdie:    #3FA45C;
  --par:       #6B7A6E;
  --bogey:     #E08A34;
  --dbogey:    #CF4A3C;

  --danger:    #C6403E;
  --warn:      #C7862A;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow:    0 10px 30px rgba(6,22,14,.35);
  --shadow-sm: 0 4px 14px rgba(6,22,14,.22);
  --shadow-1:  0 2px 8px rgba(6,22,14,.18);
  --shadow-3:  0 18px 48px rgba(6,22,14,.42);
  --shadow-4:  0 28px 70px rgba(6,22,14,.5);

  /* Spacing scale */
  --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:20px; --sp-7:28px; --sp-8:48px;

  /* Motion */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  --fdisplay: 'Barlow Condensed', system-ui, sans-serif;
  --fbody:    'Barlow', system-ui, sans-serif;
  --fmono:    'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--fbody);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(98,168,68,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(46,107,74,.30), transparent 55%),
    linear-gradient(160deg, var(--pine) 0%, var(--pine-2) 45%, #0E2A1D 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }
a{ color:inherit; }

/* Hjælpere ---------------------------------------------------- */
.hidden{ display:none !important; }
.center{ text-align:center; }
.mono{ font-family:var(--fmono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--ink-soft); }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.row{ display:flex; gap:10px; align-items:center; }
.wrap{ flex-wrap:wrap; }

/* Knapper ----------------------------------------------------- */
.btn{
  border:none; border-radius:999px; padding:11px 20px;
  font-family:var(--fdisplay); font-weight:700; font-size:16px;
  letter-spacing:.03em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  transition:transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  background:linear-gradient(180deg, var(--fairway), var(--fairway-2));
  color:#0d2113; box-shadow:0 6px 0 var(--fairway-lo), var(--shadow-sm);
}
.btn-primary:hover{ box-shadow:0 4px 0 var(--fairway-lo), var(--shadow-sm); transform:translateY(2px); }
.btn-ghost{
  background:rgba(255,255,255,.06); color:var(--chalk);
  border:1.5px solid rgba(255,255,255,.22);
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-dark{ background:var(--pine-3); color:var(--chalk); border:1.5px solid rgba(255,255,255,.10); }
.btn-dark:hover{ background:var(--moss); }
.btn-danger{ background:transparent; color:var(--danger); border:1.5px solid rgba(198,64,62,.5); }
.btn-danger:hover{ background:rgba(198,64,62,.12); }
.btn-sm{ padding:7px 13px; font-size:13.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Felter ------------------------------------------------------ */
.field{ display:block; margin-bottom:14px; }
.field > span{
  display:block; font-family:var(--fdisplay); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; font-size:13px;
  color:var(--ink-soft); margin-bottom:5px;
}
.input{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--chalk-3); background:#fff; color:var(--ink);
  font-size:15.5px; transition:border-color .12s, box-shadow .12s;
}
.input:focus{ outline:none; border-color:var(--fairway); box-shadow:0 0 0 3px rgba(98,168,68,.22); }
.on-dark .field > span{ color:rgba(246,243,230,.7); }
.on-dark .input{ background:rgba(255,255,255,.95); border-color:transparent; }

/* =========================================================
   AUTH / LANDING — "Daggry over skovbanen"
   Lagdelt fyrreskov ved daggry, hyzer-flugt ind i kurven,
   guldfolie-typografi og klubhus-panel. Tour-æstetik.
   ========================================================= */
:root{
  --foil-1:#F6DC8C; --foil-2:#E9B62F; --foil-3:#C48A18; --foil-4:#F3CE6A;
  --gold-line:rgba(233,182,47,.55);
}

.auth{ min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr; }
@media (max-width:900px){
  .auth{ grid-template-columns:1fr; }
  .auth-hero{ min-height:72vh; }
}

/* ---------- HERO (foto-slideshow) ---------- */
.auth-hero{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  color:var(--chalk); padding:clamp(26px,4vw,48px);
  background:#1B4D14;
  min-height:0;
}
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0;
  background:center/cover no-repeat;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-slide.active{ opacity:1; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    180deg,
    rgba(10,30,10,.45) 0%,
    rgba(10,30,10,.25) 35%,
    rgba(10,30,10,.35) 65%,
    rgba(10,30,10,.7) 100%
  );
}
.hero-dots{
  position:relative; z-index:2; display:flex; gap:10px;
  justify-content:center; padding-top:12px;
}
.dot{
  width:10px; height:10px; border-radius:50%; border:2px solid rgba(246,243,230,.6);
  background:transparent; padding:0; transition:.2s;
}
.dot.active{ background:var(--foil-4); border-color:var(--foil-4); }

/* dobbelt guldramme — som graveret skilt */
.hero-frame{ position:absolute; inset:14px; pointer-events:none; z-index:3; border-radius:18px;
  border:1px solid rgba(233,182,47,.65); }
.hero-frame::after{ content:""; position:absolute; inset:5px; border-radius:14px;
  border:1px solid rgba(233,182,47,.35); }

.hero-top{ position:relative; z-index:2; display:flex; align-items:center; gap:14px; }
.crest{ flex:0 0 auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.hero-eyebrow{
  font-family:var(--fdisplay); font-weight:600; font-size:12.5px;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(246,243,230,.72);
}
.hero-eyebrow b{ color:var(--foil-4); font-weight:700; }

.hero-main{ position:relative; z-index:2; margin-top:auto; padding-bottom:26px; }
.hero-title{
  font-family:var(--fdisplay); font-weight:800; text-transform:uppercase;
  font-size:clamp(52px,7.4vw,104px); line-height:.86; letter-spacing:.005em;
  margin:0 0 14px; text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-title em{
  font-style:normal; display:inline-block;
  background:linear-gradient(103deg, var(--foil-1) 8%, var(--foil-2) 38%, var(--foil-3) 58%, var(--foil-4) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.28));
}
.hero-accent{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:clamp(17px,1.9vw,23px); color:#EFD9A0; margin:0 0 12px;
  letter-spacing:.01em;
}
.hero-sub{ max-width:38ch; font-size:15.5px; color:rgba(246,243,230,.74); line-height:1.55; margin:0; }

/* broadcast-strimmel: banens nøgletal */
.hero-card{
  position:relative; z-index:2;
  display:flex; align-items:stretch; gap:0;
  background:linear-gradient(180deg, rgba(20,60,16,.78), rgba(18,50,14,.88));
  border:1px solid var(--gold-line); border-radius:12px;
  backdrop-filter:blur(6px); overflow:hidden;
}
.hero-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--foil-2), transparent); }
.hero-card .hc{
  flex:1; padding:13px 8px 11px; text-align:center;
  border-left:1px solid rgba(233,182,47,.18);
}
.hero-card .hc:first-child{ border-left:none; }
.hero-card .hc b{
  display:block; font-family:var(--fmono); font-weight:800;
  font-size:clamp(19px,2.1vw,26px); line-height:1; color:var(--foil-4);
  font-variant-numeric:tabular-nums;
}
.hero-card .hc span{
  display:block; margin-top:4px; font-family:var(--fdisplay); font-weight:600;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,243,230,.55);
}
.hero-card .hc .tees{ display:flex; gap:7px; justify-content:center; padding-top:5px; }
.hero-card .hc .tees i{ width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4); }

/* (SVG-scene animationer fjernet — bruger foto-baggrund nu) */

/* ---------- PANEL (Klubhuset) ---------- */
.auth-panel{
  position:relative; background:var(--chalk);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(34px,5vw,58px) clamp(26px,5vw,64px);
}
/* fint papirgrain */
.auth-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-card{ position:relative; width:100%; max-width:410px; margin:0 auto; }

.panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.panel-head .mark{ color:var(--pine-2); }
.panel-head span{
  font-family:var(--fdisplay); font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; font-size:12px; color:var(--ink-soft);
}
.panel-rule{
  height:1px; margin:0 0 26px;
  background:linear-gradient(90deg, var(--foil-2) 0%, rgba(233,182,47,.25) 45%, transparent 100%);
}

.auth-tabs{ display:flex; gap:0; border-bottom:1.5px solid var(--chalk-3); margin-bottom:26px; }
.auth-tabs button{
  flex:0 0 auto; border:none; background:transparent; padding:10px 2px; margin-right:26px;
  font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  font-size:16px; color:var(--ink-soft); position:relative; transition:color .14s;
}
.auth-tabs button::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1.5px; height:3px;
  background:linear-gradient(90deg, var(--foil-2), var(--foil-3));
  transition:right .18s ease; border-radius:2px;
}
.auth-tabs button:hover{ color:var(--ink); }
.auth-tabs button.active{ color:var(--ink); }
.auth-tabs button.active::after{ right:0; }

.auth h2{ font-family:var(--fdisplay); font-weight:800; text-transform:uppercase; font-size:31px; margin:0 0 4px; letter-spacing:.005em; }
.auth .lead{ color:var(--ink-soft); margin:0 0 22px; font-size:15px; }
.on-dark .input{
  background:#fff; border:1.5px solid var(--chalk-3);
  box-shadow:inset 0 1px 3px rgba(28,42,32,.06);
}
.on-dark .input:focus{ border-color:var(--foil-2); box-shadow:0 0 0 3px rgba(233,182,47,.22), inset 0 1px 3px rgba(28,42,32,.06); }
.input::placeholder{ color:#A8A492; }
.form-msg{ font-size:14px; margin:4px 0 14px; min-height:18px; }
.form-msg.err{ color:var(--danger); }
.form-msg.ok{ color:var(--fairway-2); }
.auth-hint{ display:none; }

.panel-foot{
  margin-top:30px; padding-top:16px; border-top:1px solid var(--chalk-3);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--fdisplay); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:11px; color:var(--ink-soft);
}
.panel-foot .tees{ display:flex; gap:6px; }
.panel-foot .tees i{ width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.tee-i-gul{ background:var(--tee-gul); } .tee-i-hvid{ background:var(--tee-hvid); } .tee-i-rod{ background:var(--tee-rod); }

/* =========================================================
   APP SHELL
   ========================================================= */
.app{ min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; row-gap:8px;
  padding:12px clamp(16px,4vw,34px);
  background:rgba(11,32,22,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{ display:flex; align-items:center; gap:11px; color:var(--chalk); }
.brand-name{ font-family:var(--fdisplay); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:20px; line-height:1; }
.brand-name small{ display:block; font-size:11px; letter-spacing:.16em; color:var(--tee-gul); font-weight:600; }
.nav{ display:flex; gap:4px; margin-left:8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav button{
  border:none; background:transparent; color:rgba(246,243,230,.65);
  font-family:var(--fdisplay); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:15px; padding:9px 15px; border-radius:999px; transition:.12s;
}
.nav button:hover{ color:var(--chalk); background:rgba(255,255,255,.07); }
.nav button.active{ color:#0d2113; background:var(--tee-gul); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.whoami{ color:rgba(246,243,230,.85); font-size:14px; text-align:right; line-height:1.2; }
.whoami b{ color:var(--chalk); }
.whoami .tag{ font-family:var(--fmono); font-size:10px; text-transform:uppercase; color:var(--tee-gul); letter-spacing:.1em; }

.main{ flex:1; padding:clamp(20px,4vw,40px); max-width:1120px; width:100%; margin:0 auto; }

/* Section heads */
.page-head{ margin-bottom:22px; }
.eyebrow{ font-family:var(--fdisplay); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:13px; color:var(--tee-gul); }
.page-title{ font-family:var(--fdisplay); font-weight:800; text-transform:uppercase; font-size:clamp(30px,5vw,46px); color:var(--chalk); line-height:.95; margin:4px 0 6px; }
.page-lead{ color:rgba(246,243,230,.72); max-width:60ch; }

/* Kort på mørk bund */
.card{
  background:var(--chalk); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; margin-bottom:20px;
}
.card.dark{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); color:var(--chalk); box-shadow:none; }
.card-h{ font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:18px; margin:0 0 14px; }
.card.dark .card-h{ color:var(--chalk); }

/* =========================================================
   BANE-VISNING
   ========================================================= */
.tee-switch{ display:inline-flex; gap:6px; background:rgba(0,0,0,.22); padding:5px; border-radius:999px; }
.tee-switch button{
  border:none; background:transparent; padding:8px 16px; border-radius:999px;
  font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:14px; color:rgba(246,243,230,.7); display:flex; align-items:center; gap:7px; transition:.12s;
}
.tee-dot{ width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); }
.tee-dot.gul{ background:var(--tee-gul); }
.tee-dot.hvid{ background:var(--tee-hvid); }
.tee-dot.rod{ background:var(--tee-rod); }
.tee-switch button.active{ background:var(--chalk); color:var(--ink); }

.course-stats{ display:flex; gap:26px; flex-wrap:wrap; margin:18px 0 4px; }
.course-stats .stat b{ display:block; font-family:var(--fmono); font-weight:800; font-size:32px; color:var(--tee-gul); line-height:1; }
.course-stats .stat span{ font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:rgba(246,243,230,.65); }

.holes-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.hole-card{
  background:var(--chalk); border-radius:var(--radius-sm); padding:14px 15px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  border-left:5px solid var(--tee-gul);
}
.hole-card .num{ font-family:var(--fdisplay); font-weight:800; font-size:15px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.hole-card .par{ font-family:var(--fmono); font-weight:800; font-size:40px; line-height:1; color:var(--ink); }
.hole-card .par small{ font-size:13px; color:var(--ink-soft); font-weight:500; }
.hole-card .dist{ font-family:var(--fmono); font-size:13px; color:var(--fairway-2); margin-top:2px; }
.hole-card .basket{ position:absolute; right:8px; top:8px; opacity:.16; }

/* =========================================================
   SCOREKORT / RUNDE
   ========================================================= */
.scorecard-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); box-shadow:var(--shadow); }
table.scorecard{ border-collapse:collapse; width:100%; min-width:760px; background:var(--chalk); }
table.scorecard th, table.scorecard td{ padding:0; text-align:center; border:1px solid var(--chalk-3); }
table.scorecard thead th{
  background:var(--pine-2); color:var(--chalk); font-family:var(--fdisplay);
  font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.03em;
  padding:11px 6px; position:sticky; left:auto;
}
table.scorecard thead th.corner{ text-align:left; padding-left:16px; min-width:150px; }
.par-row td{ background:var(--chalk-2); font-family:var(--fmono); font-weight:700; color:var(--ink-soft); font-size:14px; padding:7px 4px; }
.par-row .lbl{ text-align:left; padding-left:16px; text-transform:uppercase; font-family:var(--fdisplay); letter-spacing:.05em; }
.player-row .pname{ text-align:left; padding:10px 16px; font-weight:600; min-width:150px; }
.player-row .pname .sub{ font-size:11.5px; color:var(--ink-soft); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.player-row .total{ font-family:var(--fmono); font-weight:800; font-size:17px; background:var(--chalk-2); }
.player-row .vspar{ font-family:var(--fmono); font-weight:800; }

.score-cell{ padding:5px !important; }
.score-in{
  width:44px; height:44px; text-align:center; border:none; background:transparent;
  font-family:var(--fmono); font-weight:700; font-size:18px; color:var(--ink);
  border-radius:8px; -moz-appearance:textfield;
}
.score-in::-webkit-outer-spin-button,.score-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.score-in:focus{ outline:none; box-shadow:0 0 0 2px var(--fairway) inset; }
/* score-status baggrunde */
.s-ace   { background:rgba(124,92,255,.20); }
.s-eagle { background:rgba(30,142,90,.30); }
.s-birdie{ background:rgba(63,164,92,.22); }
.s-par   { background:transparent; }
.s-bogey { background:rgba(224,138,52,.20); }
.s-dbogey{ background:rgba(207,74,60,.22); }
.vspar.neg{ color:var(--birdie); }
.vspar.pos{ color:var(--dbogey); }
.vspar.zero{ color:var(--ink-soft); }

/* Spiller-tilføjelse */
.player-adder{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--chalk-2);
  border-radius:999px; padding:7px 8px 7px 14px; font-weight:600; font-size:14px;
}
.chip .x{ border:none; background:var(--chalk-3); width:22px; height:22px; border-radius:50%; font-size:14px; line-height:1; color:var(--ink); }
.chip .x:hover{ background:var(--danger); color:#fff; }
.chip.guest{ box-shadow:inset 0 0 0 1.5px var(--chain); }
.chip.member .dotm{ width:8px; height:8px; border-radius:50%; background:var(--fairway); }

/* =========================================================
   STATS
   ========================================================= */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.stat-tile{ background:var(--chalk); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); }
.stat-tile b{ display:block; font-family:var(--fmono); font-weight:800; font-size:38px; line-height:1; color:var(--ink); }
.stat-tile span{ font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--ink-soft); }
.stat-tile.accent{ background:linear-gradient(160deg,var(--pine-3),var(--moss)); }
.stat-tile.accent b, .stat-tile.accent span{ color:var(--chalk); }
.stat-tile.accent b{ color:var(--tee-gul); }

/* generisk data-tabel */
.dtable{ width:100%; border-collapse:collapse; background:var(--chalk); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.dtable th{ background:var(--pine-2); color:var(--chalk); font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.04em; font-size:13.5px; padding:11px 14px; text-align:left; }
.dtable td{ padding:11px 14px; border-top:1px solid var(--chalk-2); font-size:14.5px; }
.dtable tr:hover td{ background:var(--chalk-2); }
.dtable td.mono{ font-family:var(--fmono); }
/* Brede tabeller skal kunne skubbes vandret, ellers klipper kortets overflow:hidden
   de sidste kolonner væk på mobil, uden nogen måde at nå dem på. */
.dtable-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.04em; }
.pill.admin{ background:var(--tee-gul); color:#3a2c00; }
.pill.user{ background:var(--chalk-3); color:var(--ink); }

/* Empty state */
.empty{ text-align:center; padding:48px 20px; color:rgba(246,243,230,.7); }
.empty svg{ opacity:.5; margin-bottom:14px; }
.empty h3{ font-family:var(--fdisplay); text-transform:uppercase; color:var(--chalk); font-size:22px; margin:0 0 6px; }

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:var(--chalk); padding:13px 22px; border-radius:999px;
  font-weight:600; box-shadow:var(--shadow); z-index:200; opacity:0; transition:.28s;
  border:1px solid rgba(255,255,255,.12);
}
.toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.toast.ok{ border-color:var(--fairway); }
.toast.err{ border-color:var(--danger); }

/* Opdaterings-bjælke: ny version hentet af service workeren.
   Ligger over tabbaren på mobil, så den ikke dækker navigationen. */
.update-bar{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(90px);
  display:flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--chalk);
  padding:10px 12px 10px 20px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow);
  z-index:210; opacity:0; transition:.3s var(--ease-standard);
  max-width:calc(100vw - 28px);
}
.update-bar.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.update-bar span{ font-weight:600; font-size:14.5px; white-space:nowrap; }
.update-bar .update-x{
  border:none; background:transparent; color:rgba(246,243,230,.55);
  font-size:22px; line-height:1; padding:0 6px; flex:0 0 auto;
}
@media (max-width:600px){
  .update-bar{ bottom:calc(74px + env(safe-area-inset-bottom)); }
  .update-bar span{ font-size:13.5px; white-space:normal; }
}

/* Modal */
.modal-bg{ position:fixed; inset:0; background:rgba(6,20,13,.66); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:150; padding:20px; }
.modal{ background:var(--chalk); border-radius:var(--radius); box-shadow:var(--shadow); width:100%; max-width:520px; padding:26px; max-height:88vh; overflow:auto; }
.modal h3{ font-family:var(--fdisplay); text-transform:uppercase; font-size:24px; margin:0 0 4px; }
/* Klæber til toppen af dialogens eget rulleområde, så vejen ud altid er synlig,
   uanset hvor langt man har rullet ned i fx en turneringsstilling. */
.modal-x{
  position:sticky; top:-6px; z-index:5;
  display:block; margin:-14px -14px 2px auto;
  width:36px; height:36px; flex:0 0 auto;
  border:none; border-radius:50%; cursor:pointer;
  background:var(--chalk-2); color:var(--ink);
  font-size:24px; line-height:34px; text-align:center; font-weight:700;
  box-shadow:0 1px 4px rgba(28,42,32,.18);
}
.modal-x:hover{ background:var(--chalk-3); }

/* Aktivitetssiden: hvor går tiden hen */
.act-bars{ display:flex; flex-direction:column; gap:8px; }
.act-bar-row{ display:grid; grid-template-columns:130px 1fr 82px; align-items:center; gap:12px; }
.act-bar-label{ font-size:14px; font-weight:600; }
.act-bar-track{ height:14px; background:var(--chalk-2); border-radius:999px; overflow:hidden; }
.act-bar-fill{ height:100%; background:linear-gradient(90deg,var(--fairway),var(--moss)); border-radius:999px; }
.act-bar-val{ text-align:right; font-size:13px; font-weight:700; }
@media (max-width:600px){
  .act-bar-row{ grid-template-columns:100px 1fr 70px; gap:8px; }
  .act-bar-label{ font-size:13px; }
}

/* Banerekorder på banesiden */
.record-list{ display:flex; flex-direction:column; gap:6px; }
.rec-row{
  display:grid; grid-template-columns:auto auto 1fr auto auto auto;
  align-items:center; gap:10px; cursor:pointer;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px;
}
.rec-row:hover{ background:var(--chalk-3); }
.rec-tee{ display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.rec-date{ font-size:12.5px; }
.rec-strokes{ font-weight:700; }
.rec-vspar{ font-weight:800; min-width:34px; text-align:right; }
/* "Din bedste" hænger under selve rekorden, tydeligt underordnet den */
.rec-row.rec-mine{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--chalk-3); margin-top:-2px; }
.rec-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; }
.tag-badge.record{ background:rgba(243,194,32,.22); }
@media (max-width:600px){
  .rec-row{ grid-template-columns:auto 1fr auto auto; row-gap:4px; }
  .rec-scope{ grid-column:1 / -1; order:3; }
  .rec-date{ grid-column:1 / -1; order:4; }
}

/* Fremgang pr. hul */
.prog-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px;
  align-items:center; padding:4px 0; font-size:14px;
}
.prog-row .mono.muted{ font-size:12.5px; }

/* Alle brugere ved stjerne-søgning */
.suggest-empty{ padding:10px 12px; font-size:13px; color:var(--ink-soft); }

/* Andelen ved siden af antallet i kast-fordelingen */
.dist-count em{
  display:block; font-style:normal; font-size:11.5px;
  color:var(--ink-soft); font-weight:600; margin-top:1px;
}
.dist-lead{ margin:14px 0 0; font-size:15px; line-height:1.5; }

/* Forni mod bagni */
.nines-row{ display:flex; flex-wrap:wrap; gap:12px; }
.nines-half{
  flex:1 1 150px; background:var(--chalk-2); border-radius:var(--radius-sm);
  padding:14px; display:flex; flex-direction:column; gap:4px;
}
.nines-half span{ font-size:12.5px; color:var(--ink-soft); }
.nines-half b{ font-size:26px; font-weight:800; }

/* Månedsdyst: rækker kan trykkes, og historikken pr. måned */
.duel-row[data-duelround]{ cursor:pointer; }
.duel-month{ margin-bottom:18px; }
.duel-month-head{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.03em; font-size:15px;
}
/* Beskedknappen skubbes ud til højre. Navnet får lov at klemme sig sammen frem
   for at skubbe knappen ud af kortet på en smal skærm. */
.friend-card .spn{ min-width:0; }
.friend-card .spn b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friend-card .friend-msg{ margin-left:auto; flex:0 0 auto; padding:6px 10px; }

/* =========================================================
   NYHEDER
   ========================================================= */
.news-list{ display:flex; flex-direction:column; gap:14px; }
.news-item{ margin-bottom:0; position:relative; }
/* En nyhed man ikke har set endnu får en guldkant, så øjet finder den straks */
.news-item.fresh{ box-shadow:var(--shadow-sm), inset 4px 0 0 var(--tee-gul); }
.news-top{ display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
.news-icon{ font-size:26px; line-height:1.1; flex:0 0 auto; }
.news-heading{ flex:1; min-width:0; }
.news-heading h3{
  font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.02em;
  font-size:19px; margin:0 0 2px; line-height:1.2;
}
.news-date{ font-size:12.5px; color:var(--ink-soft); font-family:var(--fmono); }
.news-new{ background:var(--tee-gul); color:#3a2c00; flex:0 0 auto; }
.news-item p{ margin:0; font-size:15px; line-height:1.55; }

/* Tælleren ved menupunktet "Nyt" */
.news-dot{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; margin-left:5px;
  border-radius:999px; background:var(--tee-gul); color:#3a2c00;
  font-family:var(--fdisplay); font-weight:800; font-size:11px; line-height:1;
}
@media (max-width:600px){
  /* I tabbaren sidder prikken oven på ikonet i stedet for ved siden af teksten */
  .tabbar button{ position:relative; }
  .tabbar .news-dot{ position:absolute; top:2px; right:calc(50% - 18px); margin:0; }
  .news-heading h3{ font-size:17px; }
  .news-item p{ font-size:14.5px; }
}

/* Turneringsformer som sammenfoldet liste i stedet for ti knapper på siden */
.format-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.format-item{ background:var(--chalk-2); border-radius:var(--radius-sm); overflow:hidden; }
.format-item summary{
  cursor:pointer; padding:12px 14px; font-family:var(--fdisplay); font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; font-size:14.5px; list-style:none;
}
.format-item summary::-webkit-details-marker{ display:none; }
.format-item summary::after{ content:'+'; float:right; font-size:18px; line-height:1; opacity:.6; }
.format-item[open] summary::after{ content:'−'; }
.format-item[open] summary{ background:var(--pine-2); color:var(--chalk); }
.format-body{ padding:12px 14px; font-size:14.5px; }
.format-body p:last-child{ margin-bottom:0; }

/* Bane-editor tabel */
.editor-tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.editor-tbl th{ font-family:var(--fdisplay); text-transform:uppercase; font-size:12px; letter-spacing:.04em; color:var(--ink-soft); padding:6px 4px; border-bottom:2px solid var(--chalk-3); }
.editor-tbl td{ padding:4px 3px; border-bottom:1px solid var(--chalk-2); text-align:center; }
.editor-tbl td:first-child{ font-family:var(--fdisplay); font-weight:700; }
.mini-in{ width:52px; padding:7px 4px; text-align:center; border:1.5px solid var(--chalk-3); border-radius:7px; font-family:var(--fmono); font-weight:700; }
.mini-in:focus{ outline:none; border-color:var(--fairway); }
.mini-in.gul{ border-bottom-color:var(--tee-gul); }
.mini-in.hvid{ border-bottom-color:var(--chain-dk); }
.mini-in.rod{ border-bottom-color:var(--tee-rod); }

/* Admin: bane-liste */
.admin-course-list{ display:flex; flex-direction:column; gap:10px; }
.admin-course-row{
  display:flex; align-items:center; gap:14px;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:8px 12px;
}
.acr-photo{ width:56px; height:44px; border-radius:8px; background:center/cover no-repeat; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(28,42,32,.12); }
.acr-info{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.acr-info b{ font-size:15px; color:var(--ink); }
.acr-info span{ font-size:12.5px; }

/* Admin: foto-upload i bane-editor */
.photo-pick{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.ed-photo-preview{ width:120px; height:80px; object-fit:cover; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(28,42,32,.14); flex:0 0 auto; background:var(--chalk-2); }
.photo-pick > div{ flex:1; min-width:180px; }

/* Admin: tee-opsætning i bane-editor */
.tee-mgmt-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.tee-mgmt-row{ display:flex; align-items:center; gap:8px; }
.tee-mgmt-row .tee-mgmt-label{ flex:1; margin:0; }
.tee-color-input{
  width:38px; height:38px; padding:2px; flex:0 0 auto;
  border:1.5px solid var(--chalk-3); border-radius:8px; background:none; cursor:pointer;
}

.notice{ background:rgba(243,194,32,.14); border:1px solid rgba(243,194,32,.4); color:var(--chalk); padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:18px; }
.notice b{ color:var(--tee-gul); }

/* =========================================================
   NOTIFIKATIONS-KLOKKE
   ========================================================= */
.bell{
  position:relative; width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; transition:.12s;
}
.bell:hover{ background:rgba(255,255,255,.13); }
.bell.has{ border-color:var(--tee-gul); animation:bell-ring 2.4s ease-in-out infinite; }
@keyframes bell-ring{ 0%,88%,100%{ transform:rotate(0); } 90%{ transform:rotate(12deg); } 94%{ transform:rotate(-9deg); } 97%{ transform:rotate(4deg); } }
@media (prefers-reduced-motion: reduce){ .bell.has{ animation:none; } }
.bell-badge{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  background:var(--tee-rod); color:#fff; border-radius:999px; font-family:var(--fmono);
  font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--pine);
}
.count-dot{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; margin-left:8px; background:var(--tee-rod); color:#fff; border-radius:999px; font-family:var(--fmono); font-size:12px; font-weight:800; vertical-align:middle; }

/* =========================================================
   PILLS (status)
   ========================================================= */
.pill.pending{ background:rgba(243,194,32,.25); color:#7a5c00; }
.pill.approved{ background:rgba(63,164,92,.22); color:#1c5e33; }
.pill.rejected{ background:rgba(207,74,60,.18); color:#8f2b22; }
.pill.you{ background:var(--tee-gul); color:#3a2c00; }

/* =========================================================
   ANMODNINGER
   ========================================================= */
.req{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-top:1px solid var(--chalk-2); }
.req:first-of-type{ border-top:none; }
.req-main{ display:flex; align-items:center; gap:13px; }
.req-avatar{ width:44px; height:44px; border-radius:50%; flex:0 0 44px; position:relative;
  background:linear-gradient(160deg,var(--moss),var(--pine-3)); color:var(--chalk);
  display:flex; align-items:center; justify-content:center; font-family:var(--fdisplay);
  font-weight:800; font-size:19px; }
.req-title{ font-size:15.5px; }
.req-sub{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.req-actions{ display:flex; gap:7px; flex-wrap:wrap; }

/* =========================================================
   VENNER
   ========================================================= */
.suggest-list{
  position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:30;
  background:#fff; border:1.5px solid var(--chalk-3); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); max-height:230px; overflow:auto;
}
.suggest-list.hidden{ display:none; }
.suggest-item{ padding:9px 14px; font-size:14.5px; color:var(--ink); cursor:pointer; }
.suggest-item:hover{ background:var(--chalk-2); }
/* To faste kolonner på desktop, én på telefonen. Hver ven er en vandret linje:
   avatar, navn med nøgletal under, og beskedknappen yderst til højre. Faste
   kolonner frem for auto-fill, fordi kortene ellers blev smallere og smallere,
   jo flere venner man fik, og teksten begyndte at brække. */
.friend-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.friend-card{
  display:flex; align-items:center; gap:12px; min-width:0;
  background:var(--chalk); border:1px solid var(--chalk-3);
  border-radius:var(--radius-sm); padding:10px 12px;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.friend-card:hover{ border-color:var(--fairway); box-shadow:var(--shadow-sm); }
.friend-card .spn{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.friend-card .spn b{ font-size:15px; line-height:1.25; }
.friend-card .spn span{ font-size:12.5px; color:var(--ink-soft); }
.friend-card .spn .fc-best{ font-family:var(--fmono); font-weight:800; }
.friend-card .pill{ align-self:flex-start; }
@media (max-width:820px){
  .friend-grid{ grid-template-columns:1fr; }
}
.live-dot{ position:absolute; bottom:-1px; right:-1px; width:12px; height:12px; border-radius:50%;
  background:var(--fairway); border:2px solid var(--chalk); }

.submit-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:14px; }
.submit-summary > div{ text-align:center; }
.submit-summary span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:3px; }
.submit-summary b{ font-size:17px; }

/* =========================================================
   RANGLISTE
   ========================================================= */
.course-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.course-tabs button{ border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  color:rgba(246,243,230,.8); font-family:var(--fdisplay); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:14px; padding:9px 16px; border-radius:999px; }
.course-tabs button.active{ background:var(--tee-gul); color:#3a2c00; border-color:var(--tee-gul); }

.lb-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px;
  background:var(--pine-2); color:var(--chalk); font-family:var(--fdisplay); font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; font-size:16px; }
.lb-head .muted{ color:rgba(246,243,230,.6); font-size:13px; }
.lb-table{ box-shadow:none; border-radius:0; }
.lb-table .rank{ font-family:var(--fdisplay); font-weight:800; font-size:18px; width:52px; text-align:center; }
.lb-table tr.podium td{ background:rgba(243,194,32,.06); }
.lb-table tr.p1 td{ background:rgba(243,194,32,.16); }
.lb-table tr.p1 .rank, .lb-table tr.p2 .rank, .lb-table tr.p3 .rank{ font-size:22px; }
.lb-table tr.me td{ box-shadow:inset 3px 0 0 var(--fairway); }
/* Versionskort nederst på Info-siden */
.version-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.version-badge{
  display:inline-block; padding:4px 14px; border-radius:999px;
  background:var(--pine-2); color:var(--tee-gul);
  font-family:var(--fmono); font-weight:800; font-size:17px; letter-spacing:.04em;
}

.lb-row{ cursor:pointer; }
.lb-foot{ padding:10px 16px; font-size:12.5px; text-align:center; background:var(--chalk);
  border-top:1px solid var(--chalk-2); }
/* Under-linjen i spillerkolonnen erstatter Runde/Tee/Dato/Bekræftet på små skærme.
   På store skærme står oplysningerne i deres egne kolonner, og "Se runde"-knappen
   er synlig, så hele under-linjen er overflødig der. */
.lb-sub{ display:none; }

@media (max-width:600px){
  /* Ni kolonner kan ikke være på en telefon. Runde, tee, dato og godkender
     foldes ind under spillerens navn, så Kast og Mod par altid er synlige.
     "Se runde"-knappen ryger også, for hele rækken kan trykkes i stedet; er
     man admin, bliver kolonnen stående, så Redigér og Slet stadig kan nås. */
  .lb-table .c-scope, .lb-table .c-tee, .lb-table .c-date, .lb-table .c-appr{ display:none; }
  .lb-table .lb-view-btn{ display:none; }
  .lb-table:not(.is-admin) .c-act{ display:none; }
  .lb-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:4px;
    font-size:12px; color:var(--ink-soft); line-height:1.5; }
  .lb-sub .pill{ font-size:10.5px; padding:1px 7px; }
  /* "Se runde"-knappen er skjult på mobil, så rækken skal selv sige at den kan
     trykkes. Uden det er der intet der røber, at scorekortet ligger bagved. */
  .lb-sub .lb-open{
    display:inline-block; padding:2px 9px; border-radius:999px;
    background:var(--pine-2); color:var(--tee-gul);
    font-family:var(--fdisplay); font-weight:700; font-size:11px;
    text-transform:uppercase; letter-spacing:.03em;
  }
  .lb-table th{ font-size:12px; padding:9px 8px; }
  .lb-table td{ padding:9px 8px; font-size:14px; }
  .lb-table .rank{ width:38px; font-size:16px; }
  .lb-table tr.p1 .rank, .lb-table tr.p2 .rank, .lb-table tr.p3 .rank{ font-size:19px; }
  .lb-table .c-act{ flex-direction:column; gap:4px !important; }
}

/* =========================================================
   BANE-OVERSIGT (course picker)
   ========================================================= */
.course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.course-card{
  display:flex; flex-direction:column; border:none; cursor:pointer;
  background:var(--chalk); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s;
  text-align:left; padding:0; position:relative;
}
.course-card{ transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.course-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); }
.cc-photo{ height:180px; background:center/cover no-repeat; transition:transform var(--dur-slow) var(--ease-standard); }
.course-card:hover .cc-photo{ transform:scale(1.045); }
.cc-body{ padding:18px 20px 16px; flex:1; }
.cc-name{ font-family:var(--fdisplay); font-weight:800; text-transform:uppercase; font-size:20px; margin:0 0 2px; color:var(--ink); }
.cc-loc{ font-size:14px; color:var(--ink-soft); margin-bottom:12px; }
.cc-stats{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); align-items:center; }
.cc-stats b{ font-family:var(--fmono); font-weight:700; color:var(--ink); }
.cc-tees{ display:flex; gap:5px; }
.cc-tees i{ width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.cc-arrow{
  position:absolute; top:18px; right:18px; width:36px; height:36px;
  border-radius:50%; background:var(--fairway); color:#0d2113;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; box-shadow:var(--shadow-sm);
}

/* =========================================================
   MOBIL / PWA OPTIMERING
   ========================================================= */
@media (max-width:600px){
  .topbar{ padding:10px 14px; gap:10px; }
  .brand-name{ font-size:17px; }
  .brand-name small{ font-size:9.5px; }
  .nav button{ font-size:13px; padding:7px 10px; }
  .whoami{ display:none; }
  .main{ padding:16px; }
  .page-title{ font-size:28px; }
  .holes-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  .hole-card{ padding:10px 11px; }
  .hole-card .par{ font-size:30px; }
  .course-grid{ grid-template-columns:1fr; }
  .cc-photo{ height:140px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }

  /* Scorekort mobil-optimering */
  .scorecard-wrap{ border-radius:10px; }
  table.scorecard{ min-width:auto; }
  .score-in{ width:40px; height:40px; font-size:20px; border-radius:6px; }
  .score-cell{ padding:3px !important; }
  table.scorecard thead th{ padding:8px 4px; font-size:12px; }
  .par-row td{ font-size:12px; padding:5px 2px; }
  .player-row .pname{ padding:8px 10px; font-size:14px; min-width:100px; }
  .hole-note-btn{ width:16px; height:16px; }
  .stepper .step-btn{ width:26px; height:40px; }
  .stepper .score-in{ width:36px; font-size:16px; }

  /* Req cards */
  .req{ flex-direction:column; align-items:flex-start; }
  .req-actions{ width:100%; }
  .req-actions .btn{ flex:1; text-align:center; justify-content:center; }

  .hero-title{ font-size:42px; }
  .hero-accent{ font-size:16px; }
  .hero-card .hc b{ font-size:20px; }
  .hero-card .hc span{ font-size:9px; }

  .auth-panel{ padding:28px 20px; }
}

/* Touch-venlig score-input */
.score-in{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.score-in:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--fairway) inset;
  background:rgba(98,168,68,.08);
}

/* PWA fullscreen */
@media (display-mode: standalone){
  body{ padding-top:env(safe-area-inset-top); }
  .topbar{ padding-top:max(12px, env(safe-area-inset-top)); }
}

/* =========================================================
   TURNERING
   ========================================================= */
.modal-wide{ max-width:800px; }
.mini-tee{ font-size:12px; padding:2px 4px; border-radius:4px; border:1px solid #ccc; margin-left:4px; background:#fff; cursor:pointer; }
.rank{ font-family:var(--fdisplay); font-weight:800; font-size:18px; width:42px; text-align:center; }
.podium td{ background:rgba(243,194,32,.06); }
.p1 td{ background:rgba(243,194,32,.16); }
.p1 .rank,.p2 .rank,.p3 .rank{ font-size:22px; }

@media(max-width:600px){
  .modal-wide{ max-width:100%; margin:0; border-radius:14px 14px 0 0; max-height:92vh; }
}

/* =========================================================
   SKELETON LOADING (Round 1)
   ========================================================= */
.skel{ position:relative; overflow:hidden; background:rgba(255,255,255,.08); border-radius:var(--radius-sm); }
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-100%); animation:shimmer 1.4s infinite;
}
.skel.on-light{ background:var(--chalk-2); }
.skel.on-light::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .skel::after{ animation:none; display:none; } }

.skel-line{ height:14px; margin-bottom:8px; }
.skel-card{ height:120px; border-radius:var(--radius); margin-bottom:20px; }
.skel-tile{ height:78px; border-radius:var(--radius); }
.skel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.skel-course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.skel-course-card{ height:240px; border-radius:var(--radius); }
.skel-row{ height:40px; margin-bottom:2px; border-radius:var(--radius-sm); }

/* =========================================================
   VIEW TRANSITION
   ========================================================= */
#main.enter{ animation:view-in var(--dur-base) var(--ease-standard); }
@keyframes view-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ #main.enter{ animation:none; } }

/* =========================================================
   ICON BUTTONS / SCORE STEPPER
   ========================================================= */
.stepper{ display:inline-flex; align-items:center; gap:0; background:var(--chalk-2); border-radius:12px; overflow:hidden; }
.step-btn{
  width:38px; height:44px; border:none; background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:background var(--dur-fast) var(--ease-standard), transform var(--dur-fast);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.step-btn:active{ transform:scale(.88); background:var(--chalk-3); }
.step-btn.minus{ color:var(--eagle); }
.step-btn.plus{ color:var(--bogey); }
.stepper .score-in{ width:48px; }

/* =========================================================
   OFFLINE BADGE
   ========================================================= */
.offline-badge{
  display:none; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:rgba(199,134,42,.18); border:1.5px solid var(--warn); color:var(--tee-gul);
  font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:.08em;
}
.offline-badge.show{ display:inline-flex; }
/* Online igen, men noget venter stadig på at komme frem: grøn i stedet for
   advarselsgul, så man kan se forskel på "ingen dækning" og "den arbejder". */
.offline-badge.syncing{
  background:rgba(98,168,68,.16); border-color:var(--fairway); color:#9BD97F;
}

/* =========================================================
   TURNERING · MANGLENDE SCORES-BANNER
   ========================================================= */
.tp-missing-banner{
  display:none; padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(199,134,42,.14); border:1.5px solid var(--warn);
  color:#8a5a12; font-size:13.5px; font-weight:700; margin-bottom:14px;
  position:sticky; top:8px; z-index:5;
}
.tp-missing-banner.show{ display:block; }
@media (prefers-color-scheme: dark){
  .tp-missing-banner{ color:#e8b978; }
}

/* =========================================================
   BOTTOM TAB BAR (mobil)
   ========================================================= */
.tabbar{ display:none; }
@media (max-width:600px){
  .nav{ display:none; }
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(11,32,22,.94); backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.08);
    padding:6px 4px max(6px, env(safe-area-inset-bottom));
    /* Med "Lær & regler" er der op til otte punkter. Frem for at klemme dem
       sammen til ulæselige stumper får baren lov at rulle vandret; knapperne
       beholder en fast mindstebredde og strækkes kun, hvis der er plads. */
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tabbar::-webkit-scrollbar{ display:none; }
  .tabbar button{
    flex:1 0 auto; min-width:56px; border:none; background:transparent; color:rgba(246,243,230,.6);
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px;
    font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:.03em;
    border-radius:10px; transition:color var(--dur-fast);
  }
  .tabbar button.active{ color:var(--tee-gul); }
  .main{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   CELEBRATION (eagle / ace)
   ========================================================= */
.celebrate-pop{
  position:absolute; pointer-events:none; font-size:20px; opacity:0; z-index:60;
  animation:celebrate-rise .9s var(--ease-standard) forwards;
}
@keyframes celebrate-rise{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  15%{ opacity:1; transform:translateY(-6px) scale(1.1); }
  100%{ opacity:0; transform:translateY(-46px) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .celebrate-pop{ display:none; } }

/* =========================================================
   BADGES / ACHIEVEMENTS
   ========================================================= */
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; }
.badge-tile{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:12px 6px;
  filter:grayscale(1); opacity:.4; transition:transform var(--dur-fast) var(--ease-standard);
}
.badge-tile.unlocked{
  filter:none; opacity:1; background:linear-gradient(160deg,#FFF6DC,var(--chalk-2));
  box-shadow:var(--shadow-1);
}
.badge-tile:hover{ transform:translateY(-2px); }
.badge-icon{ font-size:26px; line-height:1; }
.badge-label{ font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:10.5px; color:var(--ink-soft); }
.badge-tile.unlocked .badge-label{ color:var(--ink); }

.progress-bar{ height:8px; border-radius:999px; background:var(--chalk-3); overflow:hidden; }
.progress-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--fairway-2),var(--fairway)); border-radius:999px; transition:width var(--dur-slow) var(--ease-standard); }

/* =========================================================
   GRAFER — trend, fordeling, heatmap
   ========================================================= */
.chart-legend{ display:flex; gap:18px; margin-bottom:8px; font-size:12.5px; color:var(--ink-soft); }
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend .lg-dot{ width:9px; height:9px; border-radius:50%; background:var(--fairway); display:inline-block; }
.chart-legend .lg-dash{ width:14px; height:0; border-top:2px dashed var(--ink-soft); display:inline-block; }
.trend-svg{ display:block; overflow:visible; }

.dist-chart{ display:flex; flex-direction:column; gap:9px; }
.dist-row{ display:grid; grid-template-columns:74px 1fr 34px; align-items:center; gap:10px; }
.dist-label{ font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:12.5px; color:var(--ink-soft); }
.dist-track{ height:14px; background:var(--chalk-2); border-radius:999px; overflow:hidden; }
.dist-fill{ height:100%; border-radius:999px; transition:width var(--dur-slow) var(--ease-standard); min-width:3px; }
.dist-count{ text-align:right; font-size:13px; font-weight:700; }

.heatmap-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px; }
.heat-cell{
  border-radius:8px; padding:8px 4px; text-align:center; display:flex; flex-direction:column; gap:2px;
  box-shadow:inset 0 0 0 1px rgba(28,42,32,.08);
}
.hc-num{ font-family:var(--fdisplay); font-weight:700; font-size:11px; color:var(--ink-soft); }
.hc-val{ font-family:var(--fmono); font-weight:800; font-size:14px; color:var(--ink); }

@media (max-width:600px){
  .dist-row{ grid-template-columns:58px 1fr 30px; gap:6px; }
  .heatmap-grid{ grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); }
}

/* =========================================================
   DRAFT / KLADDE
   ========================================================= */
.pill.draft{ background:rgba(199,134,42,.2); color:#7a4f0a; }
.draft-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:linear-gradient(160deg,var(--pine-3),var(--moss)); border:1px solid rgba(243,194,32,.35);
  border-radius:var(--radius); padding:16px 20px; margin-bottom:20px; color:var(--chalk);
}
.draft-banner b{ color:var(--tee-gul); }

/* =========================================================
   SWIPE / HOLE-BY-HOLE SCORE ENTRY
   ========================================================= */
.swipe-view{
  position:fixed; inset:0; z-index:80;
  background:linear-gradient(160deg, var(--pine) 0%, var(--pine-2) 55%, #0E2A1D 100%);
  display:flex; flex-direction:column; color:var(--chalk);
  padding:max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  touch-action:pan-y;
}
.swipe-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.swipe-close{
  width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:var(--chalk); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.swipe-progress{ display:flex; gap:4px; flex:1; margin:0 12px; }
.swipe-progress i{ flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.18); }
.swipe-progress i.done{ background:var(--fairway); }
.swipe-progress i.now{ background:var(--tee-gul); }

.swipe-card{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; position:relative; padding:10px 0; overflow-y:auto;
}
.swipe-holenum{ font-family:var(--fdisplay); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:13px; color:rgba(246,243,230,.65); }
.swipe-par{ font-family:var(--fmono); font-weight:800; font-size:clamp(56px,16vw,96px); line-height:1; margin:2px 0 6px; }
.swipe-par small{ display:block; font-family:var(--fdisplay); font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:rgba(246,243,230,.6); }
.swipe-dist{ font-family:var(--fmono); font-size:15px; color:var(--tee-gul); margin-bottom:16px; }

.swipe-players{ width:100%; max-width:440px; display:flex; flex-direction:column; gap:10px; }
.swipe-player{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.swipe-player .spn{ text-align:left; flex:1 1 90px; min-width:0; }
.swipe-player .spn b{ display:block; font-size:15px; }
.swipe-player .spn span{ font-size:11.5px; color:rgba(246,243,230,.6); text-transform:uppercase; letter-spacing:.06em; }

/* Live mod par under scoring. Lysere grøn/rød end tabellernes, så tallet holder
   kontrasten på den mørke swipe-baggrund. */
.swipe-vspar{
  flex:0 0 auto; text-align:center; line-height:1.05; padding:0 4px;
  font-family:var(--fmono); min-width:46px;
}
.swipe-vspar b{ display:block; font-size:21px; font-weight:800; }
.swipe-vspar span{
  display:block; font-family:var(--fdisplay); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:rgba(246,243,230,.5); margin-top:1px;
}
.swipe-vspar.neg b{ color:#7BD98F; }
.swipe-vspar.pos b{ color:#F58B7E; }
.swipe-vspar.zero b{ color:rgba(246,243,230,.85); }
.swipe-player .stepper{ background:rgba(0,0,0,.28); }
.swipe-player .step-btn{ color:var(--chalk); }
.swipe-player .score-in{ color:var(--chalk); background:transparent; }

.swipe-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; }
.swipe-nav-btn{
  width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:var(--chalk); display:flex; align-items:center; justify-content:center;
}
.swipe-nav-btn:disabled{ opacity:.3; }

.swipe-note{ width:100%; max-width:440px; margin-top:14px; }
.swipe-note textarea{
  width:100%; resize:none; border-radius:var(--radius-sm); border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:var(--chalk); padding:10px 12px; font-family:var(--fbody); font-size:14px;
}
.swipe-note textarea::placeholder{ color:rgba(246,243,230,.4); }

.entry-mode-switch{ display:inline-flex; gap:4px; background:rgba(0,0,0,.22); padding:4px; border-radius:999px; }
.entry-mode-switch button{
  border:none; background:transparent; color:rgba(246,243,230,.65); padding:7px 12px; border-radius:999px;
  display:flex; align-items:center; gap:6px; font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; font-size:12.5px;
}
.entry-mode-switch button.active{ background:var(--chalk); color:var(--ink); }

/* Enheds-token på Admin-siden, til indsættelse i adminUids */
.uid-box{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--chalk-2); border:1.5px solid var(--chalk-3);
  border-radius:var(--radius-sm); padding:10px 12px;
}
.uid-box code{
  flex:1; min-width:180px; font-family:var(--fmono); font-size:12.5px;
  color:var(--ink); word-break:break-all;
}

/* =========================================================
   LÆR & REGLER
   ========================================================= */
.learn-videos{ display:flex; flex-direction:column; gap:10px; }
.learn-video{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--chalk-2); border:1.5px solid var(--chalk-3); border-radius:var(--radius);
  padding:14px 16px; color:var(--ink);
  transition:transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast);
}
.learn-video:hover{ transform:translateY(-2px); border-color:var(--fairway); }
.learn-video .lv-icon{ flex:0 0 auto; color:var(--fairway-2); display:flex; }
.learn-video .lv-text{ flex:1; min-width:0; }
.learn-video .lv-text b{ display:block; font-size:15.5px; }
.learn-video .lv-text em{ display:block; font-style:normal; font-size:13px; color:var(--ink-soft); margin-top:1px; }
.learn-video .lv-arrow{ flex:0 0 auto; font-size:18px; color:var(--ink-soft); }

.learn-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.learn-card{ margin-bottom:0; }
.learn-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.learn-head h3{ margin:0; font-family:var(--fdisplay); font-weight:800; text-transform:uppercase; font-size:17px; letter-spacing:.02em; }
.learn-icon{ font-size:22px; line-height:1; flex:0 0 auto; }
.learn-card .info-list li .tee-dot{ display:inline-block; vertical-align:middle; margin-right:4px; }
.learn-outro{ margin-top:16px; }
.learn-outro h3{ margin:0 0 8px; font-family:var(--fdisplay); font-weight:800; text-transform:uppercase; }

@media (max-width:600px){
  .learn-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   AKTIVT HUL PÅ GRIDET
   Kun ét hul kan redigeres ad gangen, så fumlende fingre ikke
   rammer et felt tre huller ved siden af.
   ========================================================= */
.grid-holebar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:6px 8px; margin-bottom:12px; width:fit-content; max-width:100%;
}
.grid-holebar .ghb-nav{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:var(--chalk);
  display:flex; align-items:center; justify-content:center;
}
.grid-holebar .ghb-nav:disabled{ opacity:.25; }
.grid-holebar .ghb-label{
  font-family:var(--fdisplay); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:11.5px; color:rgba(246,243,230,.6); padding:0 4px; white-space:nowrap;
}
.grid-holebar .ghb-label b{
  font-family:var(--fmono); font-size:17px; color:var(--tee-gul); letter-spacing:0; margin-left:4px;
}
.grid-holebar.unlocked .ghb-label b{ font-family:var(--fdisplay); font-size:11.5px; letter-spacing:.1em; margin-left:0; }
.grid-holebar .ghb-unlock{
  border:1.5px solid rgba(255,255,255,.18); background:transparent; color:rgba(246,243,230,.8);
  border-radius:999px; padding:8px 14px; white-space:nowrap;
  font-family:var(--fdisplay); font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:.06em;
}
.grid-holebar.unlocked .ghb-unlock{ background:var(--tee-gul); border-color:var(--tee-gul); color:#3a2c00; }

/* Hulnummeret i toppen er nu en knap: tryk for at gøre hullet aktivt */
.hole-pick{
  border:none; background:transparent; color:inherit; font:inherit; padding:0;
  border-radius:6px; min-width:18px;
}
table.scorecard th.active-hole{ background:var(--tee-gul); color:#3a2c00; }
table.scorecard th.active-hole .hole-note-btn{ background:rgba(0,0,0,.22); color:#3a2c00; }

/* Aktivt hul: gul ramme hele vejen ned gennem spillerrækkerne */
.score-cell.active-hole{
  box-shadow:inset 2px 0 0 var(--tee-gul), inset -2px 0 0 var(--tee-gul);
  background-color:rgba(243,194,32,.12);
}

/* Låste felter. pointer-events:none på indholdet er det der gør, at et tryk
   lander på selve cellen i stedet for at blive slugt af det deaktiverede
   inputfelt; ellers kunne man ikke trykke sig hen til et andet hul. */
.score-cell.locked{ cursor:pointer; }
.score-cell.locked .stepper{ pointer-events:none; background:transparent; }
/* visibility, ikke display: så beholder cellen sin bredde og tabellen hopper ikke,
   når det aktive hul flytter sig */
.score-cell.locked .step-btn{ visibility:hidden; }
.score-cell.locked .score-in{
  pointer-events:none; opacity:.6;
  /* iOS Safari gråner deaktiverede felter uanset color, og tallet bliver
     ulæseligt udenfor i sol. -webkit-text-fill-color er den eneste vej udenom. */
  color:var(--ink); -webkit-text-fill-color:var(--ink);
}

.hole-note-btn{
  border:none; background:rgba(255,255,255,.12); color:var(--chalk); width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; margin-left:4px; vertical-align:middle;
}
.hole-note-btn.has{ background:var(--tee-gul); color:#3a2c00; }
.card .hole-note-btn.has{ background:var(--tee-gul); color:#3a2c00; }

@media (max-width:600px){
  .swipe-par{ font-size:clamp(48px,20vw,72px); }
}

/* ============================================================
   RUNDE-OMFANG, HANDICAP & UDVIDET STATISTIK
   ============================================================ */

/* Omfang-badge: 18 huller / Forni / Bagni — genbruger .pill-formen */
.pill.scope{ font-family:var(--fmono); letter-spacing:.02em; }
.pill.scope.full{ background:var(--chalk-3); color:var(--ink); }
.pill.scope.f9{ background:rgba(63,164,92,.18); color:#1c5e33; }
.pill.scope.b9{ background:rgba(138,169,201,.28); color:#22405c; }

/* Live-tæller ved Gem-knappen på scorekortet */
.missing-hint{ font-size:13px; color:var(--ink-soft); font-family:var(--fdisplay);
  letter-spacing:.02em; align-self:center; }
.missing-hint.show{ color:#8f2b22; font-weight:700; }

.missing-list{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.missing-list > div{ display:flex; justify-content:space-between; gap:14px;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:8px 12px; font-size:14px; }
.missing-list span{ font-family:var(--fmono); font-size:13px; }

/* Felter udfyldt automatisk med par — vises stiplet, så de kan skelnes fra indtastede */
.auto-par{ position:relative; opacity:.72; }
.auto-par::after{ content:''; position:absolute; left:4px; right:4px; bottom:2px;
  border-bottom:1.5px dotted currentColor; opacity:.6; }

/* Admin: tee-rettelse pr. spiller */
.admin-tee-list{ display:flex; flex-direction:column; gap:8px; }
.admin-tee-row{ display:flex; align-items:center; gap:10px;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:8px 12px; }
.admin-tee-row b{ flex:1 1 auto; }
.admin-tee-row .input{ max-width:150px; margin:0; }
.admin-tee-row .tee-dot{ flex:0 0 auto; }

/* Undertekst i stat-fliser (fx spillehandicap under handicappet) */
.stat-tile .tile-note{ display:block; margin-top:8px; font-style:normal; font-size:12.5px;
  color:var(--ink-soft); font-family:var(--fbody); letter-spacing:0; text-transform:none; }
.stat-tile.accent .tile-note{ color:rgba(246,243,230,.78); }

/* Personlige rekorder */
.record-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.record{ background:var(--chalk-2); border-radius:var(--radius-sm); padding:14px 16px;
  border-left:4px solid var(--chalk-3); }
.record.good{ border-left-color:var(--birdie); }
.record.bad{ border-left-color:var(--dbogey); }
.record span{ display:block; font-family:var(--fdisplay); text-transform:uppercase;
  letter-spacing:.07em; font-size:11.5px; color:var(--ink-soft); }
.record b{ display:block; font-family:var(--fmono); font-weight:800; font-size:26px;
  line-height:1.15; margin:4px 0 2px; }
.record em{ font-style:normal; font-size:12.5px; color:var(--ink-soft); }

/* Heatmap over selve scorekortet */
.heat-card .heat-td{ font-family:var(--fmono); font-weight:700; font-size:13px;
  text-align:center; padding:7px 6px; border:1px solid var(--chalk); }
.heat-card .pname .sub{ font-size:11px; color:var(--ink-soft); font-weight:400; }

/* Tekstknap der ser ud som et link (bruges til "sådan læses tallene") */
.linkbtn{ border:none; background:none; padding:0; cursor:pointer; font:inherit;
  color:var(--fairway); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.linkbtn:hover{ opacity:.8; }

/* Sammenklappeligt kort (badges nedprioriteret på stats-siden) */
.card.collapsible > summary{ cursor:pointer; list-style:none; display:flex;
  align-items:center; gap:8px; margin:0; }
.card.collapsible > summary::-webkit-details-marker{ display:none; }
.card.collapsible > summary::after{ content:'+'; margin-left:auto;
  font-family:var(--fmono); font-size:20px; color:var(--ink-soft); }
.card.collapsible[open] > summary::after{ content:'–'; }

/* Info-siden */
.info-list{ margin:8px 0 0; padding-left:20px; }
.info-list li{ margin-bottom:7px; line-height:1.55; }
.info-steps{ margin:10px 0 0; padding-left:20px; }
.info-steps li{ margin-bottom:12px; line-height:1.6; }
.info-steps li b{ color:var(--ink); }

@media (max-width:600px){
  .missing-hint{ order:3; width:100%; text-align:center; }
  .admin-tee-row{ flex-wrap:wrap; }
}

/* ============================================================
   SOCIALT: MÅNEDSDYST, FEED & HUL-KONGER
   ============================================================ */

/* Månedsdyst — det mest iøjnefaldende kort på Venner-siden */
.duel-card{ border-top:4px solid var(--tee-gul); }
.duel-clock{ font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.06em;
  font-size:12px; color:var(--ink-soft); background:var(--chalk-2);
  padding:4px 10px; border-radius:999px; }
.duel-list{ display:flex; flex-direction:column; gap:6px; }
.duel-row{ display:grid; grid-template-columns:38px 1fr auto auto; align-items:center; gap:10px;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:10px 14px; }
.duel-row.lead{ background:linear-gradient(100deg, rgba(243,194,32,.28), var(--chalk-2)); }
.duel-row.me{ box-shadow:inset 0 0 0 1.5px var(--fairway); }
.duel-rank{ font-size:19px; text-align:center; font-family:var(--fmono); font-weight:800; }
.duel-name{ font-weight:700; }
.duel-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.duel-score{ font-weight:800; font-size:17px; min-width:44px; text-align:right; }
.duel-prev{ margin-top:14px; padding-top:12px; border-top:1px solid var(--chalk-2);
  font-size:13.5px; color:var(--ink-soft); }

/* Runde-feed med markeringer */
.feed{ display:flex; flex-direction:column; gap:10px; }
.feed-row{ display:flex; align-items:flex-start; gap:12px;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:12px 14px;
  border-left:4px solid transparent; }
.feed-row.pb{ border-left-color:var(--tee-gul); }
.feed-row.beats{ border-left-color:var(--dbogey); }
.feed-main{ flex:1 1 auto; min-width:0; }
.feed-title{ font-size:14.5px; line-height:1.5; }
.feed-sub{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; margin-top:5px; }
.feed-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.feed-tags:empty{ display:none; }
.tag-badge{ font-family:var(--fdisplay); font-size:11.5px; font-weight:700;
  letter-spacing:.03em; padding:3px 9px; border-radius:999px; }
.tag-badge.pb{ background:rgba(243,194,32,.3); color:#6b4f00; }
.tag-badge.new{ background:rgba(63,164,92,.2); color:#1c5e33; }
.tag-badge.lead{ background:var(--tee-gul); color:#3a2c00; }
.tag-badge.beat{ background:rgba(207,74,60,.18); color:#8f2b22; }

/* Hul-konger */
.king-board{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; }
.king-chip{ display:flex; flex-direction:column; background:var(--chalk-2);
  border-radius:var(--radius-sm); padding:8px 14px; border-left:3px solid var(--tee-gul); }
.king-chip.me{ border-left-color:var(--fairway); }
.king-chip span{ font-size:12px; color:var(--ink-soft); }
.king-list{ display:flex; flex-direction:column; gap:5px; max-height:52vh; overflow-y:auto; }
.king-row{ display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:var(--radius-sm); }
.king-row:nth-child(odd){ background:var(--chalk-2); }
.king-hole{ flex:0 0 52px; text-align:center; }
.king-hole b{ display:block; font-family:var(--fmono); font-weight:800; font-size:18px; }
.king-hole span{ font-size:11px; color:var(--ink-soft); }
.king-players{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; }
.king-player{ display:inline-flex; align-items:center; gap:5px; font-size:13px;
  background:var(--chalk); border-radius:999px; padding:3px 11px; box-shadow:var(--shadow-sm); }
.king-player.first{ background:rgba(243,194,32,.26); font-weight:700; }
.king-player.me{ box-shadow:inset 0 0 0 1.5px var(--fairway); }
.king-player em{ font-style:normal; font-family:var(--fmono); font-weight:700; font-size:12px; }

@media (max-width:600px){
  .duel-row{ grid-template-columns:32px 1fr auto; row-gap:4px; }
  .duel-meta{ grid-column:2 / -1; }
  .feed-row{ flex-wrap:wrap; }
  .feed-row > .btn{ margin-left:52px; }
  .king-hole{ flex-basis:40px; }
}

.duel-msg{ font-size:13px; color:var(--ink-soft); margin:12px 0 0; }

/* Omfangs-vaelger paa "Ny runde": stor, laesbar tekst og tydeligt valgt tilstand */
.scope-switch{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.scope-switch button{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:var(--chalk-2); border:2px solid var(--chalk-3); color:var(--ink);
  border-radius:var(--radius-sm); padding:14px 16px; cursor:pointer; text-align:left;
  transition:background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.scope-switch button b{ font-family:var(--fdisplay); font-size:17px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; }
.scope-switch button span{ font-size:13px; color:var(--ink-soft); }
.scope-switch button:hover{ background:var(--chalk); border-color:var(--ink-soft); }
.scope-switch button.active{
  background:linear-gradient(160deg,var(--pine-3),var(--moss));
  border-color:var(--tee-gul); box-shadow:var(--shadow-sm);
}
.scope-switch button.active b{ color:var(--tee-gul); }
.scope-switch button.active span{ color:rgba(246,243,230,.86); }

/* Tomme felter er ikke en fejl, saa hintet er neutralt */
.missing-hint.show{ color:var(--ink-soft); font-weight:600; }

/* Gennemsyn af runden foer den gemmes */
.review-standing{ display:flex; flex-direction:column; gap:6px; margin:14px 0 18px; }
.review-row{ display:grid; grid-template-columns:38px 1fr auto auto; align-items:center; gap:10px;
  background:var(--chalk-2); border-radius:var(--radius-sm); padding:10px 14px; }
.review-row.lead{ background:linear-gradient(100deg, rgba(243,194,32,.28), var(--chalk-2)); }
.review-rank{ font-size:19px; text-align:center; font-family:var(--fmono); font-weight:800; }
.review-name{ display:flex; flex-direction:column; }
.review-name em{ font-style:normal; font-size:12px; color:var(--ink-soft); }
.review-strokes{ font-size:14px; color:var(--ink-soft); }
.review-vspar{ font-weight:800; font-size:18px; min-width:46px; text-align:right; }

@media (max-width:600px){
  .scope-switch{ grid-template-columns:1fr; }
  .review-row{ grid-template-columns:30px 1fr auto; }
  .review-strokes{ grid-column:2; font-size:12px; }
}

/* Skillelinje mellem fulde runder og 9-hullers runder i ranglister */
.lb-split td{ background:var(--chalk-2); font-family:var(--fdisplay); text-transform:uppercase;
  letter-spacing:.08em; font-size:11.5px; color:var(--ink-soft); padding:7px 14px; }
.lb-split:hover td{ background:var(--chalk-2); }
.duel-split{ font-family:var(--fdisplay); text-transform:uppercase; letter-spacing:.08em;
  font-size:11px; color:var(--ink-soft); padding:6px 4px 2px; }