@font-face {
  font-family: "Fusion Pixel";
  src: url("assets/fonts/fusion-pixel-12px-zh_hans.woff2") format("woff2");
  font-display: swap;
}
:root {
  /* After the layout the shell follows, as molded plastic lit from above:
     the beige-grey of an old computer case with a fine grain; the screen, the
     d-pad and the dark keys one warm near-black; A, B, MENU and SETTING brick
     red; the AGENT key ringed in cream. Keys are domed and stand on a lip of
     their own colour, each in a recess in the shell. (The amber shell of the
     first layout is kept below, under data-shell="amber" on <html>.) */
  --body: #cbc6b6;
  --body-hi: #d9d5c8; /* the shell's top, toward the light */
  --body-lo: #bdb8a7;
  --recess: #bab4a3; /* the touchpad's, the d-pad's, round each key */
  --dish: #aca693; /* the d-pad recess's rim */
  --shade: rgba(64, 56, 40, 0.36); /* shadows on the shell */
  --lit: rgba(255, 253, 244, 0.6); /* a recess's lower edge, catching the light */
  --edge-hi: rgba(255, 255, 250, 0.5); /* the shell's own top and bottom edges */
  --edge-lo: rgba(70, 62, 46, 0.2);
  --print: #36332c; /* printed on the shell: icons, the name */
  --slot: #2f2c27; /* the speaker's slots */
  --stipple: rgba(60, 52, 38, 0.15); /* the touchpad's matte finish */
  --sheen: rgba(255, 255, 250, 0.32);
  --seam: rgba(58, 52, 40, 0.5);
  --dark: #292021;
  --dark-hi: #403536;
  --dark-side: #150e0f; /* a dark key's lip */
  --red: #8a1d02;
  --red-hi: #a9361a;
  --red-side: #561100;
  --cream: #f4d4aa;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
  --ink: #fffaf2;
  --accent: #ffec27; /* on the screen: what the highlight presses */
  --ghost: #fff7e0; /* on the shell: a key the highlight presses */
  --S: 384px; /* screen edge, set by main.js to a whole number of device pixels per PICO-8 pixel */
  --sans: "Avenir Next", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --pixel: "Fusion Pixel", monospace;
}
:root[data-shell="amber"] {
  --body: #e59c30;
  --body-hi: #f0ac46;
  --body-lo: #d88d27;
  --recess: #d88a27;
  --dish: #cf8323;
  --shade: rgba(120, 52, 0, 0.42);
  --lit: rgba(255, 230, 182, 0.55);
  --edge-hi: rgba(255, 238, 202, 0.4);
  --edge-lo: rgba(150, 70, 0, 0.2);
  --print: #3d2511;
  --slot: #4a2808;
  --stipple: rgba(110, 48, 0, 0.13);
  --sheen: rgba(255, 238, 205, 0.26);
  --seam: rgba(100, 42, 0, 0.55);
}
* {
  box-sizing: border-box;
}
/* hidden wins over a class's display (the volume bar is display: flex) */
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1b1415;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: none;
}

/* The device: a box of the layout's proportions (2.19 : 1), as large as fits.
   From 1.96 : 1 to 2.4 : 1 it fills the window (a phone held sideways);
   beyond, it sits in the middle with rounded corners. --u is a hundredth of its
   height: everything on the shell is measured in it, from the layout. --P is
   the width of the screen band (main.js: 90 u, more if the screen needs it);
   --foot is how high the bottom row (MENU, SETTING, the name, the speaker)
   sits. */
.device {
  --h: min(100dvh, 100vw / 1.96);
  --w: min(100vw, var(--h) * 2.4);
  --u: calc(var(--h) / 100);
  --foot: calc(var(--u) * 5);
  position: fixed;
  inset: 0;
  margin: auto;
  width: var(--w);
  height: var(--h);
  display: grid;
  grid-template-columns: 1fr var(--P, calc(var(--u) * 90)) 1fr;
  overflow: hidden;
  border-radius: calc(var(--u) * 3.3);
  background: var(--grain), linear-gradient(var(--body-hi), var(--body) 24%, var(--body) 70%, var(--body-lo));
  box-shadow:
    inset 0 calc(var(--u) * 0.4) 0 var(--edge-hi),
    inset 0 calc(var(--u) * -0.6) 0 var(--edge-lo),
    0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(0, 0, 0, 0.6);
  font-family: var(--sans);
  color: var(--ink);
}
/* Printed on the shell, in the pixel font at a whole multiple of 12px */
.wordmark,
.agent-hint,
.face-btn,
.shoulder .key::before {
  font-family: var(--pixel);
  font-weight: normal;
  font-size: calc(var(--u) * 2.8);
  font-size: max(12px, round(nearest, calc(var(--u) * 2.8), 12px));
  line-height: 1;
}
/* The sides: each control centred on its side's middle line, its top where
   the layout has it */
