/* ============================================================
   CryptoPokemons - Game Boy Color aesthetic
   Vanilla CSS, no framework. Press Start 2P for pixel type.
   ============================================================ */

@font-face { font-family: "PS2P"; src: local("Press Start 2P"); }

:root {
  /* Classic Pokemon UI ink/paper */
  --ink:    #20283a;
  --paper:  #f8f8f0;
  --paper2: #e8e8d8;
  --line:   #20283a;
  --dim:    #6b6f7c;

  /* GBC "Grape" shell */
  --shell:    #7b3f9d;
  --shell-hi: #9b5fbd;
  --shell-lo: #54286e;
  --bezel:    #2a2533;
  --bezel-hi: #3d3645;

  /* Accent / brand */
  --red:    #e03c32;
  --red-lo: #b02018;
  --blue:   #2a6fdb;
  --yellow: #ffcb05;
  --green:  #4fa84f;

  --screen-w: 960px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  /* solid base so iOS overscroll and any gaps around the device stay dark */
  background-color: #0a0810;
  width: 100%;
  overflow-x: hidden;
}
html, body {
  margin: 0; padding: 0;
  width: 100%; max-width: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}
body {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #2a2440 0%, #15121f 55%, #0a0810 100%) no-repeat;
  background-color: #0a0810;
  color: var(--ink);
  font-family: "PS2P", "Press Start 2P", monospace;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  min-height: 100vh;
  overflow-x: hidden;
}

img { image-rendering: pixelated; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   GAME BOY DEVICE
   ============================================================ */
.gb-stage {
  min-height: 100vh;
  width: 100%; max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 16px;
}

.gb-device {
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
  background:
    linear-gradient(160deg, var(--shell-hi) 0%, var(--shell) 38%, var(--shell-lo) 100%);
  border-radius: 18px 18px 56px 18px;
  padding: 26px 26px 20px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -8px 18px rgba(0,0,0,.35),
    0 24px 60px rgba(0,0,0,.6);
  position: relative;
}

/* top brand strip */
.gb-brand {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 10px;
  font-size: 9px; letter-spacing: .5px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  margin: 2px 6px 14px;
  min-width: 0;
}
.gb-brand .pwr { display: flex; align-items: center; gap: 7px; }
.gb-brand .led {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--red) 60%, #6a0d08);
  box-shadow: 0 0 8px rgba(224,60,50,.9), inset 0 1px 1px rgba(255,255,255,.6);
}
.gb-brand .pwr small { font-size: 7px; opacity: .8; }

/* bezel around the LCD */
.gb-bezel {
  background: linear-gradient(155deg, var(--bezel-hi), var(--bezel));
  border-radius: 10px 10px 26px 10px;
  padding: 18px 18px 16px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.06);
}
.gb-bezel-top {
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:#8a8294; font-size:7px; letter-spacing:1px; margin-bottom:10px;
}
.gb-bezel-top .stripe { flex:1; height:5px; border-radius:3px; }
.gb-bezel-top .s-red { background: #6a3a3a; }
.gb-bezel-top .s-blue{ background: #3a4a6a; }

/* the LCD screen itself */
.gb-screen {
  position: relative;
  width: 100%;
  background: #9bbc0f; /* fallback */
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 10 / 9;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 22px rgba(0,0,0,.45);
  /* force an isolated paint context so the absolutely-positioned content
     layer is always clipped to the LCD on iOS Safari (never bleeds out) */
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  contain: paint;
}
/* LCD scanline + glare overlay */
.gb-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 40;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, rgba(0,0,0,0) 2px 4px),
    linear-gradient(125deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%);
  mix-blend-mode: multiply;
}

.gb-screen-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  z-index: 5;
  scrollbar-width: thin; scrollbar-color: var(--shell) transparent;
  -webkit-overflow-scrolling: touch;
  contain: paint;            /* clip page content strictly to the LCD on iOS */
  overscroll-behavior: contain;
}
.gb-screen-scroll::-webkit-scrollbar { width: 8px; }
.gb-screen-scroll::-webkit-scrollbar-thumb { background: var(--shell); border-radius: 4px; }

/* When the intro canvas is active it sits above the scroll layer */
#introCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:30; display:block; }

/* ============================================================
   CONTROLS
   ============================================================ */
