/* ========================================
   GAME BOY CONSOLE COMPONENT STYLES
   ======================================== */

/* Console Container - Far Right Side */
.console-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

.gameboy-body {
    background: linear-gradient(145deg, #a8b5a0 0%, #9ba896 50%, #8b9d83 100%);
    border-radius: 20px;
    padding: 2rem;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    width: 400px;
    /* height: 600px; */
    position: relative;
    margin-left: auto;
    transform: translateX(20px);
    flex-shrink: 0;
}

/* ========================================
   GAME BOY SCREEN
   ======================================== */

.gameboy-screen-container {
    background: #2d3731;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6);
    position: relative;
}

.gameboy-logo {
    position: absolute;
    bottom: 5px;
    right: 15px;
    color: #5a6b5d;
    font-size: 0.7rem;
    font-weight: bold;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.gameboy-screen {
    background: #9bbc0f;
    border-radius: 8px;
    padding: 1rem;
    height: 200px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(255, 255, 255, 0.1);
}

.screen-reflection {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 50%;
    height: 30%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 4px;
    pointer-events: none;
}

/* ========================================
   TETRIS GAME ANIMATION
   ======================================== */

.tetris-game-area {
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.tetris-game-area.game-active {
    opacity: 0.1;
}

.tetris-canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Animated Tetris Pieces */
.tetris-piece {
    position: absolute;
    animation: tetrisFall 6s linear infinite;
    will-change: top, opacity, transform;
    pointer-events: none;
    z-index: 1;
    top: -80px;
    /* Initial position outside visible area */
    transition: opacity 0.3s ease;
}

.tetris-piece.fade-out {
    opacity: 0.1;
}

.piece-block {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #0f380f;
    border: 1px solid #0a2e0a;
    border-radius: 1px;
}

/* T-Piece (T-shape) */
.t-piece {
    left: 15%;
    width: 36px;
    height: 24px;
    animation-delay: 0s;
}

.t-piece .piece-block:nth-child(1) {
    top: 0;
    left: 0;
}

.t-piece .piece-block:nth-child(2) {
    top: 0;
    left: 12px;
}

.t-piece .piece-block:nth-child(3) {
    top: 0;
    left: 24px;
}

.t-piece .piece-block:nth-child(4) {
    top: 12px;
    left: 12px;
}

/* L-Piece (L-shape) */
.l-piece {
    left: 35%;
    width: 24px;
    height: 36px;
    animation-delay: 1.5s;
}

.l-piece .piece-block:nth-child(1) {
    top: 0;
    left: 0;
}

.l-piece .piece-block:nth-child(2) {
    top: 12px;
    left: 0;
}

.l-piece .piece-block:nth-child(3) {
    top: 24px;
    left: 0;
}

.l-piece .piece-block:nth-child(4) {
    top: 24px;
    left: 12px;
}

/* I-Piece (straight line) */
.i-piece {
    left: 55%;
    width: 12px;
    height: 48px;
    animation-delay: 3s;
}

.i-piece .piece-block:nth-child(1) {
    top: 0;
    left: 0;
}

.i-piece .piece-block:nth-child(2) {
    top: 12px;
    left: 0;
}

.i-piece .piece-block:nth-child(3) {
    top: 24px;
    left: 0;
}

.i-piece .piece-block:nth-child(4) {
    top: 36px;
    left: 0;
}

/* S-Piece (S-shape) */
.s-piece {
    left: 70%;
    width: 36px;
    height: 24px;
    animation-delay: 4.5s;
}

.s-piece .piece-block:nth-child(1) {
    top: 12px;
    left: 0;
}

.s-piece .piece-block:nth-child(2) {
    top: 12px;
    left: 12px;
}

.s-piece .piece-block:nth-child(3) {
    top: 0;
    left: 12px;
}

.s-piece .piece-block:nth-child(4) {
    top: 0;
    left: 24px;
}

/* O-Piece (square) */
.o-piece {
    left: 8%;
    width: 24px;
    height: 24px;
    animation-delay: 2.2s;
}

.o-piece .piece-block:nth-child(1) {
    top: 0;
    left: 0;
}

.o-piece .piece-block:nth-child(2) {
    top: 0;
    left: 12px;
}

.o-piece .piece-block:nth-child(3) {
    top: 12px;
    left: 0;
}

.o-piece .piece-block:nth-child(4) {
    top: 12px;
    left: 12px;
}

/* Falling animation */
@keyframes tetrisFall {
    0% {
        top: -80px;
        opacity: 0;
        transform: rotate(0deg);
    }

    10% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        transform: rotate(90deg);
    }

    90% {
        opacity: 0.8;
        transform: rotate(180deg);
    }

    100% {
        top: 240px;
        opacity: 0;
        transform: rotate(180deg);
    }
}

/* Loading text blink animation */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}

/* ========================================
   GAME CONTENT & UI ELEMENTS
   ======================================== */

/* Game Content */
.game-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding-top: 1rem;
}

