/* Homepage, "After Hours": the cabinet (marquee, bezel and CRT, control panel with the year dial, coin slot and Start)
   beside its instruction card, then the floor, the board, the ruler and the token. Shared parts live in site.css. */

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(24px, 4vw, 56px); align-items: start; max-width: var(--wrap); margin: 0 auto; padding: clamp(8px, 2vw, 24px) var(--gutter) 0; }

.cab { position: relative; width: 100%; max-width: 680px; justify-self: center; container-type: inline-size; }
.marquee { position: relative; display: grid; place-items: center; aspect-ratio: 680 / 128; padding: 0 14%; overflow: hidden; background: #110E13; border: 6px solid #000; border-bottom: 0; box-shadow: inset 0 0 0 2px #241F29; }
.marquee::before { content: ""; position: absolute; inset: 18% 4%; background: var(--gold); opacity: .07; filter: blur(18px); }
.marquee::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: rgba(243, 237, 224, .18); }
.marquee img { position: relative; display: block; width: 100%; height: auto; }
.marquee.power img { animation: tube 900ms steps(1, end) both; }
@keyframes tube { 0% { opacity: 0; } 12% { opacity: 1; } 18% { opacity: .15; } 30% { opacity: 1; } 34% { opacity: .3; } 40%, 100% { opacity: 1; } }
.marquee-badge { position: absolute; right: 10px; top: 10px; z-index: 1; margin: 0; padding: 4px 6px; background: var(--red); color: var(--black); --px-h: 14px; transform: rotate(4deg); }

.bezel { position: relative; padding: clamp(14px, 3.2vw, 30px); background: var(--void); border-inline: 6px solid #000; }
.bezel::before { content: ""; position: absolute; inset: clamp(6px, 1.4vw, 12px); border: 1px solid var(--era); opacity: .45; pointer-events: none;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.cab .screen { aspect-ratio: 4 / 3; }
.cab .screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.screen-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--era); font: 500 1rem var(--f-mono); }
.screen.off canvas { animation: collapse 380ms ease-in forwards; }
@keyframes collapse { 60% { transform: scaleY(.008); filter: brightness(3); } 100% { transform: scale(0, .008); filter: brightness(4); } }

