/* IRUDA · Seele — Startbildschirm. Eine Maschine, die immer läuft; der Schlüssel im Brennpunkt. */
:root {
  --night: #0b1024;
  --night-2: #142046;
  --gold: #e3b45a;
  --gold-soft: #f3d79a;
  --ink: #ece4d0;
  --ink-dim: #9c9682;
  --glass: rgba(12, 17, 40, .84);
  --line: rgba(227, 180, 90, .32);
  --danger: #f0a090;
  --f-display: "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  --f-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; }
html { background: var(--night); color-scheme: dark; }
body, body.page-seele {
  background: radial-gradient(110% 80% at 50% 48%, var(--night-2), var(--night) 70%) fixed, var(--night);
  color: var(--ink); font-family: var(--f-body); overflow: hidden;
}
#seele { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.key {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, rgba(255, 238, 190, .22), rgba(7, 10, 28, .55) 70%);
  border: 1px solid var(--line); color: var(--gold-soft);
  transition: border-color .3s, box-shadow .3s;
}
.key:hover, .key:focus-visible { border-color: var(--gold); box-shadow: 0 0 34px rgba(243, 215, 154, .45); }
.key:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }
.key svg { width: 34px; height: 34px; transition: transform .6s ease; }
.key[aria-expanded="true"] svg { transform: rotate(90deg); }

.vault {
  position: fixed; left: 50%; top: clamp(16px, calc(50% + 62px), calc(100% - 300px)); transform: translateX(-50%); z-index: 2;
  width: min(300px, calc(100% - 32px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: rise .45s ease both;
}
.vault[hidden] { display: none; }
.vault p.vault__title { margin: 0; font: 600 11px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.vault label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-dim); }
.vault input {
  font: 500 16px/1 var(--f-body); color: var(--ink); box-sizing: border-box; width: 100%;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
}
.vault input:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.vault button {
  font: 700 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--night); background: var(--gold-soft); border: 0; border-radius: 6px; padding: 12px 14px; cursor: pointer;
}
.vault button:hover { background: var(--gold); }
.vault button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vault__error { margin: 0; font-size: 13.5px; color: var(--danger); }

.sign {
  position: fixed; left: 0; right: 0; bottom: 0; text-align: center; pointer-events: none;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 4px;
}
.sign b { font: 700 13px/1 var(--f-display); letter-spacing: .5em; color: var(--gold-soft); padding-left: .5em; }
.sign span { font: 500 11px/1 var(--f-display); letter-spacing: .32em; color: var(--ink-dim); padding-left: .32em; }

@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .vault { animation: none; } .key, .key svg { transition: none; } }
@media (max-height: 520px) { .vault { top: auto; bottom: 12px; } }
/* Login offen: die Signatur macht Platz, nichts liegt übereinander */
.sign { transition: opacity .4s ease; }
body:has(.vault:not([hidden])) .sign, .vault-open .sign { opacity: 0; }

/* ===== Controller (assets/pad.js) – gilt auf jeder Seite =====
   Kein Controller: nichts davon sichtbar. Controller verbunden (body.pad-on): Statusschild, Tasten-Leiste,
   Tasten-Abzeichen an den Knöpfen (data-pad) und ein deutlicher goldener Fokus. */
