/* Tilezilla production shell — mobile-first layout
 *
 * CSS design viewport (portrait, 1×):
 *   Small phone     360 × 640   → scale to fit (360/390)
 *   iPhone 13–15    390 × 844   ← author here (canonical)
 *   Common Android  393 × 852   → treated as 1× (within margin)
 *   Large phone     430 × 932   → scale to fit width (≈430/390)
 *   Tablet          768 × 1024+ → 2× canvas (≥780px wide)
 *   Desktop         ≥780px wide → 2× auto (Settings: lock 2× or 3×)
 *
 * Background: sky/dock layer + dual animated water layers on .tz-bg; UI on .tz-ui-layer.
 */

:root {
  --tz-design-width: 390px;
  --tz-frame-upscale: 1;
  --tz-design-height: 844px;
  --tz-desktop-breakpoint: 780px; /* 2 × 390 */
  --tz-ui-scale: 1;
  --tz-frame-upscale: 1;
  --tz-img-bg: url("/img/Background%20lake%20and%20dock.png");
  --tz-img-bg-inline: url("/img/Background lake and dock.png");
  --tz-img-bg-sky: url("/img/Background%20Sky%20and%20dock%20without%20water.png");
  --tz-img-bg-water-a: url("/img/Background%20water1.png");
  --tz-img-bg-water-b: url("/img/Background%20water2.png");
  --tz-ripple-duration-a: 14s;
  --tz-ripple-duration-b: 21s;
  --tz-ripple-amplitude-a: 8px;
  --tz-ripple-amplitude-b: 8px;
  --tz-ripple-amplitude: 8px;
  --tz-img-board-frame: url("/img/boardframes/Board%20Area-5x6.png");
  --tz-img-preview-frame: url("/img/preview%20tile%20Area%20bubble.png");
  --tz-img-check-solve-panel: url("/img/Check%20Solve%20nb.png");
  --tz-img-check-solve-btn: url("/img/Check%20Solve%20Button.png");
  --tz-img-invalid-solve-panel: url("/img/Invalid%20Solve.png");
  --tz-img-tilebag: url("/img/390x840-tile%20bag.png");
  --tz-img-tilebag-expanded: url("/img/expanded-tile%20bag.png");
  --tz-img-tilebag-handlebar: url("/img/handlebar-tilebag.png");
  --tz-tilebag-handlebar-art-w: 30;
  --tz-tilebag-handlebar-art-h: 5;
  /* Hint Rules art (MU-Hint Rules.png / DT-Hint Rules.png) */
  --tz-hint-rules-mu-w: 709;
  --tz-hint-rules-dt-w: 1122;
  --tz-hint-rules-top-vh: 7.7;
  --tz-hint-rules-height-vh: 92.3;
  --tz-hint-rules-max-design-width: 390px;
  --tz-hint-rules-width-scale: 0.95;
  --tz-hint-rules-nudge-x: 0px;
  --tz-hint-rules-nudge-y: 0px;
  --tz-hint-rules-scale: 1;
  --tz-hint-rules-exit-right: 6px;
  --tz-hint-rules-exit-bottom: 6px;
  --tz-hint-rules-exit-size: 48px;
  --tz-hint-rules-exit-nudge-x: 0px;
  --tz-hint-rules-exit-nudge-y: 0px;
  --tz-hint-rules-scroller-right: 1.5;
  --tz-hint-rules-scroller-top: 4;
  --tz-hint-rules-scroller-height: 88;
  --tz-hint-rules-scroller-track-scale: 1;
  --tz-hint-rules-scroller-pin-scale: 1;
  --tz-hint-rules-scroller-nudge-x: 0px;
  --tz-hint-rules-scroller-nudge-y: 0px;
  --tz-hint-rules-scroller-track-w: 22;
  --tz-hint-rules-scroller-pin-w: 22;
  --tz-hint-rules-scroller-pin-h: 36;
  --tz-journal-art-w: 844;
  --tz-journal-top-vh: 7.7;
  --tz-journal-height-vh: 92.3;
  --tz-journal-max-design-width: 390px;
  --tz-journal-width-scale: 0.95;
  --tz-journal-nudge-x: 0px;
  --tz-journal-nudge-y: -56px;
  --tz-journal-scale: 1;
  --tz-journal-exit-right: 6px;
  --tz-journal-exit-bottom: 6px;
  --tz-journal-exit-size: 48px;
  --tz-journal-exit-nudge-x: 0px;
  --tz-journal-exit-nudge-y: 0px;
  --tz-journal-scroller-right: 1.5;
  --tz-journal-scroller-top: 33;
  --tz-journal-scroller-height: 56;
  --tz-journal-scroller-track-scale: 1;
  --tz-journal-scroller-pin-scale: 1;
  --tz-journal-scroller-nudge-x: 0px;
  --tz-journal-scroller-nudge-y: 0px;
  --tz-journal-scroller-track-w: 22;
  --tz-journal-scroller-pin-w: 22;
  --tz-journal-scroller-pin-h: 36;
  --tz-journal-version-top: 13.2%;
  --tz-journal-version-nudge-x: 30px;
  --tz-journal-version-nudge-y: 2px;
  --tz-journal-version-font-scale: 0.73;
  --tz-journal-email-top: 20%;
  --tz-journal-email-nudge-x: 0px;
  --tz-journal-email-nudge-y: 0px;
  --tz-journal-email-font-scale: 0.96;

  --tz-settings-art-w: 390;
  --tz-settings-art-h: 844;
  --tz-settings-max-width: 390px;
  --tz-settings-pad-top: 20%;
  --tz-settings-pad-bottom: 20%;
  --tz-settings-pad-x: 9%;
  --tz-settings-chrome-min: 48px;
  --tz-settings-chrome-gap: 12px;
  --tz-settings-hit-size: 48px;
  --tz-settings-frame-nudge-x: 0px;
  /* Layout spec: 390×844 mobile artboard */
  --tz-safe: 8px;
  --tz-y-header: 0px;
  --tz-h-header: 48px;
  --tz-title-scale: 1.3;
  --tz-title-max-h: calc(38px * var(--tz-title-scale));
  --tz-title-max-w: calc(240px * var(--tz-title-scale));
  --tz-y-status: 56px;
  --tz-w-status: 374px;
  --tz-h-status: 72px;
  --tz-w-status-card: 118px;
  /* Rank bubble (left status card) */
  --tz-w-rank-panel: calc(var(--tz-w-status-card) * 0.5);
  --tz-h-rank-panel: calc(var(--tz-h-status) + 6px);
  --tz-rank-badge-top: 3px;
  --tz-rank-badge-h: calc(34px * 1.44 * 1.14);
  --tz-rank-badge-w-scale: 1.13;
  --tz-rank-lower-bottom: 10px;
  /* Sub-level overlays lower badge art (0–1 down the badge image) */
  --tz-rank-sublevel-anchor-y: 0.78;
  /* Sub-level icon defaults (overridden per level via inline vars from sublevel-icon.js) */
  --tz-rank-sublevel-icon-h: 9.6px;
  --tz-rank-sublevel-nudge-x: 0px;
  --tz-rank-sublevel-nudge-y: 0px;
  --tz-rank-sublevel-w-scale: 1;
  --tz-rank-lower-gap: 2px;
  --tz-rank-progress-nudge-y: 8px;
  /* Right edge shared by status row + header hint tokens */
  --tz-x-status-right: calc(var(--tz-safe) + var(--tz-w-status));
  --tz-hints-count-nudge-x: 20px;
  --tz-y-board: 136px;
  --tz-cell-size: 55px;
  --tz-board-frame-pad-x: 14px;
  --tz-board-frame-pad-y: 15px;
  --tz-max-board-cols: 5;
  --tz-max-board-rows: 6;
  --tz-board-rows: 6;
  --tz-board-cols: 5;
  --tz-w-board-frame: calc(var(--tz-board-cols) * var(--tz-cell-size) + 2 * var(--tz-board-frame-pad-x));
  --tz-h-board-frame: calc(var(--tz-board-rows) * var(--tz-cell-size) + 2 * var(--tz-board-frame-pad-y));
  /* Reserved screen area (original 5×6); smaller frames center inside without shifting chrome */
  --tz-w-board-slot: max(
    calc(var(--tz-max-board-cols) * var(--tz-cell-size) + 2 * var(--tz-board-frame-pad-x)),
    var(--tz-w-board-frame)
  );
  --tz-h-board-slot: max(
    calc(var(--tz-max-board-rows) * var(--tz-cell-size) + 2 * var(--tz-board-frame-pad-y)),
    var(--tz-h-board-frame)
  );
  --tz-x-board: calc((var(--tz-design-width) - var(--tz-w-board-slot)) / 2);
  --tz-board-grid-nudge-x: -1px;
  --tz-board-grid-nudge-y: 0px;
  --tz-board-frame-art-nudge-x: 0px;
  --tz-board-frame-art-nudge-y: 0px;
  /*
   * Board frame: 14px L/R, 15px T/B padding around the live grid.
   * --tz-board-rows / --tz-board-cols set per puzzle in board-frame.js.
   * Frame art sizes to the puzzle; .tz-board-section slot stays 5×6 (or grows if larger).
   */
  --tz-board-frame-scale: 1;
  --tz-cell-substrate: url("/img/Blank-bg-Tile.png");
  --tz-board-mb-image: url("/img/BG.png");

  --tz-y-message: calc(var(--tz-y-board) + var(--tz-h-board-slot) + 2px);
  --tz-y-message-nudge: -2px;
  --tz-h-message: 10px;
  --tz-preview-art-w: 1593;
  --tz-preview-art-h: 872;
  --tz-preview-display-scale: 0.93;
  --tz-preview-size-scale: 0.9;
  --tz-preview-height-scale: 1.00;
  --tz-tilebag-art-w: 381;
  --tz-tilebag-art-h: 74;
  --tz-tilebag-art-expanded-h: 226;
  /* Art slices (art px) — top tab fixed in both states so expand does not shrink the tab */
  --tz-tilebag-art-cap-top: 26;
  --tz-tilebag-art-cap-bottom-collapsed: 10;
  --tz-tilebag-art-cap-bottom: 22;
  --tz-tilebag-tab-h: calc(var(--tz-tilebag-art-cap-top) / var(--tz-tilebag-art-w) * var(--tz-w-tilebag));
  --tz-tilebag-expanded-cap-top: var(--tz-tilebag-tab-h);
  --tz-tilebag-expanded-cap-bottom: calc(var(--tz-tilebag-art-cap-bottom) / var(--tz-tilebag-art-w) * var(--tz-w-tilebag));
  /* Track slot bottom inset (art px) — can be less than skin cap so tiles sit lower in the graphic */
  --tz-tilebag-track-expanded-bottom-cap-art: var(--tz-tilebag-art-cap-bottom);
  --tz-tilebag-track-expanded-cap-bottom: calc(
    var(--tz-tilebag-track-expanded-bottom-cap-art) / var(--tz-tilebag-art-w) * var(--tz-w-tilebag)
  );
  --tz-tilebag-collapsed-cap-bottom: calc(var(--tz-tilebag-art-cap-bottom-collapsed) / var(--tz-tilebag-art-w) * var(--tz-w-tilebag));
  --tz-tilebag-tab-count-h: calc(var(--tz-tilebag-count-h) / var(--tz-tilebag-art-cap-top) * var(--tz-tilebag-tab-h));
  --tz-tilebag-art-offset-x: 0px;
  --tz-tilebag-art-offset-y: 0px;
  --tz-tilebag-art-scale: 1;
  --tz-tilebag-art-expanded-offset-x: 0px;
  --tz-tilebag-art-expanded-offset-y: 0px;
  --tz-tilebag-art-expanded-scale: 1;
  --tz-tilebag-tab-handle-top: calc(
    (var(--tz-tilebag-count-y) + var(--tz-tilebag-count-h)) / var(--tz-tilebag-art-cap-top) * var(--tz-tilebag-tab-h)
  );
  --tz-tilebag-count-x: 213;
  --tz-tilebag-count-y: 1;
  --tz-tilebag-count-w: 60;
  --tz-tilebag-count-h: 16;
  --tz-tilebag-count-nudge-x: -3px;
  --tz-tilebag-count-nudge-y: 0px;
  --tz-tilebag-count-expanded-nudge-x: 0px;
  --tz-tilebag-count-expanded-nudge-y: -3px;
  /* “Tile Bag” title — independent art anchor from count badge */
  --tz-tilebag-title-x: 143;
  --tz-tilebag-title-y: 1;
  --tz-tilebag-title-nudge-x: 0px;
  --tz-tilebag-title-nudge-y: 0px;
  --tz-tilebag-title-expanded-nudge-x: 0px;
  --tz-tilebag-title-expanded-nudge-y: 0px;
  /* Legacy — migrated to --tz-tilebag-title-x on load */
  --tz-tilebag-title-offset-x: -70px;
  --tz-tilebag-handle-x-offset: -55px;
  --tz-tilebag-handle-y-gap: 1px;
  --tz-tilebag-handle-nudge-x: 24px;
  --tz-tilebag-handle-nudge-y: -4px;
  /* Expanded-only handle nudge (defaults match collapsed; override as needed) */
  --tz-tilebag-handle-expanded-x-offset: var(--tz-tilebag-handle-x-offset);
  --tz-tilebag-handle-expanded-y-gap: var(--tz-tilebag-handle-y-gap);
  --tz-tilebag-handle-expanded-nudge-x: -8px;
  --tz-tilebag-handle-expanded-nudge-y: -1px;
  --tz-tilebag-handle-w: 32px;
  --tz-tilebag-handle-hit-h: 12px;
  /* Set to block to show chevron under the handlebar image */
  --tz-tilebag-handle-show-chevron: none;
  --tz-tilebag-handle-icon-collapsed: "▲";
  --tz-tilebag-handle-icon-expanded: "▼";
  --tz-x-preview: calc((var(--tz-design-width) - var(--tz-w-preview)) / 2);
  --tz-w-preview: calc(390px * var(--tz-preview-display-scale) * var(--tz-preview-size-scale));
  --tz-h-preview-base: calc(var(--tz-w-preview) * var(--tz-preview-art-h) / var(--tz-preview-art-w));
  --tz-preview-height-add: 4px;
  /* Stretch preview taller: down = grow at bottom (top fixed); up = grow at top (bottom fixed) */
  --tz-preview-height-stretch-down: 8px;
  --tz-preview-height-stretch-up: 4px;
  --tz-h-preview: calc(
    (var(--tz-h-preview-base) + var(--tz-preview-height-add)) * var(--tz-preview-height-scale)
    + var(--tz-preview-height-stretch-down)
    + var(--tz-preview-height-stretch-up)
  );
  /* Inner tile slot (art px — scaled from 919×446 layout) */
  --tz-preview-renderer-x-art: 437;
  --tz-preview-renderer-y-art: 219;
  --tz-preview-renderer-w-art: 719;
  --tz-preview-renderer-h-art: 493;
  --tz-preview-rotate-ccw-x-art: 113;
  --tz-preview-rotate-ccw-y-art: 338;
  --tz-preview-rotate-ccw-w-art: 277;
  --tz-preview-rotate-ccw-h-art: 205;
  --tz-preview-rotate-cw-x-art: 1205;
  --tz-preview-rotate-cw-y-art: 338;
  --tz-preview-rotate-cw-w-art: 277;
  --tz-preview-rotate-cw-h-art: 205;
  --tz-preview-tile-dir-x-art: 437;
  --tz-preview-tile-dir-y-art: 672;
  --tz-preview-tile-dir-w-art: 719;
  --tz-preview-tile-dir-h-art: 40;
  /* Action buttons on preview frame (preview tile Area bubble.png artboard) */
  --tz-preview-hint-x-art: 52;
  --tz-preview-hint-y-art: 228;
  --tz-preview-hint-w-art: 328;
  --tz-preview-hint-h-art: 92;
  --tz-preview-undo-x-art: 113;
  --tz-preview-undo-y-art: 562;
  --tz-preview-undo-w-art: 277;
  --tz-preview-undo-h-art: 118;
  --tz-preview-reset-x-art: 1205;
  --tz-preview-reset-y-art: 562;
  --tz-preview-reset-w-art: 277;
  --tz-preview-reset-h-art: 118;
  /* Discovery plaques — new 1393×1150 · duplicate 1400×1123 (4 art variants) */
  --tz-discovery-art-w: 1393;
  --tz-discovery-art-h: 1150;
  --tz-discovery-duplicate-art-w: 1400;
  --tz-discovery-duplicate-art-h: 1123;
  --tz-discovery-solution-total-x: 42%;
  --tz-discovery-solution-total-y: 22%;
  --tz-discovery-note-x: 50%;
  --tz-discovery-note-y: 28%;
  --tz-discovery-puzzle-id-x: 45%;
  --tz-discovery-puzzle-id-y: 36%;
  --tz-discovery-solution-found-x: 32%;
  --tz-discovery-solution-found-y: 43%;
  --tz-discovery-time-x: 18%;
  --tz-discovery-time-y: 56%;
  --tz-discovery-tokens-x: 48%;
  --tz-discovery-tokens-y: 56%;
  --tz-discovery-btn-continue-x: 8%;
  --tz-discovery-btn-continue-y: 84%;
  --tz-discovery-btn-continue-w: 38%;
  --tz-discovery-btn-continue-h: 11%;
  --tz-discovery-btn-advance-x: 52%;
  --tz-discovery-btn-advance-y: 84%;
  --tz-discovery-btn-advance-w: 38%;
  --tz-discovery-btn-advance-h: 11%;
  --tz-discovery-btn-view-found-x: 52%;
  --tz-discovery-btn-view-found-y: 84%;
  --tz-discovery-btn-view-found-w: 38%;
  --tz-discovery-btn-view-found-h: 11%;
  --tz-discovery-btn-book-x: 86%;
  --tz-discovery-btn-book-y: 58%;
  --tz-discovery-btn-book-w: 16%;
  --tz-discovery-btn-book-h: 22%;
  /* Discovery plaque — expands over preview + tile bag when shown */
  --tz-discovery-plaque-w-scale: 1.28;
  --tz-discovery-plaque-h-scale: 0.86;
  /* Already-found plaque width trim (1 = full; 0.8 ≈ 10% inset each side) */
  --tz-discovery-plaque-duplicate-w-scale: 0.8;
  --tz-discovery-expanded-bottom: calc(
    var(--tz-y-tilebag) + var(--tz-y-tilebag-nudge) + var(--tz-h-tilebag-frame)
  );
  --tz-discovery-expanded-h-base: calc(
    var(--tz-discovery-expanded-bottom) - var(--tz-y-preview) - var(--tz-y-preview-nudge)
  );
  --tz-discovery-expanded-h: calc(
    var(--tz-discovery-expanded-h-base) * var(--tz-discovery-plaque-h-scale)
  );
  /* Top aligns with normal preview section */
  --tz-discovery-expanded-top: calc(var(--tz-y-preview) + var(--tz-y-preview-nudge));
  --tz-discovery-expanded-w: calc(var(--tz-w-tilebag) * var(--tz-discovery-plaque-w-scale));
  --tz-discovery-expanded-w-duplicate: calc(
    var(--tz-discovery-expanded-w) * var(--tz-discovery-plaque-duplicate-w-scale)
  );
  --tz-discovery-expanded-x: calc(
    (var(--tz-design-width) - var(--tz-discovery-expanded-w)) / 2
  );
  --tz-discovery-expanded-x-duplicate: calc(
    (var(--tz-design-width) - var(--tz-discovery-expanded-w-duplicate)) / 2
  );
  /* Check-solve overlay — fits preview inner tile slot (same box as #activePad) */
  --tz-check-solve-nudge-x: 0px;
  --tz-check-solve-nudge-y: -5px;
  --tz-invalid-solve-nudge-y: -6px;
  --tz-check-solve-scale: 1.6;
  --tz-check-solve-btn-scale: 0.8;
  --tz-check-solve-btn-w: 81%;
  --tz-check-solve-btn-bottom: 6%;
  /* Hamburger menu plaques (Menu.png / Menu-devtools.png 1085×1450) */
  --tz-menu-art-w: 1085;
  --tz-menu-art-h: 1450;
  --tz-menu-display-w: 442px;
  --tz-menu-w-scale: 1.3;
  --tz-menu-hit-w: 74%;
  --tz-menu-hit-h: 5.8%;
  --tz-menu-close-x: 79.4%;
  --tz-menu-close-y: 13.2%;
  --tz-menu-close-w: 10.2%;
  --tz-menu-close-h: 8%;
  /* Standard menu row centers (Menu.png) */
  --tz-menu-puzzle-x: 50%;
  --tz-menu-puzzle-y: 23.8%;
  --tz-menu-puzzle-w: 59.5%;
  --tz-menu-puzzle-h: 6.8%;
  --tz-menu-found-x: 50%;
  --tz-menu-found-y: 30.6%;
  --tz-menu-found-w: 59.5%;
  --tz-menu-found-h: 5.8%;
  --tz-menu-stuck-x: 50%;
  --tz-menu-stuck-y: 37.4%;
  --tz-menu-stuck-w: 60.5%;
  --tz-menu-stuck-h: 5.8%;
  --tz-menu-hint-x: 50%;
  --tz-menu-hint-y: 44.2%;
  --tz-menu-hint-w: 60.5%;
  --tz-menu-hint-h: 6.3%;
  --tz-menu-settings-x: 49.5%;
  --tz-menu-settings-y: 51%;
  --tz-menu-settings-w: 60.5%;
  --tz-menu-settings-h: 6.3%;
  --tz-menu-leaderboard-x: 50%;
  --tz-menu-leaderboard-y: 60.2%;
  --tz-menu-leaderboard-w: 60%;
  --tz-menu-leaderboard-h: 6.8%;
  --tz-menu-journal-x: 50%;
  --tz-menu-journal-y: 67.8%;
  --tz-menu-journal-w: 61.5%;
  --tz-menu-journal-h: 7.3%;
  --tz-menu-bottom-menu-x: 50%;
  --tz-menu-bottom-menu-y: 75.2%;
  --tz-menu-bottom-menu-w: 61%;
  --tz-menu-bottom-menu-h: 6.3%;
  /* Dev menu row centers (Menu-devtools.png) */
  --tz-menu-dev-puzzle-x: 50%;
  --tz-menu-dev-puzzle-y: 23.8%;
  --tz-menu-dev-puzzle-w: 59%;
  --tz-menu-dev-puzzle-h: 7.3%;
  --tz-menu-dev-found-x: 50%;
  --tz-menu-dev-found-y: 30.6%;
  --tz-menu-dev-found-w: 60%;
  --tz-menu-dev-found-h: 6.3%;
  --tz-menu-dev-stuck-x: 50%;
  --tz-menu-dev-stuck-y: 37.4%;
  --tz-menu-dev-stuck-w: 60.5%;
  --tz-menu-dev-stuck-h: 5.8%;
  --tz-menu-dev-hint-x: 50%;
  --tz-menu-dev-hint-y: 44.2%;
  --tz-menu-dev-hint-w: 60.5%;
  --tz-menu-dev-hint-h: 6.3%;
  --tz-menu-dev-settings-x: 49.5%;
  --tz-menu-dev-settings-y: 51%;
  --tz-menu-dev-settings-w: 60.5%;
  --tz-menu-dev-settings-h: 6.3%;
  --tz-menu-dev-leaderboard-x: 50%;
  --tz-menu-dev-leaderboard-y: 59.8%;
  --tz-menu-dev-leaderboard-w: 60%;
  --tz-menu-dev-leaderboard-h: 6.3%;
  --tz-menu-dev-journal-x: 50%;
  --tz-menu-dev-journal-y: 67.4%;
  --tz-menu-dev-journal-w: 60%;
  --tz-menu-dev-journal-h: 6.8%;
  --tz-menu-dev-bottom-menu-x: 50%;
  --tz-menu-dev-bottom-menu-y: 71.2%;
  --tz-menu-dev-bottom-menu-w: 60%;
  --tz-menu-dev-bottom-menu-h: 6.8%;
  --tz-menu-dev-development-x: 50%;
  --tz-menu-dev-development-y: 79%;
  --tz-menu-dev-development-w: 59%;
  --tz-menu-dev-development-h: 7.3%;
  --tz-menu-offset-y: -50px;
  --tz-h-tilebag-hdr: 0px;
  --tz-h-tilebag-frame: 94px;
  --tz-h-tilebag-handle: 8px;
  /* Visible carousel recess = middle slice of tile-bag art (between tab + bottom cap) */
  --tz-tilebag-track-collapsed-h: calc(
    (var(--tz-tilebag-art-h) - var(--tz-tilebag-art-cap-top) - var(--tz-tilebag-art-cap-bottom-collapsed))
    / var(--tz-tilebag-art-h) * var(--tz-h-tilebag-frame)
  );
  --tz-tilebag-frame-header-h: 12px;
  --tz-tilebag-track-nudge-y: 0px;
  --tz-tilebag-thumb-v-nudge: -8px;
  --tz-tilebag-track-expanded-nudge-y: 0px;
  --tz-tilebag-expand-duration: 250ms;
  --tz-tilebag-expanded-max-rows: 3;
  /* Max px the expanded bag may grow upward past the preview bottom edge */
  --tz-tilebag-expanded-max-overlap: 72px;
  /* Multiplier on expanded frame height (1.1 = 10% taller / further up) */
  --tz-tilebag-expanded-grow-scale: 1.65;
  /* Subtract from computed expanded frame height */
  --tz-tilebag-expanded-height-trim: 40px;
  --tz-tilebag-row-h: calc(var(--tz-tilebag-cell) * var(--tz-tilebag-thumb-h-scale) + var(--tz-tilebag-row-gap));
  --tz-h-tilebag: var(--tz-h-tilebag-frame);
  --tz-x-tilebag: calc((var(--tz-design-width) - var(--tz-w-tilebag)) / 2);
  --tz-w-tilebag: 381px;
  --tz-w-content: 374px;
  --tz-tile-thumb: 44px;
  --tz-tile-thumb-selected: 48px;
  --tz-tilebag-cell: 34px;
  /* Domino art has vertical padding — slight trim only (too much clips bottom circles) */
  --tz-tilebag-thumb-h-scale: 0.92;
  --tz-tilebag-thumb-fit-inset-y: 6px;
  --tz-tilebag-track-left-art: 18;
  --tz-tilebag-track-width-art: 345;
  --tz-tilebag-arrow-prev-left-art: 0;
  --tz-tilebag-arrow-next-left-art: 366;
  --tz-tilebag-arrow-width-art: 15;
  --tz-tilebag-arrow-next-width-art: 15;
  --tz-tile-gap: 5px;
  --tz-tilebag-row-gap: 4px;
  /* Action bar (demo 917×1715 → 390×844) */
  --tz-x-actions: 4px;
  --tz-w-actions: 382px;
  --tz-h-actions: 56px;
  --tz-action-gap: 8px;
  --tz-btn-hint-w: 86px;
  --tz-btn-hint-h: 36px;
  /* use hint bubble.png artboard 315×111 — overlay coords as % of button */
  --tz-hint-art-w: 315;
  --tz-hint-art-h: 111;
  /* #hintBtnLabel — bottom gold plaque (art y ~82%) */
  --tz-hint-label-x: 50%;
  --tz-hint-label-y: 86%;
  --tz-hint-label-nudge-x: 0px;
  --tz-hint-label-nudge-y: -10px;
  --tz-hint-label-max-w: 78%;
  --tz-hint-label-pad-x: 4px;
  --tz-hint-label-pad-y: 1px;
  --tz-hint-label-font-size: 0.5rem;
  --tz-hint-label-bg: transparent;
  /* #hintBtn .tz-hint-btn__lock — lightbulb glass (art x ~17%, y ~52%) */
  --tz-hint-lock-x: 17%;
  --tz-hint-lock-y: 52%;
  --tz-hint-lock-size: 15px;
  --tz-hint-lock-nudge-x: 0px;
  --tz-hint-lock-nudge-y: 0px;
  /* Use-hint modal (usehintmenu-area.png artboard 1071×1248) */
  --tz-hint-menu-art-w: 1071;
  --tz-hint-menu-art-h: 1248;
  --tz-hint-menu-display-w: 300px;
  --tz-hint-menu-available-y: 19.2%;
  --tz-hint-menu-available-nudge-x: -42px;
  --tz-hint-menu-available-nudge-y: -14px;
  --tz-hint-menu-available-pad-x: 6px;
  --tz-hint-menu-available-min-width: auto;
  --tz-hint-menu-available-bg: transparent;
  --tz-hint-menu-close-x: 87.5%;
  --tz-hint-menu-close-y: 2.6%;
  /* +x = right, +y = down (use negative y to move up) */
  --tz-hint-menu-close-nudge-x: 12px;
  --tz-hint-menu-close-nudge-y: 12px;
  --tz-hint-menu-close-w: 6.8%;
  --tz-hint-menu-close-h: 5.8%;
  --tz-hint-menu-close-scale: 1.202;
  --tz-hint-menu-close-opacity: 1;
  --tz-hint-menu-token-x: 71%;
  --tz-hint-menu-token-w: 22.3%;
  --tz-hint-menu-token-h: 7.4%;
  --tz-hint-menu-token-random-y: 34.8%;
  --tz-hint-menu-token-random-nudge-x: -12px;
  --tz-hint-menu-token-random-nudge-y: -5px;
  --tz-hint-menu-token-start-y: 46.2%;
  --tz-hint-menu-token-start-nudge-x: -12px;
  --tz-hint-menu-token-start-nudge-y: 11px;
  --tz-hint-menu-token-end-y: 57.6%;
  --tz-hint-menu-token-end-nudge-x: -12px;
  --tz-hint-menu-token-end-nudge-y: 22px;
  --tz-hint-menu-cancel-x: 8.3%;
  --tz-hint-menu-cancel-y: 89.4%;
  --tz-hint-menu-cancel-w: 36%;
  --tz-hint-menu-cancel-h: 8.3%;
  --tz-hint-menu-confirm-x: 47.7%;
  --tz-hint-menu-confirm-y: 89.4%;
  --tz-hint-menu-confirm-w: 46.5%;
  --tz-hint-menu-confirm-h: 8.4%;

  --tz-stuck-art-w: 1379;
  --tz-stuck-art-h: 1098;
  --tz-stuck-reveal-art-w: 390;
  --tz-stuck-reveal-art-h: 312;
  --tz-stuck-display-w: 720px;
  --tz-stuck-width-scale: 0.75;
  --tz-stuck-preview-layout-width-ratio: 0.95;
  --tz-stuck-display-pad: 82px;
  --tz-stuck-preview-zone-w: 62%;
  --tz-stuck-preview-zone-h: 38%;
  --tz-stuck-warn-y: 82%;
  --tz-stuck-warn-nudge-y: 0px;
  --tz-stuck-keep-x: 6.2%;
  --tz-stuck-keep-y: 87.8%;
  --tz-stuck-keep-w: 32.7%;
  --tz-stuck-view-x: 49.2%;
  --tz-stuck-view-y: 87.8%;
  --tz-stuck-view-w: 38.2%;
  --tz-stuck-btn-h: 10.1%;
  /* Reveal art (Imstuckreveal.png) — route preview on the right */
  --tz-stuck-reveal-preview-x: 74%;
  --tz-stuck-reveal-preview-y: 24%;
  --tz-stuck-reveal-preview-w: 36%;
  --tz-stuck-reveal-preview-h: 58%;
  --tz-stuck-reveal-preview-width-scale: 0.95;
  --tz-stuck-reveal-preview-height-scale: 0.45;
  --tz-stuck-reveal-preview-board-scale: 1.45;
  --tz-stuck-reveal-preview-center-x: 1;
  --tz-stuck-reveal-keep-x: 4.5%;
  --tz-stuck-reveal-keep-y: 88.5%;
  --tz-stuck-reveal-keep-w: 27%;
  --tz-stuck-reveal-keep-h: 9.5%;
  --tz-stuck-reveal-close-x: 91%;
  --tz-stuck-reveal-close-y: 2.5%;
  --tz-stuck-reveal-close-w: 7%;
  --tz-stuck-reveal-close-h: 7%;

  /* Random puzzle popup — RandomPuzzle-Base.png 1024×811 frame (art may letterbox inside) */
  --tz-random-art-w: 1024;
  --tz-random-art-h: 811;
  --tz-random-display-pad: 32px;
  --tz-random-max-design-width: 390px;
  --tz-random-width-scale: 0.95;
  --tz-random-remain-x: 5.2%;
  --tz-random-remain-y: 82.2%;
  --tz-random-remain-w: 42.5%;
  --tz-random-remain-h: 12.5%;
  --tz-random-venture-x: 51.8%;
  --tz-random-venture-y: 82.2%;
  --tz-random-venture-w: 42.5%;
  --tz-random-venture-h: 12.5%;
  --tz-random-close-x: 90.2%;
  --tz-random-close-y: 1.6%;
  --tz-random-close-w: 6.8%;
  --tz-random-close-h: 7.2%;

  /* Challenge begin gate — ChallengeBeginBase.png 1397×1126 */
  --tz-challenge-begin-art-w: 1397;
  --tz-challenge-begin-art-h: 1126;
  --tz-challenge-begin-display-pad: 24px;
  --tz-challenge-begin-max-design-width: 520px;
  --tz-challenge-begin-width-scale: 1.15;
  --tz-challenge-begin-begin-x: 10%;
  --tz-challenge-begin-begin-y: 84.5%;
  --tz-challenge-begin-begin-w: 80%;
  --tz-challenge-begin-begin-h: 12.5%;
  --tz-challenge-begin-continue-x: 10%;
  --tz-challenge-begin-continue-y: 84.5%;
  --tz-challenge-begin-continue-w: 80%;
  --tz-challenge-begin-continue-h: 12.5%;

  /* Explorer profile overlay — Logged-in.png 1418×2200 */
  --tz-profile-art-w: 1418;
  --tz-profile-art-h: 2200;
  --tz-profile-display-pad: calc(
    max(8px, env(safe-area-inset-top, 0px))
    + max(8px, env(safe-area-inset-bottom, 0px))
  );
  --tz-profile-max-design-width: var(--tz-design-width, 390px);

  /* Puzzle Info popup — Puzzle-Info-Blank.png artboard 1120×1157 */
  --tz-pinfo-art-w: 1120;
  --tz-pinfo-art-h: 1157;
  --tz-pinfo-display-pad: 32px;
  --tz-pinfo-max-design-width: 390px;
  --tz-pinfo-field-color: #2d4f6e;
  --tz-pinfo-field-font: calc(0.72rem + 5px);
  --tz-pinfo-field-font-lg: calc(0.95rem + 5px);
  /* Rank badge (left emblem — reference mockup) */
  --tz-pinfo-rank-x: 6%;
  --tz-pinfo-rank-y: 16%;
  --tz-pinfo-rank-w: 27%;
  --tz-pinfo-rank-roman-y: 78%;
  --tz-pinfo-rank-roman-nudge-y: 2px;
  /* Value fields (right of baked-in labels on blank art) */
  --tz-pinfo-id-x: 62%;
  --tz-pinfo-id-y: 22%;
  --tz-pinfo-size-x: 62%;
  --tz-pinfo-size-y: 30.5%;
  --tz-pinfo-type-x: 62%;
  --tz-pinfo-type-y: 35%;
  --tz-pinfo-field-w: 34%;
  /* Solutions found (left column) */
  --tz-pinfo-bar-x: 10%;
  --tz-pinfo-bar-y: 46.5%;
  --tz-pinfo-bar-w: 36%;
  --tz-pinfo-bar-h: 2.8%;
  --tz-pinfo-bar-nudge-x: 26px;
  --tz-pinfo-bar-nudge-y: 31px;
  --tz-pinfo-found-x: 10%;
  --tz-pinfo-found-y: 55%;
  --tz-pinfo-found-w: 36%;
  /* Hints used (right column) */
  --tz-pinfo-hints-x: 68%;
  --tz-pinfo-hints-y: 55%;
  --tz-pinfo-hints-w: 22%;
  /* Best time / first solved (bottom row) */
  --tz-pinfo-best-x: 10%;
  --tz-pinfo-best-y: 70%;
  --tz-pinfo-best-w: 36%;
  --tz-pinfo-solved-x: 58%;
  --tz-pinfo-solved-y: 70%;
  --tz-pinfo-solved-w: 36%;
  /* Close controls */
  --tz-pinfo-close-x: 87.5%;
  --tz-pinfo-close-y: 2.6%;
  --tz-pinfo-close-w: 7.9%;
  --tz-pinfo-close-h: 7.6%;
  --tz-pinfo-close-nudge-x: 26px;
  --tz-pinfo-close-nudge-y: -1px;
  /* Close Journal — invisible hit over art label */
  --tz-pinfo-journal-x: 33%;
  --tz-pinfo-journal-y: 87%;
  --tz-pinfo-journal-w: 35.8%;
  --tz-pinfo-journal-h: 8.8%;
  --tz-pinfo-journal-nudge-x: -5px;
  --tz-pinfo-journal-nudge-y: -20px;
  /* Per-field nudge (tune without moving anchor) */
  --tz-pinfo-id-nudge-x: 8px;
  --tz-pinfo-id-nudge-y: -8px;
  --tz-pinfo-size-nudge-x: 15px;
  --tz-pinfo-size-nudge-y: -12px;
  --tz-pinfo-type-nudge-x: -5px;
  --tz-pinfo-type-nudge-y: 4px;
  --tz-pinfo-found-nudge-x: 20px;
  --tz-pinfo-found-nudge-y: 7px;
  --tz-pinfo-hints-nudge-x: 8px;
  --tz-pinfo-hints-nudge-y: 7px;
  --tz-pinfo-best-nudge-x: 0px;
  --tz-pinfo-best-nudge-y: 0px;
  --tz-pinfo-solved-nudge-x: -12px;
  --tz-pinfo-solved-nudge-y: 3px;

  /* Puzzle Journal — NewPuzzleJournalBlank.png 933×1686 (item vars from journal_layout.json) */
  --tz-journal-art-w: 933;
  --tz-journal-art-h: 1686;
  --tz-journal-display-pad: 16px;
  --tz-journal-max-design-width: 390px;
  --tz-journal-dialog-top: calc(
    var(--tz-y-header) + var(--tz-h-header) / 2 + var(--tz-title-max-h) / 2 + var(--tz-journal-title-gap, 12px)
  );
  --tz-journal-dialog-top-nudge: 0px;
  --tz-journal-title-gap: 12px;
  --tz-journal-field-color: #3d2e1a;
  --tz-journal-field-font: calc(0.62rem + 2px);
  --tz-journal-field-font-lg: calc(0.78rem + 2px);

  /* Journal revisit confirm — Revisit.png 1418×1048 */
  --tz-revisit-art-w: 1418;
  --tz-revisit-art-h: 1048;
  --tz-revisit-display-pad: 16px;
  --tz-revisit-width-scale: 0.94;
  --tz-revisit-puzzle-id-x: 54.5%;
  --tz-revisit-puzzle-id-y: 39.2%;
  --tz-revisit-puzzle-id-w: 38%;
  --tz-revisit-puzzle-id-h: 5%;
  --tz-revisit-solutions-x: 54.5%;
  --tz-revisit-solutions-y: 49.2%;
  --tz-revisit-solutions-w: 38%;
  --tz-revisit-solutions-h: 5%;
  --tz-revisit-solved-x: 54.5%;
  --tz-revisit-solved-y: 59.2%;
  --tz-revisit-solved-w: 38%;
  --tz-revisit-solved-h: 5%;
  --tz-revisit-cancel-x: 9.5%;
  --tz-revisit-cancel-y: 83.8%;
  --tz-revisit-cancel-w: 38.5%;
  --tz-revisit-cancel-h: 11.5%;
  --tz-revisit-revisit-x: 51.5%;
  --tz-revisit-revisit-y: 83.8%;
  --tz-revisit-revisit-w: 38.5%;
  --tz-revisit-revisit-h: 11.5%;
  --tz-revisit-field-font: clamp(0.58rem, 2.6cqi, 0.82rem);
  --tz-revisit-puzzle-id-font: var(--tz-revisit-field-font);
  --tz-revisit-solutions-font: var(--tz-revisit-field-font);
  --tz-revisit-solved-font: var(--tz-revisit-field-font);
  --tz-journal-label-font: calc(0.55rem + 1px);
  --tz-journal-pane-top-x: 8;
  --tz-journal-pane-top-y: 3;
  --tz-journal-pane-top-w: 84;
  --tz-journal-pane-top-h: 42;
  --tz-journal-pane-top-nudge-x: 0px;
  --tz-journal-pane-top-nudge-y: 0px;
  --tz-journal-field-id-x: 12;
  --tz-journal-field-id-y: 7;
  --tz-journal-field-id-w: 76;
  --tz-journal-field-id-h: 4.5;
  --tz-journal-field-id-nudge-x: 0px;
  --tz-journal-field-id-nudge-y: 0px;
  --tz-journal-field-type-x: 12;
  --tz-journal-field-type-y: 11.5;
  --tz-journal-field-type-w: 76;
  --tz-journal-field-type-h: 4.5;
  --tz-journal-field-type-nudge-x: 0px;
  --tz-journal-field-type-nudge-y: 0px;
  --tz-journal-field-size-x: 12;
  --tz-journal-field-size-y: 16;
  --tz-journal-field-size-w: 76;
  --tz-journal-field-size-h: 4.5;
  --tz-journal-field-size-nudge-x: 0px;
  --tz-journal-field-size-nudge-y: 0px;
  --tz-journal-field-total-x: 12;
  --tz-journal-field-total-y: 20.5;
  --tz-journal-field-total-w: 76;
  --tz-journal-field-total-h: 4.5;
  --tz-journal-field-total-nudge-x: 0px;
  --tz-journal-field-total-nudge-y: 0px;
  --tz-journal-field-found-x: 12;
  --tz-journal-field-found-y: 25;
  --tz-journal-field-found-w: 76;
  --tz-journal-field-found-h: 4.5;
  --tz-journal-field-found-nudge-x: 0px;
  --tz-journal-field-found-nudge-y: 0px;
  --tz-journal-field-first-x: 12;
  --tz-journal-field-first-y: 29.5;
  --tz-journal-field-first-w: 76;
  --tz-journal-field-first-h: 4.5;
  --tz-journal-field-first-nudge-x: 0px;
  --tz-journal-field-first-nudge-y: 0px;
  --tz-journal-field-last-x: 12;
  --tz-journal-field-last-y: 34;
  --tz-journal-field-last-w: 76;
  --tz-journal-field-last-h: 4.5;
  --tz-journal-field-last-nudge-x: 0px;
  --tz-journal-field-last-nudge-y: 0px;
  --tz-journal-progress-bar-x: 12;
  --tz-journal-progress-bar-y: 38.5;
  --tz-journal-progress-bar-w: 76;
  --tz-journal-progress-bar-h: 2.5;
  --tz-journal-progress-bar-nudge-x: 0px;
  --tz-journal-progress-bar-nudge-y: 0px;

  --tz-btn-drop-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  --tz-preview-hint-drop-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.38));
  /* Bottom nav plaque — NewBotmMenu.png 1698×456 */
  --tz-bottom-nav-art-w: 1678;
  --tz-bottom-nav-art-h: 310;
  --tz-bottom-nav-w-scale: 1;
  --tz-bottom-nav-h-scale: 1;
  --tz-nav-h-base: calc(var(--tz-design-width) * var(--tz-bottom-nav-art-h) / var(--tz-bottom-nav-art-w));
  --tz-nav-h: calc(var(--tz-nav-h-base) * var(--tz-bottom-nav-h-scale));
  --tz-bottom-nav-offset-y: 0px;
  --tz-bottom-nav-hit-w: 18%;
  --tz-bottom-nav-hit-h: 88%;
  --tz-bottom-nav-hit-y: 50%;
  --tz-bottom-nav-daily-challenge-x: 10%;
  --tz-bottom-nav-daily-challenge-y: 50%;
  --tz-bottom-nav-adventure-x: 30%;
  --tz-bottom-nav-adventure-y: 50%;
  --tz-bottom-nav-random-x: 50%;
  --tz-bottom-nav-random-y: 50%;
  --tz-bottom-nav-library-x: 70%;
  --tz-bottom-nav-library-y: 50%;
  --tz-bottom-nav-profile-x: 90%;
  --tz-bottom-nav-profile-y: 50%;
  /* One tab segment ≈ 20% of plaque width (5 tabs) */
  --tz-bottom-nav-hover-w: 20%;
  --tz-y-nav: calc(var(--tz-design-height) - var(--tz-nav-h));
  --tz-gap-above-nav: 0px;
  --tz-gap-preview-tilebag: 4px;
  --tz-gap-tilebag-hdr-carousel: 0px;
  /* Tile bag sits just above bottom nav (action buttons live on preview frame) */
  --tz-tilebag-nav-gap: 8px;
  --tz-y-tilebag: calc(var(--tz-y-nav) - var(--tz-gap-above-nav) - var(--tz-tilebag-nav-gap) - var(--tz-h-tilebag-frame));
  /* Preview bottom sits exactly --tz-gap-preview-tilebag above tile bag (uses rendered height) */
  --tz-y-preview: calc(
    var(--tz-y-tilebag) + var(--tz-y-tilebag-nudge)
    - var(--tz-gap-preview-tilebag)
    - var(--tz-h-preview)
  );
  --tz-y-tilebag-nudge: 25px;
  --tz-y-preview-nudge: 0px;
  /* Preview tile slot (#activePad) — negative = move up in the bubble */
  --tz-preview-slot-nudge-y: -10px;
  --tz-preview-renderer-stage-width-scale: 0.9;
  /* Fine-tune tile graphic inside the slot — negative = move up (independent of slot) */
  --tz-preview-tile-offset-x: 0px;
  --tz-preview-tile-offset-y: -1px;
  /* Shrink preview tile vs pad — only when clamp is on (see renderActivePreview) */
  --tz-preview-tile-fit-inset-x: 2px;
  --tz-preview-tile-fit-inset-y: 2px;
  /* 1 = board cell pixels (55px); only shrink if clamp-to-slot is 1 */
  --tz-preview-tile-board-scale: 1;
  --tz-preview-tile-clamp-to-slot: 0;
  /* Extra multiplier per rotation (1 = same as board size for that orientation) */
  --tz-preview-tile-rot0-scale: .96;
  --tz-preview-tile-rot90-scale: .96;
  --tz-preview-tile-rot0-scale-w: .96;
  --tz-preview-tile-rot0-scale-h: .96;
  --tz-preview-tile-rot90-scale-w: .96;
  --tz-preview-tile-rot90-scale-h: .96;
  --tz-preview-dir-font-size: calc(0.9rem * 0.9);
  --tz-preview-tile-dir-nudge-x: 0px;
  --tz-preview-tile-dir-nudge-y: 0px;
  --tz-teal-dark: #1a3d3a;
  --tz-teal: #2a5c56;
  --tz-teal-mid: #3d7a72;
  --tz-green: #3d6b3a;
  --tz-green-btn: #2f5e32;
  --tz-wood-dark: #3d2817;
  --tz-wood: #5c3d24;
  --tz-wood-mid: #7a5230;
  --tz-wood-light: #a67c52;
  --tz-gold: #c9a227;
  --tz-gold-bright: #e8b923;
  --tz-orange: #d4881c;
  --tz-cream: #f0e6d3;
  --tz-text: #f5f0e6;
  --tz-text-muted: #b8cfc8;
  --tz-panel-bg: rgba(20, 48, 44, 0.88);
  --tz-panel-border: rgba(180, 140, 80, 0.45);
  --tz-cell-empty: #2a2420;
  --tz-cell-border: #1a1612;
  --tz-radius: 10px;
  --tz-radius-lg: 14px;
  --tz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tz-shell-h: calc(var(--tz-design-height) - var(--tz-nav-h));
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--tz-teal-dark);
  color: var(--tz-text);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* ── Load screen (index.html) — 390×844 stage, 2× on desktop (tilezilla-ui-scale.js) ── */

