/* Maulwürfe. Das Brett füllt den Bildschirm: die Leinwand zeichnet alles, was sich je Bild ändert
   (Uhr, Wind, Kraftbogen, Zahlen, Marker, Ziel), das DOM darüber nur, was sich je Zug ändert (Teams,
   Knöpfe, Waffenfach, Banner, Endkarte). Die Farben kommen aus der Palette "halde". Die Zustände data-cam,
   data-quality, data-intensity, data-sound, data-music, data-vibrate, data-mirror, data-fullscreen,
   data-targeting, data-target und data-walker setzt hx-canvas.js auf die Wurzel oder auf <html>; die
   Selektoren hier nehmen beides. */

.worms-board {
    position: fixed;
    inset: 0;
    max-width: none;
    margin: 0;
    display: block;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: #20323F;
    color: #F2EEE6;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.25;

    /* Ränder hinter Notch und Home-Indikator: einmal gerechnet, an jedem Overlay benutzt. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --glass: rgba(8, 12, 16, .72);
    --glass-line: rgba(255, 255, 255, .08);
    --glass-blur: blur(6px);
    --ink: #F2EEE6;
    --accent: #E9C46A;
    --accent-ink: #1a1200;
    --danger: #E76F51;
}

.worms-board:focus { outline: none; }

/* Im Sparmodus kostet das Glas zu viel: dann liegen die Pillen einfach dunkel auf der Halde. */
.worms-board[data-quality="spar"],
[data-quality="spar"] .worms-board { --glass-blur: none; }

.worms-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    aspect-ratio: auto;
    background: #20323F;
    touch-action: none;
    transform: translateZ(0);
}

.worms-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Glas und Knöpfe ---------- */

.worms-pill,
.worms-btn,
.worms-team,
.worms-card,
.rack-list,
.settings-list,
.worms-hint-home {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    color: var(--ink);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.worms-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 48px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 80ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.worms-btn:active,
.worms-btn.armed { transform: scale(.94); }

.worms-btn svg {
    width: 24px;
    height: 24px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

summary.worms-btn { list-style: none; }
summary.worms-btn::-webkit-details-marker { display: none; }

/* Runde Werkzeugknöpfe: 40 px Optik, 48 px Ziel. Der unsichtbare Rand gehört zum Knopf und fängt den Finger. */
.worms-tool {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
}

/* Trefferfläche mindestens 48 px: der sichtbare Knopf bleibt 40 px, der unsichtbare Rand fängt den Finger. */
.worms-tool::after,
.worms-room::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
}

.worms-room {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

.worms-room::after { inset: -2px; }

/* ---------- Obere Ecken ---------- */

.worms-top {
    position: absolute;
    top: calc(12px + var(--safe-top));
    display: flex;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}

.worms-top-left { left: calc(12px + var(--safe-left)); }

.worms-top-right {
    right: calc(12px + var(--safe-right));
    gap: 10px;
}

/* Übersicht: zeigt die Lupe mit Minus (ganz heraus) oder, in der Übersicht, mit Plus (zurück). */
.worms-zoom .when-overview { display: none; }
:is(.worms-board[data-zoom="overview"], [data-zoom="overview"] .worms-board) .worms-zoom .when-near { display: none; }
:is(.worms-board[data-zoom="overview"], [data-zoom="overview"] .worms-board) .worms-zoom .when-overview { display: block; }

.worms-teams { display: flex; flex-direction: column; gap: 6px; }

.worms-team {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    opacity: .8;
    transition: opacity .3s;
}

.worms-team.active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--team) 70%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--team) 35%, transparent);
}

.worms-team.out { opacity: .4; text-decoration: line-through; }

.team-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--team);
    box-shadow: 0 0 6px color-mix(in srgb, var(--team) 60%, transparent);
    flex: none;
}

