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

/* ============================================
   EQUIPMENT OPERATION GAME
   Crane control to move materials
   ============================================ */

.crane-game-area {
    width: 100%;
    height: 350px;
    background: linear-gradient(180deg, #87CEEB 0%, #B0C4DE 40%, #8B7355 40%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.crane-track {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(180deg, #FFD700, #FFA500);
    border-bottom: 3px solid #CC8400;
    z-index: 20;
}

.crane-trolley {
    position: absolute;
    width: 50px;
    height: 20px;
    background: linear-gradient(180deg, #FF8C00, #CC6600);
    border-radius: 3px;
    left: 50%;
    transform: translateX(-50%);
    transition: left 0.1s ease-out;
    z-index: 25;
}

.crane-cable {
    position: absolute;
    width: 4px;
    background: linear-gradient(90deg, #333, #555, #333);
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    height: 50px;
    transition: height 0.1s ease-out;
    z-index: 24;
}

.crane-hook {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    transform: translateX(-50%);
    top: 70px;
    transition: top 0.1s ease-out;
    z-index: 25;
}

.crane-hook::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #666;
    border-radius: 50%;
    left: 5px;
    top: 0;
}

.crane-hook::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 10px;
    border: 4px solid #666;
    border-top: none;
    border-radius: 0 0 10px 10px;
    left: 7px;
    top: 18px;
}

.hook-load {
    display: none;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 26;
    font-size: 2.2rem;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
}

.hook-load.carrying {
    display: block;
    animation: loadSwing 1.5s ease-in-out infinite;
}

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

/* Visual indicator when hook is in pickup/drop zone */
.crane-hook.in-pickup-zone::after {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.crane-hook.in-drop-zone::after {
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
}

/* Brick Wall Obstacle - realistic wall from ground up */
.brick-wall-obstacle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wall-top-cap {
    width: 76px;
    height: 8px;
    background: linear-gradient(180deg, #8B4513 0%, #654321 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.3);
}

.brick-row {
    display: flex;
    gap: 2px;
    padding: 1px 0;
}

.brick-row.offset {
    margin-left: 9px;
}

.brick {
    width: 16px;
    height: 10px;
    background: linear-gradient(180deg, #c9503c 0%, #b54432 40%, #983728 100%);
    border: 1px solid #6b2a1a;
    border-top-color: #d46550;
    border-radius: 1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Mortar lines between bricks */
.brick-row {
    background: #888;
    padding: 1px 2px;
}

/* Wall collision feedback */
.brick-wall-obstacle.blocked {
    animation: wallShake 0.2s ease;
}

.brick-wall-obstacle.blocked .brick {
    background: linear-gradient(180deg, #ff6b4a 0%, #e84832 50%, #c73a28 100%);
    box-shadow: 0 0 8px rgba(255, 100, 50, 0.5);
}

@keyframes wallShake {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(calc(-50% - 4px)); }
    75% { transform: translateX(calc(-50% + 4px)); }
}

.construction-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 210px;
    background: linear-gradient(180deg, #8B7355 0%, #6B5344 100%);
    z-index: 10;
}

.material-pickup-area {
    position: absolute;
    left: 15px;
    bottom: 15px;
    text-align: center;
    z-index: 15;
}

.material-platform {
    width: 70px;
    height: 60px;
    background: linear-gradient(180deg, #5a5a5a, #3a3a3a);
    border: 3px solid #666;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.material-platform::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 8px;
    background: #888;
    border-radius: 3px 3px 0 0;
}

.material-source {
    font-size: 2.5rem;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
    transition: all 0.3s;
}

.material-source.picked-up {
    opacity: 0;
    transform: scale(0.5);
}

.material-label {
    font-size: 0.65rem;
    color: #fff;
    background: rgba(0,0,0,0.7);
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 8px;
    transition: opacity 0.3s;
}

.material-pickup-area.item-grabbed .material-platform {
    border-color: #888;
    background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
}

/* Drop boxes for materials */
.target-zones-container {
    position: absolute;
    right: 10px;
    bottom: 15px;
    display: flex;
    gap: 8px;
    z-index: 15;
}

.crane-drop-box {
    width: 65px;
    height: 70px;
    position: relative;
    perspective: 100px;
}

.drop-box-front {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;
    background: linear-gradient(180deg, #8B7355 0%, #6B5344 50%, #5a4535 100%);
    border: 3px solid #4a3a2a;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3);
}

.drop-box-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    right: 5px;
    height: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.4), transparent);
}

.drop-box-front::after {
    content: '📦';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    opacity: 0.5;
}

.drop-box-content {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.crane-drop-box.filled .drop-box-front::after {
    display: none;
}

.crane-drop-box.filled .drop-box-front {
    border-color: #4CAF50;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3), 0 0 10px rgba(76, 175, 80, 0.4);
}

.delivered-material {
    font-size: 1.8rem;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
    animation: dropIn 0.3s ease-out;
}

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

/* Visual feedback when hook is ready to grab */
.material-pickup-area.hook-ready .material-platform {
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 4px 8px rgba(0,0,0,0.4);
}

.material-pickup-area.hook-ready .material-source {
    animation: readyPulse 0.5s ease-in-out infinite;
}

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

/* Visual feedback when crane is above a drop box (not lowered yet) */
.crane-drop-box.hook-above .drop-box-front {
    border-color: #fbbf24;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3), 0 0 12px rgba(251, 191, 36, 0.4);
}

.crane-drop-box.hook-above::before {
    content: '⬇️';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    opacity: 0.6;
}

/* Visual feedback when hook is lowered and ready to drop */
.crane-drop-box.hook-over .drop-box-front {
    border-color: #4CAF50;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3), 0 0 15px rgba(76, 175, 80, 0.6);
}

.crane-drop-box.hook-over::before {
    content: '⬇️';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    animation: dropArrow 0.5s ease-in-out infinite;
}

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

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

.crane-controls p {
    margin: var(--spacing-xs) 0;
}

/* ============================================
   BLUEPRINT READING GAME
   Match measurements from blueprints
   ============================================ */

.blueprint-display {
    width: 100%;
    padding: var(--spacing-md);
}

.blueprint-paper {
    background: linear-gradient(135deg, #1E3A5F 0%, #0D2137 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    color: #fff;
    border: 2px solid #2E5A8F;
    min-height: 200px;
}

.blueprint-title {
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: #87CEEB;
}

.blueprint-drawing {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.blueprint-drawing svg {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.measurement-highlight {
    text-align: center;
    color: #FFD700;
    font-size: 1.1rem;
    font-weight: bold;
    padding: var(--spacing-sm);
    background: rgba(255, 215, 0, 0.1);
    border-radius: var(--radius-sm);
}

.bp-question {
    text-align: center;
    margin: var(--spacing-lg) 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

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

.bp-option {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-light);
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-md);
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Courier New', monospace;
}

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

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

.bp-option.wrong {
    background: var(--error);
    border-color: var(--error);
    animation: shake 0.3s ease;
}

/* ============================================
   SAFETY INSPECTION GAME
   Interactive building inspection
   ============================================ */

.safety-instruction {
    text-align: center;
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.building-construction {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(180deg, #87CEEB 0%, #B0C4DE 100%);
    border-radius: 8px;
    padding: 10px;
    padding-bottom: 30px;
}

.building-frame {
    background: linear-gradient(180deg, #4a4a4a, #3a3a3a);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.building-roof {
    height: 25px;
    background: linear-gradient(180deg, #8B4513, #654321);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 10px;
}

.roof-beam {
    width: 8px;
    height: 20px;
    background: linear-gradient(90deg, #a0522d, #8B4513);
}

.building-floor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 3px solid #2a2a2a;
    min-height: 55px;
    position: relative;
    background: linear-gradient(180deg, #5a5a5a, #4a4a4a);
}

.floor-label {
    position: absolute;
    left: 3px;
    top: 3px;
    font-size: 7px;
    color: #888;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.floor-0 {
    background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
    border-bottom: none;
}

.empty-floor {
    width: 100%;
    text-align: center;
    color: #666;
    font-size: 0.7rem;
    padding: 10px;
}

/* Inspection Areas */
.inspection-area {
    flex: 1;
    min-width: 70px;
    max-width: 100px;
    background: linear-gradient(180deg, #6a6a6a, #5a5a5a);
    border: 2px solid #888;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
}

.inspection-area:hover {
    transform: scale(1.05);
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.inspection-area.inspected {
    border-color: #60a5fa;
    background: linear-gradient(180deg, #4a5568, #3a4558);
}

.inspection-area.hazard-found {
    border-color: #22c55e;
    background: linear-gradient(180deg, #166534, #14532d);
}

.area-icon {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.area-name {
    font-size: 0.6rem;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hazard-alert {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1rem;
    animation: alertPulse 0.8s infinite;
}

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

.hazard-cleared {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #22c55e;
    border-radius: 50%;
    color: white;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Construction decorations */
.construction-crane {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.5rem;
}

.construction-workers {
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-size: 1rem;
}

/* Inspection Panel */
.inspection-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 280px;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border: 2px solid #334155;
    border-radius: 10px;
    z-index: 100;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #334155;
}

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

.panel-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
}

.panel-close:hover {
    color: #ef4444;
}

.panel-content {
    padding: 15px;
    text-align: center;
}

/* Hazard discovered */
.hazard-discovered {
    animation: panelSlideIn 0.3s ease;
}

@keyframes panelSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hazard-icon-large {
    font-size: 3rem;
    margin-bottom: 8px;
    animation: hazardShake 0.5s ease;
}

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

.hazard-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 5px;
}

.hazard-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

.report-hazard-btn {
    background: linear-gradient(180deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.report-hazard-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Safe area */
.area-safe {
    padding: 10px;
}

.safe-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.safe-text {
    font-size: 1rem;
    font-weight: 600;
    color: #22c55e;
    margin-bottom: 5px;
}

.safe-detail {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Hazard reported */
.hazard-reported {
    padding: 10px;
}

.reported-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    animation: reportedPulse 0.5s ease;
}

@keyframes reportedPulse {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.reported-text {
    font-size: 1rem;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 5px;
}

.reported-detail {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ============================================
   MATERIAL SORTING GAME
   Sort materials into correct zones
   ============================================ */

.material-sort-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.material-source-zone {
    min-height: 120px;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    border: 2px dashed var(--bg-light);
}

.material-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--bg-light), var(--bg-medium));
    border-radius: var(--radius-md);
    cursor: grab;
    transition: all 0.2s;
    box-shadow: var(--shadow-md);
}

.material-item:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

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

.material-item.dragging {
    opacity: 0.5;
    transform: scale(1.1);
}

.material-icon {
    font-size: 3rem;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

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

.sort-zones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.sort-zone {
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 3px solid transparent;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sort-zone:hover {
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.1);
    transform: translateY(-2px);
}

.sort-zone.drag-over {
    border-color: var(--success);
    background: rgba(76, 175, 80, 0.2);
    transform: scale(1.02);
}

.zone-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: var(--spacing-sm);
}

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

.sort-success {
    font-size: 3rem;
    color: var(--success);
    animation: sortSuccess 0.5s ease;
}

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

.sort-error {
    font-size: 3rem;
    color: var(--error);
    animation: shake 0.4s ease;
}

.sort-instruction {
    text-align: center;
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ============================================
   WALL BUILDING GAME (Tetris-style)
   Stack bricks to build a wall
   ============================================ */

.wall-goal {
    text-align: center;
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
    border-radius: var(--radius-sm);
    color: #fbbf24;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.wall-game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

#wall-canvas {
    border: 3px solid #4a4a6a;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.wall-controls {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: var(--spacing-sm);
}

.wall-controls p {
    margin: var(--spacing-xs) 0;
}

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

@media (max-width: 600px) {
    .crane-game-area {
        height: 280px;
    }

    .crane-target-zone {
        width: 55px;
        height: 55px;
    }

    .blueprint-paper {
        padding: var(--spacing-md);
    }

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

    .bp-option {
        font-size: 1.1rem;
    }

    .construction-site-view {
        height: 260px;
    }

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

    .sort-zones {
        gap: var(--spacing-sm);
    }

    .sort-zone {
        padding: var(--spacing-md);
        min-height: 80px;
    }

    .zone-icon {
        font-size: 2rem;
    }

    .material-icon {
        font-size: 2.5rem;
    }
}

/* ============================================
   CONCRETE POURING GAME
   Pour and level concrete in forms
   ============================================ */

.concrete-site {
    background: linear-gradient(180deg, #87CEEB 0%, #B0C4DE 30%, #8B7355 30%);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-height: 280px;
    position: relative;
}

/* Concrete Truck with emoji */
.concrete-truck {
    position: absolute;
    top: 5px;
    left: 0;
    transition: left 0.4s ease-out;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.truck-icon {
    font-size: 2.8rem;
    transform: scaleX(-1);
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

/* Pour Chute */
.pour-chute {
    position: relative;
    width: 20px;
    height: 45px;
    margin-top: -10px;
    margin-left: 25px;
}

.chute-pipe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 20px;
    background: linear-gradient(90deg, #78716c, #a8a29e, #78716c);
    border-radius: 2px;
}

.concrete-pour {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    background: linear-gradient(180deg, #9ca3af, #78716c);
    border-radius: 0 0 4px 4px;
    transition: all 0.15s;
}

.pour-chute.pouring .concrete-pour {
    width: 10px;
    height: 40px;
    animation: concretePour 0.2s infinite alternate;
}

@keyframes concretePour {
    0% { width: 8px; opacity: 0.85; }
    100% { width: 12px; opacity: 1; }
}

.form-sections {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 60px;
    padding: 0 10px;
}

.concrete-form {
    width: 55px;
    height: 120px;
    position: relative;
    transition: all 0.3s;
}

.concrete-form.active {
    transform: scale(1.05);
}

.concrete-form.active .form-walls {
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.form-walls {
    width: 100%;
    height: 100px;
    background: #2a2a2a;
    border: 3px solid #555;
    border-top: none;
    position: relative;
    overflow: hidden;
}

.target-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ff4444;
    z-index: 5;
}

.target-line::before {
    content: '';
    position: absolute;
    right: -8px;
    top: -4px;
    border-left: 8px solid #ff4444;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.target-label {
    position: absolute;
    right: 100%;
    top: -8px;
    font-size: 0.5rem;
    color: #ff4444;
    white-space: nowrap;
    margin-right: 2px;
}

.concrete-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #888 0%, #666 100%);
    transition: height 0.1s;
}

.concrete-form.leveled .concrete-fill {
    background: linear-gradient(180deg, #999 0%, #777 100%);
}

.leveled-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #22c55e;
    z-index: 10;
}

.form-label {
    text-align: center;
    font-size: 0.6rem;
    color: #ccc;
    margin-top: 5px;
}

.concrete-form.error .form-walls {
    animation: formShake 0.3s ease;
    border-color: #ff4444;
}

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

.concrete-controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.pour-btn, .level-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.pour-btn {
    background: linear-gradient(180deg, #6b7280, #4b5563);
    color: white;
}

.pour-btn:hover {
    background: linear-gradient(180deg, #7b8290, #5b6573);
}

.pour-btn:active {
    transform: scale(0.95);
    background: linear-gradient(180deg, #555, #444);
}

.level-btn {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: white;
}

.level-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #4b92ff, #3573fb);
}

.level-btn:disabled {
    background: #444;
    color: #666;
    cursor: not-allowed;
}

.concrete-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: var(--spacing-sm);
}

/* ============================================
   STEEL BEAM CONNECTION GAME
   Align and bolt steel beams
   ============================================ */

.steel-frame-site {
    background: linear-gradient(180deg, #87CEEB 0%, #b0c4de 60%, #8b9dc3 100%);
    border-radius: var(--radius-md);
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.frame-structure {
    width: 100%;
    height: 300px;
    position: relative;
    /* Steel frame with vertical columns and horizontal beams */
    background:
        /* Left column */
        linear-gradient(90deg, transparent 23%, #5a6a7a 23%, #708090 25%, #5a6a7a 27%, transparent 27%),
        /* Right column */
        linear-gradient(90deg, transparent 73%, #5a6a7a 73%, #708090 75%, #5a6a7a 77%, transparent 77%),
        /* Top horizontal beam at 33% */
        linear-gradient(180deg, transparent 31%, #5a6a7a 31%, #708090 33%, #5a6a7a 35%, transparent 35%),
        /* Bottom horizontal beam at 66% */
        linear-gradient(180deg, transparent 64%, #5a6a7a 64%, #708090 66%, #5a6a7a 68%, transparent 68%),
        /* Center vertical beam section (left side) */
        linear-gradient(90deg, transparent 23%, #4a5a6a 23%, #4a5a6a 27%, transparent 27%),
        /* Center vertical beam section (right side) */
        linear-gradient(90deg, transparent 73%, #4a5a6a 73%, #4a5a6a 77%, transparent 77%);
    background-size: 100% 100%;
}

.frame-structure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Add rivet/bolt details at connection points */
    background:
        radial-gradient(circle at 25% 33%, #3a4a5a 3px, transparent 3px),
        radial-gradient(circle at 75% 33%, #3a4a5a 3px, transparent 3px),
        radial-gradient(circle at 25% 66%, #3a4a5a 3px, transparent 3px),
        radial-gradient(circle at 75% 66%, #3a4a5a 3px, transparent 3px),
        radial-gradient(circle at 50% 33%, #3a4a5a 3px, transparent 3px),
        radial-gradient(circle at 50% 66%, #3a4a5a 3px, transparent 3px),
        radial-gradient(circle at 25% 50%, #3a4a5a 3px, transparent 3px),
        radial-gradient(circle at 75% 50%, #3a4a5a 3px, transparent 3px);
    pointer-events: none;
}

.beam-slot {
    position: absolute;
    width: 80px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #888;
    transition: all 0.3s;
}

.beam-slot.nearby {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}

.beam-slot.connected {
    color: #4b5563;
}

.slot-bracket {
    letter-spacing: 20px;
}

.connected-beam {
    position: absolute;
    color: #708090;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.moving-beam {
    position: absolute;
    width: 80px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-out;
    z-index: 10;
}

.beam-body {
    font-size: 1.2rem;
    color: #4682B4;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.beam-holes {
    font-size: 0.6rem;
    color: #333;
    letter-spacing: 15px;
}

.moving-beam.shake {
    animation: beamShake 0.3s ease;
}

@keyframes beamShake {
    0%, 100% { transform: rotate(var(--rotation, 0deg)); }
    25% { transform: rotate(calc(var(--rotation, 0deg) - 5deg)); }
    75% { transform: rotate(calc(var(--rotation, 0deg) + 5deg)); }
}

.beam-controls {
    text-align: center;
    padding: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ============================================
   CONDUIT ROUTING GAME
   Route electrical conduit from panel to outlets
   ============================================ */

.conduit-grid-container {
    background: linear-gradient(180deg, #1e293b, #334155);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.conduit-grid {
    display: grid;
    gap: 2px;
    background: #0f172a;
    padding: 2px;
    border-radius: var(--radius-sm);
}

.conduit-cell {
    width: 35px;
    height: 35px;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 2px;
}

.conduit-cell:hover {
    background: #334155;
}

.conduit-cell.panel {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    font-size: 1.4rem;
}

.conduit-cell.outlet {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.conduit-cell.outlet.connected {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.conduit-cell.wall {
    background: #4b5563;
    color: #1f2937;
}

.conduit-cell.conduit {
    background: #fbbf24;
    color: #78350f;
}

.conduit-cell.conduit.connected {
    background: #22c55e;
    color: #14532d;
}

.conduit-controls {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
}

.clear-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(180deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-btn:hover {
    background: linear-gradient(180deg, #f87171, #ef4444);
    transform: translateY(-2px);
}

.conduit-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: var(--spacing-sm);
}

/* ============================================
   WINDOW INSTALLATION GAME
   Install windows in correct frame openings
   ============================================ */

.window-install-area {
    padding: var(--spacing-md);
    background: linear-gradient(180deg, #1e293b, #334155);
    border-radius: var(--radius-lg);
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.window-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.window-stat {
    color: #60a5fa;
    font-weight: 600;
}

.building-facade {
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, #78716c 0%, #a8a29e 100%);
    border-radius: var(--radius-md);
    position: relative;
    border: 4px solid #57534e;
}

.window-frame {
    position: absolute;
    background: #292524;
    border: 3px solid #44403c;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.window-frame.highlight {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
}

.window-frame.filled {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-color: #2563eb;
}

.installed-window {
    font-size: 2rem;
}

.frame-label {
    color: #78716c;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.window-staging {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
    min-height: 100px;
    position: relative;
}

.draggable-window {
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
    border: 3px solid #3b82f6;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    font-size: 2rem;
    transition: transform 0.1s;
    user-select: none;
}

.draggable-window.dragging {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.window-type-label {
    font-size: 0.65rem;
    color: #1e40af;
    text-transform: uppercase;
    margin-top: 4px;
}

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

/* ============================================
   HVAC DUCT CONNECTION GAME
   Connect HVAC ducts from source to vents
   ============================================ */

.hvac-area {
    padding: var(--spacing-md);
    background: linear-gradient(180deg, #1e293b, #334155);
    border-radius: var(--radius-lg);
}

.hvac-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.hvac-stat {
    color: #22d3ee;
    font-weight: 600;
}

#hvac-grid {
    gap: 4px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.hvac-cell {
    aspect-ratio: 1;
    background: #374151;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.hvac-cell.hvac {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    border-color: #0e7490;
}

.hvac-cell.vent {
    background: #4b5563;
    border: 2px dashed #9ca3af;
}

.hvac-cell.vent.connected {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: 2px solid #15803d;
}

.hvac-cell.obstacle {
    background: #78716c;
    color: #a8a29e;
}

.hvac-cell.duct {
    background: #9ca3af;
}

.hvac-cell.duct.connected {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
}

.hvac-controls {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
}

.hvac-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(180deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.hvac-btn:hover {
    background: linear-gradient(180deg, #f87171, #ef4444);
    transform: translateY(-2px);
}

.hvac-instructions {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: var(--spacing-sm);
}

/* ============================================
   TILE LAYING GAME
   Lay floor tiles in the correct pattern
   ============================================ */

.tile-area {
    padding: var(--spacing-md);
    background: linear-gradient(180deg, #1e293b, #334155);
    border-radius: var(--radius-lg);
}

.tile-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.tile-stat {
    color: #a78bfa;
    font-weight: 600;
}

.tile-layout {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pattern-preview {
    text-align: center;
}

.pattern-preview h4 {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
}

.mini-grid {
    gap: 2px;
    width: 100px;
}

.mini-tile {
    aspect-ratio: 1;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#floor-grid {
    gap: 4px;
    width: 100%;
    max-width: 300px;
}

.floor-cell {
    aspect-ratio: 1;
    background: #4b5563;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #9ca3af;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.floor-cell.target {
    border: 2px dashed #a78bfa;
    animation: pulse-tile 1s infinite;
}

@keyframes pulse-tile {
    0%, 100% { border-color: #a78bfa; }
    50% { border-color: #c4b5fd; }
}

.tile-selection {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.tile-selection p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.tile-options {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.tile-option {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #1f2937;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.tile-option:hover {
    transform: scale(1.1);
    border-color: #a78bfa;
}

.tile-option.wrong {
    animation: shake-tile 0.3s;
    border-color: #ef4444;
}

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