/* Page 48: the page's own layout (the six locks, the cue rows, the first time, the tap triptych, the gloat theatre and
   its tickets, the range, the tray + the wheel). Phones, the button and the tray live in 48_gl.css. */
.fxp code { font-size: 0.92em; color: #FFE7B8; }
.fx-bar__in { position: relative; }
.gl-snd { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 7px; cursor: pointer; font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; color: #fff; border: 2.5px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: 2px 3px 0 var(--ink); }
.gl-snd svg { width: 20px; height: 20px; display: block; }
.gl-snd .w { display: none; }
.gl-snd.is-on { background: linear-gradient(180deg, #7BEFA5, var(--green) 55%, #0F9442); }
.gl-snd.is-on .w { display: inline; } .gl-snd.is-on .x { display: none; }
.gl-snd span { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.fxp .fx-sechead > p { flex: 0 0 100%; max-width: none; margin-right: max(0px, calc(100% - 86ch)); }

/* ------------------------------------------------------------------ 01 today */
.td-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.td-cap { margin: 14px 2px 0; font-size: 13.5px; color: var(--cream-2); }
.td-cap b { color: var(--yellow); font-family: var(--f-display); font-weight: 400; letter-spacing: 0.04em; }
.locks { display: grid; gap: 9px; align-content: start; }
.locks h3 { margin-bottom: 4px; }
.lk { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 13px; background: rgba(0, 0, 0, 0.26); border: 2px solid rgba(255, 246, 224, 0.08); }
.lk i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; border: 2.5px solid var(--ink); background: #FFF6E0; font: 400 15px/1 var(--f-display); font-style: normal; color: var(--ink); box-shadow: 1px 2px 0 var(--ink); }
.lk b { display: block; font: 400 15px/1.1 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.lk span { font-size: 12.8px; color: var(--cream-2); line-height: 1.35; }
.lk--x { background: rgba(255, 51, 82, 0.12); border-color: rgba(255, 51, 82, 0.35); }
.lk--x i { background: #FF3352; color: #fff; }
.td-nothing { position: absolute; left: 440px; top: 112px; display: grid; justify-items: center; gap: 2px; padding: 6px 10px; border-radius: 10px; border: 2.5px dashed rgba(255, 246, 224, 0.5); background: rgba(13, 11, 22, 0.7); pointer-events: none; animation: pk-slam 0.3s var(--spring) both; }
.td-nothing b { font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; color: var(--yellow); }
.td-nothing span { font: 700 10px/1 var(--f-body); letter-spacing: 0.06em; color: var(--cream-2); }
.gl-house { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px 0 5px; border: 2px solid var(--ink); border-radius: 7px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); font: 800 9.5px/1 var(--f-body); letter-spacing: 0.05em; color: var(--ink); white-space: nowrap; }
.gl-house i { font-style: normal; font-size: 11px; }

/* ------------------------------------------------------------------ the cue rows (as page 46's approach rows) */
.ap { position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.82fr); gap: 22px; align-items: start; margin-top: 30px; padding: 18px; border: 4px solid var(--ink); border-radius: 28px;
  background: radial-gradient(70% 60% at 20% 0%, rgba(255, 210, 63, 0.07), transparent 60%), linear-gradient(180deg, #2E2850, #1E1A33 60%, #171329); box-shadow: 4px 9px 0 var(--ink); transition: box-shadow 0.2s; }
.ap.is-picked { box-shadow: 4px 9px 0 var(--ink), 0 0 0 4px var(--yellow); }
.ap > .ap-side > .fx-rec { right: -12px; top: -18px; }
.ap-side { display: grid; gap: 12px; align-content: start; }
.ap h3 { margin: 0; font: 400 26px/1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; }
.ap h3 small { display: block; margin-top: 4px; font: 700 11.5px/1.2 var(--f-body); letter-spacing: 0.06em; color: var(--cream-3); -webkit-text-stroke: 0; text-transform: uppercase; }
.ap .fx-letter { width: 42px; height: 42px; font-size: 24px; }
.ap-lead { margin: 0; font-size: 14.5px; color: var(--cream-2); }
.ap-lead b { color: #fff; }
.ap-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-try { font-size: 13px; color: var(--cream-3); }
.fx-btn svg { width: 16px; height: 16px; }

/* the option rows (shared by the first time, range, walk, tray, wheel) */
.dt-opts { display: grid; gap: 7px; }
.dt-o { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; cursor: pointer; text-align: left; font: inherit; color: inherit; border: 3px solid var(--ink); border-radius: 14px; background: linear-gradient(180deg, #2E2850, #221D3A); box-shadow: 2px 3px 0 var(--ink); transition: transform 0.12s var(--out), background 0.15s; }
.dt-o .fx-letter { width: 34px; height: 34px; font-size: 19px; box-shadow: 1px 3px 0 var(--ink); background: #4D4675; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.dt-o b { display: block; font: 400 16px/1.05 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.dt-o small { display: block; margin-top: 2px; font: 600 12.5px/1.3 var(--f-body); color: var(--cream-2); }
.dt-o:hover { transform: translateY(-1px); }
.dt-o.is-on { background: linear-gradient(180deg, #4D4677, #3A3458 60%, #2A2640); box-shadow: 2px 3px 0 var(--ink), 0 0 0 3px var(--yellow); }
.dt-o.is-on .fx-letter { background: var(--yellow); color: var(--ink); -webkit-text-stroke: 0; }
.dt-rec { padding: 4px 7px 3px; border-radius: 7px; border: 2px solid var(--ink); background: var(--mint); font: 400 11px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); white-space: nowrap; transform: rotate(3deg); }
.dt-why { margin: 0; font-size: 13.5px; color: var(--cream-2); }
.dt-why b { color: var(--mint); }

/* ------------------------------------------------------------------ the first time */
.ft { margin-top: 30px; display: grid; gap: 14px; scroll-margin-top: 70px; }
.ft-head p { margin: 2px 0 0; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.ft-side { display: grid; gap: 12px; }
.ft-stage { position: relative; }
.ft-train { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 18px; border-radius: 30px; background: rgba(10, 8, 22, 0.88); }
.ft-train[hidden] { display: none; }
.ft-card { width: 100%; max-width: 720px; padding: 14px; border: 3px solid var(--ink); border-radius: 18px; background: var(--sp-card); box-shadow: 3px 6px 0 var(--ink); }
.ft-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.ft-tabs span { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border: 2.5px solid var(--ink); border-radius: 9px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); font: 400 14px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; box-shadow: 2px 3px 0 var(--ink); }
.ft-tabs span.is-on { color: var(--ink); -webkit-text-stroke: 0; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); }
.ft-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ft-tp { position: relative; display: grid; gap: 4px; padding: 8px; border: 3px solid var(--ink); border-radius: 14px; background: radial-gradient(90% 90% at 50% 40%, #3A4A9A, #1B2563 60%, #121A44); box-shadow: 2px 4px 0 var(--ink); }
.ft-tp svg { width: 100%; height: auto; display: block; overflow: visible; }
.ft-tp b { font: 400 15px/1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ft-tp small { font: 600 12px/1.3 var(--f-body); color: var(--cream-2); }
.ft-tn { position: absolute; left: -8px; top: -9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--yellow); font: 400 14px/1 var(--f-display); color: var(--ink); }

/* ------------------------------------------------------------------ 03 the tap triptych */
.tri-cell figcaption { position: relative; }
.tri-cell .tm { position: absolute; right: 6px; top: 1px; padding: 4px 8px 3px; border-radius: 8px; border: 2px solid var(--ink); background: #120F20; font: 400 12px/1 var(--f-display); letter-spacing: 0.04em; color: var(--yellow); white-space: nowrap; }
.tri-cell p b { color: var(--mint); }

/* ------------------------------------------------------------------ 03.2 the theatre + the tickets */
.th { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 22px; align-items: stretch; }
.th-stage { position: relative; overflow: hidden; border: 4px solid var(--ink); border-radius: 26px; background: #0A0C22; aspect-ratio: 460 / 200; box-shadow: 4px 9px 0 var(--ink); }
.fxp .th-bg { position: absolute; max-width: none; display: block; }
.th-svg, .th-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.th-words { position: absolute; inset: 0; pointer-events: none; }
.th-words .sfxw { position: absolute; }
.th-bar { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.th-tag { position: absolute; right: 14px; top: 12px; padding: 6px 11px 5px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, #FFB0DA, var(--pink)); font: 400 15px/1 var(--f-display); letter-spacing: 0.06em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; box-shadow: 2px 4px 0 var(--ink); transform: rotate(4deg); }
.th-tag.is-today { background: linear-gradient(180deg, #C4FFD6, var(--mint)); color: var(--ink); -webkit-text-stroke: 0; }
.th-info { display: grid; gap: 10px; align-content: start; padding: 18px; border: 4px solid var(--ink); border-radius: 24px; background: linear-gradient(180deg, #2E2850, #1E1A33 60%, #171329); box-shadow: 3px 8px 0 var(--ink); }
.th-from { font: 800 12px/1 var(--f-body); letter-spacing: 0.14em; color: var(--yellow); }
.th-name { margin: 0; font: 400 32px/1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.th-line { margin: 0; font-size: 14px; color: var(--cream-2); }
.th-poses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.th-p { position: relative; margin: 0; overflow: hidden; border: 2.5px solid var(--ink); border-radius: 11px; background: radial-gradient(90% 100% at 50% 30%, #2B3A86, #141B48); aspect-ratio: 190 / 92; }
.th-p svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.th-p figcaption { position: absolute; left: 4px; top: 3px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); font: 400 10px/1 var(--f-display); color: var(--ink); }
.th-kc { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.th-keep { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px; cursor: pointer; font: 400 16px/1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); border: 3px solid var(--ink); border-radius: 10px; background: rgba(255, 255, 255, 0.06); box-shadow: 2px 4px 0 var(--ink); }
.th-keep svg { width: 18px; height: 18px; opacity: 0.25; }
.th-keep.is-on { color: var(--ink); background: linear-gradient(180deg, #C4FFD6, var(--mint)); }
.th-keep.is-on svg { opacity: 1; }
.tk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.tk-t { position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 5px 8px; cursor: pointer; text-align: center; font: inherit; color: inherit; border: 3px solid var(--ink); border-radius: 15px; background: linear-gradient(180deg, #3A3458, #241F3C); box-shadow: 2px 4px 0 var(--ink); transition: transform 0.14s var(--out), box-shadow 0.15s; }
.tk-t:hover { transform: translateY(-2px); }
.tk-t.is-on { background: linear-gradient(180deg, #4D4677, #3A3458); box-shadow: 2px 4px 0 var(--ink), 0 0 0 3px var(--yellow); transform: translateY(-3px); }
.tk-i { width: 34px; height: 34px; display: block; }
.tk-i svg { width: 100%; height: 100%; display: block; }
.tk-t small { font: 800 9.5px/1.1 var(--f-body); letter-spacing: 0.06em; color: var(--cream-3); }
.tk-t b { font: 400 13px/1.05 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 2.6px var(--ink); paint-order: stroke fill; }
.tk-t em { margin-top: 2px; padding: 2px 6px 1px; border: 2px solid var(--ink); border-radius: 6px; background: linear-gradient(180deg, #FFB0DA, var(--pink)); font: 400 10px/1 var(--f-display); font-style: normal; letter-spacing: 0.06em; color: #fff; }
.tk-t.is-today em { background: var(--mint); color: var(--ink); }
.tk-f { position: absolute; right: -6px; top: -9px; padding: 2px 5px 1px; border: 2px solid var(--ink); border-radius: 6px; background: #FF8A1F; font: 400 10px/1 var(--f-display); font-style: normal; letter-spacing: 0.05em; color: #fff; transform: rotate(6deg); }
.gs { margin-top: 18px; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 18px; background: rgba(0, 0, 0, 0.3); scroll-margin-top: 70px; }
.gs-row { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gs-lbl { font: 400 16px/1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.gs-rec { position: static; transform: rotate(3deg); }
.gs-note { margin-left: auto; font-size: 13px; color: var(--cream-2); }
.gs-note b { color: #FFB066; }

/* ------------------------------------------------------------------ 04 the range */
.rg { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); gap: 22px; align-items: start; }
.rg-side { display: grid; gap: 12px; }
.rg-drive { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rg-drive input[type="range"] { flex: 1; min-width: 140px; accent-color: #FFD23F; height: 26px; }
.rg-read { min-width: 66px; padding: 6px 10px 5px; border: 3px solid var(--ink); border-radius: 10px; background: #120F20; font: 400 18px/1 var(--f-display); color: var(--cream); text-align: center; }
.rg-read.is-in { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); }
.rg-walk { display: grid; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 2px dashed rgba(255, 246, 224, 0.15); scroll-margin-top: 70px; }
.rg-walk h4, .wh h4 { margin: 0; font: 400 17px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; }

/* ------------------------------------------------------------------ 05 the tray + the wheel */
.ty { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); gap: 22px; align-items: start; }
.ty-side { display: grid; gap: 12px; }
.wh { display: grid; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 2px dashed rgba(255, 246, 224, 0.15); scroll-margin-top: 70px; }
.wh-card { padding: 12px; border: 3px solid var(--ink); border-radius: 16px; background: var(--sp-card); box-shadow: 3px 6px 0 var(--ink); }
.wh-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.wh-top span { font: 800 10.5px/1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); }
.wh-top b { font: 400 15px/1 var(--f-display); letter-spacing: 0.05em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.wh-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wh-p { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.wh-ring { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 40% 30%, #ACA3DE, #5B528F 55%, #2E2852); box-shadow: 2px 4px 0 var(--ink); }
.wh-ring svg { width: 34px; height: 34px; display: block; }
.wh-p b { font: 400 12px/1.05 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 2.4px var(--ink); paint-order: stroke fill; }
.wh-p small { font: 800 9px/1 var(--f-body); letter-spacing: 0.06em; color: var(--cream-3); }
.wh-g { position: absolute; right: calc(50% - 32px); top: -6px; width: 18px; height: 18px; }
.wh-g svg { width: 100%; height: 100%; display: block; }
#oursPhone { min-width: 0; }
.fx-ours { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.gl-foot { margin-top: 26px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .ap { grid-template-columns: minmax(0, 1fr); }
  .tk { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .td-grid, .ft-grid, .th, .rg, .ty { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ap { padding: 10px; border-radius: 22px; gap: 14px; }
  .tk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-panels { grid-template-columns: minmax(0, 1fr); }
  .dt-o { grid-template-columns: 32px minmax(0, 1fr); } .dt-o .dt-rec { position: absolute; right: -4px; top: -10px; }
  .th-name { font-size: 26px; }
  .gs-note { margin-left: 0; }
  .gl-snd span { display: none; }
  .th-bar { top: 8px; bottom: auto; left: 8px; }
  .th-bar .fx-btn { height: 28px; font-size: 13px; padding: 0 8px; }
  .th-tag { top: 8px; right: 8px; font-size: 12px; }
}
/* review stills (?shot=): no CSS motion */
.rv *, .rv *::before, .rv *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }