/* Garbo player prototype. One layer, token-driven. !important only for [hidden] and reduced motion. */
:root {
  color-scheme: dark;
  --ink: #0b0605;
  --ink-2: #160e0b;
  --ink-3: #221612;
  --line: rgba(243, 230, 208, .12);
  --ivory: #f3e6d0;
  --ivory-2: #cdbca3;
  --ivory-3: #978672;
  --brass: #d6b06f;
  --flame: #e8a33d;
  --kumkum: #d8453a;
  --maroon: #3a1712;
  --cloth: #ebdcc0;
  --madder: #9a2416;
  --iron: #1c1411;
  --display: "Rasa", "Iowan Old Style", Georgia, serif;
  --ui: "Anek Gujarati", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --gutter: 20px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--ivory); overflow: hidden; }
/* An aarti's recording plays behind the page, through the stage screen the scene leaves clear */
html.screen-hole, html.screen-hole body { background: transparent; }
body { font: 16px/1.5 var(--ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* The 3D venue draws into its own canvas under #scene, which stays on top as a transparent overlay */
.venue-3d #scene { background: transparent; }

/* ---------- Layout ---------- */
.app {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 480px; margin: 0 auto;
  height: 100%; height: 100dvh;
  padding: var(--safe-t) var(--gutter) var(--safe-b);
}
.topbar { flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between; margin-right: -10px; }
/* The PlayGarba wordmark, the same as the Simple player's: the classic serif at regular weight, gently spaced */
.brand { display: block; color: var(--ivory); text-decoration: none; font-family: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(25px, 7.2vw, 29px); line-height: 1; letter-spacing: .018em; white-space: nowrap; text-shadow: 0 1px 2px rgba(3, 4, 10, .92), 0 5px 20px rgba(3, 4, 10, .68); }
.tools { display: flex; }
.tools { position: relative; }
/* The top controls sit in the same capsule as the view pill under them: dark glass and a brass hairline. No backdrop blur
   here: it would make the capsule the containing block of the fixed switch inside it */
.tools { align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid rgba(214, 176, 111, .3); border-radius: 999px; background: rgba(11, 6, 5, .8); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.tools .ib { width: 42px; height: 42px; }
.tools .ib:hover { background: rgba(246, 236, 215, .08); }
.tools .ib:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
/* The pill's right edge lines up with More's: the page padding, less the top bar's -10px overhang */
:root { --pill-right: calc(max(var(--gutter), env(safe-area-inset-right, 0px)) - 10px); --pill-top: calc(var(--safe-t, 0px) + 60px); --pill-w: 86px; --pill-switch-h: 49px; }
/* The Simple/Immersive switch and the scene buttons are one pill under More: the switch is its top, and View,
   Venue, Sound and Ideas drop down beneath it at the same width */
.view-switch {
  position: fixed; top: var(--pill-top); right: var(--pill-right); z-index: 20; width: var(--pill-w); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 4px 4px 4px; border: 1px solid rgba(214,176,111,.3); border-bottom: 0; border-radius: 26px 26px 0 0;
  background: rgba(11,6,5,.72); color: var(--ivory);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* At the DJ's table, and with the player hidden, the scene buttons step aside and the switch closes into a pill of its own */
.dj-mode .view-switch, .player-off .view-switch { border-bottom: 1px solid rgba(214,176,111,.3); border-radius: 26px; }
.view-switch-control { position: relative; display: flex; width: 76px; height: 40px; border-radius: 999px; background: rgba(246,236,215,.08); }
/* Two halves on one track. The knob sits under the Immersive half, the view you're in, and carries its full-screen
   icon; home waits faintly on the other half and goes to Simple */
.view-switch-control .view-switch-detail { position: absolute; left: 40px; top: 3px; width: 34px; height: 34px; border-radius: 50%; background: var(--brass); box-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none; }
.view-switch-half { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; touch-action: manipulation; }
.view-switch-icon { width: 16px; height: 16px; transition: color .2s ease, opacity .2s ease; }
.view-switch-icon-simple { color: var(--ivory-3); opacity: .7; }
.view-switch-half:hover .view-switch-icon-simple { color: var(--ivory); opacity: 1; }
.view-switch-icon-immersive, .view-switch-icon-exit { color: var(--ink); }
#fullBtn .view-switch-icon-exit, #fullBtn[aria-pressed="true"] .view-switch-icon-immersive { display: none; }
#fullBtn[aria-pressed="true"] .view-switch-icon-exit { display: block; }
.view-switch-half:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .view-switch-icon { transition: none; } }
@media (forced-colors: active) { .view-switch, .view-switch-control { border: 1px solid ButtonText; } .view-switch-control .view-switch-detail { background: ButtonText; box-shadow: none; } }
.ib { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; color: var(--ivory); }
.ib svg { width: 22px; height: 22px; }
.ib:active, .tb:active, .pp:active { transform: scale(.93); }

.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lamp-slot { flex: 1 1 auto; min-height: 150px; position: relative; }
.lamp-hit { position: absolute; left: 50%; top: 50%; width: 40%; height: 72%; transform: translate(-50%, -58%); border: 0; background: none; border-radius: 40%; cursor: pointer; }
.hint { flex: 0 0 auto; margin: 2px 0 10px; text-align: center; min-height: 16px; font: 600 13px/16px var(--ui); color: var(--brass); transition: opacity .3s ease; }

/* Now playing: fixed slot so long titles never move the controls */
.np { flex: 0 0 auto; height: 122px; display: grid; grid-template-rows: 16px 68px 20px 18px; align-content: start; text-align: center; transition: opacity .18s ease, transform .18s var(--ease-out); }
.np.swap { opacity: 0; transform: translateY(6px); }
.eyebrow { font: 600 13px/16px var(--ui); color: var(--brass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title { margin: 0; align-self: center; font: 600 32px/1.04 var(--display); letter-spacing: -.012em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.title.long { font-size: 25px; }
.title[lang="gu"] { font-weight: 500; line-height: 1.25; }
.artist, .from { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist { font: 400 14.5px/20px var(--ui); color: var(--ivory-2); }
/* Each singer's name opens the DJ on their songs: the name stays plain text, underlined only faintly */
.artist .artist-link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(214, 176, 111, .32); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.artist .artist-link:hover { color: var(--ivory); text-decoration-color: var(--brass); }
.artist .artist-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }
.from { font: 400 13px/18px var(--ui); color: var(--ivory-3); }
.from [lang="gu"] { font-family: var(--display); font-size: 14.5px; color: var(--ivory-2); }

.time { flex: 0 0 auto; min-height: 18px; display: flex; justify-content: center; gap: 8px; margin-top: 4px; font: 500 12px/18px var(--ui); color: var(--ivory-3); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.time .live-now { color: var(--kumkum); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }

.transport { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; justify-items: center; margin: 8px -6px 6px; }
.tb { width: 48px; height: 48px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--ivory); border-radius: 50%; position: relative; transition: color .15s ease, opacity .15s ease; }
.tb svg { width: 26px; height: 26px; }
.tb.quiet { color: var(--ivory-3); }
.tb.quiet svg { width: 21px; height: 21px; }
.tb[aria-pressed="true"] { color: var(--brass); }
#heartBtn svg { fill: none; }
#heartBtn[aria-pressed="true"] { color: var(--kumkum); }
#heartBtn[aria-pressed="true"] svg { fill: var(--kumkum); }
#shuffleBtn[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
.tb:disabled, .pp:disabled { opacity: .35; cursor: default; }
.pp { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--brass); background: rgba(214, 176, 111, .08); color: var(--brass); display: grid; place-items: center; cursor: pointer; position: relative; transition: transform .14s var(--ease-out), background .2s ease; }
.pp svg { width: 24px; height: 24px; grid-area: 1 / 1; }
.pp .i-pz { display: none; }
.app[data-playing="true"] .pp .i-pl { display: none; }
.app[data-playing="true"] .pp .i-pz { display: block; }
.app[data-playing="true"] .pp { background: var(--brass); color: var(--maroon); }
.pp-ring { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--brass); opacity: 0; }
.app[data-state="loading"] .pp-ring { opacity: 1; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Genre dial */
.dial { flex: 0 0 56px; position: relative; overflow: hidden; margin: 0 calc(var(--gutter) * -1); touch-action: pan-y; cursor: grab; }
.dial::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--brass) 0 5px, var(--kumkum) 5px 8px); }
.dial-track { position: absolute; left: 50%; top: 0; height: 100%; }
.dial button { position: absolute; top: 0; transform: translateX(-50%); border: 0; background: none; padding: 12px 8px; white-space: nowrap; cursor: pointer; color: var(--ivory-3); font: 500 14px/1 var(--ui); transition: left .32s var(--ease-out), top .32s var(--ease-out), color .2s ease, opacity .32s ease, font-size .32s var(--ease-out); }
.dial button[aria-current="true"] { color: var(--ivory); font-size: 16.5px; font-weight: 600; }

.foot { flex: 0 0 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 6px; }
.live, .explore, .yt { border: 0; background: none; padding: 8px 0; cursor: pointer; display: flex; align-items: center; }
.live { justify-self: start; gap: 8px; padding: 9px 14px 9px 12px !important; border-radius: 20px; border: 1px solid rgba(216, 69, 58, .45) !important; background: rgba(216, 69, 58, .1) !important; font: 700 13px/1 var(--ui); color: var(--ivory); }
.live:hover { background: rgba(216, 69, 58, .18) !important; }
.live[aria-pressed="true"] { background: var(--kumkum) !important; border-color: var(--kumkum) !important; }
.live[aria-pressed="true"] i { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--kumkum); box-shadow: 0 0 0 4px rgba(216, 69, 58, .16); }
.live[aria-pressed="true"] { color: var(--ivory); }
.live[aria-pressed="true"] i { animation: beacon 1.6s ease-out infinite; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(216, 69, 58, .55); } 100% { box-shadow: 0 0 0 10px rgba(216, 69, 58, 0); } }
.explore { flex-direction: column; gap: 1px; font: 500 13px/1 var(--ui); letter-spacing: .03em; color: var(--ivory); }
.explore svg { width: 16px; height: 16px; }
.yt { justify-self: end; gap: 6px; font: 600 12px/1 var(--ui); color: var(--ivory-2); cursor: default; }
.yt svg { width: 18px; height: 18px; }

.offline-bar { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--safe-t) + 60px); display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(34, 22, 18, .92); border: 1px solid var(--line); font-size: 13.5px; color: var(--ivory-2); }
.offline-bar svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--brass); }

/* Short phones (iPhone SE and older) */
@media (max-height: 700px) {
  .np { height: 104px; grid-template-rows: 16px 56px 18px 14px; }
  .title { font-size: 27px; }
  .title.long { font-size: 22px; }
  .artist { font-size: 13.5px; line-height: 18px; }
  .from { font-size: 12px; line-height: 14px; }
  .transport { margin-top: 2px; margin-bottom: 0; }
  .pp { width: 56px; height: 56px; }
  .dial { flex-basis: 48px; }
  .foot { flex-basis: 40px; margin-bottom: 2px; }
  .hint { margin-bottom: 6px; }
}

/* Landscape phones: lamp on the left, player on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .app { max-width: none; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .topbar { flex-basis: 48px; }
  .stage { display: grid; grid-template-columns: 1fr minmax(300px, 1fr); grid-template-rows: auto auto auto auto 1fr auto; column-gap: 28px; }
  .lamp-slot { grid-column: 1; grid-row: 1 / -1; min-height: 0; }
  .hint { grid-column: 2; grid-row: 1; margin: 4px 0; }
  .np { grid-column: 2; grid-row: 2; height: 96px; grid-template-rows: 16px 50px 16px 14px; }
  .title { font-size: 24px; }
  .time { grid-column: 2; grid-row: 3; }
  .transport { grid-column: 2; grid-row: 4; }
  .dial { grid-column: 2; grid-row: 5; margin: 0; align-self: end; height: 52px; }
  .foot { grid-column: 2; grid-row: 6; }
}

/* ---------- Sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 10; background: rgba(5, 3, 2, .55); animation: fade .2s ease; }
.sheet {
  position: fixed; z-index: 11; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 520px;
  max-height: calc(100dvh - var(--safe-t) - 40px); display: flex; flex-direction: column;
  background: var(--ink-2); border-radius: 22px 22px 0 0; border: 1px solid var(--line); border-bottom: 0;
  padding-bottom: var(--safe-b); animation: rise .26s var(--ease-out);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
}
@keyframes rise { from { transform: translateY(24px); opacity: .6; } }
@keyframes fade { from { opacity: 0; } }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: rgba(243, 230, 208, .25); margin: 8px auto 0; flex: 0 0 auto; }
.sheet-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 6px 20px; flex: 0 0 auto; }
.sheet-head h2 { margin: 0; font: 600 26px/1.1 var(--display); position: relative; }
.sheet-head .ib { position: relative; }
.mirror-head { height: 74px; overflow: hidden; }
.mirrors { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.mirror-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 14, 11, .95) 0, rgba(22, 14, 11, .7) 45%, rgba(22, 14, 11, .2) 100%); }
.mirror-head h2, .mirror-head .ib { z-index: 1; }
.sheet:focus, .about:focus { outline: none; }
.sheet-body { overflow-y: auto; padding: 8px 20px 24px; overscroll-behavior: contain; }
.lead { margin: 0 0 12px; color: var(--ivory-2); font-size: 15.5px; }
.note { margin: 8px 0 14px; color: var(--ivory-3); font-size: 13.5px; line-height: 1.5; }
.primary { width: 100%; height: 50px; border-radius: 25px; border: 0; background: var(--brass); color: var(--maroon); font: 700 15px/1 var(--ui); cursor: pointer; margin-top: 6px; }
.primary:active { transform: scale(.98); }

.search { display: flex; align-items: center; gap: 10px; margin: 4px 20px 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--line); flex: 0 0 auto; }
.search svg { width: 18px; height: 18px; color: var(--ivory-3); }
.search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ivory); font: 15px/1 var(--ui); outline: none; }
.search input::placeholder { color: var(--ivory-3); }
.search:focus-within { border-color: var(--brass); }

.tabs { display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.tabs button { border: 0; background: none; padding: 10px 0 11px; cursor: pointer; font: 600 14px/1 var(--ui); color: var(--ivory-3); position: relative; }
.tabs button[aria-selected="true"] { color: var(--ivory); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: 0 0 auto; border: 1px solid var(--line); background: none; border-radius: 16px; padding: 7px 12px; font: 500 13px/1 var(--ui); color: var(--ivory-2); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { border-top: 1px solid var(--line); }
.row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.row strong { font: 600 16px/1.3 var(--display); font-size: 17px; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row span { font-size: 13px; color: var(--ivory-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .dur { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; align-self: center; }
.row .badge { grid-column: 2; grid-row: 2; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.row.is-current strong { color: var(--brass); }
.row[aria-disabled="true"] { cursor: default; }
.row[aria-disabled="true"] strong { color: var(--ivory-3); }
.row .badge.na { color: #d79b86; }
.empty { padding: 24px 4px; color: var(--ivory-3); font-size: 14.5px; text-align: center; }

/* Explore: steps and artist essentials as lists you can open and play. A playing list keeps Next and auto-play on it. */
.rows li.explore-kicker { border: 0; padding: 16px 0 4px; font: 700 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.rows li.explore-kicker:first-child { padding-top: 4px; }
.rows li.explore-kicker + li { border-top: 0; }
.explore-list .row > span:first-of-type { grid-column: 1; grid-row: 2; }
.explore-list .row .claps { grid-column: 2; grid-row: 1; align-self: center; justify-content: flex-end; display: flex; gap: 5px; }
.explore-list .row .claps i { width: 9px; height: 9px; }
.row .badge.on { color: var(--brass); }
.rows li.list-head { display: flex; align-items: center; gap: 6px; padding: 2px 0 8px; border: 0; }
.list-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 20px/1.2 var(--display); color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-back { flex: 0 0 auto; width: 38px; height: 38px; margin-left: -8px; }
.list-back svg { transform: rotate(90deg); }
.list-back:focus-visible, .list-play:focus-visible, .list-leave:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.list-play { flex: 0 0 auto; border: 0; border-radius: 18px; padding: 9px 18px; background: var(--brass); color: var(--ink); font: 600 14px/1 var(--ui); cursor: pointer; }
.list-play:disabled { background: rgba(246, 236, 215, .1); color: var(--ivory-3); cursor: default; }
.rows li.list-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 4px 0 12px; border: 0; font-size: 13px; color: var(--ivory-3); }
.list-leave { border: 0; background: none; padding: 4px 0; color: var(--ivory-2); font: 600 13px/1.2 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rows li.is-na .row strong { color: var(--ivory-3); }
.claps i { width: 11px; height: 11px; border-radius: 50%; background: rgba(243, 230, 208, .12); transition: background .08s ease, transform .08s ease; }
.claps i.c { box-shadow: inset 0 0 0 1.5px var(--brass); }
.claps i.hit { background: var(--brass); transform: scale(1.25); }

.arc { width: 100%; height: auto; display: block; margin: 4px 0 8px; }
.night { list-style: none; margin: 0 0 6px; padding: 0; counter-reset: n; }
.night li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); counter-increment: n; }
.night li::before { content: counter(n); font: 600 17px/1 var(--display); color: var(--brass); }
.night strong { font-weight: 600; font-size: 15px; }
.night span { font-size: 13px; color: var(--ivory-3); }
.night li.now strong { color: var(--brass); }

