/* Compact desktop controls on laptop-height viewports. Touch layouts keep their larger targets. */
@media(min-width:701px) and (max-height:800px){
  #room .npi{padding:12px 16px 6px}
  #room .npey{margin-bottom:5px}
  #room .nptitle{font-size:13px;margin-bottom:3px}
  #room .npby{margin-bottom:9px;font-size:10px}
  #room .ptimes{margin-bottom:8px}
  #room .ctrl-row{margin-bottom:8px;gap:6px}
  #room .ctrl-row2{margin-bottom:7px;gap:6px}
  #room .cbtn.lg{width:40px;height:40px}
  #room .cbtn.md{width:32px;height:32px}
  #room .vol-row{padding:7px 0;margin-bottom:3px}
  #room .deck-tabs{padding:3px;gap:3px}
  #room .deck-tab{padding:7px 8px;font-size:9px;letter-spacing:1px}
  #room .deck-body{padding:6px 12px 8px}
  #room .fx-hdr{margin-bottom:5px}
  #room .fx-cell{margin-top:6px}
  #room .fx-eq .fx-cell{margin-top:8px;gap:4px}
  #room .sb-grid{gap:5px;margin-top:3px}
  #room .pad-hit{padding:9px 2px;min-height:32px;letter-spacing:.5px}
  #room .vz-list{gap:4px;margin-top:3px}
  #room .vz-opt{padding:6px 8px;min-height:32px;column-gap:5px;row-gap:1px;font-size:9px;letter-spacing:.4px}
  #room .vz-ico{width:16px;height:16px}
  #room .sb-hint{margin-top:5px;letter-spacing:.3px}
  #room .djadd{padding:8px 16px}
  #room .djlab{margin-bottom:5px}
  #room .djinp,#room .djbtn,#room .dj-upload-btn{padding:8px}
  #room .room-feature-actions{margin:0 16px 8px;gap:6px}
  #room .room-feature-actions>button{min-height:36px;padding:7px 5px;font-size:10px}
}
@media(min-width:701px) and (max-height:760px){
  #room .npi{display:grid;grid-template-columns:1fr 1fr;column-gap:8px;padding-top:9px}
  #room .npi>*{grid-column:1/-1}
  #room .npi .ctrl-row2{grid-column:1;grid-row:7;justify-content:flex-start;margin:0;gap:4px}
  #room .npi .vol-row{grid-column:2;grid-row:7;margin:0;padding:0;border:0;gap:4px;min-width:0}
  #room .vol-row .vlab{width:24px;font-size:7px;letter-spacing:0}
  #room .vol-row input{min-width:0;width:100%}
  #room .ctrl-label{font-size:7px;letter-spacing:0;margin-left:0}
  #room .vz-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  #room .vz-opt{grid-template-columns:14px minmax(0,1fr);padding:5px 4px;font-size:8px;letter-spacing:0;min-height:30px}
  #room .vz-ico{width:14px;height:14px}
  #room .pad-hit{min-height:28px;padding:7px 2px}
}
/* Shared shape and interaction language for every AllTune page. */
:root{--control-radius:10px;--card-radius:16px;--ui-line:#ffffff18;--ui-muted:#aaa6be;--ui-focus:#c4b6ff}
body button:not(.tone-bubble):not(.theme-dot),body input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),body select,body textarea,
body :is(.platform-links a,.platform-actions a,.auth-link,.gn-btn,.tlogin-link,.room-account-link,.billing-button,.music-actions a,.act,.code-pill,.rpill,.tleave,.tchip,.cpill,.uplan,.badge,.atmosphere-toggle){border-radius:var(--control-radius)!important}
body :is(.lcard,.card,.plan-card,.premium-teaser,.panel,.stat,.empty,.uhead,.recent-room,.billing-plan,.music-song,.qitem,.emoji-pop,.toast,.music-notice){border-radius:var(--card-radius)!important}
body dialog{border-radius:var(--card-radius)!important}
body :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
body :is(.tab-btn,.deck-tab){border:1px solid transparent;margin:0;border-radius:var(--control-radius);padding:10px 12px}
body :is(.tab-btn,.deck-tab).active{border-color:var(--border2,#44375e);background:var(--adim,#7c6fff18);color:var(--text,#eeeef8)}
.ltabs,.deck-tabs{gap:6px;padding:5px;border:1px solid var(--border,#29243e);border-radius:var(--card-radius)}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}
.vicn{border:0;background:transparent;color:var(--text2);display:inline-flex;align-items:center;justify-content:center;padding:0}
.mobile-only{display:none!important}
.mobile-fold{min-width:0}.mobile-fold>summary{display:none;cursor:pointer;list-style:none;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:500;color:#e3def4;padding:15px 16px;min-height:48px}
.mobile-fold>summary::-webkit-details-marker{display:none}.mobile-fold>summary::after{content:'+';color:#b5a3ff;font-size:20px}.mobile-fold[open]>summary::after{content:'−'}
#room-sheet{padding:0;border:1px solid #766196;background:#10101e;color:var(--text);color-scheme:dark;overflow:hidden}
#room-sheet::backdrop{background:#04040ca6;backdrop-filter:blur(5px)}
/* Panel motion is brief and leaves playback and layout dimensions untouched. */
@keyframes room-panel-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  .tab-btn,.deck-tab,.mob-tab{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
  #tab-join,#tab-create,.deck-body>.fx-sec,.deck-body>#sb-sec,.deck-body>#vz-sec,#room-sheet .mob-pane.active,.premium-tools[open]>.premium-tool-body{animation:room-panel-enter .2s ease-out}
  #music-dialog[open],#minigames-dialog[open],#premium-tools-dialog[open]{animation:room-panel-enter .2s ease-out}
  #room-sheet{opacity:0;transform:translateY(24px);transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),display .24s allow-discrete,overlay .24s allow-discrete}
  #room-sheet[open]{opacity:1;transform:translateY(0)}
  #room-sheet::backdrop{opacity:0;transition:opacity .2s ease,display .24s allow-discrete,overlay .24s allow-discrete}
  #room-sheet[open]::backdrop{opacity:1}
  @starting-style{#room-sheet[open]{opacity:0;transform:translateY(24px)}#room-sheet[open]::backdrop{opacity:0}}
}
.sheet-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);gap:12px;flex-shrink:0}.sheet-heading h2{font-size:17px;font-weight:500}.sheet-heading button{width:44px;height:44px;background:#ffffff08;border:1px solid #ffffff16;color:#eeeef8;font-size:22px;cursor:pointer}
.sheet-intro{font-size:13px;line-height:1.7;color:#aaa6be;margin:0 0 18px}.sheet-account-links{display:grid;gap:10px}.sheet-account-links a,.sheet-account-links button{display:block;padding:14px 16px;border:1px solid #ffffff18;border-radius:var(--control-radius);background:#ffffff05;color:#e3dcff;font:14px 'Inter',sans-serif;text-decoration:none;text-align:left}.sheet-account-links .danger{color:#ff94b5}
@media(min-width:701px){#room-sheet{display:none!important}}
@media(max-width:700px){
  .mobile-only{display:inline-flex!important}
  #room{height:100dvh;min-height:0;overflow:hidden}#room.active{display:flex}
  #room>.topbar{height:58px;padding:6px 12px;padding-top:max(6px,env(safe-area-inset-top));gap:8px;flex-shrink:0}
  #room .topbar .tr{gap:8px;min-width:0}#room .topbar .tchip,#room .topbar #topbar-user,#room .topbar .tleave{display:none}
  #room .rpill{min-height:40px;display:flex;align-items:center;font-size:12px;letter-spacing:2px;padding:8px 12px}
  #room .cpill{padding:8px;border:0;background:transparent}#room .cpill #ctxt{font-size:8px;letter-spacing:0}
  .mobile-account-button{height:44px;align-items:center;gap:6px;padding:0 12px;background:var(--adim);color:#ddd3ff;border:1px solid var(--border2);font:12px 'Inter',sans-serif}
  #room>.viswrap{flex:1 1 auto;height:auto;min-height:110px;border:0;order:1}
  #room>.viswrap #vis{width:100%;height:100%}#room>.viswrap.round #vis{width:100%;height:100%;object-fit:contain}
  #room>.viswrap.round::before{width:90vw;height:90vw}
  #room>.main{flex:0 0 auto;min-height:0;order:2;overflow:visible;background:#0c0c1ee8;border-top:1px solid var(--border);border-radius:16px 16px 0 0}
  #room .np-panel{border:0;width:100%;flex:none}#room .npi{padding:12px 16px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  #room .npey{grid-column:1;margin:0 0 4px;font-size:8px;letter-spacing:1.5px}#room .nptitle{grid-column:1;font-size:14px;line-height:1.4;min-height:20px;-webkit-line-clamp:1;margin:0}
  #room .npby{grid-column:1;margin:4px 0 0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:12px}
  #room .ctrl-row{grid-column:2;grid-row:1/4;gap:4px;margin:0}#room .cbtn.md{width:36px;height:44px}#room .cbtn.lg{width:44px;height:44px}#room .cbtn.sm{min-width:44px;min-height:44px}
  #room .prog{grid-column:1/-1;margin-top:12px}#room .ptimes{grid-column:1/-1;margin:5px 0 0;font-size:9px}
  #room>.mob-tabs{order:3;display:flex;gap:4px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#0c0c1e;border:0;flex:0 0 auto}
  #room .mob-tab{min-height:54px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;color:#aaa6be;font:10px 'Inter',sans-serif;letter-spacing:0;margin:0}
  #room .mob-tab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #room .mob-tab.active{background:var(--adim);border-color:var(--border2);color:#c3b4ff}
  #room .mob-tab[style*="display: none"]{display:none}
  #room-sheet[open]{position:fixed;inset:auto 0 0;width:100%;max-width:560px;margin:0 auto;height:min(72dvh,620px);max-height:calc(100dvh - 16px);display:flex;flex-direction:column;border-radius:16px 16px 0 0!important;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -16px 70px #0006}
  #room-sheet .mob-content{display:flex;flex:1;min-height:0;overflow:hidden}#room-sheet .mob-pane{min-height:0;flex:1}#room-sheet .mob-pane.active{display:flex}
  #room-sheet .qlist{flex:1;overflow-y:auto;min-height:0;padding:10px 12px}#room-sheet .qitem{padding:12px;margin-bottom:8px;border:1px solid var(--border);background:#ffffff03;min-height:58px}
  #room-sheet .qdel{opacity:1;min-width:40px;min-height:40px}#room-sheet .qempty{padding:28px 16px;line-height:1.8}
  #room-sheet .djinp,#room-sheet .cinp{font-size:16px;min-width:0}#room-sheet .djbtn,#room-sheet .dj-upload-btn,#room-sheet .csend{min-width:44px;min-height:44px}
  #room-sheet .cbot{padding:12px;gap:6px}#room-sheet .cmsgs{padding:14px;min-height:0;flex:1;overflow-y:auto}
  #room-sheet .deck{min-height:0;flex:1}#room-sheet .deck-tabs{margin:12px 12px 0}#room-sheet .deck-tab{min-height:44px}#room-sheet .deck-body{padding:16px;overflow-y:auto}
  #room-sheet .music-create-mobile{min-height:44px;margin:0}#mob-account{padding:18px;overflow-y:auto}
  .music-notice{bottom:calc(82px + env(safe-area-inset-bottom))!important;padding:12px 14px;font-size:12px}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom));white-space:normal;max-width:calc(100vw - 32px);width:max-content;line-height:1.6}
  .lobby-layout{padding:18px 14px;gap:16px}.lcard{padding:22px 18px}.lcard .llogo{font-size:17px}.lcard .ltag{margin-bottom:16px;font-size:9px}.room-hint{font-size:12px}.lobby-story{max-width:100%}.lobby-story h1{font-size:32px}.lobby-story .room-steps{display:none}.mobile-fold{border:1px solid #ffffff18;border-radius:var(--card-radius);background:#ffffff03;margin:0 0 12px}.mobile-fold>summary{display:flex}.mobile-fold .fold-content{padding:0 16px 16px}.mobile-fold .premium-teaser{margin:0;border:0;background:none;padding:4px 0}.mobile-fold .panel{padding:0;border:0;background:none}.mobile-fold .panel-title{display:none}.mobile-fold .stats{margin:0;gap:8px}.mobile-fold .stat{padding:12px}.mobile-fold .stat-val{font-size:22px}.profile-page .wrap{padding:18px 14px}.profile-page .uhead{margin-bottom:16px}.profile-page .platform-actions{margin:12px 0 18px;gap:6px}.profile-page .twocol{gap:0}.profile-page .twocol>div:first-child{overflow:visible}.profile-page .tbl{min-width:430px}.fold-content:has(.tbl){overflow-x:auto}.profile-page .uname{font-size:16px}.profile-page .uav{width:44px;height:44px;font-size:14px}
  .upgrade-wrap{padding:24px 14px}.upgrade-hero{margin-bottom:22px}.upgrade-hero h1{font-size:32px;margin:10px 0 12px}.upgrade-hero p{font-size:13px}.plan-grid{gap:14px}.plan-card{padding:20px}.plan-card.featured{order:-1}.plan-card h2{font-size:23px}.billing-plan{padding:14px}.billing-plan strong{font-size:24px}.billing-plan p{margin:6px 0 12px}.plan-card ul{margin:10px 0;padding-left:20px}.account-page .card{padding:26px 22px}.account-page input{font-size:16px}.account-page .account-intro{font-size:13px;margin-bottom:18px}
}
@media(max-width:700px) and (max-height:500px){#room>.topbar{height:46px}#room>.viswrap{min-height:64px}#room .npi{padding:6px 14px}#room .npby,#room .npey{display:none}#room .nptitle{grid-row:1}#room .ctrl-row{grid-row:1}#room .prog{margin-top:4px}#room>.mob-tabs{padding-top:4px;padding-bottom:4px}#room .mob-tab{min-height:44px;flex-direction:row}#room-sheet[open]{height:calc(100dvh - 10px)}}
:root{--premium:#e8bf69;--premium-ink:#241909;--premium-soft:#e8bf6918;--premium-line:#e8bf6960}
/* One gold crown for feature markers and membership labels, at every size. */
:is(.premium-crown,.premium-label,.premium-chat-badge,a[href="/upgrade"],.lobby-story .premium-teaser .platform-kicker,.music-eyebrow)::before{content:"";display:inline-block;width:1em;height:1em;min-width:1em;margin-right:.4em;vertical-align:-.1em;background:var(--premium);-webkit-mask:url('/premium-crown.svg') center/contain no-repeat;mask:url('/premium-crown.svg') center/contain no-repeat}
.premium-crown{display:inline-flex;align-items:center;justify-content:center;color:var(--premium);font-size:16px;line-height:1}
.premium-crown::before{margin:0}
.vz-opt{position:relative;padding-right:30px}
.vz-opt .premium-crown{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:14px}
.music-open .premium-crown{background:var(--premium-ink);padding:3px;border-radius:4px}
body .uplan.premium-label{color:var(--premium);border-color:var(--premium-line);background:var(--premium-soft);border-radius:999px!important}
body .premium-label{color:var(--premium)}
body :is(.platform-premium,.room-account-link[href="/upgrade"],.sheet-account-links a[href="/upgrade"]){display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px!important;border:1px solid var(--premium-line)!important;border-radius:999px!important;background:var(--premium-soft)!important;color:var(--premium)!important;font-weight:600;text-decoration:none;white-space:nowrap}
body :is(.platform-premium,.room-account-link[href="/upgrade"]):hover{background:#e8bf6930!important;border-color:var(--premium)!important}
.premium-chat-badge{display:inline-block;vertical-align:middle;padding:1px 6px;border:1px solid var(--premium-line);border-radius:999px;background:var(--premium-soft);color:var(--premium);font:700 8px/1.7 'Inter',sans-serif;letter-spacing:.5px}.cmsg-premium .cwho{color:var(--premium)}.cmsg-premium{border-left:2px solid var(--premium-line);padding-left:7px;background:linear-gradient(90deg,var(--premium-soft),transparent 85%)}
body :is(.premium-teaser,.plan-card.featured){border-color:var(--premium-line)}body :is(.premium-teaser .platform-kicker,.plan-card.featured .platform-kicker,.music-eyebrow,.billing-saving){color:var(--premium)}body :is(.music-open,#music-generate,.plan-card.featured .billing-button:not(.secondary)){background:var(--premium);border-color:var(--premium);color:var(--premium-ink)}body .premium-wrap button{background:var(--premium);color:var(--premium-ink)}body .music-notice{border-color:var(--premium);background:#241e12;color:#f6e2b5}body .premium-teaser a{color:var(--premium)}
@media(min-width:701px){body .deck-tabs,body .deck-tab,body .deck-tab.active{border:0;box-shadow:none}}
@media(max-width:700px){#room .npi{column-gap:10px;padding-top:10px}#room .npi .ctrl-row2{grid-column:1;grid-row:6;justify-content:flex-start;gap:4px;margin:4px 0 0;min-width:0}#room .npi .ctrl-row2 .cbtn.sm{width:36px;min-width:36px;height:36px;min-height:36px}#room .npi .ctrl-label{font-size:7px;letter-spacing:0}#room .npi .vol-row{grid-column:2;grid-row:6;min-width:0;width:124px;padding:0;margin:4px 0 0;border:0;gap:4px}#room .npi .vol-row .vlab{display:none}#room .npi .vicn{width:32px;height:36px;flex-shrink:0}#room .npi #vol-slider{width:88px;min-width:0;height:32px}#room .npi .prog{margin-top:8px}}