:root {
  --ink: #04061a;
  --navy: #0a1240;
  --gold-1: #fff4b8;
  --gold-2: #f7c84b;
  --gold-3: #c98a14;
  --gold-text: #2b1a00;
  --red: #d8141c;
  --bw: clamp(176px, 17.5vw, 250px);
  --ph: clamp(20px, calc((100vh - 170px) / 13 - 5px), 40px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: #fff; }
body { font-family: Oswald, 'Arial Narrow', sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- the loader: the studio warms up */
#loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, #0d1650 0%, #04061a 60%); transition: opacity .7s ease; }
#loader.gone { opacity: 0; pointer-events: none; }
.ld-rig { display: grid; justify-items: center; gap: 26px; }
.ld-bulbs { display: flex; gap: 12px; }
.ld-bulbs i { width: 14px; height: 14px; border-radius: 50%; background: #3a2a10; box-shadow: inset 0 -2px 3px rgba(0,0,0,.5); transition: background .25s, box-shadow .25s; }
.ld-bulbs i.on { background: radial-gradient(circle at 40% 35%, #fff, #ffd56a 55%, #e09a1a); box-shadow: 0 0 10px #ffbf3c, 0 0 22px rgba(255,170,40,.6); }
.ld-sign { position: relative; padding: 10px 24px; border: 2px solid #2a2f4a; border-radius: 6px; background: #0a0c18; font-weight: 600; letter-spacing: .32em; font-size: 15px; color: #6c7396; min-width: 180px; text-align: center; }
.ld-onair { display: none; }
#loader.air .ld-standby { display: none; }
#loader.air .ld-onair { display: inline; color: #fff; text-shadow: 0 0 8px #ff3b3b, 0 0 18px #ff2020; }
#loader.air .ld-sign { background: #5a0508; border-color: #ff3b3b; box-shadow: 0 0 24px rgba(255,40,40,.6); color: #fff; }

/* ---------- the show */
#show { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; outline: none; }
#stage.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } }

/* the host's line */
#say { position: absolute; top: calc(14px + var(--safe-t)); left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; width: max-content; max-width: calc(100% - 2 * var(--bw) - 60px); }
#sayText { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(15px, 1.9vw, 24px); color: #fff; text-shadow: 0 0 14px rgba(110,150,255,.85), 0 2px 0 rgba(0,0,0,.6); transition: opacity .3s; }
#sayText:empty { opacity: 0; }
#pips { display: flex; justify-content: center; gap: 6px; margin-top: 8px; min-height: 16px; }
#pips i { width: 20px; height: 15px; display: block; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M7 3V1.6C7 1 7.5.6 8 .6h4c.5 0 1 .4 1 1V3' fill='none' stroke='%23e8ecf5' stroke-width='1.2'/%3E%3Crect x='.6' y='3' width='18.8' height='11.4' rx='1.8' fill='%23d9dee8' stroke='%23fff' stroke-width='.6'/%3E%3Cpath d='M.6 6.5h18.8M.6 10.5h18.8' stroke='%239aa3b5' stroke-width='.6'/%3E%3C/svg%3E"); transition: opacity .35s, transform .35s; filter: drop-shadow(0 0 4px rgba(150,180,255,.6)); }
#pips i.gone { opacity: .16; transform: scale(.8); filter: none; }

/* big words: DEAL / NO DEAL */
#flash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 6; }
#flash span { font-family: Anton, Oswald, sans-serif; font-size: clamp(64px, 15vw, 210px); letter-spacing: .02em; line-height: 1; background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 55%, #ffe38a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px rgba(80,40,0,.55); filter: drop-shadow(0 0 30px rgba(255,190,60,.55)) drop-shadow(0 8px 0 rgba(0,0,0,.5)); animation: flash 1.25s cubic-bezier(.2,.9,.2,1) forwards; white-space: nowrap; }
#flash span.red { background: linear-gradient(180deg, #fff 0%, #ff8080 40%, #d8141c 60%, #ff6a6a 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 30px rgba(255,40,40,.6)) drop-shadow(0 8px 0 rgba(0,0,0,.5)); -webkit-text-stroke: 2px rgba(60,0,0,.6); }
@keyframes flash { 0% { transform: scale(2.4); opacity: 0; } 14% { transform: scale(.94); opacity: 1; } 22% { transform: scale(1.03); } 30%, 72% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }

/* ---------- the button: red DEAL under a flip-up cover */
#console { position: absolute; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); z-index: 4; transition: opacity .35s, transform .35s; }
#console.away { opacity: 0; transform: translate(-50%, 30px); pointer-events: none; }
#rig { width: 172px; height: 150px; perspective: 520px; perspective-origin: 50% 0%; display: grid; place-items: end center; }
.plate { position: relative; width: 168px; height: 108px; border-radius: 22px; background: linear-gradient(180deg, #343a4d 0%, #151925 40%, #0a0c13 100%); box-shadow: 0 2px 0 #4a5168 inset, 0 -3px 0 rgba(0,0,0,.6) inset, 0 18px 30px rgba(0,0,0,.6), 0 0 0 1px #000; transform: rotateX(34deg); transform-style: preserve-3d; transform-origin: 50% 100%; }
.plate::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, transparent, rgba(255,190,70,.5), transparent); opacity: .5; }
.bezel { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: conic-gradient(from 30deg, #f4f6fa, #8d95a6, #eef1f6, #6b7385, #f4f6fa, #9aa2b2, #f4f6fa); box-shadow: 0 0 0 2px #0b0d14, 0 5px 10px rgba(0,0,0,.7); display: grid; place-items: center; transform: translateZ(1px); }
#dealBtn { width: 68px; height: 68px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle at 36% 28%, #ffd0d0 0%, #ff5a5a 14%, #e3161e 42%, #9a0009 78%, #5c0005 100%); box-shadow: inset 0 -6px 10px rgba(0,0,0,.45), inset 0 3px 4px rgba(255,255,255,.35), 0 6px 0 #5a0006, 0 8px 10px rgba(0,0,0,.5); transform: translateY(-5px); transition: transform .08s, box-shadow .08s, filter .3s; filter: brightness(.55) saturate(.8); }
#dealBtn span { font-family: Anton, Oswald, sans-serif; font-size: 17px; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
#rig.armed #dealBtn { filter: none; animation: armed 1.1s ease-in-out infinite; }
@keyframes armed { 50% { box-shadow: inset 0 -6px 10px rgba(0,0,0,.45), inset 0 3px 4px rgba(255,255,255,.35), 0 6px 0 #5a0006, 0 8px 10px rgba(0,0,0,.5), 0 0 34px 8px rgba(255,40,40,.7); } }
#dealBtn:disabled { cursor: default; }
#rig.pressed #dealBtn { transform: translateY(1px); box-shadow: inset 0 -3px 8px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.3), 0 0 0 #5a0006, 0 1px 3px rgba(0,0,0,.5), 0 0 60px 18px rgba(255,60,60,.9); filter: brightness(1.25); animation: none; }
#cover { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; padding: 0; border: 0; background: none; transform-origin: 50% 0%; transform: translateZ(14px) rotateX(0deg); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.4,.5,1); cursor: default; }
#cover span { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 7px; border-radius: 16px; font-weight: 700; font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.8); background: linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(210,225,255,.12) 30%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.2) 100%); border: 1.5px solid rgba(235,242,255,.65); box-shadow: inset 0 0 12px rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.25); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#cover .cb { transform: rotateX(180deg); place-items: start center; padding: 9px 0 0; }
#rig.open #cover { transform: translateZ(14px) rotateX(112deg); cursor: pointer; }
#rig.open #cover span { border-color: rgba(255,255,255,.9); }
#rig.slam #cover { transition: transform .13s cubic-bezier(.6,0,1,.6); transform: translateZ(14px) rotateX(0deg); }
#cover:focus-visible span, #dealBtn:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }

/* ---------- the boards */
.board { position: absolute; top: 50%; width: var(--bw); transform: translateY(-50%); z-index: 3; transition: transform .2s ease-in; }
#boardL { left: calc(14px + var(--safe-l)); }
#boardR { right: calc(14px + var(--safe-r)); }
.board.flipping { transform: translateY(-50%) scaleX(0); }
.board .face { padding: 9px; border-radius: 16px; background: linear-gradient(180deg, rgba(14,22,74,.72), rgba(5,8,32,.8)); border: 1px solid rgba(140,170,255,.22); box-shadow: 0 0 40px rgba(40,80,255,.18), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.board .back { display: none; }
.board.show-back .front { display: none; }
.board.show-back .back { display: block; }
.board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.plaque { display: block; width: 100%; height: var(--ph); padding: 0 10px; border-radius: calc(var(--ph) / 2); border: 1px solid #7a520a; cursor: default; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: min(calc(var(--ph) * .44), calc((var(--bw) - 40px) / 12)); line-height: calc(var(--ph) - 2px); color: var(--gold-text); background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 42%, var(--gold-3) 58%, #f1c04a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 12px rgba(255,190,60,.28); text-shadow: 0 1px 0 rgba(255,240,190,.6); position: relative; }
.plaque.out { color: rgba(205,215,255,.5); background: linear-gradient(180deg, #19214e 0%, #0c1236 100%); border-color: #26306a; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); text-shadow: none; cursor: pointer; }
.plaque.out:hover, .plaque.out:focus-visible { color: #fff; border-color: #6c80ff; outline: none; box-shadow: 0 0 14px rgba(100,130,255,.5); }
.plaque.dealt { box-shadow: 0 0 0 2px var(--red), 0 0 16px rgba(255,40,40,.6); cursor: pointer; }
.plaque.offered { animation: offered 1s ease-in-out infinite; }
@keyframes offered { 50% { box-shadow: 0 0 0 2px #fff, 0 0 24px rgba(255,255,255,.8); filter: brightness(1.15); } }
.plaque.drop { animation: drop .5s ease-in-out; }
@keyframes drop { 0% { transform: scaleY(1); } 45% { transform: scaleY(.06); } 100% { transform: scaleY(1); } }
.plaque.nudge { animation: nudge .3s; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.plain li { min-width: 0; }
.plain button { display: flex; align-items: baseline; gap: 8px; width: 100%; height: var(--ph); padding: 0 8px; border: 0; border-radius: 6px; background: rgba(255,255,255,.04); cursor: pointer; text-align: left; overflow: hidden; }
.plain button:hover, .plain button:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.plain b { font-weight: 500; font-size: calc(var(--ph) * .46); line-height: var(--ph); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.plain small { font-size: calc(var(--ph) * .32); letter-spacing: .08em; color: #9aa6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }

/* corner buttons */
#allBtn, #soundBtn { position: fixed; z-index: 8; top: calc(12px + var(--safe-t)); height: 36px; border-radius: 18px; border: 1px solid rgba(140,170,255,.35); background: rgba(6,10,40,.7); color: #e9ecff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#allBtn { left: calc(14px + var(--safe-l)); padding: 0 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
#allBtn .on-back { display: none; }
#allBtn[aria-pressed="true"] .on-back { display: inline; }
#allBtn[aria-pressed="true"] .on-front { display: none; }
#soundBtn { right: calc(14px + var(--safe-r)); width: 36px; padding: 7px; }
#soundBtn svg { width: 100%; height: 100%; display: block; }
#soundBtn .x { display: none; }
#soundBtn[aria-pressed="false"] .w1, #soundBtn[aria-pressed="false"] .w2 { display: none; }
#soundBtn[aria-pressed="false"] .x { display: block; }
#allBtn:hover, #soundBtn:hover, #allBtn:focus-visible, #soundBtn:focus-visible { border-color: var(--gold-2); outline: none; }

/* ---------- the open case: a lower third */
#reveal { position: absolute; left: 50%; bottom: calc(16px + var(--safe-b)); padding: 18px 10px 0; border-radius: 40px; background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(2,3,16,.82), rgba(2,3,16,.5) 55%, rgba(2,3,16,0) 75%); transform: translateX(-50%); width: min(640px, calc(100% - 2 * var(--bw) - 50px)); text-align: center; z-index: 5; animation: rise .4s cubic-bezier(.2,.9,.3,1); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 18px); } }
.rv-case { margin: 0 0 2px; font-weight: 500; letter-spacing: .3em; font-size: 12px; color: var(--gold-2); text-transform: uppercase; }
.rv-title, .of-title { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; font-size: clamp(26px, 3.6vw, 46px); background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 56%, #ffe08a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,180,40,.35)); }
.rv-client, .of-client { margin: 4px 0 0; font-size: 13px; letter-spacing: .22em; color: #aab3dc; text-transform: uppercase; }
.rv-btns, .sw-btns { display: flex; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pill, #rvWork, #rvNext, #swKeep, #swSwap, #again { min-height: 44px; padding: 0 24px; border-radius: 22px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; cursor: pointer; }
#rvWork, #swKeep, #again { border: 1px solid #7a520a; color: var(--gold-text); background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 60%, #f1c04a 100%); box-shadow: 0 0 16px rgba(255,190,60,.35); }
#rvNext, #swSwap { border: 1px solid rgba(160,185,255,.6); color: #fff; background: rgba(8,14,52,.75); }
#rvWork:hover, #swKeep:hover, #again:hover { filter: brightness(1.08); }
#rvNext:hover, #swSwap:hover { border-color: #fff; }
#rvWork:focus-visible, #rvNext:focus-visible, #swKeep:focus-visible, #swSwap:focus-visible, #again:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- the banker's offer, on the big screen */
#offer { position: absolute; left: 50%; top: calc(50% - 70px); transform: translate(-50%, -50%); width: min(520px, calc(100% - 2 * var(--bw) - 60px)); padding: 16px 18px 18px; text-align: center; border-radius: 18px; background: linear-gradient(180deg, rgba(8,12,44,.92), rgba(3,5,22,.94)); border: 1px solid rgba(255,200,80,.55); box-shadow: 0 0 0 4px rgba(255,200,80,.08), 0 0 60px rgba(255,170,40,.25), 0 30px 60px rgba(0,0,0,.6); z-index: 5; animation: tune .55s cubic-bezier(.2,.9,.3,1); }
@keyframes tune { 0% { opacity: 0; transform: translate(-50%, -50%) scaleY(.02) scaleX(1.1); filter: brightness(3); } 40% { opacity: 1; transform: translate(-50%, -50%) scaleY(.02) scaleX(1); } 100% { transform: translate(-50%, -50%) scale(1); filter: none; } }
.of-label { margin: 0 0 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; color: var(--gold-2); }
.of-pic { display: grid; place-items: center; background: #000; border-radius: 8px; padding: 0; overflow: visible; }
.of-pic img { display: block; max-width: 100%; height: auto; max-height: 34vh; max-height: 34svh; object-fit: contain; border-radius: 6px; }
.of-title { margin-top: 12px; font-size: clamp(24px, 3vw, 38px); }

#swap, #done { position: absolute; left: 50%; bottom: calc(176px + var(--safe-b)); transform: translateX(-50%); text-align: center; z-index: 5; animation: rise .4s cubic-bezier(.2,.9,.3,1); width: max-content; max-width: 92%; }
#done { bottom: calc(24px + var(--safe-b)); }
.sw-q { margin: 0; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(16px, 2vw, 24px); text-shadow: 0 0 14px rgba(110,150,255,.85); }

/* ---------- the case study */
#study { position: fixed; inset: 0; z-index: 50; background: rgba(2,3,14,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.st-panel { position: relative; height: 100%; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; }
.st-head { position: relative; padding: calc(18px + var(--safe-t)) 64px 14px; text-align: center; border-bottom: 1px solid rgba(255,200,80,.3); }
.st-case { margin: 0; font-weight: 500; letter-spacing: .3em; font-size: 12px; color: var(--gold-2); text-transform: uppercase; min-height: 1em; }
#stTitle { margin: 2px 0 0; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; font-size: clamp(24px, 3.4vw, 42px); background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 56%, #ffe08a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-client { margin: 4px 0 0; font-size: 12px; letter-spacing: .22em; color: #aab3dc; text-transform: uppercase; }
.st-x { position: absolute; top: calc(14px + var(--safe-t)); right: 14px; width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(255,200,80,.5); background: rgba(10,14,50,.8); color: #fff; font-size: 18px; cursor: pointer; }
.st-x:hover, .st-x:focus-visible { border-color: #fff; outline: none; }
.st-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 22px 22px calc(40px + var(--safe-b)); }
#stBody { --ab-fg: #eef0ff; --ab-muted: #9ea7d4; --ab-accent: var(--gold-2); --ab-chrome: 150px; font-family: Oswald, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.5; }
#stBody .ab-lede { font-size: 19px; color: #fff; font-weight: 400; max-width: 760px; margin: 0 auto; text-align: center; }
#stBody .ab-heading { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); font-size: 15px; }
#stBody .ab-text { color: #d9ddf5; max-width: 760px; }
#stBody .ab-credits { white-space: pre-line; text-align: center; }
#stBody .ab-frame { border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,200,80,.25); }

/* ---------- portrait: the stage on top, the boards underneath */
@media (max-aspect-ratio: 1/1) {
  :root { --bw: 50%; --ph: clamp(19px, calc((100svh - 470px) / 13 - 4px), 27px); }
  body { overflow-y: auto; }
  #show { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; min-height: 100svh; }
  #stage { position: relative; inset: auto; grid-column: 1 / -1; height: max(420px, calc(100svh - (var(--ph) + 4px) * 13 - 22px)); }
  .board { position: relative; top: auto; left: auto !important; right: auto !important; width: auto; transform: none; padding: 0 4px calc(6px + var(--safe-b)); }
  #boardL { padding-left: calc(6px + var(--safe-l)); }
  #boardR { padding-right: calc(6px + var(--safe-r)); }
  .board.flipping { transform: scaleX(0); }
  .board .face { padding: 5px; border-radius: 10px; }
  .board ol { gap: 4px; }
  .plaque { padding: 0 6px; letter-spacing: .02em; font-size: calc(var(--ph) * .45); }
  #say { top: calc(12px + var(--safe-t)); max-width: calc(100% - 200px); }
  #sayText { font-size: 14px; letter-spacing: .12em; line-height: 36px; }
  #pips { margin-top: 2px; gap: 4px; }
  #pips i { width: 16px; height: 12px; }
  #allBtn { padding: 0 12px; font-size: 11px; letter-spacing: .1em; }
  #reveal { width: calc(100% - 24px); bottom: 12px; }
  .rv-btns { margin-top: 10px; }
  #offer { width: calc(100% - 28px); top: calc(54px + var(--safe-t)); transform: translateX(-50%); padding: 10px 12px 12px; animation-name: tune2; }
  @keyframes tune2 { 0% { opacity: 0; transform: translateX(-50%) scaleY(.02) scaleX(1.1); filter: brightness(3); } 40% { opacity: 1; transform: translateX(-50%) scaleY(.02); } 100% { transform: translateX(-50%) scale(1); filter: none; } }
  .of-label { margin-bottom: 8px; font-size: 11px; }
  .of-pic img { max-height: 19svh; }
  .of-title { margin-top: 8px; font-size: 26px; }
  .of-client { font-size: 11px; }
  #rig { transform: scale(.82); transform-origin: 50% 100%; }
  #swap { bottom: 150px; }
  #done { bottom: 14px; }
}
/* ---------- a phone on its side: the boards start under the corner buttons and fit the height */
@media (min-aspect-ratio: 1/1) and (max-height: 470px) {
  :root { --ph: calc((100vh - 136px) / 13); --ph: calc((100svh - 136px) / 13); }
  .board { top: calc(50px + var(--safe-t)); transform: none; }
  .board.flipping { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  #stage.shake { animation: none; }
  #flash span { animation-duration: 1.6s; }
}