.side {
  position: relative;
  min-width: 0;
}
.side > * {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* Keys: domed plastic on a lip of their own colour (--lift high), casting a
   soft shadow on the shell. Pressed, a key sinks onto its lip. */
.key {
  --lift: calc(var(--u) * 0.55);
  --side: var(--dark-side);
  position: relative;
  display: block;
  color: var(--ink);
  background: linear-gradient(var(--dark-hi), var(--dark) 55%, #211819);
  box-shadow:
    0 var(--lift) 0 var(--side),
    0 calc(var(--lift) + var(--u) * 0.3) calc(var(--u) * 1.1) var(--shade);
  font-family: var(--sans);
  font-weight: 700;
  transition: transform 45ms ease-out, filter 45ms, box-shadow 45ms;
}
.key.down {
  transform: translateY(calc(var(--lift) * 0.8));
  filter: brightness(0.9);
  box-shadow:
    0 calc(var(--lift) * 0.2) 0 var(--side),
    inset 0 calc(var(--u) * 0.3) calc(var(--u) * 0.6) rgba(0, 0, 0, 0.3);
}
/* A recess in the shell round a key: in shade at the top, lit at the bottom */
.side-key::before,
.key-well::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * -0.6);
  border-radius: 99px;
  background: var(--recess);
  box-shadow:
    inset 0 calc(var(--u) * 0.45) calc(var(--u) * 0.6) var(--shade),
    inset 0 calc(var(--u) * -0.25) 0 var(--lit);
}
/* A key the highlight is pressing (feed.js onDemoKeys) glows without sinking;
   the glow fades slowly so a two-frame tap still shows */
.key::after {
  content: "";
  position: absolute;
  inset: calc(var(--u) * -0.5);
  border-radius: inherit;
  box-shadow: 0 0 0 calc(var(--u) * 0.5) var(--ghost), 0 0 calc(var(--u) * 2.4) calc(var(--u) * 0.6) rgba(255, 247, 224, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}
.key.ghost {
  color: var(--accent);
}
.key.ghost::after {
  opacity: 1;
  transition: none;
}

/* L and R: tabs in the top corners */
.shoulder {
  top: 0;
  z-index: 2;
  width: calc(var(--u) * 24.3);
  height: calc(var(--u) * 9.3);
}
.shoulder.left {
  margin: 0;
}
.shoulder.right {
  margin: 0 0 0 auto;
}
.shoulder .key {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
/* L and R moulded in, a shade lighter than the key */
.shoulder .key::before {
  content: attr(aria-label);
  color: rgba(255, 250, 242, 0.22);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.shoulder.left .key {
  border-radius: 0 0 calc(var(--u) * 2.2) 0;
}
.shoulder.right .key {
  border-radius: 0 0 0 calc(var(--u) * 2.2);
}
/* Pressed, a shoulder goes in rather than down */
.shoulder .key.down {
  transform: none;
  box-shadow: 0 calc(var(--lift) * 0.3) 0 var(--side), inset 0 calc(var(--u) * -0.4) calc(var(--u) * 0.8) rgba(0, 0, 0, 0.35);
}

@keyframes blink {
  50% {
    opacity: 0.35;
  }
}

/* D-pad: a cross (SVG) on its lip, a dimple in the middle and an arrow
   moulded into each arm, in a round dish in the shell; it rocks toward the
   pressed direction */
.dpad-well {
  top: calc(var(--u) * 47.05);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 33.5);
  height: calc(var(--u) * 33.5);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--recess) 50%, var(--dish));
  box-shadow:
    inset 0 calc(var(--u) * 0.9) calc(var(--u) * 1.5) var(--shade),
    inset 0 calc(var(--u) * -0.35) calc(var(--u) * 0.4) var(--lit);
}
.dp-side {
  fill: var(--dark-side);
}
.dp-shadow {
  fill: var(--shade);
}
.dpad {
  width: calc(var(--u) * 27.4);
  height: calc(var(--u) * 27.4);
  touch-action: none;
  transition: transform 60ms ease-out;
}
.dpad svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* A faint light tint rather than a grey: it shows on the lit top arm too */
.dpad .arrow {
  fill: rgba(255, 246, 232, 0.2);
  stroke: transparent;
  stroke-width: 3;
  stroke-linejoin: round;
  transition: fill 280ms ease-out, stroke 280ms ease-out;
}
/* The highlight's presses light the arrow up, larger, without rocking the pad */
.dpad.ghost-up .arrow.up,
.dpad.ghost-down .arrow.down,
.dpad.ghost-left .arrow.left,
.dpad.ghost-right .arrow.right {
  fill: var(--accent);
  stroke: var(--accent);
  transition: none;
}
.dpad.up {
  transform: perspective(520px) rotateX(11deg);
}
.dpad.down {
  transform: perspective(520px) rotateX(-11deg);
}
.dpad.left {
  transform: perspective(520px) rotateY(-11deg);
}
.dpad.right {
  transform: perspective(520px) rotateY(11deg);
}
.dpad.up .arrow.up,
.dpad.down .arrow.down,
.dpad.left .arrow.left,
.dpad.right .arrow.right {
  fill: var(--ghost);
}

/* Screen */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* The screen panel: a dark band from the device's top edge to its bottom,
   the strips and the screen in its middle (the 怎么玩 line's row is kept even
   while it is hidden, so nothing moves) */
.bezel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto calc(18px * var(--ui, 1));
  align-content: center;
  justify-items: center;
  width: var(--P, calc(var(--u) * 90));
  height: 100%;
  background: linear-gradient(#352b2c, var(--dark) 30%, var(--dark) 70%, #231b1c);
  /* Where it meets the shell on either side: a parting line, then a lit edge */
  box-shadow:
    calc(var(--u) * -0.25) 0 0 var(--seam),
    calc(var(--u) * 0.25) 0 0 var(--seam),
    calc(var(--u) * -0.45) 0 0 var(--lit),
    calc(var(--u) * 0.45) 0 0 var(--lit);
}
/* The glass over the panel catches the light at its top left (not over the
   screen: the game stays as it is) */
