@charset "UTF-8";
/* Playtest pass (2026-10-28): readability, full-height phones and feedback. */

/* Phones taller than 9:16 fill the screen instead of showing bars. */
@media (max-aspect-ratio: 9/16) {
  :root { --portrait-width: 100vw; --portrait-height: 100dvh; }
  #app { aspect-ratio: auto; }
}

/* Start screen: subtitle and progress line sit on busy art. */
#app .start-title p { color: #fff6dc; text-shadow: 0 2px 0 #2b1d10, 0 0 8px #000a, 1px 1px 0 #2b1d10, -1px -1px 0 #2b1d10; }
#app .start-collection { color: #fff3cf; font-weight: 700; background: #2b1d10b8; border-radius: 8px; padding: 4px 10px; text-shadow: 0 1px 0 #000; }

/* Team roster: names/levels/state were thin grey text over rocks and water. */
#app .animal-card-sheet b,
#app .animal-card-sheet span,
#app .animal-card-sheet small { color: #fff6dc !important; text-shadow: 0 1px 0 #2b1d10, 1px 0 0 #2b1d10, -1px 0 0 #2b1d10, 0 -1px 0 #2b1d10, 0 0 6px #000c; }
#app .animal-card-sheet .animal-card-name,
#app .animal-card-sheet .animal-card-level,
#app .animal-card-sheet .animal-card-state { background: #3b2714d9; border-radius: 6px; padding: 1px 6px; }

/* Active trip: timer, percentage and member labels were white on light plates. */
#app .mother-trip-status time,
#app .mother-trip-status [data-trip-time],
#app .mother-trip-status small,
#app .mother-trip-status b,
#app .mother-trip-members small,
#app .mother-trip-members b,
#app .mother-trip-members span,
#app .mother-trip-members h2,
#app .mother-trip-members h3,
#app .mother-trip-timer > strong,
#app .mother-trip-party-caption { color: #4a2e14 !important; text-shadow: none !important; }

/* Expedition party cards: level hidden under the checkmark, capacity cut off. */
#app .party-showcase-card strong { padding-right: 20px; white-space: nowrap; overflow: visible; }
#app .party-showcase-card strong small { font-size: 10px; }
#app .party-showcase-card { overflow: visible; }

/* Locked showcase routes: unknown places stay mysterious, not duplicated art. */
#app .route-showcase-card.is-locked .route-showcase-art > img,
#app .route-showcase-card.is-locked .route-showcase-art > svg { filter: grayscale(.75) brightness(.55) blur(1.5px); }

/* Tap page: keep the harvest shortcut fully on screen. */
#app .wallet-offline-shortcut { right: max(6px, env(safe-area-inset-right)); }


/* Wallet tick when a resource arrives. */
@keyframes wallet-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); color: #ffe27a; } 100% { transform: scale(1); } }
[data-wallet].wallet-bump { display: inline-block; animation: wallet-bump .32s ease-out; }

/* Level-up celebration overlay. */
.level-up-burst { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; }
.level-up-burst p { position: relative; margin: 0; padding: 14px 28px; display: grid; justify-items: center; gap: 2px; background: linear-gradient(#fff3c4, #f2c95a); border: 4px solid #6b3f16; border-radius: 14px; box-shadow: 0 6px 0 #3b2410, 0 0 40px #ffd75acc; color: #4a2a0c; animation: level-up-pop 1.7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.level-up-burst small { font-size: 14px; font-weight: 700; }
.level-up-burst b { font-size: 44px; line-height: 1; letter-spacing: 1px; color: #3c7a1e; text-shadow: 0 2px 0 #fff8; }
.level-up-burst span { font-size: 16px; font-weight: 800; }
.level-up-rays { position: absolute; width: 360px; height: 360px; background: repeating-conic-gradient(#ffe48a66 0 10deg, transparent 10deg 30deg); border-radius: 50%; mask: radial-gradient(circle, #000 25%, transparent 70%); animation: level-up-rays 1.7s linear forwards; }
@keyframes level-up-pop { 0% { transform: scale(.3); opacity: 0; } 18% { transform: scale(1.08); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9) translateY(-30px); opacity: 0; } }
@keyframes level-up-rays { 0% { transform: rotate(0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(60deg) scale(1.1); opacity: 0; } }
[data-reduced-motion="true"] .level-up-burst p, [data-reduced-motion="true"] .level-up-rays,
[data-reduced-motion="true"] [data-wallet].wallet-bump { animation-duration: .01s; }
#app .party-showcase-card > :last-child { font-size: 10px; line-height: 1.15; }
.level-up-burst { background: radial-gradient(circle at 50% 50%, #1a0f0599 0, #1a0f0540 35%, transparent 65%); animation: level-up-fade 1.7s ease-out forwards; }
@keyframes level-up-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* First-run guide and route yield hints. */
.guide-tip { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 128px); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; width: min(92vw, 380px); padding: 9px 10px 9px 14px; border: 2px solid #f4c35a; border-radius: 12px; background: #3b2412ee; color: #fff6dc; font-size: 14px; line-height: 1.35; box-shadow: 0 4px 14px #0007; pointer-events: none; }
.guide-tip span { flex: 1; }
.guide-skip { flex: none; pointer-events: auto; padding: 4px 9px; border: 1px solid #f4c35a99; border-radius: 8px; background: transparent; color: #f4d58a; font: inherit; font-size: 12px; }
.guide-target { animation: guide-pulse 1.2s ease-in-out infinite; }
@keyframes guide-pulse { 0%, 100% { filter: drop-shadow(0 0 0 #ffd75a); } 50% { filter: drop-shadow(0 0 10px #ffd75a) brightness(1.12); } }
[data-reduced-motion="true"] .guide-target { animation: none; filter: drop-shadow(0 0 6px #ffd75a); }
.route-showcase-yield { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 3; padding: 1px 6px; border-radius: 6px; background: #3b2412cc; color: #ffe9a8; font-size: 11px; white-space: nowrap; }