@font-face{font-family:RecordLaserFreeze;src:url("/assets/tbpn-record-laser.ttf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
/* Opening compositions. The game HUD and canvas keep their existing styling. */
.logo-chrome,.broadcast-digits,.horse-foreground{display:none}
.start-overlay{min-height:590px;padding:0;gap:24px}
.intro-composition{position:relative;width:min(100%,880px);height:500px;isolation:isolate}
.start-overlay .intro-composition h1,.intro-overprint{position:absolute;left:50%;top:145px;transform:translateX(-50%);font:italic 800 340px/.78 var(--display);letter-spacing:-.045em;margin:0;padding-right:27px;white-space:nowrap}
.intro-composition h1{z-index:1}
#idle-horse{position:absolute;left:50%;top:0;transform:translateX(-50%);width:320px;height:480px;margin:0;object-fit:contain;image-rendering:pixelated;z-index:2}
.intro-overprint{z-index:3;clip-path:inset(62% 0 0 0);pointer-events:none}
.intro-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);margin:0;font:600 22px/1 var(--display);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;z-index:4}
.start-overlay #start-button{font-size:12px;letter-spacing:.015em;padding:12px 16px}
.start-overlay .mechanical-key{margin:0 5px}
/* A: oversized letterforms weave around the patinated sculpture. */
[data-intro=overprint] .intro-caption{bottom:0}
[data-intro=overprint] .intro-composition h1,[data-intro=overprint] .intro-overprint{color:#173e35}
/* B: TBPN's chrome, black and emerald broadcast palette. */
html[data-intro=broadcast]{background:#080c0b;color:#edf2ef;color-scheme:dark}
[data-intro=broadcast] body{background:radial-gradient(ellipse 50% 50% at 50% 51%,#15372d 0%,#0b1712 43%,#080c0b 85%)}
[data-intro=broadcast] .logo-paper{display:none}
[data-intro=broadcast] .logo-chrome{display:block}
[data-intro=broadcast] .intro-composition{width:min(100%,900px)}
[data-intro=broadcast] .intro-composition h1{z-index:3;top:166px;width:650px;padding:0;line-height:0;background:none;transform:translateX(-50%)}
[data-intro=broadcast] .ordinary-digits{display:none}
[data-intro=broadcast] .broadcast-digits{display:block;width:100%;height:auto}
[data-intro=broadcast] #idle-horse,[data-intro=broadcast] .horse-foreground{left:calc(50% + 110px);top:-10px;height:480px;width:320px}
[data-intro=broadcast] .horse-foreground{display:block;position:absolute;transform:translateX(-50%);z-index:4;pointer-events:none;image-rendering:pixelated;overflow:visible}
[data-intro=broadcast] .intro-overprint{display:none}
[data-intro=broadcast] .intro-caption{left:calc(50% - 325px);top:386px;bottom:auto;transform:none;padding:0;background:none;color:#6fdcba;font:500 22px/1.15 RecordLaserFreeze,Arial,sans-serif;letter-spacing:.035em;border:0;box-shadow:none}
[data-intro=broadcast] #start-button{color:#d7e3dc}
[data-intro=broadcast] .start-overlay .mechanical-key{color:#19382e;background:linear-gradient(#f1f4f7,#bdcbd0);border-color:#8b9f98}
/* C: a quieter, asymmetric studio-poster composition. */
[data-intro=split] .intro-composition{width:min(100%,800px)}
[data-intro=split] .intro-composition h1{left:0;top:140px;transform:none;font-size:310px;color:#173e35;padding:0;letter-spacing:-.04em}
[data-intro=split] #idle-horse{left:auto;right:0;transform:none;top:0;width:320px;height:480px}
[data-intro=split] .intro-overprint{display:none}
[data-intro=split] .intro-caption{left:6px;bottom:86px;transform:none;font-size:23px;letter-spacing:.04em;border-top:3px solid #173e35;padding:13px 84px 0 0}
[data-intro=split] .start-overlay{gap:0}
[data-intro=split] #start-button{align-self:center;transform:translateX(-242px)}
@media(max-width:900px) and (min-width:651px){
  [data-intro=split] .intro-composition{width:650px}
  [data-intro=split] .intro-composition h1{font-size:265px;top:160px}
  [data-intro=split] #idle-horse{width:280px}
  [data-intro=split] .intro-caption{bottom:92px;padding-right:58px}
  [data-intro=split] #start-button{transform:translateX(-165px)}
}
@media(max-width:650px){
  .game-stage:not(.active){min-height:480px}
  .start-overlay{min-height:480px;gap:22px}
  .intro-composition{height:400px}
  .start-overlay .intro-composition h1,.intro-overprint{top:143px;font-size:220px;padding-right:17px}
  #idle-horse{width:245px;height:370px;top:0}
  .intro-caption{font-size:18px;bottom:0}
  .start-overlay #start-button{font-size:11px}
  [data-intro=broadcast] .intro-composition h1{top:154px;width:min(100%,340px);padding:0}
  [data-intro=broadcast] #idle-horse,[data-intro=broadcast] .horse-foreground{left:calc(50% + min(52px,12vw));width:min(235px,66vw);height:min(353px,99vw);top:0}
  [data-intro=broadcast] .intro-caption{left:max(0px,calc(50% - 170px));top:279px;bottom:auto;font-size:14px;padding:0}
  [data-intro=split] .intro-composition{height:420px;width:min(100%,400px)}
  [data-intro=split] .intro-composition h1{top:85px;left:0;font-size:180px;z-index:3}
  [data-intro=split] #idle-horse{width:215px;height:330px;top:30px;right:-4px}
  [data-intro=split] .intro-caption{bottom:35px;left:0;font-size:19px;padding:11px 32px 0 0}
  [data-intro=split] #start-button{transform:none;align-self:flex-start;padding-left:0}
}