/* Thin top nav, More menu, homepage region tabs, mobile bottom tab bar (js/nav.js) */
html.sn .nav-links,html.sn .nav .nav-taste,html.sn .nav .surprise-btn:not(.sn-dice),html.sn .nav .sn-hide,html.sn .nav .nav-tonight{display:none!important}
html.sn .nav .sn-dice{width:38px;height:38px;padding:0;margin:0;gap:0;border:1px solid var(--line);color:var(--fg);justify-content:center;background:none}
html.sn .nav .sn-dice:hover{background:linear-gradient(135deg,#d9b26f,#f2d9a2);color:#1a140a;border-color:transparent}
html.sn .nav{gap:20px}
html.sn .nav-right{gap:10px}
.sn-dice{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--fg);background:none;cursor:pointer;padding:0;flex:none;transition:border-color .2s,transform .2s}
.sn-dice svg{width:18px;height:18px}.sn-dice:hover{border-color:var(--fg);transform:rotate(-12deg)}
html.sn .nav .nav-saved{flex:none}
/* More */
.sn-more{position:relative}
.sn-more-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 11px;border-radius:99px;border:1px solid var(--line);background:none;color:var(--fg);font:600 13px/1 var(--f-body,Inter),sans-serif;cursor:pointer}
.sn-more-btn svg{width:18px;height:18px}.sn-more-btn:hover,.sn-more.open .sn-more-btn{border-color:var(--fg)}
.sn-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:120;min-width:250px;padding:8px;border-radius:14px;background:var(--bg,#111);color:var(--fg,#eee);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.35);font:500 14px/1.2 var(--f-body,Inter),sans-serif}
.sn-menu[hidden]{display:none}
.sn-menu .sn-h{margin:8px 10px 4px;font:600 10.5px/1 var(--f-body,Inter),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#999)}
.sn-menu .sn-grp{margin:0;display:flex;flex-direction:column}
.sn-menu a{display:block;padding:10px;border-radius:8px;color:inherit;text-decoration:none}
.sn-menu a:hover,.sn-menu a:focus-visible{background:color-mix(in srgb,var(--fg,#fff) 9%,transparent);outline:none}
.sn-menu .sn-home{font-weight:600}
.sn-langrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 2px 2px;padding:10px 8px 4px;border-top:1px solid var(--line)}
.sn-langrow span{font-size:13px;color:var(--muted,#999)}
.sn-m-only{display:none!important}
/* Make me a night: the one prominent action */
html.sn .nav .sn-night{display:inline-flex;width:auto;height:40px;padding:0 18px;gap:8px;border:0;border-radius:99px;background:linear-gradient(135deg,#3a2c6b,#6d48b0);color:#fff;font:700 13.5px/1 var(--f-body,Inter),sans-serif;box-shadow:0 6px 20px rgba(80,50,150,.35);justify-content:center}
html.sn .nav .sn-night b{display:inline}
html.sn .nav .sn-night:hover{filter:brightness(1.12);color:#fff}
.sn-dice:focus-visible,.sn-more-btn:focus-visible,html.sn .nav .sn-night:focus-visible,.sn-tabs a:focus-visible,.sn-rtabs a:focus-visible,.sn-fy:focus-visible,html.sn .nav-saved:focus-visible{outline:2px solid var(--reme,#d9b26f);outline-offset:2px}
@media (min-width:769px) and (max-width:1000px){html.sn .nav .search{width:170px}html.sn .nav .search:focus-within{width:210px}}
/* Homepage region tabs + For you chip */
.sn-htabs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 var(--pad,24px) 16px;position:relative;z-index:5}
.t-editorial .sn-htabs{margin:22px 0 0}.t-editorial .sn-htabs+.fy-bar{margin-top:12px}
.sn-rtabs{display:inline-flex;padding:3px;border-radius:99px;border:1px solid var(--line);background:var(--card,transparent)}
.sn-rtabs a{padding:9px 16px;border-radius:99px;font:600 13.5px/1 var(--f-body,Inter),sans-serif;color:var(--muted);text-decoration:none;transition:.2s}
.sn-rtabs a:hover{color:var(--fg)}.sn-rtabs a[aria-current]{background:var(--fg);color:var(--bg)}
.sn-fy{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:99px;border:1px solid var(--reme,#d9b26f);color:var(--reme,#d9b26f);font:600 13.5px/1 var(--f-body,Inter),sans-serif;text-decoration:none;background:none}
.sn-fy.on{background:color-mix(in srgb,var(--reme,#d9b26f) 16%,transparent)}
.sn-fy:hover{background:color-mix(in srgb,var(--reme,#d9b26f) 22%,transparent)}
/* Mobile bottom tab bar */
.sn-tabs{display:none}
@media (max-width:768px){
  html.sn .nav{gap:10px;padding:10px 14px}
  html.sn .nav .sn-dice,html.sn .nav .nav-saved,html.sn .nav .sn-night{display:none!important}
  html.sn .nav .search{width:40px;padding:9px 11px;border-radius:50%}html.sn .nav .search input{width:0}
  html.sn .nav .search:focus-within{width:min(62vw,260px);border-radius:99px}html.sn .nav .search:focus-within input{width:100%}
  .sn-more-btn{width:40px;padding:0;justify-content:center}.sn-more-btn span{display:none}
  .sn-menu{position:fixed;left:12px;right:12px;top:62px;min-width:0;max-height:calc(100vh - 150px);overflow:auto}
  .sn-m-only{display:block!important}
  .sn-tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:90;padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));background:color-mix(in srgb,var(--bg,#0b0b0c) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line,rgba(255,255,255,.12))}
  .sn-tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:48px;border-radius:12px;color:var(--muted,#999);font:600 11px/1 var(--f-body,Inter),sans-serif;text-decoration:none}
  .sn-tabs a svg{width:22px;height:22px}
  .sn-tabs a[aria-current]{color:var(--fg,#fff)}
  .sn-tabs .sn-tab-n{position:absolute;top:3px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--hot,#e0482d);color:#fff;font:700 10px/17px var(--f-body,Inter),sans-serif;text-align:center;padding:0 4px}
  .sn-tabs .sn-tab-n:empty{display:none}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  /* lift floating UI above the tab bar */
  html.sn .switcher{bottom:calc(74px + env(safe-area-inset-bottom))}
  html.sn .map-fab{bottom:calc(126px + env(safe-area-inset-bottom))}
  html.sn #toast{bottom:calc(132px + env(safe-area-inset-bottom))}
  html.sn .pwa-card{bottom:calc(74px + env(safe-area-inset-bottom))}
  /* full-screen layers own the screen: hide the tab bar under them */
  html.nt-open .sn-tabs,html.tq-open .sn-tabs,html.tn-open .sn-tabs,body.has-map .sn-tabs{display:none}
  .sn-htabs{margin:0 16px 14px;gap:8px}.t-editorial .sn-htabs{margin:18px 0 0}
  .sn-rtabs{overflow-x:auto;max-width:100%}.sn-rtabs a{padding:9px 13px;white-space:nowrap}
}
/* standalone pages without base.css (credits.html) */
html.sn-standalone-page{--bg:#f5f2ec;--fg:#151412;--muted:#6f685e;--line:rgba(21,20,18,.14);--hot:#e0482d;--card:#fff;--f-body:Inter,system-ui,sans-serif}
.sn-standalone{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:12px 24px;background:rgba(245,242,236,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sn-standalone .logo{font:800 20px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--fg);text-decoration:none}.sn-standalone .logo .dot,.sn-standalone .logo .two{color:var(--hot)}.sn-standalone .logo .two{letter-spacing:0;margin-left:-.03em}
.sn-standalone .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.sn-standalone .search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:7px 12px;width:200px}
.sn-standalone .search svg{width:16px;height:16px;flex:none;opacity:.7}.sn-standalone .search input{all:unset;font-size:14px;width:100%}
.sn-standalone .nav-saved{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--fg)}
.sn-standalone .nav-saved svg{width:18px;height:18px}
.sn-standalone .nav-saved b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--hot);color:#fff;font:700 11px/18px Inter;text-align:center;padding:0 4px}.sn-standalone .nav-saved b:empty{display:none}
html.sn-standalone-page .sn-tabs a,html.sn-standalone-page .sn-menu a{text-decoration:none}
/* controls follow the nav's text colour, so they read over dark heroes (event/story) and light pages alike */
html.sn .nav .search,html.sn .nav .sn-dice,html.sn .nav .nav-saved,html.sn .nav .sn-more-btn{border-color:color-mix(in srgb,currentColor 32%,transparent);color:inherit}
html.sn .nav .search input{color:inherit}html.sn .nav .search input::placeholder{color:currentColor;opacity:.62}
html.sn .nav .sn-night{align-items:center;white-space:nowrap;text-decoration:none}
.sn-menu .lang{border-color:var(--line)!important;color:var(--fg)!important}
.sn-menu .lang button.on{background:var(--fg)!important;color:var(--bg)!important}