/* KalHeshbon teachers escape room — mobile rebuild 1.30.0
 * This file intentionally owns responsive layout. Do not add new mobile
 * overrides to escape-room.css. Desktop art stays in the legacy sheet.
 */

@media (max-width: 900px) {
  /* A hidden state must always beat later high-specificity mobile layout rules. */
  #kal-ter-app [hidden][hidden] { display: none !important; }

  html, body { overflow-x: clip; }

  #kal-ter-app .kal-ter-sound-toggle {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: fit-content !important;
    min-height: 38px !important;
    margin: 0 auto 7px 0 !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
    z-index: 90 !important;
  }

  body.kal-ter-room-page #kal-ter-app {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 6px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  #kal-ter-app .kal-ter-puzzle,
  #kal-ter-app .kal-ter-coin-puzzle,
  #kal-ter-app .kal-ter-guard-puzzle {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    scroll-margin-top: calc(72px + env(safe-area-inset-top)) !important;
  }

  #kal-ter-app .kal-ter-puzzle-head,
  #kal-ter-app .kal-ter-puzzle > .kal-ter-puzzle-head,
  #kal-ter-app .kal-ter-coin-puzzle > .kal-ter-puzzle-head,
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 0 8px !important;
    padding: 7px 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(216, 170, 91, .28) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(12,18,23,.96), rgba(7,12,16,.96)) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
    text-align: right !important;
  }

  #kal-ter-app .kal-ter-puzzle-head > div:first-child,
  #kal-ter-app .kal-ter-puzzle > .kal-ter-puzzle-head > div:first-child,
  #kal-ter-app .kal-ter-coin-puzzle > .kal-ter-puzzle-head > div:first-child,
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head > div:first-child {
    min-width: 0 !important;
    display: block !important;
  }

  #kal-ter-app .kal-ter-puzzle-head h2,
  #kal-ter-app .kal-ter-puzzle > .kal-ter-puzzle-head h2,
  #kal-ter-app .kal-ter-coin-puzzle > .kal-ter-puzzle-head h2,
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head h2 {
    margin: 2px 0 0 !important;
    font-size: clamp(20px, 5.3vw, 27px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #kal-ter-app .kal-ter-puzzle-head p,
  #kal-ter-app .kal-ter-coin-puzzle .kal-ter-coin-scroll,
  #kal-ter-app .kal-ter-guard-puzzle .kal-ter-guard-scroll {
    display: none !important;
  }

  #kal-ter-app .kal-ter-head-actions {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #kal-ter-app .kal-ter-back-lobby,
  #kal-ter-app .kal-ter-reset {
    min-height: 44px !important;
    padding: 7px 11px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  #kal-ter-app .kal-ter-narrator,
  #kal-ter-app .kal-ter-puzzle > .kal-ter-narrator,
  #kal-ter-app .kal-ter-coin-message,
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-guard-message {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 38px !important;
    margin: 0 0 8px !important;
    padding: 8px 11px !important;
    transform: none !important;
    border-radius: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  #kal-ter-app .kal-ter-modal-card,
  #kal-ter-app .kal-ter-riddle-card,
  #kal-ter-app .kal-ter-guard-riddle-card {
    width: min(94vw, 620px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    padding: 28px 18px 22px !important;
  }

  #kal-ter-app .kal-ter-modal-x {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin-inline-start: auto !important;
  }

  /* Room 1.1 — mobile rebuild 1.30.2.
   * One flow: illustrated scale → 3×3 coin bank → actions → collapsible report.
   * No fixed top/bottom coordinates for the control panels. */
  #kal-ter-app .kal-ter-coin-room {
    --coin-scene-h: clamp(210px, 62vw, 270px);
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 8px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    border-radius: 18px !important;
    background:
      url('art/coin_scene.webp') center top / auto var(--coin-scene-h) no-repeat,
      linear-gradient(180deg,#0d141a 0 var(--coin-scene-h),#080d12 var(--coin-scene-h) 100%) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.36), inset 0 0 0 1px rgba(223,181,105,.08) !important;
  }

  #kal-ter-app .kal-ter-coin-room::before,
  #kal-ter-app .kal-ter-coin-room::after {
    pointer-events: none !important;
  }

  /* The scale element is now a live interaction layer over the exact art. */
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: var(--coin-scene-h) !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-scale::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,transparent 0 61%,rgba(8,13,18,.92) 69%,#080d12 76%,#080d12 100%) !important;
    pointer-events: none !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .base,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .post,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .cap,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .beam,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .chain,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .pan-label {
    display: none !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .pan {
    position: absolute !important;
    z-index: 8 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    background: rgba(255,210,120,.015) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    touch-action: none !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .pan::before,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .pan::after {
    content: none !important;
    display: none !important;
  }

  #kal-ter-app .kal-ter-coin-room[data-drop-target="left"] .kal-ter-scale .pan.left,
  #kal-ter-app .kal-ter-coin-room[data-drop-target="right"] .kal-ter-scale .pan.right,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .pan.flash-drop,
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .pan.pan-landed {
    border-color: rgba(255,215,127,.76) !important;
    background: radial-gradient(ellipse,rgba(255,210,119,.14),transparent 70%) !important;
    box-shadow: 0 0 18px rgba(241,185,82,.22) !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .slot {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px 5px 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .slot .kal-ter-coin-mini {
    position: relative !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    flex: 0 0 27px !important;
    margin: 0 -3px !important;
    font-size: 10px !important;
    pointer-events: auto !important;
    touch-action: none !important;
    box-shadow: 0 3px 7px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,236,172,.14) !important;
  }

  #kal-ter-app .kal-ter-scale[data-tilt="left-up"] .pan.left .slot { transform: translateY(-6px) !important; }
  #kal-ter-app .kal-ter-scale[data-tilt="left-up"] .pan.right .slot { transform: translateY(6px) !important; }
  #kal-ter-app .kal-ter-scale[data-tilt="right-up"] .pan.left .slot { transform: translateY(6px) !important; }
  #kal-ter-app .kal-ter-scale[data-tilt="right-up"] .pan.right .slot { transform: translateY(-6px) !important; }
  #kal-ter-app .kal-ter-scale[data-tilt="balanced"] .pan .slot { transform: translateY(0) !important; }

  #kal-ter-app .kal-ter-coin-table { display: none !important; }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-bank {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: min(100%, 350px) !important;
    min-width: 0 !important;
    margin: -4px auto 0 !important;
    padding: 18px 12px 12px !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px 10px !important;
    align-items: center !important;
    border: 1px solid rgba(215,170,92,.28) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg,rgba(14,21,27,.97),rgba(8,13,18,.97)) !important;
    box-shadow: 0 14px 26px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04) !important;
    z-index: 22 !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-bank::before {
    content: "מטבעות" !important;
    position: absolute !important;
    top: -11px !important;
    right: 12px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(214,170,95,.34) !important;
    background: #17120e !important;
    color: #e7ca94 !important;
    font-size: 10px !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin {
    width: clamp(54px,17vw,66px) !important;
    height: clamp(54px,17vw,66px) !important;
    min-width: 0 !important;
    max-width: 66px !important;
    justify-self: center !important;
    font-size: 16px !important;
    touch-action: none !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-controls {
    order: 3 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 7px !important;
    border: 1px solid rgba(214,168,88,.24) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,rgba(14,21,27,.98),rgba(8,13,18,.98)) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.24) !important;
    z-index: 22 !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-controls button {
    min-height: 48px !important;
    padding: 8px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-controls button.primary {
    background: linear-gradient(180deg,#234f78,#17344e) !important;
    border-color: rgba(224,180,97,.72) !important;
  }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-controls > span[data-kal-ter-coin-counter] {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.025) !important;
    font-size: 12px !important;
  }

  #kal-ter-app .kal-ter-coin-controls .kal-ter-coin-legend { display: none !important; }

  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-report {
    order: 4 !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
    border-radius: 13px !important;
    font-size: 11px !important;
    z-index: 21 !important;
  }

  #kal-ter-app .kal-ter-coin-report-head {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 7px !important;
  }

  #kal-ter-app .kal-ter-coin-report-toggle {
    display: inline-flex !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(214,170,95,.32) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.035) !important;
    color: #e6cca0 !important;
    font-size: 10px !important;
  }

  #kal-ter-app .kal-ter-coin-report-current {
    min-height: 0 !important;
    margin-top: 5px !important;
  }
  #kal-ter-app .kal-ter-coin-report-current .report-section-title,
  #kal-ter-app .kal-ter-coin-report-current .report-pan-row,
  #kal-ter-app .kal-ter-coin-report-history { display: none !important; }
  #kal-ter-app .kal-ter-coin-report .report-state { margin-top: 0 !important; }

  #kal-ter-app .kal-ter-coin-report.is-open .kal-ter-coin-report-current .report-section-title,
  #kal-ter-app .kal-ter-coin-report.is-open .kal-ter-coin-report-current .report-pan-row,
  #kal-ter-app .kal-ter-coin-report.is-open .kal-ter-coin-report-history { display: block !important; }
  #kal-ter-app .kal-ter-coin-report.is-open .kal-ter-coin-report-history {
    max-height: 180px !important;
    overflow: auto !important;
    padding-top: 6px !important;
  }

  /* Final answer/failure/reward are flow cards, not overlays covering the game. */
  #kal-ter-app .kal-ter-coin-guess,
  #kal-ter-app .kal-ter-coin-locked,
  #kal-ter-app .kal-ter-coin-reward {
    order: 5 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #kal-ter-app .kal-ter-coin-guess[hidden],
  #kal-ter-app .kal-ter-coin-locked[hidden],
  #kal-ter-app .kal-ter-coin-reward[hidden] { display: none !important; }

  #kal-ter-app .kal-ter-coin-guess .box,
  #kal-ter-app .kal-ter-coin-locked .box,
  #kal-ter-app .kal-ter-coin-reward .box {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 15px 12px !important;
    border-radius: 15px !important;
  }

  #kal-ter-app .kal-ter-coin-guess .coins {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  #kal-ter-app .kal-ter-coin-guess .coins button {
    width: 58px !important;
    height: 58px !important;
    justify-self: center !important;
  }

  #kal-ter-app .kal-ter-coin-room.is-guessing .kal-ter-coin-bank,
  #kal-ter-app .kal-ter-coin-room.is-guessing .kal-ter-coin-controls,
  #kal-ter-app .kal-ter-coin-room.is-guessing .kal-ter-coin-report {
    display: none !important;
  }

  #kal-ter-app .kal-ter-coin-room.is-solved .kal-ter-coin-bank,
  #kal-ter-app .kal-ter-coin-room.is-solved .kal-ter-coin-controls,
  #kal-ter-app .kal-ter-coin-room.is-solved .kal-ter-coin-report {
    display: none !important;
  }
  /* Room 1.0 — two guards */
  #kal-ter-app .kal-ter-guard-room {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
  }
  #kal-ter-app .kal-ter-guard-stage {
    position: relative !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg,rgba(2,5,8,.01),rgba(2,5,8,.05)),
      url('art/guard_scene.webp') center center / 100% 100% no-repeat !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .questions {
    grid-template-columns: 1fr !important;
    max-height: min(42dvh, 330px) !important;
    gap: 7px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .qbtn {
    min-height: 48px !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice {
    margin-top: 8px !important;
    padding: 9px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice .choice-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice .choice-btn { min-height: 50px !important; }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-reward {
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
  }
}

@media (max-width: 600px) {
  body.kal-ter-room-page #kal-ter-app { padding-inline: 4px !important; }

  #kal-ter-app .kal-ter-puzzle-head,
  #kal-ter-app .kal-ter-puzzle > .kal-ter-puzzle-head,
  #kal-ter-app .kal-ter-coin-puzzle > .kal-ter-puzzle-head,
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head {
    min-height: 52px !important;
    padding: 6px 7px !important;
  }
  #kal-ter-app .kal-ter-back-lobby { max-width: 122px !important; overflow: hidden !important; text-overflow: ellipsis !important; }


  #kal-ter-app .kal-ter-guard-stage {
    height: 260px !important;
    background-size: auto 100% !important;
    background-position: center center !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-speech {
    top: 3% !important;
    width: 38% !important;
    max-width: none !important;
    padding: 6px 7px !important;
    font-size: 9px !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-pointer .tag {
    min-width: 112px !important;
    max-width: 146px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice .choice-buttons { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  #kal-ter-app *, #kal-ter-app *::before, #kal-ter-app *::after {
    scroll-behavior: auto !important;
  }
}


/* 1.31.1 — Room 1.5 canonical phone/tablet layout.
 * This is the only responsive geometry for the crate room at <=900px.
 * The same real DOM label slot is both the visible target and the JS hit-zone;
 * no responsive state maps coordinates from the desktop panorama anymore. */
@media (max-width: 900px) {
  html.kal-ter-label-dragging-active,
  body.kal-ter-label-dragging-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  #kal-ter-app .kal-ter-puzzle {
    overflow: visible !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-puzzle-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    min-height: 54px !important;
    padding: 7px 8px !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-puzzle-head h2 {
    font-size: clamp(18px,4.2vw,25px) !important;
    line-height: 1.08 !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-crate-hud {
    display: none !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-narrator {
    min-height: 36px !important;
    margin-bottom: 7px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }

  #kal-ter-app .kal-ter-puzzle-room {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(6px,1.2vw,9px) !important;
    overflow: visible !important;
    border: 1px solid rgba(206,161,84,.22) !important;
    border-radius: 17px !important;
    background:
      radial-gradient(circle at 50% 0,rgba(217,162,75,.08),transparent 36%),
      linear-gradient(180deg,#0d141a,#070b0f) !important;
    box-shadow: 0 16px 30px rgba(0,0,0,.28) !important;
  }

  #kal-ter-app .kal-ter-puzzle-room > .kal-ter-beam,
  #kal-ter-app .kal-ter-puzzle-room > .kal-ter-lamp,
  #kal-ter-app .kal-ter-puzzle-room > .kal-ter-back-door,
  #kal-ter-app .kal-ter-puzzle-room > .kal-ter-floor,
  #kal-ter-app .kal-ter-puzzle-room > .kal-ter-explorer {
    display: none !important;
  }

  #kal-ter-app .kal-ter-puzzle-room .kal-ter-crates {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: clamp(4px,1.2vw,10px) !important;
    align-items: stretch !important;
    transform: none !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) 48px !important;
    width: 100% !important;
    height: clamp(160px,45vw,235px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(203,159,85,.22) !important;
    border-radius: 13px !important;
    background: #090e13 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
    transform: none !important;
    touch-action: manipulation !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card::before,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card::after {
    display: none !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card .kal-ter-crate-visual {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-radius: 12px 12px 0 0 !important;
    background: #0a0f13 !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card .kal-ter-crate-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background-position: center 8% !important;
    background-size: 110% auto !important;
    background-repeat: no-repeat !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.slot-0 .kal-ter-crate-visual::before {
    background-image: url('art/crate_mobile_1.webp') !important;
  }
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.slot-1 .kal-ter-crate-visual::before {
    background-image: url('art/crate_mobile_2.webp') !important;
  }
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.slot-2 .kal-ter-crate-visual::before {
    background-image: url('art/crate_mobile_3.webp') !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-face,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-lid,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-opening,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-index,
  #kal-ter-app .kal-ter-puzzle .kal-ter-sampled-mark,
  #kal-ter-app .kal-ter-puzzle .kal-ter-wrong-label {
    display: none !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-label-slot {
    position: relative !important;
    inset: auto !important;
    grid-row: 2 !important;
    width: auto !important;
    height: 46px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 5px 5px !important;
    align-self: end !important;
    border: 1px dashed rgba(218,176,101,.46) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg,rgba(17,24,29,.96),rgba(8,13,18,.96)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.03) !important;
    pointer-events: none !important;
  }

  #kal-ter-app .kal-ter-puzzle-room:not(.is-labeling) .kal-ter-label-slot {
    opacity: .26 !important;
  }

  #kal-ter-app .kal-ter-puzzle-room.is-labeling .kal-ter-label-slot::before {
    content: "הניחו כאן" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(226,196,143,.62) !important;
    font-size: clamp(9px,2.1vw,11px) !important;
    font-weight: 800 !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.drag-over-label .kal-ter-label-slot {
    border-color: rgba(255,211,127,.98) !important;
    background: rgba(255,199,89,.11) !important;
    box-shadow: 0 0 0 2px rgba(255,205,106,.11), inset 0 0 17px rgba(255,202,94,.09) !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.drag-over-label .kal-ter-label-slot::before {
    color: #ffe0a0 !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-assigned,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.slot-0 .kal-ter-assigned,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.slot-1 .kal-ter-assigned,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.slot-2 .kal-ter-assigned,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.is-nailing .kal-ter-assigned,
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.is-prying-label .kal-ter-assigned {
    position: absolute !important;
    left: 5px !important;
    right: 5px !important;
    top: auto !important;
    bottom: 5px !important;
    width: auto !important;
    height: 46px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-assigned.has-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 25px 4px 7px !important;
    overflow: hidden !important;
    border: 1px solid #9b7544 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg,#ead8b2,#d8b77f) !important;
    color: #2b2118 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.72),0 4px 9px rgba(0,0,0,.20) !important;
    font-size: clamp(10px,2.4vw,13px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    touch-action: none !important;
    user-select: none !important;
    z-index: 40 !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-assigned.has-label::before,
  #kal-ter-app .kal-ter-puzzle .kal-ter-assigned.has-label::after {
    display: none !important;
    content: none !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-assigned.has-label .kal-ter-assigned-copy {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: inherit !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-assigned.has-label i {
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: rgba(63,39,22,.92) !important;
    color: #f6dfb3 !important;
    font-style: normal !important;
    font-size: 12px !important;
    z-index: 3 !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-fruit {
    position: absolute !important;
    left: 50% !important;
    top: 11% !important;
    width: auto !important;
    transform: translate(-50%,10px) scale(.82) !important;
    z-index: 30 !important;
    pointer-events: none !important;
  }
  #kal-ter-app .kal-ter-puzzle .kal-ter-fruit.show {
    transform: translate(-50%,0) scale(1) !important;
  }
  #kal-ter-app .kal-ter-puzzle .kal-ter-fruit .kal-ter-fruit-asset.apple {
    width: clamp(34px,8vw,58px) !important;
  }
  #kal-ter-app .kal-ter-puzzle .kal-ter-fruit .kal-ter-fruit-asset.orange {
    width: clamp(36px,8.5vw,62px) !important;
  }

  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card.is-target {
    border-color: rgba(236,185,91,.74) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.25),0 0 0 1px rgba(236,185,91,.12),0 0 18px rgba(236,185,91,.12) !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table {
    position: relative !important;
    inset: auto !important;
    z-index: 30 !important;
    width: 100% !important;
    margin: 8px 0 calc(82px + env(safe-area-inset-bottom)) !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 7px !important;
    align-items: stretch !important;
    border: 1px solid rgba(214,171,96,.28) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,rgba(11,17,22,.98),rgba(7,12,16,.98)) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.30) !important;
    backdrop-filter: none !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-label-note {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 5px 8px !important;
    margin: 0 0 7px !important;
    padding: 0 1px !important;
    text-align: right !important;
  }
  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-label-note strong {
    font-size: 12px !important;
  }
  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-label-note span {
    display: none !important;
  }
  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-label-note b {
    font-size: 10px !important;
    opacity: .72 !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-labels {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-labels button {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 7px 4px !important;
    border-radius: 10px !important;
    font-size: clamp(10px,2.6vw,13px) !important;
    line-height: 1.1 !important;
    touch-action: none !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-table-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.3fr !important;
    gap: 6px !important;
    margin-top: 7px !important;
  }

  #kal-ter-app .kal-ter-puzzle > .kal-ter-label-table .kal-ter-table-actions button {
    min-height: 44px !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  #kal-ter-app .kal-ter-retry,
  #kal-ter-app .kal-ter-secret {
    margin-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .kal-ter-label-drag-ghost {
    border-radius: 10px !important;
    transform: scale(1.03) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,.38),0 0 0 1px rgba(233,191,109,.22) !important;
  }

  .kal-ter-label-drag-ghost.valid-drop {
    box-shadow: 0 16px 32px rgba(0,0,0,.34),0 0 0 2px rgba(244,198,109,.52),0 0 20px rgba(244,198,109,.18) !important;
  }
}

@media (max-width: 360px) {
  #kal-ter-app .kal-ter-puzzle-room .kal-ter-crates { gap: 4px !important; }
  #kal-ter-app .kal-ter-puzzle .kal-ter-crate-card {
    height: 158px !important;
    grid-template-rows: minmax(0,1fr) 46px !important;
  }
  #kal-ter-app .kal-ter-puzzle .kal-ter-label-slot,
  #kal-ter-app .kal-ter-puzzle .kal-ter-assigned { margin-inline: 3px !important; }
}


@media (max-width: 600px) {
  #kal-ter-app .kal-ter-coin-room {
    --coin-scene-h: clamp(205px, 62vw, 248px);
    padding-inline: 6px !important;
  }
  #kal-ter-app .kal-ter-coin-room .kal-ter-coin-bank {
    width: min(100%, 330px) !important;
    gap: 7px 8px !important;
    padding-inline: 8px !important;
  }
  #kal-ter-app .kal-ter-coin-room .kal-ter-coin {
    width: clamp(52px,17vw,60px) !important;
    height: clamp(52px,17vw,60px) !important;
  }
  #kal-ter-app .kal-ter-coin-room .kal-ter-scale .slot .kal-ter-coin-mini {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex-basis: 24px !important;
    margin-inline: -3px !important;
    font-size: 9px !important;
  }
}

html.kal-ter-coin-drag-lock,
body.kal-ter-coin-drag-lock {
  overscroll-behavior: none !important;
}

@media (max-width: 900px) {
  body.kal-ter-coin-drag-lock { touch-action: none !important; }
  #kal-ter-app .kal-ter-drag-coin {
    transform: scale(1.05) !important;
    box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 0 2px rgba(241,193,102,.22) !important;
  }
}

/* 1.30.3 — Room 1.0 true phone composition.
 * Do not crop the 1586px desktop panorama on a 320px phone. A dedicated
 * recomposition keeps both guards and both doors fully visible and gives the
 * live hit-zones one stable coordinate system. */
@media (max-width: 600px) {
  #kal-ter-app .kal-ter-guard-puzzle {
    overflow: visible !important;
  }

  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: right !important;
    gap: 7px !important;
  }
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head h2 {
    font-size: clamp(19px, 5.8vw, 24px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head .kal-ter-head-actions {
    flex: 0 0 auto !important;
  }

  #kal-ter-app .kal-ter-guard-stage {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 900 / 650 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg,rgba(2,5,8,.01),rgba(2,5,8,.08)),
      url('art/guard_scene_mobile.webp') center top / 100% auto no-repeat !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,226,175,.025) !important;
  }

  /* The artwork already contains the guards/doors; the HTML nodes are exact
     interaction surfaces only. */
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door,
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard {
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door::after {
    inset: 5% 6% !important;
    border-radius: 40% 40% 8px 8px !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard::after {
    inset: 3% 5% !important;
    border-radius: 22px !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard.selected::after {
    border-color: rgba(245,197,107,.78) !important;
    background: radial-gradient(ellipse,rgba(255,209,123,.08),transparent 72%) !important;
    box-shadow: 0 0 24px rgba(236,176,76,.22) !important;
  }

  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-speech {
    top: 2.5% !important;
    width: 38% !important;
    max-width: 150px !important;
    padding: 6px 7px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  #kal-ter-app .kal-ter-guard-room[data-focus-guard="l"] .kal-ter-guard-speech { left: 24% !important; }
  #kal-ter-app .kal-ter-guard-room[data-focus-guard="r"] .kal-ter-guard-speech { left: 76% !important; }

  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-pointer .beam {
    height: 5px !important;
    box-shadow: 0 0 12px rgba(255,195,80,.72), 0 0 24px rgba(255,173,37,.34) !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-pointer .head {
    border-top-width: 10px !important;
    border-bottom-width: 10px !important;
    border-left-width: 15px !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-pointer .tag {
    min-width: 104px !important;
    max-width: 126px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  /* Questions become a distinct stage below the picture. */
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud {
    margin-top: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .question-caption {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin-bottom: 6px !important;
    padding: 7px 8px !important;
    background: rgba(8,14,19,.98) !important;
    font-size: 11px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .questions {
    max-height: min(38dvh, 300px) !important;
    gap: 6px !important;
    overscroll-behavior: contain !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .qbtn {
    min-height: 50px !important;
    padding: 7px 8px !important;
    grid-template-columns: 28px minmax(0,1fr) !important;
    gap: 7px !important;
    font-size: 11px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .qbtn .qnum {
    width: 26px !important;
    height: 26px !important;
  }

  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice {
    margin: 0 !important;
    padding: 10px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice .choice-caption {
    margin-bottom: 8px !important;
    font-size: 12px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice .choice-buttons {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-hud .door-choice .choice-btn {
    min-height: 52px !important;
    padding: 8px !important;
    font-size: 13px !important;
  }

  /* A real victory opening: a copied wooden leaf moves in front of a light
     portal that covers the baked closed door underneath. */
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door.open {
    z-index: 70 !important;
    filter: drop-shadow(0 0 26px rgba(255,216,126,.5)) !important;
    perspective: 900px !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door.open::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 8% 12% 4% !important;
    border-radius: 42% 42% 5px 5px !important;
    background:
      radial-gradient(ellipse at 50% 46%,rgba(255,250,218,.98) 0 12%,rgba(255,226,150,.95) 23%,rgba(255,190,78,.62) 48%,rgba(255,162,42,.22) 67%,rgba(255,162,42,0) 83%),
      #fff0bd !important;
    box-shadow:
      0 0 24px rgba(255,224,154,.92),
      0 0 68px rgba(255,190,72,.68),
      0 0 140px rgba(255,173,47,.42) !important;
    animation: kal-ter-mobile-door-light 1.25s ease-in-out infinite alternate !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door.open .leaf {
    display: block !important;
    opacity: 1 !important;
    z-index: 4 !important;
    position: absolute !important;
    inset: 7% 11% 3% !important;
    border: 0 !important;
    border-radius: 42% 42% 4px 4px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.42) !important;
    background-color: #4b2d1d !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    backface-visibility: hidden !important;
    transition: transform 1.05s cubic-bezier(.16,.82,.2,1), opacity .12s linear !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door.left.open .leaf {
    background-image: url('art/guard_door_a.webp') !important;
    transform-origin: left center !important;
    transform: perspective(900px) rotateY(-82deg) !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door.right.open .leaf {
    background-image: url('art/guard_door_b.webp') !important;
    transform-origin: right center !important;
    transform: perspective(900px) rotateY(82deg) !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door.open::after {
    border-color: rgba(255,226,148,.86) !important;
    box-shadow: 0 0 30px rgba(255,205,102,.5), 0 0 90px rgba(255,186,65,.32) !important;
  }
  #kal-ter-app .kal-ter-guard-room.is-solved .kal-ter-guard-stage::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 65 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: radial-gradient(circle at 50% 50%,rgba(255,232,176,.20),rgba(255,194,92,.08) 38%,transparent 70%) !important;
    mix-blend-mode: screen !important;
    animation: kal-ter-mobile-room-flash 1.2s ease-out both !important;
  }
  @keyframes kal-ter-mobile-door-light {
    from { opacity: .82; filter: brightness(1); }
    to { opacity: 1; filter: brightness(1.13); }
  }
  @keyframes kal-ter-mobile-room-flash {
    0% { opacity: 0; }
    35% { opacity: .95; }
    100% { opacity: .52; }
  }

  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-reward .box {
    padding: 16px 14px !important;
  }
  #kal-ter-app .kal-ter-guard-room .kal-ter-guard-reward h3 {
    font-size: 21px !important;
  }
}

/* 1.30.3 phone polish after 320/390px render pass */
@media (max-width: 600px) {
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard.selected::after {
    inset: 8% 12% !important;
  }
  #kal-ter-app .kal-ter-guard-stage .kal-ter-guard-door.open::before {
    inset: 7% 9% 3% !important;
    background:
      radial-gradient(ellipse at 50% 44%,#fffdf0 0 13%,#fff2c7 22%,#ffd77f 43%,rgba(255,185,66,.92) 62%,rgba(255,162,42,.42) 79%,rgba(255,162,42,.08) 100%) !important;
    box-shadow:
      0 0 30px rgba(255,238,186,1),
      0 0 82px rgba(255,199,93,.86),
      0 0 170px rgba(255,171,43,.54) !important;
  }
}

@media (max-width: 360px) {
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head {
    min-height: 82px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    gap: 5px !important;
    text-align: center !important;
  }
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head > div:first-child {
    width: 100% !important;
  }
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head h2 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head .kal-ter-head-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 44px !important;
    gap: 6px !important;
  }
  #kal-ter-app .kal-ter-guard-puzzle > .kal-ter-puzzle-head .kal-ter-back-lobby {
    max-width: none !important;
    width: 100% !important;
  }
}


/* 1.30.5 — mobile lobby rebuild. This block intentionally neutralizes all
 * legacy lobby @media rules from escape-room.css. */
@media (max-width: 900px) {
  #kal-ter-app .kal-ter-lobby {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  #kal-ter-app .kal-ter-lobby-head {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 12px 12px 11px !important;
    border: 1px solid rgba(217,173,92,.30) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg,rgba(13,20,26,.97),rgba(7,12,16,.97)) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.30) !important;
    text-align: center !important;
  }
  #kal-ter-app .kal-ter-lobby-head > span,
  #kal-ter-app .kal-ter-lobby-head > p { display: none !important; }
  #kal-ter-app .kal-ter-lobby-head h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(23px,7vw,30px) !important;
    line-height: 1.1 !important;
    color: #f2d8a7 !important;
    text-shadow: 0 3px 15px rgba(0,0,0,.55) !important;
  }
  #kal-ter-app .kal-ter-lobby-scroll-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #kal-ter-app .kal-ter-lobby-scroll-card strong {
    display: block !important;
    color: #e3c58e !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  #kal-ter-app .kal-ter-lobby-scroll-card span { display: none !important; }

  #kal-ter-app .kal-ter-lobby-stage {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
  }
  #kal-ter-app .kal-ter-lobby-stage::before,
  #kal-ter-app .kal-ter-lobby-stage::after,
  #kal-ter-app .kal-ter-lobby-torch { display: none !important; }

  #kal-ter-app .kal-ter-lobby-stage .kal-ter-door-hall {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    align-items: stretch !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-door-hall::before,
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-door-hall::after { display: none !important; }

  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(154px,48vw,190px) !important;
    min-height: 154px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border: 1px solid rgba(222,174,91,.42) !important;
    border-radius: 18px !important;
    background-color: #070b0f !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,220,158,.035) !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    outline: none !important;
    animation: none !important;
  }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:nth-child(1),
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:nth-child(2),
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:nth-child(3) {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
  }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:nth-child(1) { background-image: url('art/lobby_mobile_11.webp') !important; }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:nth-child(2) { background-image: url('art/lobby_mobile_15.webp') !important; }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:nth-child(3) { background-image: url('art/lobby_mobile_10.webp') !important; }

  #kal-ter-app .kal-ter-room-number,
  #kal-ter-app .kal-ter-room-plaque,
  #kal-ter-app .kal-ter-stone-arch,
  #kal-ter-app .kal-ter-room-card { display: none !important; }

  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    border: 1px solid transparent !important;
    border-radius: inherit !important;
    background: linear-gradient(180deg,rgba(255,225,170,.015),rgba(0,0,0,.06)) !important;
    box-shadow: inset 0 -34px 46px rgba(0,0,0,.17) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door::after { display: none !important; }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:active,
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door.opening {
    transform: scale(.985) !important;
    filter: brightness(1.12) !important;
  }
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door:active::before,
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door.opening::before {
    border-color: rgba(247,198,104,.82) !important;
    box-shadow: inset 0 0 34px rgba(255,208,112,.10), 0 0 24px rgba(238,174,62,.22) !important;
    background: rgba(255,206,112,.025) !important;
  }
  #kal-ter-app .kal-ter-lobby-stage.is-entering,
  #kal-ter-app .kal-ter-lobby-stage.is-entering .kal-ter-door-hall { animation: none !important; transform: none !important; }
  #kal-ter-app .kal-ter-lobby-stage.is-entering .kal-ter-room-door.inactive {
    opacity: .28 !important;
    filter: saturate(.65) brightness(.68) !important;
    transform: none !important;
  }
  #kal-ter-app .kal-ter-lobby-stage.is-entering .kal-ter-room-door.opening {
    opacity: 1 !important;
    filter: brightness(1.13) !important;
    transform: scale(.985) !important;
  }

  #kal-ter-app .kal-ter-lobby-message {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 38px !important;
    margin: 9px 0 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(220,175,92,.24) !important;
    border-radius: 12px !important;
    background: rgba(9,15,19,.94) !important;
    color: #dcc79d !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
  }
}

@media (max-width: 360px) {
  #kal-ter-app .kal-ter-lobby-stage .kal-ter-room-door { height: 150px !important; min-height: 150px !important; }
}

/* 1.31.23 — canonical mobile entrance. WhatsApp sizing lives only in escape-room.css. */
@media (max-width: 900px) {
  .kal-ter-floating-wrap {
    position: fixed !important;
    z-index: 2147483000 !important;
    right: 0 !important;
    left: auto !important;
    top: 61dvh !important;
    bottom: auto !important;
    width: 24px !important;
    height: 128px !important;
    transform: translateY(-50%) !important;
    transform-origin: right center !important;
    overflow: visible !important;
    isolation: isolate !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
    transition: opacity .2s ease, transform .25s ease !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-entry {
    position: absolute !important;
    z-index: 5 !important;
    right: 0 !important;
    top: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 128px !important;
    display: block !important;
    transform: none !important;
    filter: none !important;
    perspective: 820px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-sign {
    position: absolute !important;
    z-index: 28 !important;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    border: 1px solid rgba(191,150,78,.72) !important;
    border-radius: 6px !important;
    background: rgba(28,21,16,.96) !important;
    color: #f1d7a4 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.28) !important;
    font: 700 10px/1.18 Rubik,Arial,sans-serif !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    direction: rtl !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-whisper {
    display: none !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-close {
    position: absolute !important;
    z-index: 30 !important;
    left: -24px !important;
    right: auto !important;
    top: 4px !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 0 1px !important;
    border: 1px solid rgba(191,150,78,.72) !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg,rgba(45,35,27,.98),rgba(18,14,11,.98)) !important;
    color: #ead3a0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06) !important;
    font: 700 17px/25px Arial,sans-serif !important;
    cursor: pointer !important;
    opacity: .96 !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-stone {
    position: absolute !important;
    z-index: 4 !important;
    right: -48px !important;
    top: 0 !important;
    width: 72px !important;
    height: 128px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 36px 0 0 8px !important;
    background:
      linear-gradient(90deg,rgba(255,255,255,.07),transparent 28%,rgba(0,0,0,.17)),
      repeating-linear-gradient(0deg,#564c44 0 21px,#3d3731 22px 24px) !important;
    box-shadow:
      inset 0 0 0 1px rgba(151,123,87,.32),
      inset 8px 0 11px rgba(0,0,0,.11),
      -4px 6px 14px rgba(0,0,0,.16) !important;
    transform: translateX(0) !important;
    transform-origin: right center !important;
    transition: transform .55s cubic-bezier(.16,.84,.14,1),box-shadow .3s ease !important;
    pointer-events: none !important;
  }

  .kal-ter-floating-wrap .kal-ter-stone {
    display: none !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-arch {
    position: absolute !important;
    z-index: 5 !important;
    left: 4px !important;
    top: 5px !important;
    right: auto !important;
    bottom: auto !important;
    width: 64px !important;
    height: 118px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid #29231e !important;
    border-right-width: 1px !important;
    border-bottom-width: 4px !important;
    border-radius: 32px 0 0 5px !important;
    background: #080604 !important;
    box-shadow: inset 0 0 0 1px rgba(191,151,97,.11),inset 0 0 14px rgba(0,0,0,.56) !important;
    perspective: 820px !important;
    pointer-events: none !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-dark {
    position: absolute !important;
    inset: 0 !important;
    background: #080604 !important;
    box-shadow: inset 0 0 16px rgba(0,0,0,.55) !important;
    transition: background .28s ease,box-shadow .28s ease !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-door {
    position: absolute !important;
    z-index: 6 !important;
    left: 0 !important;
    top: 0 !important;
    width: 64px !important;
    height: 116px !important;
    display: block !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 31px 0 0 2px !important;
    transform-origin: right center !important;
    transform: perspective(820px) rotateY(0deg) !important;
    background: url('art/entry_edge_mobile_right.webp') center / 64px 116px no-repeat !important;
    box-shadow: inset 6px 0 8px rgba(255,198,111,.02),inset -7px 0 9px rgba(0,0,0,.30) !important;
    backface-visibility: hidden !important;
    transition: transform .64s cubic-bezier(.15,.86,.14,1),filter .25s ease !important;
    pointer-events: none !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-plank,
  .kal-ter-floating-wrap .kal-ter-mini-hinge,
  .kal-ter-floating-wrap .kal-ter-mini-knob,
  .kal-ter-floating-wrap .kal-ter-mini-door::after,
  .kal-ter-floating-wrap .kal-ter-floating-entry::after {
    display: none !important;
    content: none !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-entry::before {
    content: "";
    position: absolute !important;
    z-index: 18 !important;
    left: 5px !important;
    top: 55px !important;
    width: 13px !important;
    height: 13px !important;
    border: 1px solid rgba(220,180,105,.74) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 38% 32%,#dfbd77,#95662b 48%,#3a2716 78%,#17100b) !important;
    box-shadow: 0 0 0 2px rgba(17,12,8,.50),0 0 8px rgba(215,159,69,.15) !important;
    pointer-events: none !important;
    transition: opacity .18s ease,transform .25s ease !important;
  }

  .kal-ter-floating-wrap::after {
    content: "";
    position: absolute !important;
    z-index: 1 !important;
    right: 0 !important;
    top: 9px !important;
    bottom: 9px !important;
    width: 18px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.03) 50%,transparent) !important;
    filter: blur(3px) !important;
    transform: translateX(-12px) !important;
    opacity: .55 !important;
  }

  .kal-ter-floating-wrap::before {
    content: "";
    position: fixed !important;
    z-index: -3 !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: radial-gradient(ellipse at 100% 61%,rgba(255,233,182,.27),rgba(255,189,78,.08) 17%,transparent 43%) !important;
    transition: opacity .3s ease !important;
  }

  .kal-ter-floating-wrap .kal-ter-mobile-edge-glow {
    position: absolute !important;
    z-index: 3 !important;
    right: -6px !important;
    top: 13px !important;
    width: 82px !important;
    height: 102px !important;
    border-radius: 74% 0 0 74% !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: radial-gradient(ellipse at 100% 50%,rgba(255,237,193,.68),rgba(255,193,77,.18) 38%,transparent 72%) !important;
    filter: blur(7px) !important;
    transition: opacity .24s ease,transform .46s cubic-bezier(.18,.82,.16,1) !important;
  }

  .kal-ter-floating-wrap.is-opening::before {
    opacity: 1 !important;
  }

  .kal-ter-floating-wrap.is-opening .kal-ter-mini-stone {
    transform: translateX(-25px) !important;
    box-shadow: inset 0 0 0 1px rgba(190,151,92,.38),-13px 6px 25px rgba(0,0,0,.20) !important;
  }

  .kal-ter-floating-wrap.is-opening .kal-ter-mini-dark {
    background: radial-gradient(ellipse at 84% 52%,#fff4ca 0,#ffd67f 28%,#f3a63d 53%,rgba(106,49,9,.35) 78%,#150c05 100%) !important;
    box-shadow: -13px 0 28px rgba(255,181,62,.27) !important;
  }

  .kal-ter-floating-wrap.is-opening .kal-ter-mobile-edge-glow {
    opacity: .90 !important;
    transform: translateX(-17px) scaleX(1.12) !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-entry.is-opening .kal-ter-mini-door {
    transform: perspective(820px) rotateY(76deg) !important;
    filter: brightness(.75) saturate(.90) !important;
  }

  .kal-ter-floating-wrap.is-opening .kal-ter-floating-entry::before {
    opacity: 0 !important;
    transform: translateX(-12px) scale(.7) !important;
  }

  .kal-ter-floating-wrap.is-hiding {
    opacity: 0 !important;
    transform: translateY(-50%) translateX(36px) !important;
  }
}

@media (max-width: 380px) {
  .kal-ter-floating-wrap {
    width: 22px !important;
    height: 118px !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-entry {
    width: 60px !important;
    min-width: 60px !important;
    height: 118px !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-sign {
    min-height: 36px !important;
    padding: 4px !important;
    font-size: 9.5px !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-stone {
    right: -44px !important;
    width: 66px !important;
    height: 118px !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-arch {
    width: 60px !important;
    height: 108px !important;
  }

  .kal-ter-floating-wrap .kal-ter-mini-door {
    width: 58px !important;
    height: 105px !important;
    background-size: 58px 105px !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-close {
    left: -23px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 16px !important;
  }

  .kal-ter-floating-wrap .kal-ter-floating-entry::before {
    left: 4px !important;
    top: 50px !important;
    width: 12px !important;
    height: 12px !important;
  }

  .kal-ter-floating-wrap.is-opening .kal-ter-mini-stone {
    transform: translateX(-23px) !important;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .kal-ter-floating-wrap,
  .kal-ter-floating-wrap::before,
  .kal-ter-floating-wrap .kal-ter-mini-stone,
  .kal-ter-floating-wrap .kal-ter-mini-door,
  .kal-ter-floating-wrap .kal-ter-mobile-edge-glow {
    transition-duration: .01ms !important;
  }
}