/* ==========================================================================
   Nebenan – helles, freundliches Layout.
   Ein einziges Farb- und Abstandssystem, das alle neun Spiele mitbenutzen.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #f4f1ec;
  --bg-tint: #eae4da;
  --card: #ffffff;
  --card-2: #fbf9f6;
  --line: #e5ded3;
  --line-strong: #cec4b4;

  --ink: #211e19;
  --ink-2: #5d564b;
  --ink-3: #8d8577;

  --accent: #16776a;
  --accent-dark: #115c52;
  --accent-ink: #ffffff;
  --accent-soft: #ddefeb;

  --danger: #b23b34;
  --danger-soft: #fae9e7;

  --p0: #c9473f;
  --p0-soft: #f9e8e6;
  --p1: #b3820e;
  --p1-soft: #fbf1d8;

  --shadow-1: 0 1px 2px rgba(33, 30, 25, .06);
  --shadow-2: 0 2px 4px rgba(33, 30, 25, .05), 0 14px 30px -18px rgba(33, 30, 25, .45);

  --r-xs: 8px;
  --r-sm: 11px;
  --r: 15px;
  --r-lg: 22px;

  --pad: clamp(16px, 4.5vw, 26px);
  --gap: clamp(14px, 3.5vw, 20px);
}

* { box-sizing: border-box; }

/* Ohne das gewinnt jedes eigene display:flex gegen das hidden-Attribut –
   und leere Kästen bleiben stehen. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
h2 { font-size: 1.02rem; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }

.icon { width: 1.25em; height: 1.25em; flex: none; display: block; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------- Grundgerüst */

.screen { display: none; flex-direction: column; min-height: 100dvh; }
.screen.is-active { display: flex; }

.wrap {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--pad))
    var(--pad)
    calc(env(safe-area-inset-bottom, 0px) + var(--pad));
}
.wrap--wide { max-width: 720px; }

/* ---------------------------------------------------------------- Bausteine */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  font-weight: 570;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--shadow-1);
  transition: transform .07s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--card-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--block { width: 100%; }
.btn--small { padding: 8px 13px; font-size: .88rem; }
.btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn--quiet:hover { background: var(--bg-tint); }
.btn--icon { padding: 9px; border-radius: 50%; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: .82rem; font-weight: 550; color: var(--ink-2); }
.field input {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  outline: none;
  width: 100%;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.note { color: var(--ink-2); font-size: .88rem; }
.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: .9rem;
}
.foot-note { margin-top: auto; padding-top: 8px; color: var(--ink-3); font-size: .8rem; text-align: center; }

/* ------------------------------------------------------------------- Start */

.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(12px, 6vh, 56px); }
.hero .mark { width: 62px; height: 62px; border-radius: 18px; box-shadow: var(--shadow-2); }
.hero .sub { color: var(--ink-2); }

.login-card { padding: clamp(18px, 5vw, 24px); display: flex; flex-direction: column; gap: 16px; }