.panel { position: relative; background: var(--panel); border: 6px solid #000; border-top: 10px solid var(--edge); }
.panel::after { content: ""; display: block; height: 10px; background: repeating-linear-gradient(-60deg, var(--era) 0 10px, transparent 10px 20px); opacity: .8; }
.panel-face { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(12px, 3vw, 28px); padding: clamp(14px, 3vw, 24px); }
.coin-note { margin: 0; padding: 0 clamp(14px, 3vw, 24px) 12px; color: var(--ink-3); font-size: .92rem; }

/* the year dial */
.dial-wrap { display: grid; justify-items: center; gap: 6px; }
.dial { position: relative; width: clamp(112px, 22vw, 150px); aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; }
.dial:active { cursor: grabbing; }
.dial:focus-visible { outline-offset: 6px; border-radius: 50%; }
.dial-ticks { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial-ticks line { stroke: var(--ink-3); stroke-width: 2; }
.dial-ticks line.major { stroke-width: 4; }
.dial-ticks line.e1 { stroke: var(--e1); } .dial-ticks line.e2 { stroke: var(--e2); } .dial-ticks line.e3 { stroke: var(--e3); }
.dial-ticks line.e4 { stroke: var(--e4); } .dial-ticks line.e5 { stroke: var(--e5); } .dial-ticks line.e6 { stroke: var(--e6); }
.dial-ticks line.e7 { stroke: var(--e7); } .dial-ticks line.e8 { stroke: var(--e8); }
.dial-ticks line.on { stroke: var(--ink); stroke-width: 4; }
.knob { position: absolute; inset: 17%; border-radius: 50%; transform: rotate(var(--angle, -150deg));
  background: radial-gradient(circle at 36% 30%, #57505F, #221E27 58%, #141218); box-shadow: 0 7px 0 #000, inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .5); }
.knob::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(243, 237, 224, .13) 0 5deg, transparent 5deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 70%, #000 71%); mask: radial-gradient(circle, transparent 70%, #000 71%); }
.knob-pointer { position: absolute; left: 50%; top: 9%; width: 7px; height: 26%; margin-left: -3.5px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 10px rgba(255, 194, 61, .55); }
.dial-hint { margin: 0; color: var(--ink-3); font-size: .82rem; text-align: center; }

.readout { min-width: 0; }
.readout p { margin: 0; }
.readout-year { color: var(--era); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--era) 55%, transparent)); }
.pix-xl { --px-h: clamp(30px, 6vw, 44px); font-size: 2.4rem; }
.readout-era { overflow-wrap: normal; margin-top: 8px !important; font: 700 clamp(1.1rem, 2.4vw, 1.5rem)/1.1 var(--f-display); color: var(--ink); }

.buttons { display: flex; align-items: flex-end; gap: clamp(10px, 2vw, 18px); }
.coin { display: grid; justify-items: center; gap: 8px; min-width: 76px; padding: 10px 10px 8px; color: var(--red); background: var(--void); border: 2px solid var(--edge); border-radius: 4px; font: inherit; cursor: pointer; }
.coin:hover .coin-slot { box-shadow: inset 0 0 0 2px var(--red), 0 0 26px rgba(255, 74, 61, .5); }
.coin-slot { position: relative; width: 52px; height: 62px; border-radius: 3px; background: #3A0F0C; box-shadow: inset 0 0 0 2px var(--red), 0 0 16px rgba(255, 74, 61, .3); overflow: hidden; }
.coin-slot::before { content: ""; position: absolute; left: 50%; top: 14px; width: 6px; height: 34px; margin-left: -3px; border-radius: 3px; background: #000; box-shadow: 0 0 0 2px #1A0605; z-index: 1; }
.coin-disc { position: absolute; left: 50%; top: -30px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 3px #C8902A; z-index: 2; opacity: 0; }
.coin.drop .coin-disc { animation: drop 520ms cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes drop { 0% { opacity: 1; transform: translateY(0) scaleX(1); } 55% { opacity: 1; transform: translateY(40px) scaleX(1); } 70% { transform: translateY(46px) scaleX(.25); } 100% { opacity: 0; transform: translateY(70px) scaleX(.25); } }
.coin-label { --px-h: 9px; font-size: .7rem; }
.start.ready { animation: ready 1s steps(2, end) infinite; }
@keyframes ready { 50% { box-shadow: 0 7px 0 var(--red-deep), 0 0 0 4px var(--gold), 0 0 30px rgba(255, 74, 61, .6); } }

/* instruction card */
.hero .ins-card h1 { font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3.2rem); line-height: .98; letter-spacing: -.01em; margin-bottom: 18px; }
.now { margin-top: 26px; padding-top: 20px; border-top: 2px dashed var(--rule); }
.now p { margin: 0; }
.now-label { color: var(--ink-3); font-size: .95rem; }
.now-title { margin: 2px 0 0; font: 700 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1 var(--f-display); color: var(--c, var(--era)); }
.now-meta { margin-top: 6px !important; font: 500 .88rem var(--f-mono); color: var(--ink-2); }
.now-blurb { margin-top: 10px !important; color: var(--ink-2); max-width: 46ch; }
.now-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px !important; }
.week { margin: 18px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .98rem; }
.week-k { color: var(--ink); font-weight: 600; }
.recent { margin-top: 14px; }
.recent-h { margin: 0 0 4px; color: var(--ink-3); font-size: .95rem; }
.recent-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.recent-list a { display: inline-flex; align-items: center; min-height: 44px; font: 700 1.05rem var(--f-display); text-decoration-color: var(--c); }

/* sections */
.floor, .board, .ruler-sec, .token-sec { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 9vw, 112px) var(--gutter) 0; }
.floor-more { margin: 32px 0 0; }

/* the board */
.board-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); margin-top: 32px; align-items: start; }
.hiscore { min-height: 240px; padding: clamp(18px, 3vw, 30px); background: #000; border: 8px solid var(--bezel); box-shadow: inset 0 0 0 1px #221E27; }
.hiscore-title { margin: 0 0 14px; color: var(--cyan); text-align: center; --px-h: 14px; }
.hiscore-note { margin: 0; color: var(--ink-2); text-align: center; }
.hiscore .lb-scroll { border: 0; background: transparent; }
.hiscore .lb-table { font: 500 clamp(1rem, .85rem + .6vw, 1.25rem)/1 var(--f-mono); }
.hiscore .lb-table th, .hiscore .lb-table td { border-top: 0; padding: 8px 6px; }
.hiscore .lb-table tbody tr:nth-child(8n+1) td { color: var(--gold); } .hiscore .lb-table tbody tr:nth-child(8n+2) td { color: var(--red); }
.hiscore .lb-table tbody tr:nth-child(8n+3) td { color: var(--cyan); } .hiscore .lb-table tbody tr:nth-child(8n+4) td { color: var(--e1); }
.hiscore .lb-table tbody tr:nth-child(8n+5) td { color: var(--e2); } .hiscore .lb-table tbody tr:nth-child(8n+6) td { color: var(--e3); }
.hiscore .lb-table tbody tr:nth-child(8n+7) td { color: var(--e4); } .hiscore .lb-table tbody tr:nth-child(8n) td { color: var(--ink-2); }
.hiscore .lb-table .c-date { display: none; }
.sign h3 { margin: 0; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1 var(--f-display); }
.sign > p { margin: 10px 0 0; color: var(--ink-2); max-width: 44ch; }
.sign-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px !important; }

