* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Comic Sans MS', 'Trebuchet MS', 'Segoe UI', sans-serif; color: #1a202c; min-height: 100vh; background: linear-gradient(160deg, #a8e6cf 0%, #dcedc1 40%, #ffd3b6 100%); transition: background 0.6s ease; } /* Per-level accent theme, applied to when a level starts. */ body.level-theme-1 { background: linear-gradient(160deg, #a8e6cf 0%, #c9f4aa 45%, #ffe9a8 100%); } body.level-theme-2 { background: linear-gradient(160deg, #a0d8f1 0%, #b9a8e6 45%, #f7c6e0 100%); } body.level-theme-3 { background: linear-gradient(160deg, #ffd3a5 0%, #fd9853 45%, #f78fb3 100%); } body.level-theme-4 { background: linear-gradient(160deg, #c589e8 0%, #8e6fdc 45%, #5b4fc4 100%); } .hidden { display: none !important; } #screen-level-select, #screen-game { padding: 28px; } #btn-to-dashboard { display: inline-block; margin-bottom: 12px; padding: 8px 14px; font-size: 13px; font-weight: bold; color: #2b6cb0; background: rgba(255, 255, 255, 0.7); border-radius: 10px; text-decoration: none; } #btn-to-dashboard:hover { background: rgba(255, 255, 255, 0.95); } #screen-level-select h1 { font-size: 32px; margin-bottom: 4px; color: #2b6cb0; text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.6); } #screen-level-select p { font-size: 16px; color: #2d3748; margin-bottom: 4px; } #level-cards { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; } .level-card { padding: 22px 30px; font-size: 18px; font-weight: bold; border: none; border-radius: 18px; color: white; cursor: pointer; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2), 0 8px 14px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; } .level-card-1 { background: linear-gradient(135deg, #48bb78, #38a169); } .level-card-2 { background: linear-gradient(135deg, #4299e1, #667eea); } .level-card-3 { background: linear-gradient(135deg, #ed8936, #dd6b20); } .level-card-4 { background: linear-gradient(135deg, #9f7aea, #6b46c1); } .level-card:hover { transform: translateY(-3px) scale(1.04); } .level-card:active { transform: translateY(2px) scale(0.98); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15); } #game-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } #status-text { font-size: 19px; font-weight: bold; flex: 1; text-align: center; color: #2d3748; background: rgba(255, 255, 255, 0.65); border-radius: 14px; padding: 8px 16px; } #game-header button, #btn-run { padding: 12px 18px; font-size: 15px; font-weight: bold; border: none; border-radius: 12px; background: linear-gradient(135deg, #4299e1, #3182ce); color: white; cursor: pointer; box-shadow: 0 4px 0 #2b6cb0; transition: transform 0.12s ease, box-shadow 0.12s ease; } #game-header button:hover, #btn-run:hover { transform: translateY(-2px); } #game-header button:active, #btn-run:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b6cb0; } #btn-run { background: linear-gradient(135deg, #48bb78, #38a169); box-shadow: 0 4px 0 #2f855a; } #btn-run:disabled { background: #a0aec0; box-shadow: 0 4px 0 #718096; cursor: not-allowed; transform: none; } #game-body { display: flex; gap: 28px; flex-wrap: wrap; } #grid-container { position: relative; display: grid; grid-template-columns: repeat(var(--grid-width, 5), 48px); grid-template-rows: repeat(var(--grid-height, 5), 48px); gap: 3px; background: rgba(255, 255, 255, 0.5); padding: 4px; border-radius: 14px; width: fit-content; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } @keyframes celebrate-bounce { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.03) rotate(-1deg); } 50% { transform: scale(1.06) rotate(1deg); } 75% { transform: scale(1.03) rotate(-1deg); } } #grid-container.celebrate { animation: celebrate-bounce 0.8s ease; } .cell { width: 48px; height: 48px; background: #f7fafc; display: flex; align-items: center; justify-content: center; border-radius: 6px; position: relative; } .cell svg { width: 34px; height: 34px; } .cell-goal { background: linear-gradient(135deg, #c6f6d5, #9ae6b4); } .cell-batu { background: #e2e8f0; } .cell-lumpur { background: #ead9c4; } /* Car is a single persistent element positioned absolutely over the grid so its movement/rotation can be smoothly transitioned instead of being recreated per cell. */ .car { position: absolute; top: 0; left: 0; width: 40px; height: 40px; transition: transform 0.4s ease; will-change: transform; pointer-events: none; z-index: 5; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); } .car.no-transition { transition: none; } .car svg { width: 100%; height: 100%; } #controls { display: flex; flex-direction: column; gap: 14px; min-width: 220px; } #block-palette { display: flex; gap: 8px; flex-wrap: wrap; } .block { padding: 12px 16px; background: linear-gradient(135deg, #fbd38d, #f6ad55); border-radius: 12px; cursor: grab; font-size: 14px; font-weight: bold; user-select: none; box-shadow: 0 3px 0 #dd8b1e; transition: transform 0.1s ease; } .block:hover { transform: translateY(-2px); } .block:active { cursor: grabbing; transform: translateY(1px); } #program-area { list-style: none; min-height: 130px; background: rgba(255, 255, 255, 0.75); border: 3px dashed #cbd5e0; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .program-block { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: linear-gradient(135deg, #fbd38d, #f6ad55); border-radius: 10px; cursor: grab; font-size: 14px; font-weight: bold; transition: background 0.15s ease, transform 0.15s ease; } .program-block.active { background: linear-gradient(135deg, #f6e05e, #ecc94b); transform: scale(1.05); animation: blink 0.5s ease infinite alternate; } @keyframes blink { from { box-shadow: 0 0 0 rgba(246, 224, 94, 0); } to { box-shadow: 0 0 14px rgba(246, 224, 94, 0.95); } } .remove-block { border: none; background: transparent; font-size: 18px; font-weight: bold; cursor: pointer; color: #742a2a; } .remove-block:hover { color: #c53030; } /* Static ad slot — only ever placed on non-gameplay screens (level select), never fixed/sticky, so it can't overlap or interrupt the grid/controls. */ .ad-slot { max-width: 728px; min-height: 90px; margin: 28px 0 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.4); border: 2px dashed rgba(255, 255, 255, 0.8); border-radius: 14px; color: rgba(45, 55, 72, 0.55); font-size: 13px; font-weight: bold; }