.menu { list-style: none; margin: 0 0 18px; padding: 0; }
.menu li + li { border-top: 1px solid var(--line); }
.menu button { width: 100%; text-align: left; border: 0; background: none; padding: 13px 0; cursor: pointer; display: grid; gap: 2px; font: 600 16px/1.3 var(--ui); color: var(--ivory); }
.menu button span { font-weight: 400; font-size: 13px; color: var(--ivory-3); }
.sub { margin: 4px 0 0; font: 700 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.states button { border: 1px solid var(--line); background: var(--ink-3); border-radius: 12px; padding: 11px 12px; text-align: left; cursor: pointer; font: 600 14px/1.25 var(--ui); color: var(--ivory); }
.states button span { display: block; font-weight: 400; font-size: 12px; color: var(--ivory-3); margin-top: 2px; }

.share-body { display: grid; gap: 12px; justify-items: center; }
.card { width: min(100%, 300px); aspect-ratio: 1080 / 1350; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.video-frame { aspect-ratio: 16 / 9; border-radius: 12px; background: #000; border: 1px solid var(--line); display: grid; place-items: center; align-content: center; gap: 10px; padding: 20px; text-align: center; color: var(--ivory-3); font-size: 13.5px; }
.video-frame svg { width: 48px; height: 48px; }

/* ---------- Pachedi editorial page ---------- */
.about { position: fixed; inset: 0; z-index: 20; background: #f5efdf; color: #261d19; overflow-y: auto; animation: fade .25s ease; }
.about-border { position: fixed; inset: calc(var(--safe-t) + 10px) 10px calc(var(--safe-b) + 10px); border: 3px solid var(--iron); pointer-events: none; }
.about-border span { position: absolute; }
.about-border .b-top, .about-border .b-bottom { left: 6px; right: 6px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M0 0h12L6 9Z' fill='%239a2416'/%3E%3C/svg%3E") repeat-x; }
.about-border .b-top { top: 6px; }
.about-border .b-bottom { bottom: 6px; transform: scaleY(-1); }
.about-border .b-left, .about-border .b-right { top: 22px; bottom: 22px; width: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Ccircle cx='4.5' cy='4.5' r='1.7' fill='%231c1411'/%3E%3C/svg%3E") repeat-y; }
.about-border .b-left { left: 6px; }
.about-border .b-right { right: 6px; }
.about-inner { position: relative; width: min(1040px, calc(100% - 112px)); min-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 20px); margin: 0 auto; padding: calc(var(--safe-t) + 108px) 0 calc(var(--safe-b) + 34px); display: flex; flex-direction: column; }
.about-close { position: fixed; top: calc(var(--safe-t) + 48px); right: clamp(26px, 4.5vw, 68px); display: grid; place-items: center; width: 52px; height: 52px; color: #261d19; background: transparent; border: 0; border-radius: 0; }
.about-close svg { width: 32px; height: 32px; }
.about-close:hover { color: var(--madder); }
.about-kicker { align-self: center; margin: 0 0 22px; font: 700 15px/1.2 var(--ui); letter-spacing: .14em; text-transform: none; color: var(--madder); }
.about h2 { max-width: 900px; margin: 0 auto 36px; text-align: center; font: 700 clamp(48px, 6.4vw, 92px)/.98 var(--display); letter-spacing: -.025em; color: #261d19; text-wrap: balance; }
.about-cols { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: clamp(40px, 6vw, 92px); row-gap: clamp(34px, 5vw, 64px); padding: 76px 0 28px; border-top: 1px dashed rgba(38, 29, 25, .76); }
.about-cols > div { min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-content: start; align-items: center; column-gap: 18px; row-gap: 12px; }
.about-icon { width: 44px; height: 44px; grid-column: 1; grid-row: 1; color: var(--madder); }
.about h3 { grid-column: 2; grid-row: 1; margin: 0; font: 700 clamp(25px, 2.5vw, 38px)/1.12 var(--display); letter-spacing: -.015em; color: var(--madder); }
.about-cols p { grid-column: 1 / -1; margin: 0; font: 400 clamp(17px, 1.65vw, 25px)/1.58 var(--ui); color: #3b322d; text-wrap: pretty; }
.about p.about-note { margin: auto 0 0; padding: 24px 0 0; border-top: 1px solid rgba(38, 29, 25, .28); text-align: center; font: 400 15px/1.5 var(--ui); color: #544840; }

@media (max-width: 760px) {
  .about-inner { width: calc(100% - 64px); padding-top: calc(var(--safe-t) + 76px); padding-bottom: calc(var(--safe-b) + 30px); }
  .about-close { top: calc(var(--safe-t) + 22px); width: 48px; height: 48px; }
  .about-close svg { width: 30px; height: 30px; }
  .about-kicker { margin-bottom: 16px; font-size: 13px; }
  .about h2 { margin-bottom: 24px; font-size: clamp(42px, 9vw, 64px); }
  .about-cols { column-gap: 28px; row-gap: 30px; padding: 42px 0 24px; }
  .about-cols > div { grid-template-columns: 40px minmax(0, 1fr); column-gap: 13px; row-gap: 10px; }
  .about-icon { width: 36px; height: 36px; }
  .about h3 { font-size: clamp(23px, 4vw, 30px); }
  .about-cols p { font-size: 16px; line-height: 1.58; }
  .about p.about-note { margin-top: 36px; padding-top: 18px; font-size: 13px; }
}

@media (max-width: 600px) {
  .about-inner { width: calc(100% - 64px); }
  .about-cols { grid-template-columns: 1fr; row-gap: 24px; }
}

.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--safe-b) + 110px); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 20px; background: var(--ivory); color: var(--ink); font: 600 13.5px/1.2 var(--ui); transition: opacity .2s ease, transform .2s var(--ease-out); max-width: calc(100% - 40px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (hover: hover) and (pointer: fine) {
  .tb:hover, .ib:hover { color: var(--ivory); }
  .dial button:hover { color: var(--ivory-2); }
  .row:hover strong { color: var(--brass); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Venue stage and Atmosphere ---------- */
.venue-stage .lamp-hit { width: 76px; height: 96px; transform: translate(-50%, -62%); border-radius: 38px; }
.atmo-top[aria-pressed="true"] { color: var(--flame); }
.atmo-sheet { max-height: min(64dvh, calc(100dvh - var(--safe-t) - 40px)); }
#scrim.light { background: rgba(5, 3, 2, .12); }
.atmo-body { display: grid; gap: 22px; padding-bottom: 28px; }
.atmo-power { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--ink-3); border: 1px solid var(--line); cursor: pointer; text-align: left; color: var(--ivory); font: inherit; }
.atmo-power span { display: grid; gap: 2px; }
.atmo-power strong { font-weight: 600; font-size: 16px; }
.atmo-power small { font-size: 13px; color: var(--ivory-3); }
.atmo-power i { flex: 0 0 auto; width: 48px; height: 28px; border-radius: 14px; background: rgba(243, 230, 208, .15); position: relative; transition: background .15s ease; }
.atmo-power i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory); transition: transform .18s ease; }
.atmo-power[aria-checked="true"] { border-color: rgba(214, 176, 111, .6); background: rgba(214, 176, 111, .1); }
.atmo-power[aria-checked="true"] i { background: var(--brass); }
.atmo-power[aria-checked="true"] i::after { transform: translateX(20px); }
.atmo-power:disabled { opacity: .5; cursor: default; }
.atmo-row { display: grid; gap: 10px; text-align: center; }
.atmo-row h3 { margin: 0; font: 600 20px/1.2 var(--display); color: var(--ivory); }
.atmo-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.atmo-seg button { min-height: 46px; border-radius: 13px; border: 1px solid var(--line); background: var(--ink-3); color: var(--ivory); font: 600 14.5px/1.2 var(--ui); cursor: pointer; padding: 6px; }
.atmo-seg button[aria-pressed="true"] { background: rgba(214, 176, 111, .16); border-color: rgba(214, 176, 111, .7); color: #fff; }
.atmo-desc { margin: 0 auto; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--ivory-2); text-wrap: balance; }
.atmo-beat { justify-items: center; }
.atmo-beat .atmo-seg { width: 100%; }
.atmo-tap { width: 104px; height: 104px; border-radius: 50%; border: 1.5px solid var(--brass); background: radial-gradient(circle at 50% 40%, rgba(214, 176, 111, .3), rgba(214, 176, 111, .06)); color: var(--ivory); font: 700 14.5px/1.15 var(--ui); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .08s ease, box-shadow .15s ease; }
.atmo-tap.hit, .atmo-tap:active { transform: scale(.92); box-shadow: 0 0 0 12px rgba(214, 176, 111, .14); }
.atmo-dots { display: flex; gap: 8px; }
.atmo-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(243, 230, 208, .16); }
.atmo-dots i.on { background: var(--brass); }
.atmo-bpm { margin: 0; font-size: 13px; font-weight: 600; color: var(--ivory-3); }
.atmo-bpm b { font: 700 30px/1 var(--ui); color: var(--ivory); font-variant-numeric: tabular-nums; margin-right: 4px; }
.atmo-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ivory-3); text-align: center; }
.atmo-note a { display: block; margin-top: 6px; color: var(--brass); font-weight: 600; }
.atmo-beat-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; width: 100%; }
.atmo-beat-read { display: grid; gap: 8px; justify-items: start; text-align: left; }
.atmo-beat-read .atmo-desc { margin: 0; max-width: none; text-wrap: pretty; }

/* ---------- More ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 18px; }
.tile { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px 14px 15px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); color: var(--ivory); cursor: pointer; font: inherit; min-height: 122px; transition: border-color .15s ease, transform .12s ease; }
.tile:hover { border-color: rgba(214, 176, 111, .45); }
.tile:active { transform: scale(.98); }
.tile-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(214, 176, 111, .14); color: var(--brass); margin-bottom: 6px; }
.tile-ic svg { width: 20px; height: 20px; }
.tile strong { font: 600 15.5px/1.25 var(--ui); }
.tile small { font-size: 12.5px; line-height: 1.35; color: var(--ivory-3); }
.proto-states { border-top: 1px solid var(--line); padding-top: 12px; }
.proto-states summary { cursor: pointer; font: 600 14px/1.4 var(--ui); color: var(--ivory-2); list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.proto-states summary::-webkit-details-marker { display: none; }
.proto-states summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ivory-3); border-bottom: 2px solid var(--ivory-3); transform: rotate(45deg); transition: transform .15s ease; margin-right: 6px; }
.proto-states[open] summary::after { transform: rotate(-135deg); }
.atmo-swap { justify-self: center; border: 0; background: none; padding: 6px 8px; color: var(--ivory-3); font: 500 13px/1.3 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.atmo-swap:hover, .atmo-swap:focus-visible { color: var(--brass); }

/* Genre dial: arrows at each edge say there is more to swipe through */
.dial-arrow { position: absolute; top: 8px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(11, 6, 5, .78); color: var(--ivory-2); display: grid; place-items: center; cursor: pointer; padding: 0; transition: opacity .2s ease, color .2s ease; }
.dial-arrow svg { width: 18px; height: 18px; }
.dial-arrow.prev { left: calc(var(--gutter) - 4px); } .dial-arrow.prev svg { transform: rotate(90deg); }
.dial-arrow.next { right: calc(var(--gutter) - 4px); } .dial-arrow.next svg { transform: rotate(-90deg); }
.dial-arrow:hover { color: var(--brass); }
.dial-arrow:disabled { opacity: 0; pointer-events: none; }

/* Desktop: the bars reach the edges and the controls stay centred, so it reads as a full-screen player, not a stretched phone */
@media (min-width: 900px) and (min-height: 560px) {
  .app { max-width: none; padding-left: 32px; padding-right: 32px; }
  .topbar { flex-basis: 68px; margin-right: 0; padding: 0 4px; }
  :root { --pill-right: 36px; --pill-top: calc(var(--safe-t, 0px) + 72px); }
  .brand { font-size: clamp(25px, 2.05vw, 38px); }
  .tools { gap: 4px; }
  .stage > .hint, .stage > .np, .stage > .time, .stage > .transport { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  .dial { width: 100%; max-width: 640px; margin: 0 auto; }
  .foot { width: 100%; padding: 0 4px; margin-bottom: 14px; }
  .title { font-size: 40px; }
}

/* Lives: hosting your own, and the ones you joined */
.tile-wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.tile-wide .tile-ic { grid-row: 1 / span 2; margin: 0; }
.avatar { display: inline-block; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #fff4e2; background-repeat: no-repeat; }
.avatar svg { display: block; width: 100%; height: 100%; }
.eyebrow .avatar { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; box-shadow: 0 0 0 1.5px var(--brass); }
.lives-body { display: grid; gap: 12px; }
.live-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-3); color: var(--ivory); text-align: left; font: inherit; cursor: pointer; }
.live-card span { display: grid; gap: 2px; min-width: 0; }
.live-card strong { font-weight: 600; font-size: 16px; }
.live-card small { font-size: 13px; color: var(--ivory-3); }
.live-card[aria-current="true"] { border-color: rgba(214, 176, 111, .7); }
.live-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--kumkum); box-shadow: 0 0 0 5px rgba(216, 69, 58, .18); margin: 0 6px; }
.lives-h { margin: 10px 0 0; font: 600 18px/1.2 var(--display); }
.lives-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lives-list li { display: flex; align-items: center; gap: 8px; }
.lives-list .live-card { flex: 1; min-width: 0; padding: 10px 12px; }
.lives-list .live-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lives-list .ib { flex: 0 0 auto; }
.mini-btn { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line); background: none; color: var(--ivory-2); font: 600 13px/1 var(--ui); cursor: pointer; }
.mini-btn:hover { border-color: rgba(214, 176, 111, .5); color: var(--ivory); }
.host-sheet { max-height: calc(100dvh - var(--safe-t) - 24px); }
.host-body { display: grid; gap: 20px; }
.host-row { display: grid; gap: 10px; }
.host-row h3 { margin: 0; font: 600 18px/1.2 var(--display); color: var(--ivory); }
.pl-sum { font: 500 13px/1 var(--ui); color: var(--ivory-3); margin-left: 6px; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.avatar-grid button { padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 1; }
.avatar-grid button .avatar { width: 100%; height: 100%; }
.avatar-grid button[aria-checked="true"] { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(214, 176, 111, .25); }
.host-input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-3); color: var(--ivory); font: 16px/1 var(--ui); outline: none; }
.host-input:focus { border-color: var(--brass); }
.face-cutout-title { margin: 2px 0 -5px; color: var(--ivory); font: 600 14px/1.3 var(--ui); }
.face-cutout-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.face-cutout-picker[hidden], .face-cutout-title[hidden] { display: none; }
/* The faces fold away behind a plain brass text button, no pill or box round it */
.face-cutout-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--brass); font: 600 14px/1.3 var(--ui); cursor: pointer; }
.face-cutout-toggle::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.face-cutout-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.face-cutout-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.face-cutout-option { display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-width: 0; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.face-cutout-option:hover { transform: translateY(-1px); border-color: var(--brass); }
.face-cutout-option[aria-pressed="true"] { border-color: var(--brass); background: rgba(214,176,111,.18); box-shadow: inset 0 0 0 1px rgba(214,176,111,.38); }
.face-cutout-option:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.face-cutout-option img { display: block; width: 100%; height: 100%; object-fit: contain; }
.search.in-sheet { margin: 0; }
.pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: pl; }
.pl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 6px 8px 10px; border-radius: 12px; background: var(--ink-3); counter-increment: pl; }
.pl li::before { content: counter(pl); font: 600 13px/1 var(--ui); color: var(--ivory-3); text-align: center; }
.pl li.now { box-shadow: inset 0 0 0 1px rgba(214, 176, 111, .6); }
.pl li.now::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kumkum); justify-self: center; }
.pl .pl-t { display: grid; min-width: 0; }
.pl .pl-t strong { font: 600 15px/1.3 var(--display); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .pl-t span { font-size: 12.5px; color: var(--ivory-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .pl-b { display: flex; gap: 2px; align-items: center; }
.pl .pl-b button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--ivory-2); display: grid; place-items: center; cursor: pointer; }
.pl .pl-b button:disabled { opacity: .3; cursor: default; }
.pl .pl-b button svg { width: 18px; height: 18px; }
.pl .pl-b .down svg { transform: rotate(180deg); }
.pl .pl-b .next-btn { width: auto; padding: 0 10px; border-radius: 17px; border: 1px solid var(--line); font: 600 12.5px/1 var(--ui); }
.pl-empty { margin: 0; font-size: 13.5px; color: var(--ivory-3); }
.add-rows { max-height: 300px; overflow-y: auto; }
.add-rows .row { grid-template-columns: minmax(0, 1fr) auto; }
.add-rows .row .add { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--brass); }
.add-rows .row .add svg { width: 16px; height: 16px; }
.add-rows .row[aria-pressed="true"] .add { color: var(--ivory-3); }
.host-go { position: sticky; bottom: -24px; margin: 0 -20px -24px; padding: 12px 20px 20px; background: linear-gradient(rgba(22, 14, 11, 0), var(--ink-2) 30%); display: grid; gap: 6px; }
.host-go .primary:disabled { opacity: .45; cursor: default; }
.text-btn { border: 0; background: none; color: #d79b86; font: 600 14px/1 var(--ui); padding: 10px; cursor: pointer; }
.secondary { width: 100%; height: 50px; border-radius: 25px; border: 1px solid rgba(214, 176, 111, .6); background: none; color: var(--ivory); font: 700 15px/1 var(--ui); cursor: pointer; }
.link-body { display: grid; gap: 12px; }
.link-host { display: flex; align-items: center; gap: 12px; font: 600 20px/1.2 var(--display); }
.link-host .avatar { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--brass); }
.link-body .lead { margin: 0; }
.link-label { font-size: 13px; color: var(--ivory-3); }
.link-field { font-size: 13.5px; color: var(--ivory-2); }
.link-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-actions .primary { margin: 0; }

