/* Learning layer: every font-family below now ends in `Arial, sans-serif` so the page
 * still reads correctly if the Google Fonts request is blocked in the iframe.
 * Nothing else in this file changed. */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #7ec8ff; font-family: "Figtree", "Segoe UI", Arial, sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#labels.off { display: none; }
.label { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; pointer-events: none; }
.label .lvl { display: inline-block; font: 900 12px "Figtree", Arial, sans-serif; color: #fff; background: rgba(12, 14, 19, 0.55); padding: 1px 7px; border-radius: 8px; letter-spacing: 0.5px; }
.label .name { font: 800 15px "Figtree", Arial, sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 0 6px rgba(0,0,0,0.25); margin-top: 1px; }
.label .name.me { color: #ffe86b; }
.label .cap { display: inline-block; margin-top: 1px; font: 800 11px "Figtree", Arial, sans-serif; color: #fff; background: #0c0e13; border-radius: 10px; padding: 1px 8px 1px 6px; }
.label .cap i { display: inline-block; width: 22px; height: 6px; border-radius: 3px; background: #62656e; vertical-align: middle; margin-right: 5px; overflow: hidden; }
.label .cap i b { display: block; height: 100%; background: #ffc53d; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud[hidden] { display: none; }
.hud-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; }
.pill { display: flex; align-items: center; gap: 6px; background: rgba(12, 14, 19, 0.72); color: #fff; font: 900 22px "Figtree", Arial, sans-serif; padding: 6px 14px; border-radius: 14px; box-shadow: 0 3px 0 rgba(0,0,0,0.25); }
.pill.timer .clock { font-size: 18px; }
.pill.timer.urgent { color: #ff5c5c; }
.pill.kills { margin-left: auto; }
.progress { position: relative; flex: 1; max-width: 420px; height: 24px; margin: 0 auto; background: rgba(12, 14, 19, 0.6); border-radius: 12px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,0.3); }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(#ffe06b, #ffc21f); border-radius: 12px; transition: width .25s; }
.progress span { position: absolute; inset: 0; text-align: center; line-height: 24px; font: 900 14px "Figtree", Arial, sans-serif; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.board { position: absolute; top: 58px; right: 12px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.board li { font: 800 14px "Figtree", Arial, sans-serif; color: #fff; background: rgba(12, 14, 19, 0.62); padding: 4px 10px 4px 8px; border-radius: 10px; display: flex; align-items: center; gap: 7px; }
.board li i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.board li.me { background: rgba(255, 214, 63, 0.9); color: #0c0e13; }
.callout { paint-order: stroke fill; position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%) scale(0); font: 900 44px "Baloo 2", "Figtree", Arial, sans-serif; color: #fff; -webkit-text-stroke: 2px #0c0e13; text-shadow: 0 5px 0 rgba(0,0,0,0.3); letter-spacing: 1px; white-space: nowrap; }
.callout.show { animation: pop 1.4s ease-out forwards; }
.callout.gold { color: #ffc53d; }
.callout.pink { color: #ff5c8a; }
.callout.green { color: #8cff5c; }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 15% { transform: translate(-50%, -50%) scale(1.15); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }
.countdown { paint-order: stroke fill; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 900 84px "Baloo 2", "Figtree", Arial, sans-serif; color: #fff; -webkit-text-stroke: 3px #0c0e13; text-shadow: 0 6px 0 rgba(0,0,0,0.3); }
.countdown small { display: block; font-size: 26px; -webkit-text-stroke: 1px #0c0e13; margin-bottom: -20px; }
.hint { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); font: 800 18px "Figtree", Arial, sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35); opacity: 0.95; transition: opacity .5s; }
.hint.fade { opacity: 0; }

#corner { position: fixed; left: 10px; bottom: 10px; display: flex; gap: 8px; z-index: 20; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; font-size: 22px; line-height: 44px; padding: 0; background: rgba(255,255,255,0.8); box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
.icon-btn:active { transform: translateY(2px); box-shadow: none; }
.icon-btn[hidden] { display: none; }

/* screens */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; background: linear-gradient(rgba(25, 30, 80, 0.15), rgba(25, 30, 80, 0.45)); overflow-y: auto; overscroll-behavior: contain; }
/* margin:auto rather than relying on align-items:center alone. In a scrolling
   flex container, centred content that overflows gets clipped at the TOP with
   no way to scroll back up to it. margin:auto centres when there is room and
   keeps both ends reachable when there is not. */
.menu-inner { margin: auto; }
.screen.hidden { display: none; }
.menu-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.logo { width: min(440px, 70vw); filter: drop-shadow(0 8px 0 rgba(0,0,0,0.25)); }
.logo-text { paint-order: stroke fill; font: 900 clamp(44px, 8vw, 88px)/1 "Baloo 2", Arial, sans-serif; color: #ffffff; -webkit-text-stroke: 3px #0c0e13; text-shadow: 0 7px 0 #0c0e13, 0 12px 24px rgba(12,14,19,.28); letter-spacing: -3px; white-space: nowrap; }
.office-eyebrow { color: #ffd5d1; font: 900 11px "Figtree", Arial, sans-serif; letter-spacing: 3px; text-shadow: 0 2px 8px #0c0e13; }
.office-tagline { color: #ffffff; font: 800 15px "Figtree", Arial, sans-serif; text-shadow: 0 2px 6px #0c0e13; margin: 0 0 7px; }
.logo-text span { margin-left: 8px; }
#menu { background: linear-gradient(145deg, rgba(29,41,92,.24), rgba(38,56,118,.06) 50%, rgba(29,41,92,.32)); }
#menu .menu-inner { gap: 18px; }
.skin { position: relative; background: radial-gradient(circle at 50% 30%, #191b1f 0 13%, transparent 15%), radial-gradient(circle, #ffffff 0 56%, var(--c) 57% 67%, #191b1f 69%); }
.skin::after { content: ''; position: absolute; width: 18px; height: 5px; border-radius: 4px; background: #191b1f; top: 24px; left: 11px; }
.controls-hint { max-width: 650px; line-height: 1.5; }
.logo-text span { color: #ffc53d; }
#nick { font: 800 22px "Figtree", Arial, sans-serif; padding: 10px 16px; width: 280px; text-align: center; border: 0; border-radius: 14px; background: rgba(12, 14, 19, 0.7); color: #fff; outline: none; }
#nick::placeholder { color: rgba(255,255,255,0.55); }
.skins-title { font: 900 14px "Figtree", Arial, sans-serif; color: #fff; letter-spacing: 2px; margin-bottom: 8px; text-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.skin-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 360px; }
.skin { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 0 3px transparent, 0 4px 0 rgba(0,0,0,0.3); cursor: pointer; transition: transform .1s; }
.skin.sel { box-shadow: 0 0 0 3px #fff, 0 4px 0 rgba(0,0,0,0.3); transform: scale(1.12); }
.skin:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.btn-play { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; border: 0; cursor: pointer; background: #0c0e13; color: #fff; font: 900 34px "Baloo 2", "Figtree", Arial, sans-serif; box-shadow: 0 4px 0 #62656e; transition: transform .08s, background .1s; }
.btn-play small { font: 800 13px "Figtree", Arial, sans-serif; color: #d5d6da; }
.btn-play:hover { background: #ff7366; color: #0c0e13; }
.btn-play:hover small { color: #191b1f; }
.btn-play:active { transform: translateY(4px); box-shadow: none; }
.controls-hint { color: #fff; font-weight: 800; font-size: 14px; text-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.result-title { paint-order: stroke fill; font: 900 44px "Baloo 2", Arial, sans-serif; color: #fff; -webkit-text-stroke: 2px #0c0e13; text-shadow: 0 6px 0 rgba(0,0,0,0.25); }
.result-rank { paint-order: stroke fill; font: 900 96px "Baloo 2", Arial, sans-serif; color: #ffc53d; -webkit-text-stroke: 3px #0c0e13; text-shadow: 0 8px 0 rgba(0,0,0,0.25); line-height: 1; }
.result-stats { display: flex; gap: 22px; background: rgba(12, 14, 19, 0.7); padding: 12px 22px; border-radius: 16px; color: #fff; }
.result-stats div { display: flex; flex-direction: column; align-items: center; }
.result-stats span { font: 800 11px "Figtree", Arial, sans-serif; letter-spacing: 1px; opacity: 0.75; }
.result-stats b { font: 900 26px "Figtree", Arial, sans-serif; }
.result-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.result-board li { display: flex; gap: 10px; align-items: center; font: 800 15px "Figtree", Arial, sans-serif; color: #fff; background: rgba(12, 14, 19, 0.6); padding: 5px 12px; border-radius: 10px; }
.result-board li.me { background: rgba(255, 214, 63, 0.9); color: #0c0e13; }
.result-board li i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.result-board li b { margin-left: auto; }


/* ---------- SHORT SCREENS (2026-09-13) ----------
   Rachel, on a phone: "the play again at the end gets hidden again, and if I
   didn't know, I wouldn't find it."
   Measured: the results screen is 749px of content. A phone at 844px just
   fits it, but a real browser has an address bar, so the usable height is
   nearer 690px and PLAY AGAIN sits at 731px, entirely off screen. It could be
   scrolled to, which is no help at all if nothing tells you there is more.
   So on a short viewport the results compress until the button fits: the rank
   numeral and title come down, the gaps tighten, the leaderboard gets its own
   capped scroll instead of pushing the button off the bottom, and the button
   itself shrinks. Nothing is removed. */
@media (max-height: 780px) {
  .menu-inner { gap: 10px; }
  .result-title { font-size: 30px; }
  .result-rank { font-size: 54px; }
  .result-stats { gap: 14px; padding: 8px 14px; }
  .result-stats b { font-size: 19px; }
  .result-board { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; }
  .result-board li { font-size: 13px; padding: 3px 10px; }
  .btn-play { width: 118px; height: 118px; font-size: 26px; }
  .btn-play small { font-size: 11px; }
}
@media (max-height: 620px) {
  .result-rank { font-size: 40px; }
  .result-title { font-size: 24px; }
  .result-board { max-height: 90px; }
  .btn-play { width: 104px; height: 104px; font-size: 22px; }
}

/* Landscape on a phone is the worst case: ~390px of height for a title, a
   rank, four stats, a leaderboard and a button. The rank numeral is SHRUNK
   rather than hidden, because outside the Academy launcher it is the only
   place the rank appears. */
@media (max-height: 460px) {
  .menu-inner { gap: 7px; }
  .result-title { font-size: 20px; }
  .result-rank { font-size: 28px; }
  .result-stats { gap: 10px; padding: 6px 10px; }
  .result-stats b { font-size: 16px; }
  .result-stats span { font-size: 9px; }
  .result-board { max-height: 64px; }
  .btn-play { width: 88px; height: 88px; font-size: 19px; }
  .btn-play small { font-size: 10px; }
}