/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · HOME: "HOW IT WORKS."
   One scene, every device a real capture of the app (owner 24 Oct 19:44): the LED wall behind, running off the edge,
   the Mac with the iPhone in front of it, the stream, and an iPhone with the post in a social feed.
   The whole section fits one screen on a laptop and on a phone (owner 24 Oct 20:20). A device turned off goes.
   ============================================================================ */
/* Room above and below, so the section stands apart from its neighbours (owner 24 Oct 19:41). */
.sch-sec.sim { padding-top: clamp(64px, 8vw, 128px); padding-bottom: clamp(80px, 10vw, 160px); overflow-x: clip; }
.sim__head { margin-bottom: clamp(16px, 1.6vw, 24px); }
.sim__head .sch-h2 { text-wrap: balance; }

/* the switches: one rail, the devices that run lit in white, the ones turned off sunk into it */
.sim__bar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: clamp(20px, 2.4vw, 36px); }
/* the line that says the switches are there to press (owner 24 Oct 20:02) */
.sim__hint { margin: 0; font-size: clamp(15px, 1.1vw, 17px); color: var(--wr-black-72); text-align: center; }
.sim__toggles { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; border-radius: var(--wr-radius-pill, 999px); background: var(--wr-black-06); box-shadow: inset 0 1px 2px var(--wr-black-08); }
.sim-t { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 14px; border: 0; border-radius: var(--wr-radius-pill, 999px); background: transparent; font: inherit; font-size: clamp(14px, 1.05vw, 15px); font-weight: 700; letter-spacing: -.005em; color: var(--wr-black-50); cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.sim-t svg { width: 18px; height: 18px; flex: none; }
.sim-t i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background .25s ease, box-shadow .25s ease; }
.sim-t:hover { color: var(--wr-black-72); }
.sim-t.is-on { background: var(--wr-white); color: var(--wr-black); box-shadow: var(--wr-shadow-sm); }
.sim-t.is-on i { background: var(--wr-grad-diag); box-shadow: none; }
.sim-t:disabled { cursor: default; }
.sim-t:focus-visible { outline: 2px solid var(--wr-orange); outline-offset: 2px; }
.sim:not(.is-js) .sim__bar, .sim:not(.is-js) .sim__opts { visibility: hidden; }

/* the scene: one frame, each device placed in it by share of its width and height */
.sim__stage { position: relative; aspect-ratio: 1290 / 470; margin-inline: auto; }
.sim__dev { position: absolute; margin: 0; display: flex; flex-direction: column; gap: 8px; transition: opacity .3s ease; }
.sim__dev figcaption { font-size: 12.5px; font-weight: 700; color: var(--wr-black-72); text-align: center; white-space: nowrap; }
.no-wall .sim__wall, .no-tv .sim__tv, .no-pad .sim__phone, .no-post .sim__post, .no-sheet .sim__sheet { opacity: 0; visibility: hidden; }
/* owner 24 Oct 20:31, 20:58: back to front, left to right: the wall behind (off the left edge), the Mac in the middle with
   the scoring iPhone, larger, at its front corner, the stream at the back right, the feed in front of it and the A4 sheet
   beside the feed, running off the right edge */
.sim__wall { left: -9%; top: 0; width: 42%; z-index: 0; }
.sim__laptop { left: 25%; bottom: 0; width: 37%; z-index: 2; }
.sim__phone { left: 18.5%; bottom: 0; width: 11%; z-index: 4; }
.sim__tv { left: 54%; top: 0; width: 28%; z-index: 1; }
/* the stream's titles sit above it, so the feed in front never covers them; the switch names the stream */
.sim__tv .sim__opts { order: -1; flex-wrap: nowrap; }
.sim__tv .sim-o { padding: 4px 12px; font-size: 11px; }
.sim__tv figcaption { display: none; }
.sim__post { left: 80%; bottom: 0; width: 12.5%; z-index: 4; }
.sim__sheet { left: 91.5%; bottom: 0; width: 16%; z-index: 3; }
.sim__wall figcaption { text-align: left; padding-left: 20%; }