.spinner {
  width: 30px; height: 30px; margin: auto;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------- Lobby */

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar .eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.topbar .name { font-size: 1.4rem; font-weight: 650; }

.players { display: flex; flex-direction: column; gap: 9px; }

.player {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.player .pname { font-weight: 570; }
.player .wins { margin-left: auto; color: var(--ink-2); font-size: .86rem; white-space: nowrap; }

.token { width: 15px; height: 15px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.14); background: var(--ink-3); }
.p0 .token, .token--p0 { background: var(--p0); }
.p1 .token, .token--p1 { background: var(--p1); }

.status-tag {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  color: var(--ink-3); background: var(--bg-tint);
}
.status-tag.is-on { color: var(--accent-dark); background: var(--accent-soft); }

.hint-line {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: .9rem;
}

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.section-title .count { font-size: .82rem; color: var(--ink-3); }

.games { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .games { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.gamecard {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .07s ease, border-color .15s ease, box-shadow .15s ease;
}
.gamecard:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-2); }
.gamecard:active:not(:disabled) { transform: translateY(1px); }
.gamecard:disabled { opacity: .5; cursor: default; }

.gamecard .badge {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.gamecard .badge .icon { width: 24px; height: 24px; }
.gamecard .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gamecard .title { font-weight: 610; }
.gamecard .blurb { font-size: .83rem; color: var(--ink-2); }
.gamecard .chev { margin-left: auto; color: var(--ink-3); }
@media (min-width: 520px) { .gamecard .chev { display: none; } }

/* -------------------------------------------------------------------- Spiel */

.gamebar { display: flex; align-items: center; gap: 10px; }
.chips { display: flex; gap: 8px; flex: 1; min-width: 0; }

.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  min-width: 0;
  box-shadow: var(--shadow-1);
}
.chip .cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.is-turn { border-color: var(--accent); background: var(--accent-soft); font-weight: 570; }

.board-area { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }

.status {
  text-align: center;
  color: var(--ink-2);
  font-size: .94rem;
  min-height: 1.5em;
}
.status.is-mine { color: var(--accent-dark); font-weight: 570; }

.endbar {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
}
.endbar .result { display: flex; align-items: center; gap: 9px; font-weight: 610; flex: 1; min-width: 150px; }
.endbar .actions { display: flex; gap: 8px; }
.endbar .icon { color: var(--accent); width: 22px; height: 22px; }

/* --------------------------------------------------------- Hinweise & Toast */

.conn {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: var(--danger);
  color: #fff;
  text-align: center;
  font-size: .85rem;
  font-weight: 560;
}

.toast {
  position: fixed;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  transform: translate(-50%, 10px);
  z-index: 50;
  max-width: min(90vw, 420px);
  padding: 11px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: .9rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

@keyframes shakeit { 10%,90% { transform: translateX(-2px); } 30%,70% { transform: translateX(4px); } 50% { transform: translateX(-4px); } }
.shake { animation: shakeit .34s; }

/* =============================================================== Bretter ==
   Gemeinsame Grundlage: ein quadratisches Raster, das nie breiter wird als
   der Bildschirm und dessen Zellen immer quadratisch bleiben.
   ========================================================================= */

/* minmax(0, 1fr) statt 1fr: sonst darf keine Zelle unter ihre Mindestbreite
   schrumpfen und das ganze Brett wird breiter als der Bildschirm. */
.grid-board {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--cell-gap, 3px);
  width: 100%;
  padding: var(--cell-gap, 3px);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cell {
  aspect-ratio: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--card);
  cursor: pointer;
  touch-action: manipulation;
}
.cell:disabled { cursor: default; }

.board-frame { width: min(100%, 440px); }
.legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: .88rem; color: var(--ink-2); }
.legend .item { display: flex; align-items: center; gap: 7px; }
.legend .num { font-weight: 700; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- Vier gewinnt */

.c4 { width: min(100%, 420px); display: flex; flex-direction: column; gap: var(--gap); }
/* Feste Abstände statt Prozent: prozentuale Zeilenabstände beziehen sich auf
   die Höhe des Elternteils – die steht hier aber erst nach dem Umbruch fest,
   und das Brett lief aus dem Rahmen. */
.c4-board {
  display: flex; gap: 6px;
  padding: 10px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.c4-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  background: none; border: 0; padding: 0; border-radius: var(--r-sm);
  cursor: pointer; touch-action: manipulation;
}
.c4-col:disabled { cursor: default; }
.c4-col.is-playable:hover, .c4-col.is-playable:active { background: rgba(22, 119, 106, .12); }
.c4-cell {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 2px 4px rgba(33, 30, 25, .16);
}
.c4-cell.f0 { background: var(--p0); box-shadow: inset 0 -3px 6px rgba(0,0,0,.2); }
.c4-cell.f1 { background: var(--p1); box-shadow: inset 0 -3px 6px rgba(0,0,0,.2); }
.c4-cell.is-win { outline: 3px solid var(--ink); outline-offset: -3px; }
.c4-cell.is-new { animation: dropin .3s cubic-bezier(.34, 1.28, .64, 1); }
@keyframes dropin { from { transform: translateY(-280%); } }

/* --------------------------------------------------- Ultimate Tic-Tac-Toe */

.uttt { width: min(100%, 400px); display: flex; flex-direction: column; gap: var(--gap); }
.uttt-big {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 6px; background: var(--line-strong); border-radius: var(--r);
}
.uttt-small {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  padding: 3px; background: var(--bg-tint); border-radius: var(--r-xs);
  transition: background .2s ease;
}
.uttt-small.is-open { background: var(--accent-soft); }
.uttt-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--card); border: 0; border-radius: 4px; padding: 0;
  font-size: clamp(11px, 3.4vw, 16px); font-weight: 700; line-height: 1;
  color: transparent; cursor: pointer; touch-action: manipulation;
}
.uttt-cell.m0 { color: var(--p0); }
.uttt-cell.m1 { color: var(--p1); }
.uttt-cell.is-last { box-shadow: inset 0 0 0 2px var(--ink); }
.uttt-cell:disabled { cursor: default; }
.uttt-flag {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .82);
  font-size: 2.6rem; font-weight: 800; pointer-events: none;
}
.uttt-flag.w0 { color: var(--p0); }
.uttt-flag.w1 { color: var(--p1); }
.uttt-flag.draw { color: var(--ink-3); font-size: 1rem; font-weight: 600; }
.uttt-small.is-decisive { box-shadow: 0 0 0 2px var(--ink); }

