/* V.4 DRAFT: front-page maps (NEWSIUM_V4_HOME_MAPS), the swipe row (NEWSIUM_V4_HOME_SWIPE) and /playable. Loaded only when one of those flags is on.
   Site variables only (light / dark / sepia keep working). Tap targets >= 44 px. The page itself never scrolls sideways: only the row / map panes do. */

/* ---------------------------------------------------------------- swipe row */
.v4sw{margin:0 0 18px;min-width:0}
.v4sw-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.v4sw-head h2{font:700 20px/1.2 var(--serif);margin:0;display:flex;align-items:center;gap:8px}
.v4sw-hint{flex:1}
.v4sw-all,.v4hm-open,.v4pl-more{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap}
.v4sw-wrap{position:relative;display:flex;align-items:center;gap:6px;min-width:0}
.v4sw-track{list-style:none;margin:0;padding:2px 2px 8px;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;min-width:0;flex:1;scroll-padding-left:2px}
.v4sw-track:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:10px}
.v4sw-track li{flex:none;scroll-snap-align:start}
.v4sw-card{display:flex;flex-direction:column;gap:4px;width:200px;min-height:44px;color:var(--ink);text-decoration:none}
.v4sw-th{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--chip);box-shadow:var(--shadow)}
.v4sw-th img{display:block;width:100%;height:100%;object-fit:cover}
.v4sw-ph{display:flex;align-items:center;justify-content:center;height:100%;padding:8px;text-align:center;font-weight:700;font-size:14px;color:var(--ink);background:var(--chip)}
.v4sw-tag{position:absolute;left:6px;top:6px;display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;font:700 11px/18px var(--sans);
  letter-spacing:.04em;background:rgba(0,0,0,.72);color:#fff}
.v4sw-tag.tag-live{background:#c0301a}
.v4sw-tag.tag-reel{background:#7a4b00}
.v4sw-dot{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block}
@media (prefers-reduced-motion:no-preference){.v4sw-tag.tag-live .v4sw-dot{animation:v4swp 1.6s ease-in-out infinite}}
@keyframes v4swp{50%{opacity:.35}}
.v4sw-t{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.v4sw-src{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4sw-ok{color:var(--ok);font-weight:700}
.v4sw-card:hover .v4sw-t{color:var(--brand)}
.v4sw-see{width:150px}
.v4sw-seebox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:16/9;width:150px;border-radius:10px;border:2px dashed var(--line);
  background:var(--panel);color:var(--brand);text-align:center;padding:4px}
.v4sw-seebox .small{color:var(--muted);font-size:12px;line-height:1.2}
.v4sw-seeic{font-size:20px;line-height:1}
.v4sw-nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:26px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);margin-bottom:40px}
.v4sw-nav:hover:not(:disabled){color:var(--brand);border-color:var(--brand)}
.v4sw-nav:disabled{opacity:.35;cursor:default}
@media (max-width:720px){
  .v4sw-nav{display:none}                                     /* phones: native touch swipe (scroll-snap) */
  .v4sw-card{width:min(64vw,220px)}
  .v4sw-track{gap:10px}
}
@media (min-width:721px){.v4sw-hint{visibility:hidden}}

/* ---------------------------------------------------------------- maps */
.v4hm{margin:0 0 18px;min-width:0}
.v4hm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.v4hm-head h2{font:700 20px/1.2 var(--serif);margin:0;display:flex;align-items:center;gap:8px}
.v4hm-tabs{display:none;gap:6px}
.v4hm-tab{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer}
.v4hm-tab[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.v4hm-panes{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.v4hm-pane{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px 8px;display:flex;flex-direction:column;gap:6px}
.v4hm-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.v4hm-ph h3{margin:0;font:700 16px/1.25 var(--serif);min-width:0}
.v4hm-box{position:relative;aspect-ratio:2/1;border-radius:10px;overflow:hidden;background:var(--ocean,#dde7ee);border:1px solid var(--line);cursor:pointer;contain:layout paint}
.v4hm-svg{display:block;width:100%;height:100%}
.v4hm-svg path{fill:var(--chip);stroke:var(--panel);stroke-width:.5;vector-effect:non-scaling-stroke}
.v4hm-svg path.hot{fill:var(--brand)}
.v4hm-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.v4hm-box.ready .v4hm-load{display:none}
.v4hm-lmap{position:absolute;inset:0;background:var(--ocean,#dde7ee);touch-action:pan-x pan-y}
.v4hm-lmap canvas,.v4hm-lmap svg,.v4hm-lmap img{max-width:none!important}     /* the page-wide max-width:100% guard would squash Leaflet's panes (same fix as .wxm-map) */
.v4hm-lmap .leaflet-control-attribution{font-size:10px;line-height:1.4}
.v4hm-top{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.v4hm-top a{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 10px;border-radius:999px;background:var(--chip);color:var(--ink);font-size:13.5px}
.v4hm-top a:hover{color:var(--brand)}
.v4hm-credit,.v4hm-empty{margin:0}
.v4hm-credit{padding:6px 0 2px}
.v4hm-credit a{display:inline-block;padding:13px 2px;margin:-13px 0}     /* 44 px tap area without a 44 px line */
@media (max-width:720px){
  .v4hm-tabs{display:flex}
  .v4hm-panes{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .v4hm-panes::-webkit-scrollbar{display:none}
  .v4hm-pane{flex:0 0 calc(100% - 28px);scroll-snap-align:start}
  .v4hm-ph{flex-wrap:wrap}
  .v4hm-ph h3 .small{display:block}
  .v4hm-box{aspect-ratio:16/10}
  .v4hm-top li:nth-child(n+5){display:none}                  /* phones: top 4 countries keep the pane short */
}

/* ---------------------------------------------------------------- /playable */
.v4pl-group{margin:0 0 22px}
.v4pl-gh{display:flex;align-items:center;gap:12px;margin:0 0 8px;flex-wrap:wrap}
.v4pl-gh h2{font:700 20px/1.2 var(--serif);margin:0;flex:1}
.v4pl-grid{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.v4pl-card .vthumb{position:relative}
.v4pl-types .pill,.v4pl-cats .pill{min-height:44px;display:inline-flex;align-items:center;gap:5px}
.v4pl-types .pill.on .muted,.v4pl-cats .pill.on .muted{color:inherit;opacity:.8}
.v4pl-pager span{color:var(--muted)}
@media (max-width:720px){.v4pl-grid{grid-template-columns:1fr 1fr;gap:12px}.v4pl-card .vtitle{font-size:14px}
  .v4pl-cats{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;min-width:0}   /* topics: one sideways row on phones */
  .v4pl-cats::-webkit-scrollbar{display:none}
  .v4pl-cats .pill{flex:none}}
@media (max-width:360px){.v4pl-grid{grid-template-columns:1fr}}
.v4hm-tap{pointer-events:auto;min-height:44px}