:root{--ink:#073e7d;--blue:#008dff;--line:#c7dff3;--mint:#e8f7ee;--cream:#fffdf4}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:linear-gradient(130deg,#ebf8ff,transparent 48%),#fffdf7;font-family:system-ui,"Noto Sans JP",sans-serif}button,input{font:inherit}button,a,input{touch-action:manipulation}button{min-height:46px;padding:10px 17px;border:1px solid #a4cbee;border-radius:24px;background:white;color:var(--ink);cursor:pointer;font-weight:650}button:hover:not(:disabled){background:#edf8ff}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b65e00;outline-offset:4px}.primary{color:white;background:linear-gradient(#00a2ff,#006ee6);border-color:#169fee;box-shadow:inset 0 2px 1px #8eddff;font-weight:750}.primary:hover:not(:disabled){background:#0068d3}.muted,.preview-note{font-size:.83rem;line-height:1.8;color:#496a8b}main{max-width:1000px;padding:20px 24px 45px;margin:auto}h1{font-size:clamp(1.55rem,4vw,2.25rem);letter-spacing:.025em;margin:12px 0}h1 small{display:block;font-size:.52em;letter-spacing:.03em;margin-top:8px}h2{font-size:1.28rem}h3{font-size:1.12rem}.preview-note{margin:0 0 12px}.eyebrow{font-size:.72rem;font-weight:750;letter-spacing:.14em;color:#1475bb}.intro{background:linear-gradient(110deg,#dff3ff,#eefbf3);border-radius:26px;padding:26px 28px;position:relative;overflow:hidden}.intro>p{margin:8px 0}.intro-words{float:right;display:flex;gap:7px;transform:rotate(-5deg);margin:25px 5px}.intro-words span{padding:12px 17px;background:#fff;border:1px solid var(--line);border-bottom:5px solid #abc8dc;border-radius:10px;font-size:1.4rem;font-weight:750}.intro-words span:nth-child(2){background:#e1f8ea}.course-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 8px}fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.course{position:relative;padding:17px 14px 16px 38px;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 3px 8px #214b6b08;cursor:pointer}.course:has(input:checked){background:#eff9ff;border:2px solid #078bfd;padding:16px 13px 15px 37px}.course input{position:absolute;left:13px;top:20px;accent-color:#0087ed;width:17px;height:17px}.course b{display:block;font-size:.95rem}.course small{display:block;margin-top:8px;font-size:.75rem;line-height:1.7}.course em{display:block;font-style:normal;font-size:.73rem;margin-top:8px;color:#406c8b}.start-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 10px}.start-row>.primary{flex:1;min-width:220px}.progress-card{background:white;border:1px solid var(--line);border-radius:18px;padding:14px 20px;margin:22px 0}.progress-card p{margin:6px 0}.progress-card strong{float:right;font-size:1.2rem}progress{appearance:none;display:block;width:100%;height:7px;border:0;border-radius:6px;background:#ddecf2;margin:15px 0;overflow:hidden}progress::-webkit-progress-bar{background:#ddecf2}progress::-webkit-progress-value{background:#159cdb;border-radius:6px}progress::-moz-progress-bar{background:#159cdb}.motion{display:inline-flex;align-items:center;min-height:44px;gap:10px;font-size:.88rem}.motion input{width:18px;height:18px}summary{cursor:pointer;min-height:44px;padding:12px 0}.play-head{display:flex;gap:14px;align-items:center;font-size:.88rem}.play-head strong{margin-left:auto;white-space:nowrap}.question-card{border:1px solid var(--line);border-radius:26px;background:white;padding:24px 30px;box-shadow:0 7px 20px #1a55820b}.question-card h2{font-size:clamp(1.05rem,3.8vw,1.4rem);line-height:1.8;margin:8px 0 22px}.question-card .eyebrow{margin:16px 0 0}#scene{height:112px;border-radius:16px;background:linear-gradient(100deg,#f0faf9,#fff9e7);overflow:hidden;display:grid;place-items:center}#scene svg{height:100%;width:260px;max-width:100%}.small-label{font-size:.8rem;margin:0 0 9px}.small-label span{float:right;color:#627f95;font-size:.73rem}.answer-box{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#f1f9fd;border:2px dashed #b4d6ea;border-radius:16px;min-height:83px;padding:12px}.answer-box:empty:before{content:'単語カードを選んで、ここに並べよう';color:#56748a;font-size:.88rem}.tile{font-family:Arial,system-ui,sans-serif;font-size:1.18rem;font-weight:650;border-radius:10px;min-height:49px;min-width:48px;padding:10px 15px;border:1px solid #bdd5e5;border-bottom:4px solid #a4bfd1;box-shadow:0 3px 4px #12486c0c;color:#134c78;background:#fff}.answer-box .tile{background:#fffef3;border-bottom-color:#d8cf9d}.punctuation{font-size:1.4rem;font-weight:bold}.choices{display:flex;gap:11px;flex-wrap:wrap;min-height:66px;align-content:start;margin:22px 0}.actions{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid #e6edf1;padding-top:18px}.actions .primary{min-width:155px}.hint{background:#fff8d9;padding:12px 16px;border-radius:12px;font-size:.9rem;line-height:1.8}.feedback{padding:18px 22px;border:1px solid #b4dbc7;border-left:5px solid #38a778;border-radius:16px;background:#edf9f1;animation:complete .32s ease-out}.feedback h3{margin:0 0 12px}#correct-sentence{font-family:Arial,sans-serif;font-size:clamp(1.45rem,4vw,2rem);font-weight:650;line-height:1.5;overflow-wrap:anywhere;margin:12px 0}#explanation{background:#ffffffa8;padding:12px;border-radius:10px;line-height:1.8}.next{width:100%;margin:18px 0;min-height:54px}.result-count{background:var(--mint);border-radius:20px;padding:20px;line-height:2}.result-count strong{font-size:1.55rem}.result-item{border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:12px 0;background:white}.result-item .english{font-size:1.2rem;font-family:Arial,sans-serif;font-weight:650;line-height:1.6}.result-item p{margin:6px 0}.badge{font-size:.78rem;display:inline-block;border-radius:20px;background:#eef7fb;padding:5px 10px}.system-status:has(p:empty){display:none}.system-status{font-size:.85rem;line-height:1.8;margin-top:20px}.saved-row{font-size:.85rem;border-top:1px solid var(--line);padding:12px 0}footer{max-width:1000px;padding:10px 24px 35px;margin:auto;display:flex;justify-content:center;flex-wrap:wrap;gap:20px;font-size:.82rem}footer a{min-height:44px;display:inline-flex;align-items:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@keyframes complete{from{transform:translateY(5px);box-shadow:0 0 0 4px #fff2b5}to{transform:none;box-shadow:none}}body[data-reduce-motion="true"] *,body[data-reduce-motion="true"] *:before{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:700px){main{padding:14px 16px 30px}.intro{padding:22px}.intro-words{display:none}fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.course-head{align-items:start}.course-head h2{font-size:1.08rem}.course-head button{font-size:.77rem;padding:8px 12px}.question-card{padding:18px}.play-head{gap:8px;flex-wrap:wrap}.play-head>span{order:3;width:100%;font-size:.84rem}.small-label span{float:none;display:block;margin-top:5px}.actions{gap:8px}.actions button{flex:1;padding:10px;font-size:.88rem}.actions .primary{min-width:52%}.start-row>*{flex:1}#scene{height:88px}.feedback{padding:16px}.progress-card strong{float:none;display:block}.tile{padding:10px 12px;font-size:1.1rem}.answer-box{gap:7px;padding:9px}.choices{gap:9px}}@media(max-width:359px){main{padding:12px}.course{padding-left:33px;padding-right:9px}.course:has(input:checked){padding-left:32px;padding-right:8px}.course b{font-size:.86rem}.course small{font-size:.7rem}.question-card{padding:15px}.intro{padding:18px}.result-item{padding:14px}.play-head button{font-size:.8rem}}
:root .choices:empty{min-height:0;margin:12px 0}
/* Keep the course actions compact without squeezing the secondary labels. */
#home .start-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;margin-top:16px}
#home .start-row>button{min-width:0;min-height:48px;padding:10px 14px;line-height:1.5;border-radius:14px}
@media(max-width:700px){
  #home .start-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #home .start-row>button{padding:10px 8px;font-size:.875rem}
  #home .start-row>.primary{grid-column:1/-1;font-size:1rem}
}
@media(max-width:700px){.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.actions button{min-width:0;white-space:nowrap;padding:10px 5px}.actions .primary{grid-column:1/-1;min-width:0}}

.feedback[data-outcome="incorrect"]{border-color:#e4ca91;border-left-color:#af6b0d;background:#fff8e8;animation:none}
.feedback[data-outcome="shown"]{border-color:#bfd8eb;border-left-color:#5b8fac;background:#f1f8fd;animation:none}

/* Keep the next action in reach while leaving long explanations scrollable. */
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
  #play:has(#next:not([hidden])){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  #play:has(#next:not([hidden])) #scene{display:none}
  #play .next{position:fixed;z-index:20;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;margin:0;min-height:52px;box-shadow:0 0 0 6px #fffdf7,0 -4px 18px #073e7d24}
  #play .feedback{scroll-margin-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}