/* Rolfe Legends 4: Attack of the Cousins — mobile-first, big tap targets, art-forward
   with emoji fallback. Every WORLD restyles everything (James's idea): look-base is
   the farm, look-w1 the Barbie Dreamhouse, look-w2 the squishy world, look-w3 the
   sassy tea party. Frames, boards and palettes are CSS; paintings swap per look. */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Comic Sans MS", sans-serif;
  background: #1a2436; color: #f4efe6; overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
#app { height: 100%; display: flex; flex-direction: column; }

.screen { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); position: relative; }
.screen.look-base { background: linear-gradient(#7ec8e3 0%, #f9d976 55%, #90b65b 100%); color: #2a2a18; }
.screen.look-w1 { background: linear-gradient(#ffd6ec 0%, #ff8cc6 55%, #c8a2ff 100%); color: #4a1036; }
.screen.look-w2 { background: linear-gradient(#d7fff1 0%, #ffe3c7 50%, #d9c9ff 100%); color: #2c2f5a; }
.screen.look-w3 { background: linear-gradient(#fff4e6 0%, #f7d6d6 55%, #cfe7e2 100%); color: #3d2330; }

.screen-enter { animation: screenin .32s ease; }
.screen-fade-out { animation: screenout calc(var(--fx, 1) * .5s) ease forwards; }
@keyframes screenout { to { opacity: 0; } }
.victory-beat { justify-content: center; }
.tip-card {
  background: #fdf6e3; color: #2a2a18; border: 3px solid #b8860b; border-radius: 14px;
  padding: 12px 16px; margin: 10px auto; max-width: 420px; font-size: 1rem; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
@keyframes screenin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

h1, h2 { text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.25); letter-spacing: .02em; }
.title-logo { font-size: 2rem; margin: 18px 0 4px; }
.subtitle { text-align: center; opacity: .85; margin-bottom: 18px; }

/* drop-in art slots: <img> when the PNG exists, emoji text when it doesn't */
.art-slot { display: inline-flex; align-items: center; justify-content: center; }
.art-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-art { display: flex; width: 132px; height: 132px; margin: 10px auto 2px; border-radius: 18px; overflow: hidden; border: 3px solid rgba(255,255,255,.5); box-shadow: 0 4px 14px rgba(0,0,0,.3); font-size: 3.4rem; background: rgba(0,0,0,.15); }
.scene-art.art-emoji { border: none; box-shadow: none; background: none; }

.btn {
  display: block; width: 100%; max-width: 420px; margin: 8px auto; padding: 14px 16px;
  font-size: 1.05rem; font-weight: 700; text-align: center; border: none; border-radius: 14px;
  background: #2e6b34; color: #fff; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.secondary { background: #55575e; }
.btn.gold { background: #b8860b; }
.btn.danger { background: #a33327; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ---------- title ---------- */
.title-screen { justify-content: flex-start; }
.title-art { position: absolute; inset: 0; background-size: cover; background-position: center bottom; opacity: 0; transition: opacity .6s ease; z-index: 0; }
.title-art.has-art { opacity: 1; }
.title-inner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.title-art.has-art ~ .title-inner .title-logo,
.title-inner .title-logo { text-shadow: 0 2px 4px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.3); }
.title-buttons { margin-top: auto; padding-bottom: 46px; }
.wins-shelf { margin: 2px 0 6px; font-size: .85rem; line-height: 1.5; color: #ffe9a8; text-shadow: 0 1px 3px rgba(0,0,0,.65); -webkit-text-stroke: 0; }
.title-screen .title-sub { text-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Thin white outline so the dark act-1 title text stays legible over the painted
   art. paint-order puts the stroke behind the fill, so the letterforms keep their
   weight instead of thinning; color emoji are bitmap glyphs and stay unstroked.
   Widths are doubled on purpose: the stroke is centered on the glyph edge, so only
   half of it shows outside the fill (2px stroke reads as a ~1px line). */
.title-screen .title-logo { -webkit-text-stroke: 2px #fff; paint-order: stroke fill; }
.title-screen .title-sub { -webkit-text-stroke: 1.5px #fff; paint-order: stroke fill; }
/* RL3 no-tell canon: secret triggers get NO beacon, NO cursor change, NO visual
   distinguisher of any kind (RL2's white dot is how the secret got found). */
.goldie-egg { position: fixed; bottom: 10px; right: 12px; font-size: 1.7rem; opacity: .55; z-index: 2; }
.goldie-egg.on-art { font-size: 1rem; opacity: 1; width: 120px; height: 230px; display: block; z-index: 0; } /* hotspot over the painted llama, under the button layer (emoji text cleared in JS) */
/* the title overlay passes empty-space taps through (to Goldie); buttons still win */
.title-inner { pointer-events: none; }
.title-inner button { pointer-events: auto; }

.hero-pick { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.hero-card {
  flex: 1 1 150px; max-width: 210px; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.35);
  border-radius: 18px; padding: 14px 10px; text-align: center; cursor: pointer;
}
.hero-card .hero-face { display: flex; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; overflow: hidden; font-size: 3rem; border: 3px solid rgba(255,255,255,.5); background: rgba(0,0,0,.12); }
.hero-card .hero-face.art-emoji { border: none; background: none; }
.hero-card h3 { margin: 6px 0 4px; }
.hero-card p { font-size: .82rem; opacity: .85; }

/* ---------- combat ---------- */
.combat { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.battle-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s; z-index: 0; }
.battle-bg.has-art { opacity: .5; }
.combat-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; gap: 6px; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }

.enemy-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 6px 0 2px; flex: 1; align-items: center; align-content: center; min-height: 0; }
.enemy {
  background: rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.25); border-radius: 14px;
  padding: 8px 10px; min-width: 96px; max-width: 138px; text-align: center; cursor: pointer; position: relative;
}
.enemy.targetable { border-color: #ffd23f; box-shadow: 0 0 12px #ffd23f88; animation: targetpulse 1s infinite; }
@keyframes targetpulse { 50% { box-shadow: 0 0 20px #ffd23fcc; } }
.enemy.dead { opacity: .25; pointer-events: none; }
/* Going down should read as a defeat, not a fade. It flinches white, then topples
   over and drains of colour. The boss gets a longer, heavier version. */
.enemy.dying { animation: die calc(var(--fx, 1) * .9s) cubic-bezier(.4, 0, .7, 1) forwards; }
@keyframes die {
  0%   { opacity: 1; transform: none; filter: none; }
  12%  { opacity: 1; transform: scale(1.12); filter: brightness(3.2) saturate(0); }
  30%  { opacity: .95; transform: scale(1.02) rotate(-5deg); filter: brightness(1.3) grayscale(.4); }
  100% { opacity: .2; transform: scale(.72) rotate(22deg) translateY(26px); filter: grayscale(1) blur(1.5px); }
}
.enemy.dying-boss { animation: dieboss calc(var(--fx, 1) * 1.9s) cubic-bezier(.36, 0, .66, 1) forwards; z-index: 3; }
@keyframes dieboss {
  0%   { opacity: 1; transform: none; filter: none; }
  8%   { opacity: 1; transform: scale(1.16); filter: brightness(4) saturate(0); }
  16%  { opacity: 1; transform: scale(1.06) translateX(-8px); filter: brightness(1.6); }
  26%  { transform: scale(1.08) translateX(9px) rotate(3deg); filter: brightness(2.6) saturate(.3); }
  38%  { transform: scale(1.04) translateX(-7px) rotate(-4deg); filter: brightness(1.2); }
  52%  { transform: scale(1) rotate(2deg); filter: grayscale(.3); }
  70%  { opacity: .8; transform: scale(.95) rotate(-14deg) translateY(10px); filter: grayscale(.7) blur(.5px); }
  100% { opacity: .12; transform: scale(.6) rotate(-38deg) translateY(60px); filter: grayscale(1) blur(4px); }
}
/* Fleeing is the OPPOSITE of dying: dying topples down and drains gray; fleeing
   lifts OFF — a buffet against the wind, then the whole card streaks away,
   blurring as it goes. Forwards-fill to nothing; the next render drops it. */
.enemy.fleeing { animation: fleeoff calc(var(--fx, 1) * .7s) cubic-bezier(.55, 0, .85, .36) forwards; pointer-events: none; z-index: 3; }
@keyframes fleeoff {
  0%   { opacity: 1; transform: none; filter: none; }
  20%  { transform: translateX(-10px) rotate(-7deg); }
  38%  { transform: translateX(7px) rotate(5deg) scale(1.05); filter: brightness(1.15); }
  100% { opacity: 0; transform: translateX(80vw) translateY(-48px) rotate(26deg) scale(.88); filter: blur(5px); }
}
/* the whole yard leans when the Squall finally lets go */
#app.gust { animation: gustlean calc(var(--fx, 1) * .9s) ease-in-out; }
@keyframes gustlean { 25% { transform: translateX(7px); } 62% { transform: translateX(-5px); } }

/* THE BIG TWISTER's re-form: the act-3 signature moment. Lightning flashes,
   the board quakes, and the card itself convulses and GROWS through the swap —
   nothing like the polite cross-fade lesser form-changes get. */
.storm-flash {
  position: fixed; inset: 0; background: #fff; pointer-events: none; z-index: 90;
  opacity: 0; animation: stormflash calc(var(--fx, 1) * 1.1s) ease-out forwards;
}
@keyframes stormflash {
  0% { opacity: 0; } 6% { opacity: .95; } 14% { opacity: 0; }
  30% { opacity: .7; } 42% { opacity: 0; } 100% { opacity: 0; }
}
.enemy.reforming { animation: reform calc(var(--fx, 1) * 2.2s) cubic-bezier(.36, 0, .66, 1); z-index: 6; }
@keyframes reform {
  0%   { transform: none; filter: none; }
  10%  { transform: translateX(-7px) rotate(-3deg) scale(.96); filter: brightness(2.6) saturate(0); }
  22%  { transform: translateX(8px) rotate(3deg) scale(.94); filter: brightness(1.2); }
  34%  { transform: translateX(-8px) rotate(-4deg) scale(1.0); filter: brightness(2.2); }
  48%  { transform: translateX(6px) rotate(3deg) scale(1.06); }
  66%  { transform: translateX(-4px) scale(1.14); filter: brightness(1.4) contrast(1.1); }
  84%  { transform: scale(1.2); }
  100% { transform: none; filter: none; }
}
/* ROYAL FURY (and any enrage flash): the card pulses hot red */
.enemy.fury-flash { animation: furyflash calc(var(--fx, 1) * 1.2s) ease; z-index: 5; }
@keyframes furyflash {
  15% { filter: brightness(1.9) sepia(1) hue-rotate(-45deg) saturate(4); transform: scale(1.1); }
  45% { filter: brightness(1.2) sepia(.6) hue-rotate(-45deg) saturate(3); transform: scale(1.04); }
  100% { filter: none; transform: none; }
}

/* The knockout beat: the world drains gray and the hero strip tips over before
   the defeat screen fades in — going down gets a moment, same as winning. */
#app.ko { animation: kofade calc(var(--fx, 1) * 1.6s) ease forwards; }
@keyframes kofade {
  0%   { filter: none; }
  20%  { filter: brightness(1.7) saturate(.4); }
  100% { filter: grayscale(1) brightness(.72); }
}
#app.ko .hero-strip { animation: kotip calc(var(--fx, 1) * 1.5s) cubic-bezier(.4, 0, .7, 1) forwards; }
@keyframes kotip {
  30%  { transform: rotate(-2deg); }
  100% { transform: rotate(6deg) translateY(12px); opacity: .8; }
}

/* danger telegraph: under 25% HP the screen edges pulse red (heartbeat in sfx) */
.combat.danger::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 70px 24px rgba(255, 45, 45, .32);
  animation: dangerpulse 1.7s ease-in-out infinite;
}
@keyframes dangerpulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .combat.danger::after { animation: none; opacity: .6; } }

/* defeat screen: the culprit's wanted-poster chip + dusted-but-okay hero art */
.ko-art { width: 168px; height: 168px; }
.killer-chip {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.2); border-radius: 14px;
  padding: 8px 14px; margin: 6px auto; max-width: 320px;
}
.killer-chip .killer-face { display: flex; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; font-size: 1.7rem; flex: none; }
.killer-name { font-size: .82rem; opacity: .9; text-align: left; line-height: 1.3; }
.killer-name b { font-size: 1rem; }
.recap-line { margin-bottom: 6px; opacity: .75; }

/* the whole board lurches when a boss hits the dirt */
#app.quake { animation: quake calc(var(--fx, 1) * .5s) ease; }
@keyframes quake {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 4px); }
  45% { transform: translate(5px, -5px); }
  70% { transform: translate(-4px, 2px); }
}
.enemy .face { display: flex; width: 74px; height: 74px; margin: 0 auto; border-radius: 12px; overflow: hidden; font-size: 2.1rem; position: relative; }
.enemy .face.art-emoji { overflow: visible; }

/* ---------- Coach James scouting report ---------- */
/* A dotted hint that an enemy is tappable when you're not aiming a card. */
.enemy.scoutable::after {
  content: '?'; position: absolute; top: 2px; right: 4px;
  font-size: .62rem; font-weight: 900; opacity: .4; pointer-events: none;
}
.scout-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.scout-head .scout-face { width: 68px; height: 68px; flex: none; border-radius: 12px; overflow: hidden; font-size: 2rem; }
.scout-who { text-align: left; min-width: 0; }
.scout-name { font-weight: 900; font-size: 1.05rem; line-height: 1.15; }
.scout-hp { font-size: .85rem; opacity: .85; margin-top: 2px; }
.scout-facts {
  text-align: left; font-size: .85rem; line-height: 1.5;
  background: rgba(0,0,0,.28); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px;
}
.scout-line { text-align: left; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; }
.scout-line .coach-face { display: flex; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; font-size: 1.7rem; }
.scout-say { min-width: 0; }

/* ---------- form change / split ---------- */
/* The outgoing form is stacked over the incoming one and dissolves, so a mode shift
   reads as a transformation instead of the artwork blinking to a new picture. */
.enemy .face .form-ghost {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 12px;
  z-index: 2; animation: formghost .9s ease forwards; pointer-events: none;
}
@keyframes formghost {
  0%   { opacity: 1; transform: scale(1); filter: none; }
  45%  { opacity: .85; transform: scale(1.12); filter: brightness(2.2) saturate(.4); }
  100% { opacity: 0; transform: scale(1.35); filter: brightness(3) blur(6px); }
}
.enemy.form-shifting { animation: formshake calc(var(--fx, 1) * .9s) ease; }
.enemy.form-shifting .face { box-shadow: 0 0 22px #fff8, 0 0 40px #ffd23f88; }
@keyframes formshake {
  0%, 100% { transform: translateX(0) scale(1); }
  15% { transform: translateX(-5px) scale(1.04); }
  35% { transform: translateX(5px) scale(1.06); }
  55% { transform: translateX(-4px) scale(1.04); }
  75% { transform: translateX(3px) scale(1.02); }
}
.floaty.formshift { color: #ffe680; font-size: 1.05rem; font-weight: 900; text-shadow: 0 0 12px #ffd23fcc, 0 2px 5px rgba(0,0,0,.7); }
/* A freshly split-off enemy squeezes out of its parent rather than popping in. */
.enemy.splitting-in { animation: splitin .76s cubic-bezier(.34, 1.56, .64, 1) both; transform-origin: left center; }
@keyframes splitin {
  0%   { opacity: 0; transform: translateX(-46px) scaleX(.25) scaleY(1.3); filter: blur(3px); }
  55%  { opacity: 1; transform: translateX(6px) scaleX(1.12) scaleY(.88); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
.enemy.boss-foe { max-width: 190px; }
.enemy.boss-foe .face { width: 118px; height: 118px; font-size: 3rem; }
.enemy .nm { font-size: .72rem; font-weight: 700; line-height: 1.1; margin-top: 2px; }
.intent-slot { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 4px; }
.next-label { font-size: .52rem; font-weight: 900; letter-spacing: .14em; opacity: .75; color: #fff; }
.intent { font-size: .8rem; font-weight: 800; background: rgba(0,0,0,.45); border-radius: 8px; padding: 2px 6px; display: inline-block; }
.intent.thinking { opacity: .45; letter-spacing: 2px; } /* spent mid-phase: the next telegraph waits for your turn */
.intent.attack { color: #ff8b7a; }
.intent.defend { color: #8fd0ff; }
.intent.buff { color: #ffd23f; }
.intent.debuff { color: #d9a6ff; }
.intent.sleep, .intent.flee, .intent.countdown, .intent.summon { color: #cfd8dc; }

.hpbar { height: 8px; background: rgba(0,0,0,.5); border-radius: 5px; margin-top: 5px; overflow: hidden; }
.hpbar > div { height: 100%; background: #e4574a; border-radius: 5px; transition: width calc(var(--fx, 1) * .4s) ease; }
.hpnum { font-size: .72rem; font-weight: 700; }
.chips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 3px; min-height: 14px; }
.chip { font-size: .66rem; background: rgba(0,0,0,.4); color: #fff; border-radius: 6px; padding: 1px 5px; font-weight: 700; }
.chip-power { background: #6a4f9e; border: 1px solid #b9a0ff; }
/* first-ever encounter: glow until tapped once (then you know it forever) */
.chip-new { border: 1px solid #ffd23f; animation: chipglow 1.1s ease-in-out infinite; }
@keyframes chipglow { 50% { box-shadow: 0 0 10px #ffd23f; transform: scale(1.12); } }
.btn.just-drawn { border: 2px solid #ffd23f; }
/* first-ever encounter: glow until tapped once (then you know it forever) */
.chip-new { border: 1px solid #ffd23f; animation: chipglow 1.1s ease-in-out infinite; }
@keyframes chipglow { 50% { box-shadow: 0 0 10px #ffd23f; transform: scale(1.12); } }

.hero-strip {
  display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.35);
  border-radius: 14px; padding: 8px 12px; color: #fff; position: relative;
}
.hero-strip .face { font-size: 2rem; }
.hero-strip .hero-face-combat { display: flex; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.hero-strip .stats { flex: 1; }
.energy-orb {
  font-size: 1.05rem; font-weight: 900; background: #b8860b; border-radius: 50%;
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: 3px solid #ffd23f; line-height: 1;
}
.energy-orb small { font-size: .55rem; font-weight: 700; }
.energy-orb.pulse { animation: orbpulse .45s ease; }
@keyframes orbpulse { 30% { transform: scale(1.25); box-shadow: 0 0 16px #ffd23f; } }

/* damage / heal / block floaties */
.floaty {
  position: absolute; top: 8%; font-size: 1.55rem; font-weight: 900; pointer-events: none; z-index: 30;
  text-shadow: 0 2px 5px rgba(0,0,0,.6); animation: floatup .95s ease-out forwards;
}
.floaty.dmg { color: #ff6b5a; }
.floaty.dmg.big { font-size: 2.3rem; color: #ff4530; text-shadow: 0 0 14px #ff453088, 0 2px 5px rgba(0,0,0,.7); }
.floaty.heal { color: #7ae87a; }
.floaty.blk { color: #8fd0ff; font-size: 1.05rem; }
.floaty.poison { color: #8fd44a; text-shadow: 0 0 10px #8fd44a66, 0 2px 5px rgba(0,0,0,.6); }
.floaty.windy { color: #cfe6ff; font-size: 1.05rem; text-shadow: 0 0 10px #cfe6ff55, 0 2px 5px rgba(0,0,0,.6); }
.fling { position: fixed; z-index: 85; font-size: 1.6rem; pointer-events: none; transition-property: transform, opacity; transition-timing-function: ease-in; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.enemy.poison-flash { animation: poisonflash calc(var(--fx, 1) * .55s) ease; }
.hero-strip.poison-flash { animation: poisonflash calc(var(--fx, 1) * .55s) ease; }
@keyframes poisonflash { 35% { box-shadow: 0 0 22px #8fd44a; border-color: #8fd44a; filter: saturate(1.3); } }
@keyframes floatup {
  0% { opacity: 0; transform: translateY(8px) scale(.6); }
  14% { opacity: 1; transform: translateY(-2px) scale(1.18); }
  28% { transform: translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateY(-78px) scale(.95); }
}

.shake { animation: shake calc(var(--fx, 1) * .3s); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.lunge { animation: lunge calc(var(--fx, 1) * .38s) ease; }
@keyframes lunge { 35% { transform: translateY(18px) scale(1.14); } }

/* ---------- hand (fanned) ---------- */
.hand { display: flex; gap: 6px; overflow-x: auto; overflow-y: visible; padding: 16px 2px 10px; min-height: 152px; align-items: flex-end; }
.hand > .card:first-child { margin-left: auto; }
.hand > .card:last-child { margin-right: auto; } /* centers small hands, scrolls big ones */
.card {
  flex: 0 0 104px; background: #fdf6e3; color: #333; border-radius: 12px; border: 3px solid #b9a97c;
  padding: 6px; text-align: center; cursor: pointer; position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  transform: rotate(var(--fan-rot, 0deg)) translateY(var(--fan-y, 0px));
}
.card:hover, .card:focus-visible { transform: rotate(0deg) translateY(-16px) scale(1.08); z-index: 5; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.card.selected { transform: rotate(0deg) translateY(-16px) scale(1.08); border-color: #ffd23f; box-shadow: 0 0 14px #ffd23f99; z-index: 6; }
.card.unaffordable { filter: grayscale(.7); opacity: .6; }
.card .cost {
  position: absolute; top: -8px; left: -8px; background: #b8860b; color: #fff; border: 2px solid #ffd23f;
  border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .9rem; z-index: 2;
}
.card .art { font-size: 1.7rem; }
.card .cnm { font-weight: 800; font-size: .72rem; line-height: 1.05; }
.card .ctx { font-size: .62rem; line-height: 1.15; margin-top: 2px; color: #555; }
.card.type-attack { background: #fde8e0; }
.card.type-skill { background: #e2eefc; }
.card.type-power { background: #f3e5ff; }
.card.type-status, .card.type-curse { background: #d8d8d8; }
.card.upgraded .cnm { color: #1c7a2e; }
/* rarity framing */
.card.rarity-common { border-color: #b9a97c; }
.card.rarity-uncommon { border-color: #6fa8dc; box-shadow: 0 0 6px #6fa8dc44; }
.card.rarity-rare { border-color: #e0a93e; box-shadow: 0 0 10px #e0a93e66; }
.reward-card.rarity-uncommon { border-color: #6fa8dc; box-shadow: 0 0 8px #6fa8dc55; }
.reward-card.rarity-rare { border-color: #e0a93e; box-shadow: 0 0 12px #e0a93e77; }

/* played-card fly-away ghost */
.card-ghost { position: fixed; z-index: 80; pointer-events: none; transition-property: transform, opacity; transition-timing-function: ease-in; background: #fdf6e3; color: #333; border-radius: 12px; border: 3px solid #ffd23f; padding: 6px; text-align: center; }
.card-ghost.fly { transform: translate(var(--fly-x, 0px), var(--fly-y, -46vh)) scale(.42) rotate(7deg); opacity: .08; }

.target-hint { text-align: center; font-weight: 900; color: #ffd23f; text-shadow: 0 1px 3px rgba(0,0,0,.6); animation: hintbob .8s infinite; }
@keyframes hintbob { 50% { transform: translateY(-4px); } }

.combat-bottom { display: flex; gap: 8px; align-items: center; }
.pilebtn { background: rgba(0,0,0,.35); color: #fff; border: none; border-radius: 10px; padding: 8px 10px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.endturn { flex: 1; background: #2e6b34; color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 1.05rem; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.endturn:disabled { background: #55575e; opacity: .8; }
/* the belt: labeled treasure row under the health bar */
.belt-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.belt-group { display: flex; flex-direction: column; gap: 2px; }
.belt-label { font-size: .55rem; font-weight: 900; letter-spacing: .14em; opacity: .8; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.belt-pins { display: flex; gap: 5px; flex-wrap: wrap; }
.belt-pin { border: none; cursor: pointer; font-size: 1.05rem; background: rgba(0,0,0,.3); border-radius: 8px; padding: 3px 6px; }
.belt-pin.proc { animation: relicjiggle calc(var(--fx, 1) * .6s) ease; }
@keyframes relicjiggle {
  20% { transform: rotate(-14deg) scale(1.3); box-shadow: 0 0 12px #ffd23f; }
  45% { transform: rotate(12deg) scale(1.25); box-shadow: 0 0 12px #ffd23f; }
  70% { transform: rotate(-7deg) scale(1.15); }
}

/* ---------- the map (StS node graph) ---------- */
.map-screen { padding: 0; overflow: hidden; }
.map-topbar { position: relative; z-index: 3; padding: max(10px, env(safe-area-inset-top)) 12px 8px; background: rgba(0,0,0,.22); backdrop-filter: blur(3px); }
.map-title { font-size: 1.15rem; }
.floor-meter { text-align: center; font-size: .85rem; opacity: .95; margin: 4px 0; font-weight: 700; }
.relic-shelf { display: flex; gap: 5px; flex-wrap: wrap; padding: 2px 0; justify-content: center; align-items: center; }
.relic-pin { font-size: 1.1rem; background: rgba(0,0,0,.3); border-radius: 8px; padding: 2px 5px; cursor: pointer; }

.map-wrap { flex: 1; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }
.map-bg { display: none; z-index: 0; }
.map-bg.has-art { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
/* wide screens: blurred mural copy fills the gutters beside the 560px canvas */
.map-bg-wide { display: none; }
@media (min-width: 600px) {
  .map-bg-wide.has-art { display: block; position: absolute; top: 0; left: 0; right: 0; background-size: cover; background-position: center; filter: blur(26px) saturate(1.15); opacity: .4; z-index: 0; }
}
.map-canvas { position: relative; margin: 0 auto; z-index: 1; }
.map-edges { position: absolute; inset: 0; }
.map-edges .edge { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 3.5; stroke-dasharray: 1 9; stroke-linecap: round; }
.map-edges .edge-taken { stroke: rgba(255,255,255,.85); stroke-dasharray: none; }
.map-edges .edge-open { stroke: #ffd23f; stroke-width: 4.5; }

.map-spot {
  position: absolute; width: 54px; height: 54px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(0,0,0,.42); border: 3px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.map-spot .spot-ico { font-size: 1.5rem; line-height: 1; }
.map-spot.spot-boss-big { width: 76px; height: 76px; border-width: 4px; }
.map-spot.spot-boss-big .spot-ico { font-size: 2.2rem; }
.map-spot.visited { opacity: .55; border-color: rgba(255,255,255,.7); }
.map-spot.current { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 0 18px rgba(255,255,255,.5); opacity: 1; }
.map-spot.map-node.reachable { cursor: pointer; border-color: #ffd23f; box-shadow: 0 0 14px #ffd23f99; animation: nodepulse 1.3s infinite; }
@keyframes nodepulse { 50% { box-shadow: 0 0 26px #ffd23fee; border-color: #fff0b0; } }
.map-spot.map-node.reachable .spot-ico { animation: icobob 1.3s ease-in-out infinite; }
@keyframes icobob { 50% { transform: scale(1.12); } }
.map-spot.spot-elite { background: rgba(90,20,30,.55); }
.map-spot.spot-rest { background: rgba(35,80,40,.55); }
.map-spot.spot-shop { background: rgba(30,60,95,.55); }
.map-spot.spot-treasure { background: rgba(120,90,20,.55); }
.map-start-hint { position: absolute; width: 100%; text-align: center; font-weight: 900; text-shadow: 0 1px 4px rgba(0,0,0,.6); animation: hintbob .9s infinite; z-index: 2; }

/* ---------- shared bits ---------- */
.reward-card { border: 3px solid #b9a97c; border-radius: 14px; background: #fdf6e3; color: #333; padding: 12px; margin: 6px; cursor: pointer; text-align: center; width: 128px; display: inline-block; vertical-align: top; position: relative; }
.reward-row { text-align: center; }
.mini-card { padding: 14px 8px 8px; }
.mini-card .cost { position: absolute; top: -9px; left: -9px; background: #b8860b; color: #fff; border: 2px solid #ffd23f; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .95rem; }
.mini-card .art { font-size: 1.9rem; }
.mini-card .mc-name { font-size: .85rem; }
.mini-card .mc-text { font-size: .68rem; margin-top: 3px; }
.mini-card .price-tag { margin-top: 6px; background: #2e6b34; color: #fff; border-radius: 8px; font-weight: 900; font-size: .8rem; padding: 2px 8px; display: inline-block; }
.mini-card.cant-afford { filter: grayscale(.75); opacity: .55; cursor: default; }
.mini-card.cant-afford .price-tag { background: #a33327; }
.mini-card.type-attack { background: #fde8e0; }
.mini-card.type-skill { background: #e2eefc; }
.mini-card.type-power { background: #f3e5ff; }

/* card-value previews: buffed numbers pop green, weakened pop red (StS trick) */
.val-up { color: #1c8a3a; }
.val-down { color: #c0392b; }

/* two-line buy buttons: name+price, effect text underneath */
.btn.two-line small { display: block; font-weight: 600; font-size: .74rem; opacity: .85; margin-top: 2px; }

/* scene banners: the person/place fills the top of the screen */
.scene-screen { padding: 0; }
.scene-banner { position: relative; height: 34vh; min-height: 210px; max-height: 330px; overflow: hidden; flex-shrink: 0; }
.scene-banner .scene-banner-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.scene-banner .scene-banner-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.scene-banner-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.18) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.55) 100%); }
.scene-banner-title { position: absolute; left: 0; right: 0; bottom: 8px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.8); font-size: 1.4rem; z-index: 1; }
.scene-body { flex: 1; overflow-y: auto; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
.gold-line { margin-bottom: 8px; }

/* boss & elite presence: ribbons + aura so the big fights READ big */
.enemy.boss-foe { border-width: 4px; border-color: #ffd23f; box-shadow: 0 0 22px rgba(255, 210, 63, .45); padding-top: 22px; }
.enemy.elite-foe { border-color: #d9736b; box-shadow: 0 0 14px rgba(217, 90, 80, .4); padding-top: 20px; }
.enemy.boss-foe::before, .enemy.elite-foe::before {
  content: '👑 BOSS'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #b8860b; color: #fff; border: 2px solid #ffd23f; border-radius: 9px;
  font-size: .62rem; font-weight: 900; padding: 1px 8px; letter-spacing: .05em; white-space: nowrap; z-index: 2;
}
.enemy.elite-foe::before { content: '💀 BIG TROUBLE'; background: #7a2f28; border-color: #d9736b; }
.enemy.boss-foe .nm { font-size: .82rem; color: #ffd23f; }

/* readable modal list rows (deck, treasures, glossary) */
.deck-line { margin: 5px 0; line-height: 1.35; }
.deck-cost { display: inline-block; min-width: 34px; font-weight: 900; color: #ffd23f; }

.modal-veil { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 40; }
.modal { background: #22304a; border-radius: 16px; padding: 18px; max-width: 460px; width: 92%; max-height: 82vh; overflow-y: auto; color: #f4efe6; }

.toast-stack {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; width: 92%; max-width: 460px;
  pointer-events: none;
}
.toast {
  background: rgba(0,0,0,.88); color: #fff; border-radius: 12px; padding: 10px 18px; font-weight: 700;
  max-width: 100%; text-align: center; animation: toastin .25s ease; pointer-events: auto; cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.gone { opacity: 0; transform: translateY(-10px); }
@keyframes toastin { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* Coach James onboarding bubble (never blocks input) */
.coach-bubble {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 10px; max-width: 92%; width: 360px;
  background: #fdf6e3; color: #2a2a18; border: 3px solid #2e6b34; border-radius: 16px; padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); pointer-events: none;
  animation: coachin .4s ease; transition: opacity .7s ease;
}
.coach-bubble.tappable { pointer-events: auto; cursor: pointer; }
.coach-bubble .tip-tap { opacity: .5; font-size: .7rem; }
.coach-bubble.tappable { pointer-events: auto; cursor: pointer; }
.coach-bubble .tip-tap { opacity: .5; font-size: .7rem; }
.coach-bubble.gone { opacity: 0; }
.coach-bubble .coach-face { display: flex; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; font-size: 1.7rem; }
.coach-bubble .coach-text { font-size: .88rem; line-height: 1.25; }
@keyframes coachin { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.speaker-line { background: rgba(0,0,0,.3); border-left: 5px solid #ffd23f; border-radius: 10px; padding: 12px; margin: 10px auto; max-width: 420px; font-style: italic; }
.event-emoji { font-size: 3.4rem; text-align: center; margin: 10px 0; }

.crown { font-size: 4.5rem; text-align: center; animation: crownpulse 1.6s infinite; }
@keyframes crownpulse { 50% { transform: scale(1.12); } }

/* Liam's floating diapers (orb row) */
.orb-row { display: flex; gap: 8px; justify-content: center; padding: 2px 0; }
.orb {
  font-size: 1.5rem; background: rgba(0,0,0,.3); border: 2px solid #ffd23f66; border-radius: 50%;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex-direction: column; line-height: 1;
  animation: orbbob 2.4s ease-in-out infinite;
}
.orb small { font-size: .6rem; font-weight: 900; color: #ffd23f; }
.orb.empty { opacity: .3; border-style: dashed; animation: none; font-size: 1rem; }
.orb:nth-child(2) { animation-delay: .4s; }
.orb:nth-child(3) { animation-delay: .8s; }
.orb:nth-child(4) { animation-delay: 1.2s; }
.orb:nth-child(5) { animation-delay: 1.6s; }
@keyframes orbbob { 50% { transform: translateY(-5px); } }

/* ---------- victory credits (the crown roll) ---------- */
.credits { position: fixed; inset: 0; z-index: 90; background: #101826; overflow: hidden; display: flex; flex-direction: column; }
.credits-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s ease; filter: brightness(.6); }
.credits-stage { position: absolute; inset: 0 0 120px 0; display: flex; align-items: center; justify-content: center; }
.credits-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.credits-slide.enter-right { animation: slidein .6s ease; }
.credits-slide.exit-left { animation: slideout .6s ease forwards; }
@keyframes slidein { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes slideout { to { opacity: 0; transform: translateX(-90px); } }
.credits-crown { font-size: 4rem; animation: crownpulse 1.6s infinite; }
.credits-crown.small { font-size: 2.4rem; }
.credits-big { font-size: 3rem; font-weight: 900; color: #ffd23f; letter-spacing: .06em; text-shadow: 0 4px 14px rgba(0,0,0,.6); }
.credits-sub { font-size: 1.1rem; color: #fff; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.credits-intro { color: #f4efe6; font-size: 1rem; line-height: 1.6; max-width: 340px; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.credits-intro .ci { opacity: 0; animation: ciin .7s ease forwards; }
.credits-intro .ci-1 { animation-delay: .4s; font-size: 1.3rem; font-weight: 900; }
.credits-intro .ci-2 { animation-delay: 1.6s; }
.credits-intro .ci-3 { animation-delay: 3s; }
@keyframes ciin { to { opacity: 1; } }
.ci-go { display: inline-block; animation: hintbob .8s infinite; }
.credits-portrait { display: flex; width: 200px; height: 200px; border-radius: 22px; overflow: hidden; border: 4px solid #ffd23f; box-shadow: 0 10px 34px rgba(0,0,0,.6); font-size: 5rem; align-items: center; justify-content: center; background: rgba(0,0,0,.3); }
.credits-portrait.hero { border-color: #fff; width: 220px; height: 220px; }
.credits-portrait.in-pop { animation: portraitpop .5s ease; }
.credits-duo { display: flex; gap: 14px; }
.credits-duo .credits-portrait { width: 150px; height: 150px; }
@keyframes portraitpop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.credits-titlecard { background: rgba(0,0,0,.55); border-radius: 14px; padding: 10px 22px; }
.credits-titlecard .cn { font-size: 1.5rem; font-weight: 900; color: #ffd23f; }
.credits-titlecard .ct { font-size: .95rem; color: #fff; opacity: .9; }
.credits-crew { color: #f4efe6; line-height: 1.7; font-size: 1rem; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.credits-crew .dim { opacity: .6; font-size: .8rem; }
.credits-caption { position: absolute; left: 0; right: 0; bottom: 26px; display: grid; place-items: center; min-height: 84px; padding: 0 16px; opacity: 0; }
.credits-caption.show { opacity: 1; }
.cap-inner { background: rgba(0,0,0,.6); border-radius: 14px; padding: 10px 16px; max-width: 480px; text-align: center; font-size: 1.15rem; font-weight: 800; line-height: 1.5; }
.cap-inner .cw { color: rgba(255,255,255,.4); transition: color .12s; }
.cap-inner .cw.lit { color: #ffd23f; text-shadow: 0 0 12px #ffd23f66; }
.credits-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; background: rgba(0,0,0,.45); color: #fff; border: none; border-radius: 10px; padding: 8px 12px; font-weight: 700; cursor: pointer; z-index: 3; opacity: .75; }
.credits-continue { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom)); width: auto; padding: 14px 34px; z-index: 3; }
.credits-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 130px; color: #ffd23f; font-weight: 900; animation: hintbob .8s infinite; text-shadow: 0 2px 8px rgba(0,0,0,.8); z-index: 3; }

/* ---------- boss victory splash + treasure pop + act story cards ---------- */
.boss-splash { justify-content: center; text-align: center; position: relative; }
.splash-big { font-size: 2.4rem; color: #ffd23f; text-shadow: 0 4px 14px rgba(0,0,0,.5); letter-spacing: .04em; animation: splashin .5s ease; }
@keyframes splashin { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetto { position: absolute; top: -30px; animation: confettifall 2.8s linear infinite; }
@keyframes confettifall {
  from { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  to { transform: translateY(105vh) rotate(340deg); opacity: .7; }
}
.treasure-pop { text-align: center; border: 3px solid #ffd23f; box-shadow: 0 0 40px #ffd23f66; }
.treasure-emoji { font-size: 4.5rem; margin: 6px 0; animation: crownpulse 1.6s infinite; }
.treasure-name { color: #ffd23f; }

.act-card { justify-content: center; position: relative; text-align: center; }
.act-card .battle-bg.has-art { opacity: .55; }
.act-card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
/* title-screen treatment: DARK text + white outline on every act (light text
   with a white outline turned to mush on act 2's dusk art) */
.act-card-kicker, .act-card-name, .act-card-sub {
  color: #2a2a18;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff,
    0 4px 18px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.5);
}
.act-card-kicker { font-weight: 900; letter-spacing: .35em; opacity: .95; font-size: .95rem; }
.act-card-name { font-size: 2.2rem; letter-spacing: .06em; animation: splashin .5s ease; }
.act-card-sub { font-weight: 800; font-size: 1.2rem; }
.act-card .speaker-line { font-size: 1.18rem; font-weight: 700; background: rgba(0,0,0,.45); color: #fff; }
.act-card .battle-bg.has-art { opacity: .8; }
.act-card .battle-bg.has-art ~ .act-card-inner .event-emoji { display: none; } /* the art tells the story; emoji is the no-art fallback */

/* event outcome, in place */
.event-result { background: rgba(0,0,0,.5); border: 3px solid #ffd23f; border-radius: 14px; padding: 14px 16px; margin: 10px auto; max-width: 420px; color: #fff; font-weight: 700; font-size: 1.05rem; text-align: center; animation: splashin .4s ease; }

/* upgrade compare (Granny's Practice) */
.upgrade-compare { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 10px 0; }
.upgrade-compare .mini-card { width: 138px; cursor: default; }
.up-arrow { font-size: 1.7rem; color: #ffd23f; }
.up-after { border-color: #1c8a3a; box-shadow: 0 0 12px #1c8a3a66; }
.up-after .mc-name { color: #1c7a2e; }

/* scene decision-support strip (HP + gold + deck at every stop) */
.scene-status { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 2px 0 8px; flex-wrap: wrap; position: relative; }
.scene-stat { background: rgba(0,0,0,.3); color: #fff; border-radius: 10px; padding: 6px 12px; font-weight: 800; font-size: .9rem; display: inline-block; }
/* event outcomes tick the strip: green swell on gains, red rattle on hits */
.scene-stat.stat-bump { animation: statbump .55s ease; }
.scene-stat.stat-drop { animation: statdrop .55s ease; }
@keyframes statbump { 40% { transform: scale(1.28); color: #7ae87a; } }
@keyframes statdrop {
  20% { transform: translateX(-4px) scale(1.12); color: #ff6b5a; }
  45% { transform: translateX(4px) scale(1.12); color: #ff6b5a; }
  70% { transform: translateX(-2px); color: #ff6b5a; }
}
@media (prefers-reduced-motion: reduce) { .scene-stat.stat-bump, .scene-stat.stat-drop { animation: none; } }

/* fullscreen toggle: quiet corner chip on the title screen */
.fs-btn {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 40;
  width: 46px; height: 46px; border-radius: 12px; border: 2px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.38); color: #fff; font-size: 1.4rem; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.fs-btn:active { transform: scale(.92); }

/* Big Breakfast reward beat: the pancakes flip in, then the heal pops up */
.bf-banner {
  display: inline-block; margin: 2px auto 6px; padding: 8px 16px; border-radius: 12px;
  background: rgba(0,0,0,.35); color: #ffe9b8; font-weight: 800; font-size: 1rem;
  border: 2px solid #ffd23f66; animation: bfpop .6s ease;
}
.bf-banner .bf-heal { display: inline-block; color: #7ae87a; animation: bfheal .7s ease .4s backwards; }
@keyframes bfpop { 0% { transform: scale(.3) rotate(-7deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); } }
@keyframes bfheal { 0% { opacity: 0; transform: translateY(9px) scale(.5); } 60% { transform: translateY(-3px) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .bf-banner, .bf-banner .bf-heal { animation: none; } }

/* ---------- landscape ---------- */
/* Phones held sideways are too short for the column layout — ask for portrait. */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 480px) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 200; background: #1a2436ee;
    color: #f4efe6; align-items: center; justify-content: center; flex-direction: column;
    gap: 10px; font-size: 1.2rem; font-weight: 800; text-align: center; padding: 20px;
  }
  .rotate-hint .rh-icon { font-size: 3rem; animation: rotatebob 1.6s ease-in-out infinite; }
}
@keyframes rotatebob { 50% { transform: rotate(-90deg); } }
/* Tablets sideways have real room: banner beside choices, wider stage. */
@media (orientation: landscape) and (min-height: 500px) {
  .scene-screen { flex-direction: row; }
  .scene-banner { width: 42%; height: auto; max-height: none; min-height: 0; }
  .scene-body { flex: 1; }
  .combat-inner, .title-inner { max-width: 900px; margin: 0 auto; width: 100%; }
  .enemy-row { gap: 16px; }
  .credits-portrait { width: 240px; height: 240px; }
  .map-topbar { padding-left: 10vw; padding-right: 10vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .credits-intro .ci { opacity: 1; }
  .credits-caption { opacity: 1; }
}
@media (min-width: 700px) {
  .card { flex-basis: 118px; }
  .title-logo { font-size: 2.6rem; }
  /* tablets: enemy cards were phone-sized and swam in the space (sweep, Tue 2026-08-05) */
  .enemy { min-width: 124px; max-width: 172px; }
  .enemy .face { width: 96px; height: 96px; font-size: 2.6rem; }
  .enemy-row { gap: 14px; }
}


/* ================= RL4: world looks ================= */
body { background: #1a2436; }
.look-w1 .btn { background: #e0419a; box-shadow: 0 3px 0 #9c1f64, 0 0 12px #ff9fd355; }
.look-w1 .btn.gold { background: linear-gradient(#ffd86b, #e8a93b); color: #5a2a00; }
.look-w1 .btn.secondary { background: #b178d6; }
.look-w2 .btn { background: #52b8a0; border-radius: 22px; box-shadow: 0 4px 0 #2f8a74; }
.look-w2 .btn.gold { background: #ffb867; color: #5a3100; box-shadow: 0 4px 0 #d98a3a; }
.look-w2 .btn.secondary { background: #9d8fd6; box-shadow: 0 4px 0 #6f62ad; }
.look-w3 .btn { background: #b2556f; font-family: Georgia, "Times New Roman", serif; letter-spacing: .02em; border: 2px solid #f5d77e; }
.look-w3 .btn.gold { background: linear-gradient(#f7e2a0, #d9b45b); color: #4a2a10; }
.look-w3 .btn.secondary { background: #6f8f8a; }
.look-w3 h1, .look-w3 h2 { font-family: Georgia, "Times New Roman", serif; }
.look-w1 .speaker-line { border-left-color: #ff5fb0; background: rgba(90, 10, 60, .35); color: #fff; }
.look-w2 .speaker-line { border-left-color: #52b8a0; background: rgba(40, 40, 90, .28); color: #fff; }
.look-w3 .speaker-line { border-left-color: #d9b45b; background: rgba(70, 30, 45, .35); color: #fff; }
.look-w1 .modal { background: #5a1a47; border: 3px solid #ff8cc6; }
.look-w2 .modal { background: #3b3f73; border: 3px solid #9fe7d8; border-radius: 26px; }
.look-w3 .modal { background: #4d2a38; border: 3px solid #d9b45b; }
.look-w1 .map-topbar, .look-w2 .map-topbar, .look-w3 .map-topbar { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.look-w1 .map-topbar { background: rgba(160, 20, 100, .45); }
.look-w2 .map-topbar { background: rgba(60, 70, 130, .45); }
.look-w3 .map-topbar { background: rgba(110, 40, 60, .45); }

/* ---------- card faces (painting + name + text; the frame changes per world) ---------- */
.cardface { display: flex; flex-direction: column; align-items: stretch; overflow: visible; }
.cardface .card-art { display: flex; width: 100%; aspect-ratio: 1 / .78; border-radius: 8px; overflow: hidden; font-size: 2rem; align-items: center; justify-content: center; background: rgba(0,0,0,.08); }
.cardface .card-art img { object-position: center 30%; }
.cardface .card-art.art-emoji { font-size: 2rem; }
.cardface .cnm { margin-top: 3px; }
.card.cardface { flex: 0 0 112px; padding: 5px; }
.card .ctx { font-size: .6rem; }
.mini-card.cardface { width: 136px; padding: 10px 7px 7px; }
.mini-card .ctx { font-size: .66rem; margin-top: 3px; line-height: 1.2; }
.mini-card .cnm { font-weight: 800; font-size: .82rem; }
.cardface .stk { position: absolute; top: -9px; right: -7px; font-size: 1.15rem; background: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); z-index: 3; }
.cardface .stk-line { display: block; margin-top: 2px; font-weight: 700; color: #7a4b00; }
.cardface .cost.cost-down { background: #1c8a3a; border-color: #8fe3a5; }
.cardface .cost.cost-up { background: #3f8f2f; border-color: #b6ff7a; box-shadow: 0 0 8px #7fe36b; }
.cardface.slimed { box-shadow: inset 0 -18px 16px -8px #7fd65e, 0 0 10px #7fd65e99; }
.cardface.slimed::after { content: '🟢 slimed +1⚡'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: .55rem; font-weight: 900; background: #3f8f2f; color: #fff; border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.card-tag { position: absolute; left: 50%; transform: translateX(-50%); font-size: .56rem; font-weight: 900; border-radius: 7px; padding: 1px 6px; white-space: nowrap; z-index: 3; }
.tag-free { top: -9px; background: #1c8a3a; color: #fff; }
.tag-rule { bottom: -9px; background: #ff8a00; color: #fff; box-shadow: 0 0 8px #ffb347; }
.tag-sorry { bottom: -9px; background: #7a4bd6; color: #fff; }
.card.breaks-rule { border-color: #ff8a00 !important; box-shadow: 0 0 14px #ff8a00cc; animation: rulepulse 1.2s ease-in-out infinite; }
@keyframes rulepulse { 50% { box-shadow: 0 0 22px #ffb347; } }
.mini-card.picked { outline: 4px solid #ffd23f; transform: scale(1.04); }
.deck-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.deck-grid .mini-card { cursor: pointer; margin: 4px; }

/* per-world card frames */
.cardface.look-base { background: #fdf6e3; border-color: #b9a97c; color: #333; }
.cardface.look-w1 { background: linear-gradient(#fff0f8, #ffd3ea); border: 3px solid #ff5fb0; color: #4a1036; border-radius: 14px; box-shadow: inset 0 0 0 3px #fff9, 0 2px 8px #ff5fb066; }
.cardface.look-w1 .card-art { border-radius: 10px; border: 2px solid #fff; box-shadow: inset 0 0 18px #ffffffaa; }
.cardface.look-w1 .cost { background: #ff3fa0; border-color: #ffe0f0; }
.cardface.look-w2 { background: linear-gradient(#f2fffb, #dff1ff); border: 3px solid #8fd8c8; color: #2c2f5a; border-radius: 22px; box-shadow: 0 4px 0 #b7c7ef; }
.cardface.look-w2 .card-art { border-radius: 18px; }
.cardface.look-w2 .cost { background: #9d8fd6; border-color: #fff; border-radius: 40% 60% 55% 45%; }
.cardface.look-w3 { background: #fffaf2 radial-gradient(circle at 50% 0, #fff 0 40%, transparent 41%); border: 3px double #d9b45b; color: #3d2330; border-radius: 10px; font-family: Georgia, "Times New Roman", serif; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(80,40,50,.25); }
.cardface.look-w3 .card-art { border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; border: 2px solid #d9b45b; }
.cardface.look-w3 .cost { background: #b2556f; border-color: #f5d77e; }
.cardface.type-attack.look-w1 { background: linear-gradient(#fff0f8, #ffc4dc); }
.cardface.type-skill.look-w2 { background: linear-gradient(#f2fffb, #d6ecff); }
.cardface.type-power { box-shadow: 0 0 10px #b98cff99; }
.cardface.rarity-rare { box-shadow: 0 0 12px #e0a93e88; }

/* ---------- combat extras ---------- */
.hero-meter { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.4); color: #fff; border-radius: 12px; padding: 6px 12px; cursor: pointer; font-weight: 800; }
.meter-label { font-size: .7rem; letter-spacing: .08em; opacity: .9; }
.meter-num { font-size: 1.25rem; margin-left: auto; color: #ffd23f; }
.meter-tag { font-size: .62rem; background: #ffd23f; color: #3a2a00; border-radius: 6px; padding: 1px 6px; }
.speedo { display: flex; gap: 4px; }
.speedo .pip { width: 14px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.18); display: inline-block; transition: background .2s; }
.speedo .pip.on { background: #ffd23f; box-shadow: 0 0 8px #ffd23f; }
.speedo .pip.mark { outline: 2px solid #ffffff88; }
.hammer-num { font-size: 1.6rem; }
.potty-bar { flex: 1; height: 14px; background: rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; min-width: 90px; }
.potty-fill { display: block; height: 100%; background: linear-gradient(90deg, #7fd3ff, #3f9fff); border-radius: 8px; transition: width calc(var(--fx, 1) * .35s) ease; }
.hero-meter.almost .potty-fill { background: linear-gradient(90deg, #ffd23f, #ff8a00); animation: almostpulse .8s ease-in-out infinite; }
@keyframes almostpulse { 50% { filter: brightness(1.35); } }
.hero-meter.flushing { animation: flushspin calc(var(--fx, 1) * .9s) ease; }
@keyframes flushspin { 30% { transform: scale(1.08) rotate(-2deg); box-shadow: 0 0 24px #7fd3ff; } 60% { transform: scale(1.05) rotate(2deg); } }
.rule-banner { background: linear-gradient(#fffaf2, #f7e3c8); color: #4a2a10; border: 3px double #d9b45b; border-radius: 12px; padding: 6px 10px; font-size: .8rem; text-align: center; font-family: Georgia, serif; cursor: pointer; }
.rule-banner .rule-next { margin-top: 3px; font-size: .74rem; color: #8a2f4a; }
.wave-chip { align-self: center; background: #b8860b; color: #fff; font-weight: 900; border-radius: 10px; padding: 2px 12px; font-size: .8rem; }
.outfit-next { font-size: .6rem; font-weight: 900; background: rgba(255,95,176,.85); color: #fff; border-radius: 6px; padding: 1px 5px; margin-bottom: 3px; display: inline-block; }
.enemy.dissolved { opacity: .45; filter: saturate(.4) brightness(1.2); }
.big-banner { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 95; font-size: 2.2rem; font-weight: 900; color: #fff; text-shadow: 0 0 18px #3f9fff, 0 3px 8px rgba(0,0,0,.7); pointer-events: none; animation: bannerpop calc(var(--fx, 1) * .85s) ease forwards; white-space: nowrap; max-width: 96vw; text-align: center; }
.big-banner.banner-rule { color: #fff4d6; text-shadow: 0 0 16px #d9b45b, 0 3px 8px rgba(0,0,0,.7); font-size: 1.5rem; white-space: normal; }
.big-banner.banner-boss { color: #ffe680; font-size: 1.6rem; white-space: normal; }
@keyframes bannerpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); } }
.enemy.boss-foe::before { content: '👑 COUSIN BOSS'; }

/* ---------- money: tally, pets, arena ---------- */
.coin-tally { background: rgba(0,0,0,.35); color: #fff; border-radius: 14px; padding: 10px 14px; margin: 8px auto; max-width: 380px; width: 100%; }
.tally-line { display: flex; justify-content: space-between; font-weight: 700; margin: 3px 0; }
.tally-line b { color: #ffd23f; }
.tally-total { border-top: 1px solid rgba(255,255,255,.3); margin-top: 6px; padding-top: 6px; text-align: center; font-weight: 900; color: #ffe9a8; }
.pet-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; text-align: left; }
.pet-face { display: inline-flex; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; font-size: 2rem; align-items: center; justify-content: center; background: rgba(255,255,255,.12); flex: none; }
.pet-row-txt { font-size: .85rem; line-height: 1.35; }
.pet-pop-face { display: flex; width: 150px; height: 150px; margin: 6px auto; border-radius: 50%; overflow: hidden; font-size: 4rem; align-items: center; justify-content: center; border: 4px solid #ffd23f; }
.arena-waves { background: rgba(0,0,0,.28); border-radius: 12px; padding: 8px 12px; margin: 8px auto; max-width: 420px; color: #fff; }
.arena-wave { margin: 4px 0; font-size: .9rem; }
.rule-tag { font-size: .72rem; background: #b2556f; border-radius: 6px; padding: 1px 6px; }
.spot-fee { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 900; background: #b8860b; color: #fff; border-radius: 6px; padding: 0 4px; white-space: nowrap; }
.map-spot.spot-arena { background: rgba(140, 90, 10, .6); border-color: #ffd23f; }
.spot-boss-face { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; display: flex; }
.spot-boss-face.art-emoji { display: none; }
.glowbtn { animation: chipglow 1.1s ease-in-out infinite; background: #b8860b !important; }
.scene-status .pilebtn { font-size: .85rem; }
.save-code { width: 100%; min-height: 70px; font-size: .7rem; border-radius: 10px; padding: 6px; margin: 6px 0; font-family: ui-monospace, monospace; }
.dim { opacity: .75; font-size: .82rem; }
.hero-mech { font-size: .8rem !important; opacity: 1 !important; background: rgba(0,0,0,.12); border-radius: 8px; padding: 4px; margin: 4px 0; }

/* ---------- boss intro / splash ---------- */
.boss-intro { justify-content: center; text-align: center; }
.boss-intro .battle-bg.has-art { opacity: .75; }
.boss-intro-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.boss-intro-face { display: flex; width: min(62vw, 300px); height: min(62vw, 300px); border-radius: 24px; overflow: hidden; border: 5px solid #ffd23f; box-shadow: 0 0 40px #ffd23f88; font-size: 6rem; align-items: center; justify-content: center; animation: splashin .6s ease; }
.boss-intro-name { font-size: 1.6rem; color: #fff; text-shadow: 0 3px 10px rgba(0,0,0,.7); }
.boss-splash .boss-intro-face { width: 200px; height: 200px; margin: 0 auto; }

/* ---------- cutscenes (world-jump, story cards, squeeze out, the ending) ---------- */
.cutscene { position: fixed; inset: 0; z-index: 88; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #101826; color: #fff; text-align: center; transition: opacity .35s; }
.cutscene.cutscene-out { opacity: 0; }
.cutscene-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s; }
.cutscene-bg.has-art { opacity: 1; }
.kenburns.has-art { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1.0) translateY(-1%); } }
.cutscene-cap { position: relative; z-index: 2; margin-top: auto; margin-bottom: max(90px, calc(env(safe-area-inset-bottom) + 80px)); background: rgba(0,0,0,.62); border-radius: 16px; padding: 12px 18px; max-width: 520px; width: 92%; font-size: 1.15rem; font-weight: 800; line-height: 1.45; }
.cutscene-cap small { font-size: .85rem; opacity: .9; }
.cutscene-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 5; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 10px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
.cutscene-go { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: auto !important; padding: 14px 34px; z-index: 5; }
.jump-grid { position: absolute; z-index: 3; top: 12%; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0 10px; pointer-events: none; }
.jump-grid .mini-card { width: 92px; padding: 6px 4px 4px; transform: scale(.92); }
.jump-grid .mini-card .ctx { display: none; }
.jump-grid .mini-card .cnm { font-size: .6rem; }
.jump-grid.fly-up .mini-card { animation: jumpflyup calc(var(--fx, 1) * .5s) ease-in forwards; animation-delay: calc(var(--ji, 0) * 40ms); }
@keyframes jumpflyup { to { transform: translateY(-120vh) rotate(calc(var(--ji, 0) * 37deg - 180deg)) scale(.6); opacity: 0; } }
.jump-grid.land .mini-card { animation: jumpland calc(var(--fx, 1) * .6s) cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--ji, 0) * 70ms); }
@keyframes jumpland { from { transform: translateY(-110vh) rotate(-30deg) scale(.7); opacity: 0; } to { transform: scale(.92); opacity: 1; } }
.jump-flash { position: absolute; inset: 0; z-index: 4; opacity: 0; animation: jumpflash calc(var(--fx, 1) * .9s) ease-out forwards; pointer-events: none; }
@keyframes jumpflash { 0% { opacity: 0; } 25% { opacity: .95; } 100% { opacity: 0; } }
.story-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 20px; max-width: 520px; }
.story-kicker { font-weight: 900; letter-spacing: .35em; font-size: .9rem; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.story-emoji { font-size: 3rem; }
.story-name { font-size: 2rem; letter-spacing: .04em; color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.85); animation: splashin .5s ease; }
.story-sub { font-weight: 800; font-size: 1.15rem; text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.story-line { font-style: normal; font-size: 1.02rem; background: rgba(0,0,0,.55) !important; color: #fff; text-align: left; }
.story .cutscene-bg.has-art { opacity: .78; }
.squeeze-pop { position: relative; z-index: 3; font-size: 5rem; font-weight: 900; color: #fff; text-shadow: 0 0 30px #9fe7d8, 0 4px 12px rgba(0,0,0,.6); animation: squeezepop calc(var(--fx, 1) * 1s) cubic-bezier(.3, 1.8, .5, 1) both; margin-top: 18vh; }
@keyframes squeezepop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.3) rotate(4deg); opacity: 1; } 100% { transform: scale(1); } }
.ending-stage { position: absolute; inset: 0; }
.ending-shot { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s ease; }
.ending-shot.has-art { opacity: 1; }
.ending-cap { opacity: 0; transition: opacity .4s; }
.ending-cap.show { opacity: 1; }
.video-ending video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ---------- map weather per world ---------- */
.weather { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.wp { position: absolute; left: var(--wl, 50%); top: -5%; font-size: calc(1rem * var(--ws, 1)); animation: wfall var(--wt, 8s) linear var(--wdel, 0s) infinite; opacity: 0; }
@keyframes wfall { 0% { transform: translateY(0) translateX(0); opacity: 0; } 8% { opacity: .8; } 90% { opacity: .7; } 100% { transform: translateY(108vh) translateX(30px); opacity: 0; } }
.wp.sparkle { color: #fff; text-shadow: 0 0 8px #ff8ae0; }
.wp.glitterbit { width: 5px; height: 5px; border-radius: 1px; background: #ff9fd3; box-shadow: 0 0 6px #fff; transform: rotate(45deg); }
.wp.bubble { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffffffcc; background: radial-gradient(circle at 30% 30%, #fff9, #9fe7d833); top: 105%; animation-name: wrise; }
.wp.bubble.big { width: 28px; height: 28px; }
@keyframes wrise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .8; } 100% { transform: translateY(-115vh) translateX(-24px); opacity: 0; } }
.wp.petal { animation-name: wsway; }
@keyframes wsway { 0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translateY(54vh) translateX(-26px) rotate(160deg); } 100% { transform: translateY(108vh) translateX(22px) rotate(340deg); opacity: 0; } }
.wp.steam { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(#ffffffaa, transparent 70%); top: 105%; animation-name: wrise; }
@media (prefers-reduced-motion: reduce) { .wp { animation: none; opacity: 0; } }

/* ---------- world-signature enemy entrances ---------- */
.enemy.spawn-w1 { animation: glamin .8s cubic-bezier(.34, 1.4, .5, 1) both; animation-delay: calc(var(--si, 0) * .14s); }
@keyframes glamin { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; filter: brightness(2.5); } 60% { transform: scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: none; filter: none; } }
.enemy.spawn-w2 { animation: hopin .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--si, 0) * .14s); }
@keyframes hopin { 0% { transform: translateY(-70px) scale(.7, 1.3); opacity: 0; } 55% { transform: translateY(6px) scale(1.2, .8); opacity: 1; } 78% { transform: translateY(-8px) scale(.95, 1.05); } 100% { transform: none; opacity: 1; } }
.enemy.spawn-w3 { animation: curtsyin .9s ease-out both; animation-delay: calc(var(--si, 0) * .16s); }
@keyframes curtsyin { 0% { transform: translateY(-30px); opacity: 0; } 60% { transform: translateY(6px) rotate(-3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.enemy.spawn-base { animation: splashin .5s ease both; }

/* per-world combat boards */
.look-w1 .enemy { background: rgba(120, 10, 70, .35); border-color: #ffb3d9; }
.look-w2 .enemy { background: rgba(60, 60, 120, .3); border-color: #c8f3ea; border-radius: 24px; }
.look-w3 .enemy { background: rgba(80, 40, 50, .35); border-color: #f5d77e; }
.look-w1 .hero-strip { background: rgba(120, 10, 70, .5); }
.look-w2 .hero-strip { background: rgba(60, 60, 120, .45); border-radius: 22px; }
.look-w3 .hero-strip { background: rgba(80, 40, 50, .5); }
.crown-screen { justify-content: center; text-align: center; }
/* a tip never covers a picker's buttons: with a modal open, the bubble moves to the top */
body:has(.modal-veil) .coach-bubble { top: max(12px, env(safe-area-inset-top)); bottom: auto; }
body:has(.cutscene) .coach-bubble { display: none; }
body:has(.map-screen) .coach-bubble { top: calc(env(safe-area-inset-top) + 118px); bottom: auto; }
body:has(.combat) .coach-bubble { top: max(10px, env(safe-area-inset-top)); bottom: auto; }
.reward-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px 4px; }
.reward-row .mini-card { margin: 0; cursor: pointer; }
.mini-card { position: relative; }
.mini-card .cost { position: absolute; top: -9px; left: -9px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .95rem; color: #fff; border: 2px solid #ffd23f; background: #b8860b; z-index: 2; }
.mini-card .price-tag { margin-top: 6px; align-self: center; }
@media (min-width: 700px) {
  .enemy.boss-foe { max-width: 240px; }
  .enemy.boss-foe .face { width: 180px; height: 180px; }
  .card.cardface { flex-basis: 124px; }
}
@media (max-width: 480px) {
  .card.cardface { flex-basis: 92px; padding: 4px; }
  .card .cnm { font-size: .66rem; }
  .card .ctx { font-size: .55rem; }
  .enemy .face { width: 64px; height: 64px; }
  .hand { gap: 4px; min-height: 140px; }
}
.spot-fee.broke { background: #a33327; }
/* the title text stays readable over the painting: a soft light band behind it */
.title-screen .title-inner { background: linear-gradient(rgba(255,255,255,.82) 0, rgba(255,255,255,.6) 120px, rgba(255,255,255,0) 200px); margin: calc(-1 * max(12px, env(safe-area-inset-top))) -12px 0; padding: max(12px, env(safe-area-inset-top)) 12px 0; }
.title-screen .title-sub { color: #3a1030; }
/* tablets: a lone foe (or a pair) gets portrait-sized art instead of swimming in the space */
@media (min-width: 700px) {
  .enemy-row > .enemy:only-child:not(.boss-foe) { max-width: 220px; }
  .enemy-row > .enemy:only-child:not(.boss-foe) .face { width: 150px; height: 150px; font-size: 4rem; }
  .enemy-row > .enemy:first-child:nth-last-child(2) { max-width: 196px; }
  .enemy-row > .enemy:first-child:nth-last-child(2) .face, .enemy-row > .enemy:last-child:nth-child(2) .face { width: 126px; height: 126px; font-size: 3.2rem; }
  .enemy-row > .enemy:last-child:nth-child(2) { max-width: 196px; }
}
/* short screens (card reward, Arena prize) sit mid-screen, never cut off when they grow */
.screen.center-stack { text-align: center; }
.screen.center-stack > :first-child { margin-top: auto; }
.screen.center-stack > :last-child { margin-bottom: auto; }
/* the boss splash sits on its world's battle painting, dimmed, so the gold title reads in every look */
.boss-splash > :not(.battle-bg):not(.confetti-layer) { position: relative; z-index: 1; }
.boss-splash .battle-bg.has-art { opacity: 1; filter: brightness(.42) saturate(1.1); }
.boss-splash .subtitle { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
/* hero pick: on the farm painting, mid-screen, bigger faces on tablets */
.hero-screen > :not(.battle-bg) { position: relative; z-index: 1; }
.hero-screen .battle-bg.has-art { opacity: .45; }
.hero-screen > h2 { margin-top: auto; text-shadow: 0 2px 8px rgba(255,255,255,.8); }
.hero-screen > :last-child { margin-bottom: auto; align-self: center; min-width: 200px; }
.hero-screen .hero-card { background: rgba(255,255,255,.78); border-color: rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.hero-screen .hero-card p { opacity: 1; }
@media (min-width: 700px) {
  .hero-card { max-width: 230px; }
  .hero-card .hero-face { width: 136px; height: 136px; }
}
/* the wins shelf reads over the busy title painting */
.title-screen .wins-shelf { background: rgba(35, 20, 10, .62); color: #fff; opacity: 1; border-radius: 14px; padding: 6px 16px; align-self: center; line-height: 1.5; }
/* the cousins' secret wink (tap her portrait 3 times on her intro) */
.boss-intro-face.wink { animation: wink .7s ease; }
@keyframes wink { 0%, 100% { transform: none; } 30% { transform: rotate(-7deg) scale(1.07); } 60% { transform: rotate(5deg) scale(1.03); } }