:root{--ink:#201335;--muted:#6b5f7d;--paper:#fffaf2;--panel:#ffffffc7;--pink:#ff4fa3;--violet:#7c3cff;--aqua:#23d7c7;--sun:#ffd166;--green:#6ee56f;--shadow:0 24px 70px #34185e2e;--soft-shadow:0 14px 34px #34185e1f}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 12% 12%,#ff4fa347,#0000 34%),radial-gradient(circle at 88% 18%,#23d7c757,#0000 28%),radial-gradient(circle at 50% 105%,#7c3cff38,#0000 38%),linear-gradient(135deg,#fff7df 0%,#ffeaf6 42%,#eaf9ff 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}body:before{content:"あ ア 水";z-index:-1;color:#2013350d;letter-spacing:-.12em;font-size:clamp(5rem,18vw,16rem);font-weight:900;position:fixed;inset:auto -2rem 1rem auto;transform:rotate(-8deg)}.beta-badge{z-index:20;background:linear-gradient(135deg, var(--sun), var(--pink));color:var(--ink);letter-spacing:-.02em;text-transform:uppercase;transform-origin:100%;border:3px solid #fff;border-radius:999px 0 0 999px;padding:.78rem 1rem;font-size:clamp(.92rem,1.9vw,1.18rem);font-weight:950;line-height:.95;transition:opacity .22s,transform .22s;position:fixed;top:clamp(.75rem,2vw,1.25rem);right:clamp(.75rem,2vw,1.25rem);transform:rotate(6deg);box-shadow:0 16px 36px #34185e33}.beta-badge.hidden{opacity:0;pointer-events:none;transform:translate(130%)rotate(6deg)}.beta-badge:after{content:none}.beta-badge span{letter-spacing:.02em;font-size:.72em;display:block}.time-counter{z-index:20;color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#201335e6;border:2px solid #ffffffb8;border-radius:999px;align-items:baseline;gap:.35rem;padding:.42rem .62rem;font-size:.78rem;font-weight:900;display:inline-flex;position:fixed;top:clamp(.75rem,2vw,1.25rem);left:clamp(.75rem,2vw,1.25rem);box-shadow:0 12px 28px #34185e29}.time-counter[hidden]{display:none}.time-counter span{color:#ffffffad;letter-spacing:.08em;text-transform:uppercase;font-size:.62rem}.time-counter strong{line-height:1}.page-container{flex-direction:column;min-height:100vh;display:flex}.container{flex:1;width:min(1280px,100%);margin:0 auto;padding:clamp(1rem,3vw,2.5rem)}.hero{text-align:center;margin:0 auto 1.5rem;padding:clamp(1.5rem,4vw,3.25rem) 1rem 1.5rem}.site-logo{filter:drop-shadow(0 18px 28px #34185e2e);width:clamp(82px,15vw,128px);height:auto;margin:0 auto 1rem;display:block}h1{letter-spacing:-.08em;text-wrap:balance;margin-bottom:.8rem;font-size:clamp(3rem,9vw,7rem);font-weight:950;line-height:.86}.hero-copy{max-width:720px;color:var(--muted);margin:0 auto;font-size:clamp(1rem,2vw,1.28rem);font-weight:650}.controls-panel{background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #ffffffb3;border-radius:32px;gap:1rem;margin:0 auto 1.5rem;padding:1rem;display:grid}.advanced-controls{gap:1rem;display:grid}.controls-toggle{background:var(--ink);color:#fff;cursor:pointer;width:100%;min-height:48px;box-shadow:var(--soft-shadow);border:0;border-radius:24px;font-weight:900;display:none}.controls-toggle span{margin-right:.4rem}.navigation,.app-mode-switch,.grade-selection{flex-wrap:wrap;justify-content:center;gap:.65rem;display:flex}.app-mode-switch{isolation:isolate;background:#20133514;border-radius:28px;width:min(520px,100%);margin:0 auto;padding:.4rem;position:relative;overflow:hidden}.app-mode-switch:before{content:"";z-index:-1;background:linear-gradient(135deg, var(--violet), var(--pink));border-radius:22px;width:calc(50% - .4rem);transition:transform .42s cubic-bezier(.2,.9,.18,1),filter .42s;position:absolute;top:.4rem;bottom:.4rem;left:.4rem;box-shadow:0 14px 30px #7c3cff38}.app-mode-switch.play-selected:before{transform:translate(100%)}button,input{font:inherit}.nav-btn,.mode-btn,.grade-btn,.clear-search-btn,.answer-row button{cursor:pointer;border:0;font-weight:850;transition:transform .18s,box-shadow .18s,background .18s}.nav-btn,.mode-btn,.grade-btn{min-height:44px;color:var(--ink);background:#ffffffdb;border-radius:999px;padding:.72rem 1.05rem;box-shadow:0 8px 20px #20133514}.mode-btn{box-shadow:none;color:var(--ink);background:0 0;flex:180px;transition:color .28s,transform .22s;position:relative}.nav-btn:hover,.mode-btn:hover,.grade-btn:hover,.clear-search-btn:hover,.answer-row button:hover{transform:translateY(-2px);box-shadow:0 14px 28px #20133526}.nav-btn.active{background:linear-gradient(135deg, var(--violet), var(--pink));color:#fff}.mode-btn.active{color:#fff}.shuffle-btn{background:var(--ink);color:#fff}.grade-btn.active{background:linear-gradient(135deg, var(--aqua), var(--green));color:#10251f}.search-wrap{gap:.45rem;width:min(760px,100%);margin:0 auto;display:grid}.search-wrap label{color:var(--ink);letter-spacing:.03em;text-transform:uppercase;font-size:.86rem;font-weight:900}.search-box{background:#ffffffe6;border:2px solid #20133514;border-radius:24px;gap:.6rem;padding:.45rem;display:flex}#search-input{width:100%;min-height:50px;color:var(--ink);background:0 0;border:0;outline:0;font-size:1rem;font-weight:700}#search-input::placeholder{color:#6b5f7db8}.clear-search-btn{color:var(--pink);background:#fff0f8;border-radius:18px;flex:none;padding:0 1rem}.search-hint,.results-summary{color:var(--muted);font-size:.94rem;font-weight:700}.score-panel{background:var(--ink);color:#fff;width:min(760px,100%);box-shadow:var(--soft-shadow);border-radius:24px;grid-template-columns:repeat(4,minmax(92px,1fr));align-items:center;gap:.8rem;margin:0 auto;padding:.8rem;display:grid}.play-kind-switch{background:#ffffff1f;border-radius:999px;grid-column:1/-1;gap:.35rem;padding:.34rem;display:flex}.play-kind-btn{color:#ffffffc2;cursor:pointer;background:0 0;border:0;border-radius:999px;flex:160px;min-height:40px;font-weight:900}.play-kind-btn.active{color:var(--ink);background:#fff}.score-panel[hidden]{display:none}.score-panel>div{background:#ffffff1f;border-radius:18px;min-width:108px;padding:.6rem .9rem}.score-label{color:#ffffffb8;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:900;display:block}.score-panel strong{font-size:1.5rem;line-height:1;display:block}#play-instructions{color:#ffffffc7;grid-column:1/-1;min-height:1.35em;font-size:.9rem;font-weight:750}.game-container{margin-top:1.25rem}.results-summary{text-align:center;margin:0 auto .75rem}.cards-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(.85rem,2vw,1.35rem);width:100%;display:grid}.card{aspect-ratio:2/3;perspective:1000px;cursor:pointer;min-height:220px}.card-inner{text-align:center;width:100%;height:100%;min-height:220px;transform-style:preserve-3d;isolation:isolate;position:relative}.card.flipped .card-inner{transform:none}.card-front,.card-back{backface-visibility:hidden;width:100%;height:100%;min-height:220px;box-shadow:var(--soft-shadow);transform-style:preserve-3d;border:3px solid #ffffffb3;border-radius:28px;justify-content:center;align-items:center;transition:transform .56s cubic-bezier(.2,.8,.2,1),opacity .18s;display:flex;position:absolute;inset:0;overflow:hidden}.card-front{z-index:2;opacity:1;transform:rotateY(0)}.card-back{z-index:1;opacity:0;pointer-events:none}.card.flipped .card-front{z-index:1;opacity:0;pointer-events:none;transform:rotateY(-180deg)}.card.flipped .card-back{z-index:2;opacity:1;pointer-events:auto;transform:rotateY(0)}.card-front:after,.card-back:after{content:"";background:#fff3;border-radius:999px;height:56%;position:absolute;inset:auto -20% -28% 12%;transform:rotate(-16deg)}.card-front{color:var(--ink);background:linear-gradient(145deg,#fff 0%,#fff0c9 100%);flex-direction:column;gap:.7rem;padding:.85rem;font-size:clamp(2.2rem,5.2vw,4.7rem);font-weight:900}.card-prompt{z-index:1;overflow-wrap:anywhere;max-width:100%;line-height:.94;display:block;position:relative}.card.kanji .card-front{font-size:clamp(2.9rem,6.5vw,5.8rem)}.card.hiragana .card-front{background:linear-gradient(145deg,#fff 0%,#ffe2f1 100%)}.card.katakana .card-front{background:linear-gradient(145deg,#fff 0%,#dcfbff 100%)}.card.kanji .card-front{background:linear-gradient(145deg,#fff9d8 0%,#ffe1a8 100%)}.card-back{background:linear-gradient(145deg, var(--violet), var(--pink));color:#fff;flex-direction:column;gap:.16rem;padding:.56rem;font-size:clamp(.55rem,1.2vw,.78rem);font-weight:750;line-height:1.08;transform:rotateY(180deg)}.card-back strong{overflow-wrap:anywhere;max-width:100%;font-size:clamp(.82rem,1.9vw,1.28rem);line-height:1.05}.card-back span:not(.card-label){z-index:1;overflow-wrap:anywhere;max-width:100%;position:relative}.card-label{letter-spacing:.05em;text-transform:uppercase;background:#ffffff2e;border-radius:999px;padding:.16rem .46rem;font-size:.62rem;font-weight:900;display:inline-flex}.answer-panel{z-index:2;opacity:0;pointer-events:none;background:#fffffff5;border-radius:22px;align-content:center;gap:.55rem;padding:.8rem;transition:opacity .18s,transform .18s;display:grid;position:absolute;inset:.55rem;transform:translateY(8px)scale(.98);box-shadow:0 14px 28px #20133524}.card.answering .answer-panel,.card.wrong .answer-panel{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.card.answering .card-prompt,.card.wrong .card-prompt{opacity:.1;transform:scale(.78)}.answer-panel label{color:var(--muted);letter-spacing:.02em;font-size:.78rem;font-weight:900}.answer-row{gap:.35rem;display:grid}.answer-row input{width:100%;min-width:0;min-height:46px;color:var(--ink);border:2px solid #2013351a;border-radius:16px;outline:0;padding:.62rem .72rem;font-size:.95rem;font-weight:800}.answer-row button{background:var(--ink);color:#fff;border-radius:16px;min-height:44px;padding:.62rem .72rem;font-size:.9rem}.answer-row button:disabled,.answer-row input:disabled{opacity:.7;cursor:default}.answer-feedback{min-height:1em;color:var(--pink);font-size:.78rem;font-weight:900}.answer-feedback.correct{color:#1f8c62}.mobile-cancel{display:none}.card.wrong .card-front{animation:.32s wrong-shake}.card.solved{cursor:default}@keyframes wrong-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.bonus-level{color:#fff;box-shadow:var(--shadow);background:linear-gradient(135deg,#201335f0,#7c3cffe6);border-radius:32px;grid-template-columns:minmax(0,1fr) minmax(240px,360px);align-items:stretch;gap:1rem;margin-top:1rem;padding:1rem;display:grid}.bonus-level[hidden]{display:none}.bonus-copy,.bonus-card{padding:clamp(1rem,3vw,1.5rem)}.bonus-copy h2{letter-spacing:-.05em;margin:.55rem 0;font-size:clamp(2rem,5vw,4rem);line-height:.9}.bonus-copy p{color:#ffffffc2;font-weight:750}.bonus-card{color:var(--ink);background:#fffffff0;border-radius:26px;gap:.65rem;display:grid}.bonus-card label{color:var(--muted);font-weight:900}.taito-kanji{text-align:center;font-size:clamp(4rem,15vw,7rem);font-weight:950;line-height:1}.empty-state{color:var(--muted);text-align:center;background:#fff9;border:2px dashed #2013352e;border-radius:28px;grid-column:1/-1;padding:3rem 1.5rem;font-weight:800}footer{width:100%;color:var(--muted);text-align:center;margin:auto 0 0;padding:1.25rem 1rem;font-size:.9rem;font-weight:750}footer .rotated{display:inline-block;transform:rotate(180deg)}footer a{color:var(--violet);text-decoration:none}.auth-page{place-items:center;min-height:100vh;padding:1rem;display:grid}.auth-card{width:min(460px,100%);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffd6;border-radius:30px;gap:1rem;padding:clamp(1.2rem,4vw,2rem);display:grid}.auth-card h1{letter-spacing:-.025em;margin:0;font-size:clamp(2.4rem,9vw,4.6rem)}.auth-card p,.auth-card a{color:var(--muted);font-weight:750}.auth-form{gap:.65rem;display:grid}.auth-mode-switch{background:#20133514;border-radius:22px;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;padding:.35rem;display:grid;position:relative}.auth-mode-switch a{min-height:44px;color:var(--ink);border-radius:18px;place-items:center;font-weight:950;text-decoration:none;transition:color .24s,background .24s,box-shadow .24s;display:grid}.auth-mode-switch a.active{background:linear-gradient(135deg, var(--violet), var(--pink));color:#fff;box-shadow:0 12px 26px #7c3cff33}.auth-form label{color:var(--ink);letter-spacing:.04em;text-transform:uppercase;font-size:.8rem;font-weight:900}.auth-form input{min-height:50px;color:var(--ink);border:2px solid #2013351a;border-radius:18px;padding:.7rem .85rem;font-size:1rem;font-weight:800}.auth-form button{background:linear-gradient(135deg, var(--violet), var(--pink));color:#fff;cursor:pointer;border:0;border-radius:18px;min-height:50px;font-weight:950}.auth-success{color:#1f8c62}.auth-error{color:var(--pink)}.auth-note{font-size:.9rem}.access-wall{z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#20133561;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.access-wall[hidden]{display:none}.access-wall-card{width:min(440px,100%);box-shadow:var(--shadow);background:linear-gradient(145deg,#fffffff5,#fffaf2f5);border:3px solid #ffffffc7;border-radius:28px;gap:.85rem;padding:clamp(1rem,4vw,1.65rem);display:grid}.access-wall-card h2{letter-spacing:-.06em;font-size:clamp(2rem,6vw,3.4rem);line-height:.9}.access-wall-card p{color:var(--muted);font-weight:750}.access-wall-actions{gap:.6rem;display:grid}.access-wall-auth-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.access-wall-auth-actions #access-wall-close{grid-column:1/-1}.access-wall-actions[hidden]{display:none}.access-wall-primary,.access-wall-secondary{cursor:pointer;border:0;border-radius:18px;place-items:center;min-height:48px;font-weight:950;text-decoration:none;display:inline-grid}.access-wall-primary{background:linear-gradient(135deg, var(--violet), var(--pink));color:#fff}.access-wall-secondary{color:var(--ink);background:#20133514}@media (max-width:720px){.beta-badge{top:1rem;right:.42rem}.container{padding:.8rem}.controls-panel{border-radius:24px}.controls-toggle{display:block}.advanced-controls{display:none}.advanced-controls.open{display:grid}.app-mode-switch{border-radius:24px}.mode-btn{border-radius:20px}.search-box{flex-direction:column}.clear-search-btn{min-height:44px}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card,.card-inner,.card-front,.card-back{min-height:0}.card-inner,.card-front,.card-back{height:100%}.card-back{font-size:clamp(.74rem,2.8vw,.96rem)}.card-front{font-size:clamp(3.35rem,15vw,6.2rem)}.card.kanji .card-front{font-size:clamp(3.85rem,17vw,7rem)}.card-back strong{font-size:clamp(1.14rem,5vw,1.68rem)}#search-input,.answer-row input{font-size:16px}.card-label{font-size:.68rem}.desktop-cancel{display:none}.mobile-cancel{display:inline}.score-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.play-kind-switch,#play-instructions{grid-column:1/-1}.bonus-level{grid-template-columns:1fr}}@media (max-width:420px){.cards-grid{gap:.65rem}.nav-btn,.grade-btn{width:100%}}