/* ============================================================
   ROLLMONS — PIXEL / POKÉROGUE THEME
   Chunky indigo "window-box" panels, red-orange double frames,
   pixel fonts, crisp (non-AA) sprites, hard offset shadows.
   Ported from rollmons/open_design/index.html.
   ============================================================ */
:root{
  --bg:        #16132b;     /* night indigo (outside the field)   */
  --bg-2:      #1d1940;
  --surface:   #34315e;     /* window-box fill                    */
  --surface-2: #272348;     /* darker inset                       */
  --ink:       #f6f4ff;     /* near-white pixel text              */
  --muted:     #b9b4e6;     /* lavender                           */
  --faint:     #8480b6;     /* dimmed                             */
  --border:    #4b4790;     /* mid hairline on dark               */
  --line:      #5b56a8;
  --frame:     #ec5a32;     /* signature red-orange frame         */
  --frame-2:   #b5371a;     /* deep frame shadow                  */
  --edge:      #100c22;     /* black pixel edge                   */
  --scarlet:   #ec4d3a;
  --violet:    #7b6cf0;
  --gold:      #ffcc3e;
  --good:      #5fd86f;
  --bad:       #ff5d52;
  --sky-1:     #bfe6fb;
  --sky-2:     #93cef0;
  --grass-1:   #74c074;
  --grass-2:   #58a85f;
  --r:    16px;
  --r-sm: 10px;
  --font-display:'Pixelify Sans','Hiragino Maru Gothic ProN',system-ui,sans-serif;
  /* Jersey 15 for running text and numbers: same pixel weight as the Pixelify
     headings, but every digit is distinct (Pixelify's 2/5 and 1/7 are near
     mirror images). CJK falls back to the system font. */
  --font-body:'Jersey 15','Pixelify Sans',system-ui,sans-serif;
  --font-pixel:'Press Start 2P','Pixel CJK','Pixelify Sans',monospace;
  --font-mono:'Jersey 15',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-body);
  color:var(--ink);
  font-size:17px;
  line-height:1.45;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.10) 3px 4px),
    radial-gradient(900px 600px at 50% -10%, rgba(123,108,240,.22), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment:fixed;
  min-height:100vh;
  image-rendering:pixelated;
}
/* Press Start 2P fills its em box, so the .5–.6rem sizes used for it come out tiny in the system CJK font
   that renders Chinese and Japanese glyphs. This face is that system font scaled up to match. */
@font-face{font-family:'Pixel CJK';size-adjust:150%;
  /* Chrome matches local() on the PostScript or full name, WebKit on the family name too: list both forms */
  src:local('PingFangSC-Regular'),local('PingFang SC Regular'),local('PingFang SC'),local('HiraginoSans-W3'),local('Hiragino Sans W3'),local('Hiragino Sans'),
    local('HiraKakuProN-W3'),local('Hiragino Kaku Gothic ProN'),local('NotoSansCJKsc-Regular'),local('Noto Sans CJK SC Regular'),local('Noto Sans CJK SC'),
    local('NotoSansCJKjp-Regular'),local('Noto Sans CJK JP'),local('NotoSansSC-Regular'),local('Noto Sans SC'),local('MicrosoftYaHei'),local('Microsoft YaHei'),
    local('YuGothic-Regular'),local('Yu Gothic Regular'),local('Yu Gothic'),local('Meiryo')}
img{image-rendering:pixelated}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;letter-spacing:.5px;
  text-shadow:0 2px 0 var(--edge)}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem)}
button{font:inherit;cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.42}
.mono{font-family:var(--font-mono)}
.hidden{display:none!important}

