@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
.mic-active{background:#a63d2d!important;border-color:#a63d2d!important}
.singer-panel .secondary-button{width:100%;margin-top:14px}
.catalog-count{color:var(--muted);font-size:12px;margin:0 0 12px}.select-view #catalog-more{display:block;margin:18px auto 0}.select-view #catalog-more[hidden]{display:none}
:root{--ink:#122026;--muted:#627077;--paper:#f5f4ef;--line:#dce0dc;--accent:#e95d3b;--dark:#162126;--mint:#b8e5d3}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1280px)/2));border-bottom:1px solid var(--line);background:rgba(245,244,239,.94);position:relative;z-index:5}.brand{text-decoration:none;display:flex;align-items:center;gap:12px;font:800 23px 'Manrope',sans-serif;letter-spacing:-.065em}.brand-symbol{display:grid;place-items:center;width:36px;height:36px;background:var(--accent);border-radius:10px;color:white;font:800 22px 'Manrope',sans-serif;letter-spacing:-.1em}.brand-symbol span{color:var(--dark);margin-left:1px}.header-actions{display:flex;align-items:center;gap:25px}.connection{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}.status-dot{width:7px;height:7px;background:#b9bdb9;border-radius:50%}.status-dot.online{background:#3ba480}.room-button{display:flex;align-items:center;gap:12px;padding:8px 11px 8px 15px;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:11px}.room-button>span:first-child{color:var(--muted);font-weight:700;letter-spacing:.1em}.room-button strong{font:800 15px 'Manrope',sans-serif;letter-spacing:.12em}.room-button>span:last-child{background:var(--mint);padding:5px 8px;border-radius:4px;font-weight:700}main{max-width:1280px;margin:auto;padding:0 32px}.view-screen{min-height:calc(100vh - 78px)}.select-view{padding:68px 0 60px}.eyebrow{display:block;font:800 11px 'Manrope',sans-serif;letter-spacing:.18em;color:var(--accent)}h1,h2,h3,p{margin-top:0}.intro{max-width:760px}.intro h1,.setup-copy h1,.results-view h1{font:800 clamp(48px,6vw,88px)/1.06 'Manrope',sans-serif;letter-spacing:-.075em;margin:16px 0 20px}.period{color:var(--accent)}.intro p,.setup-copy>p,.results-view>p{color:var(--muted);font-size:18px;max-width:560px}.catalog-header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:66px 0 18px}.catalog-header h2{font:800 25px 'Manrope',sans-serif;letter-spacing:-.055em;margin:5px 0 0}.search{width:285px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;color:var(--muted)}.search span{font-size:24px;line-height:1}.search input{width:100%;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink)}.songs-grid{display:grid;gap:10px}.song-card{display:flex;align-items:center;gap:22px;width:100%;text-align:left;padding:14px 20px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink);transition:border .2s,transform .2s,box-shadow .2s}.song-card:hover,.song-card:focus-visible{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 30px #16212612}.song-index{color:#9aa3a3;font:700 12px 'Manrope',sans-serif}.song-art{width:54px;height:54px;display:grid;place-items:center;background:#e2e7dc;border-radius:6px;color:#566c62;font:800 18px 'Manrope',sans-serif;letter-spacing:-.07em}.song-copy{display:flex;flex-direction:column;flex:1}.song-copy strong{font:800 16px 'Manrope',sans-serif;letter-spacing:-.03em}.song-copy small{color:var(--muted);font-size:12px}.song-action{font-size:12px;font-weight:700}.song-action span{color:var(--accent);font-size:17px;margin-left:8px}.how-it-works{display:flex;align-items:center;gap:24px;padding:32px 0;margin-top:44px;border-top:1px solid var(--line)}.how-it-works p{margin:0;color:var(--muted);font-size:12px}.how-it-works b{margin-left:24px;color:var(--accent)}.how-it-works b:first-child{margin-left:0}.setup-view{display:grid;grid-template-columns:1fr minmax(340px,430px);gap:9vw;align-items:center;padding:80px 0}.setup-copy h1{font-size:clamp(44px,5vw,70px)}.selected-song{margin-top:52px;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column}.selected-song span,.invite-block strong{color:var(--muted);font:800 10px 'Manrope',sans-serif;letter-spacing:.15em}.selected-song strong{font:800 21px 'Manrope',sans-serif;margin-top:9px}.selected-song small{color:var(--muted)}.setup-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 24px 60px #1621260d}.panel-top{display:flex;justify-content:space-between;align-items:center}.live-pill{background:#ebf5ef;color:#387a60;padding:5px 8px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.09em}.note-display{height:174px;display:flex;align-items:center;justify-content:center;flex-direction:column}.note-display strong{font:800 70px 'Manrope',sans-serif;letter-spacing:-.08em;line-height:1}.note-display span,.helper{font-size:12px;color:var(--muted)}.meter{height:8px;border-radius:10px;background:#e8ebe8;overflow:hidden}.meter>div{width:0;height:100%;background:var(--accent);transition:width .1s}.helper{min-height:36px;margin:12px 0}.local-mics{font-size:12px;color:var(--muted)}.primary-button,.secondary-button{border-radius:7px;padding:12px 16px;font-weight:800;font-size:13px}.primary-button{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--accent);color:white;border:1px solid var(--accent)}.primary-button:hover{background:#d34d2d}.primary-button span{font-size:19px;line-height:1}.secondary-button{background:#fff;border:1px solid var(--line);color:var(--ink)}.secondary-button:hover{border-color:#99a9a0}.setup-panel .secondary-button{width:100%;margin-bottom:10px}.game-view{padding:30px 0 40px;display:flex;flex-direction:column;gap:18px}.game-heading{display:flex;justify-content:space-between;align-items:end}.game-heading h2{font:800 27px 'Manrope',sans-serif;letter-spacing:-.05em;margin:6px 0 0}.game-heading p{color:var(--muted);margin:0;font-size:13px}.text-button{padding:0;background:none;border:0;color:var(--accent);font-size:12px;font-weight:800}.game-actions{display:flex;align-items:center;gap:15px}.media-status{font-size:12px;color:var(--muted)}.stage{background:var(--dark);border-radius:12px;overflow:hidden;position:relative;min-height:390px;box-shadow:0 20px 50px #12202626}.stage-label{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#b8c6c5;border-bottom:1px solid #ffffff18;font-size:11px;font-weight:700;letter-spacing:.13em}.stage canvas{display:block;width:100%;height:340px}.game-bottom{display:grid;grid-template-columns:minmax(300px,1fr) 350px;gap:18px}.media-player{height:220px;background:#0c1012;border-radius:10px;overflow:hidden}.media-player iframe{width:100%;height:100%}.media-player audio{width:100%;margin-top:80px}.singer-panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}.singer-panel h3{font:800 18px 'Manrope',sans-serif;letter-spacing:-.05em;margin:4px 0 16px}.singer-list{color:var(--muted);font-size:12px}.singer-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.singer-row strong{margin-left:auto;color:var(--ink);font:800 18px 'Manrope',sans-serif}.singer-mark{width:8px;height:8px;background:var(--accent);border-radius:50%}.singer-row.hitting .singer-mark{background:#42aa82}.results-view{max-width:660px;margin:auto;padding:90px 0}.results-view h1{font-size:64px}.result-row{display:grid;grid-template-columns:1fr auto;gap:0 20px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:20px;margin:10px 0}.result-row strong{font:800 28px 'Manrope',sans-serif}.result-row small{color:var(--muted)}.results-actions{display:flex;gap:10px;margin-top:30px}.results-actions .primary-button{width:230px}.modal{position:fixed;inset:0;z-index:20;background:#102126b8;display:grid;place-items:center;padding:20px}.modal-panel{position:relative;background:var(--paper);width:min(100%,470px);max-height:92vh;overflow:auto;border-radius:12px;padding:32px}.modal-panel h2{font:800 34px 'Manrope',sans-serif;letter-spacing:-.06em;margin:7px 0}.modal-panel p{font-size:13px;color:var(--muted)}.modal-close{position:absolute;right:20px;top:15px;background:none;border:0;font-size:28px;color:var(--muted)}.invite-block{padding:18px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}.invite-block a{font-size:12px;word-break:break-all;color:#bc5035}.qr-wrap{align-self:flex-start;background:#fff;padding:8px}.qr-wrap img{display:block;width:160px;height:160px}@media(max-width:700px){.site-header{height:65px;padding:0 18px}.connection{display:none}.brand{font-size:20px}.room-button>span:last-child{display:none}main{padding:0 18px}.select-view{padding:44px 0}.intro h1{font-size:48px}.intro p{font-size:15px}.catalog-header{margin-top:52px;align-items:stretch;flex-direction:column}.search{width:100%}.song-card{gap:13px;padding:12px}.song-action{font-size:0}.song-action span{font-size:19px}.how-it-works{display:block}.how-it-works p{line-height:2}.how-it-works b{margin-left:10px}.setup-view{display:block;padding:48px 0}.setup-copy h1{font-size:46px}.selected-song{margin:25px 0}.game-view{padding-top:20px}.game-heading{align-items:start;gap:8px}.game-heading h2{font-size:21px}.game-actions{flex-direction:column;align-items:end;gap:6px}.stage{min-height:340px}.stage canvas{height:290px}.game-bottom{grid-template-columns:1fr}.media-player{height:210px}.results-view h1{font-size:48px}.results-actions{flex-direction:column}.results-actions .primary-button{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.sync-controls{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.sync-controls>span{font-weight:800;color:var(--ink)}.sync-controls button{width:30px;height:30px;display:grid;place-items:center;padding:0;background:#fff;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-size:20px;line-height:1}.sync-controls button:hover,.sync-controls button:focus-visible{border-color:var(--accent)}.sync-controls strong{min-width:48px;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}.sync-controls small{margin-left:auto;font-size:11px}@media(max-width:700px){.sync-controls{flex-wrap:wrap}.sync-controls small{width:100%;margin-left:0}}

.media-player iframe{pointer-events:none}
/* Partida: superfície de jogo independente do layout do catálogo. */
body.game-active{background:#101b1e;overflow:hidden}
body.game-active .site-header{display:none}
body.game-active main{width:100%;max-width:none;padding:0}
.game-view{--game-edge:clamp(16px,2.5vw,40px);position:relative;width:100%;height:100dvh;min-height:420px;overflow:hidden;padding:0;background:radial-gradient(circle at 73% 39%,#234049 0%,#14272e 34%,#0b181d 80%);color:#eff7f3}
.game-view .stage{position:absolute;inset:0;min-height:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden}
.game-view .stage::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#09171dee 0%,#10252b54 30%,#10262c28 65%,#09171dc9 100%);pointer-events:none}
.game-view .stage canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
.game-view .stage-label{position:absolute;z-index:2;top:clamp(100px,15vh,145px);left:var(--game-edge);width:fit-content;height:auto;padding:0;border:0;display:flex;gap:16px;align-items:center;color:#b6d0cc;font:700 11px 'Manrope',sans-serif;letter-spacing:.15em}
.game-view #playback-time{color:#f1fbf7;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.02em}
.game-view .game-heading{position:absolute;z-index:4;inset:0 0 auto;display:flex;align-items:start;justify-content:space-between;gap:20px;padding:20px var(--game-edge) 40px;background:linear-gradient(180deg,#09171dfa 15%,#09171d00 100%)}
.game-view .game-heading h2{color:#fff;font-size:clamp(21px,2.3vw,34px);line-height:1.1;margin:6px 0 2px;max-width:min(46vw,650px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-view .game-heading p{color:#a9c0bd;font-size:12px}
.game-view .text-button{color:#a6e4d1;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.game-view .game-actions{display:flex;align-items:center;justify-content:end;gap:8px;flex-wrap:wrap;max-width:48%}
.game-view .game-actions .secondary-button,.game-view .singer-panel .secondary-button{border:1px solid #b6d0cc42;background:#ffffff12;color:#f4fbf7;backdrop-filter:blur(12px);padding:9px 12px;font-size:11px}
.game-view .game-actions .secondary-button:hover,.game-view .singer-panel .secondary-button:hover{background:#ffffff25;border-color:#a6e4d1}
.game-view .media-status{max-width:260px;color:#bfd1ce;font-size:11px;text-align:right}
.game-view .media-status a{color:#a6e4d1;text-decoration:underline}
.game-view .media-player{position:absolute;z-index:0;right:clamp(24px,8vw,150px);top:30%;width:clamp(220px,27vw,390px);height:auto;aspect-ratio:16/9;border-radius:0;background:transparent;opacity:.48;mask-image:radial-gradient(ellipse at center,#000 18%,#000b 42%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 18%,#000b 42%,transparent 75%);filter:saturate(.68)}
.game-view .media-player iframe{width:100%;height:100%;pointer-events:none}
.game-view .game-bottom{position:absolute;z-index:3;top:clamp(105px,16vh,155px);right:var(--game-edge);width:clamp(210px,20vw,275px)}
.game-view .singer-panel{padding:16px 18px;background:#07161db8;border:1px solid #bad0c529;border-radius:12px;box-shadow:0 16px 45px #0004;backdrop-filter:blur(14px);color:#eff7f3}
.game-view .singer-panel .eyebrow{color:#a6e4d1;font-size:10px}
.game-view .local-best-score{display:block;margin:2px 0 7px;color:#fff;font:800 clamp(27px,3vw,42px)/1 'Manrope',sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.game-view .singer-list{max-height:105px;overflow:auto;color:#bbcfcc;font-size:11px}
.game-view .singer-row{padding:5px 0;border-top-color:#ffffff21}
.game-view .singer-row strong{color:#eff7f3;font-size:14px}
.game-view .singer-panel .secondary-button{margin-top:8px;padding:7px 10px}
.game-view .singer-panel .helper{min-height:0;margin:6px 0 0;color:#b8d1cb;font-size:10px;line-height:1.35}
.game-view .sync-controls{position:absolute;z-index:3;left:var(--game-edge);bottom:clamp(90px,12vh,130px);display:flex;align-items:center;gap:8px;padding:7px 10px;background:#07161db8;border:1px solid #bad0c529;border-radius:9px;color:#c0d3d0;backdrop-filter:blur(12px);font-size:11px}
.game-view .sync-controls button{min-width:27px;min-height:27px;border:1px solid #bad0c540;border-radius:5px;background:#ffffff14;color:#eff7f3;cursor:pointer}
.game-view .sync-controls small{display:none}
.game-view .sync-controls strong{font-variant-numeric:tabular-nums;color:#fff}
.game-view .highway-speed{display:flex;align-items:center;gap:8px;margin-left:8px;padding-left:12px;border-left:1px solid #bad0c540;white-space:nowrap;font-weight:700}
.game-view .highway-speed select{min-width:69px;padding:5px 7px;border:1px solid #bad0c540;border-radius:5px;background:#233940;color:#eff7f3;font:700 11px 'Manrope',sans-serif;cursor:pointer}
.game-view:fullscreen{width:100vw;height:100dvh}
@media(max-width:700px){
  .game-view{--game-edge:14px;min-height:320px}
  .game-view .game-heading{padding-top:12px;gap:8px}
  .game-view .game-heading h2{font-size:19px;max-width:51vw}
  .game-view .game-actions{max-width:46%;gap:4px}
  .game-view .game-actions .secondary-button{padding:6px 7px;font-size:10px}
  .game-view .media-status{width:100%;font-size:10px;line-height:1.2}
  .game-view .stage-label{top:105px;font-size:9px}
  .game-view .game-bottom{top:135px;width:155px}
  .game-view .singer-panel{padding:10px}
  .game-view .singer-list{max-height:62px}
  .game-view .media-player{top:33%;right:0;width:55vw;min-width:190px;opacity:.35}
  .game-view .sync-controls{bottom:85px;padding:5px;gap:5px;font-size:10px}
  .game-view .highway-speed{gap:5px;margin-left:2px;padding-left:6px}
  .game-view .highway-speed span{display:none}
  .game-view .highway-speed select{min-width:62px;padding:4px;font-size:10px}
}
@media(max-height:530px){.game-view .game-bottom{top:86px}.game-view .stage-label{top:92px}.game-view .sync-controls{bottom:72px}.game-view .singer-list{max-height:50px}}
.game-view .media-player{top:48%}
.game-view .singer-panel .helper a{display:inline-block;color:#a6e4d1;text-decoration:underline;text-underline-offset:2px}
.setup-panel .helper a{color:var(--accent);font-weight:700;text-decoration:underline}
@media(max-width:700px){.game-view .media-player{top:49%}}
/* Identidade visual e temas. Os SVGs mantêm nitidez no palco e no celular. */
.brand-icon{display:block;width:38px;height:38px;flex:none;filter:drop-shadow(0 4px 8px #e95d3b24)}
.theme-picker{display:flex;align-items:center;gap:7px;color:var(--muted);font:700 11px 'Manrope',sans-serif}
.theme-picker select{appearance:none;min-width:105px;padding:8px 25px 8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);color:var(--ink);font:700 11px 'Manrope',sans-serif;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat}
.sound-toggle{padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface,#fff);color:var(--ink);font:700 11px 'Manrope',sans-serif}
.sound-toggle:hover,.theme-picker select:hover{border-color:var(--accent)}
.select-view{position:relative;isolation:isolate}
.select-view::before{content:"";position:absolute;z-index:-1;right:0;top:18px;width:min(46vw,540px);height:min(46vw,540px);background:url('/assets/stage-orbit.svg') center/contain no-repeat;opacity:.72;pointer-events:none}
.select-view .intro{position:relative;z-index:1}
.selected-song{position:relative;padding-right:70px}
.selected-song::after{content:"";position:absolute;right:0;top:22px;width:52px;height:52px;background:url('/assets/mic.svg') center/contain no-repeat;opacity:.85}
.results-view{position:relative}
.results-view::before{content:"";position:absolute;right:4%;top:42px;width:80px;height:80px;background:url('/assets/spark.svg') center/contain no-repeat;opacity:.8}
#btn-add-mic::before,#btn-add-mic-game::before{content:"";display:inline-block;width:15px;height:15px;margin-right:7px;vertical-align:-3px;background:url('/assets/mic.svg') center/contain no-repeat}
:root[data-theme="light"]{color-scheme:light;--ink:#122026;--muted:#627077;--paper:#f5f4ef;--line:#dce0dc;--accent:#e95d3b;--dark:#162126;--mint:#b8e5d3;--surface:#fff}
:root[data-theme="dark"]{color-scheme:dark;--ink:#edf5f0;--muted:#a8bbb7;--paper:#111b20;--line:#33454a;--accent:#ff795a;--dark:#0c171b;--mint:#254d43;--surface:#1b292e}
:root[data-theme="dark"] body{background:var(--paper)}
:root[data-theme="dark"] .site-header{background:#152126ee;border-bottom-color:var(--line)}
:root[data-theme="dark"] .song-card,:root[data-theme="dark"] .setup-panel,:root[data-theme="dark"] .result-row,:root[data-theme="dark"] .search,:root[data-theme="dark"] .room-button,:root[data-theme="dark"] .secondary-button,:root[data-theme="dark"] .modal-panel{background:var(--surface);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .song-art{background:#29423e;color:#d7f1e5}
:root[data-theme="dark"] .room-button>span:last-child{background:#285443;color:#d9f1e6}
:root[data-theme="dark"] .search input{color:var(--ink)}
:root[data-theme="dark"] .search input::placeholder{color:#8da29e}
:root[data-theme="dark"] .meter{background:#334347}
:root[data-theme="dark"] .live-pill{background:#214b3c;color:#bde9d3}
:root[data-theme="dark"] .sync-controls button{background:#233339;color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .results-view::before{opacity:.6}
:root[data-theme="dark"] .select-view::before{opacity:.35}
:root[data-theme="dark"] .game-view{color:#eff7f3}
:root[data-theme="dark"] .game-view .secondary-button{background:#ffffff12;color:#eff7f3;border-color:#b6d0cc42}
.fullscreen-hint{color:#ffd5a9;font-size:11px;font-weight:700;white-space:nowrap}

/* Catálogo: filtros rápidos e cartões de seleção com ritmo de jogo. */
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.genre-filters{display:flex;gap:6px;flex-wrap:wrap}
.genre-filters button{border:1px solid transparent;border-radius:6px;padding:8px 12px;background:transparent;color:var(--muted);font:800 11px 'Manrope',sans-serif;letter-spacing:.01em}
.genre-filters button:hover,.genre-filters button:focus-visible{border-color:var(--accent);color:var(--ink)}
.genre-filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.catalog-extra{display:flex;align-items:center;gap:14px;white-space:nowrap;color:var(--muted);font:700 11px 'Manrope',sans-serif}
.video-filter,.decade-filter{display:flex;align-items:center;gap:7px;cursor:pointer}
.video-filter input{accent-color:var(--accent)}
.decade-filter select{border:1px solid var(--line);border-radius:5px;padding:6px 8px;background:var(--surface,#fff);color:var(--ink);font:700 11px 'Manrope',sans-serif}
.catalog-extra #catalog-random{border:1px solid var(--accent);border-radius:6px;padding:7px 10px;background:transparent;color:var(--accent);font:800 11px 'Manrope',sans-serif}
.catalog-extra #catalog-random:hover,.catalog-extra #catalog-random:focus-visible{background:var(--accent);color:#fff}
.songs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.song-card{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:15px;min-height:165px;padding:18px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface,#fff);color:var(--ink);transition:transform .18s,border-color .18s,box-shadow .18s}
.song-card:hover,.song-card:focus-visible{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 16px 30px #12202616}
.song-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.song-index{position:absolute;right:17px;top:13px;color:var(--muted);font:800 10px 'Manrope',sans-serif;font-variant-numeric:tabular-nums}
.song-art{width:76px;height:76px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#d7e1da;color:#345448;font:800 22px 'Manrope',sans-serif}
.song-art::after{content:"";position:absolute;width:43px;height:43px;border:1px solid currentColor;border-radius:50%;opacity:.32;box-shadow:0 0 0 10px #ffffff25,0 0 0 18px #ffffff18}
.song-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.song-copy{display:flex;flex-direction:column;min-width:0;gap:2px;padding-right:7px}
.song-copy strong{font:800 17px/1.23 'Manrope',sans-serif;letter-spacing:-.035em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.song-copy small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.song-meta span{padding:3px 6px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font:700 10px 'Manrope',sans-serif}
.song-action{position:absolute;right:18px;bottom:13px;color:var(--accent);font:800 11px 'Manrope',sans-serif}
:root[data-theme="dark"] .genre-filters button[aria-pressed="true"]{background:#dceae2;color:#17262a}
:root[data-theme="dark"] .song-art{background:#29423e;color:#d7f1e5}

/* HUD: controles disponíveis sob demanda, placar discreto durante a música. */
.stage-settings{position:absolute;z-index:4;left:var(--game-edge);bottom:clamp(42px,6vh,66px);border:1px solid #bad0c540;border-radius:7px;padding:6px 10px;background:#07161db8;color:#c9ded8;font:700 11px 'Manrope',sans-serif;backdrop-filter:blur(12px)}
.stage-settings:hover,.stage-settings:focus-visible{border-color:#a6e4d1;color:#fff}
.game-view .sync-controls{transition:opacity .2s ease-out,transform .2s ease-out,visibility .2s}
.game-view .sync-controls.collapsed{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none}
.game-view .singer-panel{transition:background .3s,border-color .3s,box-shadow .3s,backdrop-filter .3s}
.game-view.hud-idle .singer-panel{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
.game-view.hud-idle .singer-panel #btn-add-mic-game,.game-view.hud-idle .singer-panel .helper{display:none}
.game-view .players-connected{display:block;color:#a9c9bd;font:700 10px 'Manrope',sans-serif;margin-bottom:8px}
.game-view .players-connected[hidden]{display:none}
.game-view.hud-idle .singer-row{border-top-color:#ffffff16}
@media(max-width:1000px){.catalog-toolbar{align-items:start;flex-direction:column}.songs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.songs-grid{grid-template-columns:1fr}.song-card{min-height:142px}.catalog-extra{width:100%;justify-content:space-between}.genre-filters{flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:4px}.genre-filters button{white-space:nowrap}.stage-settings{bottom:38px}.game-view .sync-controls{bottom:78px}}
@media(max-width:700px){.brand-icon{width:32px;height:32px}.header-actions{gap:7px}.theme-picker span{display:none}.theme-picker select{min-width:74px;width:74px;padding:7px 16px 7px 7px;font-size:10px;background-position:calc(100% - 10px) 13px,calc(100% - 6px) 13px;background-size:4px 4px}.sound-toggle{width:32px;height:32px;padding:0;font-size:0}.sound-toggle::after{content:'♪';font-size:18px}.sound-toggle[aria-pressed="false"]::after{content:'♪̸'}.room-button{gap:5px;padding:6px}.room-button strong{font-size:12px}.select-view::before{right:-30px;top:120px;width:70vw;height:70vw;opacity:.3}}

/* Catálogo com hierarquia discreta; Moduix fornece os controles e estados acessíveis. */
.select-view{padding-top:clamp(34px,5vh,66px)}
.select-view::before{display:none}
.select-view .intro{max-width:950px}
.select-view .intro h1{font-size:clamp(36px,4vw,58px);letter-spacing:-.055em;margin:10px 0 8px}
.select-view .intro p{font-size:14px;max-width:700px;line-height:1.6}
.select-view .catalog-header{margin-top:clamp(34px,5vh,62px)}
.select-view .catalog-header h2{font-size:21px;letter-spacing:-.035em}
#catalog-search-root{width:min(100%,360px)}
#catalog-search-root .search{width:100%;min-height:44px;border-radius:var(--moduix-radius-md,8px)}
#catalog-search-root input[data-slot="input-root"]{min-height:0;padding:0;border:0;background:transparent;box-shadow:none}
.genre-filters button[data-slot="button-root"]{min-width:0;border-radius:var(--moduix-radius-sm,6px);font-size:12px}
.song-card{border-radius:var(--moduix-radius-md,8px)}
.song-card:hover,.song-card:focus-visible{transform:translateY(-1px);box-shadow:0 8px 24px #12202612}
.mic-room-form input[data-slot="input-root"],.mic-field input[data-slot="input-root"]{background:#0d191e;color:#f5f4ef;border-color:#ffffff35}
.mic-room-form button[data-slot="button-root"]{background:#c9e9da;color:#162126;border:0}
#mobile-mic-control button[data-slot="button-root"]{min-height:56px}
@media(max-width:700px){.select-view{padding-top:28px}.select-view .intro h1{font-size:clamp(34px,9vw,46px)}.select-view .catalog-header{margin-top:30px}#catalog-search-root{width:100%}}

/* Palco: uma faixa discreta de navegação deixa a pista e a letra em primeiro plano. */
.game-view .game-heading{align-items:center;padding:12px var(--game-edge) 24px;background:linear-gradient(180deg,#09171de8,#09171d00)}
.game-view .game-title{display:flex;align-items:center;gap:12px;min-width:0}
.game-view .game-title-copy{min-width:0}
.game-view .game-heading h2{font-size:clamp(14px,1.25vw,20px);margin:0;max-width:min(36vw,520px)}
.game-view .game-heading p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-view .text-button{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #b6d0cc38;border-radius:8px;background:#ffffff0c;color:#e8f4ed;font:500 23px/1 'Manrope',sans-serif;text-transform:none;letter-spacing:0}
.game-view .text-button:hover,.game-view .text-button:focus-visible{border-color:#a6e4d1;background:#ffffff1c}
.game-view .game-actions{gap:5px;max-width:none;flex-wrap:nowrap}
.game-view .game-actions .secondary-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:8px;font-size:20px;line-height:1}
.game-view #btn-add-mic-top{font-size:0;background-image:url('/assets/mic.svg');background-position:center;background-repeat:no-repeat;background-size:19px 19px}
.game-view .media-status{display:none}
.game-view .media-status.attention{display:block;position:absolute;top:58px;right:var(--game-edge);max-width:min(500px,70vw);padding:6px 10px;border:1px solid #f3c49370;border-radius:6px;background:#16262deb;color:#ffe0b4;text-align:right;font-size:11px}
.game-view .fullscreen-hint:not(.hidden){position:absolute;top:58px;right:var(--game-edge);padding:6px 10px;border-radius:6px;background:#16262deb}
.game-view .stage-label{top:17px;left:50%;transform:translateX(-50%);color:#c8d7d2;letter-spacing:0}
.game-view #playback-time{font:700 clamp(13px,1.15vw,17px) 'Manrope',sans-serif;color:#d6e6df}
.game-view .game-bottom{top:clamp(78px,11vh,110px)}
@media(max-width:700px){
  .game-view .game-heading{padding:8px var(--game-edge) 20px}
  .game-view .game-title{gap:7px}
  .game-view .game-heading h2{font-size:13px;max-width:31vw}
  .game-view .game-heading p{font-size:10px;max-width:31vw}
  .game-view .text-button,.game-view .game-actions .secondary-button{width:30px;height:30px;font-size:17px}
  .game-view .game-actions{gap:3px}
  .game-view .stage-label{top:48px;left:var(--game-edge);transform:none}
  .game-view .game-bottom{top:85px}
}

/* Ícones vetoriais com o mesmo traço em todas as ações do palco. */
.ui-icon{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#qr-code-wrap[hidden],#qr-mic-help[hidden]{display:none}
.setup-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;padding:7px 0;border:0;background:none;color:var(--muted);font:800 12px 'Manrope',sans-serif}
.setup-back:hover,.setup-back:focus-visible{color:var(--accent)}
.setup-back .ui-icon{width:18px;height:18px}
.game-view #btn-add-mic-top{background-image:none;font-size:inherit}
.game-view .text-button .ui-icon,.game-view .game-actions .ui-icon{width:19px;height:19px}
#btn-game-sound-toggle .mute-slash,#btn-toggle-play .icon-pause{display:none}
#btn-game-sound-toggle[aria-pressed="false"] .sound-wave,#btn-toggle-play[aria-pressed="true"] .icon-play{display:none}
#btn-game-sound-toggle[aria-pressed="false"] .mute-slash,#btn-toggle-play[aria-pressed="true"] .icon-pause{display:block}
@media(max-width:700px){.setup-back{margin-bottom:22px}.game-view .text-button .ui-icon,.game-view .game-actions .ui-icon{width:17px;height:17px}}
/* Player identity and compact score alignment. */
.name-field{display:grid;gap:6px;margin:16px 0;color:var(--muted);font:700 11px 'Manrope',sans-serif}
.name-field input,.local-input-name input{width:100%;min-width:0;border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:8px 10px;color:var(--ink);font:700 13px 'DM Sans',sans-serif}
.local-input-name{display:grid;grid-template-columns:auto minmax(90px,1fr);align-items:center;gap:10px;margin:7px 0;font-size:11px}
.game-view .game-local-mics-list{display:grid;gap:4px;max-height:120px;overflow:auto}
.game-view .game-local-mics-list:empty{display:none}
.game-view .game-local-mics-list .local-input-name{color:#c2d8d1}
.game-view .game-local-mics-list input{background:#ffffff13;border-color:#ffffff35;color:#fff}
.game-view .singer-panel{text-align:right}
.game-view .singer-panel .eyebrow,.game-view .local-best-score{display:block;text-align:right}
.game-view.hud-idle .singer-panel .eyebrow,.game-view.hud-idle .local-best-score{display:none}
.game-view .players-connected{text-align:right}
.game-view .singer-row{justify-content:flex-end}
.game-view .singer-row>span:nth-child(2){text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-view .singer-row strong{margin-left:4px;min-width:43px;text-align:right}

/* Navegação em formato de biblioteca musical. O palco usa suas regras próprias acima. */
.select-view{max-width:1280px;margin:0 auto;padding:34px 0 70px}
.library-heading{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:154px;margin-bottom:34px;padding:22px 36px;overflow:hidden;border-radius:12px;background:#17332e;color:#f4f6ee}
.library-heading::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,#17332e 30%,#17332e70 100%);pointer-events:none;z-index:1}
.library-heading>div:first-child{position:relative;z-index:2}
.library-heading .eyebrow{color:#a9d9c5;font-size:10px}
.library-heading h1{margin:8px 0 6px;font:800 clamp(29px,3.3vw,46px)/1.08 'Manrope',sans-serif;letter-spacing:-.05em}
.library-heading p{margin:0;color:#c7d7ce;font-size:13px}
.library-heading-mark{position:absolute;right:55px;top:-95px;width:360px;height:360px;transform:rotate(-18deg)}
.library-heading-mark img{display:block;width:100%;height:100%}
.library-layout{display:grid;grid-template-columns:204px minmax(0,1fr);align-items:start;gap:34px}
.library-rail{position:sticky;top:22px;display:flex;flex-direction:column;gap:28px;min-width:0}
.rail-section{display:grid;gap:12px}
.rail-label{font:800 10px 'Manrope',sans-serif;letter-spacing:.16em;color:var(--muted)}
.select-view .genre-filters{display:grid;gap:3px}
.select-view .genre-filters button[data-slot="button-root"]{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:37px;padding:8px 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font:700 12px 'DM Sans',sans-serif;text-align:left}
.select-view .genre-filters button[data-slot="button-root"]:hover,.select-view .genre-filters button[data-slot="button-root"]:focus-visible{background:var(--surface,#fff);border-color:var(--line)}
.select-view .genre-filters button[data-slot="button-root"][aria-pressed="true"]{background:#dceae2;border-color:#c6ddcf;color:#18372c;box-shadow:inset 3px 0 #2c8065}
.rail-discover{position:relative;overflow:hidden;display:grid;gap:9px;padding:18px;border:1px solid var(--line);border-radius:9px;background:var(--surface,#fff)}
.rail-discover::after{content:"";position:absolute;right:-20px;top:-26px;width:100px;height:100px;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 13px var(--surface,#fff),0 0 0 14px var(--line);opacity:.7;pointer-events:none}
.rail-discover .rail-label,.rail-discover p,.rail-discover #catalog-random-root{position:relative;z-index:1}
.rail-discover p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.rail-discover #catalog-random{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:5px;background:var(--ink);color:var(--paper);font:800 11px 'Manrope',sans-serif}
.rail-discover #catalog-random:hover{background:var(--accent);color:#fff}
.select-view .catalog-header{display:flex;align-items:end;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.select-view .catalog-header .eyebrow{font-size:10px;color:var(--muted)}
.select-view .catalog-header h2{margin:2px 0 0;font-size:26px}
.select-view .catalog-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;padding:0;border:0;min-height:34px}
.select-view .catalog-count{margin:0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.select-view .catalog-extra{gap:18px}
.select-view .songs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.select-view .song-card{grid-template-columns:88px minmax(0,1fr);gap:15px;min-height:125px;padding:16px;border-radius:8px}
.select-view .song-art{width:88px;height:88px;border-radius:6px}
.select-view .song-copy{gap:4px;padding-right:25px}
.select-view .song-copy strong{font-size:15px}
.select-view .song-meta{margin-top:6px}
.select-view .song-action{right:15px;bottom:12px}
:root[data-theme="dark"] .select-view .genre-filters button[data-slot="button-root"][aria-pressed="true"]{background:#274c3e;color:#e8f4e9;border-color:#35634d}
:root[data-theme="dark"] .rail-discover #catalog-random{background:#c9e9da;color:#162126}
@media(max-width:900px){.library-layout{grid-template-columns:155px minmax(0,1fr);gap:20px}.select-view .songs-grid{grid-template-columns:1fr}.library-heading-mark{right:-30px}}
@media(max-width:700px){.select-view{padding:18px 0 50px}.library-heading{min-height:133px;margin-bottom:20px;padding:20px}.library-heading h1{font-size:30px;max-width:280px}.library-heading p{max-width:260px;font-size:11px}.library-heading-mark{right:-95px;top:-18px;width:210px;height:210px;opacity:.55}.library-layout{display:flex;flex-direction:column;gap:16px}.library-rail{position:static;width:100%;gap:0}.rail-section{gap:7px}.select-view .genre-filters{display:flex;width:calc(100vw - 36px);overflow:auto;flex-wrap:nowrap;padding-bottom:5px}.select-view .genre-filters button[data-slot="button-root"]{width:auto;white-space:nowrap;min-height:34px}.rail-discover{display:none}.library-content{width:100%}.select-view .catalog-header{align-items:start;flex-direction:column;gap:11px}.select-view .catalog-header h2{font-size:22px}.select-view .catalog-toolbar{align-items:start;gap:8px;flex-wrap:wrap}.select-view .catalog-extra{margin-left:auto}.select-view .song-card{min-height:114px;padding:13px;grid-template-columns:74px minmax(0,1fr)}.select-view .song-art{width:74px;height:74px}.select-view .song-copy strong{font-size:14px}.select-view .song-meta span{font-size:9px}}
@media(max-width:700px){.library-rail{gap:9px}.rail-discover{display:block;padding:0;border:0;background:transparent}.rail-discover::after,.rail-discover .rail-label,.rail-discover p{display:none}.rail-discover #catalog-random{width:auto;min-height:34px;padding:7px 12px;font-size:11px;gap:10px}}