/* Cisco Live palette (from ciscolive.com) */
:root {
  --navy: #07182D;
  --navy-2: #0D274D;
  --blue: #0A60FF;
  --blue-2: #3070E7;
  --cyan: #00BCEB;
  --magenta: #FF007F;
  --orange: #FF9000;
  --green: #6EBE4A;
  --ink: #FFFFFF;
  --ink-2: rgb(255 255 255 / 0.72);
  --glass: rgb(7 24 45 / 0.62);
  --line: rgb(255 255 255 / 0.14);
  --grad-hot: linear-gradient(90deg, var(--magenta), var(--orange));
  --grad-cool: linear-gradient(90deg, var(--blue-2), var(--cyan));
  --grad-mix: linear-gradient(90deg, var(--cyan), var(--magenta));
  --key: 10 96 255; /* set per track from its musical key */
  --key-2: 0 188 235;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--navy);
  color: var(--ink);
  font: 16px/1.4 "CiscoSansTT", "CiscoSans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

/* Beat-driven glow over navy. crowd.js sets --glow 0..1 every frame. */
#bg {
  --glow: 0.2;
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 45% at 50% 38%, rgb(var(--key) / calc(var(--glow) * 0.95)), transparent 70%),
    radial-gradient(70% 50% at 15% 100%, rgb(var(--key-2) / calc(var(--glow) * 0.55)), transparent 70%),
    radial-gradient(70% 50% at 85% 0%, rgb(255 0 127 / calc(var(--glow) * 0.35)), transparent 70%),
    var(--navy);
}
#flash { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; }

/* Gradient-border surface, the same technique ciscolive.com uses for its buttons and cards. */
.gb {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--grad-cool) border-box;
}

.grad { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- brand + top bar --- */
.brandbar { padding: 12px 0 0; }
.wordmark { font-size: 15px; letter-spacing: .14em; font-weight: 300; }
@media (max-width: 600px) { .wordmark .x { display: none; } .wordmark .sub { display: block; font-size: 13px; margin-top: 2px; } }
.wordmark b { font-weight: 800; }
.wordmark .x { color: var(--cyan); margin: 0 2px; }
.wordmark .sub { letter-spacing: .02em; font-weight: 500; color: var(--ink-2); }
.wordmark.center { text-align: center; margin-bottom: 18px; font-size: 18px; }

.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.spacer { flex: 1; }
.badge { font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.badge.test { color: var(--orange); border-color: rgb(255 144 0 / .55); }
.badge.live { color: #fff; background: var(--magenta); border-color: var(--magenta); }
.pill { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5a6b80; }
.dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }

/* --- now playing card (flips to the story) --- */
main { flex: 1; display: grid; place-items: center; position: relative; min-height: 0; }
.card { width: min(100%, 420px); aspect-ratio: 3 / 4; max-height: 100%; position: relative; perspective: 1200px; cursor: pointer; }
.face {
  position: absolute; inset: 0; border-radius: 24px; padding: 20px;
  border: 1.5px solid transparent;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
.front { background: linear-gradient(rgb(7 24 45 / .82), rgb(7 24 45 / .82)) padding-box, var(--grad-cool) border-box; }
.back { background: linear-gradient(rgb(7 24 45 / .9), rgb(7 24 45 / .9)) padding-box, var(--grad-hot) border-box; transform: rotateY(180deg); justify-content: center; }
.card.flipped .front { transform: rotateY(-180deg); }
.card.flipped .back { transform: rotateY(0); }

.art {
  flex: 1; min-height: 0; border-radius: 16px;
  background-color: var(--navy-2);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  font-size: clamp(48px, 18vw, 96px); font-weight: 800; letter-spacing: -.02em; color: rgb(255 255 255 / .9);
}
.art {
  --art-fallback:
    radial-gradient(circle at 30% 25%, rgb(var(--key)) 0, transparent 60%),
    radial-gradient(circle at 80% 80%, rgb(var(--key-2)) 0, transparent 55%),
    linear-gradient(135deg, var(--navy-2), var(--navy));
  background-image: var(--art-fallback);
}
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--cyan); font-weight: 600; }
.back .eyebrow { color: var(--orange); }
h1 { margin: 2px 0 0; font-size: clamp(20px, 6vw, 28px); line-height: 1.15; font-weight: 700; }
.artist { color: var(--ink-2); font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid var(--line); }
.chip:empty { display: none; }
.progress { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .12); margin-top: 12px; overflow: hidden; }
#progress { height: 100%; width: 0; background: var(--grad-cool); }
.beats { display: flex; gap: 6px; margin-top: 10px; }
.beats i { flex: 1; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .12); transition: background .08s; }
.beats i.on { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.beats i:first-child.on { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
.back p { font-size: clamp(18px, 5.2vw, 24px); line-height: 1.35; margin: 8px 0; font-weight: 500; }
.foot { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.foot a { color: var(--cyan); }

/* --- drop countdown --- */
.countdown {
  position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; text-align: center; pointer-events: none;
  background: radial-gradient(closest-side, rgb(7 24 45 / .92), rgb(7 24 45 / .75) 70%, transparent);
}
.countdown .label { font-size: 18px; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.countdown .num {
  font-size: clamp(120px, 45vw, 320px); font-weight: 900; line-height: 1;
  background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown[hidden] { display: none; }

/* --- Cloud Controlled Networking status chip (big screen only) --- */
.netchip { display: none; }
body[data-view="screen"] .netchip:not([hidden]) {
  display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-top: 12px;
  font-size: 14px; padding: 6px 14px; border-radius: 999px; color: var(--ink-2);
  border: 1.5px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--grad-cool) border-box;
}
.netchip b { color: var(--ink); font-weight: 700; }
.netchip i { width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; }
.netchip i.up { background: var(--green); box-shadow: 0 0 8px var(--green); }
.netchip i.down { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

/* --- hype + controls --- */
.hypebar { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .1); margin: 12px 0 8px; overflow: hidden; }
#hypefill { height: 100%; width: 0; background: var(--grad-hot); transition: width .9s; }
.controls { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 16px; }
button {
  font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
  border-radius: 999px; padding: 12px 18px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--grad-cool) border-box;
}
button.big { flex: 1; font-size: 18px; font-weight: 700; border: 0; background: var(--grad-hot); }
button[aria-pressed="true"] { background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--grad-hot) border-box; color: var(--magenta); }
button.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.06); } }
details { flex-basis: 100%; background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 14px; }
details ol { margin: 8px 0 0; padding-left: 20px; max-height: 30vh; overflow: auto; }
details small { color: var(--ink-2); }

