: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 { display: inline-flex; align-items: center; gap: .38rem; color: #315dca; text-decoration: none; } .brand svg { width: 1.5rem; height: 1.95rem; flex: 0 0 auto; transition: transform .16s ease; } .brand-word { display: inline-flex; align-items: baseline; font-size: clamp(1.25rem, 4vw, 1.45rem); font-weight: 900; letter-spacing: -.065em; line-height: 1; } .brand-einmaleins { color: #315dca; } .brand-rakete { color: #f2972c; letter-spacing: -.08em; transform: rotate(-3deg) translateY(-.03em); transform-origin: left bottom; } .brand:hover svg { transform: translateY(-1px) rotate(-3deg); } .brand:hover .brand-rakete { color: #dd7f16; } .brand:focus-visible { outline: 3px solid #91b5ff; outline-offset: .3rem; border-radius: .3rem; } .brand-body { fill: #315dca; } .brand-window { fill: #e8f4ff; } .brand-fin { fill: #244991; } .brand-flame { fill: #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); }
.app-footer { margin: 1.5rem 0 0; color: #63718e; font-size: .85rem; line-height: 1.65; text-align: center; } .app-footer a, .info-page a { color: #315dca; } .info-page { margin-top: 1rem; } .info-page h2 { margin-top: 1.5rem; font-size: 1.2rem; } .info-page code { overflow-wrap: anywhere; }
.compact { padding: .8rem 1rem; } .lead { color: #53617d; font-size: 1.1rem; } .landing > label { margin-bottom: .8rem; } .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; user-select: text; }
.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 { display: grid; gap: .8rem; background: #f7f9ff; border-radius: .9rem; padding: 1rem; } .setting-box h3 { margin: 0; } .start-game { width: 100%; margin-top: .15rem; } .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; }
.answer-correct { background: #eaf8ee; border-color: #27833b; } .answer-incorrect { background: #fff0f1; border-color: #bb3448; } .answer-feedback { font-weight: 800; font-size: 1.1rem; } .answer-feedback.correct { color: #146c2e; } .answer-feedback.incorrect { color: #922439; }
.fastest-list li.first-place { background: #fff7d8; border: 1px solid #e3ad4a; font-weight: 800; }
.finished-lobby-button { display: block; margin: 1.5rem auto 0; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; } .game-layout.scoreboard-visible { grid-template-columns: minmax(0, 1fr) 220px; } #phase-content { min-width: 0; grid-column: 1; grid-row: 1; } .rocket-race { grid-column: 2; grid-row: 1; overflow: hidden; min-height: 18rem; padding: .85rem .65rem .55rem; color: #f7fbff; background: radial-gradient(circle at 20% 18%, rgba(132, 191, 255, .28) 0 1px, transparent 2px), radial-gradient(circle at 75% 32%, rgba(255,255,255,.7) 0 1px, transparent 2px), radial-gradient(circle at 35% 67%, rgba(255,255,255,.45) 0 1px, transparent 2px), #102653; border: 1px solid #294b87; border-radius: 1rem; box-shadow: 0 10px 24px rgba(19, 47, 105, .2); } .rocket-race-title { margin: 0; color: inherit; font-size: 1rem; } .own-race-score { margin: .15rem 0 .45rem; color: #dbeaff; font-size: .86rem; font-weight: 800; } .rocket-track { position: relative; height: 13.8rem; border-top: 1px solid rgba(202, 224, 255, .45); border-bottom: 1px solid rgba(202, 224, 255, .45); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(20% - 1px), rgba(202, 224, 255, .22) calc(20% - 1px), rgba(202, 224, 255, .22) 20%); } .rocket-start, .rocket-finish { position: absolute; left: .15rem; color: #b7cbed; font-size: .65rem; font-weight: 800; } .rocket-start { bottom: .12rem; } .rocket-finish { top: .12rem; } .rocket { position: absolute; z-index: 1; width: 1.5rem; transform: translateX(-50%); will-change: bottom; } .rocket svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); } .rocket-body { fill: #9caecc; } .rocket-window { fill: #dce9ff; } .rocket-fin { fill: #7084a9; } .rocket-flame { fill: #ef9c42; } .other-rocket { opacity: .62; } .own-rocket { z-index: 2; width: 2.2rem; opacity: 1; filter: drop-shadow(0 0 7px rgba(102, 220, 255, .9)); } .own-rocket .rocket-body { fill: #4ed4ff; } .own-rocket .rocket-fin { fill: #3177d2; } .own-rocket .rocket-window { fill: #f5fcff; } .rocket-you { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: .62rem; font-weight: 900; text-shadow: 0 1px 2px #102653; } .rocket-moving { transition: bottom .6s ease-out; } @media (prefers-reduced-motion: reduce) { .rocket-moving { transition: none; } }
@media (max-width: 700px) { .game-layout.scoreboard-visible { grid-template-columns: minmax(0, 1fr); } .rocket-race { grid-column: 1; grid-row: 1; min-height: 10.5rem; padding: .65rem .75rem .45rem; } .game-layout.scoreboard-visible #phase-content { grid-row: 2; } .rocket-race-title { display: inline; font-size: .9rem; } .own-race-score { display: inline; margin-left: .55rem; font-size: .8rem; } .rocket-track { height: 6.8rem; margin-top: .4rem; } .rocket { width: 1rem; } .own-rocket { width: 1.55rem; } .rocket-you { top: -.85rem; font-size: .55rem; } }
@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; } }