:root{--accent: #facc15;--accent-muted: rgba(250, 204, 21, .2);--text-primary: #f8fafc;--text-secondary: #cbd5f5;--text-muted: #94a3b8;--border-strong: rgba(148, 163, 184, .35);--border-medium: rgba(148, 163, 184, .25);--border-light: rgba(148, 163, 184, .2);--border-subtle: rgba(148, 163, 184, .12);--error: #f87171;--success: #34d399;--page-background: radial-gradient(circle at 20% 20%, #1e293b, #0f172a 70%);--page-solid-background: #0f172a;--header-background: rgba(15, 23, 42, .9);--panel-background: rgba(15, 23, 42, .7);--card-background: rgba(30, 41, 59, .85);--overlay-background: rgba(15, 23, 42, .8);--circle-background: radial-gradient(ellipse at center, rgba(30, 41, 59, .6), rgba(15, 23, 42, .2));--circle-center-background: rgba(15, 23, 42, .72);--avatar-background: rgba(15, 23, 42, .4);--input-background: rgba(15, 23, 42, .5);--chip-background: rgba(148, 163, 184, .2);--chip-revealed-background: rgba(250, 204, 21, .2);--toggle-background: rgba(15, 23, 42, .66);--toggle-hover-background: rgba(15, 23, 42, .85);--grid-background: rgba(4, 7, 14, .96);--option-hover-background: rgba(15, 23, 42, .7);--option-selected-background: rgba(250, 204, 21, .26);--option-selected-favorite-background: rgba(250, 204, 21, .32);--vote-card-background: rgba(15, 23, 42, .45);--vote-card-selected-background: rgba(250, 204, 21, .1);--panel-footer-background: rgba(15, 23, 42, .5);--status-badge-background: rgba(15, 23, 42, .85);--shadow-strong: rgba(15, 23, 42, .4);--shadow-medium: rgba(15, 23, 42, .2);--drop-shadow-strong: rgba(15, 23, 42, .55);--donut-label-fill: #0f172a;--donut-label-stroke: rgba(248, 250, 252, .6);--donut-label-shadow: rgba(15, 23, 42, .3);--donut-center-background: rgba(15, 23, 42, .72);--donut-center-border: rgba(148, 163, 184, .25);--primary-button-text: #1f2937;--primary-button-disabled-background: rgba(148, 163, 184, .4);--primary-button-disabled-text: rgba(30, 41, 59, .9);--secondary-button-background: rgba(30, 41, 59, .8);--secondary-button-border: rgba(148, 163, 184, .35)}:root[data-theme=light]{--text-primary: #1f2937;--text-secondary: #334155;--text-muted: #64748b;--border-strong: rgba(148, 163, 184, .45);--border-medium: rgba(148, 163, 184, .3);--border-light: rgba(203, 213, 225, .7);--border-subtle: rgba(226, 232, 240, .6);--page-background: radial-gradient(circle at 20% 20%, #f8fafc, #e2e8f0 65%);--page-solid-background: #f1f5f9;--header-background: rgba(255, 255, 255, .85);--panel-background: rgba(255, 255, 255, .86);--card-background: rgba(255, 255, 255, .92);--overlay-background: rgba(241, 245, 249, .85);--circle-background: radial-gradient(ellipse at center, rgba(226, 232, 240, .8), rgba(148, 163, 184, .25));--circle-center-background: rgba(248, 250, 252, .9);--avatar-background: rgba(248, 250, 252, .9);--input-background: rgba(255, 255, 255, .95);--chip-background: rgba(203, 213, 225, .35);--chip-revealed-background: rgba(250, 204, 21, .15);--toggle-background: rgba(241, 245, 249, .9);--toggle-hover-background: rgba(255, 255, 255, 1);--grid-background: rgba(255, 255, 255, .98);--option-hover-background: rgba(248, 250, 252, 1);--option-selected-background: rgba(250, 204, 21, .18);--option-selected-favorite-background: rgba(250, 204, 21, .24);--vote-card-background: rgba(255, 255, 255, .94);--vote-card-selected-background: rgba(250, 204, 21, .12);--panel-footer-background: rgba(248, 250, 252, .95);--status-badge-background: rgba(255, 255, 255, .95);--shadow-strong: rgba(15, 23, 42, .18);--shadow-medium: rgba(15, 23, 42, .12);--drop-shadow-strong: rgba(30, 41, 59, .28);--donut-label-fill: #1f2937;--donut-label-stroke: rgba(255, 255, 255, .85);--donut-label-shadow: rgba(148, 163, 184, .4);--donut-center-background: rgba(255, 255, 255, .94);--donut-center-border: rgba(148, 163, 184, .35);--primary-button-disabled-background: rgba(203, 213, 225, .7);--primary-button-disabled-text: rgba(148, 163, 184, .9);--secondary-button-background: rgba(241, 245, 249, .95);--secondary-button-border: rgba(148, 163, 184, .4)}.app-shell{display:flex;flex-direction:column;min-height:100vh;position:relative;background:var(--page-background);background-color:var(--page-solid-background)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid var(--border-light);background:var(--header-background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-header h1{margin:0 0 4px;font-size:24px;font-weight:700}.theme-toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 14px}.theme-toggle .theme-icon{font-size:1.1rem;line-height:1}.room-label{margin:0;color:var(--text-muted)}.room-id{font-weight:600;color:var(--accent)}.app-main{flex:1;display:grid;grid-template-columns:3fr 1fr;gap:24px;padding:24px 32px 32px}.app-main.loading-state{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-secondary)}.participants-section{position:relative;background:var(--panel-background);border-radius:24px;border:1px solid var(--border-light);overflow:visible;display:flex;align-items:center;justify-content:center}.participants-container{position:relative;width:100%}.banana-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible;z-index:3}.banana-sprite{position:absolute;left:0;top:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;will-change:transform,opacity;-webkit-user-select:none;user-select:none}.banana-sprite img{width:100%;height:100%;filter:drop-shadow(0 6px 12px var(--drop-shadow-strong))}.circle-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:32px}.circle{position:relative;width:90%;max-width:960px;aspect-ratio:3 / 2;border-radius:50%;border:2px dashed var(--border-light);display:flex;align-items:center;justify-content:center;background:var(--circle-background)}.circle-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:16px 20px;border-radius:20px;background:var(--circle-center-background);border:1px solid var(--border-medium);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.empty-state{color:var(--text-muted)}.participant{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;width:120px;z-index:2;-webkit-user-select:none;user-select:none}.participant *{-webkit-user-select:none;user-select:none}.participant.me .avatar-frame{box-shadow:0 0 0 3px #facc1599}.participant.clickable{cursor:pointer}.participant.clickable:focus-visible{outline:2px solid rgba(250,204,21,.6);outline-offset:4px}.participant-shake .avatar-frame{animation:participant-hit-shake .25s ease-in-out}@keyframes participant-hit-shake{0%,to{transform:translate(0)}25%,75%{transform:translate(4px)}50%{transform:translate(-4px)}}.avatar-frame{width:88px;height:88px;border-radius:50%;overflow:hidden;border:3px solid var(--border-strong);background:var(--panel-background);display:flex;align-items:center;justify-content:center}.avatar-frame img{width:80%;height:80%;object-fit:cover}.participant-name{font-size:14px;font-weight:600;color:var(--text-primary)}.vote-chip{padding:2px 10px;border-radius:999px;font-size:12px;background:var(--chip-background);color:var(--text-secondary)}.vote-chip.revealed{background:var(--chip-revealed-background);color:var(--accent);font-weight:600}.donut-chart{display:flex;align-items:center;justify-content:center}.donut-graphic{width:300px;height:300px}.donut-segment-label{font-size:15px;font-weight:700;fill:var(--donut-label-fill);paint-order:stroke;stroke:var(--donut-label-stroke);stroke-width:4px;stroke-linejoin:round;text-shadow:0 1px 2px var(--donut-label-shadow)}.donut-average{font-size:38px;font-weight:700;fill:var(--text-primary)}.donut-average-label{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;fill:var(--text-muted)}.donut-center{fill:var(--donut-center-background);stroke:var(--donut-center-border);stroke-width:2px}.join-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-background);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:4}.join-card{width:min(480px,90%);background:var(--card-background);padding:32px;border-radius:24px;border:1px solid var(--border-medium);display:flex;flex-direction:column;gap:20px}.join-card h2{margin:0}.join-card p{margin:0;color:var(--text-secondary)}.field{display:flex;flex-direction:column;gap:8px}.field input{border-radius:12px;border:1px solid var(--border-medium);padding:12px 16px;font-size:16px;background:var(--input-background);color:var(--text-primary)}.field input:focus{outline:2px solid rgba(250,204,21,.4);border-color:transparent}.avatar-fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.avatar-fieldset legend{font-weight:600}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;max-height:320px;overflow-y:auto;padding-right:4px;grid-auto-rows:minmax(104px,auto)}.avatar-option{cursor:pointer;position:relative;border-radius:16px;overflow:hidden;border:2px solid transparent;background:var(--avatar-background);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:6px;color:var(--text-secondary);min-height:104px}.avatar-option.selected{border-color:#facc1599;color:var(--accent)}.avatar-option input{display:none}.avatar-option img{width:72px;height:72px;object-fit:cover;border-radius:12px;flex-shrink:0;display:block;min-height:72px}.avatar-option-placeholder{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:#fff;text-transform:uppercase;flex-shrink:0;min-height:72px}.avatar-option-placeholder span{pointer-events:none}.error-message{color:var(--error);margin:0}.control-panel{display:flex;flex-direction:column;gap:24px;background:var(--card-background);border-radius:24px;border:1px solid var(--border-light);padding:24px}.vote-deck h2{margin-top:0}.card-grid{display:grid;grid-template-columns:repeat(2,minmax(80px,1fr));gap:12px}.projectile-selector{position:absolute;top:24px;right:24px;z-index:2}.projectile-toggle{border-radius:14px;border:1px solid var(--border-medium);background:var(--toggle-background);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;cursor:pointer;transition:border .2s ease,box-shadow .2s ease,background .2s ease}.projectile-toggle:hover:not(:disabled){border-color:#facc1580;box-shadow:0 8px 24px var(--shadow-strong);background:var(--toggle-hover-background)}.projectile-toggle:disabled{opacity:.6;cursor:not-allowed}.projectile-toggle img{width:40px;height:40px}.projectile-toggle-icon{color:var(--text-secondary);transform:translateY(1px)}.projectile-grid{position:absolute;top:calc(100% + 10px);z-index:200;border-radius:14px;background:var(--grid-background);padding:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:0px;width:min(720px,calc(100vw - 56px));min-width:280px;max-height:240px;overflow-y:auto;overflow-x:hidden}.projectile-grid.align-right{right:0;left:auto}.projectile-grid.align-left{left:0;right:auto}.projectile-option{width:40px;height:40px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,background .15s ease;justify-self:center;padding:0;margin:0;border:0px}.projectile-option img{width:100%;height:100%;padding:0;margin:0}.projectile-option.favorite{background:transparent}.projectile-option:hover:not(:disabled){transform:translateY(-1px);background:var(--option-hover-background)}.projectile-option.selected{background:var(--option-selected-background)}.projectile-option.favorite.selected{background:var(--option-selected-favorite-background)}.projectile-option:disabled{opacity:.6;cursor:not-allowed}.projectile-break{grid-column:1 / -1;height:4px}.vote-card{border-radius:16px;border:1px solid var(--border-medium);background:var(--vote-card-background);color:var(--text-primary);padding:18px;font-size:20px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border .15s ease}.vote-card:hover:not(:disabled){transform:translateY(-2px);border-color:#facc1566;box-shadow:0 12px 24px var(--shadow-medium)}.vote-card.selected{border-color:#facc1599;background:var(--vote-card-selected-background);color:var(--accent)}.control-buttons{display:flex;gap:16px}.primary-button,.secondary-button,.text-button{padding:12px 18px;border-radius:12px;font-weight:600;cursor:pointer;border:none;transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease}.primary-button{background:linear-gradient(135deg,#facc15f2,#facc15b3);color:var(--primary-button-text)}.primary-button:disabled{background:var(--primary-button-disabled-background);color:var(--primary-button-disabled-text);cursor:not-allowed}.secondary-button{background:var(--secondary-button-background);border:1px solid var(--secondary-button-border);color:var(--text-secondary)}.secondary-button:hover:not(:disabled){border-color:#facc1580;color:var(--accent)}.secondary-button:disabled{opacity:.5;cursor:not-allowed}.text-button{background:transparent;color:var(--text-muted);padding:0}.panel-footer{background:var(--panel-footer-background);border-radius:16px;padding:16px;border:1px solid var(--border-light)}.panel-footer ul{padding-left:18px;margin:12px 0 0;color:var(--text-secondary)}.loading-hint{margin-top:12px;color:var(--text-muted);font-size:14px}.top-status-bar{position:absolute;top:24px;right:24px;display:flex;align-items:center;gap:12px;z-index:3;flex-wrap:wrap;justify-content:flex-end}.status-badge{background:var(--status-badge-background);border:1px solid var(--border-medium);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--text-secondary)}.status-badge>div:first-child{display:flex;align-items:center;gap:8px}.status-actions{display:flex;gap:12px;align-items:center}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--text-muted)}.status-dot.connected{background:var(--success)}.status-dot.connecting,.status-dot.reconnecting{background:var(--accent)}.status-dot.closed{background:var(--error)}@media (max-width: 1080px){.app-main{grid-template-columns:1fr}.control-panel{order:-1}.circle{width:min(60vh,90%)}}@media (max-width: 720px){.app-header{flex-direction:column;gap:12px;align-items:flex-start}.participants-section{min-height:420px}.vote-card{padding:16px}.status-badge{position:static}}:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;background-color:var(--page-solid-background);color:var(--text-primary)}:root[data-theme=light]{color-scheme:light}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;justify-content:center;align-items:stretch;background-color:var(--page-solid-background);color:var(--text-primary)}#root{width:100%;min-height:100vh}button{font-family:inherit}