:root{--mustard:#f2b53a;--f-body:"Karla",system-ui,sans-serif;--f-mono:"DM Mono",ui-monospace,Menlo,monospace;--f-display:"Shrikhand","Cooper Black",Georgia,serif}
.nav.sub{position:sticky;top:0;z-index:20;background:#8e1f33;box-shadow:0 4px 14px rgba(70,20,5,.3);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 10px,transparent 10px 34px),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 10px,transparent 10px 34px)}
.nav.sub .wrap{display:flex;align-items:center;gap:8px;padding-block:9px;max-width:1180px}
.nmark{margin-right:auto;font:400 19px/1.1 var(--f-display);color:#fff4df;text-decoration:none;white-space:nowrap}
.nmark:hover{color:#ffe3a3}.nm-s{display:none}
@media (max-width:560px){.nm-l{display:none}.nm-s{display:inline}.nmark{font-size:18px}}
.navg.sub .wrap{justify-content:flex-end;flex-wrap:nowrap}
.navg.sub .ngrp .ndrop{left:auto;right:0;translate:none}.navg.sub .ngrp .ndrop::before{left:auto;right:28px;translate:none}
.crumbrow{font-size:14.5px}.crumbrow .wrap{display:flex;flex-wrap:wrap;gap:6px 8px;padding-block:14px 0;color:#6e5546}
.crumbrow a{color:#8e1f33;font-weight:700}.crumbrow [aria-current]{color:#2b1810;font-weight:700}
.hero2 .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:18px 34px;max-width:980px}
.h2t{display:flex;flex-direction:column;gap:14px}
.h2e{font:500 13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#a02039}
.hero2 h1{margin:0;font:400 clamp(44px,6.4vw,78px)/.95 var(--f-display);color:#8e1f33;text-wrap:balance}
.h2l{margin:0;font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--ink);max-width:60ch}
.h2bs{display:flex;flex-wrap:wrap;gap:12px}
.h2b{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;background:#8e1f33;color:#fff4df;font-weight:700;text-decoration:none;transition:transform .15s}
.h2b.alt{background:#fff4df;color:#5a1422;box-shadow:inset 0 0 0 2px #e2c9a0}.h2b:hover{transform:translateY(-2px)}
.h2p{background:#fffdf7;padding:12px;border-radius:10px;box-shadow:0 16px 34px rgba(60,25,5,.25);transform:rotate(2deg)}
.h2p img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
@media (prefers-color-scheme:dark){.hero2 h1{color:#f0627c}.h2e{color:#f2b53a}.crumbrow a{color:#f2b53a}.crumbrow [aria-current]{color:var(--ink)}.h2p{background:#2a1b13}}
@media (max-width:760px){.hero2 .wrap{grid-template-columns:1fr;gap:16px;padding-block:12px 24px}.h2p{order:-1;transform:none;padding:8px}.h2p img{aspect-ratio:16/9}}
/* games and FAQ: same nav and breadcrumbs, with a bigger title and description in the scene header */
.top.big .wrap{padding-block:34px 40px;gap:14px}
.top.big h1{font-size:clamp(38px,6vw,64px)}
.top.big p{font-size:clamp(18px,2vw,21px);line-height:1.5;color:#fff8ea;background:rgba(30,14,8,.55);padding:12px 16px;border-radius:14px;max-width:62ch}

/* grouped nav */
.navg .wrap { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 8px; -webkit-mask-image: none; mask-image: none; padding-right: max(16px, env(safe-area-inset-right, 0px)); position: relative; }
.navg::after { display: none !important; }
.navg .np { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; font: 700 14.5px var(--f-body); padding: 8px 16px; border-radius: 999px; border: 0; background: #fff4df; color: #5a1422; cursor: pointer; }
.navg .np i { font-style: normal; font-size: 11px; transition: transform .2s; }
.navg .np:hover, .navg .np.on, .navg .np[aria-expanded="true"] { background: var(--mustard); color: #4a1a08; }
.navg .np[aria-expanded="true"] i { transform: rotate(180deg); }
.navg .np:focus-visible, .nsheet a:focus-visible, .nsheet-btn:focus-visible { outline: 3px solid #ffe3a3; outline-offset: 2px; }
.ngrp { position: relative; }
.ndrop { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; z-index: 30; width: 300px; padding: 8px; border-radius: 16px; background: #fffaf0; border: 2px solid var(--mustard); box-shadow: 0 18px 36px rgba(60,20,5,.32); display: flex; flex-direction: column; gap: 2px; }
.ndrop[hidden] { display: none; }
.ndrop::before { content: ""; position: absolute; top: -9px; left: 50%; translate: -50% 0; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--mustard); }
.nav .ndrop a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; background: transparent; color: #2b1810; font-weight: 400; white-space: normal; text-decoration: none; }
.nav .ndrop a b { font-size: 15px; } .nav .ndrop a span { font-size: 12.5px; color: #6e5546; }
.nav .ndrop a:hover, .nav .ndrop a:focus-visible, .nav .ndrop a.on { background: #f8e3b2; color: #2b1810; }
.nsheet-btn, .ncur, .nquiz { display: none; }
@media (max-width: 899px) {
  .navg .wrap { flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px; padding-block: 8px; }
  .navg .np, .ngrp { display: none; }
  .nsheet-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mustard); color: #4a1a08; font: 700 15px var(--f-body); cursor: pointer; }
  .nsheet-btn i { font-style: normal; }
  .ncur { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.1; color: #fff4df; }
  .ncur small { font-size: 11px; opacity: .8; } .ncur b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav a.nquiz { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 16px; }
}
.nsheet { position: fixed; inset: 0; z-index: 2147483001; background: rgba(30,12,8,.55); display: flex; align-items: flex-end; justify-content: center; overscroll-behavior: contain; }
.nsheet[hidden] { display: none; }
.ns-in { width: min(640px, 100%); max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; background: #fffaf0; border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; animation: ns-up .28s cubic-bezier(.2,.8,.2,1); }
@keyframes ns-up { from { transform: translateY(40%); opacity: 0; } }
.ns-in::before { content: ""; align-self: center; width: 44px; height: 5px; border-radius: 99px; background: #d9c6a2; }
.ns-top { display: flex; justify-content: space-between; align-items: center; }
.ns-top b { font: 400 24px var(--f-display); color: #8e1f33; }
.ns-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f1e3c7; color: #2b1810; font: 700 18px var(--f-body); cursor: pointer; }
.ns-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ns-feat a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 6px; border-radius: 14px; background: #8e1f33; color: #fff4df; font-weight: 700; text-decoration: none; }
.ns-feat a:nth-child(2) { background: #6b3fa0; } .ns-feat a:nth-child(3) { background: #2f6b4f; } .ns-feat a:nth-child(4) { background: #4a0a1b; border: 2px solid #c9a24f; }
.ns-g h3 { margin: 0 0 8px; font: 700 11.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #a02039; }
.ns-l { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-l a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #f8e3b2; color: #2b1810; font-weight: 700; font-size: 15px; text-decoration: none; }
.ns-l a.on { background: #8e1f33; color: #fff4df; } .ns-l a.on::after { content: " · here"; font-weight: 400; margin-left: 4px; }
html.ns-lock, html.ns-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ns-in { animation: none; } .navg .np i { transition: none; } }