/* Performance-aware CSS from analysis findings */
:root {
    /* Retro color scheme - softer and more pleasing */
    --primary-color: #64ffda;     /* Soft cyan */
    --secondary-color: #ff6b6b;   /* Soft red */
    --background-color: #1a1a2e;  /* Deep blue-purple */
    --surface-color: #16213e;     /* Darker blue */
    --text-color: #eee2ff;        /* Soft white */
    --accent-color: #ff9f43;      /* Warm orange */
    --success-color: #26de81;     /* Soft green */
}

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

body {
    font-family: 'Courier New', monospace;
    background: 
        radial-gradient(circle at 20% 20%, rgba(100, 255, 218, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(255, 159, 67, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 40% 80%, rgba(100, 255, 218, 0.06) 0%, transparent 60%),
        var(--background-color);
    color: var(--text-color);
    overflow: hidden;
    user-select: none;
    touch-action: manipulation;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

/* Alternative vignette using box-shadow instead of gradients */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    box-shadow: 
        inset 0 0 0 1px transparent,
        inset 0 0 100px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 200px 80px rgba(0, 0, 0, 0.1),
        inset 0 0 300px 120px rgba(0, 0, 0, 0.05);
}

/* Music-reactive background elements - PS3 style */
.music-reactive-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at center, 
        rgba(26, 26, 46, 0) 0%, 
        rgba(26, 26, 46, 0.4) 100%);
}

.swirl-element {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    will-change: transform, opacity, filter;
    mix-blend-mode: screen;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Large flowing waves */
.swirl-1 {
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at 20% 50%, 
        rgba(100, 255, 218, 0.8) 0%, 
        rgba(100, 255, 218, 0.4) 30%,
        transparent 70%);
    top: -30%;
    left: -40%;
    animation: flow1 20s ease-in-out infinite;
    transform-origin: center;
}

.swirl-2 {
    width: 70%;
    height: 70%;
    background: radial-gradient(ellipse at 80% 50%, 
        rgba(255, 159, 67, 0.7) 0%, 
        rgba(255, 107, 107, 0.4) 30%,
        transparent 70%);
    bottom: -30%;
    right: -40%;
    animation: flow2 25s ease-in-out infinite;
    transform-origin: center;
}

.swirl-3 {
    width: 60%;
    height: 100%;
    background: linear-gradient(45deg, 
        transparent 0%,
        rgba(100, 255, 218, 0.5) 20%, 
        rgba(255, 159, 67, 0.5) 50%,
        rgba(100, 255, 218, 0.5) 80%,
        transparent 100%);
    top: -20%;
    left: 10%;
    animation: flow3 30s ease-in-out infinite;
}

/* Additional wave elements */
.swirl-4 {
    width: 100%;
    height: 60%;
    background: radial-gradient(ellipse at 50% 0%, 
        rgba(147, 112, 219, 0.6) 0%, 
        rgba(147, 112, 219, 0.3) 40%,
        transparent 70%);
    top: -30%;
    left: 0;
    animation: flow4 22s ease-in-out infinite;
}

.swirl-5 {
    width: 90%;
    height: 50%;
    background: radial-gradient(ellipse at 50% 100%, 
        rgba(255, 107, 107, 0.5) 0%, 
        rgba(255, 159, 67, 0.3) 40%,
        transparent 70%);
    bottom: -25%;
    left: 5%;
    animation: flow5 28s ease-in-out infinite;
}

.swirl-6 {
    width: 120%;
    height: 40%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(100, 255, 218, 0.4) 25%, 
        rgba(147, 112, 219, 0.4) 50%,
        rgba(255, 159, 67, 0.4) 75%,
        transparent 100%);
    top: 30%;
    left: -10%;
    animation: flow6 35s ease-in-out infinite;
}

/* Flowing wave animations - PS3 style */
@keyframes flow1 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg) scale(1) skewX(0deg);
    }
    25% { 
        transform: translate(20%, 10%) rotate(45deg) scale(1.2) skewX(10deg);
    }
    50% { 
        transform: translate(10%, 20%) rotate(90deg) scale(0.9) skewX(-10deg);
    }
    75% { 
        transform: translate(-10%, 5%) rotate(180deg) scale(1.1) skewX(5deg);
    }
}

@keyframes flow2 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg) scale(1) skewY(0deg);
    }
    25% { 
        transform: translate(-15%, -20%) rotate(-60deg) scale(0.95) skewY(15deg);
    }
    50% { 
        transform: translate(-20%, -10%) rotate(-120deg) scale(1.15) skewY(-10deg);
    }
    75% { 
        transform: translate(-5%, -15%) rotate(-180deg) scale(1) skewY(5deg);
    }
}

@keyframes flow3 {
    0%, 100% { 
        transform: translateX(0) translateY(0) rotate(0deg) scaleX(1);
    }
    33% { 
        transform: translateX(15%) translateY(-10%) rotate(120deg) scaleX(1.3);
    }
    66% { 
        transform: translateX(-15%) translateY(10%) rotate(240deg) scaleX(0.8);
    }
}

