/* Little Words — Travel Adventures v2 (shared) */
.stage { background:#0f1a2e; }
.ta-box { position:absolute; left:50%; top:50%; translate:-50% -50%; overflow:hidden; background:#bde3f5; contain:layout paint; }
.ta-scene { position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .6s ease, visibility .6s; }
.ta-scene.is-active { opacity:1; visibility:visible; pointer-events:auto; }
.ta-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; z-index:0; }
.ta-layer { position:absolute; inset:0; z-index:1; }

/* every placed node is anchored bottom-center at (left,top) so the config
   coordinates read as "where the feet / base sit" */
.ta-sprite, .ta-kid, .ta-hot, .ta-vehicle { position:absolute; translate:-50% -100%; will-change:transform; }
.ta-sprite img, .ta-hot img, .ta-kid img { display:block; width:100%; height:auto; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.ta-sprite.is-flipped { transform:scaleX(-1); }
.ta-kid { z-index:20; }
.ta-kid.is-flipped { transform:scaleX(-1); }

.ta-vehicle { z-index:10; }
.ta-vehicle-body, .ta-vehicle-front { position:absolute; inset:0; }
.ta-vehicle-body img, .ta-vehicle-front img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .09s linear; }
.ta-vehicle-front { z-index:4; pointer-events:none; }
.ta-seats { position:absolute; inset:0; z-index:3; }
.ta-seat { position:absolute; translate:-50% -100%; height:auto; transition:opacity .25s; }
/* a traveler crossing behind the vehicle body (z below the vehicle) never draws across the hull */
.ta-kid[data-layer="behind"] { pointer-events:none; }
/* destination doorway: the first area's own interior seen through the opening; a traveler who steps
   over the threshold lives inside .ta-door-clip, so the wall around the door hides what is outside it */
.ta-door-interior { position:absolute; z-index:4; background-size:cover; background-position:50% 62%; box-shadow:inset 0 0 40px rgba(20,14,10,.45); pointer-events:none; }
.ta-door-clip { position:absolute; z-index:20; pointer-events:none; }

/* interactive objects: big forgiving hit area, no visible chrome */
.ta-hot { border:0; background:transparent; padding:0; cursor:pointer; z-index:30; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.ta-hot::before { content:""; position:absolute; inset:calc(-1 * clamp(6px, 1.4vw, 14px)); min-width:44px; min-height:44px; border-radius:24px; }
.ta-hot.is-off { pointer-events:none; }
.ta-hot img { transition:filter .3s; }
.ta-hot:active img { filter:brightness(1.06); }
.ta-hot.is-hinting img { animation:ta-hint 1.6s ease-in-out infinite; }
.ta-hot.ta-hot-area::after { content:""; position:absolute; left:50%; top:50%; width:140%; height:140%; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,246,205,.55), rgba(255,246,205,0)); opacity:0; pointer-events:none; }
.ta-hot.is-hinting.ta-hot-area::after { animation:ta-hint-area 1.8s ease-in-out infinite; }
@keyframes ta-hint { 0%,100% { filter:drop-shadow(0 0 0 rgba(255,236,170,0)) scale(1); } 50% { filter:drop-shadow(0 0 14px rgba(255,236,170,.95)) scale(1.04); } }
@keyframes ta-hint-area { 0%,100% { opacity:0; transform:scale(.9); } 50% { opacity:1; transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .ta-hot.is-hinting img { animation:none; filter:drop-shadow(0 0 10px rgba(255,236,170,.9)); } .ta-hot.is-hinting.ta-hot-area::after { animation:none; opacity:.8; } }

/* soft glow helper used by scripts */
.ta-glow { filter:drop-shadow(0 0 12px rgba(255,240,180,.9)); }
.ta-sparkle { position:absolute; width:6px; height:6px; border-radius:50%; background:#fff8d6; box-shadow:0 0 8px 3px rgba(255,240,170,.8); pointer-events:none; z-index:40; }

/* ---------- grown-up setup ---------- */
.ta-setup { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(30,42,74,.42); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s; }
.ta-setup.is-show { opacity:1; pointer-events:auto; }
.ta-setup-card { background:var(--cream,#FFFBF5); border-radius:24px; box-shadow:0 20px 60px rgba(30,42,74,.35); width:min(560px,100%); max-height:100%; overflow-x:hidden; overflow-y:auto; padding:20px 20px 16px; }
.ta-setup-card h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:1.35rem; margin:0 0 10px; color:var(--navy,#1E2A4A); }
.ta-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--border,#EDE6DC); flex-wrap:wrap; }
.ta-row > b { font-size:.95rem; color:var(--navy,#1E2A4A); }
.ta-row-decks { flex-direction:column; align-items:stretch; }
.ta-seg { display:inline-flex; gap:6px; }
.ta-seg button { min-width:44px; min-height:40px; padding:0 12px; border-radius:12px; border:1px solid var(--border,#EDE6DC); background:#fff; font-weight:700; color:var(--navy,#1E2A4A); cursor:pointer; }
.ta-seg button[aria-pressed="true"] { background:#3F7A5C; color:#fff; border-color:#3F7A5C; }
.ta-row-decks > b { width:100%; min-width:0; }
.ta-decks { display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; }
.ta-deck-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.ta-deck-row[hidden] { display:none; }
.ta-deck-row span { min-width:64px; font-weight:700; font-size:.9rem; color:var(--navy,#1E2A4A); }
.ta-deck-row select { flex:1 1 100%; min-width:0; width:100%; max-width:100%; min-height:44px; border-radius:10px; border:1px solid var(--border,#EDE6DC); background:#fff; padding:0 8px; font:inherit; }
.ta-dot { display:inline-block; width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.ta-start { width:100%; margin-top:10px; }
.ta-setup-note { margin:10px 0 0; font-size:.8rem; color:var(--muted,#6B6B6B); line-height:1.4; }

/* ---------- compact practice panel ---------- */
.ta-practice { position:absolute; z-index:55; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); width:min(300px, 46%); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; transform:translateY(12px); }
.ta-practice[data-dock="right"] { right:10px; }
.ta-practice[data-dock="left"] { left:10px; }
.ta-practice[data-dock="top-right"] { right:10px; bottom:auto; top:10px; }
.ta-practice[data-dock="top-left"] { left:10px; bottom:auto; top:10px; }
.ta-practice.is-show { opacity:1; pointer-events:auto; transform:none; }
.ta-practice-card { background:rgba(255,251,245,.97); border-radius:20px; box-shadow:0 12px 40px rgba(30,42,74,.3); padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.ta-player { align-self:flex-start; display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--muted,#6B6B6B); }
.ta-card-picture { width:min(150px, 58%); aspect-ratio:1; border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--border,#EDE6DC); }
.ta-card-picture img { width:100%; height:100%; object-fit:contain; display:block; }
.ta-card-word { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(1.5rem, 4.2vw, 2.2rem); color:var(--navy,#1E2A4A); line-height:1.1; text-align:center; }
.ta-card-word.is-long { font-size:clamp(1.15rem, 3.2vw, 1.7rem); }
.ta-tries { display:flex; gap:8px; }
.ta-tries[hidden] { display:none; }
/* tries indicator: 44x44 hit area (WCAG target size) around a 16px dot */
.ta-try { position:relative; width:44px; height:44px; border-radius:50%; border:0; background:transparent; padding:0; cursor:pointer; display:grid; place-items:center; }
.ta-try::before { content:""; position:absolute; inset:0; border-radius:50%; }
.ta-try::after { content:""; width:16px; height:16px; box-sizing:border-box; border-radius:50%; border:2px solid #c9c1b5; background:#fff; }
.ta-try.is-on::after { background:#6BAF8D; border-color:#6BAF8D; }
.ta-practice-actions { display:flex; gap:8px; width:100%; }
.ta-practice-actions button { flex:1; min-height:46px; border-radius:14px; border:1px solid var(--border,#EDE6DC); background:#fff; font-weight:800; font-size:.95rem; color:var(--navy,#1E2A4A); cursor:pointer; }
.ta-practice-actions button.primary { background:#3F7A5C; color:#fff; border-color:#3F7A5C; box-shadow:0 4px 0 #2E5B44; }
.ta-practice-actions button.primary:active { transform:translateY(2px); box-shadow:0 2px 0 #2E5B44; }
@media (max-width:640px) { .ta-practice { width:min(260px, 52%); } .ta-card-picture { width:100px; } }

/* ---------- adult-facing turn indicator ---------- */
.ta-turn-pill { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border,#EDE6DC); border-radius:999px; padding:4px 10px; font-size:.8rem; font-weight:700; color:var(--navy,#1E2A4A); }
.ta-turn-pill[hidden] { display:none; }
.ta-turn-pill i { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ---------- grown-up sheet ---------- */
.ta-grownup { position:relative; }
.ta-grownup-sheet { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border,#EDE6DC); border-radius:14px; box-shadow:0 12px 36px rgba(30,42,74,.25); padding:10px; width:200px; display:flex; flex-direction:column; gap:6px; z-index:80; }
.ta-grownup-sheet[hidden] { display:none; }
.ta-grownup-sheet p { margin:0 0 2px; font-size:.75rem; font-weight:800; color:var(--muted,#6B6B6B); text-transform:uppercase; letter-spacing:.04em; }
.ta-grownup-sheet button, .ta-grownup-sheet a { min-height:40px; border-radius:10px; border:1px solid var(--border,#EDE6DC); background:#fff; font:inherit; font-weight:700; color:var(--navy,#1E2A4A); text-decoration:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ta-grownup-sheet .ta-finish-confirm { background:#B95233; color:#fff; border-color:#B95233; }
.ta-grownup-sheet [hidden] { display:none; }

/* ---------- ending ---------- */
.ta-end { position:absolute; left:0; right:0; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:58; display:flex; justify-content:center; pointer-events:none; }
.ta-end[hidden] { display:none; }
.ta-end-card { pointer-events:auto; display:flex; gap:10px; background:rgba(255,251,245,.92); padding:10px; border-radius:20px; box-shadow:0 12px 40px rgba(30,42,74,.3); }
.ta-end-card .big-btn { font-size:1rem; padding:12px 18px; }

/* travel parallax helpers */
.ta-parallax { position:absolute; inset:0; overflow:hidden; }
.ta-pan { position:absolute; bottom:0; left:0; height:auto; min-height:100%; width:auto; min-width:140%; will-change:transform; }
.ta-bubble { position:absolute; border-radius:50%; border:2px solid rgba(255,255,255,.85); background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,.15) 60%, rgba(255,255,255,0)); pointer-events:none; z-index:40; }

.ta-ico{width:1.1em;height:1.1em;vertical-align:-0.18em;margin-right:.3em;display:inline-block}

/* short viewports (phones in landscape): compact setup card, word card docked to the top edge so the riders stay visible */
@media (max-height: 520px) {
  .ta-setup { padding:8px; align-items:flex-start; }
  .ta-setup-card { padding:10px 14px 10px; border-radius:18px; }
  .ta-setup-card h2 { font-size:1.05rem; margin:0 0 6px; }
  .ta-seg button, .ta-deck-row select { min-height:34px; }
  .ta-setup-note { display:none; }
  .ta-practice[data-dock="right"], .ta-practice[data-dock="left"] { bottom:auto; top:8px; width:min(230px, 30%); }
  .ta-practice-card { padding:8px 8px 8px; gap:5px; }
  .ta-card-picture { width:min(84px, 46%); }
  .ta-card-word { font-size:1.15rem; }
  .ta-card-word.is-long { font-size:.95rem; }
  .ta-practice-actions button { min-height:40px; font-size:.82rem; }
  .ta-try { width:40px; height:40px; }
  .ta-try::after { width:12px; height:12px; }
}

/* the stage owns its hotspots: no juice lift shadow, bob or nudge may move an anchored hotspot */
.ta-box .lwj-lift { box-shadow:none !important; }
.ta-box .lwj-primary, .ta-box .lwj-nudge { animation:none !important; }
.ta-box .ta-hot, .ta-box .ta-sprite, .ta-box .ta-kid, .ta-box .ta-vehicle { translate:-50% -100% !important; }

/* portrait phones/tablets: keep the card and end panel clear of the home indicator */
@media (orientation: portrait) { .ta-practice { bottom:calc(26px + env(safe-area-inset-bottom, 0px)); } .ta-end { bottom:calc(28px + env(safe-area-inset-bottom, 0px)); } }

/* idle hint: every tappable (image hotspots too) gets a soft pulsing halo, not just a faint shadow */
.ta-hot.is-hinting::after { content:""; position:absolute; left:50%; top:50%; width:170%; height:170%; min-width:72px; min-height:72px; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,246,205,.75), rgba(255,246,205,0)); animation:ta-hint-ring 1.6s ease-in-out infinite; pointer-events:none; z-index:-1; }
@keyframes ta-hint-ring { 0%,100% { opacity:.35; scale:.9; } 50% { opacity:1; scale:1.1; } }

/* Keep the full scene and a readable practice card together on portrait screens. */
@media (orientation: portrait) {
  body.lw-travel-v2 .stage { overflow-y:auto; overscroll-behavior:contain; background:#dff4ff; }
  body.lw-travel-v2 .ta-box { position:relative; left:auto; top:auto; translate:none; margin:16px auto 0; }
  /* centre the word card in the space left under the scene instead of leaving a dead band (audit #14) */
  body.lw-travel-v2 .stage { display:flex; flex-direction:column; min-height:0; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.lw-travel-v2 .ta-box { flex:0 0 auto; }
  body.lw-travel-v2 .ta-practice[data-dock] { position:relative; inset:auto; flex:0 0 auto; width:min(440px,calc(100% - 24px)); margin:auto; padding:16px 0; }
  body.lw-travel-v2 .ta-card-picture { width:min(130px,36vw); }
  body.lw-travel-v2 .ta-practice-actions button { min-height:48px; }
}
.ta-deck-row select { min-width:0; }
.ta-grownup-sheet { max-height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; width:min(340px,calc(100vw - 24px)); }
.stage-bar:has(.ta-grownup-sheet:not([hidden])) { z-index:90; }
.ta-grownup-sheet .lw-editorial-note-game { width:100%; margin:8px 0 0; font-size:13px; }

.ta-grownup-sheet .lw-editorial-note-game p { text-transform:none; letter-spacing:normal; font-size:13px; font-weight:500; color:var(--body); }
.ta-grownup-sheet .lw-editorial-note-game a { display:inline; min-height:0; padding:0; box-shadow:none; border:0; border-radius:0; background:transparent; text-decoration:underline; text-align:left; font:inherit; font-weight:700; }