:root{
  --bg:#0f1115; --text:#e7eaf0; --muted:#9aa3b2; --card:#151a24;
  --border:#222b3a; --accent:#6ea8fe; --accent2:#b8f0ff;
  --bad:#ff6b6b;
  --easy:#FACC15; --medium:#14B8A6; --hard:#A855F7; --expert:#EF4444;
  --header-h:56px;
  --page-pad:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding-top:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  max-width: 100dvw;
  overflow-x:hidden;
}

.container{
  max-width:98vw;
  margin:0 auto;
  padding:0 var(--page-pad);
}

/* Header (not sticky) */
.site-header{
  position:static;
  height:var(--header-h);
  z-index:50;
  background:rgba(15,17,21,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--page-pad);
}
.logo{margin:0;font-size:1.25rem;letter-spacing:.3px}
.status{display:flex;gap:1rem;color:var(--muted)}
/* Keep title and Past button on one row */
.tabs{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap;            /* prevent wrapping under the title */
}

/* Make the Past Geonections button look like a small nav pill */
.btn.nav-btn{
  padding: .35rem .7rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  line-height: 1;
}
.btn.nav-btn:hover{
  background: #141a25;
}

#discord-btn {
  border-color: #5865F2;
  color: #5865F2;
  font-weight: 600;
}
#discord-btn:hover {
  background: #5865F2;
  color: white;
}

@media (max-width: 420px){
  .btn.nav-btn{ padding: .3rem .6rem; font-size: .9rem; }
}

/* Controls */
.controls{display:flex;gap:.5rem;padding:.6rem 0 .7rem;flex-wrap:wrap}
.btn{
  padding:.5rem .85rem;border-radius:.7rem;
  border:1px solid var(--border);
  background:#141a25;color:var(--text);cursor:pointer
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b0b0b;border:none
}

/* Board */
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  width: 100%;
  max-width: 100%;
  height: 98dvh;
  max-height: 98dvh;
  justify-items: center;
  align-items: center;
}

.tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  width: 100%;
  height: 100%;
  max-height: 100%;
  cursor: pointer;
  transition: transform .05s ease;
  place-self: center;
  overflow: hidden;
  /* make a new stacking context so z-index works predictably */
  isolation: isolate;

  display: flex;
  justify-content: center; /* h-center */
  align-items: center;     /* v-center */
}
.tile:active {
  transform: scale(.995);
}
.tile.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 16px var(--ring-color, #6ea8fe);
}