/* ------------------------------------------------------------ Käsekästchen */

.dots { width: min(100%, 400px); display: flex; flex-direction: column; gap: var(--gap); }
.dots svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.dots .edge { stroke: var(--line-strong); stroke-width: 1.3; stroke-linecap: round; }
.dots .edge.is-set { stroke: var(--ink-2); stroke-width: 3; }
.dots .edge.is-last { stroke: var(--accent); }
.dots .hit { stroke: transparent; stroke-width: 12; cursor: pointer; }
.dots .node { fill: var(--line-strong); }
.dots .box { fill: transparent; transition: fill .25s ease; }
.dots .box.own0 { fill: var(--p0-soft); }
.dots .box.own1 { fill: var(--p1-soft); }
.dots .owner { font-size: 7px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.dots .owner.own0 { fill: var(--p0); }
.dots .owner.own1 { fill: var(--p1); }

/* ---------------------------------------------------------------- Reversi */

.reversi { width: min(100%, 420px); display: flex; flex-direction: column; gap: var(--gap); }
.rv-board {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px;
  padding: 6px; background: #7ea98c; border-radius: var(--r); box-shadow: var(--shadow-1);
}
.rv-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  background: #8fb99b; border: 0; border-radius: 3px; padding: 0;
  cursor: default; touch-action: manipulation;
}
.rv-cell.is-legal { cursor: pointer; }
.rv-cell.is-legal::after {
  content: ""; width: 26%; height: 26%; border-radius: 50%;
  background: rgba(255, 255, 255, .65);
}
.rv-disc { width: 78%; height: 78%; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.rv-disc.d0 { background: var(--p0); }
.rv-disc.d1 { background: var(--p1); }
.rv-cell.is-last { box-shadow: inset 0 0 0 2px #fff; }
.rv-disc.is-flip { animation: flipin .3s ease; }
@keyframes flipin { from { transform: rotateY(90deg) scale(.7); } }

/* ------------------------------------------------------------------ Mühle */

.mill { width: min(100%, 400px); display: flex; flex-direction: column; gap: var(--gap); }
.mill svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.mill .lines { stroke: var(--line-strong); stroke-width: 1.1; fill: none; }
.mill .spot { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; }
.mill .spot.is-target { fill: var(--accent-soft); stroke: var(--accent); }
.mill .piece { stroke: rgba(0,0,0,.18); stroke-width: .8; }
.mill .piece.p0 { fill: var(--p0); }
.mill .piece.p1 { fill: var(--p1); }
.mill .piece.is-selected { stroke: var(--ink); stroke-width: 2; }
.mill .piece.is-removable { stroke: var(--danger); stroke-width: 2; }
.mill .piece.is-mill { stroke: var(--accent-dark); stroke-width: 2; }
.mill .tap { fill: transparent; cursor: pointer; }
.mill-hands { display: flex; justify-content: space-between; gap: 16px; }
.mill-hands .side { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: .84rem; color: var(--ink-2); }
.mill-hands .side + .side { align-items: flex-end; text-align: right; }
.mill-hands .who { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 560; font-size: .92rem; }
.mill-hands .stack { display: flex; gap: 3px; flex-wrap: wrap; max-width: 118px; min-height: 9px; }
.mill-hands .stack i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.mill-hands .side.p0 .stack i { background: var(--p0); }
.mill-hands .side.p1 .stack i { background: var(--p1); }
.mill-hands .count { white-space: nowrap; }

/* ----------------------------------------------------------------- Memory */

.memory { width: min(100%, 440px); display: flex; flex-direction: column; gap: var(--gap); }
/* Sechs Spalten statt vier: die Karten werden kleiner und das ganze Feld
   passt auf einen Blick auf den Schirm - bei Memory wichtiger als Größe. */
.mem-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 460px) { .mem-grid { gap: 9px; } }

.mem-card {
  aspect-ratio: 3 / 4;
  border: 0; padding: 0; background: none;
  perspective: 700px;
  cursor: pointer; touch-action: manipulation;
}
.mem-card:disabled { cursor: default; }
.mem-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .34s cubic-bezier(.4, .1, .3, 1);
  transform-style: preserve-3d;
}
.mem-card.is-open .mem-inner { transform: rotateY(180deg); }
.mem-face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mem-back {
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: var(--shadow-1);
}
.mem-back::after {
  content: ""; width: 44%; height: 44%; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
}
.mem-front {
  background: var(--card);
  border: 1px solid var(--line);
  transform: rotateY(180deg);
}
.mem-front .icon { width: 62%; height: 62%; }
.mem-card.own0 .mem-front { background: var(--p0-soft); border-color: var(--p0); }
.mem-card.own1 .mem-front { background: var(--p1-soft); border-color: var(--p1); }

