.app-shell { display: flex; flex-direction: column; overflow: clip; }
.screen { min-height: 0; flex: 1; }
.landing-screen .hero-logo { max-height: 30svh; }
.competition-lobby, .competition-results, .leaderboard-screen { gap: 18px; }
.competition-lobby .screen-header { display: flex; gap: 14px; margin: 2px 0 0; text-align: left; }
.competition-lobby h1, .competition-results h1, .competition-lobby h2, .competition-results h2 { margin: 0; color: var(--brand-deep); font-size: var(--type-heading-size); line-height: 1.2; font-weight: var(--type-heading-weight); }
.competition-lobby .screen-header p { margin: 4px 0 0; color: var(--muted); }
.competition-intro { padding: 24px 18px; border: 1px solid #dcd1f4; border-radius: 24px; background: radial-gradient(ellipse at top right, #d8f8f5, transparent 65%), #f6f0ff; text-align: center; }
.competition-eyebrow { display: block; color: var(--fact-700); font-weight: var(--type-heading-weight); letter-spacing: .05em; margin: 4px 0; }
.competition-start-time { display: block; margin: 20px 0 10px; font-size: var(--type-display-size); line-height: 1; font-weight: var(--type-display-weight); color: var(--brand-deep); }
.competition-start-time span { font-size: var(--type-heading-size); }
.competition-intro p { margin: 10px 0 0; }
.competition-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.competition-rewards span { padding: 12px 6px; border-radius: 12px; color: #116844; background: #def6e9; }
.competition-rewards span + span { color: #ae2339; background: #ffe4e9; }
.competition-note { color: var(--muted); margin: 0; line-height: 1.5; }
.leaderboard-header { display: grid; grid-template-columns: 42px 1fr auto; gap: 6px; align-items: center; color: var(--brand-purple); }
.leaderboard-header > span { font-weight: var(--type-heading-weight); }
.leaderboard-header .text-button { padding-inline: 4px; min-height: 44px; }
.leaderboard-hero { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 8px; padding: 26px 18px 24px; border: 1px solid #d8c9f2; border-radius: 26px; background: radial-gradient(ellipse at 80% 0, #c7f9f1, transparent 65%), linear-gradient(150deg, #f4ebff, #fff); text-align: center; }
.leaderboard-emblem { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid #decaf8; border-radius: 25px; color: var(--brand-purple); background: #fff9; box-shadow: 0 8px 24px #6824ca15; transform: rotate(-6deg); }
.leaderboard-emblem svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: rotate(6deg); }
.leaderboard-hero h1 { margin: 8px 0 0; color: var(--brand-deep); font-size: var(--type-display-size); line-height: 1; font-weight: var(--type-display-weight); }
.leaderboard-hero p { margin: 0; color: var(--brand-purple); font-size: var(--type-heading-size); font-weight: var(--type-heading-weight); }
.leaderboard-caption { text-align: center; }
.leaderboard-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.leaderboard-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px 10px; align-items: center; padding: 16px 12px; border: 1px solid #e4dcec; border-radius: 18px; background: #fff; box-shadow: 0 4px 12px #30154d06; }
.leaderboard-rank { display: grid; place-items: center; grid-row: 1 / 3; align-self: start; min-height: 38px; border-radius: 12px; color: var(--brand-purple); background: #f2eafa; font-weight: var(--type-heading-weight); font-variant-numeric: tabular-nums; }
.leaderboard-entry--1 { background: linear-gradient(110deg, #fff9e9, #fff 72%); border-color: #e9d596; }
.leaderboard-entry--1 .leaderboard-rank { color: #755100; background: linear-gradient(135deg, #ffeb9c, #f5cf63); }
.leaderboard-entry--2 .leaderboard-rank { color: #515b73; background: #e7ebf3; }
.leaderboard-entry--3 .leaderboard-rank { color: #94562d; background: #f8e6d8; }
.leaderboard-entry.is-own { border-color: #80cdbb; box-shadow: 0 0 0 2px #c4eee344; }
.leaderboard-player { min-width: 0; }
.leaderboard-handle { display: block; color: var(--brand-deep); font-weight: var(--type-heading-weight); overflow-wrap: anywhere; text-decoration: none; }
.leaderboard-handle:hover { text-decoration: underline; }
.leaderboard-points { display: flex; flex-direction: column; align-items: flex-end; color: var(--muted); font-variant-numeric: tabular-nums; }
.leaderboard-points strong { color: var(--brand-purple); font-size: var(--type-heading-size); font-weight: var(--type-display-weight); }
.leaderboard-metrics { display: flex; grid-column: 2 / -1; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); }
.leaderboard-metrics strong { color: var(--brand-deep); font-weight: var(--type-heading-weight); font-variant-numeric: tabular-nums; }
.leaderboard-empty { border: 1px dashed #c8bfda; border-radius: 18px; padding: 28px 18px; color: var(--muted); background: #fbf8ff; text-align: center; }
.leaderboard-empty strong { color: var(--brand-deep); font-size: var(--type-heading-size); font-weight: var(--type-heading-weight); }
.leaderboard-empty p { margin: 10px 0 0; }
.competition-error, .competition-network, .highscore-form .is-error { color: #a81930; }
.competition-hud { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.competition-score { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.competition-score strong { color: var(--brand-deep); font-size: var(--type-heading-size); font-weight: var(--type-display-weight); font-variant-numeric: tabular-nums; }
.competition-clock { display: flex; min-width: 90px; flex-direction: column; gap: 1px; border-radius: 16px; padding: 8px 12px; color: var(--fact-700); background: #dcf6f2; text-align: center; }
.competition-clock strong { font-size: var(--type-heading-size); font-weight: var(--type-display-weight); font-variant-numeric: tabular-nums; }
.competition-clock.is-urgent { color: #bd1c35; background: #ffe2e8; }
.competition-time-track { height: 5px; margin: 14px 3px 10px; border-radius: 99px; overflow: hidden; background: var(--line); }
.competition-time-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-violet), var(--fact-500)); }
.competition-counter { display: flex; justify-content: space-between; margin: 0 4px 12px; color: var(--muted); }
.competition-card-stage { position: relative; display: flex; flex: 1; min-height: 380px; }
.competition-card { position: relative; inset: auto; width: 100%; padding: 55px 20px 20px; touch-action: pan-y; }
.competition-game .answer-controls { position: sticky; bottom: 0; z-index: 3; margin-top: 12px; padding-block: 6px; background: #fcfbff; }
.competition-card .subtopic-icon { width: min(210px, 58vw); height: min(210px, 58vw); border-radius: 40px; }
.competition-card h1 { margin: 0; color: var(--brand-deep); font-size: var(--type-heading-size); line-height: 1.2; font-weight: var(--type-heading-weight); text-align: center; overflow-wrap: anywhere; }
.competition-feedback { grid-column: 2 / -1; min-height: 20px; text-align: left; margin: 0; color: var(--muted); line-height: 1.4; }
.competition-feedback.is-correct { color: #148044; }
.competition-feedback.is-wrong { color: #c91d35; }
.competition-network { margin-top: 12px; border: 1px solid #ffbbc6; border-radius: 14px; padding: 12px; background: #fff0f2; }
.competition-results { text-align: center; }
.competition-final-score { margin: 4px 0 -16px; color: var(--brand-purple); font-size: var(--type-display-size); font-weight: var(--type-display-weight); }
.competition-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.competition-result-stats div { display: flex; flex-direction: column; padding: 16px 6px; gap: 5px; border-radius: 16px; background: #f3effa; color: var(--muted); }
.competition-result-stats strong { font-size: var(--type-heading-size); color: var(--brand-deep); font-weight: var(--type-heading-weight); }
.highscore-form { display: grid; gap: 14px; border: 1px solid #b2e1d3; border-radius: 22px; padding: 20px 16px; background: #f2fffa; text-align: left; }
.highscore-form label { font-weight: var(--type-heading-weight); }
.instagram-input { display: flex; align-items: center; border: 1px solid #b3abc6; border-radius: 12px; padding: 0 12px; background: #fff; }
.instagram-input > span { color: var(--muted); font-size: var(--type-heading-size); }
.instagram-input input { min-width: 0; width: 100%; border: 0; padding: 14px 8px; border-radius: 12px; font: inherit; font-size: var(--type-heading-size); color: var(--ink); }
.instagram-input:focus-within { outline: 3px solid #0eb5b866; }
.highscore-consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.highscore-consent input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--fact-700); }
.highscore-form .text-button { justify-self: center; }
.competition-result-message { margin: 0; color: var(--fact-700); }
.competition-review { text-align: left; border-top: 1px solid var(--line); padding-top: 16px; }
.competition-review summary { cursor: pointer; padding: 10px 0; color: var(--brand-purple); }
.competition-review article { padding: 16px 0; border-bottom: 1px solid var(--line); }
.competition-review article h3 { color: var(--brand-deep); font-size: var(--type-body-size); font-weight: var(--type-heading-weight); }
.competition-review a { color: var(--fact-700); overflow-wrap: anywhere; }
@media (min-width: 640px) { .screen { min-height: 0; } }
@media (max-height: 740px) { .competition-card-stage { min-height: 355px; } .competition-card .subtopic-icon { width: 160px; height: 160px; border-radius: 32px; } .competition-card { padding-top: 49px; } }
@media (max-height: 640px) { .competition-card-stage { min-height: 280px; } .competition-card .subtopic-icon { width: 100px; height: 100px; border-radius: 22px; } .competition-card { padding-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .competition-card { transition: none; } }