:root{color-scheme:dark;--bg:#10121d;--panel:#191c2b;--line:#303547;--text:#f1f3f9;--muted:#9fa7c0;--lime:#c6f76b;--purple:#b19aff;--board-width:min(25vw,calc((100svh - 236px)/2),288px);font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-width:320px;background-image:radial-gradient(ellipse at 52% 46%,#24284255,transparent 65%)}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:background .16s,transform .16s}button:disabled{cursor:default;opacity:.38}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}.app-shell{width:min(1192px,94%);margin:auto}.topbar{height:94px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2b2e3e}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}.brand>img{border-radius:50%;object-fit:cover;border:2px solid #424759;background:#fff}.brand-en{display:block;font-size:10px;font-weight:800;letter-spacing:.21em;color:var(--muted);margin-bottom:2px}.brand-title{font-size:26px;font-weight:950;letter-spacing:-.035em}.brand-title>span{color:var(--lime)}.brand-title .brand-dot{color:var(--purple);padding-left:2px}.header-actions{display:flex;gap:10px}.quiet-button{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:9px;color:#c7cde0;padding:10px 13px;font-size:14px;font-weight:650}.quiet-button:hover{background:#252939;border-color:#596073}.quiet-button>span:first-child{font-size:18px}.help-icon{border:1.5px solid currentColor;border-radius:50%;display:inline-grid;place-content:center;width:17px;height:17px;font-size:12px!important}.modebar{display:flex;align-items:center;justify-content:space-between;padding:22px 0}.mode-switch{display:flex;border:1px solid #343a4b;background:#191c29;border-radius:10px;padding:4px;gap:4px}.mode-switch button{padding:9px 25px;font-weight:700;font-size:14px;border:none;border-radius:6px;background:transparent;color:var(--muted)}.mode-switch button.selected{background:#e9edf6;color:#171b29;box-shadow:0 2px 7px #0003}.rule-badge{display:flex;gap:9px;align-items:center;font-size:12px;letter-spacing:.04em;color:#b4bad0}.badge-dots{display:flex;gap:3px}.badge-dots i{height:7px;width:7px;background:#ff6287;border-radius:50%}.badge-dots i:nth-child(2){background:#51b9ff}.badge-dots i:nth-child(3){background:var(--lime)}.game-grid{display:grid;grid-template-columns:194px 1fr;gap:34px;align-items:start}.dashboard{padding-top:2px}.score-card{padding:21px 20px 10px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(130deg,#232638,#1a1d2b)}.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--muted);font-weight:750}.score-number{display:block;font-size:31px;font-variant-numeric:tabular-nums;letter-spacing:.025em;font-weight:800;color:var(--lime);margin:12px 0 21px;line-height:1;overflow-wrap:anywhere}.stat-row{display:flex;justify-content:space-between;border-top:1px solid #34384a;padding:13px 0;font-size:14px;color:#b7bed2;gap:8px}.stat-row strong{color:#f3f5fa;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}.stat-row small{font-size:12px;font-weight:400}.difficulty-box{margin:22px 0 17px}.difficulty-box label{display:block;font-size:14px;color:#b9c1d5;margin-bottom:9px}.difficulty-box select{color:#edf0f8;background:#1b1e2c;border:1px solid #373c50;border-radius:8px;padding:11px 13px;width:100%;font-size:14px}.session-controls{display:grid;gap:8px}.outline-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #40465b;background:#242838;color:var(--text);border-radius:8px;padding:12px;font-size:14px;font-weight:650}.outline-button:hover:not(:disabled){background:#30374b}.outline-button kbd{margin-left:auto}.text-button{background:transparent;border:none;color:var(--muted);padding:7px;font-size:14px}.text-button>span{font-size:20px;vertical-align:middle;margin-right:5px}.keyboard-guide{margin-top:28px}.keyboard-guide h2{font-size:12px;font-weight:750;letter-spacing:.15em;color:#a6aec5;margin:0 0 14px}.keyboard-guide>div{display:flex;justify-content:space-between;align-items:center;margin:10px 0;color:#b5bdd2;font-size:14px}.keyboard-guide p{font-size:12px;color:#8d96b1;margin-top:14px}kbd{display:inline-grid;place-items:center;min-width:23px;height:24px;border:1px solid #4b5269;border-bottom-width:3px;border-radius:5px;font-size:12px;font-family:inherit;color:#dbe1f2;background:#252a3d;padding:0 5px;line-height:1.1}.arena{position:relative;display:flex;justify-content:space-between;gap:40px;min-width:0;padding:0 0 1px;isolation:isolate}.player-section{min-width:0}.player-heading{display:flex;align-items:center;justify-content:space-between;width:var(--board-width);gap:9px;margin-bottom:10px}.player-heading>div{display:flex;align-items:center;gap:9px}.player-heading h2{font-size:15px;font-weight:750;margin:0;white-space:nowrap}.player-chip{padding:4px 8px;font-size:12px;font-weight:850;letter-spacing:.05em;border-radius:5px;color:#102510;background:var(--lime)}.cpu .player-chip{color:#191332;background:var(--purple)}.player-status{font-size:12px;letter-spacing:.06em;color:#a3abc3;font-variant-numeric:tabular-nums;font-weight:650}.player-layout{display:flex;align-items:start;gap:10px}.board-column{width:var(--board-width)}.garbage-bar{display:flex;align-items:center;gap:6px;background:#242836;height:32px;padding:0 9px;border:1px solid #393f4d;border-bottom:0;border-radius:8px 8px 0 0;color:#aeb8ca;font-size:12px;white-space:nowrap;overflow:hidden}.garbage-bar strong{color:#edf0f7;font-size:14px;font-variant-numeric:tabular-nums;margin-left:2px}.garbage-symbol{font-size:20px;color:#b6c0d5}.ac-tag{font-size:12px;color:var(--lime);margin-left:auto;font-weight:750}.board-frame{position:relative;border:2px solid #759a46;border-radius:0 0 9px 9px;overflow:hidden;background:#10151f;box-shadow:0 0 0 3px #c6f76b0b,0 14px 35px #0003}.cpu .board-frame{border-color:#6c608a;box-shadow:0 0 0 3px #ac8bf50b,0 14px 35px #0003}.board-frame canvas{display:block;width:100%;height:auto;aspect-ratio:1/2}.next-column{width:43px;flex-shrink:0;padding-top:9px}.next-column .eyebrow{font-size:12px;letter-spacing:.05em;text-align:center;display:block}.next-column canvas{display:block;width:43px;height:auto;margin-top:10px;border-radius:8px;background:#242938;border:1px solid #343b50}.versus{position:absolute;left:calc(50% - 21px);top:49%;font-size:15px;letter-spacing:-.1em;font-style:italic;font-weight:900;color:#626b87;transform:rotate(-8deg);z-index:-1}.chain-call{position:absolute;top:38%;left:0;width:100%;text-align:center;font-size:clamp(22px,3.5vw,42px);font-weight:950;color:#faffeb;text-shadow:0 4px 0 #464328,0 0 25px #cef36f;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .13s,transform .18s}.chain-call.visible{opacity:1;transform:scale(1)}.chain-call.big{color:#ffdc72}.arena-overlay{position:absolute;inset:28px -9px -1px;z-index:4;display:flex;justify-content:center;align-items:center;background:#101420ba;backdrop-filter:blur(3px);border-radius:12px}.start-panel{position:relative;text-align:center;width:min(372px,94%);padding:25px 27px 23px;background:linear-gradient(150deg,#292e43,#1b2031);border:1px solid #4a536c;border-radius:20px;box-shadow:0 25px 60px #0006}.face-burst{display:inline-flex;align-items:center;justify-content:center;width:105px;height:105px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 8px #c6f76b14,0 0 0 17px #c6f76b07;transform:rotate(-7deg);margin:1px 0 18px;overflow:hidden}.face-burst img{width:96px;height:96px;object-fit:cover;border-radius:50%}.start-panel>.eyebrow{color:var(--lime);font-size:12px;letter-spacing:.19em;margin:0 0 9px}.start-panel h2{font-size:29px;font-weight:900;margin:0 0 13px;letter-spacing:-.035em;line-height:1.4}.start-panel>p:not(.eyebrow){font-size:16px;line-height:1.9;color:#c0c8df;margin:0 0 23px}.primary-button{display:flex;align-items:center;justify-content:center;gap:20px;font-size:16px;font-weight:800;background:var(--lime);color:#172119;border:1px solid var(--lime);border-radius:9px;padding:15px 23px;width:100%;box-shadow:0 4px 0 #7eab42}.primary-button:hover{background:#d9ff97}.primary-button:active{box-shadow:0 1px 0 #7eab42}.start-hint{display:block;font-size:12px;color:#98a4c0;margin-top:15px}.countdown{position:absolute;inset:28px 0 0;z-index:5;display:grid;place-items:center;background:#10142088;font-size:100px;font-weight:950;color:var(--lime);text-shadow:0 6px 0 #415330}.result-stats{border-block:1px solid #404962;padding:12px 0;margin:0 0 22px;display:flex;justify-content:space-around;gap:14px;font-size:14px;color:var(--muted)}.result-stats strong{display:block;font-size:21px;color:var(--text);margin-top:4px}.solo-guide{align-self:center;width:40%;padding-right:10px}.solo-guide h2{font-size:28px;line-height:1.65;margin:15px 0 25px}.solo-guide p{font-size:16px;line-height:2;color:var(--muted)}.mini-faces{display:flex;gap:5px;margin:20px 0}.mini-faces img{width:45px;height:45px;border-radius:50%;object-fit:cover;border:4px solid #ff6287}.mini-faces img:nth-child(2){border-color:#51b9ff}.mini-faces img:nth-child(3){border-color:#67e4aa}.mini-faces img:nth-child(4){border-color:#ffce51}.touch-controls{display:none}footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:25px 0 20px;color:#8e98b1;font-size:12px}footer p{margin:0;display:flex;align-items:center;gap:7px}.footer-dot{width:6px;height:6px;background:var(--lime);border-radius:50%;flex-shrink:0}footer>span{white-space:nowrap;color:#78829e}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{width:min(660px,94vw);max-height:88svh;border:1px solid #444e68;border-radius:18px;background:#202537;color:var(--text);padding:30px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#070b17bb;backdrop-filter:blur(6px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.close-button{width:36px;height:36px;background:#343b50;border:1px solid #4b546b;border-radius:50%;color:#f8f8fc;font-size:24px;line-height:1}dialog h2{font-size:25px;margin:16px 0 24px;line-height:1.5}.rules-list{padding-left:27px;margin:0}.rules-list li{padding-left:6px;margin:0 0 21px;font-size:16px}.rules-list li::marker{color:var(--lime);font-weight:800}.rules-list p,.rules-detail p{font-size:16px;color:#c2cadf;line-height:1.9;margin:6px 0}.rules-detail{padding:18px;border:1px solid #414b63;border-radius:10px;background:#171d2e}.rules-detail h3{font-size:16px;margin:0 0 12px}.source-note{font-size:12px;line-height:1.9;color:#a8b2cc;margin-top:23px}.source-links{display:flex;flex-wrap:wrap;gap:15px}.source-links a{color:var(--lime);font-size:12px;text-underline-offset:4px}#confirm-dialog{width:min(430px,92vw)}#confirm-dialog p{font-size:16px;color:#b7c1d8;line-height:1.8}.confirm-actions{display:flex;gap:12px;margin-top:25px}.confirm-actions>*{flex:1}.confirm-actions .primary-button{font-size:14px;padding:13px}.confirm-actions .outline-button{padding:13px}
@media(min-width:900px) and (max-height:780px){.topbar{height:78px}.modebar{padding:17px 0}.score-card{padding-top:16px}.score-number{margin:10px 0 17px}.stat-row{padding:10px 0}.keyboard-guide{margin-top:18px}.difficulty-box{margin:17px 0}.keyboard-guide p{display:none}footer{margin-top:18px}}
@media(max-width:1100px){.game-grid{grid-template-columns:166px 1fr;gap:24px}.arena{gap:24px}.score-card{padding-inline:15px}.score-number{font-size:27px}.player-heading h2{font-size:14px}.next-column{width:35px}.next-column canvas{width:35px}.player-layout{gap:6px}.versus{left:calc(50% - 18px)}.player-status{font-size:12px}.keyboard-guide>div{font-size:13px}}
@media(max-width:850px){:root{--board-width:min(34vw,270px)}.app-shell{width:94%}.topbar{height:78px}.brand-title{font-size:23px}.header-actions{gap:7px}.quiet-button{font-size:14px;padding:9px}.modebar{padding:17px 0}.game-grid{grid-template-columns:1fr;gap:17px}.dashboard{display:flex;gap:12px;align-items:center;padding:0}.score-card{display:flex;align-items:center;gap:15px;padding:12px 16px;flex:1}.score-card>.eyebrow{font-size:12px;line-height:1.6;max-width:44px}.score-number{margin:0 auto 0 0;font-size:25px}.stat-row{border:0;padding:0;font-size:12px;display:block}.stat-row strong{display:block;margin-top:2px;font-size:16px}.stat-row:last-child{display:none}.difficulty-box{margin:0;width:115px}.difficulty-box label{font-size:12px;margin:0 0 5px}.difficulty-box select{padding:8px;font-size:14px}.session-controls{display:flex;flex-direction:column;gap:0}.session-controls .outline-button{font-size:13px;padding:7px 9px}.session-controls kbd{display:none}.session-controls .text-button{font-size:12px;padding:3px}.session-controls .text-button>span{font-size:16px}.keyboard-guide{display:none}.arena{justify-content:center;gap:36px}.next-column,.next-column canvas{width:36px}.player-heading h2{font-size:14px}.player-heading{margin-bottom:8px}.versus{left:calc(50% - 12px);font-size:14px}.touch-controls{display:flex;justify-content:space-between;width:min(570px,100%);margin:18px auto 0;gap:20px;touch-action:none;user-select:none}.direction-buttons,.rotation-buttons{display:flex;gap:8px}.touch-controls button{background:#272d40;color:#eef1fa;border:1px solid #47516b;border-bottom:4px solid #111726;border-radius:12px;min-width:60px;height:60px;font-size:27px;touch-action:none}.touch-controls button.held{background:#404b68;border-bottom-width:1px;transform:translateY(3px)}.rotation-buttons button{min-width:72px;border-color:#738953;color:var(--lime);background:#28342a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.rotation-buttons button>span{font-size:29px;line-height:1}.rotation-buttons small{font-size:12px}footer{margin-top:20px;font-size:12px}.solo-guide{width:40%}.start-panel{padding:22px 25px}.face-burst{width:90px;height:90px;margin-bottom:17px}.face-burst img{width:82px;height:82px}.start-panel h2{font-size:26px}.arena-overlay{inset:25px 0 0}}
@media(max-width:550px){:root{--board-width:calc((94vw - 18px - 50px)/2)}.topbar{height:69px}.brand{gap:7px}.brand>img{width:36px;height:36px}.brand-title{font-size:20px}.brand-en{font-size:9px}.header-actions{gap:6px}.quiet-button{padding:8px;font-size:12px;gap:4px}#sound-label{display:none}#rules-open>span:last-child{font-size:12px}.modebar{padding:13px 0}.mode-switch button{padding:8px 13px;font-size:14px}.rule-badge{font-size:12px;gap:5px}.badge-dots{display:none}.dashboard{gap:7px;flex-wrap:wrap}.score-card{padding:10px 12px;gap:11px;border-radius:9px;min-width:calc(100% - 95px)}.score-card>.eyebrow{font-size:10px;max-width:39px;letter-spacing:.05em}.score-number{font-size:23px;letter-spacing:0}.stat-row{font-size:12px}.stat-row strong{font-size:16px}.stat-row:nth-last-child(2){display:none}.stat-row small{font-size:12px}.difficulty-box{width:82px}.difficulty-box label{font-size:12px}.difficulty-box select{font-size:12px;padding:7px 3px}.session-controls{flex-direction:row;margin-left:auto;gap:10px}.session-controls .outline-button{font-size:12px;padding:6px 10px}.session-controls .outline-button>span{display:none}.session-controls .text-button{font-size:12px}.game-grid{gap:12px}.arena{gap:18px}.player-layout{gap:4px}.next-column,.next-column canvas{width:21px}.next-column{padding-top:8px}.next-column .eyebrow{font-size:9px;letter-spacing:0;writing-mode:vertical-rl;margin:auto}.next-column canvas{margin-top:9px}.player-heading{gap:4px;flex-wrap:wrap}.player-heading>div{gap:5px}.player-heading h2{font-size:12px}.player-chip{padding:3px 5px;font-size:11px}.player-status{font-size:10px}.garbage-bar{height:28px;padding:0 5px;font-size:12px;gap:4px}.garbage-symbol{font-size:16px}.garbage-bar strong{font-size:14px}.ac-tag{font-size:10px}.versus{font-size:10px;left:calc(50% - 10px);color:#929fbd}.board-frame{border-width:1px}.start-panel{width:min(294px,90%);padding:19px 22px}.face-burst{width:70px;height:70px;margin-bottom:15px}.face-burst img{width:64px;height:64px}.start-panel>.eyebrow{font-size:12px}.start-panel h2{font-size:24px;margin-bottom:8px}.start-panel>p:not(.eyebrow){font-size:14px;margin-bottom:18px;line-height:1.8}.primary-button{font-size:16px;padding:12px 16px}.start-hint{font-size:12px;margin-top:12px}.arena-overlay{inset:28px -2px -2px;backdrop-filter:blur(2px)}.touch-controls{gap:10px;margin-top:15px}.direction-buttons,.rotation-buttons{gap:6px}.touch-controls button{min-width:47px;height:56px;font-size:25px;border-radius:10px}.rotation-buttons button{min-width:63px}.rotation-buttons small{font-size:12px}footer{margin:18px 0 15px;align-items:start;line-height:1.7;font-size:12px;flex-direction:column}footer>span{font-size:12px}footer p{gap:5px}.solo-guide{display:none!important}.arena.solo{justify-content:center;--board-width:min(61vw,252px)}.arena.solo .next-column,.arena.solo .next-column canvas{width:32px}.arena.solo .next-column .eyebrow{font-size:12px;writing-mode:horizontal-tb}.arena.solo .player-heading h2{font-size:14px}.arena.solo .player-heading{width:var(--board-width)}.arena.solo .garbage-bar{font-size:12px}.arena.solo .arena-overlay{inset:25px 0 0}.result-stats{font-size:12px;margin-bottom:16px;padding:9px 0}.result-stats strong{font-size:19px}.countdown{font-size:70px}.chain-call{font-size:22px}dialog{padding:21px}dialog h2{font-size:22px}.rules-list{padding-left:22px}.source-links{gap:12px}}
@media(pointer:coarse) and (min-width:851px){.touch-controls{display:flex;justify-content:center;gap:26px;margin:18px 0}.touch-controls>div{display:flex;gap:10px}.touch-controls button{min-width:60px;height:55px;font-size:23px;background:#293348;border:1px solid #53607a;border-radius:10px;color:#e9f2ff;touch-action:none}.rotation-buttons small{font-size:12px;display:block}}
@media(max-width:550px){.player-heading{min-height:42px;align-content:center}.ac-tag{max-width:58px;overflow:hidden}}
@media(max-width:360px){.face-burst{display:none}.start-panel{padding:18px}.start-panel h2{font-size:22px}.rule-badge{font-size:11px}.mode-switch button{padding-inline:10px}.touch-controls button{min-width:43px}.rotation-buttons button{min-width:57px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}