/* In someone's live the Live button carries its name, and the host's avatar sits on top of it */
.live { position: relative; max-width: min(46vw, 240px); }
.live span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live.hosted { padding-left: 44px !important; }
.live.hosted .avatar { position: absolute; left: 5px; bottom: 12px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.live.hosted i { display: none; }
.avatar.bare { background: none; border-radius: 0; overflow: visible; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* At the DJ's table: the player steps aside and Explore is the laptop turned towards you */
.stage { transition: opacity .35s ease; }
.dj-mode .stage { opacity: 0; }
.dj-mode .scrim { background: rgba(5, 3, 2, .08); }
.dj-mode #exploreSheet {
  left: 8px; right: 8px; margin: 0; max-width: none; max-height: 57dvh;
  border: 9px solid #1c1d22; border-bottom-width: 0; border-radius: 18px 18px 0 0;
  background: #120c0a; box-shadow: 0 -10px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(160, 190, 255, .08);
  padding-bottom: calc(12px + var(--safe-b));
  animation: laptop-in .55s .45s var(--ease-out) both;
}
.dj-mode #exploreSheet::before { content: ""; position: absolute; top: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #3a3d45; }
.dj-mode #exploreSheet { background: linear-gradient(118deg, rgba(255, 255, 255, .045) 0 26%, rgba(255, 255, 255, 0) 26.2%), #120c0a; box-shadow: 0 -10px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(160, 190, 255, .1), inset 0 0 40px rgba(120, 150, 255, .05); padding-bottom: calc(18px + var(--safe-b)); }
/* The keyboard deck under the screen: wider than the lid, a hinge line, rows of keys and a trackpad lip */
.dj-mode #exploreSheet::after { content: ""; position: absolute; left: -22px; right: -22px; bottom: 0; height: 16px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  background: linear-gradient(#2a2c31 0 2px, transparent 2px), radial-gradient(40px 5px at 50% 100%, rgba(0, 0, 0, .35), transparent 70%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 13px), linear-gradient(#c3c7ce, #80858d); }
.dj-mode #exploreSheet .sheet-grip { display: none; }
@keyframes laptop-in { from { transform: translateY(70%); opacity: .4; } }
@media (min-width: 900px) and (min-height: 560px) {
  .dj-mode #exploreSheet { left: 40px; right: auto; width: min(660px, 46vw); max-height: 78dvh; border-width: 12px; border-bottom-width: 0; transform: perspective(1600px) rotateY(7deg); transform-origin: left bottom; animation-name: laptop-in-wide; padding-bottom: 28px; }
  .dj-mode #exploreSheet::after { height: 26px; left: -34px; right: -34px; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
  @keyframes laptop-in-wide { from { transform: perspective(1600px) rotateY(7deg) translateY(60%); opacity: .4; } }
}
@media (prefers-reduced-motion: reduce) { .dj-mode #exploreSheet { animation: none; } .stage { transition: none; } }

/* Up next at the DJ's table: play-next and add buttons on each song, and the decks pane with what's playing and
   what follows. On a wide laptop the decks sit beside the list; on a phone they are the Up next tab. */
.rows li.queueable { display: flex; align-items: center; gap: 2px; }
.rows li.queueable .row { flex: 1 1 auto; min-width: 0; }
.row-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.ra { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ivory-3); cursor: pointer; transition: background .15s ease, color .15s ease; }
.ra svg { width: 17px; height: 17px; }
.ra:hover { color: var(--ivory); background: rgba(246, 236, 215, .08); }
.ra:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.ra.done { color: var(--ink); background: var(--brass); }
.tab-count { color: var(--brass); font-variant-numeric: tabular-nums; }
#exploreSheet .tabs { gap: clamp(14px, 4.5vw, 22px); }
#exploreSheet .tabs button { white-space: nowrap; }
.decks { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 20px 20px; }
.decks-kicker { margin: 14px 0 6px; font: 700 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.decks-now strong { display: block; font: 600 18px/1.25 var(--display); color: var(--ivory); }
.decks-now span { display: block; margin-top: 3px; font-size: 13px; color: var(--ivory-3); }
.decks-list li { display: flex; align-items: center; gap: 2px; }
.decks-list .row { flex: 1 1 auto; min-width: 0; grid-template-columns: 1fr; padding: 8px 0; }
.decks-list .row strong { font-size: 15px; }
.decks-list li.is-queued .row strong::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--brass); vertical-align: middle; }
.rows li.decks-then { display: block; padding: 14px 0 6px; font: 600 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-3); }
.decks-note { margin: 12px 0 0; }
.decks-note:empty { display: none; }
#exploreSheet.on-queue .sheet-body, #exploreSheet.on-queue .explore-count { display: none; }
@media (min-width: 900px) and (min-height: 560px) {
  .dj-mode #exploreSheet { width: min(940px, 64vw); height: 78dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .dj-mode #exploreSheet > .sheet-head { grid-column: 1 / -1; }
  .dj-mode #exploreSheet > .search, .dj-mode #exploreSheet > .explore-count, .dj-mode #exploreSheet > .tabs, .dj-mode #exploreSheet > .sheet-body { grid-column: 1; }
  .dj-mode #exploreSheet > .decks { grid-column: 2; grid-row: 2 / -1; margin-top: 4px; padding: 0 18px 12px; border-left: 1px solid var(--line); }
  .dj-mode #exploreSheet > .decks .decks-kicker:first-child { margin-top: 6px; }
  .dj-mode #tabQueue { display: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The scene rail: small buttons down the right side, each opening a card beside it */
/* The scene rail: one capsule under the view switch, lined up with it */
.rail { position: fixed; z-index: 19; right: var(--pill-right); top: calc(var(--pill-top) + var(--pill-switch-h)); width: var(--pill-w); box-sizing: border-box; display: grid; gap: 2px; padding: 6px 4px 5px; border-radius: 0 0 26px 26px; border: 1px solid rgba(214, 176, 111, .3); border-top: 0; background: linear-gradient(rgba(214, 176, 111, .22), rgba(214, 176, 111, .22)) 12px 0 / calc(100% - 24px) 1px no-repeat, rgba(11, 6, 5, .72); box-shadow: 0 14px 28px rgba(0, 0, 0, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .3s ease; }
.rail-btn { width: 100%; min-height: 46px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 6px 0; border-radius: 18px; border: 0; background: transparent; color: var(--ivory-2); font: 600 10.5px/1 var(--ui); letter-spacing: .01em; cursor: pointer; transition: background .15s ease, color .15s ease; }
.rail-btn svg { width: 21px; height: 21px; }
.rail-btn:hover { color: var(--ivory); background: rgba(246, 236, 215, .08); }
.rail-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.rail-btn[aria-expanded="true"] { color: var(--ink); background: var(--brass); }
.rail-btn[aria-pressed="true"]:not([aria-expanded="true"]) { color: var(--flame); }
.dj-mode .rail { opacity: 0; pointer-events: none; }
/* Side cards: a small panel beside the rail, with an icon badge, a centred title and choices as icon tiles */
.side-card { position: fixed; z-index: 12; right: calc(var(--pill-right) + var(--pill-w) + 10px); top: calc(var(--pill-top) + var(--pill-switch-h)); width: min(344px, calc(100vw - var(--pill-w) - 30px)); max-height: calc(100dvh - var(--pill-top) - var(--pill-switch-h) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 18px; border-radius: 22px; border: 1px solid rgba(214, 176, 111, .22); background: radial-gradient(120% 60% at 50% 0%, rgba(214, 176, 111, .12), transparent 60%), rgba(22, 14, 11, .95); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 240, 210, .06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: card-in .24s var(--ease-out); display: grid; gap: 14px; align-content: start; text-align: center; }
.side-card:focus { outline: none; }
@keyframes card-in { from { transform: translateX(16px) scale(.98); opacity: 0; } }
.card-head { position: relative; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 9px; row-gap: 4px; padding: 2px 28px 4px; }
.card-badge { display: grid; place-items: center; color: var(--brass); }
.card-badge svg { width: 21px; height: 21px; }
.card-head .card-sub { grid-column: 1 / -1; }
.card-head h2 { margin: 0; font: 600 22px/1.15 var(--display); }
.card-sub { margin: 0; font-size: 13px; color: var(--ivory-3); }
.card-x { position: absolute; top: -8px; right: -8px; }
.card-body { display: grid; gap: 18px; }
.side-card .atmo-row { gap: 10px; text-align: center; }
.side-card .atmo-row h3 { font-size: 17px; }
.side-card .atmo-desc, .side-card .atmo-note { margin: 0 auto; max-width: 34ch; text-align: center; font-size: 13.5px; }
.card-seg { display: grid; grid-auto-flow: row; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.card-seg button { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border-radius: 16px; text-align: center; transition: border-color .15s ease, background .15s ease, transform .1s ease; }
.card-seg button:active { transform: scale(.97); }
.card-seg .seg-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 230, 208, .06); color: var(--ivory-2); }
.card-seg .seg-ic svg { width: 20px; height: 20px; }
.card-seg .seg-l { font: 600 13px/1.2 var(--ui); }
.card-seg button[aria-pressed="true"] .seg-ic { background: var(--brass); color: var(--maroon); }
.seg-dots { display: flex; gap: 4px; height: 16px; align-items: center; }
.seg-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(243, 230, 208, .18); }
.seg-dots i.on { background: var(--flame); }
.atmo-seg button { display: grid; justify-items: center; align-content: center; gap: 5px; }
.side-card .atmo-power { text-align: left; }
.pw-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 230, 208, .07); color: var(--ivory-2); }
.pw-ic svg { width: 19px; height: 19px; }
.atmo-power[aria-checked="true"] .pw-ic { background: var(--brass); color: var(--maroon); }
.atmo-power > span:nth-child(2) { flex: 1; }
.atmo-swap { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; padding: 9px 14px !important; border-radius: 20px; border: 1px solid var(--line) !important; text-decoration: none !important; color: var(--ivory-2); }
.atmo-swap svg { width: 16px; height: 16px; }
.primary.with-ic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary.with-ic svg { width: 18px; height: 18px; }
.primary:disabled { opacity: .45; cursor: default; }
.idea-text { text-align: left; height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.45; resize: vertical; font-size: 15px; }
.idea-note:empty { display: none; }
/* Cards read top to bottom: a header row (icon, title, close), then short labelled sections, all left-aligned */
.side-card { text-align: left; gap: 16px; padding: 16px 16px 18px; }
.card-head { grid-template-columns: auto minmax(0, 1fr) auto; justify-content: stretch; column-gap: 10px; row-gap: 2px; padding: 0; }
.card-head .card-badge { grid-column: 1; grid-row: 1; }
.card-head h2 { grid-column: 2; grid-row: 1; font-size: 21px; }
.card-head .card-sub { grid-column: 2 / -1; grid-row: 2; }
.card-x { position: static; grid-column: 3; grid-row: 1; margin: -10px -10px -10px 0; }
.card-section { display: grid; gap: 8px; }
.card-label, .side-card .atmo-row h3 { margin: 0; font: 700 11px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); text-align: left; }
.side-card .atmo-row { gap: 8px; text-align: left; }
.side-card .atmo-desc, .side-card .atmo-note { margin: 0; max-width: none; text-align: left; font-size: 13px; line-height: 1.45; color: var(--ivory-3); text-wrap: pretty; }
.card-body { gap: 16px; }
.card-seg button { min-height: 68px; gap: 5px; padding: 8px 4px; border-radius: 14px; }
.card-seg .seg-ic { width: 30px; height: 30px; }
.card-seg .seg-ic svg { width: 18px; height: 18px; }
.card-seg .seg-l { font-size: 12.5px; }
.side-card .atmo-swap { justify-self: start; margin: 0; }
.side-card .atmo-power { padding: 12px 14px; }
.side-card .atmo-power strong { font-size: 15px; }
.side-card .atmo-power small { font-size: 12.5px; line-height: 1.35; }
.side-card .atmo-beat { justify-items: stretch; }
.side-card .atmo-tap { width: 84px; height: 84px; font-size: 13.5px; }
.side-card .atmo-note a { display: inline; margin: 0 0 0 4px; }
/* On a phone there's no room beside the pill, so a card rises from the bottom as a full-width sheet */
@media (max-width: 600px) {
  /* It stops short of the view pill (switch 49px + three buttons 142px), so the other buttons stay reachable */
  .side-card { left: 10px; right: 10px; top: auto; bottom: calc(var(--safe-b, 0px) + 10px); width: auto; max-height: calc(100dvh - var(--pill-top) - 191px - var(--safe-b, 0px) - 22px); border-radius: 22px; animation-name: card-rise; }
  @keyframes card-rise { from { transform: translateY(24px); opacity: .6; } }
}
/* On a phone one home button takes the moon's place in the top bar and Hide player the link button's; Tonight and Play
   YouTube link open from More. View, Sound and Ideas hang under the bar as a pill of their own, so more of the
   venue shows. The home button opens the switch as that pill's head, where it sits on wider screens */
