:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#081725;color:#eef5fa;font-synthesis:none;-webkit-font-smoothing:antialiased;--ink:#eef5fa;--muted:#8ea6b9;--teal:#8de5d4;--line:#ffffff12;--surface:#132838;--bottom:calc(80px + env(safe-area-inset-bottom,0px))}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth;background:#081725}body{margin:0;min-height:100vh;min-height:100dvh;background:#081725;overflow-x:clip;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}button,a,summary{touch-action:manipulation}button{font:inherit;cursor:pointer;border:0;color:inherit}a{color:var(--teal);text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px}button:disabled{cursor:default}button{transition:transform .18s,background .18s,box-shadow .18s}button:active{transform:scale(.96)}[hidden]{display:none!important}button,input,select,textarea{font-size:16px}.ambient{position:fixed;z-index:0;inset:0;pointer-events:none;background:radial-gradient(ellipse at 90% 5%,#173e544d,transparent 50%),radial-gradient(ellipse at 0 65%,#0d464332,transparent 50%)}.app-header,.app-main{position:relative;z-index:1}.app-header{max-width:1032px;margin:auto;padding:calc(24px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 20px max(24px,env(safe-area-inset-left,0px));display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:19px;font-weight:650;letter-spacing:-.5px}.brand small{display:block;margin-top:5px;font-size:8px;letter-spacing:1.65px;font-weight:500;color:#9ab0bf}.app-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#287e88,#163e53);box-shadow:inset 0 1px 0 #ffffff40,0 7px 15px #0002;font-size:29px;color:#e6fff0;font-family:serif}.help-button{width:36px;height:36px;border:1px solid #ffffff20;background:#ffffff05;border-radius:50%;font-size:17px;color:#abc0ce}.app-main{max-width:1032px;margin:auto;padding:12px max(24px,env(safe-area-inset-right,0px)) calc(var(--bottom) + 28px) max(24px,env(safe-area-inset-left,0px))}.view{animation:enter .3s ease both}.intro{padding:20px 0 28px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;color:#96b4c2;display:inline-flex;align-items:center;gap:7px}.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px #8de5d460}h1,h2,h3,p{margin:0}.intro h1{font-size:clamp(36px,5vw,54px);font-weight:600;line-height:1.13;letter-spacing:-1.8px;margin:16px 0 12px}.intro h1 span{color:#8cb4bd}.intro>p{font-size:14px;color:var(--muted);line-height:1.6}.setup-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hero-card{isolation:isolate;overflow:hidden;position:relative;min-height:310px;border:1px solid #a0d6e61f;border-radius:28px;background:radial-gradient(ellipse at 70% 35%,#348a9c55,transparent 70%),linear-gradient(135deg,#20485d,#163044 70%,#132938);padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 1px 0 #ffffff0c,0 16px 40px #0002}.hero-label{font-size:8px;letter-spacing:2px;color:#b7d3dc;z-index:1}.hero-kana{position:relative;margin:-10px 0 0;text-align:center;font:148px/1.2 'Yu Mincho',serif;color:#dcf5eb;transform:rotate(-9deg);text-shadow:0 15px 40px #041a2c44;z-index:1}.hero-kana>span{position:absolute;left:66%;top:30%;font-size:65px;color:#bdd7c050;transform:rotate(22deg)}.hero-orbit{position:absolute;width:310px;height:310px;border:1px solid #9ad7d315;border-radius:50%;top:-45px;right:-40px;box-shadow:0 0 0 35px #9ad7d306,0 0 0 75px #9ad7d305;transform:rotate(25deg)}.hero-bottom{display:flex;align-items:center;gap:6px;z-index:1}.pill{padding:7px 10px;border:1px solid #d8eeed21;border-radius:20px;font-size:10px;color:#b6d6d7;background:#ffffff04}.hero-count{margin-left:auto;font-size:9px;line-height:1.6;color:#9cbac7}.setup-card{border:1px solid var(--line);background:linear-gradient(145deg,#172f40,#102432);border-radius:28px;padding:26px;box-shadow:inset 0 1px 0 #ffffff06,0 16px 40px #0001}.card-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.card-heading h2{font-size:23px;letter-spacing:-.7px;font-weight:600;margin-top:7px}.tiny-mark{color:#dabb82;font-size:25px}.field-label{display:flex;align-items:center;gap:8px;margin-bottom:10px}.field-label>span{font-size:9px;color:#607d91}.field-label h3{font-size:12px;font-weight:550;color:#c5d6e1}.choices,.target-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border:1px solid #ffffff04;border-radius:13px;background:#0716236b;gap:3px}.choice{border-radius:9px;background:transparent;min-height:44px;font-size:12px;color:#829eaf;font-weight:500;padding:8px 2px}.choice[aria-pressed=true]{background:#365264;color:#e5f5f7;box-shadow:0 2px 5px #0003,inset 0 1px #ffffff12}.choice:hover{color:#f0fffe}.match-direction{display:flex;align-items:center;justify-content:center;gap:10px;color:#57788d;margin:12px 0;font-size:15px}.match-direction span{width:27px;height:1px;background:#ffffff0c}.primary{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:54px;border-radius:15px;background:linear-gradient(120deg,#a1eddb,#7bd8cd);color:#082f35;font-size:14px;letter-spacing:-.1px;font-weight:650;box-shadow:0 6px 22px #80decb12,inset 0 1px #ffffff70}.primary:hover{background:#adf2e2;box-shadow:0 8px 24px #80decb20}.primary span{font-size:20px;font-weight:400}.setup-card .primary{margin-top:24px}.session-note{display:flex;justify-content:center;align-items:center;gap:9px;color:#7391a4;font-size:10px;margin-top:14px}.session-note i{height:3px;width:3px;border-radius:50%;background:#517181}.practice-tip{display:flex;justify-content:center;gap:12px;margin-top:27px;color:#c6ac7d}.practice-tip>span{font-size:24px}.practice-tip p{font-size:11px;line-height:1.7;color:#90aaba}.practice-tip strong{font-weight:400;color:#597b8f}.tab-bar{position:fixed;bottom:0;left:0;right:0;z-index:10;background:#0d2130e6;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top:1px solid #ffffff0d;display:flex;justify-content:center;gap:clamp(20px,8vw,130px);padding:10px max(20px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));min-height:var(--bottom)}.tab-bar button{background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:80px;min-height:48px;color:#6c8b9f;font-size:10px;position:relative}.tab-bar svg{width:23px;height:23px}.tab-bar button[aria-current]{color:var(--teal)}.tab-bar button[aria-current]:before{content:'';position:absolute;width:36px;height:29px;border-radius:10px;background:#8de5d40b;top:0}.session-heading{display:flex;align-items:center;gap:15px;margin:16px 0 24px}.session-heading h1{font-size:28px;letter-spacing:-1px;font-weight:600;margin-top:5px}.back-button,.icon-button{min-width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:#ffffff05;font-size:26px;color:#a6c5d2}.icon-button{margin-left:auto}.session-status{display:flex;justify-content:space-between;font-size:12px;color:#a6bfce;margin-bottom:12px}#timer{font-variant-numeric:tabular-nums;color:#7f9daf}.progress-track{height:4px;background:#ffffff0b;border-radius:4px;overflow:hidden}#progress-fill{display:block;height:100%;width:0;background:var(--teal);border-radius:4px;transition:width .3s}.progress-caption{display:flex;justify-content:space-between;font-size:10px;color:#6e8c9f;margin:9px 0 18px}.group-picker{background:#102534;border:1px solid var(--line);border-radius:14px;margin-bottom:22px}.group-picker summary{cursor:pointer;list-style:none;padding:14px;min-height:44px;display:flex;justify-content:space-between;font-size:12px;color:#b6ced9}.group-picker summary::-webkit-details-marker{display:none}.group-picker summary>span{font-size:10px;color:#7c9dab}.group-picker summary b{margin-left:10px;font-size:13px;font-weight:400}#groups{padding:0 10px 10px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}#groups button{background:#1d3b48;min-height:44px;border-radius:9px;font-size:11px;color:#c2f1de;border:1px solid #7ccebb38}#groups button[aria-pressed=false]{color:#7c95a5;background:#0c1d29;border-color:var(--line)}.board-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.board-label h2{font-size:14px;letter-spacing:-.2px;font-weight:550}.board-label>span{font-size:8px;letter-spacing:1.2px;color:#698b9f}#grid{display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));grid-template-rows:repeat(5,48px);gap:6px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;scrollbar-color:#416071 transparent;overscroll-behavior-x:contain;border-radius:12px}#grid button{min-width:44px;border-radius:10px;background:linear-gradient(#1d3b4f,#173043);border:1px solid #44627440;box-shadow:inset 0 1px #ffffff05;font-size:18px;color:#d6e5e8;font-weight:500}#grid button:hover:not(:disabled){background:#284d60}#grid button.matched{color:#a7e8cf;background:#153b3b;border-color:#80ddbc40}#grid button.disabled-group{opacity:.22}#grid button.filler{opacity:.15;background:transparent;font-size:13px}.tray{margin-top:20px;padding:18px;background:linear-gradient(135deg,#1b303a,#182c35);border:1px solid #c0a16a20;border-radius:22px;box-shadow:inset 0 1px #ffffff05}.tray .board-label>span{color:#b79b6b}#tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px}.tile{height:48px;min-width:44px;touch-action:none;border-radius:10px;background:#c8a86d0d;border:1px solid #d4b78321;font:25px/1 'Yu Mincho',serif;color:#e4d5b5;user-select:none;cursor:grab}.tile.romaji{font-family:inherit;font-size:17px}.tile:hover{background:#c8a86d20}.tile.selected{outline:2px solid var(--teal);background:#8de5d420;color:#d4fff4}.tile.matched{visibility:hidden;pointer-events:none}.match-hint{text-align:center;min-height:35px;margin:15px 0 0;font-size:11px;line-height:1.6;color:#6f93a6}#board{max-width:760px;margin:auto;animation:enter .3s ease}.drag-ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%);font:34px 'Yu Mincho',serif;color:#d7fbee;background:#245563ee;border:1px solid #a0e7d5;border-radius:14px;min-width:50px;height:54px;display:grid;place-items:center;box-shadow:0 8px 20px #0006}.wrong{animation:shake .3s}.matched{animation:match .3s}#complete{position:fixed;inset:0;z-index:30;background:#04111dba;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);display:grid;place-items:center;padding:24px}.completion-card{width:100%;max-width:390px;border-radius:30px;border:1px solid #7bada83b;background:linear-gradient(145deg,#1c3d49,#102534);padding:34px 26px;text-align:center;box-shadow:0 30px 80px #0007}.completion-mark{display:block;color:#c8b17f;font-size:60px;margin-bottom:22px}.completion-card h2{font-size:30px;letter-spacing:-1px;margin:12px 0}.completion-card p{color:#8daab8;font-size:13px}.completion-card #complete-time{display:block;margin:18px 0 25px;color:var(--teal);font-size:13px}.text-button{background:transparent;color:#a1bdca;min-height:44px;margin-top:10px;font-size:12px}.guide-summary,.resource-card,.install-card,.game-info{border:1px solid var(--line);border-radius:24px;background:#112737;padding:24px;margin-bottom:24px}.guide-summary{display:grid;gap:20px;color:#79a697;font-size:11px}.guide-summary strong{color:#c7dce4;font-size:13px;font-weight:500;margin-left:12px}.game-info{font-size:14px;line-height:1.8;color:#9db7c7}.game-info h1{font-size:21px;letter-spacing:-.6px;color:#e7f2f6;line-height:1.4;margin-bottom:16px}.game-info h2{font-size:12px;font-weight:400;margin-bottom:24px}.game-info h3{font-size:18px;color:#e3f0f3;margin:26px 0 12px}.game-info p{margin:16px 0}.game-info ul{padding-left:20px}.game-info hr{border:0;border-top:1px solid var(--line);margin:22px 0}.install-card{text-align:center;padding:30px}.app-mark.large{width:70px;height:70px;font-size:47px;border-radius:22px;margin:0 auto 24px}.install-card h2{font-size:23px;font-weight:550;letter-spacing:-.6px}.install-card p{font-size:13px;line-height:1.7;color:#91adbd;margin:14px 0 24px}.install-card #install-help{background:#0a1c29;border-radius:12px;padding:16px;text-align:left;line-height:1.8;margin-bottom:12px}.status-note{display:block;margin-top:15px;font-size:10px;line-height:1.6;color:#789d9a}.resource-card h2{font-size:17px;letter-spacing:-.3px;margin-bottom:16px}.resource-card a{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;color:#a5c3d1}.resource-card a:last-child{border:0}.resource-card a span{color:#627f8e}.promo-link{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#c2a16e08;border:1px solid #c2a16e20;border-radius:18px;font-size:12px;color:#c9b68e;margin-bottom:26px}.promo-link small{display:block;font-size:10px;color:#8b998e;margin-top:6px}footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:0 18px}footer nav a{font-size:11px;min-height:44px;display:grid;align-items:center;color:#7897aa}footer p{text-align:center;color:#4f7184;font-size:10px;line-height:1.6;margin:10px 0}footer p small{font-size:10px}footer p a{color:#708f9f}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:640px){.app-header{padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:12px}.app-main{padding-top:4px}.intro{padding-top:20px;padding-bottom:26px}.intro h1{font-size:38px}.setup-layout{grid-template-columns:1fr;gap:18px}.hero-card{min-height:210px;padding:20px;border-radius:24px}.hero-kana{font-size:115px;margin:-26px 0 -8px}.hero-kana>span{font-size:50px;left:65%}.hero-orbit{right:0;top:-85px}.hero-count{font-size:9px}.hero-bottom{margin-top:-14px}.setup-card{padding:22px;border-radius:24px}.card-heading{margin-bottom:22px}.card-heading h2{font-size:22px}.practice-tip{margin-top:24px}.choice{font-size:11px}.session-heading{margin-top:18px}.session-heading h1{font-size:27px}.tray{padding:14px}.guide-summary,.game-info{padding:22px}.install-card{padding:26px 22px}#grid{scroll-snap-type:x proximity}#grid button{scroll-snap-align:start}}
@media(min-width:900px){.intro{padding-top:35px}.setup-layout{gap:26px}.hero-card{min-height:380px}.hero-kana{font-size:190px}.setup-card{padding:30px}.practice-tip{margin-top:35px}#guide-view,#more-view{max-width:700px;margin:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes shake{25%,75%{transform:translateX(3px);background:#6a3c3c}50%{transform:translateX(-3px)}}@keyframes match{50%{box-shadow:0 0 15px #8de5d440}}
.modal-open{overflow:hidden}
@media(max-width:640px){#grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(10,44px);overflow:visible;gap:6px}#grid button{min-width:0;min-height:44px}.tray #tiles{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.tile{height:48px}.board-label{margin-top:16px}}
@media(max-width:640px){.intro{padding-top:12px;padding-bottom:22px}.intro h1{font-size:36px;margin-top:14px}.hero-card{min-height:160px;padding:18px 20px}.hero-kana{font-size:90px;margin:-20px 0 -10px}.hero-kana>span{font-size:40px}.hero-bottom{margin-top:-14px}.hero-orbit{width:250px;height:250px;top:-90px}.setup-card{padding:20px 22px}.card-heading{margin-bottom:18px}.match-direction{margin:8px 0}.setup-card .primary{margin-top:18px}}
.help-button{width:44px;height:44px}.brand{min-height:44px}
@media(max-width:640px){.intro{padding-bottom:16px}.intro h1{font-size:34px;line-height:1.1;margin-top:10px}.intro>p{font-size:13px}.hero-card{min-height:120px}.hero-kana{font-size:68px;margin:-20px 0 -15px}.hero-kana>span{font-size:32px}.hero-label{font-size:7px}.hero-bottom .pill{padding:5px 8px;font-size:9px}.hero-count{font-size:8px}.setup-layout{gap:14px}.setup-card .primary{min-height:50px}}
@media(max-width:640px) and (max-height:740px){.hero-card{display:none}.intro{padding-top:6px}.intro h1{font-size:32px}.setup-card{padding-top:18px;padding-bottom:18px}}
@media(max-width:640px) and (max-height:740px){.setup-card{padding-top:16px;padding-bottom:16px}.card-heading{margin-bottom:12px}.field-label{margin-bottom:8px}.match-direction{margin:6px 0}.setup-card .primary{margin-top:14px}}