/* =====================================================
   Spotlight Kanji v2 CSS
   スコープ: .spkj-root 以下すべて
   ===================================================== */

/* ---------- 変数 ---------- */
.spkj-root {
	--spkj-navy:       #1e3a5f !important;
	--spkj-navy-dark:  #142844 !important;
	--spkj-navy-light: #2a4f7c !important;
	--spkj-gold:       #d4af37 !important;
	--spkj-gold-light: #e8c84a !important;
	--spkj-white:      #ffffff !important;
	--spkj-bg:         #eef2f7 !important;
	--spkj-correct:    #2ecc71 !important;
	--spkj-gray:       #8899aa !important;
	--spkj-panel-bg:   #e8eff7 !important;
	--spkj-sidebar-w:  220px   !important;

	all: unset;
	display: block !important;
	box-sizing: border-box !important;
	font-family: 'BIZ UDGothic', sans-serif !important;
	background: var(--spkj-bg) !important;
	height: 100vh !important;
	overflow: hidden !important;
	position: relative !important;
}

.spkj-root *, .spkj-root *::before, .spkj-root *::after {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- ヘッダー ---------- */
.spkj-root .spkj-header {
	width: 100% !important;
	background: var(--spkj-navy) !important;
	padding: 8px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.35) !important;
	height: 52px !important;
	flex-shrink: 0 !important;
}
.spkj-root .spkj-header h1 {
	font-family: 'Dela Gothic One', sans-serif !important;
	font-size: 1.3rem !important;
	color: var(--spkj-gold) !important;
	letter-spacing: 3px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
}
.spkj-root .spkj-hdr-right {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.spkj-root .spkj-hdr-label {
	font-family: 'Dela Gothic One', sans-serif !important;
	font-size: 1rem !important;
	color: var(--spkj-gold) !important;
}

/* ---------- 3カラム ---------- */
.spkj-root .spkj-body {
	display: grid !important;
	grid-template-columns: var(--spkj-sidebar-w) 1fr var(--spkj-sidebar-w) !important;
	height: calc(100vh - 52px) !important;
	overflow: hidden !important;
}

/* ---------- サイドバー共通 ---------- */
.spkj-root .spkj-sidebar {
	background: var(--spkj-white) !important;
	border-right: 1px solid #d0dce8 !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	padding: 12px 10px !important;
	gap: 10px !important;
}
.spkj-root .spkj-sidebar.spkj-right {
	border-right: none !important;
	border-left: 1px solid #d0dce8 !important;
}
.spkj-root .spkj-sidebar-title {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	color: var(--spkj-gray) !important;
	letter-spacing: 1px !important;
	flex-shrink: 0 !important;
}

/* ---------- 情報ブロック ---------- */
.spkj-root .spkj-info-block {
	background: var(--spkj-navy-dark) !important;
	border-radius: 10px !important;
	padding: 8px 10px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	flex-shrink: 0 !important;
}
.spkj-root .spkj-qno {
	font-family: 'Dela Gothic One', sans-serif !important;
	font-size: 0.95rem !important;
	color: var(--spkj-gold) !important;
}

/* ---------- コントロール共通 ---------- */
.spkj-root .spkj-ctrl-block {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	flex-shrink: 0 !important;
}
.spkj-root .spkj-ctrl-label {
	font-size: 0.75rem !important;
	color: var(--spkj-gray) !important;
}
.spkj-root .spkj-slider-row {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}
.spkj-root .spkj-slider-row input[type="range"] {
	flex: 1 !important;
	accent-color: var(--spkj-navy) !important;
	cursor: pointer !important;
	height: 20px !important;
}
.spkj-root .spkj-slider-row span {
	font-family: 'Dela Gothic One', sans-serif !important;
	font-size: 0.85rem !important;
	color: var(--spkj-navy) !important;
	min-width: 2rem !important;
	text-align: right !important;
}
.spkj-root .spkj-check-row {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	font-size: 0.9rem !important;
	color: var(--spkj-navy) !important;
	font-weight: 700 !important;
}
.spkj-root .spkj-check-row input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--spkj-navy) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

/* ---------- ボタン共通 ---------- */
.spkj-root .spkj-btn {
	width: 100% !important;
	height: 42px !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: 'BIZ UDGothic', sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background 0.15s, transform 0.1s, opacity 0.2s !important;
	white-space: nowrap !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}
.spkj-root .spkj-btn:active   { transform: scale(0.96) !important; }
.spkj-root .spkj-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; transform: none !important; }

