/* ==========================================================================
   HOW TO TUTORIAL MODAL STYLES
   ==========================================================================

   CSS for How To Tutorial modal.
   - Wider layouts to accommodate more content
   - Tab-based navigation (base styles in modal.css)
   - Complex nested content structures
   - Multiple states and animations

   HOW TO TUTORIAL (#tutorialModal):
   - .howto-tabs + four .tab-btn sections
   - .howto-ul--rows / .howto-bullet (icon bullets, no glow)

   Note: H.U.B. (Hardware Unit Bay) styles are in hub-modal.css
   Tab navigation base styles (.modal-tabs, .tab-btn) are in modal.css

   Last Updated: 2025-01-XX
   ========================================================================== */

/* ==========================================================================
   HOW TO TUTORIAL MODAL STYLES
   ========================================================================== */

/* Tutorial Modal Container - Standardized height to match other modals */
/* How To Play uses purple to match button */
.tutorial-content {
    background-color: rgba(8, 3, 14, 0.94);
    --modal-frame-rgb: 204 68 255;
    --modal-panel-surface: var(--modal-circuit-vein-layers), linear-gradient(135deg, rgba(12, 5, 18, 0.96), rgba(8, 3, 14, 0.94));
    background-image: var(--modal-panel-surface);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 2px solid rgba(204, 68, 255, 0.75);
    border-radius: var(--radius-xl, 8px);
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.2),
        0 0 4px rgba(204, 68, 255, 0.08) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    min-height: 56vh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin: auto;
    z-index: 66;
    padding: 10px 12px;
}

/* NOTE: Scan lines effect moved to modal.css (.tutorial-content::before) */

/* Idle Rewards Modal - Gold accent to match button */
#idleRewardContent.tutorial-content {
    --modal-frame-rgb: 255 200 64;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 2px solid rgba(255, 215, 0, 0.75);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 4px rgba(255, 215, 0, 0.08) inset;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Tutorial Header Container - matches H.U.B. structure */
.tutorial-header-container {
    margin-bottom: 0;
}

.tutorial-header-container h2:not(.modal-hud-title) {
    margin: 0 0 5px 0;
    padding: 0 40px 0 0;
}

/* How To modal title - same strip treatment as H.U.B. (purple accent) */
#tutorialModal .tutorial-header-container > h2.modal-hud-title {
    margin-bottom: 8px;
}

/* .pause-indicator removed (consolidated in modal.css) */

/* Tutorial Main Content - Scrollable area */
.tutorial-main {
    flex: 1;
    padding: 0 10px 10px 10px;
    overflow-y: auto;
    font-size: 12px;
}

/* Tutorial Sections */
.tutorial-section h3 {
    color: var(--primary-color);
    text-align: center;
    font-size: 13px;
    margin-bottom: 10px;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.35);
    border-bottom: 1px solid var(--primary-color);
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.86);
    border-radius: var(--radius-lg, 6px);
}

.tutorial-section p {
    color: var(--text-color-light);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Tutorial Steps and Tips */
.tutorial-step,
.tutorial-tip {
    border-radius: var(--radius-lg, 6px);
    padding: 8px 12px;
    margin: 6px 0;
    transition: all 0.2s ease;
}

/* Info sections - green background */
.tutorial-step {
    background: rgba(0, 255, 0, 0.05);
    border: var(--border-width, 2px) solid rgba(0, 255, 0, 0.2);
}

/* Hover states */
.tutorial-step:hover {
    background: rgba(0, 255, 0, 0.08);
    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
    transform: translateY(-2px);
}

/* Pro Tip special styling */
.tutorial-tip {
    background: rgba(255, 204, 0, 0.07) !important;
    border: var(--border-width, 2px) solid rgba(255, 204, 0, 0.66);
}

.tutorial-tip:hover {
    background: rgba(255, 204, 0, 0.08) !important;
    border-color: rgba(255, 204, 0, 0.5);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Lean How To (single scroll, no canvases)
   -------------------------------------------------------------------------- */

.howto-modal {
    min-height: 48vh;
}

#tutorialModal .howto-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 10px 0;
    padding: 4px;
}

#tutorialModal .howto-tabs .tab-btn {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: unset;
}

.howto-body {
    padding-top: 4px;
}

