:root{
  --bg:#0b0b0f;
  --card:#0f1720;
  --accent:#ff6b6b;
  --muted:#9aa4b2;
  --spd:0.15s; /* default glitch bar speed: faster */
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Arial;background:linear-gradient(180deg,#05060a 0%, #0f1116 100%);color:#e6eef6;margin:0;min-height:100vh}
/* utility */
.hidden{display:none !important}
header{display:none}
.tag{display:none}
main{display:block;min-height:calc(100vh - 120px);position:relative}
#setup{display:none}
label{display:block;margin:10px 0;color:var(--muted)}
input,textarea{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
button{background:var(--accent);border:none;padding:10px 12px;border-radius:8px;color:#111;font-weight:600;cursor:pointer}
#game{min-height:500px;position:relative}
#map{position:fixed;inset:0;background:#222}
.controls{position:fixed;right:24px;top:24px;max-width:320px;background:rgba(0,0,0,0.45);padding:12px;border-radius:8px;z-index:60}
#status{color:var(--muted);margin-top:8px}
#reveal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,2,2,0.6);backdrop-filter:blur(2px);visibility:hidden;opacity:0;transition:opacity .4s, visibility .4s}
#reveal[aria-hidden="false"]{visibility:visible;opacity:1}
.reveal-inner{background:linear-gradient(180deg,#0b0b0f,#13151a);border:1px solid rgba(255,255,255,0.04);padding:24px;border-radius:12px;max-width:680px;width:90%;color:#e8f5ff}
.glitch{color:var(--accent);font-family:monospace;letter-spacing:0.4px}
.corrupt{mix-blend-mode:overlay}

/* small responsive */
@media(max-width:900px){
  main{grid-template-columns:1fr;}
  .controls{margin-left:0}
  html, body{ overflow-x:hidden; }
  /* Make prompt panel smaller on narrow screens */
  .prompt-panel{left:12px;right:12px;bottom:calc(12px + 50vh + 8px);max-width:220px;padding:4px 6px;font-size:11px;border-radius:6px}
  .prompt-panel #status{color:#e8f0fa; opacity: 1; font-weight:600; line-height:1.3; font-size:11px}
  .prompt-actions{ gap:4px }
  .prompt-actions .cta{ padding:6px 8px; font-size:11px; border-radius:6px }
  @media(max-width:420px){
    .prompt-panel{max-width:180px;padding:3px 6px;font-size:10px}
    .prompt-panel #status{font-size:10px}
    .prompt-actions .cta{padding:5px 6px;font-size:10px}
  }
  /* Minimap fills bottom half of the screen */
  #minimap{left:12px;right:12px;width:auto;max-width:calc(100vw - 24px);height:50vh;bottom:12px;transition:left .18s ease, right .18s ease, width .2s ease, height .2s ease}
  /* When user hovers to expand on mobile, force the minimap to the left edge and fill the viewport */
  #minimap:hover{height:52vh; left:0 !important; right:0 !important; width:100vw !important; max-width:100vw !important}
  #minimap.enlarged{left:0 !important; right:0 !important; width:100vw !important; max-width:100vw !important; height:56vh}
  #minimap .maplibregl-canvas{width:100% !important;height:100% !important}
  /* Prevent UI from blocking on narrow screens */
  .gg-bottom{display:none}
  /* Topbar: grid layout so logo has space and center stays centered */
  #gg-topbar{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; height:96px; padding-top: calc(env(safe-area-inset-top) + 0px); }
  #gg-topbar .left, #gg-topbar .center, #gg-topbar .right{ position: static; }
  #gg-topbar .center{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; padding-top: 8%; }
  #gg-topbar .language-selector{ position: static; }
  #gg-topbar .round{ white-space: nowrap; }
  #gg-topbar .timer{ margin-top:2px }
  #gg-topbar .logo-img{ height:44px; max-width:180px; width:auto; object-fit:contain }

  /* Main menu logo spacing tweak on mobile */
  #main-menu .menu-logo{ margin: 0 auto 10px 15% !important; }
}

/* GeoGuessr-like overlay */
#gg-overlay{position:fixed;left:24px;top:24px;color:#fff;z-index:70}
.gg-brand{font-weight:700;font-size:20px;letter-spacing:1px;background:rgba(0,0,0,0.5);display:inline-block;padding:6px 10px;border-radius:6px}
.gg-hint{margin-top:8px;background:rgba(255,255,255,0.04);display:inline-block;padding:6px 10px;border-radius:6px;color:var(--muted)}

/* viewer + mini-map layout */
#viewer{position:fixed;left:0;top:0;right:0;bottom:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:10}
#viewer img{max-width:100%;max-height:100%;object-fit:cover;filter:contrast(.9) saturate(.9)}
#viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.iframe-shield{position:fixed;top:0;right:0;width:220px;height:70px;z-index:900;background:transparent;pointer-events:none}
#minimap{position:fixed;left:24px;bottom:24px;width:300px;height:190px;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,0.06);z-index:80;background:#0b0b0f;transition:width .2s ease,height .2s ease, box-shadow .2s ease}
#minimap:hover{width:420px;height:280px;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
#minimap canvas, #minimap .leaflet-pane, #minimap .maplibregl-canvas{cursor:crosshair}
/* Locked state after submitting guess */
#minimap.locked{border-color: rgba(255,107,107,0.6)}
/* Enlarge on submit */
#minimap.enlarged{width:520px;height:340px;box-shadow:0 16px 40px rgba(0,0,0,0.55)}

/* Visual cue when guessing is disabled (round 2) */
#minimap.no-guess{ cursor: not-allowed; }
#minimap.no-guess::after{
  content: '';
  position: absolute;
  right: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.7);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.59 13.41L13.41 12l3.18-3.41L15.17 7 12 10.17 8.83 7 7.41 8.59 10.59 11 7.41 14.17 8.83 15.59 12 12.41 15.17 15.59 16.59 14.17z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.59 13.41L13.41 12l3.18-3.41L15.17 7 12 10.17 8.83 7 7.41 8.59 10.59 11 7.41 14.17 8.83 15.59 12 12.41 15.17 15.59 16.59 14.17z"/></svg>') center/contain no-repeat;
  border-radius: 4px;
  pointer-events: none;
}

/* Main menu */
#main-menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;}
#main-menu .language-selector{position:absolute; right:12px; top:12px; z-index:201;}
#main-menu::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('https://vemaps.com/uploads/img/large/wrld-08.jpg');
  background-size:cover; /* fill viewport */
  background-repeat:no-repeat;
  background-position:0% 40%;
  filter:contrast(1.15) saturate(1.15) brightness(0.7) hue-rotate(-8deg) blur(1.2px);
  animation:menu-pan 80s linear infinite alternate;
  will-change:background-position, filter;
}
#main-menu::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 20%, rgba(0,0,0,0.35), rgba(0,0,0,0.85));
}
#main-menu .menu-inner{background:linear-gradient(180deg,#0b0b0f,#13151a);border:1px solid rgba(255,255,255,0.06);padding:28px 24px;border-radius:14px;max-width:560px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
#main-menu .menu-inner{position:relative;z-index:1}
#main-menu .menu-logo{display:block;margin:0 auto 10px 20%;max-width:340px;width:80%;height:auto;border-radius:10px}
#main-menu .menu-sub{margin:0 0 18px;color:#cbd5e1}
#main-menu .cta{font-size:18px;padding:12px 18px;border-radius:10px}

@keyframes menu-pan{
  0%{ background-position: 0% 40%; }
  50%{ background-position: 50% 60%; }
  100%{ background-position: 100% 50%; }
}

/* Disable main menu background rendering */
#main-menu::before, #main-menu::after{ display:none !important; }

/* Top bar */
#gg-topbar{position:fixed;left:0;right:0;top:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(180deg,rgba(0,0,0,0.7),rgba(0,0,0,0));z-index:80;pointer-events:none}
#gg-topbar .left, #gg-topbar .center, #gg-topbar .right{display:flex;gap:10px;align-items:center;pointer-events:auto}
#gg-topbar .right{z-index:1100}
#gg-topbar .logo-img{height:44px;width:auto;border-radius:6px}
#gg-topbar .round{background:rgba(0,0,0,0.55);padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.06)}
#gg-topbar .timer{color:#ffd166;font-weight:800;display:inline-block;min-width:62px;text-align:center;transition:transform .2s ease}
#gg-topbar .timer.intense{color:#ff6b6b; text-shadow:0 0 10px rgba(255,107,107,0.6)}
.language-selector{display:flex;gap:4px;position:absolute; right:2px; top:8px; pointer-events:auto; z-index:1205}
.lang-toggle{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  width:65px;
  height:44px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.lang-toggle:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.7); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); }