#tonightOpen, #linkOpen { display: none; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 520px) {
  :root { --pill-switch-h: 0px; }
  #tonightBtn, #linkSongBtn { display: none; }
  #viewBtn, #tonightOpen, #linkOpen { display: grid; }
  #viewBtn[aria-expanded="true"] { color: var(--brass); }
  .rail { transition: opacity .3s ease, top .2s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: opacity .3s ease; } }
/* The narrowest phones keep the wordmark clear of the top-bar buttons */
@media (max-width: 340px) { .brand { font-size: 22px; } }
/* Hide player: only the top bar stays. The eye in it brings the player back */
.hide-btn .i-on, .hide-btn[aria-pressed="true"] .i-off { display: none; }
.hide-btn[aria-pressed="true"] .i-on { display: block; }
.hide-btn[aria-pressed="true"] { color: var(--brass); }
.player-off .stage { display: flex; flex-direction: column; }
.player-off .stage > :not(.lamp-slot), .player-off .rail { display: none; }
.player-off .lamp-slot { flex: 1 1 auto; }
/* A card rising from the bottom stops short of the scene pill (three buttons, 142px) */
@media (max-width: 600px) { .side-card { max-height: calc(100dvh - var(--pill-top) - 142px - var(--safe-b, 0px) - 22px); } }
/* The cards are made of the same stuff as the view pill beside them: dark glass, a brass hairline, capsule corners.
   Each choice is one capsule, and the chosen option is its brass knob, like the view switch. */
.side-card { border-radius: 26px; border-color: rgba(214, 176, 111, .3); background: rgba(11, 6, 5, .9); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.side-card .atmo-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(214, 176, 111, .22); background: rgba(246, 236, 215, .05); }
.side-card .atmo-seg button { flex: 1 1 0; min-width: 0; min-height: 42px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ivory-2); font: 600 12.5px/1.15 var(--ui); text-align: center; transition: background .18s ease, color .18s ease; }
.side-card .atmo-seg button:hover { background: rgba(246, 236, 215, .08); color: var(--ivory); }
.side-card .atmo-seg button[aria-pressed="true"] { background: var(--brass); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.side-card .atmo-seg button:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.side-card .card-seg .seg-ic, .side-card .card-seg button[aria-pressed="true"] .seg-ic { width: auto; height: auto; flex: 0 0 auto; background: none; color: inherit; }
.side-card .card-seg .seg-ic svg { width: 17px; height: 17px; }
.side-card .card-seg .seg-l { font-size: 12.5px; }
.side-card .atmo-seg button:active { transform: scale(.97); }
/* Sound on or off: a capsule toggle with a brass knob, not a boxed row */
.side-card .atmo-power { padding: 2px 0; border: 0; border-radius: 0; background: none; gap: 12px; }
.side-card .atmo-power[aria-checked="true"] { background: none; }
.side-card .pw-ic { display: none; }
.side-card .atmo-power i { width: 54px; height: 30px; border-radius: 999px; border: 1px solid rgba(214, 176, 111, .3); background: rgba(246, 236, 215, .06); }
.side-card .atmo-power i::after { left: 3px; top: 3px; width: 22px; height: 22px; background: rgba(246, 236, 215, .75); }
.side-card .atmo-power[aria-checked="true"] i { background: rgba(214, 176, 111, .18); }
.side-card .atmo-power[aria-checked="true"] i::after { background: var(--brass); transform: translateX(24px); }
/* The beat: the tap target is a small brass ring beside the reading, and the patterns are a capsule too */
.side-card .atmo-tap { width: 72px; height: 72px; border-width: 1px; border-color: rgba(214, 176, 111, .6); background: rgba(214, 176, 111, .08); font-size: 12.5px; }
.side-card .atmo-beat-grid { gap: 14px; }
.side-card .atmo-bpm b { font-size: 26px; }
.side-card .seg-dots { display: inline-flex; gap: 3px; }
.side-card .atmo-swap { border-color: rgba(214, 176, 111, .3) !important; }
/* The Ideas card's header already says what it's for, so the form starts straight away */
#ideaCard .idea-body > .atmo-desc { display: none; }
#ideaCard .idea-body { gap: 12px; }
/* No explanations under the options: the choices speak for themselves, and only live status lines show */
#atmoVenueDesc, #atmoListenerDesc, #atmoStyleDesc, .tile small { display: none; }
#atmoTapHint:empty { display: none; }
.tile { min-height: 0; }
.tile-wide .tile-ic { grid-row: 1; }
/* Tally's form is a light page with light lettering on a see-through background. Given the player's dark scheme the
   browser would back the frame with solid white and hide the questions; the frame takes Tally's scheme instead */
#ideaCard iframe { color-scheme: light; }
@media (prefers-reduced-motion: reduce) { .side-card { animation: none; } }

/* The first-time tip, just below the garbo */
.lamp-tip { position: absolute; left: 50%; top: 82%; z-index: 2; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 14px; white-space: nowrap; pointer-events: none; font: 600 13px/1.2 var(--ui); color: var(--brass); background: rgba(11, 6, 5, .62); box-shadow: 0 0 0 1px rgba(214, 176, 111, .3); animation: tip-breathe 2.4s ease-in-out infinite; }
@keyframes tip-breathe { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .lamp-tip { animation: none; } }
/* In a Garba Circle the Live button is the circle's: brass rather than the Live red, the host's face on top */
.live.in-circle, .live.in-circle[aria-pressed="true"] { background: rgba(214, 176, 111, .14) !important; border-color: rgba(214, 176, 111, .6) !important; }
.live.in-circle:hover { background: rgba(214, 176, 111, .22) !important; }
.live.in-circle i, .live.in-circle[aria-pressed="true"] i { background: var(--brass); box-shadow: 0 0 0 4px rgba(214, 176, 111, .2); animation: none; }

/* The seek bar sits between the elapsed and total time, so a song can be moved from any viewport */
.time { align-items: center; gap: 10px; width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; min-height: 24px; }
.time .time-sep { display: none; }
.time #elapsed { min-width: 3.4em; text-align: right; }
.time #duration { min-width: 3.4em; text-align: left; }
.time #elapsed.live-now { min-width: 0; }
/* With no duration (Live now, Starts in) the one word sits centred over Play */
.time #duration:empty { display: none; }
.seek-bar { --p: 0%; flex: 1 1 auto; min-width: 0; height: 24px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: none; }
.seek-bar[hidden] { display: none; }
.seek-bar:disabled { opacity: .4; cursor: default; }
.seek-bar:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }
.seek-bar::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--brass) var(--p), rgba(243, 230, 208, .18) var(--p)); }
.seek-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--brass); background: var(--ivory); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.seek-bar::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(243, 230, 208, .18); }
.seek-bar::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brass); }
.seek-bar::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--brass); background: var(--ivory); }

/* You and your partner: a face, a name, and a way to take the face off */
.couple-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
/* ગુ: the name in Gujarati letters, lit while it's on */
.gu-name { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(214, 176, 111, .4); background: rgba(11, 6, 5, .35); color: var(--ivory-2); font: 600 14px/1 var(--ui); }
.gu-name[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.face-pick { position: relative; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px dashed rgba(214, 176, 111, .55); background: var(--ink-3); color: var(--brass); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.face-pick svg { width: 18px; height: 18px; }
.face-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.face-pick.has-face { border-style: solid; border-color: var(--brass); }
.face-pick.has-face svg { display: none; }
.face-pick.is-cut { background: rgba(243, 230, 208, .06); }
.face-pick.is-cut img { object-fit: contain; }
.face-pick:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
#youFacePick.has-face { border-color: #e8b04b; }
.couple-name { height: 44px; font-weight: 600; }
.face-clear { width: 36px; height: 36px; }
.face-clear[hidden] { display: none; }
.face-crop { display: grid; gap: 10px; justify-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(11, 6, 5, .5); }
.face-crop[hidden] { display: none; }
.crop-view { width: min(220px, 100%); aspect-ratio: 1; border-radius: 14px; cursor: grab; touch-action: none; }
.crop-view:active { cursor: grabbing; }
.crop-view:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: 100%; font: 600 12px/1 var(--ui); color: var(--ivory-3); }
.crop-zoom input { flex: 1; accent-color: var(--brass); }
.crop-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
.crop-actions .primary { width: auto; height: 44px; margin: 0; padding: 0 18px; }
.side-card .crop-actions .atmo-swap { margin: 0; }

/* Private Garba Circle opens from More; Lives' tile leaves the player */
.tile[hidden] { display: none; }

/* ---------- A lighter frame ----------
   The top bar and the scene buttons are bare icons, like the wordmark beside them; a soft shadow keeps them clear of
   the venue. Choices are words alone, card titles stand alone, and the cards keep only as much glass as reading needs */
.tools { gap: 2px; padding: 0; border: 0; background: none; box-shadow: none; }
.tools .ib:hover { background: none; color: var(--brass); }
.tools .ib svg, #rail .rail-btn svg { filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)) drop-shadow(0 2px 8px rgba(3, 4, 10, .5)); }
#rail { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#rail .rail-btn { background: none; }
#rail .rail-btn:hover, #rail .rail-btn[aria-expanded="true"] { background: none; color: var(--brass); }
.app .view-switch { border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.view-switch-control { background: rgba(11, 6, 5, .55); box-shadow: inset 0 0 0 1px rgba(214, 176, 111, .28), 0 4px 14px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .stage > * { transition: none !important; } }
.side-card { border-color: rgba(214, 176, 111, .16); background: rgba(11, 6, 5, .74); box-shadow: 0 18px 44px rgba(0, 0, 0, .32); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.card-head { grid-template-columns: minmax(0, 1fr) auto; }
.card-head h2 { grid-column: 1; }
.card-x { grid-column: 2; }

/* ---------- More: a column of icons at the side ----------
   The player narrows to make room (the wordmark and the corners stay on screen) and widens again when it closes. Each
   choice is its icon and its name, centred */
:root { --more-w: 124px; }
.app { transition: left .3s var(--ease-out), right .3s var(--ease-out); }
.app.more-open { left: 0; right: var(--more-w); }
.rail, .view-switch { transition: right .3s var(--ease-out), opacity .3s ease, top .2s var(--ease-out); }
.more-open .rail, .more-open .view-switch { right: calc(var(--pill-right) + var(--more-w)); }
.scrim.clear { background: none; }
#moreSheet { top: 0; bottom: 0; left: auto; right: 0; width: var(--more-w); max-width: none; max-height: none; margin: 0; padding: var(--safe-t) 0 var(--safe-b); border: 0; border-left: 1px solid rgba(214, 176, 111, .16); border-radius: 0; background: rgba(11, 6, 5, .66); box-shadow: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: more-in .3s var(--ease-out); }
@keyframes more-in { from { transform: translateX(100%); } }
#moreSheet .sheet-head { padding: 12px 4px 6px 14px; }
#moreSheet .sheet-head h2 { font-size: 20px; }
#moreSheet .sheet-body { padding: 2px 8px 16px; }
#moreSheet .tiles { grid-template-columns: 1fr; gap: 2px; margin: 0 0 12px; }
#moreSheet .tile { justify-items: center; text-align: center; gap: 6px; min-height: 0; padding: 12px 4px; border: 0; border-radius: 16px; background: none; }
#moreSheet .tile svg { width: 24px; height: 24px; color: var(--brass); }
#moreSheet .tile span { font: 600 12px/1.25 var(--ui); color: var(--ivory-2); text-wrap: balance; }
#moreSheet .tile:hover { background: rgba(246, 236, 215, .06); }
#moreSheet .tile:hover span { color: var(--ivory); }
#moreSheet .tile:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
#moreSheet .tile[aria-pressed="true"] span { color: var(--brass); }
@media (min-width: 900px) and (min-height: 560px) { :root { --more-w: 148px; } #moreSheet .tile span { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .app, .rail, .view-switch { transition: none; } #moreSheet { animation: none; } }

/* ---------- Install guide: one tab per kind of device ---------- */
.install-tabs { display: flex; gap: 2px; margin: 4px 0 16px; padding: 3px; border: 1px solid rgba(214, 176, 111, .22); border-radius: 999px; }
.install-tabs button { flex: 1 1 0; min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--ivory-2); font: 600 14px/1 var(--ui); cursor: pointer; }
.install-tabs button:hover { color: var(--ivory); }
.install-tabs button[aria-selected="true"] { background: var(--brass); color: var(--ink); }
.install-tabs button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.install-pane p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; color: var(--ivory-2); text-wrap: pretty; }
.install-done { margin: 10px 0 0; font-size: 14px; color: var(--brass); }

/* The morphing icon stands in for both of a toggle's glyphs, so it never hides with either state */
#fullBtn[aria-pressed="true"] svg.morph { display: block; }

/* Walking on a touch screen: a drag anywhere on the venue walks you, with nothing drawn under the thumb. It only
   works while the player is hidden, and the venue under it doesn't scroll or zoom */
.player-off .lamp-slot { touch-action: none; }
/* Volume: a speaker in the top bar opens one row, mute and a slider. The speaker shows the muted icon at zero */
.vol-btn .i-muted, .vol-mute .i-muted, .is-muted .vol-btn .i-vol, .vol-mute[aria-pressed="true"] .i-vol { display: none; }
.is-muted .vol-btn .i-muted, .vol-mute[aria-pressed="true"] .i-muted { display: block; }
.vol-btn[aria-expanded="true"] { color: var(--brass); }
.vol-card { gap: 12px; }
.vol-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 3ch; align-items: center; gap: 10px; }
.vol-mute { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(214, 176, 111, .3); }
.vol-mute[aria-pressed="true"] { color: var(--brass); }
.vol-range { width: 100%; height: 44px; margin: 0; accent-color: var(--brass); background: transparent; cursor: pointer; --v: 100%; }
.vol-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brass) var(--v), rgba(246, 236, 215, .16) var(--v)); }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--ivory); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.vol-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(246, 236, 215, .16); }
.vol-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brass); }
.vol-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ivory); }
.vol-range { -webkit-appearance: none; appearance: none; }
.vol-range:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 8px; }
.vol-val { font: 600 13px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--ivory-2); text-align: right; }
/* Explore at the DJ's table: Styles lists genres and steps by name alone; Singers is a wall of faces, each with its
   name and nothing else. A singer without a portrait shows their initials in the same round frame. */
