.flag-game { margin-top: 48px; border: 1px solid #bdd1d5; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 13px 34px rgba(16,44,73,.08); }
.game-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 25px 26px 20px; }
.game-heading h2 { margin: 0 0 7px; }
.game-heading p { margin: 0; max-width: 610px; color: #456575; line-height: 1.5; }
.game-points-label { background: #e3f75a; color: #102c49; border-radius: 10px; padding: 9px 12px; font-weight: 800; font-size: .875rem; }
.game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 24px; background: #102c49; color: #fff; }
.game-score { display: flex; flex-wrap: wrap; gap: 24px; font-size: .9375rem; }
.game-score strong { margin-left: 8px; color: #e3f75a; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.flag-game button { min-height: 48px; border-radius: 12px; border: 2px solid transparent; padding: 11px 20px; font: inherit; font-weight: 800; cursor: pointer; }
.flag-game button:focus-visible, #game-canvas:focus-visible { outline: 3px solid #0069a6; outline-offset: -4px; }
.flag-game button:disabled { opacity: .6; cursor: default; }
#game-pause { background: transparent; border-color: #6f919f; color: #fff; font-size: .875rem; min-height: 44px; padding: 8px 14px; }
#game-pause:focus-visible { outline-color: #e3f75a; }
.game-stage { position: relative; height: clamp(300px, 42vw, 410px); background: #dff2f3; }
#game-canvas { display: block; width: 100%; height: 100%; }
.flag-game[data-phase="running"] #game-canvas { touch-action: none; }
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(16,44,73,.18); }
.game-overlay[hidden], .game-crash[hidden] { display: none; }
.game-start-card { width: min(100%, 430px); padding: 24px; border-radius: 18px; background: rgba(255,255,255,.97); text-align: center; box-shadow: 0 10px 35px rgba(16,44,73,.16); }
.game-badge { font-size: .75rem; color: #456575; font-weight: 800; letter-spacing: .05em; }
.game-start-card h3 { font-size: 1.65rem; letter-spacing: -.025em; margin: 9px 0; }
.game-start-card p { margin-bottom: 18px; line-height: 1.5; }
#game-start { background: #102c49; color: #fff; }
#game-start:hover:not(:disabled) { background: #245371; }
.game-crash { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: #fff; color: #98382d; font-weight: 800; text-align: center; box-shadow: 0 4px 18px rgba(16,44,73,.12); pointer-events: none; }
.game-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px 10px; }
.game-controls p { margin: 0; color: #456575; line-height: 1.7; font-size: .9375rem; }
.game-controls kbd { font: inherit; font-size: .8125rem; border: 1px solid #c8dbe0; border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; background: #f6fafb; }
#game-jump { min-width: 138px; min-height: 56px; background: #e3f75a; color: #102c49; border-color: #b8ce35; font-size: 1.125rem; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#game-jump:hover:not(:disabled) { background: #d4ed39; }
.game-status { margin: 0; padding: 6px 24px 22px; color: #456575; font-size: .875rem; line-height: 1.5; min-height: 3.5rem; }
.flag-game noscript p { padding: 0 24px 16px; }
@media (max-width: 560px) { .flag-game { margin-top: 34px; border-radius: 18px; } .game-heading { padding: 22px 18px 18px; } .game-toolbar { padding: 10px 16px; } .game-score { gap: 14px; } .game-stage { height: 320px; } .game-controls { gap: 10px; padding: 16px 16px 8px; } .game-status { padding: 6px 16px 20px; } #game-jump { min-width: 105px; padding: 12px 16px; } .game-start-card { padding: 20px 16px; } .game-start-card h3 { font-size: 1.4rem; } }