@font-face {
    font-family: 'Pixels';
    src: url('../fonts/Retro\ Gaming.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
    --color-principal: #02b3d8;
    --color-principal-darker: #014756;
    --color-principal-dark: #017d97;
    --color-principal-light: #69d4ee;
    --color-principal-lighter: #d0f2fa;
    --color-accent-danger: #d82702;
    --color-accent-warm: #ff6845;
    --color-accent-success: #02d884;
    --color-accent-info: #0256d8;
    --color-bg-main: #f2f8f9;
    --color-border-light: #dce8eb;
    --color-text-muted: #6b8388;
    --color-text-main: #102428;
    --color-secundario-claro: #43e0ff;
    --color-secundario-oscuro: #02385d;
    --fuente-principal: 'Pixels', cursive;
}


body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a252f 100%);
    background-attachment: fixed;
    color: white;
    font-family: var(--fuente-principal);
    margin: 0;
    overflow-x: hidden;
    cursor: cell;
    min-height: 100vh;
}

.arcade-cabinet {
    max-width: 800px; /* Reduced width */
    margin: 10px auto; /* Reduced margin */
    background: #2c3e50;
    border: 10px solid #1a252f; /* Reduced border */
    border-radius: 30px 30px 10px 10px;
    box-shadow: 
        inset 10px 0 20px rgba(0,0,0,0.5),
        inset -10px 0 20px rgba(0,0,0,0.5),
        0 0 50px rgba(0,255,255,0.1);
    padding: 10px; /* Reduced padding */
    position: relative;
    border-right: 15px solid #10171d;
    border-bottom: 25px solid #10171d;
}

/* MARQUEE HEADER */
.arcade-header {
    background: #000;
    border: 5px solid #ffd700;
    border-radius: 20px 20px 5px 5px;
    margin-bottom: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 20px #ffd700, inset 0 0 30px rgba(255,165,0,0.5);
    position: relative;
    overflow: hidden;
}

.marquee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.title-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.arcade-logo {
    width: 60px;
    filter: drop-shadow(0 0 10px white);
}

.arcade-header h1 {
    font-size: 50px;
    margin: 0;
    font-family: var(--fuente-principal);
    color: var(--color-principal);
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 
        0 0 10px var(--color-principal-dark),
        0 0 20px var(--color-principal-dark),
        0 0 40px var(--color-principal-dark);
    transform: skew(-5deg);
}

.neon-text {
    color: var(--color-principal-lighter);
    text-shadow: 
        0 0 10px var(--color-principal-light),
        0 0 20px var(--color-principal-light);   
}

/* SCREEN BEZEL */
.screen-bezel {
    background: #111;
    padding: 30px;
    border-radius: 10px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
    border: 2px solid #555;
}

/* GAME INFO BAR (HUD) */
.game-info-bar {
    width: 100%;
    height: 60px; /* Reduced height */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    border: 2px solid #555;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0; 
}

.game-hud {
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
}

/* VENTANA (CRT SCREEN) */
.ventana {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: #000;
    overflow: hidden;
    border: 2px solid #555;
    border-top: none;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.crt-effect {
    position: relative;
}
.crt-effect::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 900;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* ARCADE CONTROLS DECO */
.arcade-controls-deco {
    background: #1a1a1a;
    height: 120px; /* Reduced height */
    margin-top: 20px;
    border-top: 4px solid #444;
    border-radius: 5px 5px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.5);
    background: linear-gradient(to bottom, #2a2a2a, #111);
}

.joystick {
    width: 60px; /* Smaller joystick */
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #ff5555, #990000);
    border-radius: 50%;
    box-shadow: 
        0 5px 0 #550000,
        0 10px 10px rgba(0,0,0,0.5);
    position: relative;
}
.joystick::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 30px;
    background: #888;
    z-index: -1;
}

