@import url('./design-tokens.css');
/* Shared visual language for teacher-configured tools. */
:root{
  --teacher-ink:var(--nt-text); --teacher-sky:var(--nt-primary); --teacher-mint:var(--nt-success);
  --teacher-line:var(--nt-border); --teacher-surface:rgba(255,255,255,.94); --teacher-shadow:var(--nt-shadow-card);
}

/* 品詞分類・動詞グループ分け */
body:has(#screen-input){
  background:radial-gradient(54rem 30rem at -8% -8%,rgba(107,190,255,.22),transparent 62%),radial-gradient(44rem 26rem at 107% 0,rgba(127,230,196,.16),transparent 64%),#f6f9fd;
  color:var(--teacher-ink);
}
body:has(#screen-input) #screen-input{background:transparent}
body:has(#screen-input) #screen-input h1,body:has(#screen-input) #screen-game h1{color:var(--teacher-ink)}
body:has(#screen-input) #screen-input .subtitle{color:#58708b}
body:has(#screen-input) .input-col{padding:14px;border:1px solid var(--teacher-line);border-radius:18px;background:var(--teacher-surface);box-shadow:0 6px 16px rgba(24,49,83,.05)}
body:has(#screen-input) .input-col textarea{border-color:var(--teacher-line);border-radius:12px;background:#fff;color:var(--teacher-ink)}
body:has(#screen-input) .input-col textarea:focus{border-color:var(--teacher-sky);box-shadow:0 0 0 4px rgba(38,116,207,.16)}
body:has(#screen-input) .start-btn{border-radius:15px;background:var(--teacher-sky);box-shadow:0 10px 22px rgba(38,116,207,.22)}
body:has(#screen-input) #screen-game{background:transparent}
body:has(#screen-input) .pool-label{color:#58708b}
body:has(#screen-input) .pool-area{border-color:#9ec1e9;border-radius:18px;background:var(--teacher-surface);box-shadow:var(--teacher-shadow)}
body:has(#screen-input) .word-card{border-color:var(--teacher-line);border-radius:14px;color:var(--teacher-ink);box-shadow:0 5px 13px rgba(24,49,83,.07)}
body:has(#screen-input) .word-card.selected{border-color:var(--teacher-sky);background:var(--teacher-sky)}
body:has(#screen-input) .drop-zone{border-radius:20px;background:var(--teacher-surface);box-shadow:var(--teacher-shadow)}
body:has(#screen-input) .zone-header{border-bottom-color:var(--teacher-line)}
body:has(#screen-input) .judge-btn{border-radius:14px;background:var(--teacher-sky);box-shadow:0 8px 18px rgba(38,116,207,.2)}
body:has(#screen-input) .sub-btn{border-radius:14px;border-color:var(--teacher-line)}

/* 一瞬チェンジャー */
body:has(.app-body){
  background:radial-gradient(54rem 30rem at -8% -8%,rgba(107,190,255,.18),transparent 62%),radial-gradient(44rem 26rem at 107% 0,rgba(127,230,196,.13),transparent 64%),var(--bg);
}
body:has(.app-body) .app-header{box-shadow:0 2px 16px rgba(24,49,83,.12)}
body:has(.app-body) .sidebar{background:rgba(255,255,255,.92);border-right-color:var(--teacher-line)}
body:has(.app-body) .main-content{padding:clamp(14px,2.6vw,28px)}
body:has(.app-body) .filter-bar,body:has(.app-body) .cv-card,body:has(.app-body) .tile{border:1px solid var(--teacher-line);box-shadow:var(--teacher-shadow)}
body:has(.app-body) .filter-bar{border-radius:20px;background:rgba(255,255,255,.92)}
body:has(.app-body) .tile{border-radius:18px}
body:has(.app-body) .btn{border-radius:12px;min-height:38px}
body:has(.app-body) .chip{border-radius:14px}
body:has(.app-body) .modal-bg{backdrop-filter:blur(4px)}

/* インタラクティブ・カレンダー */
body:has(#calendarGrid){
  background:radial-gradient(54rem 30rem at -8% -8%,rgba(107,190,255,.20),transparent 62%),radial-gradient(44rem 26rem at 107% 0,rgba(127,230,196,.15),transparent 64%),#f6f9fd;
}
body:has(#calendarGrid) header{
  background:linear-gradient(105deg,#183153 0%,#2674cf 58%,#6d63c8 100%);
  box-shadow:0 2px 16px rgba(24,49,83,.18);
}
body:has(#calendarGrid) .nav-btn,body:has(#calendarGrid) .btn-settings{border-color:var(--teacher-line);border-radius:14px;box-shadow:0 5px 12px rgba(24,49,83,.06)}
body:has(#calendarGrid) .action-btn{border-radius:14px}
body:has(#calendarGrid) .btn-quiz{background:#e56b50}
body:has(#calendarGrid) .settings-panel,body:has(#calendarGrid) .calendar-wrap,body:has(#calendarGrid) .legend{border-color:var(--teacher-line);box-shadow:var(--teacher-shadow)}
body:has(#calendarGrid) .settings-panel{border-radius:20px;background:var(--teacher-surface)}
body:has(#calendarGrid) .calendar-wrap{border-radius:24px;background:var(--teacher-surface)}
body:has(#calendarGrid) .mode-btn{border-radius:11px;border-color:var(--teacher-line)}

@media(max-width:760px){
  body:has(#screen-input) #screen-input{padding:26px 14px 38px}
  body:has(#screen-input) #screen-game{padding:22px 14px 38px}
  body:has(#screen-input) .input-col{padding:11px}
  body:has(.app-body) .sidebar{position:static;max-height:none}
}

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