:root{--primary:#7c3aed;--secondary:#f97316;--accent:#ec4899;--gradient:linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);--bg:#f5f3ff;--card:#fff;--card-inner:#ede9fe;--input-bg:#f0ebff;--text:#1e1b4b;--text-muted:#1e1b4b85;--border:#ddd6fe;--shadow:0 4px 28px #7c3aed21, 0 1px 4px #0000000d;--shadow-sm:0 2px 10px #7c3aed1a;--btn-color:#fff}body.dark{--bg:#0d0a1e;--card:#1a1535;--card-inner:#231e42;--input-bg:#2d2655;--text:#f5f3ff;--text-muted:#f5f3ff7a;--border:#3d3570;--shadow:0 4px 28px #7c3aed47, 0 1px 4px #0006;--shadow-sm:0 2px 10px #7c3aed33}body.theme-mono{--primary:#111;--secondary:#444;--accent:#666;--gradient:linear-gradient(135deg, #111 0%, #555 100%);--bg:#f5f5f5;--card:#fff;--card-inner:#ebebeb;--input-bg:#e4e4e4;--text:#111;--text-muted:#11111180;--border:#d4d4d4;--shadow:0 4px 28px #0000001a, 0 1px 4px #0000000f;--shadow-sm:0 2px 10px #00000012;--btn-color:#fff}body.dark.theme-mono{--primary:#e8e8e8;--bg:#0a0a0a;--card:#161616;--card-inner:#212121;--input-bg:#2a2a2a;--text:#f0f0f0;--text-muted:#f0f0f07a;--border:#333;--shadow:0 4px 28px #00000080, 0 1px 4px #0006;--shadow-sm:0 2px 10px #0000004d;--btn-color:#111}body.theme-ocean{--primary:#0ea5e9;--secondary:#22d3ee;--accent:#818cf8;--gradient:linear-gradient(135deg, #0ea5e9 0%, #818cf8 100%);--bg:#f0f9ff;--card:#fff;--card-inner:#e0f2fe;--input-bg:#bae6fd;--text:#082f49;--text-muted:#082f4985;--border:#7dd3fc;--shadow:0 4px 28px #0ea5e926, 0 1px 4px #0000000d;--shadow-sm:0 2px 10px #0ea5e91f}body.dark.theme-ocean{--bg:#020c18;--card:#0a1f32;--card-inner:#10293f;--input-bg:#16334f;--text:#e0f2fe;--text-muted:#e0f2fe7a;--border:#164e63;--shadow:0 4px 28px #0ea5e947, 0 1px 4px #0006}body.theme-forest{--primary:#059669;--secondary:#84cc16;--accent:#06b6d4;--gradient:linear-gradient(135deg, #059669 0%, #06b6d4 100%);--bg:#ecfdf5;--card:#fff;--card-inner:#d1fae5;--input-bg:#a7f3d0;--text:#064e3b;--text-muted:#064e3b85;--border:#6ee7b7;--shadow:0 4px 28px #05966926, 0 1px 4px #0000000d;--shadow-sm:0 2px 10px #0596691f}body.dark.theme-forest{--bg:#021208;--card:#071c10;--card-inner:#0b2616;--input-bg:#0f301c;--text:#ecfdf5;--text-muted:#ecfdf57a;--border:#064e3b;--shadow:0 4px 28px #05966947, 0 1px 4px #0006}body.theme-fire{--primary:#dc2626;--secondary:#f97316;--accent:#fbbf24;--gradient:linear-gradient(135deg, #dc2626 0%, #f97316 100%);--bg:#fff5f5;--card:#fff;--card-inner:#fee2e2;--input-bg:#fecaca;--text:#450a0a;--text-muted:#450a0a85;--border:#fca5a5;--shadow:0 4px 28px #dc262626, 0 1px 4px #0000000d;--shadow-sm:0 2px 10px #dc26261f}body.dark.theme-fire{--bg:#120303;--card:#220808;--card-inner:#2e0c0c;--input-bg:#3a1010;--text:#fef2f2;--text-muted:#fef2f27a;--border:#7f1d1d;--shadow:0 4px 28px #dc262647, 0 1px 4px #0006}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);justify-content:center;align-items:flex-start;min-height:100vh;margin:0;padding:0;font-family:Space Grotesk,sans-serif;font-size:16px;transition:background .25s,color .25s;display:flex}#root{justify-content:center;width:100%;padding:70px 0 4rem;display:flex}button.back-btn{background:var(--card);width:auto;color:var(--primary);box-shadow:none;border:none;margin-bottom:4px;padding:10px 20px}button.back-btn:hover:not(:disabled){opacity:.8;box-shadow:none;transform:none}.game-area{background:var(--card);width:100%;max-width:480px;box-shadow:var(--shadow);border-radius:28px;margin:0 1rem;padding:2rem 1.5rem;animation:.3s fadeIn}h1{text-align:center;color:var(--primary);letter-spacing:-.03em;justify-content:center;align-items:center;gap:10px;margin-bottom:1.5rem;font-size:28px;font-weight:700;display:flex}h2{text-align:center;color:var(--primary);letter-spacing:-.01em;margin-top:0;margin-bottom:1rem;font-size:19px;font-weight:700}h3{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin:.5rem 0;font-size:11px;font-weight:700}label{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px;font-size:13px;font-weight:700;display:block}input[type=text],input[type=number]{border:2px solid var(--border);background:var(--input-bg);width:100%;color:var(--text);text-align:center;border-radius:16px;margin-bottom:1rem;padding:14px 18px;font-family:inherit;font-size:16px;font-weight:700;transition:border-color .15s}input:focus{border-color:var(--primary);outline:none}button{background:var(--primary);width:100%;color:var(--btn-color);cursor:pointer;letter-spacing:.01em;border:none;border-radius:100px;justify-content:center;align-items:center;gap:7px;margin:.35rem 0;padding:15px 20px;font-family:inherit;font-size:15px;font-weight:700;transition:opacity .15s,transform .15s,box-shadow .15s;display:flex;box-shadow:0 4px 14px #0000002e}button:hover:not(:disabled):not(.icon-btn):not(.copy-btn){opacity:.88;transform:translateY(-2px);box-shadow:0 8px 24px #00000038}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}button.secondary{background:var(--card-inner);color:var(--text);border:2px solid var(--border);box-shadow:none}button.secondary:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:var(--card-inner);opacity:1;transform:translateY(-1px);box-shadow:0 4px 14px #0000001a}button.danger{background:#ef4444}button.danger:hover:not(:disabled){opacity:.85}.icon-btn{background:var(--card);border:1.5px solid var(--border);color:var(--text);width:40px;height:40px;box-shadow:var(--shadow-sm);cursor:pointer;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;font-size:16px;transition:background .15s,border-color .15s,transform .15s;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff;opacity:1;transform:translateY(-1px);box-shadow:0 4px 14px #0000002e}.copy-btn{border:2px solid var(--primary);color:var(--primary);cursor:pointer;letter-spacing:.01em;width:auto;box-shadow:none;background:0 0;border-radius:100px;margin:0;padding:8px 18px;font-family:inherit;font-size:13px;font-weight:700;transition:all .15s}.copy-btn:hover:not(:disabled){background:var(--primary);color:#fff;opacity:1;box-shadow:none;transform:none}.choices{flex-wrap:wrap;gap:10px;display:flex}.choices button{flex:1;min-width:100px}.feedback{text-align:center;background:var(--card-inner);border:1.5px solid var(--border);border-radius:18px;margin:.75rem 0;padding:.875rem 1rem;font-size:15px;font-weight:700}.feedback.correct{color:#10b981;animation:.5s ease-out flashCorrect}.feedback.wrong{color:#ef4444;animation:.5s ease-out flashWrong}.card-display{text-align:center;background:var(--card-inner);border:1.5px solid var(--border);border-radius:18px;margin:1rem 0;padding:1rem 1.25rem;font-size:17px;font-weight:500}.card-style{background:#fff;border:2px solid #e5e5e5;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:52px;height:72px;font-family:inherit;font-size:18px;font-weight:800;line-height:1.1;animation:.3s ease-out cardFlip;display:inline-flex;box-shadow:0 3px 10px #0000002e}.card-style.red{color:#ef4444}.card-style.black{color:#1a1a1a}.card-back{background:var(--gradient);border:2px solid #ffffff26;border-radius:10px;width:52px;height:72px;box-shadow:0 3px 10px #00000040}.card-row{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.player-hand{background:var(--card-inner);border:1.5px solid var(--border);border-radius:16px;margin-bottom:.5rem;padding:.875rem 1rem}.pyramid-grid{flex-direction:column;align-items:center;gap:8px;margin:1.5rem 0;display:flex}.pyramid-row{justify-content:center;gap:8px;display:flex}.pyramid-cell{border-radius:10px;justify-content:center;align-items:center;width:52px;height:72px;display:flex}.room-code{text-align:center;letter-spacing:10px;color:var(--primary);background:var(--card-inner);border:2px solid var(--border);border-radius:18px;margin:1rem 0;padding:1rem;font-size:34px;font-weight:900}.player-list{margin:0;padding:0;list-style:none}.player-list li{background:var(--card-inner);border:1.5px solid var(--border);border-radius:14px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:.7rem 1rem;font-size:15px;font-weight:500;display:flex}.player-list li .badge{background:var(--primary);color:var(--btn-color);letter-spacing:.04em;text-transform:uppercase;border-radius:100px;padding:3px 10px;font-size:10px;font-weight:800}.info-box{background:var(--card-inner);border:1.5px solid var(--border);text-align:center;border-radius:20px;margin:1rem 0;padding:1.125rem}.divider{background:var(--border);height:1px;margin:1.25rem 0}.player-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;margin-right:7px;display:inline-block}.tag{background:var(--primary);color:#fff;letter-spacing:.04em;border-radius:100px;margin-left:6px;padding:3px 10px;font-size:10px;font-weight:800;display:inline-block}.bus-grid{flex-wrap:wrap;justify-content:center;gap:8px;margin:.75rem 0;display:flex}.waiting-text{text-align:center;color:var(--primary);padding:2rem 0;font-size:17px;font-weight:600;animation:1.5s ease-in-out infinite pulse}.leave-toast{color:#fff;text-align:center;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:14px;margin-bottom:.75rem;padding:.7rem 1rem;font-size:14px;font-weight:700;animation:.3s ease-out slideDown}.settings-row{justify-content:space-between;align-items:center;gap:10px;margin-bottom:1rem;display:flex}.settings-row label{flex:1;margin:0}.settings-row input[type=number]{text-align:center;width:80px;margin:0;padding:10px}.radio-group{flex-direction:column;gap:8px;margin-bottom:1rem;display:flex}.radio-group label{cursor:pointer;color:var(--text);opacity:.9;text-transform:none;letter-spacing:0;align-items:flex-start;gap:10px;font-weight:500;display:flex}.radio-group input[type=radio]{accent-color:var(--primary);margin-top:2px}@keyframes flashCorrect{0%{background:#10b98138;transform:scale(1.03)}to{background:var(--card-inner);transform:scale(1)}}@keyframes flashWrong{0%{background:#ef444438;transform:scale(1.03)}to{background:var(--card-inner);transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes cardFlip{0%{opacity:0;transform:rotateY(90deg)scale(.8)}to{opacity:1;transform:rotateY(0)scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes cardFlyUp{0%{opacity:0;transform:translateY(40px)scale(.72)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes cardGlow{0%,to{box-shadow:0 0 0 2px var(--primary), 0 0 10px var(--primary)}50%{box-shadow:0 0 0 3px var(--primary), 0 0 22px var(--primary)}}.card-back.slot-available{animation:1.3s ease-in-out infinite cardGlow}.card-back.slot-selected{box-shadow:0 0 0 3px var(--secondary), 0 0 16px var(--secondary)}.card-back.slot-unavailable{opacity:.22}.card-style.slot-corner{box-shadow:0 0 0 2px var(--accent), 0 3px 10px #0000002e}@media (width<=480px){.game-area{border-radius:0;min-height:100dvh;margin:0;padding:72px 1rem 1.5rem}#root{padding:0}button{min-height:54px;padding:17px}.choices button{min-height:52px;font-size:15px}.card-style{width:44px;height:62px;font-size:16px}.card-back{width:44px;height:62px}.bus-grid{gap:5px}}
