:root{--cream:#fff7d6;--paper:#fffdf2;--ink:#183044;--coral:#ff665a;--yellow:#ffd84d;--mint:#85dec1;--sky:#7ccbf1;--lilac:#b8a8ed}
.music-button{display:block;margin:0 0 5px auto;padding:3px 2px;border:0;background:transparent;font-size:9px;font-weight:900;white-space:nowrap}.music-button[aria-pressed=true]{color:#b23535}
.assist-settings{margin:0 0 10px;font-size:10px;text-align:left}.assist-settings summary{cursor:pointer;font-weight:900}.assist-options{display:flex;gap:5px;margin-top:8px}.assist-options button{flex:1;padding:7px 3px;border:2px solid var(--ink);border-radius:7px;background:white;font-size:10px;font-weight:900}.assist-options .is-selected{background:var(--yellow)}.assist-settings p{margin:7px 0 0;font-size:10px;line-height:1.5;color:#526873}.word-shelf{display:flex;align-items:center;gap:5px;height:44px;margin-top:4px;border-bottom:2px dashed var(--ink)}.word-shelf[hidden]{display:none}.word-shelf>small{flex:0 0 50px;font-size:9px;line-height:1.3;font-weight:900}.word-shelf>span{flex:1;min-width:0;font-size:12px;font-weight:900;white-space:nowrap;text-align:center}.word-shelf b{color:#b23535}.word-shelf i{font-style:normal;color:#526873}.press.has-word-shelf .board-shell{height:clamp(288px,calc(100dvh - 343px),544px);min-height:288px}.missing-kana{display:grid;place-items:center;width:86%;height:86%;border:2px dashed var(--yellow);border-radius:50%;color:#fff4b4;font-size:24px;font-weight:900;font-style:normal;opacity:.4;pointer-events:none}
.press.guided-mode .ball.ghost.winning-ghost{opacity:.28;border:2px dashed var(--yellow);box-shadow:none;animation:none}
.word-shelf>small{flex-basis:60px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#77c9ed;color:var(--ink);touch-action:manipulation}body{min-height:100dvh;display:grid;place-items:center;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;background-image:radial-gradient(circle at 15% 12%,#fff5 0 4px,transparent 5px),radial-gradient(circle at 84% 22%,#ffd84d 0 6px,transparent 7px),radial-gradient(circle at 12% 78%,#ff665a 0 5px,transparent 6px)}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.controls button,.burst-button{touch-action:none}
.press{position:relative;width:min(100%,500px);height:100dvh;min-height:640px;padding:max(10px,env(safe-area-inset-top)) 14px max(8px,env(safe-area-inset-bottom));overflow:hidden;background:linear-gradient(180deg,#fff7d6,#fff3be);box-shadow:0 0 0 4px var(--ink),16px 0 0 var(--coral),-16px 0 0 var(--yellow)}
.masthead{height:52px;display:flex;align-items:center;gap:8px}.masthead>div{min-width:0}.masthead h1{margin:0;font-size:29px;line-height:.88;letter-spacing:-.06em;font-weight:1000}.masthead h1 span{color:var(--coral)}.masthead p{margin:6px 0 0;font-size:8px;font-weight:900;letter-spacing:.08em}.game-tag{margin-left:auto;padding:5px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--mint);box-shadow:2px 2px 0 var(--ink);font-size:8px;font-weight:1000;white-space:nowrap;transform:rotate(-2deg)}.round-button{flex:0 0 auto;width:34px;height:34px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:2px 3px 0 var(--ink);font:1000 15px/1 ui-monospace,monospace}.round-button:active{transform:translate(2px,2px);box-shadow:none}
.game-head{height:60px;display:grid;grid-template-columns:1fr 142px;gap:8px}.metrics{display:grid;grid-template-columns:1.45fr 1fr .7fr;overflow:hidden;border:3px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}.metrics div{display:grid;place-content:center;text-align:center;border-right:2px dashed #9eb0b8}.metrics div:first-child{background:#fff2ad}.metrics div:last-child{border:0;background:#dff7ec}.metrics small,.next-box small{font:900 8px/1 ui-monospace,monospace}.metrics strong{margin-top:4px;font:1000 18px/1 ui-monospace,monospace}.next-box{display:flex;align-items:center;gap:7px;padding:5px 7px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}#nextPairs{display:flex;gap:6px}.mini-pair{display:flex;gap:1px}.mini-pair i{width:24px;height:24px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-style:normal;font-weight:1000;box-shadow:1px 2px 0 var(--ink)}.mini-pair:nth-child(2){opacity:.55;transform:scale(.82)}
.marquee{height:30px;display:flex;align-items:center;gap:8px;padding:0 8px;margin-top:4px;border:2px solid var(--ink);border-radius:9px;background:var(--paper);overflow:hidden}.marquee span{font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marquee b{margin-left:auto;color:var(--coral);font-size:17px;white-space:nowrap}
.versus-hud{height:28px;display:grid;grid-template-columns:auto minmax(55px,1fr) 72px auto;align-items:center;gap:6px;margin-top:4px;padding:3px 7px;border:2px solid var(--ink);border-radius:9px;background:var(--coral);color:#fff;font:900 9px/1 ui-monospace,monospace}.versus-hud[hidden]{display:none}.versus-hud>b{padding:3px 5px;border-radius:5px;background:var(--ink);color:var(--yellow)}.versus-hud>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.versus-hud i{height:8px;overflow:hidden;border:2px solid var(--ink);border-radius:99px;background:#fff}.versus-hud i span{display:block;width:0;height:100%;background:var(--yellow);transition:width .25s}.versus-hud strong{font-size:10px}
.board-shell{position:relative;margin:7px auto 0;width:min(100%,370px);height:calc(100dvh - 295px);min-height:332px;max-height:602px;background:#21475b;border:5px solid var(--ink);border-radius:22px;box-shadow:6px 7px 0 var(--coral);overflow:hidden}.board-shell::after{content:"";position:absolute;inset:4px;border:1px solid #ffffff18;border-radius:14px;pointer-events:none}.danger-mark{position:absolute;z-index:3;top:calc(8.333% + 1px);left:calc(50% - 19px);width:38px;text-align:center;color:#ff7b70;font:1000 20px/1 ui-monospace,monospace;pointer-events:none}.match-callout{position:absolute;z-index:7;top:8%;left:50%;width:max-content;max-width:calc(100% - 22px);padding:9px 15px 8px;transform:translateX(-50%) rotate(-2deg);border:3px solid var(--ink);border-radius:13px;background:var(--yellow);box-shadow:5px 5px 0 var(--coral);text-align:center;animation:scoreStamp .22s ease-out both;pointer-events:none}.match-callout[hidden]{display:none}.match-callout strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:22px;line-height:1.05;color:#c93636;white-space:nowrap}.match-callout span{display:block;margin-top:4px;font:900 9px/1.2 ui-monospace,monospace;white-space:nowrap}.match-callout b{display:block;margin-top:3px;font:1000 17px/1 ui-monospace,monospace}
.press.is-versus .board-shell{height:calc(100dvh - 327px)}
.board{height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(12,1fr);gap:3px;padding:5px;touch-action:none}.cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border:1px solid #bdeaff1c;border-radius:7px;background:#ffffff05}.ball{position:relative;z-index:1;width:92%;height:92%;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50% 46% 52% 47%;background:#ffe67a;box-shadow:inset 4px 5px 0 #fff8,1px 3px 0 #0c202b;font-size:clamp(18px,6vw,29px);font-weight:1000;line-height:1}.ball::after{content:"";position:absolute;top:13%;left:18%;width:18%;height:12%;border-radius:50%;background:#fff9}.ball.tone-1{background:#ffad9f}.ball.tone-2{background:#9fe4ca}.ball.tone-3{background:#bdb5ed}.ball.tone-4{background:#ffe078}.ball.active{z-index:4;border:3px solid #ff4f4f;box-shadow:0 0 0 2px var(--cream),2px 4px 0 #071a24;animation:wobble .5s ease-in-out infinite alternate}.ball.ghost{opacity:.18;border-style:dashed;box-shadow:none}.ball.ghost.winning-ghost{opacity:.9;border:3px solid var(--yellow);border-style:solid;box-shadow:0 0 0 3px var(--coral),0 0 18px 6px #ffd84daa;animation:hintGlow .55s ease-in-out infinite alternate}.ball.word-trail{z-index:5;color:#bb2e2e;border-color:#fff;box-shadow:0 0 0 3px var(--coral),0 0 22px 8px #ffe56c}.ball.word-pulse{animation:letterPulse .25s ease-out both}.ball.clearing{z-index:5;color:#fff;background:var(--coral);animation:flashThenPop .72s ease-in forwards}.ball.just-landed{animation:land .2s ease-out}.connector{position:absolute;z-index:3;background:var(--coral);pointer-events:none}.connector.right,.connector.left{width:55%;height:12%;top:44%}.connector.right{left:72%}.connector.left{right:72%}.connector.down,.connector.up{height:55%;width:12%;left:44%}.connector.down{top:72%}.connector.up{bottom:72%}.drop-targets{position:absolute;inset:0;z-index:6;pointer-events:none}.drop-target{position:absolute;display:grid;place-items:center;min-width:62px;padding:4px 6px;transform:translate(-50%,-115%) rotate(-2deg);border:2px solid var(--ink);border-radius:9px;background:var(--paper);box-shadow:2px 3px 0 var(--coral);white-space:nowrap}.drop-target b{font:1000 8px/1 ui-monospace,monospace;color:var(--coral)}.drop-target small{max-width:72px;overflow:hidden;text-overflow:ellipsis;font:900 7px/1.2 ui-monospace,monospace;color:var(--ink)}.drop-target.is-current{background:var(--yellow);box-shadow:0 0 0 3px #fff,3px 4px 0 var(--coral)}
@keyframes wobble{to{transform:rotate(2deg) scale(.98)}}@keyframes hintGlow{to{transform:scale(1.08);filter:brightness(1.12)}}@keyframes letterPulse{0%{transform:scale(.72)}60%{transform:scale(1.28) rotate(-4deg)}to{transform:scale(1)}}@keyframes flashThenPop{0%,34%{opacity:1}17%{opacity:.14}55%{transform:scale(1.2) rotate(-5deg);opacity:1}to{transform:scale(.05);opacity:0}}@keyframes scoreStamp{from{opacity:0;transform:translateX(-50%) scale(1.35) rotate(-5deg)}to{opacity:1;transform:translateX(-50%) scale(1) rotate(-2deg)}}@keyframes land{0%{transform:translateY(-10px) scaleY(1.08)}70%{transform:scaleY(.88) scaleX(1.08)}to{transform:none}}@keyframes floatPair{to{transform:translateY(-8px) rotate(3deg)}}
.controls{height:65px;display:grid;grid-template-columns:1fr 1.15fr 1.15fr 1fr;gap:7px;padding-top:9px}.controls button{border:3px solid var(--ink);border-radius:14px;background:var(--paper);font:1000 26px/1 ui-monospace,monospace;box-shadow:3px 4px 0 var(--ink)}.controls button:active{transform:translate(3px,4px);box-shadow:none}.controls button:disabled{opacity:.3}.controls small{display:block;margin-top:2px;font:900 8px/1 ui-monospace,monospace}.controls .rotate{background:var(--coral);color:#fff}.controls .drop-button{background:var(--sky)}footer{height:47px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;font:900 9px/1 ui-monospace,monospace}footer>span{text-align:right}.text-button{border:0;padding:7px 0 0;background:transparent;text-align:left;font:900 9px/1 ui-monospace,monospace}.text-button:disabled{opacity:.35}.burst-button{min-width:150px;padding:11px 18px;border:3px solid var(--ink);border-radius:14px;background:var(--lilac);font:1000 13px/1 ui-monospace,monospace;box-shadow:3px 4px 0 var(--ink)}.burst-button:disabled{opacity:.3;box-shadow:none}
.coach-overlay{position:absolute;inset:0;z-index:18;background:#183044aa;pointer-events:none}.coach-overlay[hidden]{display:none}.coach-card{position:absolute;left:24px;right:24px;top:58px;padding:10px 18px;border:4px solid var(--ink);border-radius:18px;background:var(--yellow);box-shadow:6px 7px 0 var(--coral);text-align:center;animation:coachIn .22s ease-out}.coach-card small{font:1000 8px/1 ui-monospace,monospace;letter-spacing:.08em}.coach-card h2{margin:4px 0 2px;font-size:21px;line-height:1.1}.coach-card p{margin:0;font-size:10px;font-weight:900;line-height:1.35}.coach-card button{margin-top:7px;padding:8px 18px;border:3px solid var(--ink);border-radius:999px;background:var(--mint);font-weight:1000;box-shadow:3px 4px 0 var(--ink);pointer-events:auto}.coach-focus{position:relative!important;z-index:22!important;opacity:1!important;filter:none!important;animation:coachPulse .65s ease-in-out infinite alternate!important}.guided-mode .board{pointer-events:none}.guided-mode .round-button,.guided-mode .text-button{pointer-events:none}.guided-mode .coach-muted{opacity:.24!important}@keyframes coachIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}@keyframes coachPulse{to{transform:translateY(-3px) scale(1.04);box-shadow:0 0 0 5px var(--yellow),4px 6px 0 var(--coral)}}
.cover{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:28px;background:var(--ink);overflow:hidden}.cover::before,.cover::after{content:"";position:absolute;border:5px solid var(--ink);border-radius:50%;box-shadow:0 0 0 8px var(--yellow)}.cover::before{width:180px;height:180px;left:-90px;bottom:-45px;background:var(--coral)}.cover::after{width:130px;height:130px;right:-45px;top:-40px;background:var(--mint);box-shadow:0 0 0 8px var(--sky)}.cover[hidden]{display:none}.cover-inner{position:relative;z-index:2;color:#fff;text-align:center}.cover-inner>p:first-child{display:inline-block;margin:0 0 15px;padding:5px 11px;border:2px solid #fff;border-radius:999px;font:900 9px/1 ui-monospace,monospace;letter-spacing:.16em}.cover h2{margin:0 0 19px;font-size:clamp(34px,10vw,49px);line-height:1.35;letter-spacing:-.05em;text-shadow:4px 4px 0 #0e1d28}.lead{margin:0 auto 21px;max-width:355px;color:#e8f6f7;font-size:12px;font-weight:700;line-height:1.8}.result{font:900 13px/1.4 ui-monospace,monospace}.start-button{padding:14px 28px;border:3px solid var(--ink);border-radius:999px;background:var(--yellow);font-weight:1000;font-size:16px;box-shadow:0 0 0 3px #fff,6px 7px 0 var(--coral)}.start-button:active{transform:translate(5px,6px);box-shadow:0 0 0 3px #fff,1px 1px 0 var(--coral)}.cover-demo{position:absolute;z-index:1;top:9%;right:-15px;display:flex;transform:rotate(13deg);animation:floatPair 1.2s ease-in-out infinite alternate}.cover-demo i{width:90px;height:90px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:50%;background:var(--sky);box-shadow:4px 5px 0 #fff;font-style:normal;font-size:48px;font-weight:1000}.cover-demo i+i{background:var(--yellow)}
dialog{width:min(calc(100% - 24px),460px);max-height:min(700px,calc(100dvh - 24px));overflow:auto;border:4px solid var(--ink);border-radius:24px;padding:24px;color:var(--ink);background:var(--cream);box-shadow:8px 9px 0 var(--coral)}dialog::backdrop{background:#102838dc}.dialog-close{position:absolute;z-index:3;right:12px;top:10px;width:36px;height:36px;border:3px solid var(--ink);border-radius:50%;background:var(--coral);color:#fff;font-size:22px;font-weight:1000;line-height:1}.tutorial-dialog.required .dialog-close{display:none}.eyebrow{margin:0 44px 8px 0;color:#d14040;font:1000 9px/1 ui-monospace,monospace;letter-spacing:.13em}.tutorial-track{min-height:350px}.tutorial-step[hidden]{display:none}.tutorial-step>small{font:1000 10px/1 ui-monospace,monospace}.tutorial-step h2{margin:8px 0 12px;font-size:27px;line-height:1.15;letter-spacing:-.04em}.tutorial-step>p{margin:11px 0 8px;font-size:12px;font-weight:700;line-height:1.55}
.practice-board{position:relative;width:210px;height:132px;margin:0 auto 8px;overflow:hidden;border:4px solid var(--ink);border-radius:16px;background-color:#21475b;background-image:linear-gradient(#ffffff14 2px,transparent 2px),linear-gradient(90deg,#ffffff14 2px,transparent 2px);background-size:42px 33px;box-shadow:4px 5px 0 var(--coral)}.practice-board i{position:absolute;width:36px;height:28px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--sky);box-shadow:2px 2px 0 #0b1c26;font-style:normal;font-size:19px;font-weight:1000;transition:left .2s ease,top .3s cubic-bezier(.2,.8,.2,1.2),transform .2s}.practice-board i+ i{background:var(--yellow)}.practice-board.is-landed i{animation:land .28s ease-out}.practice-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:245px;margin:auto}.practice-controls button{height:38px;border:3px solid var(--ink);border-radius:10px;background:#fff;font-size:20px;font-weight:1000;box-shadow:2px 3px 0 var(--ink)}.practice-controls button:nth-child(2){background:var(--coral);color:#fff}.practice-controls button:nth-child(3){background:var(--sky)}.practice-controls button:active,.lesson-action:active{transform:translate(2px,3px);box-shadow:none}.practice-tasks{display:flex;justify-content:center;gap:5px;margin-top:9px;flex-wrap:wrap}.practice-tasks span{padding:4px 7px;border:2px solid #81929a;border-radius:999px;background:#fff;color:#708087;font:900 9px/1 ui-monospace,monospace}.practice-tasks span.done{border-color:var(--ink);background:var(--mint);color:var(--ink)}
.lesson-grid{min-height:112px;display:flex;align-items:center;justify-content:center;gap:5px}.lesson-grid i,.lesson-grid button{width:61px;height:61px;display:grid;place-items:center;padding:0;border:3px solid var(--ink);border-radius:50%;background:var(--mint);box-shadow:3px 4px 0 var(--ink);font-style:normal;font-size:31px;font-weight:1000}.lesson-grid i:nth-child(2n),.lesson-grid button:nth-child(2n){background:var(--yellow)}.lesson-grid.three .fresh{border-color:#d13c3c;box-shadow:3px 4px 0 #d13c3c}.lesson-grid.three.solved i{animation:letterPulse .3s ease-out both;box-shadow:0 0 0 4px var(--coral),0 0 20px var(--yellow)}.lesson-grid.four{display:grid;grid-template-columns:repeat(2,61px);grid-template-rows:repeat(2,61px);gap:3px}.lesson-grid.four button:nth-child(3){grid-column:2;grid-row:2}.lesson-grid.four button:nth-child(4){grid-column:1;grid-row:2}.lesson-grid.four button.selected{background:var(--coral);color:#fff;box-shadow:0 0 0 3px var(--yellow),3px 4px 0 var(--ink)}.lesson-grid.four.shake{animation:wobble .12s 3}.lesson-action{display:block;min-height:40px;margin:5px auto 0;padding:7px 15px;border:3px solid var(--ink);border-radius:12px;background:var(--sky);font-size:12px;font-weight:1000;box-shadow:3px 4px 0 var(--ink)}.lesson-action.burst{background:var(--lilac)}.lesson-action:disabled{opacity:.55;box-shadow:none}.lesson-score{display:block;width:max-content;max-width:100%;margin:7px auto 0;padding:6px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);font:1000 9px/1 ui-monospace,monospace}.lesson-burst{height:105px;display:grid;place-content:center;text-align:center;transform:rotate(-3deg)}.lesson-burst span{width:65px;height:65px;display:grid;place-items:center;margin:auto;border:4px solid var(--ink);border-radius:50%;background:var(--lilac);box-shadow:4px 5px 0 var(--coral);font-size:34px;font-weight:1000}.lesson-burst strong{margin-top:7px;font-size:18px}.lesson-burst.solved span{animation:flashThenPop .72s ease-in forwards}.lesson-burst.solved strong{color:var(--coral);animation:letterPulse .3s ease-out}.tutorial-nav{display:grid;grid-template-columns:88px 1fr 100px;align-items:center;gap:8px;margin-top:10px}.tutorial-nav button{min-height:42px;border:3px solid var(--ink);border-radius:12px;background:#fff;font-size:12px;font-weight:1000;box-shadow:2px 3px 0 var(--ink)}.tutorial-nav button:last-child{background:var(--yellow)}.tutorial-nav button:disabled{opacity:.35;box-shadow:none}.tutorial-dots{display:flex;justify-content:center;gap:6px}.tutorial-dots i{width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;background:#fff}.tutorial-dots i.is-active{width:22px;border-radius:999px;background:var(--coral)}.rule-details{margin-top:15px;border-top:2px dashed #96a9ad;padding-top:12px}.rule-details summary{cursor:pointer;font-size:11px;font-weight:1000}.fineprint{margin:10px 0 0;color:#51616a;font-size:10px;line-height:1.6}.fineprint a{color:inherit;text-underline-offset:2px}
.difficulty-picker{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,390px);margin:0 auto 11px;padding:21px 0 0;border:0}.difficulty-picker legend{position:absolute;inset:0 0 auto;width:100%;color:#fff;font:1000 10px/1 ui-monospace,monospace;letter-spacing:.08em}.difficulty-card{min-width:0;padding:9px 5px 8px;border:3px solid #fff;border-radius:14px;background:#29475a;color:#fff;box-shadow:3px 4px 0 #0e1d28}.difficulty-card b{display:block;margin-bottom:5px;font:1000 12px/1 ui-monospace,monospace}.difficulty-card span{display:block;font-size:8px;font-weight:900;line-height:1.35}.difficulty-card.is-selected{border-color:var(--ink);background:var(--yellow);color:var(--ink);box-shadow:0 0 0 3px #fff,4px 5px 0 var(--coral);transform:translateY(-2px)}.solo-forecast{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:7px;width:min(100%,270px);margin:0 auto 14px;padding:20px 0 0;border:0}.solo-forecast legend{position:absolute;inset:2px 0 auto;width:100%;color:#fff;font:1000 9px/1 ui-monospace,monospace}.solo-forecast button{min-height:34px;border:3px solid #fff;border-radius:11px;background:#29475a;color:#fff;font-size:10px;font-weight:1000;box-shadow:2px 3px 0 #0e1d28}.solo-forecast button.is-selected{border-color:var(--ink);background:var(--mint);color:var(--ink);box-shadow:0 0 0 2px #fff,3px 4px 0 var(--sky);transform:translateY(-2px)}.burst-button.is-unavailable{background:#d6d9da;color:#63727a}
.play-buttons{display:flex;justify-content:center;gap:9px}.online-button{padding:14px 20px;border:3px solid var(--ink);border-radius:999px;background:var(--mint);font-weight:1000;font-size:14px;box-shadow:0 0 0 3px #fff,6px 7px 0 var(--sky)}.online-button:active{transform:translate(5px,6px);box-shadow:0 0 0 3px #fff,1px 1px 0 var(--sky)}.online-note{margin:11px 0 0!important;color:#dfecef!important;font-size:9px!important;font-weight:900}.matchmaking-dialog{text-align:center}.matchmaking-dialog h2{margin:7px 0 8px;font-size:28px}.matchmaking-dialog p{font-size:11px;font-weight:800}.matchmaking-dialog label{display:grid;gap:5px;margin:18px auto 12px;text-align:left;font-size:10px;font-weight:1000}.matchmaking-dialog input{width:100%;padding:12px;border:3px solid var(--ink);border-radius:11px;background:#fff;font-size:16px;font-weight:900}.matchmaking-dialog button{min-height:45px;padding:8px 20px;border:3px solid var(--ink);border-radius:13px;background:var(--yellow);font-weight:1000;box-shadow:3px 4px 0 var(--ink)}.match-waiting[hidden],#matchSetup[hidden]{display:none}.match-waiting>strong{font:1000 43px/1 ui-monospace,monospace;color:var(--coral)}.match-waiting>span{font-size:12px;font-weight:1000}.match-waiting #cancelMatchButton{display:block;min-height:38px;margin:15px auto 0;background:#fff}.radar{position:relative;width:92px;height:92px;margin:0 auto 13px;display:grid;place-items:center;overflow:hidden;border:4px solid var(--ink);border-radius:50%;background:repeating-radial-gradient(circle,var(--mint) 0 13px,#fff 14px 16px)}.radar::after{content:"";position:absolute;width:50%;height:50%;left:50%;bottom:50%;transform-origin:left bottom;background:linear-gradient(45deg,#ff665aaa,transparent);animation:radarSpin 1.25s linear infinite}.radar b{z-index:2;width:39px;height:39px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:22px}.radar i{position:absolute;right:14px;top:19px;width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:var(--coral);animation:hintGlow .6s infinite alternate}@keyframes radarSpin{to{transform:rotate(360deg)}}
.cover h2{margin-bottom:12px;font-size:clamp(32px,9vw,46px);line-height:1.27}.lead{margin-bottom:14px;font-size:11px;line-height:1.6}.cover-demo{top:7%}.cover-demo i{width:82px;height:82px;font-size:44px}
@media(max-height:760px){.difficulty-picker{margin-bottom:12px;padding-top:17px}.difficulty-card{padding:7px 3px 6px}.cover h2{margin-bottom:8px;font-size:30px}.lead{margin-bottom:10px;line-height:1.4}.cover-inner>p:first-child{margin-bottom:9px}.cover-demo{opacity:.65}.play-buttons button{padding:10px 14px}.online-note{margin-top:7px!important}}
@media(min-width:700px){.press{height:min(930px,100dvh)}.board-shell{height:592px}.press.guided-mode .board-shell{height:clamp(332px,calc(100dvh - 295px),592px)}.ball{font-size:28px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important}}
.ranking-button{font-size:14px;background:var(--mint)}
.tutorial-choice{width:min(100%,350px);margin:0 auto}.tutorial-choice h3{margin:0 0 7px;font-size:18px}.tutorial-choice p{margin:0 auto 13px;color:#dfecef;font-size:10px;font-weight:800;line-height:1.5}.tutorial-choice>div{display:grid;grid-template-columns:1.2fr 1fr;gap:9px}.tutorial-choice button,.cover-ranking-button{min-height:45px;border:3px solid var(--ink);border-radius:13px;background:var(--yellow);font-size:12px;font-weight:1000;box-shadow:3px 4px 0 var(--coral)}.tutorial-choice button+button{background:#fff;color:var(--ink);box-shadow:3px 4px 0 #0e1d28}.cover-ranking-button{display:block;min-height:auto;margin:13px auto 0;padding:7px 13px;border-color:#fff;background:transparent;color:#fff;box-shadow:none;font-size:10px}
.leaderboard-dialog h2{margin:4px 0 13px;font-size:30px}.ranking-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.ranking-tabs button{padding:9px 3px;border:3px solid var(--ink);border-radius:10px;background:#fff;font:1000 10px/1 ui-monospace,monospace;box-shadow:2px 3px 0 var(--ink)}.ranking-tabs button.is-active{background:var(--yellow);transform:translateY(-2px)}.score-form{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:end;margin:14px 0;padding:11px;border:3px solid var(--ink);border-radius:14px;background:var(--sky);box-shadow:3px 4px 0 var(--ink)}.score-form[hidden]{display:none}.score-form>b{grid-column:1/-1;font-size:16px}.score-form label{display:grid;gap:3px;font-size:9px;font-weight:1000}.score-form input{width:100%;min-width:0;padding:9px;border:3px solid var(--ink);border-radius:9px;background:#fff;font:900 14px/1 sans-serif}.score-form button{padding:10px 9px;border:3px solid var(--ink);border-radius:9px;background:var(--yellow);font-size:10px;font-weight:1000;box-shadow:2px 3px 0 var(--ink)}.score-form button:disabled{opacity:.45;box-shadow:none}.ranking-status{margin:15px 0;text-align:center;font-size:11px;font-weight:900}.ranking-rows{min-height:210px;margin:0;padding:0;list-style:none}.ranking-rows li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:9px 7px;border-bottom:2px dashed #a9b5b6}.ranking-rows li:nth-child(-n+3){background:#fff1a6}.ranking-rows b{font:1000 15px/1 ui-monospace,monospace}.ranking-rows span{overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:1000;white-space:nowrap}.ranking-rows strong{font:1000 14px/1 ui-monospace,monospace}.ranking-note{margin:12px 0 0;color:#617078;font-size:9px;line-height:1.5}
@media(max-height:760px){.tutorial-choice h3{font-size:16px}.tutorial-choice p{margin-bottom:9px}.tutorial-choice button{min-height:40px}.cover-ranking-button{margin-top:9px}.leaderboard-dialog{padding:18px}.ranking-rows{min-height:160px}.ranking-rows li{padding:6px}}

/* 対戦：にごり予報と晴天を、ことば雨の見た目で表現 */
.press.is-versus .board-shell{height:calc(100dvh - 347px)}
.versus-hud{height:auto;min-height:48px;grid-template-rows:auto auto}.garbage-forecast{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding-top:3px;border-top:1px dashed #fff8}.garbage-forecast small{font-size:7px}.garbage-forecast span{min-width:0;overflow:hidden;color:var(--yellow);font-size:12px;letter-spacing:2px;white-space:nowrap}.garbage-forecast b{padding:2px 5px;border-radius:99px;background:#fff;color:var(--ink);font-size:8px}.ball.is-garbage{background:#edf1f0;color:#607078;border-style:dashed;font-size:17px;box-shadow:inset 3px 4px 0 #fff,1px 3px 0 #0c202b}.ball.is-garbage::after{content:"×";position:static;width:auto;height:auto;background:none;color:#9ba7aa;font-size:12px}.fixed-battle-rule{display:flex;justify-content:space-between;align-items:center;margin:13px 0 9px;padding:10px 12px;border:3px solid var(--ink);border-radius:12px;background:var(--lilac);font-size:12px;font-weight:1000;box-shadow:2px 3px 0 var(--ink)}.forecast-picker{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;padding:22px 0 0;border:0}.forecast-picker legend{position:absolute;inset:3px 0 auto;width:100%;font-size:10px;font-weight:1000}.matchmaking-dialog .forecast-picker button{min-height:40px;background:#fff;box-shadow:2px 3px 0 var(--ink)}.matchmaking-dialog .forecast-picker button.is-selected{background:var(--yellow);transform:translateY(-2px);box-shadow:0 0 0 2px var(--coral),2px 4px 0 var(--ink)}
.legal-links{display:flex;justify-content:center;gap:10px;margin-top:10px}.legal-links button{padding:2px;border:0;background:transparent;color:#dfecef;font-size:9px;font-weight:900;text-decoration:underline;text-underline-offset:3px}.legal-dialog{text-align:left}.legal-dialog h2{margin:5px 42px 2px 0;font-size:29px}.legal-dialog>small{color:#607078;font-size:9px}.legal-dialog h3{margin:17px 0 5px;font-size:14px}.legal-dialog p{margin:0;color:#344d59;font-size:11px;font-weight:700;line-height:1.7}.ranking-delete{margin-top:14px;padding:12px;border:2px dashed #8b9da3;border-radius:13px;text-align:center}.ranking-delete b{font-size:11px}.ranking-delete p{margin:5px 0 8px;color:#617078;font-size:9px}.ranking-delete button{padding:8px 12px;border:2px solid var(--ink);border-radius:9px;background:#fff;font-size:9px;font-weight:1000;box-shadow:2px 3px 0 var(--ink)}.ranking-delete button:disabled{opacity:.45}.ranking-delete span{display:block;min-height:12px;margin-top:7px;color:#b53535;font-size:9px;font-weight:900}
.lesson-grid.chain.solved i{animation:letterPulse .35s ease-out both;box-shadow:0 0 0 4px var(--yellow),0 0 18px var(--coral)}.lesson-grid.chain.solved i:nth-child(1){animation-delay:0s}.lesson-grid.chain.solved i:nth-child(2){animation-delay:.12s}.lesson-grid.chain.solved i:nth-child(3){animation-delay:.34s}.lesson-grid.chain.solved i:nth-child(4){animation-delay:.46s}.mode-lesson{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px auto 9px}.mode-lesson b{padding:10px 5px;border:3px solid var(--ink);border-radius:12px;background:var(--yellow);font-size:13px;box-shadow:2px 3px 0 var(--ink)}.mode-lesson b:nth-child(2){background:var(--coral);color:#fff}.mode-lesson small{display:block;margin-top:5px;font-size:9px}.mode-lesson strong{grid-column:1/-1;padding:8px;border:3px dashed var(--ink);border-radius:10px;background:var(--mint);font-size:11px}

/* ホームは「設定して遊ぶ」に視線を絞った、おもちゃ箱の操作盤 */
.cover{padding:18px}.cover-demo{display:none}.cover-inner{width:min(100%,390px)}#edition{display:none}.home-logo{margin-bottom:18px}.home-logo b{display:block;color:#fff;font-size:45px;line-height:.95;letter-spacing:-.08em;text-shadow:4px 5px 0 #0e1d28}.home-logo b span{color:var(--coral)}.home-logo small{display:block;margin-top:9px;color:#dcecef;font-size:10px;font-weight:900;letter-spacing:.12em}.home-heading{margin:0 0 12px;font-size:20px}.tutorial-choice{padding:19px 17px;border:3px solid #fff;border-radius:18px;background:#29475a;box-shadow:5px 6px 0 #0e1d28}.tutorial-choice h3{font-size:20px}
#difficultyChoice{width:100%;padding:17px 16px 14px;border:4px solid var(--ink);border-radius:20px;background:var(--cream);color:var(--ink);box-shadow:6px 7px 0 var(--coral)}.difficulty-picker,.solo-forecast{width:100%;margin:0 0 10px;padding-top:21px}.difficulty-picker legend,.solo-forecast legend{color:var(--ink);text-align:left;font-size:9px}.difficulty-card,.solo-forecast button{min-height:45px;border-color:var(--ink);background:#fff;color:var(--ink);box-shadow:2px 3px 0 var(--ink)}.difficulty-card{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px}.difficulty-card b{margin:0;font-size:13px}.difficulty-card span{font-size:9px}.difficulty-card.is-selected,.solo-forecast button.is-selected{border-color:var(--ink);box-shadow:3px 4px 0 var(--ink);transform:none}.home-rule{margin:2px 0 13px;color:#526873;font-size:9px;font-weight:900}.play-buttons{display:grid;gap:8px}.play-buttons .start-button,.play-buttons .online-button{width:100%;min-height:48px;padding:10px 16px;border-radius:13px;box-shadow:3px 4px 0 var(--ink)}.play-buttons .start-button{font-size:15px}.play-buttons .online-button{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--mint);font-size:12px}.online-button b{font-size:13px}.online-button small{padding-left:10px;border-left:2px solid var(--ink);font-size:8px}.cover-ranking-button{margin:11px auto 0;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;box-shadow:none}.legal-links{margin-top:7px}.legal-links button{color:#61727b}.footer-actions{display:grid;align-content:center;justify-items:start;gap:1px}.footer-actions .text-button{min-height:20px;padding:2px 0}.home-button{color:#b23535}.home-button[hidden]{display:none}
@media(max-height:700px){.home-logo{margin-bottom:10px}.home-logo b{font-size:36px}.home-logo small{margin-top:5px}#difficultyChoice{padding:12px 13px 10px}.home-heading{margin-bottom:7px;font-size:17px}.difficulty-picker,.solo-forecast{margin-bottom:7px;padding-top:18px}.difficulty-card,.solo-forecast button{min-height:38px}.home-rule{margin-bottom:8px}.play-buttons .start-button,.play-buttons .online-button{min-height:42px}.tutorial-choice{padding:14px}}
.private-button{min-height:34px;border:0;background:transparent;font-size:11px;font-weight:900;text-decoration:underline;text-underline-offset:4px}.private-room h2{margin:0 0 17px;font-size:25px}.private-room label{display:grid;gap:6px;font-size:11px;font-weight:900}.private-room input,.private-room select{width:100%;padding:10px;border:2px solid var(--ink);border-radius:9px;background:#fff;font-size:16px}.private-room button:not(.dialog-close){padding:11px 17px;border:3px solid var(--ink);border-radius:10px;background:var(--yellow);font-weight:900}.private-room button:disabled{opacity:.4}.private-room p{font-size:10px;line-height:1.6}.room-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.room-join{margin-top:24px;padding-top:18px;border-top:2px dashed #a0afb5;display:grid;grid-template-columns:1fr auto;align-items:end;gap:9px}#roomCodeDisplay{display:block;letter-spacing:.16em;font-size:35px;color:#c43a33}#roomStatus{color:#bd3b32;min-height:16px}#roomWaiting[hidden],#roomSetup[hidden]{display:none}
.opponent-panel{position:absolute;right:17px;top:65px;z-index:5;width:98px;padding:5px;border:2px solid var(--ink);border-radius:11px;background:var(--paper);box-shadow:2px 3px 0 var(--ink)}.opponent-panel[hidden]{display:none}.opponent-panel>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:9px}.opponent-board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(12,1fr);gap:1px;height:99px;margin:3px 0;padding:2px;border-radius:6px;background:#21475b}.opponent-board>span{display:grid;place-items:center;min-width:0;min-height:0;background:#ffffff0b;color:var(--ink);font-size:6px;line-height:1}.opponent-board .mini-ball{border-radius:50%;background:var(--yellow);font-weight:900}.opponent-board .tone-1{background:#ffad9f}.opponent-board .tone-2{background:#9fe4ca}.opponent-board .tone-3{background:#bdb5ed}.opponent-board .mini-nigori{background:#dce2e6}.opponent-panel small{display:block;font-size:7px;line-height:1.4;text-align:center}.is-versus .game-head{grid-template-columns:1fr 105px}.is-versus .next-box{visibility:hidden}.is-versus .versus-hud{margin-right:108px;grid-template-columns:auto 1fr auto}.is-versus .versus-hud>i{display:none}.attack-notice{position:absolute;z-index:15;top:205px;left:25px;right:25px;padding:12px 15px;border:3px solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:4px 5px 0 var(--coral);font-size:12px;font-weight:1000;text-align:center;pointer-events:none}.attack-notice[hidden]{display:none}.attack-notice.is-flying{animation:attackArrive .45s ease-out}@keyframes attackArrive{from{opacity:0;transform:translateX(45px) scale(.85)}to{opacity:1;transform:none}}
.battle-result{position:absolute;inset:0;z-index:16;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#102a3f99;color:white;animation:resultFade 1s ease-out}.battle-result[hidden]{display:none}.battle-result strong{font-size:64px;letter-spacing:.12em;text-shadow:3px 4px 0 #0004}.battle-result span{font-weight:900}.battle-result button{margin-top:24px;padding:12px 20px;border:3px solid var(--ink);border-radius:12px;background:var(--cream);font-weight:900}.battle-result button:disabled{opacity:.35}@keyframes resultFade{from{opacity:0}to{opacity:1}}
@media(min-width:850px){.press.is-versus{width:900px;padding-right:430px}.is-versus .game-head{grid-template-columns:1fr 142px}.is-versus .next-box{visibility:visible}.is-versus .versus-hud{margin-right:0;grid-template-columns:auto 1fr 72px auto}.is-versus .versus-hud>i{display:block}.is-versus .opponent-panel{top:192px;right:35px;width:350px;padding:12px}.opponent-panel>b{font-size:18px}.is-versus .opponent-board{height:490px;gap:3px;padding:6px}.is-versus .opponent-board>span{font-size:24px}.is-versus .opponent-panel small{font-size:11px;margin-top:8px}.is-versus .attack-notice{right:440px}.is-versus .board-shell{height:530px}}
@media(min-width:850px){.press.is-versus .opponent-board{height:clamp(280px,calc(100dvh - 350px),540px)}}
@media(max-width:849px){.is-versus .next-box{visibility:visible;position:absolute;left:18px;top:177px;height:29px;width:142px;z-index:5;box-shadow:none}.is-versus .marquee{margin-top:34px}.press.is-versus .board-shell{height:calc(100dvh - 377px)}.is-versus .attack-notice{top:239px}}
.battle-result button{color:var(--ink)}
.result-share{display:inline-block;max-width:100%;padding:12px 18px;border:3px solid var(--ink);border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:900;text-align:center;text-decoration:none;touch-action:manipulation}.result-share[hidden]{display:none}.result-share:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.battle-result .result-share{background:#fff;color:var(--ink)}.cover-inner>.result-share{margin:0 0 12px;background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--coral)}.cover{overflow-x:hidden;overflow-y:auto;place-items:safe center}
.coach-card{left:16px;right:16px;top:55px;padding:12px 15px;border-width:3px;text-align:left;box-shadow:4px 5px 0 var(--coral)}.coach-card small{font-size:10px;letter-spacing:.04em}.coach-card h2{margin:7px 0 6px;font-size:20px}.coach-card p{font-size:12px;line-height:1.55;max-width:100%}.coach-example{display:block;margin:8px 0 0;color:#8d332c;font-size:12px;line-height:1.3}.coach-card #coachStart{display:block;width:100%;margin-top:11px;padding:10px 12px;font-size:13px;border-radius:11px}.coach-card #coachStart[hidden]{display:none}.coach-navigation{display:flex;align-items:center;gap:12px;margin-top:8px}.coach-navigation button{margin:0;padding:4px 0;min-height:24px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:10px;text-decoration:underline;text-underline-offset:3px}.coach-navigation button:last-child{margin-left:auto}.coach-navigation button:disabled{opacity:.3}.coach-navigation button[hidden]{display:none}.guided-mode .cover-demo{display:none}.coach-overlay{background:#18304455}.guide-success .coach-card{background:#dff7ec;box-shadow:4px 5px 0 var(--mint)}.guide-number{position:absolute;z-index:7;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);font:1000 11px/1 sans-serif;box-shadow:1px 2px 0 var(--coral);pointer-events:none}.guide-destination{border:2px dashed var(--yellow);background:#ffd84d33}.guided-mode .drop-target{z-index:8}.guided-mode .marquee{font-size:11px}@media(max-height:700px){.coach-card{top:52px;padding:9px 13px}.coach-card h2{font-size:17px;margin-top:5px}.coach-card p{font-size:11px}.coach-example{font-size:11px;margin-top:5px}.coach-navigation{margin-top:5px}.coach-card #coachStart{margin-top:7px;padding:8px}.guide-number{width:17px;height:17px;font-size:9px}}
.opponent-board .mini-clear{animation:miniClear .24s ease-in-out infinite alternate;box-shadow:0 0 8px #fff}
@keyframes miniClear{to{opacity:.25;transform:scale(1.18)}}
/* Safety actions are secondary to the game and stay readable on phones. */
#safetyDialog button:not(.dialog-close),#opponentSafety{min-height:44px;padding:10px 14px;border:2px solid currentColor;border-radius:12px;font:inherit;cursor:pointer;touch-action:manipulation}
#safetyDialog section{margin-block:18px}#safetyStatus{white-space:pre-line}#deleteAccount{color:#a52532}.ranking-rows li>button{grid-column:2/-1;justify-self:start;font:inherit;font-size:12px;padding:5px 10px;min-height:32px}#opponentSafety{font-size:11px;margin-top:8px}