/* Game layout: players on the left, the hoop in the middle, conversation and input on the right. */

.spiel { min-height: 100vh; }
.tisch {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 430px;
  column-gap: var(--s5);
  align-items: start;
  max-width: 1720px;
  margin: 0 auto;
  padding: var(--s5);
}
.platz { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.seite { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.neben { display: flex; flex-direction: column; gap: var(--s5); }

/* ---- header in the left column -------------------------------------------------------------- */
.kopf-spiel { display: grid; gap: var(--s2); justify-items: start; }
.kopf-info { font-size: 13px; color: var(--auf-tisch-leise); line-height: 1.45; }
.kopf-info .zahl { color: var(--auf-tisch); font-size: 12.5px; }
.kopf-knoepfe { display: flex; flex-wrap: wrap; gap: 2px var(--s3); }
.kopf-knoepfe a { color: var(--auf-tisch-leise); font-size: 13.5px; font-weight: 600; text-decoration: underline dashed; text-underline-offset: 4px; }
.kopf-knoepfe a:hover { color: var(--auf-tisch); }

/* ---- players as spools of thread ------------------------------------------------------------------ */
.spulen { display: grid; gap: var(--s5); }
.spulen-3, .spulen-4 { gap: var(--s4); }
.spule {
  --garn: var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s3);
  row-gap: var(--s2);
  position: relative;
}
.rolle { width: 38px; height: 48px; flex: none; filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.45)); }
.rolle-garn { fill: var(--garn); }
.wicklung { fill: none; stroke: var(--garn-dunkel); stroke-width: 0.7; opacity: 0.7; }
.wicklung.hell { stroke: var(--garn-hell); opacity: 0.8; }
.rolle-holz { fill: #D2AC73; stroke: #8A6231; stroke-width: 0.8; }
.rolle-loch { fill: #5A3A18; }
.rolle-ende { fill: none; stroke: var(--garn); stroke-width: 1.6; stroke-linecap: round; }
.spule-name { font-family: var(--f-titel); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: var(--ink-hell); overflow-wrap: anywhere; }
.spulen-3 .spule-name, .spulen-4 .spule-name { font-size: 24px; }
.spule-punkte { font-size: 13px; color: var(--auf-tisch-leise); margin-top: 3px; }
.spule-punkte .zahl { color: var(--auf-tisch); font-size: 16px; }
.spule-status {
  grid-column: 1 / -1; justify-self: start;
  font-weight: 700; font-size: 12.5px; color: #fff;
  background: var(--ink-text); padding: 2px 9px; border-radius: 2px;
  outline: 1.5px dashed rgba(255, 255, 255, 0.5); outline-offset: -4px;
}
.spule.ist-dran .rolle { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ink) 70%, transparent)) drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.45)); }
.spule-daten { grid-column: 1 / -1; display: grid; gap: var(--s2); }
.spule-daten dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spule-daten dd { display: flex; align-items: center; gap: var(--s3); font-weight: 650; font-size: 14px; line-height: 1.2; }
.wert { display: grid; }
.wert-titel { font-size: 12px; font-weight: 400; color: var(--auf-tisch-leise); }
.motiv-knopf {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--leinen);
  box-shadow: inset 0 0 0 2.5px var(--ink), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.pfeil { width: 32px; height: 32px; flex: none; }
