@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: dark;
    --bg: #080d1a;
    --surface: rgba(18, 27, 49, 0.92);
    --surface-soft: rgba(26, 38, 67, 0.72);
    --border: rgba(255, 255, 255, 0.12);
    --text: #f7f8fc;
    --muted: #aab4cc;
    --accent: #6c7cff;
    --accent-2: #24d4c4;
    --warning: #ffb84d;
    --danger: #ff5f79;
    --success: #39d98a;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 15px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 10% 5%, rgba(108, 124, 255, 0.24), transparent 28rem),
        radial-gradient(circle at 90% 12%, rgba(36, 212, 196, 0.16), transparent 26rem),
        linear-gradient(155deg, #080d1a 0%, #10172a 55%, #0b1020 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }

.game-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: max(14px, env(safe-area-inset-top)) 16px max(96px, calc(78px + env(safe-area-inset-bottom)));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.game-header {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(13, 20, 38, 0.8);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 20;
}

.brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--accent), #945eff);
    box-shadow: 0 8px 24px rgba(108, 124, 255, 0.38);
    font-size: 1.45rem;
}

.brand-block h1 { margin: 0; font-size: clamp(1rem, 3vw, 1.28rem); letter-spacing: .02em; }
.brand-block p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }
#connection-label.is-online { color: var(--success); }
#connection-label.is-offline { color: var(--danger); }

.player-summary { display: flex; gap: 7px; }
.summary-item {
    min-width: 88px;
    padding: 8px 12px;
    border-radius: 13px;
    background: rgba(255,255,255,.06);
    text-align: right;
}
.summary-label { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.summary-item strong { display: block; margin-top: 2px; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-score { background: rgba(36, 212, 196, .13); color: #82f6e8; }
.summary-online { background: rgba(108,124,255,.14); color: #d7dbff; }

.active-game,
.history-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.active-game {
    grid-column: 1;
    padding: clamp(18px, 4vw, 30px);
    position: sticky;
    top: 92px;
    z-index: 10;
    align-self: start;
    min-height: 390px;
}

.round-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.category-pill {
    display: inline-flex; align-items: center; min-height: 30px; padding: 6px 11px;
    border-radius: 999px; background: rgba(108,124,255,.17); color: #cdd2ff;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em;
}
.round-status { color: var(--muted); font-size: .78rem; font-weight: 600; }

.waiting-panel {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    text-align: center;
}
.waiting-panel p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}

.question-panel h2 { margin: 4px 0 24px; font-size: clamp(1.45rem, 4.4vw, 2.35rem); line-height: 1.22; text-wrap: balance; }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.answer-button {
    width: 100%; min-height: 76px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px;
    padding: 12px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-md);
    background: rgba(255,255,255,.065); color: var(--text); font: inherit; font-weight: 700; text-align: left;
    cursor: pointer; transition: transform .12s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.answer-button:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.25); }
.answer-button:active { transform: scale(.985); }
.answer-button:disabled { cursor: default; }
.answer-letter {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
    background: rgba(108,124,255,.22); color: #d9ddff; font-size: .84rem; font-weight: 800;
}
.answer-button.is-selected { border-color: var(--warning); background: rgba(255,184,77,.18); box-shadow: 0 0 0 2px rgba(255,184,77,.13); }
.answer-button.is-selected .answer-letter { background: var(--warning); color: #332000; }
.answer-button.is-correct { border-color: var(--success); background: rgba(57,217,138,.2); }
.answer-button.is-correct .answer-letter { background: var(--success); color: #062416; }
.answer-button.is-wrong { border-color: var(--danger); background: rgba(255,95,121,.18); }
.answer-button.is-wrong .answer-letter { background: var(--danger); color: #330810; }
.answer-button.is-muted { opacity: .52; }

.timer-row { display: grid; grid-template-columns: 1fr 48px; align-items: center; gap: 12px; margin-top: 20px; }
#reloj_arena { width: 100%; height: 13px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: rgba(255,255,255,.1); }
#reloj_arena::-webkit-progress-bar { background: rgba(255,255,255,.1); border-radius: inherit; }
#reloj_arena::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; transition: width .25s linear; }
#reloj_arena.is-warning::-webkit-progress-value { background: linear-gradient(90deg, var(--warning), #ff7957); }
#reloj_arena.is-danger::-webkit-progress-value { background: linear-gradient(90deg, var(--danger), #ff334f); }
#reloj_arena::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; }
#timer-label { font-variant-numeric: tabular-nums; text-align: right; }

.answer-feedback { min-height: 29px; margin-top: 14px; color: var(--muted); font-weight: 700; }
.answer-feedback.success { color: var(--success); }
.answer-feedback.error { color: #ff8da0; }
.answer-feedback.selected { color: var(--warning); }

.history-section { grid-column: 1; min-height: 0; padding: 16px 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.section-heading h2 { margin: 2px 0 0; font-size: 1.22rem; }
.eyebrow { color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .13em; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.07); color: var(--text); cursor: pointer; }

.history-list { max-height: 330px; overflow-y: auto; padding-right: 5px; scroll-behavior: smooth; overscroll-behavior: contain; }
.history-list::-webkit-scrollbar { width: 8px; }
.history-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.history-card {
    display: grid; grid-template-columns: 42px 1fr; gap: 12px; margin-bottom: 10px; padding: 14px;
    border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.045);
    animation: enter .28s ease-out;
}
.history-card:last-child { margin-bottom: 0; }
.history-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); }
.history-card strong { display: block; line-height: 1.3; }
.history-card p { margin: 5px 0 0; color: var(--muted); line-height: 1.42; font-size: .9rem; }
.history-card.is-correct { border-color: rgba(57,217,138,.38); background: rgba(57,217,138,.09); }
.history-card.is-wrong { border-color: rgba(255,95,121,.35); background: rgba(255,95,121,.08); }
.history-card.is-timeout { border-color: rgba(255,184,77,.36); background: rgba(255,184,77,.08); }
.history-meta { margin-top: 8px; font-size: .76rem; color: var(--muted); }

.bottom-actions { grid-column: 1; display: flex; justify-content: center; gap: 10px; }
.action-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 14px; text-decoration: none; color: white; font-weight: 800; }
.action-secondary { background: rgba(108,124,255,.2); border: 1px solid rgba(108,124,255,.38); }
.action-danger { background: rgba(255,95,121,.16); border: 1px solid rgba(255,95,121,.35); }

@keyframes enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 50% { transform: scale(1.055); box-shadow: 0 0 34px rgba(108,124,255,.24); } }

