/* Lifted from ../swgoh_era_level_viewer/viewer_template.html by
   scripts/build_era_abilities.py — do not hand-edit. The palette is
   shifted to the site's blue on the way through; see PALETTE there. */
* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #0a0c11;
    color: #eef2fb;
    min-height: 100vh;
  }
  button { font-family: inherit; }
  input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }
  input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: #101c33; }
  input[type=range]::-moz-range-track { height: 5px; border-radius: 3px; background: #101c33; }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #eef2fb; border: 2px solid #0a0c11; margin-top: -5.5px; cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #eef2fb; border: 2px solid #0a0c11; cursor: pointer;
  }
  #app p { margin: 0; }

  .term { cursor: pointer; border-bottom: 1px dotted currentColor; }
  .term.buff { color: #34d399; }
  .term.debuff { color: #f87171; }
  .term.other { color: #9fb4ff; }
  .term:hover { filter: brightness(1.25); }

  #term-panel-overlay {
    position: fixed; inset: 0; background: rgba(4,6,12,0.6);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 1000; animation: term-fade-in 0.15s ease-out;
  }
  @keyframes term-fade-in { from { opacity: 0; } to { opacity: 1; } }
  #term-panel {
    background: #0c1729; width: 100%; max-width: 640px;
    border-radius: 14px 14px 0 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
    animation: term-slide-up 0.2s ease-out;
  }
  @keyframes term-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @media (min-width: 641px) {
    #term-panel-overlay { align-items: center; }
    #term-panel { border-radius: 14px; }
  }