* { box-sizing: border-box; }

/* [hidden]-Attribut immer respektieren – schlägt display-Regeln wie .pending-bar { display:flex }.
   Verhindert leere Kästen/Kreise für ausgeblendete Felder (Akzeptieren-/Endstand-Feld). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  min-height: 100vh;
  /* Dunkelgrüner Verlauf mit dezenter Textur (angelehnt ans Vorbild). */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(70,140,80,0.25), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  background-attachment: fixed;
}

.muted { color: var(--muted); }
.error { color: #ff9b8f; font-weight: 600; }
h1, h2, h3 { margin: 0 0 .4em; }

/* ---- Buttons ---- */
.btn {
  font: inherit;
  padding: .55rem .9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, opacity .15s;
}
.btn:hover { background: var(--panel-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #2a2100; border-color: var(--accent-strong); font-weight: 700; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ok { background: var(--ok); color: #fff; border-color: #237946; }
.btn-danger { background: var(--danger); color: #fff; border-color: #922b20; }
.btn-sm { padding: .35rem .6rem; font-size: .85rem; }

/* ---- Layout Helpers ---- */
.centered { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.login-card { width: min(360px, 92vw); display: grid; gap: .8rem; }
.login-card label { display: grid; gap: .3rem; font-size: .9rem; }
.login-card input {
  font: inherit; padding: .6rem .7rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}

/* ---- Top Bar ---- */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem; background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 800; font-size: 1.1rem; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); }

/* ---- App Grid ---- */
.app {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr) 304px;  /* Chat gleich breit wie das Zug-Log links */
  gap: 1rem;
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}
/* iPad-Landscape (≈1024–1200px): 3-Spalten-Desktop-Anordnung mit schmaleren Seiten. */
@media (max-width: 1200px) {
  .app { grid-template-columns: 218px minmax(0, 1fr) 218px; gap: .7rem; padding: .6rem; }
  /* Etwas mehr Höhen-Spielraum, damit Topbar + Brett + Regal + Buttons zusammen passen. */
  .board { max-width: min(660px, calc(100vh - 300px)); }
}
/* Schmaler (iPad-Portrait): 2 Spalten, Zug-Log unter das Brett. */
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr) 218px; }
  .movelog-col { grid-column: 1 / -1; order: 3; position: static; max-height: none; }
}
/* Handy/sehr schmal: gestapelt. */
@media (max-width: 680px) {
  .app { grid-template-columns: 1fr; }
  .side { height: 320px; }
}

/* ---- Linke Spalte: Scoreboard + Zug-Log ---- */
.movelog-col {
  position: sticky; top: 1rem;
  display: flex; flex-direction: column;
  /* Höhe wie das Spielbrett – wird der Inhalt länger, scrollt das Zug-Log intern. */
  max-height: min(720px, calc(100vh - 262px));
}
.movelog-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  flex: 1 1 auto; min-height: 0;          /* füllt den Rest unter dem Scoreboard, Liste scrollt */
}
.movelog-header { padding: .5rem .8rem; border-bottom: 1px solid var(--border); font-weight: 700; }
.movelog-list { overflow-y: auto; padding: .5rem .7rem; display: grid; gap: .35rem; align-content: start; }
.move-entry { font-size: .85rem; line-height: 1.3; padding: .35rem .5rem; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.move-entry .who { font-weight: 700; color: var(--accent); }
.move-entry .words { color: var(--text); }
.move-entry .pts { float: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.move-entry.sys { color: var(--muted); font-style: italic; }
.movelog-empty { color: var(--muted); font-size: .85rem; padding: .4rem; }

/* Nur der aktive Screen ist sichtbar. !important, damit spätere Layout-Regeln
   (z.B. .lobby-box { display:grid }) einen inaktiven Screen nicht wieder einblenden. */
.screen:not(.active) { display: none !important; }

/* ---- Lobby ---- */
.lobby-box { display: grid; gap: 1rem; }
.player-list { display: grid; gap: .4rem; }
.player-chip {
  display: flex; align-items: center; gap: .5rem;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .4rem .8rem;
}
.dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); }

