:root {
    --bg: #12141f; --panel: #262c47; --panel2: #323a5e; --hi: #5b679c; --lo: #0d0f1a;
    --ink: #eef1fb; --dim: #9aa4cf; --gold: #ffcf4a; --leaf: #74d65f; --red: #ff6b5b; --sky: #5ab0ff;
    --px: 'Press Start 2P', ui-monospace, monospace; --tx: 'VT323', ui-monospace, monospace;
    color-scheme: dark; box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px)
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html, body { height: 100% }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body {
    margin: 0; background: var(--bg); color: var(--ink); font-family: var(--tx); font-size: 21px; line-height: 1.15;
    overflow-x: hidden; -webkit-tap-highlight-color: transparent
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 0 }
.wrap {
    position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 16px max(16px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-bottom, 16px)) max(16px, env(safe-area-inset-right, 0px))
}
.win {
    width: 100%; max-width: 420px; background: var(--panel); border: 3px solid;
    border-color: var(--hi) var(--lo) var(--lo) var(--hi);
    box-shadow: 0 0 0 3px var(--lo), 0 10px 0 rgba(0, 0, 0, .35);
    padding: 18px; display: flex; flex-direction: column; gap: 12px
}
h1 { margin: 0; font-family: var(--px); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--gold); text-align: center; text-shadow: 2px 2px 0 var(--lo) }
.sub { margin: 0; text-align: center; color: var(--dim); line-height: 1.3 }
.tabs { display: flex; gap: 6px }
.tabs .btn.tab-off, .tabs .btn:disabled { opacity: .42; cursor: not-allowed; }
.btn {
    font-family: var(--px); font-size: 9px; color: var(--ink); background: var(--panel2); border: 2px solid;
    border-color: var(--hi) var(--lo) var(--lo) var(--hi); padding: 10px 8px; cursor: pointer; line-height: 1.3;
    touch-action: manipulation
}
.btn:hover { background: #3d4772 }
.btn:active, .btn.on { border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: #2a4a35; color: var(--leaf) }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px }
.btn[disabled] { opacity: .45; cursor: not-allowed }
form { display: flex; flex-direction: column; gap: 10px }
.fld { display: flex; flex-direction: column; gap: 4px }
.lbl { font-family: var(--px); font-size: 7px; color: var(--dim); letter-spacing: .5px }
input {
    font: inherit; font-size: 22px; color: var(--gold); background: var(--lo); border: 2px solid;
    border-color: var(--lo) var(--hi) var(--hi) var(--lo); padding: 8px 10px; width: 100%; caret-color: var(--leaf);
    min-height: 44px
}
.msg { min-height: 1.2em; font-size: 20px; color: var(--dim); word-break: break-word }
.msg.bad { color: var(--red) } .msg.good { color: var(--leaf) }
.acts { display: flex; gap: 8px; flex-wrap: wrap }
.acts .btn { flex: 1; min-width: 140px; min-height: 44px }
.go { background: #2a4a35; color: var(--leaf) }
.note { margin: 0; font-size: 17px; color: var(--dim); text-align: center; line-height: 1.25 }

@media (max-width: 520px) {
    body { font-size: 20px }
    .wrap { align-items: flex-start; padding-top: max(10px, env(safe-area-inset-top, 10px)) }
    .win { padding: 14px 12px; gap: 10px; border-width: 2px; box-shadow: 0 0 0 2px var(--lo), 0 6px 0 rgba(0, 0, 0, .35) }
    h1 { font-size: 11px; line-height: 1.45 }
    .sub { font-size: 18px; padding: 0 4px }
    .tabs .btn { flex: 1; min-height: 44px; font-size: 8px }
    .acts { flex-direction: column; gap: 10px }
    .acts .btn { min-width: 100%; width: 100%; font-size: 9px; padding: 12px 10px }
    input { font-size: 20px }
    .note { font-size: 16px }
    .msg { font-size: 18px }
}

@media (max-width: 380px) {
    h1 { font-size: 10px }
    .lbl { font-size: 6px }
}

@media (max-height: 520px) and (orientation: landscape) {
    .wrap { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch }
    .win { margin: 8px 0 }
    h1 { font-size: 10px }
    form { gap: 8px }
    .note { display: none }
}