@keyframes flow4 {
    0%, 100% { 
        transform: translateY(0) scaleY(1) rotate(0deg);
    }
    50% { 
        transform: translateY(15%) scaleY(1.2) rotate(5deg);
    }
}

@keyframes flow5 {
    0%, 100% { 
        transform: translateY(0) scaleX(1) rotate(0deg);
    }
    50% { 
        transform: translateY(-20%) scaleX(1.3) rotate(-5deg);
    }
}

@keyframes flow6 {
    0%, 100% { 
        transform: translateX(-10%) rotate(0deg) scaleY(1);
    }
    25% { 
        transform: translateX(0%) rotate(2deg) scaleY(1.1);
    }
    50% { 
        transform: translateX(10%) rotate(0deg) scaleY(0.9);
    }
    75% { 
        transform: translateX(0%) rotate(-2deg) scaleY(1.05);
    }
}

/* Pulse animation for music beats */
.swirl-element.pulse {
    animation-name: pulse-effect !important;
    animation-duration: 0.3s !important;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes pulse-effect {
    0% { 
        filter: blur(60px) brightness(1);
        transform: scale(1);
    }
    50% { 
        filter: blur(30px) brightness(1.8);
        transform: scale(1.2);
    }
    100% { 
        filter: blur(60px) brightness(1);
        transform: scale(1);
    }
}

/* Respect user preferences (accessibility finding) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .particle-effect {
        display: none !important;
    }
    
    .music-reactive-bg {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #00ff00;
        --secondary-color: #ff0000;
        --background-color: #000000;
        --text-color: #ffffff;
    }
}

.game-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    padding: 40px 30px;
    gap: 20px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.game-board {
    aspect-ratio: 1 / 2; /* Game board is twice as tall as wide */
    height: calc(100vh - 80px);
    width: calc((100vh - 80px) / 2);
    max-width: calc(100vw - 300px - 60px); /* Leave room for UI panel */
    border: 3px solid var(--primary-color);
    border-radius: 8px;
    position: relative;
    background: rgba(22, 33, 62, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Blur the background behind it */
    box-shadow: 
        0 0 20px rgba(100, 255, 218, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
}

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border-radius: 5px;
    background: transparent; /* Ensure canvas is transparent */
}

.ui-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 260px;
    height: calc(100vh - 80px);
    overflow: hidden;
    flex-shrink: 0;
}

.info-box {
    background: rgba(22, 33, 62, 0.5);
    backdrop-filter: blur(10px);
    border: 2px solid var(--primary-color);
    padding: 14px;
    border-radius: 8px;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    font-size: 15px;
}

.info-box h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.performance-display {
    font-size: 12px;
    font-family: monospace;
}

.performance-tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
    margin-left: 10px;
}