.tz-load-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--tz-teal-dark);
}

.tz-load-screen--with-carousel {
  display: flex;
  flex-direction: column;
}

.tz-load-screen--with-carousel .tz-load-screen__art-wrap {
  position: relative;
  left: auto;
  top: auto;
  flex: 0 0 auto;
  width: 100%;
  max-height: var(--tz-load-art-max-h, 58%);
  aspect-ratio: var(--tz-load-art-aspect, 375 / 467);
  z-index: 2;
}

.tz-load-screen__carousel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  background: transparent;
}

.tz-load-screen__carousel-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tz-load-screen__carousel-slide-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  pointer-events: none;
}

.tz-load-screen__carousel-slide {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: scale(
    calc(var(--tz-load-carousel-slide-w, 100) / 100),
    calc(var(--tz-load-carousel-slide-h, 100) / 100)
  );
  transform-origin: center center;
}

.tz-load-screen__carousel-arrow {
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tz-load-screen__carousel-arrow--prev {
  left: var(--tz-load-carousel-prev-x, 6%);
  top: var(--tz-load-carousel-prev-y, 87.5%);
  width: var(--tz-load-carousel-prev-w, 11%);
  height: var(--tz-load-carousel-prev-h, 8%);
}

.tz-load-screen__carousel-arrow--next {
  left: var(--tz-load-carousel-next-x, 83%);
  top: var(--tz-load-carousel-next-y, 87.5%);
  width: var(--tz-load-carousel-next-w, 11%);
  height: var(--tz-load-carousel-next-h, 8%);
}

.tz-load-screen__carousel-arrow:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.tz-load-screen__carousel-play {
  position: absolute;
  left: var(--tz-load-carousel-play-x, 41%);
  top: var(--tz-load-carousel-play-y, 30%);
  width: var(--tz-load-carousel-play-w, 18%);
  height: var(--tz-load-carousel-play-h, 16%);
  border: 3px solid rgba(232, 201, 106, 0.9);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(90, 40, 40, 0.92) 0%, rgba(30, 12, 12, 0.95) 72%);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.tz-load-screen__carousel-play[hidden] {
  display: none !important;
}

.tz-load-screen__carousel-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #e8c96a;
}

.tz-load-screen__video-layer {
  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  width: calc(var(--tz-design-width) * var(--tz-ui-scale, 1));
  height: calc(var(--tz-design-height) * var(--tz-ui-scale, 1));
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tz-load-screen__video-layer[hidden] {
  display: none !important;
}

.tz-load-screen__video-dialog {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.tz-load-screen__video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #000;
}

.tz-load-screen__video-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.tz-main-v2-app .tz-load-screen {
  background: transparent;
}

.tz-load-screen__art-wrap {
  position: absolute;
  left: var(--tz-load-art-x, 0%);
  top: var(--tz-load-art-y, 0%);
  width: var(--tz-load-art-w, 100%);
  max-height: var(--tz-load-art-h, 100%);
  aspect-ratio: var(--tz-load-art-aspect, 375 / 467);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.tz-load-screen__art-wrap .tz-load-screen__hit {
  pointer-events: auto;
}

.tz-load-screen__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--tz-load-art-fit, fill);
  object-position: var(--tz-load-art-position, top center);
  user-select: none;
  pointer-events: none;
}

.tz-load-screen__preview {
  position: absolute;
  left: var(--tz-load-preview-x, 11%);
  top: var(--tz-load-preview-y, 33%);
  width: var(--tz-load-preview-w, 78%);
  height: var(--tz-load-preview-h, 24%);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.tz-load-screen__preview[hidden] {
  display: none !important;
}

.tz-load-screen__preview-frame {
  width: 100%;
  height: 100%;
  background-image: var(
    --tz-load-preview-frame-bg,
    var(--tz-img-preview-frame)
  );
  background-position: top center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tz-load-screen__hit {
  position: absolute;
  z-index: 3;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: transparent;
}

.tz-load-screen__hit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.load-screen-tuner-page .tz-load-screen__hit img {
  opacity: 0.85;
}

.load-screen-tuner-page .tz-load-screen__carousel-arrow.tuner-box,
.load-screen-tuner-page .tz-load-screen__carousel-play.tuner-box {
  background: rgba(100, 200, 255, 0.28) !important;
  border: 2px solid rgba(100, 200, 255, 0.85) !important;
  border-radius: 50%;
  z-index: 6;
  pointer-events: auto;
  cursor: move;
}

.load-screen-tuner-page .tz-load-screen__carousel-play.tuner-box {
  border-radius: 50%;
}

.load-screen-tuner-page .tz-load-screen__carousel-viewport.is-tuner-slide-active {
  outline: 2px dashed rgba(232, 185, 35, 0.85);
  outline-offset: -2px;
}

.load-screen-tuner-page .tz-load-screen__carousel-slide-wrap.tuner-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  background: rgba(255, 180, 80, 0.1) !important;
  border: 2px dashed rgba(255, 180, 80, 0.75) !important;
  pointer-events: auto;
  cursor: default;
  z-index: 3;
}

.load-screen-tuner-page .tz-load-screen__carousel-slide-wrap .tz-load-screen__carousel-slide {
  pointer-events: none;
}

.tz-load-screen__hit--guest {
  left: var(--tz-load-guest-x, 4.5%);
  top: var(--tz-load-guest-y, 58.5%);
  width: var(--tz-load-guest-w, 44%);
  height: var(--tz-load-guest-h, 11.5%);
}

.tz-load-screen__hit--login {
  left: var(--tz-load-login-x, 51%);
  top: var(--tz-load-login-y, 58.5%);
  width: var(--tz-load-login-w, 44%);
  height: var(--tz-load-login-h, 11.5%);
}

/* ── Main screen v2 draft (main-screen-v2.html) — 390×844, same scale host as index ── */

.tz-main-v2-app .tz-main-v2__foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 5;
  margin: 0;
  text-align: center;
  font: 0.72rem/1.4 system-ui, sans-serif;
  color: rgba(244, 236, 216, 0.75);
  pointer-events: none;
}

.tz-main-v2-app .tz-main-v2__foot a {
  color: #8fd49a;
  pointer-events: auto;
}

.tz-main-v2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.tz-main-v2-app .tz-bg__sky {
  background-image: var(--tz-msv2-bg, url("/img/Background%20lake%20and%20sun-no-water.png"));
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.tz-main-v2-app .tz-bg__water {
  display: block;
}

.tz-main-v2-app .tz-bg__water-layer--a {
  background-image: var(--tz-msv2-bg-water-a, url("/img/Background%20lake%20and%20sun-Just-water1.png"));
}

.tz-main-v2-app .tz-bg__water-layer--b {
  background-image: var(--tz-msv2-bg-water-b, url("/img/Background%20lake%20and%20sun-Just-water2.png"));
}

.tz-main-v2__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--tz-msv2-art-fit, cover);
  object-position: var(--tz-msv2-art-position, center center);
  user-select: none;
  pointer-events: none;
}

.tz-main-v2__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  text-align: center;
  font: 0.75rem/1.45 system-ui, sans-serif;
  color: rgba(244, 236, 216, 0.65);
  pointer-events: none;
}

.tz-main-v2__placeholder a {
  color: #8fd49a;
  pointer-events: auto;
}

.tz-main-v2__guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tz-main-v2__zone {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed rgba(232, 185, 35, 0.45);
  background: rgba(100, 200, 255, 0.06);
}

.tz-main-v2__zone--menu {
  left: var(--tz-msv2-menu-x, 2.05%);
  top: var(--tz-msv2-menu-y, 0.95%);
  width: var(--tz-msv2-menu-w, 11.69%);
  height: var(--tz-msv2-menu-h, 5.41%);
}

.tz-main-v2__zone--title {
  left: var(--tz-msv2-title-x, 20.51%);
  top: var(--tz-msv2-title-y, 0.47%);
  width: var(--tz-msv2-title-w, 58.99%);
  height: var(--tz-msv2-title-h, 6.65%);
}

.tz-main-v2__zone--top-bar {
  left: var(--tz-msv2-top-bar-x, 0%);
  top: var(--tz-msv2-top-bar-y, 0%);
  width: var(--tz-msv2-top-bar-w, 100%);
  height: var(--tz-msv2-top-bar-h, 7.58%);
}

.tz-main-v2__zone--board {
  left: var(--tz-msv2-board-x, 0%);
  top: var(--tz-msv2-board-y, 7.7%);
  width: var(--tz-msv2-board-w, 100%);
  height: var(--tz-msv2-board-h, 46.21%);
}

.tz-main-v2__zone--info-bar {
  left: var(--tz-msv2-info-bar-x, 0%);
  top: var(--tz-msv2-info-bar-y, var(--tz-msv2-board-y, 7.7%));
  width: var(--tz-msv2-info-bar-w, 100%);
  height: var(--tz-msv2-info-bar-h, 1.78%);
}

.tz-main-v2__zone--info-tip {
  left: var(--tz-msv2-info-tip-x, 0%);
  top: var(--tz-msv2-info-tip-y, 7.15%);
  width: var(--tz-msv2-info-tip-w, 100%);
  height: var(--tz-msv2-info-tip-h, 0.85%);
}

.tz-main-v2__zone--preview {
  left: var(--tz-msv2-preview-x, 0%);
  top: var(--tz-msv2-preview-y, 56.17%);
  width: var(--tz-msv2-preview-w, 100%);
  height: var(--tz-msv2-preview-h, 30.69%);
}

.tz-main-v2__zone--tilebag {
  left: var(--tz-msv2-tilebag-x, 0%);
  top: var(--tz-msv2-tilebag-y, 88.15%);
  width: var(--tz-msv2-tilebag-w, 100%);
  height: var(--tz-msv2-tilebag-h, 11.85%);
}

.tz-main-v2__zone--bottom-menu-panel {
  left: var(--tz-msv2-bottom-menu-panel-x, 0%);
  top: var(--tz-msv2-bottom-menu-panel-y, 78.5%);
  width: var(--tz-msv2-bottom-menu-panel-w, 100%);
  height: var(--tz-msv2-bottom-menu-panel-h, 21.5%);
}

.tz-main-v2__zone--bottom-menu-tab {
  left: var(--tz-msv2-bottom-menu-tab-x, 22%);
  top: var(--tz-msv2-bottom-menu-tab-y, 96.2%);
  width: var(--tz-msv2-bottom-menu-tab-w, 56%);
  height: var(--tz-msv2-bottom-menu-tab-h, 3.8%);
}

.tz-main-v2__zone--bottom-menu-close-tab {
  left: var(--tz-msv2-bottom-menu-close-tab-x, 22%);
  top: var(--tz-msv2-bottom-menu-close-tab-y, 74.7%);
  width: var(--tz-msv2-bottom-menu-close-tab-w, 56%);
  height: var(--tz-msv2-bottom-menu-close-tab-h, 3.8%);
}

.tz-main-v2-app .tz-main-v2__tilebag-mock {
  position: absolute;
  left: var(--tz-msv2-tilebag-x, 0%);
  top: var(--tz-msv2-tilebag-y, 88.15%);
  width: var(--tz-msv2-tilebag-w, 100%);
  height: var(--tz-msv2-tilebag-h, 11.85%);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}

.tz-main-v2-app .tz-main-v2__draft-bar {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: calc(100% - 16px);
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(20, 48, 44, 0.92);
  border: 1px solid rgba(196, 163, 90, 0.35);
}

.tz-main-v2-app .tz-main-v2__draft-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(196, 163, 90, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #f4ecd8;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.tz-main-v2-app .tz-main-v2__draft-btn.is-active {
  border-color: #e8b923;
  background: rgba(232, 185, 35, 0.2);
}

.tz-main-v2-app.is-guides-hidden .tz-main-v2__guides {
  display: none;
}

