@font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('fonts/Silkscreen-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Silkscreen'; font-weight: 700; src: url('fonts/Silkscreen-Bold.ttf') format('truetype'); font-display: swap; }

:root {
  --u: 2px;              /* one room pixel, set by app.js from the stage width (stage = 400 room pixels wide) */
  --bar: 84px;
  --ink: #100820;
  --bg: #07060f;
  --gold: #ffe14a;
  --pink: #ff3fd1;
  --cyan: #3ff0e0;
  --cream: #f4f0e4;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: #fff; }
body { font-family: 'Press Start 2P', monospace; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }

#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- the room (16:9, scales to fit) */
#stage {
  position: relative;
  width: min(100vw, calc((100vh - var(--bar)) * 16 / 9));
  width: min(100vw, calc((100dvh - var(--bar)) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  background: #000;
}
#room { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.abs {
  position: absolute;
  left: calc(var(--x) / 400 * 100%); top: calc(var(--y) / 225 * 100%);
  width: calc(var(--w) / 400 * 100%); height: calc(var(--h) / 225 * 100%);
}

/* ---------------------------------------------------------------- lava lamp blobs */
#lava { overflow: hidden; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); pointer-events: none; }
#lava i { position: absolute; left: 22%; width: 56%; height: calc(var(--u) * 2.5); background: #ffd23c; border-radius: 40%; animation: blob 9s steps(18) infinite alternate; }
#lava i:nth-child(2) { left: 30%; width: 44%; height: calc(var(--u) * 2); animation-duration: 13s; animation-delay: -5s; background: #ffb43c; }
#lava i:nth-child(3) { left: 14%; width: 40%; height: calc(var(--u) * 1.5); animation-duration: 7s; animation-delay: -2s; }
@keyframes blob { from { top: 85%; } to { top: 0%; } }

/* ---------------------------------------------------------------- CRT TV screen */
#tv { border-radius: 9% / 12%; overflow: hidden; background: #0b1016; transition: box-shadow .6s; }
#tv.on { box-shadow: 0 0 calc(var(--u) * 7) rgba(140, 190, 255, .35); }
#vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity .25s; }
#tv.on #vid { opacity: 1; }
#static { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity .35s; pointer-events: none; }
#static.show { opacity: 1; transition: none; }
.crt {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .26) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .06) 0, transparent 45%, rgba(0, 0, 0, .55) 100%);
  box-shadow: inset 0 0 calc(var(--u) * 5) rgba(0, 0, 0, .85);
}
.roll { position: absolute; left: 0; right: 0; top: -20%; height: 20%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .05), transparent);
  animation: roll 7s linear infinite; }
