:root{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;color:#17334a;background:#f6f8fc;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #64a4ec;outline-offset:2px}a{color:inherit}[hidden]{display:none!important}
.page{min-height:100dvh;display:flex;flex-direction:column}.topbar{height:72px;padding:0 clamp(18px,5vw,60px);background:#142d45;color:#fff;display:flex;gap:16px;align-items:center;border-bottom:1px solid #314d68}.icon-button{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:inherit;border-radius:10px;font-size:20px}.icon-button:hover{background:#edf3f6;color:#17334a}.topbar .icon-button:hover{background:#29465f;color:#fff}.hamburger{width:21px;display:grid;gap:5px}.hamburger span{display:block;height:2px;background:currentColor;border-radius:2px}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand-mark{font-family:Georgia,serif;font-size:42px;color:#96dec9;line-height:1}.brand-copy{font-size:17px;font-weight:850;white-space:nowrap;letter-spacing:.02em}.brand-copy small{display:block;font-size:9px;color:#a5bed0;letter-spacing:.22em;font-weight:600;margin-top:2px}.language-select{border:1px solid #52718a;color:#fff;background:#223f58;padding:8px;border-radius:9px;font-size:12px;max-width:110px}.main{width:min(100%,650px);padding:30px 18px 24px;margin:0 auto;flex:1}.game-card,.entry-card{background:white;border:1px solid #e1e9f0;box-shadow:0 7px 28px rgba(19,49,73,.055);border-radius:20px;padding:25px 28px}.game-card{margin-bottom:18px}.game-meta,.section-head,.progress-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.live-chip,.round-chip{font-size:11px;color:#5b7285;font-weight:750}.live-chip{display:flex;align-items:center;gap:6px}.live-dot{display:inline-block;width:7px;height:7px;background:#23ad89;border-radius:50%}.live-dot.offline{background:#d1a23d}.round-chip{letter-spacing:.08em}.previous{text-align:center;padding:17px 0 22px}.eyebrow{font-size:12px;color:#6c8395;font-weight:700;letter-spacing:.055em}.previous-word{margin:10px 0 3px;font-size:clamp(24px,5vw,36px);font-weight:800;line-height:1.4;overflow-wrap:anywhere}.reading{color:#7d91a1;font-size:12px;overflow-wrap:anywhere}.sound-area{border-radius:14px;background:linear-gradient(130deg,#eef8f7,#edf4fd);text-align:center;padding:19px 12px 22px;border:1px solid #e5f0f1}.main-sound{font-size:clamp(74px,18vw,116px);line-height:1.32;font-weight:900;color:#1a706e}.sound-subtitle{color:#477d7e;font-size:13px;font-weight:650;min-height:20px}.progress-meta{font-size:12px;color:#697e90;margin-top:19px;margin-bottom:8px;font-weight:620}.timer-track{height:6px;background:#eaf0f5;border-radius:999px;overflow:hidden}.timer-fill{width:100%;height:100%;background:#42b2a0;transition:width .15s linear}
.section-head{margin-bottom:18px}.section-head h2{margin:0;font-size:18px}.tiny-note{font-size:11px;color:#8393a0}.form-field{min-width:0;margin-bottom:14px}.form-field label{display:block;font-size:12px;color:#546d81;font-weight:700;margin-bottom:7px}.form-field input,.form-field select,.form-field textarea{width:100%;background:#f9fbfd;border:1px solid #d9e4eb;border-radius:10px;min-height:45px;padding:10px 12px;color:#14334a;outline:0}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:#4caaa2;background:#fff;box-shadow:0 0 0 3px #cef1e7}.form-row{display:flex;gap:12px}.grow{flex:1}.end-sound-row{display:flex;gap:7px}.end-sound-row input{min-width:0;flex:1}.outline-button{flex-shrink:0;border:1px solid #d7e2e9;color:#47677b;background:#fff;border-radius:10px;padding:0 12px;font-size:12px;font-weight:700}.outline-button:hover{background:#eef5f8}.primary-button{border:0;border-radius:12px;background:#1c827b;color:#fff;font-size:15px;font-weight:800;padding:13px 15px;min-height:47px;width:100%;box-shadow:0 4px 10px #1c827b20}.primary-button:not(:disabled):hover{background:#146d66}.form-hint{font-size:11px;color:#8496a3;margin:14px 0 0}.validation-message{min-height:16px;color:#b45247;font-size:12px;margin:0 0 9px}.kana-picker{border:1px solid #dce7ed;border-radius:11px;padding:13px;background:#fbfdff;margin:0 0 14px}.picker-caption{margin:0 0 11px;color:#63798b;font-size:11px}.kana-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.kana-cell{border:1px solid #dfebf0;background:#fff;color:#37566b;border-radius:6px;height:32px;padding:0;font-size:12px}.kana-cell:hover{background:#cdeae8}.subfooter{font-size:11px;color:#91a0ae;text-align:center;padding:20px 0 0}.footer{padding:20px;text-align:center;font-size:10px;color:#9eaebe;display:flex;align-items:center;flex-direction:column;gap:14px}.footer-links,.welcome-links,.drawer-social{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}.social-link{font-weight:750;color:#28586d;font-size:12px;text-decoration:none;border:1px solid #dae7ef;border-radius:99px;padding:8px 14px;background:#fff}.social-link:hover{background:#edf5f8}.social-link-pending{opacity:.63;cursor:default;border-style:dashed;color:#748797;background:#f7f9fb}
.backdrop,.modal-backdrop,.welcome-backdrop{position:fixed;inset:0;background:#091725a8;z-index:20}.drawer{position:fixed;z-index:21;inset:0 auto 0 0;width:min(320px,88vw);background:#fff;box-shadow:6px 0 35px #0a213438;padding:23px 18px;transform:translateX(-110%);transition:transform .2s ease;overflow-y:auto}.drawer.open{transform:translateX(0)}.drawer-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3edf2;padding:0 0 14px 8px;margin-bottom:10px}.drawer-link{display:block;text-align:left;background:none;color:#213f55;font-size:14px;font-weight:650;border:0;border-bottom:1px solid #edf2f5;width:100%;padding:15px 12px}.drawer-link:hover{background:#f3f8f8}.drawer-social{margin-top:27px}.modal-backdrop,.welcome-backdrop{z-index:30;display:grid;place-items:center;padding:15px}.dialog,.welcome{width:min(100%,540px);max-height:min(87dvh,900px);overflow:auto;background:#fff;border-radius:21px;box-shadow:0 18px 60px #0003;padding:23px}.dialog-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e7eef3;padding-bottom:10px;gap:10px}.dialog-head h2{margin:0;font-size:18px}.dialog-content{padding-top:13px}.dialog-content p{font-size:13px;line-height:1.85;color:#5b7081}.dialog-content h3{font-size:14px;margin:18px 0 8px}.history-item{display:flex;align-items:flex-start;gap:9px;padding:12px 0;border-bottom:1px solid #ebf0f4}.item-main{min-width:0;flex:1}.item-word{font-weight:780;overflow-wrap:anywhere}.item-meta{font-size:11px;color:#8194a1;margin-top:3px;overflow-wrap:anywhere}.item-actions{border:0;background:#eff4f7;color:#496477;width:32px;height:32px;border-radius:8px;flex-shrink:0;font-size:19px;line-height:1}.item-menu{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.tiny-button{border:1px solid #dae5ed;background:#fff;border-radius:8px;color:#4b6375;font-size:11px;padding:7px 9px}.tiny-button:hover{background:#ecf3f8}.empty-message{text-align:center;color:#7f92a2;padding:28px}.feedback-select,.feedback-text{border:1px solid #d5e3ec;border-radius:10px;padding:10px 12px;background:white;width:100%;margin:6px 0 14px}.feedback-text{min-height:130px;resize:vertical}.dialog small{color:#8293a1}.more-button{margin:15px auto 0;display:block;border:1px solid #d8e4eb;border-radius:10px;padding:10px 24px;background:#fff}.welcome{padding:29px}.welcome-logo{font-family:Georgia,serif;font-size:65px;text-align:center;color:#1d8176;line-height:1}.welcome h1{text-align:center;font-size:25px;margin:3px 0}.welcome-sub{color:#6d8695;text-align:center;font-size:13px;margin:0 0 22px}.welcome-rules{background:#f5f9fa;border-radius:12px;padding:14px 17px;margin-bottom:14px}.welcome-rules h2{font-size:14px;color:#234963;margin:0 0 10px}.welcome-rules p{font-size:12px;line-height:1.8;color:#526779;margin:5px 0}.welcome-cautions{background:#fff8f2;border:1px solid #f4e4d6}.welcome-social-label{font-size:12px;font-weight:750;color:#607b8e;text-align:center;margin:8px 0}.welcome-links{margin-bottom:15px}.welcome-caption{text-align:center;color:#8a9aab;font-size:10px;margin:12px 0 0}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:50;color:white;background:#1b465d;border-radius:12px;padding:12px 20px;font-size:13px;font-weight:700;box-shadow:0 10px 35px #142b4050;transition:opacity .2s,transform .2s;max-width:calc(100% - 35px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#a9433e}
@media(max-width:540px){.topbar{height:62px;padding:0 12px;gap:9px}.brand-copy{font-size:14px}.brand-copy small{font-size:8px}.brand-mark{font-size:34px}.main{padding:14px 11px 13px}.game-card,.entry-card{padding:18px 16px;border-radius:15px}.game-card{margin-bottom:11px}.previous{padding:12px 0 15px}.sound-area{padding:15px 10px}.form-row{gap:8px}.form-field label{font-size:11px}.form-field input,.form-field select{padding:8px 9px;font-size:13px}.kana-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.language-select{padding:7px 3px;font-size:11px}.welcome,.dialog{padding:20px;max-height:92dvh}}

.brand-copy{font-size:clamp(11px,2.8vw,16px);white-space:normal;line-height:1.3;max-width:310px}.brand-copy small{letter-spacing:.06em;white-space:nowrap;font-size:8px}.welcome h1{font-size:clamp(19px,4.6vw,25px)}
@media(max-width:400px){.topbar{padding:0 10px;gap:8px}.brand{gap:6px}.brand-mark{font-size:29px}.brand-copy{font-size:11px;max-width:180px}.language-select{max-width:85px;font-size:10px;padding:6px 3px}.main{padding:15px 10px}.game-card,.entry-card{padding:18px 15px}.form-row{gap:7px}.end-sound-row{gap:3px}.outline-button{padding:0 7px}.kana-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}

.brand-copy>span{display:block}.brand-copy{line-height:1.23}@media(max-width:480px){.welcome h1{font-size:17px;letter-spacing:-.03em}}

/* Compact, five-vowel gojuon chart; readable without horizontal scrolling on phones. */
.kana-picker{padding:12px 10px;max-height:370px;overflow-y:auto;overscroll-behavior:contain}
.kana-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;color:#37586b;font-size:12px}
.kana-picker-head .tiny-button{flex:0 0 auto}
.kana-picker .picker-caption{font-size:11px;line-height:1.55;margin:5px 0 10px}
.kana-table-section+.kana-table-section{margin-top:15px}
.kana-section-title{font-size:11px;color:#6e889b;font-weight:800;display:block;margin:0 0 6px}
.kana-chart{display:grid;grid-template-columns:minmax(35px,.76fr) repeat(5,minmax(0,1fr));gap:4px}
.kana-chart-head{font-size:10px;color:#66869b;text-align:center;font-weight:750;line-height:20px}
.kana-row-head{font-size:11px;color:#5e7d92;font-weight:700;align-self:center;text-align:center}
.kana-chart-cell{background:#fff;border:1px solid #d7e7e9;border-radius:7px;min-width:0;min-height:43px;padding:3px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.kana-chart-cell:hover{border-color:#60b9af;background:#eaf6f2}
.kana-chart-cell.kana-compatible{background:#e4f5ef;border-color:#8dc6b9}
.kana-big{font-size:15px;font-weight:750;color:#284d5d;line-height:1.1}
.kana-phonetic{font-size:9px;color:#677e8f;line-height:1.3;overflow-wrap:anywhere}
.kana-empty{min-height:43px}
.sound-pronunciation{font-size:12px;color:#507f7e;letter-spacing:.03em;min-height:19px}
.success-backdrop{z-index:40}
.success-dialog{width:min(100%,410px);background:white;border-radius:24px;padding:25px 24px 21px;text-align:center;box-shadow:0 20px 65px #071f3655}
.success-symbol{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border-radius:50%;background:#e0f5ec;color:#21745d;font-size:27px;font-weight:800}
.success-dialog h2{font-size:25px;color:#193f52;margin:5px 0 6px}
.success-subtitle{font-size:13px;color:#6a8592;margin:0 0 18px}
.success-result{background:#f0f8f6;border:1px solid #daefea;border-radius:15px;padding:17px 10px;margin-bottom:18px}
.success-word{font-size:clamp(24px,6vw,34px);font-weight:850;color:#16495d;overflow-wrap:anywhere;margin:9px 0 2px}
.success-number{color:#45877a;font-size:12px;font-weight:750;margin-top:10px}
.share-button{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-bottom:10px}
.success-close{width:100%;height:44px}
.success-caption{font-size:10px;color:#7e95a4;line-height:1.5;margin:12px 0 0}
@media(max-width:540px){.kana-picker{max-height:350px}.kana-chart{gap:3px;grid-template-columns:minmax(31px,.70fr) repeat(5,minmax(0,1fr))}.kana-chart-cell{min-height:42px}.kana-big{font-size:14px}.kana-phonetic{font-size:8px}.success-dialog{padding:22px 17px}}

/* v0.5: the security challenge only appears before the game when required. */
.turnstile-area{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 4px}
.turnstile-area[hidden]{display:none}
.turnstile-message{font-size:12px;color:#526e7d;line-height:1.55;text-align:center;margin:0}
#startGame:disabled{opacity:.58;cursor:wait}

/* External link in the existing side menu. */
.drawer-link-external{text-decoration:none;overflow-wrap:anywhere}
.drawer-link-external:focus-visible{outline:2px solid #1c827b;outline-offset:-2px}

/* Moderation notice and a report action on the latest accepted word. */
.moderation-warning{margin:0 0 14px;padding:10px 13px;border:1px solid #f0c4c4;border-radius:10px;background:#fff6f6;color:#b32937;font-weight:750;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.previous-report-button{margin-top:11px;padding:7px 13px;border:1px solid #e2a6a6;border-radius:9px;background:#fff8f8;color:#b12d35;font-size:12px;font-weight:750}
.previous-report-button:hover{background:#ffeded}
@media(max-width:540px){.moderation-warning{padding:9px 10px;font-size:11px;line-height:1.6}.previous-report-button{font-size:11px}}

/* Terms consent gate. The original look remains otherwise unchanged. */
.consent-section{border:1px solid #b7cbd7;border-radius:14px;padding:14px;background:#f7fbff;margin:12px 0;text-align:left}
.consent-section h2{font-size:1rem;color:#142d45;margin:0 0 7px}
.consent-explain{font-size:.82rem;color:#37516a;line-height:1.6;margin:0 0 10px}
.legal-scroll{max-height:220px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #c4d6e0;border-radius:8px;background:white;padding:12px;font-size:.8rem;line-height:1.68;color:#17354c}
.legal-scroll h3{font-size:.93rem;margin:16px 0 6px}
.legal-scroll h4{font-size:.83rem;margin:13px 0 5px}
.legal-scroll p{margin:0 0 8px}
.consent-check{display:flex;align-items:start;gap:10px;font-size:.87rem;line-height:1.5;margin:12px 0 8px;cursor:pointer;color:#142d45}
.consent-check input{margin-top:4px;min-width:18px;min-height:18px}
.consent-accept{width:100%;min-height:44px}
.consent-status{font-size:.77rem;color:#52687b;margin:8px 0 0}
.legal-document h3{margin:15px 0 8px}.legal-document h4{margin:12px 0 6px}
.legal-document p{margin:5px 0 9px;line-height:1.7}
@media(max-width:600px){.legal-scroll{max-height:180px}.consent-section{padding:11px}}

/* Personal daily adoption quota. No polling; the value comes with ordinary game state. */
.daily-quota{margin:.2rem 0 .85rem;color:#527378;font-size:.86rem;font-weight:600;}
.daily-quota.exhausted{color:#b42318;}