:root {
  --sky: #3cbcfc; --ink: #000; --white: #fcfcfc; --orange: #fca044; --green: #b8f818; --blue: #0058f8; --grey: #bcbcbc;
  --px: "Press Start 2P", ui-monospace, monospace;
  --read: "Pixelify Sans", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--white); }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; font-family: var(--read); }
button { font: inherit; color: inherit; }

#loader { position: fixed; inset: 0; background: #000; z-index: 50; transition: opacity .25s; }
#loader.gone { opacity: 0; pointer-events: none; }

/* the room and the set */
#room {
  position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 42%, #14161c 0%, #07080a 55%, #000 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#tv {
  position: relative; padding: var(--bezel, 26px); border-radius: calc(var(--bezel, 26px) + 18px);
  background: linear-gradient(160deg, #3a3b3f 0%, #232427 38%, #151618 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .5);
}
#glass {
  position: relative; overflow: hidden; border-radius: var(--glass-r, 22px); background: #000;
  box-shadow: 0 0 0 3px #0b0c0d, 0 0 0 5px #2c2d30, 0 0 46px rgba(60, 188, 252, .22);
}
#screen { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cg fill='none' stroke='%23000' stroke-width='4'%3E%3Crect x='7' y='7' width='18' height='18'/%3E%3Cpath d='M16 1v9M16 22v9M1 16h9M22 16h9'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='7' y='7' width='18' height='18'/%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8'/%3E%3C/g%3E%3Crect x='15' y='15' width='2' height='2' fill='%23e40058'/%3E%3C/svg%3E") 16 16, crosshair; }
#scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .06) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .34) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--half, 1.5px), rgba(0, 0, 0, var(--scan, .16)) var(--half, 1.5px), rgba(0, 0, 0, var(--scan, .16)) var(--line, 3px));
}
#room.phone #tv { padding: 0; border-radius: 0; background: none; box-shadow: none; }
#room.phone #glass { border-radius: 10px; box-shadow: 0 0 0 2px #111, 0 0 30px rgba(60, 188, 252, .18); }

/* the controller's two buttons */
#pad { display: flex; gap: 22px; justify-content: center; align-items: center; }
#pad button {
  display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 6px 8px; cursor: pointer;
  font: 8px/1 var(--px); color: #e4203c; letter-spacing: 1px;
}
#pad .pill { width: 34px; height: 12px; border-radius: 7px; background: linear-gradient(#3b3b3b, #121212); box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .15); }
#pad button:active .pill { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
#pad button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
#soundBtn[aria-pressed="true"] .lbl { color: #fc7460; }
#soundBtn[aria-pressed="false"] .lbl { color: #8a1a26; }
#room.phone #pad { position: fixed; top: max(6px, env(safe-area-inset-top)); right: 8px; gap: 10px; }
#room.phone #pad button { padding: 8px 6px; }

/* NES windows: black inside, white rule, a blue ring */
.win-wrap {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .55);
}
.win-wrap[hidden] { display: none; }
.win {
  width: min(880px, 100%); max-height: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0;
  background: #000; border: 4px solid var(--white); border-radius: 8px;
  box-shadow: 0 0 0 4px var(--blue), 0 0 0 6px #000, 0 20px 60px rgba(0, 0, 0, .7);
  animation: pop .16s steps(4) both;
}
#list .win { width: min(560px, 100%); }
@keyframes pop { from { transform: scale(.6, .2); } to { transform: none; } }
.win-bar { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border-bottom: 4px solid var(--white); }
.win-title { font: 12px/1 var(--px); color: var(--white); flex: 1; letter-spacing: 2px; }
.win-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 16px 28px; touch-action: pan-y; }
.x {
  margin-left: auto; flex: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font: 16px/44px var(--px); color: var(--white); text-align: center;
}
.x:hover, .x:focus-visible { color: var(--orange); outline: none; }

/* all work */
#listItems { list-style: none; margin: 0; padding: 10px 8px 24px; }
#listItems button {
  position: relative; width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: center; text-align: left;
  background: none; border: 0; padding: 9px 10px 9px 30px; cursor: pointer; border-radius: 4px;
}
#listItems button::before { content: "\25B6"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font: 10px/1 var(--px); color: var(--white); opacity: 0; }
#listItems button:hover::before, #listItems button:focus-visible::before { opacity: 1; }
#listItems button:hover, #listItems button:focus-visible { background: #0b1a3a; outline: none; }
#listItems canvas { grid-row: span 2; width: 44px; height: 44px; image-rendering: pixelated; }
#listItems .n { font: 11px/1.5 var(--px); color: var(--white); }
#listItems .c { font: 8px/1.6 var(--px); color: var(--orange); margin-top: 3px; }

/* a project */
#studyArt { flex: none; width: 160px; height: 136px; image-rendering: pixelated; border-radius: 3px; }
.study-head { min-width: 0; }
#studyName { margin: 0; font: 15px/1.5 var(--px); color: var(--white); overflow-wrap: anywhere; }
#studyClient { margin: 6px 0 0; font: 9px/1.5 var(--px); color: var(--orange); }
#studyBody { --ab-fg: #f0f0f0; --ab-muted: #a8a8a8; --ab-accent: var(--orange); --ab-chrome: 200px; font: 17px/1.5 var(--read); }
#studyBody .ab-heading { font: 11px/1.6 var(--px); color: var(--green); letter-spacing: 1px; }
#studyBody .ab-lede { font-size: 19px; }
#studyBody figcaption { font: 9px/1.6 var(--px); color: var(--grey); }
#studyBody .ab-frame { outline: 2px solid #222; }
#studyNext {
  display: block; margin: 30px auto 0; background: none; border: 0; cursor: pointer; padding: 12px 16px;
  font: 12px/1 var(--px); color: var(--white);
}
#studyNext:hover, #studyNext:focus-visible { color: var(--orange); outline: none; }

@media (max-width: 600px) {
  .win-wrap { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .win-bar { gap: 10px; padding: 8px 6px 8px 10px; }
  #studyArt { width: 80px; height: 68px; }
  #studyName { font-size: 11px; }
  #studyClient { font-size: 8px; }
  .win-body { padding: 14px 12px 24px; }
  #studyBody { font-size: 16px; }
  #listItems .n { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .win { animation: none; } }