/* Zwergengolf – „Aushang am Vereinsheim“: Waschbetonplatten, angepinnte Zettel, Emaille-Schilder, Urkunde.
   Nachts: „Gartenparty“ mit Lichterkette. Schriften: Shrikhand (Schilder, Zahlen) + Courier Prime (Schreibmaschine). */
@font-face { font-family: 'Shrikhand'; font-weight: 400; font-display: swap; src: url('../fonts/shrikhand/shrikhand-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: 'Shrikhand'; font-weight: 400; font-display: swap; src: url('../fonts/shrikhand/shrikhand-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Courier Prime'; font-weight: 400; font-display: swap; src: url('../fonts/courier/courier-prime-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-weight: 700; font-display: swap; src: url('../fonts/courier/courier-prime-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/courier/courier-prime-latin-400-italic.woff2') format('woff2'); }

:root {
  --concrete: #d9d2c1;
  --pebble: #c4bba7;
  --pebble2: #e8e2d3;
  --paper: #f7f0dc;
  --paper-line: #d8ccab;
  --ink: #26261f;
  --ink-soft: #5b5a4c;
  --red: #d23c2c;
  --red-dark: #9e2a1f;
  --blue: #2d5aa6;
  --green: #2f6b35;
  --enamel: #1f4f2a;
  --enamel-text: #f4efe0;
  --yellow: #f2c230;
  --marker: #f6e27a;
  --wood: #a06a36;
  --wood-dark: #6e4522;
  --soil: #7b5a3c;
  --shadow: rgba(38, 38, 31, .28);
  --on-red: #fff8ea;
  color-scheme: light;
}
[data-theme='dark'] {
  --concrete: #1b2228;
  --pebble: #263039;
  --pebble2: #151b20;
  --paper: #2b2a24;
  --paper-line: #49473b;
  --ink: #efe6cc;
  --ink-soft: #b9b09a;
  --red: #e0533f;
  --red-dark: #8e2a1f;
  --enamel: #173b20;
  --marker: #6b5a17;
  --soil: #2a2119;
  --shadow: rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background-color: var(--concrete);
  background-image:
    radial-gradient(circle at 30% 40%, var(--pebble) 2px, transparent 2.6px),
    radial-gradient(circle at 70% 75%, var(--pebble2) 1.6px, transparent 2.2px),
    radial-gradient(circle at 55% 15%, var(--pebble) 1.2px, transparent 1.8px);
  background-size: 23px 19px, 17px 21px, 29px 31px;
  color: var(--ink);
  font: 400 16px/1.45 'Courier Prime', 'Courier New', monospace;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.h2 { margin: 0 0 .6rem; font: 400 1.35rem/1.1 'Shrikhand', serif; letter-spacing: .01em; }
.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; font-weight: 700; }
.lead { margin: .2rem 0 .6rem; }

/* ---------- Zettel ---------- */
.sheet {
  position: relative;
  background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 25px, var(--paper-line) 25px 26px);
  background-position: 0 44px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 1.1rem 1.15rem 1rem;
  box-shadow: 4px 5px 0 var(--shadow);
}
.pin {
  position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--ink); box-shadow: inset -3px -3px 0 rgba(0,0,0,.25), 2px 3px 0 var(--shadow);
}
.pin::after { content: ''; position: absolute; top: 3px; left: 4px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.7); }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; padding: .45em 1em;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 5px;
  box-shadow: 0 3px 0 var(--ink);
  font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-main { background: var(--red); color: var(--on-red); font: 400 1.15rem/1 'Shrikhand', serif; padding: .55em 1.1em .5em; letter-spacing: .01em; }
.btn-quiet { background: transparent; box-shadow: none; border-style: dashed; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }

/* ---------- Start ---------- */
.start { max-width: 1120px; margin: 0 auto; padding: 1.4rem 16px 2.5rem; }
.masthead { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 2rem; position: relative; }
[data-theme='dark'] .masthead::before {
  /* Lichterkette */
  content: ''; position: absolute; left: -16px; right: -16px; top: -1.2rem; height: 18px;
  background: radial-gradient(circle at 50% 70%, #ffd36b 4px, rgba(255, 211, 107, .25) 7px, transparent 9px) 0 0 / 34px 18px repeat-x;
  border-top: 1.5px solid #59544a;
}
.mascot { width: 104px; height: 130px; flex: none; transform: rotate(-6deg); filter: drop-shadow(4px 5px 0 var(--shadow)); --line: #26261f; }
.club { margin: 0; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.logo { margin: .1rem 0 .3rem; font: 400 clamp(2.6rem, 8vw, 4.6rem)/.95 'Shrikhand', serif; color: var(--ink); transform: rotate(-2deg); transform-origin: left; text-shadow: 3px 3px 0 var(--yellow); }
.logo span { color: var(--red); }
.tagline { margin: 0; max-width: 34rem; font-size: 1.05rem; }

.masthead > div { min-width: 0; }
@media (max-width: 560px) {
  .masthead { gap: .6rem; margin-bottom: 1.4rem; }
  .mascot { width: 62px; height: 78px; }
  .logo { font-size: clamp(1.8rem, 10.2vw, 2.6rem); }
  .tagline { font-size: .95rem; }
}
.board { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 1.6rem; align-items: start; }
.sheet-a { transform: rotate(-.7deg); }
.sheet-b { transform: rotate(.6deg); margin-top: .8rem; }
.sheet-c { transform: rotate(-.4deg); }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } .sheet-b { margin-top: 0; } }

.field { display: block; margin: .3rem 0 .8rem; }
.field-label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .25rem; }
.field input, .code-input, .set input[type='number'] {
  width: 100%; min-height: 44px; padding: .45em .7em;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; outline: none;
}
.field input:focus, .code-input:focus { box-shadow: 0 0 0 3px var(--marker); }

