/* Wortgefecht — spielspezifische Styles (Chrome aus ../style.css).
   Eigenes Prämienmuster, eigene Farben — siehe wortgefecht-tiles.ts. */

.hero-wg { display: flex; justify-content: center; gap: 5px; margin-bottom: 6px; }
.hero-wg span {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px;
    background: #e8dcc0; color: #2a2118; font-weight: 800; font-size: 24px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.hero-wg span:nth-child(2) { transform: rotate(-6deg); }
.hero-wg span:nth-child(3) { transform: rotate(5deg); }

.players { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.pl {
    display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--panel-border); font-size: 14px;
}
.pl .nm { display: flex; align-items: center; gap: 6px; }
.pl .sc { font-weight: 800; color: var(--gold); }
.pl.turn { border-color: var(--gold); box-shadow: 0 0 18px rgba(242, 193, 78, .25); animation: focus-pulse 1.6s infinite; }
.pl.skip { opacity: .55; }

/* Brett: an Container UND Viewport-Höhe gekoppelt (S15) — Brett und Ablage
   müssen GLEICHZEITIG sichtbar bleiben, sonst spielt man im Blindflug. */
.wg-board {
    display: grid; aspect-ratio: 1; margin: 4px auto;
    width: clamp(240px, min(100%, calc(100dvh - 400px)), 520px);
    max-width: 100%;
    gap: 1px; padding: 1px; background: var(--panel-border);
    border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden;
    container-type: inline-size;
}
.cell {
    border: 0; padding: 0; min-width: 0; min-height: 0; font: inherit;
    display: grid; place-items: center; background: #2a3040; color: #cbd3e1;
    font-weight: 700; line-height: 1; cursor: pointer;
    /* Der Buchstabe muss am FELD hängen, nicht am Fenster. `2.2vw` war der
       erste Entwurf: bei 390 px ergab das 8,6 px Schrift auf einem 31-px-Feld
       — gemessen „vorhanden", gelesen unmöglich. `cqw` rechnet gegen die
       Brettbreite, `--n` (aus dem Client) gegen die Feldzahl. Damit bleibt
       das Verhältnis Buchstabe:Feld gleich, egal ob 9×9 oder 15×15. */
    font-size: clamp(9px, 2.4vw, 15px);
    font-size: clamp(9px, calc(55cqw / var(--n, 11)), 24px);
}
.cell.l2 { background: #2f4a63; }
.cell.l3 { background: #2f6383; }
.cell.w2 { background: #5d3550; }
.cell.w3 { background: #7a3448; }
.cell.start { background: #6a5330; }
.cell.tile { background: #e8dcc0; color: #2a2118; }
.cell.tile.blank { background: #cfc8b4; color: #4a4436; font-style: italic; }
.cell.fresh { box-shadow: inset 0 0 0 2px var(--gold); }
.cell.pending { background: #f0d79a; color: #2a2118; }
.cell.cursor { box-shadow: inset 0 0 0 2px #4f8cff; }
.cell .pm { font-size: .58em; opacity: .75; font-weight: 600; letter-spacing: -.02em; }

/* Zielen und Korrigieren: die eigentlichen Touch-Ziele (≥ 44 px). */
.aim {
    display: grid; grid-template-columns: repeat(4, auto); gap: 6px; justify-content: center;
    margin: 6px auto 2px;
}
.aim[hidden] { display: none; }
.aim-btn {
    min-width: 44px; min-height: 44px; border-radius: 10px; font-size: 17px;
    background: var(--panel); border: 1px solid var(--panel-border); color: var(--text);
    cursor: pointer;
}
.aim-btn.wide { min-width: 132px; font-size: 13px; font-weight: 700; }

.rack {
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
    margin: 8px auto 4px; width: min(100%, 520px);
}
.rack-tile {
    position: relative; min-width: 44px; min-height: 48px; border-radius: 8px;
    background: #e8dcc0; color: #2a2118; border: 0; font-weight: 800; font-size: 20px;
    cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.rack-tile:disabled { opacity: .45; cursor: default; }
.rack-tile.used { opacity: .3; }
.rack-tile.pick { outline: 2px solid var(--gold); }
.rack-tile .v { position: absolute; right: 4px; bottom: 2px; font-size: 10px; font-weight: 700; opacity: .7; }
.rack-empty { color: var(--muted); font-size: 13px; }

.move-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.move-actions .btn { min-height: 44px; }
.move-actions .btn[hidden] { display: none; }

.last-box { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 8px; }
.last-line { color: var(--muted); font-size: 13px; margin: 0; }
.last-line b { color: var(--text); }
.btn.danger { border-color: rgba(229, 72, 77, .55); color: var(--red); min-height: 44px; }
/* Ein Knopf, der lügt, ist schlimmer als keiner (S12-Nachtrag E78):
   die Klassenregeln oben setzen `display`, also muss `[hidden]` gewinnen. */
.btn.danger[hidden], .finish-btn[hidden] { display: none; }

.log-box {
    max-height: 132px; overflow-y: auto; margin: 6px auto; width: min(100%, 520px);
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 7px 10px;
}
.lg { font-size: 13px; line-height: 1.5; color: var(--muted); }
.lg:first-child { color: var(--text); }

.finish-btn {
    display: block; margin: 8px auto 0; font-size: 13px; padding: 8px 14px;
    color: var(--muted); min-height: 44px; background: var(--panel);
    border: 1px solid var(--panel-border); border-radius: 10px; cursor: pointer;
}

/* §4.16 Desktop-Fill */
@media (min-width: 1100px) {
    .wg-board { width: clamp(240px, min(100%, calc(100dvh - 360px)), 620px); }
    .rack, .log-box { width: min(100%, 620px); }
    /* auch hier am Feld, nicht am Fenster — sonst kippt der Fix am Desktop. */
    .cell { font-size: clamp(10px, calc(55cqw / var(--n, 11)), 30px); }
}