/* MINIMAL RAID - Seite: schwarz/weiss, Versalien, scharfe Kanten (Typografie wie Minimal Run). Das Spielbild fuellt die
   Flaeche, die Anzeige liegt in den Raendern ausserhalb des Spielfelds (Desktop: Seiten, Handy: oben/unten). */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #08080b; color: #fff;
             font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; touch-action: none;
             overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
             -webkit-tap-highlight-color: transparent; }
#feld { position: fixed; inset: 0; display: flex;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#buehne { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; touch-action: none; }
#spiel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }

#anzeige { position: absolute; inset: 0; pointer-events: none; --u: max(10px, min(1.4vw, 2.3vh)); }
.text { font-size: var(--u); letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; }
.weg { display: none !important; }

/* oben links: Punkte, Kette, Bestwert */
#links { position: absolute; left: calc(var(--u) * 1.4); top: calc(var(--u) * 1.1); display: flex; align-items: baseline;
         gap: calc(var(--u) * 0.8); flex-wrap: wrap; max-width: 46%; }
#punkte { font-size: calc(var(--u) * 1.5); font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
#faktor { color: #ffd93d; }
#faktor.neu { animation: puls 0.5s ease-out; }
#best { opacity: 0.5; font-size: calc(var(--u) * 0.75); }
@keyframes puls { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* oben rechts: Abschnitt und Leben */
#rechts { position: absolute; right: calc(var(--u) * 1.4); top: calc(var(--u) * 1.2); display: flex; align-items: center;
          gap: calc(var(--u) * 0.9); }
#ort { opacity: 0.75; }
#leben { display: flex; gap: calc(var(--u) * 0.35); }
#leben i { width: calc(var(--u) * 0.75); height: calc(var(--u) * 0.75); box-sizing: border-box; background: #fff;
           clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }

/* Boss: Balken oben in der Mitte */
#boss { position: absolute; left: 50%; top: calc(var(--u) * 3.0); transform: translateX(-50%); display: flex; flex-direction: column;
        align-items: center; gap: calc(var(--u) * 0.35); width: min(46vw, calc(var(--u) * 22)); }
#boss b { display: block; width: 100%; height: max(3px, calc(var(--u) * 0.22)); background: rgb(255 255 255 / 0.22); }
#boss b i { display: block; height: 100%; width: 100%; background: #fff; transition: width 0.15s linear; }

/* Mitte: Titel, Hinweise, Bestenliste */
#mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: calc(var(--u) * 0.8); text-align: center; padding: 0 calc(var(--u) * 1.2); }
#titel { font-weight: 700; line-height: 1; font-size: min(calc(var(--u) * 4.2), 13vw); letter-spacing: -0.035em; }
#unter { opacity: 0.75; }
#hinweis.blinkt { animation: blinkt 2s ease-in-out infinite; }
@keyframes blinkt { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
#liste { list-style: none; margin: calc(var(--u) * 0.6) 0 0; padding: 0; display: grid; gap: calc(var(--u) * 0.45); opacity: 0.8; }
#liste li { display: grid; grid-template-columns: 2em 9em 7em; text-align: left; }
#liste li b { font-weight: 600; text-align: right; }
#liste li.neu { opacity: 1; text-decoration: underline; }
#legende { display: flex; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 0.6); opacity: 0.8; flex-wrap: wrap; justify-content: center; }
#legende span { display: flex; align-items: center; gap: calc(var(--u) * 0.4); }
#legende em { font-style: normal; }
#legende i { display: inline-block; width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); }
#legende i.kraft { background: #ff9300; outline: 1px solid #fff; outline-offset: 2px; }
#legende i.ladung { background: #00ffef; outline: 1px solid #fff; outline-offset: 2px; }
#legende i.kern { background: #fff; box-shadow: 0 0 calc(var(--u) * 0.6) #fff; width: calc(var(--u) * 0.45); height: calc(var(--u) * 0.45); }

/* Meldung: erscheint und blendet aus */
#meldung { position: absolute; left: 0; right: 0; top: 62%; text-align: center; font-size: calc(var(--u) * 1.6);
           font-weight: 700; letter-spacing: 0.02em; opacity: 0; }
#meldung.zeigen { animation: meldung 1.5s ease-in forwards; }
#meldung.warnung { color: #ffe600; }
@keyframes meldung { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-0.6em); } }

/* Tastenhilfe beim Start */
#tasten { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 2.2 + 48px); width: max-content;
          max-width: calc(100% - var(--u) * 3.2); box-sizing: border-box; text-align: center; font-size: calc(var(--u) * 0.75);
          line-height: 1.6; padding: calc(var(--u) * 0.45) calc(var(--u) * 1.0); background: rgb(10 10 14 / 0.66);
          border: 1px solid rgb(255 255 255 / 0.2); white-space: pre-wrap; }

