/* ============================================================
   Eid Algorithm Visualizer — Stylesheet
   Author : Omar
   ============================================================ */

/* ── CSS Variables ── */
:root
{
    --Color-BG        : #0f0a05;
    --Color-Surface   : #1a1108;
    --Color-Surface2  : #241a0e;
    --Color-Gold      : #f5c842;
    --Color-Gold2     : #e8a020;
    --Color-Cream     : #f5e6c8;
    --Color-Brown     : #8b5e3c;
    --Color-Brown2    : #6b4226;
    --Color-Green     : #4caf78;
    --Color-Red       : #e05a4e;
    --Color-Blue      : #5ab4e0;
    --Color-Text      : #f0ddb0;
    --Color-Muted     : #8a7355;
    --Color-Border    : #3a2a18;

    --Font-Arabic     : 'Tajawal', sans-serif;
    --Font-Mono       : 'Fira Code', monospace;

    --Radius-Card     : 16px;
    --Radius-Btn      : 10px;
    --Radius-Pill     : 50px;

    --Shadow-Glow     : 0 0 20px rgba(245, 200, 66, 0.35);
    --Shadow-Card     : 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ── Reset ── */
*
{
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
}

/* ── Base ── */
body
{
    font-family : var(--Font-Arabic);
    background  : var(--Color-BG);
    color       : var(--Color-Text);
    min-height  : 100vh;
    overflow-x  : hidden;
}

/* ── Stars Canvas ── */
#StarsCanvas
{
    position       : fixed;
    inset          : 0;
    z-index        : 0;
    pointer-events : none;
}

/* ════════════════════════════════════
   HEADER
════════════════════════════════════ */
header
{
    position    : relative;
    z-index     : 10;
    text-align  : center;
    padding     : 48px 20px 32px;
    border-bottom : 1px solid var(--Color-Border);
    background  : linear-gradient(180deg, #1a0f00 0%, transparent 100%);
}

.Crescent
{
    font-size  : 52px;
    display    : block;
    margin-bottom : 8px;
    animation  : Anim-Sway 4s ease-in-out infinite;
}

header h1
{
    font-size   : clamp(1.8rem, 5vw, 3rem);
    font-weight : 900;
    color       : var(--Color-Gold);
    text-shadow : 0 0 30px rgba(245, 200, 66, 0.4);
    letter-spacing : -0.02em;
}

header p
{
    font-family : var(--Font-Mono);
    color       : var(--Color-Muted);
    font-size   : 0.85rem;
    margin-top  : 6px;
}

/* ════════════════════════════════════
   TABS
════════════════════════════════════ */
.TabsRow
{
    position        : relative;
    z-index         : 10;
    display         : flex;
    justify-content : center;
    gap             : 12px;
    padding         : 24px 20px;
    flex-wrap       : wrap;
}

.TabBtn
{
    font-family   : var(--Font-Arabic);
    font-size     : 1rem;
    font-weight   : 700;
    padding       : 10px 24px;
    border-radius : var(--Radius-Pill);
    border        : 2px solid var(--Color-Border);
    background    : var(--Color-Surface);
    color         : var(--Color-Muted);
    cursor        : pointer;
    transition    : all 0.25s;
}

.TabBtn:hover
{
    border-color : var(--Color-Gold2);
    color        : var(--Color-Gold2);
}

.TabBtn.Active
{
    background   : var(--Color-Gold);
    color        : var(--Color-BG);
    border-color : var(--Color-Gold);
    box-shadow   : var(--Shadow-Glow);
}

/* ════════════════════════════════════
   MAIN / PANELS
════════════════════════════════════ */
main
{
    position   : relative;
    z-index    : 10;
    max-width  : 860px;
    margin     : 0 auto;
    padding    : 0 20px 80px;
}

.Panel        { display : none; }
.Panel.Active { display : block; }

/* ── Section Title ── */
.SectionTitle
{
    text-align    : center;
    margin-bottom : 28px;
}

.SectionTitle h2
{
    font-size   : 1.6rem;
    font-weight : 900;
    color       : var(--Color-Gold);
}

.SectionTitle p
{
    color      : var(--Color-Muted);
    font-size  : 0.9rem;
    margin-top : 4px;
}

/* ── Log Box ── */
.LogBox
{
    background    : var(--Color-Surface);
    border        : 1px solid var(--Color-Border);
    border-radius : var(--Radius-Card);
    padding       : 14px 18px;
    font-family   : var(--Font-Mono);
    font-size     : 0.82rem;
    color         : var(--Color-Gold2);
    min-height    : 44px;
    margin-bottom : 24px;
    text-align    : center;
    transition    : all 0.3s;
}

/* ── Controls Row ── */
.ControlsRow
{
    display         : flex;
    gap             : 10px;
    justify-content : center;
    flex-wrap       : wrap;
    margin-bottom   : 28px;
}

/* ── Base Button ── */
.Btn
{
    font-family   : var(--Font-Arabic);
    font-size     : 0.95rem;
    font-weight   : 700;
    padding       : 10px 22px;
    border-radius : var(--Radius-Btn);
    border        : none;
    cursor        : pointer;
    transition    : all 0.2s;
    display       : flex;
    align-items   : center;
    gap           : 6px;
}

.Btn:hover
{
    filter     : brightness(1.15);
    transform  : translateY(-2px);
    box-shadow : 0 6px 20px rgba(0, 0, 0, 0.4);
}

.Btn:active   { transform : translateY(0); }
.Btn:disabled { opacity : 0.4; cursor : not-allowed; transform : none; }

/* ── Button Colors ── */
.BtnPush    { background : var(--Color-Green);   color : #fff; }
.BtnPop     { background : var(--Color-Red);     color : #fff; }
.BtnPeek    { background : var(--Color-Gold);    color : var(--Color-BG); }
.BtnEnqueue { background : var(--Color-Green);   color : #fff; }
.BtnDequeue { background : var(--Color-Red);     color : #fff; }
.BtnSort    { background : var(--Color-Blue);    color : #fff; }
.BtnShuffle { background : var(--Color-Gold2);   color : #fff; }
.BtnReset   { background : var(--Color-Surface2); color : var(--Color-Muted); border : 1px solid var(--Color-Border); }

/* ════════════════════════════════════
   STACK
════════════════════════════════════ */
.SizeLabel
{
    font-family   : var(--Font-Mono);
    font-size     : 0.75rem;
    color         : var(--Color-Muted);
    margin-bottom : 4px;
    text-align    : center;
}

.StackWrapper
{
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 0;
    min-height      : 320px;
    justify-content : flex-end;
    padding-bottom  : 10px;
}

.StackBase
{
    width         : 180px;
    height        : 16px;
    background    : var(--Color-Brown2);
    border-radius : 4px 4px 0 0;
    box-shadow    : var(--Shadow-Card);
}

.StackItem
{
    width         : 160px;
    height        : 52px;
    background    : linear-gradient(135deg, #d4a55a, #b8843a);
    border-radius : 10px;
    display       : flex;
    align-items   : center;
    justify-content : center;
    font-size     : 1.6rem;
    border        : 2px solid #e8c070;
    box-shadow    : 0 -4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation     : Anim-StackIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position      : relative;
    cursor        : default;
}

.StackItem.IsTop::after
{
    content      : '← TOP';
    position     : absolute;
    right        : -60px;
    font-family  : var(--Font-Mono);
    font-size    : 0.7rem;
    color        : var(--Color-Gold);
}

.StackItem.IsPeeked
{
    box-shadow : 0 0 0 3px var(--Color-Gold), 0 0 20px rgba(245, 200, 66, 0.6);
}

/* ════════════════════════════════════
   QUEUE
════════════════════════════════════ */
.QueueTrack
{
    display       : flex;
    align-items   : center;
    gap           : 6px;
    min-height    : 100px;
    padding       : 20px;
    background    : var(--Color-Surface);
    border        : 1px solid var(--Color-Border);
    border-radius : var(--Radius-Card);
    overflow-x    : auto;
    margin-bottom : 16px;
}

.QueueArrow
{
    font-size   : 1.4rem;
    color       : var(--Color-Gold2);
    opacity     : 0.6;
    flex-shrink : 0;
}

.QueueItem
{
    width         : 64px;
    height        : 64px;
    background    : linear-gradient(135deg, #d4a55a, #b8843a);
    border-radius : 12px;
    display       : flex;
    align-items   : center;
    justify-content : center;
    font-size     : 1.8rem;
    border        : 2px solid #e8c070;
    box-shadow    : 0 4px 14px rgba(0, 0, 0, 0.35);
    flex-shrink   : 0;
    animation     : Anim-QueueIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position      : relative;
}

.QueueItem.IsFront
{
    border-color : var(--Color-Gold);
    box-shadow   : 0 0 0 2px var(--Color-Gold), 0 0 16px rgba(245, 200, 66, 0.5);
}

.QueueItem .ItemTag
{
    position    : absolute;
    bottom      : -18px;
    font-family : var(--Font-Mono);
    font-size   : 0.6rem;
    color       : var(--Color-Gold);
    white-space : nowrap;
}

.QueueEnds
{
    display         : flex;
    justify-content : space-between;
    font-family     : var(--Font-Mono);
    font-size       : 0.75rem;
    color           : var(--Color-Muted);
    padding         : 0 4px;
    margin-top      : 24px;
}

.QueueEmpty
{
    color       : var(--Color-Muted);
    font-family : var(--Font-Mono);
    font-size   : 0.85rem;
    margin      : auto;
    text-align  : center;
}

/* ════════════════════════════════════
   SORTING
════════════════════════════════════ */
.AlgoSelect
{
    font-family   : var(--Font-Arabic);
    font-size     : 0.95rem;
    font-weight   : 700;
    padding       : 8px 16px;
    border-radius : var(--Radius-Btn);
    border        : 1px solid var(--Color-Border);
    background    : var(--Color-Surface2);
    color         : var(--Color-Text);
    cursor        : pointer;
}

.SortArena
{
    background    : var(--Color-Surface);
    border        : 1px solid var(--Color-Border);
    border-radius : var(--Radius-Card);
    padding       : 24px 16px 16px;
    margin-bottom : 20px;
}

.BarsContainer
{
    display         : flex;
    align-items     : flex-end;
    justify-content : center;
    gap             : 6px;
    height          : 220px;
}

.BarWrap
{
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 4px;
    transition     : all 0.2s;
}

.Bar
{
    width         : 38px;
    border-radius : 6px 6px 2px 2px;
    background    : linear-gradient(180deg, #d4a55a 0%, #8b5e3c 100%);
    border        : 1px solid #e8c070;
    transition    : height 0.3s ease, background 0.3s;
    display       : flex;
    align-items   : flex-start;
    justify-content : center;
    padding-top   : 4px;
    font-size     : 1.1rem;
}

.Bar.IsComparing { background : linear-gradient(180deg, var(--Color-Blue) 0%, #2a7ab0 100%); border-color : var(--Color-Blue); }
.Bar.IsSwapping  { background : linear-gradient(180deg, var(--Color-Red)  0%, #a03428 100%); border-color : var(--Color-Red);  }
.Bar.IsSorted    { background : linear-gradient(180deg, var(--Color-Green) 0%, #2a7a48 100%); border-color : var(--Color-Green); }

.BarValue
{
    font-family : var(--Font-Mono);
    font-size   : 0.65rem;
    color       : var(--Color-Muted);
}

.SortLegend
{
    display         : flex;
    justify-content : center;
    gap             : 20px;
    margin-top      : 14px;
    flex-wrap       : wrap;
}

.LegendItem
{
    display     : flex;
    align-items : center;
    gap         : 6px;
    font-family : var(--Font-Mono);
    font-size   : 0.72rem;
    color       : var(--Color-Muted);
}

.LegendDot
{
    width         : 12px;
    height        : 12px;
    border-radius : 3px;
}

.LegendDot.Normal    { background : #d4a55a; }
.LegendDot.Comparing { background : var(--Color-Blue);  }
.LegendDot.Swapping  { background : var(--Color-Red);   }
.LegendDot.Sorted    { background : var(--Color-Green); }

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
footer
{
    position    : relative;
    z-index     : 10;
    text-align  : center;
    padding     : 24px;
    font-family : var(--Font-Mono);
    font-size   : 0.75rem;
    color       : var(--Color-Muted);
    border-top  : 1px solid var(--Color-Border);
}

footer .AuthorName { color : var(--Color-Gold); }

/* ════════════════════════════════════
   CONFETTI
════════════════════════════════════ */
.ConfettiPiece
{
    position       : fixed;
    width          : 10px;
    height         : 10px;
    border-radius  : 2px;
    pointer-events : none;
    z-index        : 9999;
    animation      : Anim-ConfettiFall 1.2s ease-in forwards;
}

/* ════════════════════════════════════
   ANIMATIONS
════════════════════════════════════ */
@keyframes Anim-Sway
{
    0%, 100% { transform : rotate(-8deg); }
    50%      { transform : rotate(8deg);  }
}

@keyframes Anim-StackIn
{
    from { opacity : 0; transform : translateY(-30px) scale(0.8); }
    to   { opacity : 1; transform : translateY(0) scale(1); }
}

@keyframes Anim-QueueIn
{
    from { opacity : 0; transform : scale(0.5); }
    to   { opacity : 1; transform : scale(1); }
}

@keyframes Anim-ConfettiFall
{
    0%   { transform : translateY(0) rotate(0deg) scale(1); opacity : 1; }
    100% { transform : translateY(300px) rotate(720deg) scale(0.3); opacity : 0; }
}