:root{--ink: #14233a;--ink-soft: #3a4d66;--paper: #eef3f8;--paper-2: #dfe8f2;--line: #b7c6d8;--accent: #0f6e6a;--accent-2: #c44536;--found: #2f7d57;--select: #f0b429;--shadow: 0 18px 50px rgba(20, 35, 58, .12);--radius: 18px;--font-ui: "IBM Plex Sans JP", system-ui, sans-serif;--font-brand: "Syne", "IBM Plex Sans JP", sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font-ui);color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%,#c9dde8 0%,transparent 55%),radial-gradient(900px 500px at 100% 0%,#d7e6df 0%,transparent 50%),linear-gradient(165deg,#f5f8fb 0%,var(--paper) 45%,#e6eef6 100%)}body,#app{min-height:100dvh}button{font:inherit;cursor:pointer;border:none;background:none}.screen{width:min(1080px,100%);margin:0 auto;padding:1.25rem 1rem 2rem}.brand{font-family:var(--font-brand);font-weight:800;letter-spacing:-.015em;font-size:clamp(2rem,5vw,2.8rem);margin:0;line-height:1.14}.brand span{color:var(--accent)}.lede{margin:.55rem 0 0;color:var(--ink-soft);max-width:36ch;line-height:1.45}.setup{display:grid;gap:1.5rem;padding-top:2rem}.setup>header,.setup-panel{width:min(720px,100%);margin-inline:auto}@media (min-width: 580px){.setup .brand{white-space:nowrap}}.setup-panel{display:grid;gap:1rem}.setup.kana-switch-in .brand span{display:inline-block;animation:kana-symbol-in .5s cubic-bezier(.2,.9,.25,1)}.field-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.45rem;color:var(--ink-soft)}.diff-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.kana-type-row{grid-template-columns:repeat(2,minmax(0,1fr))}.kana-type-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem}.kana-type-symbol{font-family:IBM Plex Sans JP,Hiragino Sans,sans-serif;font-size:1.35rem;line-height:1}.diff-btn{padding:.85rem .5rem;border-radius:12px;border:1.5px solid var(--line);background:#ffffff8c;color:var(--ink);font-weight:600;transition:border-color .15s,background .15s,transform .15s}.diff-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.diff-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.95rem 1.35rem;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;box-shadow:0 10px 24px #0f6e6a47;transition:transform .15s,filter .15s}.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}.btn-ghost{padding:.55rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:#ffffff80;font-weight:600;color:var(--ink)}.diff-btn:active,.btn-primary:active,.btn-ghost:active,.kana-style-btn:active,.preset-swatch:active,.word-item:active{transform:translateY(1px) scale(.96);transition-duration:60ms}.meta-line{font-size:.9rem;color:var(--ink-soft)}.play-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}.stats{display:flex;gap:.75rem;flex-wrap:wrap}.stat{background:#ffffffa6;border:1px solid var(--line);border-radius:12px;padding:.45rem .75rem;min-width:5.5rem}.stat strong{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}.stat span{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}.play-grid-wrap{display:grid;gap:1rem}.board-column{display:grid;gap:.75rem;min-width:0}@media (min-width: 860px){.play-grid-wrap{grid-template-columns:1fr min(280px,32%);align-items:start}}.board-shell{--cell-bg: #f7fafc;--cell-fg: #14233a;--kana-font: "IBM Plex Sans JP", system-ui, sans-serif;--grid-line: color-mix(in srgb, var(--cell-fg) 28%, transparent);background:#ffffffb8;border:1px solid var(--line);border-radius:var(--radius);padding:.35rem;box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;touch-action:none;min-width:0;overflow:hidden}.phaser-board{width:100%;aspect-ratio:1;min-width:0;touch-action:none}.phaser-board canvas{display:block;width:100%!important;height:100%!important;border-radius:calc(var(--radius) - 5px)}.board-square{display:grid;gap:0;width:100%;aspect-ratio:1;margin:0 auto;border:1px solid transparent;background:transparent}.board-shell.has-lines .board-square{gap:1px;background:var(--grid-line);border-color:var(--grid-line)}.board-square .cell{display:grid;place-items:center;border-radius:0;font-family:var(--kana-font);font-size:clamp(.95rem,3.2vw,1.5rem);font-weight:500;background:var(--cell-bg);color:var(--cell-fg);transition:background .12s,color .12s,filter .12s;line-height:1}.board-hex{--hex-cols: 9;--hex-size: 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;aspect-ratio:1 / 1;max-width:100%;height:auto;max-height:100%;min-width:0;min-height:0;padding:.25rem;gap:0;background:transparent;border:none;overflow:hidden;box-sizing:border-box}.hex-row{display:flex;justify-content:center;margin-top:calc(var(--hex-size) * -.288675 - 1px);flex-shrink:0}.hex-row:first-child{margin-top:0}.hex-row:nth-child(2n){margin-left:calc(var(--hex-size) * .5);margin-right:calc(var(--hex-size) * -.5)}.hex-cell{--hex-fill: var(--cell-bg);width:var(--hex-size);height:calc(var(--hex-size) * 1.1547);flex:0 0 var(--hex-size);margin:0;display:grid;place-items:center;position:relative;background:var(--hex-fill);color:var(--cell-fg);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);font-family:var(--kana-font);font-size:calc(var(--hex-size) * .48);font-weight:500;line-height:1;transition:background .12s,color .12s,filter .12s}.board-shell.has-lines .hex-cell{background:var(--grid-line)}.board-shell.has-lines .hex-cell:before{content:"";position:absolute;top:1.25px;right:1.25px;bottom:1.25px;left:1.25px;z-index:0;background:var(--hex-fill);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.hex-cell span{position:relative;z-index:1;pointer-events:none}.cell.is-select{background:var(--select)!important;color:var(--ink)!important}.hex-cell.is-select{--hex-fill: var(--select)}.board-shell.has-lines .hex-cell.is-select{background:var(--grid-line)!important}.cell.is-found{background:color-mix(in srgb,var(--found) 40%,var(--cell-bg))!important;color:color-mix(in srgb,var(--found) 70%,var(--cell-fg))!important;font-weight:600}.hex-cell.is-found{--hex-fill: color-mix(in srgb, var(--found) 40%, var(--cell-bg))}.board-shell.has-lines .hex-cell.is-found{background:var(--grid-line)!important}.board-options{background:#ffffffb8;border:1px solid var(--line);border-radius:14px;padding:.75rem;display:grid;gap:.65rem}.opt-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}.opt-color{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--ink-soft)}.opt-color input[type=color]{width:2rem;height:2rem;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer}.opt-check{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--ink-soft);cursor:pointer}.opt-kana{display:grid;gap:.35rem}.opt-kana>span{font-size:.85rem;font-weight:600;color:var(--ink-soft)}.kana-style-row{display:flex;flex-wrap:wrap;gap:.4rem}.kana-style-btn{padding:.4rem .65rem;border-radius:10px;border:1.5px solid var(--line);background:#ffffffa6;color:var(--ink);font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem}.kana-style-btn .sample{font-size:1.05rem;font-weight:500;line-height:1}.kana-style-btn[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}.preset-row{display:flex;flex-wrap:wrap;gap:.4rem}.preset-swatch{width:2.1rem;height:2.1rem;border-radius:8px;border:1px solid var(--line);background:var(--swatch-bg);color:var(--swatch-fg);font-weight:700;font-size:.95rem}.preset-swatch:hover{transform:translateY(-1px)}.shape-row{grid-template-columns:repeat(2,1fr)}.word-list{background:#ffffffb8;border:1px solid var(--line);border-radius:var(--radius);padding:.85rem;box-shadow:var(--shadow);max-height:min(70vh,640px);overflow:auto}.word-list h2{margin:0 0 .65rem;font-size:.95rem;font-weight:700}.word-item{display:grid;position:relative;gap:.1rem;width:100%;text-align:left;padding:.55rem .45rem;border-radius:10px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:inherit}.word-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}.word-item:last-child{border-bottom:none}.word-item.found{opacity:.55}.word-item.found .kana{text-decoration:line-through;color:var(--found)}.word-item.just-found{animation:word-found-pop .62s cubic-bezier(.2,.9,.25,1)}.word-item.just-found:after{content:"✦";position:absolute;top:.2rem;right:.45rem;color:#d99612;font-size:1rem;pointer-events:none;animation:word-found-star .72s ease-out forwards}.word-item.word-arrived{animation:word-arrived .42s cubic-bezier(.2,.9,.25,1)}.flying-word{position:fixed;z-index:1200;display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:.35rem .7rem;border:2px solid rgba(255,255,255,.95);border-radius:999px;background:linear-gradient(135deg,#ffd43b,#ff7a8a 55%,#9b7ede);color:#14233a;font-size:1.25rem;font-weight:800;box-shadow:0 8px 22px #14233a40;pointer-events:none}.milestone-toast{position:fixed;z-index:1300;top:clamp(90px,16vh,150px);left:50%;display:flex;align-items:center;gap:.65rem;padding:.8rem 1.3rem;border:2px solid rgba(255,255,255,.92);border-radius:999px;background:linear-gradient(135deg,#0f6e6a,#397fbd);color:#fff;font-weight:800;box-shadow:0 12px 30px #14233a47;transform:translate(-50%);animation:milestone-in .52s cubic-bezier(.2,.9,.25,1) both;pointer-events:none}.milestone-toast span{color:#ffd43b;font-size:1.15rem}.milestone-toast.is-leaving{animation:milestone-out .36s ease-in forwards}.kana{font-size:1.15rem;font-weight:600}.meaning{font-size:.82rem;color:var(--ink-soft)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14233a73;display:grid;place-items:start center;padding:clamp(2rem,11vh,7rem) 1rem 1rem;z-index:20;animation:fade-in .25s ease}.dialog{width:min(420px,100%);background:#fff;border-radius:20px;padding:1.5rem;box-shadow:var(--shadow);text-align:center;animation:pop-in .28s ease}.dialog h2{margin:0;font-family:var(--font-brand);font-size:1.8rem}.dialog p{color:var(--ink-soft);line-height:1.45}.dialog-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1rem}.loading,.error{padding:3rem 1rem;text-align:center;color:var(--ink-soft)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes word-found-pop{0%{transform:scale(1);background:transparent}35%{transform:scale(1.035);background:color-mix(in srgb,var(--found) 18%,transparent)}to{transform:scale(1);background:transparent}}@keyframes word-found-star{0%{opacity:0;transform:translateY(5px) scale(.3) rotate(-15deg)}28%{opacity:1;transform:translateY(-2px) scale(1.2) rotate(8deg)}to{opacity:0;transform:translateY(-18px) scale(.65) rotate(28deg)}}@keyframes kana-symbol-in{0%{transform:rotate(-110deg) scale(.35)}65%{transform:rotate(8deg) scale(1.18)}to{transform:none}}@keyframes word-arrived{0%{transform:scale(1)}45%{transform:scale(1.055);background:color-mix(in srgb,#ffd43b 24%,transparent)}to{transform:scale(1)}}@keyframes milestone-in{0%{opacity:0;transform:translate(-50%,-18px) scale(.78)}70%{opacity:1;transform:translate(-50%,2px) scale(1.05)}to{opacity:1;transform:translate(-50%)}}@keyframes milestone-out{to{opacity:0;transform:translate(-50%,-12px) scale(.92)}}@media (prefers-reduced-motion: reduce){.word-item.just-found,.word-item.just-found:after,.word-item.word-arrived,.setup.kana-switch-in .brand span,.milestone-toast,.milestone-toast.is-leaving{animation:none}.flying-word{display:none}}