:root{--paper:#f4f1e8;--ink:#20251f;--muted:#777c70;--green:#c4f35b;--purple:#9183df;--line:#dcded1;--font:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans CJK JP',sans-serif;color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:#d7dbce;color:var(--ink);font-family:var(--font);overscroll-behavior:none}button,a{color:inherit;font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #7160c4;outline-offset:2px}.game-shell{width:100%;max-width:480px;height:100dvh;min-height:520px;max-height:1000px;margin:auto;background:var(--paper);display:grid;grid-template-rows:58px 58px minmax(130px,1fr) 32px 66px 42px clamp(200px,30dvh,280px) 28px;padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom);box-shadow:0 0 80px #303a2520;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.6px;line-height:1}.brand small{display:block;font-size:8px;letter-spacing:2.4px;margin-top:6px}.brand-icon{width:31px;height:32px;display:flex;align-items:center;background:var(--ink);color:var(--green);font-size:25px;font-weight:900;letter-spacing:-8px;padding-left:4px;transform:skew(-7deg)}.brand-icon span{transform:translateY(4px);color:var(--paper)}.top-actions{display:flex;gap:8px}.icon-button{background:none;border:1px solid #b8bead;width:30px;height:30px;border-radius:50%;font-weight:700;font-size:16px}.hud{display:grid;grid-template-columns:1fr 68px 1fr;gap:10px;align-items:center}.fighter-name{display:flex;justify-content:space-between;font-size:10px;margin-bottom:6px;letter-spacing:1px}.fighter-name span{color:var(--muted);font-size:10px}.health-track{height:10px;background:#e0e1d8;overflow:hidden;transform:skewX(-10deg)}.health-fill{height:100%;background:#93c83e;transition:width .18s;width:100%}.cpu .health-fill{background:var(--purple);margin-left:auto}.timer{text-align:center;align-self:center}.timer strong{font-size:28px;line-height:1;font-weight:700;letter-spacing:-2px}.timer span{display:block;font-size:6px;letter-spacing:1px;margin-top:4px;white-space:nowrap}.arena{position:relative;overflow:hidden;border:1px solid #c9cebc;border-radius:3px;background:#e5e8d9;isolation:isolate;min-height:0}.arena canvas{width:100%;height:100%;display:block}.arena-heading{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;font-weight:600;color:#58654d}.live-dot:before{content:'';display:inline-block;background:#839b61;border-radius:50%;width:5px;height:5px;margin-right:5px}.arena-bottom{position:absolute;bottom:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;font-size:9px;gap:4px}.arena-bottom>span{padding:4px 7px;background:#f4f1e8cf;border:1px solid #cbd2bc;border-radius:2px;white-space:nowrap}.arena-bottom>span:nth-child(2){background:transparent;border:0;font-size:8px;color:#69745f}.announcement{position:absolute;top:26%;left:0;right:0;text-align:center;pointer-events:none;font-weight:900;font-size:clamp(18px,5vw,27px);letter-spacing:2px;text-shadow:0 2px var(--paper)}.announcement.flash{animation:pop .3s ease-out}.battle-note{display:flex;align-items:center;gap:6px;font-size:9px;white-space:nowrap;overflow:hidden;letter-spacing:.1px}.note-dot{width:5px;height:5px;background:#899777;border-radius:50%;flex:none}.composer{display:flex;gap:10px;padding:5px 0 8px;min-width:0}.input-wrap{flex:1;min-width:0;border-bottom:2px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:1px 0 5px}.input-label{font-size:8px;letter-spacing:.6px;color:var(--muted);white-space:nowrap}output{font-size:23px;line-height:1.3;font-weight:700;letter-spacing:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}output:after{content:'';display:inline-block;width:2px;height:20px;vertical-align:-1px;background:#8fb544;margin-left:3px;animation:blink 1s steps(2,start) infinite}.placeholder{font-size:16px;letter-spacing:1px;color:#b1b4a9;font-weight:500}.confirm{width:85px;border:1px solid var(--ink);background:var(--green);border-radius:3px;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 3px 0 var(--ink);margin-bottom:3px}.confirm span{font-size:22px}.confirm:disabled{background:#e4e6dd;border-color:#b9bfaf;color:#969f8a;box-shadow:0 3px 0 #bdc3b4;cursor:default}.confirm:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.suggestions{display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);overflow:hidden}.suggestion-label{font-size:8px;color:#848d78;writing-mode:vertical-rl;letter-spacing:1px;flex:none}#candidates{display:flex;gap:5px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.candidate{font-size:11px;white-space:nowrap;display:inline-block;padding:5px 7px;background:#e7e9df;border-radius:3px;user-select:none;pointer-events:none}.candidate.exact{background:var(--green);font-weight:700}.no-candidate{font-size:11px;color:var(--muted)}.view-only{font-size:7px;color:#8c9483;white-space:nowrap}.keyboard{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:6px;padding:3px 0 5px;touch-action:none;user-select:none;-webkit-user-select:none}.kana-key{position:relative;border:1px solid #c8cebd;border-radius:5px;background:#fcfcf7;box-shadow:0 2px 0 #c1c8b3;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;padding:0;color:#293122}.kana-key .kana{font-family:'Noto Sans JP',sans-serif;font-size:23px;font-weight:500;line-height:1.25}.kana-key .sub{font-size:8px;color:#9aa18e;letter-spacing:3px;line-height:1.5}.kana-key.utility{background:#e1e5d8}.kana-key.utility .kana{font-size:18px}.kana-key.active{background:var(--green);border-color:#8cad53;transform:translateY(1px);box-shadow:0 1px 0 #9cae82}.footer{font-size:7px;display:flex;justify-content:space-between;align-items:center;color:#87907b;letter-spacing:.3px}.footer span:last-child{letter-spacing:1px;font-size:6px}.flick-guide{position:fixed;width:156px;height:156px;pointer-events:none;z-index:20;display:none;filter:drop-shadow(0 4px 8px #19241025)}.flick-guide.show{display:block}.flick-guide span{position:absolute;width:50px;height:50px;background:#f9fbf0;border:1px solid #a1ae88;display:grid;place-items:center;font-size:23px;border-radius:5px;color:var(--ink)}.flick-guide span.selected{background:var(--green);border-color:#526c2e}.flick-guide span:nth-child(1){left:53px;top:53px}.flick-guide span:nth-child(2){left:0;top:53px}.flick-guide span:nth-child(3){left:53px;top:0}.flick-guide span:nth-child(4){left:106px;top:53px}.flick-guide span:nth-child(5){left:53px;top:106px}dialog{border:1px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);font-family:var(--font);width:calc(100% - 32px);max-width:416px;max-height:calc(100dvh - 28px);padding:24px;box-shadow:7px 7px 0 #20251f55;overflow-y:auto}dialog::backdrop{background:#20251f7a;backdrop-filter:blur(5px)}.menu-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.eyebrow{font-size:8px;font-weight:700;letter-spacing:1.3px}.edition{font-size:6px;border:1px solid #bfc8ac;padding:4px;white-space:nowrap}h1{font-size:clamp(34px,9vw,43px);line-height:1.3;letter-spacing:-2px;margin:23px 0 15px;font-weight:900}h1 span{background:linear-gradient(transparent 58%,var(--green) 58%);padding-right:5px}h2{font-size:30px;letter-spacing:-1px;margin:20px 0 10px}.menu-lead,dialog p{font-size:11px;line-height:1.9;color:#68705e}.command-list{border-top:1px solid #cbd0bf;margin:20px 0 12px}.command-list>div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce0d3;padding:9px 0;gap:8px}.command-list b{font-size:13px}.command-list span{font-size:10px;color:#737d66}.menu-tip{font-size:10px!important}.primary-button,.secondary-button{width:100%;border:1px solid var(--ink);border-radius:3px;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px}.primary-button{background:var(--green);margin:18px 0 10px;box-shadow:0 3px 0 var(--ink)}.primary-button>span{font-size:20px;line-height:1}.secondary-button{background:transparent;margin-bottom:8px}.secondary-button>span{font-size:9px;font-weight:400;color:#727c64}.keyboard-tip{font-size:8px!important;text-align:center;margin-bottom:0;color:#959c8a}.text-button{display:block;background:none;border:none;text-decoration:underline;font-size:11px;margin:18px auto 0}.shake{animation:shake .2s linear}@keyframes blink{to{visibility:hidden}}@keyframes pop{from{transform:scale(1.15);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(min-width:600px){body{display:grid;place-items:center;min-height:100dvh}.game-shell{height:min(900px,100dvh);border-left:1px solid #bdc4b0;border-right:1px solid #bdc4b0;padding-left:20px;padding-right:20px}}
@media(max-height:730px){.game-shell{grid-template-rows:44px 47px minmax(112px,1fr) 26px 55px 34px clamp(180px,30dvh,220px) 20px;padding-left:10px;padding-right:10px}.brand{font-size:14px}.brand-icon{height:27px;width:27px;font-size:22px}.brand small{font-size:7px;margin-top:4px}.kana-key .kana{font-size:21px}.menu-top{margin-top:0}dialog{padding:20px}h1{font-size:32px;margin:14px 0 10px}.command-list{margin-top:12px}.command-list>div{padding:6px 0}.primary-button,.secondary-button{padding:11px 13px}.keyboard-tip{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}}
@media(max-height:640px){.game-shell{grid-template-rows:40px 42px minmax(70px,1fr) 24px 50px 32px clamp(140px,27dvh,170px) 18px}.keyboard{gap:4px}.kana-key .kana{font-size:18px}.kana-key .sub{font-size:7px}.footer{font-size:6px}.arena-heading{top:8px}.arena-bottom{bottom:6px}.arena-bottom>span{font-size:8px;padding:3px 4px}.arena-bottom>span:nth-child(2){font-size:7px}}