/* ============================================
   MINIGAMES STYLES
   ============================================ */

/* Full Screen Game Mode */
.fullscreen-game {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 100%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.minigame-fullscreen-container {
    width: 100%;
    max-width: 800px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.game-content {
    width: 100%;
    display: none;
}

.game-content.active {
    display: block;
}

/* Fullscreen intro styling */
.fullscreen-game .minigame-intro {
    text-align: center;
    padding: 60px 40px;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 20px;
    max-width: 500px;
}

.fullscreen-game .minigame-intro h2 {
    font-size: 2.5rem;
    color: #60a5fa;
    margin-bottom: 20px;
}

.fullscreen-game .minigame-intro p {
    font-size: 1.2rem;
    color: #cbd5e1;
    margin-bottom: 30px;
    line-height: 1.6;
}

.fullscreen-game .btn-large {
    padding: 16px 48px;
    font-size: 1.3rem;
}

/* Fullscreen results styling */
.fullscreen-game .minigame-results {
    text-align: center;
    padding: 60px 40px;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 20px;
    max-width: 500px;
}

.fullscreen-game .minigame-results h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.fullscreen-game .result-stars {
    font-size: 3rem;
    margin: 20px 0;
}

.fullscreen-game .result-earnings {
    font-size: 1.5rem;
    color: #34d399;
    margin-bottom: 30px;
}

/* Game area styling */
#minigame-game-area {
    width: 100%;
    max-width: 700px;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 20px;
    padding: 30px;
}

/* Minigame Container (legacy) */
.minigame-container {
    background: var(--bg-medium);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 600px;
    width: 90%;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Minigame Intro */
.minigame-intro {
    text-align: center;
    padding: var(--spacing-xl);
}

.minigame-intro h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    color: var(--primary-light);
}

.minigame-intro p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
    max-width: 400px;
}

/* Minigame Content */
.minigame-content {
    width: 100%;
}

/* Minigame Header */
.minigame-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-dark);
    border-radius: var(--radius-md);
}

.minigame-timer {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 50px;
}

.minigame-timer.warning {
    color: var(--danger);
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.minigame-score {
    font-size: 1.1rem;
    color: var(--text-primary);
}

/* ============================================
   NUMBER SEQUENCE GAME
   ============================================ */

.number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.number-btn {
    aspect-ratio: 1;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: inherit;
    background: var(--bg-light);
    border: 3px solid var(--bg-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-btn:hover:not(.clicked):not(.wrong) {
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
}

.number-btn.clicked {
    background: var(--success);
    border-color: var(--success);
    transform: scale(0.95);
    cursor: default;
}

.number-btn.wrong {
    background: var(--danger);
    border-color: var(--danger);
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* ============================================
   CARD SWIPE GAME
   ============================================ */

.card-swipe-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    width: 100%;
}

.card-bins {
    display: flex;
    gap: var(--spacing-xl);
    width: 100%;
    justify-content: center;
}

.card-bin {
    width: 150px;
    height: 80px;
    border: 3px dashed var(--bg-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.card-bin[data-type="approve"] {
    border-color: var(--success);
    color: var(--success);
}

.card-bin[data-type="reject"] {
    border-color: var(--danger);
    color: var(--danger);
}

.card-bin.highlight {
    background: rgba(255,255,255,0.1);
    transform: scale(1.05);
}

.card-stack {
    position: relative;
    width: 200px;
    height: 150px;
}

.swipe-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-dark) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: grab;
    user-select: none;
    transition: transform 0.1s ease-out;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.swipe-card:active {
    cursor: grabbing;
}

.swipe-card.approve {
    border: 3px solid var(--success);
}

.swipe-card.reject {
    border: 3px solid var(--danger);
}

.card-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.card-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

.card-amount.valid {
    color: var(--success);
}

.card-amount.invalid {
    color: var(--danger);
}

.card-details {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.card-swipe-instructions {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: var(--spacing-md);
}

/* ============================================
   TRASH OUT GAME
   ============================================ */

.trash-area {
    position: relative;
    width: 100%;
    height: 300px;
    background: var(--bg-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.trash-bin {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
    z-index: 5;
    transition: transform var(--transition-fast);
}

.trash-bin.active {
    transform: translateX(-50%) scale(1.2);
}

.trash-items {
    width: 100%;
    height: 100%;
}

.trash-item {
    position: absolute;
    font-size: 2rem;
    cursor: grab;
    user-select: none;
    transition: transform 0.05s ease-out;
    z-index: 10;
}

.trash-item:active {
    cursor: grabbing;
}

.trash-item.collected {
    animation: collected 0.3s ease-out forwards;
}

@keyframes collected {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }
}

/* ============================================
   MINIGAME RESULTS
   ============================================ */

.minigame-results {
    text-align: center;
    padding: var(--spacing-xl);
    animation: resultsIn 0.5s ease-out;
}

@keyframes resultsIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.minigame-results h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-lg);
    color: var(--success);
}

.minigame-results h2.failed {
    color: var(--danger);
}

.result-stars {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.result-stars .star {
    opacity: 0.3;
    transition: all var(--transition-normal);
}

.result-stars .star.earned {
    opacity: 1;
    animation: starPop 0.4s ease-out backwards;
}

.result-stars .star:nth-child(1).earned { animation-delay: 0.1s; }
.result-stars .star:nth-child(2).earned { animation-delay: 0.3s; }
.result-stars .star:nth-child(3).earned { animation-delay: 0.5s; }

@keyframes starPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.result-earnings {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

.result-earnings span {
    font-weight: 700;
    color: var(--secondary);
    font-size: 1.5rem;
}

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

@media (max-width: 600px) {
    .minigame-container {
        padding: var(--spacing-lg);
        min-height: 400px;
    }

    .number-grid {
        gap: var(--spacing-sm);
    }

    .number-btn {
        font-size: 1.2rem;
    }

    .card-bins {
        gap: var(--spacing-md);
    }

    .card-bin {
        width: 120px;
        height: 60px;
        font-size: 0.9rem;
    }

    .card-stack {
        width: 180px;
        height: 130px;
    }

    .trash-area {
        height: 250px;
    }

    .trash-bin {
        font-size: 3rem;
    }

    .trash-item {
        font-size: 1.5rem;
    }
}

/* ============================================
   PROGRAMMING MINIGAMES STYLES
   ============================================ */

/* Common styles */
.minigame-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: var(--spacing-md);
}

.minigame-status {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Debug Code / Find Error */
.code-container,
.error-code {
    background: #1e1e1e;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.95rem;
}

.code-line,
.error-line {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.code-line:hover,
.error-line:hover {
    background: rgba(255, 255, 255, 0.1);
}

.code-line.correct,
.error-line.correct {
    background: rgba(76, 175, 80, 0.3);
    border-left: 3px solid var(--success);
}

.code-line.wrong,
.error-line.wrong {
    background: rgba(244, 67, 54, 0.3);
    animation: shake 0.5s ease-in-out;
}

.line-number,
.line-num {
    color: #858585;
    min-width: 20px;
    user-select: none;
}

.code-line code,
.error-line code {
    color: #d4d4d4;
}

/* Debug Hint Box */
.debug-hint {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 152, 0, 0.2) 100%);
    border: 2px solid #FFC107;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
}

.debug-hint strong {
    color: #FFC107;
}

/* Match Syntax */
.match-columns {
    display: flex;
    justify-content: space-around;
    gap: var(--spacing-xl);
    width: 100%;
}

.match-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bracket-item {
    background: var(--bg-light);
    padding: 15px 30px;
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-width: 80px;
}

.bracket-item:hover:not(.matched) {
    background: var(--primary);
    transform: scale(1.05);
}

.bracket-item.selected {
    background: var(--primary);
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
}

.bracket-item.matched {
    background: var(--success);
    cursor: default;
    opacity: 0.7;
}

.bracket-item.wrong {
    background: var(--danger);
}

/* Type Code */
.type-code-display {
    width: 100%;
}

.code-to-type {
    background: #1e1e1e;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 1.3rem;
    margin-bottom: var(--spacing-lg);
    letter-spacing: 1px;
    color: #d4d4d4;
}

.char-correct {
    color: var(--success);
}

.char-wrong {
    color: var(--danger);
    text-decoration: underline;
}

.code-input {
    width: 100%;
    background: var(--bg-dark);
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-family: monospace;
    font-size: 1.2rem;
    color: var(--text-primary);
    outline: none;
}

.code-input:focus {
    border-color: var(--primary);
}

/* Fix Bugs */
.bug-code-area {
    position: relative;
    width: 100%;
    height: 280px;
    background: #1e1e1e;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.code-background {
    padding: var(--spacing-lg);
    font-family: monospace;
    font-size: 0.85rem;
    color: #d4d4d4;
    margin: 0;
    line-height: 1.6;
}

.bug-sprite {
    position: absolute;
    font-size: 1.5rem;
    cursor: pointer;
    animation: bugCrawl 2s ease-in-out infinite;
    transition: transform 0.1s;
    z-index: 10;
}

.bug-sprite:hover {
    transform: scale(1.3);
}

.bug-sprite.squashed {
    animation: squash 0.3s ease-out forwards;
}

@keyframes bugCrawl {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(10px) rotate(10deg); }
    75% { transform: translateX(-10px) rotate(-10deg); }
}

@keyframes squash {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); }
    100% { transform: scale(0); opacity: 0; }
}

/* Sort Array / Sequence Logic */
.sort-array-container,
.sequence-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.sort-item,
.sequence-block {
    background: var(--bg-light);
    padding: 15px 25px;
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 1.1rem;
    cursor: grab;
    transition: all 0.2s;
    user-select: none;
}

.sort-item:active,
.sequence-block:active {
    cursor: grabbing;
}

.sort-item.dragging,
.sequence-block.dragging {
    opacity: 0.5;
    transform: scale(1.05);
}

.sort-item.correct,
.sequence-block.correct {
    background: var(--success);
}

.sort-item.wrong,
.sequence-block.wrong {
    background: var(--danger);
    animation: shake 0.5s;
}

.check-sort-btn,
.check-sequence-btn,
.submit-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.check-sort-btn:hover,
.check-sequence-btn:hover,
.submit-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.sequence-tip {
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    text-align: center;
}

/* Binary Decode */
/* Binary Cheat Sheet */
.binary-cheatsheet {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.15) 100%);
    border: 2px solid #4CAF50;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.cheatsheet-title {
    color: #81C784;
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.cheatsheet-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.place-values, .binary-digits, .add-values {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.place-value {
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #81C784;
    font-weight: bold;
    font-size: 0.9rem;
}

.binary-digit {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #666;
}

.binary-digit.active {
    background: #4CAF50;
    color: white;
}

.add-value {
    width: 40px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.85rem;
}

.add-value.active {
    color: #FFD700;
    font-weight: bold;
}

.cheatsheet-formula {
    margin-top: 10px;
    padding: 8px 15px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: #FFD700;
    font-weight: bold;
}

.binary-display {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.binary-number {
    font-family: monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-light);
    letter-spacing: 4px;
    margin-bottom: var(--spacing-sm);
}

.binary-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.decimal-input {
    width: 150px;
    background: var(--bg-dark);
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-family: monospace;
    font-size: 1.5rem;
    color: var(--text-primary);
    text-align: center;
    outline: none;
    margin-right: var(--spacing-md);
}

.decimal-input:focus {
    border-color: var(--primary);
}

.decimal-input.wrong {
    border-color: var(--danger);
    animation: shake 0.5s;
}

/* Complete Function */
.function-hint {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 152, 0, 0.2) 100%);
    border: 2px solid #FFC107;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 0.95rem;
}