.bezel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 246, 228, 0.07) 0 30%, transparent 33%);
  pointer-events: none;
}
/* The power light, left of the tabs */
.led {
  position: absolute;
  left: calc((var(--P) - var(--S)) / 4);
  top: calc((100% - var(--S)) / 2 - 21px * var(--ui, 1)); /* the tabs' middle: 29 above the screen's, 8 into the strip */
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffd0d6, #ff2b4e 45%, #b0001f);
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 30, 70, 0.7), 0 0 0 calc(var(--u) * 0.35) #1a1213;
}
.viewport {
  position: relative;
  width: var(--S);
  height: var(--S);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px rgba(255, 255, 255, 0.07);
  touch-action: none;
  cursor: grab;
}
/* The display sits a little below the glass */
.viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),
    inset 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.track {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.track.animate {
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.track canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--S);
  height: var(--S);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}

/* On-screen info (pixel font, multiples of 12px) */
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000;
  transition: opacity 200ms;
}
.overlay[data-mode="play"],
.overlay.dragging {
  opacity: 0;
}
.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  padding: 2px 0 3px;
  background: rgba(0, 0, 0, 0.55);
  text-align: center;
  text-shadow: none;
  transition: opacity 300ms;
}
.overlay[data-hint="hide"] .hint {
  opacity: 0;
}
.hint::after {
  content: " ▶";
  animation: blink 1.1s steps(2, jump-none) infinite;
}
.overlay[data-mode="loading"] .hint::after,
.overlay[data-mode="seeking"] .hint::after {
  content: "";
}
.overlay[data-mode="error"] .hint {
  top: 0;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(29, 43, 83, 0.9);
  white-space: pre-line;
}

/* Pixel-font strips and panels at 2x on a large screen (--ui, set by main.js) */
.tabs,
.label,
.howto,
.edit-keys,
.page,
.like-pop,
.asker,
.overlay,
.menu,
.osd,
.agent-screen,
.ask {
  zoom: var(--ui, 1);
}
.label {
  width: calc(var(--S) / var(--ui, 1));
  height: 18px;
}
.howto {
  width: calc(var(--S) / var(--ui, 1));
}

/* Strip on the glass over the screen: the home's tabs, which L/R switch between */
.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height: 16px;
  margin-bottom: 6px; /* clear of the screen's edge */
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1;
  color: #8c8081;
  white-space: nowrap;
}
.tabs span {
  padding: 2px 6px;
  border-radius: 3px;
}
.tabs span.on {
  background: var(--body);
  color: var(--dark);
}
.tabs span {
  cursor: pointer;
}
/* In 编辑 it is PICO-8's red bar on the screen's top edge, the editors' icons
   at its right, the one open in white; the strip under the screen is its
   bottom bar */
.tabs.editor-bar {
  justify-content: flex-start;
  gap: 0;
  width: calc(var(--S) / var(--ui, 1));
  height: 22px;
  margin: 0; /* the same 22px as the tabs, its bottom on the screen's edge */
  padding: 0 2px 0 0;
  background: #ff004d;
  color: #4a1030; /* PICO-8's dark purple, darkened enough to read on the red */
}
/* Undo and redo at the bar's left, with how many steps each can go */
.tabs .history {
  display: flex;
  margin-right: auto;
}
.tabs .history button {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  height: 22px;
  min-width: 40px; /* a finger's tap, the bar being only 22px tall */
  padding: 0 6px;
  border: 0;
  background: none;
  color: #fff1e8;
  font: inherit;
  cursor: pointer;
}
.tabs .history button:active {
  background: #7e2553;
}
.tabs .history button:disabled {
  color: #4a1030;
  background: none;
  cursor: default;
}
.tabs .history i {
  font-style: normal;
}
.tabs.editor-bar span {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4px;
}
.tabs.editor-bar span.on {
  background: none;
  color: #fff1e8;
}
.tabs svg {
  width: 14px;
  height: 10px;
  fill: currentColor;
}
.bezel:not([data-view="game"]) .label {
  height: 18px;
  min-height: 0;
  padding: 0 6px;
  background: #ff004d;
  color: #2a0d19;
}
.bezel:not([data-view="game"]) .title,
.bezel:not([data-view="game"]) .like {
  color: #fff1e8;
}