/* ---------------------------------------------------------------- Kniffel */

.kniffel { width: min(100%, 520px); display: flex; flex-direction: column; gap: var(--gap); }

.dice-row { display: flex; gap: clamp(6px, 2vw, 10px); justify-content: center; flex-wrap: wrap; }
.die {
  flex: 0 0 auto;
  min-width: 0;
  width: clamp(44px, 15vw, 60px);
  height: clamp(44px, 15vw, 60px);
  display: grid;
  grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  /* Kein Prozent-Padding: das würde sich auf die Breite des Elternelements
     beziehen und den Würfel aufblähen. */
  gap: 2px; padding: 6px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  cursor: pointer; touch-action: manipulation;
}
.die:disabled { cursor: default; }
.die .pip { width: 78%; height: 78%; border-radius: 50%; background: var(--ink); place-self: center; }
.die.is-held { background: var(--accent-soft); border-color: var(--accent); }
.die.is-empty { background: var(--bg-tint); border-style: dashed; }
.die.is-rolled { animation: rollin .3s ease; }
@keyframes rollin { from { transform: rotate(-14deg) scale(.86); } }

.roll-line { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.sheet { display: flex; flex-direction: column; gap: 4px; }
.sheet-head, .sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 62px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
}
.sheet-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-bottom: 2px; }
.sheet-head span:not(:first-child), .sheet-row .val { text-align: center; font-variant-numeric: tabular-nums; }
.sheet-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.sheet-row .label { display: flex; flex-direction: column; }
.sheet-row .hint { font-size: .72rem; color: var(--ink-3); }
.sheet-row .val { color: var(--ink-3); }
.sheet-row .val.is-set { color: var(--ink); font-weight: 640; }
.sheet-row.is-pickable { border-color: var(--accent); cursor: pointer; }
.sheet-row.is-pickable:hover { background: var(--accent-soft); }
.sheet-row.is-pickable .val.preview { color: var(--accent-dark); font-weight: 640; }
.sheet-row.is-zero .val.preview { color: var(--ink-3); }
.sheet-sum { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px; gap: 8px; padding: 10px 12px; font-weight: 640; border-top: 1px solid var(--line); }
.sheet-sum span:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Stadt-Land-Fluss */