.tier-high { background: #00ff88; color: #000; }
.tier-medium { background: #ffff00; color: #000; }
.tier-low { background: #ff8800; color: #000; }
.tier-battery { background: #8888ff; color: #000; }

.controls {
    font-size: 15px;
}

.controls h3 {
    color: var(--primary-color);
    margin-bottom: 12px;
}

.control-row {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.loading-screen h1 {
    font-size: 48px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: glow 2s ease-in-out infinite alternate;
}

.loading-screen p {
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 30px;
    opacity: 0.8;
}

@keyframes glow {
    from {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(100, 255, 218, 0.3);
    }
    to {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 30px rgba(100, 255, 218, 0.6);
    }
}

.loading-progress {
    width: 400px;
    height: 24px;
    border: 2px solid var(--primary-color);
    margin: 30px 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.8);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.loading-stage {
    color: var(--primary-color);
    margin: 15px 0;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.capability-indicator {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

.capability {
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.cap-available { background: #00ff88; color: #000; }
.cap-unavailable { background: #ff4444; color: #fff; }

.error-message {
    color: var(--secondary-color);
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid var(--secondary-color);
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .game-container {
        flex-direction: column;
        padding: 20px 10px;
        gap: 15px;
    }
    
    .game-board {
        height: 60vh;
        width: 30vh;
        max-width: calc(100vw - 20px);
    }
    
    .ui-panel {
        width: 100%;
        height: auto;
        max-height: calc(40vh - 20px);
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
    }
    
    .info-box {
        min-width: 120px;
        padding: 8px;
        font-size: 12px;
        flex-shrink: 0;
    }
    
    .loading-progress {
        width: 300px;
        height: 20px;
    }
    
    .loading-screen h1 {
        font-size: 36px;
    }
}

@media (max-height: 700px) {
    .game-container {
        padding: 25px 15px;
        gap: 12px;
    }
    
    .game-board {
        height: calc(100vh - 50px);
        width: calc((100vh - 50px) / 2);
    }
    
    .ui-panel {
        height: calc(100vh - 50px);
        gap: 8px;
    }
    
    .info-box {
        padding: 8px;
        font-size: 11px;
    }
    
    .info-box h3 {
        font-size: 12px;
        margin-bottom: 4px;
    }
}

/* Additional responsive styles for very small vertical resolutions */
@media (max-height: 600px) {
    .game-container {
        padding: 15px 10px;
        gap: 10px;
    }
    
    .game-board {
        height: calc(100vh - 30px);
        width: calc((100vh - 30px) / 2);
        max-width: calc(100vw - 250px - 20px);
    }
    
    .ui-panel {
        width: 240px;
        height: calc(100vh - 30px);
        gap: 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .info-box {
        padding: 6px;
        font-size: 10px;
    }
    
    .info-box h3 {
        font-size: 11px;
        margin-bottom: 3px;
    }
    
    .stats-grid {
        font-size: 11px;
        gap: 4px;
    }
    
    .control-row {
        margin: 4px 0;
        font-size: 11px;
    }
    
    #next-piece-canvas {
        width: 50px;
        height: 50px;
    }
}

/* Even smaller screens - switch to horizontal layout */
@media (max-height: 480px) {
    .game-container {
        flex-direction: row;
        padding: 10px;
        gap: 10px;
    }
    
    .game-board {
        height: calc(100vh - 20px);
        width: calc((100vh - 20px) / 2);
        max-width: 50vw;
    }
    
    .ui-panel {
        width: calc(50vw - 15px);
        height: calc(100vh - 20px);
        flex-direction: column;
        gap: 5px;
        overflow-y: auto;
    }
    
    .info-box {
        padding: 5px;
        font-size: 9px;
    }
    
    .info-box h3 {
        font-size: 10px;
        margin-bottom: 2px;
    }
    
    /* Hide less important elements on very small screens */
    .retro-terminal-box {
        display: none;
    }
    
    #fullscreen-btn {
        padding: 6px;
        font-size: 11px;
    }
}

/* Particle effect overlay */
.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus indicators for keyboard navigation */
button:focus,
.focusable:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Stats grid for line clear statistics */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 14px;
}

.stats-grid div {
    padding: 3px 0;
}

/* Next piece canvas styling */
#next-piece-canvas {
    border: 1px solid var(--accent-color);
    background: var(--background-color);
    display: block;
    margin: 3px auto 0;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Game state overlays */
.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 5px;
    z-index: 100;
    pointer-events: none;
}

.start-overlay {
    background: rgba(0, 0, 0, 0.5);
    color: var(--primary-color);
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

.pause-overlay {
    background: rgba(0, 0, 0, 0.5);
    color: var(--primary-color);
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

.game-over-overlay {
    background: rgba(26, 26, 46, 0.9);
    color: var(--secondary-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px);
}

.quit-overlay {
    background: rgba(0, 0, 0, 0.5);
    color: var(--accent-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.level-select-overlay {
    background: 
        radial-gradient(circle at 20% 20%, rgba(100, 255, 218, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(255, 159, 67, 0.08) 0%, transparent 60%),
        rgba(26, 26, 46, 0.95);
    color: var(--text-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 200; /* Ensure it's above other overlays */
    pointer-events: auto; /* Enable interactions */
    font-size: 16px; /* Override the large font size from game-overlay */
}

#level-down:hover, #level-up:hover {
    background: var(--primary-color);
    color: var(--background-color);
    transform: scale(1.05);
    transition: all 0.2s ease;
}

#level-down:active, #level-up:active {
    transform: scale(0.95);
}

.help-overlay {
    background: 
        radial-gradient(circle at 20% 20%, rgba(100, 255, 218, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(255, 159, 67, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 40% 80%, rgba(100, 255, 218, 0.04) 0%, transparent 60%),
        rgba(26, 26, 46, 0.96);
    color: var(--text-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 13px;
    padding: 10px;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    overflow: hidden;
    line-height: 1.3;
}

.help-content {
    max-width: 900px;
    height: 100%;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.help-content h2 {
    color: var(--primary-color);
    font-size: 20px;
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    padding-bottom: 5px;
    border-bottom: 2px solid rgba(100, 255, 218, 0.3);
    flex-shrink: 0;
}

.help-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    flex: 1;
    align-items: start;
    overflow: hidden;
}

.help-section {
    margin-bottom: 8px;
    padding: 10px;
    background: rgba(22, 33, 62, 0.3);
    border-radius: 6px;
    border-left: 3px solid var(--accent-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.help-section h3 {
    color: var(--accent-color);
    font-size: 16px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-section h3::before {
    content: "▶";
    color: var(--primary-color);
    font-size: 14px;
}

.help-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 15px;
}

.help-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(26, 26, 46, 0.4);
    border-radius: 6px;
    font-size: 14px;
    border: 1px solid rgba(100, 255, 218, 0.1);
}

.help-key {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--background-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 30px;
    text-align: center;
}

.help-scoring {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 14px;
}

.help-scoring > div:nth-child(odd) {
    font-weight: 500;
}

.help-scoring > div:nth-child(even) {
    color: var(--accent-color);
    font-weight: bold;
    text-align: right;
}

.help-close {
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--primary-color);
    font-size: 13px;
    color: var(--primary-color);
}

.help-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(22, 33, 62, 0.4);
    border: 1px solid rgba(100, 255, 218, 0.2);
    flex-shrink: 0;
}

.help-page-indicator {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.help-page-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.help-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(100, 255, 218, 0.3);
    transition: all 0.3s ease;
}

.help-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}

.help-page {
    display: none;
}

.help-page.active {
    display: block;
}

.piece-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.piece-item {
    text-align: center;
    padding: 8px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 8px;
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
    transition: all 0.3s ease;
}

.piece-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.piece-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.piece-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.piece-visual {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    max-width: 70px;
    margin: 8px auto;
    padding: 5px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 6px;
}

.piece-block {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.piece-block.filled {
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .help-overlay {
        padding: 15px;
        font-size: 14px;
    }
    
    .help-content {
        max-width: 100%;
    }
    
    .help-content h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .help-main {
        gap: 20px;
    }
    
    .help-section {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .help-section h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .help-controls {
        grid-template-columns: 1fr;
    }
    
    .help-control {
        padding: 6px 10px;
    }
    
    .piece-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .piece-item {
        padding: 12px;
    }
    
    .piece-visual {
        max-width: 60px;
    }
    
    .piece-block {
        width: 12px;
        height: 12px;
    }
    
    .piece-name {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .help-overlay {
        padding: 10px;
        font-size: 13px;
    }
    
    .help-content h2 {
        font-size: 20px;
    }
    
    .help-section h3 {
        font-size: 16px;
    }
    
    .piece-showcase {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .help-navigation {
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .help-page-indicator {
        font-size: 14px;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes stacky-drop {
    0% {
        transform: translateY(-10px);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    50% {
        transform: translateY(0px);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(100, 255, 218, 0.4);
    }
    100% {
        transform: translateY(-10px);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
}

@keyframes stacky-letter-bounce {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
        opacity: 1;
    }
    25% { 
        transform: translateY(-8px) scale(1.1); 
        opacity: 0.9;
    }
    50% { 
        transform: translateY(0px) scale(1); 
        opacity: 1;
    }
    75% { 
        transform: translateY(-4px) scale(1.05); 
        opacity: 0.95;
    }
}

/* CRT Filter Effects */
.crt-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crt-filter.active {
    opacity: 1;
}

.crt-filter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 1px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 3px,
            transparent 4px,
            transparent 5px
        );
    animation: crt-flicker 0.15s infinite linear alternate;
    /* Improved cross-browser compatibility */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity;
}

.crt-filter::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.2) 100%),
        linear-gradient(90deg, 
            rgba(255, 0, 0, 0.01) 0%, 
            rgba(0, 255, 0, 0.01) 33%, 
            rgba(0, 0, 255, 0.01) 66%, 
            rgba(255, 0, 0, 0.01) 100%
        );
    mix-blend-mode: multiply;
}

@keyframes crt-flicker {
    0% { opacity: 1; }
    98% { opacity: 1; }
    99% { opacity: 0.98; }
    100% { opacity: 0.99; }
}

/* CRT body effects when filter is active */
body.crt-mode {
    filter: contrast(1.1) brightness(1.05) saturate(1.2);
}

body.crt-mode .game-board,
body.crt-mode .info-box,
body.crt-mode .loading-screen {
    text-shadow: 0 0 2px currentColor;
}

body.crt-mode #game-canvas {
    filter: blur(0.3px) contrast(1.05);
}

@keyframes retro-glow {
    0% {
        text-shadow: 0 0 8px var(--success-color);
        transform: scale(1);
    }
    100% {
        text-shadow: 0 0 15px var(--success-color), 0 0 25px var(--success-color);
        transform: scale(1.02);
    }
}

@keyframes terminal-glow {
    0% {
        text-shadow: 0 0 12px #00ff66, 0 0 20px #00ff66;
        opacity: 0.9;
    }
    100% {
        text-shadow: 0 0 20px #00ff66, 0 0 35px #00ff66, 0 0 45px #00ff66;
        opacity: 1;
    }
}

@keyframes cursor-blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes special-active-flash {
    0%, 50% {
        color: #FFE64D;
        text-shadow: 0 0 10px #FFE64D;
    }
    51%, 100% {
        color: #FFFFFF;
        text-shadow: 0 0 15px #FFFFFF, 0 0 25px #FFFFFF;
    }
}

@keyframes special-active-cursor-flash {
    0%, 50% {
        background: #FFE64D;
        box-shadow: 0 0 10px #FFE64D;
    }
    51%, 100% {
        background: #FFFFFF;
        box-shadow: 0 0 15px #FFFFFF, 0 0 25px #FFFFFF;
    }
}

/* Combo system animations */
@keyframes combo-pulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 10px currentColor;
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px currentColor;
    }
}

/* Progressive shake animations */
@keyframes combo-shake-3 {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-1px) rotate(-0.5deg); }
    75% { transform: translateX(1px) rotate(0.5deg); }
}

@keyframes combo-shake-5 {
    0%, 100% { transform: translateX(0) rotate(0) scale(1); }
    25% { transform: translateX(-2.5px) rotate(-1deg) scale(1.02); }
    75% { transform: translateX(2.5px) rotate(1deg) scale(1.02); }
}

@keyframes combo-shake-7 {
    0%, 100% { transform: translateX(0) rotate(0) scale(1); }
    10% { transform: translateX(-4px) rotate(-2deg) scale(1.05); }
    30% { transform: translateX(4px) rotate(2deg) scale(1.03); }
    50% { transform: translateX(-2px) rotate(-1deg) scale(1.05); }
    70% { transform: translateX(2px) rotate(1deg) scale(1.03); }
    90% { transform: translateX(-1px) rotate(-0.5deg) scale(1.02); }
}

@keyframes combo-shake-9 {
    0%, 100% { transform: translateX(0) rotate(0) scale(1); }
    10% { transform: translateX(-6px) rotate(-3deg) scale(1.08); }
    20% { transform: translateX(6px) rotate(3deg) scale(1.05); }
    30% { transform: translateX(-4px) rotate(-2deg) scale(1.08); }
    40% { transform: translateX(4px) rotate(2deg) scale(1.05); }
    50% { transform: translateX(-2px) rotate(-1deg) scale(1.06); }
    60% { transform: translateX(2px) rotate(1deg) scale(1.04); }
    70% { transform: translateX(-3px) rotate(-1.5deg) scale(1.06); }
    80% { transform: translateX(3px) rotate(1.5deg) scale(1.04); }
    90% { transform: translateX(-1px) rotate(-0.5deg) scale(1.02); }
}

@keyframes intense-glow {
    from { 
        box-shadow: 
            0 0 30px currentColor,
            0 0 60px currentColor,
            0 0 90px currentColor;
    }
    to { 
        box-shadow: 
            0 0 40px currentColor,
            0 0 80px currentColor,
            0 0 120px currentColor;
    }
}

@keyframes fire-flicker {
    0%, 100% { opacity: 0.9; transform: translateY(0) scale(1); }
    25% { opacity: 1; transform: translateY(-2px) scale(1.1); }
    50% { opacity: 0.8; transform: translateY(-4px) scale(1.05); }
    75% { opacity: 1; transform: translateY(-1px) scale(1.15); }
}

@keyframes rainbow-text {
    0% { color: #ff0080; }
    16% { color: #ff0040; }
    33% { color: #ff8800; }
    50% { color: #ffff00; }
    66% { color: #00ff88; }
    83% { color: #0088ff; }
    100% { color: #ff0080; }
}

/* Enhanced combo level styling - effects start from level 1 */
.combo-level-1 #combo-counter { 
    color: #64FFDA; 
    animation: combo-pulse 1.2s ease-in-out infinite;
    text-shadow: 0 0 15px #64FFDA, 0 0 25px #64FFDA;
    filter: brightness(1.1);
}

.combo-level-2 #combo-counter { 
    color: #00D9FF; 
    animation: combo-pulse 1s ease-in-out infinite, fire-flicker 0.3s infinite;
    text-shadow: 0 0 20px #00D9FF, 0 0 35px #00D9FF, 0 0 50px #00A8FF;
    filter: brightness(1.2) contrast(1.1);
}

.combo-level-3 #combo-counter { 
    color: #00A8FF; 
    animation: combo-pulse 0.8s ease-in-out infinite, fire-flicker 0.25s infinite;
    text-shadow: 0 0 25px #00A8FF, 0 0 40px #00A8FF, 0 0 60px #0088FF;
    filter: brightness(1.3) contrast(1.2);
}

.combo-level-4 #combo-counter { 
    color: #0088FF; 
    animation: combo-pulse 0.6s ease-in-out infinite, fire-flicker 0.2s infinite;
    text-shadow: 0 0 30px #0088FF, 0 0 50px #0066FF, 0 0 70px #FFE64D;
    filter: brightness(1.4) contrast(1.3);
}

.combo-level-5 #combo-counter { 
    color: #FFE64D; 
    animation: combo-pulse 0.5s ease-in-out infinite, fire-flicker 0.15s infinite;
    text-shadow: 0 0 25px #FFE64D, 0 0 45px #FFA500, 0 0 65px #FF6B35, 0 0 85px #FF4500;
    filter: brightness(1.5) contrast(1.4) saturate(1.2);
}

.combo-level-6 #combo-counter { 
    color: #FF6B35; 
    animation: combo-pulse 0.4s ease-in-out infinite, fire-flicker 0.12s infinite;
    text-shadow: 0 0 30px #FF6B35, 0 0 55px #FF4500, 0 0 80px #FF0000, 0 0 100px #FF0080;
    filter: brightness(1.6) contrast(1.5) saturate(1.3);
}

.combo-level-7 #combo-counter { 
    color: #FF0080; 
    animation: combo-pulse 0.3s ease-in-out infinite, fire-flicker 0.08s infinite;
    text-shadow: 0 0 35px #FF0080, 0 0 65px #FF0040, 0 0 95px #FF00FF, 0 0 115px #8800FF;
    filter: brightness(1.7) contrast(1.6) saturate(1.4) blur(0.2px);
}

.combo-level-8 #combo-counter { 
    color: #FF0040; 
    animation: combo-pulse 0.25s ease-in-out infinite, fire-flicker 0.06s infinite;
    text-shadow: 0 0 40px #FF0040, 0 0 75px #FF0000, 0 0 110px #FF0080, 0 0 130px #FF00FF;
    filter: brightness(1.8) contrast(1.7) saturate(1.5) blur(0.3px);
}

.combo-level-9 #combo-counter { 
    color: #FF00FF; 
    animation: combo-pulse 0.2s ease-in-out infinite, fire-flicker 0.04s infinite;
    filter: blur(0.5px) contrast(1.8) brightness(1.9) saturate(1.6);
    text-shadow: 
        0 0 15px #FF00FF, 
        0 0 30px #FF0080, 
        0 0 45px #FF0040,
        0 0 60px #FF0080,
        0 0 80px #FF0080,
        0 0 100px #00D9FF,
        0 0 120px #FFE64D,
        0 0 140px #FF00FF;
}

.combo-level-10 #combo-counter { 
    animation: combo-pulse 0.15s ease-in-out infinite, rainbow-text 1s linear infinite, fire-flicker 0.03s infinite;
    filter: blur(0.8px) contrast(2) brightness(2) saturate(2);
    text-shadow: 
        0 0 25px currentColor, 
        0 0 50px currentColor, 
        0 0 75px currentColor,
        0 0 100px currentColor,
        0 0 125px currentColor,
        0 0 150px currentColor,
        0 0 175px currentColor;
}

/* Enhanced combo box styling */
#combo-box {
    /* Inherit transparency from .info-box */
}

/* Combo header styling */
.combo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.combo-header h3 {
    margin: 0;
}

.combo-mode-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s;
}

.combo-mode-indicator:hover {
    opacity: 1;
}

.mode-icon {
    font-size: 16px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}

/* Mode-specific colors */
.combo-mode-easy .mode-icon,
.combo-mode-easy .mode-text {
    color: #26de81; /* Green for Easy */
}

.combo-mode-normal .mode-icon,
.combo-mode-normal .mode-text {
    color: #ff9f43; /* Orange for Normal */
}

.combo-mode-hard .mode-icon,
.combo-mode-hard .mode-text {
    color: #ff6b6b; /* Red for Hard */
}

/* Inactive state styling - no dimming */
#combo-box[data-state="inactive"] {
    opacity: 1;
    /* Keep the default border and background from .info-box */
    background-image: none !important;
    /* Re-apply the box-shadow from .info-box to match other panels */
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: none !important;
    transform: none !important;
    z-index: auto !important;
}

/* Ensure consistent height for combo box */
#combo-box {
    min-height: 150px; /* Adjust based on active content height */
}

#combo-box[data-state="inactive"] .combo-stats {
    color: var(--primary-color);
    text-align: center;
    padding: 20px 0; /* Add padding to match active content height */
}

#combo-box[data-state="inactive"] .best-combo {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: bold;
}

#combo-box[data-state="inactive"] .combo-status {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(100, 255, 218, 0.7);
    animation: ready-blink 0.125s ease-in-out infinite;
}