.gb-controls {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px;
}
.gb-dpad { position: relative; width: 108px; height: 108px; justify-self: start; margin-left: 8px; }
.gb-dpad button {
  position: absolute; background: #2b2b30; border: none; cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 4px rgba(0,0,0,.5);
  color: #555; padding: 0;
}
.gb-dpad button:active { background:#1a1a1e; box-shadow: inset 0 2px 5px rgba(0,0,0,.8); }
.gb-dpad .up    { top:0; left:38px; width:32px; height:40px; border-radius:6px 6px 0 0; }
.gb-dpad .down  { bottom:0; left:38px; width:32px; height:40px; border-radius:0 0 6px 6px; }
.gb-dpad .left  { left:0; top:38px; width:40px; height:32px; border-radius:6px 0 0 6px; }
.gb-dpad .right { right:0; top:38px; width:40px; height:32px; border-radius:0 6px 6px 0; }
.gb-dpad .mid   { left:38px; top:38px; width:32px; height:32px; background:#2b2b30; }
.gb-dpad .mid::after{ content:""; position:absolute; inset:9px; border-radius:50%; background:#1b1b1f; }

.gb-ab { justify-self: end; display:flex; gap:18px; align-items:center; transform: rotate(-18deg); margin-right: 10px; }
.gb-btn-round {
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  background: radial-gradient(circle at 35% 30%, #d05a86, #9b1f54 70%, #6a0f3a);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.4), 0 4px 6px rgba(0,0,0,.5);
  color:#fff4; font-size:13px; font-weight:bold;
}
.gb-btn-round:active { box-shadow: inset 0 3px 6px rgba(0,0,0,.6); transform: translateY(1px); }
.gb-btn-round span { color: rgba(255,255,255,.85); }

.gb-startsel { grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:22px; justify-content:center; align-items:flex-start; margin-top:8px; }
.gb-pill { transform: rotate(-12deg); }
.gb-pill button {
  border:none; cursor:pointer; background:#3a3540; color:#cfc9d6;
  border-radius:10px; padding:6px 16px; font-family:inherit; font-size:7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 4px rgba(0,0,0,.5);
}
.gb-pill button:active { transform: translateY(1px); }
.gb-pill .lbl { display:block; text-align:center; color:#cdb6e0; font-size:6px; margin-top:5px; letter-spacing:.5px; }

/* speaker dots */
.gb-speaker { position:absolute; right:30px; bottom:24px; display:grid; grid-template-columns:repeat(4,6px); gap:7px; transform: rotate(-18deg); opacity:.5; }
.gb-speaker i { width:6px; height:6px; border-radius:50%; background: rgba(0,0,0,.4); box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }

/* ============================================================
   SCREEN CONTENT - shared pixel UI
   ============================================================ */
.view { display:none; min-height:100%; }
.view.active { display:block; }

/* classic white text box with black double frame */
.pkbox {
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 9px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--line);
  padding: 16px 18px;
}

.pixel-h { font-size: 13px; line-height: 1.6; color: var(--ink); }
.pixel-sm { font-size: 8px; line-height: 1.9; }
.pixel-xs { font-size: 7px; line-height: 1.8; color: var(--dim); }
.tiny { font-size: 7px; }

/* blinking cursor triangle */
.cursor::before { content:"\25B6"; color: var(--ink); margin-right: 8px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== MENU view (in-game start menu) ===== */
#view-menu { padding: 18px; min-height:100%;
  background:
    linear-gradient(0deg, rgba(0,0,0,.04), rgba(0,0,0,.04)),
    repeating-linear-gradient(45deg, #cfe6f5 0 14px, #c4dff0 14px 28px);
}
.menu-top {
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
}
.menu-top .logo-badge {
  width:52px; height:52px; border:3px solid var(--line); border-radius:10px;
  background: var(--red); display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 3px #fff, inset 0 -4px 0 rgba(0,0,0,.18);
}
.menu-top .logo-badge .ball { width:28px; height:28px; border-radius:50%;
  background: linear-gradient(#e8403a 0 49%, #18181f 49% 53%, #f6f6f0 53% 100%);
  box-shadow: inset 0 0 0 2px #18181f; position:relative; }
.menu-top .logo-badge .ball::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:#f6f6f0; box-shadow: inset 0 0 0 2px #18181f; }
.menu-top h1 { margin:0; font-size:15px; color:var(--ink); text-shadow: 2px 2px 0 #fff, 3px 3px 0 var(--red-lo); }
.menu-top p { margin:4px 0 0; font-size:7px; color:#3a4a6a; }

.menu-list { max-width: 460px; }
.menu-item {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; margin-bottom:11px; cursor:pointer;
  background: var(--paper);
  border:3px solid var(--line); border-radius:8px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--line), 0 3px 0 rgba(0,0,0,.25);
  transition: transform .05s;
}
.menu-item .ico { font-size:18px; width:24px; text-align:center; }
.menu-item .txt b { font-size:11px; display:block; }
.menu-item .txt small { font-size:7px; color:var(--dim); display:block; margin-top:4px; }
.menu-item .arrow { margin-left:auto; opacity:0; font-size:11px; }
.menu-item.sel, .menu-item:hover { transform: translateX(4px); background: #fffdf0; }
.menu-item.sel .arrow, .menu-item:hover .arrow { opacity:1; }
.menu-item.sel { outline:0; box-shadow: inset 0 0 0 3px #fff7c8, inset 0 0 0 5px var(--line), 0 3px 0 rgba(0,0,0,.25); }

/* ===== generic page header inside screen ===== */
.screen-head {
  position: sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:10px;
  background: var(--ink); color:#fff; padding:10px 14px;
  border-bottom:3px solid #000;
}
.screen-head .back { cursor:pointer; color:#fff; font-size:9px; background:#3a4a6a; padding:6px 9px; border-radius:5px; border:2px solid #000; }
.screen-head .back:hover { background: var(--red); }
.screen-head h2 { margin:0; font-size:11px; letter-spacing:1px; }
.screen-head .meta { margin-left:auto; font-size:7px; color:#a9b6d6; text-align:right; }

.screen-body { padding: 16px; }

/* ===== POKEDEX grid ===== */
#view-pokedex { background: var(--red); }
#view-pokedex .screen-body {
  background: repeating-linear-gradient(0deg, #d2342b 0 22px, #c92a22 22px 44px);
}
.dex-summary { color:#fff; font-size:8px; margin:0 0 14px; line-height:1.8; }
.dex-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.dex-card {
  background: var(--paper); border:3px solid var(--line); border-radius:8px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--line), 0 4px 0 rgba(0,0,0,.3);
  padding:10px; cursor:pointer; position:relative; transition: transform .06s;
}
.dex-card:hover { transform: translateY(-3px); }
.dex-card .no { position:absolute; top:7px; left:9px; font-size:7px; color:var(--dim); }
.dex-card .ownflag { position:absolute; top:7px; right:9px; font-size:7px; }
/* WILD badge on pokedex cards (listed on-chain = catchable) */
.wild-badge { position:absolute; bottom:6px; right:7px; font-size:6px; color:#fff;
  background:var(--red); padding:2px 4px; border-radius:3px; line-height:1;
  box-shadow:0 0 4px rgba(224,60,50,.7); letter-spacing:.5px; animation: wildpulse 1.4s ease-in-out infinite; }
@keyframes wildpulse { 0%,100%{ box-shadow:0 0 3px rgba(224,60,50,.6);} 50%{ box-shadow:0 0 8px rgba(224,60,50,.95);} }
.delist-badge { position:absolute; bottom:7px; right:9px; font-size:9px; line-height:1; filter:grayscale(.2); }
.guard-badge { position:absolute; bottom:7px; right:9px; font-size:8px; color:var(--blue); line-height:1; }
.dex-card .sprite-wrap {
  height:84px; display:flex; align-items:flex-end; justify-content:center;
  background: radial-gradient(circle at 50% 80%, #eef0dc 0 40%, transparent 41%);
  margin: 8px 0 6px;
}
.dex-card .sprite-wrap img { height:74px; width:auto; }
.dex-card .nm { font-size:9px; text-align:center; }
.dex-card .types { display:flex; gap:5px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
.type-chip { font-size:6px; color:#fff; padding:3px 7px; border-radius:9px; border:2px solid rgba(0,0,0,.35); text-transform:uppercase; letter-spacing:.5px; }

/* ===== POKEDEX detail ===== */
/* Single column always: the LCD is narrow regardless of viewport, so stack
   portrait -> Pokedex entry -> on-chain data like a real Pokedex page. */
.dex-detail-grid { display:flex; flex-direction:column; gap:14px; }
.dex-portrait { align-self:stretch; }

.dex-portrait {
  background: var(--paper); border:3px solid var(--line); border-radius:8px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--line);
  padding:14px; text-align:center;
}
.dex-portrait .stage {
  height:200px; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(0deg, #dfe7c8 0 38%, transparent 38%),
    repeating-linear-gradient(90deg, #f4f6ea 0 16px, #eef0dc 16px 32px);
  border:2px solid var(--line); border-radius:6px; position:relative; overflow:hidden;
}
.dex-portrait .stage img { height:150px; width:auto; image-rendering:pixelated; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.dex-portrait .nm { margin-top:12px; font-size:14px; }
.dex-portrait .cat { margin-top:8px; font-size:7px; color:var(--dim); }
.dex-portrait .types { justify-content:center; margin-top:10px; display:flex; gap:6px; }

.dex-info .pkbox { margin-bottom:12px; }
.dex-info h3 { font-size:9px; margin:0 0 12px; color:var(--ink); border-bottom:2px solid var(--line); padding-bottom:8px; }
.dex-stat { display:flex; justify-content:space-between; font-size:8px; padding:7px 0; border-bottom:1px dashed #cfcfc0; }
.dex-stat:last-child { border-bottom:0; }
.dex-stat .k { color:var(--dim); }
.dex-stat .v { color:var(--ink); text-align:right; max-width:62%; word-break:break-word; }
.dex-flavor { font-size:8px; line-height:2.1; color:var(--ink); }
.addr-mono { font-family: ui-monospace, monospace; font-size:9px; letter-spacing:0; }

/* ===== COLLECTION ===== */
#view-collection { background: var(--blue); }
#view-collection .screen-body { background: repeating-linear-gradient(0deg,#2a6fdb 0 22px,#2566cc 22px 44px); }
.wallet-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.btn {
  font-family:inherit; font-size:8px; cursor:pointer; color:var(--ink);
  background: var(--yellow); border:3px solid var(--line); border-radius:7px;
  padding:10px 14px; box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.btn:active { transform: translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.btn.alt { background: var(--paper); }
.btn.green { background: var(--green); color:#fff; }
.btn.red { background: var(--red); color:#fff; box-shadow:0 3px 0 var(--red-lo); }
.coll-status { color:#fff; font-size:8px; line-height:1.9; }
.coll-status:empty { display:none; }

/* the no-wallet state: a prompt, never someone else's holdings */
.coll-connect h3 { font-size:10px; margin:0 0 12px; color:var(--blue); }
.coll-connect p { font-size:8px; line-height:2; margin:0 0 10px; }
.coll-connect-sub { color:var(--dim); }
.coll-connect .wallet-bar { margin:14px 0 0; }
.coll-connect .coll-status { color:var(--red-lo); }
.coll-connect .coll-status:not(:empty) { margin-top:10px; }
.coll-empty { margin-top:14px; }
@media (max-width: 420px) {
  .coll-connect { padding:11px 12px; }
  .coll-connect h3 { font-size:8px; margin:0 0 9px; }
  .coll-connect p { font-size:7px; line-height:1.9; margin:0 0 7px; }
  .coll-connect .wallet-bar { margin-top:11px; gap:8px; }
  .coll-connect .btn { font-size:7px; padding:8px 10px; }
}

.coll-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:14px; }
.coll-cell { background:var(--paper); border:3px solid var(--line); border-radius:7px; padding:8px; text-align:center; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--line); }
.coll-cell img { height:58px; }
.coll-cell .nm { font-size:7px; margin-top:5px; }
.coll-cell .no { font-size:6px; color:var(--dim); }

/* ===== ABOUT ===== */
#view-about { background:#2a2440; }
#view-about .screen-body { background: linear-gradient(180deg,#2a2440,#1d1830); }
.about-card { color: var(--ink); margin-bottom:14px; }
.about-card h3 { font-size:10px; margin:0 0 12px; color:var(--red); }
.about-card p { font-size:8px; line-height:2.2; margin:0 0 12px; }
.about-links { display:flex; flex-wrap:wrap; gap:10px; }
.about-links a { font-size:7px; background:var(--ink); color:#fff; padding:9px 12px; border-radius:6px; border:2px solid #000; }
.about-links a:hover { background: var(--red); text-decoration:none; }
.fact-row { display:grid; grid-template-columns: 1fr; gap:10px; margin:6px 0 14px; }
@media(min-width:560px){ .fact-row{ grid-template-columns: repeat(3,1fr);} }
.fact { background:#fff; border:3px solid var(--line); border-radius:7px; padding:12px; text-align:center; }
.fact b { display:block; font-size:16px; color:var(--red); }
.fact small { font-size:6px; color:var(--dim); display:block; margin-top:7px; line-height:1.6; }

/* ===== MINT/WRAP ===== */
#view-mint { background:#1d3a2a; }
#view-mint .screen-body { background: linear-gradient(180deg,#214a32,#16321f); }

/* dialogue box at bottom (RPG style) */
.dialogue {
  margin-top:14px; background:var(--paper); border:3px solid var(--line); border-radius:8px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--line);
  padding:14px 16px; font-size:8px; line-height:2.1; color:var(--ink); min-height:64px;
}
.dialogue .cur { float:right; animation: blink 1s steps(1) infinite; }

/* helper */
.center { text-align:center; }
.mt { margin-top:14px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.spinner { display:inline-block; animation: spin 1s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* loading splash inside screen before boot */
#bootSplash { position:absolute; inset:0; z-index:35; background:#000; display:flex; align-items:center; justify-content:center; }
#bootSplash .pl { color:#9bbc0f; font-size:9px; text-align:center; line-height:2; }

/* ============================================================
   FOOTER / DISCLAIMER
   ============================================================ */
.gb-footer { flex:0 0 auto; width:100%; max-width:560px; margin:22px auto 6px; text-align:center; box-sizing:border-box; }
.gb-foot-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; font-size:8px; margin-bottom:14px; }
.gb-foot-links a { color:#c6a9e6; }
.gb-foot-links a:hover { color:#fff; }
.gb-foot-links span { color:#4a4458; }
.gb-disclaimer {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size:11px; line-height:1.7; color:#8079a0; letter-spacing:0;
  max-width:560px; margin:0 auto; padding:0 4px;
}
.gb-disclaimer a { color:#c6a9e6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .gb-stage { padding: 10px 6px; }
  .gb-device { padding: 16px 14px 14px; border-radius: 14px 14px 40px 14px; }
  .gb-controls { gap:6px; }
  .gb-dpad { width:92px; height:92px; }
  .gb-dpad .up,.gb-dpad .down{ left:32px; width:28px; }
  .gb-dpad .left,.gb-dpad .right{ top:32px; height:28px; }
  .gb-dpad .mid{ left:32px; top:32px; width:28px; height:28px; }
  .gb-btn-round{ width:42px; height:42px; }
  .gb-ab { gap:14px; margin-right:4px; }
  .gb-startsel { gap:14px; margin-top:10px; }
  .gb-pill button { padding:6px 12px; }
  .menu-top h1 { font-size:12px; }
  .pixel-h { font-size:11px; }
  .gb-footer { margin-top:16px; }
  .gb-disclaimer { font-size:10px; }
}
@media (max-width: 420px) {
  .gb-brand { font-size:7px; }
  .gb-speaker { display:none; }
  .gb-controls { gap:4px; }
  .gb-ab { gap:12px; }
  .gb-startsel { gap:10px; }
  .gb-pill { transform: rotate(-8deg); }
  .gb-pill button { padding:5px 9px; font-size:6px; }
  .gb-pill .lbl { font-size:5px; }
}

/* ============================================================
   DETAIL PAGE: catch CTA + recent attempts
   ============================================================ */
.catch-cta { margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.catch-cta small { font-size:6px; color:var(--dim); line-height:1.7; text-align:center; }
.catch-history { display:flex; flex-direction:column; gap:8px; }
.catch-loading, .catch-empty { font-size:7px; color:var(--dim); line-height:1.8; }
.catch-stats { display:flex; flex-wrap:wrap; gap:6px 14px; padding-bottom:8px; border-bottom:1px dashed #cfcfc0; }
.catch-stats span { font-size:6px; color:var(--dim); display:flex; flex-direction:column; gap:2px; }
.catch-stats b { font-size:11px; color:var(--ink); }
.catch-list { display:flex; flex-direction:column; gap:6px; }
.catch-row { display:flex; align-items:center; gap:8px; font-size:7px; }
.catch-row .cr-res { width:74px; }
.catch-row.ok .cr-res { color:var(--green); }
.catch-row.no .cr-res { color:var(--red); }
.catch-row .cr-who { flex:1; color:var(--dim); font-family: ui-monospace, monospace; }
.catch-row .cr-amt { color:var(--ink); }

/* ============================================================
   BATTLE / CATCH screen
   ============================================================ */
/* CATCH call-to-action on the detail page */
.btn.catch {
  background: var(--red); color:#fff;
  box-shadow: 0 3px 0 var(--red-lo), 0 0 0 0 rgba(255,255,255,0);
  animation: catchpulse 1.6s ease-in-out infinite;
}
.btn.catch::before { content:"●"; margin-right:6px; color:#fff; }
@keyframes catchpulse { 50% { box-shadow: 0 3px 0 var(--red-lo), 0 0 14px rgba(224,60,50,.7); } }

#view-battle.battle {
  position:relative;
  height:100%; min-height:100%;
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, #d8eafc 0%, #cfe6f5 52%, #bfae8e 52%, #d8c8a4 100%);
  overflow:hidden;
}

/* upper scene */
.bt-field { position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #eaf4ff 0%, transparent 60%),
    linear-gradient(180deg, #cfe6f5 0 52%, #c9b88f 52% 100%); }

/* HUD boxes (enemy name + cosmetic HP) */
.bt-hud {
  position:absolute; z-index:4; background: var(--paper);
  border:3px solid var(--line); border-radius:7px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--line);
  padding:7px 9px; min-width:148px;
}
.bt-hud-enemy { top:10px; left:10px; }
.bt-hud-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.bt-name { font-size:9px; color:var(--ink); }
.bt-lv { font-size:6px; color:var(--dim); }
.bt-hpwrap { display:flex; align-items:center; gap:5px; margin-top:7px; }
.bt-hplabel { font-size:6px; color:#b59b00; background:#3a3a2a; padding:1px 3px; border-radius:3px; letter-spacing:.5px; }
.bt-hpbar { flex:1; height:7px; background:#5a5a5a; border:2px solid var(--line); border-radius:4px; overflow:hidden; }
.bt-hpbar i { display:block; height:100%; width:100%; background:linear-gradient(#7ff07f,#37c837); transition: width .9s ease-out; }
.bt-hud-foot { font-size:5px; color:var(--dim); margin-top:6px; text-align:right; letter-spacing:.5px; }

/* platforms (ellipses the fighters stand on) */
.bt-platform { position:absolute; border-radius:50%; z-index:1; }
.bt-platform-enemy { width:42%; height:26px; top:34%; right:6%;
  background: radial-gradient(ellipse at 50% 40%, #b6d77a 0 55%, #93b85c 70%, transparent 72%); }
.bt-platform-trainer { width:54%; height:34px; bottom:6%; left:2%;
  background: radial-gradient(ellipse at 50% 40%, #b6d77a 0 55%, #93b85c 70%, transparent 72%); }

/* the wild Pokemon */
.bt-sprite { position:absolute; z-index:3; image-rendering:pixelated; }
.bt-enemy-sprite { top:5%; right:13%; height:42%; width:auto; animation: bob 2.6s ease-in-out infinite; }

/* the trainer: pixel-art back sprite (Pokemon Red/Blue back view), bottom-left */
.bt-trainer { position:absolute; bottom:0; left:0; width:50%; height:60%; z-index:2; }
.bt-trainer-figure { position:absolute; bottom:12%; left:18%; width:66px; height:80px; z-index:2;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); transform-origin:50% 100%; transition: transform .14s; }
.bt-trainer-figure .tr-arm { transform-box: fill-box; transform-origin: 12% 95%; transition: transform .14s; }
.bt-trainer-figure.throwing { transform: translateY(-2px) rotate(-3deg); }
.bt-trainer-figure.throwing .tr-arm { transform: rotate(-32deg); }

/* the thrown ball — inline pixel-art SVG per type (see window.ballSvg) */
.bt-ball { position:absolute; z-index:6; width:24px; height:24px; will-change: transform; }
.bt-ball svg { display:block; width:100%; height:100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.bt-ball.caught svg { filter: drop-shadow(0 0 9px rgba(255,235,120,.95)); }
.bt-ball.caught .bt-ball-core { fill:#fff; }

/* pending on-chain confirmation: the charged ball hovers center-field, spinning
   slowly with a pulsing glow while the block confirms (~12s) */
.bt-ball-pending { animation: btPendSpin 2.6s linear infinite; z-index:6; }
.bt-ball-pending svg { animation: btPendGlow 1.5s ease-in-out infinite; }
@keyframes btPendSpin { to { transform: rotate(360deg); } }
@keyframes btPendGlow {
  0%,100% { filter: drop-shadow(0 0 3px rgba(255,236,140,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
  50%     { filter: drop-shadow(0 0 13px rgba(255,236,140,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
}

/* capture flash + fx layers */
.bt-flash { position:absolute; inset:0; z-index:7; background:#fff; opacity:0; pointer-events:none; }
.bt-fx { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.bt-star { position:absolute; color:#fff7b0; font-size:18px; text-shadow:0 0 6px #ffd84a; will-change:transform; }
.bt-confetti { position:absolute; width:6px; height:9px; border-radius:1px; will-change:transform; }

/* OBSERVE signature-move attack effects (see battle.js ATTACK_FX) */
.bt-particle { position:absolute; image-rendering:pixelated; will-change:transform, opacity; }
/* Bulbasaur vine whip */
.bt-vine { position:absolute; height:8px; border-radius:6px;
  background:linear-gradient(90deg,#2f7a2f,#3fa83f 60%,#8ed66a);
  box-shadow:0 0 4px rgba(60,150,60,.5); will-change:transform; }
/* Ivysaur razor leaf */
.bt-leaf { position:absolute; width:14px; height:8px; background:#5fbf3f;
  clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%);
  box-shadow:0 0 3px rgba(80,200,80,.5); will-change:transform, opacity; }
/* Venusaur solar beam */
.bt-beam { position:absolute; will-change:transform, opacity; }
.bt-orb { position:absolute; width:30px; height:30px; border-radius:50%; will-change:transform, opacity; }
/* Charmander ember / Charizard flamethrower */
.bt-fireball { position:absolute; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff 0 18%, #ffd24a 40%, #ff7a1a 70%, #ff3b00);
  box-shadow:0 0 8px 2px rgba(255,120,0,.7); will-change:transform, opacity; }
.bt-flame { position:absolute; border-radius:50%; filter:blur(.4px);
  box-shadow:0 0 8px 3px rgba(255,120,0,.6); will-change:transform, opacity; }
/* water gun / hydro pump jets + hyper-fang streak */
.bt-jet { position:absolute; will-change:transform, opacity; }
/* string shot silk */
.bt-thread { position:absolute; height:3px; border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.3),#f4f4e6 40%,#fff);
  box-shadow:0 0 2px rgba(255,255,255,.6); transform-origin:0% 50%; will-change:transform, opacity; }
/* Butterfree psychic rings */
.bt-psy { position:absolute; width:34px; height:34px; border-radius:50%;
  border:3px solid #e89aff;
  box-shadow:0 0 10px 2px rgba(220,130,255,.6), inset 0 0 8px rgba(220,130,255,.5);
  will-change:transform, opacity; }
/* poison sting needles */
.bt-needle { position:absolute; width:16px; height:4px;
  background:linear-gradient(90deg,#7a2e8a,#c060c0);
  clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);
  box-shadow:0 0 4px rgba(180,80,200,.6); will-change:transform, opacity; }
/* Ekans / Arbok acid */
.bt-blob { position:absolute; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #dff0a0 0 25%, #8fd64a 55%, #5aa82a);
  box-shadow:0 0 6px rgba(120,200,60,.6); will-change:transform, opacity; }
/* Pikachu / Raichu lightning */
.bt-zap { position:absolute; overflow:visible; pointer-events:none; will-change:opacity; }
/* gust wind crescents */
.bt-gust { position:absolute; width:32px; height:32px; border-radius:50%;
  border:4px solid rgba(207,216,255,.9); border-right-color:transparent; border-bottom-color:transparent;
  box-shadow:0 0 8px rgba(180,200,255,.5); will-change:transform, opacity; }
/* Rattata / Raticate hyper-fang bite */
.bt-fang { position:absolute; width:28px; height:20px; background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.7); will-change:transform, opacity; }
.bt-fang-top { clip-path:polygon(0 0,100% 0,80% 100%,50% 60%,20% 100%); }
.bt-fang-bot { clip-path:polygon(20% 0,50% 40%,80% 0,100% 100%,0 100%); }

/* offer button (guarded pokemon) */
.bt-offer-btn { background:var(--blue) !important; box-shadow:0 3px 0 #1a4a8a !important; }
.bt-offer-btn:active { box-shadow:0 1px 0 #1a4a8a !important; }

/* owner dashboard */
#view-dashboard { background:#2a2440; }
.dash-summary { font-size:8px; color:#a9b6d6; margin-bottom:14px; line-height:1.8; }
.dash-pokemon { margin-bottom:12px; }
.dash-pokemon-head { display:flex; align-items:center; gap:10px; cursor:pointer; padding-bottom:8px;
  border-bottom:1px dashed #cfcfc0; margin-bottom:8px; }
.dash-sprite { width:40px; height:40px; image-rendering:pixelated; }
.dash-pokemon-info { display:flex; flex-direction:column; gap:3px; }
.dash-pokemon-name { font-size:10px; color:var(--ink); }
.dash-pokemon-meta { font-size:7px; color:var(--dim); }
.dash-offers { display:flex; flex-direction:column; gap:4px; }
.dash-offer { display:flex; align-items:center; gap:8px; font-size:7px; padding:4px 0; }
.dash-offer-addr { flex:1; color:var(--dim); font-family:ui-monospace,monospace; }
.dash-offer-amt { color:var(--ink); font-weight:bold; }
.dash-offer-date { color:var(--dim); font-size:6px; }

/* settlement panel (after a successful catch) */
.bt-settle { display:flex; flex-direction:column; gap:10px; }
.bt-settle-note { font-size:8px; line-height:1.9; color:var(--ink); }
.bt-settle-line { font-size:8px; color:var(--dim); }
.bt-settle-line b { font-size:11px; color:var(--ink); margin-left:6px; }
.bt-settle-soon { font-size:7px; color:#2a6fdb; letter-spacing:.3px; }

/* lower text + command box */
.bt-box { flex:0 0 auto; background: var(--paper);
  border-top:3px solid var(--line);
  box-shadow: inset 0 3px 0 var(--paper), inset 0 5px 0 var(--line);
  padding:14px 14px 12px; min-height:38%; display:flex; flex-direction:column; gap:10px; }
.bt-text { font-size:9px; line-height:2.0; color:var(--ink); min-height:36px; }
.bt-text.done::after { content:"▼"; margin-left:8px; animation: blink 1s steps(1) infinite; color:var(--ink); }

/* command menu (CATCH / INFO / RUN, result menu) */
.bt-menu { display:flex; flex-wrap:wrap; gap:8px 18px; }
.bt-menu-item { font-family:inherit; font-size:10px; cursor:pointer; color:var(--ink);
  background:none; border:none; padding:4px 6px 4px 2px; position:relative; display:flex; align-items:center; gap:8px; }
.bt-menu-item .bt-cur { opacity:0; color:var(--red); }
.bt-menu-item.sel .bt-cur, .bt-menu-item:hover .bt-cur { opacity:1; }
.bt-menu-item.sel { color:var(--red-lo); }

/* bid panel */
.bt-bid { display:flex; flex-direction:column; gap:9px; }
.bt-bid-label { font-size:8px; color:var(--dim); letter-spacing:.5px; }
.bt-amount { display:flex; align-items:stretch; gap:8px; }
/* +/- steppers: a convenience, sized as proper 44px tap targets */
.bt-step { flex:0 0 auto; font-family:inherit; font-size:22px; line-height:1; cursor:pointer; color:#fff; background:var(--ink);
  border:2px solid var(--line); border-radius:8px; min-width:46px; min-height:48px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent; user-select:none; }
.bt-step:active { transform:translateY(2px); box-shadow:0 0 0 rgba(0,0,0,.35); }
/* the editable amount box: large, clearly tappable; the whole box focuses the
   input. The input itself fills it so a tap anywhere lands in the field. */
.bt-amount-field { flex:1 1 auto; display:flex; align-items:center; gap:6px; cursor:text; min-width:0;
  background:#fffdf0; border:3px solid var(--line); border-radius:8px; padding:8px 12px; min-height:48px;
  box-shadow: inset 0 0 0 2px #fffdf0, inset 0 0 0 4px var(--line); }
.bt-amount-field:focus-within { box-shadow: inset 0 0 0 2px #fffdf0, inset 0 0 0 4px var(--yellow); }
.bt-amount-input { flex:1 1 auto; min-width:0; width:100%; font-family:inherit; font-size:20px; line-height:1.2;
  text-align:left; color:var(--ink); background:transparent; border:none; outline:none; padding:0;
  -moz-appearance:textfield; appearance:textfield; }
.bt-amount-input::-webkit-outer-spin-button, .bt-amount-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bt-amount-input::placeholder { color:#c4c0a8; }
.bt-eth { flex:0 0 auto; font-size:11px; color:var(--dim); letter-spacing:.5px; }
.bt-presets-label { font-size:7px; color:var(--dim); letter-spacing:.5px; margin-top:2px; }
.bt-presets { display:flex; flex-wrap:wrap; gap:8px; }
.bt-chip { flex:0 0 auto; font-family:inherit; font-size:10px; cursor:pointer; color:var(--ink); background:var(--paper2);
  border:2px solid var(--line); border-radius:14px; padding:8px 13px; min-height:36px;
  -webkit-tap-highlight-color:transparent; }
.bt-chip.sel { background:var(--yellow); box-shadow: inset 0 0 0 2px #fff7c8; }
.bt-wallet { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:7px; color:var(--dim); }
.bt-trainer-tag { font-size:7px; color:#2a6fdb; }
.bt-guest { font-size:7px; }
.bt-connect { font-family:inherit; font-size:7px; cursor:pointer; color:var(--ink); background:var(--yellow);
  border:2px solid var(--line); border-radius:6px; padding:6px 9px; box-shadow:0 2px 0 rgba(0,0,0,.3); }
.bt-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.bt-throw { font-family:inherit; font-size:10px; cursor:pointer; color:#fff; background:var(--red);
  border:3px solid var(--line); border-radius:8px; padding:10px 16px; box-shadow:0 3px 0 var(--red-lo); }
.bt-throw:active { transform:translateY(2px); box-shadow:0 1px 0 var(--red-lo); }
.bt-throw:disabled, .bt-throw.disabled { background:var(--paper2); color:var(--dim); cursor:not-allowed;
  box-shadow:0 3px 0 rgba(0,0,0,.15); border-color:var(--line); }
.bt-throw:disabled:active { transform:none; box-shadow:0 3px 0 rgba(0,0,0,.15); }
.bt-cancel { font-family:inherit; font-size:8px; cursor:pointer; color:var(--ink); background:var(--paper);
  border:3px solid var(--line); border-radius:8px; padding:9px 12px; box-shadow:0 3px 0 rgba(0,0,0,.3); }

/* info / catch-attempts panel */
.bt-info { display:flex; flex-direction:column; gap:8px; }
.bt-info-load { font-size:8px; color:var(--dim); }
.bt-info-stats { display:flex; flex-wrap:wrap; gap:6px 14px; }
.bt-info-stats span { font-size:6px; color:var(--dim); display:flex; flex-direction:column; gap:2px; }
.bt-info-stats b { font-size:11px; color:var(--ink); }
.bt-info-title { font-size:7px; color:var(--red); letter-spacing:.5px; border-bottom:2px solid var(--line); padding-bottom:5px; }
.bt-info-list { display:flex; flex-direction:column; gap:5px; max-height:96px; overflow-y:auto; }
.bt-att { display:flex; align-items:center; gap:8px; font-size:7px; }
.bt-att-r { width:12px; text-align:center; }
.bt-att.ok .bt-att-r { color:var(--green); }
.bt-att.no .bt-att-r { color:var(--red); }
.bt-att-who { color:var(--dim); flex:1; font-family: ui-monospace, monospace; }
.bt-att-amt { color:var(--ink); }
.bt-att-empty { font-size:7px; color:var(--dim); }

/* pending panel: shown under the field while the block confirms */
.bt-pending { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 6px; }
.bt-pending-chip { display:inline-flex; align-items:center; gap:8px; font-size:8px; letter-spacing:1px;
  color:#8a5a00; background:#fff6d6; border:2px solid #e0b83a; border-radius:20px; padding:6px 13px; }
.bt-pending-dot { width:8px; height:8px; border-radius:50%; background:#e0a020; box-shadow:0 0 5px #f0c040;
  animation: btPendPulse 1s ease-in-out infinite; }
@keyframes btPendPulse { 0%,100% { opacity:.35; transform:scale(.7); } 50% { opacity:1; transform:scale(1.15); } }
.bt-pending-tx { font-size:8px; letter-spacing:.5px; color:var(--bc,#2f6fd0); text-decoration:none;
  border-bottom:1px dotted; padding-bottom:1px; font-family: ui-monospace, monospace; }
.bt-pending-tx:hover { color:var(--ink); }
.bt-pending-tx-off { color:var(--dim); border-bottom:0; font-style:italic; }

/* tx-failed panel: clear failure + TRY AGAIN, no throw animation */
.bt-txfail { display:flex; flex-direction:column; align-items:center; gap:9px; padding:10px 6px; text-align:center; }
.bt-txfail-head { font-size:10px; color:var(--red); letter-spacing:1px; }
.bt-txfail-reason { font-size:8px; color:var(--ink); line-height:1.55; max-width:280px; }
.bt-txfail .bt-menu-item { margin-top:2px; }

@media (max-width: 420px) {
  .bt-hud { min-width:120px; padding:6px 7px; }
  .bt-name { font-size:8px; }
  /* keep the amount field big and tappable on phones (full width, large text) */
  .bt-amount-input { font-size:19px; }
  .bt-step { min-width:48px; min-height:50px; }
  .bt-chip { font-size:11px; padding:9px 13px; }
  .bt-text { font-size:8px; }
  .bt-menu-item { font-size:9px; }
}

/* ============================================================
   ON-CHAIN CATCH CONSOLE (battle.js catchPanel)
   ============================================================ */
.bt-catch { display:flex; flex-direction:column; gap:8px; }
.bt-catch-reserve { font-size:7px; color:var(--dim); letter-spacing:.5px; }
.bt-catch-reserve b { color:var(--red); }
.bt-catch-label { font-size:7px; color:var(--dim); letter-spacing:.5px; margin-top:3px; }
.bt-catch-label small { color:#b0ab92; margin-left:4px; }

/* ball selector */
.bt-balls { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.bt-ballchip { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  font-family:inherit; color:var(--ink); background:var(--paper2); border:2px solid var(--line);
  border-radius:8px; padding:8px 4px 6px; -webkit-tap-highlight-color:transparent; position:relative; }
.bt-ballchip.sel { background:#fffdf0; box-shadow: inset 0 0 0 2px var(--bc); transform:translateY(-2px); }
.bt-ballchip-ico { width:22px; height:22px; display:block; }
.bt-ballchip-ico svg { display:block; width:100%; height:100%; }
.bt-ballchip-name { font-size:6px; letter-spacing:.3px; }
.bt-ballchip-mult { font-size:7px; color:var(--bc); font-weight:bold; }
.bt-ballchip-fee { font-size:6px; color:var(--dim); }

/* count selector */
.bt-count { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bt-count-val { min-width:42px; text-align:center; font-size:20px; color:var(--ink);
  background:#fffdf0; border:3px solid var(--line); border-radius:8px; padding:6px 4px; }
.bt-count-quick { display:flex; gap:6px; flex-wrap:wrap; }
.bt-chip-sm { font-size:9px; padding:7px 10px; min-height:32px; }

/* live odds readout + gauge */
.bt-odds { font-size:7px; color:var(--ink); line-height:1.5; display:flex; align-items:center; gap:8px; }
.bt-odds.warn { color:var(--red-lo); }
.bt-odds b { color:var(--red-lo); }
.bt-odds-gauge { flex:0 0 62px; height:9px; background:var(--paper2); border:2px solid var(--line);
  border-radius:6px; overflow:hidden; }
.bt-odds-gauge i { display:block; height:100%; transition:width .18s ease; }
.bt-odds-txt { flex:1; }
/* cost breakdown */
.bt-cost { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:7px; color:var(--dim);
  border-top:2px dashed #cfcbb2; padding-top:6px; }
.bt-cost-total { color:var(--ink); font-weight:bold; margin-left:auto; }

/* detail-page catch CTA extras */
.catch-cta { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:10px; }
.wild-tag { font-size:7px; color:#fff; background:var(--red); padding:3px 7px; border-radius:4px;
  letter-spacing:.5px; box-shadow:0 0 6px rgba(224,60,50,.6); }
.v-wild { color:var(--red); }
.v-you { color:var(--green); }
.v-dim { color:var(--dim); }
.catch-row .cr-ball { font-size:6px; color:var(--dim); }

/* ============================================================
   OWNER DASHBOARD (app.js renderOwner)
   ============================================================ */
.owner-body { display:flex; flex-direction:column; gap:12px; }
.owner-status { font-size:8px; padding:9px 11px; border-radius:8px; border:2px solid var(--line);
  line-height:1.6; }
.owner-status small { display:block; color:var(--dim); margin-top:3px; }
.owner-status.pending { background:#fff7d6; }
.owner-status.ok { background:#dff3df; color:var(--green); }
.owner-status.err { background:#ffe0dd; color:var(--red-lo); }
.owner-connect { display:flex; flex-direction:column; gap:12px; align-items:flex-start; font-size:9px; line-height:1.8; color:var(--ink); }

.owner-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.owner-tile { background:var(--paper2); border:2px solid var(--line); border-radius:8px;
  padding:10px 6px; text-align:center; display:flex; flex-direction:column; gap:4px; }
.owner-tile b { font-size:13px; color:var(--ink); }
.owner-tile small { font-size:6px; color:var(--dim); letter-spacing:.4px; }
.owner-tile.hot { background:#fff3c4; box-shadow: inset 0 0 0 2px var(--yellow); }
.owner-tile.hot b { color:var(--red-lo); }

.owner-withdraw { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:9px; }
.owner-approve b { font-size:9px; color:var(--red); letter-spacing:.5px; }
.owner-approve p { font-size:8px; color:var(--ink); line-height:1.7; margin:6px 0 10px; }
.owner-empty { font-size:9px; line-height:1.8; }
.owner-empty a { color:var(--blue); }

.owner-section-title { font-size:7px; color:var(--red); letter-spacing:.5px;
  border-bottom:2px solid var(--line); padding-bottom:5px; margin-top:4px; }
.owner-list { display:flex; flex-direction:column; gap:8px; }
.owner-card { display:flex; gap:10px; align-items:flex-start; }
.oc-sprite { width:52px; height:52px; image-rendering:pixelated; flex:0 0 auto;
  background: radial-gradient(circle at 50% 80%, #eef0dc 0 45%, transparent 46%); }
.oc-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.oc-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:10px; color:var(--ink); }
.oc-meta { font-size:6px; color:var(--dim); }
.oc-badge { font-size:6px; padding:2px 5px; border-radius:4px; letter-spacing:.4px; border:1px solid var(--line); }
.oc-badge.listed { background:var(--red); color:#fff; border-color:var(--red-lo); }
.oc-badge.unlisted { background:var(--paper2); color:var(--dim); }
.oc-badge.pending { background:#fff3c4; color:#8a6d00; }
.oc-badge.ready { background:#dff3df; color:var(--green); }
.oc-list-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.oc-reserve { display:flex; align-items:center; gap:5px; font-size:6px; color:var(--dim);
  background:#fffdf0; border:2px solid var(--line); border-radius:7px; padding:4px 8px; }
.oc-reserve-input { width:64px; font-family:inherit; font-size:13px; color:var(--ink);
  background:transparent; border:none; outline:none; -moz-appearance:textfield; appearance:textfield; }
.oc-reserve-input::-webkit-outer-spin-button, .oc-reserve-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.oc-hint { font-size:6px; color:var(--dim); }
.oc-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.owner-card .btn, .owner-withdraw .btn, .owner-approve .btn { font-size:8px; padding:8px 12px; }
.owner-card .btn[disabled], .owner-withdraw .btn[disabled], .owner-approve .btn[disabled] { opacity:.5; pointer-events:none; }

.owner-feed { display:flex; flex-direction:column; gap:5px; max-height:220px; overflow-y:auto; }
.owner-feed-row { display:flex; align-items:center; gap:8px; font-size:7px; padding:4px 0;
  border-bottom:1px solid #e2ddc4; }
.owner-feed-sprite { width:22px; height:22px; image-rendering:pixelated; flex:0 0 auto; }
.ofr-who { font-family: ui-monospace, monospace; color:var(--dim); }
.ofr-who a { color:var(--dim); }
.ofr-ball { color:var(--ink); }
.ofr-res { flex:1; }
.owner-feed-row.ok .ofr-res { color:var(--green); }
.owner-feed-row.no .ofr-res { color:var(--red); }
.ofr-take { color:var(--red-lo); font-weight:bold; }

.spin { display:inline-block; animation: cpspin 1s linear infinite; }
@keyframes cpspin { to { transform: rotate(360deg); } }

@media (max-width: 420px) {
  .bt-balls { gap:4px; }
  .bt-ballchip-name { font-size:5px; }
  .owner-tiles { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   HOW TO CATCH (app.js renderHowto)
   ============================================================ */
#view-howto { background: var(--red); }
.howto-formula { display:flex; flex-direction:column; gap:0; margin:12px 0 10px;
  border:2px solid var(--line); border-radius:8px; overflow:hidden; }
.hf-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 11px; font-size:8px; background:#fffdf0; border-bottom:2px solid var(--line); }
.hf-row:last-child { border-bottom:none; background:#fff3c4; }
.hf-k { color:var(--ink); }
.hf-v { color:var(--red-lo); font-size:11px; font-weight:bold; letter-spacing:.5px; }
.howto-note { font-size:7px; color:var(--dim); line-height:1.9; margin-top:2px; }

.howto-balls { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.howto-ball { display:flex; align-items:center; gap:11px; padding:9px 11px;
  background:#fffdf0; border:2px solid var(--line); border-radius:8px;
  box-shadow: inset 4px 0 0 var(--bc); }
.hb-ico { flex:0 0 auto; width:24px; height:24px; display:block; }
.hb-ico svg { display:block; width:100%; height:100%; }
.hb-name { flex:1; font-size:9px; color:var(--ink); letter-spacing:.3px; }
.hb-mult { flex:0 0 auto; font-size:11px; color:var(--bc); font-weight:bold; min-width:38px; text-align:right;
  text-shadow:0 0 1px rgba(0,0,0,.4); }
.hb-fee { flex:0 0 auto; font-size:7px; color:var(--dim); min-width:66px; text-align:right; }
.howto-fair h3 { color:var(--green) !important; }

/* ============================================================
   CATCH SUCCESS TAKEOVER (battle.js toCaught) — shareable reward
   ============================================================ */
.bt-gotcha {
  position:absolute; inset:0; z-index:20; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:14px 14px 12px; gap:8px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 22%, #4a2f16 0%, #2a1a0c 55%, #140b04 100%);
  color:#f6e2c0;
  animation: gotchaIn .5s ease-out both;
}
@keyframes gotchaIn { from { opacity:0; } to { opacity:1; } }
/* animated gold rays behind the sprite */
.bt-gotcha-rays { position:absolute; top:-22%; left:50%; width:150%; height:150%;
  transform:translateX(-50%); pointer-events:none; opacity:.55;
  background: repeating-conic-gradient(from 0deg at 50% 34%,
    rgba(255,206,120,.0) 0deg, rgba(255,206,120,.28) 5deg, rgba(255,206,120,0) 12deg);
  animation: rayspin 14s linear infinite; }
@keyframes rayspin { to { transform:translateX(-50%) rotate(360deg); } }
.bt-gotcha-inner { position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:7px; width:100%; max-width:340px; }
.bt-gotcha-title { font-size:15px; letter-spacing:1px; color:#ffd76a;
  text-shadow:2px 2px 0 #7a3d0f, 0 0 12px rgba(255,200,90,.6);
  animation: gotchaPop .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes gotchaPop { 0% { transform:scale(.3); opacity:0; } 60% { transform:scale(1.15); } 100% { transform:scale(1); opacity:1; } }
.bt-gotcha-sub { font-size:9px; line-height:1.7; color:#f6e2c0; }
.bt-gotcha-sub b { color:#ffd76a; }
.bt-gotcha-stage { position:relative; width:132px; height:132px; margin:4px 0;
  display:flex; align-items:center; justify-content:center; }
.bt-gotcha-halo { position:absolute; inset:-6% ; border-radius:50%;
  background: radial-gradient(circle, rgba(255,214,106,.55) 0%, rgba(214,138,58,.25) 45%, transparent 68%);
  animation: haloPulse 1.9s ease-in-out infinite; }
@keyframes haloPulse { 0%,100% { transform:scale(.92); opacity:.7; } 50% { transform:scale(1.08); opacity:1; } }
.bt-gotcha-sprite { position:relative; z-index:2; width:100%; height:100%;
  object-fit:contain; image-rendering:pixelated;
  filter: drop-shadow(0 0 10px rgba(255,220,130,.8));
  animation: spriteFloat 2.6s ease-in-out infinite; }
@keyframes spriteFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-7px) scale(1.04); } }
.bt-gotcha-name { font-size:13px; color:#fff; letter-spacing:.5px;
  text-shadow:1px 1px 0 #7a3d0f; }
.bt-gotcha-detail { font-size:8px; color:#e6c99a; letter-spacing:.4px; }
.bt-gotcha-detail b { color:#ffd76a; }
.bt-gotcha-card { width:100%; margin-top:2px; padding:8px 10px;
  background:rgba(20,11,4,.5); border:2px solid #b9863f; border-radius:8px;
  box-shadow: inset 0 0 0 1px rgba(255,214,106,.25); }
.bt-gotcha-lore { font-size:7px; line-height:1.7; color:#d9bd90; }
.bt-gotcha-lore b { color:#ffd76a; }
.bt-gotcha-url { font-size:8px; color:#ffce78; letter-spacing:.6px; margin-top:5px; }
.bt-gotcha-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.bt-share { font-family:inherit; font-size:9px; cursor:pointer; color:#2a1a0c;
  background:linear-gradient(180deg,#ffe08a,#f2b64a); border:2px solid #7a3d0f;
  border-radius:8px; padding:10px 16px; box-shadow:0 3px 0 #7a3d0f; letter-spacing:.5px; }
.bt-share:active { transform:translateY(2px); box-shadow:0 1px 0 #7a3d0f; }
.bt-share.copied { background:linear-gradient(180deg,#bfe6a0,#7fc85a); }
.bt-gotcha-btn { font-family:inherit; font-size:8px; cursor:pointer; color:#ffe0a8;
  background:rgba(255,255,255,.06); border:2px solid #b9863f; border-radius:8px;
  padding:10px 14px; letter-spacing:.5px; }
.bt-gotcha-btn:active { transform:translateY(1px); }
.bt-gotcha-btn.alt { color:#e6c99a; }

/* CATCH MISS TAKEOVER (battle.js toMissed) */
.bt-miss {
  position:absolute; inset:0; z-index:20; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px; gap:9px; text-align:center;
  background: radial-gradient(120% 90% at 50% 30%, #2c3550 0%, #1b2133 55%, #0e121d 100%);
  color:#c3ccdf; animation: gotchaIn .45s ease-out both;
}
.bt-miss-sprite { width:96px; height:96px; object-fit:contain; image-rendering:pixelated;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
  animation: missFlee 1.1s ease-out both; }
@keyframes missFlee { 0% { transform:translateX(0) scale(1); opacity:1; }
  40% { transform:translateX(0) scale(1.05); } 100% { transform:translateX(26px) scale(.86); opacity:.5; } }
.bt-miss-title { font-size:13px; letter-spacing:.5px; color:#dbe3f2;
  text-shadow:1px 1px 0 #10131f; animation: gotchaPop .5s cubic-bezier(.2,1.4,.4,1) both; }
.bt-miss-sub { font-size:9px; line-height:1.7; color:#aab4cc; max-width:300px; }
.bt-miss-stats { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin:4px 0; }
.bt-miss-stat { background:rgba(255,255,255,.05); border:2px solid #3c465f;
  border-radius:8px; padding:8px 12px; display:flex; flex-direction:column; gap:3px; min-width:74px; }
.bt-miss-stat b { font-size:13px; color:#dbe3f2; }
.bt-miss-stat small { font-size:6px; color:#8592ad; letter-spacing:.4px; }
.bt-miss-tip { font-size:8px; color:#ffce78; line-height:1.7; max-width:280px; }
.bt-miss-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.bt-miss-retry { font-family:inherit; font-size:9px; cursor:pointer; color:#10131f;
  background:linear-gradient(180deg,#ffe08a,#f2b64a); border:2px solid #7a3d0f;
  border-radius:8px; padding:10px 16px; box-shadow:0 3px 0 #7a3d0f; letter-spacing:.5px; }
.bt-miss-retry:active { transform:translateY(2px); box-shadow:0 1px 0 #7a3d0f; }
.bt-miss-done { font-family:inherit; font-size:8px; cursor:pointer; color:#c3ccdf;
  background:rgba(255,255,255,.06); border:2px solid #3c465f; border-radius:8px; padding:10px 14px; }

/* keyboard/d-pad highlight for takeover action buttons */
.bt-gotcha [data-cmd].sel, .bt-miss [data-cmd].sel { outline:3px solid #fff; outline-offset:2px; }

/* compact takeover layout for the short LCD on phones (keeps SHARE reachable) */
@media (max-width: 600px) {
  .bt-gotcha { padding:8px 10px 10px; gap:3px; justify-content:flex-start; }
  .bt-gotcha-inner { gap:4px; }
  .bt-gotcha-title { font-size:13px; }
  .bt-gotcha-sub { font-size:8px; }
  .bt-gotcha-stage { width:74px; height:74px; margin:0; }
  .bt-gotcha-name { font-size:11px; }
  .bt-gotcha-detail { font-size:7px; line-height:1.5; }
  .bt-gotcha-card { padding:5px 8px; }
  .bt-gotcha-lore { font-size:6px; line-height:1.5; }
  .bt-gotcha-url { font-size:7px; margin-top:3px; }
  .bt-gotcha-actions { gap:7px; margin-top:3px; }
  .bt-share { font-size:8px; padding:8px 13px; }
  .bt-gotcha-btn { font-size:7px; padding:8px 11px; }

  .bt-miss { padding:12px 10px; gap:6px; justify-content:flex-start; }
  .bt-miss-sprite { width:78px; height:78px; }
  .bt-miss-title { font-size:12px; }
  .bt-miss-sub { font-size:8px; }
  .bt-miss-stat { padding:6px 10px; min-width:64px; }
  .bt-miss-stat b { font-size:12px; }
  .bt-miss-tip { font-size:7px; }
  .bt-miss-retry { font-size:8px; padding:8px 13px; }
  .bt-miss-done { font-size:7px; padding:8px 11px; }
}

/* ============================================================
   PRACTICE MODE
   ------------------------------------------------------------
   The wallet-free sandbox: a picker screen with per-species demo/live
   reserves, and — inside the encounter — a step-by-step readout of the
   contract's catch-rate arithmetic plus a live log of each roll.
   ============================================================ */
#view-practice { background:#1d3a2e; }
#view-practice .screen-body { background: linear-gradient(180deg,#1d3a2e,#14291f); }
.practice-intro { color:var(--ink); margin-bottom:12px; }
.practice-intro h3 { font-size:10px; margin:0 0 12px; color:var(--green); }
/* pixel type has no small sizes to spare — state it explicitly so the intro
   never falls back to the 16px document default (it swallowed the LCD). */
.practice-intro p { font-size:8px; line-height:2; margin:0 0 9px; }
.practice-intro a { color:var(--blue); }
.practice-legend { display:flex; flex-direction:column; gap:6px; margin-top:10px;
  border-top:2px dashed #cfcbb2; padding-top:9px; }
.practice-legend span { display:flex; align-items:center; gap:7px; font-size:7px; color:var(--dim); line-height:1.6; }
.practice-legend i { flex:0 0 auto; width:8px; height:8px; border:2px solid var(--line); border-radius:50%; }
.pl-live { background:var(--red); box-shadow:0 0 5px rgba(224,60,50,.7); }
.pl-demo { background:var(--paper2); }

.practice-tiles { margin-bottom:10px; }
.practice-sub { display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; font-size:7px; color:#a9c6b4; margin-bottom:10px; }
.practice-grid { margin-bottom:14px; }
.practice-cell { position:relative; }
.practice-cell.got { box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--green); }
.pc-got { position:absolute; top:4px; right:5px; font-size:8px; color:var(--green); }
.pc-res { font-size:6px; margin-top:3px; color:var(--dim); letter-spacing:.4px; }
.pc-res.live { color:var(--red-lo); font-weight:bold; }

/* in-encounter practice flags */
.bt-practice-tag { font-size:7px; color:var(--green); }
.bt-practice-banner { position:absolute; top:6px; right:6px; z-index:6; pointer-events:none;
  font-size:6px; letter-spacing:.6px; color:#0f2419; background:var(--green);
  border:2px solid var(--line); border-radius:5px; padding:3px 6px; box-shadow:0 2px 0 rgba(0,0,0,.3); }

/* the step-by-step math readout */
.bt-math { border-top:2px dashed #cfcbb2; padding-top:7px; display:flex; flex-direction:column; gap:5px; }
.bt-math-title { font-size:7px; color:var(--green); letter-spacing:.5px;
  border-bottom:2px solid var(--line); padding-bottom:4px; }
.bt-math-rows { display:flex; flex-direction:column; gap:3px; }
.bt-math-row { display:flex; align-items:center; gap:7px; font-size:7px; line-height:1.5; }
.bm-n { flex:0 0 12px; height:12px; line-height:12px; text-align:center; font-size:6px;
  color:#fff; background:var(--ink); border-radius:3px; }
.bm-k { flex:0 0 42px; color:var(--dim); letter-spacing:.4px; }
.bm-e { flex:1; color:var(--ink); font-family: ui-monospace, monospace; word-break:break-word; }
.bm-v { flex:0 0 auto; color:var(--red-lo); font-weight:bold; text-align:right; }
.bt-math-final { font-size:7px; color:var(--ink); line-height:1.6; }
.bt-math-final b { color:var(--red-lo); }
.bt-math-note { font-size:6px; color:var(--dim); line-height:1.8; }
.bt-math-note b { color:var(--ink); font-family: ui-monospace, monospace; }

/* One-line stand-in for the working, shown only where the full breakdown would
   bury the throw animation (see the 720px block). Desktop has the room, so the
   summary stays hidden there and the step rows speak for themselves. */
.bt-math-sum { display:none; font-size:7px; color:var(--ink); line-height:1.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bms-state { color:var(--dim); }
.bms-state.ok { color:var(--green); font-weight:bold; }
.bms-state.no { color:var(--red); }

/* live roll log, appended one line per ball as it lands */
.bt-math-rolls { display:flex; flex-direction:column; gap:3px; max-height:84px; overflow-y:auto; }
.bt-roll { display:flex; align-items:center; gap:8px; font-size:7px; line-height:1.5;
  animation: rollIn .18s ease-out; }
.br-n { flex:0 0 54px; color:var(--dim); letter-spacing:.4px; white-space:nowrap; }
.br-e { flex:1; font-family: ui-monospace, monospace; color:var(--ink); white-space:nowrap; }
.br-v { flex:0 0 auto; text-align:right; white-space:nowrap; }
.bt-roll.ok .br-v { color:var(--green); font-weight:bold; }
.bt-roll.no .br-v { color:var(--red); }
@keyframes rollIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }

/* practice GOTCHA takeover reads green, not gold */
.bt-gotcha.practice .bt-gotcha-title { color:#8ff0a4; text-shadow:0 0 12px rgba(120,240,150,.55); }
.bt-gotcha.practice .bt-gotcha-sub b,
.bt-gotcha.practice .bt-gotcha-detail b,
.bt-gotcha.practice .bt-gotcha-lore b { color:#8ff0a4; }
.bt-gotcha.practice .bt-gotcha-url { color:#8ff0a4; }

/* ------------------------------------------------------------
   PRACTICE on a phone. The LCD is ~300px wide there, so every string in
   this mode gets an explicit, smaller size — the intro has to fit without
   scrolling, and the math + roll log have to read as a compact footnote
   under the encounter rather than taking the screen over.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .bm-k { flex:0 0 34px; }
  .bt-math-row, .bt-roll { font-size:6px; }
  .bt-practice-banner { font-size:5px; }

  /* DURING the throw the working is noise: it fills the LCD, it's too small to
     read in the time the ball is in the air, and the trainer already saw these
     numbers before pressing THROW. Collapse to "36.00% per throw · roll 4821 ✕"
     and give the animation the screen. Only .bt-math-live (the throwing panel)
     collapses — the pre-throw breakdown is what the bid decision is made on. */
  .bt-math-live .bt-math-steps,
  .bt-math-live .bt-rolls-head,
  .bt-math-live .bt-math-rolls { display:none; }
  .bt-math-live .bt-math-sum { display:block; }
  .bt-math-live { border-top:none; padding-top:0; }

  .practice-intro { padding:12px 13px; margin-bottom:10px; }
  .practice-intro h3 { font-size:9px; margin:0 0 9px; }
  .practice-intro p { font-size:7px; line-height:1.95; margin:0 0 7px; }
  .practice-legend { gap:5px; margin-top:8px; padding-top:7px; }
  .practice-legend span { font-size:6px; line-height:1.6; gap:6px; }
  .practice-legend i { width:7px; height:7px; }

  .practice-tiles { gap:6px; }
  .practice-tiles .owner-tile { padding:8px 4px; gap:3px; }
  .practice-tiles .owner-tile b { font-size:11px; }
  .practice-tiles .owner-tile small { font-size:5px; letter-spacing:.2px; }
  .practice-sub { font-size:6px; gap:8px; }
  .practice-sub .btn { font-size:6px; padding:7px 10px; }
}
@media (max-width: 420px) {
  .practice-intro { padding:10px 11px; }
  .practice-intro h3 { font-size:8px; margin:0 0 8px; }
  /* 7px is the site's small-copy size; the LCD is ~265px of content here */
  .practice-intro p { font-size:7px; line-height:1.9; margin:0 0 6px; }
  /* four stat tiles won't fit at this width — two rows of two */
  .practice-tiles { grid-template-columns:repeat(2,1fr); }
  .practice-cell img { height:46px; }
  .pc-res { font-size:5px; }

  /* "12.00% per throw · roll 4091 ✕ broke free" is ~40 chars and overruns the
     ~271px LCD at 7px, wrapping to two lines. Footnote scale keeps it to one. */
  .bt-math-live .bt-math-sum { font-size:6px; }

  /* the step-by-step working: same numbers, footnote scale */
  .bt-math { padding-top:6px; gap:4px; }
  .bt-math-title { font-size:6px; padding-bottom:3px; }
  .bt-math-row, .bt-roll { gap:5px; }
  .bm-n { flex:0 0 10px; height:10px; line-height:10px; font-size:5px; }
  .bm-k { flex:0 0 26px; letter-spacing:0; }
  .br-n { flex:0 0 40px; letter-spacing:0; }
  .bt-math-final { font-size:6px; line-height:1.55; }
  .bt-math-note { font-size:6px; line-height:1.7; }
  .bt-math-rolls { max-height:64px; }
}