:root{
  --ink:#1b1209; --ink-2:#3a2814; --cream:#f7efd9; --cream-2:#e9dcb8; --paper:#fffaf0;
  --orange:#e08a1e; --orange-d:#a45d0b; --rba:#b96c00; --muted:#7a6448;
  --hp-g:#3fae4a; --hp-y:#e7b416; --hp-r:#d23a2a;
  --t-punch:#c8432b; --t-flow:#2f6fc9; --t-konter:#7a4bc2; --t-technik:#2f8a4a; --t-style:#d27a10;
  --font-d:'Silkscreen', 'Pixelify Sans', monospace; --font-b:'Pixelify Sans', ui-monospace, monospace;
  --r:4px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#0d0905 radial-gradient(ellipse at 50% -10%, #3a2108 0%, #0d0905 60%);color:var(--ink);font-family:var(--font-b);font-size:16px;-webkit-font-smoothing:none;}
button{font:inherit;color:inherit;cursor:pointer}
img{image-rendering:pixelated}
#app{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:16px 10px 24px}
#console{width:100%;max-width:960px}
#console.battle-mode{max-width:max(560px,min(960px,calc((100vh - 290px) * 1.5)))}
[hidden]{display:none!important}
#screen{position:relative;background:var(--ink);border:4px solid var(--ink);outline:3px solid var(--orange-d);border-radius:6px;overflow:hidden;min-height:min(640px,calc(100vh - 80px))}
.view{display:none;position:relative;min-height:inherit}
.view[data-active]{display:block}
.muted{color:var(--muted)}
.h-display{font-family:var(--font-d);font-weight:700;font-size:22px;letter-spacing:.02em;margin:0 0 12px;color:var(--ink)}

/* buttons */
.btn{border:3px solid var(--ink);background:var(--paper);padding:10px 14px;border-radius:var(--r);text-align:left;box-shadow:0 3px 0 var(--ink);transition:transform .08s, box-shadow .08s, background .12s;font-size:16px}
.btn:hover,.btn:focus-visible{background:#ffe9c4;outline:none}
.btn:focus-visible{box-shadow:0 3px 0 var(--ink),0 0 0 3px var(--orange)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--orange);color:var(--ink);font-weight:700}
.btn-primary:hover{background:#f3a23c}
.btn-ghost{background:transparent;border-color:var(--ink-2);color:var(--ink-2);box-shadow:none}
.corner-back{position:absolute;right:14px;top:14px;background:var(--paper)}

/* title */
#v-title{background:#000}
.title-art{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated;filter:saturate(1.05)}
.title-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 100%)}
.title-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:9% 16px 0;min-height:inherit}
.logo{margin:0;font-family:var(--font-d);font-weight:700;line-height:.9;display:flex;gap:.25em;font-size:clamp(48px,11vw,108px);letter-spacing:.02em}
.logo-rba{color:var(--orange);text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000}
.logo-rpg{color:var(--cream);text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000}
.logo-sub{font-family:var(--font-d);color:var(--cream);font-size:14px;margin:10px 0 0;text-shadow:2px 2px 0 #000;text-transform:uppercase}
.btn-start{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream);border-color:var(--orange);font-family:var(--font-d);font-size:18px;box-shadow:0 4px 0 #000;text-align:center}
.btn-start:hover{background:#2a1a08}
.btn-start:active{transform:translate(-50%,2px)}
.blink{animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{50%{opacity:.35}}

/* panels */
.panel{background:var(--cream);margin:0;min-height:inherit;padding:22px;border:0}
.menu-panel{display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto;background:transparent}
#v-menu{background:var(--cream) url(img/title.jpg) center/cover;}
#v-menu::before{content:"";position:absolute;inset:0;background:rgba(247,239,217,.9)}
#v-menu .panel{position:relative}
.menu-list{display:flex;flex-direction:column;gap:12px}
.menu-btn{display:flex;flex-direction:column;gap:4px}
.menu-btn b{font-family:var(--font-d);font-size:17px}
.menu-btn span{font-size:15px;color:var(--ink-2)}

/* roster select */
.select-panel{display:flex;flex-direction:column;gap:12px}
.select-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.select-head .h-display{margin:0}
.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.card{position:relative;border:3px solid var(--ink);background:var(--paper);border-radius:var(--r);padding:8px 8px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 3px 0 var(--ink)}
.card img{width:88%;aspect-ratio:1;object-fit:contain}
.card .c-name{font-family:var(--font-d);font-size:13px;font-weight:700;line-height:1.15;min-height:2.3em;display:flex;align-items:center}
.card .c-rank{font-size:13px;color:var(--muted)}
.card .c-types{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.card[aria-pressed="true"]{background:#ffe2b0;border-color:var(--orange-d)}
.card[aria-pressed="true"]::after{content:attr(data-slot);position:absolute;top:6px;left:6px;background:var(--orange);color:var(--ink);font-family:var(--font-d);font-size:13px;border:2px solid var(--ink);width:24px;height:24px;line-height:20px;border-radius:50%}
.card.enemy-pick[aria-pressed="true"]{background:#f5c7bd;border-color:var(--t-punch)}
.select-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
.picked{display:flex;gap:6px}
.picked img{width:44px;height:44px;border:2px solid var(--ink);background:var(--paper);border-radius:3px}
.type{display:inline-block;font-family:var(--font-d);font-size:12px;line-height:1;padding:4px 6px 3px;border-radius:3px;color:#fff;border:2px solid var(--ink);text-transform:uppercase;letter-spacing:.02em}
.type.PUNCH{background:var(--t-punch)}.type.FLOW{background:var(--t-flow)}.type.KONTER{background:var(--t-konter)}.type.TECHNIK{background:var(--t-technik)}.type.STYLE{background:var(--t-style)}

/* dex */
.dex-panel{display:grid;grid-template-columns:230px 1fr;gap:16px;padding-top:58px}
.dex-list{display:flex;flex-direction:column;gap:6px;max-height:560px;overflow:auto;padding-right:4px}
.dex-item{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:15px;box-shadow:0 2px 0 var(--ink)}
.dex-item img{width:34px;height:34px}
.dex-item .no{font-family:var(--font-d);font-size:12px;color:var(--muted);width:30px}
.dex-item[aria-current="true"]{background:#ffe2b0}
.dex-detail{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:16px;min-width:0}
.dx-top{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.dx-top img{width:150px;height:150px;background:var(--cream);border:2px solid var(--ink);border-radius:3px}
.dx-name{font-family:var(--font-d);font-size:24px;font-weight:700;margin:0}
.dx-meta{margin:4px 0 8px;color:var(--ink-2);font-size:15px}
.dx-meta a{color:var(--orange-d);font-weight:700}
.stats{display:grid;grid-template-columns:auto 34px 1fr;gap:4px 8px;align-items:center;font-size:15px}
.stats .bar{height:10px;background:var(--cream-2);border:2px solid var(--ink);border-radius:2px;overflow:hidden}
.stats .bar i{display:block;height:100%;background:var(--orange)}
.stats .v{text-align:right;font-variant-numeric:tabular-nums}
.dx-moves{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mv{border:2px solid var(--ink);border-radius:var(--r);padding:10px;background:var(--cream);display:flex;flex-direction:column;gap:6px;font-size:14px}
.mv-h{display:flex;justify-content:space-between;align-items:center;gap:6px}
.mv-h b{font-family:var(--font-d);font-size:14px}
.mv q{font-size:15px;color:var(--ink);line-height:1.3}
.mv .mv-src{color:var(--muted);font-size:13px}
.mv .mv-src a{color:var(--orange-d)}
.mv .play{align-self:flex-start;padding:4px 10px;font-size:14px;box-shadow:0 2px 0 var(--ink)}
.dx-quote{margin:12px 0 0;font-size:14px;color:var(--ink-2);border-left:4px solid var(--orange);padding:4px 10px;background:var(--cream)}

/* help */
.help-panel{padding:22px 22px 30px;overflow:auto;max-height:calc(100vh - 80px)}
.help-panel h3{font-family:var(--font-d);font-size:16px;margin:18px 0 8px}
.help-panel p,.help-panel li{font-size:16px;line-height:1.45;max-width:72ch}
.help-panel table{border-collapse:collapse;font-size:15px}
.help-panel td,.help-panel th{border:2px solid var(--ink);padding:5px 8px;text-align:left;background:var(--paper)}
.chart td.s{background:#cfe9c6}.chart td.w{background:#f3c5bb}

/* tour */
.tour-panel{display:flex;flex-direction:column;gap:14px}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.rung{border:3px solid var(--ink);border-radius:var(--r);padding:8px;background:var(--paper);font-size:14px;min-height:76px}
.rung b{display:block;font-family:var(--font-d);font-size:13px}
.rung.done{background:#cfe9c6}.rung.now{background:#ffe2b0;border-color:var(--orange-d)}
.rung.locked{opacity:.55}
.team-row{display:flex;gap:10px;flex-wrap:wrap}
.tm{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:var(--r);padding:6px 10px 6px 6px;background:var(--paper);font-size:15px}
.tm img{width:48px;height:48px}
.tm .lv{color:var(--muted);font-size:13px}
.tour-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.loot{display:flex;gap:8px;flex-wrap:wrap}
.loot span{border:2px solid var(--ink);background:var(--paper);padding:4px 8px;border-radius:3px;font-size:15px}
.swap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}

/* battle */
#v-battle{background:var(--ink)}
.scene{position:relative;width:100%;aspect-ratio:3/2;background-size:100% 100%;image-rendering:pixelated;overflow:hidden;user-select:none}
.sprite-wrap{position:absolute;transform-origin:50% 100%}
.sprite-wrap img{width:100%;display:block;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.sprite-wrap.enemy{width:27%;left:61.5%;bottom:53%}
.sprite-wrap.player{width:31%;left:20%;bottom:21%}
.sprite-wrap.player img{transform:scaleX(-1)}
.hud{position:absolute;background:var(--cream);border:3px solid var(--ink);border-radius:5px 5px 5px 14px;padding:6px 10px 8px;box-shadow:3px 3px 0 rgba(0,0,0,.45);min-width:0}
.hud-enemy{left:3%;top:5%;width:40%}
.hud-player{right:3%;bottom:6%;width:40%;border-radius:5px 5px 14px 5px}
.hud-name{display:flex;justify-content:space-between;gap:6px;font-family:var(--font-d);font-weight:700;font-size:clamp(12px,1.9vw,17px);white-space:nowrap;overflow:hidden}
.hud-name .n{overflow:hidden;text-overflow:ellipsis}
.hud-name .st{font-size:12px;padding:2px 5px;border-radius:3px;color:#fff;background:var(--ink);align-self:center;font-family:var(--font-b);letter-spacing:.03em}
.hud-name .st:empty{display:none}
.hud-lvl{font-size:clamp(12px,1.6vw,15px);margin:1px 0 3px}
.hpbar{display:flex;align-items:center;gap:6px}
.hp-lab{font-family:var(--font-d);font-size:12px;background:var(--ink);color:var(--orange);padding:1px 4px 0;border-radius:2px}
.hp-track{flex:1;height:10px;border:2px solid var(--ink);background:#f1e6c8;border-radius:5px;overflow:hidden}
.hp-fill{height:100%;width:100%;background:var(--hp-g);transition:width .7s steps(24), background-color .2s}
.hp-fill.y{background:var(--hp-y)}.hp-fill.r{background:var(--hp-r)}
.hp-num{text-align:right;font-variant-numeric:tabular-nums;font-size:clamp(12px,1.7vw,16px);margin-top:3px}
.team-dots{position:absolute;display:flex;gap:4px}
.team-dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--orange);display:block}
.team-dots i.ko{background:#6b5a46}
.team-dots i.empty{background:transparent;border-style:dashed}
.enemy-dots{left:4%;top:calc(5% + clamp(70px,10vw,92px))}
.player-dots{right:4%;bottom:calc(6% + clamp(84px,12.5vw,112px))}

/* punchline overlay */
.punch{position:absolute;inset:8px;display:flex;flex-direction:column;justify-content:center;background:#1b1209;color:var(--cream);border:3px solid var(--orange);border-radius:6px;padding:12px 16px 12px;box-shadow:0 6px 0 rgba(0,0,0,.4);z-index:5;animation:pop .18s ease-out}
.punch-meta{font-family:var(--font-d);font-size:12px;color:var(--orange);letter-spacing:.04em;text-transform:uppercase;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.punch-line{margin:6px 0 0;font-size:clamp(16px,2.3vw,21px);line-height:1.3}
.punch-line::before{content:"„"}.punch-line::after{content:"“"}
.punch-eq{display:flex;gap:3px;height:14px;align-items:flex-end;margin-top:8px}
.punch-eq i{width:6px;background:var(--orange);animation:eq .5s ease-in-out infinite alternate;height:4px}
.punch-eq i:nth-child(2){animation-delay:.1s}.punch-eq i:nth-child(3){animation-delay:.25s}.punch-eq i:nth-child(4){animation-delay:.05s}.punch-eq i:nth-child(5){animation-delay:.3s}.punch-eq i:nth-child(6){animation-delay:.15s}.punch-eq i:nth-child(7){animation-delay:.2s}
.punch.silent .punch-eq{display:none}
@keyframes eq{to{height:14px}}
@keyframes pop{from{transform:scale(.97);opacity:0}}

.fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.dmg{position:absolute;font-family:var(--font-d);font-weight:700;font-size:22px;color:#fff;text-shadow:2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);animation:rise .9s ease-out forwards}
.dmg.crit{color:var(--orange);font-size:26px}
@keyframes rise{to{transform:translateY(-40px);opacity:0}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash .25s ease-out}
@keyframes flash{30%{opacity:.7}}

.anim-in-enemy{animation:inE .45s cubic-bezier(.2,.8,.3,1)}
.anim-in-player{animation:inP .45s cubic-bezier(.2,.8,.3,1)}
@keyframes inE{from{transform:translateX(120%)}}
@keyframes inP{from{transform:translateX(-140%)}}
.anim-atk-player{animation:atkP .35s ease-in-out}
.anim-atk-enemy{animation:atkE .35s ease-in-out}
@keyframes atkP{50%{transform:translate(14%,-6%)}}
@keyframes atkE{50%{transform:translate(-14%,6%)}}
.anim-hit{animation:hit .6s steps(6)}
@keyframes hit{0%,33%,66%{opacity:0}16%,50%,84%,100%{opacity:1}}
.anim-faint{animation:faint .6s ease-in forwards}
@keyframes faint{to{transform:translateY(60%);opacity:0;clip-path:inset(0 0 100% 0)}}
.anim-shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4%)}75%{transform:translateX(4%)}}
.anim-buff{animation:buff .6s}
@keyframes buff{50%{filter:brightness(1.6) drop-shadow(0 0 8px var(--orange))}}
.gone{visibility:hidden}

.dialog{position:relative;background:var(--ink);padding:8px;display:grid;grid-template-columns:1fr;gap:8px;min-height:226px}
.textbox{position:relative;background:var(--paper);border:4px double var(--ink);outline:3px solid var(--cream);outline-offset:-8px;border-radius:6px;padding:16px 22px;min-height:120px;cursor:pointer}
.textbox p{margin:0;font-size:clamp(17px,2.2vw,21px);line-height:1.45;white-space:pre-line}
.tb-next{position:absolute;right:16px;bottom:10px;font-size:14px;animation:blink .8s steps(2,start) infinite;visibility:hidden}
.textbox.wait .tb-next{visibility:visible}
.dialog.has-cmd{grid-template-columns:1fr 1.05fr}
.cmd{background:var(--paper);border:4px double var(--ink);border-radius:6px;padding:10px;display:grid;gap:8px;align-content:start}
.cmd.root{grid-template-columns:1fr 1fr}
.cmd.moves{grid-template-columns:1fr 1fr}
.cmd .c{font-family:var(--font-d);font-size:15px;padding:10px 10px;text-align:left;box-shadow:0 2px 0 var(--ink);border-width:2px;min-height:44px}
.cmd .c small{display:block;font-family:var(--font-b);font-size:13px;color:var(--ink-2);margin-top:3px;font-weight:400;letter-spacing:0}
.cmd .c.mvb{display:flex;flex-direction:column;justify-content:space-between;gap:4px;font-size:14px}
.cmd .c.mvb .row{display:flex;justify-content:space-between;align-items:center;gap:6px;font-family:var(--font-b);font-size:13px}
.cmd .c.back{grid-column:1/-1;text-align:center;font-family:var(--font-b);font-size:14px;min-height:36px;padding:6px}
.cmd.list{grid-template-columns:1fr;max-height:260px;overflow:auto}
.cmd.list .c{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--font-b);font-size:15px}
.cmd.list .c img{width:36px;height:36px;margin-right:6px}
.cmd.list .c .l{display:flex;align-items:center}
.cmd .info{grid-column:1/-1;font-size:14px;color:var(--ink-2);border-top:2px dashed var(--cream-2);padding-top:6px;min-height:2.8em}

/* toolbar */
.toolbar{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
.tool{background:#24170a;color:var(--cream);border:2px solid #5a3a12;border-radius:4px;padding:6px 10px;font-size:14px;text-decoration:none;font-family:var(--font-b)}
.tool:hover{border-color:var(--orange)}
.tool[aria-pressed="false"]{opacity:.6}
.tool.src{color:var(--orange)}

@media (max-width:820px){
  .roster{grid-template-columns:repeat(3,1fr)}
  .dex-panel{grid-template-columns:1fr;padding-top:60px}
  .dex-list{flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:6px}
  .dex-item{flex:0 0 auto}
  .dex-item .no{display:none}
  .dx-moves{grid-template-columns:1fr}
  .ladder{grid-template-columns:1fr 1fr}
  .dialog.has-cmd{grid-template-columns:1fr}
  .dialog.has-cmd .textbox{min-height:76px;padding:10px 14px}
}
@media (max-width:480px){
  #app{padding:6px 4px 16px}
  .panel{padding:14px}
  .roster{grid-template-columns:repeat(2,1fr)}
  .dx-top{grid-template-columns:96px 1fr}
  .dx-top img{width:96px;height:96px}
  .hud{padding:4px 6px 5px;border-width:2px}
  .hud-enemy,.hud-player{width:46%}
  .hp-track{height:8px}
  .hud-name .st{font-size:12px;padding:1px 3px}
  .team-dots i{width:9px;height:9px}
  .enemy-dots{top:calc(5% + 58px)}
  .player-dots{bottom:calc(6% + 72px)}
  .punch{padding:8px 10px}
  .cmd .c{font-size:13px;padding:8px}
  .select-foot{flex-wrap:wrap}
  .picked{order:-1;width:100%}
  .ladder{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
.battle-mode #screen{min-height:0}
@media (max-width:600px){
  .scene{aspect-ratio:1/1}
  .sprite-wrap.enemy{width:36%;left:57%;bottom:55%}
  .sprite-wrap.player{width:42%;left:13%;bottom:22%}
  .hud-enemy{top:3%;left:3%;width:50%}
  .hud-player{bottom:3%;right:3%;width:50%}
  .enemy-dots{top:calc(3% + 66px);left:5%}
  .player-dots{bottom:calc(3% + 84px);right:5%}
  .dialog{min-height:0}
}