/* the result sheet (owner 24 Oct 20:58: "a full element"): the app's own A4 page, whole, lying a little askew */
.sim-paper { position: relative; aspect-ratio: 210 / 297; overflow: hidden; background: #fff; border-radius: 2px; transform: rotate(2.5deg); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 22px 44px var(--wr-black-15); }
.sim-paper__page { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.sim__sheet figcaption { text-align: left; }

/* every picture is a real capture; a step or a package swaps it with a short fade */
.sim-shot { display: block; width: 100%; height: 100%; }
.sim-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: opacity .18s ease; }
.sim-shot.is-swap img { opacity: 0; }

/* the LED wall: square cabinets in a heavy black frame on two legs, not a TV */
.sim-led { position: relative; padding-bottom: clamp(14px, 1.6vw, 24px); }
.sim-led__panel { position: relative; aspect-ratio: 16 / 9; padding: clamp(6px, .8vw, 12px); border-radius: 3px; background: #050505; box-shadow: 0 0 0 1px #2c2c2c, 0 30px 60px var(--wr-black-15); }
.sim-led__panel .sim-shot { position: relative; }
.sim-led__panel .sim-shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(0,0,0,.55) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.55) 1px, transparent 1px); background-size: 25% 33.34%; }
.sim-led__legs { position: absolute; left: 14%; right: 14%; bottom: 0; height: clamp(14px, 1.6vw, 24px); border-left: clamp(5px, .5vw, 8px) solid #1a1a1a; border-right: clamp(5px, .5vw, 8px) solid #1a1a1a; }
.sim-led__legs::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: 0; height: 4px; border-radius: 2px; background: #1a1a1a; }

/* the stream: a thin black bezel, as on a real screen, and its graphics packages */
.sim-scr { aspect-ratio: 16 / 9; padding: clamp(3px, .3vw, 5px); border-radius: 9px; background: #0b0b0b; box-shadow: 0 0 0 1px #2a2a2a, 0 20px 44px var(--wr-black-15); }
.sim-scr .sim-shot { border-radius: 6px; overflow: hidden; }
.sim__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 3px; margin: 0 auto; border-radius: var(--wr-radius-pill, 999px); background: var(--wr-black-06); }
.sim__opts[hidden] { display: none; }
.sim-o { flex: none; padding: 5px 12px; border: 0; border-radius: var(--wr-radius-pill, 999px); background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--wr-black-50); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.sim-o:hover { color: var(--wr-black-72); }
.sim-o.is-on { background: var(--wr-white); color: var(--wr-black); box-shadow: var(--wr-shadow-sm); }
.sim-o:focus-visible { outline: 2px solid var(--wr-orange); outline-offset: 2px; }

/* the Mac with the Scoreboard */
.sim-lap__screen { aspect-ratio: 16 / 10; border-radius: 12px 12px 3px 3px; padding: clamp(5px, .6vw, 10px); background: #0b0b0b; box-shadow: 0 0 0 2px #2a2a2a, 0 30px 60px var(--wr-black-15); }
.sim-lap__screen .sim-shot { border-radius: 3px; overflow: hidden; }
.sim-lap__base { height: clamp(7px, .8vw, 11px); margin: 0 -6%; border-radius: 0 0 12px 12px; background: linear-gradient(#d6d6d6, #a3a3a3); }

/* the iPhones */
.sim-ph { aspect-ratio: 780 / 1588; border-radius: clamp(12px, 1.4vw, 22px); padding: clamp(3px, .3vw, 5px); background: #0b0b0b; box-shadow: 0 0 0 2px #2a2a2a, 0 22px 46px rgba(0,0,0,.28); overflow: hidden; }
.sim-ph > .sim-shot { border-radius: clamp(9px, 1.1vw, 18px); overflow: hidden; }

/* the post in a social feed: the account, the picture, the actions, the caption (no app's name or mark) */
.sim-ph--feed { display: flex; flex-direction: column; }
.sim-ph--feed > .sim-shot { height: auto; aspect-ratio: 4 / 5; border-radius: 0; flex: none; }
.sim-feed { padding: 0 6%; color: #111; font-size: clamp(6.5px, .62vw, 10px); line-height: 1.3; background: #fff; }
.sim-feed:first-child { border-radius: clamp(9px, 1.1vw, 18px) clamp(9px, 1.1vw, 18px) 0 0; padding-top: 9%; }
.sim-feed:last-child { flex: 1; border-radius: 0 0 clamp(9px, 1.1vw, 18px) clamp(9px, 1.1vw, 18px); }
.sim-feed__top { padding-bottom: 5%; font-size: 1.35em; font-weight: 800; letter-spacing: -.02em; }
.sim-feed__who { display: flex; align-items: center; gap: 5%; padding-bottom: 5%; }
.sim-feed__who > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sim-feed__who i { font-style: normal; color: var(--wr-black-50); font-size: .9em; }
.sim-feed__av { display: grid; place-items: center; width: 2.6em; height: 2.6em; flex: none; border-radius: 50%; background: var(--wr-black); color: #fff; font-size: .8em; font-weight: 800; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--wr-orange); }
.sim-feed__more { color: var(--wr-black-50); letter-spacing: .05em; }
.sim-feed__acts { display: flex; gap: 7%; padding: 5% 0 3%; }
.sim-feed__acts span { width: 1.9em; height: 1.9em; }
.sim-feed__acts svg { width: 100%; height: 100%; fill: none; stroke: #111; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sim-feed__acts .is-liked svg { fill: var(--wr-orange); stroke: var(--wr-orange); }
.sim-feed__mark { margin-left: auto; }
.sim-feed__cap { margin: 0; }
.sim-feed__cap b { margin-right: .3em; }

/* the steps, once there is more than one real moment */
.sim__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(20px, 2.4vw, 32px); }
.sim__steps[hidden] { display: none; }
.sim-s { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 0; border-radius: var(--wr-radius-pill, 999px); background: var(--wr-black-06); font: inherit; font-size: 14px; font-weight: 700; color: var(--wr-black-72); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.sim-s b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wr-white); color: var(--wr-black); font-size: 13px; }
.sim-s.is-on { background: var(--wr-white); color: var(--wr-black); box-shadow: var(--wr-shadow-sm); }
.sim-s.is-on b { background: var(--wr-black); color: var(--wr-white); }

/* tablets: the same scene, a little taller */
@media (max-width: 899px) {
  .sim__stage { aspect-ratio: 700 / 300; }
}
/* phones: the scene stacked for a tall screen; the wall cut on both sides, the Mac and iPhone over it,
   the stream and the feed under them; captions go, the switches name every device */
@media (max-width: 560px) {
  .sim__head { margin-bottom: 10px; }
  .sim__bar { gap: 8px; margin-bottom: 12px; }
  .sim__hint { font-size: 14px; }
  .sim__toggles { border-radius: 18px; gap: 2px; padding: 3px; }
  .sim-t { gap: 5px; padding: 6px 8px; font-size: 12.5px; }
  .sim-t svg { width: 14px; height: 14px; }
  .sim-t i { width: 6px; height: 6px; }
  .sim__stage { aspect-ratio: 358 / 470; }
  .sim__dev figcaption { display: none; }
  .sim__wall { left: -6%; top: 0; width: 106%; }   /* Audit 1025: cut on the left only, so both team names read */
  .sim__laptop { left: 2%; top: 27%; bottom: auto; width: 62%; }
  .sim__phone { left: 52%; top: 29%; bottom: auto; width: 19%; }
  .sim__tv { left: 0; top: auto; bottom: 0; width: 50%; gap: 5px; }
  .sim__post { left: 53%; bottom: 0; width: 25%; }
  .sim__sheet { left: 80%; bottom: 0; width: 30%; }
  .sim-o { padding: 4px 12px; font-size: 10.5px; }
  .sim__tv .sim__opts { flex-wrap: wrap; border-radius: 12px; }
  .sim__tv .sim-o { padding: 3px 6px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sim *, .sim__stage { transition: none !important; animation: none !important; } }

/* the live score (owner 24 Oct 20:30, 20:43): over each real capture, its score drawn with the app's own lamps
   (score-led.js; colours from the app's tokens: --led-red, the unlit lamp), keys that work over the capture's keys */
.sim-pic { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.sim-lap__screen .sim-pic { border-radius: 3px; }
.sim-ph > .sim-pic { border-radius: clamp(9px, 1.1vw, 18px); }
.sim-live { position: absolute; inset: 0; pointer-events: none; }
.sim-live__num { position: absolute; display: flex; align-items: center; justify-content: center; }
.sim-live__num svg { display: block; width: auto; height: calc(var(--fill, 1) * 100%); max-width: 94%; }
/* on the wall and the phone the box is the whole housing (it hides the capture's own lamps); the digits fill part of it */
.sim-live__num .oc-led__off { fill: rgba(245,242,236,.05); }
.sim-live__num .oc-led__on { fill: currentColor; }
.sim-live__num.oc-led--r { color: color-mix(in srgb, #D32F2F 55%, #F04923); }
.sim-live__num.oc-led--w { color: #fff; }
.sim-live__num.oc-led--w .oc-led__off { fill: rgba(255,255,255,.09); }
.sim-live__num.is-dim { opacity: .5; }
.sim-live__num.is-bump { animation: simBump .5s ease; }
@keyframes simBump { 0% { filter: brightness(1); } 35% { filter: brightness(1.6) drop-shadow(0 0 6px currentColor); } 100% { filter: brightness(1); } }
.sim-live__key, .sim-live__team { position: absolute; pointer-events: auto; padding: 0; border: 0; border-radius: 18%; background: transparent; cursor: pointer; transition: background .15s, box-shadow .15s; }
.sim-live__key:hover, .sim-live__team:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,216,0,.55); }
.sim-live__key:active { background: rgba(255,216,0,.22); }
.sim-live__key:focus-visible, .sim-live__team:focus-visible { outline: 2px solid var(--wr-orange); outline-offset: 1px; }
.sim-live__team { border-radius: 10px; }
.sim-live__team.is-on { box-shadow: inset 0 0 0 2px rgba(255,216,0,.75); }
/* the Mac and iPhone invite a press: their keys glow once when the scene comes into view */
.sim.is-js .sim__laptop .sim-live__key[data-act="add:home:3"], .sim.is-js .sim__laptop .sim-live__key[data-act="clock"], .sim.is-js .sim__phone .sim-live__key[data-act="add:pick:3"] { animation: simInvite 2.4s ease 1s 2; }
@keyframes simInvite { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 2px rgba(255,216,0,.9), 0 0 14px rgba(255,216,0,.6); } }

/* the stream: the app's Marakana score bug live over the game, or the real match ID */
.sim-stream { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; }
.sim-stream__title { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; background: transparent; opacity: 0; transition: opacity .2s ease; }
.sim-stream__title.is-ready { opacity: 1; }

/* the post: the app's own renderer drawing Marakana's football post at 1080 × 1350, scaled to the feed */
@font-face { font-family: 'Bebas Neue'; src: url('../titles/fonts/bebas-neue-400.otf') format('opentype'); font-display: swap; }
.sim-post { position: relative; aspect-ratio: 4 / 5; overflow: hidden; flex: none; }
.sim-post > .sim-shot { position: absolute; inset: 0; }
.sim-post__live { position: absolute; inset: 0; }
.sim-post__live > div { position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; transform-origin: 0 0; overflow: hidden; }
.sim-post.is-live > .sim-shot { visibility: hidden; }
.sim-feed__av img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sim-feed__av:has(img) { background: #fff; }

/* the clock, fouls and timeouts (owner 24 Oct 20:58): the app's yellow and green lamps, the wall's own timeout dots,
   and the app's word over a running clock */
.sim-pic { container-type: inline-size; }
/* the picture under the lamps keeps its own shape inside the device (owner 31 Oct 16:16): never cropped, so the lamps sit on its digits */
.sim-fit { container-type: size; display: grid; place-items: center; }
.sim-fit > .sim-pic { width: min(100cqw, 100cqh * var(--r)); height: min(100cqh, 100cqw / var(--r)); }
.sim-live__num.oc-led--y { color: #FFD800; }
.sim-live__num.oc-led--g { color: color-mix(in srgb, #2E7D32 62%, #FFD800); }
.sim-live__dots { position: absolute; display: flex; align-items: center; justify-content: center; gap: 4%; padding: 0 6%; }
.sim-live__dots i { display: block; flex: none; height: 36%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); }
.sim-live__dots i.is-on { background: #fff; }
.sim-live__run { position: absolute; display: none; align-items: center; justify-content: center; white-space: nowrap; font-family: Sora, system-ui, sans-serif; font-weight: 700; letter-spacing: .08em; color: rgba(245,242,236,.55); pointer-events: none; }
.sim.is-running .sim-live__run { display: flex; }

/* Q165 (owner 24 Oct 21:22): on a phone the iPhone comes up on a tap, its keys about 48 px; the rest fades out */
.sim-zoom-x, .sim-zoom-tap { display: none; }
@media (max-width: 560px) {
  .sim__phone { cursor: pointer; transition: left .35s cubic-bezier(.2, .7, .2, 1), top .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1); }
  .sim-zoom-tap { display: block; position: absolute; left: 50%; bottom: -14px; translate: -50% 0; padding: 4px 12px; border-radius: 999px; background: var(--wr-black); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: var(--wr-shadow-sm); pointer-events: none; }
  .sim__stage .sim__dev { transition: opacity .3s ease; }
  .sim__stage.is-zoom .sim__dev:not(.sim__phone) { opacity: .25; }
  .sim__stage.is-zoom .sim__phone { left: 4%; top: 0; width: 92%; z-index: 10; cursor: default; }
  .sim__stage.is-zoom .sim__phone .sim-ph { -webkit-mask-image: linear-gradient(#000 62%, transparent 71%); mask-image: linear-gradient(#000 62%, transparent 71%); box-shadow: none; }
  .sim__stage.is-zoom .sim-zoom-tap { display: none; }
  .sim__stage.is-zoom .sim-zoom-x { display: grid; place-items: center; position: absolute; right: -2%; top: -2%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--wr-white); color: var(--wr-black); box-shadow: var(--wr-shadow-md); cursor: pointer; z-index: 2; }
  .sim-zoom-x svg { width: 16px; height: 16px; }
}