@media (max-width: 860px) {
    .game-shell { grid-template-columns: 1fr; }
    .active-game, .history-section { grid-column: 1; }
    .active-game { top: 88px; }
}

@media (max-width: 600px) {
    .game-shell { padding-left: 10px; padding-right: 10px; gap: 12px; }
    .game-header { padding: 10px 11px; border-radius: 17px; }
    .brand-mark { width: 39px; height: 39px; border-radius: 12px; font-size: 1.2rem; }
    .brand-block h1 { font-size: .94rem; }
    .brand-block p { font-size: .69rem; }
    .summary-item { min-width: 54px; padding: 6px 7px; }
    .summary-label { font-size: .56rem; }
    .summary-item strong { font-size: .8rem; max-width: 72px; }
    .active-game { min-height: 0; padding: 17px 14px 19px; border-radius: 21px; top: 76px; }
    .round-meta { margin-bottom: 15px; }
    .category-pill { font-size: .62rem; }
    .round-status { font-size: .68rem; }
    .question-panel h2 { margin: 2px 0 16px; font-size: clamp(1.32rem, 6vw, 1.82rem); line-height: 1.18; }
    .answer-grid { grid-template-columns: 1fr; gap: 10px; }
    .answer-button { min-height: 68px; grid-template-columns: 39px 1fr; padding: 10px 12px; border-radius: 15px; font-size: 1rem; line-height: 1.22; }
    .answer-letter { width: 36px; height: 36px; border-radius: 11px; font-size: .9rem; }
    .timer-row { margin-top: 14px; }
    .history-section { border-radius: 21px; padding: 13px 14px; }
    .section-heading { margin-bottom: 9px; }
    .history-list { max-height: 28vh; }
    .history-card { grid-template-columns: 34px 1fr; gap: 9px; padding: 10px 11px; margin-bottom: 8px; border-radius: 14px; }
    .history-icon { width: 32px; height: 32px; border-radius: 10px; }
    .history-card strong { font-size: .9rem; }
    .history-card p { font-size: .82rem; line-height: 1.32; }
    .history-meta { margin-top: 5px; font-size: .7rem; }
    .bottom-actions {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        padding: 9px 12px max(9px, env(safe-area-inset-bottom));
        background: rgba(8,13,26,.86); backdrop-filter: blur(16px); border-top: 1px solid var(--border);
    }
    .action-button { flex: 1; }
}


