/* =========================================
   DESIGN SYSTEM: FRAME DATA ENGINE (FrameData.css)
   ========================================= */

/* --- 1. INTERNAL ENTRY LAYOUT --- */
.skill-entry-header { 
    background-color: var(--bg-secondary); 
    padding: 1rem 1.5rem; 
    display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 2px solid var(--border-color); 
}
.skill-title { 
    font-family: 'Finger-Paint', sans-serif; 
    font-size: 1.75rem; color: var(--accent-blue); margin: 0; 
    text-shadow: 2px 2px 0px var(--manga-shadow); 
}
.skill-subtitle { font-size: 0.75rem; font-family: var(--text-mono); color: var(--text-muted); }

.skill-entry-body { display: flex; flex-direction: column; }
@media (min-width: 1280px) { .skill-entry-body { flex-direction: row; } }

.skill-left-col { 
    padding: 1.5rem; border-bottom: 2px solid var(--border-color); 
    display: flex; flex-direction: column; align-items: center; box-sizing: border-box; 
}
@media (min-width: 1280px) { 
    .skill-left-col { width: 33.333333%; border-bottom: none; border-right: 2px solid var(--border-color); } 
}

.skill-right-col { padding: 1.5rem; box-sizing: border-box; }
@media (min-width: 1280px) { .skill-right-col { width: 66.666667%; } }

/* Media Box */
.skill-media-wrapper { 
    width: 100%; aspect-ratio: 16 / 9; background-color: var(--bg-secondary); 
    border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; 
    margin-bottom: 1rem; overflow: hidden; position: relative; box-shadow: 4px 4px 0px var(--manga-shadow); 
}
.skill-media-wrapper-empty { background-color: transparent !important; }
.skill-media-missing { 
    display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; 
    border: 1px dashed var(--border-color); color: hsl(215, 8%, 47%); 
    font-family: var(--text-mono); font-size: 0.875rem; 
}
.skill-media-img { object-fit: cover; width: 100%; height: 100%; }
.skill-media-filename { display: none; }


/* --- 2. STATS TABLE --- */
.skill-stats-box { 
    width: 100%; background-color: var(--bg-secondary); border: 2px solid var(--border-color); 
    padding: 1rem; font-size: 0.875rem; font-family: var(--text-mono); 
    box-sizing: border-box; box-shadow: 3px 3px 0px var(--manga-shadow); 
}
.stat-row { 
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    margin-bottom: 0.5rem; border-bottom: 1px dashed var(--border-color); padding-bottom: 0.25rem;
}
.stat-row:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.stat-row-empty { justify-content: center; color: hsl(215, 8%, 47%); font-style: italic; }

.stat-label { 
    color: var(--text-muted); font-family: 'CC-Wild-Words', sans-serif; 
    font-size: 0.65rem; flex-shrink: 0; margin-top: 0.15rem;
}
.stat-value { color: var(--text-white); font-weight: bold; text-align: right; word-break: break-word; }


/* --- 3. INTERNAL TAB BAR --- */
.skill-tab-bar { display: flex; gap: 1rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.75rem; }
.skill-tab-bar-nested { margin-top: 1rem; padding-bottom: 0.5rem; }
.skill-tab-btn { 
    font-family: 'Finger-Paint', sans-serif;
    font-size: 0.85rem; color: var(--text-muted); 
    background: var(--bg-secondary); border: 2px solid var(--border-color); padding: 0.25rem 0.75rem; 
    cursor: pointer; transform: skewX(-10deg); transition: all 0.1s; box-shadow: 2px 2px 0px var(--manga-shadow); 
}
.skill-tab-btn:hover { 
    border-color: var(--accent-blue); color: var(--text-white); 
    transform: skewX(-10deg) translate(-1px, -1px); box-shadow: 3px 3px 0px var(--accent-blue); 
}
.skill-tab-btn.active { 
    background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); box-shadow: 3px 3px 0px var(--manga-shadow); 
}


