/* Dorfschießen als App (public/dorfschiessen/vollbild/index.html): Vollbild ohne Seitenrahmen.
   Dieselben Spielregeln wie in src/styles/dorf.css (Block „Dorfschießen“), plus Vollbild und sichere Ränder (Notch).
   Liegt bewusst als statische Datei hier, damit die Android-App sie ohne Astro-Build mitnehmen kann. */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(/spiel/fonts/anton-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-display: swap; src: url(/spiel/fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url(/spiel/fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-display: swap; src: url(/spiel/fonts/barlow-700.woff2) format('woff2'); }
@font-face { font-family: 'Anton Ersatz'; src: local('Impact'); size-adjust: 95.01%; ascent-override: 123.80%; descent-override: 34.64%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Ersatz'; src: local('Arial'); size-adjust: 87.14%; ascent-override: 114.76%; descent-override: 22.95%; line-gap-override: 0%; }

:root {
  --schildgelb: #ffd21a; --schildschwarz: #15140f; --emaille: #1c4a97; --feuerrot: #c4161c;
  --f-plakat: 'Anton', 'Anton Ersatz', Impact, 'Arial Narrow', sans-serif;
  --f-schild: 'Barlow Semi Condensed', 'Barlow Ersatz', 'Arial Narrow', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: #0d1420; color: #fff; font-family: var(--f-schild); font-size: 1rem; line-height: 1.45; overflow: hidden; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
a { color: inherit; }
h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 0.8rem; }
.etikett { font-family: var(--f-schild); font-weight: 600; font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--schildgelb); outline-offset: 3px; }

/* Schild-Knopf wie auf der Website */
.knopf { --spitze: 1.15em; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; cursor: pointer; border: 0; background: none; color: var(--schildschwarz); font: inherit; font-family: var(--f-schild); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.85rem calc(var(--spitze) + 1.1rem) 0.85rem 1.3rem; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.3)) drop-shadow(0 6px 10px rgb(0 0 0 / 0.22)); }
.knopf::before, .knopf::after { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0, calc(100% - var(--spitze)) 0, 100% 50%, calc(100% - var(--spitze)) 100%, 0 100%); }
.knopf::before { background: var(--schildschwarz); }
.knopf::after { inset: 3px 5px 3px 3px; background: linear-gradient(175deg, #ffe04d, var(--schildgelb) 40%, #f1c200); }
.knopf.linie::after { background: linear-gradient(175deg, #fff, #f3f0e6); }
.knopf:disabled { opacity: 0.55; }

/* Bühne: das ganze Fenster */
.spiel { position: fixed; inset: 0; background: #0d1420; overflow: hidden; user-select: none; -webkit-user-select: none; }
.spiel canvas { display: block; width: 100%; height: 100%; object-fit: cover; touch-action: none; }
.spiel.laeuft canvas { cursor: none; }
.spiel-hud { position: absolute; inset: 0 0 auto 0; display: flex; align-items: flex-start; gap: 0.5rem; padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) 0 max(0.5rem, env(safe-area-inset-left)); pointer-events: none; }
.hud-block { display: grid; gap: 0.1rem; min-width: 4.4rem; padding: 0.3rem 0.6rem 0.4rem; border-radius: 0.5rem; background: rgb(21 20 15 / 0.86); color: #fff; border: 2px solid rgb(255 210 26 / 0.5); pointer-events: auto; }
.hud-block .etikett { color: var(--schildgelb); font-size: 0.62rem; }
.hud-block b { font-family: var(--f-plakat); font-weight: 400; font-size: clamp(1.2rem, 0.9rem + 1.2vw, 2rem); line-height: 1; letter-spacing: 0.02em; }
.hud-patronen { cursor: pointer; font: inherit; text-align: left; }
.hud-patronen .huelsen { display: flex; gap: 0.22rem; padding-top: 0.2rem; }
.hud-patronen i { display: block; width: 0.5rem; height: 1.15rem; border-radius: 0.15rem 0.15rem 0.05rem 0.05rem; background: linear-gradient(#e8483a, #b8261f 70%, #d9b34a 70%); box-shadow: inset -2px 0 0 rgb(0 0 0 / 0.25); transition: opacity 0.15s, transform 0.15s; }
.hud-patronen i.leer { opacity: 0.2; transform: translateY(2px); }
.hud-patronen.leer { animation: wackeln 0.3s; }
.hud-patronen.laedt i { animation: laden 0.75s linear; }
@keyframes wackeln { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes laden { 0% { opacity: 0.2; transform: translateY(8px); } 60% { opacity: 0.2; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.hud-kombo { align-self: center; margin-left: 0.3rem; font-family: var(--f-plakat); font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem); color: var(--schildgelb); text-shadow: 0 2px 0 var(--schildschwarz), 0 0 12px rgb(0 0 0 / 0.5); }
.hud-kombo.heiss { color: #ff5a4a; animation: pochen 0.5s infinite alternate; }
@keyframes pochen { to { transform: scale(1.12); } }
.hud-rechts { margin-left: auto; display: flex; gap: 0.35rem; pointer-events: auto; }
.hud-knopf { font: inherit; font-family: var(--f-schild); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; padding: 0.4rem 0.6rem; border-radius: 0.4rem; border: 2px solid rgb(255 210 26 / 0.5); background: rgb(21 20 15 / 0.86); color: #fff; cursor: pointer; }
.hud-knopf:hover { background: var(--schildgelb); color: var(--schildschwarz); }
.spiel-kommentar { position: absolute; z-index: 2; left: max(0.8rem, env(safe-area-inset-left)); bottom: max(0.8rem, env(safe-area-inset-bottom)); max-width: min(55%, 24rem); margin: 0; padding: 0.5rem 0.8rem; border-radius: 0.7rem 0.7rem 0.7rem 0.1rem; background: #fffdf6; color: var(--schildschwarz); font-weight: 600; font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem); box-shadow: 0 4px 0 var(--schildschwarz); opacity: 0; transform: translateY(8px); pointer-events: none; }
.spiel-kommentar::before { content: "Stammtisch"; display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--feuerrot); }
.spiel-kommentar.zeigt { animation: kommentar 2.6s ease forwards; }
@keyframes kommentar { 0% { opacity: 0; transform: translateY(8px); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Sponsor-Schild unten rechts */
.spiel-sponsor { position: absolute; right: max(0.8rem, env(safe-area-inset-right)); bottom: max(0.8rem, env(safe-area-inset-bottom)); max-width: 42%; padding: 0.4rem 0.7rem; border-radius: 0.5rem; background: rgb(255 253 246 / 0.94); color: var(--schildschwarz); font-weight: 600; font-size: 0.75rem; line-height: 1.25; text-decoration: none; border-left: 4px solid var(--feuerrot); box-shadow: 0 3px 0 var(--schildschwarz); }
.spiel-sponsor b { display: block; color: var(--feuerrot); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.spiel-sponsor { display: none; } /* nur während der Runde – auf den Tafeln steht der Sponsor selbst */
.spiel.laeuft .spiel-sponsor { display: block; opacity: 0.85; }

/* Tafeln */
.spiel-tafel { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; text-align: center; padding: max(3.4rem, calc(env(safe-area-inset-top) + 2.8rem)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow-y: auto; touch-action: pan-y; background: rgb(5 8 18 / 0.62); color: #fff; }
.spiel-tafel > * { max-width: 34rem; }
.spiel-tafel .etikett { color: var(--schildgelb); margin: 0 0 0.3rem; }
.spiel-tafel h3 { margin: 0 0 0.7rem; font-family: var(--f-plakat); text-transform: uppercase; font-size: clamp(1.4rem, 1rem + 2.2vw, 3rem); line-height: 1; letter-spacing: 0.01em; }
.spiel-regeln { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.25rem; font-size: clamp(0.85rem, 0.8rem + 0.4vw, 1.05rem); }
.spiel-regeln b { color: var(--schildgelb); }
.ort-wahl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.8rem; margin: 0.2rem 0 0.9rem; font-weight: 600; }
.ort-wahl input { font: inherit; font-weight: 500; font-size: 1rem; padding: 0.5rem 0.8rem; border-radius: 0.35rem; border: 2px solid var(--schildschwarz); background: #fffdf6; color: var(--schildschwarz); min-width: 11rem; }
.ort-wahl .knopf { font-size: 0.9rem; padding: 0.6rem calc(var(--spitze) + 0.8rem) 0.6rem 1rem; }
.ende-punkte { margin: 0 !important; font-weight: 600; font-size: 1rem; }
.ende-punkte b { display: block; font-family: var(--f-plakat); font-weight: 400; font-size: clamp(2.6rem, 2rem + 4vw, 5rem); line-height: 1; color: var(--schildgelb); }
.ende-details { font-size: 0.9rem; opacity: 0.85; }
.ende-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.ende-form input { font: inherit; font-weight: 500; font-size: 1rem; padding: 0.55rem 0.8rem; border-radius: 0.35rem; border: 2px solid var(--schildschwarz); background: #fffdf6; color: var(--schildschwarz); min-width: 11rem; }
.ende-teilen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 0.8rem; }
.ende-knoepfe { margin: 0; }
.ende-depp { margin: 0.7rem 0 0; font-weight: 600; font-size: 0.9rem; }
.ende-depp a { color: var(--schildgelb); }
.tafel-sponsor { margin: 0.7rem 0 0; font-size: 0.92rem; }
.tafel-sponsor a { color: var(--schildgelb); }
.tafel-haus { margin: 0.4rem 0 0; font-size: 0.78rem; opacity: 0.7; }

/* Werbetafel am Rundenende: dorflife.de, CAZ Labs, Sponsor – eine je Runde, im Wechsel */
.ende-werbung { width: min(100%, 26rem); margin: 0.8rem 0 0; }
.ende-werbung a { display: block; padding: 0.65rem 0.9rem; border-radius: 0.5rem; background: #fffdf6; color: var(--schildschwarz); text-decoration: none; text-align: left; box-shadow: 0 4px 0 var(--schildschwarz); border-left: 5px solid var(--feuerrot); }
.ende-werbung .etikett { display: block; color: var(--feuerrot); margin-bottom: 0.1rem; font-size: 0.62rem; }
.ende-werbung b { display: block; font-family: var(--f-plakat); font-weight: 400; font-size: 1.25rem; line-height: 1.05; text-transform: uppercase; }
.ende-werbung span:not(.etikett) { display: block; font-size: 0.85rem; margin-top: 0.15rem; }

@media (max-height: 420px) { .spiel-tafel h3 { font-size: 1.3rem; margin-bottom: 0.4rem; } .spiel-regeln li:nth-child(n + 3) { display: none; } .ende-punkte b { font-size: 2.4rem; } }