.lang-toggle:focus{ outline:2px solid rgba(255,255,255,0.12); outline-offset:2px }
.lang-toggle .flag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lang-toggle .flag .fi{width:48px;height:40px}
/* Active visual state (English on top) */
.flag-diagonal.active{ box-shadow: 0 8px 26px rgba(0,0,0,0.7); }
/* reversed overlap: GB (over element) sits below, FI (under element) is clipped and displayed as the diagonal garnish */
.flag-diagonal .flag.over{ z-index: 0; }
.flag-diagonal .flag.under{ z-index: 1; clip-path: polygon(0 0, 100% 0, 0 100%);} /* triangle covering top and left */
/* when English is active, flip the clipped triangle to bottom-right on the under flag */
.flag-diagonal.active .flag.under{ clip-path: polygon(100% 0, 100% 100%, 0 100%); } /* triangle covering right and bottom */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* Bottom panel */
.gg-bottom{position:fixed;right:24px;bottom:24px;display:none;gap:12px;align-items:center;background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.06);padding:10px 12px;border-radius:10px;z-index:70}
.gg-bottom .cta{background:var(--accent);color:#111;font-weight:800;border:none;border-radius:8px;padding:10px 14px;cursor:pointer}
/* Secondary CTA (Continue): white text, transparent background, white outline */
.gg-bottom .cta.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.9)}
.prompt-actions .cta.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.9)}
/* Emphasize numeric distance value */
.distance-value{font-weight:800}