/* Code, sprite sheet, map and SFX views over the screen */
.view {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}
.view canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.view .code {
  position: absolute;
  inset: 0;
  padding: 2px 0;
  overflow: hidden;
  background: #1d2b53;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #fff1e8;
  white-space: pre;
}
.view .code div.cur {
  background: rgba(255, 255, 255, 0.12);
}
.view .code i {
  font-style: normal;
  color: #5f574f;
  margin-right: 6px;
}
.view .code .c {
  color: #83769c;
}
.view .code .k {
  color: #ff77a8;
}
.view .code .s {
  color: #29adff;
}
.view .code .n {
  color: #ffa300;
}
.menu {
  z-index: 2;
}
.info {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bezel[data-view="game"] .info,
.bezel:not([data-view="game"]) .badge,
.bezel:not([data-view="game"]) .byline,
.bezel:not([data-view="game"]) .position {
  display: none;
}

/* Strip on the glass under the screen: what's playing */
.label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  padding-top: 5px;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1;
  color: #a89c9c;
  white-space: nowrap;
}
.badge {
  padding: 2px 4px;
  border-radius: 2px;
  background: var(--body);
  color: var(--dark);
}
.badge:empty {
  display: none;
}
.title {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f2f4f8;
}
.byline {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.position {
  display: none; /* the card count is not worth a permanent place */
}
.like {
  color: #8c8081;
}
.like.on {
  color: #ff004d;
}
/* The game's 怎么玩 line, written by the Agent from its code: what to do,
   then each key and what it does; the keys stay whole, the text gives way */
.howto {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 3px;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #d4d8e0;
  white-space: nowrap;
}
.howto-line {
  display: none; /* the strip shows the keys; what to do is on the game's page */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.howto-keys {
  display: flex;
  flex: none;
  gap: 6px;
  margin-left: 6px;
}
.howto-line:empty + .howto-keys {
  margin-left: 0;
}
.key-chip {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #aeb3be;
  transition: color 280ms ease-out;
}
.key-chip kbd {
  padding: 0 2px;
  border-radius: 2px;
  background: #2b2e36;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  color: #e6e9ef;
  font: inherit;
  transition: background 280ms ease-out, color 280ms ease-out;
}
/* ... lit while the highlight presses that key */
.key-chip.lit {
  color: var(--accent);
  transition: none;
}
.key-chip.lit kbd {
  background: var(--accent);
  color: #1d2b53;
  transition: none;
}
.howto b {
  flex: none;
  margin-right: 6px;
  padding: 0 3px;
  border-radius: 2px;
  background: #2b2e36;
  color: var(--accent);
  font-weight: normal;
}
.bezel:not([data-view="game"]) .howto {
  display: none;
}
/* The 怎么玩 line's row: in 编辑 the keys that get about instead */
.howto,
.edit-keys {
  grid-row: 4;
}
.edit-keys {
  display: none;
  gap: 6px;
  padding-top: 3px;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}
.bezel:not([data-view="game"]) .edit-keys {
  display: flex;
}
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

/* Pause menu, styled like PICO-8's */
.menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 55%;
  padding: 10px 14px;
  background: #000;
  border: 2px solid #fff;
  font-family: var(--pixel);
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
}
.menu div {
  position: relative;
  padding-left: 20px;
  white-space: nowrap;
}
.menu div.selected::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--accent);
}
/* MENU and SETTING: red rubber pills beside the screen's bottom corners,
   their icons printed above the end next to the screen */
.side-key {
  bottom: calc(var(--foot) + var(--u) * 0.6);
  width: calc(var(--u) * 12.4);
  height: calc(var(--u) * 4.4);
}
.menu-key {
  margin: 0 calc(var(--u) * 3.5) 0 auto;
}
.setting-key {
  margin: 0 auto 0 calc(var(--u) * 3.7);
}
.pill {
  --lift: calc(var(--u) * 0.45);
  --side: var(--red-side);
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(var(--red-hi), var(--red) 55%, #761800);
}
.side-key .icon {
  position: absolute;
  bottom: calc(100% + var(--u) * 2.2);
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.2);
  fill: var(--print);
  filter: drop-shadow(0 1px 0 var(--lit));
}
.menu-key .icon {
  right: calc(var(--u) * 1.5);
}
.setting-key .icon {
  left: calc(var(--u) * 1.36);
  width: calc(var(--u) * 3.3);
  height: calc(var(--u) * 3.3);
}
.setting-key .icon .hole {
  fill: var(--body);
}