.slf { width: 100%; display: flex; flex-direction: column; gap: var(--gap); }

.slf-head { display: flex; align-items: center; gap: 14px; }
.slf-letter {
  width: 64px; height: 64px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 18px; box-shadow: var(--shadow-2);
  font-size: 2.1rem; font-weight: 750;
}
.slf-meta { flex: 1; min-width: 0; }
.slf-round { font-size: .82rem; color: var(--ink-2); }
.slf-time { font-size: 1.5rem; font-weight: 680; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 7px; }
.slf-time.is-urgent { color: var(--danger); }

.slf-bar { height: 6px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.slf-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s linear; }
.slf-bar.is-urgent > i { background: var(--danger); }

.slf-rows { display: flex; flex-direction: column; gap: 10px; }
.slf-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-1);
}
.slf-cat { font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.slf-row input {
  background: var(--card-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 12px; outline: none; width: 100%;
}
.slf-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slf-row input:disabled { opacity: .65; }

.slf-answer { display: flex; align-items: center; gap: 10px; }
.slf-answer .who { font-size: .74rem; color: var(--ink-3); width: 52px; flex: none; }
.slf-answer .text { flex: 1; min-width: 0; word-break: break-word; }
.slf-answer .text.is-empty { color: var(--ink-3); font-style: italic; }
.slf-answer .text.is-rejected { color: var(--danger); text-decoration: line-through; }

.slf-vote { display: flex; gap: 6px; flex: none; }
.slf-vote button {
  width: 42px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink-3); cursor: pointer; touch-action: manipulation;
}
.slf-vote button.is-on.yes { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.slf-vote button.is-on.no { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.slf-result { display: flex; flex-direction: column; gap: 9px; }
.slf-res-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 13px; display: flex; flex-direction: column; gap: 6px; }
.slf-res-side { display: flex; align-items: center; gap: 9px; }
.slf-res-side .text { flex: 1; min-width: 0; word-break: break-word; }
.slf-res-side .text.is-zero { color: var(--ink-3); text-decoration: line-through; }
.slf-res-side .pts { font-variant-numeric: tabular-nums; font-weight: 660; }

.slf-totals { display: flex; justify-content: space-around; gap: 12px; text-align: center; padding: 4px 0; }
.slf-totals .num { font-size: 1.9rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.slf-totals .who { font-size: .82rem; color: var(--ink-2); }

/* ------------------------------------------------------ Schiffe versenken */

.bs { width: 100%; display: flex; flex-direction: column; gap: var(--gap); }
.bs-boards { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 660px) { .bs-boards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

.bs-panel { display: flex; flex-direction: column; gap: 8px; }
.bs-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* Etwas Wasserfarbe: macht Treffer, Fehlschüsse und eigene Schiffe auf einen
   Blick unterscheidbar. */
.bs-grid { --cols: 8; --cell-gap: 3px; background: #dde6ec; border-color: #ccd8e1; }
.bs-grid .cell { background: #f1f6f9; }
.bs-grid .cell.is-ship { background: #a7b6c1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.bs-grid .cell.is-miss { background: #e4ecf1; }
.bs-grid .cell.is-miss::after { content: ""; width: 24%; height: 24%; border-radius: 50%; background: #8fa3b1; }
.bs-grid .cell.is-hit { background: var(--danger-soft); color: var(--danger); }
.bs-grid .cell.is-sunk { background: var(--danger); color: #fff; }
.bs-grid .cell.is-hit .icon, .bs-grid .cell.is-sunk .icon { width: 68%; height: 68%; }
.bs-grid .cell.is-last { box-shadow: inset 0 0 0 2px var(--ink); }
.bs-fleet { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; min-height: 12px; }
.bs-ship { display: flex; gap: 2px; }
.bs-ship i { width: 9px; height: 9px; border-radius: 2px; background: var(--ink-3); display: block; }
.bs-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-tools .btn { flex: 1 1 110px; }

/* ---------------------------------------------------------------- Mau-Mau */

.mm { width: 100%; display: flex; flex-direction: column; gap: var(--gap); }

.karte {
  --kb: 62px;
  position: relative;
  flex: none;
  width: var(--kb);
  height: calc(var(--kb) * 1.42);
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, border-color .12s ease;
}
.karte .ecke { position: absolute; top: 4px; left: 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
.karte .wert { font-weight: 700; font-size: .78rem; }
.karte.rot .wert { color: var(--p0); }
.karte.schwarz .wert { color: var(--ink); }

.suit { display: block; width: 1em; height: 1em; }
.suit.rot { color: var(--p0); }
.suit.schwarz { color: var(--ink); }
.karte .suit.klein { width: 9px; height: 9px; }
.karte .suit.gross { position: absolute; inset: 0; margin: auto; width: 44%; height: 44%; }

.karte.ruecken {
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-color: var(--accent-dark);
}
.karte.ruecken::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 40%; height: 40%; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
}

/* Gegnerhand */
.mm-gegner { display: flex; align-items: center; gap: 10px; }
.mm-ruecken { display: flex; }
.mm-ruecken .karte { --kb: 26px; box-shadow: none; }
.mm-ruecken .karte + .karte { margin-left: -16px; }
.mm-anzahl-gross { font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-gegner.knapp .mm-anzahl-gross { color: var(--danger); }

/* Tisch */
.mm-tisch { display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 6vw, 30px); }
.mm-stapel, .mm-gewuenscht { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mm-gewuenscht .suit { width: 30px; height: 30px; }
.mm-zieh { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-zieh:disabled { cursor: default; opacity: .55; }
.mm-anzahl {
  position: absolute; right: -7px; bottom: -7px;
  background: var(--ink); color: #fff;
  border-radius: 999px; font-size: .7rem; padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.mm-label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Eigene Hand */
.mm-hand { display: flex; overflow-x: auto; overflow-y: hidden; padding: 16px 6px 10px; }
.mm-hand-innen { display: flex; margin-inline: auto; }
.mm-hand .karte + .karte { margin-left: -22px; }
.mm-hand .karte.legbar { transform: translateY(-11px); border-color: var(--accent); cursor: pointer; }
.mm-hand .karte:disabled { opacity: .5; cursor: default; }
.mm-hand .karte.gewaehlt { transform: translateY(-20px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.mm-hand.wartend .karte { opacity: .75; }
.mm-leer { color: var(--ink-3); font-size: .9rem; padding: 12px; }

/* Farbwunsch */
.mm-wunsch { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mm-wunsch-text { width: 100%; font-size: .9rem; color: var(--ink-2); }
.mm-farbe {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; font-size: .9rem;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); cursor: pointer;
}
.mm-farbe:hover { border-color: var(--accent); }
.mm-farbe .suit { width: 18px; height: 18px; }
.mm-abbruch { color: var(--ink-2); }

/* Mau-Knöpfe */
.mm-aktionen { display: flex; gap: 10px; justify-content: center; }
.mm-mau { font-size: 1.15rem; padding: 14px 36px; }
.mm-erwischt { border-color: var(--danger); color: var(--danger); }