@font-face { font-family: 'andika'; src: url('../munch/fonts/andika-bold.woff2') format('woff2'); font-weight: 700 900; font-display: block; }
@font-face { font-family: 'andika'; src: url('../munch/fonts/andika-regular.woff2') format('woff2'); font-weight: 400 600; font-display: block; }

:root {
  --ink: #2a2140;
  --sun: #ffc23d;
  --tomato: #ff6b4a;
  --mint: #34c98b;
  --sky1: #9fe0ff; --sky2: #e6f8ff; --ground: #5cc46a; --top: #8be08b;
  --letters: 'andika', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --ui: ui-rounded, 'SF Pro Rounded', 'andika', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--ui); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation; background: #9fe0ff; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
#app { position: fixed; inset: 0; overflow: hidden; }

.screen { position: absolute; inset: 0; display: none; }
.screen[data-active] { display: block; }

.round {
  width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-size: 26px; display: grid; place-items: center; position: relative;
}
.round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.round b { position: absolute; right: -8px; bottom: -6px; background: var(--sun); border: 3px solid var(--ink); border-radius: 999px; font-size: 13px; padding: 0 6px; font-weight: 900; }
.pill { background: #fff; border: 4px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 900; font-size: 20px; box-shadow: 0 4px 0 var(--ink); white-space: nowrap; }

/* ───────── title ───────── */
#title { background: linear-gradient(#9fe0ff, #e6f8ff 60%, #fff4d6); text-align: center; }
#title::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -30vh; height: 46vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 20%, #8be08b, #5cc46a 70%); z-index: 0; }
#title > * { position: relative; z-index: 1; }
.corner { position: absolute !important; top: max(14px, env(safe-area-inset-top)); display: flex; gap: 10px; z-index: 5 !important; }
.corner.tl { left: 14px; }
.logo { margin: 0; padding-top: max(70px, calc(env(safe-area-inset-top) + 56px)); font-family: var(--letters); font-weight: 900; font-size: clamp(64px, 17vw, 120px); line-height: .9; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); letter-spacing: -.02em; }
.logo span { display: block; font-size: .42em; color: var(--sun); -webkit-text-stroke: 3px var(--ink); text-shadow: 0 4px 0 var(--ink); margin-bottom: .1em; }
.title-mon { width: min(46vw, 240px); height: min(46vw, 240px); margin: 2vh auto 0; animation: bob 2.2s ease-in-out infinite; }
.title-mon .mon-svg, .title-mon img { width: 100%; height: 100%; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(2deg); } }
.play {
  width: 110px; height: 110px; border-radius: 50%; background: var(--sun); border: 5px solid var(--ink); box-shadow: 0 8px 0 var(--ink);
  font-size: 50px; padding-left: 8px; margin-top: 2vh; animation: pulse 1.6s ease-in-out infinite;
}
.play:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
@keyframes pulse { 50% { scale: 1.07; } }
.worlds { display: flex; gap: 8px; justify-content: center; margin-top: 3vh; flex-wrap: wrap; padding: 0 10px; }
.worlds button { border: 4px solid var(--ink); border-radius: 16px; padding: 4px 12px; background: #fff; font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 var(--ink); }
.worlds button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.worlds button[disabled] { opacity: .35; }
.credit { position: absolute !important; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; text-shadow: 0 1px 2px #0005; }

/* ───────── run ───────── */
#run .sky { position: absolute; inset: 0; background: linear-gradient(var(--sky1), var(--sky2)); transition: background 1s; }
.hills { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; pointer-events: none; }
.hills.far { height: 42vh; opacity: .45; background-size: 520px 100%; background-image: radial-gradient(ellipse 260px 100% at 260px 100%, var(--ground) 98%, transparent 100%); }
.hills.near { height: 22vh; background-size: 380px 100%; background-image: radial-gradient(ellipse 190px 100% at 190px 100%, var(--top) 98%, transparent 100%); opacity: .8; }
.track { position: absolute; inset: 0; transition: transform .75s cubic-bezier(.45,.05,.3,1); will-change: transform; }

.block {
  position: absolute; min-width: var(--bw, 120px); padding: 14px 16px 12px; border: 5px solid var(--ink); border-radius: 18px;
  background: #fff8e8; box-shadow: 0 8px 0 var(--ink); text-align: center;
  font-family: var(--letters); font-weight: 700; font-size: clamp(34px, 9vw, 52px); line-height: 1; color: var(--ink);
}
.block::before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; height: 18px; background: var(--top); border: 5px solid var(--ink); border-radius: 18px 18px 8px 8px; }
.block span { position: relative; display: block; padding-top: 6px; }
.block.choice { cursor: pointer; animation: pop .35s cubic-bezier(.3,1.6,.5,1) both; }
.block.choice:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--ink); }
.block.blank span { visibility: hidden; }
.block.big { min-width: 0; }
@keyframes pop { from { transform: scale(.3) translateY(40px); opacity: 0; } }
.block.hint { animation: glow .8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 8px 0 var(--ink), 0 0 0 10px #ffc23d99; } }
.block.crumble { animation: crumble .9s ease-in forwards; pointer-events: none; }
@keyframes crumble {
  0% { transform: none; } 10% { transform: translateX(-8px) rotate(-3deg); } 20% { transform: translateX(8px) rotate(3deg); } 30% { transform: translateX(-6px); }
  45% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(70vh) rotate(25deg); opacity: 0; }
}