@keyframes ready-blink {
    0%, 100% {
        color: rgba(100, 255, 218, 0.7);
    }
    50% {
        color: #eee2ff; /* White color from text-color variable */
    }
}

/* Combo message blinking animation */
#combo-message {
    color: var(--primary-color);
    letter-spacing: 2px;
    animation: combo-message-blink 0.125s ease-in-out infinite;
}

@keyframes combo-message-blink {
    0%, 100% {
        color: var(--primary-color); /* Cyan color */
    }
    50% {
        color: #eee2ff; /* White color from text-color variable */
    }
}

/* Paused text blinking animation */
.paused-text {
    animation: paused-blink 0.125s ease-in-out infinite;
}

@keyframes paused-blink {
    0%, 100% {
        color: var(--primary-color); /* Cyan color */
    }
    50% {
        color: #eee2ff; /* White color */
    }
}

/* Active state styling */
#combo-box[data-state="active"] {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#combo-box[data-state="active"] .combo-stats {
    display: none;
}

#combo-box[data-state="active"] .combo-active-content {
    display: block !important;
}

#combo-box-inner {
    position: relative;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Progressive border effects - enhanced from level 1 */

.combo-level-1 #combo-box-inner {

}


.combo-level-2 #combo-box-inner {

}


.combo-level-3 #combo-box-inner {

}

