/* ==========================================================================
   Effekte: Ladeanimation, Laternen-Cursor, Tiefenmesser, Unterwasser,
   Kanonenrauch, Bildschirmwackeln, Kraken, Kapitänspatent, ruhiger Modus
   ========================================================================== */

/* ---------- Ladeanimation „Schwarze Flagge“ ---------- */
.lader { position: fixed; inset: 0; z-index: var(--z-lader); display: none; place-items: center; background: radial-gradient(80% 70% at 50% 45%, #0D1B27, var(--abyss) 70%); }
html.erstbesuch:not(.ruhig) .lader { display: grid; animation: lader-notaus .4s 6s forwards; }
@keyframes lader-notaus { to { opacity: 0; visibility: hidden; } }
.lader.weg { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.lader-buehne { display: grid; justify-items: center; gap: .6rem; }
.lader-flagge { width: min(28rem, 72vw); overflow: visible; }
.lader-mast { stroke: #6B4425; stroke-width: 7; stroke-linecap: round; }
.lader-knauf { fill: var(--gold); }
.lader-tuch { transform-box: fill-box; transform-origin: 0% 50%; }
.lader-tuch-form { fill: #080D12; stroke: rgba(201, 214, 227, .28); stroke-width: 1.5; }
.le-schaedel { fill: #E9EFF5; }
.le-saebel { fill: none; stroke: #C9D6E3; stroke-width: 7; stroke-linecap: round; }
.lader-wort { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2vw, 3.6rem); color: var(--mond-hell); line-height: 1; }
.lader-wort span { font-family: var(--f-hud); font-weight: 600; font-size: .5em; letter-spacing: .08em; color: var(--gold); }
.lader-status { font-family: var(--f-hud); font-weight: 600; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mond-matt); }
.lader-blitz { position: absolute; inset: 0; background: #E8F1FF; opacity: 0; pointer-events: none; }

/* ---------- Laternen-Cursor ---------- */
.laternenschein { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; border-radius: 50%; pointer-events: none; display: none; opacity: 0; transition: opacity .6s; mix-blend-mode: screen; will-change: transform; }
.laternenschein::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 165, 65, .15), rgba(242, 165, 65, .055) 42%, transparent 100%); animation: laterne-flackern 3.2s ease-in-out infinite; }
.ls-kern { position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .22), transparent); }
@keyframes laterne-flackern { 0%, 100% { opacity: 1; scale: 1; } 30% { opacity: .82; scale: .97; } 55% { opacity: 1; scale: 1.02; } 80% { opacity: .9; } }
html.feinzeiger:not(.laterne-aus):not(.ruhig) .laternenschein { display: block; }
html.feinzeiger .laternenschein.da { opacity: 1; }
.laternenschein.ueber-karte::before { background: radial-gradient(closest-side, rgba(232, 194, 107, .2), rgba(232, 194, 107, .07) 40%, transparent 100%); }
html.goldlaterne .laternenschein::before { background: radial-gradient(closest-side, rgba(255, 215, 120, .24), rgba(232, 194, 107, .09) 42%, transparent 100%); }
html.goldlaterne .hud-laterne { color: var(--gold); }

/* ---------- Mauszeiger: Entermesser auf der ganzen Seite (nur Maus) ----------
   Silber überall, Gold auf Links, Knöpfen und Karten, Textcursor in Eingabefeldern. */
html.feinzeiger, html.feinzeiger body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 3c9 2 17 9 21 17l-3 2.4C17 15 11 8.6 3 3z' fill='%23E9EFF5' stroke='%2305080C' stroke-width='1.2'/%3E%3Cpath d='M18.6 24.6l6.6-5.4 2.2 2.2-5.6 6.4z' fill='%23E8C26B' stroke='%2305080C' stroke-width='1.2'/%3E%3Cpath d='M23.4 25.4l4.6 4.4' stroke='%236B4425' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, auto; }
html.feinzeiger :is(a[href], button, [role="button"], [role="radio"], [role="tab"], label[for], summary, select, input:is([type="button"], [type="submit"], [type="checkbox"], [type="radio"], [type="range"])) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 3c9 2 17 9 21 17l-3 2.4C17 15 11 8.6 3 3z' fill='%23F2D27A' stroke='%2305080C' stroke-width='1.2'/%3E%3Cpath d='M5.2 5.4c6.4 2.4 12 7.4 15.6 13.4' fill='none' stroke='%23FFF4CF' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M18.6 24.6l6.6-5.4 2.2 2.2-5.6 6.4z' fill='%23FFE7A3' stroke='%2305080C' stroke-width='1.2'/%3E%3Cpath d='M23.4 25.4l4.6 4.4' stroke='%236B4425' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, pointer; }
html.feinzeiger :is(input:not([type="button"], [type="submit"], [type="checkbox"], [type="radio"], [type="range"]), textarea, [contenteditable="true"]) { cursor: text; }
html.feinzeiger :is(button:disabled, [aria-disabled="true"]) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 3c9 2 17 9 21 17l-3 2.4C17 15 11 8.6 3 3z' fill='%23E9EFF5' stroke='%2305080C' stroke-width='1.2'/%3E%3Cpath d='M18.6 24.6l6.6-5.4 2.2 2.2-5.6 6.4z' fill='%23E8C26B' stroke='%2305080C' stroke-width='1.2'/%3E%3Cpath d='M23.4 25.4l4.6 4.4' stroke='%236B4425' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, not-allowed; }