@media (max-width: 460px) {
    .game-header { gap: 8px; }
    .brand-mark { display: none; }
    .brand-block h1 { font-size: .82rem; }
    .brand-block p { font-size: .62rem; }
    .player-summary { gap: 4px; }
    .summary-item { min-width: 48px; padding: 5px 6px; }
    .summary-label { font-size: .5rem; }
    .summary-item strong { font-size: .74rem; max-width: 62px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* ==========================================================
   Pantalla de acceso — misma identidad visual que la partida
   ========================================================== */
.login-page {
    min-height: 100svh;
    display: grid;
    place-items: center;
}

.login-shell {
    width: min(620px, 100%);
    padding: max(14px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
    display: grid;
    gap: 16px;
}

.login-header {
    position: static;
    width: 100%;
}

.login-ranking-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border: 1px solid rgba(108,124,255,.38);
    border-radius: 13px;
    background: rgba(108,124,255,.16);
    color: var(--text);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}

.login-card {
    padding: clamp(20px, 5vw, 34px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.login-intro h2 {
    margin: 7px 0 9px;
    font-size: clamp(1.55rem, 6vw, 2.2rem);
    line-height: 1.14;
}

.login-intro p {
    margin: 0 0 24px;
    color: var(--muted);
    line-height: 1.55;
}

.login-card form {
    display: grid;
    gap: 11px;
}

.login-card label {
    color: #dce1f2;
    font-size: .82rem;
    font-weight: 800;
}

.login-card input[type="text"] {
    width: 100%;
    min-height: 58px;
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    outline: none;
    background: rgba(255,255,255,.065);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-card input[type="text"]::placeholder {
    color: #7f8ba6;
    font-weight: 500;
}

.login-card input[type="text"]:focus {
    border-color: var(--accent);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 4px rgba(108,124,255,.14);
}

.login-play-button {
    width: 100%;
    min-height: 58px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--accent), #8d60ff);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(108,124,255,.3);
    transition: transform .12s ease, filter .18s ease;
}

.login-play-button:hover { filter: brightness(1.08); }
.login-play-button:active { transform: scale(.985); }

.login-error {
    display: grid;
    gap: 2px;
    padding: 11px 13px;
    border: 1px solid rgba(255,95,121,.35);
    border-radius: 13px;
    background: rgba(255,95,121,.12);
    color: #ffafbc;
    font-size: .86rem;
}

.login-error span { color: #d8a6af; }

.login-rules {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.login-rules div {
    min-width: 0;
    padding: 11px 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    text-align: center;
}

.login-rules span {
    display: block;
    color: #dce0ff;
    font-size: 1rem;
    font-weight: 800;
}

.login-rules small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.2;
}

.login-footer {
    margin: 0;
    padding: 0 12px;
    color: var(--muted);
    font-size: .77rem;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 460px) {
    .login-shell { gap: 11px; padding-left: 10px; padding-right: 10px; }
    .login-header .brand-mark { display: grid; }
    .login-header .brand-block h1 { font-size: .88rem; }
    .login-header .brand-block p { font-size: .62rem; }
    .login-ranking-link { padding: 8px 9px; font-size: .72rem; }
    .login-card { padding: 19px 15px; border-radius: 21px; }
    .login-intro p { margin-bottom: 19px; font-size: .9rem; }
    .login-rules { margin-top: 17px; gap: 6px; }
    .login-rules div { padding: 9px 4px; }
}