@font-face{font-family:Silkscreen;src:url(/fonts/silkscreen-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Silkscreen;src:url(/fonts/silkscreen-normal-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Literata;src:url(/fonts/literata-normal-400-700.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:Literata;src:url(/fonts/literata-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}:root{--paper: #f4ebd0;--paper-hi: #fbf5e3;--paper-lo: #e9dcb6;--kraft: #ddcc9e;--ink: #1e2233;--ink-soft: #454a5e;--slate: #34406b;--teal: #2fa39a;--teal-deep: #1d7068;--teal-light: #7fd3c6;--amber: #f2a93b;--amber-deep: #c46a1b;--amber-light: #ffe08a;--coral: #f28c8c;--screen: #0b0d14;--px: "Silkscreen", "Courier New", monospace;--serif: "Literata", Georgia, "Times New Roman", serif;--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--sheet-w: 1080px;--ease: cubic-bezier(.22, .8, .28, 1)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}body{margin:0;min-height:100vh;background:var(--kraft);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}img,svg,canvas{max-width:100%}a{color:var(--teal-deep);text-decoration-thickness:2px;text-underline-offset:3px}a:hover{color:var(--amber-deep)}:focus-visible{outline:3px solid var(--amber);outline-offset:3px}::selection{background:var(--amber-light);color:var(--ink)}.px{image-rendering:pixelated;image-rendering:crisp-edges}code,kbd{font-family:var(--mono)}.desk{position:fixed;top:-48px;right:-48px;bottom:-48px;left:-48px;z-index:-1;pointer-events:none;background-color:var(--kraft);background-image:radial-gradient(circle at 50% 50%,rgba(29,112,104,.2) 0 1.6px,transparent 2.1px),radial-gradient(circle at 50% 50%,rgba(196,106,27,.14) 0 1.1px,transparent 1.6px);background-size:16px 16px,16px 16px;background-position:0 0,8px 8px;animation:desk-drift 48s linear infinite;will-change:transform}.desk:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 30%,transparent 40%,rgba(120,90,40,.18) 100%)}@keyframes desk-drift{0%{transform:translateZ(0)}to{transform:translate3d(32px,32px,0)}}.blink{animation:blink 1s steps(1,end) infinite}@keyframes blink{50%{opacity:0}}.page-loading .blink{display:inline-block;width:20px;height:26px;font-size:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}.page-loading{min-height:60vh;display:grid;place-items:center;font-family:var(--px);font-size:28px;color:var(--teal-deep)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;max-width:calc(var(--sheet-w) + 48px);margin:0 auto;padding:0 24px;height:58px;pointer-events:none}.topbar>*{pointer-events:auto}.brandmark{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:4px 12px 4px 6px;background:var(--paper);border:3px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink);color:var(--ink);text-decoration:none;font-family:var(--px);font-weight:700;font-size:16px;letter-spacing:.02em;transition:transform .15s var(--ease)}.brandmark img{width:32px;height:32px;image-rendering:pixelated}.brandmark:hover{color:var(--ink);transform:translate(-1px,-1px)}.tabs{display:flex;align-items:flex-start;gap:4px}.tab{--tab: var(--paper-lo);display:block;padding:18px 14px 9px;background:var(--tab);border:3px solid var(--ink);border-top:0;border-radius:0 0 8px 8px;color:var(--ink);text-decoration:none;font-family:var(--px);font-size:13px;line-height:1;letter-spacing:.04em;text-transform:uppercase;box-shadow:2px 3px #1e223359;transform:translateY(-6px);transition:transform .18s var(--ease),background-color .18s}.tab:nth-child(1){--tab: var(--paper)}.tab:nth-child(2){--tab: var(--amber)}.tab:nth-child(3){--tab: var(--teal-light)}.tab:nth-child(4){--tab: var(--coral)}.tab:hover{color:var(--ink);transform:translateY(-2px)}.tab.on{transform:translateY(0);padding-bottom:14px;box-shadow:3px 4px 0 var(--ink)}#root{min-height:100vh;display:flex;flex-direction:column}.main{flex:1 0 auto;display:block;padding:18px 24px 80px}.booklet{display:flex;flex-direction:column;gap:56px}.sheet{position:relative;width:100%;max-width:var(--sheet-w);margin:0 auto;padding:28px 56px 26px;background-color:var(--paper);background-image:linear-gradient(90deg,rgba(120,90,40,.07),transparent 8%,transparent 92%,rgba(120,90,40,.07)),radial-gradient(circle at 20% 10%,rgba(255,255,255,.45),transparent 60%);border-radius:2px;box-shadow:0 1px #1e22331f,0 14px 28px -12px #3c280a73,6px 6px 0 -1px var(--paper-lo),6px 6px #1e223333}.runhead{display:flex;justify-content:space-between;gap:16px;padding-bottom:8px;margin-bottom:28px;border-bottom:2px solid var(--ink);font-family:var(--px);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}.runhead span:last-child{text-align:right}.folio{margin-top:36px;text-align:center;font-family:var(--px);font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}.h-pixel{margin:0 0 16px;font-family:var(--px);font-weight:700;font-size:clamp(26px,4vw,40px);line-height:1.1;letter-spacing:.01em;color:var(--ink)}.h-pixel:after{content:"";display:block;width:64px;height:6px;margin-top:12px;background:repeating-linear-gradient(90deg,var(--amber) 0 12px,var(--teal) 12px 24px)}.h-sub{margin:44px 0 18px;font-family:var(--px);font-size:17px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep)}.lede{margin:0 0 20px;font-size:19px;line-height:1.55;max-width:34em}.lede.small{font-size:16px;font-style:italic;color:var(--ink-soft)}.reveal{opacity:0;transform:translate3d(0,28px,0) rotate(-.4deg);transition:opacity .7s var(--ease),transform .8s var(--ease)}.reveal.in{opacity:1;transform:none}.btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:10px 20px 10px 14px;background:var(--paper-hi);color:var(--ink);border:3px solid var(--ink);border-radius:6px;box-shadow:inset 0 0 0 2px var(--paper-hi),inset 0 0 0 4px var(--ink),3px 3px 0 var(--ink);font-family:var(--px);font-size:15px;line-height:1;letter-spacing:.03em;text-decoration:none;text-transform:uppercase;cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s var(--ease);-webkit-tap-highlight-color:transparent}.btn:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:inset 0 0 0 2px var(--paper-hi),inset 0 0 0 4px var(--ink),4px 4px 0 var(--ink)}.btn:active{transform:translate(2px,2px);box-shadow:inset 0 0 0 2px var(--paper-hi),inset 0 0 0 4px var(--ink),1px 1px 0 var(--ink)}.btn-amber{background:var(--amber);box-shadow:inset 0 0 0 2px var(--amber),inset 0 0 0 4px var(--ink),3px 3px 0 var(--ink)}.btn-amber:hover{box-shadow:inset 0 0 0 2px var(--amber),inset 0 0 0 4px var(--ink),4px 4px 0 var(--ink)}.btn-amber:active{box-shadow:inset 0 0 0 2px var(--amber),inset 0 0 0 4px var(--ink),1px 1px 0 var(--ink)}.btn:disabled,.btn[aria-disabled=true]{cursor:default;opacity:.65;transform:none}.cur{display:inline-block;flex:none;width:.55em;height:.7em;margin-right:.35em;font-size:0;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;transform:translate(-3px);transition:opacity .12s,transform .12s var(--ease)}.btn:hover .cur,.btn:focus-visible .cur,.pick:hover .cur,.pick:focus-visible .cur,.filter-btn:hover .cur,.filter-btn:focus-visible .cur,.filter-btn[aria-pressed=true] .cur{opacity:1;transform:none;animation:blink .9s steps(1,end) infinite .12s}.btn:disabled .cur{animation:none;opacity:0}.dlg{position:relative;padding:18px 20px;background:var(--paper-hi);border:3px solid var(--ink);border-radius:8px;box-shadow:inset 0 0 0 3px var(--paper-hi),inset 0 0 0 5px var(--ink),4px 4px #1e223340}.dlg-title{margin:-4px 0 12px;font-family:var(--px);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep)}.cover{max-width:calc(var(--sheet-w) + 40px);margin:8px auto 0;width:100%}.box{display:grid;grid-template-columns:56px 1fr;background:var(--ink);border:4px solid var(--ink);border-radius:6px;box-shadow:0 30px 50px -24px #321e0599,10px 10px 0 -2px #1e22332e;overflow:hidden}.box-spine{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0;background:repeating-linear-gradient(0deg,var(--teal-deep) 0 22px,#1a655e 22px 24px);border-right:4px solid var(--ink);color:var(--paper)}.box-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--px);font-weight:700;font-size:20px;letter-spacing:.18em;text-transform:uppercase}.box-spine img{width:32px;height:32px;image-rendering:pixelated}.box-face{display:flex;flex-direction:column;background:var(--paper);min-width:0}.box-band{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px 16px 28px;background:var(--teal);border-bottom:4px solid var(--ink);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 10px,transparent 10px 20px)}.box-title{margin:0;font-family:var(--px);font-weight:700;font-size:clamp(34px,7.4vw,76px);line-height:1;letter-spacing:.02em;color:var(--amber-light);text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}.box-seal{flex:none;display:grid;place-items:center;width:64px;height:64px;background:var(--paper);border:3px solid var(--ink);border-radius:50%;box-shadow:inset 0 0 0 3px var(--amber),2px 2px 0 var(--ink);transform:rotate(-8deg)}.box-seal img{width:40px;height:40px;image-rendering:pixelated}.box-art{position:relative;border-bottom:4px solid var(--ink);background:var(--paper-lo);line-height:0}.box-art img{display:block;width:100%;height:auto;aspect-ratio:2 / 1;object-fit:cover}.box-sticker{position:absolute;right:22px;top:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:118px;height:118px;background:var(--amber);border:3px solid var(--ink);border-radius:50%;box-shadow:inset 0 0 0 4px var(--amber-light),3px 3px 0 var(--ink);transform:rotate(10deg);font-family:var(--px);line-height:1.05;text-align:center;color:var(--ink)}.box-sticker span{font-size:11px;letter-spacing:.06em;text-transform:uppercase}.box-sticker b{font-size:38px;font-weight:700}.box-foot{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding:22px 28px 24px;background:var(--paper);background-image:radial-gradient(circle,rgba(30,34,51,.08) 1px,transparent 1.5px);background-size:6px 6px}.box-tag{margin:0;max-width:28em;font-size:19px;font-style:italic;line-height:1.45}.box-actions{display:flex;flex-wrap:wrap;gap:14px}.contents-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:48px;align-items:start}.contents-mascot{display:block;width:96px;height:96px;margin-top:12px;image-rendering:pixelated;animation:bob 2.4s steps(2,end) infinite}@keyframes bob{50%{transform:translateY(-4px)}}.toc{list-style:none;margin:0;padding:0;counter-reset:toc;border-top:2px solid var(--ink)}.toc li{border-bottom:1px dashed rgba(30,34,51,.4)}.toc a{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"title dots page" "note note note";column-gap:10px;align-items:baseline;padding:14px 6px 12px 22px;position:relative;color:var(--ink);text-decoration:none;transition:background-color .15s}.toc a:before{content:"";position:absolute;left:4px;top:19px;font-size:14px;width:.55em;height:.7em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;color:var(--amber-deep)}.toc a:hover,.toc a:focus-visible{background:#ffe08a73}.toc a:hover:before,.toc a:focus-visible:before{opacity:1;animation:blink .9s steps(1,end) infinite}.toc-title{grid-area:title;font-family:var(--px);font-size:16px;letter-spacing:.02em}.toc-dots{grid-area:dots;height:0;border-bottom:3px dotted rgba(30,34,51,.45);transform:translateY(-4px)}.toc-page{grid-area:page;font-family:var(--px);font-size:14px;color:var(--teal-deep)}.toc-note{grid-area:note;font-size:15px;font-style:italic;color:var(--ink-soft)}.sheet-foldout{max-width:calc(var(--sheet-w) + 120px);background-color:#f7efd6}.fold-crease{position:absolute;top:0;bottom:0;left:50%;width:36px;transform:translate(-50%);pointer-events:none;background:linear-gradient(90deg,transparent,rgba(120,90,40,.1) 45%,rgba(255,255,255,.4) 52%,transparent)}.foldout-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 48px;align-items:end;margin-bottom:28px}.foldout-head .h-pixel,.foldout-head p{margin:0}.foldout-foot{position:relative;margin:26px 0 0;font-style:italic;color:var(--ink-soft);max-width:40em}.foldout-maps{position:relative;display:flex;align-items:flex-end;gap:0;overflow-x:auto;padding:14px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--teal-deep) transparent}.mm-cell{flex:1 1 0;min-width:150px;display:flex;align-items:center}.mm{flex:1;margin:0;min-width:0}.mm-frame{display:inline-block;max-width:100%;padding:6px;background:var(--paper-hi);border:3px solid var(--ink);box-shadow:3px 3px #1e22334d;line-height:0}.mm-town .mm-frame{border-color:var(--teal-deep);box-shadow:3px 3px 0 var(--teal-deep)}.mm-frame canvas{display:block;width:auto;max-width:100%;max-height:230px;margin:0 auto;height:auto;image-rendering:pixelated}.mm figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px}.placard{display:inline-block;padding:4px 9px 3px;background:var(--ink);color:var(--paper);font-family:var(--px);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:3px}.mm-town .placard{background:var(--teal-deep)}.mm-wild{display:flex;flex-wrap:wrap;gap:0;padding:2px 4px;background:#7fd3c659;border:1px dashed var(--teal-deep);border-radius:4px}.mm-wild .sprite{width:40px;height:40px}.mm-link{flex:none;width:22px;height:0;border-top:4px dotted var(--amber-deep);margin:0 2px;align-self:center;transform:translateY(-30px)}.trail{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin:0;padding:10px 0}.trail li{display:flex;align-items:center}.trail li+li:before{content:"";width:28px;border-top:4px dotted var(--amber-deep);margin:0 4px}.trail-town .placard{background:var(--teal-deep);font-size:14px;padding:8px 12px 7px}.strip{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:8px 0 0;padding:0;counter-reset:strip}.strip-frame{position:relative;padding:30px 16px 16px;background:var(--paper-hi);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--teal-light)}.strip-frame:nth-child(2n){box-shadow:4px 4px 0 var(--amber-light)}.strip-frame p{margin:0;font-size:16px;line-height:1.5}.strip-n{position:absolute;top:-16px;left:12px;display:grid;place-items:center;width:36px;height:36px;background:var(--amber);border:3px solid var(--ink);border-radius:50%;font-family:var(--px);font-weight:700;font-size:17px}.starters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.slip{position:relative;padding:16px 16px 18px;background:var(--paper-hi);border:2px dashed var(--ink);border-radius:4px;text-align:center}.slip:before{content:"✂︎";font-family:"Segoe UI Symbol","DejaVu Sans",var(--serif);position:absolute;top:-13px;left:14px;padding:0 4px;background:var(--paper);font-size:16px;line-height:1;color:var(--ink-soft)}.slip-window{display:grid;place-items:center;height:164px;margin-bottom:12px;background:radial-gradient(circle,rgba(29,112,104,.18) 1px,transparent 1.6px) 0 0 / 8px 8px,var(--teal-light);border:3px solid var(--ink);border-radius:50% 50% 8px 8px/30% 30% 8px 8px}.slip:nth-child(1) .slip-window{background-color:#a9dc8d}.slip:nth-child(2) .slip-window{background-color:#ffc48a}.slip:nth-child(3) .slip-window{background-color:#9fd6ec}.slip h4{margin:0 0 8px;font-family:var(--px);font-size:20px;letter-spacing:.02em}.slip .chips{justify-content:center}.slip-line{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft)}.slip-line b{color:var(--ink)}.sprite{image-rendering:pixelated;image-rendering:crisp-edges;display:inline-block;vertical-align:middle;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-block;padding:4px 8px 3px;border:2px solid var(--ink);border-radius:3px;font-family:var(--px);font-size:11px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;background:#d8d2bd;color:var(--ink);white-space:nowrap}.t-normal{background:#d8d2bd;color:#1e2233}.t-fire{background:#e8622c;color:#fff8ea}.t-water{background:#3f86d4;color:#fff8ea}.t-grass{background:#7bc25a;color:#16240f}.t-electric{background:#f6cf3c;color:#2a2208}.t-ice{background:#9fe0e0;color:#102a2e}.t-fighting{background:#b3362c;color:#fff8ea}.t-poison{background:#9150a0;color:#fff8ea}.t-ground{background:#d9b060;color:#2a1d08}.t-flying{background:#a9b7f0;color:#161c3a}.t-psychic{background:#ef6a94;color:#2a0a16}.t-bug{background:#a6b92a;color:#1c2106}.t-rock{background:#b39a52;color:#1f180a}.t-ghost{background:#5e5596;color:#fff8ea}.t-dragon{background:#5b44c9;color:#fff8ea}.t-dark{background:#4b3f38;color:#fff8ea}.t-steel{background:#b8bccd;color:#1a1d2a}.t-fairy{background:#f3b1d6;color:#2d0f22}.together-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:44px;align-items:start}.cable{display:block;width:100%;max-width:300px;height:auto;margin:8px 0 18px}.notes{margin:0;display:grid;gap:18px}.note{position:relative;padding:0 0 0 20px;border-left:4px solid var(--teal)}.note:nth-child(2n){border-left-color:var(--amber)}.note dt{margin-bottom:4px;font-family:var(--px);font-size:15px;letter-spacing:.04em;text-transform:uppercase}.note dd{margin:0;font-size:16px}.together-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;padding-top:24px;border-top:2px dashed rgba(30,34,51,.35)}.back-cover{position:relative;width:100%;background:var(--teal-deep);background-image:radial-gradient(circle,rgba(127,211,198,.16) 1px,transparent 1.6px);background-size:10px 10px;color:var(--paper);border-top:4px solid var(--ink);margin-top:20px}.back-inner{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1.2fr);gap:32px 48px;align-items:center;max-width:calc(var(--sheet-w) + 48px);margin:0 auto;padding:48px 24px 40px}.back-brand{display:flex;align-items:center;gap:16px}.back-brand img{flex:none;width:64px;height:64px;image-rendering:pixelated;background:var(--paper);border:3px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink)}.back-title{font-family:var(--px);font-weight:700;font-size:26px;line-height:1.1;color:var(--amber-light);text-shadow:2px 2px 0 var(--ink)}.back-sub{margin-top:6px;font-size:15px;font-style:italic;line-height:1.45;color:#d9efe9}.back-index{display:flex;flex-direction:column;gap:4px}.back-index a{position:relative;padding-left:18px;color:var(--paper);font-family:var(--px);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}.back-index a:before{content:"";position:absolute;left:0;font-size:13px;top:.35em;width:.55em;height:.7em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;color:var(--amber-light)}.back-index a:hover{color:var(--amber-light)}.back-index a:hover:before,.back-index a:focus-visible:before{opacity:1;animation:blink .9s steps(1,end) infinite}.back-ca{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:0}.back-ca .ca{color:var(--ink)}.ca{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px 10px 14px;min-width:0}.ca-label{flex:none;padding:3px 7px 2px;background:var(--ink);color:var(--paper);border-radius:3px;font-family:var(--px);font-size:12px;letter-spacing:.1em}.ca-value{flex:1;min-width:0;min-height:1.4em;padding-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--ink);border-bottom:2px dotted rgba(30,34,51,.35)}.ca-btn{flex:none;display:grid;place-items:center;min-width:36px;height:36px;padding:0 6px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:5px;cursor:pointer;transition:background-color .12s,transform .12s var(--ease)}.ca-btn:hover{background:var(--amber-light);color:var(--ink);transform:translateY(-1px)}.ca-copied{font-family:var(--px);font-size:11px;letter-spacing:.04em;color:var(--teal-deep)}.icon-row{display:flex;gap:10px}.icon-btn{display:grid;place-items:center;width:44px;height:44px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s var(--ease),background-color .12s,box-shadow .12s var(--ease)}.icon-btn:hover{background:var(--amber);color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.back-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:calc(var(--sheet-w) + 48px);margin:0 auto;padding:14px 24px 22px;border-top:2px dashed rgba(244,235,208,.35)}.back-strip span{font-family:var(--px);font-size:13px;letter-spacing:.3em;color:var(--amber-light)}.back-strip i{display:block;width:132px;height:30px;background:repeating-linear-gradient(90deg,var(--paper) 0 2px,transparent 2px 4px,var(--paper) 4px 5px,transparent 5px 8px,var(--paper) 8px 11px,transparent 11px 12px);opacity:.85}.dex-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;margin-bottom:22px}.dex-head .lede{margin:0}.dex-count{font-family:var(--px);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-align:right}.dex-count b{display:block;font-size:34px;line-height:1;color:var(--teal-deep)}.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:14px 0 16px;border-top:2px solid var(--ink);border-bottom:1px dashed rgba(30,34,51,.4)}.filter-label{align-self:center;margin-right:6px;font-family:var(--px);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.filter-btn{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:6px 12px 5px 6px;background:var(--paper-hi);color:var(--ink);border:2px solid var(--ink);border-radius:5px;font-family:var(--px);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s var(--ease);box-shadow:2px 2px 0 var(--ink)}.filter-btn .cur{width:7px;height:9px;margin-right:4px}.filter-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}.filter-btn[aria-pressed=true]{background:var(--amber);box-shadow:inset 0 0 0 2px var(--amber-light),2px 2px 0 var(--ink)}.filter-swatch{display:inline-block;width:10px;height:10px;margin-right:6px;border:2px solid var(--ink);border-radius:2px}.dex-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin:0;padding:0}.dex-card{display:flex;flex-direction:column;background:var(--paper-hi);border:3px solid var(--ink);border-radius:6px;box-shadow:4px 4px #1e223338;overflow:hidden;animation:card-in .45s var(--ease) both}@keyframes card-in{0%{opacity:0;transform:translateY(10px)}}.dex-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 12px 7px;background:var(--ink);color:var(--paper)}.dex-no{font-family:var(--px);font-size:12px;letter-spacing:.1em;color:var(--amber-light)}.dex-name{margin:0;font-family:var(--px);font-weight:700;font-size:18px;letter-spacing:.02em;line-height:1.1}.dex-body{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px 14px 12px}.dex-window{display:grid;place-items:center;width:112px;height:112px;background:radial-gradient(circle,rgba(29,112,104,.2) 1px,transparent 1.6px) 0 0 / 8px 8px,var(--teal-light);border:3px solid var(--ink);border-radius:6px;position:relative;overflow:hidden}.dex-window:after{content:"";position:absolute;left:12%;right:12%;bottom:12px;height:10px;border-radius:50%;background:#1e22332e}.dex-window .sprite{position:relative;z-index:1}.dex-window.w-fire{background-color:#ffc48a}.dex-window.w-grass{background-color:#b5df9a}.dex-window.w-water{background-color:#a6d8ee}.dex-window.w-normal{background-color:#e6dcc0}.dex-window.w-ground{background-color:#e8cd91}.dex-window.w-bug{background-color:#d4e08f}.dex-window.w-electric{background-color:#ffe08a}.dex-window.w-rock{background-color:#d9c79a}.dex-window.w-psychic{background-color:#f7bfd2}.dex-window.w-ghost{background-color:#c6c0e6}.dex-window.w-flying{background-color:#cdd6fa}.dex-side{display:flex;flex-direction:column;gap:8px;min-width:0}.dex-meta{margin:0;font-size:14px;line-height:1.4;color:var(--ink-soft)}.dex-meta b{color:var(--ink);font-weight:600}.stats{display:grid;gap:3px;margin:0;padding:0 14px 12px}.stat{display:grid;grid-template-columns:62px 30px minmax(0,1fr);align-items:center;gap:8px}.stat dt{font-family:var(--px);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}.stat dd{margin:0;font-family:var(--mono);font-size:13px;font-weight:600;text-align:right}.bar{display:block;height:8px;background:repeating-linear-gradient(90deg,rgba(30,34,51,.1) 0 6px,transparent 6px 8px);border:1px solid rgba(30,34,51,.5)}.bar i{display:block;height:100%;background:var(--teal);transform-origin:left}.bar.hi i{background:var(--amber)}.stat-total{display:flex;justify-content:space-between;margin-top:5px;padding-top:6px;border-top:1px dashed rgba(30,34,51,.4);font-family:var(--px);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.dex-evo{margin:auto 0 0;padding:9px 14px 10px;background:var(--paper);border-top:2px solid var(--ink);font-size:14px;line-height:1.45}.dex-evo>span{display:block}.dex-evo b{font-weight:600}.dex-evo .arrow{display:inline-block;width:7px;height:9px;margin-right:7px;font-size:0;background:var(--amber-deep);clip-path:polygon(0 0,100% 50%,0 100%)}.dex-evo .arrow.back{clip-path:polygon(100% 0,0 50%,100% 100%)}.dex-evo-none{font-style:italic;color:var(--ink-soft)}.dex-empty{padding:24px;text-align:center;font-style:italic;color:var(--ink-soft)}.guide-controls{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px;align-items:start}.diagram{margin:0}.diagram svg{display:block;width:100%;height:auto}.diagram figcaption{margin-top:8px;font-size:14px;font-style:italic;color:var(--ink-soft)}.diagram text{font-family:var(--px)}.keys-list{width:100%;border-collapse:collapse}.keys-list td{padding:10px 6px;border-bottom:1px dashed rgba(30,34,51,.35);vertical-align:top;font-size:15px}.keys-list td:first-child{white-space:nowrap;width:1%}.cols{columns:2 300px;column-gap:44px;column-rule:1px dashed rgba(30,34,51,.3)}.topic{break-inside:avoid;margin:0 0 26px}.topic h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--px);font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep)}.topic h3 .num{display:grid;place-items:center;flex:none;width:28px;height:28px;background:var(--amber);border:2px solid var(--ink);border-radius:50%;font-size:13px;color:var(--ink)}.topic p{margin:0 0 10px;font-size:16px}.topic ul{margin:0 0 10px;padding-left:0;list-style:none}.topic li{position:relative;padding-left:20px;margin-bottom:6px;font-size:16px}.topic li:before{content:"";position:absolute;left:2px;top:.55em;font-size:12px;width:.55em;height:.7em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);color:var(--amber-deep)}.menu-box{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:12px 0 14px;padding:14px 18px 12px;font-family:var(--px);font-size:14px;text-transform:uppercase;letter-spacing:.06em}.menu-box span:before{content:"";display:inline-block;margin-right:.5em;width:.55em;height:.7em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);opacity:0}.menu-box span:first-child:before{opacity:1;animation:blink 1s steps(1,end) infinite}.tip{margin:10px 0 0;padding:10px 14px;background:#ffe08a8c;border-left:4px solid var(--amber-deep);font-size:15px}.tip b{font-family:var(--px);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}.matchups{display:grid;gap:8px;margin:10px 0 12px;padding:0;list-style:none}.matchups li{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:0;margin:0;font-size:15px}.matchups li:before{content:none}.guide-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;padding-top:22px;border-top:2px dashed rgba(30,34,51,.35)}.main-play{padding-top:26px}.play{display:grid;grid-template-columns:minmax(0,560px) minmax(0,380px);justify-content:center;gap:36px;align-items:start;max-width:var(--sheet-w);margin:0 auto}.play-stage{min-width:0}.play-side{display:flex;flex-direction:column;gap:20px;min-width:0}.console{position:relative;width:100%;max-width:560px;margin:0 auto;padding:22px 22px 26px;background:var(--teal);background-image:linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%),radial-gradient(circle,rgba(29,112,104,.35) 1px,transparent 1.4px);background-size:auto,5px 5px;border:4px solid var(--ink);border-radius:18px 18px 72px;box-shadow:inset -6px -8px #1d70688c,inset 4px 4px #ffffff2e,8px 10px #1e223340,0 30px 40px -24px #2814008c;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.bezel{padding:10px 26px 26px;background:var(--slate);border:3px solid var(--ink);border-radius:10px 10px 42px;box-shadow:inset 0 3px #00000040}.bezel-top{display:flex;align-items:center;gap:8px;min-height:22px;margin:0 -12px 8px}.led{flex:none;width:10px;height:10px;border-radius:50%;border:1px solid var(--ink);background:#4a2626}.led-off{background:#4a2626}.led-connecting,.led-reconnecting{background:var(--amber);box-shadow:0 0 6px var(--amber);animation:blink .8s steps(1,end) infinite}.led-open{background:#ff5b4f;box-shadow:0 0 8px #ff5b4f}.led-closed{background:#7a3a3a}.led-text{font-family:var(--px);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#c9d1ee;white-space:nowrap}.bezel-name{margin-left:auto;font-family:var(--px);font-weight:700;font-size:12px;letter-spacing:.12em;font-style:italic;text-transform:uppercase;color:#aab4d8}.screen{position:relative;width:100%;aspect-ratio:4 / 3;background:var(--screen);border:3px solid var(--ink);border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 2px #00000080}.game-host{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4 / 3;background:var(--screen);overflow:hidden;outline:none}.game-host canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}.screen-idle{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:repeating-linear-gradient(0deg,rgba(127,211,198,.05) 0 2px,transparent 2px 4px),radial-gradient(ellipse at 50% 45%,#1b2a3a,var(--screen) 70%);color:var(--teal-light);font-family:var(--px);font-size:clamp(16px,3.4vw,22px);letter-spacing:.1em;text-transform:uppercase}.screen-idle img{width:64px;height:64px;image-rendering:pixelated;opacity:.9;animation:bob 2.4s steps(2,end) infinite}.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 8px 0;touch-action:none;user-select:none;-webkit-user-select:none}.dpad{position:relative;flex:none;width:138px;height:138px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.dp-v,.dp-h{position:absolute;background:var(--ink);border-radius:6px;box-shadow:3px 4px #0000004d}.dp-v{left:33.33%;width:33.34%;top:0;height:100%}.dp-h{top:33.33%;height:33.34%;left:0;width:100%}.dp-c{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a4160,#151827)}.dp-arrow{position:absolute;width:0;height:0;border:8px solid transparent;transition:border-color .08s}.dp-arrow.up{left:50%;top:8px;margin-left:-8px;border-bottom-color:#5d6688;border-top-width:0}.dp-arrow.down{left:50%;bottom:8px;margin-left:-8px;border-top-color:#5d6688;border-bottom-width:0}.dp-arrow.left{top:50%;left:8px;margin-top:-8px;border-right-color:#5d6688;border-left-width:0}.dp-arrow.right{top:50%;right:8px;margin-top:-8px;border-left-color:#5d6688;border-right-width:0}.dpad[data-dir=up] .dp-arrow.up{border-bottom-color:var(--amber)}.dpad[data-dir=down] .dp-arrow.down{border-top-color:var(--amber)}.dpad[data-dir=left] .dp-arrow.left{border-right-color:var(--amber)}.dpad[data-dir=right] .dp-arrow.right{border-left-color:var(--amber)}.dpad[data-dir=up] .dp-v{background:linear-gradient(180deg,#0b0d14 34%,var(--ink) 34%)}.dpad[data-dir=down] .dp-v{background:linear-gradient(0deg,#0b0d14 34%,var(--ink) 34%)}.dpad[data-dir=left] .dp-h{background:linear-gradient(90deg,#0b0d14 34%,var(--ink) 34%)}.dpad[data-dir=right] .dp-h{background:linear-gradient(270deg,#0b0d14 34%,var(--ink) 34%)}.ab{display:flex;align-items:center;gap:16px;padding:10px 14px;background:#1d70688c;border-radius:48px;transform:rotate(-22deg);touch-action:none}.round{display:grid;place-items:center;width:64px;height:64px;padding:0;background:var(--amber);background-image:radial-gradient(circle at 35% 30%,var(--amber-light),var(--amber) 55%,var(--amber-deep));color:var(--ink);border:3px solid var(--ink);border-radius:50%;box-shadow:0 5px 0 var(--ink);font-family:var(--px);font-weight:700;font-size:20px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .05s,box-shadow .05s}.round span{transform:rotate(22deg)}.ra{transform:translateY(-14px)}.round.down,.round:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.ra.down,.ra:active{transform:translateY(-10px)}.lower{display:flex;align-items:center;gap:14px;margin:26px 8px 0;touch-action:none}.pill{display:inline-grid;place-items:center;min-width:76px;height:26px;padding:0 14px;background:var(--slate);color:#dfe4f5;border:2px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);font-family:var(--px);font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transform:rotate(-22deg);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:box-shadow .05s,translate .05s}.pill.down,.pill:active{box-shadow:0 1px 0 var(--ink);translate:0 2px}.pill-mute[aria-pressed=true]{background:#5a4250}.grille{display:flex;gap:7px;margin-left:auto;transform:rotate(-22deg)}.grille i{display:block;width:6px;height:46px;background:#1e2233b3;border-radius:3px;box-shadow:inset 1px 1px #0006}.screen-idle-msg{margin:0;padding:0 16px;max-width:26em;font-family:var(--px);font-size:clamp(10px,2.2vw,12px);line-height:1.5;letter-spacing:.06em;text-align:center;color:var(--amber-light)}.play-offline{border-left-width:10px;border-left-color:var(--coral)}.play-offline p{margin:0 0 8px;font-size:15px}.play-offline p:last-child{margin-bottom:0}.trainer .party{list-style:none;margin:0;padding:0;display:grid;gap:6px}.party li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"sp name lv" "sp hp hp";column-gap:10px;align-items:center;padding:4px 0;border-bottom:1px dashed rgba(30,34,51,.3)}.party li:last-child{border-bottom:0}.party .sprite{grid-area:sp;width:48px;height:48px}.party-name{grid-area:name;font-family:var(--px);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.party-lv{grid-area:lv;font-family:var(--px);font-size:12px;color:var(--ink-soft)}.hpbar{grid-area:hp;display:block;height:8px;background:#d9d0b4;border:2px solid var(--ink);border-radius:4px;overflow:hidden}.hpbar i{display:block;height:100%;background:#4fbf6a;transition:width .4s var(--ease)}.money{margin:10px 0 0;padding-top:8px;border-top:2px solid var(--ink);font-family:var(--px);font-size:14px;text-align:right}.keys table{width:100%;border-collapse:collapse}.keys td{padding:7px 4px;border-bottom:1px dashed rgba(30,34,51,.3);vertical-align:middle;font-size:14px;line-height:1.35}.keys tr:last-child td{border-bottom:0}.keys td:first-child{width:1%;white-space:nowrap;padding-right:12px}kbd{display:inline-block;margin:2px 4px 2px 0;padding:2px 7px 3px;min-width:26px;background:var(--paper);border:2px solid var(--ink);border-radius:4px;box-shadow:0 2px 0 var(--ink);font-family:var(--px);font-size:11px;line-height:1.3;text-align:center;color:var(--ink)}.keys-note{margin:12px 0 0;font-size:14px;font-style:italic;color:var(--ink-soft)}.signin{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.signin .btn{width:100%;justify-content:flex-start}.signin-note{margin:0;font-size:14px;color:var(--ink-soft)}.signin-msg{margin:0;padding:8px 12px;width:100%;background:#f28c8c47;border-left:4px solid var(--coral);font-size:14px}.signed{flex-direction:row;align-items:center;font-size:15px}.signed code{font-size:14px;font-weight:600}.signed-dot{flex:none;width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:#4fbf6a}.picker{width:100%}.picker-q{margin:0 0 8px;font-family:var(--px);font-size:14px;letter-spacing:.04em;text-transform:uppercase}.picker ul{list-style:none;margin:0;padding:0}.pick{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 8px;background:transparent;color:var(--ink);border:0;border-radius:4px;font-family:var(--serif);font-size:16px;text-align:left;cursor:pointer}.pick:hover,.pick:focus-visible{background:#ffe08a8c}.pick img{width:24px;height:24px;border-radius:4px}.pick-blank{width:24px;height:24px;border:2px dashed var(--ink-soft);border-radius:4px}.pick-cancel{margin-top:4px;border-top:1px dashed rgba(30,34,51,.35);border-radius:0;font-family:var(--px);font-size:13px;text-transform:uppercase;letter-spacing:.06em}@media (max-width: 960px){.play{grid-template-columns:minmax(0,560px)}.strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}.back-inner{grid-template-columns:minmax(0,1fr) auto}.back-ca{grid-column:1 / -1}}@media (max-width: 760px){body{font-size:16px}.topbar{padding:0 12px;height:54px}.brandmark{padding:3px;margin-top:8px}.brandmark span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tabs{gap:3px}.tab{padding:16px 8px 8px;font-size:11px;letter-spacing:.02em}.tab.on{padding-bottom:12px}.main{padding:12px 12px 60px}.booklet{gap:36px}.sheet{padding:20px 20px 18px}.runhead{font-size:10px;margin-bottom:22px}.runhead span:first-child{display:none}.runhead{justify-content:flex-end}.folio{margin-top:26px}.lede{font-size:17px}.box{grid-template-columns:30px 1fr;border-width:3px}.box-spine{border-right-width:3px;padding:12px 0}.box-spine span{font-size:13px}.box-spine img{width:20px;height:20px}.box-band{padding:12px 14px 10px 16px}.box-seal{width:48px;height:48px}.box-seal img{width:30px;height:30px}.box-art img{aspect-ratio:16 / 10}.box-sticker{width:72px;height:72px;right:auto;left:8px;top:8px;border-width:2px;box-shadow:inset 0 0 0 3px var(--amber-light),2px 2px 0 var(--ink)}.box-sticker b{font-size:22px}.box-sticker span{font-size:8px}.box-foot{padding:18px 16px 20px}.box-tag{font-size:17px}.box-actions{width:100%}.box-actions .btn{flex:1 1 auto;justify-content:center}.contents-grid,.together-grid,.foldout-head,.guide-controls{grid-template-columns:minmax(0,1fr);gap:24px}.contents-mascot,.fold-crease{display:none}.sheet-foldout{overflow:hidden}.foldout-maps{margin:0 -20px;padding-left:20px;padding-right:20px}.mm-cell{min-width:170px}.strip{grid-template-columns:minmax(0,1fr)}.starters{grid-template-columns:minmax(0,1fr);gap:26px}.slip-window{height:150px}.cable{max-width:240px}.back-inner{grid-template-columns:minmax(0,1fr);padding:36px 16px 28px;gap:26px}.back-index{flex-direction:row;flex-wrap:wrap;gap:8px 18px}.back-strip{padding:12px 16px 20px}.dex-head{grid-template-columns:minmax(0,1fr)}.dex-count{text-align:left}.dex-grid{grid-template-columns:minmax(0,1fr)}.filter{flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;scrollbar-width:none}.filter-btn{flex:none}.menu-box{font-size:13px}.diagram text{font-size:16px}.main-play{padding-top:16px}.play{gap:24px}.console{padding:14px 12px 20px;border-radius:14px 14px 56px}.bezel{padding:8px 12px 16px;border-radius:8px 8px 28px}.bezel-top{margin:0 -2px 6px}.controls{margin:22px 4px 0}.dpad{width:124px;height:124px}.round{width:56px;height:56px}.ab{gap:12px;padding:8px 10px}.lower{margin-top:20px;gap:8px}.pill{min-width:64px}.grille i{height:38px}}@media (max-width: 360px){.tab{padding-left:6px;padding-right:6px;font-size:10px}.dpad{width:112px;height:112px}.round{width:50px;height:50px}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.desk,.blink,.contents-mascot,.screen-idle img,.led-connecting,.led-reconnecting,.dex-card{animation:none!important}.reveal{opacity:1;transform:none}.cur,.btn:hover .cur,.btn:focus-visible .cur{animation:none!important}}

html,body,#root{height:100%;height:100dvh}
#root{min-height:0;overflow:hidden}
.app-play{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.app-play .desk,.app-play .back-cover{display:none}
.app-play .topbar{position:relative;top:auto;width:100%;max-width:none;height:auto;min-height:48px;flex:0 0 auto;z-index:4}
.app-play .main.main-play{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:4px;position:relative;overflow:hidden;display:flex}
.app-play .play{display:flex;flex-direction:column;width:100%;height:100%;max-width:none;margin:0;position:relative;min-height:0}
.app-play .play-stage{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:auto;max-width:none}
.app-play .console{width:100%;height:100%;max-width:none;box-sizing:border-box;display:flex;flex-direction:column;padding:6px;border-radius:10px;position:relative}
.app-play .bezel{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column}
.app-play .screen{aspect-ratio:auto;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}
.app-play .game-host{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;overflow:hidden}
.app-play .game-host canvas,.app-play .screen canvas{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;max-width:none;max-height:none;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.app-play .controls{position:absolute;left:8px;right:8px;bottom:8px;margin:0;z-index:8;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;background:transparent}
.app-play .dpad,.app-play .ab{pointer-events:auto}
.app-play .dpad{width:clamp(112px,22vmin,168px);height:clamp(112px,22vmin,168px)}
.app-play .round{width:clamp(64px,14vmin,88px);height:clamp(64px,14vmin,88px);font-size:clamp(16px,3vmin,26px)}
.app-play .lower{position:absolute;right:12px;bottom:108px;margin:0;z-index:8;pointer-events:auto}
.app-play .pill{min-height:44px;height:auto;padding:8px 16px}
.app-play .dpad,.app-play .round,.app-play .pill,.app-play .ab{touch-action:none}
.app-play .play-side{display:none}
.app-play .topbar{overflow:visible;flex-wrap:nowrap;align-items:flex-end}
.app-play .top-actions{display:flex;align-items:flex-end;gap:4px;margin-left:auto;min-width:0}
.app-play .signin-slot{position:relative;display:flex;align-items:flex-end}
.app-play .signin-tab{transform:none;border-top:0;border-radius:0 0 8px 8px;padding:18px 14px 9px;margin:0;background:#F2A93B;color:#1E2233;cursor:pointer}
.app-play .signin-tab.on{transform:none;padding:18px 14px 14px;box-shadow:3px 4px 0 var(--ink)}
.app-play .signin-pop{position:absolute;top:calc(100% + 6px);right:0;width:min(280px,72vw);background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;padding:12px;z-index:8;box-shadow:4px 4px #1e223340}
.app-play .signin-pop .signin-note{margin:0 0 10px;font-size:14px;line-height:1.4;text-transform:none;letter-spacing:0;font-family:var(--serif,Georgia,serif)}
.app-play .signin-pop .btn{width:100%;justify-content:flex-start}
.app-play .signin-pop .picker{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.app-play .signin-pop .pick{width:100%;text-align:left;font-family:var(--px,monospace);background:#fff;border:2px solid #1E2233;padding:8px;cursor:pointer}
.app-play .signin-msg{margin:8px 0 0;font-size:14px}
.app-play .signin-link{width:100%;box-sizing:border-box;font:12px ui-monospace,monospace;margin:8px 0;padding:6px;border:2px solid #1E2233;background:#fff;color:#1E2233}
.app-play .signin-pop a.pick{display:block;text-decoration:none;color:inherit}
.app-play .signin-pop{width:min(320px,88vw);max-height:70vh;overflow:auto}
.app-play .yen-box{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.app-play .yen-box input,.app-play .yen-amt{width:100%;box-sizing:border-box;font:14px ui-monospace,monospace;padding:6px;border:2px solid #1E2233;background:#fff;color:#1E2233}
.app-play .wardrobe-panel{position:absolute;left:4%;right:4%;top:4%;z-index:5;max-height:62%;overflow:auto;background:#F4EBD0;color:#1E2233;border:3px solid #1E2233;padding:10px;box-sizing:border-box;font-family:var(--px,monospace)}
.app-play .wardrobe-title{margin:8px 0 4px;font-size:14px}
.app-play .wardrobe-panel label{display:block;font-size:13px}
.app-play .wardrobe-panel input{width:100%;box-sizing:border-box;font:16px ui-monospace,monospace;padding:8px;margin-top:4px;border:2px solid #1E2233;background:#fff;color:#1E2233}
.app-play .wardrobe-looks{display:flex;flex-direction:column;gap:6px}
.app-play .wardrobe-look{text-align:left;font-family:var(--px,monospace);background:#fff;border:2px solid #1E2233;padding:8px;cursor:pointer}
.app-play .wardrobe-look.on{background:#FFE08A}
.app-play .wardrobe-preview{width:64px;height:64px;margin-top:8px;image-rendering:pixelated;image-rendering:crisp-edges;background:#E8DCB5;border:2px solid #1E2233}
.app-play .wardrobe-hint{margin:8px 0 0;font-size:13px}
.app-play .wardrobe-actions{display:flex;gap:6px;margin:8px 0}
.app-play .wardrobe-actions .wardrobe-look{flex:1;text-align:center}
.app-play .keys{display:none}
.float-panel{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;overflow:hidden;background:#F4EBD0;color:#1E2233;border:0;padding:0;box-sizing:border-box}
.float-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 12px;background:#1E2233;color:#F7F4EA}
.float-title{font-family:var(--px,monospace);font-size:13px;letter-spacing:.06em}
.float-close{position:static;float:none;background:#F2A93B;color:#1E2233;padding:8px 14px;text-decoration:none;font-family:var(--px,monospace);border-radius:6px}
.float-body{flex:1;min-height:0;overflow:auto;padding:18px 16px 32px;box-sizing:border-box}
.float-panel .booklet{width:100%;max-width:none;gap:20px}
.float-panel .sheet,.float-panel .sheet-dex,.float-panel .sheet-foldout{max-width:none;width:100%;margin:0;box-sizing:border-box}
.float-panel .reveal,.sheet-dex.reveal{opacity:1;transform:none}
.float-panel .atlas{width:100%}
.float-panel .atlas-scroll{max-height:none;width:100%;min-height:52vh;overflow:auto}
.chrome-layer{display:contents}
.trainer-overlay{position:fixed;inset:0;z-index:28;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px max(12px,env(safe-area-inset-bottom));background:#0b0d1488;box-sizing:border-box}
.trainer-sheet{width:min(440px,100%);max-height:min(72dvh,560px);overflow:auto;margin:0}
.trainer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.trainer-bar .dlg-title{margin:0}
.trainer-x{font-family:var(--px,monospace);background:#1E2233;color:#F7F4EA;border:0;padding:8px 12px;cursor:pointer}
.trainer-who{margin:10px 0 6px;font-family:var(--px,monospace)}
.trainer-empty{margin:8px 0}
.intro-tip{position:relative;z-index:6;order:-1;left:auto;top:auto;transform:none;width:100%;flex:0 0 auto;pointer-events:auto;background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;padding:8px 12px;box-sizing:border-box;box-shadow:none}
.intro-tip p{margin:0 0 8px;font-family:var(--serif,Georgia,serif);font-size:16px;line-height:1.45;pointer-events:auto}
.intro-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;pointer-events:auto}
.intro-skip{font-family:var(--px,monospace);background:transparent;border:0;color:#1E2233;padding:8px;cursor:pointer}
.intro-tip .btn{pointer-events:auto}
.atlas-note{margin:0 0 8px;font-size:15px}
.atlas-scroll{overflow:auto;max-height:68vh;border:2px solid #1E2233;background:#16321f}
.atlas-world{position:relative}
.atlas-area{position:absolute;padding:0;margin:0;border:0;background:transparent;cursor:pointer;outline:2px solid transparent}
.atlas-area canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.atlas-town{outline-color:#C46A1B}
.atlas-route{outline-color:#2E8A45}
.atlas-water{outline-color:#2A6FA8}
.atlas-cave{outline-color:#6A5A8A}
.atlas-indoor{outline-color:#8A7050}
.atlas-area.on{z-index:2;outline-width:3px}
.atlas-name{position:absolute;left:0;top:0;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;font:11px/1.2 "Silkscreen","Courier New",monospace;background:#F7F4EA;color:#1E2233;padding:1px 3px;white-space:nowrap;pointer-events:none}
.atlas-indoor:not(.on) .atlas-name{display:none}
.atlas-area.on .atlas-name,.atlas-area:hover .atlas-name,.atlas-area:focus-visible .atlas-name{display:block;max-width:none;z-index:3;outline:2px solid #1E2233}
.atlas-area:hover,.atlas-area:focus-visible{z-index:3}
.atlas-scroll{position:relative;z-index:1}
.float-panel .atlas-scroll{height:min(72vh,900px);min-height:0}
.atlas-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.atlas-note{position:sticky;top:0;z-index:4;padding:6px 8px;background:#F7F4EA;border:2px solid #1E2233;line-height:1.35}
@media (max-width:840px){.atlas-name{font-size:9px}.atlas-scroll{max-height:none;height:68dvh}.float-bar{position:sticky;top:0;z-index:5}.float-close{min-height:40px;display:inline-flex;align-items:center}}
@media (max-width:380px){.app-play .tab,.app-play .signin-tab{font-size:9px}}
@media (min-width:841px){.float-body{padding:24px max(24px,5vw) 40px}.float-panel .booklet{max-width:1100px;margin:0 auto}}
@media (max-width:840px){
.app-play .brandmark{display:none}
.app-play .topbar{height:46px;min-height:46px;padding:0 6px;gap:4px}
.app-play .top-actions,.app-play .tabs{flex:1;min-width:0;gap:4px}
.app-play .signin-slot{flex:1;min-width:0}
.app-play .tab,.app-play .signin-tab{flex:1;min-width:0;text-align:center;padding:12px 2px 8px;font-size:11px;letter-spacing:0}
.app-play .signin-tab{width:100%;margin:0}
.app-play .signin-tab.on{padding:12px 2px 10px}
.app-play .main.main-play{padding:0}
.app-play .console{padding:0;border:0;border-radius:0;background:#0b0d14;box-shadow:none}
.app-play .bezel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.app-play .bezel-top{display:none}
.app-play .screen{border:0;border-radius:0;box-shadow:none}
.app-play .controls{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom))}
.app-play .lower{left:50%;right:auto;bottom:max(128px,calc(env(safe-area-inset-bottom) + 118px));transform:translateX(-50%)}
.app-play .grille{display:none}
.float-body{padding:12px 12px 28px}
.float-panel .sheet,.float-panel .sheet-dex,.float-panel .sheet-foldout{padding:16px 14px 18px;box-shadow:none}
.float-panel .dex-grid{grid-template-columns:minmax(0,1fr)}
.float-panel .dex-head{grid-template-columns:minmax(0,1fr)}
.float-panel .dex-body{grid-template-columns:auto minmax(0,1fr);gap:12px}
.float-panel .filter{max-width:100%;box-sizing:border-box;margin-left:0;margin-right:0}
.intro-tip{position:relative;top:auto}
}
/* Top bar: every tab (Market, Play, Pokédex, Guide, Wallet) hangs from the top edge at one height, raised 6px until
   hovered or current. Market is a fixed button outside React; .top-actions reserves its width (--market-w). */
.app-play .topbar,.app-play .top-actions,.app-play .tabs{align-items:flex-start}
.app-play .top-actions{padding-left:calc(var(--market-w,0px) + 4px)}
.app-play .tab,.app-play .signin-tab{box-sizing:border-box;margin:0;line-height:1;transform:translateY(-6px)}
.app-play .tab:hover,.app-play .signin-tab:hover{transform:translateY(-2px)}
.app-play .tab.on,.app-play .signin-tab.on{transform:translateY(0)}
.app-play .signin-tab{background:var(--coral,#F28C8C)}
@media (max-width:840px){
.app-play .topbar{padding:0 6px}
.app-play .top-actions{flex:1;min-width:0;gap:4px}
.app-play .tabs{flex:3 1 0;min-width:0;gap:4px}
.app-play .signin-slot{flex:1 1 0;min-width:0}
.app-play .tabs .tab{flex:1 1 0}
.app-play .tab,.app-play .signin-tab{padding:12px 2px 8px;font-size:10px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.app-play .tab.on,.app-play .signin-tab.on{padding-bottom:10px}
}
@media (max-width:380px){.app-play .tab,.app-play .signin-tab{font-size:9px}}

/* tools/styles/20-panels.css */
/* Pokédex and Guide panels (.float-panel, PLAY_CSS) and the Guide's region map (.gmap-*, tools/splice-atlas.js).
   Narrow means the panel's 840px breakpoint, the same one build-web's Dex and Guide splices use. */

/* ---- Panel chrome ---- */
.float-panel,.float-body{overscroll-behavior:contain}
.float-body{-webkit-overflow-scrolling:touch}
/* A # link or scrollIntoView inside the panel must not scroll the clipped layers around it. */
#root:has(.float-panel),.app-play .main.main-play:has(> .float-panel){overflow:clip}
.float-close{display:inline-flex;align-items:center;justify-content:center;min-height:40px;box-sizing:border-box;line-height:1}
.float-close:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.float-panel section[tabindex="-1"]:focus{outline:none}
@media (max-width:840px){
  .float-bar{min-height:48px;padding:4px max(8px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left));gap:8px}
  .float-title{font-size:12px}
  .float-close{padding:4px 14px;font-size:12px}
  .float-body{padding:10px max(10px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .float-panel .booklet{gap:12px}
  .float-panel .sheet,.float-panel .sheet-dex,.float-panel .sheet-foldout{padding:12px 12px 14px;border-radius:4px;box-shadow:0 1px #1e22331f}
  .float-panel .runhead,.float-panel .folio{display:none}
  .float-panel .h-pixel{margin:0 0 10px;font-size:20px}
  .float-panel .h-pixel:after{width:48px;height:4px;margin-top:8px}
  .float-panel .lede{margin:0 0 12px;font-size:15px;line-height:1.5}
  .float-panel .h-sub{margin:18px 0 8px;font-size:13px}
  .float-panel .btn{min-height:40px;padding:8px 14px 8px 10px;font-size:12px}
  .float-panel .guide-cta,.float-panel .together-cta{gap:8px;margin-top:12px;padding-top:12px}
  .float-panel .guide-cta .btn,.float-panel .together-cta .btn{flex:1 1 auto;justify-content:center}
}

/* ---- Pokédex ---- */
/* The type filter stays on screen while the list scrolls, flush with the top of the panel body (less its padding). */
.float-panel .sheet-dex .filter{position:sticky;top:-24px;z-index:4;background:var(--paper,#F4EBD0)}
@media (max-width:840px){.float-panel .sheet-dex .filter{top:-10px}}
.dex-thumb{display:grid;place-items:center;flex:none;width:48px;height:48px;overflow:hidden;border-radius:4px;background:#e6dcc0}
.dex-thumb .sprite{display:block;width:48px;height:48px}
.dex-thumb.w-fire{background:#ffc48a}.dex-thumb.w-grass{background:#b5df9a}.dex-thumb.w-water{background:#a6d8ee}
.dex-thumb.w-ground{background:#e8cd91}.dex-thumb.w-bug{background:#d4e08f}.dex-thumb.w-electric{background:#ffe08a}
.dex-thumb.w-rock{background:#d9c79a}.dex-thumb.w-psychic{background:#f7bfd2}.dex-thumb.w-ghost{background:#c6c0e6}
.dex-thumb.w-flying{background:#cdd6fa}.dex-thumb.w-poison{background:#dcc4e6}.dex-thumb.w-ice{background:#c9eeee}
.dex-thumb.w-fighting{background:#efb8a6}.dex-thumb.w-dragon{background:#c9bff0}
.dex-row{border-width:2px;border-radius:6px;box-shadow:2px 2px 0 #1e223326}
.dex-row.open{box-shadow:3px 3px 0 var(--ink,#1E2233)}
.dex-row .dex-card-top,.dex-row .dex-side .chips{display:none}
.dex-row-h{margin:0;font:inherit}
.dex-toggle{display:grid;grid-template-columns:48px minmax(0,1fr) 14px;align-items:center;gap:0 10px;width:100%;min-height:56px;margin:0;padding:3px 10px 3px 3px;border:0;border-radius:4px;background:transparent;color:var(--ink,#1E2233);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dex-toggle:hover{background:#ffe08a4d}
.dex-toggle:focus-visible{outline:3px solid var(--amber,#F2A93B);outline-offset:-3px}
.dex-row.open .dex-toggle{border-radius:4px 4px 0 0;background:#ffe08a73}
.dex-row-text{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.dex-row-name{display:flex;align-items:baseline;gap:8px;min-width:0}
.dex-row-name .dex-no{flex:none;font-size:10px;letter-spacing:.06em;color:var(--teal-deep,#1d7068)}
.dex-row-name .dex-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--px);font-weight:700;font-size:14px;line-height:1.15}
.dex-row-text .chips{flex-wrap:nowrap;gap:4px;min-width:0;overflow:hidden}
.dex-row-text .chip{padding:2px 5px 1px;border-width:1.5px;font-size:9px;letter-spacing:.06em}
.dex-chev{justify-self:end;width:9px;height:9px;margin:-5px 2px 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.dex-row.open .dex-chev{margin:5px 2px 0 0;transform:rotate(-135deg)}
.dex-row .dex-more{border-top:2px solid var(--ink,#1E2233)}
.dex-row .dex-body{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 10px 8px}
.dex-row .dex-window{width:96px;height:96px}
.dex-row .stats{padding:0 10px 10px}
.dex-row .dex-evo{padding:8px 10px}
@media (max-width:840px){
  .float-panel .dex-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 12px;margin-bottom:6px}
  .float-panel .dex-head .h-pixel{margin:0 0 4px;font-size:18px}
  .float-panel .dex-head .h-pixel:after{display:none}
  .float-panel .dex-head .lede{margin:0;font-size:13px;line-height:1.4;color:var(--ink-soft,#454a5e)}
  .float-panel .dex-count{margin:0;font-size:10px;text-align:right}
  .float-panel .dex-count b{font-size:20px}
  /* One line of type buttons that scrolls sideways inside the sheet, fading at its edges. */
  .float-panel .filter{flex-wrap:nowrap;gap:6px;max-width:none;margin:0 -12px 8px;padding:8px 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-top:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  .float-panel .filter::-webkit-scrollbar{display:none}
  .float-panel .filter-label{display:none}
  .float-panel .filter-btn{flex:none;min-height:34px;padding:4px 10px 3px 6px;font-size:11px;box-shadow:1px 1px 0 var(--ink,#1E2233)}
  .float-panel .dex-grid{gap:6px}
  .float-panel .dex-empty{padding:16px}
}
/* Wide screens keep whole cards, in a denser grid. */
@media (min-width:841px){
  .float-panel .dex-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
  .float-panel .dex-card-top{padding:6px 10px 5px}
  .float-panel .dex-name{font-size:15px}
  .float-panel .dex-no{font-size:11px}
  .float-panel .dex-body{grid-template-columns:96px minmax(0,1fr);gap:10px;padding:10px 10px 8px}
  .float-panel .dex-window{width:96px;height:96px}
  .float-panel .dex-meta{font-size:13px}
  .float-panel .stats{gap:2px;padding:0 10px 10px}
  .float-panel .stat{grid-template-columns:54px 26px minmax(0,1fr);gap:6px}
  .float-panel .dex-evo{padding:7px 10px 8px;font-size:13px}
  .float-panel .filter{padding:10px 0 12px;margin-bottom:18px}
}

/* ---- Guide ---- */
.topic-toggle{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:2px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.topic-toggle:hover .topic-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.topic-title{flex:1;min-width:0}
.topic-chev{flex:none;width:8px;height:8px;margin:-4px 6px 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.topic.open .topic-chev{margin-top:4px;transform:rotate(-135deg)}
.price-list{margin:4px 0 10px}
.price-list summary{display:list-item;min-height:32px;padding:6px 0 4px;cursor:pointer;font-family:var(--px);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-deep,#1d7068)}
.price-list ul{margin-top:6px}
.price-list li{font-size:15px}
/* The together sheet's "Read the guide" is this page; the controls diagram's labels may run past its edge. */
.float-panel .together-cta a[href="/guide"]{display:none}
.float-panel .diagram svg{overflow:visible}
@media (max-width:840px){
  /* Cover: the title band and Press Start; the art, spine and sticker go. */
  .float-panel .cover{margin:0}
  .float-panel .box{grid-template-columns:minmax(0,1fr);border-width:3px;box-shadow:none}
  .float-panel .box-spine,.float-panel .box-art,.float-panel .box-actions a[href="#contents"]{display:none}
  .float-panel .box-band{gap:10px;padding:10px 12px 8px;border-bottom-width:3px}
  .float-panel .box-title{font-size:clamp(20px,7vw,28px);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
  .float-panel .box-seal{width:40px;height:40px;border-width:2px}
  .float-panel .box-seal img{width:26px;height:26px}
  .float-panel .box-foot{gap:10px;padding:10px 12px 12px}
  .float-panel .box-tag{font-size:14px;line-height:1.4}
  .float-panel .box-actions{gap:8px}
  /* Contents: two columns of jump links. */
  .float-panel .contents-grid{gap:8px}
  .float-panel .contents-grid .lede,.float-panel .toc-dots,.float-panel .toc-page,.float-panel .toc-note{display:none}
  .float-panel .contents-grid .h-pixel{margin-bottom:4px}
  .float-panel .toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-top:0}
  .float-panel .toc li{border:0}
  .float-panel .toc a{display:flex;align-items:center;min-height:40px;padding:6px 8px;background:var(--paper-hi,#fbf5e3);border:2px solid var(--ink,#1E2233);border-radius:4px;box-shadow:2px 2px 0 #1e223333}
  .float-panel .toc a:before{display:none}
  .float-panel .toc-title{font-size:11px;line-height:1.25}
  /* Region */
  .float-panel .foldout-head{gap:4px;margin-bottom:10px}
  .float-panel .foldout-head p{font-size:14px;line-height:1.45}
  .float-panel .foldout-foot{margin-top:8px;font-size:13px;line-height:1.4}
  /* First steps: numbered lines and one row per starter. */
  .float-panel .strip{gap:6px;margin:0}
  .float-panel .strip-frame{display:flex;align-items:center;min-height:44px;padding:8px 10px 8px 46px;border-width:2px;box-shadow:none}
  .float-panel .strip-n{top:50%;left:8px;width:28px;height:28px;border-width:2px;font-size:13px;transform:translateY(-50%)}
  .float-panel .strip-frame p{font-size:14px;line-height:1.4}
  .float-panel .starters{grid-template-columns:minmax(0,1fr);gap:6px}
  .float-panel .slip{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"win name" "win chips" "win line";align-items:center;gap:3px 10px;padding:6px 8px;border-width:2px;border-style:solid;text-align:left}
  .float-panel .slip:before{display:none}
  .float-panel .slip-window{grid-area:win;width:56px;height:56px;margin:0;border-width:2px}
  .float-panel .slip-window .sprite{width:48px;height:48px}
  .float-panel .slip h4{grid-area:name;margin:0;font-size:14px}
  .float-panel .slip .chips{grid-area:chips;justify-content:flex-start}
  .float-panel .slip-line{grid-area:line;margin:0;font-size:12px;line-height:1.35}
  /* Playing together */
  .float-panel .together-grid{gap:10px}
  .float-panel .cable{display:none}
  .float-panel .together-grid .lede.small{margin:0;font-size:14px}
  .float-panel .notes{gap:10px}
  .float-panel .note{padding-left:10px;border-left-width:3px}
  .float-panel .note dt{margin-bottom:2px;font-size:12px}
  .float-panel .note dd{font-size:14px;line-height:1.45}
  /* Controls and the loop: topics are a list of one-line headings until opened. */
  .float-panel .guide-controls{gap:12px}
  .float-panel .diagram{width:100%;max-width:320px;margin:0 auto;padding:0 6px;box-sizing:border-box}
  .float-panel .diagram text{font-size:15px}
  .float-panel .diagram figcaption{font-size:13px}
  .float-panel .dlg{padding:12px}
  .float-panel .keys-list td{padding:6px 4px;font-size:13px}
  .float-panel .cols{columns:1}
  .float-panel .topic{margin:0;border-bottom:1px dashed rgba(30,34,51,.3)}
  .float-panel .topic h3{margin:0;font-size:13px}
  .float-panel .topic-toggle{min-height:44px}
  .float-panel .topic h3 .num{width:24px;height:24px;font-size:11px}
  .float-panel .topic-body{padding:0 0 12px}
  .float-panel .topic p,.float-panel .topic li{font-size:15px}
  .float-panel .menu-box{margin:4px 0 10px;padding:10px 12px}
}
/* No keyboard on a touch-only device. */
@media (hover:none) and (pointer:coarse){.float-panel .guide-controls>.dlg{display:none}}

/* ---- Guide map ---- */
.gmap{position:relative;width:100%}
.gmap-note{min-height:2.9em;margin:8px 0 0;padding:6px 10px;background:#F7F4EA;color:#1E2233;border:2px solid #1E2233;border-radius:4px;font-size:14px;line-height:1.4}
.gmap-note b{margin-right:4px;font-family:var(--px,monospace);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
/* The view takes the world's shape (an inline aspect-ratio), so the whole map fills it, up to two thirds of the screen. */
.gmap-view{position:relative;width:100%;height:auto;min-height:240px;max-height:min(66vh,620px);max-height:min(66dvh,620px);overflow:hidden;box-sizing:border-box;background:#16321f;border:2px solid #1E2233;border-radius:4px;contain:layout paint;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:grab}
@supports not (aspect-ratio:1){.gmap-view{height:min(60vh,560px)}}
.gmap-view.gmap-drag{cursor:grabbing}
.gmap-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;--inv:1}
.gmap-roads{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.gmap-roads path{fill:none;stroke:#E6D3A1;stroke-width:6px;stroke-width:max(6px,calc(3px * var(--inv)));stroke-dasharray:18 12;stroke-dasharray:calc(9px * var(--inv)) calc(6px * var(--inv));stroke-linejoin:round;opacity:.95}
.gmap-area{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:0;background:#0B0D14;cursor:pointer;outline:calc(1.5px * var(--inv)) solid #00000066;outline-offset:0;-webkit-tap-highlight-color:transparent}
.gmap-area canvas{display:block;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
.gmap-soft .gmap-area canvas{image-rendering:auto}
.gmap-town{outline-color:#C46A1B}
.gmap-route{outline-color:#2E8A45}
.gmap-water{outline-color:#2A6FA8}
.gmap-cave{outline-color:#8A7AAA}
.gmap-indoor{outline-color:#8A7050}
.gmap-area:hover{z-index:2;outline-color:#F7F4EA}
.gmap-area.on{z-index:3;outline:calc(3px * var(--inv)) solid #FFE08A}
.gmap-area:focus-visible{z-index:3;outline:calc(3px * var(--inv)) solid #F2A93B}
/* Names stay one size on screen; the view shows the ones that fit (lbl), and any you hover, focus or pick. */
.gmap-name{position:absolute;left:50%;top:50%;z-index:4;visibility:hidden;padding:2px 5px 1px;white-space:nowrap;pointer-events:none;background:#F7F4EAeb;color:#1E2233;border:1px solid #1E2233;border-radius:3px;font:11px/1.2 "Silkscreen","Courier New",monospace;letter-spacing:.02em;transform:translate(-50%,-50%) scale(var(--inv))}
.gmap-town .gmap-name{background:#FFE08A;font-weight:700}
/* A town name that does not fit on the town sits just above, below or beside it (lbl-n, -s, -e, -w). */
.gmap-area.lbl-n .gmap-name{top:0;transform-origin:50% 100%;transform:translate(-50%,-100%) scale(var(--inv))}
.gmap-area.lbl-s .gmap-name{top:100%;transform-origin:50% 0;transform:translate(-50%,0) scale(var(--inv))}
.gmap-area.lbl-e .gmap-name{left:100%;transform-origin:0 50%;transform:translate(0,-50%) scale(var(--inv))}
.gmap-area.lbl-w .gmap-name{left:0;transform-origin:100% 50%;transform:translate(-100%,-50%) scale(var(--inv))}
.gmap-area.lbl .gmap-name,.gmap-area:hover .gmap-name,.gmap-area:focus-visible .gmap-name,.gmap-area.on .gmap-name{visibility:visible}
.gmap-area.on .gmap-name{background:#1E2233;color:#FFE08A}
/* Bottom right: open sea on the whole map. */
.gmap-tools{position:absolute;right:8px;bottom:8px;z-index:5;display:flex;gap:6px}
.gmap-tools button{display:grid;place-items:center;min-width:40px;height:40px;margin:0;padding:0 8px;background:#F7F4EA;color:#1E2233;border:2px solid #1E2233;border-radius:6px;box-shadow:2px 2px 0 #1E2233;font:700 18px/1 "Silkscreen","Courier New",monospace;cursor:pointer;touch-action:manipulation}
.gmap-tools button:last-child{font-size:11px}
.gmap-tools button:hover{background:#FFE08A}
.gmap-tools button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #1E2233}
.gmap-tools button:focus-visible{outline:3px solid #F2A93B;outline-offset:2px}
@media (max-width:840px){
  .gmap-note{font-size:13px;min-height:2.8em;padding:5px 8px}
  .gmap-name{padding:2px 4px 1px;font-size:9px}
}


/* tools/styles/30-play.css */
/* Play screen: where the game view and the console controls sit, the D-pad joystick and the START/SOUND pills.
   Appended after PLAY_CSS in build-web.mjs, so it overrides it. No control ever sits on the game screen:
   - narrower than 5:4 (phones upright, tablets upright, squarish windows): the screen is a 4:3 box at the top and
     the controls have their own band below it, D-pad left, A/B right, START and SOUND along the bottom (Game Boy);
   - 5:4 and wider (phones on their side, tablets on their side, desktops): the screen sits between a D-pad column
     and an A/B column, which gives the bigger screen at those shapes.
   Qt() in the mount chunk fits the 256x192 canvas inside the screen box. tools/inject/30-play.js drives the
   joystick (data-dir, --kx/--ky, .gb-held) and the trainer name overlay (canvas.gb-tags). */

.app-play .play{gap:0}
.app-play .console{--gb-pad:132px}

/* Joystick: a round base, the four arrows, and the knob (.dp-c) that follows the thumb. */
.app-play .dpad{width:var(--gb-pad);height:var(--gb-pad);border-radius:50%;background:radial-gradient(circle at 50% 40%,#2c3354,#171b2c 70%);border:3px solid var(--ink);box-shadow:inset 0 2px 0 #ffffff17,inset 0 -4px 0 #0000004d,0 4px 0 #00000059}
.app-play .dpad::before{content:"";position:absolute;inset:17%;border-radius:50%;border:2px solid #ffffff0f;pointer-events:none}
.app-play .dp-v,.app-play .dp-h{display:none}
.app-play .dp-arrow{z-index:1}
.app-play .dp-arrow.up{top:5px}
.app-play .dp-arrow.down{bottom:5px}
.app-play .dp-arrow.left{left:5px}
.app-play .dp-arrow.right{right:5px}
.app-play .dpad[data-dir=up] .dp-arrow.up,.app-play .dpad[data-dir=down] .dp-arrow.down,.app-play .dpad[data-dir=left] .dp-arrow.left,.app-play .dpad[data-dir=right] .dp-arrow.right{filter:drop-shadow(0 0 4px #f2a93b)}
.app-play .dp-c{z-index:2;left:50%;top:50%;width:40%;height:40%;margin:-20% 0 0 -20%;border:3px solid var(--ink);background:radial-gradient(circle at 36% 30%,#6a7397,#3a4570 45%,#1e2233);box-shadow:0 4px 0 #00000066,inset 0 2px 0 #ffffff33;transform:translate(var(--kx,0px),var(--ky,0px));transition:transform .14s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.app-play .dpad.gb-held .dp-c{transition:none}
.app-play .dpad[data-dir=up] .dp-c,.app-play .dpad[data-dir=down] .dp-c,.app-play .dpad[data-dir=left] .dp-c,.app-play .dpad[data-dir=right] .dp-c{box-shadow:0 4px 0 #00000066,inset 0 2px 0 #ffffff33,0 0 0 2px #f2a93b8c}
@media (prefers-reduced-motion:reduce){.app-play .dp-c{transition:none}}

/* START and SOUND: a 32px tall tap target around a small pill. SOUND shows a speaker, struck through when muted. */
.app-play .lower{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:0}
.app-play .pill{min-width:0;min-height:32px;height:32px;padding:5px 0;background:transparent;border:0;border-radius:0;box-shadow:none;transform:none;color:#dfe4f5;font-size:9px;letter-spacing:.1em}
.app-play .pill span{display:flex;align-items:center;justify-content:center;height:22px;min-width:52px;padding:0 10px;background:var(--slate);border:2px solid var(--ink);border-radius:11px;box-shadow:0 2px 0 var(--ink);transition:translate .05s,box-shadow .05s}
.app-play .pill.down,.app-play .pill:active{box-shadow:none;translate:none}
.app-play .pill.down span,.app-play .pill:active span{box-shadow:0 0 0 var(--ink);translate:0 2px}
.app-play .pill-mute span{min-width:40px;font-size:0;letter-spacing:0}
.app-play .pill-mute span::before{content:"";display:block;width:16px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 4h3l4-3v10L4 8H1zM10 4h1.5v4H10zM12.5 2H14v8h-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 4h3l4-3v10L4 8H1zM10 4h1.5v4H10zM12.5 2H14v8h-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.app-play .pill-mute[aria-pressed=true] span{background:#5a4250}
.app-play .pill-mute[aria-pressed=true] span::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 4h3l4-3v10L4 8H1z'/%3E%3Cpath d='M10 3.5l5 5m0-5l-5 5' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 4h3l4-3v10L4 8H1z'/%3E%3Cpath d='M10 3.5l5 5m0-5l-5 5' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E")}
.app-play .grille{display:none}

/* Trainer names overlay: same box as the game canvas, never takes a tap. */
.app-play .game-host canvas.gb-tags{pointer-events:none;transform:none;z-index:1}

/* Narrower than 5:4: the screen at the top, the controls in their own band below it. */
@media not all and (min-aspect-ratio:5/4){
.app-play .console{--gb-pad:clamp(124px,36vmin,160px)}
.app-play .bezel{flex:0 1 auto}
.app-play .screen{flex:0 1 auto;aspect-ratio:4/3;height:auto}
@supports not (aspect-ratio:4/3){.app-play .screen{height:75vw}}
.app-play .controls{position:relative;inset:auto;flex:1 0 auto;min-height:calc(var(--gb-pad) + 72px);margin:0;padding:12px max(18px,env(safe-area-inset-right)) calc(max(8px,env(safe-area-inset-bottom)) + 44px) max(14px,env(safe-area-inset-left));display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:2fr auto 1fr;align-items:center;z-index:2}
.app-play .dpad{grid-column:1;grid-row:2}
.app-play .ab{grid-column:3;grid-row:2}
.app-play .lower{position:absolute;left:50%;right:auto;top:auto;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%)}
}

/* 5:4 and wider: the screen between the D-pad column and the A/B column, START and SOUND under the D-pad. A column is
   as wide as the D-pad or the A/B pair turned 22 degrees (cos .927, sin .375), whichever is wider, plus 8px a side. */
@media (min-aspect-ratio:5/4){
.app-play .console{--gb-pad:clamp(112px,34vh,150px);--gb-round:clamp(56px,9vmin,72px);--gb-ab-gap:12px;--gb-ab-px:10px;--gb-ab-py:8px;--gb-col:max(calc(var(--gb-pad) + 16px),calc((2 * var(--gb-round) + var(--gb-ab-gap) + 2 * var(--gb-ab-px)) * .927 + (var(--gb-round) + 2 * var(--gb-ab-py)) * .375 + 16px));display:grid;grid-template-columns:var(--gb-col) minmax(0,1fr) var(--gb-col);grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center}
.app-play .bezel{grid-column:2;grid-row:1 / 3;align-self:stretch;justify-self:stretch;min-width:0;padding-left:14px;padding-right:14px}
.app-play .controls{display:contents}
.app-play .dpad{grid-column:1;grid-row:1}
.app-play .ab{grid-column:3;grid-row:1;gap:var(--gb-ab-gap);padding:var(--gb-ab-py) var(--gb-ab-px)}
.app-play .round{width:var(--gb-round);height:var(--gb-round)}
.app-play .lower{position:static;grid-column:1;grid-row:2;transform:none;margin:0 0 10px}
}

/* Phones on their side (and other short windows): no console shell, the safe area kept clear. */
@media (orientation:landscape) and (max-height:540px){
.app-play .main.main-play{padding:0}
.app-play .console{padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:0;border-radius:0;background:#0b0d14;box-shadow:none;--gb-ab-gap:8px;--gb-ab-px:6px;--gb-ab-py:5px}
.app-play .bezel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.app-play .bezel-top{display:none}
.app-play .screen{border:0;border-radius:0;box-shadow:none}
.app-play .lower{margin-bottom:6px}
}


/* tools/styles/40-auth.css */
/* Wallet popup (tools/sign-ui.js). The top bar is its own stacking context (z-index 4), so its popup sat under the
   Guide / Pokédex panel (.float-panel, 40). While the popup is open the bar rises to 50: over that panel and the
   trainer card (28), under the market overlay (60). :has() where supported, a class on <html> everywhere. */
.app-play .topbar:has(.signin-pop),.gb-signin-open .app-play .topbar{z-index:50}
.app-play .signin-pop{display:flex;flex-direction:column;gap:8px}
.app-play .signin-pop>*{margin-top:0;margin-bottom:0}

/* The checklist: Wallet / Telegram / This device. */
.gb-steps{list-style:none;margin:0;padding:0 0 8px;display:flex;flex-direction:column;gap:6px;border-bottom:2px solid var(--ink,#1E2233)}
.gb-step{display:flex;align-items:flex-start;gap:8px}
.gb-tick{flex:0 0 auto;width:20px;height:20px;box-sizing:border-box;border:2px solid var(--ink,#1E2233);background:#fff;display:inline-flex;align-items:center;justify-content:center;font:bold 13px/1 var(--mono,ui-monospace,monospace);color:var(--ink,#1E2233)}
.gb-step.done .gb-tick{background:#7BC862}
.gb-step-text{display:flex;flex-direction:column;min-width:0}
.gb-step-text b{font-family:var(--px,monospace);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.gb-step-sub{font-family:var(--serif,Georgia,serif);font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.gb-step:not(.done) .gb-step-sub{color:var(--ink-soft,#454a5e)}

/* A step's box: what to do next, in place. */
.gb-box{display:flex;flex-direction:column;gap:8px;padding:10px;border:2px solid var(--ink,#1E2233);background:#fff}
.gb-box.gb-ask{background:var(--amber-light,#FFE08A)}
.gb-col{display:flex;flex-direction:column;gap:8px}
.gb-row{display:flex;gap:8px}
.app-play .signin-pop .gb-row .btn{width:auto;flex:1 1 0;justify-content:center;padding-left:10px;padding-right:10px}
.app-play .signin-pop a.btn{box-sizing:border-box;justify-content:center}
.gb-lead{margin:0;font-family:var(--serif,Georgia,serif);font-size:15px;line-height:1.4}
.gb-title{margin:0;font-family:var(--px,monospace);font-size:12px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.gb-small{margin:0;font-family:var(--serif,Georgia,serif);font-size:13px;line-height:1.4;text-transform:none;letter-spacing:0}
.gb-warn{color:#8E2A24}
.gb-code{font:15px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;background:var(--paper-hi,#fbf5e3);padding:1px 4px;border:1px solid var(--ink,#1E2233)}
.gb-quiet{align-self:flex-start;background:transparent;border:0;padding:6px 0;margin:0;cursor:pointer;text-decoration:underline;font:13px/1.3 var(--serif,Georgia,serif);color:var(--ink,#1E2233)}
.gb-quiet:disabled{opacity:.6;cursor:default}
.gb-out{align-self:flex-end}
.gb-more summary{cursor:pointer;font:13px/1.4 var(--serif,Georgia,serif)}
.gb-more[open] summary{margin-bottom:6px}
.gb-more .tg-slot{margin-top:6px;min-height:24px}

/* A dot on the Wallet tab: signed in (green), a link code waiting for Telegram (amber), a login link to answer (red). */
.app-play .signin-tab.is-in::after,.app-play .signin-tab.is-wait::after,.app-play .signin-tab.is-ask::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;vertical-align:middle;border:1px solid var(--ink,#1E2233);border-radius:50%;background:#7BC862}
.app-play .signin-tab.is-wait::after{background:var(--amber,#F2A93B)}
.app-play .signin-tab.is-ask::after{background:#C9505A}
@media (max-width:840px){
.app-play .signin-tab.is-in::after,.app-play .signin-tab.is-wait::after,.app-play .signin-tab.is-ask::after{width:5px;height:5px;margin-left:3px}
.app-play .signin-pop{max-height:min(78dvh,640px)}
}


/* tools/styles/50-bank.css */
/* The account screen behind every PC (tools/inject/50-bank.js), in the booklet's paper, ink, amber and teal. */
.bank-overlay{position:fixed;inset:0;z-index:61;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px max(12px,env(safe-area-inset-bottom));background:#0b0d1499;box-sizing:border-box}
.bank-overlay[hidden]{display:none !important}
.bank-sheet{position:relative;width:min(460px,100%);max-height:min(88dvh,720px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:16px 18px 18px;background:var(--paper-hi,#fbf5e3);color:var(--ink,#1e2233);border:3px solid var(--ink,#1e2233);border-radius:8px;box-shadow:inset 0 0 0 3px var(--paper-hi,#fbf5e3),inset 0 0 0 5px var(--ink,#1e2233),4px 4px #1e223340;font-family:var(--serif,Georgia,serif);animation:bank-rise .22s var(--ease,ease-out)}
@keyframes bank-rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.bank-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.bank-kicker{margin:0;font:11px/1 var(--px,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep,#1d7068)}
.bank-title{margin:4px 0 0;font:700 18px/1.1 var(--px,monospace);letter-spacing:.04em;text-transform:uppercase}
.bank-x{font:12px/1 var(--px,monospace);letter-spacing:.06em;text-transform:uppercase;background:var(--ink,#1e2233);color:var(--paper-hi,#fbf5e3);border:0;border-radius:6px;padding:10px 12px;min-height:40px;cursor:pointer}
.bank-who{margin:0 0 12px;font-size:14px;color:var(--ink-soft,#454a5e)}
.bank-mono{font-family:var(--mono,ui-monospace,monospace);font-size:.92em;color:var(--ink,#1e2233)}
.bank-badge{display:inline-block;margin-left:4px;padding:2px 6px;font:10px/1.2 var(--px,monospace);text-transform:uppercase;background:var(--teal-light,#7fd3c6);color:var(--ink,#1e2233);border:2px solid var(--ink,#1e2233);border-radius:4px;vertical-align:1px}
.bank-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.bank-card{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px;background:var(--paper,#f4ebd0);border:2px solid var(--ink,#1e2233);border-radius:6px}
.bank-label{font:11px/1 var(--px,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep,#1d7068)}
.bank-amount{font:700 20px/1.15 var(--px,monospace);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bank-sub{font-size:13px;line-height:1.3;color:var(--ink-soft,#454a5e)}
.bank-sub[data-tone="bad"],.bank-status[data-tone="bad"]{color:#9b3a12}
.bank-status[data-tone="good"]{color:var(--teal-deep,#1d7068)}
.bank-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;border:2px solid var(--ink,#1e2233);border-radius:6px;overflow:hidden}
.bank-tab{min-height:44px;font:13px/1 var(--px,monospace);letter-spacing:.06em;text-transform:uppercase;background:var(--paper-hi,#fbf5e3);color:var(--ink,#1e2233);border:0;cursor:pointer}
.bank-tab+.bank-tab{border-left:2px solid var(--ink,#1e2233)}
.bank-tab[aria-selected="true"]{background:var(--ink,#1e2233);color:var(--paper-hi,#fbf5e3)}
.bank-pane{display:flex;flex-direction:column;gap:10px;margin:0}
.bank-field{display:flex;flex-direction:column;gap:6px;margin:0}
.bank-field>span:first-child{font:11px/1 var(--px,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep,#1d7068)}
.bank-input{display:flex;align-items:stretch;background:#fff;border:2px solid var(--ink,#1e2233);border-radius:6px;overflow:hidden}
.bank-input:focus-within{box-shadow:0 0 0 3px var(--amber-light,#ffe08a)}
.bank-input input{flex:1;min-width:0;padding:10px 12px;font:16px var(--mono,ui-monospace,monospace);color:var(--ink,#1e2233);background:transparent;border:0}
.bank-input input:focus{outline:none}
.bank-mini{min-height:40px;padding:0 12px;font:11px/1 var(--px,monospace);letter-spacing:.06em;text-transform:uppercase;background:var(--paper,#f4ebd0);color:var(--ink,#1e2233);border:0;border-left:2px solid var(--ink,#1e2233);cursor:pointer}
.bank-list .bank-mini{min-height:36px;border:2px solid var(--ink,#1e2233);border-radius:4px}
.bank-go{min-height:48px;padding:0 16px;font:14px/1 var(--px,monospace);letter-spacing:.06em;text-transform:uppercase;background:var(--amber,#f2a93b);color:var(--ink,#1e2233);border:3px solid var(--ink,#1e2233);border-radius:6px;box-shadow:3px 3px 0 var(--ink,#1e2233);cursor:pointer}
.bank-go:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink,#1e2233)}
.bank-go[disabled],.bank-mini[disabled],.bank-input input[disabled]{opacity:.55;cursor:not-allowed}
.bank-x:focus-visible,.bank-go:focus-visible,.bank-mini:focus-visible,.bank-tab:focus-visible,.bank-link:focus-visible{outline:3px solid var(--amber,#f2a93b);outline-offset:2px}
.bank-note{margin:0;font-size:13px;line-height:1.45;color:var(--ink-soft,#454a5e)}
.bank-notice{padding:12px;font-size:15px;line-height:1.45;background:var(--paper,#f4ebd0);border:2px dashed var(--ink,#1e2233);border-radius:6px}
.bank-notice p{margin:0 0 10px}
.bank-notice p:last-child{margin:0}
.bank-notice .bank-go{width:100%}
.bank-steps{display:flex;gap:6px;margin:12px 0 0;padding:0;list-style:none;font:11px/1 var(--px,monospace);letter-spacing:.06em;text-transform:uppercase}
.bank-steps[hidden]{display:none}
.bank-step{flex:1;display:flex;align-items:center;gap:6px;min-width:0;padding:8px;background:var(--paper-hi,#fbf5e3);border:2px solid var(--ink,#1e2233);border-radius:4px}
.bank-step-dot{flex:none;width:8px;height:8px;border:2px solid var(--ink,#1e2233);border-radius:50%}
.bank-step-done .bank-step-dot{background:var(--teal,#2fa39a)}
.bank-step-now{background:var(--amber-light,#ffe08a)}
.bank-step-now .bank-step-dot{background:var(--amber,#f2a93b);animation:bank-blink 1s steps(2) infinite}
@keyframes bank-blink{50%{opacity:.2}}
.bank-status{min-height:1.4em;margin:10px 0 0;font-size:14px;line-height:1.4}
.bank-section{margin-top:16px}
.bank-section[hidden]{display:none}
.bank-section h3{margin:0 0 6px;font:11px/1 var(--px,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep,#1d7068)}
.bank-list{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink,#1e2233)}
.bank-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main end" "sub end";column-gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #1e223333}
.bank-row-main{grid-area:main;font-size:14px}
.bank-row-sub{grid-area:sub;font-size:12px;color:var(--ink-soft,#454a5e)}
.bank-row-amt,.bank-row .bank-mini{grid-area:end}
.bank-row-amt{font:13px/1 var(--px,monospace);font-variant-numeric:tabular-nums;white-space:nowrap}
.bank-row-amt[data-sign="1"]{color:var(--teal-deep,#1d7068)}
.bank-row-amt[data-sign="-1"]{color:#9b3a12}
.bank-link{margin-left:4px;font:11px var(--mono,ui-monospace,monospace);color:var(--slate,#34406b)}
.bank-empty{padding:10px 0;font-size:13px;color:var(--ink-soft,#454a5e)}
.bank-foot{margin:14px 0 0;font-size:12px;line-height:1.4;color:var(--ink-soft,#454a5e)}
html.bank-open{overflow:hidden}
@media (max-width:420px){.bank-overlay{padding:0}.bank-sheet{width:100%;max-height:92dvh;border-radius:10px 10px 0 0;padding:14px 16px max(16px,env(safe-area-inset-bottom))}.bank-cards{grid-template-columns:1fr}.bank-amount{font-size:18px}.bank-steps{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.bank-sheet,.bank-step-now .bank-step-dot{animation:none}}


/* tools/styles/60-world.css */
/* Wardrobe (tools/wardrobe.js): name and look as a sheet over the page, in the site's cream paper and navy ink, with
   Silkscreen headings and amber actions like the market. Every look is a card with its trainer walking in it; the
   stage shows the chosen look turning round. On a phone the sheet rises from the bottom edge: 44px targets, a 16px
   name field (no zoom on focus), the safe area kept clear. The sheet sits on <body>, above the game and its controls. */

.wardrobe-panel{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(11,13,20,.62)}
.wardrobe-sheet{position:relative;display:flex;flex-direction:column;width:min(520px,100%);max-height:min(88vh,720px);max-height:min(88dvh,720px);box-sizing:border-box;overflow:hidden;background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;border-radius:10px;box-shadow:6px 6px 0 rgba(11,13,20,.45);font-family:var(--serif,"Literata",Georgia,serif);text-align:left}

.wardrobe-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 8px 6px 16px;box-sizing:border-box;background:#1E2233;color:#F7F4EA}
.wardrobe-title{margin:0;font:16px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.1em;text-transform:uppercase;color:#F7F4EA}
.wardrobe-x{min-width:44px;min-height:44px;margin:0;padding:0 14px;box-sizing:border-box;background:#F2A93B;color:#1E2233;border:0;border-radius:6px;box-shadow:inset 0 -3px 0 rgba(11,13,20,.25);font:12px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.wardrobe-x:hover{background:#FFE08A}
.wardrobe-x:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}

.wardrobe-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#1E2233 transparent;padding:16px 16px 10px}
.wardrobe-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin:0 0 16px}
.wardrobe-stage{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
.wardrobe-preview{display:block;width:96px;height:96px;box-sizing:border-box;image-rendering:pixelated;image-rendering:crisp-edges;background:linear-gradient(#FBF5E4 0 68%,#DDB883 68% 72%,#C9A36B 72%);border:3px solid #1E2233;border-radius:8px}
.wardrobe-stage-name{font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase}
.wardrobe-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.wardrobe-h{margin:0;font:11px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.12em;text-transform:uppercase;color:#1D7068}
.wardrobe-input{display:block;width:100%;min-height:44px;margin:0;padding:0 12px;box-sizing:border-box;background:#fff;color:#1E2233;border:3px solid #1E2233;border-radius:6px;font:16px/1.2 var(--mono,ui-monospace,monospace)}
.wardrobe-input::placeholder{color:#8A8D99;opacity:1}
.wardrobe-input:focus-visible{outline:3px solid #F2A93B;outline-offset:1px}
.wardrobe-count{align-self:flex-end;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;color:#454A5E}

.wardrobe-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:10px 0 18px}
.wardrobe-look{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:96px;margin:0;padding:8px 6px 10px;box-sizing:border-box;background:#FFFDF7;color:#1E2233;border:3px solid #1E2233;border-radius:8px;box-shadow:3px 3px 0 rgba(30,34,51,.16);font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.wardrobe-look:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(30,34,51,.24)}
.wardrobe-look.on{background:#FFE08A;box-shadow:3px 3px 0 #1E2233}
.wardrobe-look.on::after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;box-sizing:border-box;background:#F2A93B;border:2px solid #1E2233;border-radius:50%}
.wardrobe-mini{display:block;width:48px;height:48px;image-rendering:pixelated;image-rendering:crisp-edges}
.wardrobe-look:focus-visible{outline:3px solid #1E2233;outline-offset:2px}

.wardrobe-pfp{display:flex;flex-direction:column;gap:8px;margin:0 0 6px;padding-top:14px;border-top:3px dashed rgba(30,34,51,.28)}
.wardrobe-note{margin:0;font-size:14px;line-height:1.45;color:#454A5E}
.wardrobe-pfp-row{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr) auto;gap:8px;align-items:center}

.wardrobe-hint{flex:0 0 auto;margin:0;padding:8px 16px;font-size:13px;line-height:1.4;color:#454A5E;border-top:2px solid rgba(30,34,51,.12)}
.wardrobe-hint:empty{display:none}
.wardrobe-actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:10px;padding:12px 16px 14px;background:#FBF5E3;border-top:3px solid #1E2233}
.wardrobe-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0 18px;box-sizing:border-box;background:#FBF5E3;color:#1E2233;border:3px solid #1E2233;border-radius:6px;box-shadow:3px 3px 0 #1E2233;font:13px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.wardrobe-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #1E2233}
.wardrobe-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1E2233}
.wardrobe-btn:focus-visible{outline:3px solid #1E2233;outline-offset:2px}
.wardrobe-save{min-width:128px;background:#F2A93B}
.wardrobe-cancel,.wardrobe-cancel:hover,.wardrobe-cancel:active{background:transparent;box-shadow:none;transform:none}
.wardrobe-cancel:hover{background:rgba(242,140,140,.28)}

@media (max-width:640px){
.wardrobe-panel{align-items:flex-end;padding:0}
.wardrobe-sheet{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-width:3px 0 0;border-radius:14px 14px 0 0;box-shadow:0 -4px 0 rgba(11,13,20,.3)}
.wardrobe-bar{padding-top:12px}
.wardrobe-bar::before{content:"";position:absolute;top:5px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:rgba(247,244,234,.45)}
.wardrobe-body{padding:14px 12px 8px}
.wardrobe-top{gap:12px}
.wardrobe-preview{width:76px;height:76px}
.wardrobe-looks{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wardrobe-look{min-height:88px;padding:8px 2px 10px;font-size:10px;letter-spacing:.02em}
.wardrobe-mini{width:44px;height:44px}
.wardrobe-pfp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wardrobe-pfp-row .wardrobe-btn{grid-column:1/-1}
.wardrobe-actions{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
.wardrobe-actions .wardrobe-btn{flex:1 1 0}
}
@media (max-width:359px){.wardrobe-looks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.wardrobe-look,.wardrobe-btn{transition:none}}


/* tools/styles/80-ranks.css */
/* Ranks (tools/inject/80-ranks.js): the leaderboards, trainer cards, achievement toasts and the Wallet popup's Ranks
   strip. Cream paper, navy ink, amber accents, 3px ink rules and Silkscreen headings, like the Market and the booklet.
   Layers: the boards 62 and a card 64 (over the Market's 60), toasts 66. On a phone each layer rises from the bottom
   edge with 44px targets and the safe area kept clear. */

/* ---- Layers ---- */
.rk-overlay{position:fixed;inset:0;z-index:62;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(11,13,20,.62)}
.rk-overlay[hidden]{display:none !important}
.rk-card-layer{z-index:64;background:rgba(11,13,20,.5)}
.rk-sheet{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:min(86vh,760px);max-height:min(86dvh,760px);box-sizing:border-box;overflow:hidden;background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;border-radius:10px;box-shadow:6px 6px 0 rgba(11,13,20,.45);font-family:var(--serif,"Literata",Georgia,serif);text-align:left}
.rk-board{height:min(86vh,760px);height:min(86dvh,760px)}
.rk-card{width:min(520px,100%)}
.rk-sheet:focus{outline:none}
.rk-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 8px 6px 16px;box-sizing:border-box;background:#1E2233;color:#F7F4EA}
.rk-title{margin:0;font:16px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.1em;text-transform:uppercase;color:#F7F4EA}
.rk-x{min-width:44px;min-height:44px;margin:0;padding:0 14px;box-sizing:border-box;background:#F2A93B;color:#1E2233;border:0;border-radius:6px;box-shadow:inset 0 -3px 0 rgba(11,13,20,.25);font:12px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rk-x:hover{background:#FFE08A}
.rk-x:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.rk-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#1E2233 transparent;padding:12px 16px 18px}
.rk-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0;padding:10px 16px;box-sizing:border-box;background:#FBF5E3;border-top:3px solid #1E2233}
.rk-foot[hidden]{display:none}
.rk-foot-text{margin:0;font-size:14px;line-height:1.4}
.rk-foot-acts{display:flex;gap:8px;margin-left:auto}
.rk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rk-sheet :focus-visible{outline:3px solid #1E2233;outline-offset:2px}

/* ---- Buttons ---- */
.rk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;margin:0;padding:0 16px;box-sizing:border-box;background:#FBF5E3;color:#1E2233;border:3px solid #1E2233;border-radius:6px;box-shadow:3px 3px 0 #1E2233;font:12px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.rk-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #1E2233}
.rk-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1E2233}
.rk-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:3px 3px 0 #1E2233}
.rk-btn-small{min-height:36px;padding:0 12px;font-size:11px;box-shadow:2px 2px 0 #1E2233}
.rk-btn-go{background:#F2A93B}

/* ---- Boards ---- */
.rk-tabs{display:flex;gap:6px;margin:0 -16px 10px;padding:2px 16px 6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.rk-tabs::-webkit-scrollbar{display:none}
.rk-tab{flex:none;min-height:36px;margin:0;padding:0 12px;box-sizing:border-box;background:#FBF5E3;color:#1E2233;border:2px solid #1E2233;border-radius:6px;box-shadow:2px 2px 0 #1E2233;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rk-tab:hover{background:#FFE08A}
.rk-tab.on{background:#F2A93B;transform:translate(1px,1px);box-shadow:1px 1px 0 #1E2233}
.rk-lede{margin:0 0 10px;font-size:14px;line-height:1.45;color:#454A5E}
.rk-note{margin:0 0 10px;font-size:13px;line-height:1.4;color:#454A5E}
.rk-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:6px 6px 6px 12px;background:rgba(242,140,140,.22);border-left:4px solid #F28C8C;font-size:14px;line-height:1.4}
.rk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rk-row{display:grid;grid-template-columns:34px 36px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:54px;margin:0;padding:7px 10px 7px 8px;box-sizing:border-box;background:#FFFDF7;color:#1E2233;border:2px solid #1E2233;border-radius:8px;box-shadow:2px 2px 0 rgba(30,34,51,.18);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rk-row:hover{background:#FFF6D6}
.rk-row.rk-lit{background:#FFE08A;box-shadow:3px 3px 0 #1E2233}
.rk-rank{display:grid;place-items:center;min-width:30px;height:28px;padding:0 4px;box-sizing:border-box;background:#E9DCB6;border:2px solid #1E2233;border-radius:6px;font:12px/1 var(--px,"Silkscreen","Courier New",monospace)}
.rk-top-1{background:#F2A93B}
.rk-top-2{background:#7FD3C6}
.rk-top-3{background:#F28C8C}
.rk-av{display:block;width:32px;height:32px;box-sizing:border-box;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;background:#E9DCB6;border:2px solid #1E2233;border-radius:6px}
.rk-av-pfp{object-fit:cover;image-rendering:auto}
.rk-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.rk-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:13px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.03em}
.rk-addr{font:11px/1.2 var(--mono,ui-monospace,monospace);color:#454A5E}
.rk-you{display:inline-block;margin-left:4px;padding:2px 4px 1px;vertical-align:1px;background:#1E2233;color:#FFE08A;border-radius:3px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.rk-val{display:flex;align-items:center;gap:6px;justify-self:end;text-align:right}
.rk-val-text{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.rk-label{white-space:nowrap;font:13px/1.1 var(--px,"Silkscreen","Courier New",monospace)}
.rk-detail{white-space:nowrap;font-size:12px;line-height:1.2;color:#454A5E}
.rk-mon{width:32px;height:32px;image-rendering:pixelated;image-rendering:crisp-edges}
.rk-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 0}
.rk-page{font:12px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em}
.rk-state{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 0;padding:22px 16px;text-align:center;border:3px dashed rgba(30,34,51,.3);border-radius:8px}
.rk-state-title{margin:0;font:13px/1.3 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase}
.rk-state-text{margin:0;max-width:32em;font-size:14px;line-height:1.5;color:#454A5E}
.rk-state-err{border:3px solid #1E2233;background:rgba(242,140,140,.2)}
.rk-state-off{background:rgba(233,220,182,.5)}
.rk-skel{height:54px;box-sizing:border-box;border:2px solid rgba(30,34,51,.16);border-radius:8px;background:linear-gradient(rgba(30,34,51,.1),rgba(30,34,51,.1)) 10px 13px/28px 28px no-repeat,linear-gradient(rgba(30,34,51,.1),rgba(30,34,51,.1)) 52px 12px/32px 32px no-repeat,linear-gradient(rgba(30,34,51,.1),rgba(30,34,51,.1)) 96px 14px/34% 11px no-repeat,linear-gradient(rgba(30,34,51,.07),rgba(30,34,51,.07)) 96px 31px/22% 9px no-repeat,#FFFDF7;animation:rk-blink 1.1s steps(2,end) infinite}
@keyframes rk-blink{50%{opacity:.55}}

/* ---- Trainer card ---- */
.rk-id{display:flex;align-items:center;gap:12px;padding:2px 0 12px;border-bottom:3px dashed rgba(30,34,51,.28)}
.rk-id .rk-av{width:56px;height:56px;border-width:3px;border-radius:8px}
.rk-id-text{min-width:0}
.rk-card-name{margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:20px/1.1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.02em}
.rk-card-meta{margin:0;font-size:13px;line-height:1.45;color:#454A5E}
.rk-online{white-space:nowrap;color:#1D7068}
.rk-online::before{content:"";display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:0;background:#7BC862;border:1px solid #1E2233;border-radius:50%}
.rk-sec{margin-top:14px}
.rk-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:12px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.12em;text-transform:uppercase;color:#1D7068}
.rk-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;background:#1E2233;color:#F7F4EA;border-radius:11px;font-size:11px;letter-spacing:0}
.rk-badges{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;padding:6px;background:#1E2233;border-radius:8px}
.rk-badge{display:grid;place-items:center;aspect-ratio:1;min-height:30px;background:#2A3050;border-radius:6px}
.rk-badge svg{display:block;width:72%;height:auto;max-width:30px;opacity:.16;filter:grayscale(1) brightness(1.6)}
.rk-badge.on{background:#3A4470;box-shadow:inset 0 0 0 1px #FFE08A66}
.rk-badge.on svg{opacity:1;filter:drop-shadow(0 1px 0 #0b0d14)}
.rk-league-line{margin:8px 0 0;font-size:14px;line-height:1.4}
.rk-champ{font:13px/1.3 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em;color:#C46A1B}
.rk-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.rk-stat{display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 10px;background:#FFFDF7;border:2px solid #1E2233;border-radius:8px}
.rk-stat-label{font:10px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase;color:#454A5E}
.rk-stat-value{font:18px/1.1 var(--px,"Silkscreen","Courier New",monospace)}
.rk-stat-value small{font-size:11px;color:#454A5E}
.rk-stat-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.3;color:#454A5E}
.rk-chips{display:flex;flex-wrap:wrap;gap:6px}
.rk-chip{min-height:32px;margin:0;padding:0 10px;background:#7FD3C6;color:#1E2233;border:2px solid #1E2233;border-radius:999px;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rk-chip:hover{background:#FFE08A}
.rk-party{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rk-pmon{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 4px;background:#E9DCB6;border:2px solid #1E2233;border-radius:8px}
.rk-pmon img{width:48px;height:48px;image-rendering:pixelated;image-rendering:crisp-edges}
.rk-pmon-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px/1.2 var(--px,"Silkscreen","Courier New",monospace)}
.rk-pmon-lv{font-size:12px;line-height:1.2;color:#454A5E}
.rk-emblem{color:#C46A1B}
.rk-quiet{margin:0;font-size:14px;color:#454A5E}
.rk-achs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.rk-ach{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;background:#FFFDF7;border:2px solid #1E2233;border-radius:8px}
.rk-ach-icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border:2px solid #1E2233;border-radius:6px;background:#FFE08A;color:#C46A1B}
.rk-ach[data-group="Pokédex"] .rk-ach-icon{background:#F8D8D2;color:#C9505A}
.rk-ach[data-group="Trainers"] .rk-ach-icon{background:#D5EEE8;color:#1D7068}
.rk-ach[data-group="Pokémon"] .rk-ach-icon{background:#DCE1F5;color:#34406B}
.rk-ach[data-group="Battles"] .rk-ach-icon{background:#E9DDF5;color:#6A4A9A}
.rk-ach-text{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name when" "what what";align-items:baseline;gap:2px 8px;min-width:0}
.rk-ach-name{grid-area:name;min-width:0;font:11px/1.25 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em;text-transform:uppercase}
.rk-ach-what{grid-area:what;font-size:13px;line-height:1.35}
.rk-ach-when{grid-area:when;white-space:nowrap;font:11px/1.2 var(--mono,ui-monospace,monospace);color:#454A5E}
.rk-ach:not(.on){background:transparent;border-style:dashed;border-color:rgba(30,34,51,.45)}
.rk-ach:not(.on) .rk-ach-icon{background:#E9DCB6;color:#8A8D99;border-color:rgba(30,34,51,.45)}
.rk-ach:not(.on) .rk-ach-what{color:#454A5E}
.rk-more{margin-top:8px}
.rk-more summary{display:list-item;min-height:36px;padding:8px 0 4px;box-sizing:border-box;cursor:pointer;font:11px/1.4 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;color:#1D7068}
.rk-more[open] summary{margin-bottom:6px}
.rk-own{margin:16px 0 0;padding:10px 12px 12px;border:2px dashed #1E2233;border-radius:8px;background:#FBF5E3}
.rk-own legend{padding:0 6px;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase}
.rk-check{display:flex;align-items:flex-start;gap:10px;min-height:36px;padding:6px 0;font-size:14px;line-height:1.4;cursor:pointer}
.rk-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#F2A93B;cursor:pointer}
.rk-own .rk-note{margin:6px 0 0}
.rk-card-skel{height:280px;border:3px solid rgba(30,34,51,.12);border-radius:8px;background:linear-gradient(rgba(30,34,51,.1),rgba(30,34,51,.1)) 12px 12px/56px 56px no-repeat,linear-gradient(rgba(30,34,51,.1),rgba(30,34,51,.1)) 80px 18px/40% 16px no-repeat,linear-gradient(rgba(30,34,51,.07),rgba(30,34,51,.07)) 80px 44px/30% 11px no-repeat,linear-gradient(rgba(30,34,51,.12),rgba(30,34,51,.12)) 12px 88px/calc(100% - 24px) 44px no-repeat,#FFFDF7;animation:rk-blink 1.1s steps(2,end) infinite}

/* ---- Toasts: one at a time, under the top bar, never over the controls. ---- */
.rk-toasts{position:fixed;top:64px;left:50%;z-index:66;width:min(380px,calc(100vw - 24px));transform:translateX(-50%);pointer-events:none}
.rk-toast{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 6px 8px 8px;background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;border-radius:10px;box-shadow:4px 4px 0 rgba(11,13,20,.45);pointer-events:auto;animation:rk-toast-in .22s ease-out}
@keyframes rk-toast-in{from{opacity:0;transform:translateY(-10px)}}
.rk-toast-icon{display:grid;place-items:center;width:34px;height:34px;box-sizing:border-box;background:#F2A93B;border:2px solid #1E2233;border-radius:8px;color:#1E2233}
.rk-toast-icon svg{width:20px;height:20px}
.rk-toast-text{min-width:0}
.rk-toast-text p{margin:0}
.rk-toast-kicker{font:10px/1.3 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase;color:#1D7068}
.rk-toast-title{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;font:13px/1.3 var(--px,"Silkscreen","Courier New",monospace)}
.rk-toast-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.35;color:#454A5E}
.rk-toast-acts{display:flex;align-items:center;gap:2px}
.rk-toast-view{min-height:36px;margin:0;padding:0 10px;background:#FFE08A;color:#1E2233;border:2px solid #1E2233;border-radius:6px;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.rk-toast-x{min-width:36px;min-height:36px;margin:0;padding:0;background:transparent;color:#1E2233;border:0;border-radius:6px;font:22px/1 var(--serif,Georgia,serif);cursor:pointer;touch-action:manipulation}
.rk-toast-x:hover,.rk-toast-view:hover{background:#FFF6D6}
.rk-toast button:focus-visible{outline:3px solid #1E2233;outline-offset:1px}

/* ---- The Wallet popup's Ranks strip ---- */
.rk-strip{display:flex;gap:6px}
.rk-strip-btn{flex:1 1 0;min-width:0;min-height:40px;margin:0;padding:0 8px;box-sizing:border-box;background:#FFE08A;color:#1E2233;border:2px solid #1E2233;border-radius:6px;box-shadow:2px 2px 0 #1E2233;font:11px/1.1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rk-strip-btn:hover{background:#F2A93B}
.rk-strip-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #1E2233}
.app-play .signin-pop:has(.gb-ask) .rk-strip{display:none}

/* ---- Wider screens: every board tab in view (two rows if need be), no sideways scrolling. ---- */
@media (min-width:641px){
.rk-board{width:min(640px,100%)}
.rk-tabs{flex-wrap:wrap;overflow:visible;padding-bottom:4px}
.rk-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.rk-party{grid-template-columns:repeat(6,minmax(0,1fr))}
.rk-achs{grid-template-columns:repeat(2,minmax(0,1fr))}
.rk-card{width:min(640px,100%)}
}

/* ---- Phones: each layer is a sheet from the bottom edge. ---- */
@media (max-width:640px){
.rk-overlay{align-items:flex-end;padding:0}
.rk-sheet{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-width:3px 0 0;border-radius:14px 14px 0 0;box-shadow:0 -4px 0 rgba(11,13,20,.3);padding-bottom:env(safe-area-inset-bottom)}
.rk-board{height:calc(100vh - 24px);height:calc(100dvh - 24px)}
.rk-card-layer .rk-sheet{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
.rk-bar{padding-top:14px}
.rk-bar::before{content:"";position:absolute;top:5px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:rgba(247,244,234,.45)}
.rk-body{padding:10px 12px 16px}
.rk-tabs{margin:0 -12px 8px;padding:2px 12px 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.rk-row{grid-template-columns:30px 32px minmax(0,1fr) auto;gap:8px;padding:6px 8px 6px 6px}
.rk-foot{padding:8px 12px}
.rk-toasts{top:52px}
.rk-toast{padding:6px 4px 6px 6px;gap:8px}
.rk-toast-sub{display:none}
}
@media (max-width:380px){
.rk-val .rk-mon{display:none}
.rk-label{font-size:12px}
.rk-badges{gap:3px;padding:5px}
}
@media (pointer:coarse){.rk-btn-small,.rk-tab{min-height:40px}}
@media (prefers-reduced-motion:reduce){.rk-btn,.rk-toast{transition:none;animation:none}.rk-skel,.rk-card-skel{animation:none}}


/* tools/styles/90-app.css */
/* The game on phones (tools/inject/90-app.js): the Telegram Mini App, the add-to-home-screen hint and the sound hint.
   Appended last by build-web.mjs, so it overrides PLAY_CSS and the other feature sheets. */

/* Inside Telegram (html.gb-tg, from the head boot script): the page is as tall as Telegram's stable viewport, never
   scrolls or bounces under the game, and keeps clear of Telegram's buttons and the device's safe areas as Telegram
   reports them (its script sets the --tg-* variables). Sides and bottom subtract env(), which the play layout already
   pads where the browser reports it. The strip under the console stays the console's dark, and so does anything below
   the page while Telegram's view is still growing. */
html.gb-tg,html.gb-tg body{height:var(--tg-viewport-stable-height,100%);overflow:hidden;overscroll-behavior:none}
html.gb-tg{background:var(--screen,#0b0d14)}
html.gb-tg body{min-height:0;background:var(--kraft,#DDCC9E)}
html.gb-tg{--gb-tg-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));--gb-tg-bottom:calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px));--gb-tg-under:max(0px,calc(var(--gb-tg-bottom) - env(safe-area-inset-bottom,0px)))}
html.gb-tg #root{height:var(--tg-viewport-stable-height,100dvh);box-sizing:border-box;padding:var(--gb-tg-top) max(0px,calc(var(--tg-safe-area-inset-right,0px) + var(--tg-content-safe-area-inset-right,0px) - env(safe-area-inset-right,0px))) var(--gb-tg-under) max(0px,calc(var(--tg-safe-area-inset-left,0px) + var(--tg-content-safe-area-inset-left,0px) - env(safe-area-inset-left,0px)));background:linear-gradient(to top,var(--screen,#0b0d14) var(--gb-tg-under),transparent var(--gb-tg-under))}
html.gb-tg .market-open{top:var(--gb-tg-top)}
html.gb-tg .market-overlay,html.gb-tg .bank-overlay,html.gb-tg .rk-overlay,html.gb-tg .trainer-overlay{top:var(--gb-tg-top);bottom:var(--gb-tg-bottom)}

/* The Mini App's screen over the game: connect the wallet first, open the game again, or try again. */
.gb-tg-screen{position:fixed;left:0;right:0;top:0;height:var(--tg-viewport-stable-height,100%);z-index:90;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--gb-tg-top,0px)) 16px calc(16px + var(--gb-tg-bottom,0px));box-sizing:border-box;overflow:auto;background:rgba(11,13,20,.86)}
.gb-tg-card{width:min(380px,100%);margin:auto;display:flex;flex-direction:column;gap:12px;padding:18px 16px 12px;box-sizing:border-box;background:#F4EBD0;color:#1E2233;border:3px solid #1E2233;border-radius:10px;box-shadow:4px 4px 0 rgba(11,13,20,.5)}
.gb-tg-title{margin:0;font:15px/1.3 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase}
.gb-tg-lead{margin:0;font:16px/1.45 var(--serif,"Literata",Georgia,serif)}
.gb-tg-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px;font:15px/1.4 var(--serif,"Literata",Georgia,serif)}
.gb-tg-actions{display:flex;flex-direction:column;gap:8px}
.gb-tg-actions .btn{width:100%;justify-content:center;box-sizing:border-box}
.gb-tg-small,.gb-tg-note{margin:0;font:13px/1.4 var(--serif,"Literata",Georgia,serif)}
.gb-tg-note{color:#8E2A24}
.gb-tg-note:empty{display:none}
.gb-tg-guest{align-self:center;min-height:40px}

/* In the market and the PC account inside Telegram: their actions are signed by the wallet, in the browser. */
.gb-tg-wallet{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:10px;border:2px solid #1E2233;border-radius:6px;background:#FFE08A;color:#1E2233}
.gb-tg-wallet .gb-tg-small{font-size:14px}
.bank-sheet .gb-tg-wallet{margin:10px 0}

/* Add to home screen: a card floating in the band under the game screen (position: fixed, so the page never moves),
   never over the game or the controls until the player asks for the steps. */
.gb-a2hs{position:fixed;left:12px;right:12px;z-index:20;max-width:420px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;padding:10px 12px;box-sizing:border-box;background:#F7F4EA;color:#1E2233;border:2px solid #1E2233;border-radius:8px;box-shadow:0 3px 0 rgba(0,0,0,.35);animation:gb-rise .25s ease-out}
.gb-a2hs[hidden]{display:none}
.gb-a2hs-icon{width:36px;height:36px;border-radius:6px;image-rendering:pixelated;image-rendering:crisp-edges}
.gb-a2hs-text{margin:0;font:14px/1.35 var(--serif,"Literata",Georgia,serif)}
.gb-a2hs-steps{grid-column:1 / -1;margin:0;padding-left:22px;display:flex;flex-direction:column;gap:2px;font:14px/1.4 var(--serif,"Literata",Georgia,serif)}
.gb-a2hs.is-steps{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.gb-a2hs.is-steps .gb-a2hs-text{grid-column:1 / -1}
.gb-a2hs.is-steps .gb-a2hs-steps{grid-column:1}
.gb-a2hs.is-steps .gb-a2hs-actions{grid-column:2}
.gb-a2hs-share{display:inline-block;width:16px;height:18px;vertical-align:-3px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M8 1v10M4.5 4.5 8 1l3.5 3.5' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 7H2.5v9.5h11V7H11' stroke='%23000' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M8 1v10M4.5 4.5 8 1l3.5 3.5' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 7H2.5v9.5h11V7H11' stroke='%23000' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.gb-a2hs-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:8px}
.gb-a2hs-go,.gb-a2hs-later{min-height:40px;padding:8px 16px;border:2px solid #1E2233;border-radius:6px;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.gb-a2hs-go{background:#F2A93B;color:#1E2233;box-shadow:0 2px 0 #1E2233}
.gb-a2hs-later{background:transparent;color:#1E2233;border-color:transparent}
@keyframes gb-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Sound starts muted. Until the player chooses, a bubble on the SOUND pill says how to turn it on; tapping the bubble
   is tapping the pill. */
.gb-sound-hint .app-play .pill-mute{position:relative}
.gb-sound-hint .app-play .pill-mute::after{content:"Tap for sound";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);white-space:nowrap;padding:5px 8px;background:#FFE08A;color:#1E2233;border:2px solid #1E2233;border-radius:6px;box-shadow:0 2px 0 #1E2233;font:9px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase;animation:gb-nudge 1.4s ease-in-out infinite}
@keyframes gb-nudge{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.gb-a2hs,.gb-sound-hint .app-play .pill-mute::after{animation:none}}


/* tools/styles/95-tutorial.css */
/* Tutorial tips and the Settings sheet (tools/inject/95-tutorial.js). Cream paper, navy ink, amber accents, 3px ink
   rules and Silkscreen labels like the rest of the site. Touch screens get 44px targets, and the safe area stays clear:
   the tip is kept inside it by the script, the sheet pads for it. */

.gb-sr{position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gb-safe-probe{position:fixed;top:0;left:0;width:0;height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);visibility:hidden;pointer-events:none}

/* -- the tip ------------------------------------------------------------------------------------------------------ */

/* Over the console and the top bar (z 8 and 4). It is hidden while a panel, the Market, the Wallet popup or the
   Settings sheet is open, so it never has to sit over those. */
/* Label, "Skip tutorial" and the close box on the first line, the tip under them. A narrow card (is-narrow, set by the
   script) moves "Skip tutorial" under the tip. */
.gb-coach{position:fixed;z-index:45;top:0;left:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"kick skip x" "text text text";align-items:center;box-sizing:border-box;width:300px;max-width:calc(100vw - 16px);margin:0;padding:0 0 10px 13px;background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;border-radius:8px;box-shadow:4px 4px 0 rgba(11,13,20,.35);font-family:var(--serif,"Literata",Georgia,serif);text-align:left;-webkit-tap-highlight-color:transparent;animation:gb-coach-in .24s cubic-bezier(.22,.8,.28,1) both}
.gb-coach.is-narrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kick x" "text text" "skip skip";padding-bottom:0}
.gb-coach[hidden]{display:none !important}
.gb-coach.is-measuring{visibility:hidden}
@keyframes gb-coach-in{from{opacity:0;transform:translateY(6px)}}
@keyframes gb-coach-out{to{opacity:0;transform:translateY(-4px)}}

.gb-coach-kick{grid-area:kick;display:flex;align-items:center;gap:6px;min-width:0;min-height:36px;margin:0;overflow:hidden;font:10px/1.3 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.12em;text-transform:uppercase;color:#C46A1B;white-space:nowrap}
.gb-coach-kick::before{content:"";flex:0 0 auto;width:8px;height:8px;box-sizing:border-box;background:#F2A93B;border:2px solid #1E2233;border-radius:50%}
.gb-coach-skip{grid-area:skip;min-height:36px;margin:0;padding:0 6px;background:transparent;border:0;color:#454A5E;font:9px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.gb-coach.is-narrow .gb-coach-skip{justify-self:start;margin-left:-6px}
.gb-coach-skip:hover{color:#1E2233}
.gb-coach-x{grid-area:x;display:grid;place-items:center;width:38px;height:36px;margin:0;padding:0;background:transparent;border:0;color:#1E2233;cursor:pointer;touch-action:manipulation}
.gb-coach-x span{position:relative;display:block;width:22px;height:22px;box-sizing:border-box;background:#FBF5E3;border:2px solid #1E2233;border-radius:5px}
.gb-coach-x span::before,.gb-coach-x span::after{content:"";position:absolute;left:3px;top:8px;width:12px;height:2px;background:currentColor;transform:rotate(45deg)}
.gb-coach-x span::after{transform:rotate(-45deg)}
.gb-coach-x:hover span{background:#FFE08A}
.gb-coach-text{grid-area:text;margin:0;padding-right:13px;font-size:15px;line-height:1.38;overflow-wrap:break-word}
.gb-coach-text b{font:400 11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase}
.gb-coach kbd{display:inline-block;min-width:20px;margin:0 1px;padding:3px 5px 2px;box-sizing:border-box;background:#fff;color:#1E2233;border:2px solid #1E2233;border-bottom-width:3px;border-radius:4px;font:10px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em;text-align:center;text-transform:uppercase;vertical-align:1px;white-space:nowrap}

/* The ring over the control the tip is about: amber on an ink line, so it shows on the dark console and on paper. */
.gb-coach-ring{position:fixed;z-index:44;box-sizing:border-box;border:3px solid #F2A93B;box-shadow:0 0 0 2px #1E2233,0 0 14px 2px rgba(242,169,59,.75);pointer-events:none;animation:gb-ring 1.6s ease-in-out infinite}
.gb-coach-ring[hidden]{display:none !important}
.gb-coach-ring[data-shape=round]{border-radius:50%}
.gb-coach-ring[data-shape=pill]{border-radius:16px}
.gb-coach-ring[data-shape=tab]{border-radius:0 0 10px 10px}
@keyframes gb-ring{50%{box-shadow:0 0 0 2px #1E2233,0 0 4px 0 rgba(242,169,59,.35)}}

/* The pointer: a square turned 45 degrees, centred on the card's edge at --gb-ax / --gb-ay, so its paper covers the
   border there and its two inked sides carry the outline out to a point. data-at is where the card sits. */
.gb-coach-arrow{position:absolute;display:none;width:12px;height:12px;background:#F7F4EA;border:solid #1E2233;border-width:0 3px 3px 0;pointer-events:none}
.gb-coach[data-at=above] .gb-coach-arrow{display:block;top:calc(100% + 1.5px);left:var(--gb-ax,50%);transform:translate(-50%,-50%) rotate(45deg)}
.gb-coach[data-at=below] .gb-coach-arrow{display:block;top:-1.5px;left:var(--gb-ax,50%);transform:translate(-50%,-50%) rotate(225deg)}
.gb-coach[data-at=left] .gb-coach-arrow{display:block;left:calc(100% + 1.5px);top:var(--gb-ay,50%);transform:translate(-50%,-50%) rotate(-45deg)}
.gb-coach[data-at=right] .gb-coach-arrow{display:block;left:-1.5px;top:var(--gb-ay,50%);transform:translate(-50%,-50%) rotate(135deg)}

/* Done: a green dot and a teal rule for a moment, then it fades. Tips off: the way back, then it fades. */
.gb-coach.is-done{border-color:#1D7068;animation:gb-coach-out .22s ease .66s both}
.gb-coach.is-done .gb-coach-arrow{border-color:#1D7068}
.gb-coach.is-done .gb-coach-kick{color:#1D7068}
.gb-coach.is-done .gb-coach-kick::before{background:#7BC862}
.gb-coach.is-done .gb-coach-text{opacity:.6}
.gb-coach.is-off{animation:gb-coach-out .22s ease 2.36s both}
.gb-coach.is-done .gb-coach-skip,.gb-coach.is-off .gb-coach-skip,.gb-coach.is-done .gb-coach-x{visibility:hidden}
.gb-coach.is-off .gb-coach-arrow{display:none}

@media (pointer:coarse){
.gb-coach-kick{min-height:44px}
.gb-coach-skip{min-height:44px;padding:0 8px}
.gb-coach.is-narrow .gb-coach-skip{margin-left:-8px}
.gb-coach-x{width:44px;height:44px}
}
@media (max-width:360px){.gb-coach-text{font-size:14px}}

/* The old intro tips sat in the page flow above the game (PLAY_CSS: position relative, order -1) and pushed the screen
   down. The tips above replace them; should a build still render one, it floats like a tip and never moves the game. */
.app-play .intro-tip{position:fixed;z-index:46;left:50%;top:calc(env(safe-area-inset-top,0px) + 56px);order:0;width:min(420px,calc(100vw - 24px));margin:0;transform:translateX(-50%);border-radius:8px;box-shadow:4px 4px 0 rgba(11,13,20,.35)}

/* -- what the settings switch -------------------------------------------------------------------------------------- */

/* Show player names off: the name tags overlay (tools/inject/30-play.js) stays hidden. */
html.gb-names-off .app-play canvas.gb-tags{display:none !important}
/* Reduce motion (or the device's own setting): the site's transitions and animations stop. */
html.gb-calm *,html.gb-calm *::before,html.gb-calm *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
html.gb-calm .gb-coach,html.gb-calm .gb-coach.is-done,html.gb-calm .gb-coach.is-off,html.gb-calm .gb-coach-ring{animation:none !important}
@media (prefers-reduced-motion:reduce){.gb-coach,.gb-coach.is-done,.gb-coach.is-off,.gb-coach-ring{animation:none}}

/* -- the settings sheet --------------------------------------------------------------------------------------------- */

/* Over the market (60) and the Wallet popup's lifted top bar (50). */
.gb-set-overlay{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(11,13,20,.62)}
.gb-set-overlay[hidden]{display:none !important}
.gb-set{position:relative;display:flex;flex-direction:column;width:min(440px,100%);max-height:min(86vh,700px);max-height:min(86dvh,700px);box-sizing:border-box;overflow:hidden;background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;border-radius:10px;box-shadow:6px 6px 0 rgba(11,13,20,.45);font-family:var(--serif,"Literata",Georgia,serif);text-align:left}
.gb-set:focus{outline:none}
.gb-set-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 8px 6px 16px;box-sizing:border-box;background:#1E2233;color:#F7F4EA}
.gb-set-title{margin:0;font:16px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.1em;text-transform:uppercase;color:#F7F4EA}
.gb-set-x{min-width:44px;min-height:44px;margin:0;padding:0 14px;box-sizing:border-box;background:#F2A93B;color:#1E2233;border:0;border-radius:6px;box-shadow:inset 0 -3px 0 rgba(11,13,20,.25);font:12px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.gb-set-x:hover{background:#FFE08A}
.gb-set-x:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.gb-set-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#1E2233 transparent;padding:4px 16px 18px}

.gb-set-group{margin:0;padding:12px 0 4px;border-top:3px dashed rgba(30,34,51,.28)}
.gb-set-group:first-child{border-top:0}
.gb-set-h{margin:0 0 2px;font:12px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.12em;text-transform:uppercase;color:#1D7068}
.gb-set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;margin:0;padding:4px 0;box-sizing:border-box;border-bottom:2px solid rgba(30,34,51,.1)}
.gb-set-row:last-child{border-bottom:0}
.gb-set-row[hidden]{display:none}
.gb-set-stack{flex-direction:column;align-items:stretch;gap:6px;padding:10px 0 8px}
.gb-set-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.gb-set-label{font-size:15px;line-height:1.3}
.gb-set-sub{font-size:13px;line-height:1.3;color:#454A5E}
.gb-set-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gb-set-out{font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;color:#454A5E}

/* A switch: the checkbox stays in the page for keys and screen readers, the track and knob are drawn beside it. */
.gb-set-switch{position:relative;cursor:pointer}
.gb-set-switch input,.gb-seg-opt input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.gb-switch{position:relative;flex:0 0 auto;width:52px;height:30px;box-sizing:border-box;background:#E9DCB6;border:3px solid #1E2233;border-radius:15px;transition:background .15s}
.gb-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;box-sizing:border-box;background:#fff;border:2px solid #1E2233;border-radius:50%;transition:transform .15s}
.gb-set-switch input:checked+.gb-switch{background:#F2A93B}
.gb-set-switch input:checked+.gb-switch::after{transform:translateX(22px)}
.gb-set-switch input:focus-visible+.gb-switch{outline:3px solid #1E2233;outline-offset:3px}
.gb-set-switch input:disabled+.gb-switch{opacity:.55}
.gb-set-switch:has(input:disabled){cursor:default}

/* Text speed: four segments in one inked frame, the chosen one amber. */
.gb-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;background:#FBF5E3;border:3px solid #1E2233;border-radius:6px}
.gb-seg-opt{position:relative;display:flex;min-width:0;margin:0}
.gb-seg-opt span{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 2px;border-left:2px solid #1E2233;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gb-seg-opt:first-child span{border-left:0}
.gb-seg-opt span:hover{background:#FFE08A}
.gb-seg-opt input:checked+span{background:#F2A93B}
.gb-seg-opt input:focus-visible+span{outline:3px solid #1E2233;outline-offset:-6px}

/* Volume: an inked track filled amber to --gb-fill, a round amber knob, 44px tall to grab. */
.gb-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y}
.gb-range:focus{outline:none}
.gb-range::-webkit-slider-runnable-track{height:16px;box-sizing:border-box;background:linear-gradient(to right,#F2A93B var(--gb-fill,100%),#FBF5E3 var(--gb-fill,100%));border:3px solid #1E2233;border-radius:8px}
.gb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-9px;box-sizing:border-box;background:#F7F4EA;border:3px solid #1E2233;border-radius:50%;box-shadow:2px 2px 0 #1E2233}
.gb-range:focus-visible::-webkit-slider-thumb{background:#FFE08A;outline:3px solid #1E2233;outline-offset:2px}
.gb-range::-moz-range-track{height:10px;background:#FBF5E3;border:3px solid #1E2233;border-radius:8px}
.gb-range::-moz-range-progress{height:10px;background:#F2A93B;border:3px solid #1E2233;border-right:0;border-radius:8px 0 0 8px}
.gb-range::-moz-range-thumb{width:22px;height:22px;background:#F7F4EA;border:3px solid #1E2233;border-radius:50%;box-shadow:2px 2px 0 #1E2233}
.gb-range:focus-visible::-moz-range-thumb{background:#FFE08A}
.gb-set-group.is-muted .gb-range{opacity:.5}

.gb-set-note{margin:6px 0 0;font-size:14px;line-height:1.45;color:#454A5E}
.gb-set-btns{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 6px}
.gb-set-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0 16px;box-sizing:border-box;background:#F2A93B;color:#1E2233;border:3px solid #1E2233;border-radius:6px;box-shadow:3px 3px 0 #1E2233;font:12px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.gb-set-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #1E2233}
.gb-set-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1E2233}
.gb-set-btn[hidden]{display:none}
.gb-set-quiet,.gb-set-quiet:hover,.gb-set-quiet:active{background:transparent;box-shadow:none;transform:none}
.gb-set-quiet:hover{background:rgba(242,140,140,.28)}
.gb-set-btn:focus-visible{outline:3px solid #1E2233;outline-offset:2px}
.gb-set-fine{margin:14px 0 0;padding:10px 12px;background:rgba(255,224,138,.5);border-left:4px solid #F2A93B;font-size:13px;line-height:1.45}

/* A phone: the sheet rises from the bottom edge, its last row above the home indicator. */
@media (max-width:640px){
.gb-set-overlay{align-items:flex-end;padding:0}
.gb-set{width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);border-width:3px 0 0;border-radius:14px 14px 0 0;box-shadow:0 -4px 0 rgba(11,13,20,.3)}
.gb-set-bar{padding-top:14px;padding-right:max(8px,env(safe-area-inset-right));padding-left:max(16px,env(safe-area-inset-left))}
.gb-set-bar::before{content:"";position:absolute;top:5px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:rgba(247,244,234,.45)}
.gb-set-body{padding:2px max(14px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
}
@media (max-width:360px){.gb-seg-opt span{font-size:10px;letter-spacing:0}}

/* -- the way in from the Wallet popup ------------------------------------------------------------------------------ */

.app-play .signin-pop .gb-set-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin:0;padding:6px 8px;box-sizing:border-box;background:transparent;color:#1E2233;border:0;border-top:2px solid rgba(30,34,51,.18);font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.app-play .signin-pop .gb-set-open:hover{background:rgba(255,224,138,.6)}
.gb-gear{display:block;flex:0 0 auto;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7 0h2l.4 2.1 1.4.6 1.8-1.2 1.4 1.4-1.2 1.8.6 1.4L16 7v2l-2.1.4-.6 1.4 1.2 1.8-1.4 1.4-1.8-1.2-1.4.6L9 16H7l-.4-2.1-1.4-.6-1.8 1.2-1.4-1.4 1.2-1.8-.6-1.4L0 9V7l2.1-.4.6-1.4-1.2-1.8 1.4-1.4 1.8 1.2 1.4-.6zM8 5.4a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7 0h2l.4 2.1 1.4.6 1.8-1.2 1.4 1.4-1.2 1.8.6 1.4L16 7v2l-2.1.4-.6 1.4 1.2 1.8-1.4 1.4-1.8-1.2-1.4.6L9 16H7l-.4-2.1-1.4-.6-1.8 1.2-1.4-1.4 1.2-1.8-.6-1.4L0 9V7l2.1-.4.6-1.4-1.2-1.8 1.4-1.4 1.8 1.2 1.4-.6zM8 5.4a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (pointer:coarse){.app-play .signin-pop .gb-set-open{min-height:44px}}


/* tools/styles/market.css */
/* Market (tools/market-client.mjs): the folder tab and the trade sheet. Cream paper, navy ink, amber actions, 3px ink
   rules and Silkscreen headings, like the rest of the site. On a phone the sheet rises from the bottom edge with 44px
   targets, 16px fields (no zoom on focus) and the safe area kept clear. */

/* The tab hangs from the top edge like Play/Pokédex/Guide/Wallet, raised 6px until hovered. placeOpen() sets its left
   edge and --market-w, which .top-actions reserves (build-web PLAY_CSS). */
.market-open{position:fixed;z-index:5;top:0;left:8px;margin:0;box-sizing:border-box;padding:18px 14px 9px;font:13px/1 Silkscreen,ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;background:#FFE08A;color:#1E2233;border:3px solid #1E2233;border-top:0;border-radius:0 0 8px 8px;box-shadow:2px 3px #1e223359;transform:translateY(-6px);transition:transform .18s;cursor:pointer}
.market-open:hover,.market-open:focus-visible{transform:translateY(-2px)}
@media (max-width:840px){.market-open{width:calc((100vw - 28px)/5);padding:12px 2px 8px;font-size:10px;letter-spacing:0;text-align:center}}
@media (max-width:380px){.market-open{font-size:9px}}

.market-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(11,13,20,.62)}
.market-overlay[hidden]{display:none !important;pointer-events:none !important}
.market-sheet{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:min(86vh,720px);max-height:min(86dvh,720px);box-sizing:border-box;overflow:hidden;background:#F7F4EA;color:#1E2233;border:3px solid #1E2233;border-radius:10px;box-shadow:6px 6px 0 rgba(11,13,20,.45);font-family:var(--serif,"Literata",Georgia,serif);text-align:left}
.market-sheet:focus{outline:none}

.market-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 8px 6px 16px;box-sizing:border-box;background:#1E2233;color:#F7F4EA}
.market-title{margin:0;font:16px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.1em;text-transform:uppercase;color:#F7F4EA}
.market-x{min-width:44px;min-height:44px;margin:0;padding:0 14px;box-sizing:border-box;background:#F2A93B;color:#1E2233;border:0;border-radius:6px;box-shadow:inset 0 -3px 0 rgba(11,13,20,.25);font:12px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.market-x:hover{background:#FFE08A}
.market-x:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}

.market-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#1E2233 transparent;padding:14px 16px 18px}
.market-lede{margin:0 0 16px;font-size:14px;line-height:1.5;color:#454A5E}
.market-sec+.market-sec{margin-top:20px;padding-top:16px;border-top:3px dashed rgba(30,34,51,.28)}
.market-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;margin:0 0 10px}
.market-h{display:flex;align-items:center;gap:8px;margin:0;font:12px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.12em;text-transform:uppercase;color:#1D7068}
.market-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;background:#1E2233;color:#F7F4EA;border-radius:11px;font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:0}

.market-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.market-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"pic main price" "act act act";align-items:center;gap:8px 12px;margin:0;padding:10px 12px;background:#FFFDF7;border:3px solid #1E2233;border-radius:8px;box-shadow:3px 3px 0 rgba(30,34,51,.16)}
.market-sprite{grid-area:pic;display:block;width:40px;height:40px;box-sizing:border-box;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;background:#E9DCB6;border:2px solid #1E2233;border-radius:6px}
.market-main{grid-area:main;display:flex;flex-direction:column;gap:4px;min-width:0}
.market-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:13px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.04em;text-transform:uppercase}
.market-id{color:#454A5E}
.market-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;line-height:1.3;color:#454A5E}
.market-seller{font:12px/1.3 var(--mono,ui-monospace,monospace);white-space:nowrap}
.market-chip{display:inline-block;padding:3px 6px 2px;background:#7FD3C6;color:#1E2233;border:2px solid #1E2233;border-radius:3px;font:10px/1.2 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase}
.market-price{grid-area:price;justify-self:end;white-space:nowrap;font:16px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.02em}
.market-price small{margin-left:4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#454A5E}
.market-act{grid-area:act}
.market-card .market-btn-go{width:100%}
.market-own{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}

.market-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;margin:0;padding:0 16px;box-sizing:border-box;background:#FBF5E3;color:#1E2233;border:3px solid #1E2233;border-radius:6px;box-shadow:3px 3px 0 #1E2233;font:13px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.market-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #1E2233}
.market-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1E2233}
.market-btn-go{background:#F2A93B}
.market-btn-quiet,.market-btn-quiet:hover,.market-btn-quiet:active{background:transparent;box-shadow:none}
.market-btn-quiet:hover{background:rgba(242,140,140,.28)}
.market-btn-small{min-height:36px;padding:0 12px;font-size:11px;box-shadow:2px 2px 0 #1E2233}
.market-btn[aria-disabled="true"],.market-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:3px 3px 0 #1E2233}
.market-btn-quiet[aria-disabled="true"]{box-shadow:none}
.market-sheet .market-btn:focus-visible,.market-sheet .market-input:focus-visible{outline:3px solid #1E2233;outline-offset:2px}

.market-input{display:block;width:100%;min-height:44px;margin:0;padding:0 12px;box-sizing:border-box;background:#fff;color:#1E2233;border:3px solid #1E2233;border-radius:6px;font:16px/1.2 var(--mono,ui-monospace,monospace)}
.market-input::placeholder{color:#8A8D99;opacity:1}
select.market-input{-webkit-appearance:none;appearance:none;padding-right:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-image:linear-gradient(45deg,transparent 50%,#1E2233 50%),linear-gradient(135deg,#1E2233 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer}
.market-sell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"mon mon" "price go";gap:10px;align-items:end}
.market-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.market-field>span{font:11px/1 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase;color:#454A5E}
.market-field-mon{grid-area:mon}
.market-sell .market-field:not(.market-field-mon){grid-area:price}
.market-sell .market-btn{grid-area:go;width:100%}
.market-split{margin:10px 0 0;font-size:14px;line-height:1.45}
.market-fine{margin:4px 0 0;font-size:13px;line-height:1.45;color:#454A5E}
.market-hint{margin:0 0 12px;padding:8px 12px;background:rgba(255,224,138,.55);border-left:4px solid #F2A93B;font-size:14px;line-height:1.45}

.market-state{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;padding:22px 16px;text-align:center;border:3px dashed rgba(30,34,51,.3);border-radius:8px}
.market-state-title{margin:0;font:13px/1.3 var(--px,"Silkscreen","Courier New",monospace);letter-spacing:.08em;text-transform:uppercase}
.market-state-text{margin:0;max-width:32em;font-size:14px;line-height:1.5;color:#454A5E}
.market-state .market-btn{margin-top:6px}
.market-state-err{border:3px solid #1E2233;background:rgba(242,140,140,.2)}
.market-state-off{background:rgba(233,220,182,.5)}
.market-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:8px 8px 8px 12px;background:rgba(242,140,140,.22);border-left:4px solid #F28C8C;font-size:14px;line-height:1.4}
.market-skel{height:70px;box-sizing:border-box;border:3px solid rgba(30,34,51,.16);border-radius:8px;background:linear-gradient(rgba(30,34,51,.1),rgba(30,34,51,.1)) 10px 12px/40px 40px no-repeat,linear-gradient(rgba(30,34,51,.1),rgba(30,34,51,.1)) 64px 16px/42% 12px no-repeat,linear-gradient(rgba(30,34,51,.07),rgba(30,34,51,.07)) 64px 36px/26% 10px no-repeat,#FFFDF7;animation:market-blink 1.1s steps(2,end) infinite}
@keyframes market-blink{50%{opacity:.55}}
.market-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.market-status{flex:0 0 auto;margin:0;padding:10px 16px;box-sizing:border-box;background:#FBF5E3;border-top:3px solid #1E2233;font-size:14px;line-height:1.4}
.market-status:empty{padding:0;border-top-width:0}
.market-status[data-kind="ok"]{background:#D5EEE8}
.market-status[data-kind="err"]{background:#F8D8D2}
.market-status[data-kind="busy"]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:1px;background:#F2A93B;border:2px solid #1E2233;animation:market-blink .8s steps(2,end) infinite}

@media (min-width:641px){
.market-card:not(.market-card-own){grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"pic main price act"}
.market-card .market-btn-go{width:auto;min-width:88px}
.market-sell{grid-template-columns:minmax(0,1fr) 9em auto;grid-template-areas:"mon price go"}
.market-sell .market-btn{width:auto;min-width:88px}
}
@media (max-width:640px){
.market-overlay{align-items:flex-end;padding:0}
.market-sheet{width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);border-width:3px 0 0;border-radius:14px 14px 0 0;box-shadow:0 -4px 0 rgba(11,13,20,.3);padding-bottom:env(safe-area-inset-bottom)}
.market-bar{padding-top:14px}
.market-bar::before{content:"";position:absolute;top:5px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:rgba(247,244,234,.45)}
.market-body{padding:12px 12px 16px}
.market-card{padding:10px}
}
@media (max-width:380px){
.market-card{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"pic main" "pic price" "act act"}
.market-price{justify-self:start}
.market-own{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.market-own .market-input{grid-column:1/-1}
}
@media (pointer:coarse){.market-btn-small{min-height:44px}}
@media (prefers-reduced-motion:reduce){.market-open,.market-btn{transition:none}.market-skel,.market-status[data-kind="busy"]::before{animation:none}}