.hero, .foe, .trainer { position: absolute; left: 0; top: 0; pointer-events: none; }
.hero .inner, .foe .inner { width: 100%; height: 100%; transform-origin: 50% 100%; }
.hero .mon-svg, .foe .mon-svg, .hero img, .foe img { width: 100%; height: 100%; }
.foe .inner { transform: scaleX(-1); }
.hero .inner.land { animation: land .35s; }
@keyframes land { 30% { transform: scale(1.25, .75); } 65% { transform: scale(.9, 1.12); } }
.hero .inner.hurt, .foe .inner.hurt { animation: hurt .5s; }
.foe .inner.hurt { animation: hurtf .5s; }
@keyframes hurt { 20%, 60% { transform: translateX(-10px); filter: brightness(2) saturate(.3); } 40%, 80% { transform: translateX(10px); } }
@keyframes hurtf { 20%, 60% { transform: scaleX(-1) translateX(-10px); filter: brightness(2) saturate(.3); } 40%, 80% { transform: scaleX(-1) translateX(10px); } }
.foe.faint .inner { animation: faint .9s forwards; }
@keyframes faint { to { transform: scaleX(-1) rotate(-200deg) scale(.1); opacity: 0; } }
.bang { position: absolute; font-size: 44px; font-weight: 900; pointer-events: none; animation: bang .6s forwards; }
@keyframes bang { from { transform: translate(-50%, -50%) scale(.3); } 40% { transform: translate(-50%, -80%) scale(1.3); } to { transform: translate(-50%, -140%) scale(1); opacity: 0; } }
.wordpic { position: absolute; font-size: 60px; pointer-events: none; animation: wordpic 1.3s forwards; }
@keyframes wordpic { from { transform: translate(-50%, 0) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -70px) scale(1.15); opacity: 1; } 75% { transform: translate(-50%, -80px) scale(1); opacity: 1; } to { transform: translate(-50%, -100px) scale(.8); opacity: 0; } }

.hud { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 10; }
.pips { flex: 1; display: flex; gap: 4px; justify-content: center; align-items: center; min-width: 0; }
.pips i { width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; flex: none; transition: background .3s, transform .3s; }
.pips i.on { background: var(--sun); transform: scale(1.15); }
.pips em { font-style: normal; font-size: 26px; margin-left: 2px; }
@media (max-width: 420px) { .pips i { width: 12px; height: 12px; border-width: 2.5px; } .pips { gap: 3px; } .pill { font-size: 17px; padding: 3px 10px; } .round { width: 48px; height: 48px; font-size: 22px; } }