.toast {
  position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 84px); z-index: 60;
  padding: 12px 14px; border-radius: 14px; font-size: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--navy-2), var(--navy-2)) padding-box, var(--grad-mix) border-box;
}
.toast[hidden] { display: none; }

/* --- join overlay --- */
.join { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgb(7 24 45 / .9); backdrop-filter: blur(8px); }
.join[hidden] { display: none; }
.joinbox { max-width: 380px; text-align: center; }
.joinbox h2 { font-size: 28px; margin: 0 0 8px; font-weight: 800; }
.joinbox .small { font-size: 12px; color: var(--ink-2); }
.check { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 16px 0 4px; }
.check input { accent-color: var(--magenta); width: 18px; height: 18px; }
.joinbox button { width: 100%; margin-top: 12px; }

/* --- tap to sync --- */
.syncdots { font-size: 22px; letter-spacing: 6px; color: var(--cyan); margin: 8px 0; }
.taparea { height: 38vh; max-height: 260px; font-size: 40px; border-radius: 28px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.taparea:active { transform: scale(.98); }
.row2 { display: flex; gap: 8px; }
.row2 button { flex: 1; }

/* --- DJ fx --- */
body.fx-ripple main::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--cyan); transform: translate(-50%, -50%); animation: ripple 1s ease-out forwards; pointer-events: none;
}
@keyframes ripple { to { width: 200vmax; height: 200vmax; opacity: 0; } }
body.fx-glitch .card { animation: glitch .5s steps(2) 2; }
@keyframes glitch { 25% { transform: translate(-6px, 2px) skewX(4deg); filter: hue-rotate(90deg); } 75% { transform: translate(5px, -3px) skewX(-3deg); filter: hue-rotate(-90deg); } }

