/*
 * Tarnansichten: getarnter Rechner und schwarzer Bildschirm (Kreis-Wischen, Tipp-Code, Zonen).
 * Bewusst NICHT im Design System „Samt & Messing“: sie dürfen weder dessen Farben noch Schriften
 * zeigen und nicht nach Zauber-App aussehen. Die Regeln sind unverändert aus der bisherigen admin.css
 * übernommen. Die Schutzregeln oben stellen die früheren Grundwerte wieder her, die tokens.css und
 * samt-messing.css sonst für die ganze Seite setzen. Diese Datei wird als letzte geladen.
 */

/* ---------- Schutz vor dem Design System ---------- */
#calc, #stealth {
    font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-variant-numeric: normal;
    -webkit-font-smoothing: auto;
}
:where(#calc, #stealth) *, :where(#calc, #stealth) *::before, :where(#calc, #stealth) *::after { box-sizing: border-box; }
/* :where() hält die Spezifität so niedrig wie die frühere Grundregel „button“ */
:where(#calc) button {
    display: inline-block; border: 0; cursor: pointer;
    font: inherit; font-weight: 600; text-decoration: none; text-align: center;
}
:where(#calc, #stealth) :focus-visible { outline: revert; outline-offset: revert; }
/* Hinter den Vollbild-Ansichten nie die helle App-Fläche zeigen (z. B. beim Überscrollen) */
body.view-calc, body.view-swipe, body.view-taps, body.view-zones { background: #000; overflow: hidden; }

/* ---------- Getarnter Rechner ---------- */
/* Getarnter Rechner (Vollbild, keine Spur der App sichtbar) */
#calc {
    display: none;
    position: fixed; inset: 0; z-index: 10;
    background: #000; color: #fff;
    flex-direction: column; justify-content: flex-end;
    padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 20px);
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, sans-serif;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    touch-action: manipulation;
}
body.view-calc #calc { display: flex; }
body.view-calc .app-ui,
body.view-swipe .app-ui,
body.view-taps .app-ui,
body.view-zones .app-ui { display: none; }

.calc-dot {
    position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 14px;
    width: 5px; height: 5px; border-radius: 50%; opacity: 0; transition: opacity .2s;
}
.calc-dot.on { opacity: 1; }

.calc-display {
    text-align: right; font-size: 84px; font-weight: 300; line-height: 1.1;
    padding: 0 10px 12px; white-space: nowrap; overflow: hidden;
    max-width: 440px; width: 100%; margin: 0 auto;
}
.calc-keys {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    max-width: 440px; width: 100%; margin: 0 auto;
}
.calc-keys button {
    aspect-ratio: 1; border-radius: 50%; padding: 0;
    background: #333; color: #fff;
    font-size: 34px; font-weight: 400;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.calc-keys button:active { background: #737373; }
.calc-keys .fn { background: #a5a5a5; color: #000; font-size: 28px; }
.calc-keys .fn:active { background: #d9d9d9; }
.calc-keys .op { background: #ff9f0a; color: #fff; font-size: 40px; }
.calc-keys .op:active { background: #fcc78d; }
.calc-keys .op.active { background: #fff; color: #ff9f0a; }
.calc-keys .zero { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; text-align: left; padding-left: 13%; }

/* Rechner: Löschtaste nur im Android-Stil */
.calc-keys .del { display: none; }

/* Rechner im Android-Stil (Material) */
#calc.skin-android { background: #121316; font-family: 'Google Sans', Roboto, 'Segoe UI', sans-serif; }
#calc.skin-android .calc-display { font-weight: 400; color: #e3e2e6; }
#calc.skin-android .calc-keys { gap: 12px; }
#calc.skin-android .calc-keys button { background: #2f3036; color: #e3e2e6; font-size: 30px; border-radius: 50%; }
#calc.skin-android .calc-keys button:active { border-radius: 30%; background: #45464f; }
#calc.skin-android .calc-keys .fn { background: #4a4458; color: #e8def8; font-size: 24px; }
#calc.skin-android .calc-keys .fn:first-child { background: #8c4a60; color: #ffd9e2; }
#calc.skin-android .calc-keys .op { background: #3e4759; color: #d6e3ff; font-size: 32px; }
#calc.skin-android .calc-keys .op.active { background: #d6e3ff; color: #102f60; }
#calc.skin-android .calc-keys [data-k="="] { background: #adc6ff; color: #002e69; }
#calc.skin-android .calc-keys .zero { grid-column: auto; aspect-ratio: 1; border-radius: 50%; text-align: center; padding-left: 0; }
#calc.skin-android .calc-keys .del { display: block; }
#calc.skin-android .calc-keys button { transition: border-radius .15s, background .15s; }
/* Android: 0 , ⌫ = in der letzten Reihe */
#calc.skin-android [data-k="0"] { order: 1; }
#calc.skin-android [data-k="."] { order: 2; }
#calc.skin-android .del { order: 3; }
#calc.skin-android [data-k="="] { order: 4; }

/* ---------- Schwarzer Bildschirm ---------- */
/* Schwarzer Bildschirm */
#stealth {
    display: none;
    position: fixed; inset: 0; z-index: 10;
    background: #000;
    touch-action: none;
    overscroll-behavior: none;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    cursor: none;
}
body.view-swipe #stealth, body.view-taps #stealth, body.view-zones #stealth { display: block; }
body.view-swipe, body.view-taps, body.view-zones { overflow: hidden; background: #000; }

.stealth-dots {
    position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
    opacity: 0; transition: opacity .2s; pointer-events: none;
}
.stealth-dots.on { opacity: 1; }
.stealth-dots i { width: 5px; height: 5px; border-radius: 50%; background: #1c1c1c; }
.stealth-dots.bad i { background: #2a1010; }
#stealth.practice .stealth-dots i { background: #6a6a6a; width: 8px; height: 8px; }
#stealth.practice .stealth-dots.bad i { background: #a33; }

.stealth-text {
    position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 24px);
    text-align: center; color: #777; font-size: 17px; pointer-events: none;
}
.stealth-help { position: absolute; inset: 0; pointer-events: none; color: #555; }
.help-grid { position: absolute; inset: 0; display: grid; }
.help-grid.g2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.help-grid.g3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
.help-grid span {
    border: 1px dashed #262626; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 34px; color: #4d4d4d;
}
.help-grid small { font-size: 13px; }
.help-note, .help-compass em, .help-dial em, .help-text {
    position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-style: normal; font-size: 15px; color: #555;
}
.help-note { top: auto; bottom: calc(env(safe-area-inset-bottom) + 60px); }
.help-compass span { position: absolute; font-size: 20px; color: #555; }
.help-compass .n { top: 12%; left: 50%; transform: translateX(-50%); }
.help-compass .s { bottom: 14%; left: 50%; transform: translateX(-50%); }
.help-compass .e { right: 6%; top: 50%; transform: translateY(-50%); }
.help-compass .w { left: 6%; top: 50%; transform: translateY(-50%); }
.help-dial { position: absolute; left: 50%; top: 50%; width: 92vmin; height: 92vmin; transform: translate(-50%, -50%); }
.help-dial span { position: absolute; transform: translate(-50%, -50%); font-size: 24px; color: #555; }
.help-text { line-height: 1.6; }