/* play.nfsu.run im Look der Retro-Seite nfsu.run (Quelle: nfsu-site/src/css/retro.css + retro-pages.css).
   Alles liegt selbst gehostet unter /retro/ (gleiche Origin, die Seite ist cross-origin-isoliert).
   Wird nach main.css geladen und überschreibt dessen Startseiten-Stil; Spiel-Bühne, Toasts und HUD bleiben unberührt. */
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;src:url('Silkscreen-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;src:url('Silkscreen-Bold.woff2') format('woff2');font-display:swap}
/* WICHTIG (wie auf der Website): Ersatzschriften NIE unter demselben Familiennamen wie die Hauptschrift anlegen,
   sonst wählt Chrome den Gewichtsbereich als besten Treffer und fällt für normale Buchstaben auf Verdana zurück.
   Deshalb eigene Familien NfsuPixelExt / NfsuCondCyr. */
@font-face{font-family:'NfsuPixelExt';font-style:normal;font-weight:400 700;src:url('Tiny5-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F;size-adjust:125%;font-display:swap}
@font-face{font-family:'NfsuPixelExt';font-style:normal;font-weight:400 700;src:url('Tiny5-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;size-adjust:125%;font-display:swap}
@font-face{font-family:'NfsuCondCyr';font-style:italic;font-weight:700 900;src:url('RobotoCondensed-900i-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:900;src:url('BarlowCondensed-900i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:900;src:url('BarlowCondensed-900i-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}

:root{
  --navy:#001a3e;--mid:#9abdd1;--mid-t:#c1d2dc;--ft:#0d4156;
  --ac:#8dcfff;--ac-rgb:141,207,255;--ac2:#c2e5ff;--sdh:#2a5884;
  --pill1:#3f8fd0;--pill2:#1b4f86;--pillb:#a9d4f4;
  --px:'Silkscreen','NfsuPixelExt',Verdana,Geneva,sans-serif;
  --ita:'Barlow Condensed','NfsuCondCyr','Arial Narrow',Arial,sans-serif;
  --vd:Verdana,Geneva,'DejaVu Sans',sans-serif;
  /* Variablen von main.css auf die blaue Palette der Website */
  --lime:#8dcfff;--lime-fill:rgba(141,207,255,.16);--lime-glow:rgba(141,207,255,.45);--cyan:#8dcfff;
  --bad:#f6e59a;--warn:#f6e59a;--text:#e6eef3;--muted:#9abdd1;--edge:#7f9db0;--line:#1d3a4c;
  --field:#06131b;--panel:#0b1820;--frame:#0b1820;--display:var(--ita);
}
html{background:#000;-webkit-text-size-adjust:100%}
body{background:#000;color:#ccc;font:8pt/1.35 Arial,Helvetica,sans-serif;-webkit-font-smoothing:auto}
body::before{content:none}
.rp{display:block;max-width:none;min-height:0;margin:0;padding:0 0 24px}
.rp a{color:inherit}
.rp :focus-visible{outline:1px dotted #bfe6f7;outline-offset:1px;box-shadow:none}
.r-skip{position:absolute;left:-999px;top:0;background:#bfe6f7;color:#000;padding:6px 10px;z-index:50;font:bold 11px Arial,sans-serif}
.r-skip:focus{left:8px}

/* ---------- Netzwerk-Leiste ---------- */
.un{background:#333;width:100%}
.un-in{width:760px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 0 0 20px}
.un-logo{display:flex;align-items:center;height:40px;flex:none}
.un-logo img{display:block;width:auto;height:32px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.un-links{display:flex;align-items:center;font:bold 10px/12px Arial,Helvetica,sans-serif;color:#fff}
.rp .un-links a{display:inline-flex;align-items:center;min-height:24px;min-width:24px;justify-content:center;padding:0 3px;color:#fff;text-decoration:none;text-transform:uppercase}
.rp .un-links a:hover{color:#bfe6f7}
.un-links>a:not([hidden])~a:not([hidden])::before{content:'|';color:#a8a8a8;font-weight:normal;margin:0 7px 0 -1px}

/* ---------- Knopfleiste ---------- */
.pg{width:759px;margin:0 auto}
.ub{width:759px;margin:0 auto;display:flex;align-items:flex-start;gap:3px;padding:10px 0 0 20px;height:44px;position:relative;z-index:5}
.rp .ub-b{--h:24px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h);min-width:70px;padding:0 13px;border:0;
  text-decoration:none;color:#fff;font:8px/1 var(--px);font-style:normal;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;cursor:pointer;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  background:linear-gradient(180deg,#e9f1f5 0,#c3d2db 1px,#9db2c0 45%,#7f97a8 55%,#8ea5b4 100%);
  text-shadow:0 1px 0 #2f4757}
.ub-b span{position:relative}
.rp .ub-b:hover,.rp .ub-b:focus-visible,.rp .ub-b[aria-current=page]{background:linear-gradient(180deg,#fff 0,#e3f2fa 1px,#bfe0f0 45%,rgb(var(--ac-rgb)) 56%,#cfeaf6 100%);color:var(--navy);text-shadow:0 1px 0 rgba(255,255,255,.7);outline:0}
.ub-b:active{transform:translateY(1px)}
/* Sprachwahl wie details.lsel der Website */
.flag{display:inline-block;flex:none;width:21px;height:14px;vertical-align:middle;border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.22)}
.lsel{position:relative;margin-left:auto;margin-right:2px}
.rp .lsel>summary{list-style:none;gap:6px;min-width:0;min-height:0;padding:0 18px 0 14px;color:#fff;font-style:normal}
.lsel>summary::-webkit-details-marker{display:none}
.rp .lsel>summary::before{content:none}
.lsel>summary::after{content:'';margin-left:1px;border:4px solid transparent;border-top:5px solid currentColor;border-bottom:0}
.rp .lsel[open]>summary{background:linear-gradient(180deg,#fff 0,#e3f2fa 1px,#bfe0f0 45%,rgb(var(--ac-rgb)) 56%,#cfeaf6 100%);color:var(--navy);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.lsel[open]>summary::after{transform:rotate(180deg)}
.lsel-m{position:absolute;right:0;top:calc(100% + 5px);z-index:30;width:250px;margin:0;padding:5px;display:grid;grid-template-columns:1fr 1fr;gap:1px 4px;max-height:min(75vh,620px);overflow-y:auto;
  background:linear-gradient(180deg,#132835,#0b1820);border:1px solid #9fb6c3;box-shadow:0 0 0 1px #000,0 10px 28px rgba(0,0,0,.85)}
.lsel-m button{display:flex;align-items:center;gap:8px;min-height:28px;padding:4px 6px;font:11px/1.2 Arial,Helvetica,sans-serif;color:var(--mid);text-align:left;background:none;border:0;cursor:pointer}
.lsel-m button:hover,.lsel-m button:focus-visible{background:rgba(var(--ac-rgb),.2);color:#fff;outline:0}
.lsel-m button[aria-checked=true]{color:#fff;font-weight:bold;background:rgba(var(--ac-rgb),.12);box-shadow:inset 2px 0 0 var(--ac)}
.lsel-h{grid-column:1/-1;margin:6px 2px 2px;padding:7px 4px 3px;border-top:1px solid #29475b;font:8px/10px var(--px);text-transform:uppercase;color:#bfe6f7}
.flag-none{display:block;width:21px;height:14px;flex:none}
/* Englisch: UK + US nebeneinander (61.5x20 = doppelte Breite + 1px Fuge) */
.flag.flag2{width:43px}

/* ---------- Kopf (wie Unterseiten der Website, 759 x 96) ---------- */
.sh{position:relative;display:flex;align-items:stretch;height:96px;background:
  linear-gradient(100deg,transparent 0 14px,#5f7584 14px 15px,#2c3a44 15px 300px,transparent 300px) 0 0/100% 13px no-repeat,
  linear-gradient(180deg,#0b1116,#000 70%)}
.sh::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#56707f 30%,#9fb6c3 60%,#56707f)}
.sh-logo{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:300px;margin:16px 0 2px 6px;
  clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 40%),linear-gradient(100deg,#4e6575 0,#1e2a33 2px,#0f171d 45%,#273743 75%,#121a20)}
.sh-logo img{display:block;width:250px;height:auto;filter:drop-shadow(0 2px 3px #000)}
.sh-t{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;margin:16px 0 2px -10px;padding:0 18px 0 40px;
  clip-path:polygon(18px 0,100% 0,100% 100%,0 100%);
  background:radial-gradient(ellipse at 80% 60%,rgba(var(--ac-rgb),.22),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(100deg,#1e2a33,#0f171d 40%,#1b2a35)}
.sh-k{font:8px/10px var(--px);text-transform:uppercase;letter-spacing:.06em;color:#bfe6f7;text-shadow:0 0 4px rgba(var(--ac-rgb),.6)}
.rp .sh-h{margin:4px 0 0;font:italic 900 30px/1 var(--ita);text-transform:uppercase;letter-spacing:.01em;color:#eef6fa;text-align:right;
  text-shadow:0 1px 0 #0b2534,0 0 10px rgba(var(--ac-rgb),.45)}
/* Ladebalken im Kopf, als XP-Balken der Website */
.xpb{height:7px;background:#06131b;border:1px solid #2a4a5e;margin:4px 0;position:relative;border-radius:0;overflow:hidden}
.xpb i,.rp .xpb .bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#fff,var(--ac) 45%,rgba(var(--ac-rgb),.6))}
.rp .sh-bar{width:200px;margin:8px 0 0}
body:not([data-phase=boot]) .sh-bar{visibility:hidden}

/* ---------- Spalten (176 | 573) ---------- */
.low{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.lcol2{width:176px;flex:none}
.rcol2{width:573px;min-width:0}
.rcol2>.menu-screen>.bx:first-child{margin-top:0}

/* ---------- Linke Navigation (Seitenmenü der Website) ---------- */
.ln{position:relative;padding:18px 0 20px;background:linear-gradient(180deg,#000,#04080b 70%,#000);border:1px solid #1d2b33;border-top:0}
.ln-g{position:relative;display:flex;flex-direction:column;align-items:flex-end;margin-bottom:14px;padding-right:6px}
.ln-g.g1{margin-left:22px}.ln-g.g2{margin-left:30px}.ln-g.g3{margin-left:40px}
.ln-g::before{content:'';position:absolute;left:0;top:22px;bottom:2px;width:6px;transform:skewX(-10deg);background:linear-gradient(90deg,#1c252b,#56656f 40%,#11181d)}
.ln-h{align-self:flex-end;margin:0 4px 6px 0;font:italic 900 16px/1 var(--ita);text-transform:uppercase;letter-spacing:.02em;
  color:#6b7c87;-webkit-text-stroke:.6px #dfe8ee;text-shadow:0 0 6px rgba(var(--ac-rgb),.35);white-space:nowrap}
.rp .ln-g a,.rp .ln-g button{position:relative;display:block;width:calc(100% - 10px);min-height:0;margin:0;text-align:right;padding:5px 4px 4px 0;border:0;border-radius:0;cursor:pointer;
  font:italic bold 11px/15px Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:uppercase;color:#b6c2ca;text-decoration:none;white-space:nowrap;
  background:linear-gradient(90deg,rgba(138,154,164,0),#8a9aa4) left bottom/100% 1px no-repeat;transition:color .12s}
.ln-g>:nth-child(3){margin-right:1px}.ln-g>:nth-child(4){margin-right:2px}.ln-g>:nth-child(5){margin-right:3px}
.ln-g a::after,.ln-g button::after{content:'';position:absolute;left:0;right:0;top:0;bottom:1px;z-index:-1;opacity:0;transition:opacity .15s;
  background:linear-gradient(90deg,rgba(var(--ac-rgb),0),rgba(var(--ac-rgb),.38))}
.rp .ln-g a:hover,.rp .ln-g a:focus-visible,.rp .ln-g button:hover,.rp .ln-g button:focus-visible,.rp .ln-g button[aria-current=page]{color:#fff;text-shadow:0 0 5px rgba(var(--ac-rgb),.9);outline:0;
  background:linear-gradient(90deg,rgba(var(--ac-rgb),0),var(--ac)) left bottom/100% 1px no-repeat}
.ln-g a:hover::after,.ln-g a:focus-visible::after,.ln-g button:hover::after,.ln-g button:focus-visible::after,.ln-g button[aria-current=page]::after{opacity:1}

/* ---------- Kästen ---------- */
.bx{margin-top:10px}
.rp .bx-h{position:relative;display:block;height:21px;margin:0;padding:0 0 0 14px;overflow:hidden;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
  background:linear-gradient(180deg,#f2f8fb 0,#cfdfe8 45%,#9eb8c8 52%,#c6d8e3 100%);
  font:italic 900 14px/21px var(--ita);text-transform:uppercase;letter-spacing:.03em;color:#0c2a44;text-shadow:0 1px 0 #fff}
.bx-h::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ac);clip-path:polygon(0 0,100% 0,60% 100%,0 100%)}
.bx-b{padding:9px 11px 11px;border:1px solid #29475b;border-top:0;background:linear-gradient(180deg,#0f2b3c,#071621 60%,#04090d);
  font:10px/1.5 var(--vd);color:var(--mid)}
.rp .bx-b a{color:var(--mid-t)}
.rp .hint,.rp .msg,.rp .set-help,.rp .unit,.rp .screen-note{color:var(--mid);font:10px/1.5 var(--vd)}
.rp .screen-note{padding:8px 2px 0;max-width:none}
.rp .msg{margin-top:8px}
.rp .msg.warn{color:#f6e59a}

/* Startbereich: Status, Text, Startknopf */
.rp .hero .bx-b{padding:14px 14px 12px;background:
  linear-gradient(180deg,rgba(4,9,13,.15),rgba(4,9,13,.92) 70%),url('banner.webp') center 40%/cover no-repeat,#071621}
.rp .status{margin:0;font:italic 900 26px/1.05 var(--ita);text-transform:uppercase;letter-spacing:.01em;color:#eef6fa;text-shadow:0 1px 0 #0b2534,0 0 10px rgba(var(--ac-rgb),.45)}
body[data-phase=ready] .rp .status{color:var(--ac2)}
body[data-phase=error] .rp .status,body[data-phase=exited] .rp .status{color:#f6e59a}
.rp .status-sub{margin:4px 0 12px;max-width:none;font:11px/1.45 var(--vd);color:var(--mid-t)}
.rp .hero .row{justify-content:flex-start;gap:6px;flex-wrap:wrap}
/* Startknopf: schräge blaue Pille der Website ("Spielen >>>") */
.rp .hero .play{flex:none;display:inline-flex;align-items:center;gap:12px;min-width:0;height:34px;padding:0 26px 0 28px;border:0;border-radius:0;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  font:13px/1 var(--px);font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.6);box-shadow:none;
  background:linear-gradient(180deg,var(--pillb),var(--pill1) 45%,var(--pill2) 55%,var(--pill1))}
.rp .hero .play>span::after{content:' \00bb'}
.rp .hero .play:hover:not(:disabled),.rp .hero .play:focus-visible{background:linear-gradient(180deg,#fff,var(--pillb) 45%,var(--pill1) 55%,var(--pillb));color:#000;text-shadow:none;outline:0}
.rp .hero .play:disabled{background:linear-gradient(180deg,#9db2c0,#5d7484 45%,#3a4c58 55%,#5d7484);color:#c9d6de;cursor:not-allowed}
.rp .hero .play kbd{font:8px/1 var(--px);padding:3px 4px;border:1px solid currentColor;background:none;color:inherit;opacity:.85}
.rp .screen-strip{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:10px 0 0;font:8px/10px var(--px);text-transform:uppercase;color:#bfe6f7}
.rp .screen-strip>span{display:inline-flex;align-items:center;gap:6px}
.rp kbd{display:inline-flex;align-items:center;justify-content:center;min-width:0;height:auto;padding:2px 4px;border:1px solid #4d7086;border-radius:0;background:#0b1820;color:var(--ac2);
  font:8px/10px var(--px);font-style:normal;font-weight:400;text-transform:uppercase}
.rp .problems{margin-top:10px;gap:5px}
.rp .problems li{border:0;border-left:3px solid var(--ac);border-radius:0;background:rgba(6,19,27,.85);padding:6px 9px}
.rp .problems li.fail{border-left-color:#f6e59a}
.rp .problems strong{font:bold 10px/1.4 var(--vd);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--mid-t)}
.rp .problems p{margin-top:2px;font:10px/1.5 var(--vd);color:var(--mid)}

/* Account-Kasten */
.profile-card p{margin:0 0 8px}
.pc-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pc-lv{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font:italic 900 15px/1 var(--ita);color:#fff;text-shadow:0 1px 2px #0b2a40;
  background:radial-gradient(circle at 50% 30%,#4f8fc0,#1b4f80 55%,#0d3358 70%);box-shadow:0 0 0 2px #e7eef2,0 0 0 3px #8aa3b4}
.pc-name{font:italic 900 18px/1 var(--ita);text-transform:uppercase;color:#eef6fa}
.pc-xp{font-size:9px;color:#9fbfd0}
.pc-stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font:bold 9px/1.4 var(--vd);text-transform:uppercase;letter-spacing:.04em;color:var(--mid-t)}
.r-cta{display:flex;flex-wrap:wrap;gap:6px}

/* Knöpfe (sbtn der Website) */
.rp .btn,.rp .sbtn,.rp .bx-b a.sbtn,.rp .key-binding,.rp .keyboard-actions button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:auto;min-height:0;margin:0;padding:4px 8px 4px 9px;
  font:8px/10px var(--px);font-style:normal;font-weight:400;color:var(--navy);text-decoration:none;text-transform:uppercase;letter-spacing:0;white-space:nowrap;border-radius:0;cursor:pointer;
  background:linear-gradient(180deg,#e7f6fd,#a9dcf2 50%,#85cbe9 51%,#b7e3f5);border:1px solid #3a6f8f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.rp .sbtn::after{content:' \00bb'}
.rp .btn:hover:not(:disabled),.rp .btn:focus-visible,.rp .sbtn:hover,.rp .sbtn:focus-visible,.rp .bx-b a.sbtn:hover,.rp .bx-b a.sbtn:focus-visible,.rp .key-binding:hover,.rp .keyboard-actions button:hover{background:linear-gradient(180deg,#fff,rgb(var(--ac-rgb)));outline:0;border-color:var(--navy);color:var(--navy)}
.rp .btn.danger{color:var(--navy)}
.rp .btn.selected{border-color:var(--navy)}
.rp .key-binding{min-width:96px;font-family:var(--px)}
.rp .key-binding.capturing{background:linear-gradient(180deg,#fff,rgb(var(--ac-rgb)));box-shadow:0 0 0 2px rgba(var(--ac-rgb),.5)}
.rp .text-btn{font:bold 9px/1.4 var(--vd);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--ac);background:none;border:0;padding:4px 2px;cursor:pointer}
.rp .text-btn:hover:not(:disabled){color:#fff;text-decoration:underline}

/* Einstellungen und Steuerung */
.rp h3,.rp .group h3{margin:14px 0 6px;padding:0;border:0;font:italic 900 14px/1 var(--ita);text-transform:uppercase;letter-spacing:.02em;color:var(--mid-t)}
.rp .group:first-child h3{margin-top:2px}
.rp .group+.group{margin-top:10px;padding-top:6px;border-top:1px solid #1d3a4c}
.rp .set{padding:7px 0;gap:3px 12px}
.rp .set+.set,.rp .more,.rp .keys>div+div{box-shadow:inset 0 1px #1d3a4c}
.rp .set-label{font:bold 10px/1.4 var(--vd);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--mid-t)}
.rp .set-help{font-size:9px;line-height:1.45;color:#9fbfd0}
.rp .set-state{font:10px/1.4 var(--vd)}
.rp .val{font:bold 10px/1.4 var(--vd);font-style:normal;color:var(--ac)}
.rp .seg{gap:2px;padding:2px;border:1px solid #29475b;border-radius:0;background:#06131b}
.rp .opt{min-height:22px;padding:3px 7px;border:1px solid transparent;border-radius:0;font:8px/10px var(--px);font-style:normal;text-transform:uppercase;color:var(--mid);cursor:pointer}
.rp .opt:has(input:checked){background:linear-gradient(180deg,#e7f6fd,#a9dcf2 50%,#85cbe9 51%,#b7e3f5);border-color:#3a6f8f;color:var(--navy);box-shadow:none}
.rp .switch{border-radius:0;border-color:#4d7086;background-color:#06131b}
.rp .set input[type=number],.rp .set input[type=text],.rp .profiles input[type=text],.rp .raw textarea{height:24px;padding:2px 6px;border:1px solid #7f9db0;border-radius:0;
  font:11px/1 Verdana,Geneva,sans-serif;color:var(--navy);background:linear-gradient(#fff,#e8f1f6);box-shadow:inset 1px 1px 0 #9fb6c3}
.rp .raw textarea{height:auto;font:11px/1.4 ui-monospace,Menlo,Consolas,monospace}
.rp summary{min-height:28px;font:bold 9px/1.4 var(--vd);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--mid-t)}
.rp summary::before{border-color:var(--ac)}
.rp .raw{margin-top:10px;box-shadow:inset 0 1px #1d3a4c}
.rp .keys{margin-top:8px}
.rp .keys>div,.rp #keys .keys>div{padding:5px 0;gap:10px;font:10px/1.4 var(--vd)}
.rp #keys .keys kbd{font:8px/10px var(--px);border-radius:0}
.rp .keys dt{color:var(--mid)}
.rp #keys{margin-bottom:12px}
.rp #keys>.hint{margin-top:8px}
.rp #touch-controls,.rp #keyboard-controls,.rp #controller-settings{border-top:1px solid #1d3a4c;padding-top:8px}
.rp #touch-controls{margin-bottom:10px}
.rp #controller-settings{margin-top:12px}
.rp #keyboard-controls p{font:10px/1.5 var(--vd);color:var(--mid)}
.rp .keyboard-binding{min-height:0;padding:5px 0;font:bold 10px/1.4 var(--vd);text-transform:uppercase;color:var(--mid-t)}
.rp .keyboard-binding+.keyboard-binding{border-top:1px solid #1d3a4c}
.rp .keyboard-actions{margin-top:10px;gap:6px}
.rp .keyboard-status{font:10px/1.4 var(--vd);color:var(--ac)}

/* Spielstände und Spieldaten */
.rp .profiles{gap:2px;margin-bottom:8px}
.rp .profiles li{border-radius:0;background:rgba(255,255,255,.03);padding:5px 8px;font:10px/1.4 var(--vd)}
.rp .profiles .name{font:bold 10px/1.4 var(--vd);font-style:normal;color:var(--ac)}
.rp .profiles .meta{font-size:9px;color:#9fbfd0}
.rp .bar{height:7px;margin:6px 0;border:1px solid #2a4a5e;border-radius:0;background:#06131b}
.rp .bar .bar-fill{border-radius:0;box-shadow:none;background:linear-gradient(180deg,#fff,var(--ac) 45%,rgba(var(--ac-rgb),.6))}
.rp #saves .hint+.row,.rp #game-data .row{margin-top:8px;gap:6px}

/* Hinweis für Handys (nur bei Touch sichtbar, main.css) */
.rp .mobile-pwa-note{margin-top:10px;border-radius:0;border:1px solid #29475b;background:linear-gradient(180deg,#0f2b3c,#071621 60%,#04090d)}

/* ---------- Fußbereich ---------- */
.ft{margin-top:14px;width:759px}
.ft-main{position:relative;padding:26px 30px 20px;text-align:center;background:
  radial-gradient(ellipse 50% 70% at 50% 0,rgba(150,210,230,.35),transparent 70%),
  linear-gradient(180deg,#05141b 0,#0c3446 18%,#2a6a80 46%,#1b5468 70%,#0d4156 100%)}
.ft-logo{display:block;margin:0 auto 14px;width:220px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.legal{font:10px/1.45 Arial,Helvetica,sans-serif;color:var(--mid-t);max-width:560px;margin:0 auto 4px}
.ft-links{margin-top:8px}
.rp .ft-links a{color:var(--mid-t);text-decoration:none}
.rp .ft-links a:hover{color:#fff;text-decoration:underline}
.ft-links a+a::before{content:'|';margin:0 6px 0 4px;color:#7fa5b8;display:inline-block;text-decoration:none}
.ft-band{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px;padding:10px 12px 12px;background:var(--ft);min-height:73px}
.bd{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;height:33px;padding:0 10px;
  border:2px solid #d9e4ea;background:linear-gradient(180deg,#123f52,#082a38);color:#fff;font:8px/10px var(--px);text-transform:uppercase;white-space:nowrap}
.bd i{font-style:normal}
.bd-mid{height:43px}
.bd-tall{height:54px;background:#fff;color:#0d2b3a;border-color:#fff}
.bd-tall b{font:italic 900 18px/1 var(--ita);letter-spacing:.03em}

/* ---------- Dialoge (Menü im Spiel, Rückfragen) im Fenster-Stil der Website ---------- */
.dlg{border:1px solid #9fb6c3;border-radius:0;background:#0b1820;color:var(--mid);box-shadow:0 0 0 1px #000,0 10px 40px #000;font:11px/1.5 var(--vd)}
.dlg h2{font:italic 900 20px/1.1 var(--ita);text-transform:uppercase;letter-spacing:.02em;color:#eef6fa;margin-bottom:8px}
.dlg .hint,.dlg p{font:11px/1.5 var(--vd);color:var(--mid)}
.dlg .btn{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 10px;border-radius:0;font:9px/1 var(--px);font-style:normal;font-weight:400;text-transform:uppercase;
  color:var(--navy);background:linear-gradient(180deg,#e7f6fd,#a9dcf2 50%,#85cbe9 51%,#b7e3f5);border:1px solid #3a6f8f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.dlg .btn:hover:not(:disabled),.dlg .btn:focus-visible{background:linear-gradient(180deg,#fff,rgb(var(--ac-rgb)));border-color:var(--navy);outline:0}
.dlg .btn.danger{color:var(--navy);border-color:var(--navy)}
.dlg .btn.selected{box-shadow:inset 0 0 0 1px #fff,0 0 0 2px rgba(var(--ac-rgb),.6)}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:780px){
  body{font-size:11px}
  .un-in{width:auto;height:auto;min-height:40px;padding:4px 10px;flex-wrap:wrap;gap:2px 12px}
  .un-logo{height:34px}
  .un-logo img{height:26px}
  .pg{width:auto;max-width:560px}
  .ub{width:auto;height:auto;padding:10px 10px 8px;flex-wrap:wrap;gap:5px 3px}
  .rp .ub-b{--h:28px;min-width:0;flex:1 1 30%}
  .lsel{position:static;flex:0 0 auto;margin:0 0 0 auto}
  .rp .lsel>summary{--h:28px}
  .lsel-m{left:10px;right:10px;top:calc(100% - 4px);width:auto}
  .lsel-m button{min-height:36px;font-size:13px}
  .sh{height:auto;flex-direction:column;padding:10px 10px 8px;gap:6px}
  .sh-logo{width:auto;height:72px;margin:0}
  .sh-logo img{width:min(240px,70%)}
  .sh-t{margin:0;padding:10px 16px;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
  .rp .sh-h{font-size:24px}
  .low{flex-direction:column-reverse;margin:10px 10px 0;gap:12px}
  .lcol2,.rcol2{width:100%}
  .ln{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding:16px 8px 12px}
  .ln-g.g1,.ln-g.g2,.ln-g.g3{margin-left:12px}
  .rp .ln-g a,.rp .ln-g button{font-size:12px;line-height:16px;padding:7px 4px 6px 0}
  .bx-b,.rp .hint,.rp .msg,.rp .set-help,.rp .screen-note{font-size:11px}
  .rp .hero .play{flex:1 1 100%;justify-content:center;height:40px}
  .rp .btn{padding:7px 10px}
  .ft{width:auto;margin:14px 0 0}
  .ft-main{padding:22px 14px 18px}
  .legal{font-size:11px}
  .ft-links a{display:inline-block;padding:4px 0}
}
@media (prefers-reduced-motion:reduce){.rp *{transition:none!important}}