.tile.g1 { --ring-color: #FACC15; }  /* easy */
.tile.g2 { --ring-color: #14B8A6; }  /* medium */
.tile.g3 { --ring-color: #A855F7; }  /* hard */
.tile.g4 { --ring-color: #EF4444; }  /* expert */
.tile.locked {
  cursor: default;
  filter: saturate(.9) brightness(.95);
}

/* Guess form */
.guess-form {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(15, 17, 21, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  z-index: 100;
}

.guess-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 500;
}

.guess-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  margin-bottom: 12px;
}

.guess-form button {
  width: 100%;
  margin-bottom: 12px;
}

.guess-feedback {
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-weight: 500;
}

.guess-feedback.correct {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.guess-feedback.incorrect {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.tile img{
  position:absolute;
  inset:0;        /* top/right/bottom/left: 0 */
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  z-index: 0;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


/* rings */
.tile.ring::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 20px var(--ring-color) inset;
}

/* solved rings - 50% thicker than selected rings */
.tile.solved-ring::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 30px var(--ring-color) inset;
}

/* solved strip */
.solved{display:grid;grid-template-columns:1fr;gap:.65rem;margin:.6rem 0 .9rem}
.solved-group{
  display:grid;grid-template-columns:repeat(4,80px) 1fr;align-items:center;gap:.5rem;
  padding:.5rem;border-radius:.9rem;border:1px solid var(--border);background:#131b26
}
.solved-label{font-weight:700;color:#eaeef6}
@media (max-width:640px){.solved-group{grid-template-columns:repeat(4,64px) 1fr}}

/* Messages & footer */
.messages{min-height:1.2em;margin:.6rem 0 1rem;color:var(--muted)}
.site-footer{color:var(--muted);border-top:1px solid var(--border);padding:1rem 0 1.3rem;margin-top:.8rem}

/* ---- Fullscreen modal ---- */
.modal{position:fixed; inset:0; z-index:1000; display:block;}
.modal.hidden{display:none;}
.modal-backdrop{display:none;}
.modal-body{
  position:fixed; inset:0; width:100vw; height:100vh;
  margin:0; padding:0; background:#000;
  border:none; border-radius:0; overflow:hidden; box-shadow:none;
}
.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  background: rgba(0,0,0,.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;
}
.nav-arrow.left { left: 20px; }
.nav-arrow.right { right: 20px; }
.nav-arrow:hover { background: rgba(0,0,0,.75); }

.pano{position:absolute; inset:0; background:#000}
.freeze-overlay{position:absolute; inset:0; z-index:1000; background:transparent; pointer-events:auto;}
.close{
  position:fixed; top:12px; right:12px; z-index:1001;
  background:rgba(0,0,0,.55); color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:.6rem; padding:.35rem .6rem; cursor:pointer;
}
.guess-form{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:1001;
  display:flex; gap:.5rem; align-items:center;
  background:rgba(10,12,16,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:.5rem .75rem;
}
.guess-form label span{display:block;font-size:.85rem;color:var(--muted)}
.guess-form input{
  min-width:240px; padding:.55rem .7rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:.75rem; background:#0b1220; color:var(--text);
}
.guess-feedback{margin-left:.5rem}
.guess-feedback.correct{color:#3fcf8e}
.guess-feedback.incorrect{color:#ff6b6b}

/* Country code overlay (shown in dev mode or when tile is solved) */
.dev-country-code {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Country guess overlay */
.country-guess-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.9);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.country-guess-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.country-guess-title {
  margin: 0 0 16px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.country-guess-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}

.country-guess-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.1);
}

.country-guess-buttons {
  display: flex;
  gap: 12px;
}

.country-guess-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.country-guess-btn:hover {
  filter: brightness(1.08);
}

.country-guess-btn.primary {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #0b0b0b;
  border: none;
}

.country-guess-btn.primary:hover {
  filter: brightness(1.1);
}

/* Congratulations overlay */
.congrats-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.95);
  backdrop-filter: blur(12px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.congrats-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.congrats-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  display: block;
}

.congrats-title {
  margin: 0 0 16px 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.congrats-message {
  margin: 0 0 24px 0;
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.5;
}

.congrats-share-btn {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #0b0b0b;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(110, 168, 254, 0.3);
}

.congrats-share-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(110, 168, 254, 0.4);
}

.congrats-share-btn:active {
  transform: translateY(0);
}

.congrats-dismiss-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 16px;
}

.congrats-dismiss-btn:hover {
  background: var(--border);
  color: var(--text);
}

.congrats-copy-feedback {
  color: var(--accent);
  font-size: 0.9rem;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.congrats-copy-feedback.show {
  opacity: 1;
}
/* === Info Modal: make it a true card with visible backdrop === */
#info-modal .modal-backdrop{
  display:block;                 /* override global 'display:none' */
  background: rgba(0,0,0,0.6);   /* darker backdrop for readability */
  backdrop-filter: blur(4px);
}

#info-modal .info-content{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: min(720px, 92vw);
  max-height: 80vh;
  overflow: auto;
  padding: 24px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  z-index: 1001; /* above backdrop */
}

/* Make the close button live inside the card, not fixed to viewport */
#info-modal .info-content .close{
  position: absolute; 
  top: 12px; 
  right: 12px; 
  z-index: 1;
  background: rgba(0,0,0,.35);
}

/* Tighter, readable typography inside the card */
#info-modal .info-content h2{
  margin: 0 0 .5rem 0;
  font-size: 1.4rem;
}
#info-modal .info-content h3{
  margin: 1rem 0 .4rem 0;
  font-size: 1.05rem;
}
#info-modal .info-content p{
  margin: .5rem 0;
  line-height: 1.5;
}
#info-modal .info-content ul,
#info-modal .info-content ol{
  margin: .25rem 0 .75rem 1.25rem;
}
#info-modal .info-content li{
  margin: .2rem 0;
}

.info-content .dc-link {
  color: #bbb8de;
  font-weight: 600;
  text-decoration: underline;
}
.info-content .dc-link:hover {
  text-decoration: none;
  color: #e3e1f2;
}

/* ==== Expert mode toggle (welcome card) ==== */
.mode-toggle { margin: .75rem 0 0; display:flex; align-items:center; gap:.75rem; }
.mode-toggle .label { font-weight:600; }
.mode-toggle .mode-note { color: var(--muted); font-size:.9rem; }

/* Switch renders slider + text inline */
.switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 24px;          /* no fixed width; lets text sit beside the slider */
}
.switch input{ display: none; }