.tz-main-v2__zone::after {
  content: attr(data-label);
  position: absolute;
  top: 2px;
  left: 4px;
  font: 600 9px/1.2 system-ui, sans-serif;
  color: rgba(232, 185, 35, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.main-screen-v2-tuner-page .tz-main-v2__guides {
  display: none;
}

.main-screen-v2-tuner-page .tz-main-v2__placeholder {
  display: none;
}

.main-screen-v2-tuner-page .tz-info-bar--tuner-mock {
  z-index: 1;
  pointer-events: none;
}

.main-screen-v2-tuner-page .tz-info-tip--tuner-mock {
  z-index: 1;
  pointer-events: none;
}

.main-screen-v2-tuner-page .tz-main-v2__zone-hit {
  position: absolute;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(100, 200, 255, 0.28);
  border: 2px solid rgba(100, 200, 255, 0.85);
  cursor: move;
  z-index: 8;
}

.main-screen-v2-tuner-page .tz-main-v2__zone-hit.is-tuner-active {
  border-color: #e8b923;
  box-shadow: 0 0 0 2px rgba(232, 185, 35, 0.65);
  z-index: 9;
}

/* ── Main screen v2 playable shell (game chrome in msv2 zones) ── */

.tz-main-v2-app {
  --tz-shell-h: var(--tz-design-height);
  --tz-preview-slot-nudge-y: 0px;
  --tz-info-layout-text: #fff;
}

/* Prevent blue drag-select on board, preview, tile bag, and in-game chrome */
.tz-main-v2-app .tz-stage,
.tz-main-v2-app .tz-stage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tz-main-v2-app .tz-status,
.tz-main-v2-app .tz-hints,
.tz-main-v2-app .tz-guest-banner,
.tz-main-v2-app .tz-game-message {
  display: none !important;
}

/* Info tip — below title bar (position from main-screen v2 layout tuner) */
.tz-main-v2-app .tz-info-tip {
  position: absolute;
  left: var(--tz-msv2-info-tip-x, 0%);
  top: var(--tz-msv2-info-tip-y, 7.15%);
  width: var(--tz-msv2-info-tip-w, 100%);
  height: var(--tz-msv2-info-tip-h, 0.85%);
  z-index: 3;
  margin: 0;
  padding: 0 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  container-type: size;
  text-align: center;
  font-size: var(--tz-msv2-info-tip-font, clamp(7px, 58cqh, 13px));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--tz-info-layout-text, #fff);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 1px rgba(0, 0, 0, 0.85);
}

.tz-main-v2-app .tz-info-tip[hidden] {
  display: none !important;
}

/* Info bar — overlay on board (position from main-screen v2 layout tuner) */
.tz-main-v2-app .tz-info-bar {
  position: absolute;
  left: var(--tz-msv2-info-bar-x, 0%);
  top: var(--tz-msv2-info-bar-y, var(--tz-msv2-board-y, 7.7%));
  width: var(--tz-msv2-info-bar-w, 100%);
  height: var(--tz-msv2-info-bar-h, 1.78%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  container-type: size;
}

.tz-main-v2-app .tz-info-bar__text {
  margin: 0;
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(8px, 65cqh, 14px);
  font-weight: 600;
  line-height: 1;
  color: var(--tz-info-layout-text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 1px rgba(0, 0, 0, 0.85);
}

.tz-main-v2-app .tz-header {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  pointer-events: none;
  z-index: 10;
}

.tz-main-v2-app .tz-menu-btn {
  position: absolute;
  left: var(--tz-msv2-menu-x, 2.05%);
  top: var(--tz-msv2-menu-y, 0.95%);
  width: var(--tz-msv2-menu-w, 11.69%);
  height: var(--tz-msv2-menu-h, 5.41%);
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: auto;
  z-index: 1;
}

.tz-main-v2-app .tz-menu-btn__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tz-main-v2-app .tz-title-img {
  position: absolute;
  left: var(--tz-msv2-title-x, 20.51%);
  top: var(--tz-msv2-title-y, 0.47%);
  width: var(--tz-msv2-title-w, 58.99%);
  height: var(--tz-msv2-title-h, 6.65%);
  transform: none;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.tz-main-v2-app .tz-board-section {
  top: var(--tz-msv2-board-y, 7.7%);
  left: var(--tz-msv2-board-x, 0%);
  width: var(--tz-msv2-board-w, 100%);
  height: var(--tz-msv2-board-h, 46.21%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tz-main-v2-app .tz-board-frame {
  width: var(--tz-w-board-frame);
  height: var(--tz-h-board-frame);
  max-width: 100%;
  max-height: 100%;
  transform: scale(var(--tz-msv2-board-fit-scale, 1));
  transform-origin: center center;
}

.tz-main-v2-app .tz-hint-menu-root {
  top: var(--tz-msv2-board-y, 7.7%);
  left: var(--tz-msv2-board-x, 0%);
  width: var(--tz-msv2-board-w, 100%);
  height: var(--tz-msv2-board-h, 46.21%);
}

.tz-main-v2-app .tz-preview-section {
  top: var(--tz-msv2-preview-y, 56.17%);
  left: var(--tz-msv2-preview-x, 0%);
  width: var(--tz-msv2-preview-w, 100%);
  height: var(--tz-msv2-preview-h, 30.69%);
}

.tz-main-v2-app .tz-preview-frame {
  width: 100%;
  height: 100%;
  background-image: var(
    --tz-preview-v2-frame-bg,
    var(--tz-img-preview-frame)
  );
  background-position: top center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tz-main-v2-app .tz-tilebag-container {
  top: var(--tz-msv2-tilebag-y, 88.15%);
  /* Match preview zone horizontally so left/right edges line up */
  left: var(--tz-msv2-preview-x, var(--tz-msv2-tilebag-x, 0%));
  width: var(--tz-msv2-preview-w, var(--tz-msv2-tilebag-w, 100%));
  height: var(--tz-msv2-tilebag-h, 11.85%);
  --tz-y-tilebag-nudge: 0px;
  --tz-x-tilebag: 0;
  --tz-w-tilebag: 100%;
  --tz-h-tilebag-frame: 100%;
}

/* Main screen v2 — expandable bottom menu (tab + drawer) */

.tz-main-v2-app .tz-bottom-menu-v2 {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}

.tz-bottom-menu-v2__tab {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
}

.tz-bottom-menu-v2__tab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.tz-bottom-menu-v2__tab--open {
  left: var(--tz-msv2-bottom-menu-tab-x, 22%);
  top: var(--tz-msv2-bottom-menu-tab-y, 96.2%);
  width: var(--tz-msv2-bottom-menu-tab-w, 56%);
  height: var(--tz-msv2-bottom-menu-tab-h, 3.8%);
  z-index: 3;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.tz-bottom-menu-v2__tab--open[hidden] {
  display: none !important;
}

.tz-bottom-menu-v2__tab--close {
  left: var(--tz-msv2-bottom-menu-close-tab-x, 22%);
  top: var(--tz-msv2-bottom-menu-close-tab-y, 74.7%);
  width: var(--tz-msv2-bottom-menu-close-tab-w, 56%);
  height: var(--tz-msv2-bottom-menu-close-tab-h, 3.8%);
  z-index: 3;
  filter: none;
  background-color: var(--tz-msv2-bottom-menu-close-tab-bg, transparent);
}

.tz-bottom-menu-v2__tab--close img {
  opacity: var(--tz-msv2-bottom-menu-close-tab-opacity, 1);
}

.tz-bottom-menu-v2__tab--close[hidden] {
  display: none !important;
}

.tz-bottom-menu-v2__drawer {
  position: absolute;
  left: var(--tz-msv2-bottom-menu-panel-x, 0%);
  top: var(--tz-msv2-bottom-menu-panel-y, 78.5%);
  width: var(--tz-msv2-bottom-menu-panel-w, 100%);
  height: var(--tz-msv2-bottom-menu-panel-h, 21.5%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  pointer-events: auto;
  box-sizing: border-box;
  background: transparent;
}

.tz-bottom-menu-v2__drawer[hidden] {
  display: none !important;
}

.tz-bottom-nav--v2-drawer {
  position: relative;
  left: auto;
  bottom: auto;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  padding-bottom: 0;
  align-items: stretch;
  justify-content: center;
}

.tz-bottom-nav--v2-drawer .tz-bottom-nav-plaque {
  width: 100%;
  height: 100%;
  max-width: var(--tz-design-width);
  margin: 0 auto;
  transform: translateY(var(--tz-bottom-nav-offset-y));
}

.tz-app.is-bottom-menu-open .tz-bottom-menu-v2__tab--open {
  display: none !important;
}

.tz-main-v2-app:has(.tz-tilebag-container.is-expanded) .tz-bottom-menu-v2 {
  visibility: hidden;
  pointer-events: none;
}

/* Preview v2 data overlays (Game_Data, User_data, Info_data, Timer_data) */

.tz-preview-v2-data {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
  container-type: inline-size;
}

.tz-main-v2-app .tz-preview-v2-user-data,
.tz-main-v2-app .tz-preview-v2-game-data {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.tz-main-v2-app .tz-preview-v2-user-data:focus-visible,
.tz-main-v2-app .tz-preview-v2-game-data:focus-visible {
  outline: 2px solid rgba(232, 185, 35, 0.85);
  outline-offset: 1px;
}

.tz-preview-v2-game-data {
  left: calc(var(--tz-preview-game-data-x-art, 308) / var(--tz-preview-art-w, 390) * 100%);
  top: calc(var(--tz-preview-game-data-y-art, 56) / var(--tz-preview-art-h, 259) * 100%);
  width: calc(var(--tz-preview-game-data-w-art, 70) / var(--tz-preview-art-w, 390) * 100%);
  height: calc(var(--tz-preview-game-data-h-art, 46) / var(--tz-preview-art-h, 259) * 100%);
  min-height: 1px;
}

.tz-preview-v2-user-data {
  left: calc(var(--tz-preview-user-data-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-user-data-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-user-data-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-user-data-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-preview-v2-info-data {
  left: calc(var(--tz-preview-info-data-x-art, 308) / var(--tz-preview-art-w, 390) * 100%);
  top: calc(var(--tz-preview-info-data-y-art, 164) / var(--tz-preview-art-h, 259) * 100%);
  width: calc(var(--tz-preview-info-data-w-art, 68) / var(--tz-preview-art-w, 390) * 100%);
  height: calc(var(--tz-preview-info-data-h-art, 46) / var(--tz-preview-art-h, 259) * 100%);
  min-height: 1px;
}

.tz-preview-v2-timer-data {
  left: calc(var(--tz-preview-timer-data-x-art, 14) / var(--tz-preview-art-w, 390) * 100%);
  top: calc(var(--tz-preview-timer-data-y-art, 166) / var(--tz-preview-art-h, 259) * 100%);
  width: calc(var(--tz-preview-timer-data-w-art, 58) / var(--tz-preview-art-w, 390) * 100%);
  height: calc(var(--tz-preview-timer-data-h-art, 44) / var(--tz-preview-art-h, 259) * 100%);
  min-height: 1px;
}

.tz-preview-hint-slot {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  box-sizing: border-box;
  left: calc(var(--tz-preview-hint-preview-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-hint-preview-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-hint-preview-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-hint-preview-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-preview-hint-slot > .tz-preview-v2-hint-plaque--count,
.tz-preview-hint-slot > .tz-preview-v2-hint-token-count--count,
.tz-preview-hint-slot > .tz-preview-v2-hint-token-add {
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.tz-preview-hint-use-slot {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
  box-sizing: border-box;
  left: calc(var(--tz-preview-renderer-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-renderer-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-renderer-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-renderer-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-preview-hint-use-slot > .tz-preview-v2-hint-plaque--use,
.tz-preview-hint-use-slot > .tz-preview-v2-hint-use-btn {
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.tz-preview-hint-use-slot[hidden] {
  display: none !important;
}

.tz-preview-hint-slot[hidden] {
  display: none !important;
}

/* Legacy Hint_data zone marker (preview-v2 tuner) */
.tz-preview-v2-hint-data {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  box-sizing: border-box;
  left: calc(var(--tz-preview-hint-data-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-hint-data-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-hint-data-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-hint-data-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-main-v2-app .tz-preview-v2-data {
  display: block;
  padding: 0;
  overflow: visible;
  font: 600 clamp(6px, 9cqi, 11px) / 1.2 system-ui, sans-serif;
  color: #f4ecd8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.tz-main-v2-app .tz-preview-v2-user-data {
  padding: 0;
  overflow: visible;
}

.tz-preview-v2-user-data__badge-stack {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  box-sizing: border-box;
  left: calc(var(--tz-user-data-badge-stack-x-art, 8) / var(--tz-user-data-art-w, 104) * 100%);
  top: calc(var(--tz-user-data-badge-stack-y-art, 0) / var(--tz-user-data-art-h, 72) * 100%);
  width: calc(var(--tz-user-data-badge-stack-w-art, 88) / var(--tz-user-data-art-w, 104) * 100%);
  height: calc(var(--tz-user-data-badge-stack-h-art, 42) / var(--tz-user-data-art-h, 72) * 100%);
}

.tz-preview-v2-user-data__badge {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
}

.tz-preview-v2-user-data__sublevel {
  position: absolute;
  z-index: 2;
  left: calc(var(--tz-user-data-sublevel-x-art, 30) / var(--tz-user-data-art-w, 104) * 100%);
  top: calc(var(--tz-user-data-sublevel-y-art, 30) / var(--tz-user-data-art-h, 72) * 100%);
  width: calc(var(--tz-user-data-sublevel-w-art, 44) / var(--tz-user-data-art-w, 104) * 100%);
  height: calc(var(--tz-user-data-sublevel-h-art, 24) / var(--tz-user-data-art-h, 72) * 100%);
  object-fit: contain;
  object-position: center center;
  transform: translate(
      var(--tz-rank-sublevel-nudge-x, 0px),
      var(--tz-rank-sublevel-nudge-y, 0px)
    )
    scaleX(var(--tz-rank-sublevel-w-scale, 1));
  transform-origin: center center;
  pointer-events: none;
}

.tz-preview-v2-user-data__sublevel-slot {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  box-sizing: border-box;
  left: calc(var(--tz-user-data-sublevel-x-art, 30) / var(--tz-user-data-art-w, 104) * 100%);
  top: calc(var(--tz-user-data-sublevel-y-art, 30) / var(--tz-user-data-art-h, 72) * 100%);
  width: calc(var(--tz-user-data-sublevel-w-art, 44) / var(--tz-user-data-art-w, 104) * 100%);
  height: calc(var(--tz-user-data-sublevel-h-art, 24) / var(--tz-user-data-art-h, 72) * 100%);
}

.tz-preview-v2-user-data__sublevel-slot .tz-preview-v2-user-data__sublevel {
  position: static;
  inset: auto;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  display: block;
}

.tz-preview-v2-user-data__progress-track {
  position: absolute;
  z-index: 1;
  left: calc(var(--tz-user-data-progress-track-x-art, 4) / var(--tz-user-data-art-w, 104) * 100%);
  top: calc(var(--tz-user-data-progress-track-y-art, 54) / var(--tz-user-data-art-h, 72) * 100%);
  width: calc(var(--tz-user-data-progress-track-w-art, 96) / var(--tz-user-data-art-w, 104) * 100%);
  height: calc(var(--tz-user-data-progress-track-h-art, 5) / var(--tz-user-data-art-h, 72) * 100%);
  margin: 0;
}

.tz-preview-v2-user-data__progress-text {
  position: absolute;
  z-index: 1;
  left: calc(var(--tz-user-data-progress-text-x-art, 4) / var(--tz-user-data-art-w, 104) * 100%);
  top: calc(var(--tz-user-data-progress-text-y-art, 62) / var(--tz-user-data-art-h, 72) * 100%);
  width: calc(var(--tz-user-data-progress-text-w-art, 96) / var(--tz-user-data-art-w, 104) * 100%);
  height: calc(var(--tz-user-data-progress-text-h-art, 10) / var(--tz-user-data-art-h, 72) * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.55em;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tz-cream);
  font-variant-numeric: tabular-nums;
}

.tz-preview-v2-progress__track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  overflow: hidden;
}

/* In-game user_data: height comes from sub-layout vars (not 100% of zone). */
.tz-preview-v2-user-data__progress-track.tz-preview-v2-progress__track {
  height: calc(var(--tz-user-data-progress-track-h-art, 5) / var(--tz-user-data-art-h, 72) * 100%);
}

.tz-preview-v2-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tz-green), var(--tz-gold));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.tz-main-v2-app .tz-preview-v2-game-data {
  padding: 0;
  overflow: hidden;
  container-type: size;
  font-size: clamp(4px, 20cqh, 11px);
  line-height: 1;
}

.tz-preview-v2-data.tz-preview-v2-game-data {
  container-type: size;
}

.tz-preview-v2-game-data__item {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

.tz-preview-v2-game-data__item--type {
  left: calc(var(--tz-game-data-type-x-art, 0) / var(--tz-game-data-art-w, 70) * 100%);
  top: calc(var(--tz-game-data-type-y-art, 2) / var(--tz-game-data-art-h, 46) * 100%);
  width: calc(var(--tz-game-data-type-w-art, 70) / var(--tz-game-data-art-w, 70) * 100%);
  height: calc(var(--tz-game-data-type-h-art, 14) / var(--tz-game-data-art-h, 46) * 100%);
  justify-content: var(--tz-game-data-type-justify, center);
  align-items: var(--tz-game-data-type-align, center);
}

.tz-preview-v2-game-data__item--date {
  left: calc(var(--tz-game-data-date-x-art, 0) / var(--tz-game-data-art-w, 70) * 100%);
  top: calc(var(--tz-game-data-date-y-art, 15) / var(--tz-game-data-art-h, 46) * 100%);
  width: calc(var(--tz-game-data-date-w-art, 70) / var(--tz-game-data-art-w, 70) * 100%);
  height: calc(var(--tz-game-data-date-h-art, 14) / var(--tz-game-data-art-h, 46) * 100%);
  justify-content: var(--tz-game-data-date-justify, center);
  align-items: var(--tz-game-data-date-align, center);
}

.tz-preview-v2-game-data__item--adv-id {
  left: calc(var(--tz-game-data-adv-id-x-art, 0) / var(--tz-game-data-art-w, 70) * 100%);
  top: calc(var(--tz-game-data-adv-id-y-art, 15) / var(--tz-game-data-art-h, 46) * 100%);
  width: calc(var(--tz-game-data-adv-id-w-art, 70) / var(--tz-game-data-art-w, 70) * 100%);
  height: calc(var(--tz-game-data-adv-id-h-art, 14) / var(--tz-game-data-art-h, 46) * 100%);
  justify-content: var(--tz-game-data-adv-id-justify, center);
  align-items: var(--tz-game-data-adv-id-align, center);
}

.tz-preview-v2-game-data__item--id {
  left: calc(var(--tz-game-data-id-x-art, 0) / var(--tz-game-data-art-w, 70) * 100%);
  top: calc(var(--tz-game-data-id-y-art, 29) / var(--tz-game-data-art-h, 46) * 100%);
  width: calc(var(--tz-game-data-id-w-art, 70) / var(--tz-game-data-art-w, 70) * 100%);
  height: calc(var(--tz-game-data-id-h-art, 15) / var(--tz-game-data-art-h, 46) * 100%);
  justify-content: var(--tz-game-data-id-justify, center);
  align-items: var(--tz-game-data-id-align, center);
}

.tz-main-v2-app .tz-preview-v2-info-data {
  padding: 0;
  overflow: hidden;
  container-type: size;
  font-size: clamp(4px, 20cqh, 11px);
  line-height: 1;
}

.tz-preview-v2-data.tz-preview-v2-info-data {
  container-type: size;
}

.tz-preview-v2-info-data__item {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

.tz-preview-v2-info-data__item--count {
  left: calc(var(--tz-info-data-count-x-art, 0) / var(--tz-info-data-art-w, 68) * 100%);
  top: calc(var(--tz-info-data-count-y-art, 2) / var(--tz-info-data-art-h, 46) * 100%);
  width: calc(var(--tz-info-data-count-w-art, 68) / var(--tz-info-data-art-w, 68) * 100%);
  height: calc(var(--tz-info-data-count-h-art, 14) / var(--tz-info-data-art-h, 46) * 100%);
  justify-content: var(--tz-info-data-count-justify, center);
  align-items: var(--tz-info-data-count-align, center);
  font-size: calc(1em * var(--tz-info-data-count-font-scale, 1));
  font-weight: 700;
  color: var(--tz-gold);
}

.tz-preview-v2-info-data__item--possible {
  left: calc(var(--tz-info-data-possible-x-art, 0) / var(--tz-info-data-art-w, 68) * 100%);
  top: calc(var(--tz-info-data-possible-y-art, 16) / var(--tz-info-data-art-h, 46) * 100%);
  width: calc(var(--tz-info-data-possible-w-art, 68) / var(--tz-info-data-art-w, 68) * 100%);
  height: calc(var(--tz-info-data-possible-h-art, 14) / var(--tz-info-data-art-h, 46) * 100%);
  justify-content: var(--tz-info-data-possible-justify, center);
  align-items: var(--tz-info-data-possible-align, center);
  font-size: calc(0.92em * var(--tz-info-data-possible-font-scale, 1));
}

.tz-preview-v2-info-data__item--solutions {
  left: calc(var(--tz-info-data-solutions-x-art, 0) / var(--tz-info-data-art-w, 68) * 100%);
  top: calc(var(--tz-info-data-solutions-y-art, 30) / var(--tz-info-data-art-h, 46) * 100%);
  width: calc(var(--tz-info-data-solutions-w-art, 68) / var(--tz-info-data-art-w, 68) * 100%);
  height: calc(var(--tz-info-data-solutions-h-art, 14) / var(--tz-info-data-art-h, 46) * 100%);
  justify-content: var(--tz-info-data-solutions-justify, center);
  align-items: var(--tz-info-data-solutions-align, center);
  font-size: calc(0.92em * var(--tz-info-data-solutions-font-scale, 1));
}

.tz-main-v2-app .tz-preview-v2-timer-data {
  padding: 0;
  overflow: hidden;
  container-type: size;
  font-size: clamp(4px, 18cqh, 12px);
  line-height: 1;
}

.tz-preview-v2-data.tz-preview-v2-timer-data {
  container-type: size;
}

.tz-preview-v2-timer-data__item {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

.tz-preview-v2-timer-data__item--current {
  left: calc(var(--tz-timer-data-current-x-art, 0) / var(--tz-timer-data-art-w, 58) * 100%);
  top: calc(var(--tz-timer-data-current-y-art, 2) / var(--tz-timer-data-art-h, 44) * 100%);
  width: calc(var(--tz-timer-data-current-w-art, 58) / var(--tz-timer-data-art-w, 58) * 100%);
  height: calc(var(--tz-timer-data-current-h-art, 20) / var(--tz-timer-data-art-h, 44) * 100%);
  align-items: var(--tz-timer-data-current-align, center);
  justify-content: var(--tz-timer-data-current-justify, flex-end);
  font-size: calc(1em * var(--tz-timer-data-current-font-scale, 1));
}

.tz-preview-v2-timer-data__item--best {
  left: calc(var(--tz-timer-data-best-x-art, 0) / var(--tz-timer-data-art-w, 58) * 100%);
  top: calc(var(--tz-timer-data-best-y-art, 22) / var(--tz-timer-data-art-h, 44) * 100%);
  width: calc(var(--tz-timer-data-best-w-art, 58) / var(--tz-timer-data-art-w, 58) * 100%);
  height: calc(var(--tz-timer-data-best-h-art, 19) / var(--tz-timer-data-art-h, 44) * 100%);
  align-items: var(--tz-timer-data-best-align, center);
  justify-content: var(--tz-timer-data-best-justify, flex-end);
  font-size: calc(0.92em * var(--tz-timer-data-best-font-scale, 1));
  opacity: 0.92;
}

.tz-preview-v2-game-data__type {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: calc(0.85em * var(--tz-game-data-type-font-scale, 1));
  opacity: 0.9;
}

.tz-preview-v2-game-data__date {
  font-variant-numeric: tabular-nums;
  font-size: calc(0.95em * var(--tz-game-data-date-font-scale, 1));
}

.tz-preview-v2-game-data__adv-id {
  font-variant-numeric: tabular-nums;
  font-size: calc(0.92em * var(--tz-game-data-adv-id-font-scale, 1));
  font-weight: 600;
  letter-spacing: 0.03em;
}

.tz-preview-v2-game-data__id {
  font-variant-numeric: tabular-nums;
  font-size: calc(0.92em * var(--tz-game-data-id-font-scale, 1));
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: var(--tz-gold-bright);
  letter-spacing: 0.04em;
}

.preview-v2-tuner-page .tuner-box--data {
  background: rgba(232, 185, 35, 0.22) !important;
  border-color: rgba(232, 185, 35, 0.9) !important;
}

/* Preview v2 hint sub-layout — plaque in hint-preview zone; use-hint hit in tile renderer */

.tz-preview-hint-slot > [hidden],
.tz-preview-v2-hint-plaque[hidden],
.tz-preview-v2-hint-use-btn[hidden],
.tz-preview-v2-hint-token-count[hidden],
.tz-preview-v2-hint-token-add[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.tz-preview-v2-hint-plaque {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

.tz-preview-hint-use-slot .tz-preview-v2-hint-plaque--use {
  left: calc(var(--tz-hint-plaque-use-x-art) / var(--tz-hint-use-art-w, 222) * 100%);
  top: calc(var(--tz-hint-plaque-use-y-art) / var(--tz-hint-use-art-h, 140) * 100%);
  width: calc(var(--tz-hint-plaque-use-w-art) / var(--tz-hint-use-art-w, 222) * 100%);
  height: calc(var(--tz-hint-plaque-use-h-art) / var(--tz-hint-use-art-h, 140) * 100%);
}

.tz-preview-v2-hint-plaque--use {
  left: calc(var(--tz-hint-plaque-use-x-art) / var(--tz-hint-art-w, 237) * 100%);
  top: calc(var(--tz-hint-plaque-use-y-art) / var(--tz-hint-art-h, 125) * 100%);
  width: calc(var(--tz-hint-plaque-use-w-art) / var(--tz-hint-art-w, 237) * 100%);
  height: calc(var(--tz-hint-plaque-use-h-art) / var(--tz-hint-art-h, 125) * 100%);
}

.tz-preview-v2-hint-plaque--count {
  left: calc(var(--tz-hint-plaque-count-x-art) / var(--tz-hint-art-w, 237) * 100%);
  top: calc(var(--tz-hint-plaque-count-y-art) / var(--tz-hint-art-h, 125) * 100%);
  width: calc(var(--tz-hint-plaque-count-w-art) / var(--tz-hint-art-w, 237) * 100%);
  height: calc(var(--tz-hint-plaque-count-h-art) / var(--tz-hint-art-h, 125) * 100%);
}

.tz-preview-v2-hint-plaque__art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  display: block;
  pointer-events: none;
}

.tz-preview-v2-hint-plaque--use .tz-preview-v2-hint-plaque__art {
  object-position: center;
}

.tz-preview-v2-hint-use-btn {
  position: absolute;
  z-index: 5;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  left: calc(var(--tz-hint-use-btn-x-art) / var(--tz-hint-use-art-w, 222) * 100%);
  top: calc(var(--tz-hint-use-btn-y-art) / var(--tz-hint-use-art-h, 140) * 100%);
  width: calc(var(--tz-hint-use-btn-w-art) / var(--tz-hint-use-art-w, 222) * 100%);
  height: calc(var(--tz-hint-use-btn-h-art) / var(--tz-hint-use-art-h, 140) * 100%);
}

.tz-preview-v2-hint-use-btn__art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.tz-preview-v2-hint-use-btn[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
}

.tz-preview-v2-hint-token-count {
  position: absolute;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--tz-hint-token-count-font, clamp(6px, 14cqi, 12px)) / 1 'Times New Roman', Georgia, serif;
  font-variant-numeric: tabular-nums;
  color: #e8b923;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.tz-preview-v2-hint-token-count--use {
  left: calc(var(--tz-hint-token-count-use-x-art) / var(--tz-hint-art-w, 237) * 100%);
  top: calc(var(--tz-hint-token-count-use-y-art) / var(--tz-hint-art-h, 125) * 100%);
  width: calc(var(--tz-hint-token-count-use-w-art) / var(--tz-hint-art-w, 237) * 100%);
  height: calc(var(--tz-hint-token-count-use-h-art) / var(--tz-hint-art-h, 125) * 100%);
}

.tz-preview-v2-hint-token-count--count {
  left: calc(var(--tz-hint-token-count-count-x-art) / var(--tz-hint-art-w, 237) * 100%);
  top: calc(var(--tz-hint-token-count-count-y-art) / var(--tz-hint-art-h, 125) * 100%);
  width: calc(var(--tz-hint-token-count-count-w-art) / var(--tz-hint-art-w, 237) * 100%);
  height: calc(var(--tz-hint-token-count-count-h-art) / var(--tz-hint-art-h, 125) * 100%);
}

.tz-preview-v2-hint-token-add {
  position: absolute;
  z-index: 7;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
}

.tz-preview-v2-hint-token-add--use {
  left: calc(var(--tz-hint-token-add-use-x-art) / var(--tz-hint-art-w, 237) * 100%);
  top: calc(var(--tz-hint-token-add-use-y-art) / var(--tz-hint-art-h, 125) * 100%);
  width: calc(var(--tz-hint-token-add-use-w-art) / var(--tz-hint-art-w, 237) * 100%);
  height: calc(var(--tz-hint-token-add-use-h-art) / var(--tz-hint-art-h, 125) * 100%);
}

.tz-preview-v2-hint-token-add--count {
  left: calc(var(--tz-hint-token-add-count-x-art) / var(--tz-hint-art-w, 237) * 100%);
  top: calc(var(--tz-hint-token-add-count-y-art) / var(--tz-hint-art-h, 125) * 100%);
  width: calc(var(--tz-hint-token-add-count-w-art) / var(--tz-hint-art-w, 237) * 100%);
  height: calc(var(--tz-hint-token-add-count-h-art) / var(--tz-hint-art-h, 125) * 100%);
}

.tz-main-v2-app .tz-preview-actions .tz-img-btn--hint {
  display: none !important;
}

.tz-app[data-validation="ready"] .tz-preview-v2-data,
.tz-app[data-validation="invalid"] .tz-preview-v2-data,
.tz-app.is-discovery-record .tz-preview-v2-data {
  visibility: hidden;
  pointer-events: none;
}

/* Token count plaque (.tz-preview-hint-slot) stays visible during check-solve states. */

.preview-v2-tuner-page .tuner-box--hint-data,
.preview-v2-tuner-page .tuner-box--hint-preview {
  background: rgba(143, 212, 154, 0.18) !important;
  border-color: rgba(143, 212, 154, 0.85) !important;
  z-index: 4;
}

.preview-v2-tuner-page .tuner-box--hint {
  background: rgba(143, 212, 154, 0.18) !important;
  border-color: rgba(143, 212, 154, 0.85) !important;
}

.preview-v2-tuner-page .tuner-box--hint .tz-preview-v2-hint-plaque__art {
  opacity: 0.92;
}

/* ── App container ── */

.tz-app {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Reserves scaled layout box (390×844 at 1×, 780×1688 at 2×, 1170×2532 at 3×) */
.tz-scale-host {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: calc(var(--tz-design-width) * var(--tz-ui-scale, 1));
  height: calc(var(--tz-design-height) * var(--tz-ui-scale, 1));
}

.tz-scale-host > .tz-stage {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--tz-design-width) / -2);
  transform: scale(var(--tz-ui-scale, 1));
  transform-origin: top center;
}

/* backgroundLayer + waterLayer (full viewport); uiLayer = .tz-ui-layer */
.tz-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--tz-teal-dark);
}

.tz-bg__sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: var(--tz-img-bg-sky) center center / 100% 100% no-repeat;
}

.tz-bg__water {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tz-bg__water-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
}

.tz-bg__water-layer--a {
  background-image: var(--tz-img-bg-water-a);
  animation: tz-ripple-a var(--tz-ripple-duration-a, 14s) ease-in-out infinite;
}

.tz-bg__water-layer--b {
  background-image: var(--tz-img-bg-water-b);
  animation: tz-ripple-b var(--tz-ripple-duration-b, 21s) ease-in-out infinite;
}

@keyframes tz-ripple-a {
  0% { transform: translateY(0); }
  50% { transform: translateY(calc(-1 * var(--tz-ripple-amplitude-a, var(--tz-ripple-amplitude, 8px)))); }
  100% { transform: translateY(0); }
}

@keyframes tz-ripple-b {
  0% { transform: translateY(0); }
  50% { transform: translateY(calc(-1 * var(--tz-ripple-amplitude-b, var(--tz-ripple-amplitude, 8px)))); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tz-bg__water-layer--a,
  .tz-bg__water-layer--b {
    animation: none;
  }
}

/* uiLayer — 1× artboard; JS zoom fits height + width on phone, up to 2× on desktop */
.tz-ui-layer,
.tz-stage {
  position: relative;
  z-index: 1;
  width: var(--tz-design-width);
  height: var(--tz-design-height);
  min-height: var(--tz-design-height);
  max-height: var(--tz-design-height);
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}

.tz-stage::before {
  display: none;
}

.tz-shell,
.tz-bottom-nav {
  position: relative;
  z-index: 1;
}

.tz-stage::-webkit-scrollbar { width: 0; height: 0; }

/* ── Fixed artboard slots (390×844 spec) ── */

.tz-shell {
  position: relative;
  width: 100%;
  height: var(--tz-shell-h);
  overflow: hidden;
}

.tz-header,
.tz-status,
.tz-game-message,
.tz-board-section,
.tz-preview-section,
.tz-tilebag-container,
.tz-hint-menu-root {
  position: absolute;
  z-index: 2;
}

.tz-hint-menu-root {
  z-index: 50;
}

.tz-header {
  top: var(--tz-y-header);
  left: 0;
  width: var(--tz-design-width);
  height: var(--tz-h-header);
  display: flex;
  align-items: center;
  padding: 0 var(--tz-safe);
}

.tz-menu-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  justify-self: start;
}

.tz-menu-btn__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tz-title-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: min(var(--tz-title-max-w), calc(100vw - 180px));
  max-height: var(--tz-title-max-h);
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.tz-hints {
  position: absolute;
  right: calc(var(--tz-design-width) - var(--tz-x-status-right));
  top: 50%;
  transform: translateY(-50%);
  width: var(--tz-w-status-card);
  height: 40px;
}

.tz-hints-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
}

.tz-hints__count {
  position: absolute;
  left: calc(52% + var(--tz-hints-count-nudge-x));
  top: 54%;
  transform: translate(-50%, -50%);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tz-gold-bright);
  pointer-events: none;
}

.tz-hints__add {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

/* ── Status panels ── */

.tz-status {
  top: var(--tz-y-status);
  left: var(--tz-safe);
  width: var(--tz-w-status);
  height: var(--tz-h-rank-panel);
  display: grid;
  grid-template-columns: var(--tz-w-rank-panel) var(--tz-w-status-card) var(--tz-w-rank-panel);
  justify-content: space-between;
  align-items: start;
  gap: 0;
}

.tz-panel {
  width: var(--tz-w-status-card);
  height: var(--tz-h-status);
  background: rgba(20, 48, 44, 0.72);
  border: 1.5px solid var(--tz-panel-border);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.3);
  backdrop-filter: blur(4px);
  overflow: hidden;
}

.tz-panel__eyebrow {
  display: block;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tz-gold);
  margin-bottom: 3px;
}

/* Rank panel */
.tz-rank-panel {
  width: var(--tz-w-rank-panel);
  height: var(--tz-h-rank-panel);
  overflow: hidden;
  padding: 0;
}

.tz-rank-panel__body {
  position: relative;
  width: 100%;
  height: 100%;
}

.tz-rank-badge-stack {
  position: absolute;
  top: var(--tz-rank-badge-top);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 4px);
  height: var(--tz-rank-badge-h);
}

.tz-rank-badge__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--tz-rank-badge-h);
  transform: scaleX(var(--tz-rank-badge-w-scale));
  transform-origin: center top;
  object-fit: contain;
  object-position: center top;
}

.tz-rank-sublevel__img {
  position: absolute;
  left: 50%;
  top: calc(var(--tz-rank-badge-h) * var(--tz-rank-sublevel-anchor-y));
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--tz-rank-sublevel-icon-h);
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%)
    translate(
      var(--tz-rank-sublevel-nudge-x),
      var(--tz-rank-sublevel-nudge-y)
    )
    scaleX(var(--tz-rank-sublevel-w-scale));
  transform-origin: center center;
  pointer-events: none;
}

.tz-rank-panel__lower {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--tz-rank-lower-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tz-rank-lower-gap);
}

.tz-rank-panel .tz-progress {
  width: calc(100% - 6px);
  margin: 0;
  transform: translateY(var(--tz-rank-progress-nudge-y));
}

.tz-rank-panel .tz-progress__text {
  display: block;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tz-cream);
}

.tz-progress__track {
  height: 6px;
  background: rgba(0,0,0,.35);
  border-radius: 3px;
  overflow: hidden;
}

.tz-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tz-green), var(--tz-gold));
  border-radius: 3px;
  transition: width .3s ease;
}

.tz-progress__text {
  font-size: 0.58rem;
  color: var(--tz-text-muted);
  margin-top: 2px;
  display: block;
}

/* Challenge panel */
.tz-challenge-panel { text-align: center; }

.tz-challenge-panel__date {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--tz-cream);
}

.tz-challenge-panel__code {
  margin: 2px 0;
  font-size: 0.62rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: var(--tz-gold-bright);
  letter-spacing: 0.04em;
}

.tz-challenge-panel__solutions {
  margin: 0;
  font-size: 0.55rem;
  color: var(--tz-text-muted);
}

.tz-challenge-panel__solutions strong {
  color: var(--tz-cream);
}

/* Timer panel — same footprint as rank bubble */
.tz-timer-panel {
  width: var(--tz-w-rank-panel);
  height: var(--tz-h-rank-panel);
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
}

.tz-timer-panel__current,
.tz-timer-panel__best-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.tz-timer-panel__icon,
.tz-timer-panel__star {
  flex: 0 0 auto;
  font-size: 0.62rem;
  color: var(--tz-gold);
  line-height: 1;
}

.tz-timer-panel__time {
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tz-cream);
  line-height: 1;
  text-align: center;
}

.tz-timer-panel__label {
  font-size: 0.45rem;
  color: var(--tz-text-muted);
  text-transform: uppercase;
  line-height: 1;
}

.tz-timer-panel__time--best {
  font-size: 0.55rem;
  color: var(--tz-text-muted);
}

/* ── Board ── */

.tz-game-message {
  top: calc(var(--tz-y-message) + var(--tz-y-message-nudge));
  left: var(--tz-safe);
  width: var(--tz-w-content);
  height: var(--tz-h-message);
  margin: 0;
  font-size: 0.5rem;
  text-align: center;
  color: var(--tz-gold-bright);
  line-height: var(--tz-h-message);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tz-board-section {
  top: var(--tz-y-board);
  left: var(--tz-x-board);
  width: var(--tz-w-board-slot);
  height: var(--tz-h-board-slot);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}

.tz-board-section > * {
  pointer-events: auto;
}

.tz-board-frame {
  position: relative;
  width: var(--tz-w-board-frame);
  height: var(--tz-h-board-frame);
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Frame artwork scales larger than the tile grid (grid size unchanged) */
.tz-board-frame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tz-w-board-frame);
  height: var(--tz-h-board-frame);
  transform:
    translate(
      calc(-50% + var(--tz-board-frame-art-nudge-x)),
      calc(-50% + var(--tz-board-frame-art-nudge-y))
    )
    scale(var(--tz-board-frame-scale));
  background: var(--tz-img-board-frame) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

.tz-board-wrap {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  height: fit-content;
  line-height: 0;
  flex-shrink: 0;
  transform: translate(var(--tz-board-grid-nudge-x), var(--tz-board-grid-nudge-y));
}

.tz-board.board {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 2px;
  isolation: isolate;
}

/* Main-board art behind the cell grid (tileBGSetup → MB-image). */
.tz-board.board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--tz-board-mb-image) center / 100% 100% no-repeat;
}

.tz-board .cell {
  position: relative;
  z-index: 1;
  width: var(--cell, var(--tz-cell-size));
  height: var(--cell, var(--tz-cell-size));
  aspect-ratio: 1;
  background: var(--tz-cell-substrate) center / 100% 100% no-repeat;
  border: none;
  box-shadow: none;
  border-radius: 10px;
}

.tz-board .cell.blocked {
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.tz-board .tile {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.tz-board .tile--blocker {
  z-index: 1;
  pointer-events: none;
}

.tz-board .tileCanvas {
  display: block;
  border-radius: 12px;
}

.tz-board .tile.selected {
  outline: 3px solid var(--tz-gold-bright);
  border-radius: 6px;
}

.tz-board.show-outlines .tile {
  outline: 2px solid rgba(160, 120, 70, 0.45);
  border-radius: 6px;
}

.tz-board.show-outlines .tile.selected {
  outline: 3px solid var(--tz-gold-bright);
}

.tz-board .tile.tile--live-float {
  box-shadow: 0 0 0 3px rgba(255, 150, 40, 0.85);
}

.tz-board .tile.tile--hint {
  box-shadow: 0 0 0 2px rgba(232, 185, 35, 0.75);
  cursor: not-allowed;
}

.tz-board-wrap .overlay.tz-live-validation,
.tz-board .overlay.tz-live-validation {
  z-index: 2;
}

.tz-board-wrap .overlay,
.tz-board .overlay {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  z-index: 3;
}

.tz-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  color: var(--tz-cream);
  font-weight: 600;
  border-radius: 4px;
}

.tz-loading[hidden] { display: none !important; }

/* Shell boot — background + title bar show immediately; board slot shows loading copy */
.tz-shell-boot-loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tz-cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.tz-app.is-shell-booting .tz-shell-boot-loader {
  display: flex;
}

body.tz-modal-open .tz-shell-boot-loader {
  display: none !important;
}

.tz-app.is-shell-booting .tz-board-frame,
.tz-app.is-shell-booting .tz-preview-section,
.tz-app.is-shell-booting .tz-tilebag-container,
.tz-app.is-shell-booting .tz-bottom-menu-v2,
.tz-app.is-shell-booting .tz-info-tip,
.tz-app.is-shell-booting .tz-info-bar,
.tz-app.is-shell-booting .tz-hint-menu-root,
.tz-app.is-shell-booting .tz-guest-banner,
.tz-app.is-shell-booting .tz-status,
.tz-app.is-shell-booting .tz-game-message {
  visibility: hidden;
  pointer-events: none;
}

.tz-app.is-shell-booting .tz-header,
.tz-app.is-shell-booting .tz-board-section {
  visibility: visible;
}

.tz-app.is-shell-booting .tz-header {
  pointer-events: none;
}

/* Menu hit enables pointer-events:auto; keep it dead until boot finishes. */
.tz-app.is-shell-booting .tz-menu-btn {
  pointer-events: none !important;
}

.tz-app.is-shell-booting .tz-board-section {
  pointer-events: none;
}

/* Post-login path picker — hide game chrome until user chooses daily / adventure / random */
.tz-app[data-screen="profile-picker"] .tz-board-frame,
.tz-app[data-screen="profile-picker"] .tz-preview-section,
.tz-app[data-screen="profile-picker"] .tz-tilebag-container,
.tz-app[data-screen="profile-picker"] .tz-bottom-menu-v2,
.tz-app[data-screen="profile-picker"] .tz-info-tip,
.tz-app[data-screen="profile-picker"] .tz-info-bar,
.tz-app[data-screen="profile-picker"] .tz-hint-menu-root,
.tz-app[data-screen="profile-picker"] .tz-challenge-panel,
.tz-app[data-screen="profile-picker"] .tz-game-message {
  visibility: hidden;
  pointer-events: none;
}

.tz-app[data-screen="profile-picker"] .tz-game-message:not(:empty) {
  visibility: visible;
  pointer-events: none;
  z-index: 120;
  position: relative;
}

/* Hide tile bag + preview until puzzle is laid out at 55px cell size */
.tz-app.is-loading-puzzle .tz-preview-section,
.tz-app.is-loading-puzzle .tz-tilebag-container {
  visibility: hidden;
  pointer-events: none;
}

.tz-game-message--success { color: #8fd49a; }
.tz-game-message--error { color: #f0a0a0; }
.tz-game-message--info { color: var(--tz-gold-bright); }

/* ── Preview region (preview tile Area bubble.png, scaled to --tz-w-preview) ── */

.tz-preview-section {
  top: calc(var(--tz-y-preview) + var(--tz-y-preview-nudge));
  left: var(--tz-x-preview);
  width: var(--tz-w-preview);
  height: var(--tz-h-preview);
}

.tz-preview-frame {
  position: relative;
  width: var(--tz-w-preview);
  height: var(--tz-h-preview);
  overflow: visible;
  background: var(--tz-img-preview-frame) top center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

.tz-preview-rotate {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.tz-preview-rotate--ccw {
  left: calc(var(--tz-preview-rotate-ccw-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-rotate-ccw-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-rotate-ccw-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-rotate-ccw-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-preview-rotate--cw {
  left: calc(var(--tz-preview-rotate-cw-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-rotate-cw-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-rotate-cw-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-rotate-cw-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-preview-renderer.activePad {
  position: absolute;
  left: calc(var(--tz-preview-renderer-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(
    var(--tz-preview-renderer-y-art) / var(--tz-preview-art-h) * 100%
    + var(--tz-preview-slot-nudge-y)
  );
  width: calc(var(--tz-preview-renderer-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-renderer-h-art) / var(--tz-preview-art-h) * 100%);
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  overflow: visible;
  pointer-events: auto;
  z-index: 1;
}

.tz-preview-renderer__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--tz-preview-renderer-stage-width-scale, 0.9));
  height: calc(100% * var(--tz-preview-renderer-stage-width-scale, 0.9));
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.tz-preview-renderer__stage[hidden] {
  display: none !important;
}

.tz-active-pad .activeEmpty {
  font-size: 0.58rem;
  color: var(--tz-text-muted);
  text-align: center;
  padding: 4px;
}

.tz-active-pad .activeImg {
  position: relative;
  z-index: 1;
  display: block;
  object-fit: contain;
  transform-origin: center center;
  transform: translate(
    var(--tz-preview-tile-offset-x),
    var(--tz-preview-tile-offset-y)
  );
}

.tz-active-pad .activeAnchor {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}

.tz-active-pad .activeAnchor.activeAnchor--placement.activeAnchor--style-light {
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(160, 160, 160, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 6px rgba(255, 255, 255, 0.65),
    0 0 10px rgba(220, 220, 220, 0.45);
}

.tz-active-pad .activeAnchor.activeAnchor--placement.activeAnchor--style-dark {
  border: 2px solid rgba(35, 35, 35, 0.92);
  background: rgba(55, 55, 55, 0.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 6px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(0, 0, 0, 0.28);
}

.tz-preview-tile__dir {
  position: absolute;
  left: calc(var(--tz-preview-tile-dir-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-tile-dir-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-tile-dir-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-tile-dir-h-art) / var(--tz-preview-art-h) * 100%);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tz-preview-dir-font-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--tz-cream);
  line-height: 1.1;
  pointer-events: none;
  z-index: 1;
  transform: translate(
    var(--tz-preview-tile-dir-nudge-x),
    var(--tz-preview-tile-dir-nudge-y)
  );
}

/* All tiles placed — check-solve overlay in preview inner slot */
.tz-preview-check-solve {
  display: none;
  position: absolute;
  left: calc(
    var(--tz-preview-renderer-x-art) / var(--tz-preview-art-w) * 100%
    + var(--tz-check-solve-nudge-x)
  );
  top: calc(
    var(--tz-preview-renderer-y-art) / var(--tz-preview-art-h) * 100%
    + var(--tz-preview-slot-nudge-y)
    + var(--tz-check-solve-nudge-y)
  );
  width: calc(var(--tz-preview-renderer-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-renderer-h-art) / var(--tz-preview-art-h) * 100%);
  transform: scale(var(--tz-check-solve-scale));
  transform-origin: center center;
  z-index: 3;
  pointer-events: none;
}

.tz-preview-check-solve__ready,
.tz-preview-check-solve__invalid {
  position: absolute;
  inset: 0;
  display: none;
}

.tz-app[data-validation="ready"] .tz-preview-check-solve__ready {
  display: block;
}

.tz-app[data-validation="ready"] .tz-preview-check-solve__invalid {
  display: none;
}

.tz-app[data-validation="invalid"] .tz-preview-check-solve {
  display: block;
  transform: scale(var(--tz-check-solve-scale)) translateY(var(--tz-invalid-solve-nudge-y));
}

.tz-app[data-validation="invalid"] .tz-preview-check-solve__ready {
  display: none;
}

.tz-app[data-validation="invalid"] .tz-preview-check-solve__invalid {
  display: block;
}

.tz-app[data-validation="invalid"] .tz-preview-renderer.activePad,
.tz-app[data-validation="invalid"] .tz-preview-rotate,
.tz-app[data-validation="invalid"] .tz-preview-tile__dir,
.tz-app[data-validation="invalid"] .tz-preview-actions {
  visibility: hidden;
  pointer-events: none;
}

.tz-app[data-validation="invalid"] .tz-preview-frame {
  background: transparent;
  filter: none;
}

.tz-app[data-validation="invalid"] .tz-preview-check-solve__invalid {
  background: transparent;
}

.tz-app[data-validation="invalid"] .tz-preview-check-solve__invalid .tz-preview-check-solve__panel {
  background: transparent;
  object-fit: contain;
  object-position: center center;
}

.tz-preview-invalid-solve__btn {
  position: absolute;
  left: 50%;
  bottom: var(--tz-check-solve-btn-bottom);
  transform: translateX(-50%) scale(var(--tz-check-solve-btn-scale));
  transform-origin: center bottom;
  width: var(--tz-check-solve-btn-w);
  aspect-ratio: 503 / 131;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: filter .1s;
}

.tz-preview-invalid-solve__btn:active {
  filter: brightness(0.92);
}

.tz-preview-check-solve__panel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}

.tz-preview-check-solve__btn {
  position: absolute;
  left: 50%;
  bottom: var(--tz-check-solve-btn-bottom);
  transform: translateX(-50%) scale(var(--tz-check-solve-btn-scale));
  transform-origin: center bottom;
  width: var(--tz-check-solve-btn-w);
  height: auto;
  aspect-ratio: 503 / 131;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
  transition: transform .1s;
  filter: var(--tz-btn-drop-shadow);
}

.tz-preview-check-solve__btn:active {
  transform: translateX(-50%) scale(calc(var(--tz-check-solve-btn-scale) * 0.96));
}

.tz-preview-check-solve__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.tz-app[data-validation="ready"] .tz-preview-check-solve {
  display: block;
  z-index: 6;
  pointer-events: auto;
}

.tz-app[data-validation="invalid"] .tz-preview-check-solve {
  z-index: 6;
  pointer-events: auto;
}

.tz-app[data-validation="ready"] .tz-preview-hint-slot,
.tz-app[data-validation="ready"] .tz-preview-hint-use-slot,
.tz-app[data-validation="invalid"] .tz-preview-hint-slot,
.tz-app[data-validation="invalid"] .tz-preview-hint-use-slot {
  pointer-events: none;
}

.tz-preview-check-solve__btn,
.tz-preview-invalid-solve__btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tz-app[data-validation="ready"] .tz-preview-renderer.activePad,
.tz-app[data-validation="ready"] .tz-preview-rotate,
.tz-app[data-validation="ready"] .tz-preview-tile__dir,
.tz-app[data-validation="ready"] .tz-preview-actions {
  visibility: hidden;
  pointer-events: none;
}

.tz-app[data-validation="ready"] .tz-preview-frame {
  background: transparent;
  filter: none;
}

/* Discovery record — overlays preview when a new solution is found */
.tz-discovery-record {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: auto;
  container-type: inline-size;
  overflow: visible;
}

.tz-discovery-record[hidden] {
  display: none !important;
}

.tz-discovery-record__bg {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-discovery-record--new.tz-discovery-record--with-advance .tz-discovery-record__bg--new-advance,
.tz-discovery-record--new.tz-discovery-record--no-advance .tz-discovery-record__bg--new-regular,
.tz-discovery-record--duplicate.tz-discovery-record--with-advance .tz-discovery-record__bg--duplicate-advance,
.tz-discovery-record--duplicate.tz-discovery-record--no-advance .tz-discovery-record__bg--duplicate-regular {
  display: block;
}

.tz-discovery-record--no-advance .tz-discovery-record__btn--advance {
  display: none;
}

.tz-discovery-record__field {
  position: absolute;
  transform: translate(-50%, -50%)
    translate(
      var(--tz-discovery-field-nudge-x, var(--field-nudge-x, 0px)),
      var(--tz-discovery-field-nudge-y, var(--field-nudge-y, 0px))
    );
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2a1810;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: visible;
  max-width: none;
}

.tz-discovery-record__field--solution-total {
  --field-nudge-x: var(--tz-discovery-solution-total-nudge-x, 0px);
  --field-nudge-y: var(--tz-discovery-solution-total-nudge-y, 0px);
  left: var(--tz-discovery-solution-total-x);
  top: var(--tz-discovery-solution-total-y);
  font-size: calc(clamp(9px, 5.2cqw, 17px) * var(--tz-discovery-solution-total-font-scale, 1));
}

.tz-discovery-record__field--note {
  --field-nudge-x: var(--tz-discovery-note-nudge-x, 0px);
  --field-nudge-y: var(--tz-discovery-note-nudge-y, 0px);
  left: var(--tz-discovery-note-x);
  top: var(--tz-discovery-note-y);
  font-size: calc(clamp(7px, 2.9cqw, 11px) * var(--tz-discovery-note-font-scale, 1));
  font-weight: 600;
  max-width: 84%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.tz-discovery-record--duplicate .tz-discovery-record__field--tokens {
  display: none;
}

.tz-discovery-record--new .tz-discovery-record__field--note {
  display: none;
}

.tz-discovery-record__field--puzzle-id {
  --field-nudge-x: var(--tz-discovery-puzzle-id-nudge-x, 0px);
  --field-nudge-y: var(--tz-discovery-puzzle-id-nudge-y, 0px);
  left: var(--tz-discovery-puzzle-id-x);
  top: var(--tz-discovery-puzzle-id-y);
  font-size: calc(clamp(8px, 3.1cqw, 13px) * var(--tz-discovery-puzzle-id-font-scale, 1));
  letter-spacing: 0.02em;
}

.tz-discovery-record__field--solution-found {
  --field-nudge-x: var(--tz-discovery-solution-found-nudge-x, 0px);
  --field-nudge-y: var(--tz-discovery-solution-found-nudge-y, 0px);
  left: var(--tz-discovery-solution-found-x);
  top: var(--tz-discovery-solution-found-y);
  font-size: calc(clamp(9px, 5.2cqw, 17px) * var(--tz-discovery-solution-found-font-scale, 1));
}

.tz-discovery-record__field--time {
  --field-nudge-x: var(--tz-discovery-time-nudge-x, 0px);
  --field-nudge-y: var(--tz-discovery-time-nudge-y, 0px);
  left: var(--tz-discovery-time-x);
  top: var(--tz-discovery-time-y);
  font-size: calc(clamp(7px, 3.1cqw, 13px) * var(--tz-discovery-time-font-scale, 1));
  max-width: 46%;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

.tz-discovery-record--duplicate .tz-discovery-record__field--time {
  white-space: pre-line;
  line-height: 1.2;
  max-width: 40%;
}

.tz-discovery-record__field--tokens {
  --field-nudge-x: var(--tz-discovery-tokens-nudge-x, 0px);
  --field-nudge-y: var(--tz-discovery-tokens-nudge-y, 0px);
  left: var(--tz-discovery-tokens-x);
  top: var(--tz-discovery-tokens-y);
  font-size: calc(clamp(9px, 5.2cqw, 17px) * var(--tz-discovery-tokens-font-scale, 1));
}

.tz-discovery-record__btn {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  line-height: 0;
  overflow: visible;
  transition: transform 0.12s ease;
}

/* fill — width/height box drives art; contain kept image aspect-locked so widening the box did nothing visible */
.tz-discovery-record__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transition: filter 0.15s ease;
}

.tz-discovery-record__btn--continue {
  left: calc(var(--tz-discovery-btn-continue-x) + var(--tz-discovery-btn-continue-nudge-x, 0px));
  top: calc(var(--tz-discovery-btn-continue-y) + var(--tz-discovery-btn-continue-nudge-y, 0px));
  width: var(--tz-discovery-btn-continue-w);
  height: var(--tz-discovery-btn-continue-h);
  z-index: 1;
}

.tz-discovery-record__btn--advance {
  left: calc(var(--tz-discovery-btn-advance-x) + var(--tz-discovery-btn-advance-nudge-x, 0px));
  top: calc(var(--tz-discovery-btn-advance-y) + var(--tz-discovery-btn-advance-nudge-y, 0px));
  width: var(--tz-discovery-btn-advance-w);
  height: var(--tz-discovery-btn-advance-h);
  z-index: 1;
}

.tz-discovery-record__btn--view-found {
  left: calc(var(--tz-discovery-btn-view-found-x) + var(--tz-discovery-btn-view-found-nudge-x, 0px));
  top: calc(var(--tz-discovery-btn-view-found-y) + var(--tz-discovery-btn-view-found-nudge-y, 0px));
  width: var(--tz-discovery-btn-view-found-w);
  height: var(--tz-discovery-btn-view-found-h);
  z-index: 2;
}

.tz-discovery-record__btn--book {
  left: calc(var(--tz-discovery-btn-book-x) + var(--tz-discovery-btn-book-nudge-x, 0px));
  top: calc(var(--tz-discovery-btn-book-y) + var(--tz-discovery-btn-book-nudge-y, 0px));
  width: var(--tz-discovery-btn-book-w);
  height: var(--tz-discovery-btn-book-h);
  z-index: 2;
}

.tz-discovery-record__field.is-tuner-active,
.tz-discovery-record__btn.is-tuner-active {
  outline: 2px dashed #e8b923;
  outline-offset: 2px;
}

@media (hover: hover) {
  .tz-discovery-record__btn:hover:not(:disabled) {
    z-index: 5;
  }

  .tz-discovery-record__btn:hover:not(:disabled) img {
    filter: brightness(1.12)
      drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
      drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
  }
}

.tz-discovery-record__btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.tz-discovery-record__btn:active:not(:disabled) {
  transform: scale(0.97);
}

.tz-app.is-discovery-record .tz-preview-check-solve {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.tz-app.is-discovery-record .tz-discovery-record {
  z-index: 7;
}

.tz-app.is-discovery-record .tz-preview-renderer.activePad,
.tz-app.is-discovery-record .tz-preview-rotate,
.tz-app.is-discovery-record .tz-preview-tile__dir,
.tz-app.is-discovery-record .tz-preview-actions {
  visibility: hidden;
  pointer-events: none;
}

.tz-app.is-discovery-record .tz-tilebag-container {
  visibility: hidden;
  pointer-events: none;
}

.tz-app.is-discovery-record .tz-preview-section {
  top: var(--tz-discovery-expanded-top);
  left: var(--tz-discovery-expanded-x);
  width: var(--tz-discovery-expanded-w);
  height: var(--tz-discovery-expanded-h);
}

.tz-app.is-discovery-record .tz-preview-section:has(.tz-discovery-record--duplicate) {
  left: var(--tz-discovery-expanded-x-duplicate);
  width: var(--tz-discovery-expanded-w-duplicate);
}

/* Main screen v2 — anchor discovery plaque to preview zone (% layout), not v1 pixel vars */
.tz-main-v2-app.is-discovery-record .tz-preview-section {
  top: var(--tz-msv2-preview-y, 56.17%);
  left: calc(
    var(--tz-msv2-preview-x, 0%)
    + (
      var(--tz-msv2-preview-w, 100%)
      - var(--tz-msv2-preview-w, 100%) * var(--tz-discovery-plaque-w-scale, 1.28)
    ) / 2
  );
  width: calc(var(--tz-msv2-preview-w, 100%) * var(--tz-discovery-plaque-w-scale, 1.28));
  height: calc(
    (var(--tz-msv2-tilebag-y, 88.15%) - var(--tz-msv2-preview-y, 56.17%))
    * var(--tz-discovery-plaque-h-scale, 0.86)
  );
}

.tz-main-v2-app.is-discovery-record .tz-preview-section:has(.tz-discovery-record--duplicate) {
  left: calc(
    var(--tz-msv2-preview-x, 0%)
    + (
      var(--tz-msv2-preview-w, 100%)
      - var(--tz-msv2-preview-w, 100%)
        * var(--tz-discovery-plaque-w-scale, 1.28)
        * var(--tz-discovery-plaque-duplicate-w-scale, 0.8)
    ) / 2
  );
  width: calc(
    var(--tz-msv2-preview-w, 100%)
    * var(--tz-discovery-plaque-w-scale, 1.28)
    * var(--tz-discovery-plaque-duplicate-w-scale, 0.8)
  );
}

.tz-app.is-discovery-record .tz-preview-frame {
  width: 100%;
  height: 100%;
  background: transparent;
  filter: none;
  overflow: visible;
}

.tz-app.is-discovery-record .tz-discovery-record__bg {
  object-fit: fill;
}

/* ── Tile bag (381×74 asset + expand handle) ── */

.tz-tilebag-header-row { display: none; }

.tz-tilebag-container {
  top: calc(var(--tz-y-tilebag) + var(--tz-y-tilebag-nudge));
  left: var(--tz-x-tilebag);
  width: var(--tz-w-tilebag);
  /* Fixed collapsed slot — frame grows upward inside without moving bottom edge */
  height: var(--tz-h-tilebag-frame);
  overflow: visible;
  z-index: 2;
}

.tz-tilebag-container.is-expanded {
  z-index: 5;
}

.tz-tilebag-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--tz-tilebag-frame-h, var(--tz-h-tilebag-frame));
  overflow: hidden;
  background: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
  transition: height var(--tz-tilebag-expand-duration) ease;
}

/* 3-layer skin — fixed tab height; body stretches (collapsed + expanded art) */
.tz-tilebag-frame__skin {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --tz-tilebag-skin-img: var(--tz-img-tilebag);
  --tz-tilebag-skin-art-h: var(--tz-tilebag-art-h);
  --tz-tilebag-skin-cap-bottom: var(--tz-tilebag-collapsed-cap-bottom);
  --tz-tilebag-skin-mid-art-h: calc(
    var(--tz-tilebag-skin-art-h) - var(--tz-tilebag-art-cap-top) - var(--tz-tilebag-art-cap-bottom-collapsed)
  );
  --tz-tilebag-skin-art-h-scaled: calc(var(--tz-tilebag-skin-art-h) / var(--tz-tilebag-art-w) * var(--tz-w-tilebag));
  --tz-tilebag-skin-mid-h: calc(
    var(--tz-tilebag-frame-h, var(--tz-h-tilebag-frame))
    - var(--tz-tilebag-tab-h)
    - var(--tz-tilebag-skin-cap-bottom)
  );
  background-image:
    var(--tz-tilebag-skin-img),
    var(--tz-tilebag-skin-img),
    var(--tz-tilebag-skin-img);
  background-repeat: no-repeat;
  background-size:
    100% var(--tz-tilebag-tab-h),
    100% calc(var(--tz-tilebag-skin-art-h-scaled) * var(--tz-tilebag-skin-mid-h) / var(--tz-tilebag-skin-mid-art-h)),
    100% var(--tz-tilebag-skin-cap-bottom);
  background-position:
    center top,
    center calc(-1 * var(--tz-tilebag-tab-h) * var(--tz-tilebag-skin-mid-h) / var(--tz-tilebag-skin-mid-art-h)),
    center bottom;
  transform: translate(var(--tz-tilebag-art-offset-x), var(--tz-tilebag-art-offset-y))
    scale(var(--tz-tilebag-art-scale));
  transform-origin: center bottom;
}

.tz-tilebag-container.is-expanded .tz-tilebag-frame__skin {
  --tz-tilebag-skin-img: var(--tz-img-tilebag-expanded);
  --tz-tilebag-skin-art-h: var(--tz-tilebag-art-expanded-h);
  --tz-tilebag-skin-cap-bottom: var(--tz-tilebag-expanded-cap-bottom);
  --tz-tilebag-skin-mid-art-h: calc(
    var(--tz-tilebag-art-expanded-h) - var(--tz-tilebag-art-cap-top) - var(--tz-tilebag-art-cap-bottom)
  );
  --tz-tilebag-skin-art-h-scaled: calc(var(--tz-tilebag-art-expanded-h) / var(--tz-tilebag-art-w) * var(--tz-w-tilebag));
  transform: translate(var(--tz-tilebag-art-expanded-offset-x), var(--tz-tilebag-art-expanded-offset-y))
    scale(var(--tz-tilebag-art-expanded-scale));
  transform-origin: center bottom;
}

.tz-tilebag-title-overlay,
.tz-tilebag-count-overlay,
.tz-tilebag-expand-handle,
.tz-tilebag-arrow,
.tz-tilebag-track {
  z-index: 1;
}

.tz-tilebag-expand-handle {
  position: absolute;
  /* Anchor to fixed tab band — same in collapsed + expanded */
  top: calc(
    var(--tz-tilebag-tab-handle-top)
    + var(--tz-tilebag-handle-y-gap)
    + var(--tz-tilebag-handle-nudge-y)
  );
  left: calc(
    var(--tz-tilebag-count-x) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-handle-x-offset)
    + var(--tz-tilebag-handle-nudge-x)
  );
  z-index: 4;
  width: var(--tz-tilebag-handle-w);
  min-height: var(--tz-tilebag-handle-hit-h);
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.tz-tilebag-expand-handle:active {
  cursor: grabbing;
}

.tz-tilebag-container.is-expand-disabled .tz-tilebag-expand-handle {
  cursor: not-allowed;
  opacity: 0.4;
}

.tz-tilebag-expand-handle__bar {
  display: block;
  width: 100%;
  height: calc(
    var(--tz-tilebag-handle-w) * var(--tz-tilebag-handlebar-art-h) / var(--tz-tilebag-handlebar-art-w)
  );
  border-radius: 0;
  background: var(--tz-img-tilebag-handlebar) center / 100% 100% no-repeat;
  box-shadow: none;
}

.tz-tilebag-expand-handle__chevron {
  display: var(--tz-tilebag-handle-show-chevron);
  font-size: 0;
  line-height: 0;
  pointer-events: none;
}

.tz-tilebag-expand-handle__chevron::before {
  content: var(--tz-tilebag-handle-icon-collapsed);
  font-size: 8px;
  line-height: 1;
  color: var(--tz-gold-bright);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.tz-tilebag-container.is-expanded .tz-tilebag-expand-handle {
  /* Expanded handle position is fully independent from collapsed nudges */
  top: calc(
    var(--tz-tilebag-tab-handle-top)
    + var(--tz-tilebag-handle-expanded-y-gap)
    + var(--tz-tilebag-handle-expanded-nudge-y)
  );
  left: calc(
    var(--tz-tilebag-count-x) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-handle-expanded-x-offset)
    + var(--tz-tilebag-handle-expanded-nudge-x)
  );
}

.tz-tilebag-container.is-expanded .tz-tilebag-expand-handle__chevron::before {
  content: var(--tz-tilebag-handle-icon-expanded);
}

.tz-tilebag-title-overlay,
.tz-tilebag-count-overlay {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
  height: var(--tz-tilebag-tab-count-h);
}

.tz-tilebag-title-overlay {
  left: calc(
    var(--tz-tilebag-title-x) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-title-nudge-x)
  );
  top: calc(
    var(--tz-tilebag-title-y) / var(--tz-tilebag-art-cap-top) * var(--tz-tilebag-tab-h)
    + var(--tz-tilebag-title-nudge-y)
  );
  width: max-content;
}

.tz-tilebag-count-overlay {
  left: calc(
    var(--tz-tilebag-count-x) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-count-nudge-x)
  );
  top: calc(
    var(--tz-tilebag-count-y) / var(--tz-tilebag-art-cap-top) * var(--tz-tilebag-tab-h)
    + var(--tz-tilebag-count-nudge-y)
  );
  width: calc(var(--tz-tilebag-count-w) / var(--tz-tilebag-art-w) * 100%);
}

.tz-tilebag-container.is-expanded .tz-tilebag-title-overlay {
  left: calc(
    var(--tz-tilebag-title-x) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-title-expanded-nudge-x)
  );
  top: calc(
    var(--tz-tilebag-title-y) / var(--tz-tilebag-art-cap-top) * var(--tz-tilebag-tab-h)
    + var(--tz-tilebag-title-expanded-nudge-y)
  );
}

.tz-tilebag-container.is-expanded .tz-tilebag-count-overlay {
  left: calc(
    var(--tz-tilebag-count-x) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-count-expanded-nudge-x)
  );
  top: calc(
    var(--tz-tilebag-count-y) / var(--tz-tilebag-art-cap-top) * var(--tz-tilebag-tab-h)
    + var(--tz-tilebag-count-expanded-nudge-y)
  );
}

.tz-tilebag-header__title {
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  line-height: 1;
  white-space: nowrap;
}

.tz-tilebag-header__count {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  color: #D4B04A;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.tz-tilebag-arrow {
  position: absolute;
  z-index: 2;
  padding: 0;
  background: transparent;
  border: none;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: height var(--tz-tilebag-expand-duration) ease, opacity 150ms ease;
}

.tz-tilebag-arrow--prev {
  left: calc(
    var(--tz-tilebag-arrow-prev-left-art) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-arrow-prev-nudge-x, 0px)
  );
  top: calc(var(--tz-tilebag-tab-h) + var(--tz-tilebag-track-nudge-y) + var(--tz-tilebag-arrow-prev-nudge-y, 0px));
  width: calc(var(--tz-tilebag-arrow-width-art) / var(--tz-tilebag-art-w) * 100%);
  height: var(--tz-tilebag-track-h, var(--tz-tilebag-track-collapsed-h));
  display: var(--tz-tilebag-arrow-prev-display, block);
}

.tz-tilebag-arrow--next {
  left: calc(
    var(--tz-tilebag-arrow-next-left-art) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-arrow-next-nudge-x, 0px)
  );
  top: calc(var(--tz-tilebag-tab-h) + var(--tz-tilebag-track-nudge-y) + var(--tz-tilebag-arrow-next-nudge-y, 0px));
  width: calc(var(--tz-tilebag-arrow-next-width-art, var(--tz-tilebag-arrow-width-art)) / var(--tz-tilebag-art-w) * 100%);
  height: var(--tz-tilebag-track-h, var(--tz-tilebag-track-collapsed-h));
  display: var(--tz-tilebag-arrow-next-display, block);
}

.tz-tilebag-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tz-tilebag-track {
  position: absolute;
  left: calc(
    var(--tz-tilebag-track-left-art) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-track-nudge-x, 0px)
  );
  top: calc(
    var(--tz-tilebag-tab-h) + var(--tz-tilebag-track-nudge-y)
    + var(--tz-tilebag-track-nudge-y-extra, 0px)
  );
  width: calc(var(--tz-tilebag-track-width-art) / var(--tz-tilebag-art-w) * 100%);
  height: var(--tz-tilebag-track-h, var(--tz-tilebag-track-collapsed-h));
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  touch-action: pan-x;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: height var(--tz-tilebag-expand-duration) ease;
}

/* Collapsed bag: bottom horizontal scrollbar when more than 3 tiles (see wireBagScroll). */
.tz-tilebag-container:not(.is-expanded) .tz-tilebag-track.tz-tilebag-track--h-scrollbar {
  -ms-overflow-style: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 163, 90, 0.65) rgba(0, 0, 0, 0.22);
  padding-bottom: 1px;
  box-sizing: border-box;
}

.tz-tilebag-container:not(.is-expanded) .tz-tilebag-track.tz-tilebag-track--h-scrollbar::-webkit-scrollbar {
  display: block;
  height: var(--tz-tilebag-h-scrollbar-size, 6px);
}

.tz-tilebag-container:not(.is-expanded) .tz-tilebag-track.tz-tilebag-track--h-scrollbar::-webkit-scrollbar-track {
  margin: 0 2px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}

.tz-tilebag-container:not(.is-expanded) .tz-tilebag-track.tz-tilebag-track--h-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(196, 163, 90, 0.72);
  border-radius: 999px;
}

.tz-tilebag-container:not(.is-expanded) .tz-tilebag-track.tz-tilebag-track--h-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 176, 74, 0.9);
}

.tz-tilebag-container.is-expanded .tz-tilebag-track {
  left: calc(
    var(--tz-tilebag-track-left-art-expanded, var(--tz-tilebag-track-left-art)) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-track-nudge-x-expanded, var(--tz-tilebag-track-nudge-x, 0px))
  );
  width: calc(
    var(--tz-tilebag-track-width-art-expanded, var(--tz-tilebag-track-width-art)) / var(--tz-tilebag-art-w) * 100%
  );
  top: calc(
    var(--tz-tilebag-tab-h) + var(--tz-tilebag-track-expanded-nudge-y)
    + var(--tz-tilebag-track-nudge-y-expanded, var(--tz-tilebag-track-nudge-y, 0px))
  );
  max-height: calc(
    var(--tz-tilebag-frame-h, var(--tz-h-tilebag-frame))
    - var(--tz-tilebag-tab-h)
    - var(--tz-tilebag-track-expanded-cap-bottom)
    - var(--tz-tilebag-track-expanded-nudge-y)
    - var(--tz-tilebag-track-nudge-y-expanded, 0px)
  );
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: none;
  touch-action: pan-y;
  align-items: center;
}

.tz-tilebag-container.is-expanded .tz-tilebag-arrow--prev {
  left: calc(
    var(--tz-tilebag-arrow-prev-left-art-expanded, var(--tz-tilebag-arrow-prev-left-art)) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-arrow-prev-nudge-x-expanded, var(--tz-tilebag-arrow-prev-nudge-x, 0px))
  );
  top: calc(
    var(--tz-tilebag-tab-h) + var(--tz-tilebag-track-expanded-nudge-y)
    + var(--tz-tilebag-arrow-prev-nudge-y-expanded, var(--tz-tilebag-arrow-prev-nudge-y, 0px))
  );
  width: calc(
    var(--tz-tilebag-arrow-width-art-expanded, var(--tz-tilebag-arrow-width-art)) / var(--tz-tilebag-art-w) * 100%
  );
  display: var(--tz-tilebag-arrow-prev-display-expanded, var(--tz-tilebag-arrow-prev-display, block));
}

.tz-tilebag-container.is-expanded .tz-tilebag-arrow--next {
  left: calc(
    var(--tz-tilebag-arrow-next-left-art-expanded, var(--tz-tilebag-arrow-next-left-art)) / var(--tz-tilebag-art-w) * 100%
    + var(--tz-tilebag-arrow-next-nudge-x-expanded, var(--tz-tilebag-arrow-next-nudge-x, 0px))
  );
  top: calc(
    var(--tz-tilebag-tab-h) + var(--tz-tilebag-track-expanded-nudge-y)
    + var(--tz-tilebag-arrow-next-nudge-y-expanded, var(--tz-tilebag-arrow-next-nudge-y, 0px))
  );
  width: calc(
    var(--tz-tilebag-arrow-next-width-art-expanded, var(--tz-tilebag-arrow-next-width-art, var(--tz-tilebag-arrow-width-art)))
    / var(--tz-tilebag-art-w) * 100%
  );
  display: var(--tz-tilebag-arrow-next-display-expanded, var(--tz-tilebag-arrow-next-display, block));
}

.tz-tilebag-container.is-expanded .tz-tilebag-arrow {
  opacity: 0;
  pointer-events: none;
}

.tz-tilebag-track::-webkit-scrollbar { display: none; }

/* Horizontal tile bag palette (rendered by app_v16) */
.tz-tilebag-track > .tz-palette-h.palette {
  align-self: center;
}

.tz-palette-h.palette {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--tz-tile-gap);
  max-height: none;
  overflow: visible;
  padding: 0;
  transform: translateY(var(--tz-tilebag-thumb-v-nudge));
}

.tz-tilebag-container.is-expanded .tz-palette-h.palette {
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
  gap: var(--tz-tilebag-row-gap) var(--tz-tile-gap);
}

.tz-palette-h .palItem {
  flex-shrink: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  min-width: 0;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .15s;
}

.tz-palette-h .palItem:hover:not(.used):not(.locked) .palThumb img,
.tz-palette-h .palItem:hover:not(.used):not(.locked) .palThumb.mock-pal-thumb {
  filter: brightness(1.08);
}

/* Glow hugs visible tile art (img), not the thumb slot (which is taller due to fitInsetY). */
.tz-palette-h .palItem.selected .palThumb img,
.tz-palette-h .palItem.selected .palThumb.mock-pal-thumb {
  box-shadow: var(--tz-tilebag-glow-shadow, 0 0 0 2px var(--tz-gold-bright), 0 0 10px rgba(232, 185, 35, 0.55));
}

.tz-palette-h .palItem.selected .palThumb {
  box-shadow: none;
}

.tz-palette-h .palItem.used {
  opacity: 0.38;
  cursor: not-allowed;
}

.tz-palette-h .palItem.palItem--removed {
  display: none !important;
}

.tz-palette-h .palMeta { display: none; }

.tz-palette-h .palThumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding-bottom: var(--tz-tilebag-thumb-fit-inset-y);
  border: none;
  border-radius: 3px;
  background: transparent;
  overflow: visible;
  line-height: 0;
}

.tz-palette-h .palThumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* ── Action buttons on preview frame (bubble artwork) ── */

.tz-preview-actions {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.tz-img-btn {
  position: absolute;
  padding: 0;
  background: transparent;
  border: none;
  line-height: 0;
  pointer-events: auto;
  transition: transform .1s;
}

.tz-img-btn:active { transform: scale(0.96); }

.tz-img-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: var(--tz-btn-drop-shadow);
}

.tz-img-btn--hint {
  left: calc(var(--tz-preview-hint-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-hint-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-hint-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-hint-h-art) / var(--tz-preview-art-h) * 100%);
  filter: var(--tz-preview-hint-drop-shadow);
}

.tz-img-btn--hint img,
.tz-img-btn--hint .tz-hint-btn__art {
  filter: none;
}

/* Invisible hit zones — undo/reset art is baked into preview frame image */
.tz-preview-hit {
  position: absolute;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}

.tz-preview-hit--undo {
  left: calc(var(--tz-preview-undo-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-undo-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-undo-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-undo-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-preview-hit--reset {
  left: calc(var(--tz-preview-reset-x-art) / var(--tz-preview-art-w) * 100%);
  top: calc(var(--tz-preview-reset-y-art) / var(--tz-preview-art-h) * 100%);
  width: calc(var(--tz-preview-reset-w-art) / var(--tz-preview-art-w) * 100%);
  height: calc(var(--tz-preview-reset-h-art) / var(--tz-preview-art-h) * 100%);
}

.tz-hint-btn__art {
  display: block;
  width: 100%;
  height: 100%;
}

.tz-hint-btn__label {
  display: none;
}

.tz-hint-btn__lock {
  display: none;
  position: absolute;
  left: calc(var(--tz-hint-lock-x) + var(--tz-hint-lock-nudge-x));
  top: calc(var(--tz-hint-lock-y) + var(--tz-hint-lock-nudge-y));
  transform: translate(-50%, -50%);
  width: var(--tz-hint-lock-size);
  height: var(--tz-hint-lock-size);
  color: var(--tz-gold-bright);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.tz-hint-btn__lock svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.tz-img-btn--hint[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.tz-img-btn--hint[hidden] {
  display: none !important;
}

.tz-img-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Bottom navigation (NewBotmMenu.png + transparent hits) ── */

.tz-bottom-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: calc(var(--tz-nav-h) + var(--tz-safe-bottom));
  max-height: calc(var(--tz-nav-h) + var(--tz-safe-bottom));
  padding-bottom: var(--tz-safe-bottom);
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

.tz-bottom-nav-plaque {
  position: relative;
  width: calc(var(--tz-design-width) * var(--tz-bottom-nav-w-scale));
  height: var(--tz-nav-h);
  transform: translateY(var(--tz-bottom-nav-offset-y));
  pointer-events: auto;
  filter: drop-shadow(0 -4px 16px rgba(0, 0, 0, 0.35));
}

.tz-bottom-nav-plaque__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

/* Rollover strips (BMB-*H.png) are full plaque size — highlight is baked into each strip */
.tz-bottom-nav__hover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transition: opacity 0.12s ease;
}

@media (hover: hover) {
  .tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--adventure:hover) .tz-bottom-nav__hover--adventure,
  .tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--daily-challenge:hover) .tz-bottom-nav__hover--daily-challenge,
  .tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--random:hover) .tz-bottom-nav__hover--random,
  .tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--library:hover) .tz-bottom-nav__hover--library,
  .tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--profile:hover) .tz-bottom-nav__hover--profile {
    opacity: 1;
  }
}

.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--adventure:focus-visible) .tz-bottom-nav__hover--adventure,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--daily-challenge:focus-visible) .tz-bottom-nav__hover--daily-challenge,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--random:focus-visible) .tz-bottom-nav__hover--random,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--library:focus-visible) .tz-bottom-nav__hover--library,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--profile:focus-visible) .tz-bottom-nav__hover--profile,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--adventure.tz-bottom-nav__hit--active) .tz-bottom-nav__hover--adventure,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--daily-challenge.tz-bottom-nav__hit--active) .tz-bottom-nav__hover--daily-challenge,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--random.tz-bottom-nav__hit--active) .tz-bottom-nav__hover--random,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--library.tz-bottom-nav__hit--active) .tz-bottom-nav__hover--library,
.tz-bottom-nav-plaque:has(.tz-bottom-nav__hit--profile.tz-bottom-nav__hit--active) .tz-bottom-nav__hover--profile {
  opacity: 1;
}

