:root{--surface:#f9f9f9;--paper:#f0f0f0;--ink:#000;--on-surface:#1b1b1b;--primary:#a900a9;--on-primary:#fff;--primary-container:#f0f;--secondary:#026e00;--ready:#00f900;--on-secondary:#fff;--error:#ba1a1a;--background:#f9f9f9;--white:#fff;--border:4px;--shadow:8px;--gutter:16px;--margin:20px;--stack:12px;--font-display:"Bricolage Grotesque", sans-serif;--font-body:"Archivo Narrow", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--background);color:var(--on-surface);font-family:var(--font-body);font-size:16px;font-weight:500;line-height:24px}h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;margin:0}button,input,textarea{border-radius:0;font-family:inherit}button{cursor:pointer}.page{max-width:720px;padding:var(--margin);gap:var(--stack);flex-direction:column;min-height:100dvh;margin:0 auto;display:flex}.display{font-family:var(--font-display);letter-spacing:-.02em;text-transform:uppercase;text-align:center;font-size:48px;font-weight:800;line-height:48px}.display.shadowed{color:var(--ink);text-shadow:8px 8px 0 var(--primary)}.headline{font-family:var(--font-display);text-transform:uppercase;font-size:32px;font-weight:800;line-height:36px}.label{font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;font-size:14px;font-weight:700;line-height:16px}.card{background:var(--white);border:var(--border) solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);gap:var(--stack);flex-direction:column;padding:20px;display:flex}.home-tutorial{gap:16px;margin-top:16px}.tutorial-kicker{color:var(--primary)}.tutorial-art{background:var(--paper);border:var(--border) solid var(--ink);color:var(--ink)}.tutorial-graphic{width:100%;height:auto;max-height:180px;display:block}.tutorial-copy{text-align:center;min-height:132px;padding-top:20px}.tutorial-copy h2{font-size:clamp(22px,4vw,28px);line-height:1.2}.tutorial-copy p{max-width:460px;margin:12px auto 0;font-size:18px;line-height:26px}.tutorial-nav{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.tutorial-nav .btn{min-width:0;padding:10px 8px;font-size:18px}.tutorial-nav .btn:focus-visible{outline:3px solid var(--primary);outline-offset:5px}.tutorial-count{white-space:nowrap}.field{flex-direction:column;gap:8px;display:flex}.input{border:var(--border) solid var(--ink);background:var(--white);text-transform:uppercase;width:100%;min-height:56px;color:var(--ink);padding:12px 16px;font-size:20px;font-weight:600;line-height:28px}.input:focus{border-color:var(--primary);outline:none}.input-plain{text-transform:none}.textarea{resize:vertical;min-height:140px;font-weight:500;line-height:24px}.star-row{justify-content:center;gap:8px;display:flex}.star-btn{border:var(--border) solid var(--ink);width:56px;height:56px;box-shadow:var(--shadow) var(--shadow) 0 var(--ink);background:var(--white);color:var(--ink);padding:0;font-size:32px;line-height:1}.star-btn.on{background:var(--primary);color:var(--on-primary)}.star-btn:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:translate(8px,8px)}.feedback-card{gap:16px}.feedback-pitch{text-transform:uppercase;letter-spacing:.02em;margin:0;font-weight:600}.btn{border:var(--border) solid var(--ink);min-height:56px;box-shadow:var(--shadow) var(--shadow) 0 var(--ink);font-family:var(--font-display);text-transform:uppercase;color:var(--on-primary);background:var(--primary);padding:12px 16px;font-size:24px;font-weight:700;line-height:28px}.btn:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:translate(8px,8px)}.btn:disabled,.btn[aria-disabled=true]{cursor:not-allowed;opacity:.4;box-shadow:var(--shadow) var(--shadow) 0 var(--ink);transform:none}.btn-ready{background:var(--ready);color:var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink)}.btn-ghost{background:var(--white);color:var(--ink)}.record-body{gap:var(--stack);flex-direction:column;display:flex}.record-actions{flex-direction:column;gap:12px;margin-top:4px;display:flex}.record-actions .btn{width:100%}.confirm-overlay{z-index:100;padding:var(--margin);background:#f9f9f9eb;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirm-card{width:100%;max-width:480px}.clip-picker-card{flex-direction:column;gap:10px;width:100%;max-width:420px;max-height:min(80vh,640px);display:flex;overflow:hidden}.clip-picker-actions{gap:8px;display:flex}.clip-picker-actions>*{flex:1}.clip-picker-mini{border:3px solid var(--ink);background:var(--white);min-height:36px;color:var(--ink);font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase;box-shadow:2px 2px 0 var(--ink);cursor:pointer;padding:6px 10px;font-size:12px;font-weight:800}.clip-picker-mini:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.clip-picker-scroller{border:3px solid var(--ink);background:var(--white);gap:0;min-height:0;max-height:200px;display:flex;overflow:hidden}.clip-picker-scroller.can-scroll .clip-picker-list{box-shadow:inset 0 -36px 28px -12px #f9f9f9fa}.clip-picker-rail{background:var(--paper);border-right:3px solid var(--ink);cursor:pointer;flex:0 0 16px;position:relative}.clip-picker-thumb{border:2px solid var(--ink);background:var(--ink);min-height:28px;box-shadow:none;cursor:grab;touch-action:none;padding:0;position:absolute;left:2px;right:2px}.clip-picker-thumb:active{cursor:grabbing;background:var(--primary)}.clip-picker-list{scrollbar-width:none;flex-direction:column;flex:1;gap:6px;min-height:0;max-height:none;margin:0;padding:8px;list-style:none;display:flex;overflow-y:auto;box-shadow:inset 0 -28px 24px -16px #f9f9f9f2}.clip-picker-list::-webkit-scrollbar{width:0;height:0;display:none}.clip-picker-scroll-hint{text-align:center;letter-spacing:.08em;opacity:.6;margin:-2px 0 0;font-size:11px}.clip-picker-row{border:3px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);align-items:center;gap:8px;min-height:44px;padding:6px 8px;display:flex;position:relative;overflow:hidden}.clip-picker-row.on{background:var(--primary-container)}.clip-picker-wave{opacity:.35;pointer-events:none;flex:1;align-items:center;min-width:0;height:28px;display:flex}.clip-picker-row.playing .clip-picker-wave{opacity:.55}.clip-picker-wave .wave-backdrop{width:100%;height:100%}.clip-picker-wave .wave-backdrop i{width:2px}.clip-picker-row.on .clip-picker-wave .wave-backdrop i,.clip-picker-row.on .clip-picker-wave .wave-backdrop i.wave-played{background:var(--ink)}.clip-picker-row.playing:not(.on) .clip-picker-wave .wave-backdrop i.wave-played{background:var(--primary)}.clip-picker-row:not(.playing) .clip-picker-wave .wave-backdrop i,.clip-picker-row:not(.playing) .clip-picker-wave .wave-backdrop i.wave-played{background:var(--ink)}.clip-picker-title{max-width:42%;font-family:var(--font-display);text-transform:uppercase;overflow-wrap:anywhere;text-align:right;flex:0 auto;font-size:13px;font-weight:800;line-height:1.15}.clip-picker-check{z-index:1;cursor:pointer;flex:none;align-items:center;display:flex;position:relative}.clip-picker-check input{opacity:0;pointer-events:none;position:absolute}.clip-picker-tick{border:2px solid var(--ink);background:var(--white);box-sizing:border-box;flex:0 0 22px;place-items:center;width:22px;height:22px;font-size:12px;line-height:1;display:grid}.clip-picker-row.on .clip-picker-tick{background:var(--ink);color:var(--white)}.clip-picker-play{z-index:1;border:2px solid var(--ink);background:var(--white);width:32px;height:32px;color:var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;flex:0 0 32px;place-items:center;padding:0;display:grid;position:relative}.clip-picker-play .transport-icon{width:14px;height:14px;display:block}.clip-picker-play:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.clip-picker-actions .btn{min-height:44px;font-size:16px}.confirm-message{text-align:center;font-size:24px;line-height:28px}.row{gap:var(--stack);display:flex}.row>*{flex:1}.err{color:var(--error);text-transform:uppercase;font-weight:700}.code-block{background:var(--primary-container);border:var(--border) solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);text-align:center;flex-direction:column;align-items:center;gap:12px;padding:24px;display:flex}.code-block .code{font-family:var(--font-display);letter-spacing:.12em;color:var(--ink);font-size:48px;font-weight:800}.avatars{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.avatar{flex-direction:column;align-items:center;gap:4px;min-width:56px;max-width:120px;min-height:56px;display:flex}.avatar-face{border:var(--border) solid var(--ink);background:var(--white);justify-content:center;align-items:center;width:48px;height:48px;display:flex}.avatar-face.player-photo{color:var(--ink);padding:6px}.avatar-face.player-photo svg{width:100%;height:100%;display:block}.avatar-face.player-photo.host{background:var(--primary-container)}.avatar-face.player-photo.ready,.avatar.ready .avatar-face.player-photo{background:var(--ready)}.nick{letter-spacing:.04em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:12px;font-weight:700;overflow:hidden}.avatar .nick{white-space:normal;max-width:120px;text-overflow:unset;text-align:center;overflow-wrap:anywhere;word-break:break-word;line-height:1.15;overflow:visible}.audio-bar{border:var(--border) solid var(--ink);background:var(--paper);align-items:center;gap:12px;min-height:56px;padding:12px;display:flex}.audio-bar-ref{opacity:.85}.audio-bar-empty{background:var(--white);border-style:dashed}.audio-bar-live{background:var(--white);border-style:solid}.audio-bar-empty .label,.audio-bar-live .label{flex-shrink:0}.audio-bar-empty .label{opacity:.45}.audio-bar-live .label{color:var(--primary)}.audio-bar button,.audio-bar .transport-visual{border:var(--border) solid var(--ink);background:var(--white);width:48px;min-width:48px;height:48px;min-height:48px;color:var(--ink);box-shadow:3px 3px 0 var(--ink);box-sizing:border-box;flex:0 0 48px;place-items:center;padding:0;display:grid}.audio-bar .transport-visual{pointer-events:none;-webkit-user-select:none;user-select:none}.audio-bar button .transport-icon,.audio-bar .transport-visual .transport-icon{width:22px;height:22px;display:block}.wave{pointer-events:none;flex:1;align-items:center;gap:3px;height:32px;display:flex}.wave i{background:var(--ink);width:3px;height:40%;transition:background 80ms linear;display:block}.wave i.wave-played{background:var(--primary)}.wave-empty i,.wave i.wave-pending{background:var(--ink);opacity:.2;height:18%!important}.tier-row{border:var(--border) solid var(--ink);background:#1b1b1b;border-bottom:none;min-height:88px;display:flex}.tier-row:last-child{border-bottom:var(--border) solid var(--ink)}.tier-board{border:none;flex-direction:column;width:100%;display:flex}.tier-label{border-right:var(--border) solid var(--ink);width:72px;font-family:var(--font-display);color:var(--ink);text-align:center;box-sizing:border-box;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:22px;font-weight:800;line-height:1.1;display:flex}.tier-label.tier-wtf-{letter-spacing:-.02em;width:72px;min-width:0;font-size:14px}.tier-slots{flex-wrap:wrap;flex:1;align-items:center;gap:10px;min-width:0;padding:10px;display:flex}.tier-empty{color:#ffffff59;align-self:center;font-weight:700}.clip-tile{box-sizing:border-box;border:var(--border) solid var(--ink);background:var(--white);width:120px;max-width:120px;min-height:96px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;color:var(--ink);outline:none;flex-direction:column;flex:0 0 120px;justify-content:space-between;align-items:center;gap:4px;padding:6px;display:flex}.clip-tile:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.clip-tile:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}.clip-tile.playing{background:var(--primary-container)}.clip-tile.silent,.clip-tile:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.clip-tile-user,.clip-tile-clip{text-align:center;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word;width:100%;line-height:1.15}.clip-tile-user{font-family:var(--font-display);font-size:12px;font-weight:800}.clip-tile-clip{letter-spacing:.02em;opacity:.7;font-size:10px;font-weight:700}.clip-tile-play{border:3px solid var(--ink);background:var(--primary);width:28px;height:28px;color:var(--on-primary);box-shadow:2px 2px 0 var(--ink);flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:800;line-height:1;display:flex}.clip-tile.playing .clip-tile-play{background:var(--ink);color:var(--white)}.tier-vote-wrap{border-top:var(--border) solid var(--ink);flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;display:flex}.playback-row.now{background:var(--white);outline:4px solid var(--primary);outline-offset:0}.playback-who{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.now-playing{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--primary);font-size:14px;font-weight:800}.tier-vote{flex-wrap:wrap;gap:10px;display:flex}.tier-btn{border:var(--border) solid var(--ink);min-width:56px;min-height:56px;color:var(--ink);font-family:var(--font-display);padding:8px 12px;font-size:20px;font-weight:800;line-height:1}.tier-s-{background:#ff7a7a}.tier-s{background:#ff8f5f}.tier-a{background:#ffc46b}.tier-b{background:#ffe86b}.tier-c{background:#d8ff72}.tier-d{background:#9cff74}.tier-btn.tier-wtf-{background:#b6ff00;min-width:92px}.tier-wtf-{background:#b6ff00}.tier-btn[aria-pressed=true]{box-shadow:var(--shadow) var(--shadow) 0 var(--ink);transform:translate(-2px,-2px)}.player-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.player-tile{border:var(--border) solid var(--ink);text-align:center;background:var(--white);aspect-ratio:1;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-width:0;padding:8px;display:flex;overflow:hidden}.player-tile .nick{width:100%;display:block}.player-tile.host{background:var(--primary-container)}.player-tile.open{background:var(--white);border-style:solid}.player-tile.open .seat-mark{border:3px solid var(--ink);opacity:.22;width:28px;height:28px}.player-tile.locked{color:#555;background:#cfcfcf}.player-tile .seat-lock{width:40px;height:40px;display:block}@media (width<=520px){.player-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.player-tile{gap:4px;padding:4px}.player-tile .seat-lock{width:28px;height:28px}}.clip-rank-row{border-bottom:var(--border) solid var(--ink);flex-direction:column;gap:8px;padding:12px 0;display:flex}.clip-rank-row:last-child{border-bottom:none}.clip-rank-meta{align-items:flex-start;gap:12px;display:flex}.clip-rank-num{font-family:var(--font-display);color:var(--primary);min-width:48px;font-size:32px;font-weight:800;line-height:1}.stepper{border:var(--border) solid var(--ink);display:flex}.stepper button{border:none;border-right:var(--border) solid var(--ink);background:var(--paper);min-width:44px;min-height:44px;font-size:24px;font-weight:800}.stepper button:last-of-type{border-right:none;border-left:var(--border) solid var(--ink)}.stepper span{font-family:var(--font-display);flex:1;justify-content:center;align-items:center;font-size:24px;font-weight:800;display:flex}@media (width>=800px){.display{letter-spacing:-.04em;font-size:80px;line-height:80px}}.play-area{position:relative}.game-stage,.playback-stack,.vote-stage{gap:var(--stack);flex-direction:column;width:100%;display:flex}.play-reveal{animation:.28s ease-out play-reveal}@keyframes play-reveal{0%{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}.play-countdown{z-index:5;background:var(--white);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.play-countdown-label{letter-spacing:.06em;margin:0;font-size:16px}.play-countdown-num{font-family:var(--font-display);letter-spacing:-.04em;color:var(--ink);margin:0;font-size:clamp(72px,18vw,120px);font-weight:800;line-height:.9}.vote-play-area{border:var(--border) solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);background:var(--white);position:relative}.vote-play-area .vote-board{box-shadow:none;border:none}.dimmed{opacity:.35;pointer-events:none}.vote-board .tier-row.drop-ready{cursor:pointer}.vote-board .tier-row.drop-hot{outline:3px solid var(--primary);outline-offset:-3px}.vote-pool-row{flex-wrap:wrap;gap:10px;display:flex}.vote-clip{box-sizing:border-box;border:var(--border) solid var(--ink);background:var(--white);width:104px;min-height:96px;box-shadow:4px 4px 0 var(--ink);cursor:grab;color:var(--ink);-webkit-user-select:none;user-select:none;flex-direction:column;flex:0 0 104px;justify-content:space-between;align-items:center;gap:4px;padding:6px;display:flex}.vote-clip.selected{background:var(--primary-container);outline:3px solid var(--primary)}.vote-clip.locked{cursor:default;opacity:.85;box-shadow:2px 2px 0 var(--ink)}.vote-clip .clip-tile-play{cursor:pointer}.stats-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.stats-list li{flex-direction:column;gap:4px;display:flex}.stats-list strong{font-family:var(--font-display);text-transform:uppercase;font-size:22px}.mini-board-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.mini-board{border:var(--border) solid var(--ink);background:var(--white);box-shadow:var(--shadow) var(--shadow) 0 var(--ink);text-align:left;color:var(--ink);cursor:pointer;padding:10px}.mini-board:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.mini-board-name{font-family:var(--font-display);text-transform:uppercase;overflow-wrap:anywhere;margin-bottom:8px;font-size:14px;font-weight:800;display:block}.mini-tiers{flex-direction:column;gap:2px;display:flex}.mini-tier-row{align-items:center;gap:6px;min-height:18px;display:flex}.mini-tier-label{text-align:center;border:2px solid var(--ink);width:36px;padding:1px 0;font-size:10px;font-weight:800;line-height:1.2}.mini-tier-count{opacity:.7;font-size:11px;font-weight:700}.tier-modal{z-index:40;background:#0000008c;justify-content:center;align-items:flex-start;padding:24px 12px;display:flex;position:fixed;inset:0;overflow:auto}.tier-modal-card{background:var(--white);border:var(--border) solid var(--ink);width:min(640px,100%);box-shadow:8px 8px 0 var(--ink);flex-direction:column;gap:12px;padding:16px;display:flex}@media (prefers-reduced-motion:reduce){.btn:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:none}.play-reveal{animation:none}}