* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: #17191f;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

.container {
    min-height: 100dvh;
    max-width: 440px;
    margin: auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    font-size: 64px;
    margin-bottom: 12px;
}

h1 {
    font-size: clamp(32px, 9vw, 42px);
    letter-spacing: -1px;
    margin: 0;
}

h1 span {
    color: #91b9ff;
}

.subtitle {
    color: #aab0bd;
    margin: 12px 0 48px;
}

.screen {
    display: none;
    width: 100%;
}

.screen.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

h2 {
    text-align: center;
}

button {
    width: 100%;
    min-height: 56px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.primary {
    background: #dbeafe;
    color: #17191f;
    border: none;
}

.secondary {
    background: transparent;
    color: white;
    border: 1px solid #777d89;
}

input {
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #777d89;
    background: #252831;
    color: white;
    font-size: 16px;
}

footer {
    position: fixed;
    bottom: 20px;
    color: #777d89;
    font-size: 11px;
}

/* Multiplayer lobby */

.lobby-label {
    text-align: center;
    color: #aab0bd;
    font-size: 13px;
}

.room-code {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 5px;
    text-align: center;
    color: #91b9ff;
    overflow-wrap: anywhere;
}
#deckSelect {
    width: 100%;
    padding: 12px;
    margin: 12px 0;
    border-radius: 8px;
    background: #17191f;
    color: white;
    border: 1px solid #414550;
}

#selectedDeckName {
    color: #91b9ff;
    font-weight: 600;
}


/* PARTY CARDS - Gameplay */

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #aab0bd;
}

.judge-info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 14px;
}

#gameRole {
    color: #91b9ff;
    font-weight: 700;
}

.question-card {
    background: #111111;
    color: white;
    border: 1px solid #414550;
    border-radius: 16px;
    padding: 24px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 24px;
}

.card-type {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
    opacity: 0.65;
}

.question-card p {
    font-size: 23px;
    line-height: 1.35;
    font-weight: 800;
    margin: 24px 0 0;
}

#handTitle {
    font-size: 15px;
    margin-bottom: 14px;
}

.answer-hand {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.answer-card {
    background: #f4f4f4;
    color: #151515;
    border: 3px solid transparent;
    border-radius: 12px;
    min-height: 145px;
    padding: 15px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.answer-card.selected {
    border-color: #527fe3;
    background: #dbe8ff;
}

.answer-card:disabled {
    opacity: 0.75;
    cursor: default;
}

.game-message {
    color: #aab0bd;
    text-align: center;
    margin: 20px 0;
}

.game-scoreboard {
    background: #252831;
    border-radius: 14px;
    padding: 18px;
    margin-top: 24px;
}

.game-scoreboard h3 {
    font-size: 15px;
    margin-top: 0;
}

.score-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #414550;
}

.score-row:last-child {
    border-bottom: none;
}

@media (min-width: 650px) {
    .answer-hand {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#submitAnswerBtn {
    width: 100%;
    margin-top: 18px;
}

#judgingPanel,
#roundResult {
    margin-top: 24px;
}

#judgingPanel h3,
#roundResult h3 {
    font-size: 16px;
    margin-bottom: 14px;
}

#chooseWinnerBtn {
    width: 100%;
    margin-top: 18px;
}

#winnerName {
    font-size: 20px;
    font-weight: 800;
    color: #91b9ff;
}

#winningCard {
    min-height: 100px;
    cursor: default;
}

#nextRoundBtn {
    width: 100%;
    margin-top: 18px;
}


/* Step 14C - Player connection indicators */

.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.connection-status.online {
    color: #35c97a;
}

.connection-status.disconnected {
    color: #ff6868;
}

/* Keep the status readable on smaller screens */

.player-item,
.score-row {
    gap: 10px;
}

.score-row .connection-status {
    margin-left: auto;
}