.tz-bottom-nav__hit {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  width: var(--tz-bottom-nav-hit-w);
  height: var(--tz-bottom-nav-hit-h);
  z-index: 2;
}

.tz-bottom-nav__hit--adventure {
  left: var(--tz-bottom-nav-adventure-x);
  top: var(--tz-bottom-nav-adventure-y);
}

.tz-bottom-nav__hit--daily-challenge {
  left: var(--tz-bottom-nav-daily-challenge-x);
  top: var(--tz-bottom-nav-daily-challenge-y);
}

.tz-bottom-nav__hit--random {
  left: var(--tz-bottom-nav-random-x);
  top: var(--tz-bottom-nav-random-y);
}

.tz-bottom-nav__hit--library {
  left: var(--tz-bottom-nav-library-x);
  top: var(--tz-bottom-nav-library-y);
}

.tz-bottom-nav__hit--profile {
  left: var(--tz-bottom-nav-profile-x);
  top: var(--tz-bottom-nav-profile-y);
}

.tz-bottom-nav__hit--active {
  /* Static art — selection tracked for a11y / future highlight art */
}

/* ── Use hint modal (over board) ── */

.tz-hint-menu-root {
  top: var(--tz-y-board);
  left: 0;
  width: var(--tz-design-width);
  height: var(--tz-h-board-slot);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tz-hint-menu-root:not([hidden]) {
  pointer-events: auto;
}

.tz-hint-menu-root[hidden] {
  display: none !important;
}

.tz-hint-menu-root__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.55);
  cursor: pointer;
}

