:root{--ink:#172b3d;--muted:#576979;--paper:#f3f7fb;--line:#dce6ee;--blue:#125ad6;--mint:#04a38b;--gold:#ffcc4b;--radius:20px;font-family:Inter,'Noto Sans JP',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,.primary{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.75rem 1rem;color:var(--ink);cursor:pointer;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .15s,background .15s}button:hover{background:#eaf1fa}button:active,.stage:active{transform:translateY(2px)}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.primary:hover{background:#084ebc}.quiet{font-size:.875rem;color:var(--muted)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffa900;outline-offset:3px}input,textarea,select{border:1px solid #b9cad8;border-radius:10px;padding:.65rem;background:#fff;min-width:0;color:var(--ink)}textarea{resize:vertical;min-height:80px;width:100%}label{display:flex;flex-direction:column;gap:.4rem;font-size:.875rem;font-weight:600}input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}h1{font-size:2.2rem;letter-spacing:-.05em;margin:.4rem 0 1rem;line-height:1.4}h2{font-size:1.15rem}h3{font-size:1.2rem}p{line-height:1.8}small{font-size:.8rem;color:var(--muted)}.topbar{height:88px;max-width:1184px;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px}.brand{display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:800;letter-spacing:-.04em}.brand-logo{display:block;width:42px;height:42px;object-fit:contain;flex:0 0 42px}.brand small{font-size:.7rem;letter-spacing:.12em;font-weight:600;margin-left:10px}.logo{display:grid;place-items:center;background:var(--blue);color:#fff;width:42px;height:42px;border-radius:12px;font-size:1.5rem;box-shadow:4px 4px 0 var(--gold)}main{max-width:1184px;margin:auto;padding:36px 32px 64px}footer{text-align:center;color:var(--muted);padding:28px;font-size:.875rem}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0 28px}.intro p{color:var(--muted);margin:0}.eyebrow{font-size:.75rem;font-weight:750;letter-spacing:.15em;color:var(--blue)}.level-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 36px}.level{display:flex;align-items:flex-start;flex-direction:column;padding:20px 24px;border-radius:16px;font-size:1.65rem}.level small{font-size:.875rem;font-weight:500}.level.active{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:0 7px 18px #125ad620}.level.active small{color:#e4eeff}.section-label{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:16px 0}.section-label>span{font-size:.875rem;color:var(--muted)}.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stage{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:block;transition:transform .15s,box-shadow .15s}.stage:hover{box-shadow:0 8px 24px #172b3d0c;transform:translateY(-3px)}.stage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.theme{background:#e8f4f1;color:#137768;border-radius:8px;padding:5px 9px;font-size:.875rem;font-weight:650}.stage-arrow{font-size:1.5rem;color:var(--blue)}.stage h3{margin:8px 0 26px;font-size:1.3rem}.stage-bottom{display:flex;justify-content:space-between;font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}.record{color:#997000}.ad-slot{margin:36px auto 0;min-height:24px;max-width:720px}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.toggle,.check{flex-direction:row;align-items:center}.ruby-switch{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:9px;cursor:pointer;user-select:none;white-space:nowrap}.ruby-switch-label{font-size:.875rem;font-weight:650;color:var(--muted)}.ruby-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.ruby-switch-track{position:relative;display:inline-block;width:44px;height:24px;border-radius:999px;background:#cbd6df;box-shadow:inset 0 0 0 1px #b7c6d2;transition:background .18s,box-shadow .18s}.ruby-switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #172b3d35;transition:transform .18s}.ruby-switch input:checked+.ruby-switch-track{background:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}.ruby-switch input:checked+.ruby-switch-track .ruby-switch-thumb{transform:translateX(20px)}.ruby-switch input:focus-visible+.ruby-switch-track{outline:3px solid #ffa900;outline-offset:3px}.ruby-switch:hover .ruby-switch-track{box-shadow:inset 0 0 0 1px #9eafbc}.ruby-switch input:checked+.ruby-switch-track:hover,.ruby-switch:hover input:checked+.ruby-switch-track{box-shadow:inset 0 0 0 1px var(--blue)}.stats{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;margin:16px 0 28px;padding:18px 0}.stats>div{flex:1;text-align:center;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats small{display:block;font-size:.7rem;font-weight:650;letter-spacing:.07em}.stats strong{display:block;font-size:1.65rem;margin-top:6px;color:var(--blue);font-variant-numeric:tabular-nums}.play-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);align-items:start;gap:32px}.board-panel{min-width:0;display:flex;justify-content:center;align-items:flex-start}.board{--cols:11;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:3px;background:#dfe7ef;border:6px solid #dfe7ef;border-radius:14px;width:100%;max-width:520px;margin:0 auto;overflow:hidden}.cell{padding:0;aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;border:0;border-radius:3px;background:white;font-size:clamp(14px,2vw,23px);font-weight:650;min-width:0;line-height:1}.cell small{position:absolute;top:3px;left:3px;font-size:10px;font-weight:600;line-height:1;color:#52677c}.cell .letter{padding-top:5px}.cell.selected{background:#d5e6ff;color:#064cae}.cell.locked{background:#d4f2e9;color:#09634e}.cell.cursor{box-shadow:inset 0 0 0 2px var(--blue)}.block{aspect-ratio:1;background:#dfe7ef}.answer-panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 8px 24px #172b3d08}.answer-eyebrow{margin-bottom:8px}.active-clue{background:#e5edff;border-left:4px solid var(--blue);padding:16px;margin:0 0 14px;border-radius:4px 12px 12px 4px;line-height:1.8;font-size:1rem}.known-hint{margin:0 0 14px;padding:12px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}.known-hint-label{display:block;margin-bottom:8px;font-size:.78rem;font-weight:650;color:var(--muted)}.known-pattern{display:flex;gap:6px;flex-wrap:wrap}.known-char{width:2.1rem;height:2.1rem;display:grid;place-items:center;border:1px solid #cdd9e4;border-radius:8px;background:#f7f9fb;font-size:1.05rem;font-weight:700;line-height:1}.known-char.known{background:#d4f2e9;border-color:#a9dece;color:#09634e}.known-char.blank{color:#9aa8b5}.input-row{display:flex;gap:8px;margin-top:8px}.input-row input{width:100%;font-size:1.2rem;letter-spacing:.08em}.input-row button{font-size:1.4rem;flex:0 0 48px}#input-help{display:block;line-height:1.6;margin-top:8px}.board-actions{display:flex;align-items:center;gap:16px;margin-top:18px}.hint-button{background:#fff4ce;border-color:#eedba0}.clues-section{margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}.clues-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px}.clues-section-head h2{margin:.3rem 0 0;font-size:1.25rem}.language-label{flex-direction:row;justify-content:flex-end;align-items:center;gap:10px;white-space:nowrap;color:var(--muted)}.language-label select{max-width:190px}.clues-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}.clue-column{min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px}.clue-column>h2{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:1.05rem}.clue-column>h2 span{color:var(--blue)}.clue{border-bottom:1px solid var(--line);padding:12px 8px;border-radius:10px;position:relative}.clue.active{background:#edf3ff}.clue.solved{background:#edf8f3}.clue-select{border:0;background:transparent;display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;text-align:left;font-size:1rem;line-height:2.1;padding:0;width:100%;font-weight:400}.clue-select strong{color:var(--blue);min-width:18px}.translate{font-size:.8rem;padding:3px 9px;margin:8px 0 0 30px;color:var(--muted);font-weight:500}.translated{font-size:.9rem;margin:8px 0 0 30px}.translated:empty{display:none}rt{font-size:.6em;color:var(--muted)}.hide-ruby rt,.hide-ruby rp{display:none}.clear-panel{text-align:center;max-width:760px;margin:auto}.clear-panel h1{font-size:4rem;color:var(--blue);letter-spacing:.02em}.stars{font-size:3rem;color:#bd8b00;letter-spacing:8px}.review-word{text-align:left;background:white;border:1px solid var(--line);padding:12px 22px;margin:12px 0;border-radius:14px}.review-word h3{margin:.4rem 0}.clear-panel>.primary{margin-top:24px}.admin-nav{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 28px;font-size:.9rem}.admin-nav a:hover{text-decoration:underline}.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:20px}.editor-controls{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.editor-controls label{flex:1;min-width:90px}.editor-controls label:first-child{flex:2}.editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.candidate-list{max-height:380px;overflow:auto;margin:16px 0}.candidate{display:flex;align-items:center;flex-direction:row;padding:7px;border-bottom:1px solid var(--line);gap:8px}.candidate span{flex:1}.candidate button{font-size:.8rem;padding:4px 8px}.word-edit{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px}.word-edit h3,.word-edit .actions{grid-column:1/-1;margin:4px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.actions input{max-width:80px}.help{font-size:.875rem;color:var(--muted)}.save-bar{display:flex;gap:16px;align-items:end;flex-wrap:wrap;padding:20px;background:#e7effc;border-radius:16px}.vocab-row{display:block;width:100%;text-align:left;justify-content:flex-start;margin:8px 0;font-weight:500}.login-panel{max-width:420px;margin:60px auto;background:#fff;padding:30px;border-radius:20px}.login-panel form{display:grid;gap:20px}.error{color:#b72b2b}dialog{border:1px solid var(--line);border-radius:18px;max-width:650px;width:calc(100% - 24px);max-height:90vh;padding:28px}dialog::backdrop{background:#10213b80}dialog form{display:grid;gap:12px}fieldset{border:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap;border-radius:10px}dt{font-weight:650;margin-top:18px}dd{margin:4px 0;color:var(--muted)}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#172b3d;color:white;padding:14px 22px;border-radius:14px;max-width:calc(100% - 32px);width:max-content;opacity:0;pointer-events:none;transition:.2s;z-index:50}#toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}.celebrate{animation:celebrate .4s}@keyframes celebrate{50%{box-shadow:0 0 0 5px #04a38b40}}@media(max-width:850px){.brand small{display:none}.stages{grid-template-columns:repeat(2,1fr)}.play-layout{grid-template-columns:1fr;gap:18px}.board-panel{order:0}.answer-panel{order:1;padding:18px}.clues-layout{gap:18px}.editor-layout{grid-template-columns:1fr}.cell{font-size:1.1rem}}@media(max-width:620px){.topbar{height:74px;padding:0 18px}.brand{font-size:1.05rem}.brand-logo{width:38px;height:38px;flex-basis:38px}.logo{width:36px;height:36px}main{padding:24px 16px 40px}h1{font-size:1.65rem}.intro{display:block}.intro>.primary{margin-top:20px}.level-tabs{gap:8px;margin:8px 0 24px}.level{padding:14px 10px;font-size:1.4rem;align-items:center}.level small{font-size:.72rem}.stages{grid-template-columns:1fr;gap:14px}.stage{padding:20px}.stage-top{margin-bottom:14px}.stage h3{margin-bottom:20px}.play-layout{grid-template-columns:1fr;gap:18px}.stats{margin:12px 0 20px;padding:14px 0}.stats strong{font-size:1.25rem}.stats small{font-size:.65rem}.game-heading .ruby-switch-label{font-size:.8rem}.game-heading .ruby-switch-track{width:40px;height:22px}.game-heading .ruby-switch-thumb{width:16px;height:16px}.game-heading .ruby-switch input:checked+.ruby-switch-track .ruby-switch-thumb{transform:translateX(18px)}.game-heading h1{font-size:1.5rem}.board{gap:2px;border-width:4px}.cell{font-size:clamp(14px,4.6vw,22px)}.cell small{font-size:9px;top:2px;left:2px}.answer-panel{padding:16px;border-radius:16px}.active-clue{padding:14px;margin-bottom:12px}.board-actions{justify-content:space-between;gap:10px}.hint-button{padding:.7rem .8rem}.clues-section{margin-top:28px;padding-top:22px}.clues-section-head{display:block;margin-bottom:12px}.language-label{margin-top:14px;justify-content:space-between}.language-label select{max-width:55%}.clues-layout{grid-template-columns:1fr;gap:16px}.clue-column{padding:14px 14px;border-radius:16px}.word-edit{grid-template-columns:1fr}.panel{padding:18px}.section-label{align-items:flex-start;flex-wrap:wrap}.clear-panel h1{font-size:3rem}.clear-panel .stats{flex-wrap:wrap;row-gap:16px}.clear-panel .stats>div{min-width:30%}.admin-nav{gap:12px}.editor-controls label:first-child{flex-basis:100%}.ad-slot:empty{min-height:0;margin-top:28px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Home / service landing page */
/* Home / service landing page */
.brand-name{display:flex;align-items:baseline;gap:10px}.home-page{background:linear-gradient(180deg,#f7faff 0,#f3f7fb 34rem)}.home-page .topbar{height:76px;border-bottom:0}.home-page main{padding-top:2px;padding-bottom:48px}.parent-site{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.82rem;font-weight:650;letter-spacing:.01em;padding:9px 12px;border:1px solid transparent;border-radius:10px;transition:background .15s,border-color .15s,color .15s}.parent-site:hover{background:#fff;border-color:var(--line);color:var(--ink)}
.home-hero{margin:0 0 24px;padding:0}.home-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,52%);align-items:center;gap:34px;min-height:360px}.home-hero-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:8px 0}.home-hero h1{font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1.16;letter-spacing:-.055em;margin:.35rem 0 .7rem}.home-hero p{max-width:36rem;margin:0;color:var(--muted);font-size:1rem;line-height:1.75}.home-features{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;color:#647789;font-size:.78rem;font-weight:650}.home-features i{font-style:normal;color:#9aabba}.hero-visual{display:flex;align-items:center;justify-content:flex-end;min-width:0}.hero-image{display:block;width:100%;height:auto;object-fit:cover;border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 36px #172b3d14;background:#eef4fa}.hero-image-featured{max-width:660px;aspect-ratio:1672 / 941;object-position:center center}.level-section{padding:0}.level-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.level-heading h2,.stage-section h2{font-size:1.35rem;margin:.35rem 0 0}.cefr-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--muted);padding-bottom:3px}.level-note{margin:8px 0 0;color:var(--muted);font-size:.78rem;line-height:1.55;white-space:nowrap}
.home-page .level-tabs{margin:12px 0 6px;gap:10px}.home-page .level{position:relative;min-height:92px;padding:17px 19px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;text-align:left;box-shadow:none}.home-page .level:hover{background:#f8fbff;border-color:#c8d9e7}.home-page .level-copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.home-page .level strong{font-size:1.55rem;line-height:1}.home-page .level small{font-size:.78rem}.home-page .level-record{font-size:.72rem;color:#718394;font-weight:650;white-space:nowrap}.home-page .level.active{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:none}.home-page .level.active small,.home-page .level.active .level-record{color:#e4eeff}.home-page .level.active:after{content:"";position:absolute;right:-20px;bottom:-32px;width:76px;height:76px;border-radius:50%;background:#ffffff16}
.stage-section{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}.stage-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px}.stage-heading-copy{min-width:0}.stage-title-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.level-progress{font-size:.78rem!important;font-weight:650;color:var(--muted)}.random-button{flex:none;min-height:42px;padding:.68rem .95rem;border-radius:11px;box-shadow:none;font-size:.82rem}.home-page .stages{display:block;border-top:1px solid var(--line)}.home-page .stage{min-height:70px;padding:13px 8px;display:grid;grid-template-columns:46px minmax(0,1fr) 82px 158px 28px;align-items:center;gap:14px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;transition:background .15s,transform .15s}.home-page .stage:hover{background:#fff;box-shadow:none;transform:none}.home-page .stage-number{font-size:.78rem;font-weight:750;letter-spacing:.06em;color:#80909e;font-variant-numeric:tabular-nums}.home-page .stage-main{min-width:0;display:grid;grid-template-columns:minmax(70px,120px) minmax(0,1fr);align-items:center;gap:14px}.home-page .theme{padding:0;background:transparent;color:#16806f;border-radius:0;font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-page .stage-main strong{min-width:0;font-size:.98rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-page .stage-meta{font-size:.76rem;color:var(--muted);white-space:nowrap}.home-page .record{font-size:.76rem;color:#8393a1;white-space:nowrap;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.home-page .record.cleared{font-weight:650}.home-page .record-stars{color:#a97800;font-weight:750;letter-spacing:.08em;line-height:1}.home-page .record-detail{color:#667989;font-size:.68rem;font-weight:650;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.15}.home-page .stage-arrow{font-size:1.08rem;color:var(--blue);text-align:right}.empty-stages{padding:28px;text-align:center;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:16px}.ad-slot{margin-top:30px}.home-ad-slot{max-width:970px;margin:14px auto 18px;min-height:0}.footer-copy{text-align:center}.home-footer{max-width:none;padding:0 32px 32px;text-align:left;color:var(--muted)}.footer-inner{max-width:1120px;margin:0 auto;padding:28px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line)}.footer-brand{display:flex;align-items:baseline;gap:10px}.footer-brand strong{color:var(--ink);font-size:.95rem}.footer-brand span{font-size:.76rem}.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:.78rem;font-weight:600}.footer-links a:hover{color:var(--blue)}.footer-copy{max-width:1120px;margin:0 auto;font-size:.72rem;color:#7a8a98}
@media(max-width:850px){.home-hero{margin:8px 0 22px}.home-hero-inner{grid-template-columns:1fr;gap:18px;min-height:auto}.home-hero-copy{padding:2px 0}.home-hero h1{font-size:clamp(1.95rem,5.7vw,2.55rem)}.home-hero p{max-width:none;font-size:.93rem;line-height:1.68}.home-features{margin-top:12px}.hero-visual{justify-content:center}.hero-image{border-radius:22px}.hero-image-featured{max-width:none;width:100%}.home-page .level{padding:15px}.home-page .level-record{position:absolute;right:14px;bottom:12px}.home-page .stage{grid-template-columns:40px minmax(0,1fr) 72px 140px 24px;gap:10px}.home-page .stage-main{grid-template-columns:90px minmax(0,1fr)}.footer-inner{align-items:flex-start}}
@media(max-width:620px){.level-note{margin-top:7px;font-size:.72rem;line-height:1.55;white-space:normal}.brand-name{display:block}.brand-name small{display:none}.parent-site{font-size:.72rem;padding:7px 0;border:0}.parent-site:hover{background:transparent;border-color:transparent}.home-page .topbar{height:68px}.home-page main{padding-top:12px}.home-hero{margin:6px 0 18px}.home-hero-inner{gap:14px}.home-hero-copy{padding:0}.home-hero h1{font-size:1.82rem;line-height:1.22;margin:.3rem 0 .56rem}.home-hero p{font-size:.84rem;line-height:1.6;display:block}.home-features{margin-top:10px;font-size:.68rem}.hero-image{border-radius:16px}.level-heading h2,.stage-section h2{font-size:1.2rem}.home-page .level-tabs{grid-template-columns:repeat(2,1fr);margin:12px 0 6px}.home-page .level{min-height:78px;padding:12px 12px 22px;align-items:flex-start}.home-page .level strong{font-size:1.35rem}.home-page .level small{font-size:.68rem}.home-page .level-record{right:11px;bottom:8px;font-size:.65rem}.stage-section{margin-top:28px;padding-top:24px}.stage-section-head{align-items:flex-start;gap:12px}.stage-title-line{display:block}.level-progress{display:block;margin-top:4px;font-size:.7rem!important}.random-button{min-height:40px;padding:.62rem .75rem;font-size:.74rem}.home-page .stage{min-height:76px;padding:11px 4px;grid-template-columns:32px minmax(0,1fr) 22px;gap:9px}.home-page .stage-number{font-size:.68rem}.home-page .stage-main{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.home-page .theme{font-size:.68rem;max-width:100%}.home-page .stage-main strong{max-width:100%;font-size:.9rem;white-space:normal;line-height:1.4}.home-page .stage-meta{grid-column:2;font-size:.67rem;margin-top:-4px}.home-page .record{grid-column:2;grid-row:2;text-align:right;justify-self:end;font-size:.68rem;margin-top:-4px;flex-direction:row;align-items:center;gap:6px}.home-page .record-detail{font-size:.64rem}.home-page .stage-arrow{grid-column:3;grid-row:1 / span 2;align-self:center}.home-footer{padding:0 18px 24px}.footer-inner{display:block;padding:24px 0 18px}.footer-brand{display:block}.footer-brand span{display:block;margin-top:4px}.footer-links{margin-top:18px;gap:12px 18px}.footer-copy{line-height:1.6}}
@media(max-width:480px){.home-hero h1{font-size:1.58rem}.home-hero p{font-size:.8rem;line-height:1.56}.home-features{margin-top:8px}.hero-image{border-radius:14px}}

/* Hint audio controls */
.clue-tools{display:flex;align-items:center;gap:8px;margin:8px 0 0 30px;flex-wrap:wrap}.clue-tools .translate,.clue-tools .clue-audio{font-size:.8rem;padding:4px 10px;margin:0;color:var(--muted);font-weight:500}.clue-tools .clue-audio.is-playing{background:#e5edff;border-color:#9cb9ee;color:var(--blue)}.clue-tools button[aria-busy="true"]{cursor:wait}.translated{margin-top:8px}

/* Current clue helper controls */
.active-clue-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 10px}.active-clue-tools .translate,.active-clue-tools .clue-audio{font-size:.85rem;padding:6px 11px;margin:0;color:var(--muted);font-weight:550}.active-clue-tools .clue-audio.is-playing{background:#e5edff;border-color:#9cb9ee;color:var(--blue)}.active-translated{margin:0 0 14px;padding:10px 12px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;line-height:1.65}.active-translated:empty{display:none}

/* Current clue layout v3 */
.active-clue-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.active-clue-head .answer-eyebrow{margin-bottom:0}.active-clue-head .ruby-switch{margin-left:auto}.active-clue{display:flex;flex-direction:column;gap:5px}.active-clue-meta{font-size:.86rem;font-weight:600;color:var(--muted);line-height:1.4}.active-clue-text{display:block;font-size:1rem;font-weight:750;line-height:1.8}.active-clue-text ruby{font-weight:750}
@media(max-width:620px){.active-clue-head{gap:10px}.active-clue-head .ruby-switch-label{font-size:.8rem}.active-clue-head .ruby-switch-track{width:40px;height:22px}.active-clue-head .ruby-switch-thumb{width:16px;height:16px}.active-clue-head .ruby-switch input:checked+.ruby-switch-track .ruby-switch-thumb{transform:translateX(18px)}}

/* Current clue header v4: keep label and furigana switch on the same row */
.active-clue-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:16px;margin-bottom:8px}
.active-clue-head .answer-eyebrow{flex:0 0 auto;margin-bottom:0}
.active-clue-head .ruby-switch{flex:0 0 auto;margin-left:auto}

/* Play page: keep level/theme and stage title on one compact line. */
.game-heading{margin:0 0 8px}
.game-title-line{display:flex;align-items:baseline;gap:14px;min-width:0;white-space:nowrap}
.game-title-line .eyebrow{flex:0 0 auto}
.game-title-line h1{margin:0;font-size:2rem;line-height:1.3;white-space:nowrap}
.game-heading + .stats{margin-top:10px;margin-bottom:24px}
@media(max-width:620px){
  .game-heading{margin-bottom:6px}
  .game-title-line{gap:10px}
  .game-title-line h1{font-size:1.5rem}
  .game-title-line .eyebrow{font-size:.68rem}
  .game-heading + .stats{margin-top:8px;margin-bottom:18px}
}
/* Current clue translation language selector v6 */
.active-clue-tools{display:flex;align-items:stretch;gap:8px;flex-wrap:nowrap;width:100%}
.active-clue-tools .clue-audio,.active-clue-tools .translate{flex:0 0 auto;white-space:nowrap;height:38px;min-height:38px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.active-language-select{margin-left:auto;flex:0 0 150px;width:150px;min-width:105px;max-width:150px;height:38px;min-height:38px;padding:0 .75rem;line-height:1.2}
@media(max-width:480px){.active-clue-tools{gap:6px}.active-clue-tools .translate,.active-clue-tools .clue-audio{height:36px;min-height:36px;padding:0 8px;font-size:.8rem}.active-language-select{width:112px;max-width:112px;min-width:100px;height:36px;min-height:36px;padding:0 .55rem}}

/* Answer voice input */
.input-row .voice-input-button{flex:0 0 48px;width:48px;padding:0;font-size:1.15rem}
.input-row .voice-input-button.is-listening{background:#fff1f1;border-color:#e6b7b7;color:#a32727}
.input-row .voice-input-button[hidden]{display:none!important}

/* Play page top ad: keep the responsive unit compact, especially on mobile. */
.play-top-ad-slot{max-width:970px;margin:-12px auto 22px;min-height:0}
.play-top-ad-slot .adsbygoogle{margin:0 auto}
@media(max-width:620px){
  .play-top-ad-slot{margin:-8px auto 10px;min-height:0}
}

/* Play page PDF worksheet button: desktop only */
.game-print-button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.55rem .85rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:.8rem;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.game-print-button:hover{background:#eaf1fa;border-color:#c6d6e3}
@media(max-width:850px){.game-print-button{display:none!important}}

/* Play feedback v1: make the exact current cell clearly distinct from the selected word. */
.cell.cursor{
  z-index:2;
  background:#fff;
  color:#073b8c;
  box-shadow:inset 0 0 0 3px #073b8c,0 0 0 2px rgba(7,59,140,.16);
}
.cell.cursor small{color:#073b8c;font-weight:800}

/* Correct / incorrect feedback overlay. Positioned by JS inside the visual viewport,
   so it remains visible above a mobile software keyboard. */
.answer-feedback{
  position:absolute;
  z-index:1000;
  width:150px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  transform:translate(-50%,-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  filter:drop-shadow(0 8px 18px rgba(23,43,61,.16));
}
.answer-feedback.is-showing{visibility:visible;animation:answer-feedback-pop .9s both}
.answer-feedback.is-wrong.is-showing{animation-duration:.8s}
.answer-feedback-icon{width:118px;height:118px;position:relative}
.answer-feedback-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:none}
.answer-feedback.is-correct .answer-feedback-correct,.answer-feedback.is-wrong .answer-feedback-wrong{display:block}
.answer-feedback-circle{
  fill:rgba(255,255,255,.88);
  stroke:#e33232;
  stroke-width:9;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transform:rotate(-90deg);
  transform-origin:60px 60px;
}
.answer-feedback.is-showing .answer-feedback-circle{animation:answer-circle-draw .46s cubic-bezier(.2,.75,.3,1) forwards}
.answer-feedback-cross{
  fill:none;
  stroke:#31445a;
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.answer-feedback.is-showing .answer-feedback-cross-a{animation:answer-cross-draw .25s ease-out forwards}
.answer-feedback.is-showing .answer-feedback-cross-b{animation:answer-cross-draw .25s .12s ease-out forwards}
.answer-feedback-label{
  margin-top:-2px;
  padding:4px 12px 5px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#172b3d;
  box-shadow:0 3px 12px rgba(23,43,61,.12);
  font-size:1rem;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.03em;
  white-space:nowrap;
}
.answer-feedback.is-correct .answer-feedback-label{color:#c72323}
@keyframes answer-circle-draw{to{stroke-dashoffset:0}}
@keyframes answer-cross-draw{to{stroke-dashoffset:0}}
@keyframes answer-feedback-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  28%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}
}
@media(max-width:850px){
  .answer-feedback{width:132px;min-height:132px}
  .answer-feedback-icon{width:102px;height:102px}
  .answer-feedback-circle{stroke-width:9}
  .answer-feedback-cross{stroke-width:10}
  .answer-feedback-label{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){
  .answer-feedback.is-showing,.answer-feedback.is-wrong.is-showing{animation:answer-feedback-fade .7s both}
  .answer-feedback.is-showing .answer-feedback-circle,.answer-feedback.is-showing .answer-feedback-cross-a,.answer-feedback.is-showing .answer-feedback-cross-b{animation:none;stroke-dashoffset:0}
  @keyframes answer-feedback-fade{0%{opacity:0}15%,75%{opacity:1}100%{opacity:0}}
}

/* Play feedback v4: one continuous outline around the current across/down word.
   Selection itself does not recolor cells; the outer outline carries the state. */
.board{position:relative}
.cell.selected,
.cell.selected.cursor{
  z-index:1;
  background:#fff;
  color:var(--ink);
  box-shadow:none;
}
/* Keep already-solved cells in their normal solved color even when they are inside the selected word. */
.cell.selected.locked,
.cell.selected.locked.cursor{
  background:#d4f2e9;
  color:#09634e;
}
.cell.selected small,
.cell.selected.cursor small{
  color:#52677c;
  font-weight:600;
}
.cell.selected.locked small,
.cell.selected.locked.cursor small{
  color:#52677c;
  font-weight:600;
}
.cell.cursor:not(.selected){box-shadow:none}
.word-outline{
  position:absolute;
  z-index:4;
  pointer-events:none;
  border:3px solid #073b8c;
  border-radius:6px;
  background:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.38);
  transition:left .12s ease,top .12s ease,width .12s ease,height .12s ease;
}
@media(prefers-reduced-motion:reduce){
  .word-outline{transition:none}
}

.active-clue-head-main{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.clue-index-link{font-size:.84rem;font-weight:700;color:var(--blue);line-height:1.2;white-space:nowrap}.clue-index-link:hover{text-decoration:underline}.clue-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.clue-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.clue-known-pattern{margin-left:auto;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--muted);white-space:nowrap}.clue.solved .clue-known-pattern{color:#09634e}@media(max-width:620px){.active-clue-head{align-items:flex-start}.active-clue-head-main{gap:8px}.clue-tools{align-items:flex-start}.clue-known-pattern{width:100%;margin-left:0;padding-left:2px}}

.clue-index-link{display:inline-flex;align-items:center;justify-content:center;padding:.42rem .78rem;border-radius:999px;border:1px solid #bfd3ef;background:#edf4ff;color:var(--blue);font-size:.8rem;font-weight:750;line-height:1.1;box-shadow:0 1px 0 #ffffff inset;transition:transform .15s,background .15s,border-color .15s,color .15s}
.clue-index-link:hover{background:#e1edff;border-color:#9fbae3;text-decoration:none}
.clue-index-link:active{transform:translateY(1px)}
.known-hint{padding:10px 14px}
.known-pattern{min-height:2.1rem;align-items:center}
@media(max-width:620px){.clue-index-link{padding:.38rem .68rem;font-size:.76rem}}

/* Mobile: keep CURRENT CLUE, all clues, furigana and close on one compact row. */
@media(max-width:620px){
  .active-clue-head{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
  }
  .active-clue-head-main{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    gap:6px;
    flex-wrap:nowrap;
  }
  .active-clue-head .answer-eyebrow{
    flex:0 0 auto;
    margin:0;
    font-size:.68rem;
    letter-spacing:.13em;
    white-space:nowrap;
  }
  .active-clue-head .clue-index-link{
    flex:0 0 auto;
    margin:0;
    padding:.28rem .48rem;
    font-size:.68rem;
    line-height:1;
    white-space:nowrap;
  }
  .active-clue-head .ruby-switch{
    flex:0 0 auto;
    margin-left:0;
    gap:4px;
    min-height:30px;
  }
  .active-clue-head .ruby-switch-label{
    font-size:.68rem;
    line-height:1;
  }
  .active-clue-head .ruby-switch-track{
    width:32px;
    height:18px;
  }
  .active-clue-head .ruby-switch-thumb{
    top:2px;
    left:2px;
    width:14px;
    height:14px;
  }
  .active-clue-head .ruby-switch input:checked+.ruby-switch-track .ruby-switch-thumb{
    transform:translateX(14px);
  }
}

.hint-action-group{display:flex;align-items:center;gap:16px}.random-unsolved-button{margin-left:auto;background:#f8fafc;color:var(--blue);border-color:#cbd9e8;white-space:nowrap}.random-unsolved-button:hover{background:#edf4ff;border-color:#aabfda}@media(max-width:620px){.board-actions{align-items:center;gap:8px}.hint-action-group{gap:10px;min-width:0}.random-unsolved-button{padding:.7rem .8rem;font-size:.86rem}}

/* Mobile: keep hint controls readable by stacking the secondary action. */
@media(max-width:620px){
  .board-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .hint-action-group{
    width:100%;
    justify-content:space-between;
    gap:12px;
  }
  .hint-action-group .hint-button{
    white-space:nowrap;
    flex:0 1 auto;
  }
  .hint-action-group #hint-count{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .random-unsolved-button{
    align-self:flex-end;
    margin-left:0;
    min-width:132px;
    white-space:nowrap;
  }
}

/* Hint actions: no usage counter; keep the two actions side by side. */
.board-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch;gap:10px}
.board-actions .hint-button,.board-actions .random-unsolved-button{width:100%;min-width:0;margin:0;white-space:nowrap}
@media(max-width:620px){
  .board-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:8px}
  .board-actions .hint-button,.board-actions .random-unsolved-button{align-self:stretch;min-width:0;padding:.7rem .55rem;font-size:.82rem}
  .board-actions .hint-button small{font-size:.7rem}
}

/* Home level selector: make the first action obvious to new visitors. */
.home-page .level-guide{margin:.4rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
@media(max-width:620px){
 .home-page .level-guide{font-size:.72rem}
}

/* Keep the completed board visible until the learner opens the summary. */
.game-complete-actions{margin-top:16px;padding:14px;border:1px solid #b8d9d2;border-radius:14px;background:#f2fbf8;display:flex;align-items:center;justify-content:space-between;gap:14px}
.game-complete-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.game-complete-copy strong{font-size:1rem;color:#087966}
.game-complete-copy span{font-size:.8rem;color:var(--muted)}
.game-complete-actions .primary{flex:0 0 auto;white-space:nowrap}
@media(max-width:620px){.game-complete-actions{align-items:stretch;flex-direction:column}.game-complete-actions .primary{width:100%}}

/* Mobile answer modal v3: align the board to the viewport top, then anchor the answer sheet to the viewport bottom. */
.answer-modal-backdrop,.answer-modal-close{display:none}
@media(max-width:850px){
  .play-layout{display:block}
  .board-panel{position:relative;z-index:1}
  .answer-modal-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:80;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:rgba(16,36,56,.12);
    box-shadow:none;
    touch-action:none;
  }
  .answer-modal-backdrop[hidden]{display:none!important}
  .answer-modal-backdrop:hover,.answer-modal-backdrop:active{background:rgba(16,36,56,.12);transform:none}
  .answer-panel{
    position:fixed;
    z-index:81;
    left:50%;
    right:auto;
    top:auto;
    bottom:0;
    width:min(calc(100% - 20px),620px);
    max-height:min(72vh,560px);
    max-height:min(72dvh,560px);
    margin:0;
    padding:18px 18px max(18px,env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border-radius:18px 18px 0 0;
    box-shadow:0 -12px 36px rgba(23,43,61,.20),0 -2px 10px rgba(23,43,61,.10);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,24px);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  }
  .answer-panel.is-mobile-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
    transition:opacity .18s ease,transform .18s ease,visibility 0s;
  }
  .answer-modal-close{
    display:grid;
    place-items:center;
    position:absolute;
    top:8px;
    right:8px;
    z-index:2;
    width:34px;
    height:34px;
    min-width:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#f2f5f8;
    color:var(--muted);
    font-size:1.35rem;
    font-weight:500;
    line-height:1;
  }
  .answer-modal-close:hover{background:#e7edf3}
  .answer-panel .active-clue-head{padding-right:34px}
  .answer-panel .active-clue{margin-bottom:10px;padding:12px 13px}
  .answer-panel .active-clue-tools{margin-bottom:8px}
  .answer-panel .active-translated{margin-bottom:10px;padding:8px 10px}
  .answer-panel .known-hint{margin-bottom:10px;padding:8px 10px}
  .answer-panel .known-pattern{min-height:1.9rem}
  .answer-panel .known-char{width:1.9rem;height:1.9rem;font-size:1rem}
  .answer-panel #answer-form label{gap:.3rem}
  .answer-panel .input-row{margin-top:5px}
  .answer-panel .board-actions{margin-top:12px}
  body.mobile-answer-open{overscroll-behavior:none}
}
@media(max-width:620px){
  .answer-panel{
    width:100%;
    max-height:min(70vh,540px);
    max-height:min(70dvh,540px);
    padding:14px 14px max(14px,env(safe-area-inset-bottom));
    border-radius:18px 18px 0 0;
  }
  .answer-modal-close{top:6px;right:6px;width:32px;height:32px;min-width:32px;font-size:1.25rem}
  .answer-panel .active-clue-head{padding-right:32px;margin-bottom:4px}
  .answer-panel .active-clue-head .clue-index-link{padding:.28rem .48rem;font-size:.68rem}
  .answer-panel .active-clue{gap:3px}
  .answer-panel .active-clue-meta{font-size:.8rem}
  .answer-panel .active-clue-text{font-size:.94rem;line-height:1.65}
  .answer-panel .active-clue-tools{gap:5px}
  .answer-panel .active-clue-tools .translate,.answer-panel .active-clue-tools .clue-audio{height:34px;min-height:34px;padding:0 7px;font-size:.76rem}
  .answer-panel .active-language-select{height:34px;min-height:34px;width:105px;max-width:105px;min-width:92px;padding:0 .45rem;font-size:.76rem}
  .answer-panel .known-char{width:1.75rem;height:1.75rem;font-size:.92rem}
  .answer-panel .input-row input{font-size:1.05rem}
  .answer-panel .input-row button{flex-basis:44px}
  .answer-panel .board-actions .hint-button,.answer-panel .board-actions .random-unsolved-button{padding:.62rem .45rem;font-size:.78rem}
}
@media(max-width:620px) and (max-height:700px){
  .answer-panel{
    max-height:72vh;
    max-height:72dvh;
    padding:10px 12px max(10px,env(safe-area-inset-bottom));
  }
  .answer-modal-close{top:5px;right:5px;width:30px;height:30px;min-width:30px}
  .answer-panel .active-clue-head{padding-right:30px;margin-bottom:3px}
  .answer-panel .active-clue{margin-bottom:7px;padding:9px 11px}
  .answer-panel .active-clue-tools{margin-bottom:6px}
  .answer-panel .active-translated{margin-bottom:7px;padding:7px 9px}
  .answer-panel .known-hint{margin-bottom:7px;padding:6px 8px}
  .answer-panel .known-char{width:1.6rem;height:1.6rem;font-size:.88rem}
  .answer-panel #input-help{margin-top:5px}
  .answer-panel .board-actions{margin-top:8px;gap:6px}
  .answer-panel .board-actions .hint-button,.answer-panel .board-actions .random-unsolved-button{padding:.52rem .4rem;font-size:.74rem}
}
@media(prefers-reduced-motion:reduce){
  .answer-panel{transition:none!important}
}

/* Answer reveal: secondary action aligned with the answer label. */
.answer-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.answer-label-row>label{
  min-width:0;
  margin:0;
}
.reveal-answer-button{
  flex:0 0 auto;
  width:auto;
  min-height:0;
  padding:0 2px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--blue);
  font-size:.66rem;
  font-weight:650;
  line-height:1.2;
  gap:3px;
  white-space:nowrap;
  text-decoration:none;
}
.reveal-answer-button small{font-size:.61rem;color:inherit}
.reveal-answer-button:hover{background:transparent;color:#084ebc}
.reveal-answer-button:active{transform:none}
.reveal-answer-button:disabled{opacity:.42;cursor:default}
@media(max-width:620px){
  .answer-panel .answer-label-row{gap:6px}
  .answer-panel .reveal-answer-button{font-size:.61rem;padding:0 1px;line-height:1.15}
  .answer-panel .reveal-answer-button small{font-size:.56rem}
}

/* v10: keep voice input inside the answer field */
.answer-input-wrap{position:relative;flex:1 1 auto;min-width:0}
.answer-input-wrap #answer{width:100%;padding-right:44px}
.input-row .answer-input-wrap .voice-input-button{position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;min-width:34px;padding:0;border:0;border-radius:8px;background:transparent;font-size:1rem;line-height:1;color:var(--blue);box-shadow:none}
.input-row .answer-input-wrap .voice-input-button:hover{background:#edf4ff}
.input-row .answer-input-wrap .voice-input-button:active{transform:translateY(-50%);background:#e1edff}
.input-row .answer-input-wrap .voice-input-button.is-listening{background:#fff1f1;color:#a32727}.input-row .answer-input-wrap .voice-input-button.is-processing{background:#edf4ff;color:var(--blue);cursor:wait}.input-row .answer-input-wrap .voice-input-button.is-processing:disabled{opacity:1}
.input-row .answer-input-wrap .voice-input-button[hidden]{display:none!important}
@media(max-width:620px){.answer-input-wrap #answer{padding-right:40px}.input-row .answer-input-wrap .voice-input-button{right:4px;width:32px;height:32px;min-width:32px;font-size:.95rem}}

/* v11: match direction-switch height to the answer field and tighten the action gap. */
.input-row #switch-direction{
  align-self:stretch;
  height:auto;
  min-height:0;
  padding:0;
  line-height:1;
}
.answer-panel .board-actions{margin-top:12px}
@media(max-width:620px){
  .answer-panel .board-actions{margin-top:8px}
}
@media(max-width:620px) and (max-height:700px){
  .answer-panel .board-actions{margin-top:6px}
}

/* v13: optical vertical centering for direction arrows on mobile Safari only. */
@media(max-width:620px){
  .input-row #switch-direction{
    padding-top:0;
    padding-right:0;
    padding-bottom:4px;
    padding-left:0;
  }
}


/* PDF output controls v1: independent ruby / QR settings (desktop only). */
.pdf-output-tools{flex:0 0 auto;display:inline-flex;align-items:stretch;gap:5px;margin:0;padding:0;border:0;background:transparent;white-space:nowrap}
.pdf-output-label{display:inline-flex;align-items:center;padding:0 2px 0 0;color:var(--blue);font-size:.8rem;font-weight:800;line-height:34px}
.pdf-output-select{width:auto;min-width:86px;height:34px;min-height:34px;padding:0 26px 0 9px;border-radius:8px;background-color:#fff;font-size:.76rem;font-weight:650;line-height:1}
.pdf-output-create{min-height:34px;height:34px;padding:0 10px;border-radius:8px;border-color:#b8ccea;background:#fff;color:var(--blue);font-size:.76rem;font-weight:800;line-height:1}
.pdf-output-create:hover{background:#eaf1fa}
@media(max-width:850px){.pdf-output-tools{display:none!important}}
/* Hero title overlap: desktop keeps the image position/size and lets copy extend over its pale left edge. */
@media(min-width:851px){
  .home-hero-inner{position:relative}
  .home-hero-copy{position:relative;z-index:2;overflow:visible}
  .home-hero h1{width:calc(100% + 250px);max-width:none}
  .home-title-line{display:block;white-space:nowrap}
  .home-hero p{position:relative;z-index:2;width:max-content;max-width:none;white-space:nowrap}
  .hero-visual{position:relative;z-index:1}
}
@media(max-width:850px){
  .home-hero h1{width:auto;max-width:none}
  .home-title-line{display:block;white-space:normal}
  .home-hero p{width:auto;max-width:none;white-space:normal}
}


/* v17: make the mobile answer field immediately recognizable without changing its size. */
@media(max-width:620px){
  .answer-panel .answer-input-wrap #answer{
    border-color:#52677c;
    box-shadow:inset 0 0 0 1px #52677c;
  }
}

/* v18: mobile compact known-letter row + larger touch targets. */
.known-pattern-mobile{display:none}
@media(max-width:620px){
  /* The large boxed pattern duplicates the word length on mobile. Keep it on desktop only. */
  .answer-panel .known-hint{display:none!important}
  .answer-panel .answer-input-label{display:none!important}
  .answer-panel .known-pattern-mobile{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    min-height:44px;
    gap:10px;
    padding:0 2px;
    flex-wrap:nowrap;
  }
  .answer-panel .known-pattern-mobile .known-char{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:1.1em;
    height:auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    font-size:1.02rem;
    font-weight:750;
    line-height:1;
  }
  .answer-panel .known-pattern-mobile .known-char.blank{color:#8fa0af}
  .answer-panel .known-pattern-mobile .known-char.known{color:var(--blue);background:transparent}

  /* Use the reclaimed height for finger-friendly controls. */
  .answer-panel .answer-modal-close{
    top:6px;
    right:6px;
    width:44px;
    height:44px;
    min-width:44px;
  }
  .answer-panel .active-clue-head{padding-right:46px}
  .answer-panel .active-clue-head .clue-index-link{
    min-height:44px;
    padding:.45rem .68rem;
    font-size:.72rem;
  }
  .answer-panel .active-clue-head .ruby-switch{
    min-height:44px;
    padding:4px 0;
  }
  .answer-panel .active-clue-tools .translate,
  .answer-panel .active-clue-tools .clue-audio,
  .answer-panel .active-language-select{
    height:44px;
    min-height:44px;
  }
  .answer-panel .active-clue-tools .translate,
  .answer-panel .active-clue-tools .clue-audio{
    padding:0 10px;
    font-size:.78rem;
  }
  .answer-panel .active-language-select{
    width:112px;
    max-width:112px;
    min-width:100px;
    padding:0 .55rem;
    font-size:.78rem;
  }
  .answer-panel .answer-label-row{
    min-height:44px;
    gap:8px;
  }
  .answer-panel .reveal-answer-button{
    min-height:44px;
    padding:0 2px;
    font-size:.66rem;
  }
  .answer-panel .reveal-answer-button small{font-size:.6rem}
  .answer-panel .answer-input-wrap #answer{padding-right:54px}
  .input-row .answer-input-wrap .voice-input-button{
    right:4px;
    width:44px;
    height:44px;
    min-width:44px;
    font-size:1rem;
  }
  .answer-panel .input-row #switch-direction{min-width:48px;flex-basis:48px}
  .answer-panel .board-actions .hint-button,
  .answer-panel .board-actions .random-unsolved-button{
    min-height:48px;
    padding:.7rem .5rem;
    font-size:.82rem;
  }
}
@media(max-width:620px) and (max-height:700px){
  .answer-panel .known-pattern-mobile{min-height:40px}
  .answer-panel .answer-label-row{min-height:40px}
  .answer-panel .active-clue-head .clue-index-link,
  .answer-panel .active-clue-head .ruby-switch,
  .answer-panel .active-clue-tools .translate,
  .answer-panel .active-clue-tools .clue-audio,
  .answer-panel .active-language-select{min-height:42px;height:42px}
  .answer-panel .board-actions .hint-button,
  .answer-panel .board-actions .random-unsolved-button{min-height:46px}
}

/* v19: mobile current clue in one compact line: “7 → clue” / “7 ↓ clue”. */
.active-clue-mobile-line{display:none}
@media(max-width:620px){
  .answer-panel .active-clue-meta,
  .answer-panel .active-clue-text{display:none}
  .answer-panel .active-clue-mobile-line{
    display:flex;
    align-items:baseline;
    gap:.55rem;
    min-width:0;
    font-size:.96rem;
    line-height:1.65;
  }
  .answer-panel .active-clue-mobile-prefix{
    flex:0 0 auto;
    white-space:nowrap;
    color:var(--muted);
    font-weight:750;
  }
  .answer-panel .active-clue-mobile-text{
    min-width:0;
    font-weight:750;
  }
  .answer-panel .active-clue-mobile-text ruby{font-weight:750}
}
@media(max-width:620px) and (max-height:700px){
  .answer-panel .active-clue-mobile-line{font-size:.92rem;line-height:1.55}
}


/* v20: mobile helper buttons — equal, slightly wider touch targets. */
@media(max-width:620px){
  .answer-panel .active-clue-tools .clue-audio,
  .answer-panel .active-clue-tools .translate{
    flex:0 0 94px;
    width:94px;
    min-width:94px;
    max-width:94px;
    padding:0 10px;
  }
  .answer-panel .active-language-select{
    flex:1 1 auto;
    width:auto;
    max-width:none;
    min-width:92px;
  }
}
@media(max-width:340px){
  .answer-panel .active-clue-tools .clue-audio,
  .answer-panel .active-clue-tools .translate{
    flex-basis:90px;
    width:90px;
    min-width:90px;
    max-width:90px;
  }
}

/* v21: slightly tighten the mobile known-answer / reveal row without making controls cramped. */
@media(max-width:620px){
  .answer-panel .answer-label-row{min-height:40px}
  .answer-panel .known-pattern-mobile{min-height:40px}
  .answer-panel .reveal-answer-button{min-height:40px}
  .answer-panel .input-row{margin-top:3px}
}


/* v22: Challenge-JLPT-style sticky header on the public top page. */
.home-page .site-header-shell{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e2e9f0;
  box-shadow:0 2px 12px rgba(23,43,61,.055);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.home-page .site-header-shell .topbar{
  height:66px;
  max-width:1184px;
  margin:0 auto;
  padding:0 32px;
  border-bottom:0;
}
.home-page .site-header-shell .brand{
  gap:10px;
  font-size:1rem;
  letter-spacing:-.025em;
}
.home-page .site-header-shell .brand-logo{
  width:38px;
  height:38px;
  flex-basis:38px;
}
.home-page .site-header-shell .brand-name{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1px;
  line-height:1.08;
}
.home-page .site-header-shell .brand-name small{
  display:block;
  margin-left:0;
  font-size:.56rem;
  line-height:1.1;
  letter-spacing:.12em;
  color:#738596;
  font-weight:700;
}
.home-page .site-header-shell .parent-site{
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#5f7182;
  font-size:.76rem;
  font-weight:700;
}
.home-page .site-header-shell .parent-site:hover{
  border-color:transparent;
  background:transparent;
  color:var(--blue);
}
@media(max-width:620px){
  .home-page .site-header-shell .topbar{
    height:60px;
    padding:0 18px;
  }
  .home-page .site-header-shell .brand{
    gap:8px;
    font-size:.94rem;
  }
  .home-page .site-header-shell .brand-logo{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .home-page .site-header-shell .brand-name small{
    display:block;
    font-size:.49rem;
    letter-spacing:.1em;
  }
  .home-page .site-header-shell .parent-site{
    font-size:.68rem;
    white-space:nowrap;
  }
}
@media(max-width:390px){
  .home-page .site-header-shell .topbar{padding:0 14px}
  .home-page .site-header-shell .parent-site-label{display:none}
  .home-page .site-header-shell .parent-site{font-size:1rem;padding:8px}
}