:root{--paper:#07111f;--paper2:#0e2239;--ink:#eaf6ff;--ink2:#a8bed3;--red:#29add5}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font-family:'Cormorant',Georgia,serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
input{-webkit-user-select:text;user-select:text}
#hud{position:fixed;top:22px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:5;transition:opacity .4s}
#hud.hidden{opacity:0}
#score{font-weight:700;font-size:clamp(46px,8vh,66px);line-height:.9;letter-spacing:.02em}
#score.pulse{animation:sp .35s ease-out}
@keyframes sp{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
#bestHud{margin-top:4px;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--ink2)}
#combo{margin-top:6px;min-height:16px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
#combo.show{opacity:1;transform:translateY(0)}
#combo.hot{font-weight:700;animation:comboPulse .6s ease-out}
@keyframes comboPulse{50%{transform:scale(1.12)}100%{transform:scale(1)}}
#runTag{position:fixed;top:118px;left:50%;transform:translateX(-50%);text-align:center;z-index:5;pointer-events:none;transition:opacity .35s}
#runTag.hidden{opacity:0}
#runNo{display:block;font-size:11px;letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
#runKj{display:block;font-family:'Shippori Mincho',serif;color:var(--red);font-size:31px;letter-spacing:.3em;margin-right:-.3em;line-height:1.15}
#runVn{display:block;font-style:italic;font-size:15px;color:var(--ink);margin-top:2px}
#authPanel{margin-top:14px;padding-top:10px;border-top:1px solid rgba(38,34,28,.2)}
#authState{font-size:12px;color:var(--ink2);font-style:italic;min-height:17px;margin-bottom:5px}
#authOpen,#authLogout{font-size:11px;padding:7px 12px;margin:0 3px}
.authModal{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(38,34,28,.24);transition:opacity .25s,visibility .25s}
.authModal.hidden{opacity:0;visibility:hidden;pointer-events:none}
.authBox{width:min(92vw,360px);background:var(--paper2);border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(38,34,28,.2);padding:26px;text-align:center}
.authBox h2{font-size:25px;margin-bottom:8px}
.authBox input{display:block;width:100%;margin:8px 0;padding:10px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:16px inherit}
.authActions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.authActions .btn{padding:9px 12px;font-size:11px}
#authMsg{min-height:18px;margin-top:10px;font-size:12px;color:var(--ink2);font-style:italic}
#netDot{position:fixed;top:24px;left:20px;z-index:20;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);pointer-events:none}
#netDot i{width:9px;height:9px;border-radius:50%;background:#9a917c;display:block}
#netDot.on i{background:#3f7d4e}
#evBanner{position:fixed;top:106px;left:50%;transform:translate(-50%,-10px);display:flex;align-items:center;gap:13px;background:var(--paper2);border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(38,34,28,.15);padding:8px 18px 8px 12px;z-index:6;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;min-width:250px}
#evBanner.show{opacity:1;transform:translate(-50%,0)}
#evBanner .kanji{font-family:'Shippori Mincho',serif;font-size:31px;color:var(--red);line-height:1}
#evBanner b{display:block;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
#evBanner i{display:block;font-style:italic;font-size:12.5px;color:var(--ink2)}
#evBar{height:3px;background:rgba(38,34,28,.14);margin-top:5px}
#evBarI{display:block;height:100%;background:var(--red);width:100%}
#hint{position:fixed;left:50%;bottom:15%;transform:translateX(-50%);text-align:center;z-index:5;transition:opacity .4s;pointer-events:none;color:var(--ink)}
#hint.hidden{opacity:0}
#hint svg{display:block;margin:0 auto 6px;animation:hf 1.5s ease-in-out infinite}
#hint span{font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink2)}
@keyframes hf{50%{transform:translateY(-7px)}}
.screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;transition:opacity .45s ease,visibility .45s}
.screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
#titleScreen{align-items:center;padding:16px;overflow:auto}
.kanjiBg{position:absolute;top:2%;right:5%;font-family:'Shippori Mincho',serif;font-size:44vh;line-height:1;color:var(--ink);opacity:.05;pointer-events:none}
.panel{position:relative;background:var(--paper2);border:2px solid var(--ink);box-shadow:10px 10px 0 rgba(38,34,28,.13);padding:clamp(22px,4vh,36px) clamp(24px,5vw,52px);text-align:center;max-width:min(92vw,490px);max-height:92vh;overflow-y:auto;touch-action:pan-y;transition:transform .5s cubic-bezier(.18,.9,.24,1)}
.screen.hidden .panel{transform:translateY(16px)}
.panel::before{content:'';position:absolute;inset:7px;border:1px solid rgba(38,34,28,.32);pointer-events:none}
.kana{font-family:'Shippori Mincho',serif;color:var(--red);letter-spacing:.6em;margin-right:-.6em;font-size:15px;margin-bottom:8px}
h1{font-weight:700;font-size:clamp(36px,6.5vh,50px);letter-spacing:.08em;margin-right:-.08em;line-height:1}
h2{font-weight:700;font-size:clamp(26px,4.5vh,34px);letter-spacing:.12em;margin-right:-.12em}
.rule{display:flex;align-items:center;gap:10px;margin:10px auto 10px;width:180px}
.rule i{flex:1;height:1px;background:var(--ink);opacity:.75}
.rule b{width:6px;height:6px;background:var(--red);transform:rotate(45deg)}
.sub{font-style:italic;font-size:clamp(14px,2vh,17px);color:var(--ink2)}
.best{margin-top:8px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink2)}
.selector{margin:8px 0 2px}
.selLabel{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.selGrid{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.selCard{background:var(--paper);border:1.5px solid rgba(38,34,28,.25);padding:5px 8px;cursor:pointer;min-width:52px;text-align:center;transition:all .12s}
.selCard:hover{border-color:var(--ink)}
.selCard.on{background:var(--ink);border-color:var(--ink)}
.selCard .kj{font-family:'Shippori Mincho',serif;font-size:16px;display:block;color:var(--red);line-height:1.1}
.selCard.on .kj{color:var(--paper2)}
.selCard .nm{font-size:9px;letter-spacing:.04em;display:block;margin-top:1px}
.selCard.on .nm{color:var(--paper2)}
.selCard .meta{display:block;font-size:8px;line-height:1.25;color:var(--ink2);margin-top:3px;max-width:112px}
.selCard.on .meta{color:rgba(247,240,222,.78)}
.selCard.locked{opacity:.72}
.selCard.locked .kj{filter:grayscale(.8)}
#coinWallet{display:inline-flex;align-items:center;gap:6px;margin:7px auto 2px;padding:5px 10px;border:1px solid rgba(38,34,28,.28);font-size:12px;letter-spacing:.12em;color:var(--ink2);background:rgba(247,240,222,.42)}
#coinWallet b{color:#9c6d18;font-size:15px}
.btn{font-family:inherit;cursor:pointer;letter-spacing:.22em;text-transform:uppercase;font-size:14px;font-weight:700;padding:12px 30px;border:2px solid var(--ink);transition:transform .15s,box-shadow .15s,background .15s,color .15s;display:inline-block}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn.solid{background:var(--ink);color:var(--paper2);box-shadow:5px 5px 0 rgba(38,34,28,.25)}
.btn.solid:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(38,34,28,.25)}
.btn.solid:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(38,34,28,.25)}
.btn.solid.small{padding:10px 16px;font-size:12px}
.btn.ghost{background:transparent;color:var(--ink);margin-top:8px;padding:8px 20px;font-size:12px}
.btn.ghost:hover{background:var(--ink);color:var(--paper2)}
#startBtn,#retryBtn{margin-top:14px}
.keys{margin-top:12px;font-size:13px;color:var(--ink2);font-style:italic}
kbd{font-style:normal;border:1px solid var(--ink2);padding:1px 6px;font-size:11px;letter-spacing:.15em;margin-right:6px}
.hanko{position:absolute;top:-24px;right:-24px;width:62px;height:62px;background:var(--red);color:var(--paper2);font-family:'Shippori Mincho',serif;font-size:32px;font-weight:600;display:flex;align-items:center;justify-content:center;transform:rotate(9deg);box-shadow:4px 4px 0 rgba(38,34,28,.2);border-radius:4px}
.hanko::before{content:'';position:absolute;inset:5px;border:1.5px solid rgba(247,240,222,.75);border-radius:2px}
.rows{margin:14px auto 4px;max-width:270px;text-align:left}
.row{display:flex;align-items:baseline;gap:10px;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink2);padding:5px 0}
.row .dots{flex:1;border-bottom:2px dotted rgba(38,34,28,.4);transform:translateY(-4px)}
.row b{font-size:28px;color:var(--ink);letter-spacing:0;font-weight:700}
.newbest{color:var(--red);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:12px;margin:2px 0 4px;animation:nb 1.2s infinite}
.newbest.hidden{display:none}
@keyframes nb{50%{opacity:.4}}
.runLine{margin-top:5px;font-size:12px;font-style:italic;color:var(--ink2);letter-spacing:.08em}
.runLine .kj{font-family:'Shippori Mincho',serif;font-style:normal;color:var(--red);font-size:14px;margin-right:6px;letter-spacing:.18em}
.nameRow{display:none;gap:8px;margin-top:12px;justify-content:center;align-items:stretch}
.nameRow input{font-family:inherit;font-size:16px;letter-spacing:.08em;padding:9px 12px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);width:158px;text-align:center;min-width:0}
.nameRow input:focus{outline:2px solid var(--red);outline-offset:2px}
.nameRow .btn.solid.small{box-shadow:3px 3px 0 rgba(38,34,28,.25);white-space:nowrap}
.nameRow .btn.solid.small:disabled{opacity:.45;cursor:default;transform:none}
.lbWrap{margin:10px auto 0;max-width:280px;text-align:left}
.lbRow{display:flex;align-items:baseline;gap:8px;padding:3px 2px;font-size:14px}
.lbRow .rank{font-family:'Shippori Mincho',serif;color:var(--red);width:20px;font-size:14px;flex:none}
.lbRow .nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.05em}
.lbRow .dots{flex:1;border-bottom:2px dotted rgba(38,34,28,.35);transform:translateY(-4px)}
.lbRow b{font-size:18px}
.lbRow.me{border-left:3px solid var(--red);padding-left:6px}
.lbRow.me .nm,.lbRow.me b{color:var(--red)}
.lbEmpty{font-style:italic;font-size:13px;color:var(--ink2);padding:8px 0}
.lbStatus{font-size:12px;color:var(--ink2);font-style:italic;margin-top:8px;min-height:16px}
#homeLeaderboard{margin:12px auto 0;max-width:280px;padding-top:10px;border-top:1px solid rgba(38,34,28,.2)}
#homeLeaderboard h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
#homeLbStatus{font-size:11px;color:var(--ink2);font-style:italic;min-height:15px;margin-top:3px}
#homeLeaderboard .lbWrap{margin-top:4px}
#dataTools{margin-top:14px;padding-top:10px;border-top:1px solid rgba(38,34,28,.2)}
#localeSuggest{margin:10px auto 0;max-width:280px;padding:8px;border:1px solid rgba(38,34,28,.25);font-size:11px;color:var(--ink2)}
#localeSuggest:not(.hidden){display:block}
#localeSuggest .btn{font-size:10px;padding:5px 8px;margin:4px 2px 0}
#dataTools .btn{font-size:10px;padding:7px 10px;margin:2px}
#settingsBtn{margin-top:7px}
#settingsOverlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(240,231,211,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
#settingsOverlay.show{opacity:1;visibility:visible;pointer-events:auto}
#settingsOverlay .settingsCard{width:min(92vw,360px);background:var(--paper2);border:2px solid var(--ink);box-shadow:7px 7px 0 rgba(38,34,28,.2);padding:24px;text-align:center}
#settingsOverlay select{width:100%;margin:15px 0;padding:10px;background:var(--paper);border:1px solid var(--ink);font:inherit;color:var(--ink)}
#settingsOverlay label{display:block;margin-top:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.volumeControl{display:flex;align-items:center;gap:10px;margin:10px 0 4px}.volumeControl input{flex:1;accent-color:var(--red)}.volumeControl output{min-width:42px;font-size:12px;color:var(--ink2)}
#dataMsg{min-height:15px;font-size:11px;color:var(--ink2);font-style:italic;margin-top:4px}
#pauseBtn{position:fixed;top:16px;right:68px;z-index:20;width:42px;height:42px;background:var(--paper2);border:2px solid var(--ink);color:var(--ink);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:3px 3px 0 rgba(38,34,28,.15);font:700 16px inherit}
#pauseBtn.show{display:flex}
#pauseBtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(38,34,28,.15)}
#pauseOverlay{position:fixed;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;background:rgba(240,231,211,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
#pauseOverlay.show{opacity:1;visibility:visible;pointer-events:auto}
#pauseOverlay .pauseCard{background:var(--paper2);border:2px solid var(--ink);box-shadow:7px 7px 0 rgba(38,34,28,.2);padding:24px 32px;text-align:center}
#pauseOverlay h2{font-size:28px;margin-bottom:8px}
#pauseOverlay p{font-size:14px;color:var(--ink2);font-style:italic}
#reviveOverlay{position:fixed;inset:0;z-index:24;display:flex;align-items:center;justify-content:center;background:rgba(240,231,211,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
#reviveOverlay.show{opacity:1;visibility:visible;pointer-events:auto}
#reviveOverlay .reviveCard{width:min(92vw,360px);background:var(--paper2);border:2px solid var(--ink);box-shadow:7px 7px 0 rgba(38,34,28,.2);padding:24px;text-align:center}
#securityOverlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(38,34,28,.92);color:#f7f0de;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
#securityOverlay.show{opacity:1;visibility:visible;pointer-events:auto}
#securityOverlay .securityCard{width:min(92vw,420px);padding:28px;text-align:center;border:2px solid #f7f0de;box-shadow:8px 8px 0 rgba(0,0,0,.28)}
#securityOverlay svg{width:42px;height:42px;margin-bottom:12px;color:#f3c8d2}
#securityOverlay h2{font-size:26px;margin-bottom:10px}
#securityOverlay p{font-size:14px;line-height:1.5}
#reviveOverlay h2{font-size:27px;margin-bottom:5px}
#reviveOverlay p{font-size:14px;color:var(--ink2);font-style:italic}
#reviveAdBox{min-height:82px;margin:14px 0;padding:16px 8px;border:1px dashed rgba(38,34,28,.45);display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
#reviveStatus{min-height:18px;margin-top:8px;font-size:12px;color:var(--ink2);font-style:italic}
#reviveSkip{margin-left:5px}
#muteBtn{position:fixed;top:16px;right:16px;z-index:20;width:42px;height:42px;background:var(--paper2);border:2px solid var(--ink);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:3px 3px 0 rgba(38,34,28,.15);transition:transform .15s,box-shadow .15s}
#muteBtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(38,34,28,.15)}
#muteBtn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
#muteBtn svg{width:20px;height:20px}
#muteBtn .x{display:none}
#muteBtn.muted .w{display:none}
#muteBtn.muted .x{display:initial}
.quick-locale,#muteBtn{display:none!important}
.dmca-badge{position:fixed;left:12px;bottom:12px;z-index:20;display:block;line-height:0}.dmca-badge img{width:180px;height:auto}
.quick-locale{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:12px;color:var(--ink2);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.quick-locale button{font:700 10px inherit;letter-spacing:.08em;padding:4px 7px;border:1px solid rgba(38,34,28,.35);background:transparent;color:var(--ink2);cursor:pointer}.quick-locale button:hover,.quick-locale button.active{background:var(--ink);border-color:var(--ink);color:var(--paper2)}.policy-links{display:flex;justify-content:center;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(38,34,28,.2);font-size:11px}.policy-links a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}.policy-links a:hover{color:var(--red)}
.home-panel{width:min(100%,960px);max-width:960px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:clamp(20px,3vw,38px);align-items:start;text-align:left;padding:clamp(22px,4vh,36px) clamp(20px,4vw,42px)}
.home-primary{min-width:0;text-align:center}.home-primary .kana,.home-primary h1,.home-primary .rule,.home-primary>.sub{margin-left:auto;margin-right:auto}
.home-side{min-width:0;padding-left:clamp(18px,3vw,30px);border-left:1px solid rgba(38,34,28,.2);display:grid;gap:14px;align-content:start}.home-side>section{min-width:0}
.hero-stats{display:grid;grid-template-columns:1fr 1fr 1.18fr;gap:7px;margin:12px 0 14px}.hero-stat{min-height:54px;padding:8px 10px;border:1px solid rgba(38,34,28,.2);background:rgba(240,231,211,.5);text-align:left}.hero-stat .stat-label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}.hero-stat .stat-value{display:block;margin-top:3px;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-stat.coin-stat .stat-value{color:#9c6d18}
.rules-card{padding:14px 15px;border:1px solid rgba(38,34,28,.2);background:rgba(240,231,211,.5)}.rules-card .rail-kicker{font-size:9px;color:var(--red);font-weight:700;letter-spacing:.2em;text-transform:uppercase}.rules-card h3{margin:4px 0 9px;font-size:22px;letter-spacing:.08em}.rules-list{display:grid;gap:7px;padding:0;margin:0;list-style:none;color:var(--ink2);font-size:13px}.rules-list li{display:grid;grid-template-columns:20px 1fr;gap:7px;align-items:start;line-height:1.25}.rules-list .rule-icon{color:var(--red);font-weight:700}.protection-status{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:9px;border-top:1px solid rgba(38,34,28,.17);font-size:11px;color:var(--ink2)}.protection-status i{width:8px;height:8px;border-radius:50%;background:#3f7d4e;box-shadow:0 0 0 3px rgba(63,125,78,.12);flex:none}.protection-status.blocked{color:var(--red)}.protection-status.blocked i{background:var(--red);box-shadow:0 0 0 3px rgba(199,62,58,.12)}
.selector{text-align:left}.selGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:6px;max-height:192px;overflow-y:auto;padding:2px;overscroll-behavior:contain}.selCard{min-width:0;padding:8px 7px}.selCard .meta{max-width:none}.shop-msg{min-height:18px;margin-top:5px;color:var(--red);font-size:11px;font-style:italic;text-align:left}.home-actions{text-align:center}.home-actions .btn{margin-left:2px;margin-right:2px}#homeLeaderboard,#dataTools,#authPanel{margin-top:0;padding-top:12px;border-top:1px solid rgba(38,34,28,.2)}#homeLeaderboard h3{font-size:12px}#authPanel{text-align:center}#authPanel .btn{margin:2px}#coinWallet{margin:0;padding:0;border:0;background:transparent;display:block}#coinWallet b{font-size:17px}
@media (max-width:760px){.home-panel{grid-template-columns:1fr;max-width:560px;gap:18px}.home-side{padding-left:0;padding-top:16px;border-left:0;border-top:1px solid rgba(38,34,28,.2)}.hero-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:460px){#titleScreen{padding:8px}.home-panel{padding:20px 16px;box-shadow:6px 6px 0 rgba(38,34,28,.13)}.hero-stats{gap:4px}.hero-stat{padding:7px 6px}.hero-stat .stat-label{font-size:8px;letter-spacing:.08em}.hero-stat .stat-value{font-size:15px}.selGrid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:174px}.home-actions .btn{width:100%;margin:3px 0}.keys{font-size:12px}}

/* Android native skin: không ảnh hưởng bản web desktop */
.android-app body{background:#08111f;color:#f4f7fb;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.android-app #titleScreen{align-items:flex-start;padding:calc(18px + env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;background:linear-gradient(160deg,#0b1b31 0%,#102d48 48%,#07101e 100%)}
.android-app .kanjiBg{right:-4%;top:7%;font-size:38vh;color:#79d8ff;opacity:.045}
.android-app .home-panel{width:min(100%,620px);max-width:620px;margin:auto;background:rgba(11,26,45,.88);border:1px solid rgba(151,219,255,.25);border-radius:24px;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:24px 18px;backdrop-filter:blur(14px)}
.android-app .home-panel:before{inset:8px;border:1px solid rgba(151,219,255,.09);border-radius:18px}
.android-app h1{font-family:system-ui,sans-serif;font-size:clamp(31px,9vw,46px);letter-spacing:.08em;color:#f4f7fb}
.android-app h2,.android-app .rules-card h3{font-family:system-ui,sans-serif;letter-spacing:.04em;color:#f4f7fb}
.android-app .kana,.android-app .runKj,.android-app .runLine .kj,.android-app .selCard .kj{color:#75dcff}
.android-app .sub,.android-app .best,.android-app .selLabel,.android-app .hero-stat .stat-label,.android-app .rules-list,.android-app .keys{color:#a8bed3}
.android-app .hero-stat,.android-app .rules-card{background:rgba(116,202,244,.07);border:1px solid rgba(151,219,255,.16);border-radius:14px}
.android-app .hero-stat .stat-value{color:#f4f7fb}
.android-app .selector{margin-top:18px}
.android-app .selGrid{gap:9px;max-height:none}
.android-app .selCard{min-height:66px;padding:10px 8px;border:1px solid rgba(151,219,255,.18);border-radius:12px;background:rgba(255,255,255,.05)}
.android-app .selCard.on{background:#1e8db7;border-color:#8ee7ff;box-shadow:0 5px 16px rgba(38,186,232,.2)}
.android-app .selCard .nm,.android-app .selCard .meta{color:#c4d5e4}
.android-app .selCard.on .nm,.android-app .selCard.on .meta{color:#fff}
.android-app .btn{min-height:48px;border-radius:14px;border:1px solid rgba(151,219,255,.35);font-family:system-ui,sans-serif;letter-spacing:.11em}
.android-app .btn.solid{background:linear-gradient(135deg,#27a8d4,#176b9e);color:#fff;box-shadow:0 8px 20px rgba(22,124,166,.28)}
.android-app .btn.solid:hover{transform:none;box-shadow:0 8px 20px rgba(22,124,166,.28)}
.android-app .btn.ghost{color:#b9eaff;background:rgba(255,255,255,.05)}
.android-app .home-actions{display:grid;gap:9px;margin-top:18px}
.android-app .home-actions .btn{width:100%;margin:0}
.android-app #coinWallet{color:#a8bed3;border-color:rgba(151,219,255,.16)}
.android-app #coinWallet b{color:#ffd477}
.android-app #homeLeaderboard,.android-app #dataTools,.android-app #authPanel{border-top-color:rgba(151,219,255,.15)}
.android-app #netDot{top:calc(13px + env(safe-area-inset-top));left:14px;color:#a8bed3}
.android-app #muteBtn,.android-app #pauseBtn{top:calc(13px + env(safe-area-inset-top));background:rgba(11,26,45,.9);border-color:rgba(151,219,255,.35);border-radius:12px;color:#d9f5ff;box-shadow:0 5px 18px rgba(0,0,0,.2)}
.android-app #muteBtn{right:14px}
.android-app #pauseBtn{right:68px}
.android-app #hud{top:calc(24px + env(safe-area-inset-top));color:#f4f7fb}
.android-app #bestHud,.android-app #runNo{color:#a8bed3}
.android-app #runTag{top:calc(116px + env(safe-area-inset-top))}
.android-app .authModal,.android-app #settingsOverlay,.android-app #pauseOverlay,.android-app #reviveOverlay{background:rgba(3,10,19,.78);padding:14px}
.android-app .authBox,.android-app #settingsOverlay .settingsCard,.android-app #pauseOverlay .pauseCard,.android-app #reviveOverlay .reviveCard{width:min(100%,420px);border:1px solid rgba(151,219,255,.3);border-radius:20px;background:#0e2239;color:#f4f7fb;box-shadow:0 18px 50px rgba(0,0,0,.4);padding:24px 18px}
.android-app .authBox input,.android-app #settingsOverlay select,.android-app .nameRow input{background:#081827;color:#f4f7fb;border:1px solid rgba(151,219,255,.35);border-radius:10px;min-height:48px}
.android-app .authActions{display:grid;gap:8px}.android-app .authActions .btn{width:100%;margin:0}
.android-app #hint{bottom:calc(12% + env(safe-area-inset-bottom));color:#e5f7ff}
.android-app #hint span{color:#b9eaff}
@media (max-width:460px){.android-app .home-panel{padding:22px 14px}.android-app .hero-stats{gap:6px}.android-app .hero-stat{min-height:62px}.android-app .home-side{padding-top:18px}}


/* Sky Bird UI/UX Pro Max responsive layer — Moonlit Sakura Arcade */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --focus:#ff6685;--surface-glass:rgba(14,34,57,.88);--surface-soft:rgba(247,240,222,.07);
}
html{scroll-padding-top:24px}
button,.btn,.selCard,#muteBtn,#pauseBtn,select,input{min-height:44px}
button,.btn,.selCard,#muteBtn,#pauseBtn{touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Desktop / web: asymmetric two-column command deck */
@media (min-width:1101px){
  #titleScreen{padding:32px;align-items:center}
  .home-panel{grid-template-columns:minmax(0,1.38fr) minmax(300px,.62fr);gap:48px;padding:40px 48px;border-radius:2px}
  .home-primary{padding-right:8px}
  .home-side{padding-left:32px;gap:18px}
  .hero-stats{gap:10px;margin:18px 0 20px}
  .hero-stat{min-height:64px;padding:11px 13px}
  .selector{margin:14px 0 4px}
  .selGrid{gap:8px;max-height:210px}
  .selCard{min-height:64px;padding:9px 8px}
  .home-actions{margin-top:22px}
  .home-actions .btn{min-width:180px}
}

/* Tablet: preserve game focus while moving support modules below */
@media (min-width:601px) and (max-width:1100px){
  #titleScreen{padding:20px}
  .home-panel{width:min(94vw,780px);grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);gap:24px;padding:28px 30px}
  .home-side{padding-left:22px}
  .home-panel h1{font-size:clamp(40px,7vw,58px)}
  .hero-stats{gap:7px}
  .selGrid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:236px}
  .home-actions .btn{min-width:150px}
}

/* Small tablet / large phone: one-column, scroll-first layout */
@media (min-width:461px) and (max-width:600px){
  html,body{overflow:hidden}
  #titleScreen{align-items:flex-start;padding:18px 14px;overflow-y:auto}
  .home-panel{grid-template-columns:1fr;width:min(100%,520px);gap:20px;padding:28px 24px;border-radius:12px}
  .home-side{padding:20px 0 0;border-left:0;border-top:1px solid rgba(38,34,28,.2)}
  .home-panel h1{font-size:clamp(38px,11vw,52px)}
  .selGrid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
  .selCard{min-height:64px}
  .home-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
  #startBtn{grid-column:1/-1}
  .home-actions br{display:none}
  .home-actions .btn{width:100%;margin:0}
}

/* Phone web: thumb-zone controls, no horizontal overflow, readable cards */
@media (max-width:460px){
  #titleScreen{align-items:flex-start;padding:calc(12px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom));overflow-y:auto}
  .home-panel{width:100%;max-width:none;padding:24px 14px 20px;border-radius:14px}
  .home-panel:before{inset:6px}
  .kanjiBg{font-size:32vh;top:9%;right:-7%}
  .home-panel h1{font-size:clamp(34px,12vw,48px)}
  .sub{font-size:15px;line-height:1.45}
  .hero-stats{gap:5px;margin:14px 0 17px}
  .hero-stat{min-height:62px;padding:8px 6px;text-align:center}
  .hero-stat .stat-label{font-size:8px;letter-spacing:.08em}
  .hero-stat .stat-value{font-size:15px;margin-top:5px}
  .selector{margin:15px 0 4px}
  .selGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:none;overflow:visible}
  .selCard{min-height:62px;padding:9px 6px;border-radius:8px}
  .selCard .nm{font-size:10px}
  .selCard .meta{font-size:9px}
  .home-actions{display:grid;gap:8px;margin-top:18px}
  .home-actions br{display:none}
  .home-actions .btn{width:100%;margin:0;min-height:50px}
  .home-side{padding-top:18px;gap:16px}
  .rules-card{padding:14px}
  .rules-list{font-size:13px;line-height:1.45}
  #homeLeaderboard,#dataTools,#authPanel{padding-top:14px}
  .policy-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
  #netDot{top:calc(10px + env(safe-area-inset-top));left:12px;font-size:9px}
  #muteBtn,#pauseBtn{top:calc(10px + env(safe-area-inset-top));width:44px;height:44px}
  #muteBtn{right:12px}
  #pauseBtn{right:64px}
  .authBox,#settingsOverlay .settingsCard,#pauseOverlay .pauseCard,#reviveOverlay .reviveCard{max-height:calc(100dvh - 32px);overflow:auto}
}

/* Native iOS: system typography, translucent surfaces, safe-area-first */
.ios-app body{background:#080d16;color:#f7f9fc;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.ios-app #titleScreen{align-items:flex-start;padding:calc(20px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;background:radial-gradient(circle at 80% 8%,rgba(255,102,133,.14),transparent 36%),linear-gradient(160deg,#101a2a,#070d16 72%)}
.ios-app .home-panel{width:min(100%,620px);max-width:620px;margin:auto;background:rgba(18,28,45,.82);border:1px solid rgba(255,255,255,.14);border-radius:26px;box-shadow:0 20px 70px rgba(0,0,0,.42);padding:26px 18px;backdrop-filter:blur(18px)}
.ios-app .home-panel:before{inset:8px;border:1px solid rgba(255,255,255,.06);border-radius:20px}
.ios-app h1,.ios-app h2,.ios-app .rules-card h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;letter-spacing:.02em}
.ios-app .kana,.ios-app .runKj,.ios-app .runLine .kj,.ios-app .selCard .kj{color:#ff88a0}
.ios-app .hero-stat,.ios-app .rules-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px}
.ios-app .selGrid{gap:9px;max-height:none}.ios-app .selCard{min-height:70px;padding:11px 8px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.05)}
.ios-app .selCard.on{background:linear-gradient(135deg,#e05275,#a72f55);border-color:#ffb0bf;box-shadow:0 8px 20px rgba(224,82,117,.25)}
.ios-app .btn{min-height:50px;border-radius:15px;border:1px solid rgba(255,255,255,.18);font-family:inherit;letter-spacing:.08em}.ios-app .btn.solid{background:linear-gradient(135deg,#ff6685,#b9355c);color:#fff;box-shadow:0 8px 20px rgba(255,102,133,.22)}.ios-app .btn.ghost{background:rgba(255,255,255,.06);color:#ffdce4}
.ios-app .home-actions{display:grid;gap:9px;margin-top:20px}.ios-app .home-actions .btn{width:100%;margin:0}.ios-app #netDot{top:calc(14px + env(safe-area-inset-top))}.ios-app #muteBtn,.ios-app #pauseBtn{top:calc(14px + env(safe-area-inset-top));border-radius:14px;background:rgba(18,28,45,.9);color:#fff}.ios-app #hint{bottom:calc(12% + env(safe-area-inset-bottom))}
.ios-app .authModal,.ios-app #settingsOverlay,.ios-app #pauseOverlay,.ios-app #reviveOverlay{background:rgba(4,8,15,.76);padding:16px}.ios-app .authBox,.ios-app #settingsOverlay .settingsCard,.ios-app #pauseOverlay .pauseCard,.ios-app #reviveOverlay .reviveCard{width:min(100%,420px);border:1px solid rgba(255,255,255,.16);border-radius:22px;background:#121c2d;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:24px 18px}.ios-app .authActions{display:grid;gap:8px}.ios-app .authActions .btn{width:100%;margin:0}.ios-app .authBox input,.ios-app #settingsOverlay select,.ios-app .nameRow input{min-height:50px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#0b1422;color:#fff}

/* Reduced motion and keyboard quality gates */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media (hover:none){.btn:hover,.selCard:hover,#muteBtn:hover,#pauseBtn:hover{transform:none;box-shadow:none}.selCard{cursor:pointer}}
@media (max-height:620px) and (orientation:landscape){#titleScreen{align-items:flex-start}.home-panel{margin:10px auto}.home-side{display:none}.home-panel{grid-template-columns:1fr}.home-primary{max-width:680px;margin:auto}}
@media (max-height:620px) and (orientation:landscape){#titleScreen{overflow-y:auto;padding:14px 18px}.home-panel{max-height:none;width:min(100%,760px);padding:22px 28px}.hero-stats{margin:10px 0 12px}.selector{margin:10px 0 2px}.home-actions{margin-top:14px}}


/* Feature screens: Account, Auth, Leaderboard, Settings, Shop */
.feature-screen{padding:clamp(12px,3vw,32px);overflow-y:auto}
.feature-panel{width:min(92vw,620px);max-width:620px;max-height:min(90vh,760px);text-align:center;padding:32px clamp(20px,4vw,42px)}
.feature-panel .sub{margin:8px 0 18px}.feature-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px}.feature-actions .btn{min-width:130px}
.account-card{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;margin:18px 0;border:1px solid rgba(234,246,255,.16);background:rgba(234,246,255,.06)}
.account-avatar{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:var(--paper2);font-size:24px;font-weight:700}.account-card strong,.account-card span{display:block}.account-card span{color:var(--ink2);font-size:12px;margin-top:4px}
.account-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.account-stats>div{padding:12px 8px;border:1px solid rgba(234,246,255,.14);background:rgba(234,246,255,.05)}.account-stats span,.account-stats b{display:block}.account-stats span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2)}.account-stats b{margin-top:4px;font-size:22px}
.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;margin:12px 0 18px}.shop-heading .sub{margin:4px 0 0}.shop-wallet{min-width:82px;padding:9px 12px;text-align:center;border:1px solid rgba(234,246,255,.16);background:rgba(234,246,255,.06)}.shop-wallet span,.shop-wallet b{display:block}.shop-wallet span{font-size:10px;color:var(--ink2);text-transform:uppercase;letter-spacing:.12em}.shop-wallet b{font-size:22px;color:#ffd477}.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;gap:8px}.shop-item{min-height:92px;padding:10px 7px}.shop-item .meta{font-size:9px}.feature-panel .lbWrap{max-width:420px}.feature-panel .lbRow{padding:9px 4px;font-size:15px}.feature-panel .lbRow b{font-size:20px}
.authBox{border-radius:14px}.authBox .authActions{display:grid;grid-template-columns:1fr 1fr}.authBox .authActions .btn{min-height:44px;margin:0}.authBox .authActions .btn:first-child,.authBox .authActions .btn:nth-child(2){grid-column:span 2}.authBox #authModeSwitch{font-size:10px;letter-spacing:.08em}.authBox input{min-height:48px;border-radius:8px}
.home-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.home-actions br{display:none}.home-actions .btn{margin:0}
@media (max-width:760px){.feature-panel{width:100%;max-width:560px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-actions{display:grid;grid-template-columns:1fr 1fr}.home-actions #startBtn{grid-column:1/-1}.home-actions .btn{width:100%}}
@media (max-width:460px){.feature-screen{padding:calc(12px + env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom))}.feature-panel{padding:26px 14px;max-height:calc(100dvh - 24px);border-radius:14px}.account-stats{gap:5px}.account-stats>div{padding:10px 4px}.account-stats span{font-size:8px;letter-spacing:.06em}.account-stats b{font-size:19px}.shop-grid{gap:7px}.shop-item{min-height:90px}.feature-actions{display:grid}.feature-actions .btn{width:100%}.authBox .authActions{grid-template-columns:1fr}.authBox .authActions .btn:first-child,.authBox .authActions .btn:nth-child(2){grid-column:auto}}
.android-app .feature-panel,.android-app .authBox{border-radius:22px;background:#0e2239;border:1px solid rgba(151,219,255,.28);box-shadow:0 18px 50px rgba(0,0,0,.4)}.android-app .account-avatar{background:#27a8d4;color:#fff}.android-app .account-card,.android-app .account-stats>div,.android-app .shop-wallet{border-color:rgba(151,219,255,.18);background:rgba(116,202,244,.07)}.android-app .shop-wallet b{color:#ffd477}
.ios-app .feature-panel,.ios-app .authBox{border-radius:24px;background:#121c2d;border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 60px rgba(0,0,0,.5)}.ios-app .account-card,.ios-app .account-stats>div,.ios-app .shop-wallet{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}.ios-app .account-avatar{background:#ff6685;color:#fff}.ios-app .shop-wallet b{color:#ffd477}
@media (prefers-reduced-motion:reduce){.feature-screen *{transition:none!important;animation:none!important}}