/* ============================================================
   Shared page chrome — the header, search and small controls
   used by both the Map (index.html) and Play (play.html) pages.
   Anything specific to one page stays in that page.
   ============================================================ */

/* ---------- top bar ---------- */
.topbar { flex:none; display:flex; align-items:center; justify-content:space-between;
          gap:var(--s-4); padding:var(--s-4) var(--s-5); }
.mark { display:flex; align-items:center; gap:var(--s-3); }
a.mark { text-decoration:none; color:inherit; }
.mark-badge { width:38px; height:38px; border-radius:var(--r-sm); background:#000;
              color:#fff; display:grid; place-items:center; font-size:19px; flex:none; }
.mark b { display:block; font-size:15px; letter-spacing:-.4px; }
.mark small { display:block; font-size:11.5px; color:var(--text-muted); letter-spacing:0; }
.search { position:relative; flex:1; max-width:420px; margin-inline:var(--s-5); }
.search-in { display:flex; align-items:center; gap:var(--s-3);
             background:var(--bg); border:1px solid var(--line);
             border-radius:var(--r-pill); padding:0 var(--s-4); height:42px;
             transition:.15s var(--ease); }
.search-in:focus-within { border-color:var(--line-strong); box-shadow:var(--shadow-float); }
.search-in svg { flex:none; opacity:.45; }
.search input { flex:1; border:0; outline:0; background:none; font:inherit;
                font-size:14.5px; letter-spacing:-.2px; min-width:0; }
.search input::placeholder { color:var(--text-ghost); }
.search kbd { flex:none; font:inherit; font-size:11px; font-weight:600; color:var(--text-muted);
              background:var(--surface-2); border-radius:5px; padding:3px 6px; }
.results { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:8;
           background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
           box-shadow:var(--shadow-float); overflow:hidden; display:none;
           max-height:340px; overflow-y:auto; }
.results.on { display:block; }
.results button { display:flex; width:100%; align-items:center; gap:var(--s-3);
                  padding:10px var(--s-4); border:0; background:none; cursor:pointer;
                  text-align:left; font:inherit; }
.results button:hover, .results button.cur { background:var(--surface); }
.results .rf { font-size:16px; width:22px; flex:none; }
.results .rn { flex:1; font-size:14px; font-weight:600; letter-spacing:-.2px; }
.results .rv { font-size:12px; font-variant-numeric:tabular-nums; }
.results .empty { padding:var(--s-4); font-size:13.5px; color:var(--text-muted); }

.tools { display:flex; gap:var(--s-2); flex:none; align-items:center; }
.tools .btn--ghost.on { background:var(--surface-2); border-color:var(--line-strong); color:var(--text); }

.iconbtn { width:30px; height:30px; flex:none; border:1px solid var(--line);
           background:var(--bg); border-radius:50%; cursor:pointer; color:var(--text-2);
           display:grid; place-items:center; font-size:15px; line-height:1; }
.iconbtn:hover { background:var(--surface); color:var(--text); }

.listnote { font-size:12.5px; color:var(--text-muted); margin:0 0 var(--s-4); }

@media (max-width:900px) {
  /* one compact top row */
  .topbar { padding:var(--s-3) var(--s-3); gap:var(--s-2); }
  .mark small, .mark b { display:none; }
  .mark-badge { width:34px; height:34px; font-size:17px; }
  .search { flex:1; margin:0; max-width:none; }
  .search-in { height:38px; padding:0 var(--s-3); }
  .search kbd { display:none; }
  .tools .btn--icon { padding:0; width:38px; height:38px; border-radius:50%;
                      font-size:0; display:grid; place-items:center; }
  .tools .btn--icon::after { content:attr(data-icon); font-size:16px; }
}


/* ============================================================
   The app shell — the fixed frame both surfaces sit in.
   The Map fills the stage with a canvas; Play fills it with a game.
   ============================================================ */

html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
body { background:var(--bg); display:flex; flex-direction:column; }

.surface { flex:1; min-height:0; display:grid; grid-template-columns:60px 1fr 344px;
           margin:0 var(--s-5) var(--s-5); background:var(--bg);
           border:1px solid var(--line); border-radius:var(--r-md);
           overflow:hidden; }

/* left rail: the story side. The right panel is the country side. */
.rail { border-right:1px solid var(--line); background:var(--bg);
        display:flex; flex-direction:column; align-items:center;
        padding:var(--s-3) 0; gap:2px; }
.rail button { width:48px; padding:8px 0 6px; border:0; background:none; cursor:pointer;
               border-radius:var(--r-sm); color:var(--text-muted); display:grid;
               gap:3px; justify-items:center; transition:.15s var(--ease); }
.rail button:hover { background:var(--surface); color:var(--text-2); }
.rail button.on { background:var(--surface-2); color:var(--text); }
.rail .ic { font-size:17px; line-height:1; }
.rail .tx { font-size:9.5px; font-weight:600; letter-spacing:-.1px; }
.rail-sep { width:28px; height:1px; background:var(--line); margin:4px 0; flex:none; }

.stage { position:relative; min-width:0; }

/* ---------- right panel: country detail on the map, ad space on play ---------- */
.panel { position:relative; border-left:1px solid var(--line); background:var(--bg);
         display:flex; flex-direction:column; overflow:hidden; }

.ad-slot { display:none; position:absolute; inset:0; z-index:3; background:var(--bg);
           flex-direction:column; align-items:center; justify-content:center;
           gap:var(--s-3); padding:var(--s-5); text-align:center; }
.ad-slot.on { display:flex; }
.ad-slot .tag { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                color:var(--text-ghost); }
.ad-slot .box { width:100%; max-width:280px; aspect-ratio:4/3; border:1px dashed var(--line-strong);
                border-radius:var(--r-sm); display:grid; place-items:center;
                color:var(--text-ghost); font-size:12.5px; }

@media (max-width:900px) {
  .rail-sep { width:1px; height:20px; margin:0 4px; }

  /* The world is ~2.3:1. Sizing the map area from the viewport WIDTH keeps the
     whole world visible with only a little air, instead of cropping it away. */
  .surface { display:grid; grid-template-columns:1fr;
             grid-template-rows:auto min(42vh, 66vw) 1fr;
             margin:0 var(--s-3) var(--s-3); }
  .stage { position:relative; min-height:0; }

  /* the rail turns into a row of chips above the map */
  .rail { flex-direction:row; justify-content:flex-start; gap:var(--s-2);
          border-right:0; border-bottom:1px solid var(--line);
          padding:var(--s-2) var(--s-3); overflow-x:auto; }
  .rail button { width:auto; padding:6px 12px; grid-auto-flow:column;
                 align-items:center; gap:6px; border-radius:var(--r-pill); }
  .rail .tx { font-size:12px; }
}