.spkj-root .spkj-btn-next   { background: var(--spkj-navy) !important; color: var(--spkj-white) !important; }
.spkj-root .spkj-btn-next:hover:not(:disabled) { background: var(--spkj-navy-light) !important; }

.spkj-root .spkj-btn-reveal { background: var(--spkj-correct) !important; color: var(--spkj-white) !important; }
.spkj-root .spkj-btn-reveal:hover:not(:disabled) { background: #27ae60 !important; }

.spkj-root .spkj-btn-back   { background: #f0f0f0 !important; color: #555 !important; border: 2px solid #ccc !important; font-size: 0.85rem !important; }

/* ---------- 中央ステージ ---------- */
.spkj-root .spkj-center {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px !important;
	overflow: hidden !important;
	background: #000 !important;
}
.spkj-root .spkj-stage-wrap {
	position: relative !important;
	width: min(calc(100vh - 52px - 24px), calc(100vw - var(--spkj-sidebar-w) * 2 - 24px)) !important;
	height: min(calc(100vh - 52px - 24px), calc(100vw - var(--spkj-sidebar-w) * 2 - 24px)) !important;
	flex-shrink: 0 !important;
}
.spkj-root .spkj-canvas {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	border-radius: 8px !important;
}

/* ---------- 履歴 ---------- */
.spkj-root #spkj-history-list {
	flex: 1 !important;
	overflow-y: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}
.spkj-root .spkj-hist-item {
	background: var(--spkj-panel-bg) !important;
	border-radius: 8px !important;
	padding: 8px 10px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.spkj-root .shi-no    { font-size: 0.72rem !important; color: var(--spkj-gray) !important; min-width: 22px !important; }
.spkj-root .shi-kanji {
	font-family: 'BIZ UDMincho', serif !important;
	font-size: 1.5rem !important;
	color: var(--spkj-navy) !important;
	line-height: 1 !important;
	font-weight: 700 !important;
}
.spkj-root .shi-unit {
	flex: 1 !important;
	font-size: 0.72rem !important;
	color: var(--spkj-navy-light) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.spkj-root .spkj-hist-empty {
	font-size: 0.82rem !important;
	color: var(--spkj-gray) !important;
	text-align: center !important;
	padding: 20px 0 !important;
}

/* ---------- 設定モーダル ---------- */
.spkj-root .spkj-setup {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(20,40,68,0.93) !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	z-index: 200 !important;
	overflow-y: auto !important;
	padding: 20px 0 40px !important;
}
.spkj-root .spkj-setup-card {
	background: var(--spkj-white) !important;
	border-radius: 18px !important;
	padding: 24px 22px !important;
	width: min(96vw, 540px) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
.spkj-root .spkj-setup-card h2 {
	font-family: 'Dela Gothic One', sans-serif !important;
	color: var(--spkj-navy) !important;
	font-size: 1.5rem !important;
	text-align: center !important;
	letter-spacing: 3px !important;
	font-weight: 400 !important;
}
.spkj-root .spkj-setup-card h2 span { color: var(--spkj-gold) !important; }

/* 学年タブ（漢字スクラッチと同一デザイン） */
.spkj-root .spkj-grade-tabs { display: flex !important; gap: 5px !important; }
.spkj-root .spkj-grade-tab {
	flex: 1 !important;
	padding: 9px 4px !important;
	border: 2px solid var(--spkj-navy-light) !important;
	border-radius: 8px !important;
	background: var(--spkj-panel-bg) !important;
	color: var(--spkj-navy) !important;
	font-family: 'BIZ UDGothic', sans-serif !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: all 0.15s !important;
}
.spkj-root .spkj-grade-tab.active {
	background: var(--spkj-navy) !important;
	color: var(--spkj-white) !important;
	border-color: var(--spkj-navy) !important;
}

/* 単元スクロール（漢字スクラッチと同一） */
.spkj-root .spkj-unit-scroll {
	border: 1.5px solid #d0dce8 !important;
	border-radius: 10px !important;
	overflow-y: auto !important;
	height: 280px !important;
	background: #fafcff !important;
	padding: 6px !important;
	display: block !important;
}
.spkj-root .spkj-unit-scroll > * + * { margin-top: 4px !important; }
.spkj-root .spkj-unit-item {
	border: 1px solid #d8e4f0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}
.spkj-root .spkj-unit-header {
	display: flex !important;
	align-items: center !important;
	padding: 10px 12px !important;
	background: var(--spkj-panel-bg) !important;
	gap: 8px !important;
	user-select: none !important;
	cursor: pointer !important;
}
.spkj-root .spkj-unit-header:hover { background: #d8eaf8 !important; }
.spkj-root .spkj-unit-cb-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 22px !important;
}
.spkj-root .spkj-unit-cb {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--spkj-navy) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}
.spkj-root .spkj-unit-name {
	flex: 1 !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: var(--spkj-navy) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.4 !important;
}
.spkj-root .spkj-unit-count {
	font-size: 0.78rem !important;
	color: var(--spkj-gray) !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}
.spkj-root .spkj-unit-toggle {
	font-size: 0.65rem !important;
	color: var(--spkj-gray) !important;
	transition: transform 0.2s !important;
	flex-shrink: 0 !important;
	margin-left: 4px !important;
}
.spkj-root .spkj-unit-toggle.open { transform: rotate(90deg) !important; }

/* 漢字チップグリッド */
.spkj-root .spkj-kanji-grid {
	display: none !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	padding: 12px 12px 14px !important;
	background: #f5f9ff !important;
	border-top: 1px solid #d8e4f0 !important;
}
.spkj-root .spkj-kanji-grid.open { display: flex !important; }
.spkj-root .spkj-kanji-chip {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 6px 10px !important;
	background: var(--spkj-white) !important;
	border: 1.5px solid #c8d8e8 !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: background 0.12s, border-color 0.12s !important;
	user-select: none !important;
	min-width: 52px !important;
}
.spkj-root .spkj-kanji-chip:hover    { background: #e8f0fa !important; }
.spkj-root .spkj-kanji-chip.checked  { background: #e0eeff !important; border-color: var(--spkj-navy-light) !important; }
.spkj-root .spkj-kanji-chip input[type="checkbox"] {
	width: 15px !important;
	height: 15px !important;
	accent-color: var(--spkj-navy) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}
.spkj-root .spkj-kanji-chip span {
	font-family: 'BIZ UDMincho', serif !important;
	font-size: 1.3rem !important;
	color: var(--spkj-navy) !important;
	line-height: 1 !important;
}

/* 選択数 */
.spkj-root #spkj-selected-count {
	font-size: 0.85rem !important;
	color: var(--spkj-navy) !important;
	text-align: right !important;
	font-weight: 700 !important;
}
.spkj-root #spkj-selected-count em {
	color: #e74c3c !important;
	font-style: normal !important;
}

/* スタートボタン */
.spkj-root #spkj-start-btn {
	width: 100% !important;
	height: 52px !important;
	background: var(--spkj-navy) !important;
	color: var(--spkj-white) !important;
	border: none !important;
	border-radius: 10px !important;
	font-family: 'Dela Gothic One', sans-serif !important;
	font-size: 1.2rem !important;
	cursor: pointer !important;
	letter-spacing: 3px !important;
	transition: background 0.15s !important;
}
.spkj-root #spkj-start-btn:hover:not(:disabled) { background: var(--spkj-navy-light) !important; }
.spkj-root #spkj-start-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* レスポンシブ */
@media (max-width: 700px) {
	.spkj-root { --spkj-sidebar-w: 160px !important; }
}

/* 表示切り替え用（!importantで確実に隠す） */
.spkj-root .spkj-hidden { display: none !important; }

/* =====================================================
   ローディング・エラー（v2.1.0追加）
   ===================================================== */
.spkj-root .spkj-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 24px !important;
  gap: 16px !important;
}
.spkj-root .spkj-spinner {
  width: 44px !important; height: 44px !important;
  border: 5px solid #d0dce8 !important;
  border-top-color: var(--spkj-navy) !important;
  border-radius: 50% !important;
  animation: spkjSpin .8s linear infinite !important;
}
@keyframes spkjSpin { to { transform: rotate(360deg); } }
.spkj-root .spkj-loading-text {
  font-size: .92rem !important;
  color: var(--spkj-gray) !important;
  font-weight: 700 !important;
}
.spkj-root .spkj-load-error {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 36px 24px !important;
  gap: 12px !important;
  text-align: center !important;
}
.spkj-root .spkj-load-error-icon { font-size: 2.6rem !important; line-height: 1 !important; }
.spkj-root .spkj-load-error-text { font-size: .9rem !important; color: #e74c3c !important; font-weight: 700 !important; }
.spkj-root .spkj-retry-btn {
  padding: 9px 24px !important;
  background: var(--spkj-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'BIZ UDGothic', sans-serif !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  cursor: pointer !important;
}
.spkj-root .spkj-retry-btn:hover { background: var(--spkj-navy-light) !important; }
.spkj-root .spkj-setup-ui {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
/* hidden は必ず最後に定義（display:flex より優先させる） */
.spkj-root .spkj-hidden { display: none !important; }