.player{display:flex;flex-direction:column;gap:.9rem}.player-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.mode-tabs{display:inline-flex;background:var(--surface);border:var(--border-w) solid var(--ink);border-radius:999px;padding:.2rem;box-shadow:var(--card-shadow-sm)}.mode-tabs button{border:0;background:transparent;color:var(--ink-soft);padding:.4rem .95rem;border-radius:999px;font-size:.875rem;font-weight:600;cursor:pointer}.mode-tabs button.active{background:var(--ink);color:var(--paper)}.stats{display:flex;gap:1rem;font-size:.875rem;color:var(--ink-soft)}.progress{height:8px;border-radius:999px;background:var(--paper-deep);border:1px solid var(--line);overflow:hidden}.progress-fill{height:100%;background:var(--shu);border-radius:999px;transition:width .2s ease}.card{background:var(--surface);border:var(--border-w) solid var(--ink);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;position:relative}.card:after{content:"問";position:absolute;top:.7rem;right:.7rem;width:1.6rem;height:1.6rem;display:grid;place-items:center;background:var(--shu);color:#fff;font-family:var(--font-display);font-size:.85rem;border-radius:6px;transform:rotate(3deg);opacity:.9}.card.done-card:after,.card.flash:after{content:"札"}.prompt{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem 0 .5rem}.prompt-emoji{font-size:2.5rem}.prompt-text{font-family:var(--font-display);font-size:clamp(3.2rem,15vw,5rem);font-weight:700;line-height:1.15}.prompt-sub{color:var(--ink-soft)}.prompt-sub.big{font-size:1.6rem;color:var(--shu);font-weight:600}.options{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.option{font-family:var(--font-display);font-size:1.45rem;padding:.85rem .5rem;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .1s ease,border-color .1s ease,transform 80ms ease}.option:not(:disabled):hover{border-color:var(--ink)}.option:not(:disabled):active{background:var(--paper-deep);transform:translateY(1px)}.option:disabled{cursor:default;opacity:.55}.option-correct{background:var(--moegi-soft)!important;border-color:var(--moegi)!important;color:var(--moegi);opacity:1!important;font-weight:700}.option-wrong{background:var(--shu-soft)!important;border-color:var(--shu)!important;color:var(--shu-deep);opacity:1!important}.feedback{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;border-radius:10px;border:var(--border-w) solid;padding:.75rem 1rem;font-size:1rem}.feedback.good{background:var(--moegi-soft);border-color:var(--moegi);color:var(--moegi)}.feedback.bad{background:var(--shu-soft);border-color:var(--shu);color:var(--shu-deep)}.speak{border:1.5px solid currentColor;background:transparent;color:inherit;width:1.9rem;height:1.9rem;border-radius:999px;cursor:pointer;font-size:.9rem;line-height:1;margin-left:.5rem;vertical-align:middle;opacity:.85;transition:opacity .1s ease,transform 80ms ease}.speak:hover{opacity:1}.speak:active{transform:scale(.92)}.primary{border:0;background:var(--shu);color:#fff;font-weight:700;padding:.6rem 1.25rem;border-radius:999px;cursor:pointer;font-size:.95rem;transition:filter .1s ease,transform 80ms ease}.primary:hover{filter:brightness(1.06)}.primary:active{transform:translateY(1px)}.ghost{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:.55rem 1.2rem;border-radius:999px;text-decoration:none;font-size:.95rem}.flash{align-items:center;cursor:pointer;min-height:16rem;justify-content:center;font-family:inherit;color:var(--ink)}.flip-hint{color:var(--ink-soft);font-size:.875rem}.grade{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.grade button{font-size:1rem;padding:.9rem;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;font-weight:700;transition:background .1s ease,transform 80ms ease}.grade button:active{transform:translateY(1px)}.grade-no{background:var(--paper);color:var(--ink)}.grade-yes{background:var(--moegi-soft);border-color:var(--moegi)!important;color:var(--moegi)}.done-card{align-items:center;text-align:center;padding:2.5rem 1.5rem 1.75rem;gap:1rem}.done-card h2{margin:0;font-size:1.6rem}.done-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem}.done-stat{display:flex;flex-direction:column;align-items:center;gap:.1rem;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:.65rem 1rem .55rem;min-width:5rem}.done-stat strong{font-family:var(--font-display);font-size:1.45rem;line-height:1.15}.done-stat .stat-of{font-size:.85rem;color:var(--ink-soft);font-weight:400}.done-stat>small{color:var(--ink-soft);font-size:.72rem}.done-stat.gold{border-color:var(--gold)}.done-stat.gold strong{color:var(--gold)}.done-note{margin:0;color:var(--ink-soft);font-size:.82rem}.done-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.card-loading{opacity:.8}.points-earned{font-style:normal;font-weight:700;color:var(--gold)}.card{background-image:repeating-linear-gradient(-45deg,var(--shu) 0 7px,var(--shu-deep) 7px 14px);background-size:12px 100%;background-repeat:no-repeat;background-position:left center;padding-left:2.1rem;overflow:hidden}.option{display:flex;align-items:center;gap:.7rem;text-align:left;padding-left:.7rem}.option-letter{flex:none;width:1.7rem;height:1.7rem;display:grid;place-items:center;font-family:var(--font-sans);font-size:.85rem;font-weight:800;color:var(--paper);background:var(--ink);border-radius:7px;transform:rotate(-3deg)}.option-correct .option-letter{background:var(--moegi)}.option-wrong .option-letter{background:var(--shu)}.option-text{flex:1;text-align:center}.script-toggle{display:inline-flex;align-self:center;gap:.25rem;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:.15rem}.script-toggle button{border:0;background:transparent;color:var(--ink-soft);font-size:.8rem;font-weight:700;padding:.25rem .7rem;border-radius:999px;cursor:pointer}.script-toggle button.active{background:var(--ai);color:#fff}.mascot{display:flex;align-items:center;gap:.5rem}.mascot-fox{font-size:2.6rem;animation:mascot-bounce 1.6s ease-in-out infinite}.mascot-bubble{font-family:var(--font-display);font-weight:700;background:var(--paper);border:var(--border-w) solid var(--ink);border-radius:14px 14px 14px 4px;padding:.35rem .8rem;box-shadow:var(--card-shadow-sm)}@keyframes mascot-bounce{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}.progress-fill{background:repeating-linear-gradient(-55deg,var(--shu) 0 10px,var(--shu-deep) 10px 20px)}.prompt-text.with-ruby{line-height:1.9;text-align:center}.prompt-text.with-ruby ruby{ruby-align:center}.prompt-text.with-ruby rt{font-size:.32em;color:var(--ink-soft);opacity:.65;font-weight:400}.option-text{display:flex;flex-direction:column;align-items:center;gap:.05rem}.option-reading{font-family:var(--font-sans);font-size:.68rem;color:var(--ink-soft);opacity:.8;font-weight:400}.card>.card-scene{position:absolute;inset:0 0 auto;height:52%;z-index:0;opacity:.1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,black 55%,transparent 100%);mask-image:linear-gradient(to bottom,black 55%,transparent 100%)}.card .prompt{background:radial-gradient(ellipse 85% 100% at 50% 50%,color-mix(in srgb,var(--surface) 72%,transparent) 40%,transparent 100%)}.card>.card-scene svg{display:block;width:100%;height:100%}.card>:not(.card-scene){position:relative;z-index:1}
