/* components.modals.css
 * Unified styling for new system modals (settings, AI decision tree, game log, card detail, player cards modal).
 * This is a parity-oriented baseline using design tokens; not a final redesign.
 */

@layer components.modals {
  .modal-shell { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding-top: 8vh; z-index: var(--z-modal, 5000); }
  /* Show modals when they have is-open class or inline display style */
  .modal-shell[style*="display: flex"], .modal-shell.is-open { display: flex; }
  .modal-shell .modal { background: #1c1c1c; border: 2px solid #111; box-shadow: 6px 6px 0 #000, 0 0 0 2px #000 inset, 0 10px 26px -8px rgba(0,0,0,.7); color:#e4e4e4; font-family: var(--font-family-body, system-ui, sans-serif); width: clamp(320px, 60vw, 880px); max-height: 70vh; display:flex; flex-direction:column; border-radius: 0; overflow:hidden; }
  .modal-header { background:#111; padding: var(--space-6,12px) var(--space-8,16px); display:flex; align-items:center; justify-content:space-between; gap: var(--space-6,12px); box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05); }
  .modal-header h2 { font-family: var(--font-family-brand, 'Bangers', cursive); font-size: var(--text-2xl,1.5rem); letter-spacing:1px; margin:0; text-shadow:none; color:#e4e4e4; }
  .modal-header button { background:#181818; color:#bbb; border:1px solid #333; font-family: inherit; font-size:1rem; line-height:1; width:32px; height:32px; border-radius:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow: 2px 2px 0 #000; transition: background .18s ease, transform var(--dur-fast,80ms) var(--ease-emphasized,cubic-bezier(.34,1.56,.64,1)); }
  .modal-header button:hover { transform: translateY(-2px); }
  .modal-header button:active { transform: translateY(0); }
  .modal-body { padding: var(--space-8,16px); overflow:auto; display:flex; flex-direction:column; gap: var(--space-6,12px); }
  .modal-body::-webkit-scrollbar { width: 10px; }
  .modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
  .modal-body::-webkit-scrollbar-thumb { background: var(--color-brand-brown,#8b4513); border:2px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }

  /* Forms inside modals */
  .modal form { display:flex; flex-direction:column; gap: var(--space-6,12px); }
  .modal .field { display:flex; flex-direction:column; gap: var(--space-2,4px); }
  .modal label { font-size: var(--text-sm,0.75rem); text-transform:uppercase; letter-spacing:1px; font-weight:600; opacity:.9; }
  .modal select, .modal input[type="checkbox"], .modal button, .modal .btn { font-family: var(--font-family-body, system-ui, sans-serif); }
  .modal select { background:#fff; border:2px solid #000; color:#000; padding:6px 10px; font-size: var(--text-md,0.875rem); border-radius:4px; box-shadow:2px 2px 0 #000; }
  .modal select:focus { outline:2px solid #555; }
  .modal .actions { display:flex; justify-content:flex-end; gap: var(--space-4,8px); margin-top: var(--space-4,8px); }
  .modal .actions button { background:linear-gradient(145deg, #ffd700, #ffb700); color:#000; border:2px solid #000; padding:4px 12px; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; box-shadow:2px 2px 0 #000; cursor:pointer; border-radius:0; }
  .modal .actions button:hover { background:linear-gradient(145deg, #ffe633, #ffc933); transform: translateY(-1px); box-shadow:3px 3px 0 #000; }
  .modal .actions button:active { transform: translate(1px,1px); box-shadow:1px 1px 0 #000; }

  /* Game Log Specific */
  .modal.game-log .log-scroll { display:flex; flex-direction:column; gap:4px; font-family: var(--font-family-mono, monospace); font-size: var(--text-xs,0.6875rem); background: #141414; padding: var(--space-4,8px); border:1px solid #000; border-radius:4px; max-height:50vh; overflow:auto; }
  .modal.game-log .round { border:1px solid #000; background:#1f1f1f; padding:4px 6px; border-radius:4px; box-shadow:2px 2px 0 #000; }
  .modal.game-log .round + .round { margin-top:6px; }
  .modal.game-log .round-header { cursor:pointer; font-weight:600; color: var(--color-brand-gold,#ffd700); text-shadow:1px 1px 0 #000; }
  .modal.game-log .turn { margin-top:4px; border:1px solid #000; background:#262626; padding:4px 6px; border-radius:4px; box-shadow:1px 1px 0 #000; }
  .modal.game-log .turn-header { cursor:pointer; font-weight:500; color: var(--color-brand-orange,#ff6b00); }
  .modal.game-log .log-line { padding:2px 0; border-bottom:1px dashed rgba(255,255,255,0.08); }
  .modal.game-log .log-line:last-child { border-bottom:none; }
  .modal.game-log .collapsed > .round-body, .modal.game-log .collapsed > .turn-body { display:none; }

  /* Power card manipulation entries styling for Game Log */
  .modal.game-log .log-line.kind-dice-original {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    border-left: 3px solid rgba(255, 255, 255, 0.6);
    padding-left: 8px;
  }
  
  .modal.game-log .log-line.kind-power-card {
    margin-left: 32px;
    padding: 6px 12px 6px 40px;
    background: rgba(170, 136, 255, 0.08);
    border-left: 3px solid rgba(170, 136, 255, 0.6);
    position: relative;
    border-radius: 0 4px 4px 0;
  }
  
  .modal.game-log .log-line.kind-power-card-result {
    margin-left: 32px;
    padding: 6px 12px 6px 40px;
    background: rgba(136, 204, 136, 0.08);
    border-left: 3px solid rgba(136, 204, 136, 0.6);
    position: relative;
    border-radius: 0 4px 4px 0;
  }

  /* AI Decision Tree - Larger modal for better readability */
  .modal.ai-decision { width: clamp(320px, 95vw, 1600px); max-height: 92vh; }
  .modal.ai-decision .modal-body { max-height: calc(92vh - 60px); }
  .modal.ai-decision .ai-tree { display:flex; flex-direction:column; gap:10px; font-size: var(--text-sm,0.75rem); }
  .modal.ai-decision .ai-round { border:1px solid #000; background:#202020; padding:6px 8px; border-radius:4px; box-shadow:2px 2px 0 #000; }
  .modal.ai-decision .ai-round-header { font-weight:600; color: var(--color-brand-gold,#ffd700); margin-bottom:4px; text-shadow:1px 1px 0 #000; }
  .modal.ai-decision .ai-turn { border:1px solid #000; background:#2a2a2a; padding:4px 6px; border-radius:4px; box-shadow:1px 1px 0 #000; }

  /* Dark mode for AI Decision Tree component inside modals */
  body.dark-mode .cmp-ai-decision-tree .adt-tree-scroll {
    background: #0e1012 !important;
    border-color: #2d343d !important;
  }
  .modal.ai-decision .ai-turn + .ai-turn { margin-top:6px; }
  .modal.ai-decision .ai-turn-header { font-weight:500; color: var(--color-brand-orange,#ff6b00); margin-bottom:4px; }
  .modal.ai-decision .ai-turn-rolls { display:flex; flex-direction:column; gap:4px; }
  .modal.ai-decision .ai-roll { background:#333; border:1px solid #000; padding:4px 6px; border-radius:4px; box-shadow:1px 1px 0 #000; }
  .modal.ai-decision .ai-roll .faces { font-family: var(--font-family-mono, monospace); margin-right:6px; color: var(--color-brand-gold,#ffd700); }
  .modal.ai-decision .ai-roll .score { font-weight:600; color: var(--color-brand-orange,#ff6b00); margin-left:4px; }
  .modal.ai-decision .ai-roll .rationale { font-style:italic; opacity:0.8; margin-top:2px; }

  /* Settings Modal */
  .modal.settings form { max-width: 420px; }
  .modal.settings .field select { width: 100%; }
  .modal.settings input[type="checkbox"] { transform: translateY(1px); }

  /* CPU Roll Delay Slider - Yellow Theme (with high specificity to override dark mode) */
  input.cpu-roll-slider,
  body.dark-mode input.cpu-roll-slider,
  .modal input.cpu-roll-slider {
    appearance: none;
    height: 8px;
    background: linear-gradient(90deg, #ffd54d, #ffb84d) !important;
    border: 2px solid #000 !important;
    border-radius: 4px;
    outline: none;
    box-shadow: 2px 2px 0 #000, inset 0 1px 3px rgba(0,0,0,0.3);
    color: transparent;
  }
  
  input.cpu-roll-slider::-webkit-slider-thumb,
  body.dark-mode input.cpu-roll-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ffd54d;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px #ffd54d, 2px 2px 0 #000;
    transition: transform 0.1s ease;
  }
  
  input.cpu-roll-slider::-webkit-slider-thumb:hover,
  body.dark-mode input.cpu-roll-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: #ffe066;
  }
  
  input.cpu-roll-slider::-moz-range-thumb,
  body.dark-mode input.cpu-roll-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ffd54d;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px #ffd54d, 2px 2px 0 #000;
    transition: transform 0.1s ease;
  }
  
  input.cpu-roll-slider::-moz-range-thumb:hover,
  body.dark-mode input.cpu-roll-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    background: #ffe066;
  }
  
  input.cpu-roll-slider:focus,
  body.dark-mode input.cpu-roll-slider:focus {
    outline: none;
  }

  /* About Modal - Larger size for feature list */
  .modal.modal-about-large { width: clamp(320px, 80vw, 960px); max-height: 85vh; }
  .modal.modal-about-large .modal-body { max-height: calc(85vh - 60px); }
  .modal.modal-about-large h3 { font-family: var(--font-family-brand, 'Bangers', cursive); }
  .modal.modal-about-large ul { margin-top: 8px; margin-bottom: 4px; }
  .modal.modal-about-large li { margin-bottom: 6px; }
}

/* Mobile-first adaptations for generic modals (e.g., Settings) */
@media (max-width: 720px) {
  .modal-shell { display: none; align-items: stretch; padding-top: 0; }
  .modal-shell .modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-width: 2px; }
  .modal-header { position: sticky; top: 0; z-index: 2; }
  .modal-body { padding: 12px; }
  .modal .actions { position: sticky; bottom: 0; background: linear-gradient(0deg, rgba(28,28,28,.95), rgba(28,28,28,.6) 60%, rgba(28,28,28,0)); padding: 10px 8px 8px; gap: 10px; }
  .modal.settings form { max-width: none; }
  .modal select { min-height: 36px; }
}