.tz-hint-menu {
  position: relative;
  z-index: 1;
  width: var(--tz-hint-menu-display-w);
  aspect-ratio: calc(var(--tz-hint-menu-art-w) / var(--tz-hint-menu-art-h));
  max-height: 100%;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}

.tz-hint-menu__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-hint-menu__close {
  position: absolute;
  left: calc(var(--tz-hint-menu-close-x) + var(--tz-hint-menu-close-nudge-x));
  top: calc(var(--tz-hint-menu-close-y) + var(--tz-hint-menu-close-nudge-y));
  transform: scale(var(--tz-hint-menu-close-scale));
  transform-origin: center center;
  width: var(--tz-hint-menu-close-w);
  height: var(--tz-hint-menu-close-h);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
}

.tz-hint-menu__close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  background: transparent;
  opacity: var(--tz-hint-menu-close-opacity);
}

.tz-hint-menu__available {
  position: absolute;
  left: 50%;
  top: var(--tz-hint-menu-available-y);
  transform: translate(
    calc(-50% + var(--tz-hint-menu-available-nudge-x)),
    var(--tz-hint-menu-available-nudge-y)
  );
  margin: 0;
  padding: 2px var(--tz-hint-menu-available-pad-x);
  min-width: var(--tz-hint-menu-available-min-width);
  width: max-content;
  text-align: center;
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 4.2vw, 1.05rem);
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: #5c4033;
  text-shadow: none;
  background: var(--tz-hint-menu-available-bg);
  border-radius: 2px;
  pointer-events: none;
}

.tz-hint-menu__controls button {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.tz-hint-menu__controls button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.tz-hint-menu__token {
  overflow: visible;
}

.tz-hint-menu__token--random {
  left: var(--tz-hint-menu-token-random-x, var(--tz-hint-menu-token-x));
  top: var(--tz-hint-menu-token-random-y);
  width: var(--tz-hint-menu-token-random-w, var(--tz-hint-menu-token-w));
  height: var(--tz-hint-menu-token-random-h, var(--tz-hint-menu-token-h));
  transform: translate(
    var(--tz-hint-menu-token-random-nudge-x),
    var(--tz-hint-menu-token-random-nudge-y)
  );
}
.tz-hint-menu__token--start {
  left: var(--tz-hint-menu-token-start-x, var(--tz-hint-menu-token-x));
  top: var(--tz-hint-menu-token-start-y);
  width: var(--tz-hint-menu-token-start-w, var(--tz-hint-menu-token-w));
  height: var(--tz-hint-menu-token-start-h, var(--tz-hint-menu-token-h));
  transform: translate(
    var(--tz-hint-menu-token-start-nudge-x),
    var(--tz-hint-menu-token-start-nudge-y)
  );
}
.tz-hint-menu__token--end {
  left: var(--tz-hint-menu-token-end-x, var(--tz-hint-menu-token-x));
  top: var(--tz-hint-menu-token-end-y);
  width: var(--tz-hint-menu-token-end-w, var(--tz-hint-menu-token-w));
  height: var(--tz-hint-menu-token-end-h, var(--tz-hint-menu-token-h));
  transform: translate(
    var(--tz-hint-menu-token-end-nudge-x),
    var(--tz-hint-menu-token-end-nudge-y)
  );
}

.tz-hint-menu__token.is-selected {
  filter: none;
}

.tz-hint-menu__token.is-selected img {
  filter:
    drop-shadow(0 0 4px rgba(232, 185, 35, 0.95))
    drop-shadow(0 0 9px rgba(232, 185, 35, 0.65))
    drop-shadow(0 0 14px rgba(255, 210, 80, 0.4));
}

.tz-hint-menu__token:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tz-hint-menu__token:disabled img {
  filter: grayscale(0.45);
}

.tz-hint-menu__cancel {
  left: var(--tz-hint-menu-cancel-x);
  top: var(--tz-hint-menu-cancel-y);
  width: var(--tz-hint-menu-cancel-w);
  height: var(--tz-hint-menu-cancel-h);
}

.tz-hint-menu__confirm {
  left: var(--tz-hint-menu-confirm-x);
  top: var(--tz-hint-menu-confirm-y);
  width: var(--tz-hint-menu-confirm-w);
  height: var(--tz-hint-menu-confirm-h);
}

.tz-hint-menu__confirm:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.35);
}

.tz-hint-menu__confirm:not(:disabled):hover,
.tz-hint-menu__token:hover,
.tz-hint-menu__cancel:hover {
  filter: brightness(1.06);
}

/* ── I'm Stuck popup ── */

.tz-stuck-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-stuck-root[hidden] {
  display: none !important;
}