.switch .slider{
  position: relative;    /* was absolute; make it a normal inline-flex child */
  width: 46px;
  height: 24px;
  cursor: pointer;
  background: var(--border);
  border-radius: 999px;
  transition: .2s;
}
.switch .slider::before{
  content:"";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.switch input:checked + .slider{ background: var(--accent); }
.switch input:checked + .slider::before{ transform: translateX(22px); }

/* make the text readable next to the slider */
.switch .label{
  color: var(--text);
  font-weight: 600;
}

/* ==== Blind (black) tile for Expert mode ==== */
.tile.blind { background:#000 !important; position:relative; }
.tile.blind img, .tile.blind canvas, .tile.blind .thumb { opacity:0 !important; }
.tile.blind::after {
  content:"?"; position:absolute; inset:0; display:grid; place-items:center;
  color:#e53935; font-weight:800; font-size:2.25rem; letter-spacing:.02em;
}

/* ==== No hint UI in Expert mode ==== */
html[data-mode="expert"] #country-suggestions,
html[data-mode="expert"] .hint,
html[data-mode="expert"] .helper { display:none !important; }
/* ============ Expert: Label groups modal ============ */
.label-modal .label-title{ font-size:1.15rem; font-weight:700; margin-bottom:.5rem }
.label-modal .label-list{ display:grid; gap:.5rem; margin:.75rem 0 1rem }
.label-modal .label-row{ display:flex; align-items:center; gap:.5rem }
.label-modal .swatch{ width:14px; height:14px; border-radius:3px; display:inline-block }
/* Color squares for each group color */
.label-modal .swatch.yellow { background: #FACC15; }  /* yellow */
.label-modal .swatch.teal   { background: #14B8A6; }  /* teal */
.label-modal .swatch.purple { background: #A855F7; }  /* purple */
.label-modal .swatch.red    { background: #EF4444; }  /* red */
.label-modal input[type="text"]{
  flex:1; padding:.5rem .6rem; border:1px solid var(--border); border-radius:.5rem; background:#0c111b; color:var(--text)
}
.label-modal .actions{ display:flex; justify-content:flex-end; gap:.5rem }
.label-modal .btn{ padding:.45rem .75rem; border:1px solid var(--border); border-radius:.75rem; background:#0f1624; color:var(--text) }
.label-modal .btn.primary{ border-color:var(--accent); background:#15213a }

.json-download-link{
  display:inline-block;
  font-size:.95rem;
  color:var(--muted);
  text-decoration: underline;
}
.json-download-link:hover{
  color:var(--text);
  text-decoration: none;
}
/* Welcome card toggle layout & sizing (modal only) */
#info-modal .mode-toggle{
  display:flex;
  align-items:center;
  gap:.75rem 1rem;      /* vertical & horizontal gap */
  flex-wrap:wrap;       /* lets the note wrap under on narrow widths */
}
#info-modal .mode-toggle .switch{ flex:0 0 auto; }
#info-modal .mode-toggle .mode-note{
  flex:1 1 360px;       /* note can occupy the rest of the row */
  min-width:280px;
  color:var(--muted);
  line-height:1.35;
}

/* Slightly larger, perfectly centered pill in the modal */
#info-modal .switch{ height:26px; }
#info-modal .switch .slider{ width:50px; height:26px; }
#info-modal .switch .slider::before{ width:22px; height:22px; left:2px; top:2px; }
#info-modal .switch input:checked + .slider::before{ transform: translateX(24px); }
#info-modal .switch .label{ line-height:26px; font-weight:600; }
/* Welcome card note stays inside the card */
#info-modal .feedback-note{
  margin: .9rem 0 0;
  color: var(--muted);
}
.discord-top-btn {
  display: inline-block;
  margin-left: 10px;
  padding: 8px 16px;
  background-color: #6c63ff;   /* purple */
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;       /* no underline */
  transition: background-color 0.2s ease;
}

.discord-top-btn:hover {
  background-color: #5848d6;   /* darker purple on hover */
}
.daily-challenge-btn {
  display: inline-block;
  margin-left: 10px;
  padding: 8px 16px;
  background-color: #28a745;   /* green */
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.daily-challenge-btn:hover {
  background-color: #1f7a34;   /* darker green */
}
/* Layout guards */
.site-header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header .tabs,
.site-header .status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons */
.discord-top-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #6c63ff;   /* purple */
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.discord-top-btn:hover { background-color: #5848d6; }

.daily-challenge-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #28a745;   /* green */
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.daily-challenge-btn:hover { background-color: #1f7a34; }