.game-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #0f380f;
    font-family: 'Courier New', monospace;
    text-shadow: 1px 1px 0 #8bac0f;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.game-subtitle {
    font-size: 0.7rem;
    color: #0f380f;
    font-family: 'Courier New', monospace;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.pixel-line {
    width: 80%;
    height: 2px;
    background: #0f380f;
    margin: 0.5rem auto;
}

.game-text {
    font-size: 0.6rem;
    color: #0f380f;
    font-family: 'Courier New', monospace;
    margin-bottom: 1.0rem;
    letter-spacing: 0.5px;
}

.score-display {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
}

.score-label {
    font-size: 0.5rem;
    color: #0f380f;
    font-family: 'Courier New', monospace;
    margin-bottom: 0.2rem;
}

.score-value {
    font-size: 0.7rem;
    color: #0f380f;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* Game Info Panel - Right Side During Gameplay */
.game-info-panel {
    position: absolute;
    right: 25px;
    top: 10px;
    width: 100px;
    height: 160px;
    z-index: 15;
    font-family: 'Courier New', monospace;
    color: #0f380f;
    display: none;
    background: rgba(155, 188, 15, 0.05);
    border: 2px solid #0f380f;
    border-radius: 4px;
    padding: 0.5rem 0.4rem 0.4rem 0.4rem;
    box-shadow:
        inset 0 1px 0 rgba(155, 188, 15, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.game-info-panel.active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-title {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-align: center;
    text-shadow:
        1px 1px 0 #8bac0f,
        2px 2px 0 rgba(15, 56, 15, 0.3),
        0 0 3px #0f380f;
    padding: 0.2rem 0;
    flex-shrink: 0;
}

.info-score {
    flex-shrink: 0;
}

.info-score-label {
    font-size: 0.55rem;
    margin-bottom: 0.2rem;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.info-score-value {
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    background: rgba(139, 172, 15, 0.25);
    padding: 0.3rem 0.2rem;
    border: 2px solid #0f380f;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(155, 188, 15, 0.4),
        inset 0 -1px 0 rgba(15, 56, 15, 0.2);
    letter-spacing: 0.5px;
}

.next-piece-container {
    text-align: center;
    flex-shrink: 0;
    margin-top: 0.3rem;
}

.next-piece-label {
    font-size: 0.55rem;
    margin-bottom: 0.2rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.next-piece-display {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 10px);
    grid-template-rows: repeat(4, 10px);
    gap: 0;
    padding: 0;
}

.next-piece-block {
    width: 10px;
    height: 10px;
    background: #0f380f;
    border-radius: 0;
    box-shadow:
        inset 0 1px 0 rgba(155, 188, 15, 0.3);
}

.next-piece-preview {
    display: none;
}

/* Bottom Tetris Row */
.tetris-bottom-row {
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    height: 20px;
    display: flex;
}

.bottom-block {
    flex: 1;
    height: 100%;
    background: #0f380f;
    border: 1px solid #0a2e0a;
    margin-right: 1px;
}

.bottom-block.empty {
    background: transparent;
    border: none;
}

.bottom-block:last-child {
    margin-right: 0;
}

/* Multiple bottom rows for more realistic settled blocks */
.tetris-bottom-area {
    position: absolute;
    bottom: -65px;
    left: 0;
    right: 0;
    height: 60px;
}

.tetris-bottom-row.row-1 {
    bottom: 0;
}

.tetris-bottom-row.row-2 {
    bottom: 20px;
}

.tetris-bottom-row.row-3 {
    bottom: 40px;
}

/* Add some visual variety to bottom blocks */
.bottom-block {
    opacity: 0.9;
}

.tetris-bottom-row.row-2 .bottom-block {
    opacity: 0.8;
}

.tetris-bottom-row.row-3 .bottom-block {
    opacity: 0.7;
}

/* Settled Tetris Pieces at Bottom */
.settled-piece {
    position: absolute;
    opacity: 0.8;
}

.settled-block {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0f380f;
    border: 1px solid #0a2e0a;
    border-radius: 1px;
}

/* Settled L-Piece */
.settled-l {
    left: 5px;
    bottom: 0px;
    width: 20px;
    height: 30px;
}

.settled-l .settled-block:nth-child(1) {
    top: 0;
    left: 0;
}

.settled-l .settled-block:nth-child(2) {
    top: 10px;
    left: 0;
}

.settled-l .settled-block:nth-child(3) {
    top: 20px;
    left: 0;
}

.settled-l .settled-block:nth-child(4) {
    top: 20px;
    left: 10px;
}

/* Settled O-Piece */
.settled-o {
    left: 30px;
    bottom: 0px;
    width: 20px;
    height: 20px;
}

.settled-o .settled-block:nth-child(1) {
    top: 0;
    left: 0;
}

.settled-o .settled-block:nth-child(2) {
    top: 0;
    left: 10px;
}

.settled-o .settled-block:nth-child(3) {
    top: 10px;
    left: 0;
}

.settled-o .settled-block:nth-child(4) {
    top: 10px;
    left: 10px;
}

/* Settled T-Piece */
.settled-t {
    left: 55px;
    bottom: 0px;
    width: 30px;
    height: 20px;
}

.settled-t .settled-block:nth-child(1) {
    top: 0;
    left: 0;
}

.settled-t .settled-block:nth-child(2) {
    top: 0;
    left: 10px;
}

.settled-t .settled-block:nth-child(3) {
    top: 0;
    left: 20px;
}

.settled-t .settled-block:nth-child(4) {
    top: 10px;
    left: 10px;
}

/* Settled I-Piece (partial) */
.settled-i {
    left: 90px;
    bottom: 0px;
    width: 10px;
    height: 30px;
}

.settled-i .settled-block:nth-child(1) {
    top: 0;
    left: 0;
}

.settled-i .settled-block:nth-child(2) {
    top: 10px;
    left: 0;
}

.settled-i .settled-block:nth-child(3) {
    top: 20px;
    left: 0;
}

/* Settled S-Piece */
.settled-s {
    left: 105px;
    bottom: 10px;
    width: 30px;
    height: 20px;
}

.settled-s .settled-block:nth-child(1) {
    top: 10px;
    left: 0;
}

.settled-s .settled-block:nth-child(2) {
    top: 10px;
    left: 10px;
}

.settled-s .settled-block:nth-child(3) {
    top: 0;
    left: 10px;
}

.settled-s .settled-block:nth-child(4) {
    top: 0;
    left: 20px;
}

/* Settled J-Piece */
.settled-j {
    left: 8px;
    bottom: 35px;
    width: 30px;
    height: 20px;
}

.settled-j .settled-block:nth-child(1) {
    top: 0;
    left: 0;
}

.settled-j .settled-block:nth-child(2) {
    top: 10px;
    left: 0;
}

.settled-j .settled-block:nth-child(3) {
    top: 10px;
    left: 10px;
}

.settled-j .settled-block:nth-child(4) {
    top: 10px;
    left: 20px;
}

/* Add some visual variety */
.settled-piece:nth-child(even) .settled-block {
    opacity: 0.9;
}

.settled-piece:nth-child(odd) .settled-block {
    opacity: 0.75;
}

/* ========================================
   GAME BOY CONTROLS
   ======================================== */

/* Game Boy Controls */
.gameboy-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 3rem;
}

/* D-Pad */
.d-pad-container {
    position: relative;
    margin-right: 1rem;
}

.d-pad {
    position: relative;
    width: 60px;
    height: 60px;
}

.d-pad-vertical,
.d-pad-horizontal {
    position: absolute;
    background: linear-gradient(145deg, #2c3e2f, #1a2420);
    border-radius: 4px;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.d-pad-vertical {
    width: 20px;
    height: 60px;
    left: 20px;
    top: 0;
}

.d-pad-horizontal {
    width: 60px;
    height: 20px;
    left: 0;
    top: 20px;
}

.d-pad-center {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #1a2420;
    left: 20px;
    top: 20px;
    border-radius: 2px;
}

.d-pad {
    cursor: pointer;
    transition: all 0.1s ease;
}

.d-pad:hover {
    transform: scale(1.05);
}

.d-pad:active {
    transform: scale(0.95);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin-left: 1rem;
}

.button-a,
.button-b {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #2c3e2f, #1a2420);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b9d83;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.button-a:hover,
.button-b:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.button-a:active,
.button-b:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.1s ease;
}

/* ========================================
   GAME BOY DETAILS & ACCESSORIES
   ======================================== */

/* Game Boy Details */
.gameboy-details {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Speaker Grilles */
.speaker-grilles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: absolute;
    left: 0;
}

.speaker-line {
    width: 40px;
    height: 2px;
    background: #5a6b5d;
    border-radius: 1px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Start/Select Buttons */
.start-select {
    display: flex;
    gap: 1rem;
}

.select-btn,
.start-btn {
    background: linear-gradient(145deg, #2c3e2f, #1a2420);
    color: #8b9d83;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.6rem;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-btn:hover,
.start-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.select-btn:active,
.start-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.1s ease;
}

/* ========================================
   RESPONSIVE DESIGN - GAME BOY CONSOLE
   ======================================== */

/* ========================================
   CONSOLE VISIBILITY
   ======================================== */

/* Console is completely hidden on screens smaller than lg (992px) 
   via Bootstrap d-none d-lg-block classes in HTML.
   No responsive styles needed since console should not be visible
   on tablets or mobile devices. */