/* QR room invitation */
.qr-join-panel { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 12px; border:1px solid #414550; border-radius:16px; background:#252831; }
.qr-join-panel .lobby-label { margin:0; font-weight:700; letter-spacing:1px; }
.qr-code { display:flex; align-items:center; justify-content:center; width:244px; max-width:100%; aspect-ratio:1; padding:12px; background:white; border-radius:12px; }
.qr-code svg { display:block; width:100%; height:auto; }
.qr-hint { margin:0; color:#aab0bd; font-size:13px; text-align:center; line-height:1.5; }
#copyJoinLinkBtn { min-height:42px; max-width:244px; font-size:12px; }

/* Step 15 - Match results */
.final-trophy { text-align: center; font-size: 68px; }
.final-winner { text-align: center; color: #91b9ff; font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.final-scores { background: #252831; border: 1px solid #414550; border-radius: 14px; overflow: hidden; }
.final-score-row { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #414550; }
.final-score-row:last-child { border-bottom: none; }
.final-score-row.champion { background: #303e59; }
.final-place { width: 45px; flex: none; font-weight: 800; }
.final-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.final-points { white-space: nowrap; font-weight: 800; color: #91b9ff; }


/* ============================================
   STEP 16 - Mobile polish and state animations
   ============================================ */
:root { color-scheme: dark; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.container { padding: max(24px, env(safe-area-inset-top)) 18px max(56px, env(safe-area-inset-bottom)); justify-content: flex-start; }
.screen { max-width: 100%; }
.screen.active { gap: 14px; animation: screen-in .24s ease-out both; }
.logo { margin-top: 12px; font-size: 52px; }
.subtitle { margin-bottom: 28px; text-align: center; }
footer { position: static; margin-top: auto; padding-top: 32px; text-align: center; }
button { touch-action: manipulation; transition: transform .14s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #91b9ff; outline-offset: 3px; }
button:active:not(:disabled) { transform: scale(.975); }
button:disabled { cursor: not-allowed; opacity: .62; }
.primary { background: #b7d2ff; }
.primary:not(:disabled):hover { background: #dbeafe; }
.secondary:not(:disabled):hover { border-color: #91b9ff; background: #252c39; }
.lobby-panel, .game-scoreboard { width: 100%; }
.lobby-panel { padding: 14px 16px; border-radius: 14px; background: #252831; border: 1px solid #414550; }
.lobby-panel h3 { margin: 0 0 12px; font-size: 16px; }
.player-item { display: flex; align-items: center; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid #414550; }
.player-item:last-child { border-bottom: 0; }
.player-item .connection-status { margin-left: auto; }
.host-label { color: #91b9ff; font-size: 11px; font-weight: 800; }
.room-code { font-size: clamp(30px, 9vw, 42px); }
.qr-join-panel { width: 100%; }
.game-header, .judge-info { flex-wrap: wrap; }
.question-card { margin-bottom: 8px; min-height: 145px; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.question-card p { font-size: clamp(19px, 5.5vw, 24px); }
.answer-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.answer-card { position: relative; min-width: 0; min-height: 134px; padding: 14px; font-size: clamp(13px, 3.8vw, 16px); border-radius: 14px; box-shadow: 0 4px 0 #c3c3c3; transform: translateY(0); transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.answer-card:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 7px 0 #c3c3c3; }
.answer-card.selected { border-color: #4b79e3; background: #e0ebff; transform: translateY(-7px); box-shadow: 0 8px 0 #6589d3, 0 0 0 2px rgba(145,185,255,.2); }
.answer-card.selected::after { content: '✓'; position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #4b79e3; color: #fff; font-size: 14px; }
.answer-card:disabled { opacity: .8; box-shadow: 0 3px 0 #bbb; }
.answer-card:disabled.selected { opacity: 1; }
.score-row { align-items: center; flex-wrap: wrap; }
.score-row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.score-row span:last-child { white-space: nowrap; }
.game-message { margin: 12px 0; min-height: 20px; line-height: 1.5; }
.final-trophy { font-size: 64px; }
.final-score-row { min-width: 0; }
.final-name { font-weight: 600; }
.final-score-row.champion { border-left: 4px solid #ffd76b; }
.game-toast { position: fixed; z-index: 40; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translate(-50%, -12px); width: max-content; max-width: calc(100vw - 32px); padding: 12px 20px; background: #dbeafe; color: #17191f; border-radius: 999px; font-size: 14px; font-weight: 800; box-shadow: 0 12px 35px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; text-align: center; }
.game-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.celebration-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.confetti-piece { position: absolute; left: var(--x); top: -24px; width: 9px; height: 16px; border-radius: 2px; animation: confetti-fall var(--duration) ease-in var(--delay) both; }
.phase-enter { animation: phase-pop .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phase-pop { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes confetti-fall { from { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 1; } to { transform: translate3d(var(--drift), 110vh, 0) rotate(720deg); opacity: 0; } }
@media (max-width: 360px) { .container { padding-left: 12px; padding-right: 12px; } .answer-card { min-height: 120px; padding: 10px; font-size: 13px; } .connection-status { font-size: 11px; } }
@media (min-width: 650px) { .container { max-width: 720px; } .answer-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .celebration-layer { display: none; } }

/* Step 20: multi-deck settings */
.deck-checklist { display:grid; gap:8px; margin:12px 0 18px; text-align:left; }
.deck-option { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid #555b69; border-radius:10px; cursor:pointer; }
.deck-option input { width:20px; height:20px; flex-shrink:0; accent-color:#9c7ef2; }
.deck-option span { flex:1; }
#selectedTargetScore { margin-top:10px; font-weight:600; }

/* Step 20B: compact, responsive lobby settings */
.game-settings-panel { text-align: left; }
.settings-fields { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:12px; margin:14px 0 12px; align-items:start; }
.settings-field { min-width:0; }
.settings-field > label { display:block; margin-bottom:7px; font-size:13px; font-weight:700; color:#c8d2e2; }
.deck-picker { position:relative; min-width:0; }
.deck-picker > summary, .settings-select { box-sizing:border-box; display:flex; align-items:center; width:100%; height:46px; padding:0 34px 0 12px; border:1px solid #555b69; border-radius:10px; background:#191c24; color:#f5f6fa; font:inherit; font-size:14px; }
.deck-picker > summary { cursor:pointer; list-style:none; position:relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:44px; }
.deck-picker > summary::-webkit-details-marker { display:none; }
.deck-picker > summary::after { content:'⌄'; position:absolute; right:13px; top:0; color:#b6c5de; font-size:21px; }
.deck-picker[open] > summary { border-color:#9bbcff; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.deck-picker > summary:focus-visible { outline:3px solid #91b9ff; outline-offset:2px; }
.deck-picker .deck-checklist { position:absolute; z-index:15; left:0; right:0; top:calc(100% - 1px); margin:0; padding:8px; max-height:260px; overflow-y:auto; background:#191c24; border:1px solid #9bbcff; border-top:0; border-radius:0 0 10px 10px; box-shadow:0 12px 25px #0008; }
.deck-picker .deck-option { padding:9px; gap:9px; border:0; border-radius:7px; font-size:13px; }
.deck-picker .deck-option:hover { background:#303643; }
.deck-picker .deck-option input { width:17px; height:17px; }
.settings-select { appearance:auto; cursor:pointer; padding-right:6px; }
.game-settings-panel #saveDeckBtn { width:100%; margin:0; min-height:44px; }
.settings-current { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:12px; font-size:13px; }
.settings-current p { margin:0; }
#selectedDeckName { color:#91b9ff; font-weight:600; overflow-wrap:anywhere; }
#selectedTargetScore { margin:0; color:#c8d2e2; font-weight:600; }
@media (max-width:420px) { .settings-fields { grid-template-columns:1fr; gap:12px; } }