/* Prompt panel below minimap */
.prompt-panel{position:fixed;left:24px;bottom:calc(24px + 190px + 16px);max-width:300px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:8px;z-index:85;transition:bottom .25s ease;will-change:bottom}
.prompt-panel #status{color:var(--muted);margin:0;font-size:14px;line-height:1.4}
.prompt-actions{display:flex;gap:8px;margin-top:8px}

/* Loading screen */
#loading-screen{position:fixed;inset:0;background:#0b0b0f;display:flex;align-items:center;justify-content:center;z-index:100;transition:opacity .3s ease;}
#loading-screen.hidden{opacity:0;pointer-events:none}
.loader-card{width:320px;background:linear-gradient(180deg,#0b0b0f,#13151a);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,0.15);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:6px auto 12px}
.loader-text{text-align:center;color:#cbd5e1;margin-bottom:10px}
.skeleton-row{height:10px;background:linear-gradient(90deg,rgba(255,255,255,0.06),rgba(255,255,255,0.12),rgba(255,255,255,0.06));background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:6px;margin:8px 0}
.skeleton-row.w-60{width:60%;margin-left:auto;margin-right:auto}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Plain-text button utility (for minimal UI prompts) */
.plain-text-btn{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 10px 0 0;
  color: inherit;
  font-family: monospace;
  cursor: pointer;
  box-shadow: none !important;
  text-decoration: none;
}
.plain-text-btn:hover{ text-decoration: underline; }
.plain-text-btn:focus-visible{ text-decoration: underline; }

/* Plain actions container spacing */
.plain-actions{
  display: inline-flex;
  gap: 32px; /* more space between Yes/No */
  margin-top: 14px; /* more space above answers block */
}

/* Mask overlay to dim/hide Google Maps iframe extra UI */
.viewer-mask{position:absolute;inset:0;pointer-events:none;z-index:11;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0) 120px),
    linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0) 140px),
    radial-gradient(120px 80px at 0 0, rgba(0,0,0,0.5), rgba(0,0,0,0) 70%),
    radial-gradient(160px 120px at 100% 100%, rgba(0,0,0,0.5), rgba(0,0,0,0) 70%);
}


