/* Front 9 — Stil Brettspiel. Werte aus dem Mockup tools/html/tauziehen-stil-mockup.html
   (Abschnitt „Titel & Game Over"); dort gemessen: Play/Again-Oberkante 558,4 px bei
   375×812, Textkontrast ≥ 4,5 : 1. Kräftige Farbe nur für Spielinformation. */
:root {
  --ink: #3b2f26; --panel: #efe3c8; --bg: #e9dcc0; --wood: #a57447; --cream: #f6ecd6;
  --btn: #dccaa3; --btnOn: #c79a58; --mute: #65543f; --sh: rgba(45, 32, 20, .30);
  --own: #2f6db0; --own-ink: #2a62a0; --enemy: #cf4a2a; --meadow: #b3b276; --rock: #b3ab9f;
  --ng-menu-line: #3b2f26; --ng-menu-btn-bg: rgba(239, 227, 200, .92); --ng-menu-fg: #3b2f26;
  --font: "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
.reserve { visibility: hidden; }

.screen { position: fixed; inset: 0; }
.card { position: absolute; left: 50%; transform: translateX(-50%); width: min(343px, calc(100% - 32px));
  top: calc(env(safe-area-inset-top, 0px) + 64px); bottom: clamp(24px, 13.3vh, 108px);
  background: var(--panel); border: 2.6px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--sh);
  display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px 10.2px; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none;
  background: linear-gradient(rgba(255, 248, 230, .28), rgba(255, 248, 230, 0) 30%); }

