/* Enhanced Base CSS (migrated from root) */
/* Font imports moved to index.html for better preload + connection reuse */

* { margin:0; padding:0; box-sizing:border-box; }
/* Default to white text given predominantly dark game surfaces; light UIs should override locally */
body { font-family:'Nunito',sans-serif; background:darkslategray; color:#fff; overflow-x:hidden; overflow-y:visible; height:100vh; }

/* Theming Variables */
:root {
    --color-bg-body: #000;
    --color-text: #fff;
    --panel-bg: #121a1e;
    --panel-bg-alt: #1e2b30;
    --panel-surface: #0b1012;
    --panel-border: #333;
    --panel-border-soft: #222;
    --panel-accent: #264653;
    --panel-accent-hover: #2a5d6d;
    --panel-danger-bg: #512f2f;
    --panel-danger-bg-hover: #6d3b3b;
    --panel-danger: #ff6b6b;
    --panel-muted: #8899a6;
    --settings-tabs-bg: #111;
    --settings-tab-active: #ffd700;
    --settings-tab-inactive: #999;
    --replay-overlay-bg: rgba(10,14,16,.9);
    --replay-btn-bg: #203038;
    --replay-btn-border: #35525d;
    --replay-btn-hover: #30505a;
}

/* Light variant for settings modal (not stark white) */
.settings-light {
    --panel-bg: #f1f3f5;
    --panel-bg-alt: #e5e9ed;
    --panel-surface: #ffffff;
    --panel-border: #c9d2da;
    --panel-border-soft: #d5dde3;
    --panel-accent: #2563eb;
    --panel-accent-hover: #1d4ed8;
    --panel-danger-bg: #dc2626;
    --panel-danger-bg-hover: #b91c1c;
    --panel-danger: #b91c1c;
    --panel-muted: #4b5563;
    --settings-tabs-bg: #e4e7eb;
    --settings-tab-active: #ffffff;
    --settings-tab-inactive: #6b7280;
    --replay-overlay-bg: rgba(250,252,255,.9);
    --replay-btn-bg: #e2e8f0;
    --replay-btn-border: #cbd5e1;
    --replay-btn-hover: #d1dce7;
    color:#222;
}

/* Apply theming to common structures (override inline where possible) */
.settings-light .settings-tabs { background: var(--settings-tabs-bg) !important; }
.settings-light .tab-button { color: var(--settings-tab-inactive) !important; }
.settings-light .tab-button.active { color:#111 !important; background:var(--settings-tab-active) !important; }
.settings-light .section-title { color:#111 !important; }
.settings-light .field-label, .settings-light .checkbox-label { color:#222 !important; }
.settings-light input, .settings-light select, .settings-light button.btn, .settings-light .btn { color:#111; }

/* Dark mode overrides for analytics + decision tree panels */
body.dark-mode #settings-analytics-performance { background: var(--panel-bg) !important; border-color: var(--panel-border) !important; color: var(--panel-muted) !important; }
body.dark-mode #settings-analytics-performance .metric { color:#e0e6eb; }
body.dark-mode .ai-decision-tree, body.dark-mode .ai-decision-tree-panel { background: var(--panel-bg); color:#e5e5e5; }
body.dark-mode .ai-decision-tree-panel .node { background: #1c262b; border-color:#2a343a; }
body.dark-mode .ai-decision-tree-panel .node:hover { background:#24333a; }

/* Replay overlay themeable buttons */
.replay-controls-overlay { background: var(--replay-overlay-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.replay-controls-overlay .replay-btn { background: var(--replay-btn-bg); border:1px solid var(--replay-btn-border); color:#e2e8f0; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; transition:background .2s, transform .15s; }
.replay-controls-overlay .replay-btn:hover:not(:disabled) { background: var(--replay-btn-hover); transform:translateY(-2px); }
.replay-controls-overlay .replay-btn:active:not(:disabled) { transform:translateY(0); }
.settings-light .replay-controls-overlay .replay-btn { color:#1e293b; }

/* Win Odds panel button hover states */
#dev-win-odds-mode:hover, #dev-win-odds-refresh:hover { 
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  transform: translateY(-1px);
}
#dev-win-odds-mode:active, #dev-win-odds-refresh:active {
  transform: translateY(0);
}
#dev-win-odds-clear:hover {
  background: rgba(239,68,68,0.2) !important;
  border-color: rgba(239,68,68,0.5) !important;
}
#dev-win-odds-mode:active, #dev-win-odds-refresh:active { filter:brightness(.9); }

/* Keyboard shortcut hint tooltip style (uses title attr automatically) */
.kbd-hint { font-size:10px; padding:2px 4px; background:#222; color:#eee; border-radius:4px; }

/* Text Shadow Utilities */
:root {
    --ts-comic-heavy: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 4px 4px 8px rgba(0,0,0,.8);
    --ts-comic-mid: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    --ts-comic-soft: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.ts-comic-outline { text-shadow: var(--ts-comic-heavy); }
.ts-comic-mid { text-shadow: var(--ts-comic-mid); }
.ts-comic-soft { text-shadow: var(--ts-comic-soft); }

/* Focus ring utility */
.u-focus-ring { outline:2px solid #7fd65d; outline-offset:2px; }

/* Skip Link */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:8px; top:8px; width:auto; height:auto; background:#111; color:#fff; padding:6px 10px; z-index:2000; border:2px solid #7fd65d; border-radius:4px; }

:focus-visible { outline:2px solid #7fd65d; outline-offset:2px; }

/* Headings default to white; light components can override locally */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-brand,'Bangers','Creepster',cursive); color:#fff; }
button { font-family: var(--font-family-brand,'Bangers',cursive); cursor:pointer; border:none; background:none; outline:none; }

.btn-tokyo-base { font-family: var(--font-family-brand,'Bangers',cursive); font-size:1.44em; color:#fff; font-weight:bold; letter-spacing:2px; text-shadow:var(--ts-comic-heavy); white-space:nowrap; padding:9.6px 14.4px; background:#666; border:4px solid #000; border-radius:0; box-shadow:4px 4px 0 #000,6px 6px 20px rgba(0,0,0,.4); transform:perspective(400px) rotateX(2deg) rotateZ(-1.5deg) scale(1); transition:.2s ease; }
.btn-tokyo-base:hover { transform:perspective(400px) rotateX(2deg) rotateZ(-1.5deg) scale(1.05); box-shadow:6px 6px 0 #000,8px 8px 25px rgba(0,0,0,.5); }
.btn-tokyo-base:active { transform:perspective(400px) rotateX(2deg) rotateZ(-1.5deg) scale(.98); box-shadow:2px 2px 0 #000,3px 3px 15px rgba(0,0,0,.3); }

/* Utility visibility helpers (kept with !important to override component styles safely) */
.hidden { display:none !important; } /* stylelint-disable-line declaration-no-important */
.visible { display:block !important; } /* stylelint-disable-line declaration-no-important */
.comic-border { border:4px solid #000; border-radius:0; box-shadow:6px 6px 0 #000; }
.halftone-pattern { background-image:radial-gradient(circle at 2px 2px, rgba(0,0,0,.15) 1px, transparent 0); background-size:8px 8px; }

.header-notification { position:absolute; top:220px; right:750px; z-index:1000; padding:8px 20px; margin:8px 0; background:#fff; border:2px solid #333; border-radius:25px; font-family:'Bangers',cursive; font-size:18px; color:#000; text-align:center; cursor:pointer; opacity:0; transition:.3s ease; box-shadow:none; min-width:300px; white-space:nowrap; background-image:radial-gradient(circle at 2px 2px, rgba(0,0,0,.1) 1px, transparent 0); background-size:8px 8px; }
.header-notification.visible { opacity:1; }
.header-notification:hover { background:#fff; color:#000; transform:translateY(-2px); box-shadow:none; }

.cpu-action-notification { position:absolute; top:-80px; left:50%; transform:translateX(-50%); z-index:999; padding:10px 20px; background:rgba(255,255,255,.95); border:2px solid #333; border-radius:20px; font-family:'Bangers',cursive; font-size:16px; color:#333; text-align:center; cursor:pointer; opacity:0; transition:.4s ease; box-shadow:0 4px 15px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); display:flex; align-items:center; gap:10px; max-width:400px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background-image:radial-gradient(circle at 2px 2px, rgba(0,0,0,.08) 1px, transparent 0); background-size:6px 6px; }
.cpu-action-notification.visible { opacity:1; transform:translateX(-50%) translateY(-5px); }
.cpu-action-notification:hover { background:rgba(255,255,255,.98); transform:translateX(-50%) translateY(-8px); box-shadow:0 6px 20px rgba(0,0,0,.4); }
.cpu-action-notification .notification-avatar { width:24px; height:24px; border-radius:50%; border:1px solid #333; flex-shrink:0; }
.cpu-action-notification .notification-text { flex:1; min-width:0; }

body.dark-mode { background:#1a1a1a; color:#e0e0e0; }
/* LEGACY ARENA SELECTOR (DEPRECATED) dark mode background retained until removal */
/* Removed legacy .game-board dark-mode styling (arena now scoped via .cmp-arena) */
body.dark-mode .modal-content { background:#333; color:#e0e0e0; }
body.dark-mode .player-card { background:#404040; border-color:#555; }
/* Removed body.dark-mode .dice override - dice should look the same in all themes */
body.dark-mode input, body.dark-mode button:not(.toolbar-btn):not(.mini-wo-btn):not(.cmp-action-menu button):not(.power-card button):not(.cd-close):not(.cmp-monster-selection .pill-btn):not(.cmp-monster-selection .reset-link) { color:#e0e0e0; border-color:#666; }
/* Force toolbar button border color in dark mode */
/* Toolbar button dark-mode styling handled in components.toolbar.css */
body.dark-mode .log-entry { background:rgba(255,255,255,.05); color:#e0e0e0; }

/* CPU Rolling Indicator */
.cpu-rolling-indicator { position:absolute; top:4px; right:6px; display:flex; gap:3px; opacity:.9; animation:koFadeIn .3s ease; pointer-events:none; }
.cpu-rolling-indicator .dot { width:6px; height:6px; background:#d4c14f; border-radius:50%; animation: koPulseDots 1s infinite ease-in-out; box-shadow:0 0 4px rgba(0,0,0,.3); }
.cpu-rolling-indicator .dot:nth-child(2){ animation-delay:.2s; }
.cpu-rolling-indicator .dot:nth-child(3){ animation-delay:.4s; }
.cpu-rolling-indicator.fade { opacity:0; transition:opacity .35s ease; }
@keyframes koPulseDots { 0%,80%,100% { transform:scale(.45); opacity:.45;} 40% { transform:scale(1); opacity:1;} }
@keyframes koFadeIn { from { opacity:0;} to { opacity:.9;} }
body.dark-mode .cpu-rolling-indicator .dot { background:#f4e38a; }

/* Replay Mode - disable pointer events for most interactive elements */
body.replay-mode-active .action-menu button,
body.replay-mode-active .cmp-settings-menu button,
body.replay-mode-active .toolbar button,
body.replay-mode-active button,
body.replay-mode-active .power-card,
body.replay-mode-active .die,
body.replay-mode-active .player-card { pointer-events:none !important; opacity:.6; }
/* Allow replay controls & pause button (assumes have data attributes or classes) */
body.replay-mode-active .replay-controls button,
body.replay-mode-active button[data-action="pause"],
body.replay-mode-active button[data-action="resume"],
body.replay-mode-active .toolbar button[data-action="pause"],
body.replay-mode-active .toolbar button[data-action="resume"] { pointer-events:auto !important; opacity:1 !important; }

/* Early paint blackout fallback (ensures full cover before layout.css loads). */
.post-splash-blackout { background:#000; }

/* Cursor utilities */
button, .btn, .toolbar-btn, .clickable, [role="button"], [onclick], input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], select, a, .monster-card, .die:not(.disabled), .power-card:not(.disabled), .dropdown-selected, .dropdown-option, .modal-header .close-btn, .close-btn, .settings-gear-icon, .tab-btn, .radio-option, .player-tile, .polaroid { cursor:pointer; }
button:disabled, .btn:disabled, .die.disabled, .power-card.disabled, input:disabled { cursor:default; }

/* Accessibility utilities */
.visually-hidden { position:absolute; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:0; }
/* Generic visually hidden alias (toolbar had a scoped .vh earlier) */
.vh { position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }

/* Mobile: Prevent text selection and callout menus on long-press */
@media (max-width: 1024px) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* Allow selection in input fields and game log */
  input, textarea, .game-log, .game-log * {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* Transient toast below active player card on turn start */
.active-start-toast {
    position: fixed;
    left: 0; top: 0; /* will be positioned inline via JS */
    transform: translate(-50%, 6px);
    background: #fffef8;
    color: #000;
    border: 3px solid #000;
    border-radius: 22px;
    padding: 6px 14px 7px;
    font-family: 'Bangers', cursive;
    font-size: 18px;
    letter-spacing: 1px;
    box-shadow: 4px 4px 0 #000, 0 0 0 2px #222 inset;
    z-index: 9000;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
    white-space: nowrap;
}
.active-start-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}