/* ---------- Tiefenmesser („Faden“) ---------- */
.tiefenmesser { position: fixed; right: max(.7rem, env(safe-area-inset-right)); top: 50%; z-index: var(--z-tiefe); display: grid; justify-items: center; gap: .5rem; translate: 0 -50%; pointer-events: none; }
.tm-titel, .tm-wert { font-family: var(--f-hud); font-weight: 600; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mond-matt); writing-mode: vertical-rl; }
.tm-wert { writing-mode: horizontal-tb; letter-spacing: .06em; text-align: center; line-height: 1.1; }
.tm-wert b { display: block; font-size: 1.05rem; color: var(--mond-hell); font-variant-numeric: tabular-nums; }
.tm-skala { position: relative; width: 9px; height: 34vh; background: repeating-linear-gradient(180deg, var(--linie-stark) 0 1px, transparent 1px 10%) center / 9px 100% no-repeat, linear-gradient(var(--linie-stark), var(--linie-stark)) center / 1px 100% no-repeat; }
.tm-skala::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: calc(var(--p, 0) * 100%); background: linear-gradient(var(--gold-tief), var(--gold)); translate: -50% 0; }
.tm-lot { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: .7rem; height: 1rem; translate: -50% -20%; background: radial-gradient(circle at 35% 30%, #FFF1C4, var(--gold) 45%, var(--gold-tief)); border-radius: 50% 50% 45% 45% / 35% 35% 65% 65%; box-shadow: 0 0 .6rem rgba(232, 194, 107, .7); }
.tiefenmesser.grund .tm-wert b { color: var(--plankton); }
@media (max-width: 47.99rem) { .tm-titel, .tm-wert { display: none; } .tiefenmesser { right: 3px; } .tm-skala { height: 40vh; width: 5px; } }

/* ---------- Unterwasser-Schleier ---------- */
.unterwasser-schleier { position: fixed; inset: 0; z-index: var(--z-unterwasser); pointer-events: none; opacity: var(--uw, 0); background: radial-gradient(120% 90% at 50% 0%, rgba(20, 110, 130, .18), rgba(2, 30, 40, .4)); }

/* ---------- Kanone: Mündungsfeuer, Rauch, Wackeln ---------- */
.muendung { position: fixed; z-index: var(--z-toast); width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, #FFF6D8, #FFB347 30%, rgba(255, 90, 20, .6) 55%, transparent); mix-blend-mode: screen; }
.rauch { position: fixed; z-index: var(--z-toast); width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(200, 205, 210, .55), rgba(150, 158, 166, .25) 55%, transparent); filter: blur(2px); }
.funke { position: fixed; z-index: var(--z-toast); width: 4px; height: 4px; margin: -2px; border-radius: 50%; pointer-events: none; background: #FFD38A; box-shadow: 0 0 6px #FF9A2E; }
.wachs { position: fixed; z-index: var(--z-toast); width: .7rem; height: .55rem; pointer-events: none; background: #A3231B; border-radius: 30% 60% 40% 70%; box-shadow: inset 0 1px 1px rgba(255, 180, 170, .5); }
.krume { position: fixed; z-index: var(--z-toast); width: .4rem; height: .4rem; pointer-events: none; background: #C9A46A; border-radius: 30%; }

/* ---------- Kraken (Konami-Code) ---------- */
.kraken { position: fixed; inset: 0; z-index: var(--z-kraken); width: 100%; height: 100%; pointer-events: none; }
.kraken-hinweis { position: fixed; left: 50%; top: 18vh; z-index: calc(var(--z-kraken) + 1); translate: -50% 0; padding: .8rem 1.4rem; font-family: var(--f-display); font-size: var(--t-2xl); color: var(--mond-hell); text-align: center; text-shadow: 0 0 2rem #000, 0 .3rem 1rem #000; pointer-events: none; }
.kraken-hinweis small { display: block; font-family: var(--f-hud); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

/* ---------- Kapitänspatent ---------- */
.patent { max-width: min(40rem, calc(100vw - 2rem)); padding: 0; border: 0; background: none; color: #1B140B; }
.patent::backdrop { background: rgba(2, 4, 6, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.patent-blatt { padding: clamp(1.6rem, 4vw, 3.2rem); background: radial-gradient(120% 120% at 20% 10%, #F6EDD4, #E3D2A8 60%, #C9AF77); box-shadow: 0 2rem 4rem rgba(0, 0, 0, .8), inset 0 0 3rem rgba(120, 80, 30, .35); border: 2px solid #8E6A24; outline: 1px solid rgba(142, 106, 36, .5); outline-offset: -10px; }
.patent .hud-label { color: #7A5A1E; }
.patent-titel { margin: .5rem 0 1rem; font-family: var(--f-display); font-size: var(--t-2xl); color: #2A1A0A; }
.patent-blatt p + p { margin-top: .8rem; }
.patent-belohnung { font-weight: 600; color: #6E1A10; }
.patent-aktion { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.patent .knopf--hud { color: #2A1A0A; background-color: rgba(255, 255, 255, .25); border-color: rgba(42, 26, 10, .4); --hk: #8E6A24; }

/* ---------- Szenen-Blitz (Bildschirmflackern) ---------- */
.blitz-schleier { position: fixed; inset: 0; z-index: var(--z-unterwasser); background: rgba(210, 228, 255, .9); opacity: 0; pointer-events: none; mix-blend-mode: overlay; }

/* ---------- Ruhiger Modus / reduzierte Bewegung ---------- */
html.ruhig *, html.ruhig *::before, html.ruhig *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html.ruhig .szene-leinwand, html.ruhig .fuss-canvas, html.ruhig .anglerfisch, html.ruhig .laternenschein, html.ruhig .tiefenmesser .tm-lot { display: none !important; }
html.ruhig .spiel-kopf-karte { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
html.ruhig .held-tipp, html.ruhig .blitz-knopf, html.ruhig .ueberbord-tipp { display: none; }