.explore-list .row { padding: 13px 0; }
.explore-list .row .badge { grid-row: 1; }
.rows.singer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 8px; padding: 6px 0 4px; }
.rows.singer-grid li + li { border-top: 0; }
.singer-btn { width: 100%; display: grid; justify-items: center; gap: 7px; padding: 4px 2px 6px; border: 0; border-radius: 16px; background: none; color: var(--ivory-2); cursor: pointer; transition: background .15s ease, color .15s ease; }
.singer-btn:hover { background: rgba(246, 236, 215, .06); color: var(--ivory); }
.singer-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.singer-pic { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #d8a95a, #8a5a22 75%); box-shadow: 0 0 0 2px rgba(214, 176, 111, .35), 0 6px 16px rgba(0, 0, 0, .35); }
.singer-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.singer-pic.no-face { background: rgba(246, 236, 215, .08); color: var(--ivory-2); font: 600 22px/1 var(--display); box-shadow: 0 0 0 1px rgba(214, 176, 111, .25); }
.singer-btn.is-on .singer-pic { box-shadow: 0 0 0 3px var(--brass), 0 6px 16px rgba(0, 0, 0, .35); }
.singer-btn.is-on .singer-name { color: var(--brass); }
.singer-name { max-width: 100%; font: 600 13px/1.25 var(--ui); text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.list-face { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: radial-gradient(circle at 50% 35%, #d8a95a, #8a5a22 75%); }
/* On a phone the laptop gives the list more of the screen: a slimmer lid, a shorter search, the DJ still in view */
@media (max-width: 600px) {
  .dj-mode #exploreSheet { max-height: 66dvh; }
  #exploreSheet .mirror-head { height: 52px; }
  #exploreSheet .sheet-head h2 { font-size: 21px; }
  #exploreSheet > .search { height: 40px; margin: 2px 14px 6px; }
  #exploreSheet .tabs { padding: 0 14px; }
  #exploreSheet .sheet-body, #exploreSheet .decks { padding-left: 14px; padding-right: 14px; }
  .rows.singer-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px 4px; }
  .singer-pic { width: 62px; height: 62px; }
  .singer-name { font-size: 12px; }
}

/* ---------- The 3D page's player: the song's title, its singers, the bar and the controls, and nothing else ----------
   No genre strip and no Explore: whatever you pick, the DJ plays it, so Search (which walks you to the DJ's laptop) is
   the one way to choose. The controls sit at the bottom; 24/7 Live and the YouTube credit keep the bottom corners. */
.dial, .foot .explore { display: none !important; }
.foot .yt { grid-column: 3; }
.stage { position: relative; }
.transport { margin-bottom: 4px; }
.foot { flex-basis: 40px; }
@media (min-width: 900px) and (min-height: 560px) {
  /* Wide screens: the corners share the controls' row, so the controls are the last thing on the page */
  .stage > .transport { margin-bottom: 18px; }
  .foot { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0; pointer-events: none; }
  .foot > * { pointer-events: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* The player's column keeps the same order, gathered at the bottom */
  .stage { grid-template-rows: auto 1fr auto auto auto auto; }
  .np { grid-row: 3; } .time { grid-row: 4; } .transport { grid-row: 5; } .foot { grid-row: 6; }
}

/* ---------- The 3D page's top bar, on every screen ----------
   One home button where the moon was, beside More, and Tonight and Play YouTube link in More. The home button turns
   into Home and Full screen (see the owner's layout below); View, Sound and Ideas always hang under More. */
:root { --pill-switch-h: 0px; }
#tonightBtn, #linkSongBtn { display: none; }
#viewBtn, #tonightOpen, #linkOpen { display: grid; }

/* ---------- One card for everything that opens over the venue ----------
   Sheets, side cards, More and Ask Kukdu share one look: deep ink glass, a brass rim, a faint glow along the top, and
   ivory type with brass for what you can press. */
:root {
  --card-bg: radial-gradient(120% 60% at 50% 0%, rgba(214, 176, 111, .12), transparent 60%), rgba(22, 14, 11, .95);
  --card-line: rgba(214, 176, 111, .22);
  --card-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 240, 210, .06);
}
.sheet { background: var(--card-bg); border-color: var(--card-line); box-shadow: var(--card-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#moreSheet { background: radial-gradient(160% 40% at 50% 0%, rgba(214, 176, 111, .1), transparent 60%), rgba(16, 10, 8, .82); border-left-color: var(--card-line); }
.tile-kukdu { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* Ask Kukdu's launcher: the rooster on his own, with no disc, rim or box round him (like the YouTube credit beside
   him), in the middle of the bottom row between 24/7 Live and the YouTube credit (where Explore was); on a wide
   screen, where that row shares the controls' line, above the YouTube credit instead. A soft shadow that follows his
   outline keeps him legible over bright parts of the venue. */
.foot .ask-kukdu-launcher { grid-column: 2; justify-self: center; }
.ask-kukdu-launcher { position: relative; z-index: 5; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .15s var(--ease-out); }
.ask-kukdu-launcher img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.ask-kukdu-launcher:hover { transform: translateY(-1px); }
.ask-kukdu-launcher:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.dj-mode .ask-kukdu-launcher, .player-off .ask-kukdu-launcher, .more-open .ask-kukdu-launcher { display: none; }
@media (min-width: 900px) and (min-height: 560px) { .foot .ask-kukdu-launcher { position: fixed; right: 36px; bottom: 82px; width: 52px; height: 52px; } }

/* Ask Kukdu's panel in the same card (its own stylesheet draws it in gold; these come later and weigh more) */
html .ask-scrim { background: rgba(5, 3, 2, .55); }
html .ask-panel { color: var(--ivory); background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--ui); }
html .ask-grab { background: rgba(243, 230, 208, .25); }
html .ask-head { background: transparent; color: var(--ivory); border-bottom: 1px solid var(--card-line); }
html .ask-head h2 { font-family: var(--display); font-weight: 600; }
html .ask-mark, html .ask-a-avatar { border-radius: 0; box-shadow: none; }
html .ask-ib, html .ask-new { border-color: rgba(243, 230, 208, .18); background: rgba(243, 230, 208, .06); color: var(--ivory); }
html .ask-ib:hover, html .ask-new:hover { background: rgba(243, 230, 208, .12); }
html .ask-hello { color: var(--ivory); font-family: var(--display); }
html .ask-sub, html .ask-topics-label { color: var(--ivory-2); }
html .ask-primary { border: 0; background: var(--brass); color: var(--ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
html .ask-primary:hover { background: #e2c083; }
html .ask-browse { color: var(--brass); }
html .ask-chip { border-color: var(--line); background: var(--ink-3); color: var(--ivory); }
html .ask-chip-description { color: var(--ivory-3); }
html .ask-chip:hover, html .ask-chip:focus-visible { border-color: var(--brass); background: rgba(214, 176, 111, .12); color: var(--ivory); }
html .ask-chip:hover .ask-chip-description, html .ask-chip:focus-visible .ask-chip-description { color: var(--ivory-2); }
html .ask-faq details { border-color: var(--line); background: var(--ink-3); box-shadow: none; }
html .ask-faq summary { color: var(--ivory); }
html .ask-faq summary:after { color: var(--brass); }
html .ask-faq-question { color: var(--ivory-2); }
html .ask-faq-question:hover { background: rgba(243, 230, 208, .06); }
html .ask-q { background: rgba(214, 176, 111, .16); color: var(--ivory); border: 1px solid var(--card-line); box-shadow: none; }
html .ask-a-content { background: var(--ink-3); color: var(--ivory); border-color: var(--line); box-shadow: none; }
html .ask-a .ask-tag { background: rgba(214, 176, 111, .12); color: var(--brass); }
html .ask-a .ask-tag.not-yet { color: var(--kumkum); }
html .ask-a h3 { color: var(--cloth); font-family: var(--display); }
html .ask-answer-copy { color: var(--ivory-2); }
html .ask-items li { border-top-color: var(--line); }
html .ask-items strong { font-family: var(--display); color: var(--ivory); }
html .ask-items span { color: var(--ivory-3); }
html .ask-action-set, html .ask-related { border-top-color: var(--line); }
html .ask-action-label, html .ask-related-label { color: var(--ivory-3); }
html .ask-act { border-color: var(--card-line); background: transparent; color: var(--brass); }
html .ask-act.primary, html .ask-act:hover { border-color: var(--brass); background: var(--brass); color: var(--ink); box-shadow: none; }
html .ask-src { color: var(--brass); }
html .ask-related button { border-color: var(--line); background: var(--ink-3); color: var(--ivory-2); }
html .ask-related button:hover { background: var(--brass); color: var(--ink); }
html .ask-compose { border-top-color: var(--line); background: rgba(11, 6, 5, .5); }
html .ask-compose input { border-color: var(--line); background: var(--ink-3); color: var(--ivory); box-shadow: none; }
html .ask-compose input::placeholder { color: var(--ivory-3); }
html .ask-compose button { border: 0; background: var(--brass); color: var(--ink); }
html .ask-compose button:hover { background: #e2c083; }
html .ask-panel :focus-visible { outline-color: var(--brass); }

/* ---------- The owner's layout (#2160) ----------
   Home sits in the top bar at every size. Tapped, it turns, in place, into two buttons: home (to the Simple player) and
   full screen; a second tap anywhere else turns them back. View, Sound and Ideas hang straight under More, one icon
   wide, at every size (their place is measured from More itself, so they line up whatever the top bar holds). View
   and Sound open as bare words over the venue, not in a card. */
:root { --pill-w: 42px; --pill-switch-h: 0px; }
#viewBtn { display: grid; }
.view-open #viewBtn { display: none; }
.app .view-switch { position: static; display: none; width: auto; padding: 0; border: 0; border-radius: 0; background: none; }
.app.view-open .view-switch { display: flex; }
.app .view-switch-control { width: auto; height: 42px; gap: 2px; background: none; box-shadow: none; }
.app .view-switch-control .view-switch-detail { display: none; }
.app .view-switch-half { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; color: var(--ivory-2); }
.app .view-switch-half:hover { color: var(--brass); }
.app .view-switch-icon { width: 21px; height: 21px; filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)) drop-shadow(0 2px 8px rgba(3, 4, 10, .5)); }
.app .view-switch-icon-simple, .app .view-switch-icon-immersive, .app .view-switch-icon-exit { color: inherit; opacity: 1; }
.view-open .view-switch-half { animation: pair-in .32s var(--ease-out) both; }
.view-open .view-switch-half + .view-switch-half { animation-delay: .05s; }
@keyframes pair-in { from { opacity: 0; transform: translateX(-10px) scale(.6); } }
.rail { display: grid; top: var(--pill-top); right: var(--pill-right); width: var(--pill-w); }
#rail .rail-btn { min-height: 42px; padding: 0; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .view-open .view-switch-half { animation: none; } }

/* View and Sound: bare words over the venue. Only a soft shade along that side of the screen keeps them legible */
.side-card.float-card { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 4px 18px; text-shadow: 0 1px 2px rgba(3, 4, 10, .95), 0 0 14px rgba(3, 4, 10, .75); animation: float-in .26s var(--ease-out); }
@keyframes float-in { from { opacity: 0; transform: translateX(10px); } }
body:has(.float-card:not([hidden]))::before { content: ''; position: fixed; z-index: 11; top: 0; bottom: 0; right: 0; width: min(520px, 100vw); background: linear-gradient(to left, rgba(6, 4, 4, .7) 0%, rgba(6, 4, 4, .45) 55%, rgba(6, 4, 4, 0) 100%); pointer-events: none; animation: float-in .26s var(--ease-out); }
.float-card .card-head h2 { font-size: 22px; }
.float-card .card-x { background: none; }
.float-card .card-label { color: var(--brass); }
/* Choices are words: the one you're on in brass with a fine line under it, the rest in ivory */
#viewCard.float-card .atmo-seg, #soundCard.float-card .atmo-seg { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; border: 0; background: none; box-shadow: none; grid-template-columns: none; }
#viewCard.float-card .atmo-seg button, #soundCard.float-card .atmo-seg button { position: relative; min-height: 34px; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ivory-2); font: 600 15px/1.2 var(--ui); cursor: pointer; }
#viewCard.float-card .atmo-seg button:hover, #soundCard.float-card .atmo-seg button:hover { color: var(--ivory); }
#viewCard.float-card .atmo-seg button[aria-pressed="true"], #soundCard.float-card .atmo-seg button[aria-pressed="true"] { color: var(--brass); background: none; }
#viewCard.float-card .atmo-seg button[aria-pressed="true"]::after, #soundCard.float-card .atmo-seg button[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; border-radius: 1px; background: currentColor; }
#viewCard.float-card .atmo-seg + .atmo-seg { margin-top: 4px; }
/* Venues: icon and name, one to a line */
.venue-list { display: grid; gap: 2px; }
.venue-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; min-height: 38px; padding: 2px 0; border: 0; background: none; color: var(--ivory-2); font: 600 16px/1.2 var(--ui); text-align: left; cursor: pointer; }
.venue-row .venue-ic { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)); }
.venue-row:hover { color: var(--ivory); }
.venue-row[aria-pressed="true"] { color: var(--brass); }
.venue-row:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 6px; }
.venue-load { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(214, 176, 111, .25); border-top-color: var(--brass); opacity: 0; }
.venue-row.building .venue-load { opacity: 1; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The map: a plan drawn in light, square, with its loader and its tip */
.venue-map { position: relative; width: 100%; }
#mapCanvas { display: block; width: 100%; cursor: crosshair; touch-action: manipulation; border-radius: 8px; }
#mapCanvas:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.map-loader { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ivory-2); font: 600 12px/1.2 var(--ui); pointer-events: none; background: radial-gradient(closest-side, rgba(6, 4, 4, .55), rgba(6, 4, 4, 0)); }
.map-loader[hidden] { display: none; }
.map-loader i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(214, 176, 111, .25); border-top-color: var(--brass); animation: spin .9s linear infinite; }
.map-tip { margin: 6px 0 0; color: var(--ivory-3); font: 500 12.5px/1.4 var(--ui); }
.float-card .couple-row[hidden] { display: none; }
/* Sound's on/off as a word too */
#soundCard.float-card .atmo-power { background: none; border: 0; box-shadow: none; padding: 0; }
#soundCard.float-card .atmo-power .pw-ic, #soundCard.float-card .atmo-power > i { display: none; }
#soundCard.float-card .atmo-power strong { font: 600 16px/1.2 var(--ui); color: var(--ivory-2); }
#soundCard.float-card .atmo-power[aria-checked="true"] strong { color: var(--brass); }
#soundCard.float-card .atmo-tap { background: none; border: 1px solid rgba(214, 176, 111, .4); }
@media (prefers-reduced-motion: reduce) { .side-card.float-card, body:has(.float-card:not([hidden]))::before { animation: none; } .venue-row.building .venue-load, .map-loader i { animation: none; } }
/* On a phone the View and Sound words sit over the lower screen, so the shade there covers the whole width */
@media (max-width: 600px) { body:has(.float-card:not([hidden]))::before { width: 100vw; background: rgba(6, 4, 4, .66); } }
/* View on a wide screen: the map has a column of its own beside the choices, as tall as the screen allows, so the whole
   plan shows at once; the shade along that side widens to cover both columns */
@media (min-width: 960px) and (min-height: 560px) {
  #viewCard.float-card { width: min(720px, calc(100vw - var(--pill-w) - 80px)); grid-template-columns: minmax(0, 1fr) 270px; grid-template-areas: "head head" "map venue"; grid-template-rows: auto 1fr; column-gap: 36px; }
  #viewCard .card-head { grid-area: head; }
  #viewCard .vc-venue { grid-area: venue; }
  #viewCard .map-section { grid-area: map; position: sticky; top: 0; align-self: start; }
  body:has(#viewCard:not([hidden]))::before { width: min(1000px, 100vw); background: linear-gradient(to left, rgba(6, 4, 4, .78) 0%, rgba(6, 4, 4, .6) 62%, rgba(6, 4, 4, 0) 100%); }
}
/* View on a phone: the venues two to a line, and a deeper shade so the player under the words doesn't read through */
@media (max-width: 600px) {
  #viewCard .venue-list { grid-template-columns: 1fr 1fr; column-gap: 10px; }
  #viewCard .venue-row { grid-template-columns: 22px 1fr auto; gap: 8px; font-size: 14.5px; min-height: 36px; }
  #viewCard .venue-row .venue-ic { width: 20px; height: 20px; }
  body:has(.float-card:not([hidden]))::before { background: rgba(6, 4, 4, .86); }
}
/* The still of the venue that's loading: over the scene's canvases, under the player, faded out once the venue is live */
.venue-poster { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 1; transition: opacity .9s ease; }
.venue-poster.gone { opacity: 0; }
.venue-poster:not([src]) { display: none; }
@media (prefers-reduced-motion: reduce) { .venue-poster { transition: none; } }
/* Words as choices take their own width, so the line under the one you're on is as long as its word */
#viewCard.float-card .atmo-seg button, #soundCard.float-card .atmo-seg button { flex: 0 0 auto; }
/* While View is open the player steps back (the song plays on), so the map and the words have the screen to themselves */
.app .stage > :not(.lamp-slot), .lamp-tip { transition: opacity .25s ease; }
body:has(#viewCard:not([hidden])) .app .stage > :not(.lamp-slot), body:has(#viewCard:not([hidden])) .lamp-tip { opacity: 0; visibility: hidden; pointer-events: none; }
/* A venue still being finished: a signboard that swings down on two chains under the top bar, hazard stripes along its
   edges, the first time you're in that venue */
.soon-board { position: fixed; z-index: 13; left: 0; right: 0; top: calc(var(--pill-top) + 22px); margin: 0 auto; width: min(440px, calc(100vw - 32px)); pointer-events: none; transform-origin: 50% -70px; animation: soon-swing 1.1s cubic-bezier(.2, .9, .3, 1.25) both, soon-sway 6s ease-in-out 1.1s infinite; }
/* two ropes up to the top bar, a brass ring where each meets the board */
.soon-board::before, .soon-board::after { content: ''; position: absolute; top: -34px; height: 38px; width: 3px; border-radius: 2px; background: repeating-linear-gradient(-30deg, #c8a46a 0 3px, #8a6a3a 3px 6px); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.soon-board::before { left: 18%; } .soon-board::after { right: 18%; }
.soon-plank { pointer-events: auto; position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 16px 48px 16px 16px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 220, 160, .12), transparent 60%), repeating-linear-gradient(178deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 9px, rgba(255, 220, 170, .04) 9px 11px, transparent 11px 19px), linear-gradient(180deg, #5a3a1e, #3a2412);
  border: 2px solid #8a6436; box-shadow: 0 18px 38px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 226, 170, .25), inset 0 -2px 0 rgba(0, 0, 0, .35); }
/* brass bolts in the corners */
.soon-plank::before { content: ''; position: absolute; inset: 7px; pointer-events: none; --b: radial-gradient(circle, #f0cf86 0 2.2px, #8a6436 2.6px 3.2px, transparent 3.6px); background: var(--b) left top / 8px 8px no-repeat, var(--b) right top / 8px 8px no-repeat, var(--b) left bottom / 8px 8px no-repeat, var(--b) right bottom / 8px 8px no-repeat; }
.soon-cone { width: 50px; height: 58px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.soon-copy { min-width: 0; }
.soon-title { margin: 0; font: 700 11.5px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #f2b632; }
.soon-name { margin: 3px 0 2px; font: 600 23px/1.1 var(--display); color: #fff3dc; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.soon-text { margin: 0; font: 500 13.5px/1.4 var(--ui); color: rgba(255, 238, 210, .86); text-wrap: pretty; }
.soon-x { position: absolute; right: 6px; top: 6px; background: none; color: rgba(255, 238, 210, .8); }
/* a strip of hazard tape across the lower right corner */
.soon-tape { position: absolute; right: -34px; bottom: 12px; width: 150px; height: 14px; transform: rotate(-32deg); background: repeating-linear-gradient(-45deg, #f2b632 0 10px, #1a120c 10px 20px); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); pointer-events: none; }
.soon-board.away { animation: soon-away .32s ease-in forwards; }
@keyframes soon-swing { 0% { transform: translateY(-150%) rotate(-8deg); opacity: 0; } 45% { transform: translateY(8px) rotate(3.5deg); opacity: 1; } 70% { transform: translateY(0) rotate(-1.5deg); } 100% { transform: none; } }
@keyframes soon-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(.8deg); } }
@keyframes soon-away { from { transform: none; } to { transform: translateY(-150%) rotate(5deg); opacity: 0; } }
@media (max-width: 600px) { .soon-board { left: 12px; right: 62px; width: auto; } .soon-plank { grid-template-columns: 40px 1fr; padding: 14px 40px 14px 12px; column-gap: 10px; } .soon-cone { width: 38px; height: 44px; } .soon-name { font-size: 19px; } .soon-text { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .soon-board, .soon-board.away { animation: none; } }
/* View's choices about you (dance as, with a partner or alone, where you stand, names and faces) are one group. On a
   wide screen they're a panel of their own down the left side, so the venues and the map keep the right; elsewhere
   they fall into the one column: venues, you, the map, where you stand, names */
#viewCard .vc-side { display: contents; }
#viewCard .card-head { order: 0; } #viewCard .vc-venue { order: 1; } #viewCard .vc-you { order: 2; } #viewCard .map-section { order: 3; } #viewCard .vc-stand { order: 4; } #viewCard .couple { order: 5; } #viewCard .wear { order: 6; } #viewCard .lang-pick { order: 7; }
/* each choice is an icon over its word */
#viewCard .vc-you .atmo-seg, #viewCard .vc-stand .atmo-seg { gap: 4px 6px; }
#viewCard.float-card .vc-you .atmo-seg button, #viewCard.float-card .vc-stand .atmo-seg button { flex-direction: column; align-items: center; gap: 6px; min-width: 82px; min-height: 0; padding: 8px 8px 11px; border-radius: 10px; font-size: 15.5px; }
#viewCard.float-card .vc-you .atmo-seg button:hover, #viewCard.float-card .vc-stand .atmo-seg button:hover { background: rgba(246, 236, 215, .06); }
#viewCard.float-card .vc-you .atmo-seg button::after, #viewCard.float-card .vc-stand .atmo-seg button::after { left: 18%; right: 18%; bottom: 3px; }
#viewCard .atmo-seg button > svg.seg-ic { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)); }
@media (min-width: 960px) and (min-height: 560px) {
  #viewCard.float-card { grid-template-areas: "head head" "map venue"; grid-template-rows: auto 1fr; animation-name: view-fade; }
  #viewCard .vc-side { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(var(--pill-top) + 4px); width: 296px; max-height: calc(100dvh - var(--pill-top) - 28px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 20px; align-content: start; padding: 6px 6px 18px; animation: side-in .28s var(--ease-out); }
  body:has(#viewCard:not([hidden]))::after { content: ''; position: fixed; z-index: 11; top: 0; bottom: 0; left: 0; width: min(420px, 36vw); background: linear-gradient(to right, rgba(6, 4, 4, .78) 0%, rgba(6, 4, 4, .55) 62%, rgba(6, 4, 4, 0) 100%); pointer-events: none; animation: view-fade .26s var(--ease-out); }
}
@keyframes view-fade { from { opacity: 0; } }
@keyframes side-in { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { #viewCard .vc-side, body:has(#viewCard:not([hidden]))::after { animation: none; } }
/* The venues still being built sit under a heading of their own, a hazard stripe along it */
.venue-group { grid-column: 1 / -1; margin: 10px 0 2px; padding-top: 10px; display: grid; gap: 2px; border-top: 1px solid rgba(214, 176, 111, .18); position: relative; }
.venue-group::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: repeating-linear-gradient(-45deg, #f2b632 0 6px, #1a120c 6px 12px); }
.venue-group span { font: 700 11px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #f2b632; }
.venue-group i { font: 500 12.5px/1.3 var(--ui); font-style: normal; color: var(--ivory-3); }
.venue-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* View on a wide screen: three columns over the venue, each centred. Your choices down the left, centred top to
   bottom; the map in the middle of the screen, centred both ways, View's name and its close button over it; the
   venues on the right, beside the View/Sound/Ideas buttons, centred top to bottom (and scrolling, if there are ever
   more than the screen holds) */
@media (min-width: 960px) and (min-height: 560px) {
  #viewCard.float-card { inset: 0; width: auto; max-height: none; overflow: visible; padding: 0; display: block; pointer-events: none; }
  #viewCard.float-card > * { pointer-events: auto; }
  /* the map in the middle, Where you stand right under it (--mapw: the map's width, leaving room for the six places) */
  #viewCard { --mapw: min(40vw, 520px, calc((100dvh - 400px) / 1.1)); }
  #viewCard .map-section { position: fixed; inset: 0; margin: auto; width: min(48vw, 560px); height: fit-content; display: grid; gap: 10px; }
  #viewCard .map-section .venue-map { width: var(--mapw); margin: 0 auto; }
  #viewCard .card-head { position: fixed; left: 0; right: 0; margin: 0 auto; top: max(calc(var(--pill-top) - 8px), calc(50dvh - var(--mapw) * 0.55 - 150px)); width: min(48vw, 560px); }
  #viewCard .vc-venue { position: fixed; top: 0; bottom: 0; margin: auto 0; right: calc(var(--pill-right) + var(--pill-w) + 18px); width: 300px; height: fit-content; max-height: calc(100dvh - 2 * var(--pill-top) - 24px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 8px; align-content: start; padding: 4px 6px; }
  #viewCard .vc-side { top: 0; bottom: 0; margin: auto 0; height: fit-content; max-height: calc(100dvh - 2 * var(--pill-top) - 24px); }
  #viewCard .venue-row { font-size: 15.5px; min-height: 36px; }
  body:has(#viewCard:not([hidden]))::before { width: min(460px, 38vw); }
}
/* View's and Sound's headings in sentence case, a touch larger, not capitals */
.float-card .card-label, .float-card .venue-group span { text-transform: none; letter-spacing: .01em; font: 700 13.5px/1.25 var(--ui); }
@media (min-width: 960px) and (min-height: 560px) {
  /* the middle column centred on the map: View's name (its close button at the end of the line), Go anywhere, the tip */
  #viewCard .card-head { display: flex; justify-content: center; }
  #viewCard .card-head .card-x { position: absolute; right: 0; top: 50%; margin-top: -22px; }
  #viewCard .map-section .card-label, #viewCard .map-tip { text-align: center; }
  /* no shade down the sides: the words carry their own soft edge */
  body:has(#viewCard:not([hidden]))::before, body:has(#viewCard:not([hidden]))::after { display: none; }
}
/* A light shade under the map in the middle, fading out before its edge, so its lines hold over a bright venue */
@media (min-width: 960px) and (min-height: 560px) { #viewCard .venue-map { background: radial-gradient(closest-side, rgba(6, 4, 4, .42), rgba(6, 4, 4, .2) 70%, rgba(6, 4, 4, 0)); } }
/* On a phone, two venues to a line: a long name wraps to a second line rather than being cut */
@media (max-width: 600px) { #viewCard .venue-name { white-space: normal; overflow: visible; line-height: 1.15; } }
/* while the board is down, the hint under the garbo waits */
body:has(#soonBoard:not([hidden])) .lamp-tip { visibility: hidden; }
/* View on a wide screen: each of its three parts sits on a soft shade of its own, about a third dark, feathered out at
   its edges; your choices on the left are centred in their column, as the map's are */
@media (min-width: 960px) and (min-height: 560px) {
  #viewCard .vc-side, #viewCard .vc-venue, #viewCard .map-section { background: rgba(6, 4, 4, .3); box-shadow: 0 0 36px 26px rgba(6, 4, 4, .3); border-radius: 22px; }
  #viewCard .venue-map { background: none; }
  #viewCard .vc-side { text-align: center; padding: 10px 10px 18px; }
  #viewCard .vc-side .card-label, #viewCard .vc-side .atmo-desc { text-align: center; margin-inline: auto; }
  #viewCard .vc-side .atmo-seg { justify-content: center; }
  #viewCard .vc-side .couple-row { justify-content: center; margin-inline: auto; }
}
/* sixteen venues and growing: on a wide screen the rows are compact, so the whole list fits beside the map */
@media (min-width: 960px) and (min-height: 560px) { #viewCard .venue-row { min-height: 31px; font-size: 15px; } #viewCard .venue-list { gap: 0; } #viewCard .venue-group { margin: 6px 0 2px; padding-top: 7px; } }

/* ===== Every panel as words over the venue =====
   View set the look and every other panel now shares it: Sound, Ask for a feature, Volume, More and what opens from it
   (Install, Share, Play YouTube link, Tonight, Lives, Host a live, the video), and What is Garba. No card: the venue
   dims behind, the player steps back while a panel is open (the song plays on), and the panel is one column of words
   centred on the screen on its own soft shade, as each of View's parts is. A serif title with its close button on the
   same line, labels in brass in sentence case, choices as words with a line under the one you're on, an input as a
   line to write on, the one action as a brass button. On a phone the column runs the width of the screen below the
   View, Sound and Ideas pill and scrolls up and down only. */
.side-card.float-panel, .sheet.float-panel {
  position: fixed; z-index: 12; inset: 0; margin: auto; width: min(560px, calc(100vw - 2 * (var(--pill-w) + var(--pill-right) + 28px))); max-width: none; height: fit-content; max-height: calc(100dvh - 2 * var(--pill-top) - 48px);
  display: grid; gap: 18px; align-content: start; justify-items: stretch; padding: 22px 26px 26px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  /* (no box of its own: the words carry their own soft shadow over the screen's gentle shade, as View's do) */
  border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  text-align: center; text-shadow: 0 1px 2px rgba(3, 4, 10, 1), 0 0 12px rgba(3, 4, 10, .85), 0 0 28px rgba(3, 4, 10, .6); animation: view-fade .26s var(--ease-out);
}
.float-panel > *, .float-panel .sheet-body > *, .float-panel .card-body > * { min-width: 0; }
body:has(.float-panel:not([hidden]))::before { content: ''; position: fixed; z-index: 11; inset: 0; width: auto; background: radial-gradient(ellipse 58% 70% at 50% 50%, rgba(6, 4, 4, .68) 0%, rgba(6, 4, 4, .5) 45%, rgba(6, 4, 4, .28) 80%, rgba(6, 4, 4, .16) 100%); pointer-events: none; animation: view-fade .26s var(--ease-out); }
body:has(.sheet.float-panel:not([hidden])) .scrim { background: none; }
body:has(.float-panel:not([hidden])) .app .stage > :not(.lamp-slot), body:has(.float-panel:not([hidden])) .lamp-tip { opacity: 0; visibility: hidden; pointer-events: none; }
/* the head: the title centred, its close button at the end of the line */
.float-panel .sheet-grip, .float-panel .card-badge { display: none; }
.float-panel .sheet-head, .float-panel .card-head { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 48px; height: auto; overflow: visible; }
.float-panel .sheet-head h2, .float-panel .card-head h2 { margin: 0; font: 600 26px/1.15 var(--display); color: var(--ivory); text-wrap: balance; }
.float-panel .sheet-head .ib, .float-panel .card-x { position: absolute; right: 0; top: 50%; margin: -22px 0 0; background: none; }
.float-panel .sheet-body, .float-panel .card-body { display: grid; gap: 18px; padding: 0; overflow: visible; justify-items: center; }
/* words */
.float-panel .lead, .float-panel .note, .float-panel .atmo-desc, .float-panel .atmo-note, .float-panel p { text-align: center; margin-inline: auto; max-width: 46ch; text-wrap: pretty; }
.float-panel .lead { margin: 0; font-size: 16px; color: var(--ivory-2); }
.float-panel .note, .float-panel .atmo-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ivory-3); }
.float-panel .card-label, .float-panel .atmo-row h3, .float-panel .lives-h { margin: 0; text-align: center; text-transform: none; letter-spacing: .01em; font: 700 13.5px/1.25 var(--ui); color: var(--brass); }
.float-panel .atmo-row { display: grid; gap: 10px; justify-items: center; text-align: center; }
/* the one action */
.float-panel .primary { width: auto; min-width: 220px; max-width: 100%; padding: 0 30px; justify-self: center; text-shadow: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
/* a line to write on */
.float-panel .host-input, .float-panel .idea-text { width: 100%; border: 0; border-bottom: 1px solid rgba(214, 176, 111, .45); border-radius: 0; background: rgba(246, 236, 215, .04); color: var(--ivory); text-align: left; text-shadow: none; }
.float-panel .host-input:focus, .float-panel .idea-text:focus { border-bottom-color: var(--brass); background: rgba(246, 236, 215, .07); }
/* choices are words, the one you're on in brass with a fine line under it (as View's) */
.float-panel .atmo-seg, .float-panel .install-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.float-panel .atmo-seg button, .float-panel .install-tabs button { position: relative; flex: 0 0 auto; min-width: 0; min-height: 36px; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ivory-2); font: 600 15.5px/1.2 var(--ui); cursor: pointer; }
.float-panel .atmo-seg button:hover, .float-panel .install-tabs button:hover { color: var(--ivory); background: none; }
.float-panel .atmo-seg button[aria-pressed="true"], .float-panel .install-tabs button[aria-selected="true"] { color: var(--brass); background: none; box-shadow: none; }
.float-panel .atmo-seg button[aria-pressed="true"]::after, .float-panel .install-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; border-radius: 1px; background: currentColor; }
/* Sound: on and off as a word at the top, the two choices, then the beat round its big tap circle */
#soundCard.float-panel .atmo-power { justify-content: center; width: auto; justify-self: center; }
#soundCard.float-panel .atmo-power strong { font: 600 18px/1.2 var(--ui); }
#soundCard.float-panel .atmo-beat-grid { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 22px; }
#soundCard.float-panel .atmo-tap { width: 108px; height: 108px; border-radius: 50%; font: 600 14px/1.2 var(--ui); color: var(--ivory); border: 1.5px solid rgba(214, 176, 111, .6); background: radial-gradient(circle, rgba(214, 176, 111, .16), rgba(214, 176, 111, .04)); text-shadow: inherit; }
#soundCard.float-panel .atmo-beat-read { display: grid; gap: 6px; justify-items: start; }
#soundCard.float-panel .atmo-bpm { margin: 0; font: 600 14px/1 var(--ui); color: var(--ivory-3); }
#soundCard.float-panel .atmo-bpm b { font: 600 34px/1 var(--display); color: var(--ivory); }
#soundCard.float-panel .atmo-tap-hint, #soundCard.float-panel #atmoTapHint { text-align: left; margin: 0; }
#soundCard.float-panel .atmo-note a { color: var(--brass); }
/* Ask for a feature: the form, see-through, the width of the column */
#ideaCard.float-panel { width: min(600px, calc(100vw - 2 * (var(--pill-w) + var(--pill-right) + 28px))); }
#ideaCard.float-panel .idea-form, #ideaCard.float-panel .idea-body > * { justify-self: stretch; }
/* More: its doors as icons over their words, four to a line (three on a phone) */
.app.more-open { left: 0; right: 0; }
.more-open .rail, .more-open .view-switch { right: var(--pill-right); }
#moreSheet.float-panel { top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: min(620px, calc(100vw - 2 * (var(--pill-w) + var(--pill-right) + 28px))); height: fit-content; max-height: calc(100dvh - 2 * var(--pill-top) - 48px); padding: 22px 26px 26px; border: 0; border-radius: 26px; background: rgba(6, 4, 4, .34); animation: view-fade .26s var(--ease-out); }
#moreSheet.float-panel .sheet-head { padding: 0 48px; }
#moreSheet.float-panel .sheet-head h2 { font-size: 26px; }
#moreSheet.float-panel .sheet-body { padding: 0; }
#moreSheet.float-panel .tiles { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; margin: 0; }
#moreSheet.float-panel .tile { justify-items: center; align-content: start; gap: 10px; padding: 14px 6px 12px; border-radius: 16px; }
#moreSheet.float-panel .tile svg, #moreSheet.float-panel .tile-kukdu { width: 32px; height: 32px; filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)); }
#moreSheet.float-panel .tile span { font: 600 14.5px/1.25 var(--ui); color: var(--ivory-2); }
#moreSheet.float-panel .tile:hover { background: rgba(246, 236, 215, .07); }
#moreSheet.float-panel .proto-states { justify-self: stretch; text-align: left; }
/* Install */
#installSheet.float-panel .install-pane { display: grid; gap: 4px; }
#installSheet.float-panel .install-pane[hidden] { display: none; }
#installSheet.float-panel .install-pane p { margin: 0 auto; font-size: 16px; line-height: 1.55; }
/* Share: the card itself is the picture */
#shareSheet.float-panel .card { width: min(280px, calc((100dvh - 2 * var(--pill-top) - 230px) * 0.8), 100%); border: 0; border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
/* Tonight: the night's arc and its five parts, a fine line between them */
#tonightSheet.float-panel .arc { width: min(100%, 440px); }
#tonightSheet.float-panel .night { width: 100%; text-align: left; }
#tonightSheet.float-panel .night li { border-top-color: rgba(214, 176, 111, .16); }
/* Lives: rows, not boxes */
.float-panel .live-card { border: 0; border-bottom: 1px solid rgba(214, 176, 111, .16); border-radius: 0; background: none; text-shadow: inherit; }
/* Play YouTube link and Volume keep their rows, centred */
#linkCard.float-panel .face-cutout-title { margin: 4px 0 0; text-align: center; font: 700 13.5px/1.25 var(--ui); color: var(--brass); }
#linkCard.float-panel .card-body { padding: 0 !important; }
#volumeCard.float-panel { width: min(420px, calc(100vw - 2 * (var(--pill-w) + var(--pill-right) + 28px))); }
#volumeCard.float-panel .vol-row { justify-content: center; }
/* On a phone: the width of the screen, below the pill, scrolling up and down only */
@media (max-width: 600px) {
  .side-card.float-panel, .sheet.float-panel, #moreSheet.float-panel, #ideaCard.float-panel, #volumeCard.float-panel { left: 0; right: 0; top: auto; bottom: calc(var(--safe-b, 0px) + 6px); width: auto; margin: 0; max-height: calc(100dvh - var(--pill-top) - 142px - var(--safe-b, 0px) - 22px); padding: 14px 16px 20px; border-radius: 0; background: none; box-shadow: none; animation-name: view-fade; }
  body:has(.float-panel:not([hidden]))::before { background: rgba(6, 4, 4, .84); }
  .float-panel .sheet-head h2, .float-panel .card-head h2, #moreSheet.float-panel .sheet-head h2 { font-size: 23px; }
  #moreSheet.float-panel .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #moreSheet.float-panel .tile span { font-size: 13px; }
  #soundCard.float-panel .atmo-tap { width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) { .float-panel, body:has(.float-panel:not([hidden]))::before { animation: none; } }

/* View on a phone: three venues to a line, each its icon over its name, and nothing wider than the screen, so it
   scrolls up and down only */
@media (max-width: 600px) {
  #viewCard { overflow-x: hidden; touch-action: pan-y; }
  #viewCard > *, #viewCard .vc-side > * { min-width: 0; max-width: 100%; }
  #viewCard .venue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; }
  #viewCard .venue-row { position: relative; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 6px; min-height: 0; padding: 8px 2px 8px; border-radius: 12px; text-align: center; font: 600 13px/1.2 var(--ui); }
  #viewCard .venue-row .venue-ic { width: 26px; height: 26px; }
  #viewCard .venue-row .venue-name { white-space: normal; overflow: visible; text-wrap: balance; }
  #viewCard .venue-row .venue-load { position: absolute; top: 6px; right: 8px; }
  #viewCard .venue-row[aria-pressed="true"] { background: rgba(214, 176, 111, .1); }
  #viewCard .venue-group { text-align: center; justify-items: center; }
  #viewCard .venue-group::before { left: 50%; margin-left: -28px; }
  #viewCard .card-head { justify-content: center; }
  #viewCard .card-label, #viewCard .map-tip, #viewCard .atmo-desc { text-align: center; }
  #viewCard .atmo-seg { justify-content: center; }
  #viewCard .couple-row { justify-content: center; }
}

/* What is Garba: the guide reads over the darkened venue, its Mata ni Pachedi border drawn in brass and madder */
.about { background: rgba(8, 5, 4, .9); color: var(--ivory); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.about-border { border-color: rgba(214, 176, 111, .55); }
.about-close { color: var(--ivory-2); }
.about-close:hover { color: var(--brass); }
.about-kicker { color: var(--brass); }
.about h2 { color: var(--ivory); text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.about-gu { color: var(--ivory-3); }
.about-cols { border-top-color: rgba(214, 176, 111, .3); }
.about h3 { color: #e08a5a; }
.about-icon { color: #e08a5a; }
.about-cols p { color: var(--ivory-2); }
.about p.about-note { border-top-color: rgba(214, 176, 111, .25); color: var(--ivory-3); }
/* View's head on a phone: its name centred, the close button at the end of the line, inside the screen */
@media (max-width: 600px) {
  #viewCard .card-head { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 48px; }
  #viewCard .card-head .card-x { position: absolute; right: 0; top: 50%; margin: -22px 0 0; }
}
/* What is Garba covers the player too, and reads on a deeper shade */
.about { background: rgba(8, 5, 4, .95); }
/* Kukdu or Private Garba Circle open over the venue from the page round this one: the player steps back the same way */
html.covered .app .stage > :not(.lamp-slot), html.covered .lamp-tip { opacity: 0; visibility: hidden; pointer-events: none; }

/* ===== The way in: through the clouds =====
   Each visit opens above dense moonlit clouds while the venue builds below; a tap starts the music and drops you
   through them. The gate's own night shows from the first paint, before any script; its clouds are a small canvas */
.cloud-gate { position: fixed; inset: 0; z-index: 40; overflow: hidden; cursor: pointer; background: radial-gradient(120% 75% at 78% 8%, #23264f 0%, #151838 34%, #0b0d24 66%, #06071a 100%); -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: opacity .9s ease; }
.cloud-gate[hidden] { display: none; }
.cloud-gate:focus-visible { outline: none; }
.cloud-gate:focus-visible .gate-tap { color: #fff6e0; }
.gate-sky, .cloud-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a few of the stars twinkle: a layer of them the browser fades in and out by itself */
.gate-twinkle { animation: gate-twinkle 3.4s ease-in-out infinite; }
@keyframes gate-twinkle { 50% { opacity: .35; } }
.cloud-gate.falling .gate-sky { transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.4, 0, .2, 1); opacity: .35; transform: translateY(-6%); }
/* PlayGarba sits at the very middle, in the brand's own face, so it can lift away into the brand's place */
.gate-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(44px, 10vw, 76px); line-height: 1; letter-spacing: .018em; white-space: nowrap; color: #fff4de; text-shadow: 0 2px 26px rgba(8, 6, 24, .9), 0 1px 3px rgba(8, 6, 24, .85); pointer-events: none; transition: opacity .5s ease; }
.gate-brand.gone { opacity: 0; }
/* tonight's moon, on its own so it can go to its place in the venue's sky as you come down */
.gate-moon { position: absolute; pointer-events: none; transition: opacity .6s ease; }
.gate-moon.lifting { position: fixed; z-index: 44; transform-origin: 50% 50%; transition: transform 1.6s cubic-bezier(.55, 0, .15, 1), opacity .7s ease; }
.gate-moon.gone { opacity: 0; }
.gate-brand.lifting { position: fixed; z-index: 45; transform: none; transform-origin: 0 0; }
.gate-brand.landing { transition: transform 1.5s cubic-bezier(.55, 0, .15, 1), text-shadow 1.5s ease; text-shadow: 0 1px 2px rgba(3, 4, 10, .92), 0 5px 20px rgba(3, 4, 10, .68); }
/* the invitation low on the screen, under the clouds' tops */
.gate-copy { position: absolute; left: 0; right: 0; bottom: max(13vh, 84px); display: grid; gap: 10px; justify-items: center; padding: 0 24px; text-align: center; text-shadow: 0 2px 22px rgba(12, 8, 26, .9), 0 1px 3px rgba(12, 8, 26, .9); transition: opacity .45s ease, transform .7s cubic-bezier(.3, .7, .2, 1); }
.gate-tap { margin: 0; font: 600 clamp(15.5px, 2.1vw, 19px)/1.3 var(--ui); color: #f6e7c8; animation: gate-breathe 2.8s ease-in-out infinite; }
.gate-load { margin: 0; min-height: 1.3em; font: 500 12.5px/1.3 var(--ui); letter-spacing: .02em; color: rgba(246, 231, 200, .62); transition: opacity .6s ease; }
.gate-load.done { opacity: 0; }
@keyframes gate-breathe { 50% { opacity: .6; } }
.cloud-gate.falling { cursor: default; }
.cloud-gate.falling .gate-copy { opacity: 0; transform: translateY(24px); }
.cloud-gate.gone { opacity: 0; pointer-events: none; }
/* while the gate is up, the venue's still and the board wait under it */
body:has(#cloudGate:not([hidden])) .venue-poster { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .gate-tap, .gate-twinkle { animation: none; } .cloud-gate, .gate-copy, .gate-brand { transition-duration: .2s; } }

/* ===== View's pages =====
   Everywhere but a phone the pages are only groupings (display: contents), so View lays out as it always has. On a
   phone or a tablet (anything short of the wide layout's three columns) View is three pages side by side, swiped
   between, the map first: Go anywhere; then the venues; then you (where you stand, who you dance as, names and faces).
   Dots under the title say which page you're on and take you to one. */
.vc-pages, .vc-page { display: contents; }
.vc-dots { display: none; }
@media not all and (min-width: 960px) and (min-height: 560px) {
  #viewCard.float-card { display: flex; flex-direction: column; overflow: hidden; touch-action: auto; height: calc(100dvh - var(--pill-top) - 142px - var(--safe-b, 0px) - 22px); padding-bottom: 0; }
  #viewCard .card-head { flex: none; flex-wrap: wrap; }
  #viewCard .vc-dots { display: flex; flex: none; justify-content: center; gap: 8px; margin: 6px 0 10px; }
  #viewCard .vc-dots button { width: 8px; height: 8px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: rgba(243, 230, 208, .38); box-shadow: 0 1px 3px rgba(3, 4, 10, .8); transition: width .2s ease, background .2s ease; }
  #viewCard .vc-dots button[aria-selected="true"] { width: 22px; background: var(--brass); }
  #viewCard .vc-pages { display: flex; flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
  #viewCard .vc-pages::-webkit-scrollbar { display: none; }
  #viewCard .vc-page { display: flex; flex-direction: column; gap: 14px; flex: 0 0 100%; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; padding: 6px 2px 18px; }
  #viewCard .vc-page-map { order: 0; justify-content: center; } #viewCard .vc-page-venues { order: 1; } #viewCard .vc-page-you { order: 2; }
  /* on the third page: where you stand first, then who you dance as, then names and faces */
  #viewCard .vc-page-you .vc-side { display: flex; flex-direction: column; gap: 16px; }
  #viewCard .vc-page-you .vc-stand { order: 1; } #viewCard .vc-page-you .vc-you { order: 2; } #viewCard .vc-page-you .couple { order: 3; } #viewCard .vc-page-you .wear { order: 4; } #viewCard .vc-page-you .lang-pick { order: 5; }
  /* the words carry a deeper shadow on a phone, over the busy venue */
  #viewCard.float-card { text-shadow: 0 1px 2px rgba(3, 4, 10, 1), 0 0 10px rgba(3, 4, 10, .9), 0 0 26px rgba(3, 4, 10, .7); }
}

/* ===== Garba sound =====
   Laid out as View is: each choice an icon over its word, the one you're on in brass with a fine line under it; the
   switch at the top; the beat's patterns with their rhythm shown as dots; tapping or listening for the tempo; the
   listening room as a line of its own. No boxes: words and icons over the screen's soft shade. */
#soundCard.sound2 .atmo-row { display: grid; gap: 10px; justify-items: center; }
#soundCard.sound2 .atmo-row h3 { margin: 0; font: 600 13px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
#soundCard.sound2 .atmo-power { justify-content: center; gap: 14px; padding: 4px 0; border: 0; background: none; width: auto; margin: 0 auto; }
#soundCard.sound2 .atmo-power small { display: block; font-size: 12.5px; color: var(--ivory-3); }
#soundCard.sound2 .atmo-power .pw-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(214, 176, 111, .45); background: none; }
#soundCard.sound2 .atmo-power .pw-ic svg { width: 20px; height: 20px; }
#soundCard.sound2 .atmo-power[aria-checked="true"] .pw-ic { background: var(--brass); color: var(--maroon); border-color: var(--brass); box-shadow: 0 0 18px rgba(214, 176, 111, .45); }
#soundCard.sound2 .snd-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding: 0; border: 0; background: none; box-shadow: none; }
#soundCard.sound2 .snd-tiles button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 84px; min-height: 0; padding: 8px 8px 11px; border: 0; border-radius: 10px; background: none; box-shadow: none; color: var(--ivory-2); font: 600 14.5px/1.2 var(--ui); }
#soundCard.sound2 .snd-tiles button:hover { background: rgba(246, 236, 215, .06); color: var(--ivory); }
#soundCard.sound2 .snd-tiles button[aria-pressed="true"] { color: var(--brass); background: none; }
#soundCard.sound2 .snd-tiles button[aria-pressed="true"]::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 3px; height: 2px; border-radius: 1px; background: var(--brass); }
#soundCard.sound2 .snd-tiles svg.seg-ic { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)); }
#soundCard.sound2 .snd-beats .seg-dots { display: flex; gap: 5px; height: 30px; align-items: center; }
#soundCard.sound2 .snd-beats .seg-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 230, 208, .3); }
#soundCard.sound2 .snd-beats .seg-dots i.on { background: currentColor; box-shadow: 0 0 8px currentColor; }
#soundCard.sound2 .atmo-beat-grid { display: flex; justify-content: center; align-items: center; gap: 22px; width: auto; }
#soundCard.sound2 .atmo-tap { width: 96px; height: 96px; border: 1.5px solid var(--brass); background: radial-gradient(circle at 50% 40%, rgba(214, 176, 111, .22), rgba(214, 176, 111, .04) 70%); box-shadow: 0 0 0 0 rgba(214, 176, 111, .3), 0 0 22px rgba(214, 176, 111, .18); color: var(--ivory); font: 600 13.5px/1.2 var(--ui); }
#soundCard.sound2 .atmo-bpm b { font: 600 34px/1 var(--display); color: var(--ivory); }
#soundCard.sound2 .snd-listen, #soundCard.sound2 .snd-room { display: flex; align-items: center; gap: 12px; margin: 4px auto 0; padding: 8px 4px; border: 0; background: none; color: var(--ivory); text-align: left; text-decoration: none; max-width: 420px; }
#soundCard.sound2 .snd-listen svg, #soundCard.sound2 .snd-room svg { flex: none; width: 26px; height: 26px; color: var(--brass); filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)); }
#soundCard.sound2 .snd-listen strong, #soundCard.sound2 .snd-room strong { display: block; font: 600 15px/1.25 var(--ui); }
#soundCard.sound2 .snd-listen small, #soundCard.sound2 .snd-room small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ivory-3); }
#soundCard.sound2 .snd-listen[aria-pressed="true"] strong { color: var(--brass); }
#soundCard.sound2 .snd-listen.following svg { animation: snd-pulse 1s ease-in-out infinite; }
@keyframes snd-pulse { 50% { transform: scale(1.12); } }
#soundCard.sound2 .snd-room:hover strong { color: var(--brass); }
@media (prefers-reduced-motion: reduce) { #soundCard.sound2 .snd-listen.following svg { animation: none; } }

/* View's pages on a tablet: the panel centred over the venue, a comfortable width; and on any size short of the wide
   layout, a soft shade that fades out from behind the words, enough to read them and still see the venue */
@media (min-width: 601px) and (max-width: 959px), (min-width: 601px) and (max-height: 559px) {
  #viewCard.float-card { left: 0; right: 0; margin: 0 auto; top: calc(var(--pill-top) + 6px); bottom: auto; width: min(560px, calc(100vw - 2 * (var(--pill-w) + var(--pill-right) + 24px))); height: calc(100dvh - var(--pill-top) - 160px); max-height: none; }
  #viewCard .venue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  #viewCard .venue-row { position: relative; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 6px; min-height: 0; padding: 10px 4px; border-radius: 12px; text-align: center; font: 600 14px/1.2 var(--ui); }
  #viewCard .venue-row .venue-ic { width: 28px; height: 28px; }
  #viewCard .venue-row .venue-name { white-space: normal; overflow: visible; text-wrap: balance; }
  #viewCard .venue-row[aria-pressed="true"] { background: rgba(214, 176, 111, .1); }
  #viewCard .card-label, #viewCard .atmo-desc, #viewCard .map-tip { text-align: center; }
  #viewCard .atmo-seg, #viewCard .couple-row { justify-content: center; }
}
@media not all and (min-width: 960px) and (min-height: 560px) {
  body:has(#viewCard:not([hidden]))::before { left: 0; right: 0; width: 100vw; background: radial-gradient(ellipse 62% 72% at 50% 48%, rgba(6, 4, 4, .66) 0%, rgba(6, 4, 4, .5) 45%, rgba(6, 4, 4, .3) 78%, rgba(6, 4, 4, .18) 100%); }
}

/* ===== More =====
   As View and Sound: no box, the words and icons over the screen's soft shade. What you can do as icons over words,
   well apart; then PlayGarba's pages under Read, the same way, a little smaller. */
#moreSheet.float-panel { background: none; box-shadow: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 2px rgba(3, 4, 10, 1), 0 0 12px rgba(3, 4, 10, .85), 0 0 28px rgba(3, 4, 10, .6); }
#moreSheet.float-panel .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; margin: 6px 0 4px; }
#moreSheet.float-panel .tile { justify-items: center; text-align: center; gap: 9px; padding: 10px 4px 12px; border: 0; border-radius: 14px; background: none; text-decoration: none; }
#moreSheet.float-panel .tile svg, #moreSheet.float-panel .tile .tile-kukdu { width: 30px; height: 30px; color: var(--brass); filter: drop-shadow(0 1px 2px rgba(3, 4, 10, .9)); }
#moreSheet.float-panel .tile span { font: 600 13.5px/1.25 var(--ui); color: var(--ivory); text-wrap: balance; }
#moreSheet.float-panel .tile:hover { background: rgba(246, 236, 215, .06); }
#moreSheet.float-panel .more-label { margin: 14px 0 2px; font: 600 12.5px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); text-align: center; }
#moreSheet.float-panel .more-read { gap: 10px 10px; }
#moreSheet.float-panel .more-read .tile svg { width: 24px; height: 24px; }
#moreSheet.float-panel .more-read .tile span { font-size: 12.5px; color: var(--ivory-2); }
@media (max-width: 600px) { #moreSheet.float-panel .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; } }

/* ===== Ask for a feature =====
   The form's frame is as tall as its form from the start (the form doesn't always say how tall it is), and the panel
   as tall as the screen allows, so the whole form shows; what's below it scrolls */
#ideaCard.float-panel { max-height: calc(100dvh - 2 * var(--pill-top) - 24px); }
#ideaCard .idea-form iframe { height: min(640px, calc(100dvh - 220px)); min-height: 520px; }
@media (max-width: 600px) { #ideaCard .idea-form iframe { height: calc(100dvh - 300px); min-height: 480px; } }

/* ===== What you wear (View, You): an outfit for you and yours, its colours, a skin tone ===== */
.wear .wear-who { margin-bottom: 10px; }
.wear .wear-who button { min-height: 34px; }
.wear-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wear-looks button { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 8px 4px 7px; border: 1px solid rgba(214, 176, 111, .18); border-radius: 16px; background: rgba(246, 236, 215, .04); color: var(--ivory-2); font: 600 11.5px/1.2 var(--ui); text-align: center; transition: border-color .15s ease, background .15s ease, transform .1s ease; }
.wear-looks button:hover { background: rgba(246, 236, 215, .08); color: var(--ivory); }
.wear-looks button:active { transform: scale(.97); }
.wear-looks button[aria-checked="true"] { border-color: var(--brass); background: rgba(214, 176, 111, .14); color: var(--ivory); }
.wear-fig { display: block; width: 40px; height: 60px; pointer-events: none; }
.wear-looks svg { width: 40px; height: 60px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.wear-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wear-k { flex: 0 0 52px; font: 600 12px/1 var(--ui); color: var(--ivory-2); }
.wear-sw { display: flex; flex-wrap: wrap; gap: 9px; }
.wear-sw button { width: 28px; height: 28px; min-height: 0; padding: 0; border: 2px solid rgba(243, 230, 208, .22); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); transition: transform .1s ease, border-color .15s ease; }
.wear-sw button:active { transform: scale(.92); }
.wear-sw .wear-venue { position: relative; }
.wear-sw .wear-venue::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(11, 6, 5, .55); box-shadow: inset 0 0 0 1.5px rgba(243, 230, 208, .8); }
.wear-sw button[aria-checked="true"] { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(214, 176, 111, .4), 0 1px 4px rgba(0, 0, 0, .5); }
.wear-looks button:focus-visible, .wear-sw button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ===== Language (View, You): English, Gujlish, Gujarati ===== */
#viewCard .lang-pick .lang-seg { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid rgba(214, 176, 111, .4); border-radius: 999px; background: rgba(11, 6, 5, .5); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
#viewCard .lang-pick { display: flex; flex-direction: column; align-items: center; }
#viewCard .lang-pick .lang-seg button { flex: 0 0 auto; min-width: 0; min-height: 34px; padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ivory-2); font: 600 13px/1 var(--ui); text-shadow: none; }
#viewCard .lang-pick .lang-seg button::after { display: none; }
#viewCard .lang-pick .lang-seg button[aria-pressed="true"] { background: var(--brass); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
#viewCard .lang-pick .lang-seg button[lang="gu"] { font-size: 14px; }
:root[data-lang="gu"] body { font-feature-settings: normal; }

/* ===== Where you stand, under the map: the six places in a row (two on a phone), its line of description below ===== */
#viewCard .map-section .vc-stand { display: grid; gap: 6px; justify-items: center; margin-top: 4px; }
#viewCard .map-section .vc-stand .card-label, #viewCard .map-section .vc-stand .atmo-desc { text-align: center; margin-inline: auto; }
#viewCard .map-section .vc-stand .atmo-seg { justify-content: center; gap: 2px 4px; }
#viewCard.float-card .map-section .vc-stand .atmo-seg button { min-width: 66px; padding: 6px 6px 9px; gap: 5px; font-size: 12.5px; }
#viewCard .map-section .vc-stand .atmo-seg button > svg.seg-ic { width: 26px; height: 26px; }
#viewCard .map-section .vc-stand .atmo-desc { max-width: 36ch; margin-top: 0; }
/* Folded, What you wear is one line: the two of you as you're dressed now, and Change */
.wear-sum { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto; padding: 4px 6px 4px 4px; border: 0; background: none; color: var(--ivory-2); cursor: pointer; }
.wear-sum .wear-figs { display: inline-flex; gap: 2px; }
.wear-sum .wear-figs .wear-fig, .wear-sum .wear-figs svg { width: 30px; height: 45px; }
.wear-sum .wear-change { padding: 6px 14px; border: 1px solid rgba(214, 176, 111, .45); border-radius: 999px; font: 600 12.5px/1 var(--ui); color: var(--ivory); background: rgba(11, 6, 5, .35); }
.wear-sum:hover .wear-change, .wear-sum[aria-expanded="true"] .wear-change { border-color: var(--brass); color: var(--brass); }
.wear-sum:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 12px; }
.wear .card-label + .wear-sum { display: flex; }
.wear-more { margin-top: 10px; }
@media not all and (min-width: 960px) and (min-height: 560px) {
  /* On a phone the venue stops above the player's controls (--seam): with a panel open, it fades into the dark below
     instead of ending on a hard line */
  body:has(.float-panel:not([hidden]))::after { content: ''; position: fixed; z-index: 11; left: 0; right: 0; top: calc(var(--seam, 100dvh) - 170px); bottom: 0; background: linear-gradient(to bottom, rgba(11, 6, 5, 0), rgb(11, 6, 5) 170px); pointer-events: none; animation: view-fade .26s var(--ease-out); }
  #viewCard .vc-page-map { justify-content: flex-start; }
  /* (the map a little smaller, so all six places fit under it without scrolling) */
  #viewCard .vc-page-map .venue-map { width: min(100%, clamp(230px, calc(100dvh - 540px), 300px)); margin: 0 auto; }
  #viewCard .map-section .vc-stand .atmo-seg { gap: 0 2px; }
  #viewCard.float-card .map-section .vc-stand .atmo-seg button { min-width: 62px; padding: 5px 4px 8px; }
}
/* On a wide screen the venues' column is centred in its own space, as the other two are: a grid of names under icons */
@media (min-width: 960px) and (min-height: 560px) {
  #viewCard .vc-venue { text-align: center; justify-items: center; }
  #viewCard .vc-venue .card-label { text-align: center; }
  #viewCard .venue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 4px; width: 100%; }
  #viewCard .venue-row { position: relative; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 5px; min-height: 0; padding: 7px 2px; border-radius: 12px; text-align: center; font: 600 12.5px/1.2 var(--ui); }
  #viewCard .venue-row .venue-ic { width: 24px; height: 24px; }
  #viewCard .venue-row .venue-name { white-space: normal; overflow: visible; text-wrap: balance; }
  #viewCard .venue-row .venue-load { position: absolute; top: 5px; right: 6px; }
  #viewCard .venue-row[aria-pressed="true"] { background: rgba(214, 176, 111, .1); }
  #viewCard .venue-group { text-align: center; justify-items: center; width: 100%; }
  #viewCard .venue-group::before { left: 50%; margin-left: -28px; }
}