.buttons {
    display: flex;
    gap: 25px;
}
.btn-deco {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 5px 0 rgba(0,0,0,0.5);
    border: 3px solid rgba(255,255,255,0.1);
}
.btn-deco.red { background: radial-gradient(circle at 30% 30%, #ff4444, #aa0000); box-shadow: 0 5px 0 #660000; }
.btn-deco.blue { background: radial-gradient(circle at 30% 30%, #4444ff, #0000aa); box-shadow: 0 5px 0 #000066; }


/* TIMER BAR (Arcade Style) */
.timer-container-arcade {
    width: 100%;
    height: 20px; /* Thinner */
    background: #333;
    border: 2px solid #555;
    border-top: none;
    overflow: hidden;
}

.timer-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #00ff00, #ffff00, #ff0000);
    box-shadow: 0 0 10px rgba(0,255,0,0.5);
}


/* --- PREVIOUS GAME STYLES (KEEPING THEM, JUST UPDATING CONTAINER REFERENCES IF NEEDED) --- */
/* (In a real scenario I would merge carefully, here I'm overwriting to ensure the new theme is applied while keeping game logic styles) */
/* Re-adding essential game styles below */

.game-hud { font-size: 28px; font-family: var(--fuente-principal); color: white; display:flex; gap:20px; }
.hud-item { display:flex; align-items:center; gap:10px; }
.hud-icon-img { width: 50px; height: 50px; }

/* Overlays */
.game-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 200; color: white;
}
.overlay-title { 
    font-size: 40px; 
    color: #ffd700; 
    text-shadow: 3px 3px 0 #000;  
    font-family: 'Impact'; margin-bottom: 20px; 
}

.game-btn { 
    background: #00ff00; color: black; border: none; padding: 10px 30px; font-size: 20px; font-weight: bold; cursor: pointer; 
    box-shadow: 0 0 10px #00ff00; font-family: 'Courier New';
}
.game-btn:hover { background: #ccffcc; cursor: cell;}

.goBack-btn {
    background: #ff4800; color: black; border: none; padding: 10px 30px; font-size: 20px; font-weight: bold; cursor: pointer; 
    box-shadow: 0 0 10px #ff4800; font-family: 'Courier New';
}
.goBack-btn:hover { background: #ff7300; cursor: cell; }

/* In-Game UI */
.game-ui-top-left {
    position: absolute; top: 10px; left: 10px; 
    color: white; font-family: monospace; font-size: 18px; 
    background: rgba(0,0,0,0.7); padding: 5px; border: 1px solid white;
}

/* MICROGAMES STYLES (Condensed/Preserved) */

/* Eco Run */
.eco-run-game { width: 100%; height: 100%; background: linear-gradient(#87CEEB, #228B22); cursor: crosshair; position: relative; }
.trash-item { position: absolute; width: 50px; height: 50px; border-radius: 50%; font-size: 30px; display:flex; justify-content:center; align-items:center; background:white; cursor:pointer;}

/* Sea Hook */
.sea-hook-game { width: 100%; height: 100%; background: linear-gradient(#006994, #001e2b); position: relative; cursor: none; }
.sea-catcher { position: absolute; bottom: 10px; width: 60px; height: 40px; background: orange; border: 2px solid white; transform: translateX(-50%); border-radius: 10px 10px 0 0; }
.sea-item-emoji { position: absolute; font-size: 30px; transform:translate(-50%,0); }

/* Garden */
.garden-game { background: #e0f7fa; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom: 20px; height:100%; }
.garden-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.garden-plant { width: 80px; height: 80px; background: #81c784; border: 3px solid #388e3c; display:flex; justify-content:center; align-items:center; font-size: 40px; cursor: pointer; }
.garden-plant.water { background: #b3e5fc; border-color: #0288d1; }
.garden-plant.sun { background: #fff9c4; border-color: #fbc02d; }
.garden-plant.fertilizer { background: #dcedc8; border-color: #689f38; }
.garden-tools { display:flex; gap:15px; }
.tool-btn { width: 60px; height: 60px; font-size: 30px; border-radius: 50%; background: white; border: 2px solid #ccc; cursor: pointer; display:flex; justify-content:center; align-items:center; }
.tool-btn.selected { border-color: green; background: #e8f5e9; transform: scale(1.1); }

/* Recycle */
.recycle-game { background: #f5f5f5; height:100%; position:relative; }
.recycle-bins { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display:flex; gap: 20px; }
.recycle-bin { width: 80px; height: 100px; display:flex; justify-content:center; align-items:flex-end; padding-bottom:10px; color:white; font-weight:bold; }
.recycle-bin.blue { background: #1976d2; }
.recycle-bin.green { background: #388e3c; }
.recycle-bin.yellow { background: #fbc02d; color: black; }
.waste-item { position: absolute; font-size: 40px; cursor: grab; width: 50px; height: 50px; display:flex; justify-content:center; align-items:center; }

/* Energy */
.energy-game { background: #212121; height: 100%; display:flex; justify-content:center; align-items:center; }
.energy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.device { width: 90px; height: 90px; background: #424242; border: 2px solid #616161; display:flex; justify-content:center; align-items:center; font-size: 40px; cursor: pointer; }
.device.on { background: #fff176; border-color: #fdd835; box-shadow: 0 0 15px #fdd835; }

/* Supply Drop */
.supply-drop-game { background: #87CEFA; height: 100%; position: relative; overflow: hidden; cursor: none; }
.supply-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 5px; color: white; font-size: 20px; z-index: 10; font-family: 'Courier New', monospace; }
.sd-paddle { position: absolute; bottom: 10%; width: 60px; height: 30px; font-size: 30px; transform: translateX(-50%); display:flex; justify-content:center; align-items:center; text-shadow: 0 0 5px rgba(255,255,255,0.8); z-index: 5; }
.sd-box { position: absolute; font-size: 25px; transform: translateX(-50%); display:flex; flex-direction: column; align-items:center; line-height: 1; text-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 5; }

/* Super Farmer */
.super-farmer-game { background: #7CB342; height: 100%; position: relative; overflow: hidden; }
.farmer-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 5px; color: white; font-size: 20px; z-index: 10; font-family: 'Courier New', monospace; }
.sf-player { position: absolute; width: 40px; height: 40px; font-size: 35px; transform: translate(-50%, -50%); display:flex; justify-content:center; align-items:center; z-index: 15; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation: sf-bounce 0.3s infinite alternate; }
@keyframes sf-bounce { from { transform: translate(-50%, -50%) scaleY(1); } to { transform: translate(-50%, -50%) scaleY(0.95); } }
.sf-item { position: absolute; font-size: 30px; transform: translate(-50%, -50%); display:flex; justify-content:center; align-items:center; }
.sf-item.rock { font-size: 40px; z-index: 5; }
.sf-item.carrot { z-index: 6; animation: sf-pulse 1s infinite alternate; }
.sf-item.sprout { z-index: 6; }
@keyframes sf-pulse { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.1); } }

/* Factory Rush */
.factory-rush-game { background: #546E7A; height: 100%; position: relative; overflow: hidden; }
.factory-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); border: 2px solid #ccc; padding: 5px 10px; color: white; font-size: 20px; z-index: 10; font-family: 'Courier New', monospace; }
.fr-belt { position: absolute; background: #37474F; outline: 2px dashed #90A4AE; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.fr-belt-main { top: 0; left: 35%; width: 30%; height: 50%; }
.fr-belt-left { top: 50%; left: 15%; width: 30%; height: 35%; transform: skewX(-30deg); transform-origin: top; }
.fr-belt-right { top: 50%; right: 15%; width: 30%; height: 35%; transform: skewX(30deg); transform-origin: top; }
.fr-lever { position: absolute; top: 45%; left: 50%; width: 80px; height: 40px; background: #d32f2f; color: white; display:flex; justify-content:center; align-items:center; border: 3px solid #b71c1c; border-radius: 10px; transform: translate(-50%, -50%) rotate(-20deg); cursor: pointer; font-weight: bold; font-family: monospace; z-index: 20; box-shadow: 0 4px 0 #b71c1c; transition: transform 0.1s; }
.fr-lever:active { box-shadow: 0 1px 0 #b71c1c; margin-top: 3px; }
.fr-factory { position: absolute; bottom: 0; width: 40%; height: 15%; display:flex; justify-content:center; align-items:center; font-size: 1.5rem; font-weight: bold; color: white; text-transform: uppercase; border-top: 5px solid rgba(0,0,0,0.3); }
.fr-factory.left { left: 0; }
.fr-factory.right { right: 0; }
.fr-worker { position: absolute; font-size: 35px; transform: translateX(-50%); z-index: 15; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: left 0.2s linear, top 0.2s linear; }
/* Traffic Control */
.traffic-control-game { background: #4caf50; height: 100%; position: relative; overflow: hidden; }
.traffic-control-game.shake { animation: tc-shake 0.3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes tc-shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

.tc-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); border: 2px solid #ccc; padding: 5px 10px; color: white; font-size: 20px; z-index: 20; font-family: 'Courier New', monospace; border-radius: 5px; }

.tc-road { position: absolute; background: #607d8b; }
.tc-road-h { top: 40%; left: 0; width: 100%; height: 20%; border-top: 2px solid white; border-bottom: 2px solid white; }
.tc-road-v { top: 0; left: 40%; width: 20%; height: 100%; border-left: 2px solid white; border-right: 2px solid white; }
.tc-road-h::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; border-top: 2px dashed rgba(255,255,255,0.5); }
.tc-road-v::after { content: ''; position: absolute; left: 50%; top: 0; height: 100%; border-left: 2px dashed rgba(255,255,255,0.5); }

.tc-intersection { position: absolute; top: 40%; left: 40%; width: 20%; height: 20%; background: #546e7a; z-index: 5; cursor: pointer; }
.tc-center-click { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; justify-content:center; align-items:center; font-size: 30px; opacity: 0.5; transition: opacity 0.2s; }
.tc-intersection:hover .tc-center-click { opacity: 1; }
.tc-center-click::after { content: '👆'; }

.tc-semaphore { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #333; transition: background 0.2s, box-shadow 0.2s; }
.tc-sem-h.left { top: -16px; left: -16px; }
.tc-sem-h.right { bottom: -16px; right: -16px; }
.tc-sem-v.top { top: -16px; right: -16px; }
.tc-sem-v.bottom { bottom: -16px; left: -16px; }

.tc-car { position: absolute; font-size: 30px; transform: translate(-50%, -50%); z-index: 10; display:flex; justify-content:center; align-items:center; transition: transform 0.2s; }
.tc-car.right { transform: translate(-50%, -50%) rotate(0deg); }
.tc-car.left { transform: translate(-50%, -50%) rotate(180deg); transform-origin: center; }
.tc-car.down { transform: translate(-50%, -50%) rotate(90deg); }
.tc-car.up { transform: translate(-50%, -50%) rotate(270deg); }

/* Supply Drop */
.supply-drop-game { background: #87CEFA; height: 100%; position: relative; overflow: hidden; cursor: none; }
.supply-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 5px; color: white; font-size: 20px; z-index: 10; font-family: 'Courier New', monospace; }
.sd-paddle { position: absolute; bottom: 10%; width: 60px; height: 30px; font-size: 30px; transform: translateX(-50%); display:flex; justify-content:center; align-items:center; text-shadow: 0 0 5px rgba(255,255,255,0.8); z-index: 5; }
.sd-box { position: absolute; font-size: 25px; transform: translateX(-50%); display:flex; flex-direction: column; align-items:center; line-height: 1; text-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 5; }

/* Super Farmer */
.super-farmer-game { background: #7CB342; height: 100%; position: relative; overflow: hidden; }
.farmer-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 5px; color: white; font-size: 20px; z-index: 10; font-family: 'Courier New', monospace; }
.sf-player { position: absolute; width: 40px; height: 40px; font-size: 35px; transform: translate(-50%, -50%); display:flex; justify-content:center; align-items:center; z-index: 15; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation: sf-bounce 0.3s infinite alternate; }
@keyframes sf-bounce { from { transform: translate(-50%, -50%) scaleY(1); } to { transform: translate(-50%, -50%) scaleY(0.95); } }
.sf-item { position: absolute; font-size: 30px; transform: translate(-50%, -50%); display:flex; justify-content:center; align-items:center; }
.sf-item.rock { font-size: 40px; z-index: 5; }
.sf-item.carrot { z-index: 6; animation: sf-pulse 1s infinite alternate; }
.sf-item.sprout { z-index: 6; }
@keyframes sf-pulse { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.1); } }

/* Factory Rush */
.factory-rush-game { background: #546E7A; height: 100%; position: relative; overflow: hidden; }
.factory-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); border: 2px solid #ccc; padding: 5px 10px; color: white; font-size: 20px; z-index: 10; font-family: 'Courier New', monospace; }
.fr-belt { position: absolute; background: #37474F; outline: 2px dashed #90A4AE; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.fr-belt-main { top: 0; left: 35%; width: 30%; height: 50%; }
.fr-belt-left { top: 50%; left: 15%; width: 30%; height: 35%; transform: skewX(-30deg); transform-origin: top; }
.fr-belt-right { top: 50%; right: 15%; width: 30%; height: 35%; transform: skewX(30deg); transform-origin: top; }
.fr-lever { position: absolute; top: 45%; left: 50%; width: 80px; height: 40px; background: #d32f2f; color: white; display:flex; justify-content:center; align-items:center; border: 3px solid #b71c1c; border-radius: 10px; transform: translate(-50%, -50%) rotate(-20deg); cursor: pointer; font-weight: bold; font-family: monospace; z-index: 20; box-shadow: 0 4px 0 #b71c1c; transition: transform 0.1s; }
.fr-lever:active { box-shadow: 0 1px 0 #b71c1c; margin-top: 3px; }
.fr-factory { position: absolute; bottom: 0; width: 40%; height: 15%; display:flex; justify-content:center; align-items:center; font-size: 1.5rem; font-weight: bold; color: white; text-transform: uppercase; border-top: 5px solid rgba(0,0,0,0.3); }
.fr-factory.left { left: 0; }
.fr-factory.right { right: 0; }
.fr-worker { position: absolute; font-size: 35px; transform: translateX(-50%); z-index: 15; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: left 0.2s linear, top 0.2s linear; }

/* Traffic Control */
.traffic-control-game { background: #4caf50; height: 100%; position: relative; overflow: hidden; }
.traffic-control-game.shake { animation: tc-shake 0.3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes tc-shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

.tc-hud { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); border: 2px solid #ccc; padding: 5px 10px; color: white; font-size: 20px; z-index: 20; font-family: 'Courier New', monospace; border-radius: 5px; }

.tc-road { position: absolute; background: #607d8b; }
.tc-road-h { top: 40%; left: 0; width: 100%; height: 20%; border-top: 2px solid white; border-bottom: 2px solid white; }
.tc-road-v { top: 0; left: 40%; width: 20%; height: 100%; border-left: 2px solid white; border-right: 2px solid white; }
.tc-road-h::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; border-top: 2px dashed rgba(255,255,255,0.5); }
.tc-road-v::after { content: ''; position: absolute; left: 50%; top: 0; height: 100%; border-left: 2px dashed rgba(255,255,255,0.5); }

.tc-intersection { position: absolute; top: 40%; left: 40%; width: 20%; height: 20%; background: #546e7a; z-index: 5; cursor: pointer; }
.tc-center-click { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; justify-content:center; align-items:center; font-size: 30px; opacity: 0.5; transition: opacity 0.2s; }
.tc-intersection:hover .tc-center-click { opacity: 1; }
.tc-center-click::after { content: '👆'; }

.tc-semaphore { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #333; transition: background 0.2s, box-shadow 0.2s; }
.tc-sem-h.left { top: -16px; left: -16px; }
.tc-sem-h.right { bottom: -16px; right: -16px; }
.tc-sem-v.top { top: -16px; right: -16px; }
.tc-sem-v.bottom { bottom: -16px; left: -16px; }

.tc-car { position: absolute; font-size: 30px; transform: translate(-50%, -50%); z-index: 10; display:flex; justify-content:center; align-items:center; transition: left 0.1s linear, top 0.1s linear, transform 0.2s; }
.tc-car.right { transform: translate(-50%, -50%) rotate(0deg); }
.tc-car.left { transform: translate(-50%, -50%) rotate(180deg); transform-origin: center; }
.tc-car.down { transform: translate(-50%, -50%) rotate(90deg); }
.tc-car.up { transform: translate(-50%, -50%) rotate(270deg); }

/* Polish & Enhancements */
.pop-in { animation: popInAnim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popInAnim { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.collected-anim { animation: collectPop 0.3s ease-out forwards; pointer-events: none; }
@keyframes collectPop { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.8; } 100% { transform: scale(0); opacity: 0; } }

.glow-success { animation: glowGreen 0.5s ease-out forwards; }
@keyframes glowGreen { 0% { box-shadow: 0 0 0px #00e676; background-color: rgba(0, 230, 118, 0.2); } 50% { box-shadow: 0 0 20px #00e676; background-color: rgba(0, 230, 118, 0.5); } 100% { box-shadow: 0 0 0px transparent; background-color: transparent; } }

.glow-error { animation: glowRed 0.5s ease-out forwards, tc-shake 0.3s both; }
@keyframes glowRed { 0% { box-shadow: 0 0 0px #ff1744; } 50% { box-shadow: 0 0 20px #ff1744; } 100% { box-shadow: 0 0 0px transparent; } }

.drag-target-glow { outline: 3px dashed #ffeb3b; outline-offset: 5px; background-color: rgba(255, 235, 59, 0.2); transition: all 0.2s; }