:root{
  --bg:#0c0a09; --panel:#17130f; --panel2:#1f1a14; --line:#2c2620;
  --ink:#f3ede4; --muted:#a89a87; --gold:#e0a94e; --gold-dim:#8a6a2e;
  --green:#4ca55f; --red:#e0533e; --amber:#e0a94e;
  --r:16px; --tap:54px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* THE hidden ATTRIBUTE MUST WIN, 2026-09-15. viewer.js hides the detail-level bar and the item
   list with the `hidden` attribute, but `.spoilerbar` and `.items` below set `display:flex`, and an
   author `display` beats the browser's own `[hidden]{display:none}` in every engine. So both were
   visible on every area BEFORE "check me" was tapped: a level button rendered the list with the
   check still closed (a mark then saved but never repainted), and a new area kept the previous
   area's list under its header (next looked like it moved two). One rule, and `hidden` means hidden.
   The three per-element `[hidden]` rules further down were earlier patches of the same fault. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

/* loading */
.loading{margin:auto;text-align:center;color:var(--muted)}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--gold);
  border-radius:50%;margin:0 auto 12px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* topbar */
.topbar{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#15110d,#100d0a);
  border-bottom:1px solid var(--line);padding:14px 18px calc(14px + env(safe-area-inset-top));
  padding-top:max(14px,env(safe-area-inset-top));display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px;letter-spacing:.2px}
/* Back-to-site link. The guide is a standalone mini-app at /guide/ and had no way back to
   zorvala.com at all (Sami, 2026-07-25). Full width so it sits on its own line above the
   game name; 44px tap target so it is comfortable on a phone. */
.homelink{flex:0 0 100%;order:-1;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;color:var(--muted);text-decoration:none;font-size:13px;
  letter-spacing:.4px;text-transform:uppercase}
.homelink span{text-decoration:underline;text-underline-offset:3px}
.homelink:hover,.homelink:focus-visible{color:var(--gold)}
.topbar .sub{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.reset{margin-left:auto}
.link{background:none;border:none;color:var(--gold-dim);font-size:12px;padding:6px;cursor:pointer;text-decoration:underline}

/* area nav */
.areanav{display:flex;align-items:center;gap:8px;padding:12px 12px 4px}
.navbtn{flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:14px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:22px;cursor:pointer}
.navbtn:active{background:var(--panel2)}
.navbtn:disabled{opacity:.3}
.areapick{flex:1;text-align:center;min-width:0}
.arealabel{font-weight:700;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.areameta{color:var(--muted);font-size:12px;margin-top:2px}
.areaselect-wrap{padding:0 16px 6px}
.areaselect{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:11px 12px;font-size:14px;-webkit-appearance:none;appearance:none}

/* body */
.pad{flex:1;padding:8px 16px 28px}
.muted{color:var(--muted)} .small{font-size:13px}

/* area location cue -- spoiler-free physical "you're here when ..." */
.areacue{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin:4px 0 12px;font-size:14px;line-height:1.45;color:var(--ink)}
.areacue[hidden]{display:none}
.areacue-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-right:6px}

/* check card */
.checkcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;margin:8px 0 14px}
.checkhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.checkcard h2{margin:0;font-size:17px}
.counts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.chip.left{color:var(--gold)} .chip.miss{color:var(--amber)} .chip.done{color:var(--green)} .chip.zero{color:var(--muted)}
[data-area-note]{margin:10px 0 0}

.bigbtn{display:block;width:100%;min-height:var(--tap);border-radius:14px;border:none;
  font-size:16px;font-weight:700;cursor:pointer;margin-top:14px}
.bigbtn.check{background:var(--gold);color:#241a08}
.bigbtn.check:active{filter:brightness(.92)}
.bigbtn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:600}
.bigbtn.ghost:active{background:var(--panel)}