/* --- 4. FRAME VISUALIZER BARS --- */
.view-section { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.bar-header-info { 
    display: flex; justify-content: space-between; font-size: 0.75rem; 
    font-family: var(--text-mono); color: var(--text-muted); padding: 0 0.25rem; 
    margin-bottom: 0.5rem; font-weight: bold;
}
.bar-group-target { margin-top: 0; }
.bar-header-target { margin-top: 0.25rem; }

.frame-bar-container { 
    display: flex; width: 100%; height: 2.5rem; background-color: var(--bg-main); 
    border: 2px solid #000; border-radius: 0; overflow: hidden; 
    box-shadow: 3px 3px 0px var(--manga-shadow); 
}
.phase-section { display: flex; height: 100%; cursor: pointer; transition: opacity 0.2s; }
.phase-section:hover { opacity: 0.8; }
.frame-tick { flex-grow: 1; height: 100%; border-right: 1px solid #000000; }

.hit-user-bar-style { border-bottom: none; }
.hit-target-bar-style { border-top: none; border-style: dashed; border-color: var(--border-color); }
.empty-frame-data-msg { margin-top: 0; border: 1px dashed var(--border-color); background-color: transparent; padding: 2rem; }


/* --- 5. OVERLAYS, RULERS & MARKERS --- */
.frame-ruler {
    position: relative; height: 1.5rem; margin-top: 0.25rem; margin-bottom: 1rem;
    border-top: 1px solid var(--border-color); width: 100%;
}
.ruler-tick { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.ruler-notch { width: 1px; height: 6px; background-color: var(--text-muted); margin-bottom: 2px; }
.ruler-label { font-size: 0.7rem; color: var(--text-muted); font-family: var(--text-mono); }

.cancel-marker {
    position: absolute; top: -5px; bottom: -5px; width: 2px;
    background-color: var(--accent-blue); box-shadow: 0 0 5px var(--accent-blue), 0 0 10px var(--accent-blue);
    z-index: 10; cursor: help; animation: cancelGlow 2s infinite ease-in-out;
}
@keyframes cancelGlow { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } }

.overlay-armor {
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.2) 20px) !important;
}
.overlay-iframe {
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 2px, transparent 2px, transparent 8px) !important;
}


/* --- 6. COMBO STRINGS --- */
.combo-node {
    display: inline-flex; align-items: center; justify-content: center;
    background: #0a0a0a; border: 2px solid #444; border-bottom: 4px solid #333; 
    color: var(--text-white); padding: 0.35rem 0.8rem; font-family: 'CC-Wild-Words', sans-serif;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;
    border-radius: 4px; text-shadow: 1px 1px 0px #000; transition: all 0.1s; cursor: default;
}
.combo-node:hover {
    border-color: var(--accent-blue); border-bottom-color: var(--accent-blue); color: var(--accent-blue);
    transform: translateY(2px); border-bottom-width: 2px;
}
.combo-arrow { color: var(--text-muted); stroke-width: 3px; opacity: 0.5; }
.combo-note {
    background: rgba(255,255,255,0.05); border: 1px dashed #444; color: #aaa;
    font-family: var(--text-mono); font-size: 0.75rem; padding: 0.25rem 0.5rem;
}
.combo-damage { color: hsl(3, 93%, 63%); font-family: var(--text-mono); font-weight: bold; font-size: 1.1rem; text-shadow: 2px 2px 0px #000; }


/* --- 7. STRATEGY BLOCKS & LEGENDS --- */
.skill-strategy-section { background-color: var(--bg-secondary); padding: 1.5rem; border-top: 2px solid var(--border-color); }
.strategy-title { 
    font-family: 'Finger-Paint', sans-serif;
    font-size: 1rem; color: var(--accent-blue); 
    margin-bottom: 1rem; padding-bottom: 0.5rem; margin-top: 0; text-shadow: 1px 1px 0px #000; 
    display: inline-block; border-bottom: 2px solid var(--accent-blue);
}
.strategy-content { display: flex; flex-direction: column; gap: 1rem; color: var(--text-primary); line-height: 1.625; font-size: 0.875rem; }
.strategy-content p { margin: 0; }
.strategy-content ul { list-style-type: square; padding-left: 1.25rem; margin: 0; color: var(--accent-blue); }
.strategy-content ul span { color: var(--text-primary); }
.strategy-content li { margin-bottom: 0.5rem; }

.legend-section { padding: 1.25rem; margin-bottom: 2rem; }
.legend-title { font-family: 'CC-Wild-Words', sans-serif; font-size: 0.875rem; color: var(--accent-blue); margin-bottom: 0.75rem; margin-top: 0; text-shadow: 1px 1px 0 #000; }
.legend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; font-size: 0.75rem; font-family: var(--text-mono); }
@media (min-width: 640px) { .legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .legend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .legend-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.legend-item { display: flex; align-items: flex-start; gap: 0.5rem; }
.legend-swatch { width: 1rem; height: 1rem; border-radius: 0; border: 1px solid var(--text-white); flex-shrink: 0; margin-top: 0.125rem; box-shadow: 2px 2px 0 #000;}
.legend-name { color: var(--text-white); display: block; font-weight: bold; }
.legend-inline-item { display: flex; align-items: center; gap: 0.25rem; }
.legend-inline-item .dot { width: 0.75rem; height: 0.75rem; border-radius: 0; border: 1px solid #000; display: inline-block; flex-shrink: 0; }
.dot-hollow { width: 0.75rem; height: 0.75rem; border-radius: 0; background: transparent; display: inline-block; flex-shrink: 0; }