/* ---- Scoreboard ---- */
.scoreboard { display: grid; gap: .4rem; margin-bottom: .8rem; }
.score-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border);
}
.score-row.current { outline: 2px solid var(--accent); }
.score-row { flex-wrap: nowrap; }
.score-row .name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-row .pts { font-variant-numeric: tabular-nums; font-weight: 800; }
.score-row .rackcount { color: var(--muted); font-size: .8rem; }
.score-row .off { opacity: .45; }

/* ---- Board ---- */
.board-wrap { display: grid; gap: .7rem; position: relative; }
.board {
  --n: 15;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 2px;
  width: 100%;
  /* Höhe so budgetiert, dass Brett + Akzeptieren-Feld + Regal + Buttons ins Bild passen. */
  max-width: min(720px, calc(100vh - 262px));
  margin: 0 auto;
  padding: 3px;
  background: var(--cell-line);            /* helle Gitterlinien scheinen durch die Fugen */
  border: 6px solid var(--board-frame);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.25);
}
.cell {
  position: relative;
  aspect-ratio: 1 / 1;                 /* jede Zelle bleibt exakt quadratisch */
  background: var(--cell-normal);
  /* Vertiefte Zelle: das erhabene Gitter wirft oben+links Schatten hinein. */
  box-shadow:
    inset 2px 2px 3px rgba(0,0,0,.30),
    inset -1px -1px 1px rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  user-select: none;
}
.cell.star::after { content: '✸'; font-size: 1.7em; color: var(--star); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.cell.drop-hover { outline: 2px solid #fff; outline-offset: -2px; z-index: 6; }
/* Wertefeld-Zellen über normale Nachbarn UND gelegte Steine heben,
   damit die Kanten-Dreiecke immer sichtbar über Trennlinien/Steinen liegen. */
.cell.bonus-cell { z-index: 4; }

/* Erhabene, QUADRATISCHE Bonuskacheln mit umlaufender 3D-Fase (wie im Original-Scan).
   Licht von oben-links: obere/linke Kante hell, untere/rechte Kante dunkel,
   dazu ein Schlagschatten nach unten-rechts. */
.bonus {
  position: absolute;
  inset: 0;                            /* füllt die gesamte Zelle */
  border-radius: 0;                    /* eckig – niemals rund */
  display: grid;
  place-items: center;
  font-size: clamp(5px, .95vw, 10px);
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.5),    /* helle Fase oben/links */
    inset -2px -2px 0 rgba(0,0,0,.30);        /* dunkle Fase unten/rechts */
  pointer-events: none;
}
.bonus.tw { background: var(--bonus-tw); }
.bonus.dw { background: var(--bonus-dw); color: #7a2a1c; text-shadow: none; }
.bonus.tl { background: var(--bonus-tl); }
.bonus.dl { background: var(--bonus-dl); color: #12324c; text-shadow: none; }

/* Kleine Dreiecke an den vier Kanten der Wertefelder (nach außen zeigend),
   in der Feldfarbe. Ausnahme: Kanten an den Brettaußenrändern (weggelassen). */
.tri { position: absolute; z-index: 3; pointer-events: none; }
.tri.t { top: -20%; left: 34%; width: 32%; height: 20%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tri.b { bottom: -20%; left: 34%; width: 32%; height: 20%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tri.l { left: -20%; top: 34%; width: 20%; height: 32%; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.tri.r { right: -20%; top: 34%; width: 20%; height: 32%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.bonus.tw .tri { background: var(--bonus-tw); }
.bonus.dw .tri { background: var(--bonus-dw); }
.bonus.tl .tri { background: var(--bonus-tl); }
.bonus.dl .tri { background: var(--bonus-dl); }

/* ---- Tiles (Holzsteine mit Buchen-Textur) ---- */
.tile {
  position: absolute;
  inset: 1px;
  background-image: var(--tile-image);
  background-size: cover;
  background-position: center;
  color: var(--tile-text);
  border: 1px solid rgba(90,68,32,.55);
  border-radius: 12%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(10px, 1.9vw, 20px);
  box-shadow:
    0 3px 4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 5px rgba(90,60,20,.4);
  cursor: grab;
}
.tile.pending { outline: 3px solid var(--accent); outline-offset: -3px; }
.tile.staged { outline: 3px solid var(--ok); outline-offset: -3px; }
.tile.blank-tile .pts { visibility: hidden; }
.tile .val { line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.tile .pts {
  position: absolute; right: 8%; bottom: 4%;
  font-size: .5em; font-weight: 700;
}
.tile[draggable="true"]:active { cursor: grabbing; }

/* ---- Touch / iPad: kein "Als Bild speichern"-Callout, kein Text-Markieren,
   Steine als Touch-Drag (kein Scroll/Zoom auf dem Stein). ---- */
.board, .rack, .tile, .cell, .bonus, .tri, .action-bar, .scoreboard {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.tile { touch-action: none; }
.tile.dragging-src { opacity: .35; }
/* Der mitgezogene "Geister"-Stein am Finger. */
.drag-ghost {
  position: fixed; z-index: 500; pointer-events: none;
  margin: 0; opacity: .95; transform: scale(1.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}

/* ---- Rack + Buttons (Buttons rechts neben dem Regal) ---- */
.rack-area {
  display: flex; flex-wrap: wrap; gap: .7rem;
  align-items: flex-end; justify-content: center;   /* Regal-Unterkante = Buttonfeld-Unterkante */
  max-width: 720px;
  margin: 0 auto;
}
/* Feste Breite (7 Steine) – das Regal ändert seine Größe nie, egal wie viele
   Steine darauf liegen. Dadurch bleibt der untere Bereich immer identisch. */
.rack {
  display: flex; flex-wrap: nowrap; gap: .4rem; padding: .5rem .7rem;
  width: 378px; box-sizing: border-box; justify-content: center;
  background: var(--board-frame); border-radius: 10px; min-height: 56px;
  border: 1px solid var(--border);
}
.rack .tile {
  position: relative; inset: auto;
  width: 44px; height: 44px; font-size: 20px;
}
/* Inaktiv (nicht am Zug): nur dezent ausgegraut – Umsortieren bleibt möglich. */
.rack.dim { opacity: .82; }
.controls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* Aktionsleiste rechts neben dem Regal – kompaktes, umbrechendes Raster. */
.action-bar {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center;
  padding: .45rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; max-width: 258px;
}
.action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 56px; padding: .35rem .2rem; font: inherit; cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  transition: transform .05s ease, background .15s;
}
.action-btn:hover:not(:disabled) { background: var(--panel-2); }
.action-btn:active:not(:disabled) { transform: translateY(1px); }
.action-btn:disabled { opacity: .4; cursor: not-allowed; }
.action-btn .ic { font-size: 1.25rem; line-height: 1; }
.action-btn .tx { font-size: .72rem; }
.action-btn.primary { background: var(--accent); color: #2a2100; border-color: var(--accent-strong); font-weight: 700; }
.action-btn.primary:hover:not(:disabled) { background: var(--accent-strong); }
.action-btn.danger { background: var(--danger); color: #fff; border-color: #922b20; }

/* Pause-Overlay über dem Brett. */
.pause-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: none; place-items: center; text-align: center;
  background: rgba(6, 20, 14, 0.78); border-radius: 10px; backdrop-filter: blur(2px);
}
.pause-overlay.open { display: grid; }
.pause-overlay .box { display: grid; gap: .8rem; justify-items: center; }
.pause-overlay .big { font-size: 2.4rem; }

/* Score-Tabelle im Modal. */
.score-table { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.score-table th, .score-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
.score-table td.num, .score-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Pending / Accept ---- */
/* Akzeptieren-Feld sitzt über dem Regal und ist EXAKT so breit wie das Regal. */
.rack-col { display: flex; flex-direction: column; gap: .4rem; }
/* Fester Nachrichten-Slot über dem Regal: immer gleich hoch, damit das Regal
   nie vertikal springt, egal ob eine Nachricht angezeigt wird oder nicht. */
.pending-slot { width: 378px; height: 40px; display: flex; align-items: center; justify-content: center; }
.pending-bar {
  display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap;
  justify-content: space-between;
  background: var(--panel-2); border: 1px solid var(--accent-strong);
  border-radius: 10px; padding: .45rem .55rem;
  width: 378px; box-sizing: border-box; margin: 0;
  font-size: .74rem;
}
/* Info-Text schrumpft mit "…", Buttons bleiben fix -> alles in EINER Zeile. */
.pending-bar > div, .pending-bar > span {
  flex: 1 1 auto; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pending-bar .btn { flex: 0 0 auto; padding: .3rem .5rem; font-size: .74rem; }
/* Endstand-Feld darf über die Brettbreite gehen und wird zentriert (mehrzeilig ok). */
#endgame-bar { width: auto; max-width: 720px; margin: .6rem auto 0; flex-wrap: wrap; font-size: .9rem; }
#endgame-bar > * { white-space: normal; overflow: visible; }

/* ---- Chat ---- */
.side { display: grid; grid-template-rows: auto 1fr auto; gap: .6rem; height: calc(100vh - 120px); position: sticky; top: 1rem; }
@media (max-width: 900px) { .side { height: 420px; } }
.chat-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.chat-header { padding: .5rem .8rem; border-bottom: 1px solid var(--border); font-weight: 700; }
.chat-messages { overflow-y: auto; padding: .6rem .8rem; display: grid; gap: .4rem; align-content: start; }
.chat-msg { font-size: .9rem; }
.chat-msg .u { font-weight: 700; color: var(--accent); }
.chat-input { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--border); align-items: center; }
.chat-input input { flex: 1 1 0; min-width: 0; width: 0; font: inherit; padding: .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.chat-input .btn { flex: 0 0 auto; }
.emoji-btn { padding: .35rem .5rem; }
.emoji-pop {
  position: fixed;                 /* per JS unter den Button gesetzt -> klappt nach unten aus */
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: .4rem; display: none; grid-template-columns: repeat(8, 1fr); gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 120; width: 280px; max-width: 90vw;
}
.emoji-pop.open { display: grid; }
.emoji-pop button { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 3px; border-radius: 6px; }
.emoji-pop button:hover { background: var(--panel-2); }

/* ---- Banner (Bingo / Gewinner) ---- */
.banner {
  position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
  z-index: 320; pointer-events: none;
  background: rgba(12, 34, 20, 0.92); border: 2px solid var(--accent);
  color: var(--text); font-size: clamp(1.05rem, 2.4vw, 1.5rem); font-weight: 800;
  padding: .8rem 1.4rem; border-radius: 14px; text-align: center;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
  animation: bannerpop .3s ease;
}
@keyframes bannerpop { from { transform: translateX(-50%) scale(.8); opacity: 0; } }

/* ---- Toasts ---- */
.toasts { position: fixed; top: 12px; right: 12px; display: grid; gap: .5rem; z-index: 100; }
.toast {
  background: var(--panel); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 8px; padding: .6rem .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 220px; animation: slidein .2s ease;
}
.toast.success { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--accent); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; place-items: center; z-index: 200;
}
.modal-backdrop.open { display: grid; }
.modal { width: min(360px, 92vw); }
.letter-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; margin-top: .6rem; }
.letter-grid button { padding: .5rem 0; }

/* ---- Admin ---- */
.admin-wrap { max-width: 720px; margin: 1.5rem auto; display: grid; gap: 1rem; padding: 0 1rem; }
.user-table { width: 100%; border-collapse: collapse; }
.user-table th, .user-table td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--border); }
.badge { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); }
.badge.admin { background: var(--accent); color: #2a2100; }
.badge.off { color: var(--danger); }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.inline-form label { display: grid; gap: .2rem; font-size: .85rem; }
.inline-form input { font: inherit; padding: .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }