/* ==========================================================================
   Tetris Widget - Layout
   ========================================================================== */

.tetris-widget {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    width: 100%;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.tetris-grid {
    width: 426px;
    max-width: 100%;
    height: 642px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-gap: 6px;
    overflow: hidden;
    background: #020024;
    flex-shrink: 0;
}

.tetris-box {
    width: 100%;
    height: 100%;
    background: #020024;
    position: relative;
}

/* Block Positions */
.block-1  { grid-column: 1; grid-row: 1; }
.block-2  { grid-column: 2; grid-row: 1; }
.block-3  { grid-column: 3; grid-row: 1; }
.block-4  { grid-column: 4; grid-row: 1; }
.block-5  { grid-column: 5; grid-row: 1; }
.block-6  { grid-column: 6; grid-row: 1; }
.block-7  { grid-column: 1; grid-row: 2; }
.block-8  { grid-column: 2; grid-row: 2; }
.block-9  { grid-column: 3; grid-row: 2; }
.block-10 { grid-column: 4; grid-row: 2; }
.block-11 { grid-column: 5; grid-row: 2; }
.block-12 { grid-column: 6; grid-row: 2; }
.block-13 { grid-column: 1; grid-row: 3; }
.block-14 { grid-column: 2; grid-row: 3; }
.block-15 { grid-column: 3; grid-row: 3; }
.block-16 { grid-column: 4; grid-row: 3; }
.block-17 { grid-column: 5; grid-row: 3; }
.block-18 { grid-column: 6; grid-row: 3; }
.block-19 { grid-column: 1; grid-row: 4; }
.block-20 { grid-column: 2; grid-row: 4; }
.block-21 { grid-column: 3; grid-row: 4; }
.block-22 { grid-column: 4; grid-row: 4; }
.block-23 { grid-column: 5; grid-row: 4; }
.block-24 { grid-column: 6; grid-row: 4; }
.block-25 { grid-column: 1; grid-row: 5; }
.block-26 { grid-column: 2; grid-row: 5; }
.block-27 { grid-column: 3; grid-row: 5; }
.block-28 { grid-column: 4; grid-row: 5; }
.block-29 { grid-column: 5; grid-row: 5; }
.block-30 { grid-column: 6; grid-row: 5; }
.block-31 { grid-column: 1; grid-row: 6; }
.block-32 { grid-column: 2; grid-row: 6; }
.block-33 { grid-column: 3; grid-row: 6; }
.block-34 { grid-column: 4; grid-row: 6; }
.block-35 { grid-column: 5; grid-row: 6; }
.block-36 { grid-column: 6; grid-row: 6; }
.block-37 { grid-column: 1; grid-row: 7; }
.block-38 { grid-column: 2; grid-row: 7; }
.block-39 { grid-column: 3; grid-row: 7; }
.block-40 { grid-column: 4; grid-row: 7; }
.block-41 { grid-column: 5; grid-row: 7; }
.block-42 { grid-column: 6; grid-row: 7; }
.block-43 { grid-column: 1; grid-row: 8; }
.block-44 { grid-column: 2; grid-row: 8; }
.block-45 { grid-column: 3; grid-row: 8; }
.block-46 { grid-column: 4; grid-row: 8; }
.block-47 { grid-column: 5; grid-row: 8; }
.block-48 { grid-column: 6; grid-row: 8; }
.block-49 { grid-column: 1; grid-row: 9; }
.block-50 { grid-column: 2; grid-row: 9; }
.block-51 { grid-column: 3; grid-row: 9; }
.block-52 { grid-column: 4; grid-row: 9; }
.block-53 { grid-column: 5; grid-row: 9; }
.block-54 { grid-column: 6; grid-row: 9; }

/* ==========================================================================
   Color Groups
   ========================================================================== */

.tetris-border {
    background-color: #6868DC;
    background-image: var(--svg-border);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 2;
}

.tetris-empty {
    background-color: #020024;
}

.tetris-green {
    background-color: var(--color-green, #57EEB5);
    background-image: var(--svg-green);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}

.tetris-yellow {
    background-color: var(--color-yellow, #7A7551);
    background-image: var(--svg-yellow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.tetris-navy {
    background-color: var(--color-navy, #296695);
    background-image: var(--svg-navy);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.tetris-pink {
    background-color: var(--color-pink, #925968);
    background-image: var(--svg-pink);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.tetris-purple {
    background-color: var(--color-purple, #5D3DA1);
    background-image: var(--svg-purple);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Active / Inactive States */
.tetris-green,
.tetris-yellow,
.tetris-navy,
.tetris-pink,
.tetris-purple {
    border-radius: 4.5px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.tetris-green.active,
.tetris-yellow.active,
.tetris-navy.active,
.tetris-pink.active,
.tetris-purple.active {
    opacity: 1;
}

/* ==========================================================================
   Drop Animation
   ========================================================================== */

.tetris-green.first-load {
    grid-row: 2 !important;
}

.tetris-green.green-4.first-load {
    grid-row: 3 !important;
}

.tetris-grid.animated .tetris-green.green-1,
.tetris-grid.animated .tetris-green.green-2,
.tetris-grid.animated .tetris-green.green-3 {
    animation: tetris-drop 3s forwards;
}

.tetris-grid.animated .tetris-green.green-4 {
    animation: tetris-drop-2 3s forwards;
}

@keyframes tetris-drop {
    30%  { grid-row: 2; }
    65%  { grid-row: 3; }
    100% { grid-row: 4; }
}

@keyframes tetris-drop-2 {
    30%  { grid-row: 3; }
    65%  { grid-row: 4; }
    100% { grid-row: 5; }
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tetris-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tetris-tab {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.tetris-tab__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    background: #1a1a4e;
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
}

.tetris-tab__title {
    font-weight: 700;
    font-size: 18px;
}

.tetris-tab__icon {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    display: block;
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
    filter: brightness(0) invert(1);
}

.tetris-tab__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease, padding 0.3s ease;
    padding: 0 24px;
    background: #ffffff;
}

.tetris-tab__body-inner {
    overflow: hidden;
}

/* Phase 1: Header color + chevron (immediate via --active) */
.tetris-tab--active .tetris-tab__header {
    background: #ffffff;
    color: #020024;
    padding: 24px 24px 16px;
}

.tetris-tab--active .tetris-tab__icon {
    transform: rotate(0deg);
    filter: none;
}

/* Phase 2: Body expand (delayed via --open) */
.tetris-tab--open .tetris-tab__body {
    grid-template-rows: 1fr;
    padding: 0 24px 24px 59px;
}

.tetris-tab__subtitle {
    color: #57EEB5;
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 8px;
}

.tetris-tab__description {
    color: #333333;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Keyboard Focus */
.tetris-tab__header:focus {
    outline: 2px solid #57EEB5;
    outline-offset: -2px;
}

.tetris-tab__header:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tetris-green,
    .tetris-yellow,
    .tetris-navy,
    .tetris-pink,
    .tetris-purple {
        transition: none;
    }

    .tetris-grid.animated .tetris-green.green-1,
    .tetris-grid.animated .tetris-green.green-2,
    .tetris-grid.animated .tetris-green.green-3,
    .tetris-grid.animated .tetris-green.green-4 {
        animation: none;
    }

    .tetris-tab__body {
        transition: none;
    }

    .tetris-tab__body-inner {
        transition: none;
    }

    .tetris-tab__icon {
        transition: none;
    }

    .tetris-tab__header {
        transition: none;
    }
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .tetris-widget {
        gap: 32px;
    }

    .tetris-grid {
        width: 300px;
        height: 450px;
        grid-gap: 4px;
    }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media screen and (max-width: 767px) {
    .tetris-widget {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .tetris-grid {
        display: none;
    }

    .tetris-tabs {
        width: 100%;
    }

    .tetris-tab__header {
        padding: 16px 20px;
    }

    .tetris-tab--active .tetris-tab__header {
        padding: 20px 20px 12px;
    }

    .tetris-tab--open .tetris-tab__body {
        padding: 0 20px 20px 55px;
    }

    .tetris-tab__title {
        font-size: 16px;
    }
}