.combo-level-4 #combo-box { 
    .combo-level-4 #combo-box {
    z-index: 100;
    border-color: #0088FF;
    border-width: 4px;
    box-shadow: 
        0 0 35px rgba(0, 136, 255, 1.0),
        0 0 55px rgba(0, 136, 255, 0.6),
        inset 0 0 30px rgba(0, 136, 255, 0.5);
    animation: intense-glow 0.6s ease-in-out infinite alternate;
}
.combo-level-4 #combo-box-inner {
    transform: scale(1.05);
    animation: combo-shake-5 0.25s ease-in-out infinite;
}
}

.combo-level-5 #combo-box { 
    border-color: #FFE64D;
    border-width: 4px;
    box-shadow: 
        0 0 30px #FFE64D,
        0 0 50px rgba(255, 230, 77, 0.5),
        inset 0 0 25px rgba(255, 230, 77, 0.4);
    animation: intense-glow 0.5s ease-in-out infinite alternate;
}
.combo-level-5 #combo-box-inner {
    animation: combo-shake-5 0.2s ease-in-out infinite;
}

.combo-level-6 #combo-box { 
    border-color: #FF6B35;
    border-width: 4px;
    box-shadow: 
        0 0 35px #FF6B35,
        0 0 60px rgba(255, 107, 53, 0.6),
        inset 0 0 30px rgba(255, 107, 53, 0.5);
    animation: intense-glow 0.4s ease-in-out infinite alternate;
}
.combo-level-6 #combo-box-inner {
    animation: combo-shake-5 0.15s ease-in-out infinite;
}

