/* ===== Save Flight #304 game ===== */
@font-face { font-family: 'Montserrat'; font-weight: 700; src: url('fonts/montserrat-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 900; src: url('fonts/montserrat-latin-900-normal.woff2') format('woff2'); font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
[hidden] { display: none !important; }
.game { position: fixed; inset: 0; font-family: 'Montserrat', Arial, sans-serif; color: #111; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
.g-stage { position: absolute; inset: 0; }
.g-stage canvas { display: block; width: 100%; height: 100%; }
.g-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 14px; pointer-events: none; }
.g-top .home { pointer-events: auto; }
.g-hud { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.15); white-space: nowrap; }
.chip.warn { background: #d62828; color: #fff; animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.home { color: #e01b1b; font: italic 900 20px/1 'Montserrat', Arial, sans-serif; text-decoration: none; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 0 #000; white-space: nowrap; }
.alarm { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); background: #d62828; color: #fff; font-weight: 900; font-size: clamp(18px, 4vw, 28px); padding: 8px 20px; border-radius: 10px; letter-spacing: .06em; opacity: 0; pointer-events: none; transition: opacity .2s; }
.alarm.on { opacity: 1; animation: blink .6s steps(2) infinite; }
.plumber-msg { position: absolute; top: 120px; left: 50%; transform: translateX(-50%) scale(.9); background: #ffec00; font-weight: 900; padding: 10px 18px; border-radius: 12px; opacity: 0; transition: .25s; pointer-events: none; text-align: center; }
.plumber-msg.on { opacity: 1; transform: translateX(-50%) scale(1); }
.plunger { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer;
  background: #ffec00; color: #111; font: 900 18px 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 12px 22px 12px 14px; border-radius: 999px;
  box-shadow: 0 0 0 4px #111, 0 10px 30px rgba(0,0,0,.35); animation: pulse 1s ease-in-out infinite; }
.plunger svg { width: 44px; height: 44px; }
.plunger:disabled { background: #ddd; color: #666; animation: none; cursor: not-allowed; }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.g-hint { position: absolute; bottom: 10px; right: 12px; font-size: 12px; font-weight: 700; }
.g-hint a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,10,25,.45); }
.box { background: #fff; border-radius: 18px; max-width: 460px; width: 100%; padding: 26px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.box h1 { margin: 0 0 8px; font-weight: 900; font-size: 28px; }
.box p { margin: 0 0 12px; line-height: 1.5; }
.box .small { font-size: 13px; color: #555; }
.score { font-weight: 900; font-size: 46px; margin: 8px 0 2px; }
.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.gbtn { border: 0; border-radius: 10px; padding: 12px 22px; font: 900 15px 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; text-decoration: none; background: #0072ce; color: #fff; }
.gbtn.alt { background: #fff; color: #0072ce; box-shadow: inset 0 0 0 2px #0072ce; }
.monitor { background: #2b2d31; padding: 14px; border-radius: 10px; width: min(560px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.6); text-align: center; }
.screen { background: #1f20c9; color: #fff; padding: 34px 24px; font: bold clamp(20px, 3.4vw, 28px)/1.3 Arial, Helvetica, sans-serif; box-shadow: inset 0 0 40px rgba(0,0,0,.45); }
.monitor .btns { margin-top: 12px; }

/* legacy (2003) look for /old */
.game.old, .game.old .gbtn, .game.old .plunger, .game.old .chip { font-family: Verdana, Tahoma, sans-serif; }
.game.old .chip { border-radius: 2px; background: linear-gradient(#fff, #e3e9f3); border: 1px solid #8ea3c6; font-size: 11px; }
.game.old .box { border-radius: 0; border: 1px solid #5f7aa6; padding: 0 0 18px; }
.game.old .box h1 { background: linear-gradient(#3f6dbd, #1d438b); color: #fff; font: bold 15px Verdana, sans-serif; padding: 8px; margin-bottom: 14px; }
.game.old .box p { padding: 0 16px; font-size: 13px; }
.game.old .gbtn { border-radius: 3px; font-size: 12px; background: linear-gradient(#ff7b6e, #e02a20 50%, #c41712 51%, #d6231c); border: 1px solid #8e0f0f; }
.game.old .gbtn.alt { background: linear-gradient(#7aa2e6, #2f5fb5 50%, #1f4a98 51%, #2a57a8); color: #fff; box-shadow: none; border-color: #12306b; }
.game.old .plunger { border-radius: 4px; font-size: 14px; box-shadow: 0 0 0 2px #8b6d06, 0 8px 20px rgba(0,0,0,.35); background: linear-gradient(#fff38a, #ffd800); }
.game.old .home { font-style: normal; font-family: Arial, sans-serif; }
.game.old .chip.warn { background: #cc0000; color: #fff; border-color: #8e0f0f; }
@media (max-width: 600px) {
  .home { font-size: 14px; }
  .chip { font-size: 11px; padding: 4px 9px; }
  #hVs { display: none; }
  .g-hud { gap: 5px; max-width: 64%; }
  .plunger { font-size: 15px; bottom: 22px; }
  .alarm { top: 96px; }
}

.g-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.snd { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #111; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 3; }
.snd svg { width: 22px; height: 22px; }
.game.old .snd { border-radius: 3px; }
.credit { font-size: 11px; color: #777; margin-top: 12px !important; }
.credit a { color: #777; }
#startBtn:disabled { opacity: .7; cursor: wait; }

/* ===== polished main-site look (not /old) ===== */
.game:not(.old) .g-top { padding: 14px 16px; }
.game:not(.old) .g-hud { gap: 0; background: rgba(10,16,28,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.game:not(.old) .chip { background: none; box-shadow: none; border-radius: 0; color: #e9f1ff; font: 700 12px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; padding: 9px 14px; border-right: 1px solid rgba(255,255,255,.12); }
.game:not(.old) .chip:last-child { border-right: 0; }
.game:not(.old) #hAlt { color: #7ef0a6; font-size: 14px; }
.game:not(.old) .chip.warn { background: #d62828; color: #fff; animation: blink .6s steps(2) infinite; }
.game:not(.old) .home { font-size: 18px; }
.game:not(.old) .alarm { top: 72px; font-size: clamp(14px, 2.4vw, 18px); letter-spacing: .18em; padding: 7px 18px; border-radius: 8px; background: rgba(214,40,40,.92); box-shadow: 0 6px 20px rgba(214,40,40,.35); }
.game:not(.old) .plumber-msg { top: 118px; font-size: 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.game:not(.old) .ov { background: radial-gradient(ellipse at center, rgba(5,12,30,.25), rgba(5,12,30,.6)); }
.game:not(.old) .box { border-radius: 20px; padding: 0 0 22px; overflow: hidden; max-width: 440px; border: 0; animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.game:not(.old) .box h1 { background: #ffec00; margin: 0 0 16px; padding: 16px 20px 14px; font-size: 22px; letter-spacing: -.01em; }
.game:not(.old) .box p { padding: 0 24px; font-size: 14px; }
.game:not(.old) .box p.small { font-size: 12.5px; }
.game:not(.old) .score { font-size: 54px; letter-spacing: -.03em; }
.game:not(.old) .gbtn { border-radius: 12px; padding: 13px 24px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,114,206,.3); transition: transform .1s; }
.game:not(.old) .gbtn:active { transform: scale(.97); }
.game:not(.old) .gbtn.alt { box-shadow: inset 0 0 0 2px #0072ce; }
.game:not(.old) .plunger { bottom: 34px; padding: 10px 26px 10px 12px; font-size: 17px; box-shadow: 0 0 0 3px #111, 0 0 30px rgba(255,236,0,.55), 0 12px 30px rgba(0,0,0,.35); }
.game:not(.old) .plunger svg { width: 40px; height: 40px; background: #fff; border-radius: 50%; padding: 4px; }
.game:not(.old) .snd { background: rgba(10,16,28,.55); color: #fff; backdrop-filter: blur(6px); }
@media (max-width: 600px) {
  .game:not(.old) .chip { font-size: 10.5px; padding: 7px 9px; }
  .game:not(.old) #hAlt { font-size: 12px; }
  .game:not(.old) .g-hud { max-width: 70%; flex-wrap: wrap; }
}