/* The name, printed bottom left: a stripe of PICO-8 colours, then the words */
.wordmark {
  bottom: calc(var(--foot) + var(--u) * 0.2);
  left: calc(var(--u) * 6);
  right: auto;
  margin: 0;
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 1.4);
  color: var(--print);
  line-height: 1.15;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.stripes {
  display: flex;
  gap: calc(var(--u) * 0.35);
  transform: skewX(-18deg);
}
.stripes i {
  width: calc(var(--u) * 1.1);
  background: var(--c);
}
.stripes i:nth-child(1) { --c: #ff004d; }
.stripes i:nth-child(2) { --c: #ffa300; }
.stripes i:nth-child(3) { --c: #ffec27; }
.stripes i:nth-child(4) { --c: #00e436; }
.stripes i:nth-child(5) { --c: #29adff; }

/* The speaker, bottom right: slanted slots through the shell */
.speaker {
  bottom: calc(var(--foot) + var(--u) * 0.2);
  left: auto;
  right: calc(var(--u) * 7);
  margin: 0;
  display: flex;
  gap: calc(var(--u) * 1.5);
  transform: skewX(-28deg);
}
.speaker i {
  width: calc(var(--u) * 1.35);
  height: calc(var(--u) * 9.5);
  border-radius: 99px;
  background: var(--slot);
  box-shadow:
    inset 0 calc(var(--u) * 0.5) calc(var(--u) * 0.4) rgba(0, 0, 0, 0.55),
    0 calc(var(--u) * 0.25) 0 var(--lit);
}

/* Face buttons, Picotron numbering: O=4 X=5 A=12 B=13; B and A red, X and O
   dark, their letters moulded in */
.face {
  top: calc(var(--u) * 49.45);
  width: calc(var(--u) * 30.2);
  height: calc(var(--u) * 28.7);
  touch-action: none;
}
.key-well {
  position: absolute;
  width: calc(var(--u) * 9.45);
  height: calc(var(--u) * 9.45);
  border-radius: 50%;
}
.key-well.top {
  left: calc(var(--u) * 10.375);
  top: 0;
}
.key-well.bottom {
  left: calc(var(--u) * 10.375);
  top: calc(var(--u) * 19.25);
}
.key-well.left {
  left: 0;
  top: calc(var(--u) * 9.625);
}
.key-well.right {
  left: calc(var(--u) * 20.75);
  top: calc(var(--u) * 9.625);
}
.key-well::before {
  border-radius: 50%;
}
.face-btn {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a3e3f, var(--dark) 55%, #1e1617);
  color: rgba(255, 250, 242, 0.3);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
}
.key-well.top .face-btn,
.key-well.left .face-btn {
  --side: var(--red-side);
  background: radial-gradient(circle at 40% 30%, #b8442a, var(--red) 55%, #6e1600);
  color: rgba(255, 222, 200, 0.4);
}

.rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
  background: var(--body);
  color: var(--dark);
  font-family: var(--pixel);
  font-size: 24px;
}
@media (orientation: portrait) and (max-width: 760px) {
  .rotate {
    display: flex;
  }
}
@media (prefers-reduced-motion: reduce) {
  .track.animate {
    transition: none;
  }
  .hint,
  .eye,
  .agent-well::before,
  .agent-well::after,
  .touchpad *,
  .page,
  .like-pop,
  .agent-screen * {
    animation: none !important;
  }
}

/* Volume level, shown on the screen for a moment */
.osd {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #fff1e8;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1;
  color: #fff1e8;
  pointer-events: none;
}
.osd .speaker-icon {
  width: 12px;
  height: 12px;
  background: #fff1e8;
  clip-path: polygon(0 32%, 32% 32%, 70% 0, 70% 100%, 32% 68%, 0 68%);
}
.osd .speaker-icon.mute {
  background: #ff004d;
}
.osd .bars {
  display: flex;
  gap: 2px;
}
.osd .bars i {
  width: 5px;
  height: 12px;
  background: #5f574f;
}
.osd .bars i.on {
  background: #00e436;
}
.osd .level {
  width: 14px;
  text-align: right;
}

/* Touchpad beside the screen, after the DualSense's: up/down switch games,
   left/right the author page, a double tap likes. Flush with the shell, a
   parting line round it (a thin dark gap, its lower side catching the light),
   told apart by its finish: a fine matte stipple instead of the shell's grain,
   and a soft satin sheen from the top left. The surface lights up under the
   finger, and two strips at its sides while it is touched. */
.touchpad {
  top: calc(var(--u) * 14.2);
  display: flex;
  width: calc(var(--u) * 47);
  height: calc(var(--u) * 27.4);
  overflow: hidden;
  border-radius: calc(var(--u) * 1.4);
  background:
    radial-gradient(circle, var(--stipple) 0.6px, transparent 0.8px) 0 0 / 3px 3px,
    linear-gradient(135deg, var(--sheen), transparent 55%),
    var(--recess);
  box-shadow:
    0 0 0 calc(var(--u) * 0.28) var(--seam),
    0 calc(var(--u) * 0.2) 0 calc(var(--u) * 0.28) var(--lit);
  touch-action: none;
  cursor: grab;
}
.pad-surface {
  position: relative;
  flex: 1;
}
.pad-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--tx, 50%) var(--ty, 50%), rgba(255, 244, 214, 0.5), rgba(255, 244, 214, 0) 40%);
  opacity: 0;
  transition: opacity 120ms;
}
.touchpad.touching .pad-glow {
  opacity: 1;
}
.pad-light {
  width: calc(var(--u) * 0.5);
  margin: 12% calc(var(--u) * 0.8);
  border-radius: 99px;
  background: var(--cream);
  opacity: 0;
  transition: opacity 120ms, background 120ms, box-shadow 120ms;
}
.touchpad.touching .pad-light {
  opacity: 0.9;
}
.touchpad.liked .pad-light {
  animation: pad-like 650ms ease-out;
}
.touchpad.unliked .pad-light {
  animation: pad-unlike 650ms ease-out;
}
@keyframes pad-like {
  0%, 60% { opacity: 1; background: #ff6aa9; box-shadow: 0 0 14px #ff4f97; }
}
@keyframes pad-unlike {
  0%, 60% { opacity: 1; background: #fffaf2; box-shadow: 0 0 8px #fffaf2; }
}

/* AGENT key: the biggest key on the shell, a domed dark pill with a face
   standing on its lip in a cream light ring, 按住说话 printed under it. The
   ring is the Agent's light: red while it listens, a light running round it
   while it makes a game, green when one is made; until the key is first
   pressed in this browser it breathes, to show it can be pressed. */
.agent-well {
  --ring: var(--cream);
  top: calc(var(--u) * 18.5);
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 13.5);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 0.7) calc(var(--u) * 1.4);
  border-radius: 99px;
  background: linear-gradient(color-mix(in srgb, var(--ring) 60%, #fff), var(--ring) 45%, color-mix(in srgb, var(--ring) 80%, #6b5a3a));
  box-shadow:
    inset 0 calc(var(--u) * 0.35) calc(var(--u) * 0.5) rgba(60, 40, 10, 0.3),
    0 0 0 calc(var(--u) * 0.25) var(--seam);
  transition: background 200ms;
}
/* The breath: the ring lights up warm and glows on the shell, then fades */
.agent-well.invite:has([data-state="idle"])::after {
  box-shadow:
    0 0 calc(var(--u) * 2) calc(var(--u) * 0.4) rgba(255, 168, 52, 0.75),
    inset 0 0 0 calc(var(--u) * 0.8) rgba(255, 200, 110, 0.95);
  animation: invite 2.4s ease-in-out infinite;
}
@keyframes invite {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.9; }
}
.agent-hint {
  top: calc(var(--u) * 34.2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  color: var(--print);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.agent-hint svg {
  width: 0.7em;
  height: 0.9em;
  fill: currentColor;
}
.agent-well::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  box-shadow: 0 0 calc(var(--u) * 1.8) calc(var(--u) * 0.3) color-mix(in srgb, var(--ring) 75%, transparent);
  opacity: 0;
  pointer-events: none;
}
/* Domed like the other keys, with a glint along its top; pressed, it sinks
   onto its lip (.key.down) */
.agent {
  --lift: calc(var(--u) * 0.7);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(#4a3f40, var(--dark) 48%, #1f1718);
  box-shadow:
    0 var(--lift) 0 var(--side),
    inset 0 calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.1);
  font-family: var(--pixel);
  font-weight: normal;
  font-size: 12px;
  font-size: max(12px, round(nearest, calc(var(--u) * 3), 12px));
  line-height: 1.2;
}
/* The face: two pixel eyes that blink now and then, and a small mouth, lit
   like a display behind the plastic; while the Agent is busy its two lines
   take the face's place */
.agent-face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--u) * 21.8);
  filter: drop-shadow(0 0 calc(var(--u) * 0.7) rgba(255, 244, 214, 0.55));
}
.eye {
  --px: calc(var(--u) * 0.75);
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 4.8);
  background: #fffef9;
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px));
  animation: wink 5.2s ease-in-out infinite;
}
.mouth {
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 0.75);
  background: #fffef9;
}
@keyframes wink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.12); }
}
.agent:not([data-state="idle"]) .agent-face,
.agent[data-state="idle"] .agent-label {
  display: none;
}
.agent-well:has([data-state="listening"]) {
  --ring: #ff4d5e;
}
.agent-well:has([data-state="cancel"]) {
  --ring: #8a8f99;
}
.agent-well:has([data-state="working"]) {
  --ring: #b8641a;
}
.agent-well:has([data-state="error"]) {
  --ring: #ff4d5e;
}
.agent-well:has([data-state="done"]) {
  --ring: #5cff7a;
}
.agent-well:has([data-state="listening"])::after,
.agent-well:has([data-state="done"])::after {
  opacity: 1;
  animation: glow 0.9s ease-in-out infinite;
}
/* Making a game: a light runs round the ring (the key covers all but the ring) */
@property --chase {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.agent-well::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: conic-gradient(from var(--chase), transparent 0 55%, var(--cream) 88%, #fffaf0 97%, transparent);
  opacity: 0;
  pointer-events: none;
}
.agent-well:has([data-state="working"])::before {
  opacity: 1;
  animation: chase 1.3s linear infinite;
}
/* Made one: the ring stays lit and the key carries a 新 badge until the player goes to it */
.agent-well:has([data-state="done"])::before {
  opacity: 1;
  background: var(--ring);
  animation: glow 0.9s ease-in-out infinite;
}
.agent[data-state="done"]::before {
  content: "新";
  position: absolute;
  top: -7px;
  right: -5px;
  padding: 1px 5px;
  border-radius: 7px;
  background: var(--ring);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ring) 70%, transparent), 0 2px 3px rgba(0, 6, 30, 0.5);
  color: #062a10;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
  text-shadow: none;
}
@keyframes chase {
  to { --chase: 360deg; }
}
@keyframes glow {
  50% { opacity: 0.45; }
}
@keyframes breathe {
  50% { opacity: 0.25; }
}
/* The key's label: AGENT, or while the Agent is busy two short lines on the
   key itself (what it is doing, then the time or what a tap does), in the ring's colour */
