/* Typographic rules for the Battle Info page's content (damage stacking math,
           elemental table) -- same look the old info modal used for its h2/h3/p, just scoped to
           the new page container instead of .modal-box. */
        .info-page-content h2 { color: var(--skin-accent-text); margin-bottom: 12px; }
        .info-page-content h3 { color: var(--skin-accent-text); margin: 20px 0 8px; font-size: 1.1em; }
        .info-page-content p { margin-bottom: 10px; line-height: 1.5; color: var(--skin-content-text); font-size: 0.92em; }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal-overlay.active { display: flex; }

        .modal-box {
            background: white;
            border-radius: 12px;
            max-width: 900px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            padding: 25px;
            position: relative;
        }

        .modal-close {
            position: absolute;
            top: 12px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.6em;
            line-height: 1;
            cursor: pointer;
            color: #999;
        }

        .modal-close:hover { color: #333; }

        .modal-box h2 { color: #667eea; margin-bottom: 12px; }
        .modal-box h3 { color: #667eea; margin: 20px 0 8px; font-size: 1em; }
        .modal-box p { margin-bottom: 10px; line-height: 1.5; color: #333; font-size: 0.88em; }

        /* Crop Tuner -- lets the user adjust CLASS_CROP_X/Y/SCALE by dragging sliders and seeing
           the result live, instead of hand-editing those three tables and reloading to check.
           See CLAUDE.md "Class Picker" for why those numbers exist at all (per-class hero art
           needs its own focal point + zoom to center on the face). */
        .crop-tuner-btn {
            background: #eef1fb;
            color: #4a5a8a;
            border: 1px solid #d5daf0;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 0.8em;
            font-weight: 700;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .crop-tuner-btn:hover { background: #dde3f7; }

        .crop-tuner-body { display: flex; gap: 20px; flex-wrap: wrap; }
        .crop-tuner-preview-col { flex: 0 0 auto; }
        .crop-tuner-preview-wrap {
            width: 220px;
            height: 300px;
            overflow: hidden;
            position: relative;
            border-radius: 10px;
            background: #24345a;
            border: 2px solid #ddd;
        }
        .crop-tuner-preview-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: none;
        }
        .crop-tuner-gender-row { display: flex; gap: 6px; margin-top: 8px; }
        .crop-tuner-gender-btn {
            flex: 1;
            padding: 6px 4px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #f5f5f5;
            color: #555;
            font-size: 0.8em;
            font-weight: 700;
            cursor: pointer;
        }
        .crop-tuner-gender-btn.active { background: #4a90e2; color: white; border-color: #4a90e2; }
        .crop-tuner-controls-col { flex: 1 1 260px; min-width: 240px; }
        .crop-tuner-controls-col label {
            display: block;
            font-size: 0.82em;
            font-weight: 700;
            color: #444;
            margin: 12px 0 4px;
        }
        .crop-tuner-controls-col input[type="range"] { width: 100%; }
        .crop-tuner-controls-col select {
            width: 100%;
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid #ccc;
            font-size: 0.9em;
        }
        .crop-tuner-controls-col input[type="text"] {
            width: 100%;
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid #ccc;
            font-size: 0.9em;
        }
        .crop-tuner-output {
            background: #1e293b;
            color: #a5f3c4;
            font-family: monospace;
            font-size: 0.78em;
            padding: 10px;
            border-radius: 8px;
            margin-top: 14px;
            white-space: pre;
            overflow-x: auto;
        }
        .crop-tuner-copy-btn { margin-top: 8px; }

        .element-table-wrap { overflow-x: auto; }

        .element-table { border-collapse: collapse; font-size: 0.72em; width: 100%; min-width: 560px; }
        .element-table th, .element-table td { padding: 6px 8px; text-align: center; border: 1px solid var(--skin-divider); }
        .element-table th { background: var(--skin-card-bg); color: var(--skin-accent-text); font-weight: 700; white-space: nowrap; }
        .element-table td.pos { color: #27ae60; font-weight: 700; }
        .element-table td.neg { color: #e74c3c; font-weight: 700; }
        .element-table td.zero { color: var(--skin-text-faint); }