@font-face {
  font-family: "Scurra Terminal";
  src: url("/assets/fonts/VT323-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Scurra Arcade";
  src: url("/assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #10292b;
  --panel: #112f31;
  --line: #355052;
  --cream: #eee8ce;
  --muted: #93aaa3;
  --pink: #ea93a2;
  --teal: #82cdb9;
  --gold: #e5cf80;
  --blue: #99b2e5;
  --mono: "Scurra Terminal", monospace;
  --display: "Scurra Arcade", monospace;
  --sans: var(--mono);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #143739;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  min-width: 340px;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
button {
  border: 0;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
button:hover:not(:disabled) {
  filter: brightness(1.12);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 60%, #24514b55, transparent 65%), #143739;
}
.ambient i {
  position: absolute;
  display: block;
  width: 130vw;
  height: 130vw;
  border-radius: 0;
  border: 85px solid #39635b1c;
  box-shadow:
    0 0 0 80px #173f3d,
    0 0 0 140px #44685a13,
    0 0 0 220px #173c3b;
  transform: rotate(-32deg);
  left: -90vw;
  top: -75vw;
}
.ambient i:nth-child(2) {
  left: 42vw;
  top: 5vw;
  width: 100vw;
  height: 100vw;
  border-width: 45px;
  opacity: 0.5;
}
.ambient i:nth-child(3) {
  left: 20vw;
  top: -100vw;
  opacity: 0.2;
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 110;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 111;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    #000 3px,
    transparent 4px
  );
  opacity: 0.1;
}
.no-crt .scanlines,
.no-crt .grain {
  display: none;
}
.app-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 52px;
}
.topbar {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #91b2a729;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 39px;
  letter-spacing: -2px;
}
.brand-mark {
  font-size: 38px;
  color: var(--pink);
  margin-right: 3px;
}
.brand-dot {
  color: var(--pink);
}
.brand small {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 2px;
  width: 120px;
  font-weight: 400;
  margin-left: 18px;
}
.topbar nav {
  display: flex;
  gap: 18px;
  align-items: center;
}
.edition {
  font: 14px var(--mono);
  letter-spacing: 1.2px;
  color: var(--muted);
}
.live-lamp,
.status-dot {
  width: 6px;
  height: 6px;
  background: var(--teal);
  display: inline-block;
  border-radius: 0;
  box-shadow: 0 0 8px #82cdb944;
}
.live-lamp {
  margin-right: -10px;
}
.icon-button {
  background: #0d292c55;
  border: 1px solid #42615b66;
  width: 32px;
  height: 32px;
  border-radius: 0;
  font-size: 20px;
}
.quiet-button {
  background: none;
  color: var(--muted);
  font: 14px var(--mono);
  letter-spacing: 1px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
}
.quiet-button span {
  color: var(--cream);
}
.run-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0 26px;
}
.eyebrow {
  font: 14px var(--mono);
  letter-spacing: 2px;
  color: var(--teal);
}
h1 {
  font-weight: 400;
  font-size: 31px;
  letter-spacing: -1px;
  margin: 7px 0 0;
}
h1 span {
  color: var(--pink);
}
.run-meta {
  display: flex;
  align-items: center;
  gap: 25px;
  font: 14px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(195px, 1fr) minmax(280px, 330px) minmax(
      210px,
      1fr
    );
  gap: 36px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.panel {
  background: linear-gradient(130deg, #193b3d99, #0c2529bb);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow:
    0 3px 0 #08212455,
    inset 0 1px 0 #ffffff03;
}
.panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 14px var(--mono);
  letter-spacing: 1.2px;
  color: var(--muted);
}
.contract-panel {
  padding: 20px;
}
.tiny-star {
  color: var(--gold);
  font-size: 17px;
}
.contract-name {
  font-family: var(--mono);
  font-size: 25px;
  margin-top: 21px;
  color: var(--gold);
}
.contract-panel p {
  color: #a4b6a9;
  font-size: 16px;
  line-height: 1.65;
  margin: 10px 0 25px;
  min-height: 40px;
}
.target-label {
  font: 12px var(--mono);
  letter-spacing: 1.7px;
  color: var(--muted);
}
.target-score {
  font: 46px var(--mono);
  letter-spacing: -3px;
  color: var(--gold);
  margin: 5px 0 15px;
  font-weight: bold;
}
.progress-track {
  height: 5px;
  background: #051d20;
  border-radius: 0;
  overflow: hidden;
}
.progress-track > div {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.25s;
}
.progress-caption {
  font: 11px var(--mono);
  letter-spacing: 0.6px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.score-panel {
  margin-top: 14px;
  padding: 18px 20px;
}
.current-score {
  font: 38px var(--mono);
  font-weight: bold;
  margin: 10px 0 14px;
  letter-spacing: -2px;
}
.score-formula {
  display: flex;
  align-items: center;
  gap: 10px;
}
.score-formula > div {
  background: #25474d;
  flex: 1;
  text-align: center;
  border-radius: 0;
  padding: 8px;
}
.score-formula > div:last-child {
  background: #63424a;
}
.score-formula span {
  font: bold 23px var(--mono);
}
.score-formula small {
  display: block;
  font: 11px var(--mono);
  letter-spacing: 1px;
  opacity: 0.65;
  margin-top: 2px;
}
.score-formula b {
  color: var(--muted);
  font-weight: normal;
  font-size: 22px;
}
.last-clear {
  font: 12px var(--mono);
  color: var(--muted);
  margin-top: 13px;
  min-height: 12px;
  line-height: 1.5;
}
.stat-row {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.mini-stat {
  flex: 1;
  padding: 14px;
}
.mini-stat > span {
  font: 11px var(--mono);
  letter-spacing: 1px;
  display: block;
  color: var(--muted);
}
.mini-stat strong {
  display: block;
  font: 25px var(--mono);
  font-weight: bold;
  margin-top: 7px;
}
.money {
  color: var(--gold);
}
.primary-button {
  background: var(--pink);
  color: #302d30;
  border: 1px solid #f5a4af;
  box-shadow: 0 4px 0 #86545e;
  border-radius: 0;
  padding: 16px 22px;
  font: bold 15px var(--mono);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.start-button {
  width: 100%;
  margin-top: 18px;
}
.saved-label {
  text-align: center;
  font: 11px var(--mono);
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-top: 17px;
}
.saved-label span {
  color: var(--teal);
  margin-right: 4px;
}
.board-topline,
.board-bottomline {
  display: flex;
  justify-content: space-between;
  font: 11px var(--mono);
  letter-spacing: 1px;
  color: #a9b9ab;
  align-items: center;
}
.board-topline {
  margin: 0 2px 12px;
  height: 12px;
}
.board-topline > span:first-child {
  display: flex;
  gap: 7px;
  align-items: center;
}
.status-dot {
  width: 5px;
  height: 5px;
}
.board-frame {
  border: 5px solid #3c5752;
  border-radius: 0;
  box-shadow:
    0 0 0 1px #122f31,
    0 0 0 2px #66837644,
    0 8px 0 #0b272aaa,
    0 15px 40px #071c2333;
  position: relative;
  background: #0b2227;
  overflow: hidden;
}
.board-frame:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px #0006;
  pointer-events: none;
  border-radius: 0;
}
#board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/2;
}
.board-bottomline {
  margin-top: 17px;
  font-size: 11px;
  letter-spacing: 0.7px;
}
.board-signature {
  font-size: 10px;
  color: #819c90;
}
.board-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(#0e252af0 5%, #0c242bcc 72%, #0c242b44);
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 48px 12px 15px;
}
.attract-badge {
  font: 10px var(--mono);
  letter-spacing: 1.6px;
  color: var(--muted);
}
.jester-art {
  width: 150px;
  margin: 29px 0 17px;
  filter: drop-shadow(4px 7px 0 #07171c55);
  transform: rotate(-7deg);
}
.attract-title {
  font: 30px/1.2 var(--mono);
  letter-spacing: -0.8px;
}
.attract-title em {
  color: var(--gold);
}
.board-overlay p {
  color: #aac1b5;
  font-size: 15px;
  line-height: 1.9;
  margin: 17px 0 23px;
}
.text-button {
  font: 12px var(--mono);
  letter-spacing: 1.2px;
  color: var(--pink);
  background: none;
  border-bottom: 1px solid #a4657344;
  padding: 10px 0;
}
.text-button span {
  padding-left: 12px;
}
.board-flash {
  position: absolute;
  inset: 0;
  background: #a9dfd8;
  opacity: 0;
  pointer-events: none;
}
.board-flash.flash {
  animation: flash 0.24s ease-out;
}
.score-pop {
  position: absolute;
  top: 39%;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--cream);
  text-shadow: 2px 3px #142227;
  font: bold 32px var(--mono);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.score-pop small {
  display: block;
  color: var(--gold);
  font: 15px var(--mono);
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.score-pop.show {
  animation: score-pop 1.6s forwards;
}
.queue-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hold-panel {
  padding: 15px 12px;
  height: 142px;
}
.hold-panel canvas {
  width: 100%;
  height: 62px;
  object-fit: contain;
  margin-top: 7px;
}
.hold-panel > span {
  display: block;
  font: 10px var(--mono);
  letter-spacing: 0.4px;
  text-align: center;
  color: var(--muted);
  margin-top: 8px;
}
.next-panel {
  padding: 15px 13px;
  height: 266px;
}
.next-panel canvas {
  width: 100%;
  height: 37px;
  object-fit: contain;
  display: block;
  margin-top: 6px;
}
.next-panel canvas:first-child {
  height: 44px;
}
.tricks-panel {
  padding: 18px;
  margin-top: 14px;
}
.section-caption {
  color: var(--muted);
  font-size: 15px;
  margin: 8px 0 16px;
}
.trick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #0c242880;
  border: 1px solid #47615a88;
  border-radius: 0;
  padding: 10px;
  margin: 8px 0 0;
  position: relative;
  min-height: 53px;
}
.trick-icon {
  font: 25px var(--mono);
  color: var(--accent);
  width: 26px;
  text-align: center;
}
.trick b {
  display: block;
  font-size: 15px;
  font-weight: normal;
}
.trick small {
  display: block;
  font: 10px var(--mono);
  letter-spacing: 0.7px;
  margin-top: 4px;
  color: var(--muted);
}
.trick kbd {
  margin-left: auto;
}
.trick.empty {
  border-style: dashed;
  opacity: 0.45;
  justify-content: center;
  font: 11px var(--mono);
  letter-spacing: 1px;
}
.broadcast {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
  margin-top: 15px;
  border-color: #b2b78035;
  background: #575a3420;
}
.broadcast-icon {
  color: var(--gold);
  font-size: 20px;
}
.broadcast .eyebrow {
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--gold);
}
.broadcast p {
  font: italic 16px/1.6 var(--mono);
  margin: 8px 0 0;
  color: #b6c4ac;
}
.almanac-button {
  width: 100%;
  font-size: 12px;
  margin-top: 10px;
}
.almanac-button span {
  color: var(--muted);
  font-size: 11px;
}
.oddities-section {
  margin: 29px auto 0;
  max-width: 1000px;
}
.oddities-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 12px var(--mono);
  color: var(--muted);
  letter-spacing: 1px;
}
.oddities-heading > div {
  display: flex;
  gap: 16px;
  align-items: center;
}
.oddity-subtitle {
  font: italic 16px var(--mono);
  letter-spacing: 0;
}
.relic-rack {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
  margin-top: 15px;
}
.relic-slot {
  height: 108px;
  border: 1px dashed #79918355;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  background: #112d3022;
  color: #7690835c;
}
.relic-slot > span {
  font: 26px var(--mono);
}
.relic-slot > small {
  font: 10px var(--mono);
  letter-spacing: 1px;
  margin-top: 9px;
}
.relic-card {
  --accent: var(--pink);
  background: #2d3539;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #24393b);
  border-radius: 0;
  overflow: hidden;
  color: var(--cream);
  width: 100%;
  padding: 0;
  box-shadow: 0 3px 0 #092126;
  transition: transform 0.2s;
  position: relative;
}
.relic-card:hover {
  transform: translateY(-4px) rotate(-1deg);
}
.card-art {
  background:
    repeating-conic-gradient(
      from 22deg at 50% 120%,
      #ffffff0b 0deg 15deg,
      transparent 15deg 30deg
    ),
    color-mix(in srgb, var(--accent) 22%, #162b31);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid #7b887c44;
}
.card-art:before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 0;
}
.card-art > span {
  font: 43px var(--mono);
  color: var(--accent);
  text-shadow: 3px 3px #0d262b;
  z-index: 1;
  transform: rotate(-10deg);
}
.card-art .card-number {
  position: absolute;
  left: 9px;
  top: 8px;
  font: 10px var(--mono);
  color: var(--accent);
}
.card-name {
  font-size: 14px;
  padding: 9px 8px;
  text-align: center;
  white-space: nowrap;
}
.pink {
  --accent: var(--pink);
}
.teal {
  --accent: var(--teal);
}
.gold {
  --accent: var(--gold);
}
.blue {
  --accent: var(--blue);
}
footer {
  display: flex;
  justify-content: space-between;
  padding: 25px 0 21px;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
}
.control-legend {
  display: flex;
  gap: 17px;
  align-items: center;
  flex-wrap: wrap;
}
.control-legend > span {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 10px var(--mono);
  letter-spacing: 0.3px;
  color: var(--muted);
}
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  background: #294449;
  border: 1px solid #52706966;
  border-bottom-width: 2px;
  border-radius: 0;
  font: 12px var(--mono);
  color: #bacabd;
}
.footer-note {
  font: 10px var(--mono);
  letter-spacing: 1px;
  color: #7f998d;
  align-self: center;
  white-space: nowrap;
}
.touch-controls {
  display: none;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 14px 22px;
  background: var(--cream);
  color: var(--ink);
  font: 16px var(--mono);
  border-radius: 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  box-shadow: 0 8px 25px #0005;
  max-width: 90vw;
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #051c20d9;
  backdrop-filter: blur(7px);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.modal {
  width: min(780px, 100%);
  max-height: 90dvh;
  overflow: auto;
  background: #173437;
  border: 1px solid #637c6b;
  border-radius: 0;
  padding: 34px;
  box-shadow: 0 24px 100px #0007;
  position: relative;
}
.modal.small {
  max-width: 480px;
}
.modal.wide {
  width: min(1000px, 100%);
}
.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}
.modal h2 {
  font: 36px var(--mono);
  margin: 10px 0 14px;
  letter-spacing: -0.7px;
}
.modal h2 em {
  color: var(--gold);
  font-weight: normal;
}
.modal p {
  color: #acbeb4;
  font-size: 13px;
  line-height: 1.7;
}
.close-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: none;
  border-radius: 0;
  font-size: 19px;
  color: var(--muted);
}
.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 25px;
}
.secondary-button {
  background: #274649;
  border: 1px solid #597266;
  border-radius: 0;
  padding: 13px 18px;
  font: 14px var(--mono);
  letter-spacing: 1px;
}
.kit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 25px;
}
.kit-card {
  background: #112b2e;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 21px 17px;
  text-align: left;
}
.kit-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #122b2e);
}
.kit-card .kit-symbol {
  font: 45px var(--mono);
  display: block;
  color: var(--accent);
  margin-bottom: 20px;
}
.kit-card strong {
  font: 18px var(--mono);
  display: block;
  color: var(--accent);
}
.kit-card p {
  font-size: 15px;
  min-height: 38px;
}
.kit-card small {
  font: 11px/1.7 var(--mono);
  color: var(--muted);
}
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
}
.form-row label {
  font: 15px var(--mono);
  color: var(--muted);
}
input[type="text"],
input[type="number"],
select {
  background: #10282c;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--cream);
  padding: 11px;
  max-width: 180px;
}
input[type="range"] {
  accent-color: var(--pink);
  width: 145px;
}
input[type="checkbox"] {
  accent-color: var(--pink);
  width: 18px;
  height: 18px;
}
.divider {
  height: 1px;
  background: var(--line);
  margin: 24px 0;
}
.settings-note {
  font: 14px/1.7 var(--mono) !important;
}
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.help-item {
  background: #102b2e;
  border: 1px solid var(--line);
  padding: 18px;
  border-radius: 0;
}
.help-item h3 {
  font: 18px var(--mono);
  margin: 0;
  color: var(--gold);
}
.help-item p {
  font-size: 16px;
  margin-bottom: 0;
}
.help-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font: 15px var(--mono);
  margin-top: 25px;
  color: var(--muted);
}
.help-controls > div {
  display: flex;
  gap: 9px;
  align-items: center;
}
.shop-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}
.shop-wallet {
  background: #10282c;
  border: 1px solid #6e715033;
  border-radius: 0;
  padding: 16px 22px;
  color: var(--gold);
  font: bold 32px var(--mono);
}
.shop-wallet small {
  display: block;
  font: 11px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 5px;
}
.shop-reward {
  font: 14px var(--mono);
  color: var(--teal);
}
.shop-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0 12px;
  font: 14px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.shop-item {
  border: 1px solid var(--line);
  background: #102b2e;
  border-radius: 0;
  padding: 12px;
}
.shop-item .card-art {
  height: 95px;
  border-radius: 0;
  border: 1px solid #78958333;
}
.shop-item .card-art > span {
  font-size: 55px;
}
.shop-item h3 {
  font: 18px var(--mono);
  color: var(--accent);
  margin: 14px 0 7px;
}
.shop-item p {
  font-size: 15px;
  line-height: 1.6;
  min-height: 35px;
  margin: 0 0 14px;
}
.buy-button {
  background: #2a4544;
  border: 1px solid #7d8d6444;
  border-radius: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font: 14px var(--mono);
}
.buy-button b {
  color: var(--gold);
}
.shop-tricks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.shop-trick {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #102b2e;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px;
}
.shop-trick > span {
  font: 32px var(--mono);
  color: var(--accent);
}
.shop-trick strong {
  font-size: 16px;
  font-weight: normal;
}
.shop-trick p {
  font-size: 14px;
  line-height: 1.5;
  margin: 5px 0;
}
.shop-trick .buy-button {
  width: 65px;
  min-width: 65px;
  margin-left: auto;
  justify-content: center;
}
.inventory-strip {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.inventory-chip {
  display: flex;
  gap: 8px;
  align-items: center;
  font: 12px var(--mono);
  background: #284547;
  border: 1px solid #476458;
  padding: 8px;
  border-radius: 0;
}
.inventory-chip button {
  background: none;
  color: var(--pink);
  font: 12px var(--mono);
  padding: 3px;
}
.pact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pact {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #102b2e;
  text-align: left;
}
.pact.selected {
  border-color: var(--gold);
  background: #323f32;
}
.pact strong {
  display: block;
  font: 15px var(--mono);
  color: var(--gold);
}
.pact small {
  display: block;
  font: 14px/1.6 var(--sans);
  color: var(--muted);
  margin-top: 6px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.catalog-card {
  padding: 15px;
  background: #10282b;
  border: 1px solid var(--line);
  border-radius: 0;
}
.catalog-card > span {
  font: 32px var(--mono);
  color: var(--accent);
}
.catalog-card h3 {
  font: 16px var(--mono);
  color: var(--accent);
  margin: 9px 0;
}
.catalog-card p {
  font-size: 15px;
  margin: 0;
}
.catalog-card small {
  font: 10px var(--mono);
  color: var(--muted);
  display: block;
  margin-top: 10px;
}
.result-icon {
  font: 65px var(--mono);
  color: var(--gold);
  text-align: center;
  margin: 12px;
}
.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 25px 0;
}
.result-stats > div {
  background: #10282c;
  padding: 16px 8px;
  text-align: center;
  border-radius: 0;
}
.result-stats small {
  font: 11px var(--mono);
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.result-stats strong {
  font: 23px var(--mono);
  color: var(--gold);
}
.detail-symbol {
  font: 65px var(--mono);
  text-align: center;
  color: var(--accent);
  margin: 25px;
}
.flavor {
  font: italic 17px var(--mono) !important;
  color: var(--gold) !important;
}
.pause-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pause-list button {
  justify-content: center;
}
.history-row {
  font: 14px var(--mono);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
@keyframes flash {
  0% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
  }
}
@keyframes score-pop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  12%,
  65% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px);
  }
}
.reduced-motion * {
  animation: none !important;
  transition: none !important;
}
.reduced-motion .score-pop.show {
  opacity: 1;
}
.reduced-motion .board-flash {
  display: none;
}
@media (min-width: 1400px) {
  .app-shell {
    max-width: 1400px;
  }
  .game-layout,
  .oddities-section,
  footer {
    max-width: 1100px;
  }
  .game-layout {
    grid-template-columns: 260px 330px 270px;
    justify-content: space-between;
    gap: 40px;
  }
  .run-heading {
    max-width: 1100px;
    margin: auto;
  }
  .topbar {
    height: 100px;
  }
}
@media (max-height: 930px) and (min-width: 901px) {
  .topbar {
    height: 76px;
  }
  .run-heading {
    padding: 21px 0 20px;
  }
  h1 {
    font-size: 27px;
  }
  .game-layout {
    grid-template-columns: minmax(190px, 245px) minmax(235px, 280px) minmax(
        200px,
        245px
      );
    gap: 30px;
    justify-content: space-between;
    max-width: 920px;
  }
  .contract-panel {
    padding: 16px;
  }
  .contract-name {
    margin-top: 15px;
    font-size: 23px;
  }
  .contract-panel p {
    margin: 8px 0 14px;
  }
  .target-score {
    font-size: 38px;
    margin-bottom: 12px;
  }
  .score-panel {
    padding: 15px 16px;
    margin-top: 12px;
  }
  .current-score {
    font-size: 32px;
    margin: 8px 0 11px;
  }
  .score-formula > div {
    padding: 6px;
  }
  .score-formula span {
    font-size: 21px;
  }
  .mini-stat {
    padding: 12px;
  }
  .mini-stat strong {
    font-size: 22px;
  }
  .start-button {
    padding: 13px 17px;
    margin-top: 15px;
  }
  .saved-label {
    font-size: 10px;
  }
  .next-panel {
    height: 237px;
  }
  .next-panel canvas {
    height: 31px;
  }
  .hold-panel {
    height: 127px;
  }
  .hold-panel canvas {
    height: 50px;
  }
  .tricks-panel {
    padding: 15px;
  }
  .trick {
    min-height: 47px;
    padding: 8px;
  }
  .section-caption {
    margin: 7px 0 12px;
  }
  .broadcast {
    padding: 12px;
    margin-top: 12px;
  }
  .broadcast p {
    font-size: 15px;
  }
  .oddities-section {
    margin-top: 23px;
    max-width: 920px;
  }
  .relic-slot {
    height: 94px;
  }
  .card-art {
    height: 57px;
  }
  .card-art > span {
    font-size: 37px;
  }
  .card-name {
    font-size: 12px;
    padding: 8px 4px;
  }
  .relic-rack {
    margin-top: 11px;
  }
  footer {
    padding-top: 18px;
    max-width: 920px;
  }
  .control-legend {
    gap: 11px;
  }
  .footer-note {
    font-size: 10px;
  }
  .board-overlay {
    padding-top: 32px;
  }
  .jester-art {
    width: 123px;
    margin: 24px 0 17px;
  }
  .attract-title {
    font-size: 27px;
  }
  .board-overlay p {
    margin: 15px 0;
  }
  .board-signature {
    font-size: 10px;
  }
}
@media (max-width: 1050px) {
  .app-shell {
    padding: 0 28px;
  }
  .brand small {
    display: none;
  }
  .game-layout {
    gap: 22px;
  }
  .edition {
    font-size: 11px;
  }
  .run-meta {
    font-size: 11px;
    gap: 15px;
  }
  .footer-note {
    display: none;
  }
  .oddity-subtitle {
    font-size: 15px;
  }
  .broadcast .eyebrow {
    font-size: 10px;
  }
  .almanac-button {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .app-shell {
    padding: 0 18px;
  }
  .topbar {
    height: 72px;
  }
  .brand {
    font-size: 31px;
  }
  .brand-mark {
    font-size: 29px;
  }
  .topbar nav {
    gap: 10px;
  }
  .edition,
  .live-lamp,
  #help-button {
    display: none;
  }
  .run-heading {
    padding: 22px 0 20px;
    align-items: flex-end;
  }
  h1 {
    font-size: 24px;
  }
  .eyebrow {
    font-size: 11px;
  }
  .run-meta {
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    font-size: 10px;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 16px;
    max-width: 480px;
  }
  .board-area {
    grid-column: 1;
    grid-row: 2;
  }
  .left-rail {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .contract-panel {
    padding: 14px;
  }
  .contract-panel .panel-label {
    font-size: 11px;
  }
  .contract-name {
    font-size: 18px;
    margin-top: 10px;
  }
  .contract-panel p {
    display: none;
  }
  .target-label {
    font-size: 10px;
    margin-top: 15px;
  }
  .target-score {
    font-size: 32px;
    margin: 5px 0 10px;
  }
  .progress-caption {
    font-size: 10px;
  }
  .score-panel {
    margin: 0;
    padding: 14px;
  }
  .current-score {
    font-size: 29px;
    margin: 8px 0;
  }
  .score-formula > div {
    padding: 5px;
  }
  .score-formula span {
    font-size: 18px;
  }
  .score-formula small {
    font-size: 10px;
  }
  .last-clear {
    font-size: 10px;
    margin-top: 9px;
  }
  .stat-row {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    margin: 0;
    gap: 10px;
  }
  .mini-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
  }
  .mini-stat > span {
    font-size: 10px;
  }
  .mini-stat strong {
    font-size: 20px;
    margin: 0;
  }
  .start-button {
    grid-column: 1/-1;
    margin: 0;
    padding: 12px 15px;
  }
  .saved-label {
    grid-column: 1/-1;
    margin: 1px 0 7px;
    font-size: 10px;
  }
  .right-rail {
    grid-column: 2;
    grid-row: 2;
  }
  .queue-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hold-panel {
    height: 100px;
    padding: 10px;
  }
  .hold-panel canvas {
    height: 42px;
    margin: 2px 0;
  }
  .hold-panel > span {
    font-size: 10px;
  }
  .next-panel {
    height: 208px;
    padding: 11px;
  }
  .next-panel canvas {
    height: 26px;
    margin-top: 6px;
  }
  .next-panel canvas:first-child {
    height: 32px;
  }
  .panel-label {
    font-size: 11px;
    letter-spacing: 0.5px;
  }
  .tricks-panel {
    padding: 10px;
    margin-top: 10px;
  }
  .tricks-panel > .panel-label {
    font-size: 10px;
    letter-spacing: 0;
  }
  .tricks-panel .section-caption {
    display: none;
  }
  .trick {
    padding: 6px;
    gap: 5px;
    min-height: 42px;
  }
  .trick-icon {
    font-size: 21px;
    width: 20px;
  }
  .trick b {
    font-size: 12px;
  }
  .trick small {
    font-size: 10px;
  }
  .trick kbd {
    display: none;
  }
  .trick.empty {
    font-size: 10px;
  }
  .broadcast {
    display: none;
  }
  .almanac-button {
    font-size: 10px;
    display: block;
    line-height: 2;
    text-align: center;
  }
  .almanac-button span {
    display: block;
    font-size: 10px;
  }
  .board-topline {
    font-size: 10px;
    letter-spacing: 0.4px;
  }
  .board-bottomline {
    font-size: 10px;
  }
  .board-signature {
    display: none;
  }
  .board-frame {
    border-width: 4px;
  }
  .board-overlay {
    padding: 24px 8px 10px;
  }
  .attract-badge {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .jester-art {
    width: 105px;
    margin: 25px 0 18px;
  }
  .attract-title {
    font-size: 25px;
  }
  .board-overlay p {
    font-size: 12px;
  }
  .text-button {
    font-size: 10px;
  }
  .oddities-section {
    margin-top: 24px;
    max-width: 480px;
  }
  .oddity-subtitle {
    display: none;
  }
  .oddities-heading {
    font-size: 11px;
  }
  .relic-rack {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .relic-slot {
    height: 90px;
  }
  .card-art {
    height: 56px;
  }
  .card-art > span {
    font-size: 35px;
  }
  .card-name {
    font-size: 11px;
  }
  .touch-controls {
    display: flex;
    gap: 7px;
    margin: 20px auto 0;
    max-width: 480px;
    touch-action: none;
  }
  .touch-controls button {
    flex: 1;
    background: #294849;
    border: 1px solid #72857566;
    border-radius: 0;
    height: 45px;
    font: bold 16px var(--mono);
  }
  .touch-controls button:last-child {
    color: #1b3335;
    background: var(--pink);
  }
  footer {
    padding: 20px 0;
    justify-content: center;
  }
  .control-legend {
    justify-content: center;
    gap: 10px;
  }
  .control-legend > span {
    font-size: 10px;
  }
  .modal-backdrop {
    padding: 12px;
  }
  .modal {
    padding: 23px;
    max-height: 94dvh;
  }
  .modal h2 {
    font-size: 29px;
  }
  .kit-grid {
    gap: 8px;
  }
  .kit-card {
    padding: 13px 10px;
  }
  .kit-card .kit-symbol {
    font-size: 34px;
    margin-bottom: 15px;
  }
  .kit-card strong {
    font-size: 15px;
  }
  .kit-card p {
    font-size: 14px;
    min-height: 60px;
  }
  .kit-card small {
    font-size: 10px;
  }
  .modal-actions {
    gap: 10px;
  }
  .primary-button {
    padding: 14px 17px;
    font-size: 14px;
  }
  .help-grid {
    grid-template-columns: 1fr;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-grid {
    gap: 8px;
  }
  .shop-item {
    padding: 9px;
  }
  .shop-item h3 {
    font-size: 15px;
  }
  .shop-item p {
    font-size: 14px;
    min-height: 65px;
  }
  .shop-item .card-art {
    height: 65px;
  }
  .shop-item .card-art > span {
    font-size: 40px;
  }
  .shop-tricks {
    grid-template-columns: 1fr;
  }
  .shop-wallet {
    font-size: 25px;
    padding: 12px;
  }
  .shop-reward {
    font-size: 11px;
    line-height: 1.8;
  }
  .pact {
    padding: 10px;
  }
  .pact strong {
    font-size: 12px;
  }
  .pact small {
    font-size: 12px;
  }
  .shop-top h2 {
    font-size: 26px;
  }
}
@media (pointer: coarse) and (min-width: 761px) {
  .touch-controls {
    display: flex;
    gap: 10px;
    max-width: 600px;
    margin: 20px auto;
    touch-action: none;
  }
  .touch-controls button {
    flex: 1;
    background: #294849;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  .relic-card {
    transition: none;
  }
}
[hidden] {
  display: none !important;
}
.new-run-button {
  font-size: 11px;
  width: 100%;
  justify-content: center;
  margin-top: 7px;
  letter-spacing: 0.7px;
}
.modal-backdrop {
  overscroll-behavior: contain;
}
#board:focus {
  outline: none;
}
@media (max-width: 760px) {
  .new-run-button {
    grid-column: 1/-1;
    margin: 0;
  }
  .playing .topbar {
    height: 56px;
  }
  .playing .run-heading {
    padding: 12px 0;
  }
  .playing h1 {
    font-size: 20px;
  }
  .playing .left-rail {
    gap: 7px;
  }
  .playing .contract-panel {
    padding: 10px;
  }
  .playing .contract-name,
  .playing .target-label,
  .playing .progress-caption {
    display: none;
  }
  .playing .target-score {
    font-size: 28px;
    margin: 6px 0;
  }
  .playing .contract-panel .panel-label {
    font-size: 10px;
  }
  .playing .score-panel {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .playing .score-panel > .panel-label {
    grid-column: 1/-1;
    font-size: 10px;
  }
  .playing .current-score {
    font-size: 26px;
    align-self: center;
    margin: 0;
  }
  .playing .score-formula {
    gap: 5px;
  }
  .playing .score-formula > div {
    padding: 4px;
  }
  .playing .score-formula span {
    font-size: 16px;
  }
  .playing .score-formula b {
    font-size: 15px;
  }
  .playing .last-clear {
    display: none;
  }
  .playing .start-button,
  .playing .saved-label {
    display: none;
  }
  .playing .mini-stat {
    padding: 6px 10px;
  }
  .playing .mini-stat strong {
    font-size: 17px;
  }
  .playing .stat-row {
    gap: 7px;
  }
  .playing .game-layout {
    gap: 12px;
  }
  .playing .board-topline {
    margin-bottom: 8px;
  }
  .playing .oddities-section {
    margin-top: 20px;
  }
  .playing .touch-controls {
    margin-top: 16px;
  }
  .playing .hold-panel {
    height: 83px;
    padding: 8px;
  }
  .playing .hold-panel canvas {
    height: 35px;
  }
  .playing .hold-panel > span {
    margin-top: 2px;
  }
  .playing .next-panel {
    height: 173px;
    padding: 9px;
  }
  .playing .next-panel canvas {
    height: 22px;
    margin-top: 4px;
  }
  .playing .next-panel canvas:first-child {
    height: 27px;
  }
  .playing .tricks-panel {
    padding: 8px;
    margin-top: 9px;
  }
  .playing .trick {
    min-height: 36px;
    margin-top: 6px;
  }
  .playing .trick b {
    font-size: 11px;
  }
  .playing .trick small {
    display: none;
  }
  .playing .almanac-button {
    margin-top: 4px;
  }
  .playing .board-bottomline {
    margin-top: 12px;
  }
}

/* The entire interface belongs to the same CRT, including modal layers. */
:root {
  --crt-bright: #d3e6ba;
  --crt-edge: #64867b;
  --crt-shadow: #061b20;
}
::selection {
  color: var(--ink);
  background: var(--teal);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #64867b #0c2529;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0c2529;
  border: 1px solid #355052;
}
::-webkit-scrollbar-thumb {
  background: #64867b;
  border: 2px solid #0c2529;
}
.panel,
.relic-card,
.relic-slot,
.trick,
.kit-card,
.shop-item,
.shop-trick,
.help-item,
.catalog-card,
.pact,
.inventory-chip,
.result-stats > div,
.shop-wallet,
.score-formula > div,
kbd {
  border-radius: 0;
}
.primary-button,
.secondary-button,
.buy-button,
.icon-button,
.close-button,
.touch-controls button {
  border-radius: 0;
  font-family: var(--mono);
  border-top-color: #bed4ad88;
  border-left-color: #bed4ad88;
  border-right-color: #071b20;
  border-bottom-color: #071b20;
  box-shadow:
    3px 3px 0 var(--crt-shadow),
    inset 0 0 0 1px #e9e7c012;
}
.primary-button {
  box-shadow:
    3px 4px 0 #6e434e,
    inset 0 0 0 1px #ffe0d533;
}
.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.buy-button:active:not(:disabled),
.icon-button:active:not(:disabled),
.close-button:active:not(:disabled),
.touch-controls button:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--crt-shadow);
}
.modal-backdrop {
  background: #04181de8;
  backdrop-filter: blur(2px);
}
.modal {
  border: 2px solid var(--crt-edge);
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 0, #4069572b, transparent 75%), #102c30;
  box-shadow:
    0 0 0 3px #071d22,
    0 0 0 4px #729b7d66,
    8px 10px 0 #04171bbb,
    inset 0 0 60px #020d153d,
    0 0 50px #75b89512;
  font-family: var(--mono);
}
.modal-top {
  border-bottom: 1px dashed #7c9e7e80;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.modal-top .eyebrow {
  color: var(--crt-bright);
  font-size: 12px;
  line-height: 1.7;
}
.modal h2 {
  font: bold 29px/1.2 var(--mono);
  letter-spacing: -1px;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #071d22,
    -1px 0 #b8677833,
    1px 0 #7cceb433;
}
.modal h2 em {
  font-style: normal;
  font-weight: bold;
}
.modal h3,
.modal .kit-card strong,
.modal .pact strong {
  font-family: var(--mono);
  text-shadow: 1px 1px 0 var(--crt-shadow);
}
.modal p {
  font-family: var(--mono);
  font-size: 16px;
  color: #b5c7b7;
}
.modal .help-item h3,
.modal .catalog-card h3,
.modal .shop-item h3,
.modal .kit-card strong {
  font-size: 16px;
}
.modal .flavor {
  font-family: var(--mono) !important;
  font-size: 14px !important;
}
.close-button {
  flex-shrink: 0;
  background: #294345;
  color: var(--pink);
}
.divider {
  background: repeating-linear-gradient(
    90deg,
    #72927b 0 3px,
    transparent 3px 7px
  );
  height: 1px;
}
.modal-actions {
  border-top: 1px dashed #7c9e7e66;
  padding-top: 20px;
}
.modal input[type="text"],
.modal input[type="number"] {
  font: 16px var(--mono);
  color: var(--gold);
  border-radius: 0;
  border: 1px solid #729b7d;
  box-shadow: inset 3px 3px 0 #04191e;
  background: #071f25;
  caret-color: var(--pink);
}
.modal input::placeholder {
  color: #7c9b8b;
}
.modal .kit-card.selected,
.modal .pact.selected {
  border-color: var(--accent, var(--gold));
  box-shadow: inset 3px 0 0 var(--accent, var(--gold));
}
#toast {
  border: 2px solid var(--teal);
  border-radius: 0;
  background: #0b272b;
  color: var(--crt-bright);
  box-shadow:
    4px 4px 0 #04171b,
    inset 0 0 0 2px #1f4541;
  text-shadow: 0 0 8px #a8d78b22;
}
/* Service-menu controls retain native semantics with cabinet-style rendering. */
.modal[data-screen="settings"] {
  max-width: 510px;
}
.signal-strip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--teal);
  font: 11px var(--mono);
  letter-spacing: 1px;
  background: #061d22;
  border: 1px solid #476a5b;
  padding: 10px;
  margin: 20px 0 24px;
}
.signal-strip span:nth-child(2) {
  color: var(--gold);
  letter-spacing: 3px;
}
.settings-channel {
  margin-top: 24px;
}
.settings-channel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
  margin: 0 0 12px;
}
.settings-channel h3::after {
  content: "";
  height: 1px;
  background: #597c663f;
  flex: 1;
}
.settings-channel h3 > span {
  padding: 4px 5px;
  border: 1px solid #597c6666;
  font-size: 12px;
}
.settings-channel .form-row {
  margin: 12px 0;
  gap: 12px;
  min-height: 32px;
}
.settings-channel .form-row label {
  color: #bdcbb9;
  font-size: 14px;
  cursor: pointer;
}
.crt-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 76px;
  width: 76px !important;
  height: 30px !important;
  margin: 0;
  position: relative;
  border: 1px solid #547467;
  border-radius: 0;
  background: #092126;
  box-shadow: inset 2px 2px 0 #02191e;
  cursor: pointer;
}
.crt-switch::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 17px;
  height: 18px;
  background: #556b65;
  border: 2px solid #8ba38a;
  box-shadow: 1px 1px 0 #02191e;
}
.crt-switch::after {
  content: "OFF";
  position: absolute;
  right: 7px;
  top: 8px;
  color: #97aca0;
  font: bold 14px var(--mono);
}
.crt-switch:checked {
  border-color: var(--teal);
  background: #21443e;
}
.crt-switch:checked::before {
  left: 51px;
  background: var(--teal);
  border-color: #c5e3ba;
  box-shadow: 0 0 9px #82cdb944;
}
.crt-switch:checked::after {
  content: "ON";
  left: 10px;
  right: auto;
  color: var(--crt-bright);
}
.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.volume-control output {
  font: bold 15px var(--mono);
  color: var(--gold);
  min-width: 36px;
  text-align: right;
}
.volume-control input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 128px;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.volume-control input::-webkit-slider-runnable-track {
  height: 12px;
  border: 1px solid #69866c;
  background: repeating-linear-gradient(90deg, #68977e 0 6px, #102b30 6px 9px);
  box-shadow: inset 0 2px 0 #04171b;
}
.volume-control input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  width: 12px;
  margin-top: -7px;
  background: var(--pink);
  border: 2px solid #f6c7bb;
  border-radius: 0;
  box-shadow: 2px 2px 0 #04171b;
}
.volume-control input::-moz-range-track {
  height: 10px;
  border: 1px solid #69866c;
  background: repeating-linear-gradient(90deg, #68977e 0 6px, #102b30 6px 9px);
}
.volume-control input::-moz-range-thumb {
  height: 20px;
  width: 8px;
  background: var(--pink);
  border: 2px solid #f6c7bb;
  border-radius: 0;
  box-shadow: 2px 2px 0 #04171b;
}
.frequency-control {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 0;
  margin: 18px 0;
  border: 0;
  min-width: 0;
}
.frequency-control legend {
  font: 14px var(--mono);
  color: #bdcbb9;
  padding: 0 0 9px;
}
.frequency-control legend span {
  color: #829e8c;
  padding-left: 8px;
  font-size: 11px;
}
.frequency-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.frequency-option {
  position: relative;
  cursor: pointer;
}
.frequency-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.frequency-option span {
  display: block;
  padding: 10px 5px;
  background: #092126;
  border: 1px solid #4b6e61;
  color: #93afa0;
  text-align: center;
  font: 15px var(--mono);
  box-shadow: 2px 2px 0 #04171b;
}
.frequency-option input:checked + span {
  color: var(--ink);
  background: var(--gold);
  border-color: #ede6b0;
  font-weight: bold;
  box-shadow: 2px 2px 0 #776c3e;
}
.frequency-option input:focus-visible + span {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
.frequency-option:hover span {
  border-color: var(--gold);
}
.settings-saved {
  color: var(--teal);
  font-size: 12px;
  line-height: 2.4;
}
@media (max-width: 760px) {
  .modal h2 {
    font-size: 24px;
  }
  .modal .shop-item h3,
  .modal .kit-card strong {
    font-size: 13px;
  }
  .modal p {
    font-size: 15px;
  }
  .modal-top .eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
  }
  .signal-strip {
    font-size: 10px;
    letter-spacing: 0.5px;
    gap: 7px;
  }
  .volume-control input[type="range"] {
    width: 100px;
  }
  .settings-channel .form-row label {
    font-size: 12px;
  }
  .modal[data-screen="settings"] {
    padding: 22px;
  }
}
.modal[data-screen="settings"] {
  padding: 26px;
}
.modal[data-screen="settings"] .modal-top {
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.modal[data-screen="settings"] .signal-strip {
  margin: 15px 0 18px;
}
.modal[data-screen="settings"] .settings-channel {
  margin-top: 18px;
}
.modal[data-screen="settings"] .settings-channel h3 {
  margin-bottom: 8px;
}
.modal[data-screen="settings"] .form-row {
  margin: 8px 0;
  min-height: 30px;
}
.modal[data-screen="settings"] .frequency-control {
  margin: 12px 0;
}
.modal[data-screen="settings"] .modal-actions {
  margin-top: 16px;
  padding-top: 16px;
}
#crt-tooltip {
  position: fixed;
  z-index: 105;
  width: max-content;
  max-width: min(260px, calc(100vw - 20px));
  padding: 12px 14px;
  border: 1px solid var(--teal);
  background: #0a262b;
  color: var(--cream);
  box-shadow:
    3px 3px 0 #04171b,
    inset 0 0 0 2px #284b42;
  font: 15px/1.6 var(--mono);
  pointer-events: none;
}

/* One pixel-language for the whole cabinet: no system typography or soft UI. */
body {
  font-synthesis: none;
  font-size: 18px;
}
button,
input,
select,
output {
  font-family: var(--mono);
  font-synthesis: none;
}
em {
  font-style: normal;
}
.ambient {
  background: repeating-linear-gradient(0deg, #173b3b 0 2px, #153637 2px 4px);
}
.ambient i {
  display: none;
}
.brand {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.4;
  text-shadow:
    3px 3px 0 #061b20,
    -1px 0 #ea93a233;
}
.brand-mark {
  display: flex;
  font-size: 36px;
}
.brand small {
  font: 12px/1.4 var(--mono);
  letter-spacing: 1px;
  width: 110px;
  margin-left: 12px;
}
.pixel-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  overflow: visible;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font: 32px/1.1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 #061b20;
}
.panel {
  background: #102c30;
  border: 2px solid #4b6e62;
  box-shadow:
    3px 3px 0 #071d22,
    inset 1px 1px 0 #9bbd9022;
}
.panel-label {
  color: #b1c3ab;
  letter-spacing: 1px;
}
.contract-name {
  font: 28px/1.1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0;
}
.contract-panel p {
  font: 16px/1.25 var(--mono);
}
.target-score {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.4;
}
.current-score {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.4;
}
.mini-stat strong {
  font: 28px/1 var(--mono);
}
.score-formula span {
  font: 28px/1 var(--mono);
}
.score-formula > div {
  border: 1px solid #70999866;
  box-shadow: 2px 2px 0 #071d22;
}
.score-formula > div:last-child {
  border-color: #ca8a9566;
}
.progress-track {
  height: 8px;
  border: 1px solid #577768;
  padding: 1px;
  background: #051b20;
}
.progress-track > div {
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0 5px,
    transparent 5px 7px
  );
  transition: width 0.2s steps(6);
}
.board-frame {
  border: 6px solid #426158;
  box-shadow:
    0 0 0 2px #0b2025,
    0 0 0 4px #7b977455,
    5px 7px 0 #061b20;
}
.board-frame::after {
  box-shadow: inset 0 0 0 1px #71957b44;
}
.board-overlay {
  background: #0b242bdf;
}
.jester-art {
  transform: none;
  filter: drop-shadow(6px 6px 0 #061b20);
}
.jester-art svg {
  image-rendering: pixelated;
}
.attract-title {
  font: 16px/1.8 var(--display);
  letter-spacing: -1px;
  text-shadow: 2px 2px 0 #061b20;
}
.attract-title em {
  display: inline;
  font-style: normal;
}
.board-overlay p {
  font: 18px/1.2 var(--mono);
}
.text-button {
  font-size: 14px;
  letter-spacing: 0.5px;
  border: 1px solid #bd768566;
  background: #28373b;
  padding: 10px 8px;
  box-shadow: 3px 3px 0 #061b20;
}
.trick {
  background: #0b252b;
  border-width: 2px;
  border-color: #57746a;
  box-shadow: 2px 2px 0 #061b20;
}
.trick-icon {
  display: flex;
  font-size: 28px;
}
.trick b {
  font: 16px/1 var(--mono);
}
.broadcast {
  background: #303d2c;
  border-color: #717950;
}
.broadcast p {
  font: 16px/1.25 var(--mono);
}
.oddity-subtitle {
  font: 16px var(--mono);
}
.relic-card {
  border-width: 2px;
  background: #183138;
  box-shadow: 3px 3px 0 #071d22;
  transition: none;
}
.relic-card:hover {
  transform: translateY(-3px);
}
.card-art {
  background:
    repeating-linear-gradient(45deg, #ffffff07 0 3px, transparent 3px 6px),
    color-mix(in srgb, var(--accent) 18%, #10252d);
}
.card-art::before {
  border-radius: 0;
  inset: 8px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.card-art > span {
  transform: none;
  font-size: 45px;
  display: flex;
  filter: drop-shadow(3px 3px 0 #071d22);
}
.card-name {
  font: 16px/1 var(--mono);
  padding: 8px 3px;
}
.relic-slot {
  border: 2px dashed #75937c44;
  background: #0c272d44;
}
.relic-slot > small {
  font-size: 11px;
  letter-spacing: 0.5px;
}
.live-lamp,
.status-dot {
  border-radius: 0;
  box-shadow: 2px 2px 0 #061b20;
}
kbd {
  font: 12px var(--mono);
  border-color: #74957a;
  background: #24453f;
  box-shadow: 1px 1px 0 #061b20;
}
.control-legend {
  gap: 12px;
}
.control-legend > span {
  font-size: 12px;
}
.footer-note {
  font-size: 11px;
  letter-spacing: 0.4px;
}
.modal-backdrop {
  backdrop-filter: none;
  background: #03171be8;
}
.modal {
  background: #102c30;
}
.modal h2 {
  font: 20px/1.5 var(--display);
  letter-spacing: -1px;
}
.modal h2 em {
  font-weight: 400;
}
.modal .help-item h3,
.modal .catalog-card h3,
.modal .shop-item h3,
.modal .kit-card strong {
  font: 22px/1.1 var(--mono);
}
.modal p {
  font: 18px/1.2 var(--mono);
}
.modal .kit-card p,
.modal .shop-item p,
.modal .catalog-card p,
.modal .shop-trick p {
  font-size: 16px;
}
.modal .flavor {
  font-size: 20px !important;
}
.modal .kit-card,
.modal .help-item,
.modal .catalog-card,
.modal .shop-item,
.modal .shop-trick,
.modal .pact {
  border-width: 2px;
  box-shadow: 3px 3px 0 #061b20;
}
.inventory-chip {
  font-size: 14px;
}
.inventory-chip .pixel-icon {
  color: var(--gold);
}
.modal .settings-note {
  font-size: 14px !important;
}
.settings-channel .form-row label {
  font-size: 16px;
}
.settings-channel h3 {
  font-size: 14px;
}
.frequency-control legend {
  font-size: 14px;
}
.frequency-option span {
  font-size: 16px;
  padding: 8px 5px;
}
.crt-switch::after {
  font-size: 16px;
  top: 5px;
}
.signal-strip {
  font-size: 12px;
}
.settings-saved {
  font-size: 12px;
}
#toast,
#crt-tooltip {
  font-size: 16px;
  line-height: 1.3;
}
@media (max-height: 930px) and (min-width: 901px) {
  .target-score {
    font-size: 28px;
  }
  .current-score {
    font-size: 24px;
  }
  .contract-name {
    font-size: 26px;
  }
  .card-art > span {
    font-size: 37px;
  }
  .attract-title {
    font-size: 16px;
  }
  .board-overlay p {
    font-size: 16px;
  }
  .board-signature {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
  .board-topline {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
  .start-button {
    font-size: 15px;
    letter-spacing: 0.5px;
  }
}
@media (max-width: 1050px) {
  .edition {
    font-size: 11px;
  }
  .topbar nav {
    gap: 12px;
  }
  .footer-note {
    display: none;
  }
  .brand small {
    display: none;
  }
}
@media (max-width: 760px) {
  .brand {
    font-size: 24px;
    letter-spacing: -1px;
    gap: 6px;
  }
  .brand-mark {
    font-size: 28px;
    margin-right: 0;
  }
  h1 {
    font-size: 26px;
  }
  .playing h1 {
    font-size: 23px;
  }
  .contract-name {
    font-size: 22px;
  }
  .target-score {
    font-size: 24px;
  }
  .current-score {
    font-size: 22px;
  }
  .playing .target-score {
    font-size: 24px;
  }
  .playing .current-score {
    font-size: 20px;
  }
  .playing .score-formula span {
    font-size: 18px;
  }
  .panel-label {
    font-size: 12px;
  }
  .playing .contract-panel .panel-label,
  .playing .score-panel > .panel-label {
    font-size: 11px;
    letter-spacing: 0.2px;
  }
  .board-topline {
    font-size: 9px;
    letter-spacing: 0;
  }
  .attract-title {
    font-size: 12px;
    letter-spacing: -0.5px;
    line-height: 1.8;
  }
  .board-overlay p {
    font-size: 16px;
  }
  .text-button {
    font-size: 11px;
    letter-spacing: 0;
  }
  .hold-panel > span {
    font-size: 10px;
  }
  .tricks-panel > .panel-label {
    font-size: 10px;
  }
  .trick b,
  .playing .trick b {
    font-size: 13px;
  }
  .trick-icon {
    font-size: 22px;
    width: 20px;
  }
  .card-name {
    font-size: 13px;
  }
  .card-art > span {
    font-size: 36px;
  }
  .relic-slot > small {
    font-size: 10px;
    letter-spacing: 0;
  }
  .modal h2 {
    font-size: 16px;
    line-height: 1.5;
  }
  .modal .shop-item h3,
  .modal .kit-card strong {
    font-size: 18px;
  }
  .modal .kit-card p,
  .modal .shop-item p {
    font-size: 14px;
  }
  .modal .kit-card small {
    font-size: 11px;
  }
  .modal p {
    font-size: 16px;
  }
  .modal[data-screen="settings"] {
    padding: 20px;
  }
  .settings-channel .form-row label {
    font-size: 14px;
  }
  .signal-strip {
    font-size: 10px;
  }
  .modal .settings-note {
    font-size: 12px !important;
  }
  .modal-actions .primary-button,
  .modal-actions .secondary-button {
    font-size: 14px;
  }
  .control-legend > span {
    font-size: 10px;
  }
}