.function-hint strong {
    color: #FFC107;
}

.function-code {
    background: #1e1e1e;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.function-code pre {
    padding: var(--spacing-lg);
    font-family: monospace;
    font-size: 1rem;
    color: #d4d4d4;
    margin: 0;
    white-space: pre-wrap;
}

.function-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    width: 100%;
}

.option-btn {
    background: var(--bg-light);
    border: 2px solid var(--bg-light);
    padding: 15px 25px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
    min-height: 50px;
    text-align: center;
    word-wrap: break-word;
}

.option-btn:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.option-btn.correct {
    background: var(--success);
    border-color: var(--success);
}

.option-btn.wrong {
    background: var(--danger);
    border-color: var(--danger);
}

/* Memory Match */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    max-width: 400px;
    margin: 0 auto;
}

.memory-card {
    aspect-ratio: 1;
    position: relative;
    cursor: pointer;
    perspective: 1000px;
}

.memory-card .card-front,
.memory-card .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 600;
    backface-visibility: hidden;
    transition: transform 0.4s;
}

.memory-card .card-front {
    background: var(--primary);
    color: white;
    font-size: 1.5rem;
}

.memory-card .card-back {
    background: var(--bg-light);
    color: var(--text-primary);
    transform: rotateY(180deg);
}

.memory-card.flipped .card-front {
    transform: rotateY(180deg);
}

.memory-card.flipped .card-back {
    transform: rotateY(0);
}

.memory-card.matched .card-back {
    background: var(--success);
    color: white;
}

/* Responsive */
@media (max-width: 600px) {
    .match-columns {
        gap: var(--spacing-lg);
    }

    .bracket-item {
        padding: 12px 20px;
        font-size: 1.2rem;
        min-width: 60px;
    }

    .binary-number {
        font-size: 1.8rem;
    }

    .memory-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .function-options {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   OFFICE WORK MINIGAMES
   ============================================ */

.office-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-dark);
    border-radius: var(--radius-md);
}

.minigame-instruction {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Water Cooler Game - Realistic Design */
.water-cooler-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    padding: 30px;
    min-height: 400px;
    position: relative;
}

/* === WATER COOLER MACHINE === */
.water-cooler-machine {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Water Bottle */
.water-bottle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottle-cap {
    width: 30px;
    height: 12px;
    background: linear-gradient(180deg, #1565C0, #0D47A1);
    border-radius: 4px 4px 0 0;
}

.bottle-neck {
    width: 24px;
    height: 20px;
    background: linear-gradient(90deg, rgba(200,230,255,0.6), rgba(255,255,255,0.8), rgba(200,230,255,0.6));
    border: 1px solid rgba(100,180,255,0.3);
}

.bottle-body {
    width: 90px;
    height: 140px;
    background: linear-gradient(90deg, rgba(200,230,255,0.5), rgba(255,255,255,0.7), rgba(200,230,255,0.5));
    border-radius: 10px 10px 45px 45px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(100,180,255,0.3);
}

.bottle-water {
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 85%;
    background: linear-gradient(180deg,
        rgba(100,180,246,0.7) 0%,
        rgba(30,136,229,0.8) 50%,
        rgba(21,101,192,0.9) 100%);
    border-radius: 0 0 40px 40px;
    animation: waterWobble 3s ease-in-out infinite;
}

.bottle-reflection {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 60px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
    border-radius: 10px;
    transform: skewX(-5deg);
}

@keyframes waterWobble {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.98); }
}

/* Cooler Body */
.cooler-body {
    width: 120px;
    background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
    border-radius: 8px;
    box-shadow:
        inset 2px 2px 5px rgba(255,255,255,0.5),
        inset -2px -2px 5px rgba(0,0,0,0.1),
        3px 5px 15px rgba(0,0,0,0.2);
}

