:root {
  --pad: 14px;
  --gap: 12px;
  --border: #d0d7de;
  --bg: #F3DFC0;
  --muted: #3f4750;
  --panel-strong: rgba(255,255,255,0.35);
  --panel-border: rgba(17,17,17,0.18);
  --game-ink: #eef3f5;
  --game-muted: #aab7bd;
  --game-line: #44515a;
}

@font-face {
  font-family: "NasinNanpaGame";
  src: url("../fonts/nanpa-linja-n-nasin-nanpa-liberation-sans-punctuation-mapping-fixed-ascii-vulgar-cartouche-only.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: #111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
body { margin: 24px; min-width: 0; }
button { font: inherit; }

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  max-width: 980px;
}

.pageHeadingRow { display: flex; align-items: flex-start; gap: 7px; }
.pageHeadingRow h1 { margin: 0 0 6px; font-size: 18px; }
.pageHomeLink {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  color: #111;
  opacity: 0.58;
  text-decoration: none;
  border: 0;
  border-radius: 5px;
  background: transparent;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.pageHomeLink:hover { opacity: 0.9; background: rgba(17,17,17,0.06); }
.pageHomeLink:focus-visible { opacity: 1; outline: 2px solid rgba(17,17,17,0.65); outline-offset: 2px; }
.pageHomeIcon { display: block; width: 16px; height: 16px; }

.tpLine { display: block; margin-top: 2px; font-size: 10pt; color: var(--muted); line-height: 1.25; }
.help { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.introHelp { margin: 10px 0 12px; max-width: 860px; }

button {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #111;
}
button:hover { background: rgba(255,255,255,0.26); }
button:disabled { opacity: 0.48; cursor: default; }
button:focus-visible, a:focus-visible, canvas:focus-visible, summary:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  border: 2px solid #111;
  padding: 8px 10px;
  border-radius: 8px;
  color: #111;
  text-decoration: none;
}
.skipLink:focus { left: 24px; top: 24px; z-index: 9999; }

.gameFrame {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
}
.viewportWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  overflow: hidden;
  background: #11171b;
  border-bottom: 1px solid var(--border);
  touch-action: none;
  user-select: none;
}
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #11171b;
  image-rendering: pixelated;
  cursor: crosshair;
}
#miniMap {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(22%, 180px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 8px;
  background: rgba(10,14,17,0.82);
  pointer-events: none;
  opacity: 0.92;
}
#miniMap.isHidden { display: none; }

.hudTop {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
  color: var(--game-ink);
  font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-shadow: 0 1px 3px #000;
}
.hudTop span {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 5px;
  background: rgba(0,0,0,0.35);
}
/* Renderer-backed numeric cartouches are black-on-transparent canvases.
   The HUD sits on a dark translucent surface, so invert those monochrome canvases
   to the same light foreground as the surrounding HUD text. Keep the Latin fallback
   light as well. This is HUD-only; puzzle/cartouche canvases on light cards remain black. */
.hudTop .tpNumericCanvas {
  filter: invert(1);
  opacity: .96;
}
.hudTop .tpNumeric::after,
.hudTop .tpNumeric--fallback {
  color: #fff;
  opacity: .90;
  text-shadow: 0 1px 3px #000;
}

/* Toast/overlay messages also sit on a dark surface, so their inline numeric
   cartouches need the same light foreground treatment as the HUD. */
.messageOverlay .tpNumericCanvas,
.interactionPrompt .tpNumericCanvas {
  filter: invert(1);
  opacity: .96;
}
.messageOverlay .tpNumeric::after,
.messageOverlay .tpNumeric--fallback,
.interactionPrompt .tpNumeric::after,
.interactionPrompt .tpNumeric--fallback {
  color: #fff;
  opacity: .92;
  text-shadow: 0 1px 3px #000;
}

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px #000);
}
.crosshair span { position: absolute; background: rgba(255,255,255,0.88); }
.crosshair span:first-child { left: 11px; top: 4px; width: 2px; height: 16px; }
.crosshair span:last-child { left: 4px; top: 11px; width: 16px; height: 2px; }

.interactionPrompt {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(0,0,0,0.62);
  color: #fff;
  font: 700 13px/1.25 system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  min-height: 28px;
}
.interactionPrompt:empty { visibility: hidden; }
.messageOverlay {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 36px));
  color: #fff;
  text-align: center;
  font: 650 15px/1.35 system-ui, sans-serif;
  text-shadow: 0 2px 5px #000, 0 0 12px #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}
.messageOverlay.show { opacity: 1; }
.mouseHint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(0,0,0,0.40);
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  pointer-events: none;
}

.gameStatusGrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 86px; }
.statusBlock { padding: 11px 13px; min-width: 0; }
.statusBlock + .statusBlock { border-left: 1px solid var(--border); }
.statusLabel { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.statusLabel.tpProse { text-transform: none; letter-spacing: 0; word-spacing: .2em; }
.statusBlock strong { display: block; font-size: 16px; line-height: 1.25; }
.statusSecondary { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.35; }

.controlsPanel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
}
.controlsHeadingRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.controlsHeadingRow h2 { margin: 0; font-size: 14px; }
.actionButtons { display: flex; gap: 8px; flex-wrap: wrap; }
.actionButtons button { padding: 8px 10px; }
.controlLegend { display: flex; gap: 9px 15px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
kbd {
  display: inline-block;
  min-width: 24px;
  margin-right: 3px;
  padding: 2px 5px;
  border: 1px solid rgba(17,17,17,0.28);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255,255,255,0.30);
  color: #111;
  font: 650 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: center;
}
.fieldNotes { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.10); }
.fieldNotes summary { cursor: pointer; font-weight: 700; color: #111; }
.fieldLog { margin-top: 8px; max-height: 160px; overflow: auto; }
.fieldLogEntry + .fieldLogEntry { margin-top: 5px; }

.sitelenGlyph { font-family: "NasinNanpaGame", sans-serif; font-variant-ligatures: none; font-feature-settings: "liga" 0, "dlig" 0, "calt" 0; }

.overlayScreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.60);
}
.overlayScreen[hidden] { display: none !important; }
.overlayCard {
  width: min(680px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  border: 1px solid rgba(17,17,17,0.32);
  border-radius: 14px;
  background: #FAECD7;
  color: #111;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.overlayEyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.overlayEyebrow.tpProse { text-transform:none; letter-spacing:0; }
.overlayCard h2 { margin: 4px 0 8px; font-size: 21px; }
.overlayCard p { margin: 6px 0 14px; line-height: 1.4; }
.overlayProgress { margin: 10px 0 14px; font-weight: 800; font-size: 14px; }
.overlayHeaderRow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.overlayHeaderRow h2 { margin-bottom: 0; }
.overlayButtonRow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.glyphRewardCard { width: min(420px, 100%); text-align: center; }
.rewardGlyph { font-size: 112px; line-height: 1; margin: 8px 0 2px; }
.glyphRewardCard button { min-width: 150px; }

.collectionCard { width: min(860px, 100%); }
.collectionHelp { margin-bottom: 12px; }
.glyphGrid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}
.glyphCell {
  min-width: 0;
  min-height: 68px;
  padding: 6px 3px 5px;
  border: 1px solid rgba(17,17,17,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.24);
  text-align: center;
}
.glyphCell.missing { opacity: .36; }
.glyphCellGlyph { font-size: 33px; line-height: 1.05; min-height: 36px; }
.glyphCell.missing .glyphCellGlyph { font-family: system-ui, sans-serif; font-size: 24px; padding-top: 5px; }
.glyphCellWord { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: var(--muted); }
.glyphCell.missing .glyphCellWord { visibility: hidden; }

.sentenceCard { width: min(700px, 100%); }
.sentenceSlots { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sentenceSlot {
  width: 92px;
  min-height: 105px;
  padding: 8px 5px;
  border: 1px solid rgba(17,17,17,0.18);
  border-radius: 9px;
  background: rgba(255,255,255,0.24);
  text-align: center;
}
.sentenceSlotGlyph { font-size: 52px; line-height: 1.05; min-height: 57px; }
.sentenceSlot.missing .sentenceSlotGlyph { font-family: system-ui, sans-serif; font-size: 35px; padding-top: 10px; }
.sentenceSlotWord { margin-top: 5px; font: 700 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.sentenceStatus { min-height: 2.8em; color: var(--muted); }

.levelCompleteCard { width: min(520px, 100%); position: relative; z-index: 2; overflow: visible; }
.levelCompleteCard.isCampaignComplete { border-color: rgba(214,160,45,0.55); box-shadow: 0 18px 60px rgba(0,0,0,0.35), 0 0 0 2px rgba(255,223,105,0.18) inset; }
.levelCompleteCard.isCampaignComplete h2 { font-size: clamp(28px, 5vw, 42px); line-height: 1.05; margin-bottom: 10px; }
.levelCompleteCard.isCampaignComplete h2.campaignCongratsFlash { animation: campaignCongratsFlash 3.25s ease-in-out 1 both; transform-origin: left center; }
.levelCompleteCard.isCampaignComplete .overlayProgress { font-size: 16px; }
.campaignCompleteBadge { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid rgba(214,160,45,0.45); border-radius: 12px; background: rgba(255,255,255,0.44); font-weight: 900; text-align: center; }
.campaignConfetti { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
.campaignConfetti[hidden] { display: none !important; }
.confettiPiece { position: absolute; top: -18vh; width: var(--w, 9px); height: var(--h, 16px); border-radius: var(--radius, 2px); opacity: 0.96; animation: confettiFall var(--fall, 5s) linear infinite; animation-delay: var(--delay, 0s); will-change: transform; }
@keyframes confettiFall {
  0% { transform: translate3d(0,-12vh,0) rotate(0deg); }
  100% { transform: translate3d(var(--drift, 0px),132vh,0) rotate(var(--spin, 720deg)); }
}
@keyframes campaignCongratsFlash {
  0%, 100% { color: #111; transform: scale(1); text-shadow: none; }
  8% { color: #d12a2a; transform: scale(1.035); text-shadow: 0 0 14px rgba(209,42,42,.28); }
  16% { color: #111; transform: scale(1); text-shadow: none; }
  26% { color: #d08a00; transform: scale(1.05); text-shadow: 0 0 16px rgba(208,138,0,.30); }
  35% { color: #111; transform: scale(1); text-shadow: none; }
  46% { color: #087f8c; transform: scale(1.045); text-shadow: 0 0 16px rgba(8,127,140,.28); }
  56% { color: #111; transform: scale(1); text-shadow: none; }
  67% { color: #7a3db8; transform: scale(1.035); text-shadow: 0 0 14px rgba(122,61,184,.26); }
  78%, 100% { color: #111; transform: scale(1); text-shadow: none; }
}
.resetConfirmCard { width: min(460px, 100%); }


.mazeQuickExitBtn {
  position: absolute;
  z-index: 9;
  right: 12px;
  top: 198px;
  min-width: 112px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 9px;
  background: rgba(243,223,192,0.92);
  color: #111;
  font: 800 13px/1.1 system-ui, sans-serif;
  touch-action: manipulation;
}
.mazeQuickExitBtn[hidden] { display: none !important; }

.mobileMovePad, .mobileUseBtn { display: none; }

@media (pointer: coarse) {
  .viewportWrap { --mobile-joystick-size: clamp(138px, 23vw, 164px); }
  .mouseHint { display: none; }
  #miniMap {
    width: clamp(112px, 28%, 160px);
    pointer-events: auto;
    touch-action: none;
    user-select: none;
  }
  #miniMap.isSteering {
    border-color: rgba(255,255,255,0.84);
    box-shadow: 0 0 0 2px rgba(243,223,192,0.18);
  }
  .mobileMovePad {
    position: absolute;
    z-index: 8;
    left: 10px;
    bottom: 10px;
    display: block;
    width: var(--mobile-joystick-size);
    height: var(--mobile-joystick-size);
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(4px);
    touch-action: none;
    user-select: none;
  }
  .mobileJoystickOuter {
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(255,255,255,0.42);
    border-radius: 50%;
    background:
      radial-gradient(circle at center, rgba(255,255,255,0.03) 0 31%, transparent 32%),
      rgba(0,0,0,0.25);
    box-shadow: inset 0 0 18px rgba(255,255,255,0.05);
    pointer-events: none;
  }
  .mobileJoystickInner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    height: 34%;
    transform: translate(-50%,-50%);
    border: 2px solid rgba(255,255,255,0.46);
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;
  }
  .mobileJoystickThumb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    transform: translate(-50%,-50%);
    border: 2px solid rgba(255,255,255,0.72);
    border-radius: 50%;
    background: rgba(250,236,215,0.80);
    box-shadow: 0 2px 8px rgba(0,0,0,0.34);
    transition: background 80ms ease, border-color 80ms ease;
  }
  .mobileMovePad[data-sector]:not([data-sector="idle"]) .mobileJoystickOuter {
    border-color: rgba(255,255,255,0.78);
    background:
      radial-gradient(circle at center, rgba(255,255,255,0.04) 0 31%, transparent 32%),
      rgba(0,0,0,0.34);
  }
  .mobileMovePad[data-sector]:not([data-sector="idle"]) .mobileJoystickThumb {
    background: rgba(255,255,255,calc(0.72 + var(--joystick-strength, 0) * 0.22));
    border-color: rgba(255,255,255,calc(0.78 + var(--joystick-strength, 0) * 0.18));
  }
  .mobileUseBtn {
    position: absolute;
    z-index: 8;
    right: 14px;
    bottom: 18px;
    display: block;
    width: 72px;
    height: 72px;
    border: 2px solid rgba(255,255,255,0.38);
    border-radius: 50%;
    background: rgba(250,236,215,0.82);
    color: #111;
    font-weight: 900;
    touch-action: none;
  }
  .mobileUseBtn.tpProse {
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    padding: 0;
  }
  /* Lower-left is a permanently reserved gameplay-control zone on touch devices. */
  .interactionPrompt { bottom: calc(var(--mobile-joystick-size) + 20px); max-width: min(72%, 520px); }
  .viewportWrap.modalActive .mobileMovePad,
  .viewportWrap.modalActive .mobileUseBtn { display: none !important; }
}

@media (max-width: 720px) {
  body { margin: 8px; }
  .card { padding: 10px; }
  .viewportWrap { aspect-ratio: 4 / 3; max-height: none; }
  #miniMap { width: clamp(112px, 28%, 154px); top: 8px; right: 8px; }
  .mazeQuickExitBtn { top: auto; bottom: 104px; right: 12px; min-width: 104px; }
  .gameStatusGrid { grid-template-columns: 1fr; }
  .statusBlock + .statusBlock { border-left: 0; border-top: 1px solid var(--border); }
  .glyphGrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .pageHeadingRow h1 { font-size: 16px; }
  .controlsHeadingRow { align-items: flex-start; }
  .actionButtons { width: 100%; }
  .actionButtons button { flex: 1 1 auto; }
  .controlLegend { gap: 7px 10px; }
  .hudTop { right: 8px; gap: 4px; }
  .hudTop span { font-size: 10px; padding: 3px 5px; }
  .glyphGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sentenceSlot { width: 74px; min-height: 92px; }
  .sentenceSlotGlyph { font-size: 43px; min-height: 48px; }
  .overlayScreen { padding: 8px; }
  .overlayCard { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .messageOverlay { transition: none; }
}

/* Campaign puzzle host */
.puzzleCard {
  position: relative;
  width: min(760px, 100%);
}
.puzzleCard.puzzleCard--keys {
  height: min(620px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 14px;
}
.puzzleCard.puzzleCard--keys > .overlayEyebrow,
.puzzleCard.puzzleCard--keys > h2,
.puzzleCard.puzzleCard--keys > p { margin: 0; }
.puzzleCard.puzzleCard--keys > h2 { font-size: 20px; line-height: 1.08; }
.puzzleCard.puzzleCard--keys > #puzzleInstructions { line-height: 1.28; }
.puzzleBody {
  display: grid;
  gap: 8px;
  min-height: 0;
  align-content: start;
}
.puzzleSlots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  align-content: flex-start;
  min-height: 0;
  padding: 3px 0;
}
.puzzleSlot {
  position: relative;
  flex: 1 1 46px;
  width: auto;
  min-width: 44px;
  max-width: 78px;
  height: 72px;
  min-height: 72px;
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px dashed rgba(17,17,17,.34);
  border-radius: 11px;
  background: rgba(255,255,255,.20);
  touch-action: manipulation;
}
.puzzleSlot.fillable { cursor: pointer; }
.puzzleSlot.selectedTarget {
  outline: 3px solid rgba(17,17,17,.22);
  outline-offset: 2px;
  background: rgba(255,255,255,.42);
}
.puzzleSlot.locked { border-style: solid; opacity: .62; }
.puzzleSlot.wrong { border-color: #8d3d36; background: rgba(141,61,54,.10); }
.puzzleSlot.correct { border-color: #496f56; background: rgba(73,111,86,.10); }
/* Levels 1–3 tutorial feedback appears only after an explicit failed Try answer. */
.puzzleSlot.tutorialConfirmed {
  border-color: rgba(73,111,86,.66);
  background: rgba(73,111,86,.09);
  box-shadow: inset 0 0 0 1px rgba(73,111,86,.18);
}
.dialUnit.tutorialConfirmed .dialValue,
.routeTile.tutorialConfirmed,
.lightCell.tutorialConfirmed,
.balanceWeight.tutorialConfirmed {
  border-color: rgba(73,111,86,.72) !important;
  box-shadow: inset 0 0 0 2px rgba(73,111,86,.23), 0 0 0 1px rgba(73,111,86,.12);
}
.dialUnit.tutorialConfirmed .dialLabel { color:#315f42; }
.puzzleSlotGlyph {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
  line-height: 1;
}
.puzzleSlot.empty .puzzleSlotGlyph {
  min-height: 38px;
  padding-top: 0;
  font-family: system-ui, sans-serif;
  font-size: 25px;
}
.puzzleSlotLabel {
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--muted);
}

.puzzleAnswerGroups {
  width: 100%;
  display: grid;
  gap: 6px;
}
.puzzleAnswerGroup {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(132px,.72fr) minmax(0,2.28fr);
  gap: 8px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.13);
}
.puzzleAnswerGroupText { min-width: 0; display: grid; gap: 2px; }
.puzzleAnswerGroupTitle { font-size: 12px; line-height: 1.15; }
.puzzleAnswerGroupClue { color: var(--muted); font-size: 10.5px; line-height: 1.2; }
.puzzleAnswerGroupEntry { min-width:0; display:grid; grid-template-rows:auto 13px; gap:2px; align-items:start; }
.puzzleNumericProperName,
.puzzleAnswerGroupProperName {
  min-width:0;
  color:rgba(69,59,49,.66);
  font:600 10px/1.05 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:.015em;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  visibility:hidden;
  opacity:0;
}
.puzzleNumericProperName.isVisible,
.puzzleAnswerGroupProperName.isVisible { visibility:visible; opacity:1; }
.puzzleNumericProperName { flex:1 0 100%; width:100%; min-height:11px; margin-top:1px; }
.puzzleAnswerGroupProperName { min-height:11px; }
.puzzleAnswerGroupSlots {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--answer-cols, 1), minmax(0,1fr));
  gap: 4px;
}
.puzzleAnswerGroupSlots .puzzleSlot {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 54px;
  min-height: 54px;
  padding: 2px 1px;
  border-radius: 8px;
}
.puzzleAnswerGroupSlots .puzzleSlotGlyph { min-height: 31px; font-size: 30px; }
.puzzleAnswerGroupSlots .puzzleSlot.empty .puzzleSlotGlyph { min-height: 28px; font-size: 20px; }
.puzzleAnswerGroupSlots .puzzleSlotLabel { font-size: 8px; }
.puzzleTrayWrap {
  min-height: 0;
  border-top: 1px solid rgba(17,17,17,.16);
  padding-top: 6px;
}
.puzzleTrayLabel {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.puzzleTrayLabel.tpProse {
  text-transform: none;
  letter-spacing: 0;
  word-spacing: .2em;
}
.puzzleTray { display: block; min-height: 0; }
.puzzleStatus {
  min-height: 1.2em;
  max-height: 2.6em;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
/* Sitelen-pona prose at status-caption sizes needs explicit inter-word air.
   The font's native space is visually too narrow here, making whole sentences
   appear fused even though the source contains ordinary spaces. */
.puzzleStatus.tpProse { word-spacing: .24em; }
.puzzleCard.puzzleCard--keys > .overlayButtonRow {
  flex-wrap: nowrap;
  justify-content: stretch;
  gap: 7px;
}
.puzzleCard.puzzleCard--keys > .overlayButtonRow button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
}
.puzzleKey {
  width: 58px;
  height: 58px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(17,17,17,.24);
  border-radius: 11px;
  background: rgba(255,255,255,.60);
  color: #111;
  font-family: "NasinNanpaGame", sans-serif;
  font-size: 39px;
  line-height: 1;
  touch-action: manipulation;
  user-select: none;
}
.puzzleKey.isSelected { outline: 3px solid rgba(17,17,17,.20); outline-offset: 2px; }
.puzzleKey:active { transform: translateY(1px); }
.puzzleDragGhost {
  position: fixed;
  z-index: 12000;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(17,17,17,.42);
  border-radius: 13px;
  background: #FAECD7;
  pointer-events: none;
  font-family: "NasinNanpaGame", sans-serif;
  font-size: 44px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transform: translate(-50%, -50%);
}
.puzzleTerminalMessage {
  padding: 18px;
  border: 1px solid rgba(17,17,17,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.22);
  line-height: 1.5;
}

.puzzleLiveCartoucheWrap {
  width: 100%;
  min-height: 0;
  padding: 6px 8px 5px;
  border: 1px solid rgba(17,17,17,.15);
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.puzzleLiveCartoucheHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.puzzleLiveCartoucheLabel {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.puzzleLiveCartoucheLabel.tpProse {
  text-transform: none;
  letter-spacing: 0;
  word-spacing: .2em;
}
.puzzleLiveCartoucheSource {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font: 600 10.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: right;
}
.puzzleLiveCartoucheCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62px;
  margin: 1px auto 0;
}

/* Shared glyph-family picker. The launcher row stays in-flow. Once opened, the
   picker becomes a full-width bottom drawer that covers the puzzle action row and
   contains BOTH every available letter family and the glyphs for the active family.
   The player can therefore jump between letters without repeatedly closing the drawer. */
.puzzleFamilyRow {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 3px;
  scrollbar-width: thin;
}
.puzzleFamilyKey {
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 4px;
  border: 2px solid rgba(17,17,17,.22);
  border-radius: 9px;
  background: rgba(255,255,255,.42);
  font: 800 15px/1 system-ui,sans-serif;
  touch-action: manipulation;
}
.puzzleFamilyKey.isSelected {
  outline: 3px solid rgba(17,17,17,.18);
  outline-offset: 1px;
  background: rgba(255,255,255,.72);
}
.puzzleFamilyKey.punctuation { font-size: 22px; }
.puzzleGlyphDrawer {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(64dvh, 330px);
  overflow: hidden;
  padding: 8px 10px 10px;
  border: 1px solid rgba(17,17,17,.34);
  border-radius: 14px;
  background: #FAECD7;
  box-shadow: 0 -10px 34px rgba(0,0,0,.30);
}
.puzzleGlyphDrawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 0 2px 5px;
}
.puzzleGlyphDrawerTitle {
  font: 800 13px/1 system-ui,sans-serif;
}
.puzzleGlyphDrawerClose {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 9px;
  font-size: 23px;
  line-height: 1;
}
.puzzleGlyphDrawerFamilies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  gap: 4px;
  width: 100%;
  margin: 0 0 7px;
}
.puzzleGlyphDrawerFamilyKey {
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  max-width: none;
  font-size: 13px;
}
.puzzleGlyphDrawerFamilyKey.punctuation { font-size: 19px; }
.puzzleGlyphDrawerKeys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 58px));
  gap: 6px;
  align-content: flex-start;
  justify-content: start;
  max-height: calc(min(64dvh, 330px) - 92px);
  overflow: auto;
  padding: 2px;
}

@media (pointer: coarse), (max-width: 600px) {
  .overlayScreen:has(.puzzleCard--keys) { padding: 6px; }
  .puzzleCard.puzzleCard--keys {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    gap: 4px;
    padding: 10px;
  }
  .puzzleCard.puzzleCard--keys > h2 { font-size: 18px; }
  .puzzleCard.puzzleCard--keys > #puzzleInstructions { font-size: 13.5px; line-height: 1.22; }
  .puzzleSlots { gap: 5px; padding: 2px 0; }
  .puzzleSlot {
    flex-basis: 44px;
    min-width: 42px;
    max-width: 64px;
    height: 62px;
    min-height: 62px;
    border-radius: 9px;
  }
  .puzzleSlotGlyph { min-height: 35px; font-size: 34px; }
  .puzzleSlot.empty .puzzleSlotGlyph { min-height: 32px; font-size: 23px; }
  .puzzleSlotLabel { font-size: 9px; }
  .puzzleAnswerGroups { gap: 4px; }
  .puzzleAnswerGroup {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 4px 5px;
    border-radius: 8px;
  }
  .puzzleAnswerGroupText { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .puzzleAnswerGroupTitle { font-size: 10.5px; }
  .puzzleAnswerGroupClue { font-size: 9.5px; }
  .puzzleAnswerGroupEntry { grid-template-rows:auto 11px; gap:1px; }
  .puzzleAnswerGroupProperName,.puzzleNumericProperName{font-size:8.5px;line-height:1;min-height:9px}
  .puzzleAnswerGroupSlots { gap: 3px; }
  .puzzleAnswerGroupSlots .puzzleSlot { height: 44px; min-height: 44px; padding: 1px; }
  .puzzleAnswerGroupSlots .puzzleSlotGlyph { min-height: 25px; font-size: 25px; }
  .puzzleAnswerGroupSlots .puzzleSlot.empty .puzzleSlotGlyph { min-height: 23px; font-size: 17px; }
  .puzzleAnswerGroupSlots .puzzleSlotLabel { font-size: 7px; }
  .puzzleLiveCartoucheWrap { padding: 4px 6px 3px; }
  .puzzleLiveCartoucheCanvas { max-height: 54px; }
  .puzzleLiveCartoucheLabel { font-size: 9px; }
  .puzzleLiveCartoucheSource { font-size: 9px; }
  .puzzleTrayLabel { margin-bottom: 3px; font-size: 9px; }
  .puzzleFamilyRow {
    display: grid;
    grid-template-rows: repeat(2, 44px);
    grid-auto-flow: column;
    grid-auto-columns: 44px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  .puzzleFamilyKey {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
  }
  .puzzleGlyphDrawer {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(70dvh, 310px);
    padding: 6px 7px 8px;
  }
  .puzzleGlyphDrawerFamilies { grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); gap: 3px; margin-bottom:5px; }
  .puzzleGlyphDrawerFamilyKey { height:35px; min-height:35px; font-size:12px; }
  .puzzleGlyphDrawerKeys { grid-template-columns:repeat(auto-fit,minmax(42px,52px)); gap:5px; max-height:calc(min(70dvh, 310px) - 82px); }
  .puzzleKey { width: 50px; height: 50px; font-size: 33px; }
  .puzzleStatus { font-size: 11px; }
  .puzzleCard.puzzleCard--keys > .overlayButtonRow { gap: 5px; }
  .puzzleCard.puzzleCard--keys > .overlayButtonRow button { min-height: 44px; padding: 6px 5px; font-size: 12px; }
}

@media (max-width: 390px) {
  .puzzleCard.puzzleCard--keys { padding: 8px; }
  .puzzleSlot { max-width: 58px; height: 58px; min-height: 58px; }
  .puzzleSlotGlyph { font-size: 31px; min-height: 33px; }
  .puzzleFamilyRow { grid-template-rows: repeat(2, 42px); grid-auto-columns: 42px; }
  .puzzleFamilyKey { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
  .puzzleGlyphDrawerFamilies { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .puzzleGlyphDrawerFamilyKey { height:33px; min-height:33px; }
  .puzzleKey { width: 46px; height: 46px; font-size: 31px; }
}

/* Very short landscape phone viewports: retain the no-scroll contract by
   tightening nonessential chrome while keeping slots, live preview, picker,
   and actions usable. */
@media (max-height: 520px) and (pointer: coarse), (max-height: 520px) and (max-width: 760px) {
  .puzzleCard.puzzleCard--keys { padding: 7px 9px; gap: 2px; }
  .puzzleCard.puzzleCard--keys > .overlayEyebrow { display: none; }
  .puzzleCard.puzzleCard--keys > h2 { font-size: 16px; }
  .puzzleCard.puzzleCard--keys > #puzzleInstructions {
    max-height: 2.35em;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.15;
  }
  .puzzleBody { gap: 3px; }
  .puzzleSlot { height: 48px; min-height: 48px; max-width: 58px; }
  .puzzleSlotGlyph { min-height: 28px; font-size: 27px; }
  .puzzleSlot.empty .puzzleSlotGlyph { min-height: 26px; font-size: 20px; }
  .puzzleAnswerGroups { gap: 2px; }
  .puzzleAnswerGroup { gap: 1px; padding: 2px 4px; }
  .puzzleAnswerGroupTitle { font-size: 9px; }
  .puzzleAnswerGroupClue { font-size: 8px; line-height: 1.05; }
  .puzzleAnswerGroupEntry { grid-template-rows:auto 9px; gap:1px; }
  .puzzleAnswerGroupProperName,.puzzleNumericProperName{font-size:7.5px;line-height:1;min-height:8px}
  .puzzleAnswerGroupSlots { gap: 2px; }
  .puzzleAnswerGroupSlots .puzzleSlot { height: 34px; min-height: 34px; border-width: 1px; }
  .puzzleAnswerGroupSlots .puzzleSlotGlyph { min-height: 20px; font-size: 21px; }
  .puzzleAnswerGroupSlots .puzzleSlot.empty .puzzleSlotGlyph { min-height: 18px; font-size: 15px; }
  .puzzleAnswerGroupSlots .puzzleSlotLabel { display: none; }
  .puzzleLiveCartoucheHeader { display: none; }
  .puzzleLiveCartoucheCanvas { max-height: 42px; }
  .puzzleTrayLabel { display: none; }
  .puzzleFamilyRow {
    display: flex;
    flex-wrap: nowrap;
    height: 40px;
    overflow-x: auto;
  }
  .puzzleFamilyKey { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .puzzleStatus { display: none; }
  .puzzleCard.puzzleCard--keys > .overlayButtonRow button { min-height: 38px; }
  .puzzleGlyphDrawer { bottom:0; max-height:min(82dvh, 230px); padding:5px 7px 6px; }
  .puzzleGlyphDrawerHeader { min-height:28px; padding-bottom:3px; }
  .puzzleGlyphDrawerClose { width:28px; height:28px; min-width:28px; min-height:28px; font-size:20px; }
  .puzzleGlyphDrawerFamilies { grid-template-columns:repeat(auto-fit,minmax(30px,1fr)); gap:3px; margin-bottom:4px; }
  .puzzleGlyphDrawerFamilyKey { height:30px; min-height:30px; font-size:11px; }
  .puzzleGlyphDrawerKeys { grid-template-columns:repeat(auto-fit,minmax(38px,46px)); gap:4px; max-height:calc(min(82dvh, 230px) - 70px); }
  .puzzleKey { width: 42px; height: 42px; font-size: 28px; }
}

/* Country-name bonus puzzle */
.countryClueBox { width:100%; padding:12px; border:1px solid rgba(17,17,17,.15); border-radius:12px; background:rgba(255,255,255,.20); }
.countryClueTp { font-weight:750; line-height:1.45; }
.countryClueEn { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.4; }

/* Coordinate map puzzle */
.coordinatePuzzleClue { width:100%; text-align:center; }
.coordinatePuzzleLabel { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.coordinatePuzzleLabel.tpProse { text-transform:none; letter-spacing:0; word-spacing:.2em; }
.coordinatePuzzleCanvas { display:block; width:min(100%,430px); height:auto; margin:5px auto 8px; }
.coordinateMapGrid {
  --map-cols:12;
  display:grid; grid-template-columns:repeat(var(--map-cols), minmax(20px,1fr));
  width:min(100%,430px); margin:0 auto; border:2px solid rgba(17,17,17,.28); border-radius:10px; overflow:hidden;
}
.coordinateMapCell {
  aspect-ratio:1/1; min-width:0; min-height:0; padding:0; border:0; border-right:1px solid rgba(17,17,17,.11); border-bottom:1px solid rgba(17,17,17,.11);
  border-radius:0; background:rgba(255,255,255,.18); touch-action:manipulation;
}
.coordinateMapCell.landmark { background:rgba(17,17,17,.09); }
.coordinateMapCell:hover, .coordinateMapCell:focus-visible { background:rgba(255,255,255,.65); }

@media (pointer: coarse), (max-width: 600px) {
  .puzzleCard:not(.puzzleCard--keys) { max-height:94vh; }
  .coordinateMapGrid { width:min(100%,360px); }
  .countryClueBox { padding:7px 9px; }
  .countryClueTp { font-size:13px; line-height:1.3; }
  .countryClueEn { margin-top:3px; font-size:10.5px; line-height:1.25; }
}

@media (max-width:390px) {
  .coordinateMapGrid { width:100%; }
}


/* v0.9 progression clarity */
.collectionLevelProgress {
  margin: 6px 0 10px;
  font: 700 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.campaignContinueBtn {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-width: 190px;
  min-height: 46px;
  padding: 9px 16px;
  border: 2px solid rgba(255,255,255,0.65);
  border-radius: 10px;
  background: rgba(243,223,192,0.96);
  color: #111;
  font: 900 14px/1.15 system-ui, sans-serif;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  touch-action: manipulation;
}
.campaignContinueBtn[hidden] { display: none !important; }
@media (pointer: coarse) {
  .campaignContinueBtn {
    left: 10px;
    top: 58px;
    bottom: auto;
    transform: none;
    width: min(210px, 58%);
    min-width: 150px;
    min-height: 48px;
  }
}
@media (max-width: 460px) {
  .campaignContinueBtn {
    width: min(230px, calc(100% - 180px));
    min-width: 150px;
    padding-inline: 10px;
    font-size: 13px;
  }
}

/* v0.10 Level 2 puzzle clarity + fixed-viewport coordinate map */
.puzzleCard.puzzleCard--map {
  height: min(660px, calc(100dvh - 12px));
  max-height: calc(100dvh - 12px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 5px;
  padding: 12px;
}
.puzzleCard.puzzleCard--map > .overlayEyebrow,
.puzzleCard.puzzleCard--map > h2,
.puzzleCard.puzzleCard--map > p { margin: 0; }
.puzzleCard.puzzleCard--map > h2 { font-size: 19px; line-height: 1.08; }
.puzzleCard.puzzleCard--map > #puzzleInstructions { font-size: 13.5px; line-height: 1.22; }
.puzzleCard.puzzleCard--map .puzzleBody,
.puzzleCard.puzzleCard--map .puzzleSlots {
  min-height: 0;
  overflow: hidden;
}
.puzzleCard.puzzleCard--map .puzzleSlots {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  gap: 4px;
  padding: 0;
}
.puzzleCard.puzzleCard--map > .overlayButtonRow {
  flex-wrap: nowrap;
  justify-content: stretch;
}
.puzzleCard.puzzleCard--map > .overlayButtonRow button:not([hidden]) {
  flex: 1 1 0;
  min-height: 42px;
}
.puzzleCard.puzzleCard--map .puzzleStatus {
  margin: 0;
  min-height: 1.1em;
}
.coordinatePuzzleClue { margin: 0; }
.coordinatePuzzleCanvas {
  width: min(100%, 360px);
  max-height: 76px;
  object-fit: contain;
  margin: 1px auto 2px;
}
.coordinateMapGrid {
  width: min(100%, 46dvh, 400px);
  max-height: 100%;
  aspect-ratio: 1 / 1;
  align-self: start;
}
.coordinateMapCell { position: relative; }
.coordinateAxis {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: rgba(17,17,17,.58);
  font: 700 12px/1 "NasinNanpaGame", sans-serif;
}
.coordinateAxisX { top: 2px; left: 50%; transform: translateX(-50%); }
.coordinateAxisY { left: 2px; top: 50%; transform: translateY(-50%); }

.puzzleSourceSequence {
  flex: 1 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(17,17,17,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.20);
}
.puzzleSourceSequenceLabel {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.puzzleSourceSequenceGlyphs { display: flex; align-items: center; gap: 8px; }
.puzzleSourceGlyph {
  min-width: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17,17,17,.20);
  border-radius: 8px;
  background: rgba(255,255,255,.45);
  font-size: 31px;
  line-height: 1;
}

@media (pointer: coarse), (max-width: 600px) {
  .overlayScreen:has(.puzzleCard--map) { padding: 6px; }
  .puzzleCard.puzzleCard--map {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 9px;
    gap: 3px;
  }
  .puzzleCard.puzzleCard--map > h2 { font-size: 17px; }
  .puzzleCard.puzzleCard--map > #puzzleInstructions { font-size: 12px; line-height: 1.16; }
  .coordinatePuzzleLabel { font-size: 9px; }
  .coordinatePuzzleCanvas { width: min(100%, 310px); max-height: 58px; }
  .coordinateMapGrid { width: min(100%, 44dvh, 320px); }
  .coordinateAxis { font-size: 10px; }
  .puzzleCard.puzzleCard--map > .overlayButtonRow button:not([hidden]) { min-height: 44px; }
  .puzzleSourceSequence { padding: 4px 6px; gap: 7px; }
  .puzzleSourceGlyph { min-width: 34px; min-height: 34px; font-size: 28px; }
}

@media (max-height: 520px) and (pointer: coarse), (max-height: 520px) and (max-width: 760px) {
  .puzzleCard.puzzleCard--map > .overlayEyebrow { display: none; }
  .puzzleCard.puzzleCard--map > h2 { font-size: 15px; }
  .puzzleCard.puzzleCard--map > #puzzleInstructions { font-size: 10.5px; }
  .coordinatePuzzleLabel { display: none; }
  .coordinatePuzzleCanvas { max-height: 45px; }
  .coordinateMapGrid { width: min(100%, 41dvh, 245px); }
  .puzzleCard.puzzleCard--map .puzzleStatus { font-size: 10px; }
}


/* Level 3 mechanism puzzles: all fit inside the game viewport and use tap-first controls. */
.puzzleCard.puzzleCard--mechanism {
  width: min(760px, calc(100vw - 24px));
  max-width: 760px;
  height: min(720px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr) auto auto;
  gap: 7px;
}
.puzzleCard--mechanism .puzzleBody { min-height:0; overflow:hidden; }
.puzzleCard--mechanism .puzzleSlots { height:100%; min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.mechanismClues { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:min(100%,620px); }
.mechanismClue { padding:7px 8px; border:1px solid rgba(17,17,17,.18); border-radius:9px; background:rgba(255,255,255,.36); font:700 13px/1.2 system-ui,sans-serif; text-align:center; }
.dialBank { display:flex; justify-content:center; gap:clamp(10px,4vw,28px); width:100%; }
.dialUnit { display:grid; grid-template-rows:auto 38px 74px 38px; gap:4px; justify-items:center; }
.dialLabel { font:800 11px/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.dialLabel.tpProse { text-transform:none; letter-spacing:0; word-spacing:.2em; font-weight:400; }
.dialAdjust { width:54px; min-width:54px; height:38px; min-height:38px; padding:0; }
.dialValue { width:74px; height:74px; border:2px solid rgba(17,17,17,.35); border-radius:50%; background:#f7e4c7; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dialValue .sitelenGlyph { font-size:42px; line-height:.85; }.dialValue small{font:700 10px/1 system-ui,sans-serif;color:var(--muted);}
.routeBoardWrap { display:flex; justify-content:center; align-items:center; width:min(100%,500px); }
.routeTile[data-edge] { position:relative; }
.routeTile[data-edge]::after { content:attr(data-edge); position:absolute; top:4px; right:5px; font:900 8px/1 system-ui,sans-serif; letter-spacing:.04em; color:#453b31; }
.routeBoard { --route-cols:4; display:grid; grid-template-columns:repeat(var(--route-cols),1fr); gap:5px; width:min(100%,380px); aspect-ratio:1; }
.routeTile { min-width:0; min-height:0; padding:0; font:900 clamp(30px,8vw,58px)/1 ui-monospace,monospace; border:2px solid rgba(17,17,17,.25); border-radius:9px; background:#e7d2b3; touch-action:manipulation; }
.routeTile.empty { border-style:dashed; opacity:.22; pointer-events:none; }.routeTile.connected{background:#9fd3ad;border-color:#315f42;}
.pathGrid { --path-cols:5; display:grid; grid-template-columns:repeat(var(--path-cols),1fr); gap:4px; width:min(100%,330px); aspect-ratio:1; }
.pathCell { position:relative; display:flex; align-items:center; justify-content:center; border:1px solid rgba(17,17,17,.22); border-radius:7px; background:rgba(255,255,255,.35); font:900 16px/1 system-ui,sans-serif; }
.pathCell.blocked{background:#343b3e;border-color:#343b3e}.pathCell.checkpoint{background:#e7d2b3}.pathCell.checkpoint.visited{background:#9fd3ad}.pathCell.exit{box-shadow:inset 0 0 0 3px #7b6a53}.pathToken{position:absolute;font-size:25px;color:#163b24;text-shadow:0 1px #fff;}
.pathControls { display:grid; grid-template-columns:repeat(4,52px); gap:7px; }.pathMove{width:52px;height:46px;min-height:46px;padding:0;font-size:21px;}
.lightsGrid { --lights-cols:3; display:grid; grid-template-columns:repeat(var(--lights-cols),1fr); gap:10px; width:min(100%,310px); aspect-ratio:1; }
.lightCell { min-width:0; min-height:0; padding:0; border-radius:50%; border:3px solid rgba(17,17,17,.3); background:#554f46; box-shadow:inset 0 0 18px rgba(0,0,0,.28); }.lightCell.on{background:#f3df89;box-shadow:0 0 18px rgba(244,215,104,.76),inset 0 0 10px rgba(255,255,255,.65);}
.balanceTarget { display:flex; flex-direction:column; align-items:center; gap:3px; }.balanceTarget strong{font:800 11px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em}.balanceTargetCanvas{width:min(220px,70vw);height:auto;max-height:68px;}
.balanceWeights { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }.balanceWeight{width:76px;height:76px;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(17,17,17,.25);}.balanceWeight .sitelenGlyph{font-size:39px}.balanceWeight small{font:700 10px/1 system-ui,sans-serif}.balanceWeight.selected{background:#9fd3ad;border-color:#315f42;transform:translateY(-3px)}
.balanceReadout { font:800 14px/1.2 system-ui,sans-serif; padding:7px 12px; border-radius:9px; background:rgba(17,17,17,.08); }.balanceReadout.balanced{background:#9fd3ad;color:#173925;}
.contextTarget { display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 14px; border-radius:10px; background:rgba(17,17,17,.08); }.contextTarget strong{font:900 12px/1 system-ui,sans-serif;letter-spacing:.08em}.contextTarget span{font:800 22px/1 ui-monospace,monospace;}
.contextChoices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }.contextChoice{position:relative; min-width:0; padding:7px 5px; border:2px solid rgba(17,17,17,.22);}.contextChoice.selected{background:#d9c3a3;border-color:#3f382f}.contextChoiceTag{position:absolute;left:7px;top:6px;font:900 12px/1 system-ui,sans-serif}.contextChoiceCanvas{width:100%;height:auto;max-height:78px;display:block;}

@media (pointer:coarse), (max-width:600px) {
  .overlayScreen:has(.puzzleCard--mechanism){padding:6px}.puzzleCard.puzzleCard--mechanism{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);padding:9px;gap:4px}.puzzleCard--mechanism>h2{font-size:18px}.puzzleCard--mechanism>#puzzleInstructions{font-size:13px;line-height:1.18;margin:0}.mechanismClues{gap:4px}.mechanismClue{font-size:11px;padding:5px 4px}.dialUnit{grid-template-rows:auto 34px 60px 34px}.dialAdjust{width:48px;min-width:48px;height:34px;min-height:34px}.dialValue{width:60px;height:60px}.dialValue .sitelenGlyph{font-size:34px}.routeBoardWrap{width:min(100%,390px)}.routeBoard{width:min(100%,280px);gap:3px}.routeTile{font-size:38px;border-radius:7px}.pathGrid{width:min(100%,265px);gap:3px}.pathControls{grid-template-columns:repeat(4,46px);gap:5px}.pathMove{width:46px;height:42px;min-height:42px}.lightsGrid{width:min(100%,245px);gap:7px}.balanceWeight{width:62px;height:62px}.balanceWeight .sitelenGlyph{font-size:32px}.contextChoices{gap:4px}.contextChoice{padding:5px 2px}.contextChoiceCanvas{max-height:62px}
}

/* Level 4 mechanisms: varied, tap-first, and bounded to the existing fixed puzzle viewport. */
.jugTarget{display:flex;align-items:center;justify-content:center;gap:10px;font:800 12px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em}.jugTarget .sitelenGlyph{font-size:34px}.jugTarget small{font-size:11px;text-transform:none;letter-spacing:0;color:var(--muted)}
.jugVessels{display:flex;justify-content:center;align-items:flex-end;gap:34px;width:100%;}.jugUnit{display:flex;flex-direction:column;align-items:center;gap:5px}.jugVessel{position:relative;width:92px;height:150px;border:3px solid rgba(17,17,17,.45);border-top-width:2px;border-radius:8px 8px 16px 16px;overflow:hidden;background:rgba(255,255,255,.32)}.jugVesselFill{position:absolute;left:0;right:0;bottom:0;background:#9cc9d8;transition:height .16s ease}.jugReadout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 5px;text-shadow:0 1px rgba(255,255,255,.75);box-sizing:border-box}.jugReadoutCartouche{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;overflow:hidden}.jugReadoutLatin{font:800 10px/1 system-ui,sans-serif}.jugReadout .sitelenGlyph{font-size:42px;line-height:.9}.jugLabel{font:800 11px/1.1 system-ui,sans-serif}.jugControls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:min(100%,520px)}.jugAction{min-height:42px;padding:6px 8px}
.hanoiBoard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,620px);height:min(240px,34dvh)}.hanoiRod{position:relative;min-width:0;min-height:0;padding:5px 4px 20px;border:2px solid rgba(17,17,17,.2);background:rgba(255,255,255,.25);overflow:hidden}.hanoiRod.selected{background:#e8d5b7;border-color:#564b3d}.hanoiPost{position:absolute;left:50%;bottom:29px;top:14px;width:6px;transform:translateX(-50%);background:#685b4c;border-radius:4px}.hanoiBase{position:absolute;left:10%;right:10%;bottom:25px;height:7px;background:#685b4c;border-radius:4px}.hanoiStack{position:absolute;left:5%;right:5%;bottom:32px;display:flex;flex-direction:column-reverse;align-items:center;gap:3px;pointer-events:none}.hanoiDisk{height:34px;border:2px solid rgba(17,17,17,.28);border-radius:12px;background:#d9c3a3;display:flex;align-items:center;justify-content:center}.hanoiDisk .sitelenGlyph{font-size:23px}.hanoiRod small{position:absolute;bottom:5px;left:0;right:0;font:800 10px/1 system-ui,sans-serif}.hanoiMoves{font:800 12px/1 system-ui,sans-serif}
.codeLegend{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;font:800 11px/1 system-ui,sans-serif}.codeLegend>strong{text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.codeLegendGlyph{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:8px;background:rgba(17,17,17,.07)}.codeLegendGlyph .sitelenGlyph{font-size:31px;line-height:1}.codeGuess{display:grid;grid-template-columns:repeat(var(--code-cols,4),70px);gap:9px;justify-content:center;max-width:100%}.codeSymbol{width:70px;height:70px;min-height:70px;padding:0}.codeSymbol .sitelenGlyph{font-size:40px;line-height:1}.codeSubmit{min-height:42px;padding:8px 20px}.codeHistory{display:grid;gap:4px;width:min(100%,500px)}.codeHistoryRow{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding:5px 8px;border-radius:7px;background:rgba(17,17,17,.06);font:700 11px/1.2 system-ui,sans-serif}.codeHistoryRow--removable{padding-right:38px}.codeHistoryRemove{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border-radius:6px;font:900 18px/1 system-ui,sans-serif}.codeHistorySymbols{display:flex;align-items:center;gap:8px}.codeHistorySymbols .sitelenGlyph{font-size:24px;line-height:1}
.codebreakerWrap{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:min(100%,640px);height:100%;min-height:0;align-content:start;justify-items:center}.codebreakerStage,.codeFeedbackPanel{display:grid;gap:4px;min-width:0;width:100%;align-content:start}.codebreakerStage{justify-items:center}
.equivalenceWrap{display:flex;align-items:center;justify-content:center;width:100%;min-height:0}.equivalenceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,680px)}.equivalenceHeader{text-align:center;font:900 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}.equivalenceHeader.tpProse{text-transform:none;letter-spacing:0;word-spacing:.2em;font-weight:400}.equivalenceCard{min-width:0;min-height:0;padding:4px;border:2px solid rgba(17,17,17,.16);border-radius:8px;background:rgba(255,255,255,.28);display:flex;flex-direction:column;align-items:center;justify-content:center}.equivalenceCard.movable{cursor:pointer}.equivalenceCard.selected{background:#e8d5b7;border-color:#564b3d}.equivalenceCanvas{display:block;width:100%;height:auto;max-height:58px}.equivalenceCard small{font:700 9px/1 ui-monospace,monospace;color:var(--muted)}
.scheduleList{display:grid;gap:5px;width:min(100%,760px)}.scheduleItem{display:grid;grid-template-columns:28px minmax(0,1fr) 48px;gap:6px;align-items:center;padding:4px 6px;border:1px solid rgba(17,17,17,.16);border-radius:8px;background:rgba(255,255,255,.25)}.scheduleRank{font:900 18px/1 system-ui,sans-serif;text-align:center}.scheduleCartouches{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:6px;align-items:center;justify-items:center;min-width:0}.scheduleCanvas{display:block;width:auto;height:auto;max-width:100%;max-height:none}.scheduleControls{display:grid;grid-template-columns:1fr 1fr;gap:3px}.scheduleControls button{width:22px;height:36px;min-width:22px;min-height:36px;padding:0;font-size:18px}

@media (pointer:coarse), (max-width:600px){
  .jugVessels{gap:22px}.jugVessel{width:74px;height:116px}.jugReadout .sitelenGlyph{font-size:34px}.jugControls{gap:4px}.jugAction{font-size:11px;min-height:38px;padding:4px}.hanoiBoard{height:min(190px,29dvh);gap:5px}.hanoiDisk{height:27px}.hanoiDisk .sitelenGlyph{font-size:18px}.codeLegendGlyph{width:42px;height:42px}.codeLegendGlyph .sitelenGlyph{font-size:27px}.codeGuess{grid-template-columns:repeat(var(--code-cols,4),56px);gap:6px}.codeGuess[data-symbol-count="5"],.codeGuess[data-symbol-count="6"]{grid-template-columns:repeat(3,56px)}.codeSymbol{width:56px;height:56px;min-height:56px}.codeSymbol .sitelenGlyph{font-size:33px}.codeHistory{gap:3px}.codeHistoryRow{padding:4px 6px;font-size:10px}.codeHistorySymbols{gap:5px}.codeHistorySymbols .sitelenGlyph{font-size:20px}.equivalenceGrid{gap:3px}.equivalenceCard{padding:2px}.equivalenceCanvas{max-height:45px}.equivalenceCard small{font-size:8px}.scheduleList{gap:3px}.scheduleItem{grid-template-columns:22px minmax(0,1fr) 42px;padding:2px 4px;gap:4px}.scheduleRank{font-size:15px}.scheduleCanvas{max-height:none}.scheduleControls button{width:19px;height:30px;min-width:19px;min-height:30px;font-size:16px}
}

@media (max-height:520px){
  .jugVessel{height:92px}.jugVessels{gap:16px}.hanoiBoard{height:145px}.codeHistoryRow:nth-child(-n+2){display:none}.equivalenceCanvas{max-height:34px}.scheduleCanvas{max-height:none}.scheduleItem{padding:1px 3px}.scheduleControls button{height:26px;min-height:26px}
}


/* Level 5 mechanisms: new interaction families, still bounded to the fixed puzzle viewport. */
.riverPuzzle{display:grid;grid-template-rows:auto auto auto auto;gap:8px;width:min(100%,560px);height:100%;min-height:0;align-content:start}
.riverRules{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:12px;line-height:1.15}
.riverRules>strong{font-size:11px;color:#3f4750}
.riverRule{display:flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid rgba(17,17,17,.15);border-radius:999px;background:rgba(255,255,255,.35)}
.riverRuleGlyph{display:inline-flex;align-items:center;gap:3px}.riverRuleGlyph .sitelenGlyph{font-size:22px}.riverRuleGlyph small{font-size:9px;color:#3f4750}.riverRulePlus{font-weight:900}.riverRuleBad{font:900 18px/1 system-ui;color:#8a1d1d}
.riverBoardWrap{display:grid;gap:6px}
.riverBoardLabels{display:grid;grid-template-columns:1fr .18fr .64fr .18fr 1fr;gap:0;font:900 10px/1.1 system-ui,sans-serif;letter-spacing:.06em;color:#3f4750;text-align:center}
.riverBoard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(56px,1fr));gap:6px;min-height:0}
.riverCell{border-radius:12px;display:grid;place-items:center;min-height:56px;border:1px solid rgba(17,17,17,.16);background:rgba(255,255,255,.24)}
.riverCell.bank{background:linear-gradient(180deg,rgba(180,158,105,.34),rgba(133,155,88,.30))}
.riverCell.water{background:linear-gradient(180deg,rgba(145,195,214,.42),rgba(103,162,189,.48))}
.riverWave{font:900 24px/1 system-ui;color:rgba(255,255,255,.65)}
.riverToken{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px}
.riverToken .sitelenGlyph{font-size:34px;line-height:1}.riverToken small{font:700 10px/1 system-ui,sans-serif;color:#3f4750}
.riverRaft{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px 4px;background:rgba(211,168,105,.92);border:2px solid rgba(49,38,26,.55);border-radius:10px 10px 26px 26px;box-shadow:0 3px 0 rgba(49,38,26,.18)}
.riverRaftGlyph{font-size:30px;line-height:.9}.riverRaftGlyphCompound{font-family:"NasinNanpaGame",sans-serif;font-variant-ligatures:normal;font-feature-settings:"liga" 1,"dlig" 1,"calt" 1;letter-spacing:0;white-space:nowrap}.riverRaftMeta{font:800 9px/1 system-ui,sans-serif;color:#453b31;text-align:center}
.riverControls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.riverControls button{min-height:42px;padding:6px 8px}
.riverFooter{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;font:700 11px/1.2 system-ui,sans-serif;color:#3f4750}
.sokobanWrap{display:grid;gap:8px;justify-items:center}.sokobanGrid{--soko-cols:6;display:grid;grid-template-columns:repeat(var(--soko-cols),48px);gap:2px}.sokobanCell{width:48px;height:48px;border:1px solid rgba(17,17,17,.12);border-radius:5px;background:rgba(255,255,255,.28);display:grid;place-items:center;font:900 24px/1 system-ui}.sokobanCell.wall{background:rgba(17,17,17,.72)}.sokobanCell.goal{box-shadow:inset 0 0 0 4px rgba(63,120,78,.35)}.sokobanCell.crate{background:rgba(190,145,75,.55)}.sokobanCell.player{outline:3px solid #111}.sokobanControls{display:grid;grid-template-columns:repeat(4,48px);gap:5px}.sokobanControls button{width:48px;height:42px;min-height:42px;padding:0;font-size:20px}
.slidingGrid{--slide-cols:3;display:grid;grid-template-columns:repeat(var(--slide-cols),88px);gap:7px}.slidingTile{width:88px;height:88px;min-height:88px;display:grid;place-items:center;border-radius:11px}.slidingTile .sitelenGlyph{font-size:43px}.slidingTile small{font-size:10px}.slidingTile.blank{background:rgba(17,17,17,.08);border-style:dashed}
.pegLine{display:grid;grid-template-columns:repeat(8,64px);gap:7px;max-width:100%}.pegHole{width:64px;height:64px;min-height:64px;border-radius:50%;font-size:30px;padding:0}.pegHole.occupied{background:rgba(255,255,255,.52)}.pegHole.selected{outline:3px solid #111;outline-offset:2px}
.patternSequence{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap}.patternPanel{--pattern-cols:3;display:grid;grid-template-columns:repeat(var(--pattern-cols),22px);gap:3px;padding:6px;border:1px solid rgba(17,17,17,.18);border-radius:8px;background:rgba(255,255,255,.34)}.patternCell{width:22px;height:22px;border-radius:3px;background:rgba(17,17,17,.08)}.patternCell.on{background:#111}.patternQuestion{display:grid;place-items:center;width:80px;height:80px;border:1px dashed rgba(17,17,17,.3);border-radius:8px;font:900 32px/1 system-ui}.patternChoices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,520px)}.patternChoice{display:grid;place-items:center;padding:8px}.patternChoice.selected{outline:3px solid #111}

@media (max-width:700px){.riverPuzzle{gap:6px;width:min(100%,420px)}.riverBoardLabels{font-size:9px;grid-template-columns:1fr .12fr .76fr .12fr 1fr}.riverBoard{grid-template-rows:repeat(4,minmax(48px,1fr));gap:4px}.riverCell{min-height:48px;border-radius:9px}.riverToken .sitelenGlyph{font-size:28px}.riverToken small{font-size:9px}.riverRaftGlyph{font-size:25px}.riverControls{gap:5px}.riverControls button{min-height:38px;padding:4px 6px}.riverFooter{font-size:10px;flex-direction:column;gap:4px}.sokobanGrid{grid-template-columns:repeat(var(--soko-cols),40px)}.sokobanCell{width:40px;height:40px}.slidingGrid{grid-template-columns:repeat(var(--slide-cols),70px)}.slidingTile{width:70px;height:70px;min-height:70px}.slidingTile .sitelenGlyph{font-size:34px}.pegLine{grid-template-columns:repeat(8,42px);gap:4px}.pegHole{width:42px;height:42px;min-height:42px;font-size:22px}.patternPanel{grid-template-columns:repeat(var(--pattern-cols),17px)}.patternCell{width:17px;height:17px}.patternChoices{gap:4px}.patternChoice{padding:4px}.patternQuestion{width:66px;height:66px}}
@media (max-height:620px){.riverRules>strong{display:none}.riverFooter{display:none}.riverBoard{grid-template-rows:repeat(4,minmax(42px,1fr))}.sokobanGrid{grid-template-columns:repeat(var(--soko-cols),34px)}.sokobanCell{width:34px;height:34px}.slidingGrid{grid-template-columns:repeat(var(--slide-cols),60px)}.slidingTile{width:60px;height:60px;min-height:60px}.pegHole{width:38px;height:38px;min-height:38px}.pegLine{grid-template-columns:repeat(8,38px)}.patternPanel{grid-template-columns:repeat(var(--pattern-cols),15px)}.patternCell{width:15px;height:15px}}

/* Level 5 River Dock: short mobile landscape needs a denser board than the
   generic phone treatment. Scale every visual/control component together so
   all four river rows and the action controls remain inside the fixed popup. */
@media (pointer:coarse) and (max-height:520px) and (orientation:landscape){
  .puzzleCard[data-puzzle-type="river-crossing"] .riverPuzzle{width:min(100%,390px);gap:3px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRules{gap:3px;font-size:9px;line-height:1}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRule{gap:2px;padding:1px 4px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRuleGlyph{gap:2px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRuleGlyph .sitelenGlyph{font-size:18px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRuleGlyph small{font-size:7px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRulePlus{font-size:9px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRuleBad{font-size:13px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverBoardWrap{gap:2px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverBoardLabels{font-size:7px;line-height:1}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverBoard{grid-template-rows:repeat(4,31px);gap:2px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverCell{min-height:31px;border-radius:6px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverWave{font-size:18px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverToken{gap:1px;padding:1px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverToken .sitelenGlyph{font-size:21px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverToken--compactPassenger .sitelenGlyph{font-size:16px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverToken small{font-size:7px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRaft{gap:0;padding:1px 2px;border-width:1px;border-radius:6px 6px 14px 14px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRaftGlyph{font-size:19px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverRaftMeta{font-size:7px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverControls{gap:3px}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverControls button{min-height:30px;padding:2px 4px;font-size:10px}
}

/* Level 5 final puzzle: 6x6 nonogram. Row/column clues use sitelen digit glyphs. */
.nonogramWrap{
  --nonogram-cell:48px;
  display:grid;
  grid-template-columns:minmax(74px,auto) auto;
  grid-template-rows:minmax(64px,auto) auto;
  gap:5px;
  align-items:end;
  justify-items:end;
  max-width:100%;
}
.nonogramCorner{width:100%;height:100%}
.nonogramTopClues{
  display:grid;
  grid-template-columns:repeat(var(--nonogram-cols),var(--nonogram-cell));
  gap:3px;
}
.nonogramRowClues{
  display:grid;
  grid-template-rows:repeat(var(--nonogram-rows),var(--nonogram-cell));
  gap:3px;
}
.nonogramClue{
  min-height:var(--nonogram-cell);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  padding:0 5px;
  box-sizing:border-box;
}
.nonogramClue.vertical{
  min-width:var(--nonogram-cell);
  min-height:64px;
  flex-direction:column;
  justify-content:flex-end;
  padding:4px 0;
}
.nonogramClueNumber{font-size:24px;line-height:1}.nonogramClueSeparator{font:900 17px/1 system-ui,sans-serif;color:#3f4750;flex:0 0 auto}
.nonogramGrid{
  display:grid;
  grid-template-columns:repeat(var(--nonogram-cols),var(--nonogram-cell));
  grid-template-rows:repeat(var(--nonogram-rows),var(--nonogram-cell));
  gap:3px;
}
.nonogramCell{
  width:var(--nonogram-cell);
  height:var(--nonogram-cell);
  min-width:var(--nonogram-cell);
  min-height:var(--nonogram-cell);
  padding:0;
  border:1px solid rgba(17,17,17,.28);
  border-radius:5px;
  background:rgba(255,255,255,.42);
  position:relative;
}
.nonogramCell.filled{background:#111;border-color:#111}
.nonogramCell.marked::before{
  content:'×';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(17,17,17,.52);
  font:700 28px/1 system-ui,sans-serif;
}
@media (max-width:600px){
  .nonogramWrap{--nonogram-cell:38px;grid-template-columns:minmax(60px,auto) auto;gap:3px}
  .nonogramTopClues,.nonogramRowClues,.nonogramGrid{gap:2px}
  .nonogramClue{gap:2px;padding:0 3px}
  .nonogramClue.vertical{min-height:52px;padding:2px 0}
  .nonogramClueNumber{font-size:20px}
  .nonogramCell.marked::before{font-size:22px}
}
@media (max-height:620px){
  .nonogramWrap{--nonogram-cell:34px;grid-template-columns:minmax(54px,auto) auto}
  .nonogramClue.vertical{min-height:46px}
  .nonogramClueNumber{font-size:18px}
}


/* Level 6 — records / number-systems mechanisms. */
.cardSortWrap{display:grid;gap:7px;justify-items:center;width:100%}
.cardSortRow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0}
.cardSortButton{padding:3px;min-width:0;background:transparent;border:2px solid transparent;border-radius:10px;box-shadow:none}
.cardSortButton:hover{transform:none}.cardSortButton.selected{border-color:#111;background:rgba(17,17,17,.08)}
.cardSortCanvas{display:block;width:82px;height:116px}
.cardSortNote{font:800 11px/1 system-ui,sans-serif;color:var(--muted)}

.calculatorPuzzle{display:grid;grid-template-rows:auto auto auto auto;gap:7px;width:min(100%,560px);justify-items:center}
.calculatorProgress,.baseMatchProgress{font:900 11px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.calculatorExpression{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:5px;width:100%}
.calculatorCartouche{display:block;width:100%;height:auto;max-height:76px}
.calculatorOperator{font:900 28px/1 system-ui,sans-serif;text-align:center}.calculatorOperator.sitelenGlyph{font-family:"NasinNanpaGame",sans-serif;font-size:34px;font-weight:400;line-height:1}
.calculatorAnswer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;width:min(100%,390px);padding:4px 7px;border:1px solid rgba(17,17,17,.18);border-radius:9px;background:rgba(255,255,255,.28)}
.calculatorAnswer>strong{font:900 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.calculatorAnswerCanvas{display:block;width:100%;height:auto;max-height:62px}
.calculatorKeypad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:min(100%,430px)}.calculatorKeypad--expression{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,390px)}
.calculatorKey{min-height:42px;padding:5px 6px;font-size:15px}.calculatorKey--enter{grid-column:auto;background:#d7e8d9}.calculatorKey--clear{font-size:12px}

.baseMatchWrap{display:grid;gap:7px;width:min(100%,620px);justify-items:center}
.baseMatchTarget{display:block;width:min(100%,360px);height:auto;max-height:76px;border:2px solid rgba(17,17,17,.22);border-radius:10px;background:rgba(255,255,255,.34)}
.baseMatchChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
.baseMatchChoice{padding:4px;min-width:0;border:2px solid rgba(17,17,17,.18)}.baseMatchChoice.selected{outline:3px solid #111}
.baseMatchCanvas{display:block;width:100%;height:auto;max-height:68px}

.ringLockWrap{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr);gap:10px;width:min(100%,680px);align-items:center}
.ringLockClues{display:grid;gap:5px;align-self:stretch;align-content:center}
.ringLockClue{padding:5px 7px;border:1px solid rgba(17,17,17,.16);border-radius:8px;background:rgba(255,255,255,.3);font:700 11px/1.18 system-ui,sans-serif}
.ringLockGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ringLockUnit{display:grid;grid-template-rows:auto auto auto;justify-items:center;gap:3px}
.ringDial{position:relative;width:104px;height:104px;border:2px solid rgba(17,17,17,.28);border-radius:50%;background:rgba(255,255,255,.3)}
.ringDot{position:absolute;width:11px;height:11px;border-radius:50%;background:rgba(17,17,17,.17);left:calc(50% - 5.5px);top:calc(50% - 5.5px)}
.ringDot.active{background:#111;box-shadow:0 0 0 3px rgba(255,255,255,.72)}
.ringDot0{transform:translate(0,-43px)}.ringDot1{transform:translate(30px,-30px)}.ringDot2{transform:translate(43px,0)}.ringDot3{transform:translate(30px,30px)}
.ringDot4{transform:translate(0,43px)}.ringDot5{transform:translate(-30px,30px)}.ringDot6{transform:translate(-43px,0)}.ringDot7{transform:translate(-30px,-30px)}
.ringCenterGlyph{position:absolute;inset:0;display:grid;place-items:center;font-size:39px;line-height:1}
.ringLabel{font:800 10px/1 system-ui,sans-serif}.ringControls{display:grid;grid-template-columns:repeat(2,42px);gap:5px}.ringControls button{width:42px;height:34px;min-height:34px;padding:0;font-size:18px}

/* Level 6 country crossword; answer letters are never printed in the cells. */
.countryCrosswordWrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;width:min(100%,690px);height:100%;min-height:0;align-items:center}
.countryCrosswordClues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;min-width:0}
.countryCrosswordClue{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:5px;row-gap:2px;padding:5px 6px;border:1px solid rgba(17,17,17,.16);border-radius:8px;background:rgba(255,255,255,.3);font:700 10px/1.16 system-ui,sans-serif}
.countryCrosswordClue strong{grid-row:1 / span 2;display:grid;grid-template-columns:auto auto;align-items:center;gap:3px}.countryCrosswordClue small{grid-column:2;color:var(--muted);font-size:8px;line-height:1.1}
.countryCrosswordClueDirection{font:900 11px/1 system-ui,sans-serif;color:#4a443b}
.countryCrosswordGrid{display:grid;grid-template-columns:repeat(var(--cross-cols),46px);grid-template-rows:repeat(var(--cross-rows),46px);gap:2px}
.countryCrosswordCell{position:relative;width:46px;height:46px;min-width:46px;min-height:46px;padding:0;border-radius:5px}
.countryCrosswordCell.block{background:rgba(17,17,17,.65);border-color:rgba(17,17,17,.65)}
button.countryCrosswordCell{background:rgba(255,255,255,.42)}
.countryCrosswordNumberHost{position:absolute;left:2px;top:2px;width:calc(100% * .90);height:calc(100% * .52);display:flex;align-items:flex-start;justify-content:flex-start;overflow:visible;opacity:.68;pointer-events:none;mix-blend-mode:multiply}
.countryCrosswordNumberHost--clue{position:static;width:48px;height:28px;min-width:48px;opacity:.82}
.countryCrosswordIndexCanvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%}
.countryCrosswordGlyph{font-size:29px;line-height:1}.countryCrosswordCell.empty .countryCrosswordGlyph{font-family:system-ui,sans-serif;font-size:17px;color:rgba(17,17,17,.35)}

@media (pointer:coarse), (max-width:600px){
  .cardSortRow{gap:3px}.cardSortCanvas{width:55px;height:78px}.cardSortButton{padding:1px;border-radius:7px}
  .calculatorPuzzle{gap:4px}.calculatorExpression{gap:2px;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}.calculatorOperator{font-size:22px}.calculatorCartouche{max-height:55px}.calculatorAnswerCanvas{max-height:47px}.calculatorKeypad{gap:3px}.calculatorKey{min-height:36px;padding:2px;font-size:13px}
  .baseMatchWrap{gap:4px}.baseMatchTarget{max-height:56px}.baseMatchChoices{gap:4px}.baseMatchCanvas{max-height:51px}
  .ringLockWrap{grid-template-columns:1fr;gap:5px}.ringLockClues{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.ringLockClue{padding:3px 4px;font-size:9px}.ringLockGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.ringDial{width:70px;height:70px}.ringDot{width:8px;height:8px;left:calc(50% - 4px);top:calc(50% - 4px)}.ringDot0{transform:translate(0,-28px)}.ringDot1{transform:translate(20px,-20px)}.ringDot2{transform:translate(28px,0)}.ringDot3{transform:translate(20px,20px)}.ringDot4{transform:translate(0,28px)}.ringDot5{transform:translate(-20px,20px)}.ringDot6{transform:translate(-28px,0)}.ringDot7{transform:translate(-20px,-20px)}.ringCenterGlyph{font-size:28px}.ringControls{grid-template-columns:repeat(2,34px);gap:2px}.ringControls button{width:34px;height:30px;min-height:30px}
  .countryCrosswordWrap{grid-template-columns:1fr;grid-template-rows:auto auto;gap:4px;justify-items:center;align-content:center}.countryCrosswordClues{gap:3px;width:100%}.countryCrosswordClue{padding:3px 4px;font-size:8.5px}.countryCrosswordClue small{display:block}.countryCrosswordClue .countryClueTp,.countryCrosswordClue .countryClueEn{margin-top:0;font-size:8px;line-height:1.08;min-width:0}.countryCrosswordNumberHost--clue{width:42px;height:24px;min-width:42px}.countryCrosswordClueDirection{font-size:10px}.countryCrosswordGrid{grid-template-columns:repeat(var(--cross-cols),40px);grid-template-rows:repeat(var(--cross-rows),40px)}.countryCrosswordCell{width:40px;height:40px;min-width:40px;min-height:40px}.countryCrosswordGlyph{font-size:25px}
}
@media (max-width:390px){
  .cardSortCanvas{width:50px;height:71px}
  .countryCrosswordGrid{grid-template-columns:repeat(var(--cross-cols),36px);grid-template-rows:repeat(var(--cross-rows),36px)}.countryCrosswordCell{width:36px;height:36px;min-width:36px;min-height:36px}.countryCrosswordGlyph{font-size:22px}
}
@media (max-height:620px){
  .cardSortCanvas{width:48px;height:68px}
  .calculatorCartouche{max-height:45px}.calculatorAnswerCanvas{max-height:40px}.calculatorKey{min-height:31px}
  .ringLockClues{display:none}.ringDial{width:66px;height:66px}.ringDot0{transform:translate(0,-26px)}.ringDot1{transform:translate(18px,-18px)}.ringDot2{transform:translate(26px,0)}.ringDot3{transform:translate(18px,18px)}.ringDot4{transform:translate(0,26px)}.ringDot5{transform:translate(-18px,18px)}.ringDot6{transform:translate(-26px,0)}.ringDot7{transform:translate(-18px,-18px)}
  .countryCrosswordClue{font-size:8px}.countryCrosswordGrid{grid-template-columns:repeat(var(--cross-cols),34px);grid-template-rows:repeat(var(--cross-rows),34px)}.countryCrosswordCell{width:34px;height:34px;min-width:34px;min-height:34px}
}

.calculatorAnswer--working{grid-template-columns:auto minmax(0,1fr);width:min(100%,520px)}
.calculatorBenchWork{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;overflow:hidden}
.calculatorBenchWorkCartouche{display:block;width:auto;height:auto;max-width:44%;max-height:58px;flex:0 1 auto}
.calculatorBenchWorkOperator{font-family:"NasinNanpaGame",sans-serif;font-size:31px;line-height:1;flex:0 0 auto}
.calculatorBenchPlaceholder{font:700 24px/1 system-ui,sans-serif;color:rgba(17,17,17,.35)}
@media (pointer:coarse), (max-width:600px){
  .calculatorBenchWork{gap:3px}
  .calculatorBenchWorkCartouche{max-height:44px}
  .calculatorBenchWorkOperator{font-size:25px}
}


/* Level 7 — sensory systems wing. */
.toneSequenceWrap{display:grid;gap:10px;justify-items:center;width:min(100%,560px)}
.toneReplay{min-width:150px}
.toneProgress{font:900 16px/1 system-ui,sans-serif;letter-spacing:.12em;color:var(--muted);min-height:20px}
.tonePads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.tonePad{min-height:92px;display:grid;place-items:center;gap:2px}.tonePad .sitelenGlyph{font-size:40px}.tonePad small{font-size:10px;color:var(--muted)}
.tonePad.active{outline:4px solid #111;transform:translateY(-2px);background:#fff4a8}

.airflowWrap{display:grid;justify-items:center;width:100%}
.airflowGrid{display:grid;grid-template-columns:repeat(var(--air-cols),72px);gap:6px}
.airflowTile{position:relative;width:72px;height:72px;min-height:72px;padding:0;font:900 44px/1 system-ui,sans-serif;border-radius:10px}
.airflowTile.empty{visibility:hidden}
.airflowTile.connected{background:#d8ecd9}
.airflowTile[data-edge]::after{content:attr(data-edge);position:absolute;left:50%;bottom:3px;transform:translateX(-50%);font:900 8px/1 system-ui,sans-serif;letter-spacing:.04em}

.pulseSyncWrap{display:grid;gap:8px;width:min(100%,680px)}
.pulseBoard{display:grid;gap:8px}
.pulseLane{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;align-items:center}
.pulseControls{display:grid;grid-template-columns:38px 36px 38px;gap:4px;align-items:center;justify-content:center}
.pulseControls button{width:38px;height:36px;min-height:36px;padding:0}.pulseLaneLabel{display:grid;place-items:center;font-size:26px}
.pulseCells{display:grid;grid-template-columns:repeat(var(--pulse-cols),minmax(0,1fr));gap:2px;min-width:0}
.pulseCell{height:32px;border:1px solid rgba(17,17,17,.16);border-radius:3px;background:rgba(255,255,255,.25);position:relative}
.pulseCell.on::after{content:'';position:absolute;inset:8px;border-radius:50%;background:#111}
.pulseCell.gate{box-shadow:inset 0 0 0 3px #b06d2b;background:rgba(176,109,43,.12)}
.pulseCell.gate.on{background:#d8ecd9}
.pulseNote{text-align:center;font:800 10px/1.2 system-ui,sans-serif;color:var(--muted)}

.spectrumWrap{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,1.1fr);gap:10px;width:min(100%,700px);align-items:center}
.spectrumClues{display:grid;gap:5px}
.spectrumClue{padding:5px 7px;border:1px solid rgba(17,17,17,.16);border-radius:8px;background:rgba(255,255,255,.3);font:700 11px/1.18 system-ui,sans-serif}
.spectrumFilters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.spectrumFilter{min-height:100px;padding:6px 4px;display:grid;grid-template-rows:1fr auto;gap:5px;justify-items:center}
.spectrumFilter.selected{outline:3px solid #111;outline-offset:2px}
.spectrumSwatch{display:block;width:44px;height:58px;border-radius:6px;border:2px solid rgba(17,17,17,.3)}
.spectrumFilter--black .spectrumSwatch{background:#111}
.spectrumFilter--red .spectrumSwatch{background:#d33}
.spectrumFilter--yellow .spectrumSwatch{background:#e2c431}
.spectrumFilter--blue .spectrumSwatch{background:#4a70c9}
.spectrumFilter--white .spectrumSwatch{background:#fff}

.powerBalanceWrap{display:grid;gap:10px;width:min(100%,690px);justify-items:center}
.powerMeters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,520px)}
.powerMeter{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;padding:5px 7px;border:1px solid rgba(17,17,17,.16);border-radius:9px;background:rgba(255,255,255,.3)}
.powerMeter strong{font:900 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.powerMeterCanvas{display:block;width:100%;height:auto;max-height:58px}
.powerBreakers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;width:100%}
.powerBreaker{min-height:92px;padding:6px;display:grid;grid-template-rows:auto 1fr;gap:4px;justify-items:center}
.powerBreaker.on{background:#d8ecd9;outline:3px solid #3f784e}
.powerBreakerLamp{width:16px;height:16px;border-radius:50%;background:rgba(17,17,17,.16);border:1px solid rgba(17,17,17,.3)}
.powerBreaker.on .powerBreakerLamp{background:#3f784e}
.powerBreakerCanvas{display:block;width:100%;height:auto;max-height:58px}

@media (pointer:coarse), (max-width:600px){
  .toneSequenceWrap{gap:6px}.tonePads{gap:4px}.tonePad{min-height:66px}.tonePad .sitelenGlyph{font-size:31px}
  .airflowGrid{grid-template-columns:repeat(var(--air-cols),54px);gap:4px}.airflowTile{width:54px;height:54px;min-height:54px;font-size:34px}
  .pulseSyncWrap{gap:5px}.pulseBoard{gap:5px}.pulseLane{grid-template-columns:96px minmax(0,1fr);gap:5px}.pulseControls{grid-template-columns:30px 30px 30px;gap:2px}.pulseControls button{width:30px;height:30px;min-height:30px}.pulseLaneLabel{font-size:22px}.pulseCell{height:24px}.pulseCell.on::after{inset:6px}.pulseNote{font-size:9px}
  .spectrumWrap{grid-template-columns:1fr;gap:6px}.spectrumClues{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.spectrumClue{padding:3px 5px;font-size:9px}.spectrumFilter{min-height:70px;padding:3px 2px;font-size:9px}.spectrumSwatch{width:32px;height:38px}
  .powerBalanceWrap{gap:6px}.powerMeters{gap:4px}.powerMeter{padding:3px 4px}.powerMeterCanvas{max-height:45px}.powerBreakers{gap:4px}.powerBreaker{min-height:68px;padding:3px}.powerBreakerCanvas{max-height:44px}
}
@media (max-height:620px){
  .tonePad{min-height:56px}.tonePad .sitelenGlyph{font-size:28px}
  .airflowGrid{grid-template-columns:repeat(var(--air-cols),48px);gap:3px}.airflowTile{width:48px;height:48px;min-height:48px;font-size:30px}
  .pulseCell{height:20px}.pulseCell.on::after{inset:5px}.pulseNote{display:none}
  .spectrumClues{display:none}.spectrumFilter{min-height:62px}.spectrumSwatch{height:34px}
  .powerMeterCanvas{max-height:40px}.powerBreaker{min-height:58px}.powerBreakerCanvas{max-height:38px}
}


/* Level 8 — higher-difficulty constraint systems wing. */
.deductionWrap{display:grid;grid-template-columns:minmax(240px,.95fr) minmax(0,1.05fr);gap:10px;width:min(100%,760px);align-items:center}
.deductionClues,.dependencyClues{display:grid;gap:4px}
.deductionClue{padding:5px 7px;border:1px solid rgba(17,17,17,.16);border-radius:8px;background:rgba(255,255,255,.3);font:700 10.5px/1.18 system-ui,sans-serif}
.deductionTokens,.dependencyTokens{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.dependencyTokens{grid-template-columns:repeat(7,minmax(0,1fr))}
.deductionToken{position:relative;min-height:96px;padding:8px 3px 5px;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:2px}
.deductionToken.selected{outline:3px solid #111;outline-offset:2px}
.deductionSlot{position:absolute;left:4px;top:3px;font:900 8px/1 system-ui,sans-serif;color:var(--muted)}
.deductionGlyph{font-size:38px;align-self:center}.deductionLabel{font:800 9px/1 system-ui,sans-serif;color:var(--muted)}

.dualMirrorWrap{display:grid;gap:6px;justify-items:center;width:min(100%,620px)}
.dualMirrorLegend{font:800 10px/1.2 system-ui,sans-serif;color:var(--muted);text-align:center}
.dualMirrorBoard{position:relative;display:grid;grid-template-columns:repeat(var(--mirror-cols),62px);grid-template-rows:repeat(var(--mirror-rows),62px);gap:2px;padding:0}
.dualMirrorCell{position:relative;width:62px;height:62px;border:1px solid rgba(17,17,17,.14);background:rgba(255,255,255,.22);z-index:2}
.dualMirrorMirror{width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:rgba(255,255,255,.38);font:900 42px/1 ui-monospace,monospace;box-shadow:none}
.dualMirrorMirror:hover{transform:none;background:rgba(255,255,255,.65)}
.dualMirrorBeams{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.dualMirrorBeam{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.84}
.dualMirrorBeam.beam1{stroke:#b14343}.dualMirrorBeam.beam2{stroke:#395fae;stroke-dasharray:12 8}
/* Mirror ports use the edge cell itself: a compact nanpa-linja-n number cartouche
   identifies the beam and directional ni replaces the old Latin IN/OUT label. */
.dualMirrorPorts{position:absolute;inset:0;z-index:4;pointer-events:none}
.dualMirrorPortMarker{position:absolute;transform:translate(-50%,-50%);display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);place-items:center;min-width:0;min-height:0;padding:1px;border:1px solid rgba(17,17,17,.34);border-radius:4px;background:rgba(247,234,212,.88);overflow:hidden;box-sizing:border-box}
.dualMirrorPortNumber{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.dualMirrorPortNumber>.tpNumeric{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;margin:0}
.dualMirrorPortNumber>.tpNumeric::after{display:none}
.dualMirrorPortNumber>.tpNumeric>.tpNumericCanvas{display:block;width:auto;height:auto;max-width:94%;max-height:15px;object-fit:contain}
.dualMirrorPortNi{display:block;max-width:100%;font-family:"NasinNanpaGame",sans-serif;font-variant-ligatures:normal;font-feature-settings:"liga" 1,"dlig" 1,"calt" 1;font-size:18px;font-weight:400;line-height:.9;white-space:nowrap;color:#111}

.truthGateWrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:10px 12px;width:min(100%,720px);align-items:center}
.truthGateDiagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.truthGateSelect{min-height:88px;padding:7px 4px;display:grid;gap:5px;align-content:center;border-width:2px;transition:transform .12s ease,box-shadow .12s ease}.truthGateSelect:active{transform:translateY(1px)}.truthGateSelect small{font:800 9px/1 system-ui,sans-serif;color:var(--muted)}.truthGateSelect strong{font:900 16px/1 system-ui,sans-serif}
.truthTable{display:grid;grid-template-columns:repeat(5,48px);gap:3px;justify-content:center}
.truthTable>strong{display:grid;place-items:center;height:26px;padding:0 2px;text-align:center;font:900 9px/1 system-ui,sans-serif}
.truthBit{display:grid;place-items:center;width:48px;height:34px;border:1px solid rgba(17,17,17,.16);border-radius:5px;background:rgba(255,255,255,.3);font-size:23px}
.truthTargetBit{border-style:dashed;background:rgba(255,255,255,.16)}
.truthCurrentBit{border-width:2px;font-weight:900;animation:truthBitPulse .18s ease-out}
.truthCurrentBit.match{background:rgba(49,145,72,.2);border-color:rgba(35,118,54,.72)}
.truthCurrentBit.mismatch{background:rgba(177,67,67,.16);border-color:rgba(177,67,67,.72)}
.truthGateProgress{grid-column:1/-1;text-align:center;padding:5px 7px;border:1px solid rgba(177,67,67,.35);border-radius:7px;background:rgba(177,67,67,.09);font:900 11px/1.15 system-ui,sans-serif}
.truthGateProgress.solved{border-color:rgba(35,118,54,.65);background:rgba(49,145,72,.16)}
.truthGateWrap.solved .truthGateSelect{box-shadow:0 0 0 2px rgba(49,145,72,.18)}
.truthGateKey{grid-column:1/-1;text-align:center;font:800 9px/1.2 system-ui,sans-serif;color:var(--muted)}
@keyframes truthBitPulse{0%{transform:scale(.82)}100%{transform:scale(1)}}

.exactPathWrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:8px 12px;width:min(100%,700px);align-items:center;justify-content:center}
.exactPathMeters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;grid-column:1}
.exactPathMeter{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px;align-items:center;padding:4px 6px;border:1px solid rgba(17,17,17,.16);border-radius:8px;background:rgba(255,255,255,.3)}
.exactPathMeter strong{font:900 9px/1 system-ui,sans-serif;text-transform:uppercase}.exactPathMeterCanvas{display:block;width:100%;height:auto;max-height:48px}
.exactPathGrid{display:grid;grid-template-columns:repeat(var(--path-cols),62px);gap:4px;grid-column:2;grid-row:1 / span 2}
.exactPathCell{position:relative;width:62px;height:62px;min-height:62px;padding:0;display:grid;place-items:center}
.exactPathCell:disabled{opacity:1;color:inherit}.exactPathCell.visited{background:#d9e7d9}.exactPathCell.current{outline:3px solid #111}.exactPathCell.exit{box-shadow:inset 0 0 0 3px #a66a27}
.exactPathStep{position:absolute;left:4px;top:3px;font:900 7px/1 system-ui,sans-serif;color:var(--muted)}
.exactPathValue{font-size:31px}
.exactPathControls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;grid-column:1}.exactPathControls button{min-height:38px}

@media (pointer:coarse), (max-width:600px){
  .deductionWrap{grid-template-columns:1fr;gap:5px}.deductionClues,.dependencyClues{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.deductionClue{padding:3px 4px;font-size:8.5px}
  .deductionToken{min-height:66px;padding:5px 1px 3px}.deductionGlyph{font-size:28px}.deductionLabel{font-size:7px}.dependencyTokens{gap:2px}.dependencyTokens .deductionToken{min-height:61px}.dependencyTokens .deductionGlyph{font-size:25px}
  .dualMirrorBoard{grid-template-columns:repeat(var(--mirror-cols),48px);grid-template-rows:repeat(var(--mirror-rows),48px)}.dualMirrorCell{width:48px;height:48px}.dualMirrorMirror{font-size:32px}.dualMirrorLegend{font-size:9px}
  .truthGateWrap{grid-template-columns:1fr;gap:6px}.truthGateSelect{min-height:56px}.truthTable{grid-template-columns:repeat(5,40px)}.truthBit{width:40px;height:28px;font-size:20px}
  .exactPathWrap{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:5px;justify-items:center}.exactPathMeters{grid-column:1;width:100%}.exactPathGrid{grid-column:1;grid-row:2;grid-template-columns:repeat(var(--path-cols),52px)}.exactPathCell{width:52px;height:52px;min-height:52px}.exactPathValue{font-size:27px}.exactPathControls{grid-column:1;grid-row:3;width:100%}
}
@media (max-height:620px){
  .deductionClue{font-size:8px;padding:2px 4px}.deductionToken{min-height:54px}.deductionGlyph{font-size:24px}.deductionLabel{display:none}
  .dualMirrorBoard{grid-template-columns:repeat(var(--mirror-cols),43px);grid-template-rows:repeat(var(--mirror-rows),43px)}.dualMirrorCell{width:43px;height:43px}.dualMirrorMirror{font-size:28px}
  .truthGateSelect{min-height:48px;padding:3px}.truthBit{height:24px;font-size:18px}.truthGateKey{display:none}
  .exactPathMeterCanvas{max-height:37px}.exactPathGrid{grid-template-columns:repeat(var(--path-cols),45px)}.exactPathCell{width:45px;height:45px;min-height:45px}.exactPathValue{font-size:24px}.exactPathControls button{min-height:32px}
}


/* Level 9 — vertical labyrinth / navigation-state interactions. */
.sphinxWrap{display:grid;gap:9px;width:min(100%,650px);justify-items:center}
.sphinxCrest{font-size:58px;line-height:1}
.sphinxProgress{font:900 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sphinxProgress.tpProse{text-transform:none;letter-spacing:0;word-spacing:.2em}
.sphinxRiddle{padding:9px 11px;border:1px solid rgba(17,17,17,.18);border-radius:10px;background:rgba(255,255,255,.34);font:700 13px/1.3 system-ui,sans-serif;text-align:center}
.sphinxChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:100%}
.sphinxChoice{min-height:88px;display:grid;place-items:center}.sphinxChoice .sitelenGlyph{font-size:46px}

.coupledSwitchWrap{display:grid;gap:10px;width:min(100%,680px)}
.coupledLampRows{display:grid;gap:6px}
.coupledLampRow{display:grid;grid-template-columns:repeat(var(--coupled-cols,6),minmax(0,1fr));gap:5px;align-items:center}.coupledLampRow>strong{grid-column:1/-1}
.coupledLampRow strong{font:900 9px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.coupledLamp{display:grid;place-items:center;height:40px;border-radius:7px;border:1px solid rgba(17,17,17,.18);background:rgba(17,17,17,.08);font:900 10px/1 system-ui,sans-serif;color:var(--muted)}
.coupledLamp.on{background:#111;color:#fff}
.coupledLevers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.coupledLever{min-height:82px;padding:5px;display:grid;gap:2px;place-items:center}.coupledLever .sitelenGlyph{font-size:32px}.coupledLever small{font-size:8px;line-height:1.1;color:var(--muted)}
.coupledSwitchNote{text-align:center;font:800 9px/1 system-ui,sans-serif;color:var(--muted)}

.layerAlignWrap{display:grid;gap:7px;width:min(100%,760px);justify-items:center}
.layerTargetSummary{font:800 10px/1.2 system-ui,sans-serif;color:var(--muted);text-align:center}
.layerAlignStack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%}
.layerAlignUnit{display:grid;gap:4px;justify-items:center}
.layerAlignHead{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:4px;align-items:center;width:100%}
.layerAlignHead button{width:34px;height:32px;min-height:32px;padding:0}.layerAlignHead strong{text-align:center;font:900 10px/1 system-ui,sans-serif;text-transform:uppercase}
.layerAlignGrid{display:grid;grid-template-columns:repeat(var(--layer-size),34px);grid-template-rows:repeat(var(--layer-size),34px);gap:2px}
.layerAlignCell{position:relative;width:34px;height:34px;border:1px solid rgba(17,17,17,.15);border-radius:4px;background:rgba(255,255,255,.28);display:grid;place-items:center}
.layerAlignCell.target::after{content:'';position:absolute;inset:4px;border:2px dashed rgba(17,17,17,.28);border-radius:50%}
.layerMarker{position:relative;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:900 11px/1 system-ui,sans-serif;color:#fff;background:#555}
.layerMarker--a{background:#a64848}.layerMarker--b{background:#3e64a9}.layerMarker--c{background:#7b6a2d}.layerMarker.aligned{box-shadow:0 0 0 3px #4f875b}
.layerRotation{font:800 8px/1 system-ui,sans-serif;color:var(--muted)}

@media (pointer:coarse), (max-width:600px){
  .sphinxWrap{gap:5px}.sphinxCrest{font-size:44px}.sphinxRiddle{padding:6px 8px;font-size:10px}.sphinxChoices{gap:4px}.sphinxChoice{min-height:62px}.sphinxChoice .sitelenGlyph{font-size:34px}
  .coupledSwitchWrap{gap:6px}.coupledLampRow{gap:3px}.coupledLamp{height:31px}.coupledLevers{gap:3px}.coupledLever{min-height:58px;padding:3px}.coupledLever .sitelenGlyph{font-size:25px}.coupledLever small{font-size:7px}
  .layerAlignStack{gap:4px}.layerAlignGrid{grid-template-columns:repeat(var(--layer-size),27px);grid-template-rows:repeat(var(--layer-size),27px)}.layerAlignCell{width:27px;height:27px}.layerMarker{width:18px;height:18px;font-size:9px}.layerAlignHead{grid-template-columns:28px minmax(0,1fr) 28px}.layerAlignHead button{width:28px;height:28px;min-height:28px}
}
@media (max-height:620px){
  .sphinxRiddle{font-size:9px}.sphinxChoice{min-height:52px}.sphinxChoice .sitelenGlyph{font-size:30px}
  .coupledLamp{height:27px}.coupledLever{min-height:50px}.coupledLever small{display:none}
  .layerTargetSummary{display:none}.layerAlignGrid{grid-template-columns:repeat(var(--layer-size),24px);grid-template-rows:repeat(var(--layer-size),24px)}.layerAlignCell{width:24px;height:24px}.layerMarker{width:16px;height:16px;font-size:8px}
}

/* Level 10 — cold market / logistics tower. */
.marketTillWrap,.coldChainWrap,.textileMixerWrap{display:grid;gap:10px;width:min(100%,720px);min-width:0}
.marketTillCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.marketTillCard{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;align-items:center;min-width:0;padding:8px;border:1px solid rgba(17,17,17,.16);border-radius:10px;background:rgba(255,255,255,.32)}
.marketTillHead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-width:0}.marketTillHead .sitelenGlyph{font-size:45px}.marketTillCopy{display:grid;gap:2px;min-width:0}.marketTillCopy strong{font:900 12px/1 system-ui,sans-serif}.marketTillCopy div{font:800 10px/1.2 system-ui,sans-serif;color:var(--muted)}
.marketTillCartoucheFrame{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;overflow:hidden}.marketTillCanvas{display:block;width:auto;height:auto;max-width:100%;max-height:82px;flex:0 1 auto}
.marketTillTarget{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.3)}.marketTillTarget>strong{font:900 10px/1 system-ui,sans-serif;text-transform:uppercase;white-space:nowrap}.marketTillTarget .marketTillCanvas{max-height:92px}
.marketTillTokens{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.marketToken{min-height:58px;font:900 13px/1 system-ui,sans-serif}.marketToken.selected{background:#d8ecd9;outline:3px solid #3f784e}
.marketTillReadout{padding:6px;border:1px solid rgba(17,17,17,.15);border-radius:8px;text-align:center;font:900 12px/1 system-ui,sans-serif}.marketTillReadout.exact{background:#d8ecd9;color:#244a2e}
.coldControls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.coldControl{min-height:75px;display:grid;gap:4px;place-items:center}.coldControl strong{font:900 11px/1 system-ui,sans-serif}.coldControl span{font:800 10px/1 system-ui,sans-serif;color:var(--muted)}
.coldGauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.coldGauge{padding:7px;border:1px solid rgba(17,17,17,.16);border-radius:9px;background:rgba(255,255,255,.28);display:grid;gap:3px;justify-items:center}.coldGauge.matched{background:#d8ecd9;outline:3px solid #3f784e}.coldGauge strong{font:900 10px/1 system-ui,sans-serif}.coldGauge small{font:800 9px/1 system-ui,sans-serif;color:var(--muted)}.coldGaugeCanvas{display:block;width:100%;height:auto;max-height:56px}
.textileFormula{display:flex;gap:9px;align-items:center;justify-content:center;padding:10px;border:1px solid rgba(17,17,17,.16);border-radius:10px;background:rgba(255,255,255,.28);font:900 11px/1 system-ui,sans-serif}.textileFormula .sitelenGlyph{font-size:42px}.textileRatioOptions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.textileRatio{min-height:68px;font:900 15px/1 system-ui,sans-serif}.textileRatio.selected{outline:3px solid #111;background:#e8ddc5}
.recordClassifyWrap{display:grid;gap:8px;width:min(100%,760px);min-width:0}.recordClassifyLead{padding:7px 9px;border:2px solid rgba(17,17,17,.22);border-radius:9px;background:#efe4ca;text-align:center;font-weight:800}.recordClassifyGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.recordClassifyCard{display:grid;gap:7px;padding:8px;border:1px solid rgba(17,17,17,.18);border-radius:10px;background:rgba(255,255,255,.32);min-width:0}.recordClassifyHead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}.recordClassifyGlyph{font-size:42px}.recordClassifyHead strong{font:900 12px/1.15 system-ui,sans-serif}.recordClassifyFacts{display:grid;gap:4px}.recordClassifyFact{padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.42);font:750 10px/1.22 system-ui,sans-serif;min-width:0}.recordClassifyDecision{display:grid;gap:5px}.recordClassifyDecision>strong{font:900 10px/1.1 system-ui,sans-serif}.recordClassifyChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.recordClassifyChoice{min-height:42px;padding:5px;font-weight:900}.recordClassifyChoice.selected{background:#d8ecd9;outline:3px solid #3f784e}
@media (pointer:coarse), (max-width:600px){
  .marketTillCards{grid-template-columns:1fr}.marketTillCard{padding:7px}.marketTillHead .sitelenGlyph{font-size:40px}.marketTillTarget{grid-template-columns:1fr;justify-items:center;gap:4px}.marketTillTarget>strong{white-space:normal}.marketTillTokens{grid-template-columns:repeat(3,minmax(0,1fr))}.marketToken{min-height:46px}
  .coldControls,.coldGauges{grid-template-columns:1fr 1fr 1fr;gap:4px}.coldControl{min-height:58px}.coldGauge{padding:4px}.coldGaugeCanvas{max-height:44px}
  .textileRatioOptions{grid-template-columns:repeat(2,minmax(0,1fr))}.textileRatio{min-height:52px}
  .recordClassifyWrap{gap:5px}.recordClassifyLead{padding:5px 7px;font-size:10px}.recordClassifyGrid{grid-template-columns:1fr;gap:5px}.recordClassifyCard{padding:6px;gap:5px}.recordClassifyGlyph{font-size:34px}.recordClassifyFact{padding:4px 5px;font-size:9px}.recordClassifyChoice{min-height:36px;padding:3px}
}
@media (max-width:390px){.marketTillTokens{grid-template-columns:repeat(2,minmax(0,1fr))}.marketTillHead .sitelenGlyph{font-size:36px}.marketTillCanvas{max-height:70px}.marketTillTarget .marketTillCanvas{max-height:78px}}
@media (max-height:620px){
  .marketTillWrap,.coldChainWrap,.textileMixerWrap{gap:5px}.marketTillCard{padding:4px}.marketTillHead .sitelenGlyph{font-size:34px}.marketTillCanvas{max-height:58px}.marketTillTarget .marketTillCanvas{max-height:64px}.marketTillTokens{gap:3px}.marketToken{min-height:38px}
  .coldControl{min-height:46px}.coldGaugeCanvas{max-height:38px}.textileFormula{padding:5px}.textileFormula .sitelenGlyph{font-size:32px}.textileRatio{min-height:42px}
  .recordClassifyLead{padding:4px;font-size:9px}.recordClassifyCard{padding:4px;gap:3px}.recordClassifyHead{gap:5px}.recordClassifyGlyph{font-size:28px}.recordClassifyFact{padding:3px 4px;font-size:8px}.recordClassifyChoice{min-height:31px}
}

/* Level 11 — nocturnal wildlife sanctuary / field station. */
.callTriangWrap{display:grid;gap:9px;width:min(100%,690px);justify-items:center;min-width:0}
.callTriangLegend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.callTriangSensor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;padding:6px 8px;border:1px solid rgba(17,17,17,.16);border-radius:9px;background:rgba(255,255,255,.3);min-width:0}
.callTriangSensor>strong{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#111;color:#fff;font:900 12px/1 system-ui,sans-serif}
.callTriangReading{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0;white-space:nowrap}
.callTriangSensor .callTriangDistanceGlyph{font-family:"NasinNanpaGame",sans-serif;font-size:25px;font-weight:400;line-height:1;color:#111;flex:0 0 auto}
.callTriangLatin{font:900 16px/1 system-ui,sans-serif;color:#111;flex:0 0 auto}
.callTriangSensor small{font:800 8px/1 system-ui,sans-serif;color:var(--muted);white-space:nowrap}
.callTriangGrid{display:grid;grid-template-columns:repeat(var(--tri-cols),58px);grid-template-rows:repeat(var(--tri-rows),58px);gap:4px}
.callTriangCell{position:relative;width:58px;height:58px;min-height:58px;padding:0;border-radius:8px;display:grid;place-items:center;font:900 16px/1 system-ui,sans-serif}.callTriangCell.selected{outline:4px solid #111;outline-offset:1px;background:#d8ecd9}.callTriangCell.sensor{background:#ead9b7}.callTriangCell .sitelenGlyph{font-size:27px}.callTriangCoord{position:absolute;right:4px;bottom:3px;font:900 8px/1 system-ui,sans-serif;color:var(--muted);letter-spacing:.04em}
.callTriangNote{font:800 9px/1.25 system-ui,sans-serif;color:var(--muted);text-align:center}

.lineageWrap{display:grid;gap:8px;width:min(100%,760px);min-width:0}
.lineagePairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lineagePair{display:grid;gap:4px;justify-items:center;padding:6px;border:1px solid rgba(17,17,17,.16);border-radius:9px;background:rgba(255,255,255,.28);min-width:0}.lineagePair strong{font:900 10px/1 system-ui,sans-serif}.lineageTraits{display:flex;gap:3px;justify-content:center;align-items:center;min-width:0}.lineageTraits .sitelenGlyph{font-size:25px}
.lineageRows{display:grid;gap:5px}.lineageRow{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:7px;align-items:center;padding:5px 7px;border:1px solid rgba(17,17,17,.14);border-radius:9px;background:rgba(255,255,255,.22);min-width:0}.lineageHatchling{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;min-width:0}.lineageHatchling>strong{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#111;color:#fff;font:900 11px/1 system-ui,sans-serif}.lineageHatchling .lineageTraits{justify-content:flex-start}.lineageUnknown{display:grid;place-items:center;width:25px;height:25px;border:1px dashed rgba(17,17,17,.35);border-radius:5px;font:900 13px/1 system-ui,sans-serif;color:var(--muted)}
.lineageChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.lineageChoice{min-height:40px;padding:3px;font:900 11px/1 system-ui,sans-serif}.lineageChoice.selected{background:#d8ecd9;outline:3px solid #3f784e}
.lineageNote{font:800 9px/1.25 system-ui,sans-serif;color:var(--muted);text-align:center}

.habitatTriageWrap{display:grid;gap:8px;width:min(100%,760px);min-width:0}
.habitatRecords{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.habitatRecord{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start;padding:6px 7px;border:1px solid rgba(17,17,17,.15);border-radius:9px;background:rgba(255,255,255,.28);min-width:0}.habitatRecord .sitelenGlyph{font-size:30px}.habitatRecordCopy{display:grid;gap:2px;min-width:0}.habitatRecordCopy strong{font:900 10px/1 system-ui,sans-serif}.habitatRecordCopy span{font:700 9px/1.2 system-ui,sans-serif;color:var(--muted)}
.habitatSelectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.habitatSelector{display:grid;gap:5px;padding:7px;border:1px solid rgba(17,17,17,.15);border-radius:9px;background:rgba(255,255,255,.22);min-width:0}.habitatSelectorHead{display:flex;align-items:center;justify-content:center;gap:6px;font:900 10px/1 system-ui,sans-serif}.habitatSelectorHead .sitelenGlyph{font-size:31px}.habitatChoiceGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.habitatChoice{min-height:42px;padding:4px;font:900 9px/1.1 system-ui,sans-serif}.habitatChoice.selected{background:#d8ecd9;outline:3px solid #3f784e}
.habitatTriageNote{font:800 9px/1.25 system-ui,sans-serif;color:var(--muted);text-align:center}

@media (pointer:coarse), (max-width:600px){
  .callTriangWrap{gap:6px}.callTriangLegend{gap:3px}.callTriangSensor{padding:4px 5px;gap:4px}.callTriangSensor>strong{width:24px;height:24px}.callTriangReading{gap:4px}.callTriangSensor .callTriangDistanceGlyph{font-size:21px}.callTriangLatin{font-size:14px}.callTriangGrid{grid-template-columns:repeat(var(--tri-cols),48px);grid-template-rows:repeat(var(--tri-rows),48px);gap:3px}.callTriangCell{width:48px;height:48px;min-height:48px}.callTriangCell .sitelenGlyph{font-size:23px}
  .lineageWrap{gap:5px}.lineagePairs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.lineagePair{padding:4px}.lineageTraits .sitelenGlyph{font-size:21px}.lineageRows{gap:3px}.lineageRow{grid-template-columns:minmax(120px,.75fr) minmax(0,1.25fr);gap:4px;padding:4px}.lineageHatchling>strong{width:24px;height:24px}.lineageChoices{gap:3px}.lineageChoice{min-height:34px;padding:2px}
  .habitatTriageWrap{gap:5px}.habitatRecords{gap:4px}.habitatRecord{padding:4px 5px;gap:4px}.habitatRecord .sitelenGlyph{font-size:25px}.habitatRecordCopy span{font-size:8px}.habitatSelectors{gap:4px}.habitatSelector{padding:5px}.habitatSelectorHead .sitelenGlyph{font-size:27px}.habitatChoice{min-height:36px;padding:3px}
}
@media (max-width:390px){
  .callTriangGrid{grid-template-columns:repeat(var(--tri-cols),43px);grid-template-rows:repeat(var(--tri-rows),43px)}.callTriangCell{width:43px;height:43px;min-height:43px}.callTriangCell .sitelenGlyph{font-size:21px}
  .lineageRow{grid-template-columns:1fr;gap:3px}.lineageHatchling{justify-self:center}.lineageChoices{width:100%}
  .habitatSelectors{grid-template-columns:1fr}.habitatRecords{grid-template-columns:repeat(2,minmax(0,1fr))}.habitatRecordCopy span{display:none}
}
@media (max-height:620px){
  .callTriangLegend{gap:2px}.callTriangSensor{padding:2px 4px;gap:3px}.callTriangSensor>strong{width:22px;height:22px;font-size:10px}.callTriangReading{gap:3px}.callTriangSensor .callTriangDistanceGlyph{font-size:19px}.callTriangLatin{font-size:13px}.callTriangSensor small{font-size:7px}.callTriangGrid{grid-template-columns:repeat(var(--tri-cols),42px);grid-template-rows:repeat(var(--tri-rows),42px);gap:2px}.callTriangCell{width:42px;height:42px;min-height:42px}.callTriangCell .sitelenGlyph{font-size:20px}.callTriangNote{display:none}
  .lineagePair{padding:3px}.lineagePair strong{font-size:8px}.lineageTraits .sitelenGlyph{font-size:19px}.lineageRow{padding:3px}.lineageChoice{min-height:30px}.lineageNote{display:none}
  .habitatRecord{padding:3px}.habitatRecord .sitelenGlyph{font-size:22px}.habitatRecordCopy span{display:none}.habitatSelector{padding:3px}.habitatChoice{min-height:30px}.habitatTriageNote{display:none}
}
/* Level 11 markup refinements. */
.callTriangSensor .callTriangDistanceGlyph{font-family:"NasinNanpaGame",sans-serif}
.lineageTrait.unknown{display:grid;place-items:center;width:25px;height:25px;border:1px dashed rgba(17,17,17,.35);border-radius:5px;font:900 13px/1 system-ui,sans-serif;color:var(--muted)}
.habitatRecord{grid-template-columns:1fr}.habitatRecord>strong{font:900 10px/1 system-ui,sans-serif}.habitatRecord ul{margin:0;padding-left:16px;font:700 9px/1.25 system-ui,sans-serif;color:var(--muted)}.habitatSelector>strong{text-align:center;font:900 10px/1 system-ui,sans-serif}
@media (pointer:coarse), (max-width:600px){.callTriangSensor .callTriangDistanceGlyph{font-size:21px}.habitatRecord ul{font-size:8px}}
@media (max-height:620px){.habitatRecord li:nth-child(n+2){display:none}}

/* v0.40: neutral answer selection + explicit Level 11 evidence. */
.lineageChoice.selected,.habitatChoice.selected{background:#e8e1d3;outline:3px solid #111;color:#111}
.lineageEvidence{display:grid;gap:3px;padding:6px 8px;border:1px solid rgba(17,17,17,.18);border-radius:9px;background:rgba(255,255,255,.34);min-width:0}
.lineageEvidence>strong{font:900 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.lineageEvidence ul{margin:0;padding-left:18px;font:750 9px/1.3 system-ui,sans-serif;color:#333}
.habitatRoleBrief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.habitatRoleRule{display:grid;gap:3px;padding:6px 8px;border:1px solid rgba(17,17,17,.18);border-radius:9px;background:rgba(255,255,255,.34);min-width:0}
.habitatRoleRuleHead{display:flex;align-items:center;gap:6px;min-width:0}.habitatRoleRuleHead .sitelenGlyph{font-size:27px}.habitatRoleRuleHead strong{font:900 10px/1 system-ui,sans-serif}.habitatRoleRule>span{font:750 9px/1.25 system-ui,sans-serif;color:#333}
@media (pointer:coarse), (max-width:600px){
  .lineageEvidence{padding:4px 6px}.lineageEvidence ul{font-size:8px;line-height:1.2}
  .habitatRoleBrief{gap:4px}.habitatRoleRule{padding:4px 5px}.habitatRoleRuleHead .sitelenGlyph{font-size:23px}.habitatRoleRule>span{font-size:8px}
}
@media (max-width:390px){.habitatRoleBrief{grid-template-columns:1fr}}
@media (max-height:620px){
  .lineageEvidence{padding:3px 5px;gap:2px}.lineageEvidence>strong{font-size:8px}.lineageEvidence ul{font-size:7px;line-height:1.15}
  .habitatRoleBrief{gap:3px}.habitatRoleRule{padding:3px 4px;gap:2px}.habitatRoleRuleHead .sitelenGlyph{font-size:20px}.habitatRoleRuleHead strong{font-size:8px}.habitatRoleRule>span{font-size:7px;line-height:1.15}
  .habitatRecord ul{font-size:7px;line-height:1.12}.habitatRecord li:nth-child(n+2){display:list-item}
}

/* Level 12 — final medium Sudoku. Keep the entire working board usable in the
   fixed mechanism viewport. Desktop uses a board + side controls layout;
   phones stack controls below a smaller square board. Digit glyphs are never
   stretched and Latin fallbacks remain visible at every breakpoint. */
.sudokuWrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  grid-template-rows:auto minmax(0,1fr);
  gap:6px 12px;
  width:min(100%,610px);
  min-width:0;
  align-items:center;
  justify-items:center;
}
.sudokuLead{
  grid-column:1/-1;
  width:100%;
  font:750 9px/1.2 system-ui,sans-serif;
  color:#3f3a34;
  text-align:center;
}
.sudokuGrid{
  grid-column:1;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  width:min(100%,420px,42dvh);
  aspect-ratio:1/1;
  border:3px solid #171717;
  background:#171717;
  gap:1px;
}
.sudokuCell{position:relative;min-width:0;min-height:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#f8ead0;display:grid;place-items:center;overflow:hidden}
.sudokuCell.given{background:#e2d3b7;color:#111;opacity:1;cursor:default}
.sudokuCell.selected{outline:4px solid #111;outline-offset:-4px;background:#fff4d7}
.sudokuCell.boxRight{border-right:3px solid #171717}.sudokuCell.boxBottom{border-bottom:3px solid #171717}
.sudokuGlyph{font-size:clamp(18px,3.4dvh,33px);line-height:1;display:block;transform:none}
.sudokuLatin{position:absolute;right:2px;bottom:1px;font:900 7px/1 system-ui,sans-serif;color:#4b443b;background:rgba(248,234,208,.82);padding:1px;border-radius:2px}
.sudokuCell.given .sudokuLatin{background:rgba(226,211,183,.86)}
.sudokuNotes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:92%;height:92%;align-items:center;justify-items:center}
.sudokuNotes small{font:800 6px/1 system-ui,sans-serif;color:#514a41}
.sudokuControls{
  grid-column:2;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  width:100%;
  min-width:0;
  align-self:center;
}
.sudokuControls>button{min-height:40px;padding:5px 4px;font-size:12px}
.sudokuMode.active{outline:3px solid #111;background:#e8e1d3}
.sudokuKeypad{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  width:100%;
}
.sudokuKey{min-width:0;min-height:42px;padding:2px;display:grid;place-items:center;gap:0}
.sudokuKey .sitelenGlyph{font-size:20px;line-height:1}.sudokuKey small{font:900 7px/1 system-ui,sans-serif;color:#4b443b}
/* Sudoku-specific modal compaction: its board is the primary content. */
.puzzleCard.puzzleCard--mechanism:has(.sudokuWrap){gap:5px;padding:11px}
.puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>#puzzleInstructions{font-size:14px;line-height:1.18;margin:0}
.puzzleCard.puzzleCard--mechanism:has(.sudokuWrap) .puzzleSlots{gap:4px}
.puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>.overlayButtonRow{gap:6px}
.puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>.overlayButtonRow button{min-height:42px;padding:6px 10px}

@media (pointer:coarse), (max-width:600px){
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap){padding:7px;gap:3px}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>#puzzleInstructions{font-size:11px;line-height:1.15;max-height:3.45em;overflow:hidden}
  .sudokuWrap{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:4px;width:100%}
  .sudokuLead{grid-column:1;font-size:8px;line-height:1.15}
  .sudokuGrid{grid-column:1;width:min(calc(100vw - 34px),340px,39dvh)}
  .sudokuGlyph{font-size:clamp(16px,6vw,27px)}.sudokuLatin{font-size:6px;right:1px;bottom:1px}.sudokuNotes small{font-size:5.5px}
  .sudokuControls{grid-column:1;grid-template-columns:1fr 1fr;gap:4px;width:min(100%,340px)}
  .sudokuControls>button{min-height:34px;padding:3px 4px;font-size:11px}
  .sudokuKeypad{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .sudokuKey{min-height:38px;padding:1px}.sudokuKey .sitelenGlyph{font-size:18px}.sudokuKey small{font-size:6px}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>.overlayButtonRow{gap:4px}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>.overlayButtonRow button{min-height:40px;padding:4px 5px;font-size:12px}
}
@media (max-width:390px){
  .sudokuGrid{width:min(calc(100vw - 30px),320px,38dvh)}
  .sudokuControls{width:min(100%,320px)}
  .sudokuGlyph{font-size:clamp(15px,5.7vw,24px)}
}
@media (max-height:760px){
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap){padding:7px;gap:3px}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>.overlayEyebrow{display:none}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>h2{font-size:17px;line-height:1.05}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>#puzzleInstructions{font-size:10.5px;line-height:1.12;max-height:2.3em;overflow:hidden}
  .sudokuLead{display:none}
  .sudokuGrid{width:min(100%,330px,37dvh)}
  .sudokuControls{gap:3px}.sudokuControls>button{min-height:32px}
  .sudokuKeypad{gap:2px}.sudokuKey{min-height:32px}.sudokuKey .sitelenGlyph{font-size:16px}.sudokuKey small{font-size:6px}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap) .puzzleStatus{font-size:9px;line-height:1.1;min-height:1.1em}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap)>.overlayButtonRow button{min-height:36px;font-size:11px}
}
@media (max-height:620px){
  .sudokuGrid{width:min(100%,260px,35dvh)}
  .sudokuControls{gap:3px}
  .sudokuControls>button{min-height:28px;font-size:10px}
  .sudokuKey{min-height:28px;padding:1px}.sudokuKey .sitelenGlyph{font-size:14px}.sudokuKey small{font-size:5.5px}
  .puzzleCard.puzzleCard--mechanism:has(.sudokuWrap) .puzzleStatus{display:none}
}
.dualMirrorBeam.beam3{stroke:#2f7b59;stroke-dasharray:4 7}


/* v0.66 mobile puzzle-fit pass.
   Spatial puzzle boards are deliberately smaller on phones so the complete
   mechanism remains inside the fixed puzzle popup. Desktop dimensions remain
   unchanged. The data-puzzle-type attribute lets future puzzle-specific
   mobile tuning stay visual-only rather than changing puzzle logic. */
@media (pointer: coarse), (max-width: 600px) {
  .puzzleCard.puzzleCard--map {
    padding: 7px;
    gap: 2px;
  }
  .puzzleCard.puzzleCard--map > h2 { font-size: 16px; }
  .puzzleCard.puzzleCard--map > #puzzleInstructions { font-size: 11px; line-height: 1.14; }
  .coordinatePuzzleCanvas { width: min(100%, 280px); max-height: 52px; }
  .coordinateMapGrid { width: min(100%, 38dvh, 285px); }
  .puzzleCard.puzzleCard--map > .overlayButtonRow button:not([hidden]) { min-height: 40px; }

  .puzzleCard.puzzleCard--mechanism {
    padding: 7px;
    gap: 3px;
  }
  .puzzleCard.puzzleCard--mechanism > h2 { font-size: 17px; line-height: 1.06; }
  .puzzleCard.puzzleCard--mechanism > #puzzleInstructions { font-size: 11.5px; line-height: 1.15; }
  .puzzleCard.puzzleCard--mechanism .puzzleSlots { gap: 5px; }
  .puzzleCard.puzzleCard--mechanism > .overlayButtonRow { gap: 4px; }
  .puzzleCard.puzzleCard--mechanism > .overlayButtonRow button { min-height: 40px; padding: 5px 7px; }
  .puzzleCard.puzzleCard--mechanism .puzzleStatus { font-size: 10px; line-height: 1.15; }

  /* L3: route/pipe board and other square mechanisms. */
  .puzzleCard[data-puzzle-type="route-board"] .routeBoardWrap { width: min(100%, 250px); }
  .puzzleCard[data-puzzle-type="route-board"] .routeBoard { width: min(100%, 34dvh, 235px); gap: 3px; }
  .puzzleCard[data-puzzle-type="route-board"] .routeTile { font-size: clamp(30px, 10vw, 36px); }
  .puzzleCard[data-puzzle-type="path-grid"] .pathGrid { width: min(100%, 35dvh, 245px); }
  .puzzleCard[data-puzzle-type="lights-out"] .lightsGrid { width: min(100%, 34dvh, 225px); }

  /* L4-L5: keep board-style mechanisms comfortably inside the popup. */
  .sokobanGrid { grid-template-columns: repeat(var(--soko-cols), 36px); }
  .sokobanCell { width: 36px; height: 36px; }
  .sokobanControls { grid-template-columns: repeat(4, 44px); }
  .sokobanControls button { width: 44px; height: 38px; min-height: 38px; }
  .slidingGrid { grid-template-columns: repeat(var(--slide-cols), 62px); gap: 5px; }
  .slidingTile { width: 62px; height: 62px; min-height: 62px; }
  .slidingTile .sitelenGlyph { font-size: 31px; }
  .pegLine { grid-template-columns: repeat(8, 38px); gap: 3px; }
  .pegHole { width: 38px; height: 38px; min-height: 38px; font-size: 20px; }
  .patternPanel { grid-template-columns: repeat(var(--pattern-cols), 15px); gap: 2px; padding: 4px; }
  .patternCell { width: 15px; height: 15px; }
  .patternQuestion { width: 58px; height: 58px; }
  .nonogramWrap { --nonogram-cell: 34px; grid-template-columns: minmax(52px, auto) auto; gap: 3px; }
  .nonogramClue.vertical { min-height: 46px; }
  .nonogramClueNumber { font-size: 18px; }

  /* L6-L7: compact high-density boards while preserving their clues. */
  .cardSortCanvas { width: 68px; height: 96px; }
  .airflowGrid { grid-template-columns: repeat(var(--air-cols), 46px); gap: 3px; }
  .airflowTile { width: 46px; height: 46px; min-height: 46px; font-size: 29px; }
  .pulseLane { grid-template-columns: 86px minmax(0, 1fr); gap: 4px; }
  .powerBreaker { min-height: 60px; }

  /* L8: mirror boards and path grids were still too large on phones. */
  .dualMirrorBoard { grid-template-columns: repeat(var(--mirror-cols), 40px); grid-template-rows: repeat(var(--mirror-rows), 40px); }
  .dualMirrorCell { width: 40px; height: 40px; }
  .dualMirrorMirror { font-size: 26px; }
  .dualMirrorLegend { font-size: 8.5px; }
  .exactPathGrid { grid-template-columns: repeat(var(--path-cols), 44px); gap: 3px; }
  .exactPathCell { width: 44px; height: 44px; min-height: 44px; }
  .exactPathValue { font-size: 23px; }

  /* L9-L11: dense multi-cell mechanisms. */
  .layerAlignGrid { grid-template-columns: repeat(var(--layer-size), 24px); grid-template-rows: repeat(var(--layer-size), 24px); }
  .layerAlignCell { width: 24px; height: 24px; }
  .layerMarker { width: 16px; height: 16px; font-size: 8px; }
  .callTriangGrid { grid-template-columns: repeat(var(--tri-cols), 42px); grid-template-rows: repeat(var(--tri-rows), 42px); gap: 2px; }
  .callTriangCell { width: 42px; height: 42px; min-height: 42px; }
  .callTriangCell .sitelenGlyph { font-size: 20px; }

  /* L12: retain the entire final board and controls without stretching glyphs. */
  .sudokuGrid { width: min(calc(100vw - 34px), 310px, 35dvh); }
  .sudokuControls { width: min(100%, 310px); }
}

/* Short-phone refinement: shrink spatial boards again rather than clipping the
   puzzle popup. This is visual only; puzzle state, answers and hit logic are unchanged. */
@media (max-height: 620px) and (pointer: coarse), (max-height: 620px) and (max-width: 760px) {
  .coordinatePuzzleCanvas { max-height: 40px; }
  .coordinateMapGrid { width: min(100%, 34dvh, 225px); }
  .puzzleCard[data-puzzle-type="route-board"] .routeBoard { width: min(100%, 31dvh, 205px); }
  .puzzleCard[data-puzzle-type="path-grid"] .pathGrid { width: min(100%, 31dvh, 215px); }
  .puzzleCard[data-puzzle-type="lights-out"] .lightsGrid { width: min(100%, 30dvh, 195px); }
  .airflowGrid { grid-template-columns: repeat(var(--air-cols), 41px); }
  .airflowTile { width: 41px; height: 41px; min-height: 41px; font-size: 26px; }
  .dualMirrorBoard { grid-template-columns: repeat(var(--mirror-cols), 36px); grid-template-rows: repeat(var(--mirror-rows), 36px); }
  .dualMirrorCell { width: 36px; height: 36px; }
  .dualMirrorMirror { font-size: 24px; }
  .exactPathGrid { grid-template-columns: repeat(var(--path-cols), 40px); }
  .exactPathCell { width: 40px; height: 40px; min-height: 40px; }
  .callTriangGrid { grid-template-columns: repeat(var(--tri-cols), 38px); grid-template-rows: repeat(var(--tri-rows), 38px); }
  .callTriangCell { width: 38px; height: 38px; min-height: 38px; }
  .nonogramWrap { --nonogram-cell: 31px; grid-template-columns: minmax(48px, auto) auto; }
  .sudokuGrid { width: min(100%, 245px, 32dvh); }
}

/* v0.68 bilingual Toki Pona / English presentation */
.pageTitleBlock { min-width: 0; }
.languageControl {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  flex: 0 0 auto;
}
.languageControl label { color: var(--muted); }
.languageControl select {
  min-height: 32px;
  padding: 4px 28px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: #111;
  font: 700 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Toki Pona prose is passed to the existing nasin nanpa font, whose ligatures
   provide sitelen pona. Semantic [[...]] terms that are themselves Toki Pona
   also stay in sitelen pona; only genuine literal labels/keys remain Latin. */
.tpSplitWords{display:inline-flex!important;align-items:center;gap:.32em;white-space:nowrap;}
.tpSplitWords>span{display:inline-block;}
.tpProse {
  font-family: "NasinNanpaGame", sans-serif !important;
  font-variant-ligatures: normal !important;
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1 !important;
  /* TP sitelen-pona source must never inherit English all-caps/tracking styles. */
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tpProse .tpLiteral,
.tpLiteral {
  display: inline-block;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-variant-ligatures: none !important;
  font-feature-settings: normal !important;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  padding: 0 .04em;
}
.tpProse .tpNumeric,
.tpNumeric {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: "NasinNanpaGame", sans-serif !important;
  font-variant-ligatures: normal !important;
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1 !important;
  letter-spacing: 0;
  line-height: 1.08;
  vertical-align: -0.12em;
  margin: 0 .06em;
  min-height: 1.15em;
}
.tpNumericCanvas {
  display: block;
  height: 1.32em;
  width: auto;
  max-width: none;
}
.tpNumeric--fallback {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-variant-ligatures: none !important;
  font-feature-settings: normal !important;
  font-weight: 700;
  vertical-align: 0;
}
.tpNumeric--fallback::after { display:none !important; }
.mechanismClue .tpLiteral { margin: 0 .12em; }
.mechanismClue .tpNumeric { margin: 0 .12em; }
.mechanismClue .tpNumeric::after { margin-left: .34em; }

.tpNumeric::after {
  content: attr(data-latin);
  display: inline-block;
  margin-left: .24em;
  vertical-align: .16em;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-variant-ligatures: none !important;
  font-feature-settings: normal !important;
  font-size: .58em;
  font-weight: 700;
  line-height: 1;
  opacity: .72;
}

.tpProse .tpTerm,
.tpTerm {
  display: inline-block;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-variant-ligatures: none !important;
  font-feature-settings: normal !important;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.15;
  padding: .04em .22em;
  margin: 0 .03em;
  border-radius: .28em;
  background: rgba(17,17,17,.07);
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.10);
}

.tpProse .tpTerm.tpTermSitelen,
.tpTerm.tpTermSitelen {
  font-family: "NasinNanpaGame", sans-serif !important;
  font-variant-ligatures: normal !important;
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1 !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
  padding: .02em .14em;
}

/* Keep language names themselves readable in Latin even while the page is in
   sitelen pona mode. */
.languageControl,
.languageControl * { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important; }

@media (max-width: 620px) {
  .pageHeadingRow { flex-wrap: wrap; }
  .pageTitleBlock { flex: 1 1 calc(100% - 42px); }
  .languageControl { width: 100%; justify-content: flex-end; margin-top: 2px; }
}

/* v0.75 numeric-display audit: outside Sudoku, Toki Pona mechanism values use
   explicit abbreviated Nanpa-format cartouches.  Compact mechanism surfaces
   scale the cartouche rather than falling back to bare digit glyphs. */
.dialValue .tpNumeric{font-size:20px;margin:0;line-height:1}
.dialValue .tpNumeric::after{display:block;margin:.16em 0 0;font-size:.48em;text-align:center}
.balanceWeight .tpNumeric{font-size:20px;margin:0;line-height:1}
.balanceWeight .tpNumeric::after{display:block;margin:.16em 0 0;font-size:.48em;text-align:center}
.jugTargetValue .tpNumeric{font-size:24px;margin:0}
.jugReadoutCartouche .tpNumeric{font-size:17px;margin:0;line-height:1;max-width:100%;justify-content:center;text-shadow:0 1px rgba(255,255,255,.75)}
.jugReadoutCartouche .tpNumeric::after{display:none}
.jugReadoutCartouche .tpNumericCanvas{height:1.08em;max-width:100%;width:auto}
.hanoiDisk .tpNumeric{font-size:14px;margin:0;line-height:1}
.hanoiDisk .tpNumeric::after{font-size:.45em;margin-left:.12em}
.hanoiNanpaNumber .tpNumeric::after{display:none}
.hanoiNanpaNumber>.tpNumeric>.tpNumericCanvas{max-width:100%;max-height:1.45em}
.scheduleRank .tpNumeric{font-size:10px;margin:0;line-height:1}
.scheduleRank .tpNumeric::after{display:block;margin:.12em 0 0;font-size:.52em;text-align:center}
.slidingTile .tpNumeric{font-size:25px;margin:0;line-height:1}
.slidingTile .tpNumeric::after{display:block;margin:.15em 0 0;font-size:.44em;text-align:center}
.nonogramClueNumber .tpNumeric{font-size:15px;margin:0;line-height:1}
.nonogramClueNumber .tpNumeric::after{font-size:.42em;margin-left:.1em}
.tonePadNumber .tpNumeric{font-size:21px;margin:0;line-height:1}
.tonePadNumber .tpNumeric::after{display:block;margin:.12em 0 0;font-size:.45em;text-align:center}
.pulseLaneLabel .tpNumeric{font-size:11px;margin:0;line-height:1}
.pulseLaneLabel .tpNumeric::after{display:block;margin:.08em 0 0;font-size:.52em;text-align:center}
.deductionSlot .tpNumeric{font-size:7px;margin:0;line-height:1}
.deductionSlot .tpNumeric::after{display:none}
.truthBit .tpNumeric{font-size:14px;margin:0;line-height:1}
.truthBit .tpNumeric::after{font-size:.45em;margin-left:.12em}
.exactPathStep .tpNumeric{font-size:6px;margin:0;line-height:1}
.exactPathStep .tpNumeric::after{display:none}
.exactPathValue .tpNumeric{font-size:15px;margin:0;line-height:1}
.exactPathValue .tpNumeric::after{display:block;margin:.1em 0 0;font-size:.42em;text-align:center}
.coupledLamp .tpNumeric{font-size:9px;margin:0;line-height:1;color:inherit}
.coupledLamp .tpNumeric::after{display:none}
.coupledLeverNumber .tpNumeric{font-size:16px;margin:0;line-height:1}
.coupledLeverNumber .tpNumeric::after{display:block;margin:.1em 0 0;font-size:.42em;text-align:center}
.callTriangDistanceGlyph .tpNumeric{font-size:16px;margin:0;line-height:1}
.callTriangDistanceGlyph .tpNumeric::after{font-size:.48em;margin-left:.15em}
.marketToken .tpNumeric{font-size:16px;margin:0;line-height:1}
.marketToken .tpNumeric::after{display:block;margin:.12em 0 0;font-size:.46em;text-align:center}
.textileRatio{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.textileRatioNumber .tpNumeric{font-size:14px;margin:0;line-height:1}
.textileRatioNumber .tpNumeric::after{font-size:.45em;margin-left:.1em}
.coldControl .tpNumeric{font-size:12px;margin:0;line-height:1}
.coldControl .tpNumeric::after{font-size:.48em;margin-left:.12em}

@media (max-width:700px), (max-height:620px){
  .dialValue .tpNumeric,.balanceWeight .tpNumeric{font-size:17px}
  .jugTargetValue .tpNumeric{font-size:20px}.jugReadoutCartouche .tpNumeric{font-size:13px}.jugReadoutLatin{font-size:9px}
  .hanoiDisk .tpNumeric{font-size:11px}.slidingTile .tpNumeric{font-size:20px}
  .nonogramClueNumber .tpNumeric{font-size:12px}.tonePadNumber .tpNumeric{font-size:17px}
  .truthBit .tpNumeric{font-size:12px}.exactPathValue .tpNumeric{font-size:12px}
  .coupledLeverNumber .tpNumeric{font-size:13px}.callTriangDistanceGlyph .tpNumeric{font-size:13px}
  .textileRatioNumber .tpNumeric{font-size:12px}
}


/* v0.80 numeric-control fit: renderer-backed mechanism cartouches must fit
   inside the control that owns them. The renderer canvas has an intrinsic
   width based on its source; do not let that intrinsic width expand a tile.
   Latin fallbacks sit below the cartouche, never beside it, so all values in
   one puzzle keep the same cartouche scale and stay inside their controls. */
.mechanismNumberHost{min-width:0;box-sizing:border-box}
.mechanismNumberHost>.tpNumeric{
  max-width:100%;
  min-width:0;
  margin:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.08em;
  overflow:hidden;
  box-sizing:border-box;
}
.mechanismNumberHost>.tpNumeric>.tpNumericCanvas{
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100% - 4px);
  max-height:1.32em;
  object-fit:contain;
  flex:0 1 auto;
}
.mechanismNumberHost>.tpNumeric::after{
  flex:0 0 auto;
  margin:.06em 0 0 !important;
  line-height:1;
  text-align:center;
}

/* A sliding-number tile is deliberately a compact square. Reserve padding for
   the rounded border and make every one-digit cartouche use the same available
   box. This prevents the Level 5 cartouches/fallbacks from crossing tile edges. */
.slidingTile.mechanismNumberHost{padding:7px 6px;overflow:hidden}
.slidingTile.mechanismNumberHost>.tpNumeric{width:100%;height:100%;justify-content:center}
.slidingTile.mechanismNumberHost>.tpNumeric>.tpNumericCanvas{max-width:100%;max-height:32px}
.slidingTile.mechanismNumberHost>.tpNumeric::after{font-size:10px;margin-top:4px !important}
@media (max-width:700px){
  .slidingTile.mechanismNumberHost{padding:5px 4px}
  .slidingTile.mechanismNumberHost>.tpNumeric>.tpNumericCanvas{max-height:25px}
  .slidingTile.mechanismNumberHost>.tpNumeric::after{font-size:9px;margin-top:2px !important}
}
@media (max-height:620px){
  .slidingTile.mechanismNumberHost{padding:4px 3px}
  .slidingTile.mechanismNumberHost>.tpNumeric>.tpNumericCanvas{max-height:22px}
  .slidingTile.mechanismNumberHost>.tpNumeric::after{font-size:8px;margin-top:2px !important}
}

/* Tight mechanism surfaces use the same preservation rule. Their existing
   font-size declarations still choose the visual hierarchy; this only prevents
   the renderer canvas/fallback pair from escaping the available box. */
.dialValue.mechanismNumberHost,.balanceWeight.mechanismNumberHost,.hanoiDisk.mechanismNumberHost,
.scheduleRank.mechanismNumberHost,.tonePadNumber.mechanismNumberHost,.pulseLaneLabel.mechanismNumberHost,
.deductionSlot.mechanismNumberHost,.truthBit.mechanismNumberHost,.exactPathStep.mechanismNumberHost,
.exactPathValue.mechanismNumberHost,.coupledLamp.mechanismNumberHost,.coupledLeverNumber.mechanismNumberHost,
.callTriangDistanceGlyph.mechanismNumberHost,.marketToken.mechanismNumberHost,.textileRatioNumber.mechanismNumberHost,
.coldControl.mechanismNumberHost,.jugTargetValue.mechanismNumberHost,.jugReadoutCartouche.mechanismNumberHost{
  overflow:hidden;
}

/* v0.78: a level indicator is semantic `ma musi`/`Level` outside one dedicated
   Nanpa-format number cartouche.  Keep the ordinary decimal as a small fallback
   beside that cartouche; never create a second inline numeric cartouche here. */
.levelIntroNumberRow{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%;margin:0 auto}
.levelIntroNumberRow #levelIntroCartouche{display:block;max-width:min(420px,78vw);height:auto}
.levelIntroLatinNumber{font:700 18px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted);flex:0 0 auto}
@media (max-width:520px){.levelIntroNumberRow{gap:6px}.levelIntroNumberRow #levelIntroCartouche{max-width:min(360px,76vw)}.levelIntroLatinNumber{font-size:16px}}


/* v0.79: the Toki Pona level label must remain lowercase so the nasin-nanpa
   ligatures can turn `ma musi` into its two sitelen pona glyphs. The generic
   eyebrow style uppercases text, which breaks those ligatures. */
#levelIntroEyebrow.tpProse{
  text-transform:none;
  letter-spacing:0;
  font-size:18px;
  line-height:1.1;
}

/* Short landscape mobile: puzzle rewards must not become a tall blocking card.
   The recovered sitelen is still prominent, but scales with viewport height. */
@media (max-height: 520px) and (pointer: coarse), (max-height: 520px) and (max-width: 760px) {
  #glyphPopup.overlayScreen { padding: 6px; }
  .glyphRewardCard {
    width: min(460px, 100%);
    max-height: calc(100dvh - 12px);
    padding: 8px 12px;
    overflow: auto;
  }
  .glyphRewardCard .overlayEyebrow { font-size: 9px; }
  .glyphRewardCard .rewardGlyph {
    font-size: clamp(48px, 16dvh, 66px);
    line-height: .95;
    margin: 1px 0 0;
  }
  .glyphRewardCard h2 { margin: 1px 0 3px; font-size: 16px; line-height: 1.05; }
  .glyphRewardCard p { margin: 2px 0 4px; font-size: 11px; line-height: 1.15; }
  .glyphRewardCard .overlayProgress { margin: 3px 0 5px; font-size: 11px; line-height: 1.1; }
  .glyphRewardCard button { min-width: 132px; min-height: 34px; padding: 5px 10px; font-size: 12px; }
}

/* QA playback controls exist only when game-engine.html?qa=1 installs them. */
.qaPanel {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 20px);
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 8px;
  background: rgba(0,0,0,.88);
  color: #fff;
  font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-shadow: 0 2px 8px rgba(0,0,0,.32);
  touch-action: manipulation;
  pointer-events: auto;
}
.qaPanel button { pointer-events: auto; }
/* Ignore hides QA controls on every input class. Touch keeps its legacy class too,
   but laptop/fine-pointer concealment must not depend on (pointer: coarse). */
.qaPanel--concealed,
.qaPanel--touchConcealed { display: none !important; }
/* Normal HUD is intentionally click-through. In ?qa=1 only the level badge becomes
   a desktop reveal target; the JS installer adds this class only in QA mode. */
#hudLevel.qaLevelRevealTarget { pointer-events: auto; cursor: pointer; user-select: none; }
.qaStatusText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qaControls { display: inline-flex; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.qaMiniButton {
  min-width: 34px;
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font: 800 12px/1 system-ui, sans-serif;
  touch-action: manipulation;
}
.qaMiniButton:hover { background: rgba(255,255,255,.22); }
.qaIgnoreButton { min-width: 54px; font-size: 10px; }
/* QA-only double-tap target: anchored to the game viewport, not the page/screen. */
.qaHotspot {
  position: absolute;
  z-index: 10049;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  background: transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}
@media (pointer:coarse) {
  .qaMiniButton { min-width: 40px; min-height: 40px; }
  .qaHotspot { pointer-events: auto; }
}
/* On short landscape phones, the revealed QA controls form a single full-width
   row inside the game display. All P/R/N/B/S, speed/dismiss and X buttons remain
   visible at once without summoning a keyboard. */
@media (pointer:coarse) and (max-height:520px) and (orientation:landscape) {
  .qaPanel.qaPanel--touchOpen {
    left: 4px;
    right: 4px;
    top: 4px;
    bottom: auto;
    max-width: none;
    width: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 3px;
    padding: 4px;
    border-radius: 7px;
  }
  .qaPanel.qaPanel--touchOpen .qaStatusText {
    max-width: none;
    width: 100%;
    padding: 0 2px;
    font-size: 9px;
    line-height: 1.05;
    text-align: center;
  }
  .qaPanel.qaPanel--touchOpen .qaControls {
    display: grid;
    grid-template-columns: repeat(9,minmax(0,1fr));
    gap: 3px;
    width: 100%;
    max-width: none;
  }
  .qaPanel.qaPanel--touchOpen .qaMiniButton {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 2px 3px;
    font-size: 11px;
  }
  .qaPanel.qaPanel--touchOpen .qaIgnoreButton { font-size: 9px; }
  .qaHotspot { width: 48px; height: 48px; }
  /* Keep solved-maze quick exit beside, rather than on top of, the USE button. */
  .mazeQuickExitBtn {
    top: auto;
    right: 98px;
    bottom: 20px;
    min-width: 100px;
    min-height: 48px;
    max-width: calc(100% - 210px);
    padding: 6px 9px;
  }
}
@media (pointer:coarse) and (max-width:520px) {
  .qaPanel.qaPanel--touchOpen .qaControls { grid-template-columns: repeat(4,minmax(0,1fr)); }
}


/* v0.99 fixed glyph-display mechanisms: these puzzle surfaces are themselves
   nanpa-linja-n artefacts, so they use bare digit glyphs in every UI language. */
.bareNanpaDigits{
  font-family:"NasinNanpaGame",sans-serif !important;
  font-variant-ligatures:normal !important;
  font-feature-settings:"liga" 1,"dlig" 1,"calt" 1 !important;
  line-height:1;
}
.dialValue.bareNanpaDigits{font-size:42px}
.slidingTile.bareNanpaDigits{font-size:43px}
.exactPathStep.bareNanpaDigits{font-size:11px}
.exactPathValue.bareNanpaDigits{font-size:31px}
.tonePadNumber.bareNanpaDigits{font-size:40px}
@media (pointer:coarse), (max-width:600px){
  .dialValue.bareNanpaDigits{font-size:34px}
  .slidingTile.bareNanpaDigits{font-size:34px}
  .exactPathValue.bareNanpaDigits{font-size:27px}
  .tonePadNumber.bareNanpaDigits{font-size:31px}
}
@media (max-height:620px){
  .slidingTile.bareNanpaDigits{font-size:30px}
  .exactPathValue.bareNanpaDigits{font-size:24px}
  .tonePadNumber.bareNanpaDigits{font-size:28px}
}
/* Four-disk Hanoi must remain completely visible on short landscape phones. */
@media (max-height:520px){
  .hanoiBoard{height:138px}
  .hanoiRod{padding-bottom:17px}
  .hanoiPost{bottom:25px;top:9px;width:5px}
  .hanoiBase{bottom:21px;height:6px}
  .hanoiStack{bottom:27px;gap:2px}
  .hanoiDisk{height:22px;border-radius:9px}
  .hanoiDisk .sitelenGlyph{font-size:15px}
  .hanoiRod small{bottom:3px;font-size:9px}
  .hanoiMoves{font-size:10px}
}

/* v0.108/v0.109 — mobile-landscape contract.
   The game and every fullscreen puzzle must be playable without page/popup
   scrolling on a short landscape phone. v0.109 reserves the live input and
   action docks and scales only the actual puzzle display surface when explicit
   compact layouts still exceed the remaining real card area. */
.sudokuFocus{display:none}
.puzzleSlots.mobileLandscapeAutoFit{
  overflow:visible!important;
  transform:translate(var(--mobile-puzzle-fit-shift-x,0px),var(--mobile-puzzle-fit-shift-y,0px)) scale(var(--mobile-puzzle-fit-scale,1));
  transform-origin:top left;
  will-change:transform;
}

/* v0.134 — laptop/fine-pointer puzzle containment. Desktop puzzle cards can be
   height-bounded too; scale/reposition only the puzzle surface so external edge
   labels, bottom rows and dense controls remain fully visible without scrolling. */
.puzzleSlots.laptopPuzzleAutoFit{
  overflow:visible!important;
  transform:translate(var(--laptop-puzzle-fit-shift-x,0px),var(--laptop-puzzle-fit-shift-y,0px)) scale(var(--laptop-puzzle-fit-scale,1));
  transform-origin:top left;
  will-change:transform;
}

@media (pointer:fine) and (min-width:601px){
  /* Both mirror puzzles share this safer desktop size. L12's 7x7 board retains
     room for the N/S edge labels; L8's 5x5 board remains comfortably legible. */
  .puzzleCard[data-puzzle-type="dual-mirror"] .dualMirrorBoard{
    grid-template-columns:repeat(var(--mirror-cols),56px);
    grid-template-rows:repeat(var(--mirror-rows),56px);
  }
  .puzzleCard[data-puzzle-type="dual-mirror"] .dualMirrorCell{width:56px;height:56px}
  .puzzleCard[data-puzzle-type="dual-mirror"] .dualMirrorMirror{font-size:37px}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  /* The physical screen is NOT treated as the game area. Reserve real space for
     the compact heading and status strip and make the first-person viewport use
     only what remains. This removes page scrolling in landscape. */
  html,body{width:100%;height:100%;min-height:0;overflow:hidden}
  body{margin:0}
  main.card{
    position:fixed;inset:0;margin:0!important;
    width:100vw;height:100dvh;max-width:none;min-height:0;
    padding:3px 4px;border-radius:0;overflow:hidden;
    display:grid;grid-template-rows:28px minmax(0,1fr);gap:2px;
  }
  .pageHeadingRow{height:28px;min-height:28px;align-items:center;gap:4px;overflow:hidden}
  .pageTitleBlock,.introHelp,.fieldNotes{display:none!important}
  .pageHomeLink{width:26px;height:26px;margin:0}
  /* Keep every player-facing game control reachable in landscape. The normal
     controls section becomes a compact toolbar in the reserved heading strip
     instead of consuming/scrolled-off page height. */
  .controlsPanel{
    display:block!important;position:fixed;left:34px;right:138px;top:3px;z-index:25;
    height:26px;margin:0!important;padding:0!important;border:0!important;
    border-radius:0!important;background:transparent!important;overflow:hidden;
  }
  .controlsHeadingRow{display:block!important;height:26px;margin:0!important}
  .controlsHeadingRow>h2,.controlLegend,.controlsPanel>.help{display:none!important}
  .actionButtons{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px!important;height:26px}
  .actionButtons button{
    min-width:0!important;min-height:26px!important;height:26px!important;
    padding:1px 3px!important;font-size:8px!important;line-height:1!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .languageControl{margin-left:auto;gap:4px;font-size:9px}
  .languageControl select{min-height:26px;height:26px;padding:2px 24px 2px 6px;font-size:10px}
  .gameFrame{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 44px;overflow:hidden}
  .viewportWrap{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto}
  .gameStatusGrid{height:44px;min-height:44px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);overflow:hidden}
  .statusBlock{min-height:0;padding:3px 6px;overflow:hidden}
  .statusBlock + .statusBlock{border-left:1px solid var(--border);border-top:0}
  .statusLabel{margin-bottom:1px;font-size:7px;line-height:1;white-space:nowrap}
  .statusBlock strong{font-size:10px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .statusSecondary{font-size:8px;line-height:1.05;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .viewportWrap{--mobile-joystick-size:clamp(108px,19vw,128px)}
  .mobileUseBtn{right:10px;bottom:10px;width:60px;height:60px;font-size:11px}
  .mobileUseBtn.tpProse{font-size:31px}
  #miniMap{width:clamp(86px,18%,112px);top:6px;right:6px}
  .hudTop{top:5px;left:6px;right:118px;gap:3px}
  .hudTop span{font-size:8px;padding:2px 4px}
  .interactionPrompt{bottom:calc(var(--mobile-joystick-size) + 10px);font-size:10px;max-width:60%}

  /* Puzzle cards deliberately fit a smaller budget than the full screen. The
     overlay can cover the page, but its content must fit within the usable game
     region rather than assuming every CSS pixel belongs to the puzzle. */
  #puzzleOverlay.overlayScreen{padding:3px 5px}
  .puzzleCard{
    width:min(760px,calc(100vw - 10px));
    max-height:min(calc(100dvh - 48px),330px)!important;
    overflow:hidden!important;
    padding:5px 7px!important;
    gap:2px!important;
  }
  .puzzleCard.puzzleCard--mechanism,
  .puzzleCard.puzzleCard--map,
  .puzzleCard.puzzleCard--keys{
    height:min(calc(100dvh - 48px),330px)!important;
    max-height:min(calc(100dvh - 48px),330px)!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
  }
  .puzzleCard>.overlayEyebrow{display:none!important}
  .puzzleCard>h2{margin:0!important;font-size:14px!important;line-height:1.03!important}
  .puzzleCard>#puzzleInstructions{
    margin:0!important;
    max-height:none!important;overflow:visible!important;
    white-space:normal!important;text-overflow:clip!important;
    font-size:9px!important;line-height:1.06!important;
  }
  /* The puzzle display, optional live cartouche and glyph picker are separate rows.
     Only the first row is flexible. The picker and action buttons are reserved UI. */
  .puzzleCard .puzzleBody{
    min-height:0;overflow:hidden;align-content:stretch;gap:2px;
    display:grid;grid-template-rows:minmax(0,1fr) auto auto;
  }
  .puzzleCard .puzzleSlots{
    min-width:0;max-width:100%;box-sizing:border-box;
    min-height:0;height:100%;gap:3px;padding:4px 0 1px;overflow:hidden;
    align-content:flex-start!important;
  }
  .puzzleCard .puzzleSlots>*{min-width:0;max-width:100%;box-sizing:border-box}
  .puzzleCard--mechanism .puzzleSlots button{min-width:0;box-sizing:border-box}
  .puzzleCard .puzzleLiveCartoucheWrap[hidden],
  .puzzleCard .puzzleTrayWrap[hidden]{display:none!important}
  .puzzleCard>.puzzleStatus{display:none!important}
  .puzzleCard>.overlayButtonRow{
    gap:3px!important;flex-wrap:nowrap!important;position:relative;z-index:4;
    background:var(--bg);border-top:1px solid rgba(17,17,17,.14);padding-top:1px;
  }
  .puzzleCard>.overlayButtonRow button{
    flex:1 1 0;min-width:0!important;min-height:26px!important;height:26px!important;
    padding:1px 5px!important;font-size:9px!important;line-height:1!important;
  }

  /* Glyph-key controls must fit too: no horizontal family scroller and no
     scrollable drawer in landscape. All available letter families share one row;
     the active family keys wrap into the bounded drawer. */
  .puzzleCard .puzzleTrayWrap{position:relative;z-index:3;background:var(--bg);padding-top:2px;border-top:1px solid rgba(17,17,17,.12)}
  .puzzleFamilyRow{
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(26px,1fr))!important;
    grid-template-rows:28px!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;
    width:100%;height:28px!important;gap:2px!important;overflow:hidden!important;padding:0!important;
  }
  .puzzleFamilyKey{width:auto!important;min-width:0!important;height:28px!important;min-height:28px!important;padding:1px 2px!important;font-size:10px!important}
  .puzzleGlyphDrawer{max-height:150px!important;padding:4px 5px!important;overflow:hidden!important;background:rgba(250,236,215,.68)!important}
  .puzzleGlyphDrawerHeader{min-height:24px!important;padding-bottom:2px!important}
  .puzzleGlyphDrawerClose{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}
  .puzzleGlyphDrawerFamilies{grid-template-columns:repeat(14,minmax(0,1fr))!important;gap:2px!important;margin-bottom:2px!important}
  .puzzleGlyphDrawerFamilyKey{min-width:0!important;height:25px!important;min-height:25px!important;padding:1px!important;font-size:9px!important}
  .puzzleGlyphDrawerKeys{grid-template-columns:repeat(auto-fit,minmax(30px,1fr))!important;gap:2px!important;max-height:none!important;overflow:hidden!important;padding:0!important}
  .puzzleGlyphDrawerKeys .puzzleKey{width:auto!important;min-width:0!important;height:31px!important;min-height:31px!important;font-size:20px!important}

  /* Generic mechanism controls: arrows/toggles remain visible, then the runtime
     fit guard handles any residual size created by localized text or save state. */
  .puzzleCard--mechanism .puzzleSlots{
    height:100%;justify-content:flex-start!important;align-content:flex-start!important;gap:3px;
  }
  .puzzleCard--mechanism button{touch-action:manipulation}
  .mechanismClues{gap:2px}.mechanismClue{padding:2px 3px;font-size:8px;line-height:1.05}
  .dialBank{gap:8px}.dialUnit{grid-template-rows:auto 28px 48px 28px;gap:2px}.dialAdjust{width:42px;min-width:42px;height:28px;min-height:28px}.dialValue{width:48px;height:48px}.dialValue .sitelenGlyph{font-size:27px}
  .routeBoard{width:min(100%,190px)!important;gap:2px}.routeTile{font-size:28px!important}
  .pathGrid{width:min(100%,194px)!important;gap:2px}.pathControls{grid-template-columns:repeat(4,38px);gap:3px}.pathMove{width:38px;height:30px;min-height:30px}
  .lightsGrid{width:min(100%,188px)!important;gap:4px}
  .balanceWeights{gap:4px}.balanceWeight{width:48px;height:48px}.balanceWeight .sitelenGlyph{font-size:25px}.balanceTargetCanvas{max-height:38px}
  .contextTarget{padding:3px 7px;gap:6px}.contextChoices{gap:3px}.contextChoiceCanvas{max-height:38px}

  /* Coordinate map: landscape is width-rich and height-poor. Keep the coordinate
     cartouche beside the map instead of above it so the 10x10 grid remains legible. */
  .puzzleCard.puzzleCard--map .puzzleSlots{
    display:grid!important;
    grid-template-columns:minmax(132px,.72fr) minmax(190px,1.28fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:7px!important;align-items:start!important;justify-items:center!important;
    width:100%;height:100%;
  }
  .puzzleCard.puzzleCard--map .coordinatePuzzleClue{
    min-width:0;width:100%;align-self:center;margin:0!important;
  }
  .puzzleCard.puzzleCard--map .coordinatePuzzleLabel{display:block!important;font-size:8px!important;margin-bottom:1px}
  .puzzleCard.puzzleCard--map .coordinatePuzzleCanvas{
    width:min(100%,230px)!important;max-height:66px!important;margin:0 auto!important;
  }
  .puzzleCard.puzzleCard--map .coordinateMapGrid{
    width:min(100%,62dvh,226px)!important;max-width:226px;max-height:226px!important;
    align-self:center!important;margin:0!important;
  }
  .puzzleCard.puzzleCard--map .coordinateAxis{font-size:8px!important}

  /* Multi-value numeric/cartouche entry: three derived answers must consume the
     puzzle surface horizontally, never by stacking clue text above every row. */
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroups{
    height:100%;align-content:start!important;gap:2px!important;
  }
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroup{
    grid-template-columns:minmax(104px,.62fr) minmax(0,2.38fr)!important;
    gap:3px!important;padding:2px 3px!important;align-items:center!important;
  }
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupText{
    display:grid!important;gap:1px!important;align-content:center;min-width:0;
  }
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupTitle{font-size:8px!important;line-height:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupClue{font-size:7px!important;line-height:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupEntry{grid-template-rows:auto 8px!important;gap:1px!important;min-width:0}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupProperName{font-size:7px!important;line-height:1!important;min-height:7px!important}
  .puzzleCard.puzzleCard--keys .puzzleNumericProperName{font-size:7px!important;line-height:1!important;min-height:7px!important;margin-top:0!important}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupSlots{gap:2px!important}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupSlots .puzzleSlot{height:24px!important;min-height:24px!important;padding:0 1px!important;border-width:1px!important}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupSlots .puzzleSlotGlyph{min-height:14px!important;font-size:15px!important}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupSlots .puzzleSlot.empty .puzzleSlotGlyph{min-height:13px!important;font-size:12px!important}
  .puzzleCard.puzzleCard--keys .puzzleAnswerGroupSlots .puzzleSlotLabel{font-size:5px!important;line-height:1!important}
  .puzzleCard.puzzleCard--keys .puzzleLiveCartoucheWrap{padding:2px 4px 1px!important}
  .puzzleCard.puzzleCard--keys .puzzleLiveCartoucheCanvas{max-height:31px!important}

  /* L4 / code-style and ordering controls. */
  .jugVessels{gap:12px}.jugVessel{width:62px;height:70px}.jugControls{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:4px;column-gap:10px;width:100%!important;max-width:420px!important;min-width:0;padding:0 3px;box-sizing:border-box}.jugAction{min-width:0!important;max-width:100%;min-height:30px;padding:2px 5px;font-size:9px;line-height:1.05;white-space:normal;overflow-wrap:anywhere}
  .hanoiBoard{height:118px}.hanoiDisk{height:18px}.hanoiDisk .sitelenGlyph{font-size:13px}
  .codeLegend{gap:4px;font-size:8px}.codeLegendGlyph{width:31px;height:31px}.codeLegendGlyph .sitelenGlyph{font-size:20px}
  .codebreakerWrap{grid-template-columns:minmax(0,1fr) 148px!important;gap:6px!important;align-items:start!important;justify-items:stretch!important;width:min(100%,552px)!important}
  .codebreakerStage{justify-items:center!important}.codeFeedbackPanel{align-content:start!important}
  .codeGuess,.codeGuess[data-symbol-count="5"],.codeGuess[data-symbol-count="6"]{grid-template-columns:repeat(var(--code-cols,4),42px);gap:3px}.codeGuess[data-symbol-count="5"]{grid-template-columns:repeat(5,42px)}.codeGuess[data-symbol-count="6"]{grid-template-columns:repeat(6,42px)}
  .codeSymbol{width:42px;height:42px;min-height:42px}.codeSymbol .sitelenGlyph{font-size:25px}.codeSubmit{min-height:29px;padding:3px 10px;font-size:9px}
  .codeHistory{width:100%;grid-template-columns:1fr!important;gap:3px!important}.codeHistoryRow{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:1px!important;padding:3px 4px!important;font-size:8px!important}.codeHistorySymbols{gap:2px!important;flex-wrap:wrap}.codeHistorySymbols .sitelenGlyph{font-size:13px}
  .codebreakerWrap--retained-clues{grid-template-rows:minmax(0,1fr)!important}.codebreakerWrap--retained-clues .codeFeedbackPanel{min-height:0!important;max-height:100%!important;overflow:hidden!important;align-self:stretch!important}.codebreakerWrap--retained-clues .codeHistory{min-height:0!important;max-height:100%!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}.codebreakerWrap--retained-clues .codeHistoryRow:nth-child(-n+2){display:grid!important}.codebreakerWrap--retained-clues .codeHistoryRow--removable{padding-right:31px!important}.codebreakerWrap--retained-clues .codeHistoryRemove{right:2px;width:26px;height:26px;min-width:26px;min-height:26px;font-size:16px}
  .equivalenceGrid{gap:2px}.equivalenceCanvas{max-height:29px}
  .scheduleList{gap:4px!important;width:min(100%,650px)!important;align-content:start!important}
  .scheduleItem{grid-template-columns:24px minmax(0,1fr) 87px!important;gap:5px!important;padding:3px 5px!important;min-height:45px!important}
  .scheduleRank{font-size:16px!important}
  .scheduleCartouches{grid-template-columns:minmax(0,1.45fr) minmax(0,.82fr)!important;gap:8px!important}
  .scheduleCanvas{width:100%!important;max-width:100%!important;min-height:30px!important;max-height:40px!important;object-fit:contain}
  .scheduleControls{grid-template-columns:repeat(2,40px)!important;gap:7px!important;justify-content:end!important}
  .scheduleControls button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;font-size:21px!important;line-height:1!important}

  /* L5 spatial/pattern family, including the shape/pattern puzzle. */
  .puzzleCard[data-puzzle-type="river-crossing"] .riverBoard{grid-template-rows:repeat(4,28px)!important}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverCell{min-height:28px!important}
  .puzzleCard[data-puzzle-type="river-crossing"] .riverControls button{min-height:27px!important}
  .sokobanGrid{grid-template-columns:repeat(var(--soko-cols),30px)}.sokobanCell{width:30px;height:30px}.sokobanControls{grid-template-columns:repeat(4,38px);gap:3px}.sokobanControls button{width:38px;height:29px;min-height:29px}
  .slidingGrid{grid-template-columns:repeat(var(--slide-cols),48px);gap:3px}.slidingTile{width:48px;height:48px;min-height:48px}.slidingTile .sitelenGlyph{font-size:25px}
  .pegLine{grid-template-columns:repeat(8,31px);gap:2px}.pegHole{width:31px;height:31px;min-height:31px;font-size:17px}
  .patternSequence{gap:4px}.patternPanel{grid-template-columns:repeat(var(--pattern-cols),13px);gap:2px;padding:3px}.patternCell{width:13px;height:13px}.patternQuestion{width:43px;height:43px;font-size:22px}.patternChoices{gap:3px}.patternChoice{padding:2px}
  .nonogramWrap{--nonogram-cell:27px;grid-template-columns:minmax(42px,auto) auto;gap:2px}.nonogramTopClues,.nonogramRowClues,.nonogramGrid{gap:1px}.nonogramClue.vertical{min-height:36px}.nonogramClueNumber{font-size:14px}

  /* L6 records / number systems. Keep the whole five-card/shape row, keypad,
     crossword, base choices and every ring arrow inside the body. */
  .cardSortWrap{gap:3px}.cardSortRow{gap:2px}.cardSortCanvas{width:38px;height:54px}.cardSortNote{font-size:8px}
  .calculatorPuzzle{grid-template-columns:minmax(0,1fr) minmax(180px,.9fr);grid-template-rows:auto auto;gap:3px 7px;width:100%}.calculatorProgress{grid-column:1/-1}.calculatorExpression{grid-column:1;grid-row:2}.calculatorAnswer{grid-column:1;grid-row:3}.calculatorKeypad{grid-column:2;grid-row:2 / span 2;align-self:center;gap:2px}.calculatorCartouche{max-height:34px}.calculatorAnswerCanvas{max-height:31px}.calculatorKey{min-height:27px;padding:1px;font-size:10px}
  .baseMatchWrap{grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr);grid-template-rows:auto 1fr;gap:3px 6px;width:100%}.baseMatchProgress{grid-column:1/-1}.baseMatchTarget{max-height:40px}.baseMatchChoices{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.baseMatchCanvas{max-height:34px}
  .ringLockWrap{grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:5px}.ringLockClues{display:grid!important;grid-template-columns:1fr;gap:2px}.ringLockClue{padding:2px 3px;font-size:7px}.ringLockGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.ringDial{width:58px;height:58px}.ringCenterGlyph{font-size:23px}.ringControls{grid-template-columns:repeat(2,29px);gap:2px}.ringControls button{width:29px;height:25px;min-height:25px;font-size:14px}
  .countryCrosswordWrap{grid-template-columns:minmax(200px,1fr) auto;grid-template-rows:1fr;gap:5px}.countryCrosswordClues{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;align-content:center}.countryCrosswordClue{grid-template-columns:auto minmax(0,1fr);column-gap:3px;row-gap:0;padding:2px 3px;font-size:7px;min-width:0}.countryCrosswordClue small{display:block!important}.countryCrosswordClue .countryClueTp,.countryCrosswordClue .countryClueEn{display:block!important;margin:0;font-size:6.5px;line-height:1.05;min-width:0;overflow-wrap:anywhere}.countryCrosswordNumberHost--clue{width:29px;height:17px;min-width:29px}.countryCrosswordClueDirection{font-size:8px}.countryCrosswordGrid{grid-template-columns:repeat(var(--cross-cols),27px);grid-template-rows:repeat(var(--cross-rows),27px);gap:1px}.countryCrosswordCell{width:27px;height:27px;min-width:27px;min-height:27px}.countryCrosswordGlyph{font-size:18px}

  /* L7 — colour-order remains two-column in landscape; clues must NOT disappear. */
  .toneSequenceWrap{gap:3px}.toneProgress{font-size:10px;min-height:12px}.tonePads{gap:3px}.tonePad{min-height:45px}.tonePad .sitelenGlyph{font-size:25px}
  .airflowGrid{grid-template-columns:repeat(var(--air-cols),37px)!important;gap:2px}.airflowTile{width:37px;height:37px;min-height:37px;font-size:23px}
  .pulseSyncWrap,.pulseBoard{gap:3px}.pulseLane{grid-template-columns:82px minmax(0,1fr);gap:3px}.pulseControls{grid-template-columns:26px 26px 26px}.pulseControls button{width:26px;height:25px;min-height:25px}.pulseCell{height:16px}
  .spectrumWrap{grid-template-columns:minmax(210px,.95fr) minmax(0,1.05fr)!important;gap:5px;width:100%}.spectrumClues{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}.spectrumClue{padding:2px 3px;font-size:7px;line-height:1.05}.spectrumFilters{gap:3px}.spectrumFilter{min-height:47px;padding:2px 1px;font-size:8px;gap:2px}.spectrumSwatch{width:24px;height:27px}
  .powerBalanceWrap{gap:3px}.powerMeters{gap:3px}.powerMeter{padding:2px 3px}.powerMeterCanvas{max-height:30px}.powerBreakers{gap:3px}.powerBreaker{min-height:46px;padding:2px}.powerBreakerCanvas{max-height:30px}

  /* Global first-row contract: every puzzle surface starts below the localized
     instructions. No mechanism is allowed to center oversized content upward into
     the description. The runtime guard below also measures the real instruction
     bottom, so longer Toki Pona copy receives the same clearance as English. */
  .puzzleCard[data-puzzle-type="dual-mirror"] .dualMirrorWrap,
  .puzzleCard[data-puzzle-type="sudoku"] .sudokuWrap{
    align-self:flex-start!important;
    margin-top:0!important;
  }

  /* L8 / L12 logic: XOR/OR and mirror arrays are explicitly landscape-first. */
  .deductionWrap{grid-template-columns:minmax(220px,.95fr) minmax(0,1.05fr)!important;gap:5px;width:100%}.deductionClues,.dependencyClues{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}.deductionClue{padding:2px 3px;font-size:7px;line-height:1.04}.deductionTokens,.dependencyTokens{grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:2px}.deductionToken,.dependencyTokens .deductionToken{min-height:44px;padding:3px 1px 2px}.deductionGlyph,.dependencyTokens .deductionGlyph{font-size:21px}.deductionLabel{font-size:6px;display:block}
  .dualMirrorWrap{gap:2px}.dualMirrorLegend{font-size:7px;line-height:1.05}.dualMirrorBoard{grid-template-columns:repeat(var(--mirror-cols),30px)!important;grid-template-rows:repeat(var(--mirror-rows),30px)!important;gap:1px}.dualMirrorCell{width:30px!important;height:30px!important}.dualMirrorMirror{font-size:20px!important}.dualMirrorPortMarker{padding:0;border-radius:3px}.dualMirrorPortNumber>.tpNumeric>.tpNumericCanvas{max-width:92%;max-height:10px}.dualMirrorPortNi{font-size:12px;line-height:.82}
  .truthGateWrap{grid-template-columns:minmax(176px,.8fr) minmax(170px,1.2fr)!important;gap:3px 5px;width:100%}.truthGateDiagram{gap:3px}.truthGateSelect{min-height:42px;padding:2px;gap:2px}.truthGateSelect small{font-size:7px}.truthGateSelect strong{font-size:12px}.truthTable{grid-template-columns:repeat(5,29px);gap:1px}.truthTable>strong{height:16px;padding:0;font-size:6.5px}.truthBit{width:29px;height:18px;font-size:13px}.truthGateProgress{grid-column:1/-1;padding:2px 4px;font-size:8px;line-height:1}.truthGateKey{display:none}
  .exactPathWrap{grid-template-columns:minmax(150px,.75fr) auto;grid-template-rows:auto auto;gap:3px 6px}.exactPathMeters{grid-column:1}.exactPathGrid{grid-column:2;grid-row:1 / span 2;grid-template-columns:repeat(var(--path-cols),36px)!important;gap:2px}.exactPathCell{width:36px;height:36px;min-height:36px}.exactPathValue{font-size:19px}.exactPathControls{grid-column:1;grid-row:2;gap:3px}.exactPathControls button{min-height:27px}

  /* L9-L11 dense mechanisms. */
  .sphinxWrap{gap:3px}.sphinxCrest{font-size:32px}.sphinxRiddle{padding:3px 5px;font-size:8px}.sphinxChoices{gap:3px}.sphinxChoice{min-height:42px}.sphinxChoice .sitelenGlyph{font-size:25px}
  .coupledSwitchWrap{gap:3px}.coupledLampRows{gap:2px}.coupledLampRow{gap:2px}.coupledLamp{height:22px;font-size:7px}.coupledLevers{gap:2px}.coupledLever{min-height:40px;padding:2px}.coupledLever .sitelenGlyph{font-size:20px}
  .layerAlignWrap{gap:3px}.layerTargetSummary{display:none}.layerAlignStack{gap:3px}.layerAlignGrid{grid-template-columns:repeat(var(--layer-size),21px);grid-template-rows:repeat(var(--layer-size),21px);gap:1px}.layerAlignCell{width:21px;height:21px}.layerAlignHead{grid-template-columns:24px minmax(0,1fr) 24px}.layerAlignHead button{width:24px;height:24px;min-height:24px}.layerMarker{width:14px;height:14px;font-size:7px}
  .callTriangWrap{gap:3px}.callTriangLegend{gap:2px}.callTriangSensor{padding:2px 3px}.callTriangGrid{grid-template-columns:repeat(var(--tri-cols),32px);grid-template-rows:repeat(var(--tri-rows),32px);gap:1px}.callTriangCell{width:32px;height:32px;min-height:32px}.callTriangCell .sitelenGlyph{font-size:17px}.callTriangNote{display:none}
  .lineageWrap{gap:3px}.lineagePairs{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.lineagePair{padding:2px}.lineageTraits .sitelenGlyph{font-size:16px}.lineageEvidence{padding:2px 3px}.lineageEvidence ul{font-size:6.5px}.lineageRows{gap:2px}.lineageRow{padding:2px 3px;gap:3px}.lineageChoice{min-height:25px;font-size:8px}
  .habitatTriageWrap{gap:3px}.habitatRoleBrief{gap:2px}.habitatRoleRule{padding:2px 3px}.habitatRoleRule>span{font-size:7px}.habitatRecords{gap:2px}.habitatRecord{padding:2px}.habitatRecord ul{font-size:7px}.habitatSelectors{gap:2px}.habitatSelector{padding:2px}.habitatChoice{min-height:25px;font-size:8px}

  /* L10 dense logistics panels. */
  .marketTillWrap,.coldChainWrap,.textileMixerWrap{gap:3px}.marketTillCards{gap:3px}.marketTillCard{padding:3px;gap:3px}.marketTillHead{gap:4px}.marketTillHead .sitelenGlyph{font-size:27px}.marketTillCanvas{max-height:40px}.marketTillTarget .marketTillCanvas{max-height:44px}.marketTillTokens{gap:2px}.marketToken{min-height:30px}
  .coldControls,.coldGauges{gap:3px}.coldControl{min-height:38px}.coldGauge{padding:2px}.coldGaugeCanvas{max-height:29px}
  .textileFormula{padding:3px}.textileFormula .sitelenGlyph{font-size:25px}.textileRatio{min-height:34px}
  .recordClassifyWrap{gap:3px}.recordClassifyLead{padding:2px;font-size:7px}.recordClassifyGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.recordClassifyCard{padding:3px;gap:2px}.recordClassifyGlyph{font-size:22px}.recordClassifyFact{padding:2px 3px;font-size:7px}.recordClassifyChoice{min-height:25px;font-size:8px}

  /* Sudoku: board left, enlarged active cell + notes/keypad right. The 9x9 board
     may stay compact because the selected square is promoted above the controls. */
  .puzzleCard[data-puzzle-type="sudoku"]{padding:4px 6px!important}
  .puzzleCard[data-puzzle-type="sudoku"]>#puzzleInstructions{max-height:none!important;white-space:normal!important;text-overflow:clip!important}
  .sudokuWrap{grid-template-columns:auto minmax(150px,190px)!important;grid-template-rows:1fr!important;gap:6px!important;width:min(100%,520px);align-items:start}
  .sudokuLead{display:none!important}
  .sudokuGrid{grid-column:1!important;width:min(202px,62dvh)!important}
  .sudokuGlyph{font-size:clamp(12px,3.8dvh,20px)}.sudokuLatin{font-size:5px}.sudokuNotes small{font-size:4.5px}
  .sudokuControls{grid-column:2!important;display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%!important;align-self:center}
  .sudokuFocus{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:5px;align-items:center;min-height:58px;padding:3px 4px;border:1px solid rgba(17,17,17,.18);border-radius:7px;background:rgba(255,255,255,.28)}
  .sudokuFocusLabel{font:800 8px/1.15 system-ui,sans-serif;color:var(--muted);text-align:center}
  .sudokuFocusCell{position:relative;width:58px;height:58px;display:grid;place-items:center;border:2px solid #171717;border-radius:5px;background:#fff4d7;overflow:hidden}
  .sudokuFocusCell--empty{font:900 25px/1 system-ui,sans-serif;color:var(--muted)}
  .sudokuFocusGlyph{font-size:39px;line-height:1}.sudokuFocusLatin{position:absolute;right:3px;bottom:2px;font:900 9px/1 system-ui,sans-serif}.sudokuFocusNotes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:90%;height:90%;place-items:center}.sudokuFocusNotes small{font:800 8px/1 system-ui,sans-serif}

  /* No modal is allowed to rely on scrolling in mobile landscape. Puzzle cards
     have their own fit system above; these rules compact the remaining game
     overlays into the same real content budget. */
  .overlayScreen{padding:3px 5px!important;overflow:hidden!important}
  .overlayCard{max-height:min(calc(100dvh - 8px),367px)!important;overflow:hidden!important;padding:6px 8px!important}
  .overlayCard h2{margin:1px 0 3px;font-size:15px;line-height:1.05}
  .overlayCard p{margin:2px 0 4px;font-size:9px;line-height:1.12}
  .overlayProgress{margin:3px 0 5px;font-size:10px;line-height:1.05}
  .overlayButtonRow{gap:4px}.overlayButtonRow button{min-height:28px;padding:3px 7px;font-size:9px}

  .levelIntroCard{width:min(470px,calc(100vw - 10px));text-align:center}
  .levelIntroCard .levelIntroNumberRow{margin:0 auto;max-height:92px}
  .levelIntroCard #levelIntroCartouche{max-width:min(330px,60vw);max-height:86px}
  .levelIntroCard #levelIntroHint{margin:2px 0 4px}
  .levelIntroCard #levelIntroStartBtn{min-height:30px;padding:3px 12px}

  #glyphPopup .glyphRewardCard{max-height:min(calc(100dvh - 8px),300px)!important;overflow:hidden!important}
  .glyphRewardCard .rewardGlyph{font-size:clamp(38px,13dvh,54px);line-height:.9;margin:0}
  .glyphRewardCard h2{font-size:14px}.glyphRewardCard p{font-size:9px}.glyphRewardCard button{min-height:28px!important;height:28px;padding:2px 9px;font-size:9px}

  .collectionCard{
    width:min(760px,calc(100vw - 10px));height:min(calc(100dvh - 8px),367px);
    display:grid;grid-template-rows:30px 16px minmax(0,1fr);gap:2px;
  }
  .collectionCard .overlayHeaderRow{min-height:30px;align-items:center}
  .collectionCard .overlayEyebrow,.collectionCard .collectionHelp{display:none!important}
  .collectionCard h2{font-size:12px!important;margin:0!important}
  .collectionCard #collectionClose{min-height:27px;height:27px;padding:2px 8px;font-size:9px}
  .collectionLevelProgress{margin:0!important;padding:1px 3px!important;min-height:0;font-size:8px;line-height:1.05;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .collectionCard .glyphGrid{grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:2px;min-height:0;overflow:hidden}
  .collectionCard .glyphCell{min-height:0!important;height:auto;padding:1px!important;border-radius:4px;overflow:hidden}
  .collectionCard .glyphCellGlyph{font-size:clamp(14px,5.2dvh,20px);line-height:.9;min-height:0}
  .collectionCard .glyphCell.missing .glyphCellGlyph{font-size:13px;padding:0}
  .collectionCard .glyphCellWord{margin:0;font-size:5.5px;line-height:1;max-height:1em}

  .sentenceCard{width:min(650px,calc(100vw - 10px));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:3px}
  .sentenceCard>.overlayEyebrow{display:none}.sentenceCard .sentenceSlots{margin:1px 0;gap:3px;align-content:center;justify-content:center;overflow:hidden}
  .sentenceCard .sentenceSlot{width:54px;min-height:58px;padding:2px}
  .sentenceCard .sentenceSlotGlyph{font-size:30px;line-height:1;min-height:31px}.sentenceCard .sentenceSlotWord{margin-top:1px;font-size:7px}
  .sentenceCard .sentenceStatus{min-height:1.2em;margin:0;font-size:8px;line-height:1.05}

  .levelCompleteCard,.resetConfirmCard{width:min(520px,calc(100vw - 10px))}
  .levelCompleteCard>.overlayEyebrow,.resetConfirmCard>.overlayEyebrow{font-size:8px}
  .levelCompleteCard.isCampaignComplete h2{font-size:22px!important;margin:1px 0 3px}
  .campaignCompleteBadge{margin:2px 0 4px;padding:4px 6px;font-size:9px;line-height:1.05}
  .sudokuControls>button{min-height:26px!important;padding:2px 3px!important;font-size:9px!important}
  .sudokuKeypad{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px}.sudokuKey{min-height:27px!important;padding:1px!important}.sudokuKey .sitelenGlyph{font-size:14px}.sudokuKey small{font-size:5px}
}