/* the ruler */
.ruler-scroll { margin-top: 28px; overflow-x: auto; padding: 36px 0 12px; scrollbar-color: var(--rule) transparent; }
.ruler { display: flex; min-width: 1100px; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink-3); }
.yr { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 2px; flex: 1 0 28px; min-height: 230px; padding: 16px 2px 0 4px; border-left: 1px solid var(--rule); }
.yr::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 10px; background: var(--ink-3); }
.yr-start::before { left: -2px; width: 3px; height: 24px; background: var(--c); }
.yr-era { position: absolute; left: 0; top: -30px; white-space: nowrap; color: var(--c); font: 700 1rem var(--f-display); }
.yr-n { flex-basis: 100%; color: var(--ink-3); font: 500 .75rem var(--f-mono); margin-bottom: 8px; }
.yr-start .yr-n { color: var(--c); }
.yr-game { writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 1px; color: var(--ink); font: 700 1rem/1 var(--f-display); text-decoration: none; white-space: nowrap; }
.yr-game:hover, .yr-game:focus-visible { color: var(--c); }
.yr.here { background: color-mix(in srgb, var(--c) 12%, transparent); }
.ruler-links { margin: 18px 0 0; }

/* the token */
.token-sec { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); }
.token-sec h2 { margin: 0; font: 700 clamp(2rem, 1.2rem + 3vw, 3.4rem)/.95 var(--f-display); }
.token-sec p { margin: 10px 0 0; max-width: 52ch; color: var(--ink-2); }
.token { flex: none; width: clamp(88px, 16vw, 140px); height: auto; transition: transform 600ms steps(8, end); }
.token-sec:hover .token { transform: rotateY(360deg); }

@media (min-width: 961px) { .cab { max-width: clamp(440px, calc(100svh - 330px), 680px); } }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr; }
}
@container (max-width: 580px) {
  .panel-face { grid-template-columns: auto 1fr; grid-template-areas: "dial readout" "dial buttons"; row-gap: 14px; }
  .dial-wrap { grid-area: dial; }
  .readout { grid-area: readout; }
  .buttons { grid-area: buttons; }
  .dial-hint { display: none; }
  .marquee-badge { top: 5px; right: 5px; padding: 3px 4px; --px-h: 7px; }
}
@media (max-width: 720px) {
  .marquee { border-width: 4px; }
  .bezel, .panel { border-inline-width: 4px; }
  .token-sec { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) { .panel-face { gap: 10px; padding: 12px; } .dial { width: 104px; } .coin { min-width: 66px; padding: 8px 6px 6px; } }