:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#2c3e50;background-color:#ecf0f1;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh;overflow:hidden}#game-container{display:flex;flex-direction:column;width:100vw;height:100vh}#canvas-container{position:relative;width:100%;height:66.67vh;display:flex;justify-content:center;align-items:center;background:#ecf0f1}#canvas{border:2px solid #34495E;border-radius:8px;background:#f8fafc;width:100%;height:100%;max-height:calc(66.67vh - 20px);object-fit:contain;box-shadow:0 4px 16px #0000001a}#controls-panel{height:33.33vh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;border-top:1px solid #E5E7EB;padding:20px 0;box-sizing:border-box;box-shadow:0 -4px 16px #0000000d}#controls-container{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;width:66.67%;max-width:800px;margin-bottom:20px}#speed-controls{display:flex;flex-direction:column;gap:10px;justify-self:start}#progress-container{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:200px}#order-progress-label{font-size:14px;font-weight:500;color:#374151}#order-progress-bar{width:200px;height:20px;background:#f1f5f9;border:1px solid #CBD5E1;border-radius:10px;overflow:hidden;position:relative}#order-progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#2563eb);width:0%;transition:width .1s ease-out;border-radius:10px}#turn-controls{display:flex;flex-direction:column;gap:10px;justify-self:end}#turn-controls-row-1,#turn-controls-row-2{display:flex;gap:10px}.order-btn{padding:12px 20px;font-size:14px;font-weight:600;font-family:inherit;border:2px solid #475569;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:100px;text-align:center;background:#f1f5f9;color:#334155}.order-btn:hover{background:#3b82f6;color:#fff;border-color:#2563eb;transform:translateY(-1px);box-shadow:0 8px 25px #3b82f64d}.order-btn:active{transform:translateY(0);box-shadow:0 4px 12px #3b82f633}.order-btn.active{background:#ef4444;color:#fff;border-color:#dc2626;box-shadow:0 4px 12px #ef44444d}#game-status{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;background:#f8fafc;border:1px solid #E2E8F0;border-radius:8px;width:100%;max-width:400px;box-shadow:0 2px 8px #0000000d}#current-order{font-weight:600;color:#1f2937;font-size:16px}#game-state{color:#6b7280;font-size:14px}