/*
  alfheim_mobile.css
  Mobile cosmetic overrides — all rules are scoped inside @media (max-width: 768px).
  No layout, grid, flex, sizing, margin, or padding properties are set here.
  Only color, font-family, cosmetic effects, and touch UX properties.
*/

@media (max-width: 768px) {

  /* ── Tap highlight ─────────────────────────────────────────── */
  /* Suppress the default blue flash on tap for every element.   */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Touch delay ───────────────────────────────────────────── */
  /* Eliminate the 300 ms tap delay on interactive elements.     */
  .sk-wrap,
  .sb-btn,
  .sidebar-toggle,
  .reset-btn,
  .info-lv-btn,
  .slot-btn,
  .modal-close,
  .dash-open-saves,
  .dash-load-btn,
  .dash-delete-btn,
  .dash-save-card {
    touch-action: manipulation;
  }

  /* ── Skill cell active states (light mode) ─────────────────── */
  /* Hover never fires on touch, so :active carries all feedback. */
  .sk-wrap.available:active .sk-frame {
    border-color: #5570c8 !important;
    box-shadow: 0 0 0 2px rgba(85,112,200,.38) !important;
  }
  .sk-wrap.invested:active .sk-frame {
    border-color: #2040c8 !important;
    box-shadow: 0 0 8px rgba(40,80,220,.7), inset 1px 1px 0 rgba(255,255,255,.22) !important;
  }
  .sk-wrap.maxed:active .sk-frame {
    border-color: #0820b8 !important;
    box-shadow: 0 0 10px rgba(20,60,230,.75), inset 1px 1px 0 rgba(255,255,255,.22) !important;
  }

  /* ── Skill cell active states (night mode) ─────────────────── */
  body.night .sk-wrap.available:active .sk-frame {
    border-color: #8090e0 !important;
    box-shadow: 0 0 0 2px rgba(100,120,224,.42) !important;
  }
  body.night .sk-wrap.invested:active .sk-frame {
    border-color: #a0b4ff !important;
    box-shadow: 0 0 10px rgba(100,140,255,.68), inset 1px 1px 0 rgba(255,255,255,.18) !important;
  }
  body.night .sk-wrap.maxed:active .sk-frame {
    border-color: #c0d0ff !important;
    box-shadow: 0 0 12px rgba(140,170,255,.75), inset 1px 1px 0 rgba(255,255,255,.22) !important;
  }

  /* ── Small-text contrast ───────────────────────────────────── */
  /* sk-name and sk-lv sit at 9–9.5 px; boost contrast for        */
  /* legibility in daylight / on glossy screens.                  */
  .sk-name {
    color: #303030 !important;
  }
  .skill-cell.empty .sk-name {
    color: #505050 !important;
  }
  body.night .sk-name {
    color: #dcdae8 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.9) !important;
  }
  .sk-lv {
    color: #383838 !important;
  }
  .skill-cell.invested .sk-lv {
    color: var(--ro-navy) !important;
  }
  .skill-cell.maxed .sk-lv {
    color: #0c28a8 !important;
  }
  .skill-cell.granted .sk-lv {
    color: #7a5400 !important;
  }
  body.night .sk-lv,
  body.night .skill-cell.invested .sk-lv,
  body.night .skill-cell.maxed .sk-lv,
  body.night .skill-cell.granted .sk-lv {
    color: #e9e6f0 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.85) !important;
  }

  /* ── Sidebar button active state ───────────────────────────── */
  .sb-btn:active {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border-left-color: #88aaff !important;
  }
  .sidebar-toggle:active {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
  }

  /* ── General button active states ──────────────────────────── */
  .dash-open-saves:active,
  .dash-load-btn:active,
  .reset-btn:active,
  .slot-btn:active {
    filter: brightness(.88) !important;
  }
  .dash-delete-btn:active {
    color: #ff4040 !important;
    filter: brightness(.88) !important;
  }
  .slot-btn.del:active {
    color: #ff4040 !important;
    filter: brightness(.88) !important;
  }
  .info-lv-btn:active {
    filter: brightness(.85) !important;
    border-color: var(--ro-navy) !important;
  }
  body.night .info-lv-btn:active {
    filter: brightness(.78) !important;
    border-color: #8898ee !important;
  }

  /* ── Scrollbars ────────────────────────────────────────────── */
  /* Thinner, less obtrusive on small screens.                   */
  ::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
  }
  ::-webkit-scrollbar-track {
    background: transparent !important;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(100,100,130,.32) !important;
    border-radius: 2px !important;
  }
  body.night ::-webkit-scrollbar-thumb {
    background: rgba(180,185,220,.22) !important;
  }

  /* ── Focus rings ───────────────────────────────────────────── */
  /* Suppress keyboard-style focus outlines; :active states carry */
  /* all feedback on touch devices.                               */
  button:focus,
  select:focus,
  input:focus {
    outline: none;
  }

}