/* ORA Arcade home page: an arcade cabinet. The machine is built from the cabinet picture's marquee, side
   panels and control panel (art/arcade/, made by tools/arcade_art.py) around a CSS CRT screen, all sized off
   --s (cabinet width / 1524, the picture's width) so the parts line up at any size. On a phone held upright the
   screen grows tall between the same parts. The machine fills the window (js/hub.js layout()). */
body.arcade { background: radial-gradient(ellipse at 50% 30%, #1c1026 0%, #07050b 55%, #000 100%) fixed; min-height: 100vh; }

.cab-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center; overflow: hidden; }
.cabinet { --s: .7; --mid: 550px; position: relative; width: 1066px; transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.55, 0, .9, .4); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .8)); }
.cabinet.zoom { transform: scale(2.8); }
.cab-top { height: calc(95px * var(--s)); background: url(art/arcade/cab-top.webp) 0 0 / 100% 100% no-repeat; }
.cab-mid { display: flex; height: var(--mid); }
.cab-side { flex: none; background: 0 0 / 100% 100% no-repeat; }
.cab-side.left { width: calc(68px * var(--s)); background-image: url(art/arcade/cab-left.webp); }
.cab-side.right { width: calc(66px * var(--s)); background-image: url(art/arcade/cab-right.webp); }
.cab-bottom { position: relative; height: calc(110px * var(--s)); background: url(art/arcade/cab-bottom.webp) 0 0 / 100% 100% no-repeat; }

/* the screen: a dark surround, a bezel, and the glass */
.screen { flex: 1; min-width: 0; background: #050407; padding: calc(16px * var(--s)) calc(12px * var(--s)) calc(10px * var(--s)); }
/* isolate: the screen's own layers (the boot logo, the CRT glass) stay inside it, so the joystick stands in front */
.glass { position: relative; isolation: isolate; height: 100%; border-radius: calc(26px * var(--s)); background: #000; overflow: hidden; container-type: size;
  box-shadow: 0 0 0 calc(3px * var(--s)) #19161f, 0 0 0 calc(6px * var(--s)) #0b0a0f, 0 0 0 calc(7px * var(--s)) #2a2530; }
.sky { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: url(art/arcade/skyline.webp) 50% 100% / cover no-repeat; opacity: .95; }
.crt { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  box-shadow: inset 0 0 calc(40px * var(--s)) rgba(0, 0, 0, .9), inset 0 0 calc(4px * var(--s)) rgba(255, 255, 255, .06); }
.crt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, transparent 30%); }