.pfeil path { fill: none; stroke: var(--ink-hell); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.spule-knoepfe { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; }
.knopf-leer, .knopf-voll { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; }
.knopf-leer { border: 1.5px dashed var(--tisch-linie); }
.knopf-voll { background: var(--leinen); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.spule-detail { grid-column: 1 / -1; font-size: 12.5px; color: var(--auf-tisch-leise); }
.stand-notiz { margin-top: var(--s3); font-size: 12.5px; color: var(--auf-tisch-leise); }

/* ---- thinking ahead ---------------------------------------------------------------------------------- */
.voraus-titel { font-family: var(--f-titel); font-weight: 700; font-size: 16px; color: var(--ink-hell, var(--spieler-0-hell)); }
.voraus-sub { font-size: 12.5px; line-height: 1.35; color: var(--auf-tisch-leise); margin: 2px 0 var(--s2); }
.voraus ul { display: grid; gap: var(--s2); }
.voraus li {
  background: var(--leinen); background-image: var(--webung);
  padding: 5px 10px 7px 12px;
  border-left: 4px solid var(--ink, var(--spieler-0));
  border-radius: 1px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  display: grid;
}
.voraus-name { font-weight: 700; font-size: 12.5px; color: var(--ink-text, var(--spieler-0-text)); }
.voraus-satz { font-size: 13.5px; line-height: 1.3; }

/* ---- already said ------------------------------------------------------------------------------------ */
.gesagt { border-top: 1px solid var(--tisch-linie); padding-top: var(--s3); }
.gesagt summary { cursor: pointer; font-family: var(--f-titel); font-weight: 700; font-size: 16px; list-style: none; display: flex; align-items: baseline; gap: var(--s2); }
.gesagt summary::-webkit-details-marker { display: none; }
.gesagt summary .zahl { font-size: 13px; color: var(--auf-tisch-leise); }
.gesagt summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--auf-tisch-leise); border-bottom: 2px solid var(--auf-tisch-leise); transform: rotate(45deg); align-self: center; }
.gesagt[open] summary::after { transform: rotate(-135deg); }
.gesagt-liste { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s2); max-height: 260px; overflow-y: auto; }
.gesagt-wort {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 13px; padding: 1px 7px 2px 6px;
  background: rgba(237, 231, 218, 0.1);
  border-left: 3px solid var(--ink);
  border-radius: 1px;
}
.gesagt-wort.leuchtet { background: var(--leinen); color: var(--tinte); outline: 2px solid var(--rot); }
.gw-art { font-family: var(--f-zahl); font-size: 11px; color: var(--auf-tisch-leise); }
.gw-grund { font-size: 11px; color: var(--auf-tisch-leise); }
.gesagt-wort.leuchtet .gw-art, .gesagt-wort.leuchtet .gw-grund { color: var(--tinte-2); }
.gesagt .leer { font-size: 13px; color: var(--auf-tisch-leise); margin-top: var(--s2); }

/* ---- the hoop in the middle ---------------------------------------------------------------------------- */
.rahmen-bereich {
  position: sticky; top: var(--s5);
  height: calc(100vh - 48px);
  min-height: 560px;
  max-height: 1060px;
  display: flex; flex-direction: column; gap: var(--s2);
  min-width: 0;
}
.tafel-blatt { flex: 1; min-height: 0; position: relative; }
.tafel-blatt .brett { width: 100%; height: 100%; }
.tafel-legende { font-size: 12.5px; color: var(--auf-tisch-leise); text-align: center; max-width: 640px; align-self: center; }
.feld-info { font-size: 13px; color: var(--auf-tisch); text-align: center; min-height: 0; max-width: 640px; align-self: center; }
.feld-info:empty { display: none; }
.aufgedeckt { display: none; }

/* steering arrows */
.steuer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); width: min(100%, 700px); align-self: center; }
.steuer-pfeil { display: flex; align-items: center; gap: var(--s2); border-radius: 2px; padding: 4px 6px; transition: background 0.2s; }
.steuer-pfeil.rechts { justify-content: flex-end; text-align: right; }
.steuer-bogen { width: 54px; height: 42px; flex: none; }
.lenk-bogen { fill: none; stroke: var(--wa-eigen-hell); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 7 4; }
.lenk-spitze { fill: none; stroke: var(--wa-eigen-hell); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.steuer-text { font-size: 12.5px; line-height: 1.3; color: var(--auf-tisch-leise); }
.steuer-text b { color: var(--wa-eigen-hell); font-weight: 650; }
.steuer-text .steuer-kopf { display: block; font-family: var(--f-titel); font-weight: 700; font-size: 17px; color: var(--auf-tisch); }
.steuer-zahl { font-size: 14px; color: var(--wa-eigen-hell); min-width: 0; }
.steuer-pfeil.an { background: rgba(147, 172, 246, 0.16); box-shadow: inset 0 0 0 1.5px var(--wa-eigen-hell); }
.steuer-mitte {
  display: grid; justify-items: center;
  background: var(--leinen); background-image: var(--webung);
  color: var(--tinte);
  padding: 6px 14px 8px;
  border-radius: 2px;
  box-shadow: 0 3px 0 var(--leinen-schatten);
  outline: 1.5px dashed var(--wa-eigen); outline-offset: -5px;
}
.steuer-name { font-family: var(--f-titel); font-weight: 800; font-size: 16px; color: var(--wa-eigen); line-height: 1.2; }
.steuer-mitte .steuer-kopf { font-size: 11.5px; color: var(--tinte-2); }
@media (prefers-reduced-motion: reduce) { .steuer-pfeil { transition: none; } }

/* ---- lower part: protocol and pattern sheet ------------------------------------------------------------ */
.unten {
  max-width: 1720px; margin: 0 auto; padding: var(--s6) var(--s5) 0;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); align-items: start;
}
.abschnitt { font-family: var(--f-titel); font-weight: 750; font-size: 24px; margin-bottom: var(--s3); }
.befund-bereich { max-width: 1100px; margin: 0 auto; padding: var(--s5) var(--s5) 0; }