@keyframes roll { to { transform: translateY(600%); } }
.tvmsg {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 3); text-align: center; border: 0; padding: 4%;
  background: radial-gradient(ellipse at center, #17205a 0, #0a0d2a 75%); color: #fff; line-height: 1.3;
}
#idle { cursor: pointer; }
.tvmsg .t1 { font-size: calc(var(--u) * 7.5); color: var(--gold); text-shadow: calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--pink); letter-spacing: .04em; }
.tvmsg .t2 { font-size: calc(var(--u) * 4); color: var(--cyan); }
.tvmsg .t3 { font-size: calc(var(--u) * 3); color: #fff; }
.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
#msg { background: rgba(6, 8, 30, .78); }
#msg[hidden], #idle[hidden] { display: none; }

/* fullscreen TV */
#fsbar { display: none; }
#tv:fullscreen, #tv:-webkit-full-screen { width: 100vw; height: 100vh; left: 0; top: 0; border-radius: 0; background: #000; --u: 4px; }
#tv:fullscreen #fsbar, #tv:-webkit-full-screen #fsbar {
  display: flex; position: absolute; left: 0; right: 0; bottom: 0; gap: 14px; align-items: center; padding: 18px 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); transition: opacity .4s; z-index: 5;
}
#tv.hidebar #fsbar { opacity: 0; pointer-events: none; }
#fsbar button { min-width: 84px; min-height: 64px; font-size: 18px; background: #1b1840; border: 3px solid #fff; box-shadow: 4px 4px 0 #000; }
#fsbar .fstitle { flex: 1; font-size: 14px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- cartridge shelf */
#shelf {
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: calc(var(--u) * 2) calc(var(--u) * 1.5) 0 calc(var(--u) * 3);
  scrollbar-width: thin; scrollbar-color: #8a542e #2e1a16;
}
.cart {
  --c: #888;
  position: relative; display: flex; align-items: stretch; width: 100%; height: calc(var(--u) * 17);
  margin: 0 0 calc(var(--u) * 3); padding: 0; text-align: left;
  background: var(--c); border: max(1px, calc(var(--u) * .75)) solid var(--ink);
  border-radius: calc(var(--u) * 1.5) calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * 1.5);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 rgba(0, 0, 0, .25), inset calc(var(--u) * 1) calc(var(--u) * 1) 0 rgba(255, 255, 255, .25);
  transition: transform .15s steps(3);
}
.cart::after { /* the shelf board under each cartridge */
  content: ''; position: absolute; left: calc(var(--u) * -4); right: calc(var(--u) * -3); bottom: calc(var(--u) * -3.2); height: calc(var(--u) * 2.2);
  background: #aa6e40; border-top: max(1px, calc(var(--u) * .5)) solid #c88a54; pointer-events: none;
}
.cart:hover, .cart:focus-visible { transform: translateX(calc(var(--u) * -3)); outline: none; }
.cart:focus-visible .label, .cart:hover .label { background: #fff; }
.cart .grip { width: calc(var(--u) * 5); flex: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .35) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)); margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.5) calc(var(--u) * 1); }
.cart .label {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--u) * 1.5);
  margin: calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 1);
  padding: 0 calc(var(--u) * 1.2); background: var(--cream); color: var(--ink);
  border: max(1px, calc(var(--u) * .4)) solid rgba(16, 8, 32, .6);
}
.cart .num { flex: none; font-size: calc(var(--u) * 3.2); padding: calc(var(--u) * 1) calc(var(--u) * .9); background: var(--c); color: var(--ink); border: max(1px, calc(var(--u) * .4)) solid var(--ink); line-height: 1; }
.cart .title {
  font-family: 'Silkscreen', monospace; font-size: calc(var(--u) * 4.1); line-height: 1.02; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.cart.out { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .28); box-shadow: none; transform: none; }
.cart.out > * { visibility: hidden; }
body.small .cart .title { display: none; }
body.small .cart .num { font-size: calc(var(--u) * 6); }
body.small .cart .label { justify-content: flex-start; }

/* the cartridge sticking out of the console */
#slotcart { opacity: 0; pointer-events: none; }
#slotcart.in { opacity: 1; animation: drop .28s steps(4); }
#slotcart b {
  position: absolute; inset: 0; background: var(--c, #888); border: max(1px, calc(var(--u) * .6)) solid var(--ink); border-bottom: 0;
  border-radius: calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0 0;
  box-shadow: inset 0 calc(var(--u) * -3) 0 rgba(0, 0, 0, .35);
}
#slotcart b::before { content: attr(data-n); position: absolute; left: 18%; right: 18%; top: 14%; height: 50%; background: var(--cream); color: var(--ink);
  font-size: calc(var(--u) * 4); line-height: calc(var(--u) * 6.5); text-align: center; }
@keyframes drop { from { transform: translateY(calc(var(--u) * -7)); } }
.flycart { position: fixed; z-index: 50; pointer-events: none; transform-origin: 0 0; margin: 0; }

/* ---------------------------------------------------------------- roomba */
#roomba { padding: 0; border: 0; background: none; z-index: 3; }
#roomba::before { content: ''; position: absolute; inset: -60%; } /* bigger tap target */
#roomba img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#roomba.left img { transform: scaleX(-1); }
#roomba.spin img { animation: spin .6s steps(8); }
@keyframes spin { to { transform: rotate(360deg); } }
#bubble {
  position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .2s;
  font-size: calc(var(--u) * 3.4); background: #fff; color: var(--ink); padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border: max(1px, calc(var(--u) * .6)) solid var(--ink); white-space: nowrap; transform: translate(-50%, -100%);
}
#bubble.show { opacity: 1; }