.pad-badge {
  position: fixed; z-index: 7; top: max(14px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  margin: 0; font: 600 12.5px/1 var(--f-body); color: #9fe0b4; white-space: nowrap;
  background: var(--glass); border: 1px solid rgba(127, 199, 154, .5); border-radius: 999px; padding: 7px 11px;
  animation: padIn .5s ease both;
}
.pad-badge.in-slot { position: static; animation: padIn .5s ease both; }
.pad-badge[hidden], .padbar[hidden] { display: none; }
.padbar {
  position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 46px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: calc(100% - 32px);
  font: 500 12.5px/1 var(--f-body); color: var(--ink-dim); pointer-events: none;
}
.padbar span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.padbar kbd, .pad-on [data-pad]::after {
  font: 700 10.5px/1 var(--f-body); color: var(--night); background: var(--ink-dim); border-radius: 999px; padding: 3px 6px; min-width: 9px; text-align: center;
}
.padbar .k-a, .pad-on [data-pad="A"]::after { background: #7fc79a; }
.padbar .k-b, .pad-on [data-pad="B"]::after { background: #e2695a; }
.padbar .k-x, .pad-on [data-pad="X"]::after { background: #7fb2ff; }
.padbar .k-y, .pad-on [data-pad="Y"]::after { background: #f0c86a; }
.pad-on [data-pad]::after { content: attr(data-pad); position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 2px var(--night); }
.pad-on [data-pad]:not(.crown) { position: relative; }
.pad-on .crown[data-pad]::after { top: auto; bottom: -4px; right: 50%; transform: translateX(50%); }
.pad-on .corner--tr [data-pad]::after, .pad-on .corner--br [data-pad]::after { right: auto; left: -7px; }
.pad-on :focus { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.pad-on .patch:focus { background: rgba(243, 215, 154, .14); border-color: var(--gold); }
.pad-on .crown:focus { box-shadow: 0 0 46px rgba(243, 215, 154, .5); border-color: var(--gold); outline: none; }
.pad-on .sign { opacity: .55; }
@keyframes padIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .padbar span:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .pad-badge { animation: none; } }

/* v1.31.1 · Controller-Optimierung: Zeiger des rechten Sticks (wie ein Mauspfeil, goldener Ring mit Punkt) */
.pad-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2px solid var(--gold, #e8c46a); box-shadow: 0 0 12px rgba(232, 196, 106, .55), inset 0 0 0 3px rgba(10, 16, 40, .5);
  pointer-events: none; transition: opacity .2s; }
.pad-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--gold, #e8c46a); }
.pad-cursor[hidden] { display: none; }
/* v1.31.1 · Iteration 2: Fadenkreuz-Hover (rechter Stick) leuchtet wie die Maus · Controller-Hilfe an/aus · PlayStation-Zeichen */
.pad-on .pad-hover { outline: 2px solid var(--gold-soft); outline-offset: 3px; box-shadow: 0 0 18px rgba(243, 215, 154, .45); }
.pad-on:not(.pad-hints) [data-pad]::after { display: none; }
[data-pad-family="ps"] .padbar .k-a, [data-pad-family="ps"].pad-on [data-pad="A"]::after { background: #7fb2ff; }
[data-pad-family="ps"] .padbar .k-b, [data-pad-family="ps"].pad-on [data-pad="B"]::after { background: #e2695a; }
[data-pad-family="ps"] .padbar .k-x, [data-pad-family="ps"].pad-on [data-pad="X"]::after { background: #e58fd0; }
[data-pad-family="ps"] .padbar .k-y, [data-pad-family="ps"].pad-on [data-pad="Y"]::after { background: #7fc79a; }
[data-pad-family="ps"].pad-on [data-pad="A"]::after { content: "✕"; }
[data-pad-family="ps"].pad-on [data-pad="B"]::after { content: "○"; }
[data-pad-family="ps"].pad-on [data-pad="X"]::after { content: "□"; }
[data-pad-family="ps"].pad-on [data-pad="Y"]::after { content: "△"; }
[data-pad-family="ps"].pad-on [data-pad="Start"]::after { content: "Options"; }
/* Iteration 3 · Hidden Value: Controller-Hilfe aus → nur noch ein kleines 🎮 am Glimpse zeigt „Controller dran“ */
.pad-on:not(.pad-hints) .btn-glimpse { position: relative; }
.pad-on:not(.pad-hints) .btn-glimpse::after { content: "🎮"; display: block; position: absolute; top: -8px; right: -8px; font-size: 11px; line-height: 1; background: none; box-shadow: none; padding: 0; }
/* Iteration 4 · Fadenkreuz übernimmt die Maus: Pfeil weg, solange es fährt */
body.pad-aim, body.pad-aim * { cursor: none !important; }
/* Iteration 4 · ▲ Manifest-Punkt oben am Torus – nur mit Controller sichtbar (Mitte der Heiligen Trinität: Manifest · Krone · Field) */
.manifest-pt { display: none; position: absolute; left: 50%; top: 80px; transform: translate(-50%, -50%); z-index: 3;
  align-items: center; gap: 6px; background: rgba(11, 16, 36, .55); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  font: 600 11px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); cursor: pointer; opacity: .55; }
.manifest-pt i { font-style: normal; color: var(--gold); }
.pad-on .manifest-pt { display: inline-flex; }
.pad-on .manifest-pt:focus { opacity: 1; outline: 2px solid var(--gold-soft); outline-offset: 3px; box-shadow: 0 0 22px rgba(243, 215, 154, .45); }
.panel:not([hidden]) ~ .manifest-pt { display: none; }