/* ── Mine Hunt — Sonar am Meeresgrund ──────────────────────────────────────────────────────────────────────────────
   Eigene Optik: dunkles Tiefseeblau, ein Sonarstrahl dreht über dem Feld (CSS, nur transform), verdeckte Felder als matte
   Stahlplatten, aufgedeckte als sandiger Grund mit leuchtenden Zahlen (je Zahl eigene Farbe), Minen als glühende Seeminen,
   Flaggen als rote Bojen. Feldgröße --z aus main.js (passt sich Bildschirm und Feldmaß an).
   Schriften aus fonts.hirsing.eu: Rajdhani (Ziffern, Titel), Nunito (Bedienung). */
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url('https://fonts.hirsing.eu/rajdhani-v17-latin/rajdhani-v17-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('https://fonts.hirsing.eu/nunito-v32-latin/nunito-v32-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('https://fonts.hirsing.eu/nunito-v32-latin/nunito-v32-latin-700.woff2') format('woff2'); }
:root {
  --tief: #04121c; --tief2: #0a2433; --sonar: #3dffc8; --sonar-d: rgba(61, 255, 200, 0.18); --text: #e6fbff; --leise: #8fb3c0; --rot: #ff4d5e; --gold: #ffd36b;
  --zahl: 'Rajdhani', 'Segoe UI', sans-serif; --sans: 'Nunito', system-ui, sans-serif; --z: 34px;
  --oben: max(12px, env(safe-area-inset-top)); --unten: max(12px, env(safe-area-inset-bottom)); --rand: max(12px, env(safe-area-inset-left));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--sans); color: var(--text); user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--tief2), var(--tief) 70%, #020a10); }
button { font: inherit; color: inherit; cursor: pointer; }
.versteckt { display: none !important; }
/* Sonar: Raster + drehender Strahl hinter allem */
.sonar { position: fixed; inset: -20vmax; pointer-events: none; opacity: 0.55;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 9vmax, rgba(61, 255, 200, 0.07) 9vmax calc(9vmax + 1px)); }
.sonar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax;
  background: conic-gradient(from 0deg, rgba(61, 255, 200, 0.22), transparent 18%); border-radius: 50%; animation: drehen 6s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.tisch { position: fixed; inset: var(--oben) var(--rand) var(--unten); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: transform .5s ease; }
.kopf { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 720px; padding-left: 150px; }
.werte { flex: 1; display: flex; gap: 8px; }
.wert { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 12px; background: rgba(4, 30, 44, 0.7); border: 1px solid var(--sonar-d); }
.wert svg { width: 20px; height: 20px; fill: none; stroke: var(--sonar); stroke-width: 2; stroke-linecap: round; }
.wert b { font-family: var(--zahl); font-size: 24px; min-width: 2.2ch; font-variant-numeric: tabular-nums; }
.knoepfe { display: flex; gap: 8px; }
.rund { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--sonar-d); background: rgba(4, 30, 44, 0.75); color: var(--sonar); }
.rund svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund .strich-aus { display: none; } .rund.aus .strich-aus { display: inline; } .rund.aus .welle { display: none; }
#flaggen-knopf[aria-pressed="true"] { background: var(--rot); color: #fff; border-color: var(--rot); box-shadow: 0 0 14px rgba(255, 77, 94, 0.6); }
body.im-menue .knoepfe, body.im-menue .werte, body.im-menue .hinweis { visibility: hidden; }
.hinweis { margin: 0; font-size: 13px; color: var(--leise); }