/* ---------------------------------------------------------------- Unity Eagle, player 1 (size and place set by app.js: whole device pixels per sprite pixel) */
#p1 { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; z-index: 2; --sp: 1px; }
#p1:focus-visible { outline: max(1px, calc(var(--u) * .5)) dashed var(--gold); outline-offset: 2px; }
#p1 img { display: block; width: 100%; height: 100%; image-rendering: crisp-edges; image-rendering: pixelated; animation: p1bob 1.2s steps(1, end) infinite; }
#p1.go img { animation: p1jump .5s steps(1, end); }
@keyframes p1bob { 0% { transform: none; } 50% { transform: translateY(calc(var(--sp) * -1)); } }
@keyframes p1jump { 0% { transform: translateY(calc(var(--sp) * -2)); } 25% { transform: translateY(calc(var(--sp) * -4)); } 50% { transform: translateY(calc(var(--sp) * -2)); } 75% { transform: none; } }
#p1tag {
  position: absolute; z-index: 2; pointer-events: none; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.6); line-height: 1; white-space: nowrap; text-align: right;
  background: rgba(16, 8, 32, .84); border: max(1px, calc(var(--u) * .6)) solid var(--gold);
  box-shadow: calc(var(--u) * .8) calc(var(--u) * .8) 0 rgba(0, 0, 0, .5);
}
#p1tag .p1 { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 5); color: var(--gold); text-shadow: calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--pink); }
#p1tag .p1 i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 3.6); background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: blink 1.1s steps(2, start) infinite; }
#p1tag .pl { font-size: calc(var(--u) * 2.4); color: var(--cyan); }
#p1tag .nm { font-size: calc(var(--u) * 2.4); color: var(--cream); }
body.small #p1tag { padding: 2px 3px; border-width: 1px; }
body.small #p1tag .pl, body.small #p1tag .nm { display: none; }
body.small #p1tag .p1 { font-size: max(6px, calc(var(--u) * 5)); gap: 2px; }
body.small #p1tag .p1 i { width: 3px; height: 5px; }

/* ---------------------------------------------------------------- control bar */
#bar {
  width: min(100vw, calc((100vh - var(--bar)) * 16 / 9));
  width: min(100vw, calc((100dvh - var(--bar)) * 16 / 9));
  min-height: var(--bar); display: flex; align-items: center; gap: 14px; padding: 8px 12px;
  background: #120f26; border-top: 4px solid var(--ink); box-shadow: inset 0 4px 0 #2a2456;
}
#now { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#nowtitle { font-size: 12px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
#nowtitle span { color: #9a96c8; font-family: 'Silkscreen', monospace; font-size: 13px; margin-left: 6px; }
#seek { position: relative; height: 26px; cursor: pointer; touch-action: none; }
#seek::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 8px; background: #2a2456; border: 2px solid #000; }
#seekfill { position: absolute; left: 0; top: 9px; height: 8px; width: 0; background: var(--pink); border: 2px solid #000; border-right: 0; }
#controls { display: flex; gap: 10px; flex: none; }
#controls button {
  min-width: 70px; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 16px; background: #1f1b48; border: 3px solid #e8e4ff; box-shadow: 4px 4px 0 #000; padding: 4px 8px;
}
#controls button small { font-size: 8px; color: #b8b4e8; }
#controls button:active, #fsbar button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
#controls button:hover, #controls button:focus-visible { background: #2c2766; outline: none; border-color: var(--gold); }

/* ---------------------------------------------------------------- episode list (small screens) */
#list { display: none; width: 100%; max-width: 720px; padding: 14px 12px 28px; gap: 12px; flex-direction: column; }
body.small #list { display: flex; }
#list .cart { --u: 3.4px; height: auto; min-height: 64px; margin: 0; }
#list .cart::after { display: none; }
#list .cart .label { padding: 8px 10px; gap: 12px; justify-content: flex-start; }
#list .cart .title { display: block; font-size: 17px; line-height: 1.15; -webkit-line-clamp: unset; }
#list .cart .num { font-size: 12px; padding: 6px 8px; width: 64px; text-align: left; box-sizing: border-box; }
#list .cart.out { background: var(--c); border: 3px solid var(--gold); box-shadow: 0 0 0 3px var(--ink); }
#list .cart.out > * { visibility: visible; }
#list .cart.out .label { background: #fff6c8; }
#list .cart.out .num::after { content: ' ▶'; }
body.small #bar { flex-wrap: wrap; gap: 10px; }
body.small #controls { width: 100%; justify-content: space-between; }
body.small #controls button { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  #lava i, .roll, .blink, #p1 img, #p1tag .p1 i { animation: none; }
}