/* Bruch (Spezialwaffe): Ladungen unten links (Tastatur/Gamepad), Knopf unten rechts (Touch) */
.ladungen { display: flex; gap: calc(var(--u) * 0.32); }
.ladungen i { position: relative; width: calc(var(--u) * 0.75); height: calc(var(--u) * 0.75); box-sizing: border-box;
              border: max(1px, calc(var(--u) * 0.12)) solid #fff; overflow: hidden; }
.ladungen i.voll { background: #00ffef; border-color: #fff; }
.ladungen i b { position: absolute; left: 0; right: 0; bottom: 0; background: rgb(255 255 255 / 0.55); }
#bruchAnzeige { position: absolute; left: calc(var(--u) * 1.4); bottom: calc(var(--u) * 4.2); display: flex; align-items: center;
                gap: calc(var(--u) * 0.7); }
#bruchAnzeige.bereit > .text:first-child { color: #00ffef; }
#bruchTaste { opacity: 0.5; font-size: calc(var(--u) * 0.72); }
#bruchKnopf { display: none; position: absolute; right: max(12px, calc(var(--u) * 1.0)); bottom: max(12px, calc(var(--u) * 1.0));
              pointer-events: auto; width: max(92px, calc(var(--u) * 7)); height: max(92px, calc(var(--u) * 7));
              background: rgb(8 8 11 / 0.55); border: 2px solid rgb(255 255 255 / 0.65); color: #fff; font-family: inherit;
              flex-direction: column; align-items: center; justify-content: center; gap: 10px; touch-action: none; cursor: pointer; }
#bruchKnopf.bereit { border-color: #00ffef; box-shadow: 0 0 18px rgb(0 255 239 / 0.35); }
#bruchKnopf.leer { opacity: 0.45; }
#bruchKnopf.gedrueckt { background: rgb(0 255 239 / 0.35); }
body.touch #bruchKnopf { display: flex; }
body.touch #tasten { bottom: calc(max(92px, var(--u) * 7) + max(24px, var(--u) * 2)); }
body.touch #bruchAnzeige, body.touch #ton { display: none !important; }

/* Ecken-Knoepfe: Menue unten links, Ton unten rechts (Touch: Ton im Menue) */
#ton, #menueKnopf { position: absolute; bottom: calc(var(--u) * 1.0); pointer-events: auto; background: none; border: 0;
       color: #fff; opacity: 0.45; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2); font-family: inherit; cursor: pointer;
       touch-action: manipulation; min-height: 44px; min-width: 88px; }
#ton { right: calc(var(--u) * 0.4); }
#ton.aus { opacity: 0.8; text-decoration: line-through; }
#menueKnopf { left: calc(var(--u) * 0.4); }
#ton:hover, #menueKnopf:hover { opacity: 0.9; }
body.touch #menueKnopf { left: max(4px, calc(var(--u) * 0.2)); bottom: max(12px, calc(var(--u) * 1.0)); }

/* Namenseingabe und Menue: schlichte Tafel */
#eintrag, #menue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
                   background: rgba(8, 8, 11, 0.88); border: 1px solid rgba(255, 255, 255, 0.35);
                   padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2); display: flex; flex-direction: column;
                   align-items: center; gap: calc(var(--u) * 0.9); --u: max(12px, min(1.5vw, 2.4vh)); touch-action: manipulation;
                   max-width: calc(100vw - 32px); box-sizing: border-box; }
#eintrag .kopf { opacity: 0.6; }
#eintragPunkte { font-size: calc(var(--u) * 2.6); font-weight: 700; letter-spacing: -0.02em; }
#name { background: none; border: 0; border-bottom: 1px solid #fff; color: #fff; text-align: center; width: 10em;
        font-family: inherit; padding: calc(var(--u) * 0.3); outline: none; -webkit-user-select: text; user-select: text;
        font-size: max(16px, var(--u)); }
#eintrag .knoepfe { display: flex; gap: calc(var(--u) * 1.2); flex-wrap: wrap; justify-content: center; }
#eintrag button, #menue button { background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff;
        font-family: inherit; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2); min-height: 44px; min-width: 9em; cursor: pointer; }
#eintrag button:focus-visible, #menue button:focus-visible, #eintrag button:hover, #menue button:hover {
        background: #fff; color: #08080b; outline: none; }
#sprachen { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.4); max-width: min(30em, 86vw); }
#ueber { color: rgb(255 255 255 / 0.66); font-size: calc(var(--u) * 0.72); text-decoration: none; padding: 0.5em 0.2em;
         border-bottom: 1px solid rgb(255 255 255 / 0.3); }
#ueber:hover, #ueber:focus-visible { color: #fff; border-color: #fff; outline: none; }
#menue #sprachen button { min-width: 0; min-height: 40px; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.9);
                          border-color: rgba(255, 255, 255, 0.22); opacity: 0.7; letter-spacing: 0.08em; }