.tz-stuck-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-stuck-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  width: min(
    calc(var(--tz-w-preview, var(--tz-design-width)) * var(--tz-stuck-preview-layout-width-ratio)),
    calc(100vw - var(--tz-stuck-display-pad))
  );
  aspect-ratio: calc(var(--tz-stuck-art-w) / var(--tz-stuck-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

.tz-stuck-dialog.is-reveal {
  width: min(
    calc(var(--tz-w-preview, var(--tz-design-width)) * var(--tz-stuck-preview-layout-width-ratio)),
    calc(100vw - var(--tz-stuck-display-pad))
  );
  aspect-ratio: calc(var(--tz-stuck-reveal-art-w) / var(--tz-stuck-reveal-art-h));
}

.tz-stuck-dialog__frame {
  position: absolute;
  inset: 0;
}

.tz-stuck-dialog__frame[hidden],
.tz-stuck-dialog__preview[hidden],
.tz-stuck-dialog__actions[hidden],
.tz-stuck-dialog__btn[hidden] {
  display: none !important;
}

.tz-stuck-dialog__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-stuck-dialog__bg--reveal {
  display: none;
  object-fit: fill;
}

.tz-stuck-dialog__frame.is-preview .tz-stuck-dialog__bg--base {
  display: none;
}

.tz-stuck-dialog__frame.is-preview .tz-stuck-dialog__bg--reveal {
  display: block;
}

.tz-stuck-dialog__warn {
  position: absolute;
  left: 50%;
  top: calc(var(--tz-stuck-warn-y) + var(--tz-stuck-warn-nudge-y));
  transform: translate(-50%, 0);
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(40, 16, 12, 0.82);
  color: #f0b8a0;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  max-width: 78%;
}

.tz-stuck-dialog__actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tz-stuck-dialog__btn {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.tz-stuck-dialog__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-stuck-dialog__btn--keep {
  left: var(--tz-stuck-keep-x);
  top: var(--tz-stuck-keep-y);
  width: var(--tz-stuck-keep-w);
  height: var(--tz-stuck-btn-h);
  z-index: 2;
}

.tz-stuck-dialog__btn--view {
  left: var(--tz-stuck-view-x);
  top: var(--tz-stuck-view-y);
  width: var(--tz-stuck-view-w);
  height: var(--tz-stuck-btn-h);
  z-index: 2;
}

.tz-stuck-dialog__btn--close {
  left: var(--tz-stuck-reveal-close-x);
  top: var(--tz-stuck-reveal-close-y);
  width: var(--tz-stuck-reveal-close-w);
  height: var(--tz-stuck-reveal-close-h);
  z-index: 5;
}

.tz-stuck-dialog__frame.is-preview .tz-stuck-dialog__btn--view {
  display: none;
}

.tz-stuck-dialog__frame.is-preview .tz-stuck-dialog__btn--keep {
  left: var(--tz-stuck-reveal-keep-x);
  top: var(--tz-stuck-reveal-keep-y);
  width: var(--tz-stuck-reveal-keep-w);
  height: var(--tz-stuck-reveal-keep-h);
}

.tz-stuck-dialog__frame.is-preview .tz-stuck-dialog__btn--keep img {
  display: none;
}

.tz-stuck-dialog__preview {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.tz-stuck-dialog__frame.is-preview .tz-stuck-dialog__preview {
  left: var(--tz-stuck-reveal-preview-x);
  top: var(--tz-stuck-reveal-preview-y);
  width: calc(
    var(--tz-stuck-reveal-preview-w) * var(--tz-stuck-reveal-preview-width-scale, 0.95)
  );
  height: calc(
    var(--tz-stuck-reveal-preview-h) * var(--tz-stuck-reveal-preview-height-scale, 0.45)
  );
  transform: translateX(calc(-50% * var(--tz-stuck-reveal-preview-center-x, 1)));
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tz-stuck-dialog__preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: transparent;
  filter: contrast(1.06) saturate(1.05);
}

.tz-stuck-dialog__btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.tz-stuck-dialog__btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(0.45);
}

/* ── Random puzzle popup ── */

.tz-random-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-random-root[hidden] {
  display: none !important;
}

.tz-random-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-random-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  width: min(
    100vw,
    calc(var(--tz-random-max-design-width, var(--tz-design-width)) * var(--tz-random-width-scale, 1)),
    calc(var(--tz-random-art-w) * 1px)
  );
  aspect-ratio: calc(var(--tz-random-art-w) / var(--tz-random-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

html.tz-phone-preview .tz-random-dialog {
  width: min(
    calc(var(--tz-random-max-design-width, var(--tz-design-width)) * var(--tz-random-width-scale, 1)),
    calc(var(--tz-random-art-w) * 1px)
  );
}

.tz-random-dialog__frame {
  position: absolute;
  inset: 0;
}

.tz-random-dialog__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-random-dialog__actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tz-random-dialog__btn {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.tz-random-dialog__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: filter 0.15s ease;
}

.tz-random-dialog__btn--remain {
  left: var(--tz-random-remain-x);
  top: var(--tz-random-remain-y);
  width: var(--tz-random-remain-w);
  height: var(--tz-random-remain-h);
  z-index: 2;
}

.tz-random-dialog__btn--venture {
  left: var(--tz-random-venture-x);
  top: var(--tz-random-venture-y);
  width: var(--tz-random-venture-w);
  height: var(--tz-random-venture-h);
  z-index: 2;
}

.tz-random-dialog__btn--close {
  left: var(--tz-random-close-x);
  top: var(--tz-random-close-y);
  width: var(--tz-random-close-w);
  height: var(--tz-random-close-h);
  z-index: 5;
}

@media (hover: hover) {
  .tz-random-dialog__btn:hover:not(:disabled) {
    z-index: 6;
  }

  .tz-random-dialog__btn:hover:not(:disabled) img {
    filter: brightness(1.12)
      drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
      drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
  }
}

.tz-random-dialog__btn:focus-visible img {
  filter: brightness(1.12)
    drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
    drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
  outline: none;
}

.tz-random-dialog__btn:active:not(:disabled) {
  transform: scale(0.97);
}

.tz-random-dialog__btn:active:not(:disabled) img {
  filter: brightness(1.12)
    drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
    drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
}

/* ── Challenge begin gate / progress — ChallengeBeginBase + ChallengeProgressBase 1397×1126 ── */

.tz-challenge-begin-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-challenge-begin-root[hidden] {
  display: none !important;
}

.tz-challenge-begin-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-challenge-begin-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  width: min(
    100vw,
    calc(
      var(--tz-challenge-begin-max-design-width, var(--tz-design-width))
      * var(--tz-challenge-begin-width-scale, 1)
      * var(--tz-ui-scale, 1)
    ),
    calc(var(--tz-challenge-begin-art-w) * 1px * var(--tz-ui-scale, 1))
  );
  aspect-ratio: calc(var(--tz-challenge-begin-art-w) / var(--tz-challenge-begin-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

html.tz-phone-preview .tz-challenge-begin-dialog {
  width: min(
    calc(
      var(--tz-challenge-begin-max-design-width, var(--tz-design-width))
      * var(--tz-challenge-begin-width-scale, 1)
    ),
    calc(var(--tz-challenge-begin-art-w) * 1px)
  );
}

.tz-challenge-begin-dialog__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.tz-challenge-begin-dialog__bg,
.tz-challenge-begin-dialog__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

.tz-challenge-begin-dialog__overlay {
  z-index: 1;
}

.tz-challenge-begin-root.tz-challenge-begin--gate .tz-challenge-begin-dialog__btn--continue {
  display: none;
}

.tz-challenge-begin-root.tz-challenge-begin--progress .tz-challenge-begin-dialog__btn--begin {
  display: none;
}

.tz-challenge-begin-dialog__btn {
  position: absolute;
  z-index: 3;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tz-challenge-begin-dialog__btn--begin {
  left: var(--tz-challenge-begin-begin-x);
  top: var(--tz-challenge-begin-begin-y);
  width: var(--tz-challenge-begin-begin-w);
  height: var(--tz-challenge-begin-begin-h);
}

.tz-challenge-begin-dialog__btn--continue {
  left: var(--tz-challenge-begin-continue-x);
  top: var(--tz-challenge-begin-continue-y);
  width: var(--tz-challenge-begin-continue-w);
  height: var(--tz-challenge-begin-continue-h);
}

.tz-challenge-begin-dialog__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

@media (hover: hover) {
  .tz-challenge-begin-dialog__btn:hover:not(:disabled) img {
    filter: brightness(1.08) drop-shadow(0 0 6px rgba(232, 185, 35, 0.45));
  }
}

.tz-challenge-begin-dialog__btn:focus-visible img {
  filter: brightness(1.1)
    drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
    drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
}

.tz-challenge-begin-dialog__btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* ── Buy hint tokens (Buy-Hints.png) ── */

:root {
  --tz-buy-hints-art-w: 797;
  --tz-buy-hints-art-h: 898;
  --tz-buy-hints-display-pad: 32px;
  --tz-buy-hints-max-design-width: 390px;
  --tz-buy-hints-width-scale: 0.92;
  --tz-buy-hints-exit-right: 5%;
  --tz-buy-hints-exit-bottom: 3.5%;
  --tz-buy-hints-exit-size: 48px;
}

.tz-buy-hints-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-buy-hints-root[hidden] {
  display: none !important;
}

.tz-buy-hints-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-buy-hints-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  width: min(
    100vw,
    calc(
      var(--tz-buy-hints-max-design-width, var(--tz-design-width))
      * var(--tz-buy-hints-width-scale, 0.92)
    ),
    calc(var(--tz-buy-hints-art-w) * 1px)
  );
  aspect-ratio: calc(var(--tz-buy-hints-art-w) / var(--tz-buy-hints-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

html.tz-phone-preview .tz-buy-hints-dialog {
  width: min(
    calc(
      var(--tz-buy-hints-max-design-width, var(--tz-design-width))
      * var(--tz-buy-hints-width-scale, 0.92)
    ),
    calc(var(--tz-buy-hints-art-w) * 1px)
  );
}

.tz-buy-hints-dialog__frame {
  position: absolute;
  inset: 0;
}

.tz-buy-hints-dialog__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-buy-hints-dialog__exit {
  position: absolute;
  right: var(--tz-buy-hints-exit-right);
  bottom: var(--tz-buy-hints-exit-bottom);
  width: var(--tz-buy-hints-exit-size);
  height: var(--tz-buy-hints-exit-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.tz-buy-hints-dialog__exit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-buy-hints-dialog__exit:hover {
  filter: brightness(1.08);
}

.tz-buy-hints-dialog__exit:active {
  transform: scale(0.97);
}

/* ── Use random hint confirm (Use ingame hint.png) ── */

:root {
  --tz-use-hint-art-w: 1376;
  --tz-use-hint-art-h: 1143;
  --tz-use-hint-display-pad: 32px;
  --tz-use-hint-max-design-width: 390px;
  --tz-use-hint-width-scale: 0.92;
  --tz-use-hint-close-top: 3%;
  --tz-use-hint-close-right: 4%;
  --tz-use-hint-close-size: 44px;
  --tz-use-hint-confirm-bottom: 5%;
  --tz-use-hint-confirm-w: 72%;
  --tz-use-hint-confirm-h: 9%;
}

.tz-use-hint-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-use-hint-root[hidden] {
  display: none !important;
}

.tz-use-hint-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-use-hint-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  width: min(
    100vw,
    calc(var(--tz-use-hint-max-design-width, var(--tz-design-width)) * var(--tz-use-hint-width-scale, 0.92)),
    calc(var(--tz-use-hint-art-w) * 1px)
  );
  aspect-ratio: calc(var(--tz-use-hint-art-w) / var(--tz-use-hint-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

html.tz-phone-preview .tz-use-hint-dialog {
  width: min(
    calc(var(--tz-use-hint-max-design-width, var(--tz-design-width)) * var(--tz-use-hint-width-scale, 0.92)),
    calc(var(--tz-use-hint-art-w) * 1px)
  );
}

.tz-use-hint-dialog__frame {
  position: absolute;
  inset: 0;
}

.tz-use-hint-dialog__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-use-hint-dialog__cost {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  container-type: inline-size;
  font-size: clamp(0.62rem, 2.4cqi, 0.82rem);
  line-height: 1.35;
  color: #2a4a42;
  text-shadow: 0 1px 0 rgba(255, 248, 220, 0.55);
  pointer-events: none;
  z-index: 1;
}

.tz-use-hint-dialog__warn {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  container-type: inline-size;
  font-size: clamp(0.62rem, 2.4cqi, 0.8rem);
  color: #7a2020;
  font-weight: 600;
  z-index: 1;
}

.tz-use-hint-dialog__close {
  position: absolute;
  top: var(--tz-use-hint-close-top);
  right: var(--tz-use-hint-close-right);
  width: var(--tz-use-hint-close-size);
  height: var(--tz-use-hint-close-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.tz-use-hint-dialog__close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-use-hint-dialog__confirm {
  position: absolute;
  left: 50%;
  bottom: var(--tz-use-hint-confirm-bottom);
  transform: translateX(-50%);
  width: var(--tz-use-hint-confirm-w);
  height: var(--tz-use-hint-confirm-h);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.tz-use-hint-dialog__confirm img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-use-hint-dialog__confirm:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ── Reset with hint tiles (RestWithUsedHints.png) ── */

:root {
  --tz-reset-hint-art-w: 1315;
  --tz-reset-hint-art-h: 1087;
  --tz-reset-hint-display-pad: 32px;
  --tz-reset-hint-max-design-width: 390px;
  --tz-reset-hint-width-scale: 0.92;
  --tz-reset-hint-close-x: 87.5%;
  --tz-reset-hint-close-y: 2.2%;
  --tz-reset-hint-close-w: 9%;
  --tz-reset-hint-close-h: 8%;
  --tz-reset-hint-remove-x: 10%;
  --tz-reset-hint-remove-y: 78.5%;
  --tz-reset-hint-remove-w: 38%;
  --tz-reset-hint-remove-h: 12%;
  --tz-reset-hint-keep-x: 52%;
  --tz-reset-hint-keep-y: 78.5%;
  --tz-reset-hint-keep-w: 38%;
  --tz-reset-hint-keep-h: 12%;
}

.tz-reset-hint-root {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-reset-hint-root[hidden] {
  display: none !important;
}

.tz-reset-hint-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(8, 12, 18, 0.62);
  cursor: pointer;
}

.tz-reset-hint-dialog {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(
    calc(var(--tz-reset-hint-max-design-width, var(--tz-design-width)) * var(--tz-reset-hint-width-scale, 0.92)),
    calc(var(--tz-reset-hint-art-w) * 1px)
  );
  aspect-ratio: calc(var(--tz-reset-hint-art-w) / var(--tz-reset-hint-art-h));
  flex-shrink: 0;
}

.tz-reset-hint-dialog__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.tz-reset-hint-dialog__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-reset-hint__hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}

.tz-reset-hint__hit--close {
  left: var(--tz-reset-hint-close-x);
  top: var(--tz-reset-hint-close-y);
  width: var(--tz-reset-hint-close-w);
  height: var(--tz-reset-hint-close-h);
  z-index: 2;
}

.tz-reset-hint__hit--close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-reset-hint__hit--remove {
  left: var(--tz-reset-hint-remove-x);
  top: var(--tz-reset-hint-remove-y);
  width: var(--tz-reset-hint-remove-w);
  height: var(--tz-reset-hint-remove-h);
}

.tz-reset-hint__hit--keep {
  left: var(--tz-reset-hint-keep-x);
  top: var(--tz-reset-hint-keep-y);
  width: var(--tz-reset-hint-keep-w);
  height: var(--tz-reset-hint-keep-h);
}

@media (hover: hover) {
  .tz-reset-hint__hit--remove:hover,
  .tz-reset-hint__hit--keep:hover {
    background: rgba(212, 168, 75, 0.12);
  }

  .tz-reset-hint__hit--close:hover img {
    filter: brightness(1.08);
  }
}

.tz-reset-hint__hit:focus-visible {
  outline: 2px solid rgba(212, 168, 75, 0.95);
  outline-offset: 2px;
}

.tz-reset-hint__hit:active {
  transform: scale(0.98);
}

/* ── Rank advancement award popup ── */

.tz-rank-award-root {
  position: fixed;
  inset: 0;
  z-index: 195;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.tz-rank-award-root[hidden] {
  display: none !important;
}

.tz-rank-award-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.72);
  cursor: pointer;
}

.tz-rank-award-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: min(
    calc(var(--tz-rank-award-max-width, 390px) * var(--tz-rank-award-width-scale, 0.92)),
    calc(var(--tz-rank-award-art-w) * 1px)
  );
  aspect-ratio: calc(var(--tz-rank-award-art-w) / var(--tz-rank-award-art-h));
  margin: auto;
}

.tz-rank-award-dialog__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.tz-rank-award-dialog__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-rank-award__hit {
  position: absolute;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tz-rank-award__hit--continue {
  left: var(--tz-rank-award-continue-x, 14%);
  top: var(--tz-rank-award-continue-y, 87%);
  width: var(--tz-rank-award-continue-w, 72%);
  height: var(--tz-rank-award-continue-h, 9%);
  z-index: 2;
}

.rank-award-tuner-page .tz-rank-award__hit.tuner-box {
  background: rgba(100, 200, 255, 0.28) !important;
  border: 2px solid rgba(100, 200, 255, 0.85) !important;
  border-radius: 4px;
  z-index: 6;
  cursor: move;
}

.rank-award-tuner-page .tz-rank-award__hit.tuner-box.is-tuner-active {
  border-color: #e8b923 !important;
  z-index: 7;
}

.rank-award-tuner-page .tz-rank-award__hit.tuner-box .hit-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(7px, 2.2cqi, 11px);
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  text-align: center;
}

.tz-preview-v2-hint-plaque--count,
.tz-preview-v2-hint-token-count--count {
  cursor: pointer;
}

/* ── Explorer profile overlay (Logged-in.png) ── */

.tz-profile-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(0px, env(safe-area-inset-top, 0px))
    max(8px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(8px, env(safe-area-inset-left, 0px));
  /* Match logged-in tuner preview frame cap */
  --tz-profile-max-design-width: min(100%, var(--auth-profile-max-width, 390px));
}

.tz-profile-root[hidden] {
  display: none !important;
}

.tz-profile-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-profile-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  width: var(
    --auth-passport-frame-width,
    min(
      100%,
      var(--auth-profile-max-width, calc(420px * var(--tz-frame-upscale, 1))),
      calc(390px * var(--tz-frame-upscale, 1))
    )
  );
  max-height: var(--auth-passport-avail-h, calc(100dvh - var(--tz-profile-display-pad)));
  aspect-ratio: calc(var(--tz-profile-art-w) / var(--tz-profile-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

html.tz-phone-preview .tz-profile-dialog {
  width: var(
    --auth-passport-frame-width,
    min(
      var(--auth-profile-max-width, calc(420px * var(--tz-frame-upscale, 1))),
      calc(390px * var(--tz-frame-upscale, 1)),
      100%
    )
  );
}

.tz-profile-dialog__stage {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.tz-profile-dialog__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-profile-dialog__name {
  position: absolute;
  left: var(--auth-profile-profileName-x, 15%);
  top: var(--auth-profile-profileName-y, 22.5%);
  width: var(--auth-profile-profileName-w, 70%);
  height: var(--auth-profile-profileName-h, 4%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(
    0.42rem,
    calc(7.6cqw * var(--auth-profile-profileName-font-scale, 1)),
    calc(0.74rem * var(--auth-profile-profileName-font-scale, 1))
  );
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.05;
  container-type: inline-size;
  font-weight: 600;
  color: #3d2e1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.tz-profile-dialog__guest-note {
  position: absolute;
  pointer-events: none;
}

.tz-profile-dialog__guest-note[hidden] {
  display: none !important;
}

.tz-profile-dialog__hit {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.tz-profile-dialog__hit--nav-daily {
  left: var(--auth-profile-navDaily-x, 3%);
  top: var(--auth-profile-navDaily-y, 92%);
  width: var(--auth-profile-navDaily-w, 22%);
  height: var(--auth-profile-navDaily-h, 5.5%);
}

.tz-profile-dialog__hit--nav-adventure {
  left: var(--auth-profile-navAdventure-x, 27%);
  top: var(--auth-profile-navAdventure-y, 92%);
  width: var(--auth-profile-navAdventure-w, 22%);
  height: var(--auth-profile-navAdventure-h, 5.5%);
}

.tz-profile-dialog__hit--nav-random {
  left: var(--auth-profile-navRandom-x, 51%);
  top: var(--auth-profile-navRandom-y, 92%);
  width: var(--auth-profile-navRandom-w, 22%);
  height: var(--auth-profile-navRandom-h, 5.5%);
}

.tz-profile-dialog__hit--nav-logout {
  left: var(--auth-profile-navLogout-x, 75%);
  top: var(--auth-profile-navLogout-y, 92%);
  width: var(--auth-profile-navLogout-w, 22%);
  height: var(--auth-profile-navLogout-h, 5.5%);
}

.tz-profile-dialog__hit--back {
  left: var(--auth-profile-back-x, 2%);
  top: var(--auth-profile-back-y, 1.5%);
  width: var(--auth-profile-back-w, 10%);
  height: var(--auth-profile-back-h, 5%);
}

.tz-profile-dialog__hit--close-x {
  left: var(--auth-profile-closeX-x, 86%);
  top: var(--auth-profile-closeX-y, 1.5%);
  width: var(--auth-profile-closeX-w, 10%);
  height: var(--auth-profile-closeX-h, 5%);
}

.tz-profile-dialog__hit--back img,
.tz-profile-dialog__hit--close-x img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ── Puzzle Info popup ── */

.tz-pinfo-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-pinfo-root[hidden] {
  display: none !important;
}

.tz-pinfo-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-pinfo-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  box-sizing: border-box;
  width: min(
    calc(100vw - 32px),
    100%,
    var(--tz-pinfo-max-design-width, var(--tz-design-width))
  );
  max-width: 100%;
  max-height: calc(100dvh - var(--tz-pinfo-display-pad));
  aspect-ratio: calc(var(--tz-pinfo-art-w) / var(--tz-pinfo-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

html.tz-phone-preview .tz-pinfo-dialog {
  width: min(
    100%,
    var(--tz-pinfo-max-design-width, var(--tz-design-width))
  );
}

.tz-pinfo-dialog__frame {
  position: absolute;
  inset: 0;
}

.tz-pinfo-dialog__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-pinfo-dialog__rank-wrap {
  position: absolute;
  left: var(--tz-pinfo-rank-x);
  top: var(--tz-pinfo-rank-y);
  width: var(--tz-pinfo-rank-w);
  aspect-ratio: 1;
  pointer-events: none;
}

.tz-pinfo-dialog__rank {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tz-pinfo-dialog__rank-roman {
  position: absolute;
  left: 50%;
  top: var(--tz-pinfo-rank-roman-y);
  transform: translate(-50%, calc(-50% + var(--tz-pinfo-rank-roman-nudge-y)));
  font-size: 0.55rem;
  font-weight: 800;
  color: #f0e6c8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  line-height: 1;
}

.tz-pinfo-field {
  position: absolute;
  margin: 0;
  font-weight: 700;
  color: var(--tz-pinfo-field-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  line-height: 1.15;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tz-pinfo-field--id {
  left: var(--tz-pinfo-id-x);
  top: var(--tz-pinfo-id-y);
  width: var(--tz-pinfo-id-w, var(--tz-pinfo-field-w));
  font-size: var(--tz-pinfo-field-font);
  transform: translate(var(--tz-pinfo-id-nudge-x), var(--tz-pinfo-id-nudge-y));
}

.tz-pinfo-field--size {
  left: var(--tz-pinfo-size-x);
  top: var(--tz-pinfo-size-y);
  width: var(--tz-pinfo-size-w, var(--tz-pinfo-field-w));
  font-size: var(--tz-pinfo-field-font);
  transform: translate(var(--tz-pinfo-size-nudge-x), var(--tz-pinfo-size-nudge-y));
}

.tz-pinfo-field--type {
  left: var(--tz-pinfo-type-x);
  top: var(--tz-pinfo-type-y);
  width: var(--tz-pinfo-type-w, var(--tz-pinfo-field-w));
  font-size: var(--tz-pinfo-field-font);
  transform: translate(var(--tz-pinfo-type-nudge-x), var(--tz-pinfo-type-nudge-y));
}

.tz-pinfo-solutions-bar {
  position: absolute;
  left: var(--tz-pinfo-bar-x);
  top: var(--tz-pinfo-bar-y);
  width: var(--tz-pinfo-bar-w);
  height: var(--tz-pinfo-bar-h);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  pointer-events: none;
  transform: translate(var(--tz-pinfo-bar-nudge-x), var(--tz-pinfo-bar-nudge-y));
}

.tz-pinfo-sq {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: #d9c9a8;
  box-shadow: inset 0 0 0 1px rgba(120, 96, 56, 0.35);
}

.tz-pinfo-sq--filled {
  background: linear-gradient(180deg, #5fa85a 0%, #3d7a3a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tz-pinfo-field--found {
  left: var(--tz-pinfo-found-x);
  top: var(--tz-pinfo-found-y);
  width: var(--tz-pinfo-found-w);
  font-size: var(--tz-pinfo-field-font-lg);
  text-align: center;
  transform: translate(var(--tz-pinfo-found-nudge-x), var(--tz-pinfo-found-nudge-y));
}

.tz-pinfo-field--hints {
  left: var(--tz-pinfo-hints-x);
  top: var(--tz-pinfo-hints-y);
  width: var(--tz-pinfo-hints-w);
  font-size: var(--tz-pinfo-field-font-lg);
  text-align: center;
  transform: translate(var(--tz-pinfo-hints-nudge-x), var(--tz-pinfo-hints-nudge-y));
}

.tz-pinfo-field--best {
  left: var(--tz-pinfo-best-x);
  top: var(--tz-pinfo-best-y);
  width: var(--tz-pinfo-best-w);
  font-size: var(--tz-pinfo-field-font-lg);
  text-align: center;
  transform: translate(var(--tz-pinfo-best-nudge-x), var(--tz-pinfo-best-nudge-y));
}

.tz-pinfo-field--solved {
  left: var(--tz-pinfo-solved-x);
  top: var(--tz-pinfo-solved-y);
  width: var(--tz-pinfo-solved-w);
  font-size: var(--tz-pinfo-field-font);
  text-align: center;
  transform: translate(var(--tz-pinfo-solved-nudge-x), var(--tz-pinfo-solved-nudge-y));
}

.tz-pinfo-dialog__close-x {
  position: absolute;
  left: var(--tz-pinfo-close-x);
  top: var(--tz-pinfo-close-y);
  width: var(--tz-pinfo-close-w);
  height: var(--tz-pinfo-close-h);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform: translate(
    calc(-50% + var(--tz-pinfo-close-nudge-x)),
    var(--tz-pinfo-close-nudge-y)
  );
  z-index: 2;
}

.tz-pinfo-dialog__close-x img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-pinfo-dialog__close-x:hover {
  filter: brightness(1.06);
}

.tz-pinfo-dialog__close-journal {
  position: absolute;
  left: var(--tz-pinfo-journal-x);
  top: var(--tz-pinfo-journal-y);
  width: var(--tz-pinfo-journal-w);
  height: var(--tz-pinfo-journal-h);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform: translate(
    calc(-50% + var(--tz-pinfo-journal-nudge-x)),
    var(--tz-pinfo-journal-nudge-y)
  );
  z-index: 2;
}

/* ── Puzzle Journal ── */

.tz-journal-root {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
}

.tz-journal-root[hidden] { display: none !important; }

.tz-journal-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.68);
  cursor: pointer;
}

.tz-journal-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  container-type: inline-size;
  margin:
    calc(var(--tz-journal-dialog-top) + var(--tz-journal-dialog-top-nudge))
    auto
    0;
  width: min(
    100%,
    var(--tz-journal-max-design-width, calc(var(--tz-design-width) * var(--tz-frame-upscale, 1))),
    calc(var(--tz-journal-art-w) * 1px * var(--tz-frame-upscale, 1))
  );
  max-width: 100%;
  aspect-ratio: calc(var(--tz-journal-art-w) / var(--tz-journal-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

.tz-journal-dialog__frame {
  position: absolute;
  inset: 0;
  container-type: inline-size;
}

.tz-journal-dialog__frame.is-loading > :not(.tz-journal-loading):not(.tz-journal-dialog__bg) {
  visibility: hidden;
}

.tz-journal-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: rgba(244, 228, 188, 0.82);
}

.tz-journal-loading[hidden] {
  display: none !important;
}

.tz-journal-loading__text {
  margin: 0;
  max-width: 16rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  line-height: 1.45;
  color: #3a2b16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.tz-journal-dialog__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.tz-journal-dialog__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.tz-journal-dialog__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-journal-dialog__overlay[hidden] {
  display: none !important;
}

.tz-journal-dialog__frame > .tz-journal-pane,
.tz-journal-dialog__frame > .tz-journal-pane-title,
.tz-journal-dialog__frame > .tz-journal-hit,
.tz-journal-dialog__frame > .tz-journal-revisit,
.tz-journal-dialog__frame > .tz-journal-record-top {
  z-index: 2;
}

.tz-journal-pane {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
}

.tz-journal-pane--top {
  left: calc(var(--tz-journal-pane-top-x) * 1% + var(--tz-journal-pane-top-nudge-x));
  top: calc(var(--tz-journal-pane-top-y) * 1% + var(--tz-journal-pane-top-nudge-y));
  width: calc(var(--tz-journal-pane-top-w) * 1%);
  height: calc(var(--tz-journal-pane-top-h) * 1%);
}

.tz-journal-pane--bl {
  left: calc(var(--tz-journal-pane-bl-x, 8) * 1% + var(--tz-journal-pane-bl-nudge-x, 0px));
  top: calc(var(--tz-journal-pane-bl-y, 52) * 1% + var(--tz-journal-pane-bl-nudge-y, 0px));
  width: calc(var(--tz-journal-pane-bl-w, 44) * 1%);
  height: calc(var(--tz-journal-pane-bl-h, 32) * 1%);
}

.tz-journal-pane--br {
  left: calc(var(--tz-journal-pane-br-x, 53) * 1% + var(--tz-journal-pane-br-nudge-x, 0px));
  top: calc(var(--tz-journal-pane-br-y, 52) * 1% + var(--tz-journal-pane-br-nudge-y, 0px));
  width: calc(var(--tz-journal-pane-br-w, 39) * 1%);
  height: calc(var(--tz-journal-pane-br-h, 32) * 1%);
}

.tz-journal-pane-title {
  position: absolute;
  margin: 0;
  font-size: var(--tz-journal-label-font);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--tz-journal-field-color);
  text-transform: uppercase;
  pointer-events: none;
}

.tz-journal-pane--bl .tz-journal-list-title-bar {
  position: absolute;
  left: calc(var(--tz-journal-list-title-bar-x, 2) * 1% + var(--tz-journal-list-title-bar-nudge-x, 0px));
  top: calc(var(--tz-journal-list-title-bar-y, 1) * 1% + var(--tz-journal-list-title-bar-nudge-y, 0px));
  width: calc(var(--tz-journal-list-title-bar-w, 96) * 1%);
  height: calc(var(--tz-journal-list-title-bar-h, 10) * 1%);
  z-index: 4;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.tz-journal-root[data-journal-mode="library"] .tz-journal-pane--bl .tz-journal-list-title-bar {
  overflow: visible;
}

.tz-journal-pane--bl .tz-journal-list-title-bar .tz-journal-pane-title {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  line-height: 1.1;
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.tz-journal-pane--bl .tz-journal-list-title-bar .tz-journal-pane-title[hidden] {
  display: none !important;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-field--title-recorded {
  display: none !important;
}

.tz-journal-root[data-journal-mode="library"] .tz-journal-field--title-found {
  display: none !important;
}

/* Puzzle record journal — fixed in-game layout (not tuner-dependent) */
.tz-journal-root[data-journal-mode="record"] .tz-journal-pane--bl {
  overflow: visible;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-list-scroll {
  z-index: 1;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-list-scroller {
  z-index: 6;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-list__row {
  min-height: 0;
  line-height: 1.15;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-list__row-main {
  line-height: 1.15;
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-list-row-font-scale, 1) * var(--tz-journal-list-row-main-font-scale, 1));
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-list__row-sub {
  line-height: 1.1;
  font-size: calc(0.8em * var(--tz-journal-list-row-sub-font-scale, 1));
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-field--id {
  text-align: left;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-field--id dt,
.tz-journal-root[data-journal-mode="record"] .tz-journal-field--id dd {
  text-align: left;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-field--id dd {
  white-space: nowrap;
  overflow: visible;
  font-size: calc(var(--tz-journal-field-font-lg) * 0.9 * var(--tz-journal-field-id-value-font-scale, 1));
  letter-spacing: -0.01em;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-field--found,
.tz-journal-root[data-journal-mode="record"] .tz-journal-field--found dt,
.tz-journal-root[data-journal-mode="record"] .tz-journal-field--found dd {
  text-align: center;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-field--first,
.tz-journal-root[data-journal-mode="record"] .tz-journal-field--last {
  text-align: center;
}

.tz-journal-root[data-journal-mode="record"] .tz-journal-field--first dt,
.tz-journal-root[data-journal-mode="record"] .tz-journal-field--first dd,
.tz-journal-root[data-journal-mode="record"] .tz-journal-field--last dt,
.tz-journal-root[data-journal-mode="record"] .tz-journal-field--last dd {
  text-align: center;
}

.tz-journal-pane--bl .tz-journal-list-title-bar .tz-journal-field--title-found {
  left: calc(var(--tz-journal-title-found-x, 4) * 1% + var(--tz-journal-title-found-nudge-x, 0px));
  top: calc(var(--tz-journal-title-found-y, 10) * 1% + var(--tz-journal-title-found-nudge-y, 0px));
  width: calc(var(--tz-journal-title-found-w, 92) * 1%);
  height: calc(var(--tz-journal-title-found-h, 80) * 1%);
  font-size: calc(var(--tz-journal-label-font) * var(--tz-journal-title-found-font-scale, 1));
}

.tz-journal-pane--bl .tz-journal-list-title-bar .tz-journal-field--title-recorded {
  left: calc(var(--tz-journal-title-recorded-x, 4) * 1% + var(--tz-journal-title-recorded-nudge-x, 0px));
  top: calc(var(--tz-journal-title-recorded-y, 10) * 1% + var(--tz-journal-title-recorded-nudge-y, 0px));
  width: calc(var(--tz-journal-title-recorded-w, 92) * 1%);
  height: calc(var(--tz-journal-title-recorded-h, 80) * 1%);
  font-size: calc(var(--tz-journal-label-font) * var(--tz-journal-title-recorded-font-scale, 1));
}

.tz-journal-record-top {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.tz-journal-record-top[hidden] {
  display: none !important;
}

.tz-journal-record-top .tz-journal-stat,
.tz-journal-record-top .tz-journal-progress {
  pointer-events: auto;
}

.tz-journal-record-top .tz-journal-stat dt {
  opacity: 0.8;
  margin: 0 0 1px;
  line-height: 1.15;
}

.tz-journal-record-top .tz-journal-stat dd {
  font-weight: 700;
  line-height: 1.2;
}

.tz-journal-library-top {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tz-journal-stats {
  margin: 0;
  padding: 0;
  color: var(--tz-journal-field-color);
  font-size: var(--tz-journal-field-font);
}

.tz-journal-stat {
  position: absolute;
  margin: 0;
}

.tz-journal-stat dt {
  font-size: 0.85em;
  opacity: 0.75;
  margin: 0;
}

.tz-journal-stat dd {
  margin: 0;
  font-size: var(--tz-journal-field-font-lg);
  font-weight: 700;
}

.tz-journal-field--id dt {
  font-size: calc(0.85em * var(--tz-journal-field-id-label-font-scale, 1));
}
.tz-journal-field--id dd {
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-field-id-value-font-scale, 1));
}
.tz-journal-field--type dt {
  font-size: calc(0.85em * var(--tz-journal-field-type-label-font-scale, 1));
}
.tz-journal-field--type dd {
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-field-type-value-font-scale, 1));
}
.tz-journal-field--size dt {
  font-size: calc(0.85em * var(--tz-journal-field-size-label-font-scale, 1));
}
.tz-journal-field--size dd {
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-field-size-value-font-scale, 1));
}
.tz-journal-field--total dt {
  font-size: calc(0.85em * var(--tz-journal-field-total-label-font-scale, 1));
}
.tz-journal-field--total dd {
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-field-total-value-font-scale, 1));
}
.tz-journal-field--found dt {
  font-size: calc(0.85em * var(--tz-journal-field-found-label-font-scale, 1));
}
.tz-journal-field--found dd {
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-field-found-value-font-scale, 1));
}
.tz-journal-field--first dt {
  font-size: calc(0.85em * var(--tz-journal-field-first-label-font-scale, 1));
}
.tz-journal-field--first dd {
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-field-first-value-font-scale, 1));
}
.tz-journal-field--last dt {
  font-size: calc(0.85em * var(--tz-journal-field-last-label-font-scale, 1));
}
.tz-journal-field--last dd {
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-field-last-value-font-scale, 1));
}

.tz-journal-field--id {
  left: calc(var(--tz-journal-field-id-x) * 1% + var(--tz-journal-field-id-nudge-x));
  top: calc(var(--tz-journal-field-id-y) * 1% + var(--tz-journal-field-id-nudge-y));
  width: calc(var(--tz-journal-field-id-w) * 1%);
}
.tz-journal-field--type {
  left: calc(var(--tz-journal-field-type-x) * 1% + var(--tz-journal-field-type-nudge-x));
  top: calc(var(--tz-journal-field-type-y) * 1% + var(--tz-journal-field-type-nudge-y));
  width: calc(var(--tz-journal-field-type-w) * 1%);
}
.tz-journal-field--size {
  left: calc(var(--tz-journal-field-size-x) * 1% + var(--tz-journal-field-size-nudge-x));
  top: calc(var(--tz-journal-field-size-y) * 1% + var(--tz-journal-field-size-nudge-y));
  width: calc(var(--tz-journal-field-size-w) * 1%);
}
.tz-journal-field--total {
  left: calc(var(--tz-journal-field-total-x) * 1% + var(--tz-journal-field-total-nudge-x));
  top: calc(var(--tz-journal-field-total-y) * 1% + var(--tz-journal-field-total-nudge-y));
  width: calc(var(--tz-journal-field-total-w) * 1%);
}
.tz-journal-field--found {
  left: calc(var(--tz-journal-field-found-x) * 1% + var(--tz-journal-field-found-nudge-x));
  top: calc(var(--tz-journal-field-found-y) * 1% + var(--tz-journal-field-found-nudge-y));
  width: calc(var(--tz-journal-field-found-w) * 1%);
}
.tz-journal-field--first {
  left: calc(var(--tz-journal-field-first-x) * 1% + var(--tz-journal-field-first-nudge-x));
  top: calc(var(--tz-journal-field-first-y) * 1% + var(--tz-journal-field-first-nudge-y));
  width: calc(var(--tz-journal-field-first-w) * 1%);
}
.tz-journal-field--last {
  left: calc(var(--tz-journal-field-last-x) * 1% + var(--tz-journal-field-last-nudge-x));
  top: calc(var(--tz-journal-field-last-y) * 1% + var(--tz-journal-field-last-nudge-y));
  width: calc(var(--tz-journal-field-last-w) * 1%);
}

.tz-journal-progress {
  position: absolute;
  left: calc(var(--tz-journal-progress-bar-x) * 1% + var(--tz-journal-progress-bar-nudge-x));
  top: calc(var(--tz-journal-progress-bar-y) * 1% + var(--tz-journal-progress-bar-nudge-y));
  width: calc(var(--tz-journal-progress-bar-w) * 1%);
  height: calc(var(--tz-journal-progress-bar-h) * 1%);
  min-height: 8px;
  background: rgba(60, 40, 20, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.tz-journal-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7cb868, #5a9a48);
  border-radius: 4px;
  transition: width 0.2s ease;
}

.tz-journal-progress__label {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--tz-journal-field-color);
  text-shadow: 0 0 4px rgba(255, 248, 230, 0.8);
}

.tz-journal-library-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
}

.tz-journal-selector__title {
  margin: 0 0 4px;
  font-size: var(--tz-journal-label-font);
  font-weight: 800;
  color: var(--tz-journal-field-color);
  text-transform: uppercase;
}

.tz-journal-selector__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tz-journal-filter-btn,
.tz-journal-show-btn {
  padding: 4px 8px;
  border: 1px solid rgba(60, 40, 20, 0.35);
  border-radius: 4px;
  background: rgba(255, 248, 230, 0.55);
  color: var(--tz-journal-field-color);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.tz-journal-filter-btn.is-active,
.tz-journal-show-btn:hover {
  background: rgba(124, 184, 104, 0.45);
  border-color: rgba(60, 120, 48, 0.5);
}

.tz-journal-field--selector-size {
  position: absolute;
  left: calc(var(--tz-journal-selector-size-x) * 1% + var(--tz-journal-selector-size-nudge-x));
  top: calc(var(--tz-journal-selector-size-y) * 1% + var(--tz-journal-selector-size-nudge-y));
  width: calc(var(--tz-journal-selector-size-w) * 1%);
  height: calc(var(--tz-journal-selector-size-h) * 1%);
}
.tz-journal-field--selector-type {
  position: absolute;
  left: calc(var(--tz-journal-selector-type-x) * 1% + var(--tz-journal-selector-type-nudge-x));
  top: calc(var(--tz-journal-selector-type-y) * 1% + var(--tz-journal-selector-type-nudge-y));
  width: calc(var(--tz-journal-selector-type-w) * 1%);
  height: calc(var(--tz-journal-selector-type-h) * 1%);
}
.tz-journal-field--selector-status {
  position: absolute;
  left: calc(var(--tz-journal-selector-status-x) * 1% + var(--tz-journal-selector-status-nudge-x));
  top: calc(var(--tz-journal-selector-status-y) * 1% + var(--tz-journal-selector-status-nudge-y));
  width: calc(var(--tz-journal-selector-status-w) * 1%);
  height: calc(var(--tz-journal-selector-status-h) * 1%);
}

.tz-journal-pane--bl .tz-journal-list-scroll {
  position: absolute;
  left: calc(var(--tz-journal-list-content-x, 0) * 1% + var(--tz-journal-list-content-nudge-x, 0px));
  top: calc(var(--tz-journal-list-content-y, 12) * 1% + var(--tz-journal-list-content-nudge-y, 0px));
  width: calc(var(--tz-journal-list-content-w, 100) * 1%);
  height: calc(var(--tz-journal-list-content-h, 86) * 1%);
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.tz-journal-list-scroll::-webkit-scrollbar { display: none; }

.tz-journal-list {
  display: flex;
  flex-direction: column;
  gap: var(--tz-journal-list-row-gap, 4px);
  padding: 2px 4px 8px 2px;
}

.tz-journal-list__empty {
  margin: 8px 4px;
  font-size: var(--tz-journal-field-font);
  color: var(--tz-journal-field-color);
  opacity: 0.85;
}

.tz-journal-list__row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--tz-journal-list-row-pad-y, 6px) var(--tz-journal-list-row-pad-x, 8px);
  border: 1px solid rgba(60, 40, 20, 0.2);
  border-radius: 4px;
  background: rgba(255, 248, 230, 0.45);
  color: var(--tz-journal-field-color);
  font: inherit;
  font-size: calc(var(--tz-journal-field-font) * var(--tz-journal-list-row-font-scale, 1));
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.tz-journal-list__row--inProgress {
  background: rgba(180, 220, 160, 0.55);
  border-color: rgba(72, 130, 58, 0.35);
}

.tz-journal-list__row--complete {
  background: rgba(140, 200, 120, 0.65);
  border-color: rgba(180, 140, 40, 0.55);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 48, 0.35);
}

.tz-journal-list__row--active {
  z-index: 1;
  border-color: rgba(180, 120, 20, 0.95);
  background: rgba(255, 232, 150, 0.78);
  box-shadow:
    inset 4px 0 0 rgba(212, 168, 48, 0.98),
    0 0 0 1px rgba(212, 168, 48, 0.55);
}

.tz-journal-list__row--active.tz-journal-list__row--inProgress {
  background: rgba(210, 236, 170, 0.82);
}

.tz-journal-list__row--active.tz-journal-list__row--complete {
  background: rgba(190, 228, 150, 0.88);
}

.tz-journal-list__row--active .tz-journal-list__row-main {
  color: #3d2808;
}

.tz-journal-list__row--nav-pulse {
  animation: tz-journal-row-nav-pulse 0.45s ease-out;
}

@keyframes tz-journal-row-nav-pulse {
  0% {
    box-shadow:
      inset 4px 0 0 rgba(212, 168, 48, 0.98),
      0 0 0 1px rgba(212, 168, 48, 0.55),
      0 0 0 0 rgba(255, 210, 80, 0.85);
  }
  45% {
    box-shadow:
      inset 4px 0 0 rgba(212, 168, 48, 0.98),
      0 0 0 2px rgba(212, 168, 48, 0.85),
      0 0 0 6px rgba(255, 210, 80, 0.45);
  }
  100% {
    box-shadow:
      inset 4px 0 0 rgba(212, 168, 48, 0.98),
      0 0 0 1px rgba(212, 168, 48, 0.55),
      0 0 0 0 rgba(255, 210, 80, 0);
  }
}

.tz-journal-list__row-main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em;
  font-weight: 700;
  font-size: calc(var(--tz-journal-field-font-lg) * var(--tz-journal-list-row-font-scale, 1));
}

.tz-journal-list__row-id {
  font-size: calc(1em * var(--tz-journal-list-row-main-font-scale, 1));
}

.tz-journal-list__row-detail {
  font-weight: 500;
  opacity: 0.88;
  font-size: calc(0.92em * var(--tz-journal-list-row-detail-font-scale, 1));
}

.tz-journal-list__row-sub {
  font-size: calc(0.85em * var(--tz-journal-list-row-sub-font-scale, 1));
  opacity: 0.85;
}

.tz-journal-list__row-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--tz-journal-row-pct, 0%);
  background: rgba(90, 154, 72, 0.75);
  pointer-events: none;
}

.tz-journal-pane--bl .tz-journal-list-scroller {
  position: absolute;
  left: calc(var(--tz-journal-list-scroller-x, 1) * 1% + var(--tz-journal-list-scroller-nudge-x, 0px));
  top: calc(var(--tz-journal-list-scroller-y, 7) * 1% + var(--tz-journal-list-scroller-nudge-y, 0px));
  width: calc(22px * var(--tz-journal-list-scroller-track-scale, 1));
  height: calc(var(--tz-journal-list-scroller-h, 86) * 1%);
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
}

.tz-journal-list-scroller.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.tz-journal-list-scroller__track {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.tz-journal-list-scroller__pin {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(22px * var(--tz-journal-list-scroller-pin-scale));
  height: calc(36px * var(--tz-journal-list-scroller-pin-scale));
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.tz-journal-list-scroller__pin.is-dragging { cursor: grabbing; }

.tz-journal-list-scroller__pin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-journal-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
}

.tz-journal-preview-wrap--active-solution {
  box-shadow: inset 0 0 0 2px rgba(212, 168, 48, 0.72);
}

.tz-journal-preview-wrap[hidden] {
  display: none !important;
}

.tz-journal-pane--br .tz-journal-field--preview {
  position: absolute;
  left: calc(var(--tz-journal-solution-preview-x, 5) * 1% + var(--tz-journal-solution-preview-nudge-x, 0px));
  top: calc(var(--tz-journal-solution-preview-y, 5) * 1% + var(--tz-journal-solution-preview-nudge-y, 0px));
  width: calc(var(--tz-journal-solution-preview-w, 90) * 1%);
  height: calc(var(--tz-journal-solution-preview-h, 90) * 1%);
  z-index: 1;
}

.tz-journal-preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tz-journal-preview-canvas--clickable {
  cursor: pointer;
}

.tz-journal-begin-search {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.tz-journal-begin-search[hidden] {
  display: none !important;
}

.tz-journal-pane--br .tz-journal-field--btn-begin-search {
  left: calc(var(--tz-journal-btn-begin-search-x, 5) * 1% + var(--tz-journal-btn-begin-search-nudge-x, 0px));
  top: calc(var(--tz-journal-btn-begin-search-y, 38) * 1% + var(--tz-journal-btn-begin-search-nudge-y, 0px));
  width: calc(var(--tz-journal-btn-begin-search-w, 90) * 1%);
  height: calc(var(--tz-journal-btn-begin-search-h, 22) * 1%);
}

.tz-journal-begin-search img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: filter 0.15s ease;
}

@media (hover: hover) {
  .tz-journal-begin-search:hover img {
    filter: brightness(1.12)
      drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
      drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
  }
}

.tz-journal-begin-search:focus-visible img {
  filter: brightness(1.12)
    drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
    drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
  outline: none;
}

.tz-journal-begin-search:active {
  transform: scale(0.97);
}

.tz-journal-begin-search:active img {
  filter: brightness(1.12)
    drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
    drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
}

.tz-journal-hit {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  overflow: hidden;
}

.tz-journal-tab__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: right center;
  pointer-events: none;
  user-select: none;
}

.tz-journal-field--tab-puzzle,
.tz-journal-field--tab-stats,
.tz-journal-field--tab-filter,
.tz-journal-field--tab-records {
  overflow: hidden;
  z-index: 4;
}

.tz-journal-field--tab-puzzle {
  left: calc(var(--tz-journal-tab-puzzle-x, 89.5) * 1% + var(--tz-journal-tab-puzzle-nudge-x, 0px));
  top: calc(var(--tz-journal-tab-puzzle-y, 17.8) * 1% + var(--tz-journal-tab-puzzle-nudge-y, 0px));
  width: calc(var(--tz-journal-tab-puzzle-w, 10.5) * 1%);
  height: calc(var(--tz-journal-tab-puzzle-h, 11.5) * 1%);
}
.tz-journal-field--tab-stats {
  left: calc(var(--tz-journal-tab-stats-x, 89.5) * 1% + var(--tz-journal-tab-stats-nudge-x, 0px));
  top: calc(var(--tz-journal-tab-stats-y, 30.4) * 1% + var(--tz-journal-tab-stats-nudge-y, 0px));
  width: calc(var(--tz-journal-tab-stats-w, 10.5) * 1%);
  height: calc(var(--tz-journal-tab-stats-h, 11.5) * 1%);
}
.tz-journal-field--tab-filter {
  left: calc(var(--tz-journal-tab-filter-x, 89.5) * 1% + var(--tz-journal-tab-filter-nudge-x, 0px));
  top: calc(var(--tz-journal-tab-filter-y, 5.2) * 1% + var(--tz-journal-tab-filter-nudge-y, 0px));
  width: calc(var(--tz-journal-tab-filter-w, 10.5) * 1%);
  height: calc(var(--tz-journal-tab-filter-h, 11.5) * 1%);
}
.tz-journal-field--tab-records {
  left: calc(var(--tz-journal-tab-records-x, 89.5) * 1% + var(--tz-journal-tab-records-nudge-x, 0px));
  top: calc(var(--tz-journal-tab-records-y, 43) * 1% + var(--tz-journal-tab-records-nudge-y, 0px));
  width: calc(var(--tz-journal-tab-records-w, 10.5) * 1%);
  height: calc(var(--tz-journal-tab-records-h, 11.5) * 1%);
}
.tz-journal-field--btn-filter {
  left: calc(var(--tz-journal-btn-filter-x) * 1% + var(--tz-journal-btn-filter-nudge-x));
  top: calc(var(--tz-journal-btn-filter-y) * 1% + var(--tz-journal-btn-filter-nudge-y));
  width: calc(var(--tz-journal-btn-filter-w) * 1%);
  height: calc(var(--tz-journal-btn-filter-h) * 1%);
}
.tz-journal-field--btn-stats {
  left: calc(var(--tz-journal-btn-stats-x) * 1% + var(--tz-journal-btn-stats-nudge-x));
  top: calc(var(--tz-journal-btn-stats-y) * 1% + var(--tz-journal-btn-stats-nudge-y));
  width: calc(var(--tz-journal-btn-stats-w) * 1%);
  height: calc(var(--tz-journal-btn-stats-h) * 1%);
}
.tz-journal-field--btn-prev {
  left: calc(var(--tz-journal-btn-prev-x) * 1% + var(--tz-journal-btn-prev-nudge-x));
  top: calc(var(--tz-journal-btn-prev-y) * 1% + var(--tz-journal-btn-prev-nudge-y));
  width: calc(var(--tz-journal-btn-prev-w) * 1%);
  height: calc(var(--tz-journal-btn-prev-h) * 1%);
}
.tz-journal-field--btn-next {
  left: calc(var(--tz-journal-btn-next-x) * 1% + var(--tz-journal-btn-next-nudge-x));
  top: calc(var(--tz-journal-btn-next-y) * 1% + var(--tz-journal-btn-next-nudge-y));
  width: calc(var(--tz-journal-btn-next-w) * 1%);
  height: calc(var(--tz-journal-btn-next-h) * 1%);
}
.tz-journal-field--btn-exit {
  left: calc(var(--tz-journal-btn-exit-x) * 1% + var(--tz-journal-btn-exit-nudge-x));
  top: calc(var(--tz-journal-btn-exit-y) * 1% + var(--tz-journal-btn-exit-nudge-y));
  width: calc(var(--tz-journal-btn-exit-w) * 1%);
  height: calc(var(--tz-journal-btn-exit-h) * 1%);
}

.tz-journal-field--btn-library-back {
  left: calc(var(--tz-journal-btn-library-back-x, 94) * 1% + var(--tz-journal-btn-library-back-nudge-x, 0px));
  top: calc(var(--tz-journal-btn-library-back-y, 88) * 1% + var(--tz-journal-btn-library-back-nudge-y, 0px));
  width: calc(var(--tz-journal-btn-library-back-w, 9) * 1%);
  height: calc(var(--tz-journal-btn-library-back-h, 5.5) * 1%);
  z-index: 5;
  overflow: visible;
}

.tz-journal-field--btn-library-back[hidden] {
  display: none !important;
}

.tz-journal-field--btn-library-back img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-journal-field--btn-library-back:hover img {
  filter: brightness(1.08);
}

.tz-journal-field--btn-library-back:active img {
  filter: brightness(1.14) drop-shadow(0 0 6px rgba(232, 185, 35, 0.55));
}

.tz-journal-revisit {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tz-journal-revisit[hidden] {
  display: none !important;
}

.tz-journal-revisit__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.55);
  cursor: pointer;
}

.tz-journal-revisit__dialog {
  position: relative;
  z-index: 1;
  width: min(
    calc(100% - var(--tz-revisit-display-pad) * 2),
    calc(100% * var(--tz-revisit-width-scale, 0.94)),
    calc((100% - var(--tz-revisit-display-pad) * 2) * var(--tz-revisit-art-w) / var(--tz-revisit-art-h) * 0.88)
  );
  aspect-ratio: calc(var(--tz-revisit-art-w) / var(--tz-revisit-art-h));
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

.tz-journal-revisit__frame {
  position: absolute;
  inset: 0;
}

.tz-journal-revisit__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-journal-revisit__field {
  position: absolute;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  color: #e8dcc4;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.tz-journal-revisit__field--puzzle-id {
  font-size: var(--tz-revisit-puzzle-id-font, var(--tz-revisit-field-font));
  left: var(--tz-revisit-puzzle-id-x);
  top: var(--tz-revisit-puzzle-id-y);
  width: var(--tz-revisit-puzzle-id-w);
  height: var(--tz-revisit-puzzle-id-h);
}

.tz-journal-revisit__field--solutions {
  font-size: var(--tz-revisit-solutions-font, var(--tz-revisit-field-font));
  left: var(--tz-revisit-solutions-x);
  top: var(--tz-revisit-solutions-y);
  width: var(--tz-revisit-solutions-w);
  height: var(--tz-revisit-solutions-h);
}

.tz-journal-revisit__field--solved {
  font-size: var(--tz-revisit-solved-font, var(--tz-revisit-field-font));
  left: var(--tz-revisit-solved-x);
  top: var(--tz-revisit-solved-y);
  width: var(--tz-revisit-solved-w);
  height: var(--tz-revisit-solved-h);
}

.tz-journal-revisit__btn {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.tz-journal-revisit__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: filter 0.15s ease;
}

.tz-journal-revisit__btn--cancel {
  left: var(--tz-revisit-cancel-x);
  top: var(--tz-revisit-cancel-y);
  width: var(--tz-revisit-cancel-w);
  height: var(--tz-revisit-cancel-h);
  z-index: 2;
}

.tz-journal-revisit__btn--revisit {
  left: var(--tz-revisit-revisit-x);
  top: var(--tz-revisit-revisit-y);
  width: var(--tz-revisit-revisit-w);
  height: var(--tz-revisit-revisit-h);
  z-index: 2;
}

@media (hover: hover) {
  .tz-journal-revisit__btn:hover img {
    filter: brightness(1.12)
      drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
      drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
  }
}

.tz-journal-revisit__btn:focus-visible img {
  filter: brightness(1.12)
    drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
    drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
  outline: none;
}

.tz-journal-revisit__btn:active {
  transform: scale(0.97);
}

.tz-journal-revisit__btn:active img {
  filter: brightness(1.12)
    drop-shadow(0 0 8px rgba(232, 185, 35, 0.75))
    drop-shadow(0 0 16px rgba(232, 185, 35, 0.4));
}

html.tz-phone-preview .tz-journal-root {
  position: absolute;
}

html.tz-phone-preview .tz-journal-root__backdrop {
  position: absolute;
}

/* ── Hint Rules image overlay ── */

.tz-hint-rules-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
}

.tz-hint-rules-root:not([hidden]) {
  pointer-events: auto;
}

.tz-hint-rules-root[hidden] {
  display: none !important;
}

.tz-hint-rules-window {
  position: fixed;
  top: calc(var(--tz-hint-rules-top-vh) * 1vh + var(--tz-hint-rules-nudge-y));
  left: calc(50% + var(--tz-hint-rules-nudge-x));
  transform: translateX(-50%) scale(var(--tz-hint-rules-scale));
  transform-origin: top center;
  width: min(
    100vw,
    calc(
      var(--tz-hint-rules-max-design-width, var(--tz-design-width))
      * var(--tz-hint-rules-width-scale, 1)
    ),
    calc(var(--tz-hint-rules-mu-w) * 1px)
  );
  height: calc(var(--tz-hint-rules-height-vh) * 1vh);
  box-sizing: border-box;
  pointer-events: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
  overflow: hidden;
}

.tz-hint-rules-window.is-msv2-synced {
  top: var(--tz-hint-rules-sync-top);
  left: calc(50% + var(--tz-hint-rules-nudge-x, 0px));
  width: var(--tz-hint-rules-sync-width);
  height: var(--tz-hint-rules-sync-height);
  transform: translateX(-50%) scale(var(--tz-hint-rules-scale, 1));
  transform-origin: top center;
}

html.tz-phone-preview .tz-hint-rules-window {
  width: min(
    calc(
      var(--tz-hint-rules-max-design-width, var(--tz-design-width))
      * var(--tz-hint-rules-width-scale, 1)
    ),
    calc(var(--tz-hint-rules-mu-w) * 1px)
  );
}

html.tz-phone-preview .tz-cartographers-journal-window {
  width: min(
    calc(
      var(--tz-journal-max-design-width, var(--tz-design-width))
      * var(--tz-journal-width-scale, 1)
    ),
    calc(var(--tz-journal-art-w) * 1px)
  );
}

.tz-hint-rules-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tz-hint-rules-scroll::-webkit-scrollbar {
  display: none;
}

/* Fancy scroller — track + pin on right edge of panel (position from layout JSON) */
.tz-hint-rules-scroller {
  position: absolute;
  right: calc(
    var(--tz-hint-rules-scroller-right) * 1%
    + var(--tz-hint-rules-scroller-nudge-x)
  );
  top: calc(
    var(--tz-hint-rules-scroller-top) * 1%
    + var(--tz-hint-rules-scroller-nudge-y)
  );
  width: calc(
    var(--tz-hint-rules-scroller-track-w) * 1px
    * var(--tz-hint-rules-scroller-track-scale)
  );
  height: calc(var(--tz-hint-rules-scroller-height) * 1%);
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
}

.tz-hint-rules-scroller.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.tz-hint-rules-scroller__track {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-hint-rules-scroller__pin {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(
    var(--tz-hint-rules-scroller-pin-w) * 1px
    * var(--tz-hint-rules-scroller-pin-scale)
  );
  height: calc(
    var(--tz-hint-rules-scroller-pin-h) * 1px
    * var(--tz-hint-rules-scroller-pin-scale)
  );
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  z-index: 1;
  touch-action: none;
}

.tz-hint-rules-scroller__pin.is-dragging {
  cursor: grabbing;
}

.tz-hint-rules-scroller__pin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-hint-rules__img {
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* Mobile art by default; desktop/tablet at ≥780px (same breakpoint as 2× game scale) */
.tz-hint-rules__img--desktop {
  display: none;
}

.tz-hint-rules__img--mobile {
  display: block;
}

@media (min-width: 780px) {
  html:not(.tz-phone-preview) .tz-hint-rules__img--mobile {
    display: none;
  }

  html:not(.tz-phone-preview) .tz-hint-rules__img--desktop {
    display: block;
  }
}

html.tz-phone-preview .tz-hint-rules__img--mobile {
  display: block;
}

html.tz-phone-preview .tz-hint-rules__img--desktop {
  display: none;
}

.tz-hint-rules__exit {
  position: absolute;
  right: max(var(--tz-hint-rules-exit-right), env(safe-area-inset-right, 0px));
  width: var(--tz-hint-rules-exit-size);
  height: var(--tz-hint-rules-exit-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transform: translate(
    var(--tz-hint-rules-exit-nudge-x),
    var(--tz-hint-rules-exit-nudge-y)
  );
}

.tz-hint-rules__exit--bottom {
  bottom: var(--tz-hint-rules-exit-bottom);
}

.tz-hint-rules__exit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-hint-rules__exit:hover {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) brightness(1.08);
}

.tz-hint-rules__exit:active {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) brightness(0.94);
}

/* ── The Cartographer's Journal overlay ── */

.tz-cartographers-journal-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
}

.tz-cartographers-journal-root:not([hidden]) {
  pointer-events: auto;
}

.tz-cartographers-journal-root[hidden] {
  display: none !important;
}

.tz-cartographers-journal-window {
  position: fixed;
  top: calc(var(--tz-journal-top-vh) * 1vh + var(--tz-journal-nudge-y));
  left: calc(50% + var(--tz-journal-nudge-x));
  transform: translateX(-50%) scale(var(--tz-journal-scale));
  transform-origin: top center;
  width: min(
    100vw,
    calc(
      var(--tz-journal-max-design-width, var(--tz-design-width))
      * var(--tz-journal-width-scale, 1)
    ),
    calc(var(--tz-journal-art-w) * 1px)
  );
  height: calc(var(--tz-journal-height-vh) * 1vh);
  box-sizing: border-box;
  pointer-events: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
  overflow: hidden;
}

.tz-cartographers-journal-window.is-msv2-synced {
  top: var(--tz-journal-sync-top);
  left: calc(50% + var(--tz-journal-nudge-x, 0px));
  width: var(--tz-journal-sync-width);
  height: var(--tz-journal-sync-height);
  transform: translateX(-50%) scale(var(--tz-journal-scale, 1));
  transform-origin: top center;
}

html.tz-phone-preview .tz-cartographers-journal-window {
  width: min(
    calc(
      var(--tz-journal-max-design-width, var(--tz-design-width))
      * var(--tz-journal-width-scale, 1)
    ),
    calc(var(--tz-journal-art-w) * 1px)
  );
}

.tz-cartographers-journal-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tz-cartographers-journal-scroll::-webkit-scrollbar {
  display: none;
}

.tz-cartographers-journal__art-wrap {
  position: relative;
  width: 100%;
}

.tz-cartographers-journal__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.tz-cartographers-journal__version {
  position: absolute;
  left: calc(50% + var(--tz-journal-version-nudge-x));
  top: calc(var(--tz-journal-version-top) + var(--tz-journal-version-nudge-y));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.12rem 0.55rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
  font-size: calc(clamp(0.62rem, 2.6vw, 0.78rem) * var(--tz-journal-version-font-scale, 0.9));
}

.tz-cartographers-journal__email {
  position: absolute;
  left: calc(50% + var(--tz-journal-email-nudge-x));
  top: calc(var(--tz-journal-email-top) + var(--tz-journal-email-nudge-y));
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1c3d55;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: auto;
  white-space: nowrap;
  z-index: 2;
  font-size: calc(clamp(0.55rem, 2.2vw, 0.7rem) * var(--tz-journal-email-font-scale, 0.72));
}

.tz-cartographers-journal__email[hidden] {
  display: none !important;
}

.tz-cartographers-journal__email:focus-visible {
  outline: 2px solid #c4a35a;
  outline-offset: 2px;
}

.tz-cartographers-journal-scroller {
  position: absolute;
  right: calc(
    var(--tz-journal-scroller-right) * 1%
    + var(--tz-journal-scroller-nudge-x)
  );
  top: calc(
    var(--tz-journal-scroller-top) * 1%
    + var(--tz-journal-scroller-nudge-y)
  );
  width: calc(
    var(--tz-journal-scroller-track-w) * 1px
    * var(--tz-journal-scroller-track-scale)
  );
  height: calc(var(--tz-journal-scroller-height) * 1%);
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
}

.tz-cartographers-journal-scroller.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.tz-cartographers-journal-scroller__track {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-cartographers-journal-scroller__pin {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(
    var(--tz-journal-scroller-pin-w) * 1px
    * var(--tz-journal-scroller-pin-scale)
  );
  height: calc(
    var(--tz-journal-scroller-pin-h) * 1px
    * var(--tz-journal-scroller-pin-scale)
  );
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.tz-cartographers-journal-scroller__pin.is-dragging {
  cursor: grabbing;
}

.tz-cartographers-journal-scroller__pin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-cartographers-journal__exit {
  position: absolute;
  right: max(var(--tz-journal-exit-right), env(safe-area-inset-right, 0px));
  width: var(--tz-journal-exit-size);
  height: var(--tz-journal-exit-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transform: translate(
    var(--tz-journal-exit-nudge-x),
    var(--tz-journal-exit-nudge-y)
  );
}

.tz-cartographers-journal__exit--bottom {
  bottom: var(--tz-journal-exit-bottom);
}

.tz-cartographers-journal__exit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-cartographers-journal__exit:hover {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) brightness(1.08);
}

.tz-cartographers-journal__exit:active {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) brightness(0.94);
}

/* ── Viewport lock (Settings → 2× / 3× / Mobile) ── */

html.tz-viewport-locked {
  overflow: auto;
  background: #0a1816;
}

html.tz-viewport-locked body {
  width: var(--tz-lock-width);
  min-width: var(--tz-lock-width);
  min-height: var(--tz-lock-height);
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

html.tz-viewport-locked .tz-app {
  width: var(--tz-lock-width);
  height: var(--tz-lock-height);
  min-height: var(--tz-lock-height);
  max-width: var(--tz-lock-width);
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

html.tz-viewport-locked .tz-scale-host {
  flex-shrink: 0;
}

/* ── Desktop scale lock (Settings → Display → 2× / 3×) ── */

html.tz-desktop-scale-locked {
  overflow-x: auto;
  overflow-y: auto;
}

html.tz-desktop-scale-locked body {
  min-width: calc(var(--tz-design-width) * var(--tz-ui-scale, 1));
  min-height: calc(var(--tz-design-height) * var(--tz-ui-scale, 1));
  overflow: auto;
}

html.tz-desktop-scale-locked .tz-app {
  min-height: calc(var(--tz-design-height) * var(--tz-ui-scale, 1));
}

/* When viewport is locked, desktop-scale min-* rules are redundant — lock wins */
html.tz-viewport-locked.tz-desktop-scale-locked body,
html.tz-viewport-locked.tz-desktop-scale-locked .tz-app {
  min-width: unset;
  min-height: unset;
}

/* ── Phone preview (Settings → Display) ── */

html.tz-phone-preview body {
  background: #0a1816;
}

html.tz-phone-preview .tz-app {
  width: var(--tz-lock-width, min(var(--tz-design-width), 100vw));
  height: var(--tz-lock-height, auto);
  max-width: var(--tz-design-width);
  min-height: var(--tz-lock-height, var(--tz-design-height));
  margin-left: auto;
  margin-right: auto;
  box-shadow:
    0 0 0 1px rgba(196, 163, 90, 0.28),
    0 24px 64px rgba(0, 0, 0, 0.72);
}

html.tz-phone-preview .tz-bg,
html.tz-phone-preview .tz-bg__sky,
html.tz-phone-preview .tz-bg__water,
html.tz-phone-preview .tz-sheet-root,
html.tz-phone-preview .tz-stuck-root,
html.tz-phone-preview .tz-stuck-root__backdrop,
html.tz-phone-preview .tz-pinfo-root,
html.tz-phone-preview .tz-pinfo-root__backdrop,
html.tz-phone-preview .tz-profile-root,
html.tz-phone-preview .tz-profile-root__backdrop,
html.tz-phone-preview .tz-hint-rules-root,
html.tz-phone-preview .tz-cartographers-journal-root,
html.tz-phone-preview .tz-buy-hints-root,
html.tz-phone-preview .tz-buy-hints-root__backdrop,
html.tz-phone-preview .tz-settings-root,
html.tz-phone-preview .tz-settings-root__backdrop,
html.tz-phone-preview .tz-tileset-picker-root,
html.tz-phone-preview .tz-tileset-picker-root__backdrop {
  position: absolute;
}

html.tz-phone-preview .tz-hint-rules-window {
  position: absolute;
}

html.tz-phone-preview .tz-settings-frame {
  position: relative;
}

/* ── Settings scroll (Blank-Vert-Scroll-TandB.png) ── */

.tz-settings-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-settings-root[hidden] {
  display: none !important;
}

.tz-settings-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.62);
  cursor: pointer;
}

.tz-settings-frame {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  width: min(
    calc(100% - 32px),
    var(--tz-settings-max-width, 390px)
  );
  aspect-ratio: calc(var(--tz-settings-art-w) / var(--tz-settings-art-h));
  max-height: calc(100dvh - 24px);
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
  transform: translateX(var(--tz-settings-frame-nudge-x, 0px));
}

.tz-settings-frame__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-settings-panel {
  position: absolute;
  left: var(--tz-settings-pad-x, 9%);
  right: var(--tz-settings-pad-x, 9%);
  top: var(--tz-settings-pad-top, 20%);
  bottom: var(--tz-settings-pad-bottom, 20%);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tz-settings-chrome {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--tz-settings-chrome-min, 48px);
  pointer-events: none;
}

.tz-settings-chrome--top {
  margin-bottom: var(--tz-settings-chrome-gap, 12px);
}

.tz-settings-hit {
  position: absolute;
  top: 50%;
  width: var(--tz-settings-hit-size, 48px);
  height: var(--tz-settings-hit-size, 48px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.tz-settings-hit--back {
  left: 0;
}

.tz-settings-hit--exit {
  right: 0;
}

.tz-settings-hit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-settings-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 64, 40, 0.45) transparent;
}

.tz-settings-scroll::-webkit-scrollbar {
  width: 6px;
}

.tz-settings-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(92, 64, 40, 0.4);
}

.tz-settings-scroll .tz-settings-section {
  color: #4a3520;
}

.tz-settings-scroll .tz-settings-note {
  color: #5c4830;
}

.tz-settings-scroll .tz-setting {
  border-top-color: rgba(92, 64, 40, 0.22);
}

.tz-settings-scroll .tz-setting__label {
  color: #3d2e1a;
}

.tz-settings-scroll .tz-setting__help {
  color: #5c4830;
}

.tz-settings-scroll .tz-segment {
  border-color: rgba(92, 64, 40, 0.35);
  background: rgba(255, 248, 230, 0.55);
  color: #5c4830;
}

.tz-settings-scroll .tz-segment--active {
  border-color: #8b6914;
  background: rgba(232, 185, 35, 0.35);
  color: #3d2e1a;
}

.tz-settings-scroll .tz-settings-dev {
  border-top-color: rgba(92, 64, 40, 0.28);
}

.tz-settings-scroll .tz-dev-action {
  border-color: rgba(92, 64, 40, 0.45);
  background: rgba(255, 248, 230, 0.65);
  color: #3d2e1a;
}

.tz-settings-scroll .tz-dev-action:hover,
.tz-settings-scroll .tz-dev-action:focus-visible {
  border-color: #8b6914;
  background: rgba(232, 185, 35, 0.28);
}

/* ── Menu / Settings sheets ── */

body.tz-modal-open { overflow: hidden; }

/* Hide hamburger while profile / modal overlays are open */
body.tz-modal-open .tz-menu-btn {
  visibility: hidden;
  pointer-events: none;
}

/* Image menu (Menu.png / Menu-devtools.png) */
.tz-sheet-root--menu .tz-menu-plaque {
  transform: translateY(var(--tz-menu-offset-y));
}

.tz-menu-plaque {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(
    calc(var(--tz-menu-display-w) * var(--tz-frame-upscale, 1)),
    calc(100vw - 32px),
    calc(var(--tz-design-width) * var(--tz-frame-upscale, 1))
  );
  max-width: 100%;
  aspect-ratio: calc(var(--tz-menu-art-w) / var(--tz-menu-art-h));
  container-type: inline-size;
  overflow: visible;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.5));
}

html.tz-phone-preview .tz-menu-plaque {
  width: min(
    calc(var(--tz-menu-display-w) * var(--tz-frame-upscale, 1)),
    100%,
    calc(var(--tz-design-width) * var(--tz-frame-upscale, 1))
  );
}

.tz-menu-plaque__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-menu-plaque__bg--devtools {
  display: none;
}

body.tz-is-dev-user .tz-menu-plaque__bg--standard {
  display: none;
}

body.tz-is-dev-user .tz-menu-plaque__bg--devtools {
  display: block;
}

.tz-menu-plaque__hit {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

.tz-menu-plaque__hit--close {
  left: var(--tz-menu-close-x);
  top: var(--tz-menu-close-y);
  transform: translate(-50%, -50%);
  width: var(--tz-menu-close-w);
  height: var(--tz-menu-close-h);
}

.tz-menu-plaque__system-info {
  position: absolute;
  right: 7%;
  bottom: 3.5%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  text-align: right;
  max-width: 44%;
  font-family: var(--tz-font-ui, system-ui, sans-serif);
  font-size: 2.65cqw;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgba(42, 32, 22, 0.82);
}

.tz-menu-plaque__system-info-line--version {
  font-weight: 600;
  font-size: 3.1cqw;
  color: rgba(28, 20, 12, 0.92);
}

.tz-menu-plaque__hit--puzzle-info {
  left: var(--tz-menu-puzzle-x);
  top: var(--tz-menu-puzzle-y);
  width: var(--tz-menu-puzzle-w);
  height: var(--tz-menu-puzzle-h);
}

.tz-menu-plaque__hit--found-solutions {
  left: var(--tz-menu-found-x);
  top: var(--tz-menu-found-y);
  width: var(--tz-menu-found-w);
  height: var(--tz-menu-found-h);
}

.tz-menu-plaque__hit--stuck {
  left: var(--tz-menu-stuck-x);
  top: var(--tz-menu-stuck-y);
  width: var(--tz-menu-stuck-w);
  height: var(--tz-menu-stuck-h);
}

.tz-menu-plaque__hit--hint-rules {
  left: var(--tz-menu-hint-x);
  top: var(--tz-menu-hint-y);
  width: var(--tz-menu-hint-w);
  height: var(--tz-menu-hint-h);
}

.tz-menu-plaque__hit--settings {
  left: var(--tz-menu-settings-x);
  top: var(--tz-menu-settings-y);
  width: var(--tz-menu-settings-w);
  height: var(--tz-menu-settings-h);
}

.tz-menu-plaque__hit--leaderboard {
  left: var(--tz-menu-leaderboard-x);
  top: var(--tz-menu-leaderboard-y);
  width: var(--tz-menu-leaderboard-w);
  height: var(--tz-menu-leaderboard-h);
}

.tz-menu-plaque__hit--cartographers-journal {
  left: var(--tz-menu-journal-x);
  top: var(--tz-menu-journal-y);
  width: var(--tz-menu-journal-w);
  height: var(--tz-menu-journal-h);
}

.tz-menu-plaque__hit--bottom-menu {
  left: var(--tz-menu-bottom-menu-x);
  top: var(--tz-menu-bottom-menu-y);
  width: var(--tz-menu-bottom-menu-w);
  height: var(--tz-menu-bottom-menu-h);
}

.tz-menu-plaque__hit--development {
  left: var(--tz-menu-dev-development-x);
  top: var(--tz-menu-dev-development-y);
  width: var(--tz-menu-dev-development-w);
  height: var(--tz-menu-dev-development-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--development {
  left: var(--tz-menu-dev-development-x);
  top: var(--tz-menu-dev-development-y);
  width: var(--tz-menu-dev-development-w);
  height: var(--tz-menu-dev-development-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--puzzle-info {
  left: var(--tz-menu-dev-puzzle-x);
  top: var(--tz-menu-dev-puzzle-y);
  width: var(--tz-menu-dev-puzzle-w);
  height: var(--tz-menu-dev-puzzle-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--found-solutions {
  left: var(--tz-menu-dev-found-x);
  top: var(--tz-menu-dev-found-y);
  width: var(--tz-menu-dev-found-w);
  height: var(--tz-menu-dev-found-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--stuck {
  left: var(--tz-menu-dev-stuck-x);
  top: var(--tz-menu-dev-stuck-y);
  width: var(--tz-menu-dev-stuck-w);
  height: var(--tz-menu-dev-stuck-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--hint-rules {
  left: var(--tz-menu-dev-hint-x);
  top: var(--tz-menu-dev-hint-y);
  width: var(--tz-menu-dev-hint-w);
  height: var(--tz-menu-dev-hint-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--settings {
  left: var(--tz-menu-dev-settings-x);
  top: var(--tz-menu-dev-settings-y);
  width: var(--tz-menu-dev-settings-w);
  height: var(--tz-menu-dev-settings-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--leaderboard {
  left: var(--tz-menu-dev-leaderboard-x);
  top: var(--tz-menu-dev-leaderboard-y);
  width: var(--tz-menu-dev-leaderboard-w);
  height: var(--tz-menu-dev-leaderboard-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--cartographers-journal {
  left: var(--tz-menu-dev-journal-x);
  top: var(--tz-menu-dev-journal-y);
  width: var(--tz-menu-dev-journal-w);
  height: var(--tz-menu-dev-journal-h);
}

body.tz-is-dev-user .tz-menu-plaque__hit--bottom-menu {
  left: var(--tz-menu-dev-bottom-menu-x);
  top: var(--tz-menu-dev-bottom-menu-y);
  width: var(--tz-menu-dev-bottom-menu-w);
  height: var(--tz-menu-dev-bottom-menu-h);
}

/* ── Development submenu (scroll popup) ── */

.tz-development-root {
  position: fixed;
  inset: 0;
  z-index: 111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-development-root[hidden] {
  display: none !important;
}

.tz-development-root__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.62);
  cursor: pointer;
}

.tz-development-frame {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  width: min(
    calc(100% - 32px),
    var(--tz-development-max-width, 390px)
  );
  aspect-ratio: calc(709 / 824);
  max-height: calc(100dvh - 24px);
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

.tz-development-frame__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-development-panel {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 22%;
  bottom: 16%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tz-development-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tz-development-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 4px 0 12px;
}

.tz-development-action {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid rgba(120, 78, 36, 0.55);
  background: rgba(255, 248, 230, 0.72);
  color: #3d2810;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.tz-development-action:hover,
.tz-development-action:focus-visible {
  border-color: rgba(160, 110, 48, 0.85);
  background: rgba(255, 252, 240, 0.92);
  outline: none;
}

.tz-development-action--link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tz-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
}

.tz-sheet-root[hidden] { display: none !important; }

.tz-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.62);
  cursor: pointer;
}

.tz-sheet {
  position: relative;
  z-index: 1;
  width: min(340px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  overflow: auto;
  background: linear-gradient(180deg, rgba(28, 58, 54, 0.98) 0%, rgba(18, 40, 38, 0.99) 100%);
  border: 2px solid var(--tz-panel-border);
  border-radius: var(--tz-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color: var(--tz-text);
}

.tz-sheet__header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 8px;
  border-bottom: 1px solid rgba(180, 140, 80, 0.25);
}

.tz-sheet__title {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tz-gold-bright);
}

.tz-sheet__close,
.tz-sheet__back {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--tz-cream);
  font-size: 1.4rem;
  line-height: 1;
}

.tz-sheet__nav {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.tz-sheet__link {
  display: block;
  text-decoration: none;
  text-align: left;
  padding: 14px 12px;
  border-radius: 8px;
  color: var(--tz-cream);
  font-size: 0.92rem;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  width: 100%;
  cursor: pointer;
}

.tz-sheet__link--dev {
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(196, 163, 90, 0.9);
}

.tz-sheet__link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.tz-sheet__body {
  padding: 12px 14px 18px;
}

.tz-settings-section {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-gold);
}

.tz-settings-note {
  margin: 0 0 14px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--tz-text-muted);
}

.tz-settings-dev {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(180, 140, 80, 0.28);
}

.tz-dev-action {
  appearance: none;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(196, 163, 90, 0.45);
  background: rgba(45, 90, 61, 0.45);
  color: var(--tz-text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.tz-dev-action:hover,
.tz-dev-action:focus-visible {
  border-color: var(--tz-gold);
  background: rgba(45, 90, 61, 0.75);
  outline: none;
}

.tz-setting__value {
  margin: 4px 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tz-text);
}

.tz-settings-action {
  appearance: none;
  width: 100%;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(196, 163, 90, 0.45);
  background: rgba(45, 90, 61, 0.45);
  color: var(--tz-text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.tz-settings-action:hover,
.tz-settings-action:focus-visible {
  border-color: var(--tz-gold);
  background: rgba(45, 90, 61, 0.75);
  outline: none;
}

.tz-settings-action--link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/* ── Tileset gallery (settings) ── */

.tz-tileset-picker-root {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.tz-tileset-picker-root[hidden] {
  display: none !important;
}

.tz-tileset-picker-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 18, 16, 0.72);
  cursor: pointer;
}

.tz-tileset-picker-frame {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  width: min(
    calc(100% - 32px),
    var(--tz-settings-max-width, 390px)
  );
  aspect-ratio: calc(var(--tz-settings-art-w) / var(--tz-settings-art-h));
  max-height: calc(100dvh - 24px);
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
  transform: translateX(var(--tz-settings-frame-nudge-x, 0px));
}

.tz-tileset-picker-frame__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.tz-tileset-picker-panel {
  position: absolute;
  left: var(--tz-settings-pad-x, 9%);
  right: var(--tz-settings-pad-x, 9%);
  top: var(--tz-settings-pad-top, 20%);
  bottom: var(--tz-settings-pad-bottom, 20%);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tz-tileset-picker-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 163, 90, 0.45) transparent;
}

.tz-tileset-picker-scroll::-webkit-scrollbar {
  width: 6px;
}

.tz-tileset-picker-scroll::-webkit-scrollbar-thumb {
  background: rgba(196, 163, 90, 0.45);
  border-radius: 999px;
}

.tz-tileset-picker-scroll .tz-settings-section {
  color: #4a3520;
}

.tz-tileset-picker-scroll .tz-settings-note {
  color: #5c4830;
}

.tz-tileset-picker-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}

.tz-tileset-card {
  padding: 10px 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(180, 140, 80, 0.35);
  background: rgba(20, 44, 40, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tz-tileset-card__name {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tz-gold);
  text-align: center;
}

.tz-tileset-card__preview {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(120, 90, 50, 0.35);
  min-height: 88px;
  margin-bottom: 10px;
}

.tz-tileset-card__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.95;
}

.tz-tileset-card__tiles {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  min-height: 88px;
}

.tz-tileset-card__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: rgba(8, 18, 16, 0.28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--tz-text);
}

.tz-tileset-card__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tz-tileset-card__action {
  appearance: none;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(196, 163, 90, 0.5);
  background: rgba(45, 90, 61, 0.72);
  color: var(--tz-text);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.tz-tileset-card__action:hover:not(:disabled),
.tz-tileset-card__action:focus-visible:not(:disabled) {
  background: rgba(58, 112, 78, 0.85);
  outline: none;
}

.tz-tileset-card__action--equipped,
.tz-tileset-card__action:disabled {
  cursor: default;
  background: rgba(80, 70, 45, 0.55);
  border-color: rgba(196, 163, 90, 0.35);
  color: rgba(244, 236, 216, 0.85);
}

html.tz-phone-preview .tz-tileset-picker-root {
  position: absolute;
}

html.tz-phone-preview .tz-tileset-picker-frame {
  width: var(--tz-settings-max-width, 390px);
  max-height: none;
}

.tz-menu-dev-section {
  display: grid;
  gap: 0;
}

.tz-dev-level-picks {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.tz-dev-level-picks select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(196, 163, 90, 0.35);
  background: rgba(0, 0, 0, 0.28);
  color: var(--tz-text);
  font: inherit;
  font-size: 0.82rem;
}

.tz-dev-level-pick {
  display: grid;
  gap: 4px;
}

.tz-dev-level-pick__label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tz-gold);
}

.tz-dev-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.tz-setting {
  padding: 12px 0;
  border-top: 1px solid rgba(180, 140, 80, 0.18);
}

.tz-setting:first-of-type { border-top: none; }

.tz-setting__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tz-cream);
}

.tz-setting__help {
  margin: 4px 0 10px;
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--tz-text-muted);
}

.tz-segmented {
  display: flex;
  gap: 6px;
}

.tz-segment {
  flex: 1;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 80, 0.35);
  background: rgba(0, 0, 0, 0.18);
  color: var(--tz-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tz-segment--active {
  background: rgba(61, 122, 114, 0.55);
  border-color: var(--tz-gold-bright);
  color: var(--tz-cream);
}

/* ── Menu panels ── */

.tz-menu-panel[hidden] { display: none !important; }

.tz-menu-panel__lead {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--tz-cream);
}

.tz-menu-panel__note {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--tz-text-muted);
}

.tz-menu-panel__note:last-of-type {
  margin-bottom: 14px;
}

.tz-menu-panel__cost {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tz-gold-bright);
}

.tz-menu-panel__note--warn {
  color: #e8a87c;
}

.tz-menu-subhead {
  margin: 14px 0 8px;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tz-gold);
}

.tz-menu-subhead:first-child { margin-top: 0; }

.tz-menu-bullets {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--tz-text-muted);
}

.tz-info-list {
  margin: 0;
}

.tz-info-list__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(180, 140, 80, 0.18);
}

.tz-info-list__row:first-child { border-top: none; }

.tz-info-list__row dt {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tz-gold);
}

.tz-info-list__row dd {
  margin: 0;
  text-align: right;
  font-size: 0.84rem;
  color: var(--tz-cream);
  word-break: break-word;
}

.tz-found-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tz-found-list__empty {
  padding: 12px 0;
  font-size: 0.78rem;
  color: var(--tz-text-muted);
}

.tz-found-list__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 80, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tz-cream);
  font-size: 0.84rem;
  cursor: pointer;
}

.tz-found-list__item--active,
.tz-found-list__item:hover {
  background: rgba(61, 122, 114, 0.35);
  border-color: var(--tz-gold-bright);
}

.tz-route-preview-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(180, 140, 80, 0.18);
}

.tz-route-preview__label {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: var(--tz-gold-bright);
}

.tz-route-preview {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(139, 115, 70, 0.38);
  background: #e8dcc4;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 230, 0.35);
  filter: contrast(1.06) saturate(1.05);
}

.tz-route-preview--clickable {
  cursor: pointer;
}

.tz-route-preview--clickable:hover,
.tz-route-preview--clickable:focus-visible {
  border-color: var(--tz-gold-bright);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 230, 0.35),
    0 0 0 2px rgba(232, 185, 35, 0.35);
  outline: none;
}

.tz-menu-actions {
  display: grid;
  gap: 8px;
}

.tz-menu-action {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 80, 0.45);
  background: rgba(61, 122, 114, 0.55);
  color: var(--tz-cream);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.tz-menu-action--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tz-text-muted);
}

.tz-menu-action:hover:not(:disabled) {
  filter: brightness(1.06);
}

.tz-menu-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.35);
}

.tz-dev-stubs { display: none !important; }

.tz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Guest mode ── */

.tz-guest-banner {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--tz-y-header) + var(--tz-h-header) + 4px);
  transform: translateX(-50%);
  width: min(calc(100% - 24px), var(--tz-design-width) - 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(18, 42, 38, 0.92);
  border: 1px solid rgba(196, 163, 90, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.tz-guest-banner[hidden] { display: none !important; }

.tz-guest-banner__text {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.25;
  color: #f0e6d0;
}

.tz-guest-banner__text strong {
  display: block;
  font-size: 0.74rem;
  color: #f4d27a;
}

.tz-guest-banner__cta {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(196, 163, 90, 0.65);
  background: rgba(58, 110, 86, 0.9);
  color: #f8f1df;
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
}

.tz-guest-mode .tz-bottom-nav__hit--login {
  display: block;
  left: 68%;
  width: var(--tz-bottom-nav-hit-w);
  height: var(--tz-bottom-nav-hit-h);
  top: var(--tz-bottom-nav-hit-y);
  transform: translate(-50%, -50%);
}

.tz-guest-mode .tz-menu-plaque__hit--found-solutions,
.tz-guest-mode .tz-menu-plaque__hit--stuck,
.tz-guest-mode .tz-menu-plaque__hit--settings {
  display: none !important;
  pointer-events: none;
}

.tz-guest-mode .tz-menu-plaque__hit--guest-login {
  display: block;
  left: 50%;
  top: 58%;
  width: 60%;
  height: 6.8%;
  transform: translate(-50%, -50%);
}

.tz-guest-mode .tz-menu-plaque__hit--guest-create {
  display: block;
  left: 50%;
  top: 66%;
  width: 60%;
  height: 6.8%;
  transform: translate(-50%, -50%);
}

.tz-menu-plaque__hit--guest-login,
.tz-menu-plaque__hit--guest-create {
  display: none;
}

.tz-random-dialog__btn:active:not(:disabled) img {
  filter: brightness(0.92);
}

/* ── Guest login required (register to unlock) ── */

.tz-guest-login-root {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tz-guest-login-display-pad, 32px);
}

.tz-guest-login-root[hidden] {
  display: none !important;
}

.tz-guest-login-root__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.72);
  cursor: pointer;
}

.tz-guest-login-dialog {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  width: min(
    100vw,
    calc(var(--tz-guest-login-max-design-width, var(--tz-design-width)) * var(--tz-guest-login-width-scale, 1)),
    calc(var(--tz-guest-login-art-w) * 1px)
  );
  aspect-ratio: calc(var(--tz-guest-login-art-w) / var(--tz-guest-login-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

.tz-guest-login-dialog__frame {
  position: absolute;
  inset: 0;
}

.tz-guest-login-dialog__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-guest-login-dialog__message {
  position: absolute;
  left: var(--tz-guest-login-message-x);
  top: var(--tz-guest-login-message-y);
  width: var(--tz-guest-login-message-w);
  height: var(--tz-guest-login-message-h);
  margin: 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(0.82rem * var(--tz-guest-login-message-font-scale, 1));
  line-height: 1.35;
  color: #3d2e1a;
  pointer-events: none;
  overflow: hidden;
}

.tz-guest-login-dialog__message[hidden] {
  display: none !important;
}

.tz-guest-login-dialog__actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tz-guest-login-dialog__btn {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.tz-guest-login-dialog__btn[hidden] {
  display: none !important;
}

.tz-guest-login-dialog__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-guest-login-dialog__btn--create {
  left: var(--tz-guest-login-create-x);
  top: var(--tz-guest-login-create-y);
  width: var(--tz-guest-login-create-w);
  height: var(--tz-guest-login-create-h);
}

.tz-guest-login-dialog__btn--login {
  left: var(--tz-guest-login-login-x);
  top: var(--tz-guest-login-login-y);
  width: var(--tz-guest-login-login-w);
  height: var(--tz-guest-login-login-h);
}

.tz-guest-login-dialog__btn--cancel {
  left: var(--tz-guest-login-cancel-x);
  top: var(--tz-guest-login-cancel-y);
  width: var(--tz-guest-login-cancel-w);
  height: var(--tz-guest-login-cancel-h);
}

.tz-guest-login-dialog__btn--close {
  left: var(--tz-guest-login-close-x);
  top: var(--tz-guest-login-close-y);
  width: var(--tz-guest-login-close-w);
  height: var(--tz-guest-login-close-h);
}

@media (hover: hover) {
  .tz-guest-login-dialog__btn:hover:not(:disabled) {
    filter: brightness(1.06);
  }
}

.tz-guest-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tz-guest-modal[hidden] { display: none !important; }

.tz-guest-modal__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.72);
  cursor: pointer;
}

.tz-guest-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 340px);
  padding: 20px 18px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8f0dc 0%, #e8dcc0 100%);
  border: 2px solid rgba(122, 88, 34, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  color: #3d2e1a;
}

.tz-guest-modal__panel--wide { width: min(100%, 380px); }

.tz-guest-modal__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  text-align: center;
}

.tz-guest-modal__body {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: center;
}

.tz-guest-modal__list {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.tz-guest-modal__bullets {
  margin: 0 0 14px;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.tz-guest-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tz-guest-modal__btn {
  border: 1px solid rgba(122, 88, 34, 0.45);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff8ea;
  color: #3d2e1a;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.tz-guest-modal__btn--primary {
  background: linear-gradient(180deg, #4f8f67 0%, #3a6f52 100%);
  color: #f8f4e8;
  border-color: rgba(58, 90, 58, 0.8);
}

.tz-guest-modal__btn--ghost {
  background: transparent;
}

/* ── Puzzle Journal — Records tab (leaderboard / personal best) ── */

.tz-records-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  container-type: inline-size;
}

.tz-records-panel[hidden] {
  display: none !important;
}

.tz-records-hit,
.tz-records-pane,
.tz-records-list-scroll,
.tz-records-list-scroller {
  pointer-events: auto;
}

.tz-records-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}

.tz-records-hit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tz-records-tab__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-records-field--tab-leaderboard {
  left: calc(var(--tz-records-tab-leaderboard-x, 88.2) * 1% + var(--tz-records-tab-leaderboard-nudge-x, 0px));
  top: calc(var(--tz-records-tab-leaderboard-y, 8.5) * 1% + var(--tz-records-tab-leaderboard-nudge-y, 0px));
  width: calc(var(--tz-records-tab-leaderboard-w, 8.8) * 1%);
  height: calc(var(--tz-records-tab-leaderboard-h, 11.2) * 1%);
}

.tz-records-field--tab-adventure {
  left: calc(var(--tz-records-tab-adventure-x, 88.5) * 1% + var(--tz-records-tab-adventure-nudge-x, 0px));
  top: calc(var(--tz-records-tab-adventure-y, 16.5) * 1% + var(--tz-records-tab-adventure-nudge-y, 0px));
  width: calc(var(--tz-records-tab-adventure-w, 9.5) * 1%);
  height: calc(var(--tz-records-tab-adventure-h, 11.5) * 1%);
}

.tz-records-field--tab-personal {
  left: calc(var(--tz-records-tab-personal-best-x, 88.9) * 1% + var(--tz-records-tab-personal-best-nudge-x, 0px));
  top: calc(var(--tz-records-tab-personal-best-y, 28.5) * 1% + var(--tz-records-tab-personal-best-nudge-y, 0px));
  width: calc(var(--tz-records-tab-personal-best-w, 7.8) * 1%);
  height: calc(var(--tz-records-tab-personal-best-h, 10.7) * 1%);
}

.tz-records-field {
  position: absolute;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  font-weight: 700;
  color: var(--tz-records-field-color, #3d2e1a);
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 4;
}

.tz-records-field--daily-puzzle-id {
  left: calc(var(--tz-records-field-daily-puzzle-id-x, 10) * 1% + var(--tz-records-field-daily-puzzle-id-nudge-x, 0px));
  top: calc(var(--tz-records-field-daily-puzzle-id-y, 13.2) * 1% + var(--tz-records-field-daily-puzzle-id-nudge-y, 0px));
  width: calc(var(--tz-records-field-daily-puzzle-id-w, 34) * 1%);
  height: calc(var(--tz-records-field-daily-puzzle-id-h, 3.2) * 1%);
  font-size: var(--tz-records-field-daily-puzzle-id-font-size, 2.61cqi);
  justify-content: flex-start;
  text-align: left;
  font-variant-numeric: tabular-nums;
  z-index: 5;
}

.tz-records-field--daily-date {
  left: calc(var(--tz-records-field-daily-date-x, 44) * 1% + var(--tz-records-field-daily-date-nudge-x, 0px));
  top: calc(var(--tz-records-field-daily-date-y, 13.2) * 1% + var(--tz-records-field-daily-date-nudge-y, 0px));
  width: calc(var(--tz-records-field-daily-date-w, 32) * 1%);
  height: calc(var(--tz-records-field-daily-date-h, 3.2) * 1%);
  font-size: var(--tz-records-field-daily-date-font-size, 2.61cqi);
  justify-content: center;
  text-align: center;
  z-index: 5;
}

.tz-records-field--daily-time {
  left: calc(var(--tz-records-field-daily-time-x, 76) * 1% + var(--tz-records-field-daily-time-nudge-x, 0px));
  top: calc(var(--tz-records-field-daily-time-y, 13.2) * 1% + var(--tz-records-field-daily-time-nudge-y, 0px));
  width: calc(var(--tz-records-field-daily-time-w, 14) * 1%);
  height: calc(var(--tz-records-field-daily-time-h, 3.2) * 1%);
  font-size: var(--tz-records-field-daily-time-font-size, 2.61cqi);
  justify-content: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
  z-index: 5;
}

.tz-records-field--daily-date span[data-records-slot],
.tz-records-field--daily-puzzle-id span[data-records-slot],
.tz-records-field--daily-time span[data-records-slot] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tz-records-pane {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

.tz-records-field--pane-top {
  left: calc(var(--tz-records-pane-top-x, 10.6) * 1% + var(--tz-records-pane-top-nudge-x, 0px));
  top: calc(var(--tz-records-pane-top-y, 15.3) * 1% + var(--tz-records-pane-top-nudge-y, 0px));
  width: calc(var(--tz-records-pane-top-w, 74) * 1%);
  height: calc(var(--tz-records-pane-top-h, 32.1) * 1%);
}

.tz-records-field--pane-bl {
  left: calc(var(--tz-records-pane-bl-x, 8.4) * 1% + var(--tz-records-pane-bl-nudge-x, 0px));
  top: calc(var(--tz-records-pane-bl-y, 61.4) * 1% + var(--tz-records-pane-bl-nudge-y, 0px));
  width: calc(var(--tz-records-pane-bl-w, 37) * 1%);
  height: calc(var(--tz-records-pane-bl-h, 30.2) * 1%);
}

.tz-records-field--pane-br {
  left: calc(var(--tz-records-pane-br-x, 49) * 1% + var(--tz-records-pane-br-nudge-x, 0px));
  top: calc(var(--tz-records-pane-br-y, 61.5) * 1% + var(--tz-records-pane-br-nudge-y, 0px));
  width: calc(var(--tz-records-pane-br-w, 36) * 1%);
  height: calc(var(--tz-records-pane-br-h, 30) * 1%);
}

.tz-records-field--personal-pane {
  left: calc(var(--tz-records-personal-pane-x, 7.5) * 1% + var(--tz-records-personal-pane-nudge-x, 0px));
  top: calc(var(--tz-records-personal-pane-y, 16.5) * 1% + var(--tz-records-personal-pane-nudge-y, 0px));
  width: calc(var(--tz-records-personal-pane-w, 79) * 1%);
  height: calc(var(--tz-records-personal-pane-h, 64) * 1%);
}

.tz-records-list-scroll {
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tz-records-list-scroll::-webkit-scrollbar {
  display: none;
}

/* Adventure Top 10: no scroller / no scroll — only the 11+ pane scrolls. */
#journalRecordsPanel[data-records-mode="adventure"] .tz-records-field--pane-top .tz-records-list-scroll,
#journalRecordsPanel[data-records-mode="adventure"] .tz-records-list-scroll[data-records-item="listTop"] {
  overflow-y: hidden;
  touch-action: none;
}

#journalRecordsPanel[data-records-mode="adventure"] .tz-records-field--scroller-top,
#journalRecordsPanel[data-records-mode="adventure"] [data-records-item="scrollerTop"] {
  display: none !important;
}

.tz-records-field--pane-top .tz-records-list-scroll,
.tz-records-list-scroll[data-records-item="listTop"] {
  left: calc(var(--tz-records-list-top-x, 3) * 1% + var(--tz-records-list-top-nudge-x, 0px));
  top: calc(var(--tz-records-list-top-y, 12) * 1% + var(--tz-records-list-top-nudge-y, 0px));
  width: calc(var(--tz-records-list-top-w, 92) * 1%);
  height: calc(var(--tz-records-list-top-h, 84) * 1%);
}

.tz-records-field--pane-bl .tz-records-list-scroll,
.tz-records-list-scroll[data-records-item="listBl"] {
  left: calc(var(--tz-records-list-bl-x, 3) * 1% + var(--tz-records-list-bl-nudge-x, 0px));
  top: calc(var(--tz-records-list-bl-y, 14) * 1% + var(--tz-records-list-bl-nudge-y, 0px));
  width: calc(var(--tz-records-list-bl-w, 90) * 1%);
  height: calc(var(--tz-records-list-bl-h, 82) * 1%);
}

.tz-records-field--pane-br .tz-records-list-scroll,
.tz-records-list-scroll[data-records-item="listBr"] {
  left: calc(var(--tz-records-list-br-x, 3) * 1% + var(--tz-records-list-br-nudge-x, 0px));
  top: calc(var(--tz-records-list-br-y, 14) * 1% + var(--tz-records-list-br-nudge-y, 0px));
  width: calc(var(--tz-records-list-br-w, 90) * 1%);
  height: calc(var(--tz-records-list-br-h, 82) * 1%);
}

.tz-records-field--personal-pane .tz-records-list-scroll {
  left: calc(var(--tz-records-list-top-x, 3) * 1%);
  top: calc(var(--tz-records-list-top-y, 12) * 1%);
  width: calc(var(--tz-records-list-top-w, 92) * 1%);
  height: calc(var(--tz-records-list-top-h, 84) * 1%);
}

.tz-records-view {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tz-records-view > * {
  pointer-events: auto;
}

.tz-records-list-scroller {
  position: absolute;
  z-index: 6;
  touch-action: none;
  pointer-events: auto;
}

.tz-records-field--scroller-top {
  left: calc(var(--tz-records-scroller-top-x, 84.5) * 1% + var(--tz-records-scroller-top-nudge-x, 0px));
  top: calc(var(--tz-records-scroller-top-y, 22) * 1% + var(--tz-records-scroller-top-nudge-y, 0px));
  width: calc(22px * var(--tz-records-scroller-top-track-scale, 0.55));
  height: calc(var(--tz-records-scroller-top-h, 24) * 1%);
}

.tz-records-field--scroller-bl {
  left: calc(var(--tz-records-scroller-bl-x, 43.5) * 1% + var(--tz-records-scroller-bl-nudge-x, 0px));
  top: calc(var(--tz-records-scroller-bl-y, 56) * 1% + var(--tz-records-scroller-bl-nudge-y, 0px));
  width: calc(22px * var(--tz-records-scroller-bl-track-scale, 0.5));
  height: calc(var(--tz-records-scroller-bl-h, 20) * 1%);
}

.tz-records-field--scroller-br {
  left: calc(var(--tz-records-scroller-br-x, 85.5) * 1% + var(--tz-records-scroller-br-nudge-x, 0px));
  top: calc(var(--tz-records-scroller-br-y, 56) * 1% + var(--tz-records-scroller-br-nudge-y, 0px));
  width: calc(22px * var(--tz-records-scroller-br-track-scale, 0.5));
  height: calc(var(--tz-records-scroller-br-h, 20) * 1%);
}

.tz-records-field--scroller-personal {
  left: calc(var(--tz-records-scroller-personal-x, 84.5) * 1% + var(--tz-records-scroller-personal-nudge-x, 0px));
  top: calc(var(--tz-records-scroller-personal-y, 22) * 1% + var(--tz-records-scroller-personal-nudge-y, 0px));
  width: calc(22px * var(--tz-records-scroller-personal-track-scale, 0.55));
  height: calc(var(--tz-records-scroller-personal-h, 56) * 1%);
}

.tz-records-list-scroller.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.tz-records-list-scroller__track {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.tz-records-list-scroller__pin {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(22px * var(--tz-records-scroller-top-pin-scale, 0.66));
  height: calc(36px * var(--tz-records-scroller-top-pin-scale, 0.66));
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.tz-records-field--pane-bl .tz-records-list-scroller__pin {
  width: calc(22px * var(--tz-records-scroller-bl-pin-scale, 0.66));
  height: calc(36px * var(--tz-records-scroller-bl-pin-scale, 0.66));
}

.tz-records-field--pane-br .tz-records-list-scroller__pin {
  width: calc(22px * var(--tz-records-scroller-br-pin-scale, 0.66));
  height: calc(36px * var(--tz-records-scroller-br-pin-scale, 0.66));
}

.tz-records-field--personal-pane .tz-records-list-scroller__pin {
  width: calc(22px * var(--tz-records-scroller-personal-pin-scale, 0.66));
  height: calc(36px * var(--tz-records-scroller-personal-pin-scale, 0.66));
}

.tz-records-list-scroller__pin.is-dragging {
  cursor: grabbing;
}

.tz-records-list-scroller__pin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tz-records-list__row--guest-you {
  background: rgba(255, 220, 120, 0.35);
  border-radius: 4px;
  font-weight: 700;
}

.tz-records-list__row--guest-you .tz-records-list__cell--user {
  font-style: italic;
}

.tz-records-field--guest-placement {
  left: calc(var(--tz-records-field-guest-placement-x, 8) * 1% + var(--tz-records-field-guest-placement-nudge-x, 0px));
  top: calc(var(--tz-records-field-guest-placement-y, 17.5) * 1% + var(--tz-records-field-guest-placement-nudge-y, 0px));
  width: calc(var(--tz-records-field-guest-placement-w, 84) * 1%);
  height: calc(var(--tz-records-field-guest-placement-h, 4) * 1%);
  font-size: var(--tz-records-field-guest-placement-font-size, 2.44cqi);
  font-weight: 600;
  color: var(--tz-records-field-color, #3d2e1a);
  text-align: center;
  line-height: 1.2;
}

.tz-records-field--guest-placement[hidden] {
  display: none !important;
}

.tz-records-list__row {
  display: grid;
  grid-template-columns:
    var(--tz-records-col-rank-w, 18%)
    var(--tz-records-col-user-w, 52%)
    var(--tz-records-col-time-w, 30%);
  gap: var(--tz-records-list-row-gap, 2px);
  padding: var(--tz-records-list-row-pad-y, 4px) var(--tz-records-list-row-pad-x, 6px);
  font-size: var(--tz-records-list-row-font-size, 2.61cqi);
  font-weight: 600;
  color: var(--tz-records-field-color, #3d2e1a);
  line-height: 1.15;
  border-bottom: 1px solid rgba(61, 46, 26, 0.12);
}

.tz-records-field--pane-top .tz-records-list__row {
  gap: var(--tz-records-list-row-top-gap, var(--tz-records-list-row-gap, 2px));
  padding:
    var(--tz-records-list-row-top-pad-y, var(--tz-records-list-row-pad-y, 4px))
    var(--tz-records-list-row-top-pad-x, var(--tz-records-list-row-pad-x, 6px));
  font-size: var(--tz-records-list-row-top-font-size, var(--tz-records-list-row-font-size, 2.61cqi));
}

.tz-records-field--pane-bl .tz-records-list__row {
  gap: var(--tz-records-list-row-bl-gap, var(--tz-records-list-row-gap, 2px));
  padding:
    var(--tz-records-list-row-bl-pad-y, var(--tz-records-list-row-pad-y, 4px))
    var(--tz-records-list-row-bl-pad-x, var(--tz-records-list-row-pad-x, 6px));
  font-size: var(--tz-records-list-row-bl-font-size, var(--tz-records-list-row-font-size, 2.61cqi));
}

.tz-records-field--pane-br .tz-records-list__row {
  gap: var(--tz-records-list-row-br-gap, var(--tz-records-list-row-gap, 2px));
  padding:
    var(--tz-records-list-row-br-pad-y, var(--tz-records-list-row-pad-y, 4px))
    var(--tz-records-list-row-br-pad-x, var(--tz-records-list-row-pad-x, 6px));
  font-size: var(--tz-records-list-row-br-font-size, var(--tz-records-list-row-font-size, 2.61cqi));
}

.tz-records-panel[data-records-mode="personal"] .tz-records-list__row {
  grid-template-columns:
    var(--tz-records-col-size-w, 22%)
    var(--tz-records-col-puzzle-w, 48%)
    var(--tz-records-col-time-w, 30%);
}

.tz-records-panel[data-records-mode="adventure"] .tz-records-list__row {
  grid-template-columns:
    var(--tz-records-col-adv-rank-w, 8%)
    var(--tz-records-col-adv-user-w, 20%)
    var(--tz-records-col-paths-w, 10%)
    var(--tz-records-col-rank-name-w, 26%)
    var(--tz-records-col-adv-time-w, 16%)
    var(--tz-records-col-adv-hints-w, 20%);
}

.tz-records-list__cell--rank {
  text-align: center;
}

.tz-records-list__cell--paths {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tz-records-list__cell--hints {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tz-records-list__cell--rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tz-records-list__cell--time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: visible;
}

.tz-records-list__cell--size {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tz-records-list__cell--user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tz-records-list__cell--puzzle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tz-records-list__empty {
  margin: 0;
  padding: 8px 6px;
  font-size: var(--tz-records-list-row-font-size, 2.61cqi);
  color: var(--tz-records-field-color, #3d2e1a);
  opacity: 0.75;
  font-style: italic;
}

.tz-records-field--btn-back {
  left: calc(var(--tz-records-btn-back-x, 6.2) * 1% + var(--tz-records-btn-back-nudge-x, 0px));
  top: calc(var(--tz-records-btn-back-y, 1.9) * 1% + var(--tz-records-btn-back-nudge-y, 0px));
  width: calc(var(--tz-records-btn-back-w, 9) * 1%);
  height: calc(var(--tz-records-btn-back-h, 5.2) * 1%);
}

.tz-records-field--btn-close {
  left: calc(var(--tz-records-btn-close-x, 78.2) * 1% + var(--tz-records-btn-close-nudge-x, 0px));
  top: calc(var(--tz-records-btn-close-y, 1.4) * 1% + var(--tz-records-btn-close-nudge-y, 0px));
  width: calc(var(--tz-records-btn-close-w, 9) * 1%);
  height: calc(var(--tz-records-btn-close-h, 5.2) * 1%);
}

.tz-records-panel[data-records-mode="leaderboard"] .tz-records-field--daily-time,
.tz-records-panel[data-records-mode="adventure"] .tz-records-field--daily-time {
  display: none !important;
}

.tz-records-view[hidden] {
  display: none !important;
}

.tz-records-hit[data-records-tab="personalBest"][hidden],
.tz-records-hit[data-records-tab="adventure"][hidden] {
  display: none !important;
}

/* Records tab — hide journal side tabs; bottom bar stays interactive */
.tz-journal-root[data-active-tab="records"] .tz-journal-field--tab-puzzle,
.tz-journal-root[data-active-tab="records"] .tz-journal-field--tab-stats,
.tz-journal-root[data-active-tab="records"] .tz-journal-field--tab-filter,
.tz-journal-root[data-active-tab="records"] .tz-journal-field--tab-records {
  display: none !important;
}

.tz-journal-root[data-active-tab="records"] .tz-journal-field--btn-filter,
.tz-journal-root[data-active-tab="records"] .tz-journal-field--btn-stats,
.tz-journal-root[data-active-tab="records"] .tz-journal-field--btn-prev,
.tz-journal-root[data-active-tab="records"] .tz-journal-field--btn-next,
.tz-journal-root[data-active-tab="records"] .tz-journal-field--btn-exit,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--btn-filter,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--btn-stats,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--btn-prev,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--btn-next,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--btn-exit {
  z-index: 5;
}

/* Daily post-solve leaderboard — records-only journal overlay */
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--tab-puzzle,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--tab-stats,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--tab-filter,
.tz-journal-root[data-post-daily-leaderboard="true"] .tz-journal-field--tab-records {
  display: none !important;
}

/* ── Responsive tweaks ── */

/* Small phones scale the whole stage via JS zoom; layout numbers stay at 390×844 */

/* zoom / scale applied on .tz-stage by tilezilla-bootstrap.js */