.agent-label {
  display: grid;
  justify-items: center;
  line-height: 1.15;
  white-space: nowrap;
}
.agent-label span + span {
  opacity: 0.75;
}
.agent[data-state="listening"] .agent-label,
.agent[data-state="error"] .agent-label {
  color: #ff8a95;
}
.agent[data-state="working"] .agent-label {
  color: #ffd27a;
}
.agent[data-state="done"] .agent-label {
  color: #8dff9f;
}

/* The Agent's screens, on the handheld's display (pixel font, PICO-8 colours) */
.agent-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #fff1e8;
  pointer-events: none;
}
.agent-screen[data-mode="banner"] {
  inset: 6px 6px auto;
}
.agent-screen[data-mode="listen"],
.agent-screen[data-mode="panel"],
.agent-screen[data-mode="form"] {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.banner {
  --c: #c2c3c7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(17, 29, 53, 0.95);
  border: 2px solid var(--c);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: pointer;
  animation: drop-in 160ms ease-out;
}
.banner.sent { --c: #29adff; }
.banner.done { --c: #00e436; }
.banner.error { --c: #ff004d; }
.banner.reply { --c: #ffec27; }
.banner .dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--c);
}
.banner .thumb {
  flex: none;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  background: #000;
  outline: 1px solid #fff1e8;
}
.banner .body {
  min-width: 0;
}
.banner .headline {
  color: var(--c);
}
.banner .text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@keyframes drop-in {
  from { transform: translateY(-8px); opacity: 0; }
}

.listen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  padding: 8px;
}
.listen.cancel {
  background: rgba(126, 37, 83, 0.6);
}
.listen .top {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ff004d;
}
.listen.cancel .top {
  color: #fff1e8;
}
.listen .rec {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1s steps(2, jump-none) infinite;
}
.listen .ctx {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c2c3c7;
}
.mic-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mic-big i {
  width: 6px;
  height: 30px;
  background: #ff004d;
  animation: wave 1.1s ease-in-out infinite;
}
.mic-big i:nth-child(2) { animation-delay: -0.9s; }
.mic-big i:nth-child(3) { animation-delay: -0.6s; }
.mic-big i:nth-child(4) { animation-delay: -0.3s; }
.mic-big i:nth-child(5) { animation-delay: -0.75s; }
.mic-big.hearing i {
  background: #ffec27;
  animation-duration: 0.55s;
}
.listen.cancel .mic-big i {
  background: #5f574f;
  animation-play-state: paused;
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}
.listen .words {
  max-height: 84px;
  overflow: hidden;
  padding: 0 4px;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
  word-break: break-all;
}
.listen .words.long {
  font-size: 12px;
  line-height: 15px;
}
.listen .words .prompt {
  font-size: 12px;
  color: #c2c3c7;
}
.listen .words .live {
  color: #29adff;
}
.listen .foot {
  text-align: center;
  color: #83769c;
}

.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}
.panel .head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.panel .name {
  padding: 0 4px;
  background: #ff004d;
}
.panel .model {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #83769c;
}
.task {
  --c: #29adff;
  padding: 4px 6px;
  background: rgba(29, 43, 83, 0.92);
  border: 2px solid var(--c);
}
.task.error { --c: #ff004d; }
.task.idle { --c: #5f574f; }
.task-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c);
}
.task-head .time {
  margin-left: auto;
  color: #fff1e8;
}
.spin {
  width: 8px;
  height: 8px;
  border: 2px solid var(--c);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.request {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.request .tag {
  margin-left: 6px;
  color: #ffec27;
}
.task .tip {
  color: #c2c3c7;
}
.row .new {
  flex: none;
  padding: 0 3px;
  background: #00e436;
  color: #000;
}
.steps {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: #83769c;
}
.steps li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.steps li::before {
  content: "✓ ";
  color: #00e436;
}
.steps li.now {
  color: #fff1e8;
}
.steps li.now::before {
  content: "▶ ";
  color: #ffec27;
}
.meter {
  color: #ffa300;
}
.rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.rows::-webkit-scrollbar {
  display: none;
}
.section {
  margin-top: 4px;
  color: #83769c;
}
.row {
  position: relative;
  display: flex;
  gap: 6px;
  padding-left: 14px;
  cursor: pointer;
}
.row .what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row .note {
  flex: none;
  margin-left: auto;
  color: #83769c;
}
.row.selected::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #ffec27;
}
.row.selected .what {
  color: #ffec27;
}
.row.danger .what {
  color: #ff77a8;
}
.panel .foot {
  text-align: center;
  color: #5f574f;
}

/* Typing instead of talking, on the display too */
.ask {
  position: absolute;
  inset: 6px 6px auto;
  z-index: 6;
  padding: 8px;
  background: #1d2b53;
  border: 2px solid #fff1e8;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #fff1e8;
  user-select: text;
  -webkit-user-select: text;
}
.ask-title {
  color: #ffec27;
}
.ask textarea {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 4px 6px;
  resize: none;
  background: #000;
  border: 1px solid #5f574f;
  border-radius: 0;
  color: #fff1e8;
  font-family: var(--pixel);
  font-size: 24px;
  line-height: 28px;
  outline: none;
}
.ask textarea:focus {
  border-color: #29adff;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chips button {
  padding: 1px 6px;
  border: 1px solid #29adff;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #29adff;
}
.ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}
.ask-actions button {
  padding: 2px 10px;
  background: #fff1e8;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #000;
}
.ask-actions button[type="submit"] {
  background: #ffec27;
}

/* A like: a heart pops where the screen was double-tapped (or in the middle) */
.like-pop {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 6;
  font-family: var(--pixel);
  font-size: 48px;
  line-height: 1;
  color: #ff004d;
  text-shadow: 0 3px 0 #7e2553;
  pointer-events: none;
  animation: like-pop 700ms ease-out forwards;
}
.like-pop.off {
  color: #c2c3c7;
  text-shadow: 0 3px 0 #5f574f;
}
@keyframes like-pop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -90%) scale(1); opacity: 0; }
}