.team-name {
    display: none;
    font-weight: 600;
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-bar {
    width: 56px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
    flex: none;
}

.team-bar i {
    display: block;
    height: 100%;
    background: var(--team);
    transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

/* Die Zahl wird bei jedem neuen Wert neu gebaut (@key) und blinkt deshalb genau dann auf. */
.team-hp {
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    animation: worms-blink 300ms ease-out;
}

@keyframes worms-blink {
    0% { color: #fff; text-shadow: 0 0 8px #fff; }
    100% { color: inherit; text-shadow: none; }
}

/* Einstellungen: ein Fach unter dem Werkzeugknopf, nur solange es offen ist — dann über allem, auch über dem
   Waffenfach, an das es im Querformat heranreicht. */
.worms-settings { position: relative; pointer-events: auto; }
.worms-settings[open] { z-index: 5; }

.settings-list {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    padding: 8px;
    border-radius: 22px;
}

.worms-setting {
    justify-content: flex-start;
    height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.setting-state { margin-left: auto; font-weight: 500; opacity: .7; }

.worms-intensity .setting-state::after { content: "voll"; }
:is(.worms-board[data-intensity="0.5"], [data-intensity="0.5"] .worms-board) .worms-intensity .setting-state::after,
:is(.worms-board[data-intensity=".5"], [data-intensity=".5"] .worms-board) .worms-intensity .setting-state::after { content: "halb"; }
:is(.worms-board[data-intensity="0"], [data-intensity="0"] .worms-board) .worms-intensity .setting-state::after { content: "aus"; }

.worms-vibrate .setting-state::after { content: "an"; }
:is(.worms-board[data-vibrate="0"], [data-vibrate="0"] .worms-board) .worms-vibrate .setting-state::after { content: "aus"; }
:is(.worms-board[data-vibrate="no"], [data-vibrate="no"] .worms-board) .worms-vibrate .setting-state::after { content: "geht hier nicht"; }
:is(.worms-board[data-vibrate="no"], [data-vibrate="no"] .worms-board) .worms-vibrate { opacity: .55; }

.worms-sound .setting-state::after { content: "an"; }
:is(.worms-board[data-sound="0"], [data-sound="0"] .worms-board) .worms-sound .setting-state::after { content: "aus"; }
:is(.worms-board[data-sound="no"], [data-sound="no"] .worms-board) .worms-sound .setting-state::after { content: "geht hier nicht"; }
:is(.worms-board[data-sound="no"], [data-sound="no"] .worms-board) .worms-sound { opacity: .55; }

.worms-music .setting-state::after { content: "an"; }
:is(.worms-board[data-music="0"], [data-music="0"] .worms-board) .worms-music .setting-state::after { content: "aus"; }
:is(.worms-board[data-music="no"], [data-music="no"] .worms-board) .worms-music .setting-state::after { content: "geht hier nicht"; }
:is(.worms-board[data-music="no"], [data-music="no"] .worms-board) .worms-music { opacity: .55; }

.worms-mirror .setting-state::after { content: "aus"; }
:is(.worms-board[data-mirror="1"], [data-mirror="1"] .worms-board) .worms-mirror .setting-state::after { content: "an"; }

/* Vibration und Spiegeln sind Daumensachen; am Rechner gibt es sie nicht. */
.worms-board:not(.touch) .worms-vibrate,
.worms-board:not(.touch) .worms-mirror { display: none; }

/* Ohne Vollbild-API (iPhone) fällt der Knopf weg; einmal kurz steht dort, was stattdessen hilft. */
:is(.worms-board[data-fullscreen="no"], [data-fullscreen="no"] .worms-board) .worms-fullscreen { display: none; }

/* Unter dem Windmesser, nicht darauf: sonst verdeckte der Hinweis am iPhone fünf Sekunden lang Wind und Chips. */
.worms-hint-home {
    display: none;
    position: absolute;
    top: 86px;
    right: 0;
    max-width: min(60vw, 18rem);
    padding: 7px 12px;
    border-radius: 18px;
    font-size: 13px;
    white-space: normal;
    text-align: right;
}

:is(.worms-board[data-fullscreen="no"], [data-fullscreen="no"] .worms-board) .worms-hint-home {
    display: block;
    animation: worms-hint 5s ease-in forwards;
}

@keyframes worms-hint {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ---------- Pillen in der Mitte ---------- */

.worms-pill {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.worms-status { top: 50%; translate: -50% -50%; }

/* Rückzug: klein oben mittig an der Stelle der Zuguhr, die im Rückzug aus ist; darunter zeichnet die Leinwand
   die Restzeit als Balken. Unten lag beides im Hochformat auf dem rechten Pfeil des Kreuzes — genau beim
   Weglaufen. */
.worms-retreat {
    top: calc(16px + var(--safe-top));
    height: 28px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--accent);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.worms-conn { bottom: calc(72px + var(--safe-bottom)); color: var(--danger); }

.worms-conn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    animation: worms-pulse 1.2s infinite;
}

@keyframes worms-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.worms-error {
    top: calc(124px + var(--safe-top));
    height: auto;
    max-width: min(90vw, 40rem);
    padding: 10px 16px;
    white-space: normal;
    text-align: center;
    background: color-mix(in srgb, #E76F51 40%, var(--glass));
}

/* Nachspielzeit und steigendes Wasser: zwei Sekunden, dann weg. Das Element bleibt unsichtbar stehen,
   Blazor baut es beim nächsten Mal neu (@key), und die Animation läuft wieder an. */
.worms-flash {
    top: 42%;
    height: 48px;
    padding: 0 20px;
    font-size: 17px;
    animation: worms-flash 2s ease-out forwards;
}

.worms-flash.sudden { color: var(--danger); }
.worms-flash.water { color: #8AB6D6; }

@keyframes worms-flash {
    0% { opacity: 0; scale: .92; }
    10% { opacity: 1; scale: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* Zugbanner: Pille in Teamfarbe direkt unter der Zuguhr, fährt herein, hält, gleitet raus. Kein Streifen über die
   ganze Breite mehr: der lag über den Teamchips und genau dort, wo die Leinwand im selben Moment die Bilanz des
   letzten Zugs ansagt („Volltreffer!“) — die Ansage steht jetzt darunter. */
.worms-banner {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    top: calc(66px + var(--safe-top));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    max-width: calc(100vw - 2 * 240px);
    min-width: 0;
    padding: 0 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--team) 90%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    color: #1a1200;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    animation: worms-banner 1.4s cubic-bezier(.2, .8, .2, 1) forwards;
}

/* Schmale Querformate: zwischen Teamchips und Werkzeugen bleibt wenig Platz, dann darf die Pille breiter sein
   und rückt unter die Chips. */
@media (max-width: 760px) and (orientation: landscape) {
    .worms-banner { top: calc(172px + var(--safe-top)); max-width: calc(100vw - 32px); }
}

@keyframes worms-banner {
    0% { transform: translateY(-100%); opacity: 0; }
    18% { transform: none; opacity: 1; }
    82% { transform: none; opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; visibility: hidden; }
}

/* ---------- Folgen (Zuschauer, die geschwenkt haben) ---------- */

.worms-follow {
    position: absolute;
    left: 50%;
    bottom: calc(16px + var(--safe-bottom));
    translate: -50% 0;
    display: none;
}

:is(.worms-board[data-cam="manual"], [data-cam="manual"] .worms-board) .worms-follow { display: inline-flex; }

/* ---------- Untere Leiste im eigenen Zug ---------- */

/* Sprung und Salto sitzen über dem Steuerkreuz (68 px hoch, 16 px Rand, von hx-canvas.js gezeichnet). */
.worms-moves {
    position: absolute;
    left: calc(16px + var(--safe-left));
    bottom: calc(96px + var(--safe-bottom));
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.worms-move {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 0;
}

.worms-move svg { width: 28px; height: 28px; }

.worms-arms {
    position: absolute;
    right: calc(16px + var(--safe-right));
    bottom: calc(16px + var(--safe-bottom));
    display: flex;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

/* Spiegeln für Linkshänder: die Laufzone wandert nach rechts, also wechseln auch Sprung/Salto und das
   Waffenfach die Seite — sonst läge der Daumen, der laufen soll, auf dem Waffenfach. */
:is(.worms-board[data-mirror="1"], [data-mirror="1"] .worms-board) .worms-moves { left: auto; right: calc(16px + var(--safe-right)); flex-direction: row-reverse; }
:is(.worms-board[data-mirror="1"], [data-mirror="1"] .worms-board) .worms-arms { right: auto; left: calc(16px + var(--safe-left)); flex-direction: row-reverse; }

/* Der Auslöser für alles, was keine Geste hat: Zünden, Legen, Bohren, Loslassen, Hochjagen!, Los!, Aussetzen. */
.worms-trigger {
    height: 64px;
    min-width: 96px;
    padding: 0 20px;
    border-radius: 18px;
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
    font-size: 17px;
    font-weight: 700;
}

.worms-trigger.skip {
    background: var(--glass);
    color: var(--ink);
    border-color: var(--glass-line);
    font-weight: 600;
}

.worms-trigger.skip.armed {
    background: var(--danger);
    color: #fff;
    border-color: transparent;
}

/* Die Rückfrage ist länger als der Knopf: zweizeilig und kleiner, damit sie im Hochformat nicht bis zu den Sprungknöpfen wächst. */
.worms-trigger .when-armed {
    display: none;
    max-width: 9em;
    font-size: 14px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}
.worms-trigger.armed .when-idle { display: none; }
.worms-trigger.armed .when-armed { display: inline-block; }

/* Der Sprengdackel läuft: Hochjagen! ist rot und pocht, bis er hochgeht. */
.worms-trigger.blast {
    background: var(--danger);
    color: #fff;
    min-width: 132px;
    animation: worms-blast 900ms ease-in-out infinite;
}

@keyframes worms-blast {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 111, 81, .6); }
    50% { box-shadow: 0 0 0 10px rgba(231, 111, 81, 0); }
}

/* Zielwaffen: Los! ist gesperrt, bis ein gültiges Ziel steht; darüber steht, was fehlt. */
.worms-go { position: relative; display: flex; pointer-events: none; }
.worms-go .worms-trigger { pointer-events: auto; }

.worms-trigger:disabled {
    background: var(--glass);
    color: rgba(242, 238, 230, .45);
    border-color: var(--glass-line);
    cursor: default;
    transform: none;
}

.go-hint {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    animation: worms-go-hint 1.8s ease-in-out infinite;
}

@keyframes worms-go-hint {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* Solange der Dackel läuft, steht der Maulwurf still: Sprung und Salto treten zurück. */
.worms-moves.idle .worms-move { opacity: .4; }

/* Schmales Hochformat: der bewaffnete Aussetzen-Knopf darf nicht bis zu den Sprungknöpfen wachsen. */
@media (max-width: 480px) {
    .worms-trigger { height: 56px; min-width: 72px; padding: 0 12px; font-size: 15px; }
    .worms-trigger.blast { min-width: 112px; }
    .worms-trigger .when-armed { max-width: 6.5em; font-size: 13px; }
    .worms-moves { bottom: calc(104px + var(--safe-bottom)); }
}

/* Das Waffenfach: ein Knopf mit der gewählten Waffe, darüber ein Raster mit allen vierzehn — Symbol, Name,
   Bestand, am Rechner das Tastenkürzel. Am Rechner und am Handy quer fünf Spalten, hoch vier. */
.worms-rack { position: relative; pointer-events: auto; }

.rack-toggle {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    padding: 0;
    border-radius: 18px;
}

.rack-toggle .wpn-icon { width: 32px; height: 32px; }

.rack-shots {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Der Bestand der gewählten Waffe, wenn er endlich ist: hell statt gelb, damit er nicht nach Schüssen aussieht. */
.rack-shots.stock { background: #F2EEE6; color: #17110D; }

.rack-list {
    --tile-w: 92px;
    --tile-h: 76px;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(5, var(--tile-w));
    grid-auto-rows: minmax(var(--tile-h), auto);
    gap: 6px;
    padding: 8px;
    border-radius: 22px;
    max-height: calc(100vh - 150px - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - 150px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

:is(.worms-board[data-mirror="1"], [data-mirror="1"] .worms-board) .rack-list { right: auto; left: 0; }
:is(.worms-board[data-mirror="1"], [data-mirror="1"] .worms-board) .go-hint { right: auto; left: 0; }

.rack-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    width: var(--tile-w);
    min-height: var(--tile-h);
    padding: 10px 4px 6px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 80ms ease-out, background-color 120ms ease-out;
}

.rack-tile:active { transform: scale(.96); }
.rack-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (hover: hover) {
    .rack-tile:not(:disabled):hover { background: rgba(255, 255, 255, .11); }
}

.tile-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
}

.tile-icon .wpn-icon,
.tile-lock {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Lange Namen brechen am weichen Trennstrich um (Pressluft-hammer), höchstens zwei Zeilen. */
.tile-name {
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    hyphens: manual;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-stock {
    position: absolute;
    top: 5px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: rgba(255, 255, 255, .16);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tile-stock.inf { background: transparent; font-size: 15px; opacity: .65; }
.tile-stock.none { background: rgba(231, 111, 81, .35); }

.tile-key {
    position: absolute;
    top: 5px;
    left: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 5px;
    font: 600 11px/15px ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
    opacity: .75;
}

/* Die Taste ist die Kürzel-Hilfe am Rechner; unter dem Daumen sagt sie nichts. */
.worms-board.touch .tile-key { display: none; }

.rack-tile.on { background: var(--accent); color: var(--accent-ink); }
.rack-tile.on .tile-stock { background: rgba(26, 18, 0, .16); }
.rack-tile.on .tile-stock.inf { background: transparent; }
.rack-tile.on .tile-key { border-color: rgba(26, 18, 0, .35); }

/* Leer oder nach dem ersten Schuss: grau, mit Schloss. Die gewählte Waffe bleibt dabei erkennbar. */
.tile-lock { display: none; position: absolute; inset: 0; margin: auto; }
.rack-tile.locked { opacity: .42; cursor: default; }
.rack-tile.locked.on { opacity: .8; }
.rack-tile.locked .tile-lock { display: block; }
.rack-tile.locked .wpn-icon { opacity: .22; }
.rack-tile.locked .tile-key { opacity: .35; }

/* ---------- Overlays über allem ---------- */

.worms-scrim {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
    background: rgba(8, 12, 16, .45);
    pointer-events: auto;
}

.worms-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: min(92vw, 26rem);
    padding: 22px 24px;
    border-radius: 22px;
    text-align: center;
}

.worms-card p { margin: 0; font-size: 16px; }

.worms-cta {
    height: 56px;
    padding: 0 22px;
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
    font-size: 17px;
    font-weight: 700;
}

.worms-resume { background: rgba(8, 12, 16, .6); }

/* Die Endkarte wartet 2,2 s auf den Kameraüberblick und blendet dann ein. */
.worms-end {
    visibility: hidden;
    opacity: 0;
    animation: worms-end 400ms ease-out 2.2s forwards;
}

@keyframes worms-end {
    from { visibility: hidden; opacity: 0; }
    to { visibility: visible; opacity: 1; }
}

.worms-end .worms-card { border-top: 4px solid var(--team); }

.end-card {
    box-sizing: border-box;
    width: min(92vw, 30rem);
    max-width: none;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
    gap: 14px;
    padding: 20px 20px 18px;
    text-align: left;
}

.end-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }

.end-kicker {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--team);
}

.end-title { font-size: 20px; line-height: 1.3; }

/* Auszeichnungen: je eine Karte mit Streifen in der Farbe des Teams, das sie bekommt. */
.end-awards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.end-award {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "title team" "text text";
    align-items: baseline;
    align-content: start;
    column-gap: 10px;
    row-gap: 2px;
    padding: 7px 12px 8px;
    border-radius: 12px;
    border-left: 4px solid var(--team);
    background: rgba(255, 255, 255, .05);
}

.award-title { grid-area: title; font-size: 15px; font-weight: 700; }
.award-team {
    grid-area: team;
    justify-self: end;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--team);
    font-size: 13px;
    font-weight: 600;
}
.award-text { grid-area: text; font-size: 13px; line-height: 1.3; opacity: .82; }

.end-side { display: flex; flex-direction: column; gap: 14px; }
.end-side .worms-cta { align-self: center; }

/* Die Bilanz je Team: ausgeteilter Schaden und erledigte Maulwürfe. */
.end-tally {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.end-tally th,
.end-tally td {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    white-space: nowrap;
}

.end-tally thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
}

.end-tally thead th:first-child,
.end-tally tbody th { text-align: left; }
.end-tally tbody th { font-weight: 600; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
.end-tally tbody tr:last-child > * { border-bottom: 0; }
.end-tally .team-dot { display: inline-block; margin-right: 8px; vertical-align: 0; }
.end-tally tr.me > * { background: rgba(255, 255, 255, .05); }
.end-tally tr.won .tally-name { color: var(--team); }

/* Verloren: gedämpft, ohne Teamfarbe. */
.worms-end.lost .worms-card { border-top-color: rgba(255, 255, 255, .15); }
.worms-end.lost .end-kicker { color: #93a5af; }

/* Quer und breit genug: Auszeichnungen in zwei Spalten links, Bilanz und Rückweg rechts. Schmaler (667 px quer)
   schnitt die rechte Spalte die Bilanz ab; dann steht alles untereinander, und die Karte scrollt. */
@media (orientation: landscape) and (min-width: 720px) {
    .end-card.with-awards {
        width: min(96vw, 52rem);
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr);
        grid-template-areas: "head head" "awards side";
        align-items: start;
        column-gap: 18px;
        row-gap: 12px;
    }
    .end-card.with-awards .end-head { grid-area: head; }
    .end-card.with-awards .end-awards { grid-area: awards; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .end-card.with-awards .end-side { grid-area: side; }
}

@media (max-height: 520px) {
    .end-card { padding: 14px 16px; gap: 10px; }
    .end-title { font-size: 17px; }
    .end-award { padding: 5px 10px 6px; }
    .award-title { font-size: 14px; }
    .award-text { font-size: 12.5px; }
    .end-tally th, .end-tally td { padding: 4px 6px; }
    .end-side { gap: 10px; }
    .end-side .worms-cta { height: 48px; }
}

/* ---------- Die Hülle auf der Raumseite: das Brett liegt woanders, hier steht nur der Stand. ---------- */

.worms-shell { display: flex; flex-direction: column; gap: .7rem; }
.worms-shell-turn { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; margin: 0; }
.worms-shell-teams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.worms-shell-teams li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.worms-shell-teams li.active { outline: 1px solid var(--accent); }
.worms-shell-teams li.out { opacity: .45; }
.worms-shell .team-dot { display: inline-block; margin-right: .45rem; vertical-align: 0; }

/* Karte und Optionen der Partie, als kleine Marken unter dem Kartennamen. */
.worms-shell-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .35rem; }
.worms-shell-options li { padding: .15rem .55rem; border-radius: 999px; background: var(--surface-2); font-size: .8rem; color: var(--muted); }

.worms-shell-awards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.worms-shell-awards li { display: flex; flex-direction: column; gap: .1rem; padding: .35rem .6rem; border-radius: var(--radius-sm); border-left: 3px solid var(--team); background: var(--surface-2); }
.worms-shell-awards strong { font-size: .88rem; }
.worms-shell-awards span { font-size: .8rem; color: var(--muted); }

/* ---------- Regeln im Katalog ---------- */

.worms-rules h3 { margin: 1.1rem 0 .35rem; }
.worms-rules-weapons .w-name { white-space: nowrap; font-weight: 600; }
.worms-rules-weapons .w-stock { color: var(--muted); }

/* Schmal: jede Waffe als kleine Karte — Name, Taste und Bestand in einer Zeile, darunter was sie tut. */
@media (max-width: 560px) {
    .worms-rules-weapons,
    .worms-rules-weapons tbody { display: block; }
    .worms-rules-weapons thead { display: none; }
    .worms-rules-weapons tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "name key stock" "does does does";
        align-items: center;
        column-gap: .6rem;
        padding: .55rem .1rem;
        border-bottom: 1px solid var(--line);
    }
    .worms-rules-weapons tbody tr:last-child { border-bottom: 0; }
    .worms-rules-weapons td { display: block; padding: 0; border: 0; }
    .worms-rules-weapons .w-name { grid-area: name; }
    .worms-rules-weapons .w-key { grid-area: key; }
    .worms-rules-weapons .w-stock { grid-area: stock; }
    .worms-rules-weapons .w-does { grid-area: does; padding-top: .25rem; }
}
.rules-icon {
    width: 20px;
    height: 20px;
    margin-right: .5rem;
    vertical-align: -5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.worms-rules kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: .1rem .35rem;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    font: 600 .78rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}

/* ---------- Breiten und Ausrichtungen ---------- */

/* Breite Bildschirme: die Teams bekommen ihre Namen zurück. Erst ab hier bleibt in der Mitte Platz für die Uhr. */
@media (min-width: 900px) {
    .team-name { display: inline; }
}

/* Hochformat: die Laufzone ist das untere Drittel, darüber sitzen Sprung, Salto, Fach und Zünden.
   Die Chips rücken unter den Raum-Knopf, damit die Uhr in der Mitte frei bleibt. */
@media (orientation: portrait) {
    .worms-top-left { flex-direction: column; }
    .worms-moves,
    .worms-arms { bottom: calc(30% + 12px); }
    /* Die Zugpille steht hochkant rechts unter dem Windmesser, neben der Chip-Spalte statt auf ihr (mit Notch und vier
       Teams reichen die Chips bis gut 250 px hinunter); lange Namen werden gekürzt. */
    .worms-banner {
        top: calc(96px + var(--safe-top));
        left: auto;
        right: calc(12px + var(--safe-right));
        translate: none;
        max-width: calc(100vw - 172px - var(--safe-left) - var(--safe-right));
    }
    .worms-flash { top: 34%; }
    /* Unten mittig lägen „Folgen“ und die Verbindungsanzeige auf dem rechten Pfeil des Kreuzes (72 px hoch,
       16 px Rand): sie rücken darüber. */
    .worms-follow { bottom: calc(102px + var(--safe-bottom)); }
    .worms-conn { bottom: calc(150px + var(--safe-bottom)); }
    /* Hochkant ist oben zwischen Uhr und Werkzeugknöpfen kein Platz für die Pille: sie rückt unter die Knopfreihe. */
    .worms-retreat { top: calc(72px + var(--safe-top)); }
}

/* Niedrige Bildschirme (Handy quer): das Raster bleibt bei fünf Spalten, die Kacheln werden flacher, damit
   drei Reihen unter den Werkzeugknöpfen oben rechts bleiben. Das Einstellungsfach rückt enger zusammen: fünf
   Einträge zu 48 px reichten sonst bis auf das Waffenfach. */
@media (max-height: 520px) {
    .rack-list { --tile-w: 80px; --tile-h: 60px; gap: 5px; padding: 7px; }
    .rack-tile { gap: 2px; padding: 8px 3px 4px; border-radius: 14px; }
    .tile-icon { width: 26px; height: 26px; }
    .tile-icon .wpn-icon, .tile-lock { width: 24px; height: 24px; }
    .tile-name { font-size: 11px; }
    .tile-stock { top: 3px; right: 4px; }
    .settings-list { gap: 2px; padding: 6px; border-radius: 20px; }
    .worms-setting { height: 44px; min-height: 44px; }
}

/* Sehr niedrig (640 × 360): noch etwas flacher, damit drei Reihen ohne Scrollen passen. */
@media (max-height: 380px) {
    .rack-tile { padding: 6px 3px 3px; }
    .tile-icon { height: 24px; }
    .tile-name { font-size: 10.5px; line-height: 1.08; }
}

/* Schmales Hochformat: vier Spalten, so breit, wie der Bildschirm hergibt. */
@media (orientation: portrait) and (max-width: 600px) {
    .rack-list {
        --tile-w: min(80px, calc((100vw - 68px - var(--safe-left) - var(--safe-right)) / 4));
        --tile-h: 68px;
        grid-template-columns: repeat(4, var(--tile-w));
        max-height: calc(70vh - 150px - var(--safe-top));
        max-height: calc(70dvh - 150px - var(--safe-top));
    }
    .go-hint { font-size: 13px; height: 30px; padding: 0 10px; }
}

/* Weniger Bewegung: Banner nur ein- und ausblenden, kein Drücken, kein Gleiten. */
@media (prefers-reduced-motion: reduce) {
    .worms-btn:active,
    .worms-btn.armed,
    .rack-tile:active { transform: none; }
    .worms-banner { animation-name: worms-banner-still; }
    .worms-flash { animation-name: worms-flash-still; }
    .team-bar i { transition: none; }
    .worms-trigger.blast,
    .go-hint { animation: none; }
}

@keyframes worms-banner-still {
    0% { opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes worms-flash-still {
    0% { opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}