/* Titel */
.title-top, .go-top { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.pb { display: flex; flex-direction: column; align-items: center; min-height: 52px; justify-content: center; }
.pb-label, .go-label, .today-lab { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.pb-value { font-size: 26px; font-weight: 800; line-height: 1.15; }
.first-rule { font-size: 15px; font-weight: 700; line-height: 1.3; max-width: 260px; }
h1.logo { margin: 14px 0 4px; display: flex; align-items: center; justify-content: center; }
.plank { display: inline-block; padding: 9px 22px 7px; border: 2.6px solid var(--ink); border-radius: 10px; box-shadow: 3px 4px 0 var(--sh);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 26px, rgba(60, 35, 18, .13) 26px 28px), var(--wood);
  color: var(--cream); font-size: 50px; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.token { position: relative; margin-left: -12px; width: 60px; height: 60px; border-radius: 50%; background: var(--cream);
  border: 2.6px solid var(--ink); box-shadow: 3px 4px 0 var(--sh); display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: var(--ink); transform: rotate(-8deg); }
.tagline { margin: 6px 0 0; font-size: 15px; font-style: italic; }
.rank-chips { display: flex; gap: 8px; margin-top: 10px; min-height: 28px; }
.rank-chip { font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 2px solid var(--ink); }
.rank-chip.week { background: var(--btnOn); }
.rank-chip.seed { background: var(--panel); border-style: dashed; }
.foe-banner { margin: 6px 0 0; font-size: 13px; }
.title-bottom, .go-bottom { display: flex; flex-direction: column; align-items: center; position: relative; }
.daily-slots { display: flex; gap: 6px; height: 24px; margin-bottom: 2px; }
.daily-sub { font-size: 12px; color: var(--mute); height: 16px; margin-bottom: 8px; }
.daily-btn { width: 230px; height: 42px; border: 2px solid var(--ink); border-radius: 12px; background: var(--panel); color: var(--ink);
  font-size: 16px; font-weight: 700; box-shadow: 2px 3px 0 var(--sh); margin-bottom: 14px; }
.play-btn { width: 300px; max-width: 100%; height: 75.4px; border: 2.6px solid var(--ink); border-radius: 16px;
  background: linear-gradient(rgba(255, 248, 230, .24) 0 34%, rgba(255, 248, 230, 0) 34%), var(--btnOn);
  color: var(--ink); font-size: 30px; font-weight: 900; letter-spacing: .05em; box-shadow: 3px 5px 0 var(--sh); }
.play-btn:active, .daily-btn:active, .stance-btn:active { transform: translate(2px, 3px); box-shadow: 1px 2px 0 var(--sh); }
.below { height: 44px; margin-top: 14px; width: 100%; display: flex; align-items: center; justify-content: center; }
.today { flex-direction: column; gap: 4px; }

/* Game Over */
.go-title { font-size: 25px; font-weight: 900; letter-spacing: .06em; color: var(--cream); padding: 6px 18px 5px;
  border: 2.6px solid var(--ink); border-radius: 10px; box-shadow: 3px 4px 0 var(--sh); }
.go-title.win { background: var(--own); }
.go-title.loss { background: var(--enemy); }
.go-meta { font-size: 13px; color: var(--mute); margin-top: 6px; }
.go-label { margin-top: 8px; }
.go-value { font-size: 46px; font-weight: 900; line-height: 1.05; padding: 0 6px; }
.go-value.new { background: linear-gradient(rgba(0, 0, 0, 0) 60%, #e8c27a 60%, #e8c27a 92%, rgba(0, 0, 0, 0) 92%); }
.go-best { font-size: 13.5px; margin-top: 2px; }
.go-break { width: 250px; margin-top: 8px; font-size: 13px; }
.go-break .r { display: flex; gap: 6px; align-items: baseline; line-height: 1.55; }
.go-break .l { white-space: nowrap; }
.go-break .dots { flex: 1; border-bottom: 1.5px dotted rgba(59, 47, 38, .45); transform: translateY(-3px); }
.go-break .v { font-weight: 800; font-variant-numeric: tabular-nums; }
.go-break .r.bonus .v { color: var(--own-ink); }
.go-rank { font-size: 13.5px; margin-top: 6px; min-height: 20px; }
.go-cta-zone { height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cta-btn { height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--btn);
  font-size: 15px; font-weight: 800; color: var(--ink); box-shadow: 2px 3px 0 var(--sh); }
.cta-btn.off { visibility: hidden; }
.go-note { margin: 4px 0 0; font-size: 12px; }
.quiet-btn { background: none; border: none; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; padding: 8px 10px; }
/* Namens- und Register-Sheet: gameover-ui.js schaltet nur die Klasse .open. Deshalb
   verstecken opacity/transform statt display, sonst bliebe das Sheet trotz .open weg. */
.sheet-backdrop { position: absolute; inset: 0; z-index: 20; background: rgba(45, 32, 20, .45);
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; left: 50%; bottom: 0; z-index: 21; width: min(375px, 100%);
  background: var(--panel); border: 2.6px solid var(--ink); border-bottom: none; border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translate(-50%, calc(100% + 8px)); transition: transform .3s cubic-bezier(.32, 1, .32, 1); }
.sheet.open { transform: translate(-50%, 0); }
.sheet form { display: flex; flex-direction: column; gap: 8px; }
.sheet input { width: 100%; height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--cream); color: var(--ink); font-family: inherit; font-size: 16px; outline: none; user-select: text; -webkit-user-select: text; }
.sheet input:focus { border-color: var(--own); }
.sheet input::placeholder { color: var(--mute); }
.sheet button[type="submit"] { height: 48px; border: 2.6px solid var(--ink); border-radius: 12px; background: var(--btnOn);
  color: var(--ink); font-size: 17px; font-weight: 900; box-shadow: 2px 3px 0 var(--sh); }
.sheet button[type="button"] { align-self: center; background: none; border: none; color: var(--ink); font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 10px; }
#name-error, #reg-error { margin: 0; font-size: 13px; font-weight: 700; color: #7a2e17; }
.reg-saved { margin: 4px 0; text-align: center; font-weight: 800; }

/* Lauf (M1 Teil 1: Front-Streifen und Lesezeile) */
#screen-play { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 60px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px); }
#screen-play.hidden { display: none; }
.strip { position: relative; width: min(359px, 100%); display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; gap: 6px;
  padding: 8px 8px 6px; background: var(--panel); border: 1.8px solid var(--ink); border-radius: 12px; box-shadow: 2px 3px 0 var(--sh); }
.tower { height: 20px; border: 1.8px solid var(--ink); border-radius: 3px; }
.tower.own { background: #9fb7d4; }
.tower.foe { background: #e7a58f; }
.lane-bar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 16px; border: 1.8px solid var(--ink); border-radius: 4px; overflow: visible; }
.zone { display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--cream); background: #c9bfa6; }
.zone + .zone { border-left: 1.4px solid var(--ink); }
.zone.own { background: #6f95c2; }
.zone.foe { background: #d8876c; }
.front-mark { position: absolute; top: -7px; bottom: -4px; width: 0; border-left: 2.4px solid var(--ink); left: 50%; }
.front-mark::before { content: ""; position: absolute; left: -7px; top: -2px; border: 6px solid transparent; border-top: 7px solid var(--ink); }
.gate-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 6px; align-items: center; margin-top: 4px; }
.gate-bar { height: 7px; border: 1.4px solid var(--ink); border-radius: 3px; background: #d9ceb5; overflow: hidden; }
.gate-bar i { display: block; height: 100%; width: 100%; }
.gate-bar i.own { background: var(--own); }
.gate-bar i.foe { background: var(--enemy); margin-left: auto; }
.gate-lab { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.chips { display: flex; gap: 8px; width: min(359px, 100%); }
.chip { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; height: 42px; padding: 0 7px; background: var(--panel);
  border: 1.8px solid var(--ink); border-radius: 9px; box-shadow: 2px 3px 0 var(--sh); }
.chip.warn { background: #e8c27a; }
.chip-val { display: flex; flex-direction: column; line-height: 1.05; }
.chip-val b { font-size: 15px; }
.chip-val small { font-size: 11px; font-weight: 600; opacity: .72; }
.views { position: relative; flex: 1; min-height: 0; width: min(359px, 100%); }
.view { position: absolute; inset: 0; border: 2.6px solid var(--ink); border-radius: 14px; box-shadow: 3px 4px 0 var(--sh);
  overflow: hidden; background: var(--meadow); }
.view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.orient-btn { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border: 1.8px solid var(--ink); border-radius: 10px;
  background: rgba(239, 227, 200, .92); color: var(--ink); font-size: 20px; font-weight: 800; box-shadow: 2px 2px 0 var(--sh); }
.resume-btn { margin-top: 8px; width: 100%; min-height: 44px; padding: 8px 16px; border: 2.2px solid var(--ink); border-radius: 12px;
  background: var(--panel); color: var(--ink); font-size: 15px; font-weight: 800; box-shadow: 2px 3px 0 var(--sh); }

.gate-acts { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; }
.gate-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 66px; height: 44px; padding: 0 8px; border: 1.8px solid var(--ink); border-radius: 10px;
  background: rgba(239, 227, 200, .92); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.1;
  box-shadow: 2px 2px 0 var(--sh); }
.gate-btn b { font-size: 13px; font-variant-numeric: tabular-nums; }
.gate-btn b:not(:empty)::before { content: "◆ "; color: #d2a23c; }
.gate-btn:disabled { opacity: .45; box-shadow: none; }
/* Einheiten-Chips: dieselbe Form wie die Rohstoff-Chips, nur mit Figur statt Punkt. */
.chips.units .chip { gap: 5px; }
.unit-pic { width: 22px; height: 23px; display: block; flex: none; }
.chip.dim { opacity: .42; }
.flag { width: 20px; height: 24px; }
.flag.on { color: var(--own); }
.flag.off { color: #b3ab9f; }
.daily-btn:disabled { opacity: .55; }
.thumb-bar { width: min(359px, 100%); display: flex; justify-content: center; }
.stance { display: flex; padding: 3px; gap: 3px; background: var(--btn); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 2px 3px 0 var(--sh); }
.stance-btn { min-width: 110px; height: 44px; border: none; border-radius: 19px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 800; }
.stance-btn.on { background: var(--btnOn); box-shadow: inset 0 0 0 1.6px var(--ink); }

.res-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1.4px solid var(--ink); flex: none; }
.res-dot.food { background: #8ca84e; }
.res-dot.wood { background: #a57447; border-radius: 4px; }
.res-dot.iron { background: #8e969c; border-radius: 2px; }
.res-dot.gold { background: #d2a23c; }
.army { font-weight: 800; }
.army.low { color: #9a3a1f; }
.warn-line { font-weight: 700; color: #7a4a10; }
.warn-line:empty { display: none; }
.thumb-bar { gap: 6px; align-items: center; }
.view-btn { width: 80px; height: 48px; border: 2px solid var(--ink); border-radius: 12px; background: var(--panel); color: var(--ink);
  font-size: 15px; font-weight: 800; box-shadow: 2px 3px 0 var(--sh); }
.view-btn.on { background: var(--btnOn); }
.stance-btn { min-width: 80px; }
.terrs { display: flex; gap: 6px; }
.terr { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 2px 8px 2px 6px;
  border: 1.6px solid var(--ink); border-radius: 999px; background: var(--bg); }
.terr svg { width: 14px; height: 14px; }
.speed-bar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%);
  z-index: 900; display: flex; gap: 4px; padding: 3px; border-radius: 12px;
  background: var(--ng-menu-btn-bg); border: 1px solid var(--ng-menu-line); }
.spd-btn { min-width: 38px; height: 36px; border: none; border-radius: 9px; background: transparent;
  color: var(--ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.spd-btn.on { background: var(--btnOn); box-shadow: inset 0 0 0 1.6px var(--ink); }

.plot-backdrop { position: fixed; inset: 0; background: rgba(45, 32, 20, .25); z-index: 40; }
/* Mittig im Bild und etwa so gross wie die Karte: Man soll sehen, dass man in einem
   eigenen Fenster steht, ohne dass es den ganzen Schirm nimmt. Die Liste scrollt, wenn
   sie laenger wird als der Platz — auf der Wiese stehen inzwischen fuenf Optionen. */
.plot-sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(330px, calc(100% - 32px)); max-height: min(62vh, 430px); display: flex; flex-direction: column;
  z-index: 41; background: var(--panel); border: 2.6px solid var(--ink); border-radius: 16px;
  box-shadow: 3px 5px 0 var(--sh); padding: 10px 12px 12px; }
.plot-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.plot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.plot-title { font-size: 17px; font-weight: 900; }
.plot-close { width: 36px; height: 36px; border: 1.8px solid var(--ink); border-radius: 10px; background: var(--btn); font-size: 20px; font-weight: 800; color: var(--ink); }
.plot-body { display: flex; flex-direction: column; gap: 8px; }
.sheet-opt { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name cost" "eff up"; gap: 2px 10px; align-items: center;
  text-align: left; padding: 9px 11px; border: 2px solid var(--ink); border-radius: 12px; background: var(--btnOn); color: var(--ink); box-shadow: 2px 3px 0 var(--sh); }
.sheet-opt:disabled { background: var(--btn); opacity: .6; }
.opt-name { grid-area: name; font-size: 15px; font-weight: 800; }
.opt-eff { grid-area: eff; font-size: 12.5px; }
.opt-cost { grid-area: cost; display: flex; gap: 8px; font-size: 13px; font-weight: 800; }
/* Der laufende Unterhalt steht UNTER dem Preis, kleiner und blasser: Der Preis ist die
   Huerde von jetzt, der Unterhalt die von danach — beide gehoeren ins Bild, aber nicht
   gleich laut. */
.opt-up { grid-area: up; display: flex; gap: 6px; justify-self: end; font-size: 11.5px; font-weight: 700; color: var(--mute); }
.opt-up .res-dot { width: 9px; height: 9px; }
.sheet-now .opt-up { justify-content: flex-start; margin-top: 3px; }
.cost { display: inline-flex; align-items: center; gap: 3px; }
.cost .res-dot { width: 11px; height: 11px; }
.sheet-now { font-size: 14px; padding: 2px 2px 4px; }
.sheet-down { align-self: center; background: none; border: none; color: #7a2e17; font-size: 14px; font-weight: 800; text-decoration: underline; padding: 6px 10px; }