/* ==========================================================================
   VYCE Phone - Basis: Schrift, Design-Tokens (hell/dunkel), Geraet
   Alle Masse sind in iPhone-Punkten (390 x 844 Bildschirm); das ganze Geraet
   wird per transform skaliert. KEIN backdrop-filter verwenden (in FiveM schwarz)!
   ========================================================================== */

@font-face { font-family: 'Inter'; font-weight: 300; font-display: block; src: url('../fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: block; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: block; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: block; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: block; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: block; src: url('../fonts/inter-800.woff2') format('woff2'); }

:root {
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --scale: 1;

    /* feste Systemfarben (wie iOS, dunkle Variante) */
    --blue: #0a84ff;
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    --yellow: #ffd60a;
    --purple: #bf5af2;
    --pink: #ff375f;
    --teal: #64d2ff;
    --indigo: #5e5ce6;
    --mint: #63e6e2;
    --gray: #8e8e93;

    --ease: cubic-bezier(.2, .9, .25, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- Theme: dunkel (Standard) ---------- */
.theme-dark {
    --accent: var(--blue);
    --accent-fg: #fff;
    --bg: #000;                         /* App-Hintergrund (flach) */
    --bg-grouped: #000;                 /* Hintergrund hinter gruppierten Listen */
    --bg-elev: #1c1c1e;                 /* Karten, Zellen */
    --bg-elev2: #2c2c2e;                /* Zellen in Sheets, Eingabefelder */
    --bg-elev3: #3a3a3c;
    --bar: rgba(22, 22, 24, .94);       /* Nav-/Tabbar (ohne Blur, fast deckend) */
    --fill: rgba(120, 120, 128, .36);
    --fill2: rgba(120, 120, 128, .24);
    --fill3: rgba(118, 118, 128, .18);
    --label: #fff;
    --label2: rgba(235, 235, 245, .62);
    --label3: rgba(235, 235, 245, .32);
    --label4: rgba(235, 235, 245, .18);
    --sep: rgba(84, 84, 88, .55);
    --sep-opaque: #38383a;
    --bubble-in: #26252a;
    --shadow: 0 10px 40px rgba(0, 0, 0, .55);
    --sheet: #1c1c1e;
    color-scheme: dark;
}

/* ---------- Theme: hell ---------- */
.theme-light {
    --accent: #007aff;
    --accent-fg: #fff;
    --blue: #007aff;
    --green: #34c759;
    --red: #ff3b30;
    --orange: #ff9500;
    --yellow: #ffcc00;
    --purple: #af52de;
    --pink: #ff2d55;
    --teal: #30b0c7;
    --indigo: #5856d6;
    --bg: #fff;
    --bg-grouped: #f2f2f7;
    --bg-elev: #fff;
    --bg-elev2: #f2f2f7;
    --bg-elev3: #e5e5ea;
    --bar: rgba(249, 249, 251, .96);
    --fill: rgba(120, 120, 128, .2);
    --fill2: rgba(120, 120, 128, .16);
    --fill3: rgba(118, 118, 128, .12);
    --label: #000;
    --label2: rgba(60, 60, 67, .62);
    --label3: rgba(60, 60, 67, .32);
    --label4: rgba(60, 60, 67, .18);
    --sep: rgba(60, 60, 67, .22);
    --sep-opaque: #c6c6c8;
    --bubble-in: #e9e9eb;
    --shadow: 0 10px 40px rgba(0, 0, 0, .18);
    --sheet: #f2f2f7;
    color-scheme: light;
}

/* Akzentfarben (Einstellungen > Darstellung); --accent-tint = Akzent mit 16 % Deckkraft */
.accent-blue   { --accent: #0a84ff; --accent-tint: rgba(10, 132, 255, .16); }
.accent-pink   { --accent: #ff2d78; --accent-tint: rgba(255, 45, 120, .16); }
.accent-purple { --accent: #bf5af2; --accent-tint: rgba(191, 90, 242, .16); }
.accent-green  { --accent: #30d158; --accent-tint: rgba(48, 209, 88, .16); }
.accent-orange { --accent: #ff9f0a; --accent-tint: rgba(255, 159, 10, .16); }
.accent-red    { --accent: #ff453a; --accent-tint: rgba(255, 69, 58, .16); }
.accent-teal   { --accent: #40c8e0; --accent-tint: rgba(64, 200, 224, .16); }
.theme-light.accent-blue { --accent: #007aff; --accent-tint: rgba(0, 122, 255, .12); }

* { box-sizing: border-box; margin: 0; padding: 0; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    font-feature-settings: 'cv11', 'ss01', 'tnum' 0;
}

input, textarea, button, select { font-family: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
input, textarea { user-select: text; }
img { -webkit-user-drag: none; user-select: none; }
svg { display: block; }

/* Vorschau im Browser (kein FiveM): Spielszene als Hintergrund */
body.demo-bg {
    background: #0b0d12 url('../img/demo-scene.jpg') center / cover no-repeat;
}

/* ==========================================================================
   Geraet
   ========================================================================== */
#phone-root { position: fixed; inset: 0; pointer-events: none; }

.device-wrap {
    position: absolute;
    right: calc(56px * var(--edge, 1));
    bottom: 0;
    width: 414px;
    height: 868px;
    transform-origin: 100% 100%;
    transform: translateY(var(--ty, calc(100% * var(--scale) + 120px))) scale(var(--scale));
    transition: transform .46s var(--ease-out);
    pointer-events: none;
    will-change: transform;
}
.device-wrap.is-open { --ty: -28px; pointer-events: auto; }
/* Verschiebung immer mal Skalierung: das Geraet ist 868px * --scale hoch (scale wirkt vor dem translate).
   Ohne das ragte es bei grosser Aufloesung/Groesse > ~115 % im versteckten Zustand unten heraus. */
.device-wrap.is-peek { --ty: calc((100% - 214px) * var(--scale)); }
.device-wrap.is-peek-call { --ty: calc((100% - 330px) * var(--scale)); pointer-events: none; }
/* SA Bürgerportal: Notfallwarnung faehrt weit hoch (Titel lesbar), Bedienen erst nach dem Oeffnen */
.device-wrap.is-peek-alarm { --ty: calc((100% - 520px) * var(--scale)); pointer-events: none; }
.device-wrap.is-hidden { --ty: calc(100% * var(--scale) + 120px); }

.device {
    position: absolute;
    inset: 0;
    border-radius: 66px;
    padding: 12px;
    background:
        linear-gradient(145deg, #5a5a5f 0%, #2a2a2d 18%, #1a1a1c 50%, #2b2b2e 82%, #4c4c50 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, .14),
        inset 0 0 0 3px #0b0b0c,
        0 30px 80px rgba(0, 0, 0, .55),
        0 6px 18px rgba(0, 0, 0, .45);
}
/* Titanrahmen-Glanz */
.device::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 63px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    pointer-events: none;
}
.device-btn {
    position: absolute;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2a2a2d, #56565b 60%, #2a2a2d);
}
.device-btn.action { left: -3px; top: 130px; height: 30px; }
.device-btn.vol-up { left: -3px; top: 190px; height: 58px; }
.device-btn.vol-down { left: -3px; top: 262px; height: 58px; }
.device-btn.power { right: -3px; top: 212px; height: 92px; }

/* Mittelklasse "Whiz Nova" (Config.Models tier 'mid'): matter Kunststoff, eckiger, breitere Raender,
   Kamera-Loch statt Dynamic Island, Markenschriftzug auf dem Kinn */
.device-wrap.model-mid .device {
    /* kleiner und mit breitem Kinn: 414 x 930, auf 90 % verkleinert */
    inset: auto; right: 0; bottom: 0; width: 414px; height: 930px;
    transform: scale(.9); transform-origin: 100% 100%;
    border-radius: 40px;
    padding: 30px 12px 56px;
    background: linear-gradient(160deg, #3c4a5c 0%, #263140 35%, #1d2633 70%, #2c3a4c 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(160, 190, 230, .16),
        inset 0 0 0 4px #10151d,
        0 30px 80px rgba(0, 0, 0, .55),
        0 6px 18px rgba(0, 0, 0, .45);
}
.device-wrap.model-mid .device::before { border-radius: 37px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.device-wrap.model-mid .screen,
.device-wrap.model-mid .screen-edge { border-radius: 14px; }
/* Lautsprecherschlitz oben im Rahmen */
.device-wrap.model-mid .device::after { content: ''; position: absolute; top: 12px; left: 50%; width: 70px; height: 5px; margin-left: -35px; border-radius: 3px; background: #0b0f15; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
/* Hardware-Tasten im Kinn: Zurueck | Start (Pille) | Schnelleinstellungen */
.device-keys { position: absolute; left: 0; right: 0; bottom: 6px; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 64px; z-index: 3; }
.device-keys button { color: rgba(170, 195, 230, .55); display: flex; align-items: center; justify-content: center; }
.device-keys .dk-side { width: 44px; height: 36px; }
.device-keys .dk-side svg { width: 20px; height: 20px; }
.device-keys .dk-home { width: 92px; height: 26px; border-radius: 13px; background: linear-gradient(#2f3d52, #1a2230); box-shadow: inset 0 0 0 1.5px rgba(170, 195, 230, .28), 0 1px 0 rgba(255, 255, 255, .06); }
.device-keys button:active { opacity: .6; }
.device-keys .dk-home:active { transform: scale(.96); }
/* Android-Optik auf dem Bildschirm: runde Symbole ohne Glanz, Dock ohne Glas, andere Schrift */
.device-wrap.model-mid .screen { font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
.device-wrap.model-mid .home-icon .ph-app-icon, .device-wrap.model-mid .dock .ph-app-icon { border-radius: 50% !important; transform: scale(.9); }
.device-wrap.model-mid .home-icon .ph-app-icon::after, .device-wrap.model-mid .dock .ph-app-icon::after { display: none; }
.device-wrap.model-mid .frost-dock { display: none; }
.device-wrap.model-mid .dock { background: rgba(10, 14, 22, .35); }
.device-wrap.model-mid .device-btn { background: linear-gradient(90deg, #1d2633, #44536a 60%, #1d2633); width: 3px; }
.device-wrap.model-mid .device-btn.action { display: none; }
.device-wrap.model-mid .device-btn.power { top: 180px; height: 60px; }
.device-wrap.model-mid .island.m-idle { width: 22px; height: 22px; top: 16px; border-radius: 50%; box-shadow: inset 0 0 0 3px #0a0d12, inset 0 0 0 5px #1a2230; }
.device-brand {
    position: absolute; left: 22px; top: 9px; z-index: 2; pointer-events: none;
    text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .4em; text-transform: uppercase;
    color: rgba(170, 195, 230, .35);
}

.screen {
    position: relative;
    width: 390px;
    height: 844px;
    border-radius: 54px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
    color: var(--label);
    font-size: 17px;
    line-height: 1.29;
    letter-spacing: -.012em;
    /* Helligkeit wird ueber ::after abgedunkelt */
}
.screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--dim, 0);
    pointer-events: none;
    z-index: 999;
    transition: opacity .2s;
}
/* Innenkante des Displays */
.screen-edge {
    position: absolute;
    inset: 0;
    border-radius: 54px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    pointer-events: none;
    z-index: 998;
}

/* Hilfsklassen */
.fill { position: absolute; inset: 0; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.muted { color: var(--label2); }
.faint { color: var(--label3); }
.tnum { font-variant-numeric: tabular-nums; }
.scroll { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.hidden { display: none !important; }