:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17213d; background: #edf3ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #fff5c8, transparent 30rem), #edf3ff; }
button, input, select { font: inherit; }
button { border: 0; border-radius: .85rem; min-height: 3rem; padding: .7rem 1rem; color: white; background: #315dca; font-weight: 750; cursor: pointer; touch-action: manipulation; }
button:hover:not(:disabled) { background: #254aa7; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select { width: 100%; border: 2px solid #c7d2ee; border-radius: .75rem; padding: .75rem .85rem; background: white; color: #17213d; }
input:focus, select:focus { outline: 3px solid #91b5ff; border-color: #315dca; }
h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.04; letter-spacing: -.04em; }
h2 { font-size: clamp(1.55rem, 5vw, 2.25rem); } .app-shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 1.4rem 0 3rem; }
.brand { font-size: 1.3rem; font-weight: 900; color: #315dca; letter-spacing: -.03em; } .brand span { color: #f2972c; }
.connection-status { min-height: 1.4rem; color: #53617d; font-size: .9rem; margin: .35rem 0 1rem; }
.card { background: rgba(255,255,255,.96); border: 1px solid #d7e0f5; border-radius: 1.2rem; padding: clamp(1.1rem, 4vw, 2rem); box-shadow: 0 12px 35px rgba(38, 75, 149, .10); }
.compact { padding: .8rem 1rem; } .lead { color: #53617d; font-size: 1.1rem; } .stack { display: grid; gap: .8rem; } label { display: grid; gap: .35rem; font-weight: 700; }
.divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; margin: 1.4rem 0; color: #6d7890; } .divider::before, .divider::after { content: ""; height: 1px; background: #d7e0f5; }
.secondary { background: #e8efff; color: #315dca; } .secondary:hover:not(:disabled) { background: #d7e3ff; }
.error { min-height: 1.2rem; color: #b22541; font-weight: 650; } .room-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .room-bar strong { display: block; font-size: 1.35rem; letter-spacing: .12em; }
.eyebrow { color: #63718e; font-size: .7rem; font-weight: 800; letter-spacing: .1em; } .icon-button { margin-left: auto; background: #e8efff; color: #315dca; min-width: 3rem; padding: .4rem; } .text-button { background: transparent; color: #315dca; padding: .4rem; min-height: 2.5rem; }
.grid { display: grid; gap: 1rem; } .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .players { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.player { display: flex; gap: .55rem; align-items: center; padding: .65rem .75rem; border-radius: .7rem; background: #f3f6fd; } .dot { width: .7rem; height: .7rem; border-radius: 50%; background: #aab4c7; flex: 0 0 auto; } .dot.online { background: #2caa72; } .host-badge { margin-left: auto; color: #315dca; font-size: .78rem; font-weight: 800; }
.setting-box { background: #f7f9ff; border-radius: .9rem; padding: 1rem; } .table-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; } .table-picker label { display: flex; align-items: center; justify-content: center; min-height: 2.7rem; border: 2px solid #c7d2ee; border-radius: .65rem; background: white; cursor: pointer; } .table-picker input { position: absolute; opacity: 0; width: 1px; } .table-picker input:checked + span { color: #315dca; font-weight: 900; } .table-picker label:has(input:checked) { border-color: #315dca; background: #e9f0ff; }
.phase-card { text-align: center; } .countdown-number, .question { font-size: clamp(3.3rem, 18vw, 7rem); line-height: 1; font-weight: 900; letter-spacing: -.07em; margin: 1rem 0; color: #223f89; } .question { color: #17213d; } .timer { height: .8rem; background: #e1e8f6; border-radius: 1rem; overflow: hidden; margin: 1rem 0 .4rem; } .timer > span { display: block; height: 100%; background: #f2972c; border-radius: inherit; transition: width .1s linear; }
.answer-form { display: flex; gap: .7rem; max-width: 440px; margin: 1.6rem auto .5rem; } .answer-form input { font-size: 1.8rem; font-weight: 800; text-align: center; min-width: 0; } .answer-form button { min-width: 7rem; } .muted { color: #63718e; } .result-list { text-align: left; list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; } .result-list li { padding: .7rem .8rem; border-radius: .7rem; background: #f3f6fd; } .score-table { width: 100%; border-collapse: collapse; text-align: left; } .score-table th, .score-table td { padding: .65rem .3rem; border-bottom: 1px solid #dce4f4; } .score-table th:last-child, .score-table td:last-child { text-align: right; }
.result-list li.round-winner { background: #fff1be; border: 2px solid #f2972c; font-weight: 800; }
@media (max-width: 420px) { .app-shell { width: min(100% - 1rem, 760px); padding-top: 1rem; } .two-col { grid-template-columns: 1fr; } .answer-form { flex-direction: column; } .answer-form button { width: 100%; } .room-bar { flex-wrap: wrap; } }