.cooler-top-panel {
    height: 20px;
    background: linear-gradient(180deg, #e8e8e8, #d0d0d0);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #bbb;
}

.cooler-indicator {
    width: 8px;
    height: 8px;
    background: #4CAF50;
    border-radius: 50%;
    box-shadow: 0 0 6px #4CAF50;
    animation: indicatorPulse 2s ease-in-out infinite;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.cooler-front-panel {
    padding: 15px 10px;
    background: linear-gradient(180deg, #fafafa, #e8e8e8);
}

.cooler-brand {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #1565C0;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
}

/* Tap Section */
.tap-section {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.tap-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tap-area.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.tap {
    width: 36px;
    height: 45px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s;
}

.tap.cold-tap {
    background: linear-gradient(180deg, #42A5F5, #1E88E5, #1565C0);
    box-shadow: 0 3px 8px rgba(30,136,229,0.4);
}

.tap.hot-tap {
    background: linear-gradient(180deg, #EF5350, #E53935, #C62828);
    box-shadow: 0 3px 8px rgba(229,57,53,0.4);
}

.tap:hover {
    transform: scale(1.05);
}

.tap:active, .tap.pressed {
    transform: scale(0.95) translateY(2px);
}

.tap-handle {
    width: 24px;
    height: 10px;
    background: linear-gradient(180deg, #fff, #ddd);
    border-radius: 3px;
    margin: 6px auto 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.tap-spout {
    width: 8px;
    height: 12px;
    background: linear-gradient(90deg, #bbb, #999);
    margin: 8px auto 0;
    border-radius: 0 0 3px 3px;
}

.tap-label {
    font-size: 9px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Drip Tray */
.drip-tray {
    width: 90px;
    height: 12px;
    margin: 0 auto;
    background: linear-gradient(180deg, #333, #222);
    border-radius: 3px;
    padding: 2px;
}

.drip-grate {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #444 0px,
        #444 3px,
        #222 3px,
        #222 6px
    );
    border-radius: 2px;
}

/* Storage Cabinet */
.cooler-cabinet {
    height: 80px;
    background: linear-gradient(180deg, #e0e0e0, #ccc);
    border-radius: 0 0 8px 8px;
    padding: 8px;
}

.cabinet-door {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f0f0f0, #ddd);
    border-radius: 4px;
    border: 1px solid #bbb;
    position: relative;
}

.cabinet-handle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 6px;
    height: 20px;
    background: linear-gradient(90deg, #999, #bbb, #999);
    border-radius: 3px;
}

/* === WATER STREAM === */
.water-stream {
    position: absolute;
    width: 6px;
    height: 0;
    background: linear-gradient(180deg,
        rgba(100,180,246,0.9),
        rgba(30,136,229,0.7));
    left: calc(50% - 60px);
    top: 280px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.1s;
}

.water-stream.flowing {
    opacity: 1;
    height: 60px;
    animation: streamFlow 0.2s linear infinite;
}

@keyframes streamFlow {
    0% {
        background: linear-gradient(180deg,
            rgba(100,180,246,0.9),
            rgba(30,136,229,0.7));
    }
    50% {
        background: linear-gradient(180deg,
            rgba(120,190,250,0.9),
            rgba(50,150,240,0.7));
    }
    100% {
        background: linear-gradient(180deg,
            rgba(100,180,246,0.9),
            rgba(30,136,229,0.7));
    }
}

/* === CUP === */
.cup-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.water-cup {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cup-rim {
    width: 90px;
    height: 8px;
    background: linear-gradient(180deg, #fff, #f0f0f0);
    border-radius: 50%;
    border: 2px solid #ddd;
    z-index: 2;
}

.cup-body {
    width: 80px;
    height: 120px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.95),
        rgba(245,245,245,0.9),
        rgba(255,255,255,0.95));
    border-radius: 5px 5px 15px 15px;
    position: relative;
    overflow: hidden;
    border: 2px solid #e0e0e0;
    border-top: none;
    margin-top: -4px;
    box-shadow:
        inset 2px 0 10px rgba(0,0,0,0.05),
        inset -2px 0 10px rgba(0,0,0,0.05);
}

.cup-reflection {
    position: absolute;
    top: 10px;
    left: 8px;
    width: 12px;
    height: 50px;
    background: linear-gradient(180deg, rgba(255,255,255,0.8), transparent);
    border-radius: 6px;
    z-index: 5;
}

.cup-base {
    width: 50px;
    height: 6px;
    background: linear-gradient(180deg, #e0e0e0, #ccc);
    border-radius: 0 0 5px 5px;
    margin-top: -2px;
}

.cup-shadow {
    width: 60px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.2), transparent);
    border-radius: 50%;
    margin-top: 5px;
}

/* Water Fill */
.water-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg,
        rgba(100,180,246,0.85) 0%,
        rgba(30,136,229,0.9) 50%,
        rgba(21,101,192,0.95) 100%);
    transition: height 0.05s linear;
    z-index: 1;
}

.water-surface {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg,
        rgba(150,210,255,0.9),
        rgba(100,180,246,0.85));
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* Target Line & Zone */
.target-line {
    position: absolute;
    left: -10px;
    right: -10px;
    height: 3px;
    background: #ff4444;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 0 8px rgba(255,68,68,0.6);
}

.target-arrow {
    color: #ff4444;
    font-size: 14px;
    margin-right: -18px;
    animation: arrowPulse 1s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { opacity: 1; transform: translateX(0); }
    50% { opacity: 0.6; transform: translateX(-3px); }
}

.target-zone {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(76, 175, 80, 0.15);
    border: 2px dashed rgba(76, 175, 80, 0.5);
    z-index: 3;
}

/* Instructions */
.water-instructions {
    text-align: center;
    margin-top: 20px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.water-instructions kbd {
    background: #334155;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    border: 1px solid #475569;
}

.submit-water-btn {
    margin-top: 15px;
    padding: 12px 32px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(34,197,94,0.3);
    transition: all 0.2s;
}

.submit-water-btn:hover {
    background: linear-gradient(180deg, #16a34a, #15803d);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34,197,94,0.4);
}

/* Vertical Finish Button (Water Cooler) */
.finish-btn-vertical {
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    padding: 12px 6px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    transition: all 0.2s;
    animation: finishPulse 1.5s ease-in-out infinite;
    z-index: 10;
}

.finish-btn-vertical span {
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}

.finish-btn-vertical:hover {
    background: linear-gradient(180deg, #16a34a, #15803d);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}

.finish-btn-vertical:active {
    transform: translateY(-50%) scale(0.95);
}

@keyframes finishPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(34, 197, 94, 0.7);
    }
}

/* Cup Progress Indicator */
.cup-progress {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.cup-indicator {
    width: 50px;
    height: 60px;
    background: rgba(51, 65, 85, 0.6);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.cup-indicator.current {
    border-color: #60a5fa;
    background: rgba(96, 165, 250, 0.2);
    transform: scale(1.1);
}

.cup-indicator.completed {
    background: rgba(34, 197, 94, 0.3);
    border-color: #22c55e;
}

.cup-indicator.next.clickable {
    cursor: pointer;
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
    animation: nextCupPulse 1.5s ease-in-out infinite;
}

.cup-indicator.next.clickable:hover {
    background: rgba(251, 191, 36, 0.4);
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
}

.cup-indicator.next.clickable .cup-icon {
    color: #fbbf24;
    font-weight: bold;
}

@keyframes nextCupPulse {
    0%, 100% {
        border-color: #fbbf24;
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
    }
    50% {
        border-color: #f59e0b;
        box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
    }
}

.cup-indicator.cold .cup-type-label {
    color: #60a5fa;
}

.cup-indicator.hot .cup-type-label {
    color: #f97316;
}

.cup-icon {
    font-size: 16px;
    color: white;
}

.cup-type-label {
    font-size: 18px;
}

/* Current Request Banner */
.current-request {
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.current-request.cold {
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, 0.4);
}

.current-request.hot {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

/* Highlighted Tap */
.tap-area.highlighted {
    animation: tapPulse 1s ease-in-out infinite;
}

.tap-area.highlighted .tap {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

@keyframes tapPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Hot Water Fill */
.water-fill.hot {
    background: linear-gradient(180deg,
        rgba(251, 146, 60, 0.85) 0%,
        rgba(234, 88, 12, 0.9) 50%,
        rgba(194, 65, 12, 0.95) 100%);
}

.water-fill.hot .water-surface {
    background: linear-gradient(180deg,
        rgba(253, 186, 116, 0.9),
        rgba(251, 146, 60, 0.85));
}

/* Cold Water Fill (default blue) */
.water-fill.cold {
    background: linear-gradient(180deg,
        rgba(100,180,246,0.85) 0%,
        rgba(30,136,229,0.9) 50%,
        rgba(21,101,192,0.95) 100%);
}

/* Hot Water Stream */
.water-stream.hot {
    background: linear-gradient(180deg,
        rgba(251, 146, 60, 0.9),
        rgba(234, 88, 12, 0.7));
}

.water-stream.hot.flowing {
    animation: streamFlowHot 0.2s linear infinite;
}

@keyframes streamFlowHot {
    0%, 100% {
        background: linear-gradient(180deg,
            rgba(251, 146, 60, 0.9),
            rgba(234, 88, 12, 0.7));
    }
    50% {
        background: linear-gradient(180deg,
            rgba(253, 186, 116, 0.9),
            rgba(249, 115, 22, 0.7));
    }
}

/* Water Feedback Message */
.water-feedback {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    animation: feedbackPop 0.3s ease-out;
}

.water-feedback.error {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.water-feedback.success {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

@keyframes feedbackPop {
    0% { transform: translateX(-50%) scale(0.8); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ID Card Swipe Game - Horizontal Swipe Design */
.swipe-scene-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    min-height: 380px;
    position: relative;
}

/* Horizontal Card Reader */
.horizontal-reader {
    position: relative;
    z-index: 10;
}

.reader-body-h {
    width: 280px;
    background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
    border-radius: 12px;
    box-shadow:
        0 8px 30px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);
    overflow: hidden;
}

.reader-top-h {
    background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #444;
}

.reader-brand-h {
    font-size: 14px;
    font-weight: 700;
    color: #999;
    letter-spacing: 4px;
}

.reader-model-h {
    font-size: 8px;
    color: #666;
}

.reader-display-h {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #333;
}

.lcd-screen-h {
    flex: 1;
    background: #0a2a0a;
    padding: 8px 12px;
    border-radius: 4px;
    border: 2px solid #333;
}

.lcd-text-h {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #33ff33;
    text-shadow: 0 0 8px #33ff33;
    letter-spacing: 1px;
}

.lcd-text-h.success {
    color: #00ff00;
    animation: textFlash 0.3s ease-in-out 3;
}

.lcd-text-h.error {
    color: #ff3333;
    text-shadow: 0 0 8px #ff3333;
}

.status-leds-h {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.led-row-h {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-led-h {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #444;
}

.status-led-h.red { background: #3a1a1a; }
.status-led-h.red.active { background: #ff3333; box-shadow: 0 0 10px #ff3333; }
.status-led-h.green { background: #1a3a1a; }
.status-led-h.green.active { background: #33ff33; box-shadow: 0 0 10px #33ff33; }

.led-label-h {
    font-size: 7px;
    color: #666;
    font-weight: 600;
}

/* Slot Window Section - Card passes through horizontally */
.slot-window-section {
    padding: 10px 15px;
    background: linear-gradient(180deg, #1f1f1f, #1a1a1a);
    display: flex;
    align-items: center;
    gap: 8px;
}

.slot-entry-h, .slot-exit-h {
    font-size: 8px;
    color: #555;
    letter-spacing: 1px;
    white-space: nowrap;
}

.slot-window {
    flex: 1;
    height: 70px;
    background: linear-gradient(180deg, #0a0a0a, #050505);
    border-radius: 6px;
    border: 3px solid #333;
    position: relative;
    overflow: hidden;
}

.slot-window-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(20,20,30,0.9) 0%,
        rgba(10,10,20,0.95) 50%,
        rgba(20,20,30,0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slot window edge shadows */
.slot-window::before,
.slot-window::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15px;
    z-index: 20;
    pointer-events: none;
}

.slot-window::before {
    left: 0;
    background: linear-gradient(90deg, #1a1a1a, transparent);
}

.slot-window::after {
    right: 0;
    background: linear-gradient(90deg, transparent, #1a1a1a);
}

/* Speed Section */
.speed-section-h {
    padding: 10px 15px;
    background: #1a1a1a;
}

.speed-label-h {
    font-size: 8px;
    color: #666;
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.speed-gauge-h {
    display: flex;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #333;
}

.gauge-zone-h {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    color: white;
}

.gauge-zone-h.slow { background: linear-gradient(180deg, #f59e0b, #d97706); }
.gauge-zone-h.good { background: linear-gradient(180deg, #22c55e, #16a34a); }
.gauge-zone-h.fast { background: linear-gradient(180deg, #ef4444, #dc2626); }

.gauge-needle-h {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid white;
    margin: 4px auto 0;
    transition: margin-left 0.1s ease-out;
}

.reader-bottom-h {
    background: #222;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
}

.screw-h {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #444, #333);
    border-radius: 50%;
    border: 1px solid #555;
    position: relative;
}

.screw-h::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    color: #222;
    font-weight: bold;
}

/* The Horizontal ID Card */
.card-track-horizontal {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.id-card-horizontal {
    width: 160px;
    height: 100px;
    background: linear-gradient(180deg, #ffffff, #f5f7fa);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: grab;
    transition: transform 0.05s linear;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ddd;
}

.id-card-horizontal.swiping {
    cursor: grabbing;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.id-card-horizontal.success-swipe {
    cursor: default;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.5);
    border-color: #22c55e;
    transition: transform 0.3s ease-out;
}

.card-top-edge {
    height: 12px;
    background: linear-gradient(90deg, #333, #222);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-magstripe-h {
    width: 90%;
    height: 6px;
    background: linear-gradient(180deg, #111, #2a2a2a, #111);
    border-radius: 2px;
}

.card-face-h {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-header-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 3px;
}

.company-logo-h {
    font-size: 10px;
    font-weight: 800;
    color: #1565C0;
    letter-spacing: 1px;
}

.card-type-h {
    font-size: 6px;
    color: #888;
    font-weight: 600;
}

.card-content-h {
    display: flex;
    gap: 8px;
    flex: 1;
}

.card-photo-h {
    width: 35px;
    height: 40px;
    background: #e8e8e8;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid #ddd;
}

.card-info-h {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.card-name-h {
    font-size: 9px;
    font-weight: 700;
    color: #333;
}

.card-dept-h {
    font-size: 7px;
    color: #666;
}

.card-id-h {
    font-size: 6px;
    color: #999;
    font-family: monospace;
}

.card-barcode-h {
    height: 10px;
    background: repeating-linear-gradient(
        90deg,
        #000 0px, #000 1px,
        transparent 1px, transparent 3px
    );
    border-radius: 2px;
}

/* Instructions */
.swipe-instruction-new {
    text-align: center;
    color: #94a3b8;
    font-size: 0.95rem;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.instruction-icon {
    font-size: 1.4rem;
    animation: bounceRight 1s ease-in-out infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes textFlash {
    50% { opacity: 0.5; }
}

/* Hide legacy vertical swipe elements */
.swipe-scene { display: none; }
.swipe-assembly { display: none; }
.vertical-reader { display: none; }
.swipe-card-track { display: none; }
.id-card-wrapper { display: none; }
.id-card-vertical { display: none; }
.card-reader-scene { display: none; }
.card-reader-container { display: none; }
.swipe-instruction:not(.swipe-instruction-new) { display: none; }

/* Bug Zapper Game */
.bug-game-layout {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
}

/* Bug Legend */
.bug-legend {
    width: 160px;
    background: rgba(30, 41, 59, 0.9);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.legend-title {
    font-size: 12px;
    font-weight: 700;
    color: #60a5fa;
    text-align: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(96, 165, 250, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 6px;
    background: rgba(51, 65, 85, 0.5);
    transition: all 0.2s;
}

.legend-item.hit {
    background: rgba(34, 197, 94, 0.3);
    transform: scale(1.02);
}

.legend-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.legend-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.legend-name {
    font-size: 9px;
    font-weight: 600;
    color: #e2e8f0;
}

.legend-points {
    font-size: 8px;
    color: #94a3b8;
}

.legend-count {
    font-size: 12px;
    font-weight: 700;
    color: #22c55e;
    min-width: 18px;
    text-align: center;
}

/* Bug Screen / Monitor */
.bug-screen {
    width: 320px;
}

.computer-frame {
    background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.monitor-top {
    background: #222;
    padding: 6px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: center;
}

.monitor-camera {
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    border: 2px solid #444;
}

.screen-content {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #0a0a1a, #0f172a);
    position: relative;
    overflow: hidden;
    border: 3px solid #111;
}

.screen-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.1) 2px,
        rgba(0,0,0,0.1) 4px
    );
    pointer-events: none;
    z-index: 10;
}

.monitor-bottom {
    background: #222;
    padding: 8px;
    border-radius: 0 0 8px 8px;
    text-align: center;
}

.monitor-logo {
    font-size: 10px;
    font-weight: 700;
    color: #555;
    letter-spacing: 2px;
}

.monitor-stand {
    width: 60px;
    height: 30px;
    background: linear-gradient(180deg, #333, #222);
    margin: 0 auto;
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

.monitor-base {
    width: 100px;
    height: 8px;
    background: linear-gradient(180deg, #333, #222);
    margin: 0 auto;
    border-radius: 0 0 4px 4px;
}

/* Bugs */
.bug {
    position: absolute;
    cursor: pointer;
    transition: left 0.3s ease, top 0.3s ease;
    animation: bugWiggle 0.4s infinite;
    z-index: 5;
}

.bug-emoji {
    font-size: 1.6rem;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.bug::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: var(--bug-color, #22c55e);
    opacity: 0.3;
    border-radius: 50%;
    z-index: -1;
}

@keyframes bugWiggle {
    0%, 100% { transform: rotate(-8deg) scale(1); }
    50% { transform: rotate(8deg) scale(1.05); }
}

.bug:hover {
    transform: scale(1.3);
    z-index: 20;
}

.bug:hover::before {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1.3);
}

.bug.squashed {
    animation: none;
    transform: scale(1.8);
    z-index: 20;
}

.bug.squashed::before {
    display: none;
}

.bug.escaped {
    opacity: 0;
    transform: scale(0);
}

.bug-instruction {
    text-align: center;
    margin-top: 15px;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Lives Display */
.lives-display {
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* File Warning in Legend */
.file-warning {
    margin-top: 15px;
    padding: 10px;
    background: linear-gradient(180deg, #7f1d1d, #450a0a);
    border-radius: 8px;
    border: 1px solid #dc2626;
    text-align: center;
}

.warning-title {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fca5a5;
    margin-bottom: 5px;
}

.file-icons {
    font-size: 1.4rem;
    letter-spacing: 4px;
}

/* Screen Files */
.screen-file {
    position: absolute;
    cursor: pointer;
    z-index: 4;
    transition: transform 0.2s ease;
}

.file-emoji {
    font-size: 1.8rem;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(255,255,255,0.3));
}

.screen-file::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    z-index: -1;
}

.screen-file:hover {
    transform: scale(1.2);
}

.screen-file:hover::before {
    background: rgba(59, 130, 246, 0.5);
}

.screen-file.deleted {
    animation: fileDelete 0.3s forwards;
}

.screen-file.deleted::before {
    background: rgba(239, 68, 68, 0.5);
}

.screen-file.fading {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

@keyframes fileDelete {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(0); opacity: 0; }
}

/* File Delete Warning */
.file-delete-warning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(220, 38, 38, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 100;
    animation: warningPop 0.3s ease;
    text-align: center;
}

@keyframes warningPop {
    0% { transform: translate(-50%, -50%) scale(0); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Secret Code Game - License Key Style */
.license-code-panel {
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border-radius: 12px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid #334155;
    transition: all 0.3s;
}

.license-code-panel.success {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.license-code-panel.error {
    animation: panelShake 0.3s ease;
    border-color: #ef4444;
}

@keyframes panelShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #334155;
}

.panel-icon {
    font-size: 1.5rem;
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
}

.code-display-area {
    margin-bottom: 15px;
}

.code-label {
    display: block;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 8px;
}

.code-to-enter-long {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
    background: #0f172a;
    padding: 12px 15px;
    border-radius: 6px;
    color: #60a5fa;
    border: 1px solid #334155;
    text-align: center;
    word-break: break-all;
}

.code-entry-area {
    margin-bottom: 15px;
}

.code-input-long {
    min-height: 45px;
    background: #020617;
    padding: 10px 15px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 2px solid #334155;
    transition: border-color 0.2s;
}

.code-input-long:focus-within {
    border-color: #60a5fa;
}

.code-char {
    color: #22c55e;
}

.code-dash {
    color: #475569;
    margin: 0 2px;
}

.cursor {
    color: #60a5fa;
    animation: blink 0.8s infinite;
}

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

.code-progress {
    text-align: right;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 6px;
    padding-right: 5px;
}

.code-progress.complete {
    color: #22c55e;
}

/* Keyboard */
.keyboard-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.keyboard-row {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.kb-key {
    min-width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, #334155, #1e293b);
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.kb-key:hover {
    background: linear-gradient(180deg, #475569, #334155);
    transform: translateY(-1px);
}

.kb-key:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.kb-key.num {
    background: linear-gradient(180deg, #1e3a5f, #0f2744);
    color: #60a5fa;
}

.kb-key.action {
    font-size: 0.75rem;
    padding: 0 12px;
}

.kb-key.clear {
    background: linear-gradient(180deg, #7f1d1d, #5c1a1a);
    color: #fca5a5;
}

.kb-key.backspace {
    background: linear-gradient(180deg, #78350f, #5c2d0e);
    color: #fcd34d;
    font-size: 1.1rem;
}

.kb-key.submit {
    background: linear-gradient(180deg, #166534, #14532d);
    color: #86efac;
    min-width: 100px;
}

.kb-key.submit:hover {
    background: linear-gradient(180deg, #15803d, #166534);
}

/* Legacy support */
.code-display { display: none; }
.code-entry { display: none; }
.keypad { display: none; }

.key-btn:active {
    transform: scale(0.95);
}

/* File Sort Game - File Cabinet Design */
.file-sort-scene {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px;
    min-height: 350px;
}

/* Document Area (Left Side) */
.document-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inbox-tray {
    width: 180px;
    background: linear-gradient(180deg, #4a5568, #2d3748);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.tray-label {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #a0aec0;
    letter-spacing: 2px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #5a6779;
}

.document-stack {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remaining-count {
    text-align: center;
    font-size: 11px;
    color: #718096;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #4a5568;
}

/* Document Card */
.document-card {
    width: 150px;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s;
    border-left: 4px solid var(--doc-color, #60a5fa);
}

.document-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.document-card.enter {
    animation: docEnter 0.3s ease-out;
}

@keyframes docEnter {
    0% { transform: translateY(-20px) rotate(-5deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
}

.document-card.filing {
    animation: docFile 0.4s ease-out forwards;
}

@keyframes docFile {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8) translateX(50px); opacity: 0.5; }
    100% { transform: scale(0) translateX(100px); opacity: 0; }
}

.document-card.wrong {
    animation: docWrong 0.4s ease-out;
    border-left-color: #ef4444;
}

@keyframes docWrong {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

.doc-icon-area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.doc-icon {
    font-size: 28px;
}

.doc-type-badge {
    background: var(--doc-color, #60a5fa);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.doc-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-filename {
    font-size: 11px;
    font-weight: 600;
    color: #1a202c;
    word-break: break-all;
    line-height: 1.3;
}

.doc-hint {
    font-size: 9px;
    color: #718096;
    font-style: italic;
}

/* Filing Area (Right Side) */
.filing-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* File Cabinet */
.file-cabinet {
    width: 160px;
    background: linear-gradient(180deg, #718096, #4a5568);
    border-radius: 6px;
    box-shadow:
        0 8px 25px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    overflow: hidden;
}

.cabinet-top {
    background: linear-gradient(180deg, #5a6779, #4a5568);
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid #3d4854;
}

.cabinet-label {
    font-size: 10px;
    font-weight: 700;
    color: #cbd5e0;
    letter-spacing: 2px;
}

.cabinet-drawer {
    background: linear-gradient(180deg, #e2e8f0, #cbd5e0);
    margin: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cabinet-drawer:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.cabinet-drawer:active {
    transform: translateY(1px);
}

.cabinet-drawer.correct {
    background: linear-gradient(180deg, #86efac, #4ade80);
    animation: drawerSuccess 0.3s ease-out;
}

@keyframes drawerSuccess {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.cabinet-drawer.wrong {
    background: linear-gradient(180deg, #fca5a5, #f87171);
    animation: shake 0.3s ease-out;
}

.drawer-front {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-handle {
    width: 24px;
    height: 8px;
    background: linear-gradient(180deg, #a0aec0, #718096);
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

.drawer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.drawer-icon {
    font-size: 16px;
}

.drawer-text {
    font-size: 11px;
    font-weight: 600;
    color: #2d3748;
}

.cabinet-base {
    height: 15px;
    background: linear-gradient(180deg, #4a5568, #2d3748);
    border-radius: 0 0 6px 6px;
}

/* Trash Can - File Sort */
.file-sort-scene .trash-area {
    display: flex;
    justify-content: center;
    width: auto;
    height: auto;
    background: transparent;
    overflow: visible;
    border-radius: 0;
}

.file-sort-scene .trash-can {
    width: 80px;
    cursor: pointer;
    transition: all 0.2s;
}

.file-sort-scene .trash-can:hover {
    transform: scale(1.1);
}

.file-sort-scene .trash-can:hover .trash-lid {
    transform: rotate(-20deg) translateY(-5px);
}

.file-sort-scene .trash-can.correct {
    animation: trashSuccess 0.4s ease-out;
}

@keyframes trashSuccess {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.file-sort-scene .trash-can.wrong {
    animation: shake 0.3s ease-out;
}

.file-sort-scene .trash-lid {
    width: 85px;
    height: 12px;
    background: linear-gradient(180deg, #6b7280, #4b5563);
    border-radius: 4px 4px 0 0;
    margin-left: -2px;
    transition: all 0.2s;
    transform-origin: left center;
}

.file-sort-scene .trash-body {
    width: 80px;
    height: 70px;
    background: linear-gradient(180deg, #4b5563, #374151);
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.file-sort-scene .trash-icon {
    font-size: 20px;
}

.file-sort-scene .trash-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
}

/* Sort Instructions */
.sort-instructions {
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Legacy File Sort (hidden) */
.file-sort-area { display: none; }
.file-inbox { display: none; }
.folders-container { display: none; }

/* Coffee Machine Game - Realistic Design */
.coffee-machine-realistic {
    width: 280px;
    margin: 0 auto;
    background: linear-gradient(180deg, #2d2d2d, #1a1a1a);
    border-radius: 15px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);
    overflow: hidden;
}

.machine-top {
    background: linear-gradient(180deg, #3a3a3a, #2d2d2d);
    padding: 12px;
    text-align: center;
    border-bottom: 2px solid #222;
}

.machine-brand {
    font-size: 16px;
    font-weight: 800;
    color: #c0a060;
    letter-spacing: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.machine-model {
    font-size: 9px;
    color: #666;
    letter-spacing: 2px;
    margin-top: 2px;
}

/* LCD Display Panel */
.machine-display-panel {
    padding: 15px;
    background: #1f1f1f;
    border-bottom: 1px solid #333;
}

.lcd-display {
    background: linear-gradient(180deg, #0a2a0a, #061806);
    padding: 12px;
    border-radius: 6px;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lcd-display.success {
    background: linear-gradient(180deg, #0a3a0a, #082808);
}

.lcd-display.success .lcd-text,
.lcd-display.success .lcd-icon {
    color: #00ff00;
    text-shadow: 0 0 15px #00ff00;
}

.lcd-display.error {
    background: linear-gradient(180deg, #3a0a0a, #280808);
}

.lcd-display.error .lcd-text,
.lcd-display.error .lcd-icon {
    color: #ff3333;
    text-shadow: 0 0 15px #ff3333;
}

.lcd-icon {
    font-size: 1.8rem;
}

.lcd-text {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #33ff33;
    text-shadow: 0 0 8px #33ff33;
    letter-spacing: 2px;
}

.display-leds {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.led-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    border: 1px solid #444;
}

.led-indicator.power-led { background: #2a1a1a; }
.led-indicator.power-led.active { background: #ff3333; box-shadow: 0 0 8px #ff3333; }
.led-indicator.heat-led { background: #2a2a1a; }
.led-indicator.heat-led.active { background: #ffaa00; box-shadow: 0 0 8px #ffaa00; }
.led-indicator.ready-led { background: #1a2a1a; }
.led-indicator.ready-led.active { background: #33ff33; box-shadow: 0 0 8px #33ff33; }

/* Button Panel */
.machine-button-panel {
    padding: 20px;
    background: linear-gradient(180deg, #2a2a2a, #1f1f1f);
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 15px;
}

.button-row:last-child {
    margin-bottom: 0;
}

.machine-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.machine-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 8px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(255,255,255,0.1);
}

.machine-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.machine-btn:active:not(:disabled),
.machine-btn.pressed {
    transform: scale(0.95) translateY(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.machine-btn .btn-icon {
    font-size: 1.4rem;
    z-index: 2;
}

.machine-btn .btn-led {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    border: 1px solid #222;
}

/* Button Colors */
.machine-btn.power-btn {
    background: linear-gradient(180deg, #4a4a4a, #333);
}
.machine-btn.power-btn.flash {
    background: linear-gradient(180deg, #ffd700, #ff8c00);
    box-shadow: 0 0 20px rgba(255,215,0,0.6);
}
.machine-btn.power-btn.flash .btn-led {
    background: #ffd700;
    box-shadow: 0 0 8px #ffd700;
}

.machine-btn.size-btn {
    background: linear-gradient(180deg, #4a4a4a, #333);
}
.machine-btn.size-btn.flash {
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    box-shadow: 0 0 20px rgba(96,165,250,0.6);
}
.machine-btn.size-btn.flash .btn-led {
    background: #60a5fa;
    box-shadow: 0 0 8px #60a5fa;
}

.machine-btn.strength-btn {
    background: linear-gradient(180deg, #4a4a4a, #333);
}
.machine-btn.strength-btn.flash {
    background: linear-gradient(180deg, #f472b6, #ec4899);
    box-shadow: 0 0 20px rgba(244,114,182,0.6);
}
.machine-btn.strength-btn.flash .btn-led {
    background: #f472b6;
    box-shadow: 0 0 8px #f472b6;
}

.machine-btn.brew-btn {
    background: linear-gradient(180deg, #4a4a4a, #333);
}
.machine-btn.brew-btn.flash {
    background: linear-gradient(180deg, #4ade80, #22c55e);
    box-shadow: 0 0 20px rgba(74,222,128,0.6);
}
.machine-btn.brew-btn.flash .btn-led {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}

.btn-label {
    font-size: 9px;
    font-weight: 600;
    color: #888;
    letter-spacing: 1px;
}

/* Dispenser Section */
.machine-dispenser {
    background: linear-gradient(180deg, #1a1a1a, #111);
    padding: 15px;
    position: relative;
}

.dispenser-nozzle {
    width: 40px;
    height: 25px;
    background: linear-gradient(180deg, #444, #333);
    margin: 0 auto;
    border-radius: 0 0 8px 8px;
    position: relative;
}

.dispenser-nozzle.brewing::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 30px;
    background: linear-gradient(180deg, #6b4423, #4a3019);
    border-radius: 2px;
    animation: coffeePour 0.3s ease-in-out infinite;
}

@keyframes coffeePour {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.nozzle-holes {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding-top: 8px;
}

.nozzle-holes::before,
.nozzle-holes::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #222;
    border-radius: 50%;
}

.cup-platform {
    width: 100px;
    height: 50px;
    margin: 20px auto 10px;
    background: linear-gradient(180deg, #333, #222);
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
}

.coffee-cup-small {
    width: 45px;
}

.cup-body-small {
    width: 45px;
    height: 35px;
    background: linear-gradient(90deg, #f5f5f5, #fff, #f5f5f5);
    border-radius: 3px 3px 8px 8px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.cup-body-small::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 8px;
    width: 12px;
    height: 18px;
    border: 3px solid #ddd;
    border-left: none;
    border-radius: 0 10px 10px 0;
}

.drip-tray-coffee {
    width: 120px;
    height: 10px;
    margin: 0 auto;
    background: linear-gradient(180deg, #222, #1a1a1a);
    border-radius: 3px;
}

.drip-grate-coffee {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #333 0px, #333 3px,
        #1a1a1a 3px, #1a1a1a 6px
    );
    border-radius: 3px;
}

/* Round Progress */
.round-progress {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.round-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #334155;
    border: 2px solid #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
    transition: all 0.3s;
}

.round-indicator.current {
    background: #1e3a5f;
    border-color: #60a5fa;
    color: #60a5fa;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}

.round-indicator.completed {
    background: #166534;
    border-color: #22c55e;
    color: #22c55e;
}

.round-indicator.failed {
    background: #7f1d1d;
    border-color: #ef4444;
    color: #ef4444;
}

/* Tolerance hint */
.tolerance-hint {
    font-size: 0.8rem;
    color: #fbbf24;
    margin-top: 5px;
}

/* Stopwatch button states */
.stopwatch-btn.success {
    background: linear-gradient(180deg, #22c55e, #16a34a) !important;
    cursor: default;
}

.stopwatch-btn.failed {
    background: linear-gradient(180deg, #ef4444, #dc2626) !important;
    cursor: default;
}

/* Sequence Progress */
.sequence-progress-new {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.progress-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #334155;
    border: 2px solid #475569;
    transition: all 0.2s;
}

.progress-dot.correct {
    background: #22c55e;
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.5);
}

.progress-dot.wrong {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 0 8px rgba(239,68,68,0.5);
}

/* Hide legacy coffee machine */
.coffee-machine { display: none; }
.coffee-display:not(.lcd-display) { display: none; }
.coffee-buttons { display: none; }
.coffee-btn:not(.machine-btn) { display: none; }
.sequence-progress:not(.sequence-progress-new) { display: none; }

/* Printer Fix Game - Realistic Design */
.printer-instruction {
    text-align: center;
    color: #94a3b8;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

/* Modern Printer Design - increased size by 50% */
.modern-printer {
    width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, #2d2d2d, #1a1a1a);
    border-radius: 12px;
    box-shadow: 0 15px 60px rgba(0,0,0,0.4);
    overflow: visible;
    position: relative;
}

.printer-scanner-top {
    background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
    padding: 5px 12px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scanner-lid {
    width: 60px;
    height: 8px;
    background: linear-gradient(180deg, #555, #444);
    border-radius: 4px;
    position: relative;
}

.lid-handle {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 6px;
    background: #666;
    border-radius: 0 0 3px 3px;
}

.brand-area {
    text-align: right;
}

.printer-brand-name {
    font-size: 12px;
    font-weight: 700;
    color: #00a8e8;
    letter-spacing: 2px;
    display: block;
}

.printer-model-num {
    font-size: 8px;
    color: #666;
}

/* Printer Control Panel */
.printer-control {
    background: linear-gradient(180deg, #444, #333);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-screen {
    flex: 1;
    background: #001a00;
    padding: 5px 8px;
    border-radius: 3px;
    border: 1px solid #222;
}

.control-screen .screen-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.control-screen .status-icon {
    font-size: 12px;
}

.control-screen .status-text {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: #ff6b6b;
    text-shadow: 0 0 5px rgba(255,107,107,0.5);
    letter-spacing: 1px;
}

.control-screen.ready .status-text {
    color: #4ade80;
    text-shadow: 0 0 5px rgba(74,222,128,0.5);
}

.control-buttons {
    display: flex;
    gap: 6px;
}

.ctrl-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: none;
    background: linear-gradient(180deg, #555, #444);
    color: #888;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ctrl-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ctrl-btn .btn-symbol {
    font-size: 11px;
}

.ctrl-btn .btn-text {
    font-size: 5px;
    font-weight: 700;
}

.ctrl-btn.ink-btn.active {
    background: linear-gradient(180deg, #0ea5e9, #0284c7);
    color: white;
    animation: inkBtnPulse 1s infinite;
}

@keyframes inkBtnPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(14,165,233,0.5); }
    50% { box-shadow: 0 0 15px rgba(14,165,233,0.8); }
}

.status-lights {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #222;
}

.status-light.error-light {
    background: #3a1a1a;
}

.status-light.error-light.active {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: ledBlink 0.8s infinite;
}

.status-light.ready-light {
    background: #1a3a1a;
}

.status-light.ready-light.active {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

@keyframes ledBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Printer Body */
.printer-body-main {
    background: linear-gradient(180deg, #e5e5e5, #d4d4d4);
    padding: 8px;
    min-height: auto;
}

.paper-output-slot {
    background: linear-gradient(180deg, #ccc, #bbb);
    height: 8px;
    border-radius: 2px;
    margin-bottom: 6px;
    padding: 2px 8px;
}

.output-opening {
    background: #1a1a1a;
    height: 100%;
    border-radius: 1px;
}

/* Front Access Panel with Paper Trays */
.front-access-panel {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.paper-tray {
    flex: 1;
    background: linear-gradient(180deg, #f5f5f5, #e8e8e8);
    border: 2px solid #ef4444;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    position: relative;
}

.paper-tray:not(.cleared) {
    animation: trayPulse 1.5s infinite;
}

@keyframes trayPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 12px rgba(239,68,68,0.6); }
}

.tray-front {
    padding: 5px;
    text-align: center;
    transition: all 0.3s;
}

.tray-number {
    width: 16px;
    height: 16px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2px;
}

.tray-handle {
    width: 24px;
    height: 3px;
    background: #999;
    border-radius: 2px;
    margin: 0 auto 2px;
}

.jam-indicator {
    font-size: 7px;
    color: #ef4444;
    font-weight: 700;
}

.tray-interior {
    background: #2a2a2a;
    padding: 6px;
    text-align: center;
    display: none;
}

.jammed-paper {
    font-size: 18px;
    animation: paperShake 0.3s infinite;
}

@keyframes paperShake {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.clear-status {
    display: none;
    color: #22c55e;
    font-size: 10px;
    font-weight: 700;
    margin-top: 5px;
}

/* Tray States */
.paper-tray:hover:not(.cleared):not(.open) {
    transform: scale(1.03);
    border-color: #dc2626;
}

.paper-tray.open .tray-front {
    transform: translateY(-100%);
    opacity: 0;
}

.paper-tray.open .tray-interior {
    display: block;
}

.paper-tray.cleared {
    border-color: #22c55e;
    animation: none;
    cursor: default;
}

.paper-tray.cleared .tray-number {
    background: #22c55e;
}

.paper-tray.cleared .jam-indicator {
    display: none;
}

.paper-tray.cleared .jammed-paper {
    display: none;
    animation: none;
}

.paper-tray.cleared .clear-status {
    display: block;
}

.paper-tray.wrong {
    animation: trayShake 0.3s;
    border-color: #dc2626;
    background: #fee2e2;
}

@keyframes trayShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Ink Bay */
.ink-bay {
    background: linear-gradient(180deg, #d4d4d4, #c4c4c4);
    border-radius: 4px;
    overflow: hidden;
    height: 32px;
    position: relative;
    border: 1px solid #aaa;
}

.ink-bay-door {
    background: linear-gradient(180deg, #888, #666);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}

.door-label {
    font-size: 8px;
    color: #ccc;
    letter-spacing: 1px;
}

.ink-bay-interior {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.ink-bay.open .ink-bay-door {
    transform: rotateX(90deg);
    opacity: 0;
}

.ink-bay.open .ink-bay-interior {
    opacity: 1;
}

.cartridge-slot {
    width: 90%;
    height: 24px;
    border: 2px dashed #444;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.slot-guide {
    font-size: 8px;
    color: #666;
}

.cartridge-slot.hover {
    border-color: #22c55e;
    background: rgba(34,197,94,0.2);
}

.cartridge-slot.filled {
    border-style: solid;
    border-color: #22c55e;
    background: linear-gradient(180deg, #333, #222);
}

.cartridge-slot.filled .slot-guide {
    display: none;
}

.slot-receptacle {
    display: none;
}

.cartridge-slot.filled .slot-receptacle {
    display: flex;
    gap: 3px;
}

/* Bottom Paper Tray */
.bottom-paper-tray {
    background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
    padding: 5px 12px;
    border-radius: 0 0 8px 8px;
}

.tray-papers {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.paper-in-tray {
    height: 2px;
    background: #f5f5f5;
    border-radius: 1px;
    margin-left: 15px;
}

.paper-in-tray:nth-child(2) {
    margin-left: 25px;
    width: calc(100% - 25px);
}

/* New Ink Cartridge (Draggable) */
.new-ink-cartridge {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #333, #222);
    border-radius: 5px;
    padding: 6px;
    cursor: grab;
    z-index: 100;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    transition: transform 0.1s, box-shadow 0.2s;
    user-select: none;
}

.new-ink-cartridge:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

.new-ink-cartridge.dragging {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.new-ink-cartridge.inserted {
    animation: insertCartridge 0.5s forwards;
}

@keyframes insertCartridge {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0; }
}

.cartridge-handle {
    text-align: center;
    font-size: 7px;
    color: #888;
    margin-bottom: 3px;
    letter-spacing: 1px;
}

.cartridge-main {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: #1a1a1a;
    border-radius: 3px;
}

.ink-colors {
    display: flex;
    gap: 2px;
}

.ink-chamber {
    width: 12px;
    height: 18px;
    border-radius: 2px;
}

.ink-chamber.cyan { background: linear-gradient(180deg, #06b6d4, #0891b2); }
.ink-chamber.magenta { background: linear-gradient(180deg, #ec4899, #db2777); }
.ink-chamber.yellow { background: linear-gradient(180deg, #eab308, #ca8a04); }
.ink-chamber.black { background: linear-gradient(180deg, #333, #111); }

.cartridge-chip {
    width: 16px;
    height: 12px;
    background: linear-gradient(180deg, #fbbf24, #d97706);
    border-radius: 2px;
}

.cartridge-label {
    text-align: center;
    font-size: 6px;
    color: #22c55e;
    margin-top: 3px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Hide old printer styles */
.realistic-printer {
    display: none;
}
    animation: none;
    cursor: default;
}

.jam-compartment.cleared:hover {
    transform: none;
}

.jam-compartment.wrong {
    animation: shake 0.3s;
    border-color: #dc3545;
    background: #f8d7da;
}

.compartment-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6b6b;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jam-compartment.cleared .compartment-label {
    background: #28a745;
}

.jam-paper {
    font-size: 24px;
    margin: 5px 0;
}

.compartment-status {
    font-size: 9px;
    font-weight: 700;
    color: #dc3545;
}

.jam-compartment.cleared .compartment-status {
    color: #28a745;
}

/* Ink Section */
.ink-section {
    background: linear-gradient(180deg, #e8e8e8, #ddd);
    border-radius: 6px;
    padding: 10px;
    border: 2px solid #ccc;
    opacity: 0.5;
    transition: all 0.3s;
}

.ink-section.active {
    opacity: 1;
    border-color: #ffc107;
    animation: inkPulse 1s infinite;
}

.ink-section.done {
    border-color: #28a745;
    animation: none;
}

@keyframes inkPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255,193,7,0.3); }
    50% { box-shadow: 0 0 15px rgba(255,193,7,0.6); }
}

.ink-label {
    font-size: 8px;
    font-weight: 700;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.ink-cartridge {
    cursor: pointer;
    transition: all 0.2s;
}

.ink-section.active .ink-cartridge:hover {
    transform: scale(1.05);
}

.ink-cartridge.replacing {
    animation: cartridgeSwap 0.4s ease-out;
}

@keyframes cartridgeSwap {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.cartridge-body {
    background: linear-gradient(180deg, #333, #222);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cartridge-colors {
    display: flex;
    gap: 4px;
}

.cartridge-colors span {
    width: 18px;
    height: 24px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: white;
}

.ink-c { background: #00bcd4; }
.ink-m { background: #e91e63; }
.ink-y { background: #ffeb3b; color: #333 !important; }
.ink-k { background: #212121; }

.cartridge-level {
    font-size: 8px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    background: #4caf50;
    color: white;
}

.cartridge-level.empty {
    background: #f44336;
    animation: levelBlink 0.8s infinite;
}

@keyframes levelBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.ink-cartridge.replaced .cartridge-level {
    background: #4caf50;
    animation: none;
}

/* Paper Input Tray */
.input-tray {
    background: linear-gradient(180deg, #ddd, #ccc);
    padding: 10px;
    border-radius: 0 0 12px 12px;
}

.paper-stack {
    position: relative;
    height: 20px;
}

.paper-sheet {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 3px;
    background: white;
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.paper-sheet:nth-child(1) { bottom: 0; }
.paper-sheet:nth-child(2) { bottom: 5px; left: 12%; right: 12%; }
.paper-sheet:nth-child(3) { bottom: 10px; left: 14%; right: 14%; }

/* Hide legacy printer styles */
.printer-container { display: none; }
.printer-body:not(.printer-main-body) { display: none; }
.printer-display:not(.printer-screen) { display: none; }
.jam-spot { display: none; }

/* Email Cleanup Game */
.email-instruction {
    text-align: center;
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

.email-inbox {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
}

.email-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    transition: all 0.2s;
}

.email-item.deleted {
    background: var(--success);
    opacity: 0.5;
}

.email-item.mistake {
    background: var(--error);
    animation: shake 0.3s;
}

.email-icon { font-size: 1.2rem; }

.email-subject {
    flex: 1;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.delete-btn:hover {
    opacity: 1;
}

/* Meeting Timer Game */
.meeting-display {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.target-time {
    font-size: 3rem;
    color: var(--primary-light);
    font-family: 'Courier New', monospace;
}

.stopwatch {
    background: var(--bg-dark);
    padding: var(--spacing-xl);
    border-radius: 50%;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    border: 4px solid var(--primary);
}

.stopwatch-display {
    font-size: 2.5rem;
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
}

.stopwatch-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.2rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--success);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.stopwatch-btn.running {
    background: var(--error);
}

.meeting-hint {
    text-align: center;
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Document Sign Game - Agreement Style */
.sign-instruction {
    text-align: center;
    padding: 8px 15px;
    background: linear-gradient(180deg, #1e3a5f, #0f172a);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.agreement-wrapper {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.agreement-document {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    max-height: 320px;
    overflow-y: auto;
    padding: 20px;
    color: #1a1a1a;
    font-family: 'Times New Roman', serif;
    font-size: 11px;
    line-height: 1.5;
    scroll-behavior: smooth;
}

.agreement-document::-webkit-scrollbar {
    width: 8px;
}

.agreement-document::-webkit-scrollbar-track {
    background: #e5e5e5;
    border-radius: 4px;
}

.agreement-document::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.agreement-document::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.agreement-header {
    text-align: center;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.company-logo {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #0066cc;
    margin-bottom: 5px;
}

.agreement-title {
    font-size: 16px;
    font-weight: 700;
    margin: 8px 0;
    color: #1a1a1a;
}

.agreement-date {
    font-size: 10px;
    color: #666;
    margin: 0;
}

.agreement-intro {
    margin-bottom: 15px;
    text-align: justify;
}

.agreement-section {
    margin-bottom: 20px;
}

.agreement-section h3 {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.agreement-section p {
    text-align: justify;
    margin-bottom: 10px;
}

/* Initial Line */
.initial-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #fffbeb;
    border: 2px solid #f59e0b;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.initial-line:hover:not(.initialed) {
    background: #fef3c7;
    border-color: #d97706;
    transform: scale(1.02);
}

.initial-line.initialed {
    background: #d1fae5;
    border-color: #22c55e;
    cursor: default;
}

.initial-line.shake {
    animation: shakeInitial 0.4s ease;
}

@keyframes shakeInitial {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.initial-label {
    font-size: 9px;
    color: #92400e;
    font-weight: 600;
    text-transform: uppercase;
}

.initial-line.initialed .initial-label {
    color: #166534;
}

.initial-box {
    min-width: 40px;
    height: 25px;
    background: #fff;
    border: 1px solid #d97706;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.initial-line.initialed .initial-box {
    border-color: #22c55e;
    background: #ecfdf5;
}

.initial-placeholder {
    color: #999;
    font-size: 14px;
}

.initials-written {
    font-family: 'Brush Script MT', cursive;
    font-size: 16px;
    color: #1e40af;
    font-weight: 700;
}

/* Signature Section */
.signature-section {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #ccc;
}

.signature-section h3 {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.signature-area {
    margin-top: 15px;
}

.signature-row {
    display: flex;
    gap: 15px;
}

.signature-field {
    flex: 2;
}

.signature-field.date-field {
    flex: 1;
}

.signature-line-box {
    height: 40px;
    border-bottom: 2px solid #1a1a1a;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fffbeb;
    border-radius: 4px 4px 0 0;
}

.signature-line-box:hover {
    background: #fef3c7;
}

#employee-signature.signed .signature-line-box {
    background: #d1fae5;
    cursor: default;
}

#employee-signature.shake .signature-line-box {
    animation: shakeInitial 0.4s ease;
}

.sign-here-text {
    font-size: 10px;
    color: #f59e0b;
    animation: signPulse 1.5s infinite;
}

@keyframes signPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.signature-written {
    font-family: 'Brush Script MT', cursive;
    font-size: 22px;
    color: #1e40af;
}

.signature-label {
    display: block;
    font-size: 8px;
    color: #666;
    margin-top: 3px;
    text-transform: uppercase;
}

.date-value {
    height: 40px;
    border-bottom: 2px solid #1a1a1a;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    font-size: 11px;
}

.document-footer {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 8px;
    color: #888;
}

/* Scroll Hint */
.scroll-hint {
    text-align: center;
    margin-top: 10px;
    color: #60a5fa;
    font-size: 0.8rem;
    transition: opacity 0.3s;
}

.scroll-arrow {
    display: inline-block;
    animation: scrollBounce 1s infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* Paycheck earned title style */
.paycheck-earned {
    color: var(--success) !important;
    animation: celebrate 0.5s ease;
}

@keyframes celebrate {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}