#menue #sprachen button.an { opacity: 1; border-color: #fff; }
#menueTasten { margin-top: calc(var(--u) * 0.6); display: grid; gap: calc(var(--u) * 0.4); font-size: calc(var(--u) * 0.68);
               color: rgb(255 255 255 / 0.66); text-align: center; max-width: min(36em, 90vw); line-height: 1.5; white-space: pre-wrap; }

#lade { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: #08080b; text-transform: uppercase; text-align: center; }
#lade h1 { font-weight: 700; font-size: clamp(34px, 8vw, 96px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 0.6em; }
#lade p { font-size: 13px; letter-spacing: 0.3em; opacity: 0.6; margin: 0 16px; }

/* Aufnahmen: ?aufnahme=1 ohne Menue-/Ton-Knopf, ?aufnahme=2 nur das Spielbild */
body.aufnahme1 #menueKnopf, body.aufnahme1 #ton { display: none !important; }
body.aufnahme2 #anzeige { display: none !important; }

/* Weltwahl: Namen im selben Raster wie die Dioramen (oben 17 %, hochkant 13 %, unten 6 %), die gewaehlte hell; der Titel
   rueckt nach oben, der Bruch-Knopf ist ausserhalb des Spiels weg */
#welten { position: absolute; left: 0; right: 0; top: 17%; bottom: 6%; display: grid; grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, 1fr); pointer-events: none; }
#welten.hoch { top: 13%; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
#welten span { align-self: end; justify-self: center; padding-bottom: calc(var(--u) * 0.45); opacity: 0.5; transition: opacity 0.2s; }
#welten span.an { opacity: 1; border-bottom: max(1px, calc(var(--u) * 0.12)) solid #fff; }
#anzeige.auswahl #mitte { top: calc(var(--u) * 1.0); bottom: auto; height: auto; justify-content: flex-start; gap: calc(var(--u) * 0.35); }
#anzeige.auswahl #titel { font-size: min(calc(var(--u) * 2.2), 9vw); }
body.touch:not(.imspiel) #bruchKnopf { display: none; }

/* Filmhilfe (?geraet=pad|tasten|touch, nur fuer Aufnahmen): Controller bzw. Tasten unten links ueber der Bruch-Anzeige,
   die Eingaben leuchten mit; Touch: Finger unter dem Schiff und am Knopf */
#filmhilfe { position: absolute; pointer-events: none; }
#filmhilfe.pad, #filmhilfe.tasten { left: calc(var(--u) * 1.4); bottom: calc(var(--u) * 6.0); width: calc(var(--u) * 12.5); }
#filmhilfe.touch { inset: 0; }
#filmhilfe svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.55)); }
#filmhilfe .koerper { fill: rgb(18 19 25 / 0.93); stroke: rgb(233 236 242 / 0.42); stroke-width: 1.6; }
#filmhilfe .mulde { fill: rgb(8 8 11 / 0.75); stroke: rgb(233 236 242 / 0.18); stroke-width: 1.2; }
#filmhilfe .stick { fill: #e9ecf2; opacity: 0.8; transition: fill 0.12s; }
#filmhilfe .stick.an { fill: #00ffef; opacity: 1; filter: drop-shadow(0 0 6px rgb(0 255 239 / 0.8)); }
#filmhilfe .kreuz rect, #filmhilfe .klein { fill: rgb(233 236 242 / 0.35); }
#filmhilfe .knopf { fill: rgb(233 236 242 / 0.22); stroke: rgb(233 236 242 / 0.45); stroke-width: 1.2; }
#filmhilfe .knopf.a, #filmhilfe .knopf.x { fill: rgb(233 236 242 / 0.4); }
#filmhilfe .taste { fill: rgb(14 15 20 / 0.8); stroke: rgb(233 236 242 / 0.5); stroke-width: 1.6; transition: fill 0.1s; }
#filmhilfe .pfeil { fill: #e9ecf2; opacity: 0.85; }
#filmhilfe text { fill: #fff; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-anchor: middle; text-transform: uppercase; }
#filmhilfe .kreuz rect.an, #filmhilfe .taste.an, #filmhilfe .knopf.an { fill: #00ffef; stroke: #fff;
                                                                        filter: drop-shadow(0 0 7px rgb(0 255 239 / 0.85)); }
#filmhilfe .finger { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
                     box-sizing: border-box; border: 2px solid rgb(255 255 255 / 0.6); opacity: 0; transition: opacity 0.25s;
                     background: radial-gradient(circle, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.14) 62%, rgb(255 255 255 / 0) 72%); }
#filmhilfe .finger.an { opacity: 1; }
#filmhilfe .finger.tipp { left: auto; top: auto; margin: 0;
                          right: calc(max(12px, var(--u) * 1.0) + max(92px, var(--u) * 7) / 2 - 30px);
                          bottom: calc(max(12px, var(--u) * 1.0) + max(92px, var(--u) * 7) / 2 - 30px); transition: opacity 0.1s; }