.grammar-arcade{--arcade-red:#c6533f;--arcade-ink:#32423a;--arcade-cream:#fffaf0;overflow:hidden;margin:0 0 32px;border:1px solid #ded7c6;border-radius:22px;background:var(--arcade-cream);box-shadow:0 16px 38px #43513d14}
.arcade-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 26px;background:linear-gradient(125deg,#f7efe0 0%,#fffaf0 55%,#edf1e5 100%)}
.arcade-character{display:flex;align-items:center;gap:16px;min-width:0}.arcade-character>div{min-width:0}.arcade-character h2{margin:3px 0 4px;color:var(--arcade-ink);font-size:clamp(1.25rem,2vw,1.75rem)}.arcade-character p{margin:0;color:#687269}.mascot-coach{display:inline-block;margin-top:7px;padding:5px 9px;border-radius:9px;background:#fff9;color:#657367;font-size:.76rem;font-weight:700}.arcade-mascot{flex:0 0 auto;width:78px;height:78px;filter:drop-shadow(0 7px 5px #7d5c4030);transform-origin:50% 90%;animation:mascot-bob 2.8s ease-in-out infinite}.arcade-mascot.combo{animation:mascot-bob .7s ease-in-out infinite;filter:drop-shadow(0 0 9px #e6b94d)}
.arcade-stats{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));min-width:292px;overflow:hidden;border:1px solid #e1dac8;border-radius:15px;background:#ffffffe3}.arcade-stats span{display:grid;place-items:center;padding:11px 12px;text-align:center}.arcade-stats span+span{border-left:1px solid #e7e0d1}.arcade-stats small{color:#8b887e;font-size:.65rem;font-weight:800;letter-spacing:.08em}.arcade-stats strong{color:var(--arcade-ink);font-size:1.15rem}
.arcade-mode-tabs{display:grid;grid-template-columns:repeat(7,1fr);padding:8px;background:#384a40}.arcade-mode-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:45px;border:0;border-radius:11px;background:transparent;color:#dce4dc;font:inherit;font-size:.75rem;font-weight:750;cursor:pointer;transition:background .18s,transform .18s,color .18s}.arcade-mode-tabs button:hover{background:#ffffff12}.arcade-mode-tabs button.active{background:#fffaf0;color:#39483f;box-shadow:0 4px 12px #1d292235}.arcade-mode-tabs button:active{transform:scale(.97)}.arcade-mode-tabs .icon{width:17px;height:17px}
.arcade-round{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 26px;border-bottom:1px solid #e9e2d4;color:#7b7b70;font-size:.78rem;font-weight:700}.arcade-round-dots{display:flex;gap:5px}.arcade-round-dots i{width:6px;height:6px;border-radius:50%;background:#d7d1c5}.arcade-round-dots i.active{width:18px;border-radius:8px;background:var(--arcade-red)}
.arcade-round-tools{display:flex;align-items:center;gap:16px}.arcade-round-tools .text-button{display:inline-flex;align-items:center;gap:5px;font-size:.76rem}.arcade-round-tools .icon{width:15px;height:15px}
.arcade-stage{position:relative;min-height:390px;padding:28px}.arcade-stage.success{animation:stage-glow .55s ease}.arcade-stage.wrong{animation:stage-shake .3s ease}.arcade-instruction{display:flex;align-items:center;gap:13px;margin-bottom:20px}.arcade-instruction>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#edf0e7;color:#536756;font-weight:850}.arcade-instruction>div{flex:1}.arcade-instruction strong{font-size:1rem}.arcade-instruction p{margin:3px 0 0;color:#656d65}.arcade-instruction>.icon-button{margin-left:auto}
.builder-zone,.builder-bank{display:flex;align-content:center;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:10px;min-height:86px;border-radius:16px}.builder-zone{padding:16px;border:2px dashed #c9c5b9;background:#fff;color:#9a968c}.builder-zone.has-pieces{border-color:#a6b59e;background:#f7faf4}.builder-bank{margin:16px 0;padding:15px;background:#f0ebdf}.word-piece{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;padding:8px 15px 11px;border:1px solid #d6cbb6;border-radius:11px;background:#fffaf3;color:#34443b;font:700 1.05rem/1.2 var(--font-jp,inherit);box-shadow:0 4px 0 #d5cbbb;cursor:grab;transition:transform .15s,box-shadow .15s}.word-piece small,.lego-slot small,.mini-lego b small{margin-bottom:4px;color:#777;font:750 .58rem/1.1 system-ui;text-transform:uppercase}.word-piece:hover{transform:translateY(-2px);box-shadow:0 6px 0 #d5cbbb}.word-piece:active{cursor:grabbing;transform:translateY(2px);box-shadow:0 2px 0 #d5cbbb}.word-piece.placed{border-color:#9caf94;background:#f1f7ec;box-shadow:0 4px 0 #b7c6b0}.word-piece.particle,.lego-slot.particle,.mini-lego .particle{border-color:#dd8d79;background:#fff0eb}.word-piece.quantity,.lego-slot.quantity,.mini-lego .quantity{border-color:#d8b55d;background:#fff7d9}.word-piece.request,.lego-slot.request,.mini-lego .request{border-color:#7da6bd;background:#eaf5fb}.word-piece.topic,.lego-slot.topic,.mini-lego .topic{border-color:#89a983;background:#edf7e9}.word-piece.object,.lego-slot.object,.mini-lego .object{border-color:#a99bc1;background:#f2eef8}.lego-legend{display:flex;flex-wrap:wrap;gap:7px;margin:-8px 0 13px}.lego-role{padding:4px 8px;border:1px solid;border-radius:20px;font-size:.68rem;font-weight:750}.lego-role.particle{color:#a44c39}.lego-role.quantity{color:#9b7623}.lego-role.request{color:#3f718d}.lego-role.topic{color:#567c50}.lego-role.object{color:#6a5788}.lego-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;min-height:59px;padding:7px;border:1px dashed;border-radius:11px}.lego-slot b{font-size:1.15rem}.arcade-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.particle-card{max-width:650px;margin:0 auto;padding:27px 20px;border:1px solid #dfd6c7;border-radius:20px;background:#fff;text-align:center}.particle-card>small{color:#68736b;font-weight:650}.particle-card p{margin:16px 0;font-size:clamp(1.45rem,4vw,2.15rem);font-weight:800}.particle-card mark{display:inline-grid;place-items:center;min-width:55px;border-radius:9px;background:#ffe8df;color:#b84f3b}.particle-role{color:#7a7b72;font-size:.82rem}.particle-options{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:650px;margin:17px auto 0}.particle-options button{min-height:56px;border:1px solid #d9cfbd;border-radius:14px;background:#fffaf0;color:#3c4b42;font:800 1.45rem var(--font-jp,inherit);box-shadow:0 4px 0 #d9cfbd;cursor:pointer}.particle-options button:hover{transform:translateY(-2px);border-color:#d5735d;background:#fff0e9}.speed-head.particle span{color:#b7503c}.speed-track.particle span{background:linear-gradient(90deg,#e8bd54,#d15e46)}
.listening-game{max-width:800px;margin:0 auto}.listening-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.listening-toolbar>div:first-child{display:flex;flex-direction:column}.listening-toolbar small{color:#787d76}.listening-toolbar>div:last-child{display:flex;flex-wrap:wrap;gap:8px}.chat-listening{display:grid;gap:12px;padding:20px;border-radius:20px;background:#e9eee8}.chat-message{display:flex;align-items:flex-end;gap:8px;max-width:78%}.chat-message.right{justify-self:end;flex-direction:row-reverse}.chat-avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#d96f57;color:#fff;font-size:.75rem;font-weight:850}.chat-message.right .chat-avatar{background:#4d765f}.chat-message-body{position:relative;min-width:170px;padding:12px 45px 12px 14px;border-radius:16px 16px 16px 4px;background:#fff}.chat-message.right .chat-message-body{border-radius:16px 16px 4px 16px;background:#dff1df}.chat-message-body>small{color:#707870;font-size:.65rem;font-weight:850}.chat-message-body p{margin:5px 0;font-size:1rem;font-weight:700}.chat-message-body>span,.chat-message-body>em{display:block;color:#72766f;font-size:.75rem}.chat-message-body>em{margin-top:3px;font-style:normal}.chat-audio{position:absolute;right:8px;top:9px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:#f1ede3;color:#526456;cursor:pointer}.chat-audio .icon{width:16px}.transcript-hidden{letter-spacing:.12em;color:#879087}.listening-question{margin-top:18px}.listening-question>.roleplay-replies{margin:12px 0 0}.shadowing-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 13px;border-radius:12px;background:#f1eee5;color:#777c74;font-size:.78rem}
.roleplay-scene{max-width:760px;margin:0 auto}.mascot-chat{display:flex;align-items:flex-end;gap:12px}.mini-mascot{flex:0 0 64px}.mini-mascot .arcade-mascot{width:64px;height:64px}.chat-bubble{position:relative;max-width:620px;padding:16px 55px 16px 18px;border-radius:18px 18px 18px 4px;background:#edf1e8;color:#34433b}.chat-bubble span{color:#708071;font-size:.72rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.chat-bubble p{margin:5px 0 0;font-size:1.05rem;font-weight:650}.chat-bubble .icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.roleplay-replies{display:grid;gap:10px;margin:24px 0 0 76px}.reply-bubble{padding:14px 18px;border:1px solid #dcd4c3;border-radius:17px 17px 4px 17px;background:#fff;color:#3d493f;font:650 1rem/1.4 inherit;text-align:left;cursor:pointer;transition:transform .16s,border-color .16s,background .16s}.reply-bubble:hover{transform:translateX(-4px);border-color:#a9b8a2;background:#f8fbf5}.reply-bubble.correct{border-color:#78a06e;background:#edf7e9}.reply-bubble.wrong{border-color:#d67461;background:#fff0ec}
.bug-sentence{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;padding:35px 20px;border-radius:18px;background:#3d4d43}.bug-token{padding:12px 15px;border:1px solid #ffffff20;border-radius:10px;background:#fffdf5;color:#334239;font:750 1.2rem/1.2 inherit;box-shadow:0 4px 0 #bdb7a9;cursor:crosshair;transition:transform .15s,background .15s}.bug-token:hover{transform:translateY(-4px) rotate(-1deg);background:#fff0c9}.bug-token.caught{border-color:#c9523c;background:#ffd8cf;box-shadow:0 4px 0 #c36a58;animation:bug-caught .45s ease}.bug-fix{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px auto 0;padding:13px 18px;border-radius:13px;background:#eef6e9}.bug-fix span{color:#71806f;font-size:.78rem;font-weight:800;text-transform:uppercase}.bug-fix strong{font-size:1.15rem}.bug-fix .icon-button{margin-left:5px}
.visual-game{display:grid;place-items:center}.visual-flip-card{position:relative;width:min(100%,370px);height:260px;padding:0;border:0;background:transparent;cursor:pointer;perspective:1000px}.visual-front,.visual-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid #ddd4c0;border-radius:23px;background:#fff;box-shadow:0 15px 25px #6f62441b;backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.75,.25,1)}.visual-front{transform:rotateY(0)}.visual-back{padding:25px;transform:rotateY(180deg);background:linear-gradient(145deg,#f3f6ec,#fffaf0)}.visual-flip-card.is-flipped .visual-front{transform:rotateY(-180deg)}.visual-flip-card.is-flipped .visual-back{transform:rotateY(0)}.visual-front svg{width:100%;height:210px}.visual-front small{padding-bottom:13px;color:#797b72}.visual-back>span{color:var(--arcade-red);font-size:3rem}.visual-back>strong{margin-top:8px;color:#425247;font-size:1.25rem}.visual-back>small{margin-top:3px;color:#929083}.visual-back p{margin:16px 0 0;font-size:1.15rem;font-weight:750}.visual-hint{margin:15px 0 0;color:#7f8177;font-size:.85rem}.visual-answer-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.speed-head{display:flex;align-items:center;justify-content:space-between;color:var(--arcade-red);font-weight:900;letter-spacing:.08em}.speed-head strong{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#c6533f;color:#fff;font-size:1.25rem}.speed-track{height:8px;margin:9px 0 25px;overflow:hidden;border-radius:10px;background:#eadfd2}.speed-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e6bd54,#c6533f);transition:width .1s linear}.speed-card{max-width:620px;margin:0 auto;padding:35px 20px;border:1px solid #e1d8c8;border-radius:22px;background:#fff;text-align:center;box-shadow:0 14px 22px #60523e12}.speed-card .jp{font-size:1.6rem;font-weight:800}.speed-equals{margin:12px;color:#969387;font-size:.78rem;font-weight:800;text-transform:uppercase}.speed-card p{margin:0;color:#536155;font-size:1.2rem;font-weight:750}.speed-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px;margin:17px auto 0}.speed-buttons button{min-height:51px;border:0;border-radius:14px;background:#4b5c51;color:#fff;font:800 1rem inherit;cursor:pointer}.speed-buttons button:last-child{background:var(--arcade-red)}.speed-buttons button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.arcade-feedback{max-width:760px;margin:19px auto 0;padding:14px 16px;border-radius:13px;border-left:4px solid}.arcade-feedback strong{display:block;margin-bottom:4px}.arcade-feedback p{margin:0}.arcade-feedback small{display:block;margin-top:7px;color:#697168}.arcade-feedback.success{border-color:#66935d;background:#edf7e9;color:#38583a}.arcade-feedback.wrong{border-color:#c6533f;background:#fff0ec;color:#7a3e34}.arcade-next{display:flex;justify-content:center;margin-top:18px}.arcade-burst{position:absolute;inset:0;overflow:hidden;pointer-events:none}.arcade-burst span{position:absolute;left:50%;top:48%;color:#e1a933;font-size:1.4rem;animation:confetti-pop .8s ease-out forwards;transform:rotate(calc(var(--i)*38deg)) translateY(-20px)}
.okaikei-lab{margin:0 0 30px;padding:25px;border:1px solid #ddd4c1;border-radius:21px;background:linear-gradient(145deg,#fffaf0,#f3f6ec)}.okaikei-lab .section-head{align-items:flex-start}.okaikei-lab .section-head h2{margin:4px 0}.okaikei-lab .section-head p{margin:0;color:#74786f}.okaikei-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.okaikei-vocab{display:grid;gap:9px}.okaikei-vocab article{position:relative;display:grid;grid-template-columns:1.3fr .8fr;align-items:center;gap:10px;padding:12px 48px 12px 14px;border:1px solid #e1d9c9;border-radius:13px;background:#fff}.okaikei-vocab article>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:3px 10px}.okaikei-vocab article>div .jp:first-child{font-size:1.3rem;font-weight:800}.okaikei-vocab article>div strong{font-size:.82rem}.okaikei-vocab article>div small{grid-column:2;color:#929188;font-size:.68rem}.okaikei-vocab article>p{margin:0;font-weight:700}.okaikei-vocab details{grid-column:1/-1;color:#737970;font-size:.75rem}.okaikei-vocab details span,.okaikei-vocab details em{display:block;margin-top:4px}.okaikei-vocab details em{font-style:normal}.okaikei-vocab .icon-button{position:absolute;right:10px;top:12px}.okaikei-demo{display:grid;gap:13px}.mini-lego,.mini-chat{padding:16px;border:1px solid #e1d9c9;border-radius:15px;background:#fff}.mini-lego>p{margin:8px 0}.mini-lego>div{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.mini-lego b{display:flex;flex-direction:column;align-items:center;padding:7px 9px;border:1px solid;border-radius:9px;font-family:var(--font-jp,inherit)}.mini-lego>small{color:#777d75}.mini-chat{display:grid;gap:7px}.mini-chat>div{position:relative;max-width:88%;padding:9px 42px 9px 11px;border-radius:13px 13px 13px 4px;background:#edf1e8}.mini-chat>div.right{justify-self:end;border-radius:13px 13px 4px 13px;background:#dff0de}.mini-chat>div>small{font-size:.62rem;font-weight:800}.mini-chat>div p{margin:3px 0;font-weight:700}.mini-chat>div span{font-size:.72rem;color:#737970}.mini-chat .icon-button{position:absolute;right:6px;top:6px}
.motion-off *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes mascot-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes stage-glow{0%{box-shadow:inset 0 0 0 0 #7ea86f00}50%{box-shadow:inset 0 0 0 5px #7ea86f45}100%{box-shadow:inset 0 0 0 0 #7ea86f00}}
@keyframes stage-shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
@keyframes bug-caught{40%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1)}}
@keyframes confetti-pop{0%{opacity:1;transform:rotate(calc(var(--i)*38deg)) translateY(-20px) scale(.5)}100%{opacity:0;transform:rotate(calc(var(--i)*38deg)) translateY(-160px) scale(1.3)}}
@media(max-width:860px){.arcade-head{align-items:stretch;flex-direction:column}.arcade-stats{min-width:0;width:100%}.arcade-mode-tabs{overflow-x:auto;grid-template-columns:repeat(7,92px);justify-content:start}.arcade-mode-tabs button{flex-direction:column;gap:3px;padding:7px 2px;font-size:.68rem}.arcade-stage{min-height:0}.okaikei-grid{grid-template-columns:1fr}.okaikei-vocab{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grammar-arcade{margin-inline:-8px;border-radius:17px}.arcade-head{padding:18px}.arcade-character{align-items:flex-start}.arcade-mascot{width:62px;height:62px}.arcade-character p{font-size:.85rem}.arcade-stats span{padding:9px 4px}.arcade-stats small{font-size:.55rem}.arcade-mode-tabs{grid-template-columns:repeat(7,78px)}.arcade-round{align-items:flex-start;padding:11px 17px}.arcade-round-tools{align-items:flex-end;flex-direction:column;gap:6px}.arcade-round-dots{max-width:105px;flex-wrap:wrap;justify-content:flex-end}.arcade-stage{padding:20px 16px}.builder-zone,.builder-bank{gap:7px;padding:12px}.word-piece{padding:9px 10px}.lego-slot{min-width:62px}.particle-options{gap:6px}.particle-options button{min-height:50px;font-size:1.25rem}.listening-toolbar{align-items:flex-start;flex-direction:column}.chat-listening{padding:13px}.chat-message{max-width:94%}.shadowing-row{align-items:flex-start;flex-direction:column}.roleplay-replies{margin-left:28px}.listening-question .roleplay-replies{margin-left:0}.mini-mascot{display:none}.chat-bubble{padding-right:50px}.bug-sentence{padding:27px 10px}.bug-token{padding:10px;font-size:1.05rem}.visual-flip-card{height:245px}.speed-card{padding:28px 12px}.speed-buttons{position:sticky;bottom:10px}.arcade-feedback{font-size:.9rem}.okaikei-lab{padding:18px 13px}.okaikei-vocab{grid-template-columns:1fr}.okaikei-vocab article{grid-template-columns:1fr}.okaikei-vocab article>p{grid-column:1}.okaikei-demo{min-width:0}}
@media(prefers-reduced-motion:reduce){.grammar-arcade *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}