/* shared pixel window-box: black edge -> red frame -> black inset -> fill */
.card,.mon,.boss,.encounter,.replay-card,.stat,.matrix,.party.card,
.battle-cols .theater .match,.rchip,.rail li,.slot:not(.empty){
  background:var(--surface);
  border:3px solid var(--frame);
  border-radius:var(--r);
  box-shadow:0 0 0 3px var(--edge), inset 0 0 0 3px var(--edge), 5px 6px 0 rgba(8,6,18,.5);
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  padding:.6em 1.1em;border-radius:var(--r-sm);line-height:1;color:var(--ink);
  background:var(--surface-2);
  border:3px solid var(--frame);
  box-shadow:0 0 0 3px var(--edge), 0 4px 0 0 var(--edge);
  text-shadow:0 2px 0 var(--edge);
  transition:transform .06s steps(2), box-shadow .06s steps(2);
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--edge), 0 0 0 0 var(--edge)}
.btn-primary{background:var(--frame);border-color:var(--frame-2)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface-2)}
.btn-warn{background:#b88a17;border-color:#7a5b0c;color:#fff}
.btn-danger{background:#a3322c;border-color:#6e1f1b;color:#fff}
.btn-sm{padding:.45em .7em;font-size:.82rem;box-shadow:0 0 0 2px var(--edge),0 3px 0 0 var(--edge);border-width:2px}
.btn-sm:active{box-shadow:0 0 0 2px var(--edge),0 0 0 0 var(--edge)}
.btn-lg{padding:.85em 1.6em;font-size:1.15rem}

/* ---- topbar ---- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  padding:.6rem clamp(1rem,3vw,2.2rem);
  background:var(--surface-2);
  border-bottom:4px solid var(--frame);
  box-shadow:0 4px 0 var(--edge);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-pixel);font-weight:400;
  font-size:.92rem;color:var(--gold);text-shadow:2px 2px 0 var(--edge);cursor:pointer}
.brand .pokeball{width:22px;height:22px}
.steps{display:flex;gap:.4rem;margin-left:.4rem;flex-wrap:nowrap;white-space:nowrap}
.step{
  font-family:var(--font-pixel);font-weight:400;font-size:.6rem;
  color:var(--muted);padding:.45rem .6rem;border-radius:var(--r-sm);
  border:2px solid transparent;text-shadow:1px 1px 0 var(--edge);
}
.step.active{color:#fff;background:var(--frame);border-color:var(--edge);box-shadow:0 0 0 2px var(--edge)}
.step.done{color:var(--good);border-color:var(--good)}
.topbar .spacer{flex:1}
.offline-tag{
  font-family:var(--font-pixel);font-size:.52rem;letter-spacing:.04em;
  color:#1a1430;background:var(--gold);
  padding:.4rem .55rem;border-radius:var(--r-sm);border:2px solid var(--edge);
}

/* ---- layout ---- */
.screen{display:none;animation:rise .25s steps(4)}
.screen.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap{max-width:1180px;margin:0 auto;padding:clamp(1.1rem,3vw,2.4rem)}
.eyebrow{
  font-family:var(--font-pixel);font-size:.6rem;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 .55rem;
  text-shadow:1px 1px 0 var(--edge);
}
.lead{color:var(--muted);font-size:1.02rem;margin:.5rem 0 0}
.summary-fab{position:fixed;top:72px;right:18px;z-index:45;box-shadow:0 0 0 3px var(--edge),0 6px 0 var(--edge)}
.run-end{margin-top:1.2rem;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:flex-end;gap:.7rem;flex-wrap:wrap}
.run-end-lead{margin-right:auto;color:var(--muted)}
.lang{font:inherit;font-size:.8rem;padding:.35rem .5rem;border:2px solid var(--edge);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);cursor:pointer}
/* ---- tools strip (leaderboard · language · account), fixed corner on the title screen ---- */
.tools{display:flex;align-items:center;gap:.6rem;margin-right:.4rem}
/* Same sizes in every language: fixed heights and widths, so the CJK fallback font's taller metrics and the
   label lengths do not move the row (they did: the strip shifted on every language switch). */
.tools .btn,.tools .lang,.tools .account{height:2.2rem;line-height:1;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.tools #board-btn{width:9rem}
.tools #feedback-btn{width:7rem}
.tools .lang{width:6.8rem}
.tools #signin-btn,.tools #signout-btn{width:5.6rem}
.btn-icon{width:2.2rem;padding:0}
.btn-icon svg{width:1.15rem;height:1.15rem;fill:currentColor}
.tools .menu-btn{display:none;font-size:1.05rem}
.corner{position:fixed;top:14px;right:18px;z-index:45}
.corner .tools{flex-wrap:wrap;justify-content:flex-end;margin:0}
@media(max-width:560px){.corner{top:8px;right:8px}.corner .tools{gap:.4rem}#screen-title .title-inner{padding-top:4.4rem}}
/* phones: Leaderboard and ☰ only; the rest lives in the menu drawer */
@media(max-width:700px){.tools .desk{display:none!important}.tools .menu-btn{display:inline-flex}}
.menu-list{display:grid;gap:.6rem}
.menu-list .btn{justify-content:flex-start;text-decoration:none}
.menu-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:0;font-size:.9rem;color:var(--muted)}
.menu-row .lang{width:8rem}
.menu-row.account{min-height:2.4rem}
/* Phones: the strip does not fit beside the brand, so it becomes the topbar's second row
   (otherwise the page is wider than the screen and Safari zooms the whole game out). */
@media(max-width:700px){
  .topbar{flex-wrap:wrap;row-gap:.5rem}
  .topbar .tools{order:1;flex-basis:100%;flex-wrap:wrap;gap:.4rem;margin:0}
  .summary-fab{top:auto;bottom:16px;right:16px}
  /* the fixed button sits where the end-of-run card's buttons land once scrolled to the end: leave it room */
  .run-end{margin-bottom:76px}
}
.account{display:flex;align-items:center;gap:.5rem}
.account:empty{display:none}
.account .who{font-family:var(--font-pixel);font-size:.55rem;color:var(--gold);text-shadow:1px 1px 0 var(--edge);max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- leaderboard drawer ---- */
.drawer-backdrop{position:fixed;inset:0;z-index:59;background:rgba(8,6,18,.45)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(440px,100vw);overflow-y:auto;padding:1.1rem 1.2rem;
  background:var(--surface);border-left:4px solid var(--frame);box-shadow:-4px 0 0 var(--edge);animation:slide .2s steps(4)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer .panel-head{margin-bottom:.8rem}
/* ---- How it works drawer ---- */
.help-sec{margin-bottom:1.1rem}
.help-sec h4{font-size:1rem;margin:0 0 .4rem;color:var(--gold)}
.help-sec p{margin:0 0 .5rem;font-size:.95rem;line-height:1.5}
.help-odds{color:var(--muted)}
.help-bands{width:100%;border-collapse:collapse;font-size:.9rem;margin:.2rem 0 .7rem}
.help-bands th,.help-bands td{padding:.25rem .4rem;text-align:left;border-bottom:1px solid var(--border)}
.help-bands th{color:var(--muted);font-weight:600}
.help-bands .n{text-align:right}
/* ---- feedback drawer ---- */
.feedback-form{display:grid;gap:.6rem}
.feedback-hint{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.feedback-form textarea{width:100%;min-height:12rem;padding:.6rem .7rem;border:2px solid var(--edge);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:inherit;line-height:1.4;resize:vertical}
.feedback-form textarea:focus{outline:3px solid var(--gold);outline-offset:0}
.feedback-form .field{margin:0}
.feedback-form input{width:100%;padding:.5rem .7rem;border:2px solid var(--edge);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:inherit}
.feedback-form input:focus{outline:3px solid var(--gold);outline-offset:0}
.suggest{display:grid;gap:.25rem;margin-top:-.3rem}
.suggest-item{display:flex;align-items:center;gap:.5rem;font:inherit;padding:.3rem .6rem;border:2px solid var(--edge);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);cursor:pointer;text-align:left}
.suggest-item:hover{border-color:var(--gold)}
.suggest-item img{width:32px;height:32px;image-rendering:pixelated}
.suggest-item .muted{color:var(--muted);font-size:.85em}
.feedback-actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.feedback-status{color:var(--good);font-size:.9rem}
.pool-set-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
/* ---- account dialog ---- */
.auth-dialog{width:min(22rem,calc(100vw - 2rem));padding:1.1rem 1.2rem;color:var(--ink);background:var(--surface);
  border:3px solid var(--frame);border-radius:var(--r-sm);box-shadow:0 0 0 3px var(--edge),inset 0 0 0 3px var(--edge),5px 6px 0 rgba(8,6,18,.5)}
.auth-dialog::backdrop{background:rgba(8,6,18,.55)}
.auth-tabs,.drawer-tabs{display:flex;gap:.4rem;margin-bottom:.9rem}
.auth-tab,.drawer-tab{font:inherit;font-weight:700;font-size:.85rem;padding:.4rem .7rem;border:2px solid transparent;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer}
.auth-tab.active,.drawer-tab.active{color:#fff;background:var(--frame);border-color:var(--edge)}
.auth-dialog label{display:block;margin:0 0 .7rem;font-size:.82rem;color:var(--muted)}
.auth-dialog input{display:block;width:100%;margin-top:.25rem;padding:.5rem .6rem;border:2px solid var(--edge);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:inherit}
.auth-dialog input:focus{outline:3px solid var(--gold);outline-offset:0}
.auth-note{margin:0 0 .5rem;font-size:.76rem;color:var(--faint);line-height:1.5}
.confirm-text{margin:.2rem 0 1.1rem;font-size:1rem;line-height:1.5}
.auth-error{margin:0 0 .6rem;font-size:.8rem;color:var(--bad);min-height:1.2em}
.auth-actions{display:flex;justify-content:flex-end;gap:.5rem}
.cpu-note{color:var(--faint);font-size:.8rem;line-height:1.6;margin:.55rem 0 0;max-width:62ch}
.cpu-note em{color:var(--muted);font-style:normal}
.cpu-note .toggle{display:block;margin-top:.25rem;cursor:pointer;color:var(--muted)}
.cpu-note .toggle input{accent-color:var(--gold);margin-right:.35rem;vertical-align:-1px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}

/* pokeball glyph */
.pokeball{border-radius:50%;background:
  linear-gradient(#ec4d3a 0 50%, #fff 50% 100%);
  position:relative;box-shadow:inset 0 0 0 2px var(--edge);image-rendering:pixelated}
.pokeball::after{content:"";position:absolute;inset:0;margin:auto;width:30%;height:30%;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--edge),0 0 0 2px var(--edge)}

/* ============ TITLE ============ */
#screen-title{min-height:100vh;display:none;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.05) 6px 7px),
    linear-gradient(180deg, var(--sky-1) 0%, #a9dcf5 36%, var(--sky-2) 56%, var(--grass-1) 56%, #66b566 78%, var(--grass-2) 100%);
}
#screen-title.active{display:flex}
.cloud{position:absolute;z-index:1;background:#fcfdff;border-radius:40px;height:22px;
  box-shadow:0 4px 0 rgba(96,140,184,.28);opacity:.9;animation:drift 60s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:40px;height:40px;top:-20px;left:14%}
.cloud::after{width:30px;height:30px;top:-13px;left:52%}
@keyframes drift{from{transform:translateX(-14vw)}to{transform:translateX(114vw)}}
.title-inner{position:relative;z-index:3;padding:2.4rem 1.5rem 0}
.logo{
  font-family:var(--font-pixel);font-weight:400;
  font-size:clamp(2.2rem,9vw,5.4rem);line-height:1.05;letter-spacing:1px;
  color:#5d6ff0;
  text-shadow:
    -3px 0 var(--edge),3px 0 var(--edge),0 -3px var(--edge),0 3px var(--edge),
    -3px -3px var(--edge),3px -3px var(--edge),-3px 3px var(--edge),3px 3px var(--edge),
    6px 6px 0 #b5371a, 9px 9px 0 var(--edge);
}
.logo .tail{display:block;font-family:var(--font-pixel);font-size:clamp(.5rem,1.5vw,.8rem);letter-spacing:.2em;
  text-transform:uppercase;color:#26407e;margin-top:1.5rem;font-weight:400;text-shadow:2px 2px 0 rgba(255,255,255,.5)}
.title-sub{max-width:33rem;margin:1.6rem auto 0;color:#1d2c54;font-size:1.05rem;line-height:1.6;font-weight:600;
  text-shadow:1px 1px 0 rgba(255,255,255,.4)}
/* Fixed footprint so the box does not resize with the language: the pixel font and the CJK fallback differ in width. */
.title-panel{margin:1.7rem auto 0;display:inline-flex;flex-direction:column;gap:1rem;align-items:center;
  width:min(44rem,calc(100vw - 2rem));box-sizing:border-box;padding:1.4rem 1.6rem;background:var(--surface);border:4px solid var(--frame);border-radius:18px;
  box-shadow:0 0 0 4px var(--edge), inset 0 0 0 4px var(--edge), 6px 8px 0 rgba(8,6,18,.5)}
.title-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.title-actions .btn{width:16rem;max-width:100%;min-height:3.6rem;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
/* the rules link rides the foot line */
.title-foot .help-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.title-foot .help-link:hover{color:#fff}
.title-foot{min-height:1.7em}
.title-foot{margin:0;font-family:var(--font-pixel);font-size:.54rem;color:var(--muted);line-height:1.7}
/* .title-team removed — slot-machine Gen × Type animation will replace it */

/* ============ DRAFT ============ */
/* party strip in the page head: six slots, filled left to right, the current one pulsing */
.party-box{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;min-width:0}
.party-strip{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.pslot{width:52px;height:52px;display:grid;place-items:center;background:var(--surface-2);border:2px solid var(--edge);border-radius:6px}
.pslot img{width:48px;height:48px;image-rendering:pixelated}
.pslot.empty{border:2px dashed var(--border);background:transparent}
.pslot .ball{width:22px;height:22px;opacity:.4}
.pslot.current{border:2px solid var(--frame);animation:pulse 1s steps(2) infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(236,90,50,.25)}}
.party-count{color:var(--muted);font-size:.9rem;white-space:nowrap}

.encounter{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;
  padding:1rem 1.2rem;margin-bottom:1.4rem;
}
.encounter .cell-name{font-family:var(--font-display);font-size:1.6rem;font-weight:700;text-shadow:0 2px 0 var(--edge)}
.encounter .thin-note{color:var(--gold);font-weight:600;font-size:.9rem;margin:.3rem 0 0}
.encounter .odds-note{color:var(--muted);font-size:.78rem;margin:.3rem 0 0}
.encounter-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* candidates: a strip of five tiles, the highlighted one detailed underneath (same blocks as the pool panel) */
.draft-panel{padding:1rem 1.1rem 1.1rem}
.cand-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:2px solid var(--border)}
.cand{font:inherit;color:var(--ink);background:var(--surface-2);border:2px solid var(--edge);border-radius:var(--r-sm);padding:.6rem .4rem .7rem;
  display:grid;justify-items:center;align-content:start;gap:.3rem;cursor:pointer;text-align:center;min-width:0}
.cand:hover{border-color:var(--muted)}
.cand.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.cand.visitor{border-style:dashed}
.cand.visitor.on{border-style:solid}
.cand-sprite{width:96px;height:96px;display:grid;place-items:center}
.cand-sprite img{width:96px;height:96px;image-rendering:pixelated;object-fit:contain}
.cand-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;text-shadow:0 2px 0 var(--edge);overflow-wrap:anywhere}
.cand .rarity{justify-content:center;flex-wrap:wrap}
.cand .chips{margin:0}
.chips{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin:.6rem 0 0}
.chip{
  font-family:var(--font-display);font-weight:600;font-size:.82rem;
  padding:.18rem .6rem;border-radius:var(--r-sm);color:#fff;text-transform:capitalize;
  border:2px solid var(--edge);text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
.chip.visitor{background:var(--surface-2);color:var(--ink);border-style:dashed;text-transform:none}
.rarity{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted)}
.rarity .stars{letter-spacing:.08em;font-size:.95rem;color:var(--muted);filter:drop-shadow(1px 1px 0 var(--edge))}
.rarity.r1 .stars{color:#9fd36a}
.rarity.r2 .stars{color:#7ab9e0}
.rarity.r3 .stars{color:var(--gold)}
.rarity .mono{margin-left:auto}
.cand-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.4rem;align-items:start}
.cand-info{display:grid;gap:.7rem}
.cand-detail .pool-set{border-top:0;padding-top:0}
.cand-detail .pick{margin-top:1rem;width:100%}
/* pick-to-pick transition: the tiles drop away, the next cell's tiles slide in one after another, the new slot pops */
.cand.enter{animation:candin .42s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes candin{from{opacity:0;transform:translateX(40px) scale(.8)}to{opacity:1;transform:none}}
.encounter.enter{animation:cellin .5s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes cellin{0%{opacity:0;transform:translateY(-10px)}60%{opacity:1;transform:translateY(4px)}100%{transform:none}}
.cand-detail.enter{animation:rise .4s .3s ease-out both}
.cand-detail.swap{animation:swap .22s ease-out}
@keyframes swap{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.pslot.land{animation:land .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes land{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.cand.enter,.encounter.enter,.cand-detail.enter,.cand-detail.swap,.pslot.land,.pslot.current{animation:none}}
@media(max-width:980px){.cand-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.cand-detail{grid-template-columns:1fr}}
@media(max-width:560px){.pslot{width:44px;height:44px}.pslot img{width:40px;height:40px}.party-strip{gap:.3rem}.cand-sprite,.cand-sprite img{width:64px;height:64px}.cand{padding:.5rem .25rem .6rem}.cand .chips{gap:.25rem}.chip{font-size:.72rem;padding:.12rem .4rem}}

/* party tray (done card) */
.party-list{display:flex;flex-direction:column;gap:.55rem;list-style:none;margin:0 0 .9rem;padding:0}
.slot{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:var(--r-sm);
  min-height:60px}
.slot:not(.empty){box-shadow:0 0 0 2px var(--edge), inset 0 0 0 2px var(--edge), 3px 3px 0 rgba(8,6,18,.4);border-width:2px}
.slot.empty{border:2px dashed var(--border);color:var(--faint);justify-content:flex-start;background:transparent}
.slot .ball{width:30px;height:30px;flex:0 0 30px;opacity:.45}
.slot .mini{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;
  background:var(--surface-2);border-radius:var(--r-sm);box-shadow:0 0 0 2px var(--edge)}
.slot .mini img{max-width:42px;max-height:42px;image-rendering:pixelated}
.slot .info{min-width:0}
.slot .info strong{display:block;font-family:var(--font-display);font-size:1rem;text-transform:capitalize;overflow-wrap:anywhere}
.slot .info span{font-family:var(--font-pixel);font-size:.5rem;color:var(--muted)}

/* ============ BOSSES ============ */
.ladder{display:flex;flex-direction:column;gap:.8rem;margin:0;padding:0;list-style:none}
.boss{
  display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;
}
.boss.dragging{opacity:.5}
.boss.drag-over{border-color:var(--gold)}
.boss .num{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:var(--r-sm);
  font-family:var(--font-pixel);font-weight:400;font-size:.8rem;color:#fff;
  background:var(--frame);box-shadow:0 0 0 2px var(--edge);text-shadow:1px 1px 0 var(--edge)}
.boss .handle{cursor:grab;color:var(--faint);font-size:1.2rem;letter-spacing:-.1em;user-select:none}
.boss .bname{flex:1;font-family:var(--font-display);font-weight:700;overflow-wrap:anywhere;font-size:1.05rem}
.boss .tag{font-family:var(--font-pixel);font-size:.5rem;color:var(--muted);padding:.3rem .45rem;
  border-radius:var(--r-sm);background:var(--surface-2);border:2px solid var(--edge)}
.boss .acts{display:flex;gap:.4rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem;font-size:.92rem;font-weight:700}
.field input,.field textarea,.field select{
  width:100%;border:2px solid var(--edge);border-radius:var(--r-sm);padding:.6rem .7rem;
  font:inherit;font-weight:400;color:var(--ink);background:var(--surface-2);
}
.field textarea{min-height:9rem;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:.82rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--gold);outline-offset:0;border-color:var(--edge)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.status-line{min-height:1.2rem;font-size:.88rem;color:var(--muted);margin:.3rem 0 0}
.boss-cols{display:grid;grid-template-columns:1fr 360px;gap:1.4rem;align-items:start}

/* ============ BATTLE ============ */
.battle-cols{display:grid;grid-template-columns:240px 1fr;gap:1.3rem;align-items:start}
.rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:.55rem;list-style:none;margin:0;padding:0}
.rail li{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:600;box-shadow:0 0 0 2px var(--edge), inset 0 0 0 2px var(--edge), 3px 3px 0 rgba(8,6,18,.4);border-width:2px}
.rail li .dot{width:12px;height:12px;border-radius:0;background:var(--surface-2);flex:0 0 12px;box-shadow:0 0 0 2px var(--edge)}
.rail li.current{border-color:var(--gold)}
.rail li.clickable{cursor:pointer;transition:transform .06s steps(2),filter .1s}
.rail li.clickable:hover{filter:brightness(1.18);transform:translateX(2px)}
.rail li.current .dot{background:var(--gold);animation:pulse 1s steps(2) infinite}
.rail li.win .dot{background:var(--good)}
.rail li.loss .dot{background:var(--bad)}
.rail li small{margin-left:auto;font-family:var(--font-pixel);font-size:.48rem;color:var(--muted)}
.theater{display:flex;flex-direction:column;gap:1.3rem}
.match{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.2rem;color:#fff;background:var(--frame);border:3px solid var(--frame-2)!important;
}
.match .side{font-family:var(--font-display);font-weight:700;font-size:1.1rem;text-shadow:0 2px 0 var(--edge)}
.match .vs{font-family:var(--font-pixel);font-weight:400;font-size:.6rem;padding:.4rem .55rem;
  background:rgba(0,0,0,.3);border-radius:var(--r-sm);border:2px solid var(--edge)}
.match.win{background:var(--good);border-color:#2f8c3c!important;color:#10240f}
.match.loss{background:var(--bad);border-color:#8e2b25!important}
.replay-card{overflow:hidden}
.replay-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem 1.1rem;border-bottom:3px solid var(--edge)}
.replay-head h3{font-size:1.1rem}
.replay-head .res{font-family:var(--font-pixel);font-weight:400;font-size:.6rem;padding:.4rem .6rem;border-radius:var(--r-sm);border:2px solid var(--edge)}
.res.win{color:#10240f;background:var(--good)}
.res.loss{color:#fff;background:var(--bad)}
.res.tie{color:var(--ink);background:var(--surface-2)}
.res.live{color:#1c1430;background:var(--gold);animation:livepulse 1.2s steps(2) infinite}
@keyframes livepulse{50%{filter:brightness(.8)}}
.replay-frame{width:100%;height:620px;border:0;background:#f5f7fb;display:block;image-rendering:auto}
.replay-ph{min-height:340px;display:grid;place-items:center;text-align:center;padding:2rem;
  background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 12px,var(--surface) 12px,var(--surface) 24px);
  animation:phstripes 0.8s linear infinite}
@keyframes phstripes{to{background-position:34px 0}}
@media(prefers-reduced-motion:reduce){.replay-ph{animation:none}}
.replay-ph .big{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink)}
.replay-ph .sm{color:var(--muted);font-size:.92rem;margin-top:.4rem;max-width:30rem}

/* ============ RESULTS ============ */
.result-hero{text-align:center;padding:2.4rem 1.5rem;border-radius:var(--r);color:#fff;margin-bottom:1.4rem;
  position:relative;overflow:hidden;border:4px solid var(--frame);box-shadow:0 0 0 4px var(--edge), 6px 7px 0 rgba(8,6,18,.5)}
.result-hero.victory{background:var(--gold);border-color:#c79412;color:#2a1d00}
.result-hero.defeat{background:#2c2750;border-color:#4b4790}
.result-hero.mixed{background:var(--violet);border-color:#4f43b0}
.result-hero h2{font-family:var(--font-pixel);font-size:clamp(1.4rem,5vw,2.4rem);line-height:1.2;text-shadow:3px 3px 0 var(--edge)}
.result-hero p{margin:1rem 0 0;opacity:.95;font-size:1.08rem}
.record{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.4rem 0}
.stat{padding:1.1rem 1.6rem;text-align:center;min-width:120px}
.stat .v{font-family:var(--font-pixel);font-weight:400;font-size:1.6rem;line-height:1.2;text-shadow:2px 2px 0 var(--edge)}
.stat .k{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.55rem}
.result-chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1.2rem 0}
.rchip{display:flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:600;border-width:2px!important;box-shadow:0 0 0 2px var(--edge), 3px 3px 0 rgba(8,6,18,.4)!important}
.rchip .dot{width:11px;height:11px;border-radius:0;box-shadow:0 0 0 2px var(--edge)}
.rchip.win .dot{background:var(--good)} .rchip.loss .dot{background:var(--bad)} .rchip.tie .dot{background:var(--faint)}
.result-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}

/* type colors */
.t-bug{background:#92bc2c}.t-dark{background:#595761}.t-dragon{background:#0c69c8}.t-electric{background:#eab911}
.t-fairy{background:#ee90e6}.t-fighting{background:#d3425f}.t-fire{background:#fba54c}.t-flying{background:#7ab9e0}
.t-ghost{background:#5f6dbc}.t-grass{background:#5fbd58}.t-ground{background:#da7c4d}.t-ice{background:#75d0c1}
.t-normal{background:#a0a29f}.t-poison{background:#b763cf}.t-psychic{background:#fa8581}.t-rock{background:#c9bb8a}
.t-steel{background:#5695a3}.t-water{background:#539ddf}
.asset-failed{display:none}

/* Below ~1440 px the brand, the step rail and the tools strip do not share one row (the English labels need
   about 1400 px): the strip takes a right-aligned second row instead of the steps breaking into lines. */
@media(max-width:1440px){
  .topbar{flex-wrap:wrap;row-gap:.5rem}
  .topbar .tools{order:1;flex-basis:100%;justify-content:flex-end;margin:0}
}
@media(max-width:980px){
  .boss-cols,.battle-cols{grid-template-columns:1fr}
  .rail{position:static}
  .rail{flex-direction:row;flex-wrap:wrap}
  .steps{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .match{flex-direction:column;text-align:center}
}

/* ============ LOADOUT (added; matches pixel theme) ============ */
.loadout-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
.loadout-card{padding:1.1rem;display:flex;flex-direction:column;gap:.7rem}
.loadout-head{display:flex;align-items:center;gap:.6rem}
.loadout-head .mini{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;
  background:var(--surface-2);border-radius:var(--r-sm);box-shadow:0 0 0 2px var(--edge)}
.loadout-head .mini img{max-width:44px;max-height:44px;image-rendering:pixelated}
.loadout-head strong{font-family:var(--font-display);font-size:1.1rem;text-transform:capitalize;text-shadow:0 2px 0 var(--edge)}
.set-field{margin:0}
.set-select{cursor:pointer}
.set-only{display:inline-block;margin-top:.3rem;font-weight:700;color:var(--gold);font-family:var(--font-display)}

/* ============ RESULTS DASHBOARD (added; matches pixel theme) ============ */
.result-hero h1{font-family:var(--font-pixel);font-size:clamp(1.3rem,5vw,2.1rem);line-height:1.3;text-shadow:3px 3px 0 var(--edge)}
.result-hero .eyebrow{color:rgba(255,255,255,.82)}
.result-hero.victory .eyebrow{color:#5a3d00}
.result-record{margin:.7rem 0 0;font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.result-pips{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-top:1.1rem}
.rpip{width:26px;height:9px;background:rgba(255,255,255,.3);box-shadow:0 0 0 2px var(--edge)}
.rpip.win{background:var(--good)}.rpip.loss{background:var(--bad)}.rpip.tie{background:var(--gold)}
.result-hero.victory .rpip{background:rgba(0,0,0,.18)}.result-hero.victory .rpip.win{background:#2a7d36}

.result-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.1rem;margin-bottom:1.1rem;align-items:start}
.panel-damage,.panel-ladder{padding:1.3rem}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.panel-head h3{font-size:1.1rem}
.panel-note{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:.04em;color:var(--faint);text-transform:uppercase}

.damage-bars{display:flex;flex-direction:column;gap:.75rem}
.dmg-row{display:grid;grid-template-columns:9.5rem 1fr 5.2rem;align-items:center;gap:.8rem}
.dmg-mon{display:flex;align-items:center;gap:.45rem;min-width:0}
.asset-host.mini{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center}
.asset-host.mini img{max-width:100%;max-height:100%;image-rendering:pixelated}
.dmg-name{font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.mvp-tag{font-family:var(--font-pixel);font-size:.42rem;color:#1a1430;background:var(--gold);border-radius:var(--r-sm);padding:.2rem .4rem;border:2px solid var(--edge)}
.dmg-track{height:14px;background:var(--surface-2);box-shadow:0 0 0 2px var(--edge);overflow:hidden}
.dmg-track i{display:block;height:100%;background:var(--violet);transform-origin:left;animation:growbar .5s steps(6) both}
.dmg-row.mvp .dmg-track i{background:var(--gold)}
.dmg-num{text-align:right}
.dmg-num b{font-family:var(--font-display);font-weight:700;font-size:.98rem}
.dmg-num small{display:block;font-family:var(--font-pixel);font-size:.42rem;color:var(--faint)}
@keyframes growbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.result-side{display:flex;flex-direction:column;gap:1.1rem}
.mvp-card{padding:1.2rem;border-color:var(--gold);background:linear-gradient(180deg,rgba(255,204,62,.14),var(--surface))}
.score-card{padding:1.2rem}
.score-total{display:flex;align-items:baseline;gap:.6rem;margin:.3rem 0 .2rem}
.score-total .v{font-family:var(--font-pixel);font-size:1.9rem;color:var(--gold);text-shadow:2px 2px 0 var(--edge)}
.score-total .k{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.score-rows{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.25rem;font-size:.82rem;color:var(--muted)}
.score-rows li{display:flex;justify-content:space-between;gap:.6rem}
.score-rows b{color:var(--ink)}
.score-submit{display:flex;gap:.5rem;margin-top:.9rem;align-items:center;flex-wrap:wrap}
.score-status{margin:.5rem 0 0;font-size:.82rem;color:var(--muted);min-height:1.2em}
.board-card{text-align:left}
.board-list{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.board-list li{display:grid;grid-template-columns:2rem 1fr auto;gap:.6rem;align-items:center;font-size:.9rem;padding:.45rem .5rem;border-radius:var(--r-sm);border:2px solid transparent}
.board-list li.me{border-color:var(--gold);background:var(--surface-2)}
.board-list .rank{font-family:var(--font-pixel);font-size:.55rem;color:var(--faint)}
.board-list li:nth-child(1) .rank{color:var(--gold)}
.board-list .score{font-family:var(--font-pixel);font-size:.6rem;color:var(--gold)}
.board-who{display:grid;gap:.15rem;min-width:0}
.board-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-team{display:flex;gap:.1rem;flex-wrap:wrap}
.board-team img{width:36px;height:36px;image-rendering:pixelated;margin:-4px 0}
.board-noicon{width:36px;height:36px}
.board-list small{display:block;color:var(--faint);font-size:.72rem}
.board-more{margin:.8rem 0 0;text-align:center}
.mvp-body{display:flex;align-items:center;gap:.9rem;margin-top:.5rem}
.asset-host.mvp-sprite{width:84px;height:84px;flex:0 0 84px;display:grid;place-items:center}
.asset-host.mvp-sprite img{max-width:100%;max-height:100%;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(8,6,18,.4))}
.mvp-meta strong{font-family:var(--font-display);font-size:1.15rem;text-transform:capitalize}
.mvp-share{font-family:var(--font-pixel);font-size:1.4rem;color:var(--gold);margin:.35rem 0 .2rem;text-shadow:2px 2px 0 var(--edge)}
.stat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.stat-tiles .stat{padding:.95rem;min-width:0}
.stat.win .v{color:var(--good)}.stat.loss .v{color:var(--bad)}

.ladder-results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.ladder-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:var(--r-sm);
  background:var(--surface-2);box-shadow:0 0 0 2px var(--edge);border-left:4px solid var(--line)}
.ladder-row.win{border-left-color:var(--good)}.ladder-row.loss{border-left-color:var(--bad)}
.ladder-row.tie{border-left-color:var(--gold)}.ladder-row.pending{opacity:.5}
.ladder-row .ln{font-family:var(--font-pixel);font-size:.5rem;color:var(--faint);width:1.5rem;text-align:center}
.ladder-row .lname{font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.ladder-row .lres{font-family:var(--font-pixel);font-size:.46rem;color:var(--muted)}
#draft-status{color:var(--bad)}

@media(max-width:820px){.result-grid{grid-template-columns:1fr}.ladder-results{grid-template-columns:1fr}.dmg-row{grid-template-columns:7.5rem 1fr 4.6rem}}
@media(prefers-reduced-motion:reduce){.dmg-track i{animation:none}}


/* ---- GEN × TYPE SLOT ROLLER (title mini-game) ---- */
.roller{position:relative;z-index:3;margin:1.7rem auto 0;width:min(780px,94vw);
  background:var(--surface);border:4px solid var(--frame);border-radius:18px;
  box-shadow:0 0 0 4px var(--edge), inset 0 0 0 4px var(--edge), 6px 8px 0 rgba(8,6,18,.5);
  padding:1.1rem 1.2rem 1.25rem}
.roller-head{font-family:var(--font-pixel);font-size:.62rem;color:var(--gold);
  text-shadow:2px 2px 0 var(--edge);margin:.1rem 0 1rem;letter-spacing:.04em;text-align:center}
.roller-stage{display:grid;grid-template-columns:1fr auto;gap:1.3rem;align-items:stretch}

/* reel bank — GEN × TYPE, both scroll vertically */
.reel-bank{display:flex;align-items:flex-start;justify-content:center;gap:.7rem}
.reel-col{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.reel-tag{font-family:var(--font-pixel);font-size:.5rem;color:var(--muted);
  text-shadow:1px 1px 0 var(--edge);letter-spacing:.06em}
.reel-cross{align-self:center;margin-top:2.1rem;font-family:var(--font-pixel);font-size:1rem;
  color:var(--frame);text-shadow:2px 2px 0 var(--edge)}
.reel-window{height:168px;overflow:hidden;position:relative;
  background:var(--surface-2);border-radius:10px;
  box-shadow:0 0 0 3px var(--edge), inset 0 0 0 3px var(--edge);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.reel-window.gen{width:88px}
.reel-window.type{width:166px}
.reel-window::after{content:"";position:absolute;left:5px;right:5px;top:56px;height:56px;z-index:3;
  border-radius:6px;box-shadow:inset 0 0 0 2px var(--gold);pointer-events:none;opacity:.5;transition:opacity .15s}
.reel.locked .reel-window::after{opacity:1}
.reel.locked .reel-window{box-shadow:0 0 0 3px var(--gold), inset 0 0 0 3px var(--edge)}
.reel-strip{position:absolute;top:0;left:0;right:0;will-change:transform}
.reel-cell{height:56px;display:flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--font-pixel);font-size:1.4rem;color:#fff;text-shadow:2px 2px 0 var(--edge)}
.reel-cell.t{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.3px;
  text-shadow:0 2px 0 var(--edge)}
.reel-cell .dot{width:16px;height:16px;flex:0 0 16px;border-radius:3px;
  box-shadow:inset 0 0 0 2px var(--edge);background:var(--tc,#9099a1);image-rendering:pixelated}

/* summon panel — the "Pokémon" square */
.summon{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.45rem;
  width:236px;min-height:226px;padding:.75rem .6rem .85rem;overflow:hidden;border-radius:12px;
  background:linear-gradient(180deg,#bfe6fb 0 50%,var(--grass-1) 50% 76%,var(--grass-2) 100%);
  box-shadow:0 0 0 3px var(--edge), inset 0 0 0 3px var(--edge), 4px 5px 0 rgba(8,6,18,.4)}
.summon::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.06) 6px 7px)}
.summon-gen{position:absolute;top:.5rem;left:.5rem;z-index:3;font-family:var(--font-pixel);font-size:.46rem;
  color:#fff;background:var(--edge);padding:.32rem .44rem;border-radius:5px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.summon-mon{height:120px;width:auto;image-rendering:pixelated;position:relative;z-index:2;
  filter:drop-shadow(3px 4px 0 rgba(8,6,18,.34))}
.summon-mon.spinning{opacity:0;transform:scale(.55)}
.summon-mon.pop{animation:monpop .34s steps(4)}
@keyframes monpop{0%{opacity:0;transform:translateY(14px) scale(.7)}100%{opacity:1;transform:none}}
.summon-name{font-family:var(--font-pixel);font-size:.56rem;color:#15233f;text-align:center;line-height:1.5;
  position:relative;z-index:2;min-height:1.5em;text-shadow:1px 1px 0 rgba(255,255,255,.55)}
.summon-empty{font-family:var(--font-pixel);font-size:.5rem;color:#1d3354;line-height:1.9;text-align:center;
  position:relative;z-index:2;padding-bottom:2.2rem;opacity:.78}
.tpills{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.tpill{font-family:var(--font-pixel);font-size:.42rem;color:#fff;padding:.3rem .42rem;border-radius:5px;
  background:var(--tc,#9099a1);box-shadow:inset 0 0 0 2px var(--edge);text-shadow:1px 1px 0 var(--edge);letter-spacing:.02em}
.roller-foot{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.1rem}
.roller-hint{font-family:var(--font-pixel);font-size:.44rem;color:var(--faint);line-height:1.7;text-align:left}
@media(max-width:560px){
  .roller-stage{grid-template-columns:1fr;gap:1.1rem;justify-items:center}
  .summon{width:100%;max-width:320px}
  .roller-foot{flex-direction:column;align-items:stretch}
}

/* raw PokéPaste shown directly in draft candidate + loadout cards */
.pokepaste-set{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}
.setbox .pokepaste-set{color:var(--ink)}

/* results: gently bob the MVP + damage sprites, and make finished ladder rows clickable */
/* subtle RPG-style idle bob — a tiny 2-frame pixel hover */
@keyframes sbob{0%,50%{transform:translateY(0)}50.001%,100%{transform:translateY(-2px)}}
.asset-host.mvp-sprite img{animation:sbob 1.1s steps(1) infinite}
.dmg-mon .asset-host.mini img{animation:sbob 1.1s steps(1) infinite}
.dmg-row:nth-child(2n) .asset-host.mini img{animation-delay:-.55s}
.ladder-row.clickable{cursor:pointer;transition:transform .06s steps(2),filter .1s}
.ladder-row.clickable:hover{filter:brightness(1.18);transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.asset-host.mvp-sprite img,.dmg-mon .asset-host.mini img{animation:none}}

/* ============ POOL — Type × Gen matrix + cell panel ============
   Same window-box theme as every other screen (Pixelify Sans, rounded
   red-orange frames, the shared tokens); colour only where it means
   something: gold = selected / rare, type colours on type labels and moves. */
.pr{font-family:var(--font-body);font-size:1rem;line-height:1.35}
.pr-box{background:var(--surface);border:3px solid var(--frame);border-radius:var(--r);color:var(--ink);
  box-shadow:0 0 0 3px var(--edge), inset 0 0 0 3px var(--edge), 5px 6px 0 rgba(8,6,18,.5)}
.pool-wrap{display:grid;grid-template-columns:340px minmax(0,600px);justify-content:center;gap:1.2rem;max-width:1240px;margin:0 auto;padding:clamp(1.1rem,3vw,2.4rem)}
/* detail panel */
.pool-detail{padding:1rem 1.1rem 1.1rem;align-self:start;display:grid;gap:.7rem;align-content:start}
.cell-head{display:flex;align-items:center;gap:.5rem;color:var(--muted);flex-wrap:wrap}
.cell-gen{color:var(--ink);font-weight:700}
.cell-mons{display:grid;grid-template-columns:repeat(auto-fill,56px);gap:6px;padding-bottom:.7rem;border-bottom:2px solid var(--border)}
.cell-mons .pmon{width:56px;height:56px}
.cell-mons .pmon img{width:48px;height:48px}
.cell-mons .pmon.off{opacity:.35}
.pool-art{display:grid;grid-template-columns:112px 1fr;gap:.8rem;align-items:center}
.pool-id{display:grid;gap:.3rem;min-width:0}
.pool-dex{font-family:var(--font-pixel);font-size:.55rem;color:var(--gold);letter-spacing:.06em;text-shadow:1px 1px 0 var(--edge)}
/* gen5 sprites are 96px: shown at 1× (and 0.5× in the strip) so the pixels stay even */
.pool-sprite{height:112px;display:grid;place-items:center;background:var(--surface-2);border:2px solid var(--edge);border-radius:var(--r-sm)}
.pool-sprite img{width:96px;height:96px;object-fit:contain;image-rendering:pixelated}
.pool-name{font-size:1.7rem;line-height:1.05;overflow-wrap:anywhere}
.cell-link{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.cell-link:hover{color:var(--gold)}
.pool-types{display:flex;gap:.3rem;flex-wrap:wrap}
.ptype{font-family:var(--font-pixel);font-size:.5rem;text-transform:uppercase;color:#fff;padding:.35rem .5rem;border:2px solid var(--edge);border-radius:6px;line-height:1;text-shadow:1px 1px 0 var(--edge)}
.pool-rows{margin:0;display:grid;gap:.25rem}
.pool-rows div{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.pool-rows dt{color:var(--muted);flex:0 0 auto}
.pool-rows dd{margin:0;text-align:right;min-width:0}
.pool-rows .r1{color:#9fd36a}.pool-rows .r2{color:#7ab9e0}.pool-rows .r3{color:var(--gold)}
/* sets: one tab per selectable set (overrides first, then the source's), the open one shown below */
.pool-set{border-top:2px solid var(--border);padding-top:.7rem;display:grid;gap:.45rem}
.pool-set-head{color:var(--muted)}
.pool-sets{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;list-style:none}
.stab{font:inherit;font-size:.9rem;color:var(--muted);padding:.25rem .6rem;border:2px solid var(--border);border-radius:6px;background:var(--surface-2);cursor:pointer;line-height:1.25;text-align:left}
.stab:hover{color:var(--ink)}
.stab.on{color:var(--ink);border-color:var(--gold);box-shadow:0 0 0 2px var(--edge)}
.pool-kv{color:var(--muted)}
.pool-moves{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.pmove{padding:.3rem .4rem;border:2px solid var(--edge);border-radius:6px;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 0 var(--edge);font-weight:700}
.pool-empty{color:var(--muted);margin:0}
/* rarity tabs */
.frow{display:flex;align-items:center;flex-wrap:wrap;gap:2px 2px}
.flabel{min-width:64px;flex:0 0 auto;margin-right:6px;color:var(--gold);font-weight:700}
.ftab{font:inherit;color:var(--muted);padding:.2rem .6rem;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.ftab:hover{color:var(--ink)}
.ftab.on{color:var(--ink);border-color:var(--gold);background:var(--surface-2)}
.ftab .dot{width:10px;height:10px;background:var(--tc);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
/* grid */
.pool-gridbox{padding:.8rem 1rem 1rem;align-self:start}
.pool-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-bottom:.6rem}
.pool-summary{margin:0;color:var(--muted);min-height:1.3em}
.pmon{width:64px;height:64px;position:relative;background:var(--surface-2);border:2px solid var(--edge);border-radius:6px;padding:0;cursor:pointer;
  display:grid;place-items:center;transition:none}
.pmon img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.pmon:hover{border-color:var(--muted)}
.pmon.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.pmon .cost{position:absolute;top:1px;left:4px;line-height:1;font-size:.85rem;color:var(--muted);text-shadow:1px 1px 0 var(--edge)}
.pmon .cost.r1{color:#9fd36a}.pmon .cost.r2{color:#7ab9e0}.pmon .cost.r3{color:var(--gold)}
@media(max-width:900px){
  /* phone: the matrix first, the cell panel under it (a cell click scrolls to it) */
  .pool-wrap{grid-template-columns:1fr;padding:10px}
  .pool-gridbox{order:-1}
  .cell-mons{grid-template-columns:repeat(auto-fill,52px)}
  .cell-mons .pmon{width:52px;height:52px}
}
/* pool matrix: the Type × Gen table, the landing view of the pool */
.pool-matrix{display:grid;grid-template-columns:104px repeat(9,minmax(36px,1fr));gap:3px}
.mhead{color:var(--muted);text-align:center;line-height:24px}
.mhead.on{color:var(--gold)}
.mtype{display:flex;align-items:center;gap:4px;color:var(--muted);white-space:nowrap;overflow:hidden}
.mtype.on{color:var(--gold)}
.mtype .dot{width:10px;height:10px;flex:0 0 auto;background:var(--tc);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.mcell{position:relative;height:36px;font:inherit;color:var(--ink);background:var(--surface-2);border:2px solid var(--edge);border-radius:6px;padding:0;cursor:pointer}
.mcell:hover{border-color:var(--muted)}
.mcell.thin{color:var(--muted);background:transparent}
.mcell.zero{color:var(--faint)}
.mcell.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--edge)}
.mcell.none{color:var(--faint);background:transparent;border-color:transparent;text-align:center;line-height:36px;cursor:default}
.mstar{position:absolute;top:-1px;right:2px;font-size:12px;line-height:1;color:var(--gold)}
.mcell:has(.mstar){padding-right:10px}
@media (max-width:600px){.pool-matrix{grid-template-columns:84px repeat(9,1fr);gap:2px}.mcell{height:30px}.mcell.none{line-height:30px}.mcell:has(.mstar){padding-right:6px}}