/* PhoneController phone page. Phone-first (390×844 and 844×390), fine on a tablet.
   The control parts borrow TouchSkin's plain look and the Neon theme's touch styles. */

:root {
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --ink: #ffffffd9;
    --panel: #0a0f1ae0;
    --accent: #00e5ff;
    --accent2: #ff2bd6;
    /* TouchSkin plain parts */
    --stick-fill: #ffffff0f; --stick-border: #ffffff47; --stick-active: #ffffff1f;
    --knob-fill: #ffffff6b; --knob-active: #ffffff8c;
    --button-fill: #ffffff1f; --button-border: #ffffff4d; --button-active: #ffffff52;
    --wheel-fill: #0000008c; --wheel-border: #ffffff4d;
    --drawer-fill: #000000b3; --drawer-border: #ffffff4d;
    --cell-fill: #ffffff1f; --cell-border: #ffffff4d; --cell-active: #ffffff52;
    --glow: transparent;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    height: 100%;
    background: #05070c;
    color: var(--ink);
    font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}

#bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.38) saturate(0.9);
    pointer-events: none;
    z-index: 0;
}
#bg[hidden] { display: none; }
#bg-default {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 20% 0%, #15224a 0%, transparent 55%),
        radial-gradient(90% 70% at 100% 100%, #3a0f3f 0%, transparent 60%),
        linear-gradient(160deg, #0a0e1c 0%, #05070c 100%);
    z-index: -1;
}

#hud {
    position: absolute;
    left: calc(var(--safe-left) + 12px);
    right: calc(var(--safe-right) + 12px);
    top: calc(var(--safe-top) + 8px);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    pointer-events: none;
}
#hud > * { pointer-events: auto; }
#title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}
#badge {
    background: var(--accent);
    color: #04121a;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 13px;
    box-shadow: 0 0 10px var(--accent);
}
#name {
    margin-left: auto;
    background: var(--panel);
    border: 1px solid #ffffff2e;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#status { font-size: 12px; opacity: 0.8; white-space: nowrap; }
#status[data-kind="ok"] { color: #7CFFB2; }
#status[data-kind="bad"] { color: #ff8a8a; }
#status[data-kind="busy"] { color: #ffd37a; }

#controls {
    position: absolute;
    inset: 0;
    z-index: 2;
    touch-action: none;
}

#banner {
    position: absolute;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 14px);
    transform: translateX(-50%);
    background: #2a0b12e6;
    border: 1px solid #ff6b6b80;
    color: #ffd6d6;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    z-index: 4;
    max-width: 90vw;
    text-align: center;
}
#banner[hidden] { display: none; }

#fs-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
    text-align: center;
}
#fs-hint[hidden] { display: none; }

/* code entry */
#gate {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    background: #05070cd9;
    backdrop-filter: blur(6px);
    text-align: center;
}
#gate[hidden] { display: none; }
#gate h1 { margin: 0; font-size: 22px; letter-spacing: 0.04em; }
#gate h1 b { color: var(--accent); }
#gate p { margin: 0; opacity: 0.8; max-width: 32ch; }
#gate .row { display: flex; gap: 10px; }
#code-input {
    width: 7.5ch;
    font: 700 34px/1 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.25em;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #0a0f1a;
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 10px 6px 10px 12px;
    outline: none;
}
#code-go {
    font: 700 18px/1 system-ui, sans-serif;
    color: #04121a;
    background: var(--accent);
    border: 0;
    border-radius: 10px;
    padding: 0 20px;
}
#gate-msg { min-height: 1.3em; color: #ffd37a; font-size: 13px; }

/* ── controls: the engine's parts ─────────────────────────────────────────── */

.pc-stick, .pc-knob, .pc-button, .pc-wheel, .pc-slice, .pc-drawer, .pc-cell {
    position: absolute;
    border-radius: 999px;
}
.pc-stick {
    background: var(--stick-fill);
    border: 2px solid var(--stick-border);
    box-shadow: 0 0 var(--glow-width, 0px) var(--glow);
    transition: left 120ms, top 120ms;
}
.pc-stick.pc-active { background: var(--stick-active); transition: none; }
.pc-stick[data-mode="floating"] { opacity: 0.8; }
.pc-knob {
    background: var(--knob-fill);
    will-change: transform;
}
.pc-stick.pc-active .pc-knob { background: var(--knob-active); }

.pc-button {
    background: var(--button-fill);
    border: 2px solid var(--button-border);
    box-shadow: 0 0 var(--glow-width, 0px) var(--glow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-button.pc-active { background: var(--button-active); }
.pc-unmapped { opacity: 0.35; }

.pc-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    color: var(--ink);
    text-shadow: 0 1px 3px #0009;
    pointer-events: none;
    max-width: 100%;
    padding: 0 4px;
}
.pc-label span {
    font-weight: 700;
    font-size: 14px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc-label small { font-size: 9px; opacity: 0.7; margin-top: 2px; letter-spacing: 0.05em; }

.pc-wheel {
    background: var(--wheel-fill);
    border: 2px solid var(--wheel-border);
    z-index: 3;
}
.pc-wheel[hidden] { display: none; }
.pc-slice {
    background: var(--button-fill);
    border: 2px solid var(--button-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-slice.pc-active { background: var(--button-active); }

.pc-drawer {
    background: var(--drawer-fill);
    border: 2px solid var(--drawer-border);
    border-radius: 12px;
    z-index: 3;
}
.pc-drawer[hidden] { display: none; }
.pc-cell {
    background: var(--cell-fill);
    border: 2px solid var(--cell-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-cell.pc-active { background: var(--cell-active); }

/* The Neon theme (the engine's shipped theme): dark glass, cyan edges, magenta holds. */
#controls[data-theme="neon"] {
    --stick-fill: #0d1422a6; --stick-border: #00e5ffb3; --stick-active: #00e5ff26;
    --knob-fill: #00e5ffb3; --knob-active: #00e5ff;
    --button-fill: #0d1422e6; --button-border: #00e5ff; --button-active: #ff2bd666;
    --wheel-fill: #0a0f1ae6; --wheel-border: #00e5ff;
    --drawer-fill: #0a0f1ae6; --drawer-border: #00e5ff;
    --cell-fill: #0d1422e6; --cell-border: #00e5ff99; --cell-active: #ff2bd666;
    --glow: #00e5ff40; --glow-width: 10px;
}

@media (orientation: portrait) {
    #title { max-width: 50vw; }
    #fs-hint { top: 40%; }
}