.howto-lead {
    color: var(--text-color-light, #c8e8e0);
    line-height: 1.6;
    margin: 0 0 16px 0;
    font-size: 12px;
    text-align: left;
}

/* Icons: crisp, no glow (drop-shadow hides detail at small sizes) */
.howto-img--bullet,
.howto-img--inline {
    filter: none !important;
    object-fit: contain;
    image-rendering: auto;
}

/* Bullet column: position-shifted for optical alignment with first text line */
.howto-img--bullet {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    top: 2px;
}

.howto-img--inline {
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
}

.howto-ul--rows {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}

.howto-li-row {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 10px;
    /* First-line alignment: icon stays with line 1 when body wraps */
    align-items: start;
    margin-bottom: 11px;
    font-size: 11px;
    line-height: 1.5;
}

.howto-li-row:last-child {
    margin-bottom: 0;
}

.howto-bullet {
    width: 24px;
    padding-top: 0;
    box-sizing: border-box;
}

.howto-li-body {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-color-light);
}

.howto-jump {
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(0, 255, 200, 0.45);
    color: var(--secondary-color, #6fd);
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    padding: 0;
    margin: 0;
}

.howto-jump:hover {
    color: var(--primary-color, #0f8);
    border-bottom-color: var(--primary-color, #0f8);
}

#tutorialModal .howto-lean .howto-block-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    text-align: left;
    text-shadow: none;
    margin: 0 0 10px 0;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--accent-color, #9cf);
    border-bottom: 1px solid rgba(0, 255, 136, 0.28);
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-lg, 6px);
}

#tutorialModal .howto-lean .howto-block-title .howto-img--bullet {
    /* Titles use 20px assets; flex centers them with label text */
    width: 20px;
    height: 20px;
}

.howto-block h3 {
    text-align: left;
    margin-bottom: 8px;
    font-size: 12px;
}

.howto-ul {
    margin: 0 0 6px 0;
    padding-left: 1.15rem;
    color: var(--text-color-light);
    line-height: 1.5;
    font-size: 11px;
}

.howto-ul li {
    margin-bottom: 6px;
}

.howto-tip-p {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-color-light);
}

/* How To Play — term colors (Tower = CBD green; economy/pads = deploy cyan) */
#tutorialModal .howto-term--tower { color: #6dff8f; font-weight: 700; }
#tutorialModal .howto-term--energy { color: #00ddff; font-weight: 700; }
#tutorialModal .howto-term--mob { color: #ff9900; font-weight: 700; }
#tutorialModal .howto-term--core { color: #ff4d4d; font-weight: 700; }
#tutorialModal .howto-term--breach { color: #00ffc8; font-weight: 700; }
#tutorialModal .howto-term--execute { color: #00ddff; font-weight: 700; }
#tutorialModal .howto-term--ui { color: #00ffff; font-weight: 700; }
#tutorialModal .howto-term--aura { color: #ffd24d; font-weight: 700; }
#tutorialModal .howto-term--core-aura { color: #ff4d4d; font-weight: 700; }
#tutorialModal .howto-lead .howto-term--tower,
#tutorialModal .howto-li-body .howto-term--tower,
#tutorialModal .howto-tip-p .howto-term--tower { color: #6dff8f; }

.howto-lean > .tutorial-tip.howto-block {
    margin-top: 10px;
}

/*
 * Lean How To - tip callouts (Basics + Towers): same family as .tutorial-step,
 * muted amber left rail instead of heavy gold border / glow.
 */
#tutorialModal .howto-lean .tutorial-tip.howto-block {
    background: rgba(0, 255, 0, 0.05) !important;
    border: 1px solid rgba(0, 255, 136, 0.22) !important;
    border-left: 3px solid rgba(200, 155, 75, 0.45) !important;
    box-shadow: none !important;
}

#tutorialModal .howto-lean .tutorial-tip.howto-block:hover {
    background: rgba(0, 255, 0, 0.07) !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    border-left-color: rgba(220, 175, 95, 0.55) !important;
    box-shadow: none !important;
    transform: none;
}

#tutorialModal .howto-lean .tutorial-tip.howto-block .howto-block-title {
    border-bottom-color: rgba(200, 155, 75, 0.28);
}

#tutorialModal .howto-lean .tutorial-tip.howto-block .howto-tip-p code {
    font-size: 0.95em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 255, 136, 0.2);
    color: var(--text-color-light, #d8e8e4);
}

/* ==========================================================================
   MOBILE RESPONSIVE - Tutorial Modal adjustments
   ========================================================================== */

@media (max-width: 640px) {
    #tutorialModal .howto-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .tutorial-content {
        min-height: 56vh;
        max-height: 90vh;
        padding: 12px;
    }

    .tutorial-main {
        padding: 0 12px 12px 12px;
    }

    /* Smaller screens (480px and below) */
    @media (max-width: 480px) {

        .tutorial-content {
            min-height: 50vh;
            max-height: 92vh;
            padding: 10px;
        }

        .tutorial-main {
            padding: 0 10px 10px 10px;
            font-size: 11px;
        }

        #tutorialModal .howto-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    }
}

@media (max-width: 340px) {
    #tutorialModal .howto-tabs {
        grid-template-columns: 1fr;
    }
}