/* --- shake-to-hype game --- */
.shakepill {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1.5px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--grad-hot) border-box;
}
.shakepill[hidden] { display: none; }
.spbar { flex: 1; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .12); overflow: hidden; }
.spbar i, .smbar i { display: block; height: 100%; width: 0; background: var(--grad-hot); transition: width .8s; }
#spnext { color: var(--orange); white-space: nowrap; }

body[data-view="crowd"] .side { display: none; }
.shakemeter { display: none; }
/* The side column never grows past the card's height: the QR code shrinks to fit. */
body[data-view="screen"] main { min-height: 0; }
body[data-view="screen"] .side { display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.6vh, 16px); align-items: stretch; height: 100%; min-height: 0; }
body[data-view="screen"] .shakemeter { flex: none; }
body[data-view="screen"] .qr:not([hidden]) { flex: 1 1 auto; min-height: 0; max-height: 400px; gap: clamp(6px, 1.2vh, 12px); padding: clamp(10px, 2vh, 20px); }
body[data-view="screen"] .qrcode { flex: 1 1 0; min-height: 80px; display: flex; justify-content: center; }
body[data-view="screen"] .qrcode svg { width: auto; height: 100%; max-width: 100%; max-height: 260px; }
body[data-view="screen"] .shakemeter {
  display: block; padding: 16px 20px; border-radius: 24px; width: clamp(180px, 20vw, 300px);
  border: 1.5px solid transparent; background: linear-gradient(rgb(7 24 45 / .85), rgb(7 24 45 / .85)) padding-box, var(--grad-mix) border-box;
}
.shakemeter.hot { animation: shakepulse 1.2s ease-in-out infinite; }
@keyframes shakepulse { 50% { box-shadow: 0 0 40px rgb(255 0 127 / .45); } }
.smhead { font-size: clamp(13px, 1.1vw, 16px); text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); font-weight: 700; }
.smcount { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
#smnum { font-size: clamp(44px, 5vw, 84px); font-weight: 900; line-height: 1; background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.smcount small { color: var(--ink-2); font-size: clamp(12px, 1vw, 15px); }
.smbar { height: 10px; border-radius: 5px; background: rgb(255 255 255 / .1); overflow: hidden; }
.smfoot { display: flex; justify-content: space-between; margin-top: 8px; font-size: clamp(12px, 1vw, 15px); font-weight: 600; }
#smnext { color: var(--orange); }
#smrec { color: var(--ink-2); }

.milestone { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; text-align: center; pointer-events: none; }
.milestone[hidden] { display: none; }
.milestone .burst {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255 144 0 / .9), rgb(255 0 127 / .6) 40%, transparent 70%);
}
.milestone.go .burst { animation: burst 1.4s ease-out forwards; }
@keyframes burst { to { width: 260vmax; height: 260vmax; opacity: 0; } }
.mnum {
  position: relative; font-size: clamp(110px, 38vw, 380px); font-weight: 900; line-height: .9;
  background: linear-gradient(180deg, #fff, var(--orange) 60%, var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgb(0 0 0 / .5));
}
.milestone.go .mnum { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
.mlabel { position: relative; font-size: clamp(22px, 6vw, 56px); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.msub { position: relative; margin-top: 8px; font-size: clamp(16px, 4vw, 28px); color: var(--cyan); font-weight: 600; }
.milestone.final .mlabel { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.milestone { background: radial-gradient(circle, rgb(7 24 45 / .55), rgb(7 24 45 / .92)); }

/* --- booth visualisation (big screen only) --- */
.booth { display: none; }
body[data-view="screen"] .booth { display: block; position: relative; margin-top: 14px; }
.boothgrid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(10px, 1.4vw, 24px); height: clamp(120px, 17vh, 200px); }
.cdj, .mixer {
  border-radius: 18px; padding: 10px 14px; min-width: 0;
  border: 1.5px solid transparent; background: linear-gradient(rgb(7 24 45 / .88), rgb(7 24 45 / .88)) padding-box, var(--grad-cool) border-box;
}
.cdj { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); transition: opacity .3s; }
.cdj[data-deck="2"] { flex-direction: row-reverse; }
.cdj.offline { opacity: .35; filter: grayscale(1); }
.jogwrap { position: relative; height: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.jog { width: 82%; aspect-ratio: 1; border-radius: 50%; position: relative; background: radial-gradient(circle, #0D274D 0 38%, #1a3a66 39% 41%, #0b1f3a 42% 100%); border: 2px solid rgb(255 255 255 / .18); }
.jog i { position: absolute; left: 50%; top: 6%; width: 4px; height: 22%; margin-left: -2px; border-radius: 2px; background: rgb(255 255 255 / .5); }
.jog.live { border-color: var(--cyan); box-shadow: 0 0 18px rgb(0 188 235 / .35); }
.jog.live i { background: var(--cyan); }
.decklabel { position: absolute; bottom: -2px; font-size: clamp(10px, .8vw, 13px); letter-spacing: .12em; color: var(--ink-2); }
.onair { position: absolute; top: -2px; font-size: clamp(9px, .65vw, 11px); font-weight: 800; letter-spacing: .1em; padding: 1px 6px; border-radius: 4px; color: rgb(255 255 255 / .25); border: 1px solid rgb(255 255 255 / .15); }
.onair.lit { color: #fff; background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 12px var(--magenta); }
.cdjctl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pads { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.pad, .btn {
  display: grid; place-items: center; text-align: center; border-radius: 6px; font-weight: 800; letter-spacing: .05em;
  font-size: clamp(9px, .72vw, 13px); line-height: 1.1; padding: 5px 2px; color: rgb(255 255 255 / .45);
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); transition: background .25s, color .25s, box-shadow .25s;
}
.btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.btn { padding: 8px 2px; }
.btn.lit { color: #fff; background: rgb(0 188 235 / .35); border-color: var(--cyan); box-shadow: 0 0 12px rgb(0 188 235 / .5); }
.btn.play.lit { background: rgb(110 190 74 / .35); border-color: var(--green); box-shadow: 0 0 12px rgb(110 190 74 / .5); }
.btn.fx.lit { background: rgb(255 0 127 / .35); border-color: var(--magenta); box-shadow: 0 0 14px rgb(255 0 127 / .6); }
.hit { animation: hit .5s ease-out; }
@keyframes hit { 0% { background: #fff; color: var(--navy); box-shadow: 0 0 26px #fff; transform: scale(1.12); } }
.pad.hit { animation: padhit .6s ease-out; }
@keyframes padhit { 0% { background: var(--orange); color: var(--navy); box-shadow: 0 0 22px var(--orange); transform: scale(1.15); } }

.vfader { position: relative; width: 10px; height: 100%; border-radius: 5px; background: rgb(255 255 255 / .1); flex: none; }
.vfader i { position: absolute; left: 50%; width: 26px; height: 12px; margin: 0 0 -6px -13px; border-radius: 3px; background: #dfe7f3; box-shadow: 0 2px 6px rgb(0 0 0 / .5); transition: bottom .09s linear; }
.vfader.hit { animation: none; }
.vfader.hit i, .xfader.hit i { animation: thumbhit .5s ease-out; }
@keyframes thumbhit { 0% { background: var(--cyan); box-shadow: 0 0 16px var(--cyan); } }
.tempo { height: 80%; }

.mixer { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.chs { display: flex; gap: clamp(10px, 1.2vw, 22px); align-items: stretch; flex: 1; min-height: 0; }
.ch { display: grid; grid-template-columns: auto auto; grid-template-rows: repeat(4, 1fr) auto; grid-auto-flow: column; gap: 2px 10px; align-items: center; justify-items: center; }
.ch .chfader { grid-row: 1 / 5; grid-column: 2; height: 100%; }
.ch b { grid-row: 5; grid-column: 1 / 3; font-size: clamp(9px, .7vw, 12px); letter-spacing: .12em; color: var(--ink-2); }
.knob { display: flex; align-items: center; gap: 5px; }
.knob i { position: relative; width: clamp(16px, 1.3vw, 24px); aspect-ratio: 1; border-radius: 50%; background: #13335c; border: 1.5px solid rgb(255 255 255 / .25); transition: transform .09s linear; }
.knob i::after { content: ""; position: absolute; left: 50%; top: 1px; width: 2px; height: 40%; margin-left: -1px; border-radius: 1px; background: #fff; }
.knob span { font-size: clamp(8px, .6vw, 11px); color: var(--ink-2); letter-spacing: .06em; width: 4.2em; }
.knob.off i { border-color: var(--orange); box-shadow: 0 0 10px rgb(255 144 0 / .55); }
.knob.filter.off i { border-color: var(--magenta); box-shadow: 0 0 12px rgb(255 0 127 / .6); }
.knob.hit { animation: none; }
.mixmid { display: grid; place-items: center; }
.xfader { position: relative; width: 70%; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .1); }
.xfader i { position: absolute; top: 50%; width: 14px; height: 22px; margin: -11px 0 0 -7px; border-radius: 3px; background: #dfe7f3; transition: left .09s linear; }
.xfader.hit { animation: none; }

.ticker {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); z-index: 5; white-space: nowrap; pointer-events: none;
  font-size: clamp(16px, 1.6vw, 28px); font-weight: 800; letter-spacing: .06em; padding: 6px 18px; border-radius: 999px;
  border: 1.5px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--grad-hot) border-box;
  opacity: 0; transition: opacity .4s;
}
.ticker.pop { opacity: 1; animation: tickpop .35s cubic-bezier(.2, 1.5, .4, 1); }
.ticker.gone { opacity: 0; }
@keyframes tickpop { from { transform: translateX(-50%) scale(.7); } }

/* Short screens (≤ 820px tall): compact shake meter so the QR code stays scannable. */
@media (max-height: 820px) {
  body[data-view="screen"] .shakemeter { padding: 10px 14px; }
  body[data-view="screen"] .smhead { display: none; }
  body[data-view="screen"] #smnum { font-size: clamp(32px, 4vw, 52px); }
  body[data-view="screen"] .smcount { margin: 0 0 6px; }
  body[data-view="screen"] .qrlabel { font-size: 15px; }
  body[data-view="screen"] .qrlabel br { display: none; }
}

/* --- QR code (big screen only) --- */
.qr { display: none; }
body[data-view="screen"] .qr:not([hidden]) {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 20px; border-radius: 24px; width: clamp(180px, 20vw, 300px);
  border: 1.5px solid transparent;
  background: linear-gradient(rgb(7 24 45 / .85), rgb(7 24 45 / .85)) padding-box, var(--grad-hot) border-box;
}
.qrlabel { font-size: clamp(16px, 1.6vw, 24px); font-weight: 700; line-height: 1.2; }
.qrcode { width: 100%; }
.qrcode svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.qrurl { font-size: clamp(13px, 1.1vw, 17px); color: var(--cyan); font-weight: 600; letter-spacing: .02em; }
.qrurl small { display: block; margin-top: 2px; font-size: .8em; color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; }

/* --- big screen view --- */
body[data-view="screen"] { padding: 24px 40px; }
body[data-view="screen"] .controls,
body[data-view="screen"] #section { display: none; }
body[data-view="screen"] .wordmark { font-size: 22px; }
body[data-view="screen"] main { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.5vw, 40px); }
/* The card fills the space left of the side column; the art is sized from the card's own box
   (container units) so it's always square and always inside the frame. */
body[data-view="screen"] .card { flex: 1 1 auto; width: auto; height: 100%; max-width: 1400px; aspect-ratio: auto; container-type: size; }
body[data-view="screen"] .front { flex-direction: row; align-items: center; gap: clamp(16px, 2.5cqw, 40px); padding: clamp(16px, 2.2cqh, 28px); }
body[data-view="screen"] .front .art { flex: none; width: min(calc(100cqh - 2 * clamp(16px, 2.2cqh, 28px)), 52cqw); height: auto; aspect-ratio: 1; font-size: clamp(48px, 12cqh, 140px); }
body[data-view="screen"] .front .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
body[data-view="screen"] h1 { overflow-wrap: anywhere; }
body[data-view="screen"] h1 { font-size: clamp(28px, 5.5cqw, 64px); }
body[data-view="screen"] .artist { font-size: clamp(18px, 3cqw, 32px); }
body[data-view="screen"] .back p { font-size: clamp(22px, 3.6cqw, 44px); }

@media (prefers-reduced-motion: reduce) {
  .face { transition: none; }
  .milestone.go .burst, .milestone.go .mnum, .shakemeter.hot, .hit, .ticker.pop { animation: none; }
  body.fx-ripple main::after, body.fx-glitch .card { animation: none; }
}