/* =============================================================================
   SAOIF Skill Detail Page – Responsive Stylesheet
   detail.css
   Copyright (C) 2020 MINEVERSAL
   ============================================================================= */

/* ── Box-sizing reset ─────────────────────────────────────────────────────── */
.skill-card,
.skill-card * {
    box-sizing: border-box;
}

/* ── Base card wrapper ────────────────────────────────────────────────────── */
.skill-card {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    border: 2px solid #515151;
    border-radius: 4px;
    overflow: hidden;
    font-size: 14px;
    /* line-height: 1.5; */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Card title (top header row) */
.card-title {
    background: #515151;
    color: #fff;
    text-align: center;
    padding: 9px 14px;
    font-size: 15px;
    font-weight: bold;
    word-break: break-word;
}

/* ============================================================================
   BURST / FULL-BURST CARD
   Desktop: [Normal panel] | [Image] | [Burst panel]  (side-by-side flex)
   Mobile:  [Image] → [Normal panel] → [Burst panel]  (stacked flex)
   ============================================================================ */

.burst-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}

.burst-effect-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}

.mobile-panel { display: none; }
.desktop-panel { display: block; }

/* ── Normal panel (left on desktop) ──────────────────────────────────────── */
.burst-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

/* Normal panel (lebih kecil) */
.burst-panel.normal-panel {
    order: 1;
    flex: 1;
}
/* Burst panel (lebih besar) */
.burst-panel.burst-mode-panel {
    order: 3;
    flex: 1;
}

/* ── Centre image column ──────────────────────────────────────────────────── */
.burst-image-col {
    order: 2;
    flex: 0 0 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    /* padding: 10px 6px; */
    border-left: 1px solid rgba(0,0,0,0.12);
    border-right: 1px solid rgba(0,0,0,0.12);
}

.burst-image-col img {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
}

/* ── Panel sub-elements ───────────────────────────────────────────────────── */
.panel-header {
    text-align: center;
    padding: 7px 10px;
    font-weight: bold;
    font-size: 13px;
    word-break: break-word;
}

/* Inner tables inside burst panels */
.burst-panel table {
    flex: 1;          /* expands to fill remaining height inside flex-column panel */
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.burst-panel table td {
    padding: 5px 8px;
    font-size: 13px;
    vertical-align: middle;
    word-break: break-word;
    overflow-wrap: break-word;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* Two-column label/value split inside panels */
.burst-panel table td:first-child {
    width: 45%;
}

/* Effect label bar (inside panel, bottom) */
.panel-effect-bar {
    text-align: center;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 13px;
    word-break: break-word;
    margin-top: auto;    /* pushes effect bar to bottom of panel on desktop */
}

/* Effect content (inside panel) */
.panel-effect-content {
    padding: 8px 10px;
    font-size: 13px;
    word-break: break-word;
    flex: 1;
}

/* Full-width bar spanning whole card (e.g. Full Burst skill_type row) */
.full-width-bar {
    text-align: center;
    padding: 7px 12px;
    font-weight: bold;
    font-size: 13px;
    word-break: break-word;
    width: 100%;
}

/* ============================================================================
   SIMPLE CARD (Link, Chain, Accele, Connect, MOD, Awakening, Recollection…)
   Desktop: [Image col] | [Data col]  (side-by-side flex)
   Mobile:  [Image] → [Data col]      (stacked flex)
   ============================================================================ */

.simple-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;   /* image col fills full height of data col */
    width: 100%;
}

/* Image column */
.simple-image-col {
    flex: 0 0 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 12px 8px;
    border-right: 1px solid rgba(0,0,0,0.12);
}

.simple-image-col img {
    width: 100%;
    max-width: 210px;
    height: auto;
    display: block;
}

/* Data column */
.simple-data-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.simple-data-col table {
    flex: 1;          /* table expands to fill remaining height */
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.simple-data-col table td {
    padding: 6px 9px;
    font-size: 13px;
    vertical-align: middle;
    word-break: break-word;
    overflow-wrap: break-word;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* Two-column split inside data table */
.simple-data-col table td:first-child {
    width: 48%;
}

/* Full-width effect bars (appear below the simple-body) */
.full-effect-bar {
    text-align: center;
    padding: 7px 12px;
    font-weight: bold;
    font-size: 13px;
    word-break: break-word;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.full-effect-content {
    padding: 9px 13px;
    font-size: 13px;
    word-break: break-word;
}

/* ============================================================================
   ABILITY CARD (shares simple-card styles)
   Ability cards have: Skill Name, Attack, Defense, HP (no Weapon / SP / etc.)
   ============================================================================ */

/* Nothing extra needed — reuses simple-card classes */

/* ============================================================================
   MOBILE RESPONSIVE  ≤ 640px
   ============================================================================ */
@media (max-width: 640px) {
    .skill-card { font-size: 13px; }

    /* Burst / Full-Burst: stack into a column */
    .burst-body { flex-direction: column; }

    .mobile-panel { display: block; }
    .desktop-panel { display: none; }

    .burst-image-col {
        order: 1;            /* image floats to top */
        flex: none;
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.12);
        padding: 12px 20px;
    }

    .burst-image-col img { max-width: 160px; }

    .burst-panel.normal-panel     { order: 2; flex: none; width: 100%; }
    .burst-panel.burst-mode-panel { order: 3; flex: none; width: 100%; }

    /* Add a visible divider between burst panels on mobile */
    .burst-panel.burst-mode-panel { border-top: 2px solid rgba(0,0,0,0.15); }

    .burst-panel table td,
    .simple-data-col table td {
        font-size: 12px;
        padding: 5px 7px;
    }

    /* Simple card: stack on mobile */
    .simple-body { flex-direction: column; }

    .simple-image-col {
        width: 100%;
        flex: none;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.12);
        padding: 12px 20px;
    }

    .simple-image-col img { max-width: 150px; }

    .simple-data-col { width: 100%; }

    .card-title     { font-size: 14px; padding: 8px 12px; }
    .panel-header   { font-size: 12px; padding: 6px 8px; }
    .panel-effect-bar,
    .full-effect-bar { font-size: 12px; padding: 6px 8px; }
    .panel-effect-content,
    .full-effect-content { font-size: 12px; padding: 7px 10px; }
}

/* ============================================================================
   VERY SMALL SCREENS  ≤ 380px
   ============================================================================ */
@media (max-width: 380px) {
    .skill-card { font-size: 12px; }

    .mobile-panel { display: block; }
    .desktop-panel { display: none; }

    .burst-panel table td,
    .simple-data-col table td { font-size: 11px; padding: 4px 6px; }

    .burst-image-col img,
    .simple-image-col img { max-width: 120px; }
}