/* Pages on the screen: 搜索, 喜欢, the author page and 我的, sliding in from the right */
.page {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: #0b0f1e;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #fff1e8;
  animation: page-in 180ms ease-out;
}
.page.out {
  animation: page-out 160ms ease-in forwards;
}
@keyframes page-in {
  from { transform: translateX(100%); }
}
@keyframes page-out {
  to { transform: translateX(100%); }
}
.page-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.page-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: #111d35;
  color: #c2c3c7;
}
.page-head .where {
  margin-left: auto;
  color: #fff1e8;
}
.page-head .close-hint {
  margin-left: auto;
  color: #5f574f;
}
.page-head .back {
  color: #29adff;
  cursor: pointer;
}
.profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}
.avatar {
  flex: none;
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  outline: 2px solid #fff1e8;
}
.about {
  min-width: 0;
}
.about .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.about .stats {
  color: #ffec27;
}
.about .bio {
  color: #83769c;
}
.page-tabs {
  display: flex;
  box-shadow: inset 0 -1px 0 #1d2b53;
}
.page-tabs span {
  flex: 1;
  padding: 2px 0 4px;
  text-align: center;
  color: #83769c;
}
.page-tabs span.on {
  color: #fff1e8;
  box-shadow: inset 0 -2px 0 #ff004d;
}
.page .grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 6px 4px;
  padding: 6px;
  scrollbar-width: none;
}
.page .grid::-webkit-scrollbar {
  display: none;
}
.tile {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.tile .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  background: #000;
  outline: 1px solid #1d2b53;
}
.tile.selected .thumb {
  outline: 2px solid #ffec27;
}
.tile-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c2c3c7;
}
.tile.selected .tile-title {
  color: #ffec27;
}
.tile-like {
  position: absolute;
  top: 2px;
  right: 3px;
  color: #ff004d;
  text-shadow: 1px 1px 0 #000;
}
.tile-now {
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 0 2px;
  background: #ff004d;
}
.page .empty {
  grid-column: 1 / -1;
  padding: 18px 6px;
  text-align: center;
  color: #83769c;
}
.page .rows {
  flex: 1;
  padding: 6px;
}
.page .row {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 2px 0 2px 14px;
  cursor: pointer;
}
.page .row .what {
  flex: none;
  color: #c2c3c7;
}
.page .row .value {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page .row.fixed .value {
  color: #83769c;
}
.page .row.selected::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #ffec27;
}
.page .row.selected .what {
  color: #ffec27;
}
.page-foot {
  padding: 3px 6px;
  text-align: center;
  color: #5f574f;
}
.page-head .count {
  color: #fff1e8;
}
/* 搜索: the box, then the feed's common tags in a row to pick from */
.search-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 6px 0;
  padding: 0 6px;
  background: #000;
  box-shadow: inset 0 0 0 1px #5f574f;
}
.search-bar.selected {
  box-shadow: inset 0 0 0 1px #ffec27;
}
.search-bar:focus-within {
  box-shadow: inset 0 0 0 1px #29adff;
}
.search-bar .glass {
  color: #83769c;
}
.search-bar .count {
  flex: none;
  color: #83769c;
}
.search-box {
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  border: 0;
  outline: none;
  background: none;
  color: #fff1e8;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  -webkit-appearance: none;
  appearance: none;
}
.search-box::placeholder {
  color: #5f574f;
}
.search-box::-webkit-search-cancel-button {
  display: none;
}
.tag-chips {
  display: flex;
  flex: none;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 6px 0;
  scrollbar-width: none;
}
.tag-chips::-webkit-scrollbar {
  display: none;
}
.tag-chips span {
  flex: none;
  padding: 0 5px;
  box-shadow: inset 0 0 0 1px #29adff;
  color: #29adff;
  cursor: pointer;
}
.tag-chips span.on {
  background: #29adff;
  color: #000;
}
.tag-chips span.selected {
  box-shadow: inset 0 0 0 1px #ffec27;
  color: #ffec27;
}
.tag-chips span.on.selected {
  background: #ffec27;
  color: #000;
}

