*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:system-ui,-apple-system,sans-serif;background-color:#1a1a1a;color:#fff}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1rem;gap:1rem}#game-container{border:2px solid #444;border-radius:8px;overflow:hidden}#ui-container{width:100%;max-width:560px}@media(min-width:1024px){#app{flex-direction:row;align-items:flex-start;justify-content:center}#ui-container{max-width:400px}}.card-palette{display:flex;gap:.5rem;margin-bottom:1rem}.palette-card{flex:1;padding:.75rem .5rem;border:2px solid #555;border-radius:8px;background:#2a2a2a;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:transform .1s,border-color .2s,background-color .2s}.palette-card:hover{transform:translateY(-2px);border-color:#888}.palette-card:active{transform:translateY(0)}.palette-card--forward{border-color:#4a90d9;background:linear-gradient(135deg,#2a5a9a,#1a3a6a)}.palette-card--forward:hover{border-color:#6ab0ff}.palette-card--turnRight{border-color:#d9904a;background:linear-gradient(135deg,#9a5a2a,#6a3a1a)}.palette-card--turnRight:hover{border-color:#ffb06a}.palette-card--turnLeft{border-color:#90d94a;background:linear-gradient(135deg,#5a9a2a,#3a6a1a)}.palette-card--turnLeft:hover{border-color:#b0ff6a}.program-area{min-height:120px;padding:.75rem;border:2px dashed #444;border-radius:8px;background:#222;margin-bottom:1rem}.program-placeholder{display:flex;align-items:center;justify-content:center;height:80px;color:#666;font-size:.875rem}.program-card{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;margin-bottom:.5rem;border:2px solid #555;border-radius:6px;background:#2a2a2a;cursor:grab;transition:transform .1s,opacity .2s,border-color .2s}.program-card:last-child{margin-bottom:0}.program-card:hover{border-color:#777}.program-card--dragging{opacity:.5;cursor:grabbing}.program-card--dragover{border-color:gold;transform:scale(1.02)}.program-card--forward{border-left:4px solid #4a90d9}.program-card--turnRight{border-left:4px solid #d9904a}.program-card--turnLeft{border-left:4px solid #90d94a}.program-card__number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#444;font-size:.75rem;font-weight:600}.program-card__label{flex:1;font-size:.875rem}.program-card__remove{padding:.25rem .5rem;border:none;border-radius:4px;background:transparent;color:#888;font-size:1rem;cursor:pointer;transition:color .2s}.program-card__remove:hover{color:#ff6b6b}.control-panel{display:flex;gap:.75rem}.control-button{flex:1;padding:.875rem 1rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .1s,background-color .2s}.control-button:hover:not(:disabled){transform:translateY(-2px)}.control-button:active:not(:disabled){transform:translateY(0)}.control-button:disabled{opacity:.5;cursor:not-allowed}.control-button--run{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff}.control-button--run:hover:not(:disabled){background:linear-gradient(135deg,#66bb6a,#388e3c)}.control-button--clear{background:linear-gradient(135deg,#555,#333);color:#fff}.control-button--clear:hover:not(:disabled){background:linear-gradient(135deg,#666,#444)}.result-area{margin-top:1rem;padding:.75rem 1rem;border-radius:8px;text-align:center;font-size:1rem;font-weight:600;min-height:2.5rem}.result-area:empty{display:none}.result-area--success{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff}.result-area--failure{background:linear-gradient(135deg,#f44336,#c62828);color:#fff}.result-area--warning{background:linear-gradient(135deg,#ff9800,#e65100);color:#fff}.stage-selector{margin-bottom:1rem;padding:.75rem;border:2px solid #444;border-radius:8px;background:#2a2a2a}.stage-selector__title{font-size:.875rem;font-weight:600;color:#888;margin-bottom:.5rem}.stage-selector__buttons{display:flex;gap:.5rem;margin-bottom:.5rem}.stage-button{width:40px;height:40px;border:2px solid #555;border-radius:8px;background:#333;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .1s,border-color .2s,background-color .2s}.stage-button:hover{transform:translateY(-2px);border-color:#888}.stage-button--selected{border-color:gold;background:linear-gradient(135deg,#5a4a00,#3a3000)}.stage-selector__description{font-size:.875rem;color:#aaa}