/* ikii settings screen overrides.
   Scoped under [data-theme="ikii"] — existing themes unaffected.
   Include after ikii-tokens.css on any game page. */

/* ===== Base: full-bleed Sand, hide original card styling ===== */
[data-theme="ikii"] #startScreen,
[data-theme="ikii"] #settingsScreen,
[data-theme="ikii"] #menu {
  background: var(--ikii-sand, #F4F1EA) !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
}

/* ===== Panel: game's subject color, big rounded card ===== */
[data-theme="ikii"] #startScreen > .panel,
[data-theme="ikii"] #startScreen > div:first-child,
[data-theme="ikii"] #settingsScreen > div,
[data-theme="ikii"] #menu > #menuCard,
[data-theme="ikii"] #startScreen > .start-card {
  border-radius: 32px !important;
  padding: 34px 40px !important;
  box-shadow: 0 8px 0 var(--ikii-panel-deep, #3A66AE) !important;
  background: var(--ikii-panel-color, #4C82D9) !important;
  color: var(--ikii-paper, #FFFDF8) !important;
  text-align: left !important;
  max-width: 560px !important;
  width: 92% !important;
  border: none !important;
}

/* ===== Title ===== */
[data-theme="ikii"] #startScreen h1,
[data-theme="ikii"] #settingsScreen h2,
[data-theme="ikii"] #menu #menuTitle,
[data-theme="ikii"] .start-title {
  font: 600 36px/1.1 'Fredoka', sans-serif !important;
  letter-spacing: -0.03em !important;
  color: var(--ikii-paper, #FFFDF8) !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}

/* ===== Subtitle / description ===== */
[data-theme="ikii"] #startScreen .subtitle,
[data-theme="ikii"] #startScreen p,
[data-theme="ikii"] #menu #menuDesc,
[data-theme="ikii"] .start-subtitle,
[data-theme="ikii"] .start-instructions {
  color: rgba(255, 253, 248, 0.7) !important;
  font: 400 17px/1.5 'Fredoka', sans-serif !important;
}

/* ===== Option group labels ===== */
[data-theme="ikii"] .controlCard label,
[data-theme="ikii"] .controlCard > label,
[data-theme="ikii"] #menu .label,
[data-theme="ikii"] #startScreen label,
[data-theme="ikii"] #settingsScreen label {
  font: 600 20px/1 'Fredoka', sans-serif !important;
  color: var(--ikii-paper, #FFFDF8) !important;
  margin-bottom: 12px !important;
  display: block !important;
}

/* ===== Option hint text ===== */
[data-theme="ikii"] .controlCard .hint,
[data-theme="ikii"] .hint {
  font: 400 11px/1 'DM Mono', monospace !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 253, 248, 0.5) !important;
  display: inline !important;
  margin-left: 8px !important;
}

/* ===== Option toggles — physical objects ===== */
[data-theme="ikii"] .optBtn,
[data-theme="ikii"] .settingsOpt,
[data-theme="ikii"] .mode-btn,
[data-theme="ikii"] .mode-card {
  background: rgba(255, 253, 248, 0.16) !important;
  color: var(--ikii-paper, #FFFDF8) !important;
  border: none !important;
  border-radius: 22px !important;
  min-height: 56px !important;
  font: 600 17px/1 'Fredoka', sans-serif !important;
  padding: 16px 20px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 90ms linear, box-shadow 90ms linear !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Selected state — raised Paper block */
[data-theme="ikii"] .optBtn.selected,
[data-theme="ikii"] .settingsOpt.active,
[data-theme="ikii"] .mode-btn.selected,
[data-theme="ikii"] .mode-card.selected {
  background: var(--ikii-paper, #FFFDF8) !important;
  color: var(--ikii-ink, #1B1A24) !important;
  box-shadow: 0 5px 0 rgba(255, 253, 248, 0.3) !important;
}

/* Press */
[data-theme="ikii"] .optBtn:active,
[data-theme="ikii"] .settingsOpt:active,
[data-theme="ikii"] .mode-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 rgba(255, 253, 248, 0.2) !important;
}

/* ===== Option grids ===== */
[data-theme="ikii"] .grid3,
[data-theme="ikii"] .grid2,
[data-theme="ikii"] #inputModeOptions {
  display: grid !important;
  gap: 14px !important;
}
[data-theme="ikii"] .grid3 { grid-template-columns: repeat(3, 1fr) !important; }
[data-theme="ikii"] .grid2 { grid-template-columns: repeat(2, 1fr) !important; }
[data-theme="ikii"] #inputModeOptions { grid-template-columns: repeat(2, 1fr) !important; }

/* ===== Start button — Coral CTA ===== */
[data-theme="ikii"] #startBtn,
[data-theme="ikii"] #settingsScreen button[onclick="startGame()"],
[data-theme="ikii"] .btn-primary {
  background: var(--ikii-coral, #FB6340) !important;
  color: var(--ikii-paper, #FFFDF8) !important;
  border: none !important;
  border-radius: var(--ikii-r-pill, 999px) !important;
  font: 600 24px/1 'Fredoka', sans-serif !important;
  padding: 22px 32px !important;
  box-shadow: 0 6px 0 var(--ikii-coral-deep, #D64A2B) !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 24px !important;
  transition: transform 90ms linear, box-shadow 90ms linear !important;
}
[data-theme="ikii"] #startBtn:hover,
[data-theme="ikii"] #settingsScreen button[onclick="startGame()"]:hover,
[data-theme="ikii"] .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 0 var(--ikii-coral-deep, #D64A2B) !important;
}
[data-theme="ikii"] #startBtn:active,
[data-theme="ikii"] #settingsScreen button[onclick="startGame()"]:active,
[data-theme="ikii"] .btn-primary:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--ikii-coral-deep, #D64A2B) !important;
}

/* ===== Focus ===== */
[data-theme="ikii"] #startBtn:focus-visible,
[data-theme="ikii"] .optBtn:focus-visible,
[data-theme="ikii"] .settingsOpt:focus-visible {
  outline: 2px solid var(--ikii-coral, #FB6340) !important;
  outline-offset: 2px !important;
}

/* ===== Control card spacing ===== */
[data-theme="ikii"] .controlCard,
[data-theme="ikii"] .controlsRow,
[data-theme="ikii"] #menu .row {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
}

/* ===== kneehit-specific: number input, checkbox ===== */
[data-theme="ikii"] #hitLimit {
  height: 56px !important;
  padding: 0 18px !important;
  font: 600 20px/1 'Fredoka', sans-serif !important;
  color: var(--ikii-ink, #1B1A24) !important;
  background: var(--ikii-paper, #FFFDF8) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 5px 0 rgba(255, 253, 248, 0.3) !important;
  width: 100px !important;
}
[data-theme="ikii"] #hitLimit:focus {
  outline: none !important;
  box-shadow: 0 5px 0 var(--ikii-coral, #FB6340) !important;
}
[data-theme="ikii"] #menu select {
  height: 56px !important;
  padding: 0 18px !important;
  font: 600 17px/1 'Fredoka', sans-serif !important;
  color: var(--ikii-ink, #1B1A24) !important;
  background: var(--ikii-paper, #FFFDF8) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 5px 0 rgba(255, 253, 248, 0.3) !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

/* ===== Toggle switch (kneehit tutorial) ===== */
[data-theme="ikii"] .switch {
  width: 60px !important;
  height: 34px !important;
}
[data-theme="ikii"] .switch .slider {
  background: rgba(255, 253, 248, 0.2) !important;
  border-radius: var(--ikii-r-pill, 999px) !important;
}
[data-theme="ikii"] .switch input:checked + .slider {
  background: var(--ikii-coral, #FB6340) !important;
}

/* ===== Coordinates: instructions list ===== */
[data-theme="ikii"] .start-instructions {
  list-style: none !important;
  padding: 0 !important;
  counter-reset: steps !important;
}
[data-theme="ikii"] .start-instructions li {
  counter-increment: steps !important;
  padding: 12px 0 !important;
  font: 500 17px/1.4 'Fredoka', sans-serif !important;
  color: var(--ikii-paper, #FFFDF8) !important;
}
[data-theme="ikii"] .start-instructions li::before {
  content: counter(steps) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--ikii-coral, #FB6340) !important;
  color: var(--ikii-paper, #FFFDF8) !important;
  border-radius: 10px !important;
  font: 600 15px/1 'Fredoka', sans-serif !important;
  margin-right: 14px !important;
  box-shadow: 0 3px 0 var(--ikii-coral-deep, #D64A2B) !important;
}

/* ===== Back button (appears in some games) ===== */
[data-theme="ikii"] .back-btn,
[data-theme="ikii"] #back-btn {
  background: var(--ikii-paper, #FFFDF8) !important;
  color: var(--ikii-ink, #1B1A24) !important;
  border: none !important;
  border-radius: var(--ikii-r-pill, 999px) !important;
  box-shadow: 0 4px 0 var(--ikii-line, #E4DFD4) !important;
  font: 600 15px/1 'Fredoka', sans-serif !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
}
[data-theme="ikii"] .back-btn:active,
[data-theme="ikii"] #back-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--ikii-line, #E4DFD4) !important;
}

/* ===== Yellow (language) panels — dark brown text ===== */
[data-ikii-subject="language"][data-theme="ikii"] #startScreen h1,
[data-ikii-subject="language"][data-theme="ikii"] #startScreen .start-title,
[data-ikii-subject="language"][data-theme="ikii"] #menu #menuTitle {
  color: #4a340a !important;
}
[data-ikii-subject="language"][data-theme="ikii"] #startScreen p,
[data-ikii-subject="language"][data-theme="ikii"] #startScreen .subtitle,
[data-ikii-subject="language"][data-theme="ikii"] .start-subtitle,
[data-ikii-subject="language"][data-theme="ikii"] #menu #menuDesc {
  color: rgba(74,52,10,0.6) !important;
}
[data-ikii-subject="language"][data-theme="ikii"] .controlCard label,
[data-ikii-subject="language"][data-theme="ikii"] #startScreen label,
[data-ikii-subject="language"][data-theme="ikii"] #menu .label {
  color: #4a340a !important;
}
[data-ikii-subject="language"][data-theme="ikii"] .start-instructions li {
  color: #4a340a !important;
}
[data-ikii-subject="language"][data-theme="ikii"] .optBtn,
[data-ikii-subject="language"][data-theme="ikii"] .settingsOpt,
[data-ikii-subject="language"][data-theme="ikii"] .mode-btn {
  color: #4a340a !important;
  background: rgba(74,52,10,0.1) !important;
}
[data-ikii-subject="language"][data-theme="ikii"] .optBtn.selected,
[data-ikii-subject="language"][data-theme="ikii"] .settingsOpt.active,
[data-ikii-subject="language"][data-theme="ikii"] .mode-btn.selected {
  background: var(--ikii-paper, #FFFDF8) !important;
  color: #4a340a !important;
}
[data-ikii-subject="language"][data-theme="ikii"] .hint {
  color: rgba(74,52,10,0.4) !important;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  [data-theme="ikii"] * { transition: none !important; }
}

/* ===== Mobile ===== */
@media (max-width: 600px) {
  [data-theme="ikii"] #startScreen > .panel,
  [data-theme="ikii"] #startScreen > div:first-child,
  [data-theme="ikii"] #settingsScreen > div,
  [data-theme="ikii"] #menu > #menuCard,
  [data-theme="ikii"] #startScreen > .start-card {
    padding: 24px 22px !important;
    border-radius: 28px !important;
  }
  [data-theme="ikii"] #startScreen h1,
  [data-theme="ikii"] #settingsScreen h2,
  [data-theme="ikii"] #menu #menuTitle {
    font-size: 28px !important;
  }
  [data-theme="ikii"] #startBtn,
  [data-theme="ikii"] #settingsScreen button[onclick="startGame()"],
  [data-theme="ikii"] .btn-primary {
    font-size: 20px !important;
    padding: 18px 24px !important;
  }
}