.hpbars { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 64px); left: 12px; right: 12px; display: flex; gap: 14px; z-index: 10; }
.hpbars[hidden] { display: none; }
.hp { flex: 1; background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 4px 10px 8px; box-shadow: 0 4px 0 var(--ink); }
.hp b { font-family: var(--letters); font-size: 20px; display: flex; justify-content: space-between; }
.hp b small { font-family: var(--ui); font-size: 14px; }
.hp .meter { height: 14px; border: 3px solid var(--ink); border-radius: 99px; overflow: hidden; background: #eee; }
.hp .meter i { display: block; height: 100%; width: 100%; background: var(--mint); transition: width .5s; }
.hp.them .meter i { background: var(--tomato); }

.picks { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 12px; padding: 0 84px 0 12px; z-index: 10; flex-wrap: wrap; }
.picks .block { position: relative; cursor: pointer; animation: pop .35s cubic-bezier(.3,1.6,.5,1) both; min-width: 96px; font-size: clamp(30px, 8vw, 46px); }
.picks .block:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--ink); }
.picks .block.wrong { animation: wob .4s; opacity: .45; pointer-events: none; }
@keyframes wob { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.ear { position: absolute; right: 14px; bottom: max(18px, env(safe-area-inset-bottom)); width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-size: 30px; z-index: 11; }
.ear.talking { animation: talk .5s ease-in-out infinite; background: var(--sun); }
@keyframes talk { 50% { transform: scale(1.1); } }

.trainer svg { width: 100%; height: 100%; }

/* ───────── cards ───────── */
.card {
  --c: #ffc23d;
  width: 100%; aspect-ratio: 5 / 7; background: var(--c); border: 4px solid var(--ink); border-radius: 14px; padding: 6px; box-shadow: 0 5px 0 var(--ink);
  display: flex; flex-direction: column; position: relative; text-align: left; overflow: hidden; color: var(--ink);
}
.card .face { flex: 1; display: flex; flex-direction: column; background: #fffdf5; border: 3px solid var(--ink); border-radius: 9px; overflow: hidden; }
.card .top { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 8px 2px; gap: 4px; }
.card .nm { font-family: var(--letters); font-weight: 700; font-size: 1.35em; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .hpv { font-weight: 900; font-size: .8em; color: #c2453b; white-space: nowrap; }
.card .art { flex: 1; margin: 0 6px; border-radius: 6px; background: radial-gradient(circle at 50% 60%, #fff, var(--bg, #dff4ff)); border: 2px solid var(--ink); min-height: 0; display: grid; place-items: center; }
.card .art .mon-svg, .card .art img { width: 92%; height: 92%; }
.card .bot { padding: 3px 8px 5px; font-size: .75em; font-weight: 900; display: flex; justify-content: space-between; }
.card.w1 { --c: #8be08b; --bg: #e3ffe3; } .card.w2 { --c: #ff9fd0; --bg: #ffe8f4; } .card.w3 { --c: #9fb4ff; --bg: #eaf0ff; } .card.w4 { --c: #ff9a6b; --bg: #fff0e3; }
.card.boss { --c: #ffc23d; }
.card.boss::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff90 45%, transparent 60%); animation: shine 2.8s infinite; pointer-events: none; }
@keyframes shine { from { transform: translateX(-100%); } 60%, to { transform: translateX(100%); } }
.card.hard { --c: #c58bff; }
.card.unknown .art > * { filter: brightness(0); opacity: .22; }
.card.unknown .nm { color: #0004; }
.card.partner { outline: 5px solid var(--sun); outline-offset: 3px; }
.card .count { position: absolute; top: -2px; right: -2px; }

/* ───────── album ───────── */
#album { background: #fff4d6; }
.bar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 5; }
.spacer { flex: 1; }
.album-scroll { position: absolute; inset: 0; overflow-y: auto; padding: calc(max(12px, env(safe-area-inset-top)) + 70px) 14px 40px; -webkit-overflow-scrolling: touch; }
.album-scroll h2 { font-family: var(--letters); font-size: 26px; margin: 10px 4px 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin-bottom: 26px; font-size: 15px; }
.cards .card { cursor: pointer; }
.grown { font-size: 14px; color: #6d6485; font-weight: 600; max-width: 640px; line-height: 1.5; }
.grown a { color: inherit; }
.grown button { text-decoration: underline; color: #b8471f; font-weight: 800; font-size: 14px; }

/* ───────── overlay ───────── */
.overlay { position: absolute; inset: 0; background: #2a2140cc; z-index: 50; display: grid; place-items: center; padding: 20px; animation: fade .25s; }
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.ov-body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(560px, 100%); text-align: center; color: #fff; }
.ov-body h2 { margin: 0; font-family: var(--letters); font-size: 34px; }
.wildmon { width: min(52vw, 250px); height: min(52vw, 250px); animation: wildbob 1s ease-in-out infinite; }
.wildmon .mon-svg, .wildmon img { width: 100%; height: 100%; }
@keyframes wildbob { 50% { transform: translateY(-14px) scale(1.04, .97); } }
.names { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.names .block { position: relative; cursor: pointer; animation: pop .35s cubic-bezier(.3,1.6,.5,1) both; }
.names .block.wrong { animation: wob .4s; opacity: .45; pointer-events: none; }
.names .block.hint { animation: glow .8s ease-in-out infinite; }
.bigcard { width: min(62vw, 270px); font-size: 22px; animation: flipin .8s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes flipin { from { transform: rotateY(180deg) scale(.4); opacity: 0; } 50% { opacity: 1; } }
.newtag { background: var(--tomato); color: #fff; border: 4px solid var(--ink); border-radius: 999px; padding: 2px 14px; font-weight: 900; font-size: 22px; rotate: -6deg; }
.starters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; font-size: 14px; }
.starters .card { cursor: pointer; animation: pop .4s cubic-bezier(.3,1.6,.5,1) both; }
.starters .card:nth-child(2) { animation-delay: .1s; } .starters .card:nth-child(3) { animation-delay: .2s; }
.ok { width: 90px; height: 90px; font-size: 42px; }

.confetti { position: fixed; top: -20px; width: 12px; height: 18px; border-radius: 3px; z-index: 60; pointer-events: none; }
.spark { position: fixed; font-size: 28px; z-index: 60; pointer-events: none; }

.loading { position: absolute; inset: 0; background: #9fe0ff; display: grid; place-items: center; z-index: 100; transition: opacity .3s; }
.loading.gone { opacity: 0; pointer-events: none; }
.dots { display: flex; gap: 10px; }
.dots i { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ───────── health, balls, money ───────── */
.ball { width: 1em; height: 1em; vertical-align: -.14em; display: inline-block; }
.stats { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 62px); left: 12px; right: 12px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; z-index: 10; }
.stats .pill { font-size: 16px; padding: 2px 10px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
.round.small { width: 40px; height: 40px; font-size: 20px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
.hpbars:not([hidden]) ~ .stats { display: none; }
.thrown { position: fixed; width: 64px; height: 64px; font-size: 64px; line-height: 1; z-index: 70; pointer-events: none; }
.thrown .ball { vertical-align: top; }
.ballcount { color: var(--ink); }
.pill.big { font-size: 28px; padding: 6px 22px; color: var(--ink); }
.wallet { display: flex; gap: 10px; color: var(--ink); }
.shelf { display: flex; gap: 14px; justify-content: center; }
.shopitem { background: #fff; color: var(--ink); border: 5px solid var(--ink); border-radius: 20px; box-shadow: 0 7px 0 var(--ink); padding: 14px 20px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 130px; }
.shopitem:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--ink); }
.shopitem .balls { font-size: 38px; display: flex; gap: 2px; min-height: 42px; }
.shopitem b { font-family: var(--letters); font-size: 40px; line-height: 1; }
.shopitem span { font-weight: 900; font-size: 20px; color: #148a5a; }
.patient { width: min(36vw, 170px); height: min(36vw, 170px); animation: none; }
.bedhp { color: var(--ink); width: min(80vw, 320px); flex: none; text-align: left; }
.sum { font-family: var(--letters); font-weight: 700; font-size: clamp(44px, 12vw, 72px); line-height: 1; }
.names .block.pick-num { min-width: 96px; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; width: 100%; max-height: 66vh; overflow-y: auto; padding: 8px; font-size: 14px; }
.pickgrid .card { cursor: pointer; }