/* THE WEBSITE (the mirror page, web.js): a top bar, the live show on its screen, the panels under it.
   Same print look as the show: cream, ink, teal, pink, gold, hard black shadows. */
body.site { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; background: var(--teal); cursor: default;
  background-image: repeating-linear-gradient(-45deg, rgba(13,10,8,.06) 0 14px, transparent 14px 28px); }
html:has(body.site) { overflow-y: auto; height: auto; }
#topbar { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--cream); border-bottom: 4px solid var(--ink); }
#topbar .logo { display: flex; align-items: stretch; text-decoration: none; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; }
#topbar .logo b { font-family: Anton, sans-serif; font-weight: 400; font-size: 26px; padding: 2px 10px; background: var(--pink); color: var(--cream); }
#topbar .logo i { font-style: normal; font-weight: 900; font-size: 20px; padding: 6px 10px 0; background: var(--gold); }
#caChip { display: flex; align-items: stretch; min-width: 0; max-width: 470px; border: 3px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; font: 900 15px Rubik, sans-serif; color: var(--ink); }
#caChip small { background: var(--ink); color: var(--cream); font: 400 18px Anton, sans-serif; padding: 4px 8px; }
#caChip span { padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar nav { display: flex; gap: 4px; margin-left: auto; }
#topbar nav a { white-space: nowrap; font: 400 19px Anton, sans-serif; color: var(--ink); text-decoration: none; padding: 6px 10px; border: 3px solid transparent; }
#topbar nav a:hover { border-color: var(--ink); background: var(--gold); }
#topbar .x { font: 900 22px Rubik, sans-serif; color: var(--cream); background: var(--ink); text-decoration: none; padding: 4px 12px; border: 3px solid var(--ink); }
#topbar .buy { font: 400 24px Anton, sans-serif; color: var(--ink); background: var(--green); text-decoration: none; padding: 5px 16px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; animation: buyPulse 1.6s ease-in-out infinite; }
#topbar .buy:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
#topbar .buy.off { background: #cfc8bb; animation: none; pointer-events: none; }
@keyframes buyPulse { 50% { background: var(--gold); } }
#screen { position: relative; width: 100%; height: min(calc(100vh - 68px), 56.25vw); background: #000; overflow: hidden; border-bottom: 4px solid var(--ink); }
body.site #stage { position: absolute; }
#tuning, #reconnect { position: absolute; z-index: 5; pointer-events: none; transition: opacity .3s; opacity: 0; }
#tuning { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: var(--cream); }
#tuning b { font: 400 clamp(36px, 7vw, 90px) Anton, sans-serif; color: var(--gold); }
#tuning span { font-weight: 900; letter-spacing: .1em; }
body.waiting #tuning { opacity: 1; }
#reconnect { left: 50%; top: 12px; transform: translateX(-50%); background: var(--red); color: var(--cream); font: 400 20px Anton, sans-serif; padding: 4px 14px; border: 3px solid var(--ink); }
body.offair:not(.waiting) #reconnect { opacity: 1; }
#site { max-width: 1200px; margin: 0 auto; padding: 28px 16px 40px; }
#site .dock { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 14px; }
#site .tile, #site .panel { background: var(--cream); border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
#site .tile { padding: 12px 14px; min-width: 0; }
#site .tile small { display: block; font-weight: 900; font-size: 13px; letter-spacing: .1em; }
#site .tile > b { display: block; font: 400 44px/1.05 Anton, sans-serif; }
#site .tile > i { display: block; font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: .04em; }
#site .tile.pot { background: var(--gold); }
#wTrades div { display: flex; gap: 8px; font-size: 14px; font-weight: 700; padding: 2px 0; border-bottom: 2px solid rgba(13,10,8,.12); }
#wTrades b { font: 400 15px Anton, sans-serif; width: 50px; }
#wTrades .buy b { color: var(--teal); }
#wTrades .sell b, #wTrades .drop b { color: var(--red); }
#wTrades i { margin-left: auto; font-style: normal; }
#wTrades em, #site .rows > em { font-style: normal; font-weight: 700; font-size: 13px; opacity: .6; }
#site .panel { margin-top: 26px; padding: 18px 20px 20px; scroll-margin-top: 84px; }
#site h2 { font: 400 46px/1 Anton, sans-serif; margin-bottom: 16px; display: inline-block; background: var(--ink); color: var(--cream); padding: 4px 14px; transform: rotate(-1deg); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.steps li { background: #fff; border: 3px solid var(--ink); padding: 10px 12px; position: relative; }
.steps li > b { position: absolute; right: -10px; top: -14px; font: 400 30px/1 Anton, sans-serif; background: var(--pink); color: var(--cream); border: 3px solid var(--ink); padding: 2px 10px; }
.steps h3 { font: 400 24px/1.05 Anton, sans-serif; margin: 4px 0 6px; }
.steps p { font-size: 14px; line-height: 1.35; }
#site .fine { margin-top: 14px; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
#site .fine a { color: var(--ink); }
#amForm { display: flex; gap: 10px; }
#amForm input { flex: 1; min-width: 0; font: 900 18px Rubik, sans-serif; padding: 10px 12px; border: 4px solid var(--ink); background: #fff; }
#amForm button { font: 400 26px Anton, sans-serif; padding: 4px 22px; background: var(--pink); color: var(--cream); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; }
#amOut p { margin-top: 12px; font: 400 26px/1.15 Anton, sans-serif; }
#amOut .yes { color: var(--teal); }
#amOut .no { color: var(--red); }
#amOut .mine { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#amOut .mine span { border: 3px solid var(--ink); background: #fff; padding: 4px 10px; font-weight: 900; font-size: 13px; }
#amOut .mine b { font: 400 20px Anton, sans-serif; margin-left: 4px; }
#site .row { display: grid; grid-template-columns: 54px 1fr 90px 90px 110px; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 3px solid rgba(13,10,8,.12); font-weight: 900; }
#site .row.head { font-size: 12px; letter-spacing: .1em; border-bottom: 3px solid var(--ink); }
#site .row b { font: 400 22px Anton, sans-serif; }
#site .row i { font-style: normal; text-align: right; }
#site .row a { color: var(--ink); }
#site .season { margin-bottom: 14px; }
#site .season .row { grid-template-columns: 54px 1fr 110px 110px; }
#site .sh { display: flex; gap: 12px; align-items: baseline; border-bottom: 4px solid var(--ink); padding-bottom: 4px; }
#site .sh b { font: 400 26px Anton, sans-serif; }
#site .sh span { font-weight: 900; font-size: 13px; }
#site footer { margin-top: 30px; text-align: center; color: var(--cream); font-weight: 900; font-size: 12px; letter-spacing: .08em; }
/* the show's own CA box: the top bar carries it on the website */
body.site #ca { display: none; }
@media (max-width: 1400px) { #caChip { max-width: 260px; } }
@media (max-width: 1100px) {
  #topbar nav { display: none; }
  #caChip { margin-left: auto; max-width: 40vw; }
}
@media (max-width: 1000px) {
  #site .dock { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  #topbar { gap: 8px; padding: 0 10px; height: 56px; }
  #topbar .logo i, #caChip small, #topbar .x { display: none; }
  #topbar .logo b { font-size: 20px; }
  #topbar .buy { font-size: 18px; padding: 4px 10px; }
  #screen { height: 56.25vw; }
  #site .dock { grid-template-columns: 1fr; }
  #site .tile > b { font-size: 36px; }
  .steps { grid-template-columns: 1fr; }
  #site h2 { font-size: 34px; }
  #site .row { grid-template-columns: 44px 1fr 70px; }
  #site .row i:nth-of-type(2), #site .row i:nth-of-type(3) { display: none; }
  #site .season .row { grid-template-columns: 44px 1fr 80px 70px; }
  #site .season .row i { display: block !important; }
  #amForm { flex-direction: column; }
}