/* Playability pass: readable decisions, balanced scores, and purposeful motion. */
:root { --focus-ring: #f7d578; }
button { touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ui-primary, .ui-secondary, .btn-banner, .btn-tile, .home-utility-card {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out;
}
.ui-primary:active, .ui-secondary:active, .btn-banner:active, .btn-tile:active, .home-utility-card:active {
  transform: translateY(2px) scale(.985);
}
/* Put the available game first. Account features retain their own signed-in menu. */
body.guest-mode #screen-home .home-player-progress,
body.guest-mode #screen-home .home-trail { display: none; }
body.guest-mode #screen-home .home-band { height: 180px; }
body.guest-mode #screen-home .home-wordmark-plaque { margin-top: -34px; }
.guest-practice { display:flex; align-items:center; gap:12px; width:100%; margin:12px 0;
  padding:14px; border:1px solid #a18b56; border-radius:14px; background:#fff8df; color:#244432; text-align:left; }
.guest-practice > span:first-child { font-size:28px; color:#9c6e21; }
.guest-practice > span:nth-child(2) { flex:1; }
.guest-practice strong { display:block; font:750 16px var(--font-body); }
.guest-practice small { display:block; margin-top:3px; font:500 13px var(--font-body); }
.difficulty-intro { font-size:16px; }
.difficulty-option span { line-height:1.35; }
/* Battle hierarchy: identity / points / turn -> board -> instruction / hand. */
#screen-game #header-bar { min-height:44px; height:44px; border:0; background:#112f27; color:#f9ebc5; }
#screen-game #header-bar .wordmark { color:#f9ebc5; font-size:19px; }
#screen-game #header-bar .round-label { color:#e7d6a3; font:700 11px var(--font-body); }
#screen-game #menu-btn { width:44px; height:44px; color:#f4dfa1; }
#screen-game #menu-btn svg { fill:currentColor; stroke:currentColor; }
#screen-game #opp-strip { display:none; }
#battle-scoreboard { display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:8px; flex:none;
  position:relative; z-index:2; padding:6px 10px 9px; color:#f7eac9; background:#112f27; border-bottom:1px solid #a28b4f; }
.battle-player { display:grid; grid-template-columns:1fr auto; gap:0 6px; align-items:center;
  padding:6px 9px; border:1px solid #71856a; border-radius:10px; background:#1e3b31; }
.battle-player > span { font-size:11px; font-weight:800; letter-spacing:.5px; }
.battle-player > strong { grid-column:2; grid-row:1/3; font:800 28px/1 var(--font-body); font-variant-numeric:tabular-nums; }
.battle-player > small { font-size:9px; color:#d5dac4; letter-spacing:1px; }
.battle-player.is-active { border-color:#efd080; background:#315240; box-shadow:inset 0 -3px #efd080; }
.battle-round { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; text-align:center; }
.battle-round > span { font:850 11px var(--font-body); color:#ffe6a2; letter-spacing:.4px; }
.battle-round > small { font-size:11px; color:#d9dfcf; }
#screen-game .board-rows { background:linear-gradient(#09221840,#09221880); }
#screen-game #opp-columns, #screen-game #player-columns { flex-grow:1; min-height:0; align-items:flex-start; }
#screen-game #opp-columns .lane-track, #screen-game #player-columns .lane-track {
  height:100%; min-height:0; padding-top:8px;
}
/* Size every lane to the available board height, including unlocked fourth slots.
   Fixed card heights otherwise overflow beneath the totals and move controls. */
#screen-game .lane-col { height:100%; min-height:0; }
#screen-game .lane-col > .board-card, #screen-game .lane-col > .slot {
  flex:1 1 0; height:auto; min-height:0; max-height:52px;
}
#screen-game .total-chip { opacity:1; min-width:34px; height:23px; border:1px solid #b4b69b; background:#243c32; color:#fff6d8;
  font:800 14px/21px var(--font-body); box-shadow:0 2px 3px #07190b77; }
#screen-game .total-chip.leading { background:#f1cd78; color:#233925; border-color:#fff1bd; }
#screen-game .total-chip.trailing { background:#30443a; color:#f5eddb; }
#screen-game .total-chip.empty-zero { opacity:.85; color:#dbe3ce; }
#screen-game .totals-row { height:27px; min-height:27px; }
#screen-game .slot { border:1px solid #d3ce9f66; background-color:#183d3055; }
#screen-game .slot.legal { position:relative; border:2px solid #ffe093; background:#b6c56533;
  animation:none; box-shadow:inset 0 0 12px #ffe89933,0 0 4px #d6d18144; }
#screen-game .slot.legal:not(.wild-growth-locked):not(.guardian-sealed)::before {
  content:'+'; position:absolute; inset:0; display:grid; place-items:center; color:#ffecaf; font:400 25px var(--font-body); }
#screen-game .slot.legal:active { background:#f0d37466; }
#screen-game .slot.legal::after { display:none; }
#screen-game .hand-card.selected { outline:3px solid #f2d27d; outline-offset:1px;
  box-shadow:0 0 0 5px #275a3d,0 5px 14px #13291666; }
#screen-game .oasis-label { font-family:var(--font-body); font-weight:850; letter-spacing:.1px; }
#screen-game .hand-card .cname { font:800 10px var(--font-body); }
#screen-game #move-status-overlay { position:relative; flex:none; left:auto; bottom:auto!important; transform:none;
  width:100%; min-height:44px; padding:3px 8px; gap:6px; background:#143b2e; border-top:1px solid #b4a76a88; }
#screen-game #current-move-chip { flex:1; min-width:0; min-height:38px; padding:7px 10px;
  font:800 12px var(--font-body); border:1px solid #d4b66f; border-radius:9px; color:#fff0c8; background:#244d39; }
#screen-game #current-move-chip:disabled { opacity:.8; cursor:default; }
#screen-game #progress-chip { font:800 11px var(--font-body); color:#263e2a; background:#f7dfa3; padding:6px 8px; }
#screen-game #scout-choice { min-height:38px; padding:6px 9px; font:800 11px var(--font-body); }
#battle-guidance { flex:none; position:relative; z-index:2; padding:9px 14px 10px; min-height:66px;
  background:#f9f0d8; color:#233c2d; border-bottom:1px solid #c6b67c; }
#battle-next-step { display:block; font:800 16px/1.2 var(--font-body); }
#battle-card-tip { display:block; margin-top:3px; font:500 12px/1.3 var(--font-body); color:#40553e; }
#screen-game #hand-tray { border-top:0; background:#efe2bd; }
#screen-game #hand-cards { padding-top:9px; }
.tutorial-active #battle-guidance { display:none; }
/* One map composition: fixed navigation and destination, scrollable painted world. */
#screen-story.is-active { height:100dvh; min-height:0; overflow:hidden; }
#story-map-body.trail-map { display:flex; flex-direction:column; width:100%; height:100%; min-height:0;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background:#102f25; }
#story-map-body.trail-map .story-chrome { position:relative; top:auto; flex:none; z-index:4;
  padding:0; border:0; background:#102f25; box-shadow:0 4px 15px #00140e55; }
#story-map-body.trail-map .story-top { display:grid; grid-template-columns:44px 1fr 78px; gap:8px;
  min-height:76px; padding:9px 12px 5px; border:0; background:none; text-align:left; }
#story-map-body.trail-map .story-top h1 { margin:0; color:#fff0cc; font:22px/1.15 var(--font-display); letter-spacing:0; text-shadow:none; }
#story-map-body.trail-map .story-top p { margin:5px 0 0; color:#c5d6bd; font:750 10px/1.3 var(--font-body); letter-spacing:1px; }
#story-map-body.trail-map .story-top button { width:44px; height:44px; border:1px solid #839277; border-radius:12px;
  background:#204b37; color:#ffebba; box-shadow:none; font:400 30px/1 var(--font-body); }
#story-map-body.trail-map #story-chapter-select { width:78px; font:700 12px var(--font-body); }
#story-map-body.trail-map .trail-progress { display:flex; align-items:center; gap:10px; padding:5px 14px 13px;
  color:#d5ddc8; font:650 11px var(--font-body); }
#story-map-body.trail-map .trail-progress > div { flex:1; height:6px; background:#345142; overflow:hidden; border-radius:4px; }
#story-map-body.trail-map .trail-progress i { display:block; height:100%; background:#eacb79; border-radius:4px; }
#story-map-body.trail-map .trail-progress strong { font-weight:750; color:#f9e8bc; }
#story-map-body.trail-map .trail-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#afaa77 #163e2e; }
#story-map-body.trail-map .story-trail { margin:0; width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:var(--story-aspect);
  border:0; border-radius:0; background-image:var(--story-art); background-size:100% 100%; background-position:center; box-shadow:none; overflow:hidden; }
#story-map-body.trail-map .story-trail::before, #story-map-body.trail-map .story-trail::after { display:none; }
#story-map-body.trail-map .story-node { position:absolute; display:grid; place-items:center;
  left:calc(var(--node-x)*1%); top:calc(var(--node-y)*1%); width:46px; height:46px; min-width:44px; min-height:44px;
  padding:0; transform:translate(-50%,-50%); border:2px solid #77917a; border-radius:50%;
  background:linear-gradient(#315442,#193b2c); color:#e7edd7; opacity:1; filter:none;
  box-shadow:0 3px 0 #10251c,0 4px 8px #001d10bb; animation:none; z-index:2; }
#story-map-body.trail-map .story-node::before, #story-map-body.trail-map .story-node::after { display:none; }
#story-map-body.trail-map .story-node.locked { border-color:#7c8c7c; background:linear-gradient(#536056,#334638); color:#c9d1c3; filter:none; }
#story-map-body.trail-map .story-node.cleared, #story-map-body.trail-map .story-node.mastered { border-color:#aec898; color:#fbf2d2; }
#story-map-body.trail-map .story-node.current { width:50px; height:50px; border:3px solid #fff0bf; background:linear-gradient(#f3d384,#c49b47);
  color:#203c29; box-shadow:0 3px 0 #614c25,0 0 0 4px #214731cc,0 6px 16px #081b0c99; z-index:3; }
#story-map-body.trail-map .story-node:focus-visible { outline:3px solid white; outline-offset:5px; }
#story-map-body.trail-map .story-node-number { position:static; display:block; width:auto; height:auto; margin:0; padding:0;
  border:0; background:none; transform:none; color:inherit; font:850 19px/1 var(--font-body); text-shadow:none; box-shadow:none; }
#story-map-body.trail-map .story-node-marks { display:none; }
#story-map-body.trail-map .story-node-kicker { position:absolute; top:auto; bottom:-3px; right:-4px; left:auto; display:grid; place-items:center;
  width:18px; height:18px; border:1px solid #b7d09a; border-radius:50%; background:#214c33; color:#fff0bb; font:850 12px var(--font-body); transform:none; }
#story-map-body.trail-map .story-preview { position:relative; inset:auto; display:flex; flex-direction:column; flex:none; gap:10px;
  padding:14px 16px 12px; margin:0; width:100%; max-width:none; border:0; border-top:1px solid #cdb879; border-radius:0;
  background:#f5ebd0; color:#244432; box-shadow:0 -4px 18px #001d1055; z-index:4; }
#story-map-body.trail-map .story-preview::before, #story-map-body.trail-map .story-preview::after { display:none; }
#story-map-body.trail-map .story-preview-copy { min-width:0; }
#story-map-body.trail-map .story-preview-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#59683f; font:800 11px var(--font-body); letter-spacing:1px; }
#story-map-body.trail-map .story-preview-heading > span:first-child { color:#496138; }
#story-map-body.trail-map .story-preview h2 { margin:5px 0 4px; color:#183e2b; font:750 23px/1.1 var(--font-body); text-shadow:none; letter-spacing:0; }
#story-map-body.trail-map .story-preview p { margin:0; color:#405439; font:650 12px/1.35 var(--font-body); }
#story-map-body.trail-map .story-preview-copy > small { display:block; margin-top:4px; color:#526341; font:500 12px/1.3 var(--font-body); }
#story-map-body.trail-map .story-preview-copy > small { text-transform:none; letter-spacing:0; }
#story-map-body.trail-map .story-preview-marks { display:flex; gap:5px; }
#story-map-body.trail-map .story-preview-marks i { width:12px; height:12px; border:1px solid #8a865b; border-radius:3px;
  background:#ded7b9; clip-path:none; transform:rotate(45deg); box-shadow:none; }
#story-map-body.trail-map .story-preview-marks i.earned { background:#6b924c; border-color:#426735; }
#story-map-body.trail-map #story-play { display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:48px; height:auto; padding:11px 17px; border:1px solid #758c51; border-radius:12px;
  background:linear-gradient(#356e46,#205238); color:#fff2cc; box-shadow:0 3px 0 #183c27; font:800 17px var(--font-body); text-transform:none; letter-spacing:0; }
#story-map-body.trail-map #story-play::before, #story-map-body.trail-map #story-play::after { display:none; }
#story-map-body.trail-map #story-play > span { font:inherit; text-transform:none; letter-spacing:0; }
#story-map-body.trail-map .story-chapter-picker { position:absolute; inset:80px 10px auto; z-index:10; max-height:70%; overflow:auto;
  padding:14px; border:1px solid #c0b47b; border-radius:16px; color:#f6e9c6; background:#123526; box-shadow:0 12px 40px #00140ecc; }
#story-map-body.trail-map .story-chapter-picker[hidden] { display:none; }
#story-map-body.trail-map .story-chapter-picker-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#story-map-body.trail-map #story-chapter-close { width:44px; height:44px; background:#28553b; border:1px solid #b3bb8a; border-radius:10px; color:#f5e9c7; font-size:24px; }
@media(max-height:660px) {
  #story-map-body.trail-map .story-preview { padding:10px 12px; gap:7px; }
  #story-map-body.trail-map .story-preview h2 { font-size:20px; }
  #story-map-body.trail-map .story-top { min-height:64px; }
}
.card-flight { pointer-events:none!important; z-index:1000!important; margin:0!important; transition:none!important;
  animation:none!important; transform-origin:top left!important; box-shadow:0 10px 24px #061d1399!important; }
@media(max-width:350px) {
  #battle-scoreboard { gap:5px; padding-left:8px; padding-right:8px; grid-template-columns:1fr 1.25fr 1fr; }
  .battle-player { padding:6px; }
  .battle-player > strong { font-size:24px; }
  .battle-player > span { font-size:10px; }
  #battle-next-step { font-size:15px; }
  #screen-game #current-move-chip { font-size:11px; padding:6px; }
}
@media(max-height:660px) {
  #battle-scoreboard { padding-top:3px; padding-bottom:5px; }
  #battle-guidance { min-height:58px; padding:6px 10px; }
  #battle-card-tip { font-size:11px; }
  #screen-game .lane-track { padding-top:9px; }
}
/* Reduced motion must still show completed progress. Include OS and app settings. */
.progression-backdrop { position:fixed!important; inset:0; overflow:hidden; }
html:has(.progression-backdrop), body:has(.progression-backdrop) { overflow:hidden; }
.progression-shell { height:100%; min-height:0; max-height:100%; overflow-y:auto; overscroll-behavior:contain; }
.progression-shell > * { flex-shrink:0; }
@media(max-height:660px) {
  .progression-result-head { margin:12px 0 6px; }
  .progression-result-head h2 { font-size:30px; }
  .progression-summary { margin-bottom:10px; }
  .xp-source-list { gap:5px; margin-bottom:10px; }
  .progression-xp-card { margin-bottom:10px; }
  .levelup-shell { justify-content:flex-start; }
  .levelup-kicker { margin-top:4px; }
}
body.reduced-motion .xp-source-row { opacity:1!important; transform:none!important; }
body.reduced-motion .progression-xp-fill { width:var(--to)!important; }
body.reduced-motion .levelup-title::after { transform:scaleX(1)!important; }
body.reduced-motion .progression-shell::before, body.reduced-motion .progression-shell::after,
body.reduced-motion .progression-xp-fill::after { animation:none!important; }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .xp-source-row { opacity:1!important; transform:none!important; }
  .progression-xp-fill { width:var(--to)!important; }
  .levelup-title::after { transform:scaleX(1)!important; }
  .xp-packet, .leaf-particle, .progression-xp-card::before, .progression-xp-track::before,
  .progression-xp-track::after, .levelup-medallion::before, .levelup-reward::before { display:none!important; }
}

/* ---------- Jungle Calls + round-end claim cascade (CANDY_CRUSH_UX_SPEC §4.3, feel.js) ---------- */
.jungle-call { position:absolute; left:50%; top:40%; z-index:95; display:grid; justify-items:center; gap:2px; min-width:200px;
  padding:12px 28px 13px; transform:translate(-50%,-50%); pointer-events:none; text-align:center;
  border:2px solid #b88a43; border-radius:14px; color:#fff3cf; background:linear-gradient(#3b2a17f2,#1c140bf2);
  box-shadow:0 10px 28px #000b, inset 0 0 0 2px #00000055; animation:jungleCallIn 1.5s cubic-bezier(.2,.9,.25,1.2) both; }
.jungle-call strong { font:clamp(30px,9vw,42px)/1 var(--font-display); letter-spacing:.5px; text-shadow:0 3px 0 #0008, 0 0 14px #f2c94c66; }
.jungle-call small { font:800 12px/1.2 var(--font-body); letter-spacing:.4px; color:#f1dca3; }
.jungle-call-burst { position:absolute; inset:-38px -60px; z-index:-1; border-radius:50%; opacity:.9;
  background:radial-gradient(closest-side,#f2c94c66,#f2c94c22 55%,transparent 72%); }
.jungle-call.tier-2 { border-color:#d9b25c; background:linear-gradient(#2f5a39f2,#163221f2); }
.jungle-call.tier-3 { border:3px solid #f2cf63; background:linear-gradient(#2a6b42f2,#0f3a22f2); box-shadow:0 10px 30px #000b, 0 0 22px #f2c94c88; }
.jungle-call.tier-4 { border:3px solid #ffe08a; background:linear-gradient(#8a5a14f2,#3d2408f2); box-shadow:0 12px 34px #000c, 0 0 34px #ffd76acc; }
.jungle-call.tier-4 strong { color:#fff6d8; text-shadow:0 3px 0 #4a2a06, 0 0 20px #ffe08a; }
.jungle-call.tier-3 .jungle-call-burst, .jungle-call.tier-4 .jungle-call-burst { inset:-60px -90px;
  background:repeating-conic-gradient(from 0deg,#ffe08a55 0 8deg,transparent 8deg 22deg); -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 75%); mask-image:radial-gradient(closest-side,#000 40%,transparent 75%); animation:jungleCallSpin 1.5s linear both; }
@keyframes jungleCallIn {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  14% { opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  24% { transform:translate(-50%,-50%) scale(1); }
  82% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-62%) scale(.96); }
}
@keyframes jungleCallSpin { to { transform:rotate(40deg); } }
#screen-game .oasis-card .cascade-pending { opacity:0; }
#screen-game .oasis-card .cascade-in { animation:claimDrop .38s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes claimDrop { 0% { opacity:0; transform:translate(-50%,-18px) scale(.6); } 100% { opacity:1; transform:translate(-50%,0) scale(1); } }
#screen-game .oasis-card.cascade-hit { animation:clearingHit .42s ease-out; }
@keyframes clearingHit { 30% { transform:scale(1.07); filter:brightness(1.25); } 100% { transform:none; filter:none; } }
body.reduced-motion .jungle-call, body.reduced-motion .jungle-call-burst { animation:jungleCallFade 1.3s linear both; }
@keyframes jungleCallFade { 0%, 85% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .jungle-call, .jungle-call-burst { animation:jungleCallFade 1.3s linear both; } #screen-game .oasis-card.cascade-hit { animation:none; } }