/* ============================================================
   CANDY_CRUSH_UX_SPEC phases 2–5: Level Start sheet, live Trail Mark tracker, Jungle Rush,
   chapter story card, map celebration, Vine Streak, Explorer's Journal, session summary.
   Loaded last. Everything has a reduced-motion path.
   ============================================================ */

/* ---------- Live Trail Mark tracker (battle scoreboard) ---------- */
#mark-tracker { display: flex; justify-content: center; gap: 1px; margin-top: 2px; }
#mark-tracker[hidden] { display: none; }
#mark-tracker img { width: 15px; height: 15px; opacity: .55; filter: grayscale(.2); transition: opacity .2s ease; }
#mark-tracker img.lit { opacity: 1; filter: drop-shadow(0 0 3px #f2c94c99); }
#mark-tracker img.pop { animation: markPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes markPop { 0% { transform: scale(.4); } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ---------- Level Start sheet ---------- */
.level-sheet-backdrop { display: flex; align-items: flex-end; justify-content: center; padding: 0; background: #020c07b8; }
.level-sheet { position: relative; width: min(100%, 460px); max-height: 90dvh; overflow-y: auto; padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 2px solid #c9a24f; border-radius: 22px 22px 0 0; color: #1f3324; background: linear-gradient(#fffbea, #f3e8c8);
  box-shadow: 0 -12px 30px #000a; animation: sheetUp .26s cubic-bezier(.2,.9,.3,1); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.level-sheet.sunken_sanctuary { border-top-color: #4fc4b0; }
.level-sheet-close { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #0000000d; color: #3f5a44; font: 400 26px/1 var(--font-body); cursor: pointer; }
.level-sheet header small { display: block; color: #7a5b26; font: 800 11px var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; }
.level-sheet h2 { margin: 4px 40px 8px 0; color: #163d26; font: 400 28px/1.05 var(--font-display); }
.sheet-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-pill { padding: 4px 10px; border: 1px solid #c9a24f88; border-radius: 999px; background: #fff8e6; color: #2d4a35; font: 800 12px var(--font-body); }
.sheet-pill.tough { border-color: #c0602d; background: #c0602d; color: #fff3e6; }
.sheet-pill.guardian { border-color: #b7801f; background: linear-gradient(#f2cf63, #c08a26); color: #2a1a06; }
.level-sheet h3 { margin: 16px 0 6px; color: #7a5b26; font: 800 11px var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; }
.sheet-goals { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sheet-goals li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #d8c79b; border-radius: 12px; background: #fffdf5; }
.sheet-goals li img { width: 28px; height: 28px; }
.sheet-goals li span { font: 700 14px/1.25 var(--font-body); color: #1f3324; }
.sheet-goals li small { display: block; margin-top: 2px; color: #5a6a52; font: 600 12px/1.3 var(--font-body); }
.sheet-goals li b { color: #2f7a45; font: 900 16px var(--font-body); }
.sheet-goals li.earned { border-color: #d9b25e; background: #fff6d8; }
.sheet-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: #0d2a1c0d; font: 600 13px/1.3 var(--font-body); color: #2d4a35; }
.sheet-row strong { color: #163d26; }
.sheet-row small { display: block; color: #5a6a52; font-size: 12px; }
.sheet-rival img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #d9b25e, 0 2px 6px #0005; }
.sheet-rival span { display: grid; }
.sheet-rival small { color: #7a5b26; font: 800 10px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; }
.sheet-rival strong { font: 800 16px var(--font-body); }
.sheet-journal img { width: 34px; height: 34px; flex: none; }
.sheet-guide { border: 1px dashed #2f7a45; background: #2f7a4512; }
.level-sheet-start { width: 100%; min-height: 56px; margin-top: 14px; border: 1.5px solid #e2bd62; border-radius: 14px; color: #fff4d0;
  background: linear-gradient(#25784b, #114a2c); box-shadow: 0 3px 0 #072a17, 0 8px 18px #0004; font: 800 18px var(--font-body); }

.vine-fruits { display: inline-flex; gap: 1px; vertical-align: middle; }
.vine-fruits img { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px #0006); }

/* ---------- Overlays ---------- */
.ux-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; cursor: pointer; animation: uxFadeIn .2s ease; }
.ux-overlay.leaving { animation: uxFadeOut .18s ease forwards; }
@keyframes uxFadeIn { from { opacity: 0; } } @keyframes uxFadeOut { to { opacity: 0; } }

/* Jungle Rush */
.jungle-rush { background: radial-gradient(ellipse at 50% 42%, #1f5a37ee, #04120bf5 70%); }
.rush-stage { position: relative; display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: #f6ecd0; }
.rush-burst { position: absolute; left: 50%; top: 44px; width: min(92vw, 420px); translate: -50% -50%; z-index: -1; opacity: .95; animation: rushSpin 9s linear infinite, rushBurstIn .5s cubic-bezier(.2,1.4,.4,1) both; pointer-events: none; }
@keyframes rushSpin { to { rotate: 360deg; } }
@keyframes rushBurstIn { from { scale: .2; opacity: 0; } }
.jungle-rush h2 { margin: 0; font: 400 clamp(40px, 12vw, 56px)/1 var(--font-display);
  background: linear-gradient(#fff6cf, #f2cf63 50%, #c08a26); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a2508) drop-shadow(0 6px 12px #000c); animation: rushTitle .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes rushTitle { from { scale: .3; opacity: 0; } }
.rush-stars { display: flex; align-items: flex-end; gap: 4px; margin-top: 46px; }
.rush-star img { display: block; width: 74px; height: 74px; }
.rush-star:nth-child(2) img { width: 92px; height: 92px; }
.rush-star.kept img { filter: saturate(.75) brightness(.92); }
.rush-star.new { animation: rushStamp .42s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(750ms + var(--i) * 260ms); }
@keyframes rushStamp { 0% { scale: 2.4; opacity: 0; } 70% { scale: .92; opacity: 1; } 100% { scale: 1; } }
.rush-stage p { margin: 6px 0 0; font: 800 16px/1.35 var(--font-body); color: #fff3cf; text-shadow: 0 2px 4px #000a; }
.rush-fruits { display: flex; gap: 4px; } .rush-fruits img { width: 30px; height: 30px; }
.rush-stage > small { margin-top: 12px; color: #d9dcc4aa; font: 700 12px var(--font-body); letter-spacing: .5px; }

/* Chapter story card */
.chapter-story { place-items: end center; background: #040c08; }
.chapter-story-art { position: absolute; inset: 0; background: center 30% / cover no-repeat; animation: storyZoom 9s ease-out both; }
@keyframes storyZoom { from { transform: scale(1.08); } }
.chapter-story-copy { position: relative; width: min(100%, 480px); padding: 90px 22px calc(26px + env(safe-area-inset-bottom)); text-align: center;
  color: #f6ecd0; background: linear-gradient(transparent, #040c08e6 38%, #040c08); }
.chapter-story-copy small { color: #e9c46a; font: 800 12px var(--font-body); letter-spacing: 2px; text-transform: uppercase; }
.chapter-story-copy h2 { margin: 6px 0 10px; color: #fff3cf; font: 400 30px/1.1 var(--font-display); text-shadow: 0 3px 8px #000; }
.chapter-story-copy p { margin: 4px 0; font: 600 15px/1.45 var(--font-body); color: #e9e2c8; }
.chapter-story-continue { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 18px;
  border: 1.5px solid #e2bd62; border-radius: 14px; color: #fff4d0; background: linear-gradient(#25784b, #114a2c); font: 800 17px var(--font-body); }

/* ---------- Trail map additions ---------- */
#story-map-body.trail-v2 .story-node-tag { position: absolute; left: 50%; top: -17px; z-index: 8; transform: translateX(-50%); padding: 2px 6px;
  border: 1px solid #ffd2b0; border-radius: 999px; background: #c0602d; color: #fff3e6; font: 900 8px/1.2 var(--font-body); letter-spacing: .8px; text-transform: uppercase; box-shadow: 0 2px 4px #0008; }
#story-map-body.trail-v2 .trail-pin-fruits { position: absolute; right: -15px; top: 2px; display: grid; gap: 0; }
#story-map-body.trail-v2 .trail-pin-fruits img { width: 17px; height: 17px; filter: drop-shadow(0 1px 1px #000a); }
#story-map-body.trail-v2 .story-node.celebrate-pop { animation: nodeCelebrate .5s cubic-bezier(.2,1.5,.4,1) .1s both; }
@keyframes nodeCelebrate { 40% { scale: 1.22; } 100% { scale: 1; } }
#story-map-body.trail-v2 .story-mark.stamp { animation: markStamp .38s cubic-bezier(.2,1.6,.4,1) var(--d, 250ms) both; }
@keyframes markStamp { 0% { scale: 2.6; opacity: 0; } 100% { scale: 1; opacity: 1; } }
#story-map-body.trail-v2 .story-node.just-unlocked { animation: nodeUnlock .7s cubic-bezier(.2,1.4,.4,1) .9s both; }
@keyframes nodeUnlock { 0% { scale: .6; filter: brightness(2.2); } 60% { scale: 1.15; } 100% { scale: 1; filter: none; } }

/* ---------- Home strip ---------- */
.home-meta-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: #f3e7c4; font: 700 12px var(--font-body); }
.home-meta-strip span { display: inline-flex; align-items: center; gap: 6px; }
.home-meta-strip img { width: 22px; height: 22px; }
.home-meta-strip .vine-fruits img { width: 16px; height: 16px; }

/* ---------- Session summary ---------- */
.session-backdrop { display: grid; place-items: center; padding: 18px; background: #020c07c4; }
.session-card { width: min(100%, 380px); padding: 22px 20px 18px; border: 2px solid #c9a24f; border-radius: 20px; text-align: center; color: #1f3324;
  background: linear-gradient(#fffbea, #f3e8c8); box-shadow: 0 18px 40px #000b; animation: sheetUp .26s cubic-bezier(.2,.9,.3,1); }
.session-card small { color: #7a5b26; font: 800 11px var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; }
.session-card h2 { margin: 4px 0 12px; color: #163d26; font: 400 30px/1.1 var(--font-display); }
.session-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.session-stats span { display: grid; gap: 2px; padding: 8px 4px; border: 1px solid #d8c79b; border-radius: 12px; background: #fffdf5; color: #5a6a52; font: 700 11px var(--font-body); }
.session-stats strong { color: #163d26; font: 900 20px var(--font-body); }
.session-card p { margin: 0 0 14px; color: #3f5a44; font: 600 13px/1.4 var(--font-body); }
.session-card button { width: 100%; min-height: 50px; margin-top: 8px; border-radius: 14px; font: 800 16px var(--font-body); }

/* ---------- Reduced motion ---------- */
body.reduced-motion .ux-overlay *, body.reduced-motion .level-sheet, body.reduced-motion .session-card,
body.reduced-motion #story-map-body.trail-v2 .story-node, body.reduced-motion #story-map-body.trail-v2 .story-mark, body.reduced-motion #mark-tracker img { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ux-overlay *, .level-sheet, .session-card, #story-map-body.trail-v2 .story-node, #story-map-body.trail-v2 .story-mark, #mark-tracker img { animation: none !important; }
}

/* ---------- Chapter 3+ rules: Level Start sheet + clearing badges + Fog (LEVEL_100_SPEC §2) ---------- */
.sheet-rules { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sheet-rules li { padding: 8px 10px 8px 30px; border: 1px solid #c9a24f66; border-radius: 12px; background: #fff3d6 left 9px center / 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8731c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E");
  color: #3d3014; font: 650 13px/1.35 var(--font-body); }
#screen-game .oasis-card .mech-badges { position: absolute; left: 2px; right: 2px; top: 2px; z-index: 6; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; pointer-events: auto; }
#screen-game .mech-badge { padding: 1px 4px; border-radius: 999px; border: 1px solid #ffffff55; color: #fff8e6; background: #0d2a1ce6;
  font: 900 7.5px/1.25 var(--font-body); letter-spacing: .3px; white-space: nowrap; box-shadow: 0 1px 3px #000a; }
#screen-game .mech-badge.current { background: #0f6d63e6; border-color: #7fe6d6aa; }
#screen-game .mech-badge.fog { background: #3a4158e6; border-color: #c9d2ffaa; }
#screen-game .mech-badge.drought { background: #8a5a1ce6; border-color: #ffd28aaa; }
#screen-game .mech-badge.snare { background: #2c5a24e6; border-color: #b6e39caa; }
#screen-game .mech-badge.totem.mine { background: #2e6b33e6; border-color: #f2d27daa; }
#screen-game .mech-badge.totem.rival { background: #8a3a24e6; border-color: #ffc9adaa; }
#screen-game .mech-badge.scorch { background: #a8361ce6; border-color: #ffb08aaa; }
#screen-game .mech-badge.swap { background: #42306be6; border-color: #d6c4ffaa; }
#screen-game .oasis-card.fogged .oasis-art-clip { filter: blur(1.5px) brightness(.7) saturate(.6); }
#screen-game .oasis-card.fogged::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; pointer-events: none;
  background: radial-gradient(ellipse at 30% 40%, #dfe6f0aa, transparent 60%), radial-gradient(ellipse at 75% 65%, #c9d2e0aa, transparent 55%); }
#screen-game .oasis-card .points.fog { color: #e8eefc; text-shadow: 0 0 8px #c9d2ff; }
#screen-game .oasis-card .oasis-label.oasis-label-fog { background: #3a4158e6; }
.chapter-story.finale .chapter-story-copy h2 { font-size: 36px; color: #ffe08a; }
/* Rule lines carry their chapter's painted mechanic badge (or Guardian medallion). */
.sheet-rules li.has-badge { padding-left: 46px; background: #fff3d6 left 8px center / 30px no-repeat var(--rule-icon); }

/* ---------- Trail win celebration: path dots, hops, finds, unlock burst, progress line ---------- */
#story-map-body.trail-v2 .trail-path-dot, #story-map-body.trail-v2 .trail-find, #story-map-body.trail-v2 .trail-find-float,
#story-map-body.trail-v2 .trail-dust, #story-map-body.trail-v2 .trail-lock-break { position: absolute; left: calc(var(--node-x) * 1%); top: calc(var(--node-y) * 1%); translate: -50% -50%; pointer-events: none; }
#story-map-body.trail-v2 .trail-path-dot { z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c94c 55%, #b9851f);
  box-shadow: 0 0 0 2px #3b2a0f88, 0 0 12px #ffd86bcc; animation: pathDot .34s cubic-bezier(.2,1.6,.4,1) var(--d, 0ms) both; }
@keyframes pathDot { 0% { scale: 0; opacity: 0; } 100% { scale: 1; opacity: 1; } }
#story-map-body.trail-v2 .trail-find { z-index: 3; width: 30px; height: 30px; animation: findBob 1.8s ease-in-out infinite; filter: drop-shadow(0 3px 3px #000a) drop-shadow(0 0 8px #ffe38a99); }
#story-map-body.trail-v2 .trail-find img { width: 100%; height: 100%; }
@keyframes findBob { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 5px); } }
#story-map-body.trail-v2 .trail-find.collected { animation: findCollect .5s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes findCollect { 0% { scale: 1; opacity: 1; } 40% { scale: 1.6; } 100% { scale: .2; opacity: 0; translate: -50% -260%; } }
#story-map-body.trail-v2 .trail-find-float { z-index: 9; white-space: nowrap; padding: 3px 9px; border: 1.5px solid #f2cf63; border-radius: 999px; background: #0d2417f0; color: #ffe9a6;
  font: 900 12px/1.2 var(--font-body); box-shadow: 0 4px 10px #000a; animation: findFloat 1.4s ease-out forwards; }
@keyframes findFloat { 0% { opacity: 0; translate: -50% -40%; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; translate: -50% -260%; } }
#story-map-body.trail-v2 .trail-dust { z-index: 7; width: 70px; height: 26px; margin-top: 22px; border-radius: 50%; background: radial-gradient(ellipse, #f3e2b4cc, #d8c08a55 55%, transparent 72%);
  animation: dustPuff .55s ease-out forwards; }
@keyframes dustPuff { 0% { scale: .3 .5; opacity: .9; } 100% { scale: 1.6 1; opacity: 0; } }
#story-map-body.trail-v2 .trail-lock-break { z-index: 9; width: 34px; height: 34px; color: #fff3c4; }
#story-map-body.trail-v2 .trail-lock-break svg { width: 100%; height: 100%; filter: drop-shadow(0 0 6px #ffd86b); animation: lockBreak .6s ease-out forwards; }
@keyframes lockBreak { 0% { scale: 1; rotate: 0deg; opacity: 1; } 35% { scale: 1.35; rotate: -12deg; } 100% { scale: 1.9; rotate: 18deg; opacity: 0; } }
#story-map-body.trail-v2 .trail-lock-break i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffe48a; box-shadow: 0 0 8px #ffd34d;
  animation: lockSpark .6s ease-out forwards; }
@keyframes lockSpark { 0% { transform: rotate(var(--a)) translateY(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-46px); opacity: 0; } }
#story-map-body.trail-v2 .story-node.just-unlocked.unlock-now { animation-delay: 0s; }
.trail-progress-pill { position: fixed; z-index: 60; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: calc(100vw - 40px); padding: 7px 16px 8px; border: 1.5px solid #c99a45; border-radius: 14px;
  background: #0d2417f2; color: #f4e7c0; font: 700 12px/1.25 var(--font-body); text-align: center; box-shadow: 0 6px 16px #000b; animation: pillIn .35s cubic-bezier(.2,1.4,.4,1) both; pointer-events: none; }
.trail-progress-pill strong { color: #f2cf63; font: 400 14px/1 var(--font-display); }
.trail-progress-pill b { display: inline-block; color: #fff; font-size: 14px; }
.trail-progress-pill b.bump { animation: countBump .45s cubic-bezier(.2,1.8,.4,1); }
.trail-progress-pill em { color: #cfe3b8; font-style: normal; font-size: 11.5px; }
.trail-progress-pill.leaving { animation: pillOut .35s ease-in forwards; }
@keyframes pillIn { 0% { opacity: 0; translate: -50% -12px; } 100% { opacity: 1; translate: -50% 0; } }
@keyframes pillOut { 100% { opacity: 0; translate: -50% -10px; } }
@keyframes countBump { 40% { scale: 1.7; color: #ffe08a; } 100% { scale: 1; } }
/* The Guardian's chest wiggles when it is three levels away or closer. */
#story-map-body.trail-v2 .trail-chest.near:not(.open) { animation: trailChestGlow 2.4s ease-in-out infinite, chestWiggle 2.6s ease-in-out infinite; }
@keyframes chestWiggle { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -9deg; } 82% { rotate: 8deg; } 88% { rotate: -5deg; } 94% { rotate: 3deg; } }
/* A new chapter's banner unfurls as the explorer arrives. */
#story-map-body.trail-v2 .trail-banner.unfurl { animation: bannerUnfurl .8s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bannerUnfurl { 0% { scale: .15 1; opacity: 0; } 60% { scale: 1.06 1; opacity: 1; } 100% { scale: 1 1; } }
/* After a celebration the next level's Play button breathes to invite the tap. */
.level-sheet-start.pulse { animation: playPulse 1.3s ease-in-out .4s infinite; }
@keyframes playPulse { 0%, 100% { scale: 1; box-shadow: 0 3px 0 #092415, 0 0 0 0 #f2cf6300; } 50% { scale: 1.035; box-shadow: 0 3px 0 #092415, 0 0 0 8px #f2cf6333; } }
body.reduced-motion #story-map-body.trail-v2 .trail-find, body.reduced-motion #story-map-body.trail-v2 .trail-chest.near, body.reduced-motion .level-sheet-start.pulse { animation: none; }
@media (prefers-reduced-motion: reduce) { #story-map-body.trail-v2 .trail-find, #story-map-body.trail-v2 .trail-chest.near, .level-sheet-start.pulse { animation: none; } }

/* Just-in-time tip: explains a move, rule or animal the first time it matters. Never blocks input. */
/* Tips sit under dialogs (z 1000) and hide while one is open, so they never cover a dialog's title. */
#jit-tip { position: fixed; z-index: 900; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 132px); translate: -50% 0; width: min(380px, calc(100vw - 28px));
  padding: 11px 14px 10px; border: 2px solid #d0a957; border-radius: 14px; background: linear-gradient(#fff8e4, #f0dfb3); color: #1d3a24;
  box-shadow: 0 0 0 3px #4a3418, 0 10px 24px #000a; font: 600 13.5px/1.4 var(--font-body); animation: jitIn .3s cubic-bezier(.2,1.4,.4,1) both; }
#jit-tip strong { display: block; color: #7a5b26; font: 800 11px/1.2 var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; }
#jit-tip p { margin: 4px 0 8px; }
#jit-tip div { display: flex; gap: 8px; justify-content: flex-end; }
#jit-tip button { min-height: 44px; padding: 0 16px; border: 1.5px solid #9b7439; border-radius: 10px; background: #fffaf0; color: #1d4a2d; font: 800 13px/1 var(--font-body); }
#jit-tip .jit-ok { background: linear-gradient(#2f7a45, #174c2a); color: #fff6dc; border-color: #d0a957; }
#jit-tip.leaving { animation: jitOut .2s ease-in forwards; }
body:has(#modal-root .modal-backdrop) #jit-tip, body:has(.motion-round-result) #jit-tip { visibility: hidden; }
@keyframes jitIn { 0% { opacity: 0; translate: -50% -10px; } 100% { opacity: 1; translate: -50% 0; } }
@keyframes jitOut { 100% { opacity: 0; translate: -50% -8px; } }
/* Short phones: a compact tip over the rival's back rows, clear of the clearings. */
@media (max-height: 700px) {
  #jit-tip { top: calc(env(safe-area-inset-top, 0px) + 84px); padding: 7px 11px 7px; font-size: 12px; line-height: 1.3; }
  #jit-tip p { margin: 2px 0 5px; }
  #jit-tip button { min-height: 40px; padding: 0 12px; font-size: 12px; }
}

/* Rally (Storm Peaks): this round's rallied animal glows and shows +2, in the hand and on the board. */
#screen-game .card.rallied { box-shadow: 0 0 0 2px #ffd86b, 0 0 12px #ffcf4dcc !important; }
#screen-game .card.rallied::before { content: "+2"; position: absolute; z-index: 6; top: -7px; right: -6px; padding: 1px 5px; border: 1.5px solid #fff3c4; border-radius: 999px;
  background: linear-gradient(#e7a92d, #b9741a); color: #fff; font: 900 10px/1.3 var(--font-body); box-shadow: 0 2px 4px #000a; pointer-events: none; }

/* Readability and tap targets (website audit 2026-10-13): no text under 11 px, controls at least 44 px. */
#modal-root .difficulty-copy em { font-size: 11px !important; }
.sheet-rival small { font-size: 11px; }
#screen-home .account-story-cta small { font-size: 11.5px; }
#screen-home .account-mode-card > span { font-size: 11px; }
#story-map-body.trail-v2 .story-node-tag { font-size: 10.5px; padding: 2px 6px; }
#story-map-body.trail-v2 .trail-banner.has-art span { font-size: clamp(11px, 2.8cqw, 12px); }
body #screen-game #menu-btn { width: 44px; height: 44px; }
#jit-tip button { min-height: 44px; }
@media (max-height: 620px) and (max-width: 430px) {
  body #screen-game #menu-btn { width: 40px; height: 34px; }
  body #screen-game #menu-btn::after { content: ""; position: absolute; inset: -5px -2px; }
  #jit-tip button { min-height: 40px; }
}
/* The first-time tip sits below the rival's last-move notice on tall phones. */
@media (min-height: 741px) { #jit-tip { top: calc(env(safe-area-inset-top, 0px) + 178px); } }