/* ---- medium screens: hoop and side by side, players above ------------------------------------------------ */
@media (max-width: 1180px) {
  .tisch { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: 'kopf kopf' 'stand stand' 'rahmen seite' 'rahmen neben'; row-gap: var(--s4); }
  .platz { display: contents; }
  .kopf-spiel { grid-area: kopf; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--s4); }
  .stand { grid-area: stand; }
  .rahmen-bereich { grid-area: rahmen; }
  .seite { grid-area: seite; }
  .neben { grid-area: neben; }
  .spulen { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .stand-notiz { display: none; }
}

/* ---- phones: players, hoop, input right below; the hoop stays on top while typing ------------------------ */
@media (max-width: 760px) {
  .tisch { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4) var(--s5); }
  .neben { display: contents; }
  .kopf-spiel { order: 1; grid-template-columns: auto 1fr; row-gap: 4px; }
  .kopf-spiel .etikett-titel { padding: 6px 9px; }
  .titel-kreuz { height: 16px; }
  .kopf-info { justify-self: end; text-align: right; font-size: 12px; }
  .kopf-knoepfe { grid-column: 1 / -1; }
  .stand { order: 2; }
  .rahmen-bereich { order: 3; }
  .voraus { order: 4; }
  .seite { order: 5; }
  .gesagt { order: 6; }
  .spulen { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .spule { grid-template-columns: auto 1fr; grid-template-areas: 'rolle text' 'rolle daten'; column-gap: var(--s2); row-gap: 4px; padding: 6px 8px; border-radius: 2px; }
  .spule .rolle { grid-area: rolle; align-self: start; width: 24px; height: 31px; }
  .spule-text { grid-area: text; }
  .spule-daten { grid-area: daten; display: flex; gap: var(--s3); }
  .spule.ist-dran { background: rgba(255, 255, 255, 0.06); outline: 1.5px dashed var(--ink-hell); outline-offset: -1px; }
  .spule-name, .spulen-3 .spule-name, .spulen-4 .spule-name { font-size: 19px; }
  .spule-punkte { margin-top: 0; font-size: 12px; }
  .spule-punkte .zahl { font-size: 14px; }
  .spule-status { display: none; }
  .spule-daten dd { font-size: 12.5px; gap: 6px; }
  .wert-titel, .richtung { display: none; }
  .motiv-knopf { width: 26px; height: 26px; }
  .motiv-knopf .motiv { width: 20px; height: 20px; }
  .pfeil { width: 24px; height: 24px; }
  .spule-knoepfe, .spule-detail { display: none; }
  .spulen-2 .spule:nth-child(2) { grid-template-columns: 1fr auto; grid-template-areas: 'text rolle' 'daten rolle'; justify-items: end; text-align: right; }
  .spulen-2 .spule:nth-child(2) .spule-daten, .spulen-2 .spule:nth-child(2) .spule-daten dd { flex-direction: row-reverse; }
  .rahmen-bereich { position: relative; top: auto; height: auto; min-height: 0; max-height: none; margin: -10px calc(-1 * var(--s4)) 0; }
  .tafel-blatt .brett { height: auto; }
  .steuer { padding: 0 var(--s4); gap: var(--s2); grid-template-columns: 1fr 1fr; }
  .steuer-mitte { display: none; }
  .kopf-knoepfe #messwerte-knopf { display: none; }
  .kopf-knoepfe a, .kopf-knoepfe .leise { font-size: 13px; }
  .steuer-bogen { width: 38px; height: 30px; }
  .steuer-text .steuer-kopf { font-size: 15px; }
  .steuer-text { font-size: 11.5px; }
  .tafel-legende { display: none; }
  .feld-info { padding: 0 var(--s4); }
  .aufgedeckt { display: block; padding: 0 var(--s4); font-size: 13px; color: var(--auf-tisch-leise); }
  .aufgedeckt summary { cursor: pointer; }
  .aufgedeckt-liste { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
  .aufgedeckt-liste .mono { margin-right: 4px; }
  .voraus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); }
  .voraus-sub, .voraus-satz { display: none; }
  .voraus ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .voraus li { padding: 2px 8px 3px; border-left-width: 3px; }
  .unten { grid-template-columns: 1fr; padding: var(--s5) var(--s4) 0; gap: var(--s5); }
  .abschnitt { font-size: 21px; }
  .befund-bereich { padding: var(--s3) var(--s3) 0; }
  /* while typing: the hoop shrinks and stays pinned above the input */
  body.am-tippen .rahmen-bereich { position: sticky; top: 0; z-index: 20; background: var(--tisch); padding-bottom: 4px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); }
  body.am-tippen .tafel-blatt .brett { height: 36svh; width: 100%; }
  body.am-tippen .feld-info, body.am-tippen .aufgedeckt { display: none; }
  body.am-tippen .steuer { display: none; }
}