/* ==========================================================
   PANEL
   Arcade UI Kit — flat poster panel style
========================================================== */

.panel{

    --panel-bg:#FFFFFF;
    --panel-accent:var(--ink);

    --panel-padding:24px;

    width:100%;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:var(--panel-bg);

    border:2px solid var(--ink);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}


/* ==========================================================
   ACCENT
========================================================== */

.panel__accent{

    width:100%;
    height:8px;

    flex-shrink:0;

    background-color:var(--panel-accent);

    background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.5px);

    background-size: 6px 6px;

}


/* ==========================================================
   HEADER
========================================================== */

.panel__header{

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding:var(--panel-padding);

}

.panel__header-left{

    display:flex;

    align-items:flex-start;

    gap:16px;

    min-width:0;

    flex:1;

}


/* ==========================================================
   ICON
========================================================== */

.panel__icon{

    width:46px;
    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:var(--radius-sm);

    background:var(--panel-accent);

    border:2px solid var(--ink);

}

.panel__icon .icon{

    width:22px;
    height:22px;

    display:block;

    flex-shrink:0;

    object-fit:contain;

    filter:brightness(0) invert(1);

}


/* ==========================================================
   HEADER CONTENT
========================================================== */

.panel__title-group{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.panel__title{

    margin:0;

    color:var(--ink);

    font-size:var(--font-size-xl);

    font-weight:700;

    text-transform:uppercase;

    line-height:1.2;

}

.panel__subtitle{

    margin:0;

    color:var(--text-muted);

    font-size:var(--font-size-sm);

    line-height:1.45;

}


/* ==========================================================
   HEADER RIGHT
========================================================== */

.panel__header-right{

    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:8px;

    flex-shrink:0;

}


/* ==========================================================
   DIVIDER
========================================================== */

.panel__divider{

    width:100%;
    height:2px;

    flex-shrink:0;

    background:var(--border);

}


/* ==========================================================
   BODY
========================================================== */

.panel__body{

    display:flex;

    flex-direction:column;

    gap:16px;

    padding:var(--panel-padding);

}

.panel__body > :first-child{ margin-top:0; }
.panel__body > :last-child{ margin-bottom:0; }


/* ==========================================================
   FOOTER
========================================================== */

.panel__footer{

    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:12px;

    padding:20px 24px;

    border-top:2px solid var(--border);

}

.panel__footer--left{ justify-content:flex-start; }
.panel__footer--center{ justify-content:center; }
.panel__footer--between{ justify-content:space-between; }


/* ==========================================================
   ICON SIZES
========================================================== */

.panel__icon--sm{ width:32px; height:32px; }
.panel__icon--sm .icon{ width:16px; height:16px; }

.panel__icon--lg{ width:56px; height:56px; }
.panel__icon--lg .icon{ width:30px; height:30px; }


/* ==========================================================
   ROW
   A single line item inside .panel__body — used for settings
   toggles, leaderboard entries, or any other list-style content.
   Rows stack with a hairline divider between them; the last row
   in a group needs no extra markup, the divider is added by the
   sibling combinator below.
========================================================== */

.panel__row{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:10px 0;

}

.panel__row + .panel__row{

    border-top:2px solid var(--border);

}

.panel__row--highlight{

    background:var(--surface-soft);

    border-radius:var(--radius-sm);

    padding:10px 8px;

    margin:0 -8px;

}

.panel__row--highlight + .panel__row,
.panel__row + .panel__row--highlight{ border-top:none; }


/* ==========================================================
   SIZE
========================================================== */

.panel--sm{ max-width:320px; }
.panel--md{ max-width:440px; }
.panel--lg{ max-width:560px; }
.panel--xl{ max-width:720px; }
.panel--fluid{ width:100%; max-width:none; }


/* ==========================================================
   VARIANTS
========================================================== */

.panel--default{ --panel-accent:var(--ink); }
.panel--primary{ --panel-accent:var(--primary); }
.panel--secondary{ --panel-accent:var(--secondary); }
.panel--success{ --panel-accent:var(--success); }
.panel--warning{ --panel-accent:var(--warning); }
.panel--danger{ --panel-accent:var(--danger); }


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:480px){

    .panel__header{ padding:var(--space-5); }
    .panel__body{ padding:var(--space-5); }
    .panel__footer{ padding:16px 20px; }

    .panel__icon{ width:40px; height:40px; }
    .panel__icon .icon{ width:20px; height:20px; }

    .panel__title{ font-size:var(--font-size-lg); }
    .panel__subtitle{ font-size:13px; }

}