/* spoiler level bar */
.spoilerbar{display:flex;align-items:center;gap:10px;margin:4px 0 12px;flex-wrap:wrap}
.sl-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.sl-seg{display:flex;gap:6px;flex:1;min-width:240px}
.sl-btn{flex:1;min-height:48px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
  color:var(--muted);font-size:15px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.sl-btn.active{background:var(--gold);color:#241a08;border-color:var(--gold)}
/* Sketch-discoverability hint (shown below level 2, hidden once at 2+). */
.sl-hint{flex-basis:100%;margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.sl-hint[hidden]{display:none}
.sl-hint strong{color:var(--gold)}

/* ─────────────────────────────────────────────────────────────────────────────
   THE GRID (Sami, 2026-09-15, the first game played on his own guide). The list
   of tall rows is gone: every collectible is a CARD in a grid, a tap on the card
   collects it in place, the corner ⤢ (or a long press) opens it at full size.
   Column width follows the detail level, because what a card must hold changes:
   levels 0 and 1 a few words, level 2 a sentence that must be readable without
   opening anything, level 3 a sketch. viewer.js sets .lvl0 … .lvl3 on the list.
   ───────────────────────────────────────────────────────────────────────────── */
.items{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.items.lvl1{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.items.lvl2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.items.lvl3{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.items .area-clear{grid-column:1/-1}
.item{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:opacity .2s}
.item .tile{cursor:pointer;height:100%;display:flex;flex-direction:column;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.item .tile:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.item .thumb{aspect-ratio:1/1;background:#0f0d0b;border-bottom:1px solid var(--line)}
.item .thumb img{display:block;width:100%;height:100%;object-fit:contain}
.item .body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.item .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.item .typ{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold-dim);font-weight:700}
.item .label{font-weight:600;font-size:15px;line-height:1.3}
.item .miss-tag{font-size:10px;font-weight:700;color:var(--amber);border:1px solid var(--amber);
  border-radius:6px;padding:2px 6px;text-transform:uppercase}
.item .auto-tag,.detail-body .auto-tag{font-size:10px;font-weight:700;color:var(--muted);border:1px solid var(--muted);
  border-radius:6px;padding:2px 6px;text-transform:uppercase}
.item .hint{margin:4px 0 0;font-size:14px;color:var(--ink);background:var(--panel2);
  border-left:3px solid var(--gold-dim);border-radius:0 8px 8px 0;padding:9px 12px;white-space:pre-wrap}
.item .hint.lvl3{border-left-color:var(--red)}
/* at level 3 the picture is the point; the route is clamped on the card and full in the detail view */
.items.lvl3 .item .hint{white-space:normal}
.items.lvl3 .item .hint-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the ✓: inline at the start of the top row on a text card, over the picture on a sketch card */
.item .check{width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--green);color:#06210d;font-weight:800;font-size:12px;display:none;
  align-items:center;justify-content:center;pointer-events:none;z-index:2}
.item.has-sketch .check{position:absolute;left:10px;top:10px;width:30px;height:30px;font-size:16px}
/* nothing runs under the corner button */
.item .row1,.item .label{padding-right:40px}
.item.collected{opacity:.55}
.item.collected .thumb img{filter:grayscale(1)}
.item.collected .label{text-decoration:line-through}
.item.collected .check{display:flex}
.item .expand{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(12,10,9,.78);color:var(--gold);font-size:18px;
  line-height:1;cursor:pointer;z-index:2}
.item .expand:hover{background:rgba(224,169,78,.18)}

.area-clear{text-align:center;color:var(--green);font-weight:700;padding:18px;border:1px dashed var(--green);border-radius:14px;background:rgba(76,165,95,.08)}

/* THE DETAIL VIEW: one item at full size, over the grid. Reveals exactly what the card does. */
.detail{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.84);overflow:auto;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  display:flex;align-items:flex-start;justify-content:center}
.detail-card{position:relative;width:min(100%,1100px);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);margin:auto;overflow:hidden}
.detail-close{position:absolute;right:10px;top:10px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:rgba(12,10,9,.8);color:var(--ink);font-size:18px;cursor:pointer}
.detail-fig{margin:0;background:#0f0d0b}
.detail-img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;margin:0 auto}
.detail-fig figcaption{padding:8px 14px;text-align:center}
.mapdetail .detail-img{max-height:88vh}
/* the map and its pins share one box, so a pin's left/top percentages land on the picture, never on letterboxing */
.mapstage{position:relative;margin:0 auto;width:min(100%,calc(86vh * var(--ar,1.5)));container-type:inline-size}
.mapstage .detail-img{width:100%;height:auto;max-height:none}
/* a room's pins: one panel of card numbers beside the room's name. Sized in MAP pixels (--u is one pixel of the
   picture; the pack lays the panels out at pin 46, gap 4), so the layout holds at every screen size and zoom. */
.pingroup{position:absolute;transform:translate(-50%,0);display:flex;flex-wrap:wrap;box-sizing:border-box;
  --u:calc(100cqw / var(--mw,2172));gap:calc(4 * var(--u));padding:calc(4 * var(--u));
  width:calc(var(--cols,4) * 50 * var(--u) + 4 * var(--u));border-radius:calc(25 * var(--u));background:rgba(12,10,9,.6)}
/* an exact pin: the spot the game places the item, so the panel is centred ON it and ringed white */
.pingroup.exact{transform:translate(-50%,-50%);background:rgba(12,10,9,.35)}
.pingroup.exact .pin{border-color:#f3ede4}
.pin{width:calc(46 * var(--u));height:calc(46 * var(--u));padding:0;border-radius:50%;
  border:calc(3 * var(--u)) solid #0c0a09;background:var(--gold);color:#0c0a09;font-weight:800;
  font-size:calc(22 * var(--u));line-height:calc(40 * var(--u));text-align:center;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.7)}
.pin.collected{opacity:.35}
.item .num{font-size:11px;font-weight:800;color:var(--muted);min-width:18px}

/* FLOOR MAPS (Rook, 2026-09-24): each map carries its own light or dark card, so it sits on the panel as it is. */
.mapzone{margin:14px 0 4px}
.mapzone h2{margin:0 0 10px;font-size:17px}
.maps{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.mapcard{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;color:var(--ink);cursor:pointer;text-align:left;font:inherit}
.mapcard img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#0f0d0b;border-radius:8px}
.mapcard .maptitle{font-size:13px;font-weight:600;padding:0 2px 2px}
.detail-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px}
.detail-body .row1{display:flex;align-items:center;gap:8px}
.detail-body .typ{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold-dim);font-weight:700}
.detail-body .miss-tag{font-size:10px;font-weight:700;color:var(--amber);border:1px solid var(--amber);border-radius:6px;padding:2px 6px;text-transform:uppercase}
.detail-label{margin:0;font-size:20px;line-height:1.3}
.detail-body .hint{margin:0;font-size:15px;color:var(--ink);background:var(--panel2);border-left:3px solid var(--gold-dim);border-radius:0 8px 8px 0;padding:10px 12px;white-space:pre-wrap}
.detail-body .hint.lvl3{border-left-color:var(--red)}
.detail-mark{border:1px solid var(--green);background:transparent;color:var(--green)}
.detail-mark.on{background:var(--green);color:#06210d}
.detail-card.collected .detail-img{filter:grayscale(1)}
body.detail-open{overflow:hidden}
/* the full-size view's own left and right (Sami, 2026-09-24). On a phone or an iPad: a row of two buttons under the
   picture, so they never cover the words or the picture. On a screen wide enough to hold them beside the 1100px card:
   fixed arrows at the screen's edges. Dimmed at the area's first and last card. */
.detail-navbar{display:flex;gap:10px;padding:10px 16px 0}
.detail-nav{flex:1;height:46px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;
  font-size:15px;font-weight:700;cursor:pointer}
.detail-nav .nav-ch{font-size:28px;line-height:1;margin-top:-4px}
.detail-nav:hover:not([disabled]){background:rgba(224,169,78,.2)}
.detail-nav[disabled]{opacity:.3;cursor:default}
@media (min-width:1260px){
  .detail-navbar{display:contents}
  .detail-nav{position:fixed;top:50%;z-index:3;transform:translateY(-50%);flex:none;width:56px;height:88px;padding:0;
    border-radius:14px;background:rgba(12,10,9,.74)}
  .detail-nav .nav-tx{display:none}
  .detail-nav .nav-ch{font-size:46px;margin-top:-6px}
  .detail-nav.prev{left:max(8px,env(safe-area-inset-left))}
  .detail-nav.next{right:max(8px,env(safe-area-inset-right))}
  .detail-nav:hover:not([disabled]){background:rgba(224,169,78,.3)}
}
.detail-body .num{font-size:12px;font-weight:800;color:var(--muted)}

.areafoot{margin-top:18px}

/* end-of-game card (revealed only when advancing past the last area) */
.endcard{background:var(--panel);border:1px solid var(--gold-dim);border-radius:var(--r);
  padding:26px 18px;margin:10px 0 14px;text-align:center}
.endcard h2{margin:0 0 8px;font-size:20px;color:var(--gold)}
.endcard .bigbtn.ghost{max-width:200px;margin:16px auto 0}

/* warnings */
.warn{border-radius:14px;padding:16px;margin:0 0 14px;border:1px solid}
.warn h3{margin:0 0 6px;font-size:16px;display:flex;align-items:center;gap:8px}
.warn p{margin:6px 0 0;font-size:14px}
.warn.ponr{background:rgba(224,83,62,.12);border-color:var(--red);color:#ffd9d2}
.warn.ponr h3{color:var(--red)}
.warn .ack{margin-top:12px;min-height:46px;width:100%;border-radius:11px;border:none;font-weight:700;cursor:pointer}
.warn.ponr .ack{background:var(--red);color:#2a0b06}
.warn.acked{opacity:.55}
.warn.acked .ack{display:none}
.warn .howto{margin-top:10px}
.warn .howto>summary{cursor:pointer;font-size:13px;font-weight:700;opacity:.9}
.warn .howto p{margin:6px 0 0;font-size:13px}
.warn .howto code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:rgba(0,0,0,.28);padding:2px 5px;border-radius:6px;word-break:break-all}

/* picker */
.pack-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.pack-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 16px;
  color:var(--ink);text-decoration:none;min-height:var(--tap)}
.pack-list a:active{background:var(--panel2)}
.pack-list .pg{font-weight:700} .pack-list .pa{color:var(--gold-dim);font-size:20px}

/* tip bar */
.tipbar{position:sticky;bottom:0;background:linear-gradient(0deg,#100d0a,#15110d);
  border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}
[data-progress]{font-weight:700;color:var(--gold)}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE (Sami, 2026-07-25). The guide was built phone-first and #app was
   hard-capped at 560px with NO @media queries at all, so on an iPad or a 4K
   desktop it rendered as a narrow phone-width column with huge empty margins.
   These breakpoints widen the reading column and let the location sketches grow
   with it. Type size is left alone , only the measure and the sketch scale up.
   ───────────────────────────────────────────────────────────────────────────── */

/* Tablet / small laptop (iPad portrait ≈768, landscape ≈1024). ⭐ 2026-09-15: the column now
   uses the screen ("an iPad is not taking full advantage of the screen"), because the items are a
   grid and a grid wants width. The one thing that must stay narrow, a sentence, lives in a card. */
@media (min-width: 768px) {
  #app { max-width: min(96vw, 1400px); }
  body { font-size: 17px; }
  .sl-seg { min-width: 320px; }
}

/* Desktop */
@media (min-width: 1200px) {
  #app { max-width: min(96vw, 1500px); }
  body { font-size: 18px; }
}

/* Large desktop / 4K */
@media (min-width: 1800px) {
  #app { max-width: 1700px; }
}