.inks { border: 0; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.inks legend { padding: 0; margin-bottom: .35rem; }
.ink { position: relative; cursor: pointer; }
.ink input { position: absolute; opacity: 0; }
.ink i {
  display: block; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #1a1a14;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.75) 0 3px, transparent 4px), radial-gradient(rgba(0,0,0,.14) 1px, transparent 1.6px) 0 0 / 5px 5px, var(--c);
}
.ink input:checked + i { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.ink input:focus-visible + i { outline: 3px solid var(--blue); outline-offset: 5px; }

.actions { display: grid; gap: .7rem; }
.join { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.code-input { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; text-align: center; }

.account { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; padding: .5rem .6rem; border: 1.5px dashed var(--ink); border-radius: 4px; background: color-mix(in srgb, var(--paper) 70%, var(--marker)); }
.account img { border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.account small { display: block; }

.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.room-list .empty { font-style: italic; color: var(--ink-soft); }
.room-btn {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; text-align: left;
  padding: .5rem .7rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; cursor: pointer; box-shadow: 0 2px 0 var(--ink);
}
.room-btn b { font: 400 1.05rem 'Shrikhand', serif; letter-spacing: .1em; }
.room-btn small { color: var(--ink-soft); }
.room-btn .fill { font-weight: 700; }
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .95rem; }
.rules b { font-weight: 700; margin-right: .25rem; }
.foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .6rem; border-top: 1.5px dashed var(--ink); }

/* ---------- Spiel ---------- */
.play { min-height: 100dvh; display: flex; flex-direction: column; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem 16px; border-bottom: 2px solid var(--ink); background: var(--paper); }
.chip {
  min-height: 38px; padding: .2em .8em; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 var(--ink);
}
.chip:disabled { cursor: default; box-shadow: none; }
.chip-code b { font: 400 1rem 'Shrikhand', serif; letter-spacing: .12em; margin-left: .2em; }
.bar-info { margin: 0 0 0 auto; font-weight: 700; color: var(--ink-soft); }

.grounds { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; padding: .8rem 16px 1.2rem; align-items: start; }
@media (max-width: 980px) { .grounds { grid-template-columns: 1fr; } }

.course-wrap { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.hud { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.plaque {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  padding: .3rem .85rem .35rem; border-radius: 7px;
  background: var(--enamel); color: var(--enamel-text);
  box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px var(--enamel-text), 3px 4px 0 var(--shadow);
}
.plaque b { font: 400 1rem 'Shrikhand', serif; }
.plaque span { font: 400 1.15rem 'Shrikhand', serif; }
.plaque small { font-weight: 700; opacity: .85; }
.timer { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.timer svg { width: 20px; height: 20px; }
.timer.low { background: var(--red); color: var(--on-red); border-color: var(--ink); animation: wobble .5s infinite alternate; }
@keyframes wobble { to { transform: rotate(-4deg); } }

.stage {
  position: relative; width: 100%; aspect-ratio: 960 / 560; max-height: calc(100dvh - 190px); margin: 0 auto;
  background: var(--soil); border: 2px solid var(--ink); border-radius: 6px; overflow: hidden;
  box-shadow: 4px 5px 0 var(--shadow);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
@media (max-width: 720px) and (orientation: portrait) {
  .stage { aspect-ratio: 560 / 960; max-height: calc(100dvh - 160px); }
  .grounds { padding-inline: 8px; }
}
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.intro, .between { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.intro {
  width: min(88%, 470px); padding: 1rem 1.3rem 1.1rem; text-align: center; color: #fbf3df;
  background: var(--wood) repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,0,0,.18) 22px 24px);
  border: 3px solid #26261f; border-radius: 6px; box-shadow: 5px 6px 0 rgba(0,0,0,.35);
  animation: swing .6s cubic-bezier(.3,1.6,.5,1) both;
}
.intro::before, .intro::after { content: ''; position: absolute; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #3b3330; }
.intro::before { left: 9px; } .intro::after { right: 9px; }
@keyframes swing { from { transform: translate(-50%, -80%) rotate(-6deg); opacity: 0; } }
@keyframes hang { from { transform: translateY(-40px) rotate(-4deg); opacity: 0; } }
.intro-no { margin: 0; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; }
.intro-name { margin: .2rem 0 .4rem; font: 400 clamp(1.5rem, 4vw, 2.2rem)/1.05 'Shrikhand', serif; text-shadow: 2px 2px 0 #26261f; }
.intro-blurb { margin: 0 0 .5rem; }
.intro-go { margin: 0; font: 400 1.2rem 'Shrikhand', serif; color: var(--yellow); }

.between { width: min(90%, 420px); max-height: 90%; overflow: auto; }
.between { background: var(--paper); border: 2px solid var(--ink); padding: .9rem 1rem; box-shadow: 5px 6px 0 rgba(0,0,0,.35); border-radius: 3px; }
.between-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.between-list li { display: grid; grid-template-columns: auto 1fr auto 2.2em; gap: .5rem; align-items: center; }
.between-list li.me { font-weight: 700; background: var(--marker); }
.between-list em { font-style: italic; color: var(--ink-soft); }
.between-list b { font: 400 1.15rem 'Shrikhand', serif; text-align: right; }
.between-next { margin: .6rem 0 0; font-weight: 700; }

.status { display: grid; grid-template-columns: 1fr minmax(90px, 200px) auto; align-items: center; gap: .8rem; min-height: 40px; }
.status-text { margin: 0; font-weight: 700; }
.strokes { margin: 0; font: 400 1.05rem 'Shrikhand', serif; white-space: nowrap; }
.meter { height: 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; opacity: .35; transition: opacity .15s; }
.meter.on { opacity: 1; }
.meter i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--green) 0 50%, var(--yellow) 50% 85%, var(--red) 85%); background-size: 100% 100%; }
@media (max-width: 560px) { .status { grid-template-columns: 1fr auto; } .meter { grid-column: 1 / -1; grid-row: 2; } }

.side { display: grid; gap: 1rem; }
.panel .setup { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.card-scroll { overflow-x: auto; }
.scorecard { border-collapse: collapse; width: 100%; font-size: .88rem; font-variant-numeric: tabular-nums; background: var(--paper); }
.scorecard th, .scorecard td { border: 1px solid var(--ink); padding: .15rem .3rem; text-align: center; min-width: 1.7em; }
.scorecard .nm { text-align: left; white-space: nowrap; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.scorecard .nm small { font-weight: 400; color: var(--ink-soft); }
.scorecard thead th { font-weight: 700; }
.scorecard .par td, .scorecard .par th { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.scorecard .cur { background: var(--marker); }
.scorecard .sum { font-weight: 700; }
.scorecard tr.me th, .scorecard tr.me td { font-weight: 700; }
.scorecard tr.me .nm { text-decoration: underline wavy var(--red) 1.5px; text-underline-offset: 3px; }
.scorecard tr.off { opacity: .5; }
.scorecard .under { display: inline-block; min-width: 1.4em; border: 1.5px solid var(--green); border-radius: 50%; }
.scorecard .over { color: var(--red); }
.scorecard .mercy { color: var(--red); text-decoration: line-through; }
.scorecard .live { color: var(--ink-soft); }
.dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; border: 1.5px solid #1a1a14; background: var(--c); margin-right: .3em; vertical-align: -.05em; }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .9rem; max-height: 15rem; overflow: auto; }
.log li::before { content: '– '; }
.log li.empty::before { content: ''; }
.log .good { color: var(--green); font-weight: 700; }
.log .bad { color: var(--red); font-weight: 700; }
[data-theme='dark'] .log .good { color: #8fd17f; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(27, 26, 20, .55); overflow: auto; }
.card { width: min(100%, 640px); max-height: calc(100dvh - 32px); overflow: auto; background-image: none; }
.card-sub { margin: -.3rem 0 .8rem; color: var(--ink-soft); }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.set { display: grid; gap: .3rem; font-weight: 700; font-size: .92rem; margin: 0; padding: 0; border: 0; }
.set legend { padding: 0; margin-bottom: .3rem; }
.set.wide { grid-column: 1 / -1; }
.set small { font-weight: 400; color: var(--ink-soft); }
.seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: .3em .7em; border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; font-weight: 700; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.seg input:disabled + span { cursor: default; opacity: .6; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 700; }
.check input { width: 20px; height: 20px; accent-color: var(--red); }
.note { font-size: .85rem; color: var(--ink-soft); }
.members { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.members li { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .55rem; border: 1.5px solid var(--ink); border-radius: 999px; }
.members li.off { opacity: .5; }
.members button { margin-left: .2rem; border: 0; background: var(--red); color: var(--on-red); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-weight: 700; line-height: 1; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }
.card-actions .btn-quiet { margin-right: auto; }
@media (max-width: 560px) { .set-grid { grid-template-columns: 1fr; } }

.certificate {
  position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 1.6rem 1.6rem 1.3rem; text-align: center;
  background: #fbf5e4; color: #26261f;
  border: 3px double #26261f; outline: 8px solid #fbf5e4; outline-offset: 0;
  box-shadow: 0 0 0 10px #26261f, 8px 10px 0 10px rgba(0,0,0,.35);
  animation: hang .5s cubic-bezier(.3,1.6,.5,1) both;
}
.certificate .btn { background: #fbf5e4; color: #26261f; border-color: #26261f; box-shadow: 0 3px 0 #26261f; }
.certificate .btn-main { background: #d23c2c; color: #fff8ea; }
.cert-club { margin: 0; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.cert-title { margin: .2rem 0; font: 400 2.6rem/1 'Shrikhand', serif; color: #9e2a1f; }
.cert-text { margin: .2rem 0; }
.cert-name { margin: .2rem 0; font: 400 1.7rem/1.1 'Shrikhand', serif; text-decoration: underline wavy #e0a92a 2px; text-underline-offset: 6px; }
.cert-gnome { position: absolute; right: 14px; top: 14px; width: 62px; height: 78px; transform: rotate(8deg); --line: #26261f; }
.ranking { list-style: none; margin: 1rem 0 .4rem; padding: 0; text-align: left; display: grid; gap: .2rem; }
.ranking li { display: grid; grid-template-columns: 2em auto 1fr auto; gap: .4rem; align-items: center; padding: .1rem .3rem; border-bottom: 1px dotted #26261f; }
.ranking li.me { background: #f6e27a; font-weight: 700; }
.ranking .rk { font-weight: 700; }
.ranking em { font: 400 1.05rem 'Shrikhand', serif; font-style: normal; }
.ranking small { color: #5b5a4c; }
.certificate .row { justify-content: center; }
.certificate .lead { color: #5b5a4c; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; display: grid; gap: .4rem; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: .55rem .8rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 3px 4px 0 var(--shadow); font-weight: 700; animation: pop .25s ease-out; transform: rotate(-.6deg); }
.toast.error { background: var(--red); color: var(--on-red); }
@keyframes pop { from { transform: translateY(12px) rotate(-.6deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}