/* SKguessr 1.1.0 – the gameplay shell. Bootstrap remains the base UI library.
   This new physical filename also avoids stale browser/CDN stylesheet caches. */
.game-hud { display:flex; align-items:center; gap:26px; flex:1; min-width:0; }
.hud-stat { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hud-caption { display:block; color:#a5b9aa; font-size:9px; line-height:1.3; font-weight:750; letter-spacing:.12em; white-space:nowrap; }
.hud-stat strong { font-size:19px; line-height:1.25; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hud-map { flex:1; padding-left:26px; border-left:1px solid #ffffff24; }
.hud-map strong { font-size:16px; overflow:hidden; text-overflow:ellipsis; max-width:290px; }
.hud-score strong { color:#d6ef97; }
.hud-round { min-width:56px; }
.hud-clock { min-width:80px; }
.game-hud .timer { color:#f7f9ee; font-size:25px; letter-spacing:.015em; padding:0; min-width:0; border:0; border-radius:0; background:transparent; text-align:left; line-height:1.1; }
.game-hud .timer.urgent { color:#ffa585; background:transparent; border:0; }
.hud-standings { display:flex; align-items:flex-start; flex-direction:column; gap:4px; background:transparent; border:0; border-radius:8px; padding:8px 10px; margin:-8px -10px; color:#f4f7ec; text-align:left; }
.hud-standings strong { font-size:13px; white-space:nowrap; font-weight:650; }
.hud-standings:hover, .hud-standings[aria-expanded="true"] { background:#ffffff10; }
.hud-room { padding-left:20px; border-left:1px solid #ffffff24; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.hud-code { border:0; background:transparent; padding:0; font:700 12px ui-monospace,monospace; letter-spacing:.08em; color:#e4ebdf; }
.hud-connection { font-size:9px; white-space:nowrap; color:#b5c6b7; }
.hud-connection::before { content:""; display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#b6dc74; vertical-align:1px; }
.hud-connection.offline { color:#ffbf99; }
.hud-connection.offline::before { background:#ffad76; }
.hud-icon { display:grid; place-items:center; color:#dae5d7; border:1px solid #ffffff24; background:transparent; border-radius:9px; width:36px; height:36px; flex:none; font-size:21px; line-height:1; }
.hud-icon:hover { background:#ffffff10; color:#fff; }
html.game-active, body.game-active { height:100%; width:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
.game-active .site-header { position:fixed; inset:0 0 auto; padding:14px 0; border-bottom:1px solid #304b3e; background:#142c23; color:#f5f7ee; z-index:100; box-shadow:0 3px 15px #00000016; }
.game-active #header-inner { max-width:none; padding:0 24px; gap:28px !important; min-height:42px; }
.game-active .brand { color:#f4f7ed; font-size:26px; flex:none; }
.game-active .brand-light { color:#f4f7ed; }
.game-active .brand-pin { border-color:#d6ef97; width:24px; height:24px; border-width:6px; }
.game-active .brand-dot { color:#d6ef97; }
.game-active #main { position:fixed; inset:var(--game-header-height,72px) 0 0; min-height:0; padding:0; overflow:hidden; }
.game-active .room-page { width:100%; max-width:none; height:100%; min-height:0; padding:0; margin:0; }
.game-active .room-top, .game-active .site-footer, .game-active #site-nav { display:none !important; }
.game-active #playing { position:absolute; inset:0; margin:0; overflow:hidden; background:#142c23; }
.game-active .panorama-stage { position:absolute; inset:0; width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:0; }
.game-active .panorama-stage > iframe { width:100%; height:100%; min-height:0; min-width:0; }
.game-active .pano-consent { z-index:8; }
.panorama-tools { position:absolute; top:18px; left:20px; z-index:12; display:flex; gap:7px; }
.arena-button { height:41px; min-width:41px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; color:#f5f8ef; background:#162e25ee; border:1px solid #ffffff30; border-radius:10px; font-size:12px; font-weight:650; box-shadow:0 3px 10px #0002; backdrop-filter:blur(10px); }
.arena-button > span:first-child { font-size:20px; font-weight:500; line-height:1; }
.arena-icon { padding:0; font-size:21px; }
.arena-button:hover { background:#284838; }
.arena-button:disabled { opacity:.5; cursor:not-allowed; }
.arena-notice { position:absolute; z-index:13; top:68px; left:20px; max-width:360px; padding:12px 15px; border:1px solid #ffffff44; background:#fcf6e9ed; color:#624a2a; font-size:12px; border-radius:10px; box-shadow:0 4px 20px #0002; }
.guess-wait { position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:11; max-width:calc(100% - 40px); padding:12px 19px; border-radius:24px; background:#d6ef97f2; color:#203d26; box-shadow:0 4px 20px #0002; font-size:12px; font-weight:650; text-align:center; }
/* Keep Google controls on the right and provider attribution at the bottom unobscured. */
.guess-dock { position:absolute; right:max(92px,calc(72px + env(safe-area-inset-right))); bottom:max(40px,env(safe-area-inset-bottom)); z-index:20; width:380px; max-width:calc(100% - 112px); max-height:calc(100% - 78px); display:flex; flex-direction:column; min-height:0; background:#f9fbf2; border:1px solid #ffffffb0; border-radius:15px; box-shadow:0 10px 48px #0005,0 2px 5px #0002; overflow:hidden; }
.guess-dock.is-expanded { width:760px; }
.guess-dock.is-collapsed { width:282px; }
.guess-dock-header { display:flex; align-items:center; justify-content:space-between; min-height:48px; flex:none; padding:0 9px 0 14px; background:#193c2d; color:#f4f7ec; }
.map-toggle { display:flex; flex:1; min-width:0; align-items:center; gap:8px; background:transparent; border:0; text-align:left; padding:10px 8px 10px 0; font-size:12px; font-weight:700; color:inherit; }
.map-fold-icon { font-size:24px; font-weight:500; line-height:1; color:#d6ef97; }
#map-toggle-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#map-toggle-arrow { margin-left:auto; font-size:20px; font-weight:400; line-height:1; color:#bdd0ba; }
.dock-header-actions { display:flex; align-items:center; gap:3px; }
.dock-icon { border:0; background:transparent; color:#e4eeda; padding:0; width:31px; height:32px; border-radius:7px; display:grid; place-items:center; font-size:22px; line-height:1; }
.dock-icon:hover { background:#ffffff15; }
#guess-panel-content { display:flex; flex-direction:column; min-height:0; }
.game-active #guess-map { height:clamp(190px,30dvh,285px); min-height:100px; flex:1 1 auto; border-bottom:1px solid #dde5d2; }
.game-active .is-expanded #guess-map { height:clamp(220px,57dvh,590px); }
.guess-dock-bottom { flex:none; padding:12px; }
.guess-hint { color:#64705f; font-size:11px; line-height:1.5; margin-bottom:9px; min-height:16px; }
.guess-dock .btn-primary { --bs-btn-bg:#d6ef97; --bs-btn-border-color:#d6ef97; --bs-btn-color:#183621; --bs-btn-hover-bg:#c4e580; --bs-btn-hover-border-color:#c4e580; --bs-btn-hover-color:#132e1b; --bs-btn-active-bg:#bedc7b; --bs-btn-active-border-color:#bedc7b; --bs-btn-active-color:#132e1b; --bs-btn-disabled-bg:#e1e7d5; --bs-btn-disabled-border-color:#e1e7d5; --bs-btn-disabled-color:#707b65; --bs-btn-disabled-opacity:1; font-weight:800; padding:12px; border-radius:8px; font-size:14px; }
.game-active .map-attribution { font-size:9px; line-height:1.5; }
.standings-panel { position:fixed; top:calc(var(--game-header-height,72px) + 12px); right:20px; z-index:150; width:345px; max-width:calc(100% - 32px); max-height:calc(100dvh - var(--game-header-height,72px) - 32px); padding:19px; border:1px solid #dbe3d2; border-radius:15px; background:#f8faef; box-shadow:0 10px 50px #0004; overflow:auto; }
.standings-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid #dfe7d4; }
.standings-heading h2 { font-size:19px; margin:6px 0 0; }
.standings-heading .eyebrow { font-size:8px; }
.standings-footnote { font-size:10px; color:#72816c; margin:15px 0 0; }
.game-active #results { position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; padding:28px max(24px,calc((100% - 1400px)/2)) 42px; background:#f5f5ed; }
.game-active #results .game-bar { margin-bottom:18px; }
.game-active #results .game-bar h2 { margin:8px 0 0; }
.round-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:23px; padding:22px 26px; background:#193c2d; border-radius:15px; color:#f4f7ed; }
.round-summary.has-location { grid-template-columns:1fr 1fr 1.8fr; }
.round-summary > div { display:flex; flex-direction:column; gap:7px; }
.round-summary > div + div { border-left:1px solid #ffffff26; padding-left:24px; }
.round-summary span { font-size:9px; letter-spacing:.12em; font-weight:700; color:#a9c1a6; }
.round-summary strong { font-size:27px; line-height:1.2; font-variant-numeric:tabular-nums; }
.round-summary small { font-size:13px; font-weight:500; color:#a9c1a6; }
.round-summary .summary-location strong { font-size:17px; line-height:1.4; }
.game-active .result-map { height:clamp(270px,42dvh,470px); }
.game-active .toast-container { z-index:1090; }
@media (max-width:1199px) {
  .game-hud { gap:19px; }
  .game-active #header-inner { padding:0 18px; gap:20px !important; }
  .hud-map { padding-left:18px; }
  .hud-room { display:none; }
}
@media (max-width:850px) {
  .game-hud { gap:14px; }
  .hud-map { padding-left:13px; }
  .hud-map strong { font-size:13px; max-width:180px; }
  .hud-stat strong { font-size:17px; }
  .game-active .brand { font-size:23px; gap:9px; }
  .game-active .brand-pin { width:21px; height:21px; border-width:5px; }
  .game-hud .timer { font-size:23px; }
  .hud-clock { min-width:65px; }
  .hud-standings strong { font-size:11px; }
  .game-active #header-inner { gap:16px !important; }
  .guess-wait { top:69px; font-size:11px; padding:10px 14px; }
}
@media (max-width:640px) {
  .game-active .site-header { padding:11px 0 10px; }
  .game-active #header-inner { display:grid !important; grid-template-columns:minmax(0,1fr) auto auto 30px; gap:10px 15px !important; min-height:0; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); }
  .game-hud { display:contents; }
  .game-active .brand { grid-row:1; grid-column:1; font-size:23px; }
  .hud-score { grid-row:1; grid-column:2; }
  .hud-standings { grid-row:1; grid-column:3; padding:4px; margin:-4px; }
  .hud-icon { grid-row:1; grid-column:4; width:30px; height:32px; }
  .hud-map { grid-row:2; grid-column:1; padding:0; border:0; }
  .hud-round { grid-row:2; grid-column:2; min-width:0; }
  .hud-clock { grid-row:2; grid-column:3 / 5; min-width:0; }
  .hud-caption { font-size:8px; letter-spacing:.07em; }
  .hud-stat { gap:2px; }
  .hud-score strong { font-size:16px; }
  .hud-map strong { font-size:13px; max-width:100%; }
  .hud-round strong { font-size:17px; }
  .hud-clock { flex-direction:row; align-items:center; justify-content:space-between; gap:7px; }
  .game-hud .timer { font-size:23px; }
  .game-active #main { bottom:0; }
  .panorama-tools { top:12px; left:12px; gap:6px; }
  .arena-button { height:36px; min-width:36px; font-size:11px; padding:0 10px; border-radius:8px; }
  .arena-icon { padding:0; font-size:19px; }
  .arena-notice { top:58px; left:12px; max-width:calc(100% - 24px); font-size:11px; }
  .guess-wait { top:60px; width:max-content; max-width:calc(100% - 24px); padding:9px 14px; }
  .guess-dock { right:max(64px,calc(52px + env(safe-area-inset-right))); bottom:max(38px,env(safe-area-inset-bottom)); width:calc(100% - 76px); max-width:calc(100% - 76px); max-height:calc(100% - 68px); border-radius:12px; }
  .guess-dock.is-collapsed { width:260px; }
  .guess-dock.is-expanded { width:calc(100% - 76px); }
  .game-active #guess-map { height:clamp(175px,29dvh,275px); }
  .game-active .is-expanded #guess-map { height:clamp(230px,52dvh,540px); }
  .guess-dock-header { min-height:45px; }
  .guess-dock-bottom { padding:10px; }
  .guess-hint { font-size:10px; margin-bottom:7px; }
  .guess-dock .btn-primary { padding:11px; }
  .standings-panel { right:12px; width:330px; max-width:calc(100% - 24px); padding:16px; }
  .game-active #results { padding:19px 14px 32px; }
  .game-active #results .game-bar h2 { font-size:22px; }
  .game-active #results .game-bar > div:last-child { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .round-summary { grid-template-columns:1fr 1fr; gap:17px; padding:19px; }
  .round-summary strong { font-size:24px; }
  .round-summary > div + div { padding-left:17px; }
  .round-summary .summary-location { grid-column:1 / -1; padding:13px 0 0; border-left:0; border-top:1px solid #ffffff26; }
  .round-summary .summary-location strong { font-size:14px; }
  .game-active #answer-name { font-size:13px; }
  .game-active #history-select { max-width:160px; font-size:11px; }
}
@media (max-width:365px) {
  .game-active #header-inner { gap:10px 10px !important; padding-left:10px; padding-right:10px; }
  .game-active .brand { font-size:20px; gap:7px; }
  .hud-standings strong { font-size:10px; }
  .hud-caption { font-size:7px; }
  .hud-score strong { font-size:15px; }
  .game-hud .timer { font-size:22px; }
}
@media (max-height:500px) and (min-width:641px) {
  .game-active .site-header { padding:9px 0; }
  .game-active #header-inner { min-height:35px; }
  .game-active #guess-map { height:130px; min-height:80px; }
  .game-active .is-expanded #guess-map { height:190px; }
  .guess-dock { max-height:calc(100% - 49px); width:325px; }
  .guess-dock.is-expanded { width:520px; }
  .guess-dock-header { min-height:38px; }
  .guess-dock-bottom { padding:7px; }
  .guess-hint { display:none; }
  .guess-dock .btn-primary { padding:8px; font-size:12px; }
}