.combo-level-7 #combo-box { 
    border-color: #FF0080;
    border-width: 5px;
    border-style: double;
    box-shadow: 
        0 0 40px #FF0080,
        0 0 80px rgba(255, 0, 128, 0.7),
        inset 0 0 35px rgba(255, 0, 128, 0.6);
    animation: intense-glow 0.3s ease-in-out infinite alternate;
}
.combo-level-7 #combo-box-inner {
    animation: combo-shake-7 0.1s ease-in-out infinite;
}

.combo-level-8 #combo-box { 
    border-color: #FF0040;
    border-width: 5px;
    border-style: double;
    box-shadow: 
        0 0 50px #FF0040,
        0 0 100px rgba(255, 0, 64, 0.8),
        inset 0 0 40px rgba(255, 0, 64, 0.7);
    animation: intense-glow 0.25s ease-in-out infinite alternate;
}
.combo-level-8 #combo-box-inner {
    animation: combo-shake-7 0.08s ease-in-out infinite;
}

.combo-level-9 #combo-box { 
    border: 6px solid transparent;
    background-image: 
        linear-gradient(135deg, rgba(22, 33, 62, 0.5) 0%, rgba(26, 26, 46, 0.5) 100%),
        linear-gradient(45deg, #FF0080, #FFE64D, #00D9FF, #FF0080);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 
        0 0 60px #FF00FF,
        0 0 120px rgba(255, 0, 255, 0.9),
        inset 0 0 50px rgba(255, 0, 128, 0.8);
    animation: intense-glow 0.2s ease-in-out infinite alternate;
}
.combo-level-9 #combo-box-inner {
    animation: combo-shake-9 0.06s ease-in-out infinite;
}

