:root{--hero-color: #3a86ff;--evil-color: #ff006e;--bg-dark: #12141d;--panel-bg: rgba(22, 26, 38, .9);--border-glow: #3a86ff}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-dark);font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#fff}#app{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100vw;height:100vh;position:relative;background:radial-gradient(circle at center,#1b2030,#0d0f16)}#hud-top{width:100%;max-width:480px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:10;flex-shrink:0}#top-header-row{width:100%;display:flex;justify-content:space-between;align-items:center}.header-actions{display:flex;align-items:center;gap:6px}#turn-banner{background:var(--panel-bg);padding:4px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 12px #0006;font-weight:700;font-size:.9rem;letter-spacing:.5px;text-transform:uppercase}.menu-icon-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:4px 10px;border-radius:14px;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .15s ease}.menu-icon-btn.hidden{display:none}#start-match-banner{margin-top:6px;display:flex;justify-content:center;width:100%}#start-match-banner.hidden{display:none}.start-match-action-btn{background:linear-gradient(180deg,#10b981,#059669);color:#fff;border:none;border-radius:20px;padding:8px 24px;font-size:1rem;font-weight:800;letter-spacing:.8px;cursor:pointer;box-shadow:0 4px 14px #10b98166;animation:pulse-ready 1.5s infinite ease-in-out}@keyframes pulse-ready{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.menu-icon-btn:hover{background:#ffffff40}#timer-bar-container{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}#timer-bar-fill{height:100%;width:100%;background:linear-gradient(90deg,#3a86ff,#00f5d4);transition:width .1s linear,background-color .3s}#canvas-container{flex:1 1 auto;min-height:0;width:100%;max-width:480px;display:flex;justify-content:center;align-items:center;position:relative;padding:4px}canvas#game-canvas{background:#1a1e2b;border:2px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 10px 30px #0009;touch-action:none;max-height:100%}#notification-overlay{width:100%;max-width:480px;background:#fffffff2;color:#111;padding:4px 12px;border-radius:6px;font-weight:700;font-size:.85rem;box-shadow:0 4px 14px #0006;pointer-events:none;transition:opacity .25s ease;z-index:20;text-align:center}#notification-overlay.hidden{opacity:0;pointer-events:none}#sandbox-toolbar{width:100%;max-width:480px;background:#141824f2;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;z-index:15;margin-bottom:2px;flex-shrink:0}#sandbox-toolbar.hidden{display:none}.sandbox-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.sandbox-label{font-size:.7rem;font-weight:700;color:#94a3b8;text-transform:uppercase}.sb-chip{padding:3px 6px;font-size:.7rem;font-weight:600;border:1px solid rgba(255,255,255,.2);background:#2a3142;color:#fff;border-radius:4px;cursor:pointer;transition:background .15s}.sb-chip:hover{background:#3b455d}.sb-chip.hero{border-color:#3a86ff;color:#60a5fa}.sb-chip.evil{border-color:#ff006e;color:#f472b6}.sb-chip.alert{border-color:#ef4444;color:#f87171}.sb-chip.active-tool{background:#2563eb;border-color:#60a5fa;box-shadow:0 0 6px #60a5fa99;font-weight:800}.sb-chip.active-select{background:#059669;border-color:#34d399;box-shadow:0 0 6px #34d39999;font-weight:800}.sandbox-main-btn{width:100%;padding:12px;font-size:1rem;font-weight:700;color:#10b981;background:#10b98126;border:1px solid #10b981;border-radius:8px;cursor:pointer;margin-bottom:12px;transition:background .15s ease}.sandbox-main-btn:hover{background:#10b98140}#hud-bottom{width:100%;max-width:480px;padding:8px 16px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10;flex-shrink:0}#charge-bar-container{width:100%;height:20px;background:#00000080;padding:2px;border-radius:6px;border:1px solid rgba(255,255,255,.2)}#charge-bar-track{display:flex;width:100%;height:100%;gap:4px}.meter-segment{flex:1;height:100%;border-radius:2px;opacity:.2;transition:opacity .05s ease,transform .05s ease}.meter-segment.active{opacity:1;transform:scaleY(1.08)}.seg-1,.seg-2,.seg-3,.seg-4{background:#38b000}.seg-5,.seg-6,.seg-7{background:#ffb703}.seg-8,.seg-9{background:#fb8500}.seg-10{background:#d90429;box-shadow:0 0 8px #d90429}#charge-btn{width:100%;padding:14px;font-size:1.1rem;font-weight:800;letter-spacing:1px;color:#fff;background:linear-gradient(180deg,#3a86ff,#1d4ed8);border:none;border-radius:8px;box-shadow:0 4px 14px #3a86ff66;cursor:pointer;transition:all .15s ease}#charge-btn:active{transform:translateY(2px);box-shadow:0 2px 6px #3a86ff66}#charge-btn:disabled{background:#33394a;color:#666e80;box-shadow:none;cursor:not-allowed}.modal-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0c12eb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;z-index:100;opacity:1;transition:opacity .3s ease}.modal-screen.hidden{opacity:0;pointer-events:none}.modal-content{background:#191c28;border:1px solid rgba(255,255,255,.15);padding:36px 28px;border-radius:16px;text-align:center;max-width:360px;width:90%;box-shadow:0 16px 40px #000c}.modal-content h1{font-size:2.2rem;letter-spacing:2px;margin-bottom:6px;background:linear-gradient(90deg,#3a86ff,#00f5d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.modal-content p{color:#94a3b8;font-size:.95rem;margin-bottom:24px}#winner-announcement{font-size:1.4rem;font-weight:800;margin:16px 0 24px;color:#ffd166}.primary-btn{width:100%;padding:14px;font-size:1.05rem;font-weight:700;color:#fff;background:linear-gradient(180deg,#2563eb,#1d4ed8);border:none;border-radius:8px;cursor:pointer;margin-bottom:12px}.primary-btn.online{background:linear-gradient(180deg,#059669,#047857)}.modal-content.weightings-card{max-width:520px;width:95%;max-height:90vh;overflow-y:auto;padding:20px;text-align:left}.modal-content.weightings-card h2{font-size:1.3rem;margin-bottom:4px;color:#38bdf8;text-align:center}.modal-hint{font-size:.8rem;color:#94a3b8;text-align:center;margin-bottom:14px!important}.table-wrapper{overflow-x:auto;margin-bottom:14px}.weightings-table{width:100%;border-collapse:collapse;font-size:.8rem}.weightings-table th,.weightings-table td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}.weightings-table th{background:#ffffff0d;color:#cbd5e1}.weightings-table td input[type=range]{width:70px;vertical-align:middle}.weightings-table td span{display:inline-block;min-width:45px;margin-left:6px;font-family:monospace;font-weight:700;color:#34d399}.rules-row-tuning{display:flex;justify-content:space-around;background:#0000004d;padding:10px;border-radius:8px;margin-bottom:14px;font-size:.85rem}.rule-field{display:flex;align-items:center;gap:8px}.rule-field input[type=range]{width:80px}.rule-field span{font-family:monospace;font-weight:700;color:#fbbf24}.modal-actions-row{display:flex;gap:8px}.modal-actions-row button{flex:1;padding:10px;font-size:.85rem;margin-bottom:0}