@import url('./design-tokens.css');
/* Shared visual language for learner-operated practice tools. */
:root{
  --learner-ink:var(--nt-text); --learner-sky:var(--nt-primary); --learner-mint:var(--nt-success); --learner-coral:#e56b50;
  --learner-line:var(--nt-border); --learner-surface:rgba(255,255,255,.93); --learner-shadow:var(--nt-shadow-card);
}

/* ひらがなフラッシュ */
body:has(#letter){
  color:var(--learner-ink);
  background:radial-gradient(52rem 29rem at -8% -8%,rgba(107,190,255,.22),transparent 62%),radial-gradient(42rem 25rem at 107% 0,rgba(127,230,196,.16),transparent 64%),#f6f9fd;
}
body:has(#letter) header{
  height:auto;min-height:76px;
  border-bottom-color:var(--learner-line);
  background:rgba(255,255,255,.88);
  box-shadow:0 2px 16px rgba(24,49,83,.05);
}
body:has(#letter) .back{color:var(--learner-ink);font-weight:700}
body:has(#letter) .tabs{padding:4px;border:1px solid var(--learner-line);border-radius:16px;background:#f7faff}
body:has(#letter) .tab{min-width:0;border:0;border-radius:11px;color:#48698d;background:transparent}
body:has(#letter) .tab.active{background:var(--learner-sky);color:#fff}
body:has(#letter) .panel{
  border-color:var(--learner-line);border-radius:22px;background:var(--learner-surface);box-shadow:var(--learner-shadow);
}
body:has(#letter) label.group{border-color:var(--learner-line);border-radius:14px;background:#fff;transition:border-color .16s ease,background .16s ease,transform .16s ease}
body:has(#letter) label.group:hover{border-color:#8ab8ee;transform:translateY(-1px)}
body:has(#letter) label.group:has(input:checked){border-color:var(--learner-sky);background:#ebf4ff;color:var(--learner-ink)}
body:has(#letter) input[type=checkbox],body:has(#letter) input[type=radio]{accent-color:var(--learner-sky)}
body:has(#letter) select{border-color:var(--learner-line);border-radius:12px}
body:has(#letter) .start{border-radius:16px;background:var(--learner-sky);box-shadow:0 11px 24px rgba(38,116,207,.25)}
body:has(#letter) #practice{isolation:isolate}
body:has(#letter) .letter-wrap{
  /* カード自身をサイズコンテナにする。文字は常にカードの利用可能な幅・高さから決まる。 */
  container-type:size;display:grid;place-items:center;height:clamp(340px,60vh,680px);min-height:0;padding:clamp(20px,5vmin,64px);overflow:hidden;
  border:1px solid rgba(126,165,211,.42);border-radius:var(--nt-radius-modal);background:var(--learner-surface);box-shadow:var(--nt-shadow-card);
}
body:has(#letter) #letter{max-width:100%;max-height:100%;font-size:min(72cqw,72cqh);line-height:.88;color:var(--learner-ink);text-shadow:none}
body:has(#letter) .choice{border-color:var(--learner-line);border-radius:18px;background:var(--learner-surface);box-shadow:0 6px 16px rgba(24,49,83,.06)}
body:has(#letter) .choice.correct{border-color:var(--learner-mint);background:#e9faf4;color:#0e6b57;transform:none}

/* 語彙ゲーム */
body:has(#app){
  --bg:#f6f9fd;--surface:rgba(255,255,255,.94);--surface-2:#eff6ff;--text:#183153;--muted:#58708b;--line:#d9e6f5;--primary:#2674cf;--primary-2:#183153;--accent:#e56b50;--shadow:var(--learner-shadow);
  background:radial-gradient(52rem 29rem at -8% -8%,rgba(107,190,255,.22),transparent 62%),radial-gradient(42rem 25rem at 107% 0,rgba(127,230,196,.16),transparent 64%),#f6f9fd;
}
body:has(#app) .app-header{height:72px;background:#fff;border-bottom-color:var(--learner-line);box-shadow:0 2px 16px rgba(24,49,83,.05)}
body:has(#app) .brand{display:flex;align-items:center;gap:9px;color:var(--learner-ink)}
body:has(#app) .brand::before{content:'の';display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--learner-sky);color:#fff;font-family:'Klee One',serif;font-size:19px;line-height:1}
body:has(#app) .icon-btn,body:has(#app) .language-btn{border:1px solid var(--learner-line);background:#fff;border-radius:12px}
body:has(#app) .panel{border-color:var(--learner-line);border-radius:var(--nt-radius-card)}
body:has(#app) .step{border:1px solid transparent;background:#eef4fb}
body:has(#app) .step.active,body:has(#app) .btn,body:has(#app) .game-tab.active{background:var(--learner-sky);border-color:var(--learner-sky)}
body:has(#app) .btn{min-height:var(--nt-control-height);border:1px solid transparent;border-radius:var(--nt-radius-control);background:var(--nt-button-primary-bg);color:var(--nt-button-primary-text);box-shadow:0 7px 16px rgba(38,116,207,.18)}
body:has(#app) .btn:hover:not(:disabled){background:var(--nt-button-primary-hover);filter:none}
body:has(#app) .btn:active:not(:disabled){background:var(--nt-button-primary-active)}
body:has(#app) .btn.secondary{background:var(--nt-secondary);border-color:var(--nt-border);color:var(--nt-on-secondary);box-shadow:none}
body:has(#app) .btn.secondary:hover:not(:disabled){background:var(--nt-secondary-hover)}
body:has(#app) .btn.outline{background:var(--nt-surface);border-color:var(--nt-outline);color:var(--nt-outline)}
body:has(#app) .btn.danger{background:var(--nt-danger);color:var(--nt-on-danger)}
body:has(#app) .btn.danger:hover:not(:disabled){background:var(--nt-danger-hover)}
body:has(#app) .btn:disabled{background:var(--nt-disabled-bg);border-color:var(--nt-disabled-bg);color:var(--nt-disabled-text);box-shadow:none;cursor:not-allowed}
body:has(#app) .btn:focus-visible,body:has(#app) .game-tab:focus-visible,body:has(#app) .answer:focus-visible{outline:none;box-shadow:var(--nt-focus-ring)}
body:has(#app) .step.active,body:has(#app) .game-tab.active{background:var(--nt-button-primary-bg);border-color:var(--nt-button-primary-bg);color:var(--nt-button-primary-text)}
body:has(#app) select,body:has(#app) input{min-height:var(--nt-control-height);border-radius:var(--nt-radius-control)}
body:has(#app) .word-option,body:has(#app) .game-tab{border-radius:14px}
body:has(#app) .quiz-prompt{border:1px solid var(--learner-line);border-radius:22px;background:#eff6ff}
body:has(#app) .answer{border-color:var(--learner-line);border-radius:18px;box-shadow:0 5px 14px rgba(24,49,83,.05)}
body:has(#app) .answer:hover:not(:disabled){border-color:var(--learner-sky);box-shadow:0 12px 24px rgba(24,49,83,.11)}
body:has(#app) .flash-face{border-color:var(--learner-line);border-radius:24px}

/* 語彙ゲーム: 学習者向けスキンの明色トークンを、ダークモード時だけ適切に差し替える。 */
html[data-theme="dark"] body:has(#app){
  --bg:#101719;--surface:#182225;--surface-2:#213136;--text:#edf7f7;--muted:#b5c4c7;--line:#365056;
  --primary:#2dd4bf;--primary-2:#7ee9df;--accent:#fbbf24;--shadow:0 10px 32px #0008;
  background:radial-gradient(52rem 29rem at -8% -8%,rgba(18,92,117,.24),transparent 62%),radial-gradient(42rem 25rem at 107% 0,rgba(20,104,82,.18),transparent 64%),var(--bg);
  --nt-button-primary-bg:#14786f;--nt-button-primary-hover:#0f655e;--nt-button-primary-active:#0b504b;--nt-button-primary-text:#fff;
  --nt-secondary:#213136;--nt-secondary-hover:#294147;--nt-secondary-active:#35545b;--nt-on-secondary:#edf7f7;--nt-outline:#74e2d5;--nt-border:#365056;--nt-surface:#182225;
}
html[data-theme="dark"] body:has(#app) .app-header{background:var(--surface);border-bottom-color:var(--line)}
html[data-theme="dark"] body:has(#app) .icon-btn,html[data-theme="dark"] body:has(#app) .language-btn{background:var(--surface-2);border-color:var(--line);color:var(--text)}

@media(max-width:700px){
  body:has(#letter) header{align-items:flex-start}
  body:has(#letter) .tabs{width:100%}
  body:has(#letter) .tab{flex:1 1 0;padding-inline:10px}
  body:has(#letter) .letter-wrap{height:clamp(320px,52vh,500px);padding:clamp(16px,5vmin,32px)}
  body:has(#letter) #letter{font-size:min(76cqw,76cqh)}
}

@media(prefers-reduced-motion:reduce){
  body:has(#letter) *,body:has(#app) *{transition-duration:1ms!important;animation-duration:1ms!important}
}