.combo-level-10 #combo-box { 
    border: 6px double transparent;
    background-image: 
        linear-gradient(135deg, rgba(22, 33, 62, 0.5) 0%, rgba(26, 26, 46, 0.5) 100%),
        linear-gradient(45deg, #ff0080, #ff0040, #ff8800, #ffff00, #00ff88, #0088ff, #ff0080);
    background-size: 100% 100%, 400% 400%;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: 
        rainbow-border 2s linear infinite,
        intense-glow 0.15s ease-in-out infinite alternate;
}
.combo-level-10 #combo-box-inner {
    animation: combo-shake-9 0.04s ease-in-out infinite;
    /* Removed box-shadow to prevent white glow - text already has its own glow */
}

@keyframes rainbow-border {
    0% { background-position: 0% 0%, 0% 50%; }
    100% { background-position: 0% 0%, 400% 50%; }
}

#combo-box.combo-flash #combo-box-inner {
    animation: combo-box-flash 0.3s ease;
}

@keyframes combo-box-flash {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Fire particle container */
.combo-fire-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Fire particle animation */
@keyframes fire-rise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    20% {
        opacity: 1;
        transform: translateY(-10px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.3) translateX(20px);
    }
}

/* Screen shake animations */
@keyframes screen-shake-2 {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-2px, 2px) rotate(0.5deg); }
    40% { transform: translate(2px, -2px) rotate(-0.5deg); }
    60% { transform: translate(-2px, -2px) rotate(0.5deg); }
    80% { transform: translate(2px, 2px) rotate(-0.5deg); }
}