.feld-rahmen { padding: 10px; border-radius: 14px; background: linear-gradient(160deg, rgba(61, 255, 200, 0.12), rgba(0, 0, 0, 0.2)); border: 1px solid var(--sonar-d);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(0, 0, 0, 0.4); }
.feld { display: grid; gap: 2px; touch-action: manipulation; }
.f { width: var(--z); height: var(--z); border: 0; padding: 0; border-radius: calc(var(--z) * 0.14); display: grid; place-items: center; position: relative;
  font-family: var(--zahl); font-weight: 700; font-size: calc(var(--z) * 0.66); line-height: 1;
  background: linear-gradient(160deg, #4b6676, #2e4655 55%, #24394a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 3px rgba(0, 0, 0, 0.35); }
.f:hover:not(.o) { filter: brightness(1.18); }
.f:focus-visible { outline: 2px solid var(--sonar); outline-offset: 1px; z-index: 1; }
.f.o { background: radial-gradient(circle at 40% 30%, #183946, #0e2a36 70%); box-shadow: inset 0 0 0 1px rgba(61, 255, 200, 0.06); cursor: default; animation: auf .25s ease-out; }
@keyframes auf { from { transform: scale(0.85); filter: brightness(1.8); } }
.f.o[data-n="1"] { color: #4dc3ff; text-shadow: 0 0 8px rgba(77, 195, 255, 0.6); } .f.o[data-n="2"] { color: #3dffc8; text-shadow: 0 0 8px rgba(61, 255, 200, 0.6); }
.f.o[data-n="3"] { color: #ff6b7a; text-shadow: 0 0 8px rgba(255, 107, 122, 0.6); } .f.o[data-n="4"] { color: #b48cff; text-shadow: 0 0 8px rgba(180, 140, 255, 0.6); }
.f.o[data-n="5"] { color: #ffb347; } .f.o[data-n="6"] { color: #3df0ff; } .f.o[data-n="7"] { color: #fff; } .f.o[data-n="8"] { color: #aaa; }
/* Boje (Flagge) und Seemine als CSS-Formen */
.f.fl::before { content: ''; position: absolute; width: 36%; height: 50%; left: 34%; top: 18%; background: var(--rot); clip-path: polygon(0 0, 100% 30%, 0 60%); filter: drop-shadow(0 0 4px rgba(255, 77, 94, 0.9)); }
.f.fl::after { content: ''; position: absolute; width: 8%; height: 62%; left: 30%; top: 18%; background: #e6fbff; border-radius: 2px; }
.f.mi::before { content: ''; position: absolute; width: 52%; height: 52%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a96a0, #1e2830 70%);
  box-shadow: 0 0 0 calc(var(--z) * 0.05) #11181d, 0 0 calc(var(--z) * 0.35) rgba(255, 77, 94, 0.55); }
.f.mi::after { content: ''; position: absolute; width: 74%; height: 74%; background: conic-gradient(from 0deg, #11181d 0 4%, transparent 4% 12.5%, #11181d 12.5% 16.5%, transparent 16.5% 25%, #11181d 25% 29%, transparent 29% 37.5%, #11181d 37.5% 41.5%, transparent 41.5% 50%, #11181d 50% 54%, transparent 54% 62.5%, #11181d 62.5% 66.5%, transparent 66.5% 75%, #11181d 75% 79%, transparent 79% 87.5%, #11181d 87.5% 91.5%, transparent 91.5%);
  border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%); mask: radial-gradient(circle, transparent 34%, #000 35%); }
.f.mi.knall { background: radial-gradient(circle, #ff8a5a, var(--rot) 60%, #5a0d18); animation: knall .5s ease-out; }
@keyframes knall { 0% { transform: scale(1.6); filter: brightness(2.5); } }
.f.falsch::before { opacity: 0.4; } .f.falsch { background: linear-gradient(135deg, transparent 46%, var(--rot) 46% 54%, transparent 54%), #24394a; }
.feld.welle .f { animation: welle 0.6s ease-out backwards; animation-delay: calc(var(--d) * 1ms); }
@keyframes welle { 0% { transform: scale(0.9); filter: brightness(2); } }
.feld.erschuettert { animation: schuetteln 0.45s; }
@keyframes schuetteln { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }

/* Startbildschirm (Norm sb-*) */
.ebene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
/* padding-top: Startkarte bleibt unter der GameZone-Pille, wenn sie bei niedriger Fensterhöhe die volle Höhe braucht (Prüfung 30.10.) */
.sb { justify-content: flex-start; padding-top: 60px; padding-left: clamp(16px, 7vw, 110px); background: linear-gradient(90deg, rgba(2, 10, 16, 0.94), rgba(2, 10, 16, 0.75) 38%, rgba(2, 10, 16, 0.1) 72%); }
.sb-karte { width: min(500px, calc(100% + 40px)); max-height: 100%; overflow-y: auto; padding: 8px 24px 24px; margin: 0 -20px; scrollbar-width: none; }
.sb-vortitel { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sonar); }
.sb-titel { margin: 4px 0 0; font-family: var(--zahl); font-weight: 700; font-size: clamp(64px, 9vw, 124px); line-height: 0.9; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, var(--sonar)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-unterzeile { margin: 10px 0 22px; color: var(--leise); font-size: 16px; }
.sb-gruppe { margin: 0 0 14px; }
.sb-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sonar); margin-bottom: 6px; }
.sb-wahl { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--sonar-d); }
.sb-wahl button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); font-weight: 700; }
.sb-wahl button.an { background: linear-gradient(180deg, #9dffe4, var(--sonar)); color: #02261c; }
.sb-start { width: 100%; margin: 8px 0 14px; padding: 14px; border: 0; border-radius: 999px; font-family: var(--zahl); font-weight: 700; font-size: 28px; letter-spacing: 0.08em; text-transform: uppercase; color: #02261c;
  background: linear-gradient(180deg, #b8ffee, var(--sonar)); box-shadow: 0 0 28px rgba(61, 255, 200, 0.35); }
.sb-hilfe { border: 1px solid var(--sonar-d); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--leise); background: rgba(255, 255, 255, 0.03); }
.sb-hilfe summary { color: var(--text); font-weight: 700; cursor: pointer; }
.sb-hilfe p { margin: 8px 0 0; line-height: 1.5; }
.sb-hilfe h2, .sb-hilfe h3, .sb-hilfe h4 { color: var(--text); }
.sb-sprache { margin-top: 12px; background: none; border: 1px solid var(--sonar-d); border-radius: 999px; padding: 6px 14px; color: var(--leise); font-size: 13px; }
#ende, #pause { background: rgba(2, 8, 12, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.karte { width: min(400px, 100%); padding: 26px; text-align: center; border-radius: 20px; background: linear-gradient(170deg, #0f3442, #071a24); border: 1px solid var(--sonar-d); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.karte h2 { margin: 0 0 8px; font-family: var(--zahl); font-size: 38px; text-transform: uppercase; color: var(--sonar); }
.karte.verloren h2 { color: var(--rot); }
.karte .gross { font-family: var(--zahl); font-size: 52px; }
.karte p { margin: 6px 0; color: var(--leise); }
.karte a { color: var(--sonar); }
.knopf-gross { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 999px; font-family: var(--zahl); font-weight: 700; font-size: 22px; text-transform: uppercase; color: #02261c; background: linear-gradient(180deg, #b8ffee, var(--sonar)); }
.knopf-leise { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--sonar-d); border-radius: 999px; background: none; color: var(--leise); }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .kopf { padding-left: 0; padding-top: 50px; } .knoepfe { position: fixed; top: var(--oben); right: var(--rand); }
  .rund { width: 38px; height: 38px; } .wert b { font-size: 20px; } .feld-rahmen { padding: 6px; } .hinweis { display: none; }
  .sb { justify-content: center; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(2, 10, 16, 0.25), rgba(2, 10, 16, 0.95) 45%); }
  .sb-titel { font-size: 76px; }
}
@media (min-width: 761px) and (min-aspect-ratio: 4/5) { body.im-menue .tisch { transform: translateX(min(18vw, 280px)); } }
@media (prefers-reduced-motion: reduce) { .sonar::after, .f.o, .feld.welle .f { animation: none; } }

/* Hintergrundbild (Micha 30.10.: Startbild nicht leer, echte Illustration; Krea 2, ~/neo/werkzeug/gamezone/gpu/hg-bilder.py).
   Eigene Ebene hinter allem: im Menü kräftig, im Spiel abgedunkelt und leicht unscharf, damit das Feld vorn bleibt.
   Hochformat-Fenster bekommen hg-hoch. 3D-Spiele machen das in der Szene (_spiel/hintergrund.js). */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 10, 16, 0.15), rgba(2, 10, 16, 0.5)), url('../img/hg-quer.webp') center / cover no-repeat;
  transition: opacity .6s ease, filter .6s ease; }
body:not(.im-menue)::before { opacity: 0.4; filter: blur(3px) saturate(0.85); }
@media (max-aspect-ratio: 9/10) { body::before { background-image: linear-gradient(180deg, rgba(2, 10, 16, 0.2), rgba(2, 10, 16, 0.6)), url('../img/hg-hoch.webp'); } }