/* Refinement of the user-approved smoked glass theater; existing layout retained. */
html:has(body.theater) {
  scrollbar-gutter:stable;
  background:radial-gradient(ellipse at 50% 78%,#27232e55,transparent 58%),linear-gradient(125deg,#171a1f,#121519 60%,#1b1c23); /* taste-skill-ignore: preserve approved background through scrollbar gutters. */
  background-attachment:fixed;
}
html:has(body.theater #page-home.active) { scrollbar-gutter:auto; }
body.theater,body.theater:has(#page-home.active) { --chrome-edge:clamp(32px,3.333333vw,64px); min-width:0; background:transparent; }
/* Preserve the same centered content rectangle without a painted left gutter.
   On home the matching right margin replaces the absent native scrollbar. */
body.theater > .app { width:auto; max-width:none; margin-left:var(--native-scrollbar,15px); margin-right:max(0px,calc(var(--native-scrollbar,15px) - (100vw - 100%))); }
/* Full-width background, original content width. No vertical clip margin: it
   previously added a 15px scrollable tail below the viewport. */
#page-home .theater-home {
  width:100vw; margin-inline:calc((100% - 100vw) / 2);
  padding-inline:calc((100vw - 100%) / 2);
  overflow:clip; overflow-clip-margin:0; clip-path:none;
}
/* Keep the same ground beneath a short tablet/phone composition as well. The
   content may grow when space is genuinely insufficient; nothing is hidden. */
@media(max-width:900px), (max-height:599px) {
  #page-home:is(.active,.section-departing) .theater-home.has-launcher { min-height:calc(100dvh - var(--home-header-height,128px)); }
}
@media(max-width:600px) { body.theater:has(#page-home.active) { --home-header-height:170px; } }
@media(max-width:380px) { body.theater:has(#page-home.active) { --home-header-height:226px; } }
@media(min-width:901px) and (min-height:600px) and (max-height:660px) {
  #page-home:is(.active,.section-departing) .theater-status { width:160px; min-height:44px; padding:8px 12px; right:10px; bottom:12px; grid-template-columns:12px minmax(0,1fr) 26px; column-gap:10px; }
  #page-home:is(.active,.section-departing) .theater-status #heroLive { font-size:12px; letter-spacing:.12em; }
  #page-home:is(.active,.section-departing) .theater-status p { display:none; }
  #page-home:is(.active,.section-departing) .status-orb { width:11px; height:11px; }
  #page-home:is(.active,.section-departing) .theater-status>.soop-glyph { width:26px; }
  #page-home .danchu-signature { width:104px; }
  .is-concave .glass-platform { font-size:14px; }
}
#page-home .theater-floor { left:50%; width:100vw; transform:translateX(-50%); }
/* End the fade at the rendered texture edge on tablets too. A 480px minimum
   left the shorter image's opaque bottom visible before the mask had faded. */
@media(min-width:601px) { #page-home .theater-floor { height:calc(27.367vw + 180px); } }
body.theater .sidebar { width:100%; padding-inline:max(5px,calc(var(--chrome-edge) - var(--native-scrollbar,15px))); }
.sidebar .header-actions { gap:12px; }
.sidebar .channel-icons { gap:10px; }
.sidebar .channel-icons .social-icon {
  isolation:isolate; overflow:visible; width:46px; height:46px; border-radius:15px;
  border:1px solid #c9b7de40; color:#e9e0f1;
  background:linear-gradient(145deg,#c2b0de12,#202128b3 58%,#7e609519); /* taste-skill-ignore: approved glass material. */
  box-shadow:inset 0 1px 1px #eee0ff24,inset 0 -1px 1px #a684c312;
  backdrop-filter:blur(12px); transition:transform 180ms var(--ease),border-color 180ms ease,color 180ms ease;
}
.sidebar .channel-icons .social-icon::before {
  content:''; display:block; position:absolute; inset:2px; z-index:-1; border-radius:12px;
  border-top:1px solid #f2e7ff24; background:linear-gradient(125deg,#e2cbff0b,transparent 55%); /* taste-skill-ignore: subtle inner glass reflection. */
  opacity:.7; pointer-events:none; transition:opacity 180ms ease;
}
.sidebar .channel-icons .social-icon::after { display:none; }
.sidebar .channel-icons .social-icon svg { width:29px; height:29px; }
.sidebar .channel-icons .social-icon .soop-glyph { width:34px; height:24px; }
.sidebar .channel-icons .brand-cafe svg { width:27px; height:27px; }
.sidebar .channel-icons .brand-youtube svg { width:31px; height:31px; transform:none; }
.sidebar .channel-icons .social-icon small {
  display:block; position:absolute; right:5px; bottom:4px; width:auto; height:auto;
  border:0; border-radius:0; padding:0; background:none; box-shadow:none; color:#cdb9df;
  font:400 9px/1 var(--sans); letter-spacing:0;
}
.channel-tooltip {
  position:absolute; top:calc(100% + 10px); left:50%; z-index:5; transform:translate(-50%,-3px);
  padding:7px 10px; border:1px solid #d6c0e632; border-radius:9px; background:#25222ded;
  color:#eee6f5; font:400 11px/1.4 var(--sans); white-space:nowrap; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity 140ms ease,transform 140ms ease,visibility 140ms;
}
@media(hover:hover) and (pointer:fine) {
  .sidebar .channel-icons .social-icon:hover { transform:translateY(-2px); border-color:#d5b8ed8a; color:#fcf6ff; }
  .sidebar .channel-icons .social-icon:hover::before { opacity:1; }
  .social-icon:hover .channel-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:140ms; }
}
.social-icon:focus-visible .channel-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.sidebar .channel-icons .social-icon:active { transform:translateY(0) scale(.96); }

/* Original-size audio footprint; volume opens above it without moving the dock. */
body.theater .music-dock {
  right:4.25vw; width:184px; height:46px; gap:4px; padding:0 5px 0 1px; min-height:46px; border-radius:18px;
  border:1px solid #cebbdf52;
  background:linear-gradient(135deg,#51455c45,#202129e8 58%,#302a37cf); /* taste-skill-ignore: requested smoked-glass audio control. */
  box-shadow:inset 0 1px #f6e8ff29,inset 0 -1px #aa87c517,0 5px 20px #0002;
  backdrop-filter:blur(22px) saturate(.85); color:#e0d2ed;
}
.music-dock::before { content:''; position:absolute; inset:2px; border-top:1px solid #ead6fc1f; border-radius:17px; pointer-events:none; }
body.theater:has(#page-home.active) .music-dock { width:184px; }
body.theater .music-dock button { width:44px; height:44px; min-height:44px; padding:0; color:#e5d4f3; transition:color 160ms ease,background 160ms ease,transform 160ms var(--ease); }
body.theater .music-dock #theaterPlay {
  position:relative; width:44px; height:44px; min-height:44px; border-radius:15px; border:0; background:none; box-shadow:none; isolation:isolate;
}
body.theater .music-dock #theaterPlay::before {
  content:''; position:absolute; z-index:-1; inset:5px; border:1px solid #d8c1ef55; border-radius:12px;
  background:linear-gradient(135deg,#d1b7e737,#8b65ad19); /* taste-skill-ignore: glass playback key. */
  box-shadow:inset 0 1px #f6eaff26,inset 0 -1px #9b73bc1c; pointer-events:none; transition:border-color 160ms ease;
}
.music-dock #theaterPlay svg { width:17px; height:17px; }
.music-dock #theaterPlay[aria-busy="true"]::after { content:''; position:absolute; inset:5px; border:1px solid transparent; border-top-color:#ead5ff; border-radius:11px; animation:music-load 1.4s linear infinite; }
@keyframes music-load { to { transform:rotate(360deg); } }
body.theater .music-dock #musicTitle { display:flex; flex:1; min-width:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; width:auto; max-width:none; min-height:44px; height:44px; border-radius:8px; padding:0; overflow:hidden; text-align:left; }
.music-meta { display:flex; align-items:center; gap:6px; color:#a99bb7; font:400 10px/1.3 var(--sans); letter-spacing:.01em; }
.music-meter { display:flex; align-items:center; gap:2px; width:13px; height:10px; color:#cdb0e9; }
.music-meter i { display:block; width:2px; height:4px; border-radius:1px; background:currentColor; transform-origin:center; }
.music-meter i:nth-child(2) { height:9px; }.music-meter i:nth-child(3) { height:6px; }
.music-dock.is-playing .music-meter i { animation:music-level 1.1s ease-in-out infinite alternate; }
.music-dock.is-playing .music-meter i:nth-child(2) { animation-delay:-.7s; }.music-dock.is-playing .music-meter i:nth-child(3) { animation-delay:-.3s; }
@keyframes music-level { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
#musicTrackName { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; color:#eee4f6; font:400 12px/1.45 var(--serif); letter-spacing:.01em; }
body.theater .music-volume { position:relative; flex:none; width:44px; height:44px; gap:0; margin-left:0; padding:0; border:0; }
.music-volume::before { content:''; position:absolute; top:10px; bottom:10px; left:0; width:1px; background:#ccb3df29; pointer-events:none; }
body.theater .music-dock #musicMute,body.theater .music-dock #musicVolumeToggle { width:44px; height:44px; min-height:44px; }
.music-dock #musicMute svg,.music-dock #musicVolumeToggle svg { width:16px; height:16px; stroke-width:1.35; }
.music-dock #musicMute[aria-pressed="true"] { color:#9c8aa8; }
.music-volume-popover {
  position:absolute; z-index:5; right:-1px; bottom:calc(100% + 10px); width:158px; height:54px; display:flex; align-items:center; gap:6px; padding:4px 8px;
  border:1px solid #d7bfeb50; border-radius:16px; background:#25232df5; box-shadow:inset 0 1px #f2dfff1a,0 8px 22px #0003;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transform-origin:85% 100%; transition:opacity 150ms ease,transform 180ms var(--ease),visibility 150ms;
}
.music-volume-popover::after { content:''; position:absolute; left:0; right:0; top:100%; height:12px; }
.music-volume.is-open .music-volume-popover { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
body.theater .music-volume #musicVolume {
  --volume-level:35%; appearance:none; -webkit-appearance:none; flex:1; min-width:0; width:90px; height:44px; margin:0; opacity:1;
  border:0; border-radius:0; background:transparent; cursor:pointer; transition:none;
}
#musicVolume::-webkit-slider-runnable-track { height:2px; border-radius:2px; background:linear-gradient(90deg,#d7b8ef var(--volume-level),#86739359 var(--volume-level)); } /* taste-skill-ignore: functional volume fill. */
#musicVolume::-moz-range-track { height:2px; border-radius:2px; background:#86739359; }
#musicVolume::-moz-range-progress { height:2px; background:#d7b8ef; }
#musicVolume::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; margin-top:-3px; width:8px; height:8px; border:1px solid #f4e6ff; border-radius:50%; background:#d1afea; box-shadow:0 0 4px #d4a9f02b; }
#musicVolume::-moz-range-thumb { width:7px; height:7px; border:1px solid #f4e6ff; border-radius:50%; background:#d1afea; }
body.theater .music-details {
  right:4.25vw; bottom:84px; padding:16px; width:350px; max-width:calc(100% - 32px); border-radius:22px; border:1px solid #d7bfeb50;
  background:linear-gradient(145deg,#39313feb,#1d1d25f2); /* taste-skill-ignore: real floating glass audio panel. */
  box-shadow:inset 0 1px #f2dfff1a,0 18px 60px #0005; transform-origin:90% 100%; max-height:calc(100dvh - 110px); overflow:auto;
}
.music-details header { gap:12px; margin-bottom:12px; font:400 13px/1.5 var(--serif); }
.music-details #musicClose { flex:none; width:36px; height:36px; border-radius:50%; font:300 25px/1 var(--sans); }
.music-details .music-video { border:1px solid #cfb9e522; border-radius:11px; }
.music-details .music-controls { gap:10px; margin-top:12px; }
.music-details .music-controls button { width:44px; height:44px; border:1px solid #d3b6e32e; border-radius:13px; font-size:22px; }
.music-details .music-controls a { display:flex; align-items:center; min-height:44px; color:#dac4ea; font:400 12px/1.5 var(--sans); }
.music-details .music-message { margin:8px 0 0; color:#b9a9c4; font:400 11px/1.7 var(--sans); }
@media(hover:hover) and (pointer:fine) { .music-dock button:hover,.music-details button:hover { color:#fff5ff; background-color:#c8a7e316; } .music-dock #theaterPlay:hover::before { border-color:#e8cbff9c; } }

/* Light resides in the whole glass volume and curved surfaces, not a central bulb. */
.orb-shell {
  border:1px solid #e6d2f6c2; backdrop-filter:blur(.6px) saturate(1.2);
  background:radial-gradient(ellipse at 29% 18%,#f6e8ff40,transparent 38%),radial-gradient(ellipse at 70% 80%,#d9b7fc56,transparent 61%),radial-gradient(circle at 46% 43%,#8b6ea916 36%,#8d6fb540 64%,#e8d4ff8a 97%); /* taste-skill-ignore: requested luminous glass refraction. */
  box-shadow:inset 1px 1px 2px #fff6,inset -2px -2px 4px #6b3b9d66,0 0 3px #d6b2fa73;
}
.orb-depth { inset:0; background:radial-gradient(ellipse at 68% 26%,#291d4138,transparent 52%),radial-gradient(ellipse at 30% 73%,#a573dd45,transparent 68%); animation:orb-depth 12s ease-in-out infinite; } /* taste-skill-ignore: curved translucent volume. */
.orb-core { left:-12%; top:-12%; width:124%; height:124%; background:radial-gradient(ellipse at 61% 76%,#ecd8ff8c,#bc91ed5c 31%,#ab7eda22 52%,transparent 72%); filter:none; animation:orb-core 10.4s ease-in-out infinite; } /* taste-skill-ignore: broad lower refraction; no bright inner dot. */
.orb-caustic { inset:11% 10% 12% 16%; border:0; border-bottom:2px solid #f5ddffb0; border-right:1px solid #e9ceff94; border-radius:50%; box-shadow:1px 2px 2px #b779e954; filter:blur(.2px); animation:orb-caustic 11.6s ease-in-out infinite; }
.orb-rim { background:conic-gradient(from 16deg,transparent 0 26%,#dfb2ff9c 34%,#fff2ffed 39%,#d6adfa86 46%,transparent 54% 76%,#fff8 82%,#ebcaff8c 89%,transparent 95%); mask-image:radial-gradient(circle,transparent 60%,#000 66%); animation:orb-rim 14s ease-in-out infinite; } /* taste-skill-ignore: curved light-catching glass edge. */
.orb-glint { animation:orb-glint 12.2s ease-in-out infinite; }
.orb-glint::before { top:9%; left:20%; width:36%; height:15%; border-radius:65% 55% 52% 45%; background:linear-gradient(160deg,#fff7ffed,#e8d5ff80 55%,transparent); transform:rotate(-27deg); box-shadow:0 -1px 2px #fff5,0 1px 3px #bd93dd33; } /* taste-skill-ignore: soft rectangular window reflection on curved glass. */
.orb-glint::after { content:''; position:absolute; top:27%; right:9%; width:8%; height:29%; border-radius:50%; background:#eaccff8a; transform:rotate(-15deg); filter:blur(.3px); }
.orb-shell::after { inset:7%; border:1px solid #ead3fc29; background:none; opacity:.55; }
.orb-aura { inset:-22px; background:radial-gradient(circle,#bc8ded19 18%,#aa73dc14 42%,transparent 70%); animation:orb-aura 10.4s ease-in-out infinite; } /* taste-skill-ignore: restrained spill from the glass surface. */
.orb-emission { inset:-5px; background:radial-gradient(circle,transparent 43%,#d5acf445 54%,#b681ea19 65%,transparent 74%); filter:blur(1px); animation:orb-emission 10.4s ease-in-out infinite; } /* taste-skill-ignore: light stays close to the luminous curved shell. */
.orb-reflection { top:102%; left:-40%; width:180%; height:20px; background:radial-gradient(ellipse at 50% 8%,#e4c4ff66,#b883e428 33%,transparent 70%); filter:blur(2px); animation:orb-reflection 10.4s ease-in-out infinite; } /* taste-skill-ignore: focused glass caustic on the timeline. */
@keyframes orb-core { 0%,100% { transform:translate(-.5px,0) scale(1); opacity:.75; } 50% { transform:translate(.6px,-.5px) scale(1.025); opacity:.95; } }
@keyframes orb-rim { 0%,100% { transform:rotate(-8deg); opacity:.8; } 50% { transform:rotate(12deg); opacity:1; } }
@keyframes orb-glint { 0%,100% { transform:rotate(-4deg); opacity:.88; } 50% { transform:rotate(9deg); opacity:1; } }
@keyframes orb-caustic { 0%,100% { transform:rotate(-18deg) scale(.97); opacity:.65; } 50% { transform:rotate(8deg) scale(1); opacity:.95; } }
@keyframes orb-aura { 0%,100% { transform:scale(.98); opacity:.65; } 50% { transform:scale(1.03); opacity:.85; } }
@keyframes orb-emission { 0%,100% { transform:scale(1); opacity:.55; } 50% { transform:scale(1.025); opacity:.8; } }
@keyframes orb-reflection { 0%,100% { transform:translateX(-1px) scaleX(.96); opacity:.65; } 50% { transform:translateX(1px) scaleX(1.04); opacity:.9; } }

@media(max-width:1350px) { .sidebar .channel-icons .social-icon { width:42px; height:44px; } }
@media(max-width:600px) {
  body.theater,body.theater:has(#page-home.active) { --chrome-edge:20px; }
  .sidebar .header-actions { gap:12px; }.sidebar .channel-icons { gap:5px; }
  .sidebar .channel-icons .social-icon { width:32px; height:40px; border-radius:11px; }.sidebar .channel-icons .social-icon::before { border-radius:9px; }
  .sidebar .channel-icons .social-icon svg { width:25px; height:25px; }.sidebar .channel-icons .social-icon .soop-glyph { width:29px; }
  .sidebar .channel-icons .brand-youtube svg { width:27px; height:27px; }
  .sidebar .channel-icons .social-icon small { right:3px; bottom:3px; width:auto; height:auto; font-size:8px; }
  body.theater .music-dock { right:16px; }
  body.theater .music-details { right:16px; bottom:84px; max-width:calc(100% - 32px); padding:14px; }
}
@media(max-width:380px) { body.theater .sidebar { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) {
  .sidebar .channel-icons .social-icon,.channel-tooltip,.music-dock button,.music-details,.music-volume-popover { transition:none; }
  .music-dock.is-playing .music-meter i,.music-dock #theaterPlay[aria-busy="true"]::after,.ruler-orb * { animation:none!important; }
}

/* One small music key expands in place toward the left. No playback on hover. */
body.theater #musicDock.music-dock.is-collapsible {
  position:fixed; inset:auto; right:calc(max(var(--chrome-edge),env(safe-area-inset-right,0px)) - var(--music-gutter,0px));
  bottom:max(24px,env(safe-area-inset-bottom)); width:46px; height:46px; min-height:46px; max-width:calc(100vw - 32px);
  margin:0; padding:0; display:block; border-radius:16px; overflow:visible;
  transition:width 240ms cubic-bezier(.23,1,.32,1),border-color 180ms ease,background-color 180ms ease;
}
body.theater #musicDock.music-dock.is-expanded { width:184px; border-color:#d8bce76b; }
#musicDock::before { border-radius:14px; }
body.theater #musicDock #musicDockToggle {
  position:absolute; inset:0 0 auto auto; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:15px;
  background:none; color:#decaee; opacity:1; transition:opacity 120ms ease;
}
#musicDockToggle svg { width:22px; height:22px; }
body.theater #musicDock.is-playing #musicDockToggle { color:#f0dfff; }
body.theater #musicDock.is-expanded #musicDockToggle { opacity:0; pointer-events:none; }
.music-dock-controls {
  position:absolute; inset:0; display:flex; align-items:center; gap:4px; padding:0 5px 0 1px; border-radius:15px;
  opacity:0; visibility:hidden; pointer-events:none; overflow:clip; transition:opacity 120ms ease,visibility 120ms;
}
#musicDock.is-expanded .music-dock-controls { opacity:1; visibility:visible; pointer-events:auto; overflow:visible; transition:opacity 150ms 65ms ease,visibility 0s; }
#musicDock .music-dock-controls #theaterPlay { flex:none; }
#musicDock:focus-within { border-color:#ead3fcad; }
body.theater #musicDock.music-dock.dock-instant,.dock-instant .music-dock-controls,.dock-instant #musicDockToggle { transition:none; }
@media(min-width:1600px) and (min-height:940px) { body.theater #musicDock.music-dock.is-collapsible { bottom:max(32px,env(safe-area-inset-bottom)); } }
@media(max-width:600px) { body.theater #musicDock.music-dock.is-collapsible { bottom:max(16px,env(safe-area-inset-bottom)); } }
@media(prefers-reduced-motion:reduce) { body.theater #musicDock.music-dock.is-collapsible,.music-dock-controls,#musicDockToggle { transition:none; } }