/* GoMon — mobile-first retro-dark theme. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #1b2033;
  color: #e8e6df;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}

#topbar {
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
  background: #141829;
  border-bottom: 2px solid #0d101d;
}
.logo { font-weight: 800; font-size: 1.25rem; letter-spacing: .06em; }
.logo-mon { color: #e5484d; }

main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen { display: none; padding: 14px 14px 90px; }
.screen.active { display: block; }

#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: stretch;
  background: #141829; border-top: 2px solid #0d101d;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  flex: 1; background: none; border: none; color: #9aa0b5;
  font: inherit; font-size: .72rem; padding: 8px 0 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tab.active { color: #fff; }
.tab-icon { font-size: 1.25rem; }
.tab.capture {
  flex: 0 0 74px; margin-top: -22px;
}
.capture-plus {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(#e5484d 47%, #232323 47%, #232323 53%, #f5f2eb 53%);
  border: 3px solid #232323;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

/* buttons & inputs */
.btn {
  font: inherit; font-size: .9rem; color: #e8e6df;
  background: #2a3050; border: 2px solid #3a4270; border-radius: 10px;
  padding: 10px 14px; touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: #e5484d; border-color: #b23237; color: #fff; }
.btn.danger { background: #5a2430; border-color: #8c3446; }
.btn.ghost { background: transparent; border-color: #3a4270; color: #aab1c9; }
.btn.evolve { background: #6a4fb8; border-color: #4d3a86; color: #fff; }
.btn.wide { display: block; width: 100%; margin-top: 10px; }
.btn:disabled { opacity: .4; }
.input {
  font: inherit; color: #fff; background: #11152a;
  border: 2px solid #3a4270; border-radius: 10px; padding: 10px 12px;
  flex: 1; min-width: 0;
}
.row { display: flex; gap: 8px; margin: 8px 0; }

h2 { margin: 4px 0 12px; }
h3 { margin: 10px 0 6px; }
h4 { margin: 12px 0 4px; font-size: .85rem; color: #aab1c9; }
.muted { color: #9aa0b5; }
.small { font-size: .78rem; line-height: 1.45; }
.center { text-align: center; padding: 2rem 1rem; }
.ok { color: #62d086; }

/* walk screen */
.walk-scene { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid #0d101d; }
.walk-canvas { width: 100%; height: 260px; display: block; }
.walk-buddy-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 12px; font-size: .8rem;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
}
.walk-hud { display: flex; justify-content: space-between; margin: 12px 2px; flex-wrap: wrap; gap: 6px; }
.hud-item { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.hud-big { font-size: 1.3rem; font-weight: 700; }
.hud-label { color: #9aa0b5; font-size: .75rem; }
.hud-ball {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  background: linear-gradient(#e5484d 45%, #232323 45%, #232323 55%, #f5f2eb 55%);
  border: 2px solid #232323;
}
.gps-ok { color: #62d086; }
.gps-bad { color: #9aa0b5; }
.meter { background: #11152a; border-radius: 999px; height: 18px; overflow: hidden; position: relative; border: 2px solid #0d101d; }
.meter.small { height: 10px; }
.meter-fill { height: 100%; background: linear-gradient(90deg, #e5484d, #f5c518); width: 0; transition: width .4s; }
.meter-fill.egg { background: linear-gradient(90deg, #7fd4e8, #62d086); }
.meter-text { position: absolute; inset: 0; text-align: center; font-size: .68rem; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000; }

.egg-tray { margin-top: 16px; }
.egg-row { display: flex; align-items: center; gap: 10px; background: #222741; border-radius: 12px; padding: 10px; margin: 8px 0; }
.egg-icon { font-size: 1.6rem; }
.egg-mid { flex: 1; }
.egg-parents { font-size: .8rem; margin-bottom: 4px; }
.egg-dist { font-size: .72rem; color: #9aa0b5; white-space: nowrap; }

/* dex */
.dex-head { display: flex; justify-content: space-between; align-items: center; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.dex-card { background: #222741; border-radius: 12px; padding: 8px; position: relative; }
.dex-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; image-rendering: pixelated; }
.dex-name { font-weight: 700; margin-top: 6px; font-size: .9rem; }
.dex-sub { display: flex; gap: 4px; align-items: center; margin-top: 4px; font-size: .72rem; flex-wrap: wrap; }
.buddy-tag { position: absolute; top: 12px; left: 12px; background: #f5c518; color: #222; font-size: .65rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.type-badge { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; padding: 2px 7px; border-radius: 999px; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.badges { display: flex; gap: 6px; margin: 6px 0; justify-content: center; }

/* overlays */
.overlay {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: rgba(10, 12, 22, .93);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 14px calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.reveal, .dialog, .detail { background: #222741; border-radius: 16px; padding: 18px; width: 100%; max-width: 480px; text-align: center; }
.reveal-img, .detail-img { width: min(70vw, 300px); aspect-ratio: 1; object-fit: cover; border-radius: 12px; image-rendering: pixelated; }
.reveal-img.photo { image-rendering: auto; }
.dialog-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.stats { text-align: left; margin: 10px auto; max-width: 340px; }
.stat-row { display: grid; grid-template-columns: 42px 34px 1fr; align-items: center; gap: 8px; margin: 4px 0; font-size: .78rem; }
.stat-bar { background: #11152a; height: 10px; border-radius: 999px; overflow: hidden; }
.stat-fill { height: 100%; }
.detail { position: relative; text-align: center; }
.detail-close { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #9aa0b5; font-size: 1.2rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }

/* busy */
.busy-box { text-align: center; margin-top: 18vh; }
.busy-status { color: #aab1c9; margin-top: 8px; min-height: 1.4em; }
.busy-ball {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(#e5484d 45%, #232323 45%, #232323 55%, #f5f2eb 55%);
  border: 3px solid #232323;
  animation: wobble 1.1s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-18deg) translateY(-4px); }
  75% { transform: rotate(18deg) translateY(-4px); }
}

/* lobby */
.picker { display: flex; align-items: center; gap: 12px; background: #222741; border-radius: 12px; padding: 10px; }
.picker-img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; image-rendering: pixelated; }
.picker-name { flex: 1; font-weight: 700; }
.picker-list { text-align: left; }
.picker-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.picker-row:active { background: #2a3050; }
.picker-row img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; image-rendering: pixelated; }
.mode-row { display: flex; gap: 8px; margin: 12px 0; }
.btn.mode { flex: 1; text-transform: capitalize; }
.btn.mode.active { background: #e5484d; border-color: #b23237; color: #fff; }
.room-row { display: flex; gap: 8px; }
.lobby-status {
  margin-top: 14px; background: #11152a; border-radius: 12px; padding: 10px 12px;
  font-size: .78rem; line-height: 1.5; max-height: 200px; overflow-y: auto; white-space: pre-wrap;
}
.lobby-status:empty { display: none; }

/* battle */
.battle { background: #222741; border-radius: 16px; padding: 14px; width: 100%; max-width: 480px; }
.battle-side { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.battle-side.enemy { flex-direction: row-reverse; }
.battle-side img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; image-rendering: pixelated; }
.battle-info { flex: 1; }
.battle-name { font-weight: 700; margin-bottom: 4px; }
.hp-bar { background: #11152a; border-radius: 999px; height: 12px; overflow: hidden; border: 2px solid #0d101d; }
.hp-fill { height: 100%; width: 100%; background: #4caf50; transition: width .5s, background .5s; }
.battle-log { background: #11152a; border-radius: 10px; padding: 8px 10px; height: 110px; overflow-y: auto; font-size: .74rem; line-height: 1.5; margin: 10px 0; }
.move-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.move-btn { display: flex; flex-direction: column; gap: 2px; }
.move-name { font-weight: 700; font-size: .85rem; }
.move-meta { font-size: .65rem; color: #aab1c9; }

/* settings */
.card { background: #222741; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }

/* battle pacing */
.countdown { background: #11152a; border-radius: 999px; height: 8px; overflow: hidden; border: 1px solid #0d101d; margin-top: 6px; }
.count-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #7fd4e8, #f5c518); }
.phase-label { font-size: .72rem; color: #aab1c9; text-align: center; margin: 6px 0 2px; min-height: 1.2em; }
.move-btn.sel { border-color: #f5c518; box-shadow: 0 0 0 2px rgba(245, 197, 24, .35); }
.battle-side img.hit { animation: hitflash .45s; }
@keyframes hitflash {
  0%, 100% { filter: none; transform: none; }
  20% { filter: brightness(2.2) saturate(.2); transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { filter: brightness(1.6); transform: translateX(-3px); }
}

/* items & TM */
.meter-fill.banked { background: linear-gradient(90deg, #7fd4e8, #62d086); }
.move-card { background: #11152a; border-radius: 12px; padding: 12px; margin: 10px auto; max-width: 320px; }
.move-card-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; }
.move-card-meta { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: .78rem; color: #aab1c9; }
.slot-list { margin: 10px 0; }
.slot-btn { text-align: left; }
.moves-list { text-align: left; max-width: 340px; margin: 8px auto; }
.moves-list h4 { margin: 6px 0; }
.move-line { display: flex; gap: 8px; align-items: center; margin: 5px 0; font-size: .8rem; }
.move-line-name { font-weight: 700; flex: 1; }
.move-line-meta { color: #9aa0b5; font-size: .72rem; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px);
  background: #f5f2eb; color: #1b2033; font-size: .82rem; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: all .25s; z-index: 99; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------------------
   glitz & glam
--------------------------------------------------------------------------- */

/* ambient glow behind everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60vw 40vh at 15% -5%, rgba(229, 72, 77, .14), transparent 60%),
    radial-gradient(70vw 50vh at 110% 30%, rgba(106, 79, 184, .16), transparent 65%),
    radial-gradient(50vw 40vh at 40% 115%, rgba(127, 212, 232, .10), transparent 60%);
}
main, #topbar, #tabbar { position: relative; z-index: 1; }

/* tab switch: content glides in */
.screen.active { animation: screen-in .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.tab { transition: color .2s, transform .15s; }
.tab.active .tab-icon { display: inline-block; animation: tab-bounce .35s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes tab-bounce { from { transform: scale(.7); } to { transform: scale(1); } }

/* the + button begs to be pressed when you're holding something */
.tab.capture .capture-plus { position: relative; transition: transform .2s, box-shadow .3s; }
.tab.capture:active .capture-plus { transform: scale(.92); }
.tab.capture.has-item .capture-plus {
  animation: ball-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(245, 197, 24, .7), 0 4px 18px rgba(0, 0, 0, .55);
}
@keyframes ball-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .55), 0 4px 14px rgba(0,0,0,.5); }
  50% { box-shadow: 0 0 0 9px rgba(245, 197, 24, 0), 0 6px 20px rgba(0,0,0,.6); transform: translateY(-3px); }
}
.tab.capture[data-held="tm"] .capture-plus::after {
  content: "💿"; position: absolute; top: -6px; right: -8px; font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  animation: tab-bounce .35s;
}

/* buttons: depth + shine */
.btn { transition: transform .12s, box-shadow .2s, filter .2s; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,.25); }
.btn.primary {
  background: linear-gradient(180deg, #f0595e, #d63a40);
  box-shadow: 0 3px 0 #8c262b, 0 6px 16px rgba(229, 72, 77, .35);
}
.btn.primary:active { box-shadow: 0 1px 0 #8c262b; }
.btn.evolve {
  background: linear-gradient(180deg, #7d5fd0, #5a41a3);
  box-shadow: 0 3px 0 #3c2b70, 0 6px 16px rgba(106, 79, 184, .4);
}

/* cards pop in with a small stagger */
.dex-card {
  animation: card-in .4s cubic-bezier(.2, 1.2, .3, 1) backwards;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.dex-card:active { transform: scale(.96); }
.dex-card:nth-child(2) { animation-delay: .04s; }
.dex-card:nth-child(3) { animation-delay: .08s; }
.dex-card:nth-child(4) { animation-delay: .12s; }
.dex-card:nth-child(5) { animation-delay: .16s; }
.dex-card:nth-child(6) { animation-delay: .20s; }
.dex-card:nth-child(n+7) { animation-delay: .24s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.buddy-tag { animation: tab-bounce .4s; box-shadow: 0 2px 8px rgba(245, 197, 24, .5); }

/* overlays: frosted backdrop, springy content */
.overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in .2s; }
@keyframes fade-in { from { opacity: 0; } }
.reveal, .dialog, .detail, .battle, .busy-box {
  animation: sheet-in .35s cubic-bezier(.2, 1.3, .3, 1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* the capture reveal: new monster bursts onto the card */
.reveal-img { animation: mon-burst .7s cubic-bezier(.2, 1.6, .3, 1); }
.reveal-img.photo { animation: sheet-in .3s; }
@keyframes mon-burst {
  0% { opacity: 0; transform: scale(.2) rotate(-8deg); filter: brightness(3) saturate(0); }
  55% { opacity: 1; filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}
.reveal h2 { animation: screen-in .45s .1s backwards; }

/* meters shimmer while they fill */
.meter-fill { position: relative; overflow: hidden; }
.meter-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 2.2s ease-in-out infinite;
}
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }

/* type badges get a glossy top edge */
.type-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.3); }

/* battle drama */
.battle.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 2px) rotate(-.5deg); }
  40% { transform: translate(6px, -2px) rotate(.5deg); }
  60% { transform: translate(-4px, 1px); }
  80% { transform: translate(4px, -1px); }
}
.battle-side img { transition: filter .5s, transform .5s; }
.battle-side img.ko { filter: grayscale(1) brightness(.5); transform: translateY(14px) rotate(6deg); }
.phase-label { transition: color .3s; }

/* egg wiggle when ready */
.egg-row .btn.primary { animation: ball-pulse 1.6s ease-in-out infinite; }
.egg-icon { display: inline-block; animation: egg-wiggle 3s ease-in-out infinite; }
@keyframes egg-wiggle {
  0%, 84%, 100% { transform: none; }
  88% { transform: rotate(-9deg); }
  92% { transform: rotate(8deg); }
  96% { transform: rotate(-5deg); }
}

/* toast springs up */
#toast.show { transition: all .3s cubic-bezier(.2, 1.4, .3, 1); }

/* calm mode: honor the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}