@font-face {
    font-family: 'Silkscreen';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/silkscreen-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Silkscreen';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('/fonts/silkscreen-700.woff2') format('woff2');
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container canvas {
    image-rendering: pixelated;
}

/* ── Question panel ── */
.qpanel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 420px;
    background: rgba(0, 0, 0, 0.65);
    border: 2px solid #444444;
    padding: 22px 16px 20px;
    box-sizing: border-box;
}
.qpanel-prompt {
    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    text-align: center;
    line-height: 1.1;
}
.qpanel-answer {
    width: 130px;
    height: 64px;
    background: #cccccc;
    border: 3px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px auto;
    transition: background-color 0.35s;
}
.qpanel-answer.flash-correct { background: #00cc44; transition: none; }
.qpanel-answer.flash-wrong   { background: #dd2222; transition: none; }
.qpanel-text {
    font-family: Arial Black, Arial, sans-serif;
    font-size: 34px;
    font-weight: 900;
    color: #000000;
}
.qpanel-text::after {
    content: '_';
    color: #555555;
    animation: cursor-blink 1s step-start infinite;
}
.qpanel-text.has-answer::after {
    display: none;
}
@keyframes cursor-blink {
    0%, 100% { visibility: visible; }
    50%       { visibility: hidden; }
}

/* ── Numpad ── */
.numpad {
    display: grid;
    grid-template-columns: repeat(3, 82px);
    width: 258px;
    gap: 6px;
    touch-action: manipulation;
    text-align: center;
}
.numpad-btn {
    width: 82px;
    height: 58px;
    line-height: 58px;
    padding: 0;
    text-align: center;
    background: #222222;
    border: 2px solid #888888;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}
.numpad-btn:hover  { background: #444444; }
.numpad-btn:active { background: #444444; }
.numpad-dot        { background: #333333; border-color: #aaaaaa; color: #ffcc00; }
.numpad-dot:hover,
.numpad-dot:active { background: #555555; }
.numpad-bs         { background: #550000; border-color: #cc0000; }
.numpad-bs:hover,
.numpad-bs:active  { background: #880000; }
.numpad-ok         { background: #005500; border-color: #00cc00; }
.numpad-ok:hover,
.numpad-ok:active  { background: #008800; }

/* ── Signup form ── */
.signup-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 390px;
}
.signup-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'Silkscreen', monospace;
    font-size: 13px;
    color: #ffcc00;
    letter-spacing: 1px;
}
.signup-form input {
    background: #110033;
    border: 2px solid #ffcc00;
    color: #ffcc00;
    font-size: 18px;
    padding: 9px 12px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
.signup-form input::placeholder { color: #886600; }
.signup-form input:focus { border-color: #ffffff; color: #ffffff; }
.signup-form button {
    font-family: 'Silkscreen', monospace;
    font-size: 20px;
    background: #000000;
    border: 3px solid #ffcc00;
    color: #ffcc00;
    padding: 14px;
    margin-top: 8px;
    cursor: pointer;
    touch-action: manipulation;
    width: 100%;
}
.signup-form button:hover  { border-color: #ffffff; color: #ffffff; }
.signup-form button:disabled { opacity: 0.5; cursor: default; }
.form-error {
    display: none;
    color: #ff4444;
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    text-align: center;
    padding: 2px 0;
}
.form-ok {
    display: none;
    color: #44cc44;
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    text-align: center;
    padding: 2px 0;
}
.form-link {
    text-align: center;
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    color: #888888;
    margin: 0;
}
.form-link a { color: #ffcc00; text-decoration: none; }
.form-link a:hover { color: #ffffff; }

/* ── HTO frame flash animation ── */
@keyframes hto-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

/* ── Accessible font overrides ── */
.accessible-font .signup-form label,
.accessible-font .signup-form button,
.accessible-font .form-error,
.accessible-font .form-ok,
.accessible-font .form-link {
    font-family: Arial, sans-serif;
}