@font-face{font-family:Pixelify;font-display:swap;src:url('assets/fonts/PixelifyPS-400.ttf')}@font-face{font-family:Pixelify;font-display:swap;src:url('assets/fonts/PixelifyPS-700.ttf');font-weight:700}
:root{--ink:#101a26;--panel:#142331;--line:#344f5b;--muted:#a1b5b8;--gold:#ffbf54;--text:#eff1dc;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0d191c;color:var(--text);font-family:Pixelify,monospace}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:var(--gold)}#game{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;touch-action:none}canvas,img{image-rendering:pixelated}.hidden{display:none!important}.scr{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:10;overflow:auto}.dim{background:#09121bd9;backdrop-filter:brightness(.6)}.box{width:min(560px,100%);max-height:92dvh;overflow:auto;background:var(--panel);border:2px solid var(--line);box-shadow:6px 6px 0 #070e15;padding:28px}.box.wide{width:min(860px,100%)}.box.choices{width:min(960px,100%)}h1,h2,h3,p{margin-top:0}h2{font-size:28px;margin-bottom:18px}p{line-height:1.55}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:2px;margin-bottom:12px}.sub,.controls{color:var(--muted);font-size:14px}.btn{border:2px solid #52616a;background:#263b4a;color:var(--text);padding:12px 20px;box-shadow:0 4px 0 #080f17;transition:background .1s;min-height:44px}.btn:hover{background:#375362}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #080f17}.btn.gold{background:var(--gold);border-color:#ffdb8a;color:#231c1a;font-weight:700}.btn.gold:hover{background:#ffd180}.btn:disabled{opacity:.5;cursor:wait}.btn.small{font-size:14px;padding:7px 14px;min-height:32px}.btn.ghost,.quiet{border:none;background:transparent;color:var(--muted);box-shadow:none}.quiet:hover{color:var(--gold)}.actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}#boot{position:fixed;inset:0;z-index:100;background:#101a26;display:flex;align-items:center;justify-content:center;flex-direction:column}#boot h1{font-size:30px}#load-status{color:var(--muted)}
#scr-menu{background:linear-gradient(90deg,#0b151ee8,#0d1b20a6)}.hub{width:min(1100px,100%);background:#101f2cd9;border:2px solid #405057;box-shadow:8px 8px 0 #081018c9}.hub-top,.hub-bottom{display:flex;gap:20px;align-items:center;padding:17px 25px;font-size:12px;letter-spacing:1px;color:var(--muted);background:#0e1b25aa}.hub-top{justify-content:space-between;border-bottom:1px solid #34444c}.hub-bottom{border-top:1px solid #34444c}.hub-bottom>span{margin-right:auto}.hub-content{display:grid;grid-template-columns:1.2fr 1fr;gap:25px;padding:45px}.hero-copy h1{font-size:clamp(38px,5vw,68px);line-height:.9;letter-spacing:-1px;margin-bottom:24px;text-shadow:4px 4px #070e16}.hero-copy h1 em{font-style:normal;color:var(--gold)}.hero-copy>p:not(.eyebrow){color:#b4c6c5;font-size:17px}.hero-copy .primary{width:250px;margin:10px 0 18px;font-size:22px}.hero-copy .controls{font-size:12px!important;line-height:1.8}.hero-panel{align-self:center;text-align:center;background:#132c33;border:2px solid #31515a;padding:22px;position:relative}.hero-panel:before{content:'';position:absolute;inset:8px;border:1px solid #29454c;pointer-events:none}.hero-panel canvas{display:block;width:192px;height:192px;margin:-15px auto -20px}.hero-panel h2{font-size:24px;margin-bottom:8px}.hero-panel p{font-size:13px;color:var(--muted);margin-bottom:20px}.hero-stats{display:flex;justify-content:space-evenly;border-top:1px solid #34535a;padding-top:16px;font-size:9px;color:#9ab4b5}.hero-stats b{display:block;color:#dfe8d6;font-size:22px;margin-bottom:3px}.touch-copy{display:none}.cards{display:flex;flex-direction:column;gap:12px;margin:20px 0}.card{position:relative;display:flex;align-items:center;gap:18px;border:2px solid #3e5262;background:#1c3041;padding:20px;cursor:pointer;min-height:100px;text-align:left;color:var(--text)}.card:hover{border-color:var(--gold);background:#283e4c;transform:translateX(3px)}.card.evo,.card.bond{border-color:#bc9657}.card .ico{flex:0 0 56px;height:56px;display:grid;place-items:center;background:#0f202e!important;border:1px solid #3b515e}.card .txt{flex:1}.card .nm{font-size:19px;line-height:1.6}.card .ds{font-size:14px;color:var(--muted);line-height:1.5}.card .key{border:1px solid #50616c;padding:4px 9px;font-size:13px;color:var(--gold)}.tag-chip{display:inline-block;font-size:10px;color:#101a26;padding:2px 5px;vertical-align:middle;margin-left:6px;background:var(--gold)}.tag-chip.cat{color:#b4c9c9;background:#304954}.cards.guard .card{opacity:.68;cursor:wait}.cards.done .card:not(.picked){opacity:.4}.summary,.sum-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.summary>div,.sum-stats>div{padding:12px;background:#0f202c}.summary span,.sum-stats span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.summary b{font-size:22px}.pause{width:min(660px,100%)}.move-summary{display:flex;gap:8px;flex-wrap:wrap}.move-summary>span{padding:8px;background:#10222f;font-size:13px}.snd-row{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:14px}.snd-row input{flex:1;accent-color:var(--gold)}#training-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.training-card{border:1px solid #3c5260;background:#102330;padding:14px;display:grid;grid-template-columns:1fr auto;gap:8px}.training-card small{color:var(--muted)}.training-card .btn{grid-row:1/3;grid-column:2;align-self:center}#rotate{position:fixed;inset:0;z-index:90;background:#101a26;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}#rotate-ico{font-size:64px}.toast{position:fixed;z-index:100;bottom:36px;left:50%;transform:translateX(-50%);padding:12px 20px;border:2px solid #5f6858;background:#152633;color:#e5ead3;text-align:center;font-size:14px;pointer-events:none;max-width:85vw}#ach-pop{position:fixed;right:20px;top:20px;z-index:80;pointer-events:none}#ach-pop:empty{display:none}.pix-icon{display:inline-block;vertical-align:middle;object-fit:contain;flex-shrink:0}
@media(pointer:coarse){.touch-copy{display:block}.hero-copy .controls:not(.touch-copy){display:none}.card .key{display:none}}@media(max-width:800px){.scr{padding:12px}.hub-content{padding:24px;gap:15px}.hero-copy h1{font-size:42px}.hero-copy>p:not(.eyebrow){font-size:14px}.hero-panel{padding:12px}.hero-panel canvas{width:144px;height:144px;margin:-10px auto -10px}.hub-top,.hub-bottom{padding:12px;font-size:10px;gap:12px}.hero-panel h2{font-size:20px}.hero-copy .primary{width:220px;min-height:46px;font-size:20px}.hero-copy .controls{font-size:10px!important}.eyebrow{font-size:10px;letter-spacing:1px}.box{padding:20px}.card{padding:14px;min-height:82px}.card .nm{font-size:17px}.card .ds{font-size:12px}.cards{gap:8px;margin:14px 0}h2{font-size:23px}.card .ico{width:42px;height:42px;flex-basis:42px}}@media(max-height:550px){.hub-content{padding:20px 28px}.hub-top,.hub-bottom{padding:9px 16px}.hero-copy h1{font-size:40px;margin-bottom:12px}.hero-copy>p{margin-bottom:8px}.hero-copy .primary{margin:5px 0 10px;min-height:40px;padding:8px 14px}.hero-panel canvas{width:128px;height:128px;margin:-15px auto}.hero-panel p{margin-bottom:10px}.hero-panel h2{margin-bottom:3px}.hero-stats{padding-top:9px}.box{max-height:94dvh;padding:16px 22px}.choices h2{margin-bottom:8px}.choices .cards{margin:10px 0;gap:7px}.choices .card{padding:10px 15px;min-height:62px}.card .ico{height:38px;flex-basis:38px}.card .nm{font-size:15px}.card .ds{font-size:11px}.choices .eyebrow{margin-bottom:5px}}@media(max-width:550px) and (orientation:portrait){.hub-content{grid-template-columns:1fr;padding:24px}.hero-panel{display:none}.hub-bottom{flex-wrap:wrap}.hub-bottom>span{flex-basis:100%}#training-list{grid-template-columns:1fr}}
/* Five distinct loadouts share one compact, keyboard-accessible roster. */
.hub{margin:auto}.hub-content{padding:26px 36px}.hero-panel{padding:16px}.hero-panel canvas{width:160px;height:160px;margin:-18px auto -12px}.hero-panel #hero-role{color:var(--gold);margin-bottom:7px}.hero-panel #hero-passive{font-size:12px;line-height:1.45;max-width:330px;margin:0 auto 14px}.hero-panel h2{margin-bottom:6px}.roster-panel{padding:12px 25px 14px;border-top:1px solid #34444c;background:#0c1a25b3}#character-select{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.character-card{display:grid;grid-template-columns:40px 1fr;column-gap:8px;align-items:center;min-height:66px;padding:8px;background:#172d38;border:2px solid #36515a;color:var(--text);text-align:left;min-width:0}.character-card canvas{grid-row:1/3;width:40px;height:40px}.character-card span{font-size:15px}.character-card small{font-size:9px;color:#a8bec1;line-height:1.3}.character-card:hover,.character-card:focus-visible{border-color:#a4c4bd;outline:none}.character-card[aria-selected=true]{background:#314039;border-color:var(--gold);box-shadow:inset 0 -3px #8e6836}.character-card[data-state=loading]{border-color:#a2e4eb}.character-card[data-state=error]{border-color:#f57777}#character-status{font-size:12px;line-height:1.4;color:#b6cdcb;margin:9px 0 7px;min-height:17px}#hero-kit{display:flex;gap:5px;flex-wrap:wrap}#hero-kit span{font-size:10px;padding:3px 6px;color:#a7c5c7;background:#152d35;border:1px solid #31505a}
@media(max-width:800px){.hub-content{padding:20px 24px}.roster-panel{padding:10px 12px}.character-card{grid-template-columns:32px 1fr;gap:5px;padding:6px;min-height:60px}.character-card canvas{width:32px;height:32px}.character-card span{font-size:12px}.character-card small{font-size:8px}.hero-panel #hero-passive{font-size:10px}}
@media(max-height:550px){#scr-menu{align-items:flex-start}.hub-content{padding:12px 22px;gap:18px}.hero-panel{display:grid;grid-template-columns:92px 1fr;gap:8px;padding:10px;text-align:left}.hero-panel canvas{width:92px;height:112px;margin:-6px auto}.hero-panel h2{font-size:20px}.hero-panel #hero-role{font-size:11px;line-height:1.2;margin-bottom:4px}.hero-panel #hero-passive{font-size:10px;line-height:1.25;margin:0}.hero-stats{grid-column:1/-1;padding-top:6px;text-align:center}.hero-stats b{font-size:18px;margin:0}.hero-copy .eyebrow{margin-bottom:7px}.hero-copy h1{font-size:37px;margin-bottom:9px}.hero-copy>p:not(.eyebrow){font-size:12px;line-height:1.4}.hero-copy .controls{font-size:10px!important;line-height:1.4}.hero-copy .primary{margin:3px 0 6px;min-height:44px}.roster-panel{padding:7px 14px}.character-card{grid-template-columns:30px 1fr;min-height:48px;padding:5px;gap:5px}.character-card canvas{width:30px;height:30px}.character-card span{font-size:13px}.character-card small{font-size:8px}#character-status{font-size:10px;margin:5px 0 0;min-height:12px}#hero-kit{display:none}.hub-top,.hub-bottom{padding:8px 16px}}
@media(max-width:550px) and (orientation:portrait){.hero-panel{display:none}.character-card{grid-template-columns:1fr;text-align:center;justify-items:center}.character-card canvas{grid-row:auto}.character-card small{display:none}.character-card span{font-size:10px}.roster-panel{padding:10px}.hero-copy .primary{width:100%}}

@media(pointer:coarse){.quiet{min-height:44px;min-width:44px;padding:10px 8px}.hub-top,.hub-bottom{gap:8px;padding-block:4px}}

/* The dash is a 54px skill slot, with the same 32px bitmap as the move bar. */
#dash-action{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:8;width:54px;height:54px;padding:0;border:2px solid #a7c5c7;border-radius:12px;background:rgba(20,30,50,.95);color:#eff1dc;overflow:hidden;touch-action:none;user-select:none}
#dash-action[hidden]{display:none}
#dash-action .dash-icon{position:absolute;left:9px;top:5px;width:32px;height:32px;pointer-events:none}
#dash-action[data-character=sasuke] .dash-icon,#dash-action[data-character=itachi] .dash-icon{background:#a4b0a9;border-radius:4px}
#dash-action .dash-mask{position:absolute;inset:0 0 auto;background:rgba(0,0,0,.65);pointer-events:none}
#dash-action .dash-time{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:7px;font:700 19px Pixelify,monospace;text-shadow:1px 1px #000,-1px -1px #000;pointer-events:none}
#dash-action kbd{position:absolute;bottom:2px;left:0;right:0;font:700 10px Pixelify,monospace;line-height:12px;text-align:center;pointer-events:none}
#dash-action.cooling{border-color:#526777}
#dash-action:not(.cooling):hover{border-color:#eff1dc}
#dash-action:focus-visible{outline:2px solid #ffbf54;outline-offset:3px}
#dash-action.touch{right:max(18px,env(safe-area-inset-right));bottom:calc(94px + env(safe-area-inset-bottom))}
#dash-action.touch kbd{display:none}
#dash-action.touch .dash-icon{top:9px}
#dash-action.touch .dash-time{padding-bottom:0}