@keyframes screen-shake-4 {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-4px, 4px) rotate(1deg); }
    20% { transform: translate(4px, -4px) rotate(-1deg); }
    30% { transform: translate(-4px, -4px) rotate(1deg); }
    40% { transform: translate(4px, 4px) rotate(-1deg); }
    50% { transform: translate(-2px, 2px) rotate(0.5deg); }
    60% { transform: translate(2px, -2px) rotate(-0.5deg); }
    70% { transform: translate(-2px, -2px) rotate(0.5deg); }
    80% { transform: translate(2px, 2px) rotate(-0.5deg); }
    90% { transform: translate(-1px, 1px) rotate(0); }
}

@keyframes screen-shake-6 {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    5% { transform: translate(-6px, 6px) rotate(1.5deg); }
    10% { transform: translate(6px, -6px) rotate(-1.5deg); }
    15% { transform: translate(-6px, -6px) rotate(1.5deg); }
    20% { transform: translate(6px, 6px) rotate(-1.5deg); }
    25% { transform: translate(-4px, 4px) rotate(1deg); }
    30% { transform: translate(4px, -4px) rotate(-1deg); }
    35% { transform: translate(-4px, -4px) rotate(1deg); }
    40% { transform: translate(4px, 4px) rotate(-1deg); }
    45% { transform: translate(-2px, 2px) rotate(0.5deg); }
    50% { transform: translate(2px, -2px) rotate(-0.5deg); }
    60% { transform: translate(-2px, -2px) rotate(0.5deg); }
    70% { transform: translate(2px, 2px) rotate(-0.5deg); }
    80% { transform: translate(-1px, 1px) rotate(0); }
    90% { transform: translate(1px, -1px) rotate(0); }
}

@keyframes screen-shake-8 {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    5% { transform: translate(-8px, 8px) rotate(2deg); }
    10% { transform: translate(8px, -8px) rotate(-2deg); }
    15% { transform: translate(-8px, -8px) rotate(2deg); }
    20% { transform: translate(8px, 8px) rotate(-2deg); }
    25% { transform: translate(-6px, 6px) rotate(1.5deg); }
    30% { transform: translate(6px, -6px) rotate(-1.5deg); }
    35% { transform: translate(-6px, -6px) rotate(1.5deg); }
    40% { transform: translate(6px, 6px) rotate(-1.5deg); }
    45% { transform: translate(-4px, 4px) rotate(1deg); }
    50% { transform: translate(4px, -4px) rotate(-1deg); }
    55% { transform: translate(-4px, -4px) rotate(1deg); }
    60% { transform: translate(4px, 4px) rotate(-1deg); }
    65% { transform: translate(-2px, 2px) rotate(0.5deg); }
    70% { transform: translate(2px, -2px) rotate(-0.5deg); }
    75% { transform: translate(-2px, -2px) rotate(0.5deg); }
    80% { transform: translate(2px, 2px) rotate(-0.5deg); }
    85% { transform: translate(-1px, 1px) rotate(0); }
    90% { transform: translate(1px, -1px) rotate(0); }
    95% { transform: translate(0, 0) rotate(0); }
}

@keyframes screen-shake-10 {
    0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
    2% { transform: translate(-10px, 10px) rotate(2.5deg) scale(1.01); }
    4% { transform: translate(10px, -10px) rotate(-2.5deg) scale(1.01); }
    6% { transform: translate(-10px, -10px) rotate(2.5deg) scale(1.01); }
    8% { transform: translate(10px, 10px) rotate(-2.5deg) scale(1.01); }
    10% { transform: translate(-8px, 8px) rotate(2deg) scale(1.005); }
    15% { transform: translate(8px, -8px) rotate(-2deg) scale(1.005); }
    20% { transform: translate(-8px, -8px) rotate(2deg) scale(1.005); }
    25% { transform: translate(8px, 8px) rotate(-2deg) scale(1.005); }
    30% { transform: translate(-6px, 6px) rotate(1.5deg) scale(1); }
    35% { transform: translate(6px, -6px) rotate(-1.5deg) scale(1); }
    40% { transform: translate(-6px, -6px) rotate(1.5deg) scale(1); }
    45% { transform: translate(6px, 6px) rotate(-1.5deg) scale(1); }
    50% { transform: translate(-4px, 4px) rotate(1deg) scale(1); }
    55% { transform: translate(4px, -4px) rotate(-1deg) scale(1); }
    60% { transform: translate(-4px, -4px) rotate(1deg) scale(1); }
    65% { transform: translate(4px, 4px) rotate(-1deg) scale(1); }
    70% { transform: translate(-2px, 2px) rotate(0.5deg) scale(1); }
    75% { transform: translate(2px, -2px) rotate(-0.5deg) scale(1); }
    80% { transform: translate(-2px, -2px) rotate(0.5deg) scale(1); }
    85% { transform: translate(2px, 2px) rotate(-0.5deg) scale(1); }
    90% { transform: translate(-1px, 1px) rotate(0) scale(1); }
    95% { transform: translate(1px, -1px) rotate(0) scale(1); }
}

/* Terminal text to prevent collapse during marquee */
#terminal-text {
    min-height: 24px;
}

#terminal-content {
    display: inline-block;
    min-height: 1em;
}