/* Cruel corruption overlay */
:root {
  --glitch-speed: 0.06s;
  --stripe-height: 8px;
  --chroma-offset: 6px;
}
body.corrupting {
  overflow: hidden; /* Prevent scrollbars from wobble */
  filter: contrast(2.2) saturate(2) hue-rotate(-30deg) brightness(0.9);
  animation: glitch-wobble 0.08s steps(2, jump-none) infinite;
}
@keyframes glitch-wobble {
  0% { transform: scale(1) rotate(0deg) translate(0,0); }
  50% { transform: scale(1.06) rotate(-2deg) translate(2%, -1%); }
  100% { transform: scale(1) rotate(0deg) translate(0,0); }
}
@keyframes glitch-shift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10%, 6%); }
  25% { transform: translate(8%, -10%); }
  40% { transform: translate(12%, 12%); }
  60% { transform: translate(-6%, 10%); }
  80% { transform: translate(-12%, -6%); }
}
@keyframes glitch-block {
  0%, 100% { clip-path: inset(0 0 0 0); }
  10% { clip-path: inset(18% 35% 38% 12%); }
  20% { clip-path: inset(55% 12% 18% 22%); }
  30% { clip-path: inset(32% 22% 12% 42%); }
  45% { clip-path: inset(12% 42% 28% 18%); }
  60% { clip-path: inset(42% 18% 24% 32%); }
  75% { clip-path: inset(28% 36% 8% 14%); }
  90% { clip-path: inset(38% 18% 14% 26%); }
}
#corruption {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
  mix-blend-mode: hard-light;
  overflow: hidden;
  animation: glitch-shift 0.14s steps(1, end) infinite;
}
#corruption::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0,
    transparent calc(var(--stripe-height) - 1px),
    rgba(255,0,0,0.8) var(--stripe-height),
    rgba(255,0,0,0.8) calc(var(--stripe-height) + 1px)
  );
  opacity: 1;
  filter: blur(0.6px) contrast(3) saturate(2);
  transform: translateX(calc(var(--chroma-offset) * -1));
  animation: glitch-scan var(--glitch-speed) steps(4, end) infinite,
             glitch-block 0.28s steps(1, end) infinite,
             chroma 0.12s steps(1, end) infinite;
  background-size: 100% calc(var(--stripe-height) * 4);
}
#corruption::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(var(--stripe-height) - 1px),
    rgba(0,0,255,0.8) var(--stripe-height),
    rgba(0,0,255,0.8) calc(var(--stripe-height) + 1px)
  );
  opacity: 0.8;
  filter: blur(0.6px) contrast(2.6) saturate(1.8) hue-rotate(15deg);
  transform: translateX(var(--chroma-offset));
  animation: glitch-scan calc(var(--glitch-speed) * 0.8) steps(2, start) infinite reverse,
             glitch-block 0.22s steps(1, end) infinite reverse,
             chroma 0.12s steps(1, end) infinite reverse;
  background-size: calc(var(--stripe-height) * 4) 100%;
}
@keyframes chroma {
  0% { transform: translateX(0); filter: saturate(1.2) hue-rotate(0deg); }
  50% { transform: translateX(calc(var(--chroma-offset) * 1)); filter: saturate(2) hue-rotate(20deg) contrast(1.6); }
 100% { transform: translateX(0); filter: saturate(1) hue-rotate(0deg) contrast(1); }
}
@keyframes glitch-scan {
  0% { background-position-y: 0; }
  100% { background-position-y: 100%; }
}

/* Noise overlay */
#corrupt-noise {
  position: fixed;
  inset: 0;
  z-index: 149;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.12"/></svg>');
  background-size: 320px 320px;
  animation: noise-shift 0.8s steps(4) infinite;
  opacity: 0.9;
}
@keyframes noise-shift {
  0% { background-position: 0 0; }
  100% { background-position: 320px -320px; }
}