/* The Agent asking about the last play: a card at the bottom of the screen */
.asker {
  position: absolute;
  inset: auto 6px 6px;
  z-index: 5;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 15px;
  color: #fff1e8;
}
.ask-card {
  padding: 6px 8px;
  background: rgba(17, 29, 53, 0.96);
  border: 2px solid #ffec27;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  animation: drop-in 160ms ease-out;
}
.ask-card .who {
  margin-right: 6px;
  padding: 0 3px;
  background: #ff004d;
}
.ask-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 4px;
}
.ask-answers span {
  padding: 1px 6px;
  border: 1px solid #29adff;
  color: #29adff;
  cursor: pointer;
}
.ask-answers span.on {
  background: #ffec27;
  border-color: #ffec27;
  color: #000;
}
.ask-foot {
  color: #83769c;
}
/* The first launch's pick: three highlights' frames across the screen */
.asker:has(.opening) {
  inset: 6px;
  display: flex;
  align-items: center;
}
.ask-card.opening {
  width: 100%;
}
.opening-games {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 6px 0 4px;
}
.opening-games > div {
  min-width: 0;
  padding: 2px;
  border: 2px solid transparent;
  cursor: pointer;
}
.opening-games > div.on {
  border-color: #ffec27;
}
.opening-games canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  background: #000;
}
.opening-games b,
.opening-games i {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  font-style: normal;
}
.opening-games b {
  margin-top: 2px;
}
.opening-games i {
  color: #29adff;
}
.ask-foot .dismiss {
  cursor: pointer;
}