/* SELECT GAME */
.sel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 4.5cqh 4cqw 0; transition: opacity .18s; }
.booting .sel, .booting .site-panel { opacity: 0; }
.sel-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.sel-title { margin: 0; font: 4cqh/1 var(--px); color: #ffd23d; text-shadow: .45cqh .45cqh 0 #ff3355, .9cqh .9cqh 0 #000; letter-spacing: .06em; }
.site-chip { font: 2.3cqh/1.3 var(--px); color: #3dffb0; background: rgba(5, 6, 15, .85); border: .35cqh solid #3dffb0; padding: 1.1cqh 1.6cqh; cursor: pointer; max-width: 48cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 0 1.6cqh rgba(61, 255, 176, .35); }
.site-chip:hover, .site-chip:focus-visible { background: #0f2a22; outline: none; }
.sel-chips { display: flex; align-items: center; gap: 1.6cqh; min-width: 0; }
.sel-chips #site-chip { min-width: 0; }
.out-chip { flex: none; color: #ffd23d; border-color: #ffd23d; box-shadow: 0 0 1.6cqh rgba(255, 210, 61, .3); }
.out-chip:hover, .out-chip:focus-visible { background: #2a2208; }
.shelf { list-style: none; margin: 4.5cqh 0 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 2.6cqw; height: 52cqh; }
.shelf li { position: relative; height: min(44cqh, calc((86cqw - (var(--n, 4) - 1) * 2.6cqw) / var(--n, 4) * 4 / 3)); aspect-ratio: 3 / 4; cursor: pointer; filter: brightness(.58) saturate(.8); transition: transform .16s, filter .16s; }
.shelf li img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 0 0 .4cqh #000, 0 1.2cqh 2.4cqh rgba(0, 0, 0, .7); }
.shelf li.on { transform: scale(1.17); filter: none; z-index: 2; }
.shelf li.on img { box-shadow: 0 0 0 .55cqh #fff, 0 0 0 1cqh #000, 0 0 4cqh rgba(255, 210, 61, .55), 0 0 9cqh rgba(255, 51, 85, .35); animation: glow 1.2s ease-in-out infinite alternate; }
.shelf li.on::before { content: '▼'; position: absolute; left: 50%; top: -5.2cqh; transform: translateX(-50%); font: 3cqh/1 var(--px); color: #ffd23d; text-shadow: .3cqh .3cqh 0 #000; animation: bob .5s steps(2) infinite alternate; }
.shelf li.new::after { content: 'NEW'; position: absolute; right: -1.4cqh; top: -1.4cqh; font: 1.8cqh/1 var(--px); color: #000; background: #3dffb0; padding: .8cqh 1cqh; box-shadow: 0 0 0 .35cqh #000; }
@keyframes glow { to { box-shadow: 0 0 0 .55cqh #fff, 0 0 0 1cqh #000, 0 0 6cqh rgba(255, 210, 61, .8), 0 0 12cqh rgba(255, 51, 85, .5); } }
@keyframes bob { to { transform: translate(-50%, .8cqh); } }
.sel-info { text-align: center; margin-top: 3cqh; max-width: 82cqw; position: relative; }
.sel-info p { margin: 0; }
.sel-kind { font: 2.2cqh/1.5 var(--px); color: #8a93c9; letter-spacing: .06em; }
.sel-blurb { font: 3.6cqh/1.05 var(--tm); color: #e2e6ff; margin-top: .8cqh !important; text-shadow: 0 .3cqh 0 #000; }
.sel-site { font: 2cqh/1.5 var(--px); color: #3dffb0; margin-top: 1cqh !important; text-shadow: 0 .3cqh 0 #000; }
.press-start { margin-top: 2cqh; font: 3.4cqh/1 var(--px); color: #fff; background: none; border: 0; padding: 1cqh 2cqh; cursor: pointer; text-shadow: .4cqh .4cqh 0 #ff3355, 0 0 2cqh rgba(255, 255, 255, .5); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the website panel, on the same screen */
.site-panel { position: absolute; inset: 0; z-index: 4; background: rgba(4, 5, 14, .96); overflow-y: auto; display: flex; transition: opacity .18s; }
.panel-in { margin: auto; width: 100%; max-width: 640px; padding: 24px 22px; text-align: center; }
.panel-title { margin: 0 0 14px; font: 13px/1.4 var(--px); color: #ffd23d; text-shadow: 2px 2px 0 #ff3355; }
.site-form { margin: 0 auto; }
.site-status { font: 19px/1.2 var(--tm); color: var(--dim); margin: 10px 0 0; min-height: 23px; }
.site-status.bad { color: var(--bad); }
.site-status.ok { color: var(--pass); }
.spotted { margin: 16px auto 0; text-align: left; background: var(--panel); border: 3px solid #fff; box-shadow: 0 0 0 4px #000; padding: 12px; }
.spotted-head { display: flex; align-items: center; gap: 12px; }
.spotted-head canvas { width: 96px; height: 48px; background: #fff; flex: none; }
.spotted-head > div { flex: 1; min-width: 0; }
.spotted-name { margin: 0; font: 11px/1.4 var(--px); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotted-stat { margin: 4px 0 0; font: 19px/1.15 var(--tm); color: var(--warn); }
.link { background: none; border: 0; color: var(--dim); font: 7px/1.4 var(--px); cursor: pointer; text-decoration: underline; padding: 6px 0; flex: none; }
.link:hover { color: #fff; }
.panel-back { margin-top: 18px; font-size: 9px; }
@media (max-width: 560px) {
  .spotted-head { flex-wrap: wrap; row-gap: 8px; }
  .spotted-head > div { display: contents; }
  .spotted-name { flex: 1; min-width: 0; white-space: normal; }
  .spotted-stat { flex-basis: 100%; margin: 0; }
  .spotted-head .link { flex-basis: 100%; text-align: left; }
}

/* the ORA logo, drawn at 320x180 and blown up with hard edges */
.boot { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; background: #000; image-rendering: pixelated; image-rendering: crisp-edges; }

/* the control panel: the joystick ball tilts, the buttons go down */
.joy { position: absolute; left: calc(327px * var(--s)); top: calc(-58px * var(--s)); width: calc(82px * var(--s)); height: calc(82px * var(--s)); padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; transform-origin: 50% 160%; transition: transform .09s; }
.joy img { display: block; width: 100%; height: 100%; }
.joy.l { transform: rotate(-16deg); }
.joy.r { transform: rotate(16deg); }
.joy.u { transform: translateY(calc(-4px * var(--s))) scale(.97); }
.joy.d { transform: translateY(calc(4px * var(--s))) scale(1.02); }
.cbtn { position: absolute; left: calc((var(--x) - 37) * 1px * var(--s)); top: calc((var(--y) - 37) * 1px * var(--s)); width: calc(74px * var(--s)); height: calc(70px * var(--s)); border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.cbtn:hover { background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%); }
.cbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cbtn.down { background: radial-gradient(circle, rgba(0, 0, 0, .45) 40%, transparent 72%); transform: translateY(calc(3px * var(--s))); }
.cbtn-label { position: absolute; left: calc(var(--x) * 1px * var(--s)); top: calc(84px * var(--s)); transform: translateX(-50%); font: calc(11px * var(--s)) / 1 var(--px); color: #f3e6cf; text-shadow: 0 1px 0 #000; letter-spacing: .08em; pointer-events: none; white-space: nowrap; }
.cbtn-label.off { color: #9a8a7a; text-decoration: line-through; }

.blackout { position: fixed; inset: 0; z-index: 50; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s ease-in; }
.blackout.on { opacity: 1; }
/* STEP OUTSIDE: the machine shrinks away and daylight comes up, the map's own sky (house/world/) */
.cabinet.out { transform: scale(.16); transition: transform .7s cubic-bezier(.55, 0, .9, .4); }
.daylight { position: fixed; inset: 0; z-index: 50; background: #e8eef3; opacity: 0; pointer-events: none; transition: opacity .4s ease-in .3s; }
.daylight.on { opacity: 1; }

/* phones held upright: the machine fills the screen, the screen grows tall, the games go two by two */
body.tall .cab-wrap { padding: 0; place-items: start center; }
body.tall .cabinet { filter: none; }
body.tall .cbtn-label { display: none; }
@container (aspect-ratio < 1) {
  .sel { padding: 4cqw 4cqw 0; }
  .sel-top { flex-direction: column; gap: 3cqw; }
  .sel-title { font-size: 5.6cqw; text-shadow: .6cqw .6cqw 0 #ff3355, 1.2cqw 1.2cqw 0 #000; }
  .site-chip { font-size: 2.7cqw; padding: 2cqw 2.4cqw; max-width: 90cqw; border-width: .6cqw; }
  .sel-chips { gap: 2cqw; max-width: 92cqw; }
  .out-chip .long { display: none; }
  .shelf { display: grid; grid-template-columns: repeat(2, 37cqw); gap: 4cqw 7cqw; height: auto; margin-top: 6cqw; }
  .shelf li { height: auto; width: 37cqw; }
  .shelf li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }   /* an odd one out sits in the middle */
  .shelf li.on { transform: scale(1.07); }
  .shelf li.on img { box-shadow: 0 0 0 .9cqw #fff, 0 0 0 1.7cqw #000, 0 0 7cqw rgba(255, 210, 61, .6); animation: none; }
  .shelf li.on::before { display: none; }
  .shelf li.new::after { font-size: 2.6cqw; padding: 1.2cqw 1.4cqw; right: -2cqw; top: -2cqw; }
  .sel-info { margin-top: 5cqw; max-width: 92cqw; }
  .sel-kind { font-size: 2.8cqw; }
  .sel-blurb { font-size: 5cqw; }
  .sel-site { font-size: 2.8cqw; }
  .press-start { font-size: 4.6cqw; margin-top: 3cqw; }
}

/* under the machine */
.about { max-width: 640px; margin: 0 auto; padding: 28px 20px 48px; text-align: center; }
.about-h { margin: 0; font: clamp(16px, 3.4vw, 26px)/1.35 var(--px); font-weight: 400; color: #fff; text-shadow: 0 0 18px rgba(59, 109, 255, .6), 3px 3px 0 #000; }
.about-h span { display: block; margin: 10px auto 0; width: fit-content; font-size: clamp(9px, 1.8vw, 13px); color: #000; background: #fff; text-shadow: none; padding: 6px 10px; }
.about p { font: 21px/1.2 var(--tm); color: var(--dim); margin: 16px 0 0; }
.about .about-controls { font: 8px/1.6 var(--px); color: #6c74a8; letter-spacing: .08em; }
.hub-foot { margin: 28px 0 0; font: 19px/1.4 var(--tm); color: var(--dim); }
.hub-foot p { margin: 4px 0 !important; }
.hub-foot a:hover { color: #fff; }