body.metaeden-site {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(0, 255, 198, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 198, 0.08) 1px, transparent 1px),
    #050506;
  background-size: 22px 22px, 22px 22px;
  color: #e9fff9;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

body.metaeden-com-site {
  background: #ffffff;
  color: #000000;
}

.meta-shell {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 28px 0 42px;
}

.meta-hero {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 210px;
  border-bottom: 1px solid #56ffd8;
}

.meta-hero-compact {
  min-height: 150px;
}

.meta-mark {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid #56ffd8;
  background:
    linear-gradient(135deg, transparent 48%, #56ffd8 49% 51%, transparent 52%),
    repeating-linear-gradient(90deg, #0b0b0d 0 8px, #111826 8px 16px);
  box-shadow: 0 0 28px rgba(86, 255, 216, 0.35);
}

.meta-mark span {
  position: absolute;
  border: 1px solid #ff5bd7;
}

.meta-mark span:nth-child(1) {
  inset: 18px;
}

.meta-mark span:nth-child(2) {
  inset: 34px;
}

.meta-mark span:nth-child(3) {
  inset: 50px;
}

.meta-kicker {
  margin: 0 0 8px;
  color: #ffb7ef;
  font: 700 0.82rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-hero h1 {
  margin: 0;
  color: #ffffff;
  font: 700 4.3rem "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 0;
}

.meta-subtitle {
  max-width: 720px;
  color: #a8fff0;
  font-size: 1.15rem;
}

.meta-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  margin: 18px 0;
  border: 1px solid #56ffd8;
  background: #56ffd8;
}

.meta-nav a {
  display: block;
  padding: 12px 8px;
  background: #10172a;
  color: #56ffd8;
  font: 700 0.88rem "Courier New", monospace;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.meta-nav a:hover {
  background: #241339;
  color: #ffb7ef;
}

.meta-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 18px;
}

.meta-panel {
  border: 1px solid #56ffd8;
  background: rgba(5, 5, 6, 0.92);
  box-shadow: 8px 8px 0 rgba(255, 91, 215, 0.18);
  padding: 18px;
}

.meta-panel h2 {
  margin: 0 0 12px;
  color: #ffb7ef;
  font: 700 1.35rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-panel p {
  line-height: 1.55;
}

.meta-panel a {
  color: #56ffd8;
}

.meta-panel-large,
.meta-tools,
.meta-games-port {
  grid-column: 1 / -1;
}

.meta-status dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
}

.meta-status dt {
  color: #56ffd8;
  font-family: "Courier New", monospace;
}

.meta-status dd {
  margin: 0;
}

.meta-tools-board {
  margin-top: 14px;
}

.meta-tool-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.4fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.meta-tool-form label {
  display: grid;
  gap: 4px;
  color: #a8fff0;
  font: 700 0.78rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-tool-form input {
  min-height: 30px;
  border: 2px inset #c0c0c0;
  background: #ffffff;
  color: #000000;
  font: 0.95rem "Times New Roman", serif;
}

.meta-tool-form button,
.meta-tool-actions button {
  min-height: 32px;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  color: #000000;
  font-weight: 700;
}

.meta-tool-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.meta-tool-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px dotted #56ffd8;
  background: rgba(86, 255, 216, 0.08);
}

.meta-tool-row a {
  color: #ffffff;
  font-weight: 700;
}

.meta-tool-row p {
  margin: 4px 0 0;
  color: #a8fff0;
  font-size: 0.9rem;
}

.meta-tool-actions {
  display: flex;
  gap: 6px;
}

.meta-empty {
  padding: 12px;
  border: 1px dashed #ffb7ef;
  color: #ffb7ef;
}

.meta-portal-shell {
  width: 100%;
  height: 100%;
  min-height: 760px;
  margin: 0;
  padding: 0;
}

.meta-live-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 760px;
  border: 0;
  background: #ffffff;
}

body.metaeden-v2-site {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(18, 20, 28, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(18, 20, 28, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f7f9ff 0 62%, #d8f7ff 62% 74%, #f7f9ff 74%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  color: #12141c;
  font-family: Verdana, Arial, sans-serif;
}

.meta-v2-shell {
  width: min(100% - 44px, 1180px);
  margin: 0 auto;
  padding: 28px 0 44px;
}

.meta-v2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 22px;
  align-items: stretch;
  min-height: 230px;
  padding: 18px;
  border: 3px solid #12141c;
  background: #ffffff;
  box-shadow: 10px 10px 0 #c6ff3d;
}

.meta-v2-title {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 8px 0;
}

.meta-v2-kicker,
.meta-v2-label {
  margin: 0;
  color: #5d36ff;
  font: 700 0.82rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-v2-title h1 {
  margin: 0;
  color: #12141c;
  font: 800 4rem Verdana, Arial, sans-serif;
  letter-spacing: 0;
  line-height: 0.95;
}

.meta-v2-title p:last-child {
  max-width: 760px;
  margin: 0;
  color: #263247;
  font-size: 1.08rem;
  line-height: 1.55;
}

.meta-v2-signal {
  display: grid;
  grid-template-rows: 1fr auto auto;
  border: 3px solid #12141c;
  background:
    linear-gradient(90deg, transparent 0 46%, #12141c 46% 54%, transparent 54%),
    repeating-linear-gradient(0deg, #00b8d9 0 10px, #ffffff 10px 20px);
  color: #12141c;
  font: 800 1rem "Courier New", monospace;
}

.meta-v2-signal span {
  display: grid;
  place-items: center;
  padding: 8px;
  border-top: 3px solid #12141c;
  background: #ffffff;
}

.meta-v2-signal span:first-child {
  border-top: 0;
  background: #ff5a4d;
  color: #ffffff;
  font-size: 3.2rem;
}

.meta-v2-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 4px;
  margin: 18px 0;
}

.meta-v2-nav a {
  display: grid;
  min-height: 40px;
  place-items: center;
  border: 2px solid #12141c;
  background: #12141c;
  color: #ffffff;
  font: 800 0.82rem "Courier New", monospace;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.meta-v2-nav a:hover,
.meta-v2-nav a:focus-visible {
  background: #c6ff3d;
  color: #12141c;
  outline: 2px solid #ff5a4d;
  outline-offset: 2px;
}

.meta-v2-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 16px;
}

.meta-v2-band {
  padding: 18px;
  border: 3px solid #12141c;
  background: #ffffff;
  box-shadow: 6px 6px 0 rgba(18, 20, 28, 0.2);
}

.meta-v2-band-wide,
.meta-v2-game-port,
.meta-v2-tools-port {
  grid-column: 1 / -1;
}

.meta-v2-band h2 {
  margin: 6px 0 10px;
  color: #12141c;
  font: 800 1.45rem Verdana, Arial, sans-serif;
  letter-spacing: 0;
}

.meta-v2-band p {
  color: #263247;
  line-height: 1.55;
}

.meta-v2-band a {
  color: #5d36ff;
  font-weight: 800;
}

.meta-v2-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 12px 0 0;
}

.meta-v2-status dt {
  color: #5d36ff;
  font: 800 0.82rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-v2-status dd {
  margin: 0;
}

.meta-v2-game-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.meta-v2-game-links a {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 6px 8px;
  border: 2px solid #12141c;
  background: #d8f7ff;
  color: #12141c;
  font: 800 0.82rem "Courier New", monospace;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.meta-v2-game-links a:hover,
.meta-v2-game-links a:focus-visible {
  background: #ff5a4d;
  color: #ffffff;
  outline: 2px solid #5d36ff;
  outline-offset: 2px;
}

.metaeden-v2-site .meta-tools-board {
  margin-top: 12px;
}

.metaeden-v2-site .meta-tool-form {
  border: 2px solid #12141c;
  background: #f7f9ff;
  padding: 10px;
}

.metaeden-v2-site .meta-tool-form label {
  color: #12141c;
}

.metaeden-v2-site .meta-tool-row {
  border: 2px solid #12141c;
  background: #f7f9ff;
}

.metaeden-v2-site .meta-tool-row a {
  color: #5d36ff;
}

.metaeden-v2-site .meta-tool-row p,
.metaeden-v2-site .meta-empty {
  color: #263247;
}

.meta-v2-ring {
  border-color: #12141c;
  background: #ffffff;
  color: #12141c;
  box-shadow: 6px 6px 0 #00b8d9;
}

.meta-v2-ring .ring-controls a {
  border-color: #12141c;
  background: #12141c;
  color: #ffffff;
}

.meta-v2-ring a {
  color: #5d36ff;
}

body.section-page.metaeden-v2-site {
  background:
    linear-gradient(90deg, rgba(18, 20, 28, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(18, 20, 28, 0.08) 1px, transparent 1px),
    #f7f9ff;
  background-size: 28px 28px;
  color: #12141c;
  font-family: Verdana, Arial, sans-serif;
}

.section-page.metaeden-v2-site .section-shell {
  width: min(100% - 44px, 1180px);
  border: 3px solid #12141c;
  background: #ffffff;
  box-shadow: 10px 10px 0 #c6ff3d;
}

.section-page.metaeden-v2-site .section-shell h1,
.section-page.metaeden-v2-site .section-card h2 {
  color: #12141c;
  text-shadow: none;
}

.section-page.metaeden-v2-site .crumbs,
.section-page.metaeden-v2-site .section-nav,
.section-page.metaeden-v2-site .section-card {
  border-color: #12141c;
  background: #ffffff;
}

.section-page.metaeden-v2-site a {
  color: #5d36ff;
}

.v2-metaeden-section-page .section-shell {
  padding: 0;
}

.v2-metaeden-section-page .section-shell h1 {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 3px solid #12141c;
  font-size: 2.2rem;
  text-align: left;
}

.v2-metaeden-section-page .crumbs,
.v2-metaeden-section-page .section-nav {
  margin: 0;
  border-width: 0 0 3px;
  text-align: left;
}

.v2-metaeden-section-page .section-card {
  border: 0;
  background: transparent;
}

.meta-v2-node-page {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 0;
  border-top: 3px solid #12141c;
}

.meta-v2-node-mast {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 245px 1fr;
  border-bottom: 3px solid #12141c;
  background: #12141c;
  color: #ffffff;
  font-family: "Courier New", monospace;
}

.meta-v2-node-mast span,
.meta-v2-node-mast strong {
  padding: 10px 12px;
}

.meta-v2-node-mast span {
  background: #c6ff3d;
  color: #12141c;
}

.meta-v2-node-mast strong {
  background: #12141c;
  color: #ffffff;
  text-transform: uppercase;
}

.meta-v2-node-side {
  min-height: 340px;
  padding: 16px;
  border-right: 3px solid #12141c;
  background: #d8f7ff;
}

.meta-v2-node-content {
  min-height: 340px;
  padding: 18px;
  background: #ffffff;
}

.meta-v2-node-content p {
  max-width: 760px;
  line-height: 1.55;
}

.meta-v2-node-content ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  list-style: none;
}

.meta-v2-node-content li {
  margin: 0;
  padding: 10px;
  border: 2px solid #12141c;
  background: #f7f9ff;
}

.meta-v2-node-side h3 {
  margin-top: 0;
  color: #12141c;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

.meta-v2-node-side .section-link-list {
  padding-left: 0;
  list-style: none;
}

.meta-v2-node-side .section-link-list li {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.meta-v2-node-side .section-link-list a {
  display: block;
  padding: 8px;
  border: 2px solid #12141c;
  background: #ffffff;
  color: #12141c;
  font: 800 0.82rem "Courier New", monospace;
  text-decoration: none;
  text-transform: uppercase;
}

.meta-v2-node-side .section-link-list a:hover,
.meta-v2-node-side .section-link-list a:focus-visible {
  background: #ff5a4d;
  color: #ffffff;
  outline: 2px solid #5d36ff;
  outline-offset: 2px;
}

.meta-v2-side-note {
  margin-top: 14px;
  padding: 10px;
  border: 2px solid #12141c;
  background: #c6ff3d;
  color: #12141c;
  font: 700 0.82rem "Courier New", monospace;
}

.metaeden-v2-site .subject-table {
  color: #12141c;
}

.metaeden-v2-site .subject-table th,
.metaeden-v2-site .subject-table td {
  border: 2px solid #12141c;
}

.metaeden-v2-site .subject-table th {
  background: #12141c;
  color: #ffffff;
}

.metaeden-v2-site .subject-card {
  border: 2px solid #12141c;
  background: #f7f9ff;
}

.metaeden-v2-site .subject-card h4,
.metaeden-v2-site .subject-meta {
  color: #5d36ff;
}

.metaeden-v2-site .meta-game-jump {
  border: 3px solid #12141c;
  background: #ffffff;
  box-shadow: 6px 6px 0 #00b8d9;
}

.metaeden-v2-site .meta-game-jump h3 {
  color: #12141c;
}

.metaeden-v2-site .meta-game-jump-list {
  border-color: #12141c;
  background: #12141c;
}

.metaeden-v2-site .meta-game-jump-list a {
  background: #f7f9ff;
  color: #12141c;
}

.metaeden-v2-site .meta-game-jump-list a:hover,
.metaeden-v2-site .meta-game-jump-list a:focus-visible {
  background: #c6ff3d;
  color: #12141c;
  outline-color: #ff5a4d;
}

.metaeden-v2-site .meta-game-anchor {
  scroll-margin-top: 16px;
}

.metaeden-v2-site .meta-golf-game,
.metaeden-v2-site .meta-mines-game,
.metaeden-v2-site .meta-ttt-game,
.metaeden-v2-site .meta-pool-game,
.metaeden-v2-site .meta-sol-game,
.metaeden-v2-site .meta-art-game,
.metaeden-v2-site .meta-word-game,
.metaeden-v2-site .meta-lex-game {
  border: 3px solid #12141c;
  box-shadow: 8px 8px 0 #c6ff3d;
}

.metaeden-v2-site .meta-golf-top,
.metaeden-v2-site .meta-mines-top,
.metaeden-v2-site .meta-ttt-top,
.metaeden-v2-site .meta-pool-top,
.metaeden-v2-site .meta-sol-top,
.metaeden-v2-site .meta-art-top,
.metaeden-v2-site .meta-word-top,
.metaeden-v2-site .meta-lex-top {
  border-bottom-color: #12141c;
  background: #12141c;
}

.metaeden-v2-site .meta-golf-top h3,
.metaeden-v2-site .meta-mines-top h3,
.metaeden-v2-site .meta-ttt-top h3,
.metaeden-v2-site .meta-pool-top h3,
.metaeden-v2-site .meta-sol-top h3,
.metaeden-v2-site .meta-art-top h3,
.metaeden-v2-site .meta-word-top h3,
.metaeden-v2-site .meta-lex-top h3 {
  color: #c6ff3d;
}

body.metaeden-v3-site {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
  color: #222222;
  font: 12px Verdana, Arial, sans-serif;
}

.meta-v3-shell {
  width: min(100% - 20px, 1180px);
  margin: 8px auto 28px;
}

.meta-v3-header {
  border: 1px solid #ff6600;
  background: #ff6600;
}

.meta-v3-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 3px 6px;
  color: #000000;
}

.meta-v3-logo {
  display: grid;
  width: 26px;
  height: 22px;
  place-items: center;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #ff6600;
  font: 800 0.76rem Verdana, Arial, sans-serif;
  text-decoration: none;
}

/* The ME ligature, at the width left inside this box once its 1px border and
   the 26x22 it has always occupied are paid for.  currentColor above still
   supplies the ink. */
.meta-v3-logo svg {
  display: block;
  width: 22px;
  height: 14.5px;
}

.meta-v3-topline strong {
  font-size: 1rem;
}

.meta-v3-topline span:last-child {
  margin-left: auto;
}

.meta-v3-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  background: #cee3f8;
}

.meta-v3-tabs a,
.metaeden-v3-site a {
  color: #0000cc;
}

.meta-v3-tabs a {
  font-weight: 700;
  text-decoration: none;
}

.meta-v3-tabs a + a::before {
  color: #777777;
  content: "| ";
  font-weight: 400;
}

.metaeden-v3-site a:visited {
  color: #551a8b;
}

.meta-v3-layout {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 230px;
  gap: 8px;
  margin-top: 8px;
}

.meta-v3-left,
.meta-v3-right,
.meta-v3-main {
  border: 1px solid #cccccc;
  background: #f6f6ef;
}

.meta-v3-left,
.meta-v3-right {
  padding: 8px;
}

.meta-v3-left h2,
.meta-v3-right h2,
.meta-v3-games-post h2,
.meta-v3-tools-post h2 {
  margin: 0 0 7px;
  color: #333333;
  font: 700 0.92rem Verdana, Arial, sans-serif;
}

.meta-v3-left a {
  display: block;
  padding: 4px 0;
  text-decoration: none;
}

.meta-v3-right p,
.meta-v3-right dl {
  margin: 8px 0 0;
}

.meta-v3-right dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
}

.meta-v3-right dt {
  color: #777777;
}

.meta-v3-right dd {
  margin: 0;
}

.meta-v3-search {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 5px;
  align-items: center;
  padding: 6px;
  border-bottom: 1px solid #cccccc;
  background: #eeeeee;
}

.meta-v3-search input {
  min-width: 0;
  height: 24px;
  border: 1px solid #999999;
  background: #ffffff;
  color: #222222;
  font: 12px Verdana, Arial, sans-serif;
}

.meta-v3-search button,
.metaeden-v3-site button {
  min-height: 24px;
  border: 1px solid #888888;
  background: #eeeeee;
  color: #222222;
  font: 700 12px Verdana, Arial, sans-serif;
}

.meta-v3-posts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meta-v3-posts li {
  display: grid;
  grid-template-columns: 24px 42px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
  padding: 6px;
  border-bottom: 1px solid #dddddd;
}

.meta-v3-rank,
.meta-v3-score,
.meta-v3-comments,
.meta-v3-age {
  color: #777777;
}

.meta-v3-score {
  text-align: right;
}

.meta-v3-comments {
  white-space: nowrap;
}

.meta-v3-games-post,
.meta-v3-tools-post {
  margin: 8px;
  padding: 8px;
  border: 1px solid #cccccc;
  background: #ffffff;
}

.meta-v3-game-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 4px;
}

.meta-v3-game-links a {
  padding: 5px 6px;
  border: 1px solid #d7d7d7;
  background: #f6f6ef;
  text-decoration: none;
}

.meta-v3-ring {
  border: 1px solid #cccccc;
  background: #f6f6ef;
  color: #222222;
  box-shadow: none;
}

.meta-v3-ring .ring-controls a {
  border-color: #cccccc;
  background: #ffffff;
  color: #0000cc;
}

body.section-page.metaeden-v3-site {
  background: #ffffff;
  color: #222222;
  font: 12px Verdana, Arial, sans-serif;
}

.section-page.metaeden-v3-site .section-shell {
  width: min(100% - 20px, 1180px);
  border: 1px solid #cccccc;
  background: #f6f6ef;
  box-shadow: none;
}

.section-page.metaeden-v3-site .section-shell h1 {
  margin: 0;
  padding: 5px 8px;
  border-bottom: 1px solid #ff6600;
  background: #ff6600;
  color: #000000;
  font: 700 1rem Verdana, Arial, sans-serif;
  text-align: left;
  text-shadow: none;
}

.section-page.metaeden-v3-site .section-card h2 {
  color: #333333;
  font-size: 1rem;
  text-shadow: none;
}

.section-page.metaeden-v3-site .crumbs,
.section-page.metaeden-v3-site .section-nav {
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px solid #cccccc;
  background: #cee3f8;
  text-align: left;
}

.section-page.metaeden-v3-site .section-card {
  border: 0;
  background: transparent;
}

.v3-metaeden-section-page .section-shell {
  padding: 0;
}

.meta-v3-board-page {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border-top: 1px solid #cccccc;
}

.meta-v3-board-top {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid #cccccc;
  background: #eeeeee;
}

.meta-v3-board-side {
  padding: 8px;
  border-right: 1px solid #cccccc;
  background: #ffffff;
}

.meta-v3-board-side h3 {
  margin: 0 0 6px;
  color: #333333;
  font-size: 0.9rem;
}

.meta-v3-board-side .section-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.meta-v3-board-side .section-link-list li {
  margin: 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
}

.meta-v3-board-content {
  min-height: 330px;
  padding: 8px;
  background: #f6f6ef;
}

.meta-v3-board-content p {
  max-width: 760px;
  margin: 0 0 8px;
  line-height: 1.45;
}

.meta-v3-post-meta {
  color: #777777;
  font-size: 0.82rem;
}

.meta-v3-listings {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.meta-v3-listings li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid #dddddd;
}

.metaeden-v3-site .subject-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  color: #222222;
  font: 12px Verdana, Arial, sans-serif;
}

.metaeden-v3-site .subject-table th,
.metaeden-v3-site .subject-table td {
  padding: 5px 6px;
  border: 1px solid #cccccc;
  text-align: left;
  vertical-align: top;
}

.metaeden-v3-site .subject-table th {
  background: #eeeeee;
  color: #333333;
  text-transform: lowercase;
}

.metaeden-v3-site .subject-form {
  display: grid;
  gap: 8px;
  max-width: 620px;
  margin-top: 10px;
}

.metaeden-v3-site .subject-form label {
  display: grid;
  gap: 3px;
  color: #444444;
  font-weight: 700;
}

.metaeden-v3-site .subject-form input,
.metaeden-v3-site .subject-form textarea {
  min-height: 24px;
  border: 1px solid #999999;
  background: #ffffff;
  color: #222222;
  font: 12px Verdana, Arial, sans-serif;
}

.metaeden-v3-site .subject-form textarea {
  min-height: 96px;
}

.metaeden-v3-site .meta-tools-board,
.metaeden-v3-site .meta-tool-list {
  margin-top: 8px;
}

.metaeden-v3-site .meta-tool-form {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.5fr) minmax(130px, 1fr) auto;
  gap: 5px;
  align-items: end;
  padding: 6px;
  border: 1px solid #cccccc;
  background: #eeeeee;
}

.metaeden-v3-site .meta-tool-form label {
  color: #444444;
  font-size: 0.72rem;
}

.metaeden-v3-site .meta-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 6px;
  border: 1px solid #dddddd;
  background: #ffffff;
}

.metaeden-v3-site .meta-tool-row a {
  color: #0000cc;
}

.metaeden-v3-site .meta-tool-row p,
.metaeden-v3-site .meta-empty {
  color: #555555;
}

.metaeden-v3-site .meta-game-jump {
  gap: 5px;
  margin: 8px 0;
  padding: 6px;
  border: 1px solid #cccccc;
  background: #ffffff;
  box-shadow: none;
}

.metaeden-v3-site .meta-game-jump h3 {
  color: #333333;
  font: 700 0.9rem Verdana, Arial, sans-serif;
  text-transform: lowercase;
}

.metaeden-v3-site .meta-game-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 0;
  background: transparent;
}

.metaeden-v3-site .meta-game-jump-list a {
  min-height: 0;
  padding: 4px 6px;
  border: 1px solid #cccccc;
  background: #cee3f8;
  color: #0000cc;
  font: 700 12px Verdana, Arial, sans-serif;
  text-transform: none;
}

.metaeden-v3-site .meta-game-jump-list a:hover,
.metaeden-v3-site .meta-game-jump-list a:focus-visible {
  background: #ffefdb;
  color: #0000cc;
  outline: 1px dotted #000000;
  outline-offset: 1px;
}

.metaeden-v3-site .meta-game-anchor {
  scroll-margin-top: 10px;
}

.metaeden-v3-site .meta-golf-game,
.metaeden-v3-site .meta-mines-game,
.metaeden-v3-site .meta-ttt-game,
.metaeden-v3-site .meta-pool-game,
.metaeden-v3-site .meta-sol-game,
.metaeden-v3-site .meta-art-game,
.metaeden-v3-site .meta-word-game,
.metaeden-v3-site .meta-lex-game {
  margin-top: 10px;
  border: 1px solid #cccccc;
  box-shadow: none;
}

.metaeden-v3-site .meta-golf-top,
.metaeden-v3-site .meta-mines-top,
.metaeden-v3-site .meta-ttt-top,
.metaeden-v3-site .meta-pool-top,
.metaeden-v3-site .meta-sol-top,
.metaeden-v3-site .meta-art-top,
.metaeden-v3-site .meta-word-top,
.metaeden-v3-site .meta-lex-top {
  border-bottom-color: #cccccc;
  background: #eeeeee;
}

.metaeden-v3-site .meta-golf-top h3,
.metaeden-v3-site .meta-mines-top h3,
.metaeden-v3-site .meta-ttt-top h3,
.metaeden-v3-site .meta-pool-top h3,
.metaeden-v3-site .meta-sol-top h3,
.metaeden-v3-site .meta-art-top h3,
.metaeden-v3-site .meta-word-top h3,
.metaeden-v3-site .meta-lex-top h3 {
  color: #333333;
}

body.metaeden-arcade-site {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 47, 214, 0.28), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(0, 221, 255, 0.25), transparent 28%),
    linear-gradient(#05000f, #070014 62%, #11001c);
  color: #f8f7ff;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.meta-arcade-shell {
  width: min(100% - 40px, 1680px);
  margin: 0 auto;
  padding: 28px 0 44px;
}

.meta-arcade-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 2px solid #00e7ff;
  background:
    linear-gradient(180deg, rgba(5, 0, 15, 0.12), rgba(5, 0, 15, 0.58)),
    url("/assets/metaeden-arcade-bg.png") center / cover no-repeat;
  box-shadow:
    0 0 34px rgba(0, 231, 255, 0.5),
    10px 10px 0 rgba(255, 47, 214, 0.24);
}

.meta-arcade-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 34%, transparent 0 25%, rgba(5, 0, 15, 0.52) 64%);
  background-size: 100% 4px, 100% 100%;
  mix-blend-mode: screen;
}

.meta-arcade-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 760px;
  gap: 8px;
  padding: 34px;
}

.meta-arcade-hero-copy p {
  margin: 0;
  color: #87fff4;
  font: 800 0.86rem "Courier New", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 0 12px #00e7ff;
}

.meta-arcade-hero-copy h1 {
  margin: 0;
  color: #ffffff;
  font: 800 4.8rem "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 0;
  line-height: 0.95;
  text-shadow:
    0 0 10px #ff2fd6,
    0 0 24px #00e7ff,
    4px 4px 0 #120022;
}

.meta-arcade-hero-copy span {
  max-width: 590px;
  color: #fef0ff;
  font-size: 1.08rem;
  line-height: 1.45;
  text-shadow: 0 0 10px #120022;
}

.meta-arcade-art-switch {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(135, 255, 244, 0.82);
  background: rgba(4, 0, 16, 0.82);
  color: #87fff4;
  font: 800 0.76rem "Courier New", monospace;
  text-transform: uppercase;
  box-shadow: inset 0 0 14px rgba(0, 231, 255, 0.16), 0 0 16px rgba(0, 231, 255, 0.22);
}

.meta-arcade-art-toggle {
  display: inline-grid;
  grid-template-columns: 34px minmax(62px, auto);
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 4px 8px 4px 4px;
  border: 2px solid #ffb000;
  border-radius: 0;
  background: #130025;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(255, 176, 0, 0.24);
}

.meta-arcade-art-toggle i {
  position: relative;
  display: block;
  width: 34px;
  height: 16px;
  border: 1px solid #87fff4;
  background: #05000f;
  box-shadow: inset 0 0 6px rgba(0, 231, 255, 0.45);
}

.meta-arcade-art-toggle i::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #ffb000;
  box-shadow: 0 0 8px #ffb000;
  transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.meta-arcade-art-toggle strong {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

.meta-arcade-art-toggle:hover,
.meta-arcade-art-toggle:focus-visible {
  border-color: #87fff4;
  color: #05000f;
  background: #ffb000;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.metaeden-arcade-site[data-cabinet-art-mode="pixel"] .meta-arcade-art-toggle {
  border-color: #87fff4;
  box-shadow: 0 0 14px rgba(0, 231, 255, 0.36);
}

.metaeden-arcade-site[data-cabinet-art-mode="pixel"] .meta-arcade-art-toggle i::before {
  background: #87fff4;
  box-shadow: 0 0 8px #87fff4;
  transform: translateX(18px);
}

.meta-arcade-mgp-bar {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(135, 255, 244, 0.82);
  background: rgba(4, 0, 16, 0.78);
  backdrop-filter: blur(6px);
}

.meta-arcade-mgp-bar a,
.meta-arcade-branch-links a {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid #ffb000;
  background:
    linear-gradient(135deg, rgba(255, 176, 0, 0.18), rgba(255, 47, 214, 0.2)),
    #130025;
  color: #ffffff;
  font: 800 0.82rem "Courier New", monospace;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: inset 0 0 14px rgba(255, 176, 0, 0.24), 0 0 12px rgba(255, 47, 214, 0.28);
}

.meta-arcade-mgp-bar a:hover,
.meta-arcade-mgp-bar a:focus-visible,
.meta-arcade-branch-links a:hover,
.meta-arcade-branch-links a:focus-visible {
  border-color: #87fff4;
  background: #ff2fd6;
  color: #05000f;
  outline: 2px solid #87fff4;
  outline-offset: 2px;
}

.meta-arcade-concourse {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 18px;
  margin-top: 34px;
  padding: 22px 22px 28px;
  border: 2px solid rgba(255, 47, 214, 0.72);
  background:
    linear-gradient(rgba(0, 231, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 231, 255, 0.11) 1px, transparent 1px),
    radial-gradient(circle at 50% 0, rgba(255, 47, 214, 0.22), transparent 48%),
    #06000d;
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 38px rgba(0, 231, 255, 0.18);
}

.meta-arcade-cabinet {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 3px solid #120022;
  border-radius: 18px 18px 12px 12px;
  background:
    linear-gradient(90deg, #080014, #1c0032 42%, #080014),
    #090015;
  box-shadow:
    0 0 0 2px #00e7ff,
    0 0 26px rgba(0, 231, 255, 0.46),
    14px 14px 0 rgba(255, 47, 214, 0.18);
}

.meta-arcade-cabinet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px 14px 8px 8px;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.08);
}

.meta-arcade-cabinet-art {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 420px;
  padding: 20px;
  border-right: 3px solid #120022;
  background:
    linear-gradient(180deg, rgba(5, 0, 15, 0.12), rgba(5, 0, 15, 0.78)),
    url("/assets/metaeden-arcade-strip.png") center / cover no-repeat;
}

.meta-arcade-cabinet-art h2 {
  margin: 0;
  color: #ffffff;
  font: 800 2rem "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0 12px #ff2fd6, 2px 2px 0 #05000f;
}

.meta-arcade-cabinet-art p {
  margin: 0;
  color: #f8f7ff;
  line-height: 1.45;
  text-shadow: 0 0 8px #05000f;
}

.meta-arcade-cabinet-art .meta-arcade-kicker {
  color: #ffb000;
  font: 800 0.82rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-arcade-cabinet-art a {
  align-self: end;
  justify-self: start;
  margin-top: 16px;
  padding: 6px 9px;
  border: 1px solid #87fff4;
  background: rgba(0, 231, 255, 0.12);
  color: #ffffff;
  font: 800 0.75rem "Courier New", monospace;
  text-decoration: none;
  text-transform: uppercase;
}

.meta-arcade-screen {
  min-width: 0;
  padding: 18px;
  border: 12px solid #09000f;
  border-left: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 231, 255, 0.2), transparent 58%),
    #050506;
  overflow: auto;
}

.meta-arcade-screen > div {
  min-width: min(100%, 640px);
}

.cabinet-golf {
  --cabinet-accent: #00e7ff;
}

.cabinet-mines {
  --cabinet-accent: #ffb000;
}

.cabinet-ttt {
  --cabinet-accent: #9cff1a;
}

.cabinet-pool {
  --cabinet-accent: #00ff90;
}

.cabinet-solitaire {
  --cabinet-accent: #ff2f63;
}

.cabinet-artillery {
  --cabinet-accent: #ff7a00;
}

.cabinet-word {
  --cabinet-accent: #c16bff;
}

.cabinet-lex {
  --cabinet-accent: #87fff4;
}

.cabinet-snake {
  --cabinet-accent: #ff3da8;
}

.cabinet-vanish-boom-3d {
  --cabinet-accent: #6f8cff;
}

/* Dot Matrix: XYZ (TASK-1144[Q]).  Amber is one of the game's own four
   accents and the only one of them still free here: its pink is SnakeCycle's
   and its lime and cyan sit a few values off Neon Pool's and Mini Golf's. */
.cabinet-xyz {
  --cabinet-accent: #ffd400;
}

/* Strip Mine: Craft Later (TASK-1146[Q]).  Cyan is the game's diamond tier and
   its adapter's own brand color, and it is the last of the four accents the
   game actually uses that no cabinet had claimed: its pink is SnakeCycle's and
   its amber is XYZ's.  Its lime (#00ffa0) was the other candidate and was
   REJECTED -- Neon Pool's #00ff90 differs from it in one channel by 16/255, so
   the two would pass "no two cabinets share an accent" while being
   indistinguishable on the wall, which is the thing that rule is protecting. */
.cabinet-stripmine {
  --cabinet-accent: #5be7ff;
}

/* Gone Fishin' (TASK-1154[Q]; renamed by TASK-1185[Q]).  THE FIRST CABINET THAT COULD NOT TAKE ONE OF
   ITS OWN GAME'S ACCENTS, which is worth saying plainly rather than leaving the
   next reader to wonder why this one broke the pattern the two above it set.
   The game paints from the same four the arcade favours -- pink, lime, amber,
   cyan -- and every one is spoken for: pink is SnakeCycle's, amber is XYZ's,
   cyan is Strip Mine's, and lime (#00ffa0) is the one Strip Mine's own block
   above already argued against, since Neon Pool's #00ff90 differs from it in a
   single channel by 16/255 and the two are indistinguishable on the wall.  That
   reasoning does not stop applying just because a later cabinet would find it
   convenient.
   So it takes the pond's other colour instead: the dusk water itself, which the
   engine paints in a band of deep blues.  #1e9bff is the one hue gap the wall
   still has -- Mini Golf's #00e7ff sits at cyan and Vanish Boom 3D's #6f8cff at
   pale periwinkle, and nothing has claimed the true azure between them. */
.cabinet-fishing {
  --cabinet-accent: #1e9bff;
}

/* Rink of Destruction (TASK-1255[Q]).  The first cabinet whose game is not
   painted in neon at all: metaeden-rink.js declares its own brass/parchment
   arena palette at the top of its injected stylesheet (--rink-brass #b69a61,
   --rink-brass-light #ead8a0, --rink-ink, --rink-panel) and its handoff asks
   for that palette to stay, rather than be reskinned into the arcade's four
   accents.  So the accent is the game's own --rink-brass-light, which is also
   the one hue nothing on this wall holds -- every existing accent is a
   saturated primary or secondary, and the nearest of them by any channel is
   XYZ's #ffd400, which differs in blue by 160/255.  The darker --rink-brass
   was the other candidate and was rejected on the repo's contrast rule: the
   accent is drawn as a hairline border and a glow against a near-black wall,
   which is exactly where a muted mid-tone disappears. */
.cabinet-rink {
  --cabinet-accent: #ead8a0;
}

/* Wiki User Dungeon (TASK-1363[Q]), cabinet 15.  Green because it is the
   dungeon's own POI colour -- the one the map paints a place you can go --
   and because it is the last of that world's five accents no cabinet had
   claimed: its gold is Rink's, its cyan Strip Mine's, its pink SnakeCycle's,
   its yellow Dot Matrix's. */
.cabinet-wud {
  --cabinet-accent: #5bd56a;
}

.meta-arcade-cabinet {
  box-shadow:
    0 0 0 2px var(--cabinet-accent, #00e7ff),
    0 0 26px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 42%),
    14px 14px 0 rgba(255, 47, 214, 0.18);
}

.meta-arcade-branch-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 24px 0;
}

.meta-arcade-ring {
  border-color: #00e7ff;
  background: rgba(5, 0, 15, 0.9);
  color: #f8f7ff;
  box-shadow: 0 0 24px rgba(0, 231, 255, 0.28);
}

.meta-arcade-ring a {
  color: #87fff4;
}

.meta-arcade-ring .ring-controls a {
  border-color: #ffb000;
  background: #130025;
  color: #ffffff;
}

.metaeden-arcade-site .meta-golf-game,
.metaeden-arcade-site .meta-mines-game,
.metaeden-arcade-site .meta-ttt-game,
.metaeden-arcade-site .meta-pool-game,
.metaeden-arcade-site .meta-sol-game,
.metaeden-arcade-site .meta-art-game,
.metaeden-arcade-site .meta-word-game,
.metaeden-arcade-site .meta-lex-game {
  margin-top: 0;
  border-color: #87fff4;
  box-shadow: none;
}

.metaeden-arcade-site .meta-golf-top,
.metaeden-arcade-site .meta-mines-top,
.metaeden-arcade-site .meta-ttt-top,
.metaeden-arcade-site .meta-pool-top,
.metaeden-arcade-site .meta-sol-top,
.metaeden-arcade-site .meta-art-top,
.metaeden-arcade-site .meta-word-top,
.metaeden-arcade-site .meta-lex-top {
  background: #120022;
}

.metaeden-arcade-site .meta-golf-top h3,
.metaeden-arcade-site .meta-mines-top h3,
.metaeden-arcade-site .meta-ttt-top h3,
.metaeden-arcade-site .meta-pool-top h3,
.metaeden-arcade-site .meta-sol-top h3,
.metaeden-arcade-site .meta-art-top h3,
.metaeden-arcade-site .meta-word-top h3,
.metaeden-arcade-site .meta-lex-top h3 {
  color: #ffb000;
}

.meta-arcade-play-cabinet {
  position: fixed;
  z-index: 1000001;
  top: var(--arcade-modal-top, 50%);
  right: auto;
  bottom: auto;
  left: var(--arcade-modal-left, 50%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: var(--arcade-modal-width, min(100vw, 1920px));
  height: var(--arcade-modal-height, min(100vh, 1080px));
  height: var(--arcade-modal-height, min(100dvh, 1080px));
  max-height: var(--arcade-modal-height, 1080px);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, #080014, #1c0032 42%, #080014),
    #090015;
  box-shadow:
    0 0 0 2px #00e7ff,
    0 0 34px rgba(0, 231, 255, 0.48),
    16px 16px 0 rgba(255, 47, 214, 0.18);
  transform: var(--arcade-modal-transform, translate(-50%, -50%));
}

.meta-arcade-play-cabinet::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -54px;
  left: 50%;
  width: min(74%, 840px);
  height: 66px;
  transform: translateX(-50%);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(135, 255, 244, 0.3), rgba(255, 47, 214, 0.04));
  filter: blur(1px);
}

.meta-arcade-play-marquee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: end;
  padding: 18px 112px 18px 22px;
  border-bottom: 3px solid #120022;
  background:
    linear-gradient(180deg, rgba(5, 0, 15, 0.08), rgba(5, 0, 15, 0.78)),
    url("/assets/metaeden-arcade-strip.png") center / cover no-repeat;
}

.meta-arcade-play-marquee .meta-arcade-kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: #ffb000;
  font: 800 0.82rem "Courier New", monospace;
  text-transform: uppercase;
  text-shadow: 0 0 10px #05000f;
}

.meta-arcade-play-marquee h2 {
  margin: 0;
  color: #ffffff;
  font: 800 2.45rem "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0 12px #ff2fd6, 2px 2px 0 #05000f;
}

.meta-arcade-play-marquee p:last-child {
  margin: 0;
  color: #f8f7ff;
  line-height: 1.35;
  text-align: right;
  text-shadow: 0 0 8px #05000f;
}

.meta-arcade-shared-screen {
  height: auto;
  min-height: 0;
  border-left: 0;
  border-top: 12px solid #09000f;
}

.meta-arcade-shared-screen > .meta-arcade-game-panel {
  min-width: min(100%, 760px);
}

.meta-arcade-game-panel[hidden],
.meta-arcade-game-panel:not(.is-active) {
  display: none;
}

.meta-arcade-play-cabinet[hidden],
.meta-arcade-modal-backdrop[hidden] {
  display: none !important;
}

.meta-arcade-modal-backdrop {
  display: none;
  position: fixed;
  top: var(--arcade-modal-top, 0);
  left: var(--arcade-modal-left, 0);
  width: var(--arcade-modal-width, 100vw);
  height: var(--arcade-modal-height, 100vh);
  height: var(--arcade-modal-height, 100dvh);
  z-index: 1000000;
  border: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 231, 255, 0.18), transparent 42%),
    rgba(3, 0, 10, 0.62);
  cursor: zoom-out;
}

.meta-arcade-modal-close {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  min-width: 76px;
  padding: 8px 10px;
  border: 2px solid #87fff4;
  border-radius: 0;
  background: #05000f;
  color: #ffffff;
  cursor: pointer;
  font: 800 0.78rem "Courier New", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(0, 231, 255, 0.5);
}

/* TASK-1366[Q]: pop out sits to the LEFT of close, because close is the
   control people reach for without looking and it should not move. It wears
   .meta-arcade-modal-close as well, so the two are one shape and one hover
   state; everything here is position and the two properties an <a> needs to
   sit like a <button>. */
.meta-arcade-modal-pop {
  right: 98px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.meta-arcade-modal-close:hover,
.meta-arcade-modal-close:focus-visible {
  background: #ffb000;
  color: #05000f;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.meta-arcade-mgp-bar a.is-active,
.meta-arcade-mgp-bar a[aria-current="true"] {
  border-color: #87fff4;
  background: #ffb000;
  color: #05000f;
}

.meta-arcade-cart-wall {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(118px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 20px 14px 48px;
  overflow-x: auto;
  border: 1px solid rgba(135, 255, 244, 0.5);
  background:
    linear-gradient(180deg, rgba(5, 0, 15, 0.18), rgba(5, 0, 15, 0.72)),
    url("/assets/metaeden-arcade-bg.png") center 58% / cover no-repeat;
  box-shadow: inset 0 -28px 40px rgba(0, 0, 0, 0.64);
}

.meta-arcade-cart {
  position: relative;
  display: grid;
  min-width: 118px;
  min-height: 230px;
  align-content: space-between;
  gap: 8px;
  padding: 14px 10px 16px;
  border: 3px solid #120022;
  border-radius: 20px 20px 6px 6px;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.1) 12% 15%, transparent 15% 85%, rgba(255, 255, 255, 0.1) 85% 88%, transparent 88%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 34%),
    linear-gradient(135deg, rgba(255, 47, 214, 0.2), rgba(0, 231, 255, 0.18)),
    #100020;
  color: #ffffff;
  cursor: pointer;
  font-family: "Courier New", monospace;
  text-align: left;
  box-shadow:
    0 0 0 2px var(--cabinet-accent, #00e7ff),
    0 0 18px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 36%);
  transform-origin: center bottom;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.meta-arcade-cart::before {
  content: "";
  display: block;
  height: 72px;
  border: 2px solid var(--cabinet-accent, #00e7ff);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 30%), transparent 58%),
    #05000f;
  background-size: 100% 4px, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 45%);
}

.meta-arcade-cart::after {
  content: "";
  display: block;
  height: 28px;
  margin-top: 4px;
  border: 2px solid rgba(255, 176, 0, 0.78);
  border-radius: 0 0 8px 8px;
  background:
    radial-gradient(circle at 28% 52%, #ff2fd6 0 4px, transparent 5px),
    radial-gradient(circle at 50% 52%, #ffb000 0 4px, transparent 5px),
    radial-gradient(circle at 72% 52%, #87fff4 0 4px, transparent 5px),
    #080014;
}

.meta-arcade-cart span {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--cabinet-accent, #00e7ff);
  color: #05000f;
  font-weight: 800;
}

.meta-arcade-cart strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 8px #05000f;
}

.meta-arcade-cart em {
  color: #ffb000;
  font-fashion: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.meta-arcade-cart:hover,
.meta-arcade-cart:focus-visible,
.meta-arcade-cart.is-active {
  transform: translateY(-12px) scale(1.04);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.meta-arcade-cart.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 48%), rgba(255, 47, 214, 0.3)),
    #19002d;
  filter: saturate(1.2);
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 5px var(--cabinet-accent, #00e7ff),
    0 0 30px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 20%);
}

.meta-arcade-cart-wall {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 1920px);
  height: clamp(380px, 42vw, 760px);
  margin: 0 auto;
  aspect-ratio: 16 / 7;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(135, 255, 244, 0.66);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 47, 214, 0.2), transparent 38%),
    linear-gradient(rgba(0, 231, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 47, 214, 0.2) 1px, transparent 1px),
    linear-gradient(180deg, #020009 0 49%, #080016 50%, #020009 100%);
  background-size: 100% 100%, 100% 16.66%, 8.33% 100%, 100% 100%;
  box-shadow: inset 0 -34px 52px rgba(0, 0, 0, 0.66), 0 0 28px rgba(0, 231, 255, 0.16);
}

.meta-arcade-cart-wall::after {
  content: "select a cabinet";
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 120;
  padding: 6px 9px;
  border: 1px solid rgba(135, 255, 244, 0.8);
  background: rgba(4, 0, 16, 0.78);
  color: #87fff4;
  font: 800 0.78rem "Courier New", monospace;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00e7ff;
}

.meta-arcade-cart {
  position: absolute;
  z-index: var(--cabinet-z, 1);
  --active-cabinet-decal: var(--cabinet-decal-current);
  top: var(--cabinet-y, 18%);
  left: var(--cabinet-x, 0);
  display: block;
  width: var(--cabinet-w, 13%);
  height: var(--cabinet-h, 68%);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  overflow: visible;
  clip-path: none;
  text-align: center;
  transform-origin: center bottom;
  transition: filter 160ms ease, transform 160ms ease;
}

.meta-arcade-cart:hover,
.meta-arcade-cart:focus-visible,
.meta-arcade-cart.is-active {
  z-index: 100;
  outline: 0;
  transform: translateY(-1.4%) scale(1.02);
}

/* TASK-1393[Q]: AND THE FOCUS RING COMES BACK. The block above re-declares
   the same three selectors at the same specificity as the one eighty lines
   up, so its `outline: 0` silently deleted a white ring somebody had
   deliberately authored -- and these fifteen cabinets ARE the navigation of
   that page. Keyboard focus was left marked by a 1.4% lift identical to
   hover and to is-active, which is to say marked by nothing a keyboard user
   can tell apart.

   Only :focus-visible is given the ring back. Hover and is-active keep the
   lift alone on purpose: a mouse already knows where it is. */
.meta-arcade-cart:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.meta-arcade-cart.is-active {
  background: transparent;
  box-shadow: none;
}

.meta-arcade-cart::before,
.meta-arcade-cart::after {
  display: none;
}

.meta-arcade-cart > span:not([class]),
.meta-arcade-cart > em {
  display: none;
}

.meta-arcade-cart .meta-arcade-cabinet-shadow,
.meta-arcade-cart .meta-arcade-cabinet-side,
.meta-arcade-cart .meta-arcade-cabinet-face,
.meta-arcade-cart .meta-arcade-cabinet-face span,
.meta-arcade-cart .meta-arcade-cabinet-controls i {
  display: block;
}

.meta-arcade-cart .meta-arcade-cabinet-shadow {
  position: absolute;
  z-index: 0;
  top: auto;
  right: 1%;
  bottom: -5%;
  left: 4%;
  display: block;
  width: auto;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 32%), transparent 68%);
  color: inherit;
  filter: blur(2px);
  transform: skewX(-28deg);
}

.meta-arcade-cart .meta-arcade-cabinet-side {
  position: absolute;
  z-index: 1;
  top: 7%;
  right: 0;
  left: auto;
  display: block;
  width: 28%;
  height: 89%;
  clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(2, 0, 8, 0.42) 38%, rgba(1, 0, 6, 0.88)),
    var(--active-cabinet-decal, linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.12))) center / cover no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--cabinet-accent, #00e7ff), #05000f 34%), #070012 58%, #010006);
  border-right: 2px solid var(--cabinet-accent, #00e7ff);
  box-shadow:
    inset -14px 0 0 rgba(0, 0, 0, 0.62),
    inset -17px 0 0 var(--cabinet-accent, #00e7ff),
    inset 5px 0 0 rgba(255, 255, 255, 0.2),
    0 0 18px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 42%);
  filter:
    saturate(1.18)
    contrast(1.05)
    drop-shadow(2px 0 0 #020006)
    drop-shadow(0 2px 0 #020006)
    drop-shadow(0 -2px 0 #020006);
}

.meta-arcade-cart .meta-arcade-cabinet-face {
  position: absolute;
  z-index: 2;
  inset: 0 18% 0 0;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  clip-path: polygon(12% 0, 88% 4%, 100% 16%, 94% 100%, 9% 100%, 0 16%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2%, transparent 2% 96%, rgba(255, 255, 255, 0.12) 96% 98%, transparent 98%),
    linear-gradient(180deg, color-mix(in srgb, var(--cabinet-accent, #00e7ff), #05000f 28%) 0 10%, rgba(6, 0, 14, 0.62) 10% 54%, rgba(8, 0, 16, 0.74) 55% 100%),
    var(--active-cabinet-decal, linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1))) center / cover no-repeat,
    linear-gradient(180deg, #0b0017 0 51%, #14001f 52% 100%);
  box-shadow:
    inset 0 0 0 4px #020006,
    inset 0 0 0 7px var(--cabinet-accent, #00e7ff),
    inset 0 0 0 10px rgba(255, 255, 255, 0.12),
    inset 0 0 26px rgba(255, 255, 255, 0.08),
    0 0 20px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 38%);
  filter:
    drop-shadow(-2px 0 0 #020006)
    drop-shadow(2px 0 0 #020006)
    drop-shadow(0 -2px 0 #020006)
    drop-shadow(0 2px 0 #020006)
    drop-shadow(0 0 7px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 12%));
}

.meta-arcade-cart .meta-arcade-cabinet-face::before {
  content: "";
  position: absolute;
  inset: 3.5% 5.5%;
  border: 3px solid var(--cabinet-accent, #00e7ff);
  clip-path: inherit;
  opacity: 0.95;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #020006);
}

.meta-arcade-cart .meta-arcade-cabinet-face::after {
  content: "";
  position: absolute;
  inset: 11% 8% 6%;
  clip-path: polygon(5% 0, 90% 3%, 100% 14%, 93% 100%, 7% 100%, 0 14%);
  border-top: 3px solid rgba(255, 255, 255, 0.22);
  border-right: 4px solid rgba(0, 0, 0, 0.72);
  border-bottom: 5px solid rgba(0, 0, 0, 0.82);
  border-left: 3px solid color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 18%);
  pointer-events: none;
}

.meta-arcade-cart .meta-arcade-cabinet-screen {
  position: absolute;
  z-index: 3;
  top: 24%;
  right: auto;
  bottom: auto;
  left: 18%;
  width: 58%;
  height: 27%;
  overflow: hidden;
  border: 4px solid #050506;
  border-radius: 5px;
  background: #030006;
  box-shadow:
    0 0 0 3px #020006,
    0 0 0 6px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 18%),
    inset 0 0 18px rgba(255, 255, 255, 0.08);
}

.meta-arcade-cart .meta-arcade-cabinet-screen > span:not(.meta-arcade-start-art) {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  pointer-events: none;
}

.meta-arcade-cart .meta-arcade-start-art {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(0, 0, 0, 0.48) 82%),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    var(--cabinet-start, var(--cabinet-screen, radial-gradient(circle at 50% 50%, var(--cabinet-accent, #00e7ff), #05000f)));
  background-size: 100% 100%, 100% 5px, cover;
  background-position: center;
  image-rendering: pixelated;
  pointer-events: none;
}

.meta-arcade-cart .meta-arcade-start-title,
.meta-arcade-cart .meta-arcade-start-prompt {
  position: absolute;
  top: auto;
  bottom: auto;
  right: 5%;
  left: 5%;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-family: "Courier New", monospace;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow:
    2px 0 0 #020006,
    -2px 0 0 #020006,
    0 2px 0 #020006,
    0 -2px 0 #020006,
    0 0 8px var(--cabinet-accent, #00e7ff);
  text-transform: uppercase;
}

.meta-arcade-cart .meta-arcade-start-title {
  top: 7%;
  bottom: auto;
  color: #fff6bd;
  font-size: clamp(0.38rem, 0.58vw, 0.86rem);
  letter-spacing: 0;
}

.meta-arcade-cart .meta-arcade-start-prompt {
  top: auto;
  bottom: 8%;
  color: var(--cabinet-accent, #00e7ff);
  font-size: clamp(0.28rem, 0.44vw, 0.68rem);
  animation: meta-arcade-start-blink 1.1s steps(2, end) infinite;
}

.meta-arcade-cart .meta-arcade-cabinet-controls {
  position: absolute;
  z-index: 4;
  top: 55%;
  right: auto;
  bottom: auto;
  left: 17%;
  display: flex !important;
  width: 60%;
  height: 10%;
  align-items: center;
  justify-content: flex-end;
  gap: 5%;
  border: 3px solid #020006;
  border-top-color: color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 14%);
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #0e0018, #030006);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 38%);
}

.meta-arcade-cart .meta-arcade-cabinet-controls::before {
  content: "";
  position: absolute;
  left: 12%;
  bottom: 20%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffffff 0 12%, var(--cabinet-accent, #00e7ff) 13% 64%, #050506 65%);
  box-shadow: 0 0 8px var(--cabinet-accent, #00e7ff);
}

.meta-arcade-cart .meta-arcade-cabinet-controls i {
  display: block;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffffff 0 14%, var(--cabinet-accent, #00e7ff) 15% 70%, #050506 71%);
  box-shadow: 0 0 7px var(--cabinet-accent, #00e7ff);
}

.meta-arcade-cart .meta-arcade-cabinet-coin {
  position: absolute;
  z-index: 4;
  top: auto;
  right: auto;
  bottom: 14%;
  left: 29%;
  display: block;
  width: 30%;
  height: 17%;
  border: 4px solid #020006;
  border-radius: 5px;
  background:
    radial-gradient(circle at 34% 30%, #ff1b1b 0 8%, transparent 9%),
    radial-gradient(circle at 66% 30%, #ff1b1b 0 8%, transparent 9%),
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.18) 31% 34%, transparent 35% 65%, rgba(255, 255, 255, 0.18) 66% 69%, transparent 70%),
    #120b14;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 42%),
    inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.meta-arcade-cart strong {
  position: absolute;
  top: 5.5%;
  right: 23%;
  bottom: auto;
  left: 13%;
  z-index: 4;
  display: grid;
  min-height: 7.5%;
  place-items: center;
  padding: 5px 7px;
  border: 3px solid #020006;
  border-radius: 4px;
  outline: 2px solid color-mix(in srgb, var(--cabinet-accent, #00e7ff), #ffffff 20%);
  outline-offset: -5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.56)), #130025;
  color: #ffffff;
  box-shadow:
    0 0 0 2px var(--cabinet-accent, #00e7ff),
    0 0 14px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 22%);
  font: 800 clamp(0.56rem, 0.64vw, 0.82rem) "Courier New", monospace;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 8px #05000f;
  white-space: normal;
}

.meta-arcade-cart:hover .meta-arcade-cabinet-face,
.meta-arcade-cart:focus-visible .meta-arcade-cabinet-face,
.meta-arcade-cart.is-active .meta-arcade-cabinet-face {
  box-shadow:
    inset 0 0 0 4px #020006,
    inset 0 0 0 8px #ffffff,
    inset 0 0 0 11px var(--cabinet-accent, #00e7ff),
    inset 0 0 24px color-mix(in srgb, var(--cabinet-accent, #00e7ff), transparent 52%),
    0 0 26px var(--cabinet-accent, #00e7ff);
}

.meta-arcade-cart:hover strong,
.meta-arcade-cart:focus-visible strong,
.meta-arcade-cart.is-active strong {
  background: var(--cabinet-accent, #00e7ff);
  color: #05000f;
}

.metaeden-arcade-site[data-cabinet-art-mode="pixel"] .meta-arcade-cart {
  --active-cabinet-decal: var(--cabinet-decal-pixel, var(--cabinet-decal-current));
}

.metaeden-arcade-site[data-cabinet-art-mode="pixel"] .meta-arcade-cabinet-side,
.metaeden-arcade-site[data-cabinet-art-mode="pixel"] .meta-arcade-cabinet-face {
  image-rendering: pixelated;
}

/* THE FLOOR IS A FIXED-WIDTH ROW, so adding a cabinet re-spaces every cabinet
   (TASK-1127, redone for twelve in TASK-1146[Q], for thirteen in
   TASK-1154[Q] and for fourteen in TASK-1255[Q]).  The row is always full:
   it opens at 1% and closes at 98.8%,
   so a new cabinet cannot be appended, only made room for.  Every --cabinet-x
   offset and every --cabinet-w below is the previous row's value scaled by k
   about x = 1%, which is the ONE transform that leaves each pair's
   overlap-to-width ratio untouched (both terms carry the same k), so the row
   reads exactly as it did, just narrower per cabinet, with the new slot at the
   end.  --cabinet-y and --cabinet-h are deliberately NOT scaled: they carry the
   row's near-far arc, which is a vertical property and survives a horizontal
   re-space unchanged.

   THIS ROUND: one cabinet, so k = S / (S + P) where S = 97.8 (the span, which
   is the same 97.8 every round because the row's two ends never move) and
   P = 7.395 (the THIRTEEN-cabinet pitch this row currently carries, itself the
   previous round's 8.0 already scaled).  That gives k = 0.92970 and a row
   that closes at 98.8% again.  Cabinet 14 continues at the rescaled pitch
   (P*k = 6.8751) at cabinet 13's rescaled width.

   ROUND THE CHAIN ONCE, AT THE END.  The rescaled x for cabinet 14 is
   (previous UNROUNDED x) + P*k, not (previous SHIPPED x) + P*k -- feeding the
   already-rounded 83.5 back in puts the far end at 98.9% and quietly moves a
   wall that has closed at 98.8% since it was ten cabinets long.  One tenth of
   a percent is invisible on the glass and it is still the row's one fixed
   number, so it is worth the extra line of arithmetic.

   SO THE INPUT IS THE ROW AS IT STANDS, NOT THE TEN-CABINET ORIGINAL.  Reading
   the previous version of this note, which said "the ten-cabinet row's value",
   and reaching for the original numbers would re-derive a twelve-cabinet row
   and quietly drop a cabinet off the end.  S is fixed; P is whatever the
   current row's pitch is.

   THE PRECEDING ROUND'S HISTORY, kept because it is the argument for doing this
   properly: TASK-1144[Q] could not, and had to seat XYZ in the wall's leftover
   sliver (x 94.5% / w 5.4%, about half a cabinet) because a full re-space would
   have collided with cabinet 10's rename, then in flight.  TASK-1146[Q] reran
   the arithmetic and made it a full-width slot in row order.

   For a fifteenth: redo it rather than squeezing one in.  k = S / (S + nP)
   for n new cabinets, applied to every (x - 1%) and every w, then verify the
   result against C7-C14 in server/metaeden_net_arcade_vanish_boom_3d.test.js
   -- the rounded values that ship are what has to satisfy them, not the
   unrounded ones.  A5 in that same suite is an EXACT count and will go red
   the moment the row grows, which is the reminder to come back here.

   AND THE Z RUN IS NOW FULL.  Cabinets 10 through 14 sit at 95, 96, 97, 98,
   99, one apart, because 100 is the shared hover/active lift and C14 forbids
   a base z of 100.  A fifteenth cabinet has no free integer left at the top of
   that run: re-space the z values the same way the x values get re-spaced
   (95 -> 94, say) rather than reaching for 100. */
.cabinet-golf {
  --cabinet-x: 1%;
  --cabinet-y: 18%;
  --cabinet-w: 9.5%;
  --cabinet-h: 70%;
  --cabinet-z: 10;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-golf.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-golf.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-golf.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-golf.jpg");
}

.cabinet-mines {
  --cabinet-x: 7.379%;
  --cabinet-y: 21%;
  --cabinet-w: 8.6%;
  --cabinet-h: 66%;
  --cabinet-z: 20;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-minesweeper.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-minesweeper.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-minesweeper.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-minesweeper.jpg");
}

.cabinet-ttt {
  --cabinet-x: 13.757%;
  --cabinet-y: 21%;
  --cabinet-w: 8.6%;
  --cabinet-h: 66%;
  --cabinet-z: 30;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-tictactoe3d.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-tictactoe3d.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-tictactoe3d.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-tictactoe3d.jpg");
}

.cabinet-pool {
  --cabinet-x: 20.136%;
  --cabinet-y: 22.5%;
  --cabinet-w: 8.3%;
  --cabinet-h: 64.5%;
  --cabinet-z: 40;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-pool.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-pool.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-pool.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-pool.jpg");
}

.cabinet-solitaire {
  --cabinet-x: 26.514%;
  --cabinet-y: 22.5%;
  --cabinet-w: 8.3%;
  --cabinet-h: 64.5%;
  --cabinet-z: 50;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-solitaire.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-solitaire.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-solitaire.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-solitaire.jpg");
}

.cabinet-artillery {
  --cabinet-x: 32.893%;
  --cabinet-y: 21%;
  --cabinet-w: 8.6%;
  --cabinet-h: 66%;
  --cabinet-z: 60;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-artillery.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-artillery.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-artillery.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-artillery.jpg");
}

.cabinet-word {
  --cabinet-x: 39.271%;
  --cabinet-y: 20%;
  --cabinet-w: 9%;
  --cabinet-h: 67%;
  --cabinet-z: 70;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-word-fret.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-word-fret.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-word-fret.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-word-fret.jpg");
}

.cabinet-lex {
  --cabinet-x: 45.65%;
  --cabinet-y: 18%;
  --cabinet-w: 8.1%;
  --cabinet-h: 69%;
  --cabinet-z: 80;
  --cabinet-decal-current: url("/assets/arcade/decals/decal-lex-trace.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-lex-trace.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-lex-trace.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-lex-trace.jpg");
}

/* SnakeCycle cabinet (TASK-1015).  No painted art yet: the art CSS vars are
   deliberately UNDEFINED so the floor's built-in var() fallback chain renders
   the neon accent-gradient cabinet face + start-title text (the same graceful
   degradation every cabinet had before its art landed). */
.cabinet-snake {
  --cabinet-x: 52.029%;
  --cabinet-y: 19%;
  --cabinet-w: 8.5%;
  --cabinet-h: 68%;
  --cabinet-z: 90;
  /* Art slots -- paint the four files at these exact paths (match the
     siblings' framing/dimensions), then uncomment:
  --cabinet-decal-current: url("/assets/arcade/decals/decal-snakecycle.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-snakecycle.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-snakecycle.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-snakecycle.jpg");
  */
}

/* Vanish Boom 3D cabinet (TASK-1127).  It was the far end of the row when it
   landed and carried that end's near-to-camera framing (y/h copied from
   .cabinet-golf) so the row's arc closed the way it opened; cabinets 11 and 12
   now sit beyond it and keep that same near framing, so the arc still closes
   the way it opens, just two slots further along.  Its z sits at 95,
   deliberately NOT the sequence's next 100: 100 is the shared hover/active
   lift, and a base of 100 would let this cabinet occlude a hovered SnakeCycle
   through DOM order alone.  No painted art yet, exactly as cabinet 09 shipped:
   the art vars stay UNDEFINED so the floor's var() fallback chain renders the
   accent-gradient face and the start-title text. */
.cabinet-vanish-boom-3d {
  --cabinet-x: 58.407%;
  --cabinet-y: 18%;
  --cabinet-w: 8.5%;
  --cabinet-h: 70%;
  --cabinet-z: 94;
  /* Art slots -- paint the four files at these exact paths (match the
     siblings' framing/dimensions), then uncomment:
  --cabinet-decal-current: url("/assets/arcade/decals/decal-vanish-boom-3d.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-vanish-boom-3d.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-vanish-boom-3d.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-vanish-boom-3d.jpg");
  */
}

/* Dot Matrix: XYZ cabinet (TASK-1144[Q]), cabinet 11.
   THE DEBT THIS BLOCK CARRIED IS PAID (TASK-1146[Q]).  It shipped at
   x 94.5% / w 5.4%, about half a cabinet wedged into the wall's leftover
   sliver, because the correct fix -- redoing the k-rescale across the whole
   row -- would have collided with cabinet 10's rename, in flight that day.
   Its own note named that follow-up.  Cabinet 12 could not be seated any
   other way (after the sliver the row had ~1% left, which is a hairline, not
   a cabinet), so the re-space happened, and this slot is now full width and
   in row order like every other.
   The reason it was never merely cosmetic: without a floor slot a cabinet
   inherits the .meta-arcade-cart fallback of left:0 / z:1 and sits BEHIND
   cabinet 01, where elementFromPoint returns Mini Golf and the new cabinet
   cannot be clicked at all.  That is what cabinet 11 shipped as on its first
   pass.  A slot here is the difference between a working cabinet and an
   unreachable one, not a style preference -- which is why the row invariants
   (C7-C14) are tested and why a new cabinet is click-verified live.
   No painted art yet, the same TODO cabinets 09, 10 and 12 carry: the art
   vars stay UNDEFINED so the floor's var() fallback chain renders the
   accent-gradient face and the start-title text. */
.cabinet-xyz {
  --cabinet-x: 64.786%;
  --cabinet-y: 18%;
  --cabinet-w: 8.5%;
  --cabinet-h: 70%;
  --cabinet-z: 95;
  /* Art slots -- paint the four files at these exact paths (match the
     siblings' framing/dimensions), then uncomment:
  --cabinet-decal-current: url("/assets/arcade/decals/decal-xyz.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-xyz.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-xyz.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-xyz.jpg");
  */
}

/* Strip Mine: Craft Later cabinet (TASK-1146[Q]), cabinet 12 and the new far
   end of the row.  It closes the floor at 98.8%, where the row has always
   closed, and carries the near-to-camera framing that end has carried since
   Vanish Boom 3D (y/h from .cabinet-golf, unscaled -- the arc is vertical).
   Its z is 97, continuing 95 / 96 and staying below the shared hover lift of
   100 for the reason .cabinet-vanish-boom-3d gives.
   No painted art yet, the same TODO cabinets 09, 10 and 11 carry: the art
   vars stay UNDEFINED so the floor's var() fallback chain renders the
   accent-gradient face and the start-title text. */
.cabinet-stripmine {
  --cabinet-x: 71.164%;
  --cabinet-y: 18%;
  --cabinet-w: 8.5%;
  --cabinet-h: 70%;
  --cabinet-z: 96;
  /* Art slots -- paint the four files at these exact paths (match the
     siblings' framing/dimensions), then uncomment:
  --cabinet-decal-current: url("/assets/arcade/decals/decal-stripmine.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-stripmine.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-stripmine.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-stripmine.jpg");
  */
}

/* Gone Fishin' cabinet (TASK-1154[Q]; renamed by TASK-1185[Q]), cabinet 13 and the new far end of the
   row.  It closes the floor at 98.8%, where the row has always closed, and
   carries the near-to-camera framing that end has carried since Vanish Boom 3D
   (y/h from .cabinet-golf, unscaled -- the arc is vertical).  Its z is 98,
   continuing 95 / 96 / 97 and staying below the shared hover lift of 100 for
   the reason .cabinet-vanish-boom-3d gives.
   No painted art yet, the same TODO cabinets 09 through 12 carry: the art vars
   stay UNDEFINED so the floor's var() fallback chain renders the
   accent-gradient face and the start-title text. */
.cabinet-fishing {
  --cabinet-x: 77.543%;
  --cabinet-y: 18%;
  --cabinet-w: 8.5%;
  --cabinet-h: 70%;
  --cabinet-z: 97;
  /* Art slots -- paint the four files at these exact paths (match the
     siblings' framing/dimensions), then uncomment:
  --cabinet-decal-current: url("/assets/arcade/decals/decal-fishing.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-fishing.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-fishing.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-fishing.jpg");
  */
}

/* Rink of Destruction cabinet (TASK-1255[Q]), cabinet 14 and the new far end
   of the row.  It closes the floor at 98.8%, where the row has always closed,
   and carries the near-to-camera framing that end has carried since Vanish
   Boom 3D (y/h from .cabinet-golf, unscaled -- the arc is vertical).  Its z is
   99, continuing 95 / 96 / 97 / 98 and staying below the shared hover lift of
   100 for the reason .cabinet-vanish-boom-3d gives.  That run is now FULL --
   see the last paragraph of the arithmetic note above before adding a
   fifteenth.
   No painted art yet, the same TODO cabinets 09 through 13 carry: the art vars
   stay UNDEFINED so the floor's var() fallback chain renders the
   accent-gradient face and the start-title text. */
.cabinet-rink {
  --cabinet-x: 83.921%;
  --cabinet-y: 18%;
  --cabinet-w: 8.5%;
  --cabinet-h: 70%;
  --cabinet-z: 98;
  /* Art slots -- paint the four files at these exact paths (match the
     siblings' framing/dimensions), then uncomment:
  --cabinet-decal-current: url("/assets/arcade/decals/decal-rink.jpg");
  --cabinet-decal-pixel: url("/assets/arcade/decals-pixel/pixel-decal-rink.png");
  --cabinet-start: url("/assets/arcade/start-screens/start-rink.png");
  --cabinet-screen: url("/assets/arcade/screens/screen-rink.jpg");
  */
}

/* THE FIFTEENTH SEAT, AND THE ROW RE-SPACED TO MAKE IT (TASK-1363[Q]).
   .meta-arcade-cart-wall is a fixed-width block and every cabinet is placed
   by percentage, so seating this one moved all fourteen -- exactly as seating
   the fourteenth moved all thirteen, per the note above .cabinet-golf.
   ONLY x MOVED. Each cabinet keeps its own y, w and z, which is where the
   hand-drawn arc actually lives; the step tightened from about 6.85% to
   6.379%, so the row ends where it ended before and the cabinets simply
   overlap a little more, which is what a packed wall does anyway.
   No painted art yet, the same TODO cabinets 09 through 14 carry: the art
   vars stay UNDEFINED so the floor's var() fallback chain draws the plain
   ITS z IS 99, NOT 100, and that is C14 in the vanish-boom suite rather than
   a preference: 100 is the shared hover/active lift, so a cabinet based there
   would occlude a hovered neighbour through DOM order alone. The tail already
   ran 95 through 99, so the five ahead of it each slid down one. Order is
   unchanged; only the numbers are. */
.cabinet-wud {
  --cabinet-x: 90.3%;
  --cabinet-y: 18%;
  --cabinet-w: 8.5%;
  --cabinet-h: 70%;
  --cabinet-z: 99;
}

/* ---- SnakeCycle game panel (TASK-1015) ----------------------------------
   Readability per the game repo's UI rules: body text >= 0.8rem (12.8px),
   bright-on-dark colors at >= 4.5:1, constant border widths across states
   (no layout jitter). */
.meta-snake-game {
  display: grid;
  border: 1px solid #87fff4;
  background: #05000f;
  color: #d8fbff;
  font-family: "Courier New", monospace;
}

.meta-snake-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #87fff4;
  background: #120022;
}

.meta-snake-top h3 {
  margin: 0 0 4px;
  color: #ffb000;
  font: 700 1.1rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-snake-top p {
  margin: 0;
  color: #a8fff0;
  font: 0.86rem "Courier New", monospace;
}

/* Even column count, for the reason spelled out over the shared readout block
   further down: flat dt/dd pairs and an odd count walk out of phase. */
.meta-snake-readout {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 12px;
  margin: 0;
  font: 0.8rem "Courier New", monospace;
  text-align: right;
}

.meta-snake-readout dt {
  color: #87fff4;
  text-transform: uppercase;
}

.meta-snake-readout dd {
  margin: 0;
  color: #ffffff;
  font-weight: 800;
}

.meta-snake-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(135, 255, 244, 0.4);
  background: #0a0018;
}

.meta-snake-modes,
.meta-snake-rivals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-snake-rivals[hidden] {
  display: none;
}

.meta-snake-modes button,
.meta-snake-rivals button,
.meta-snake-start {
  min-height: 32px;
  padding: 0 12px;
  border: 2px solid #87fff4;
  background: #05000f;
  color: #d8fbff;
  font: 800 0.78rem "Courier New", monospace;
  text-transform: uppercase;
  cursor: pointer;
}

.meta-snake-modes button:focus-visible,
.meta-snake-rivals button:focus-visible,
.meta-snake-start:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.meta-snake-modes button[aria-pressed="true"],
.meta-snake-rivals button[aria-pressed="true"] {
  background: #87fff4;
  color: #05000f;
}

.meta-snake-start {
  margin-left: auto;
  border-color: #ff3da8;
  color: #ff8fd0;
}

.meta-snake-start:hover,
.meta-snake-start:focus-visible {
  background: #ff3da8;
  color: #05000f;
}

.meta-snake-stage {
  display: grid;
  place-items: center;
  padding: 12px;
  background: #030008;
}

.meta-snake-stage canvas {
  width: min(100%, 920px);
  height: auto;
  border: 2px solid rgba(135, 255, 244, 0.55);
  background: #05070d;
  image-rendering: pixelated;
}

.meta-snake-help {
  margin: 0;
  padding: 9px 12px;
  color: #a8fff0;
  font: 0.8rem "Courier New", monospace;
}

.metaeden-arcade-site:not([data-arcade-ready="true"]) .meta-arcade-play-cabinet {
  display: none;
}

.metaeden-arcade-site[data-arcade-ready="true"],
.metaeden-arcade-site[data-arcade-ready="true"] .browser-viewport {
  overflow: hidden;
}

.metaeden-arcade-site[data-arcade-ready="true"] .meta-arcade-modal-backdrop {
  display: block;
  animation: meta-arcade-backdrop-in 160ms ease-out both;
}

.metaeden-arcade-site[data-arcade-ready="true"] .meta-arcade-play-cabinet:not([hidden]) {
  display: grid;
  animation: meta-arcade-screen-open 180ms ease-out both;
}

.metaeden-arcade-site[data-arcade-ready="true"] .meta-arcade-cart-wall::after {
  content: "cabinet online";
}

.meta-arcade-play-cabinet::before {
  display: none;
}

@keyframes meta-arcade-screen-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes meta-arcade-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes meta-arcade-start-blink {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0.34;
  }
}

body.section-page.metaeden-site {
  background:
    linear-gradient(90deg, rgba(0, 255, 198, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 198, 0.08) 1px, transparent 1px),
    #050506;
  background-size: 22px 22px;
  color: #e9fff9;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.section-page.metaeden-site .section-shell {
  width: min(100% - 48px, 1040px);
  border: 1px solid #56ffd8;
  background: rgba(9, 13, 32, 0.92);
  box-shadow: 8px 8px 0 rgba(255, 91, 215, 0.18);
}

.section-page.metaeden-site .section-shell h1,
.section-page.metaeden-site .section-card h2 {
  color: #ffb7ef;
  text-shadow: none;
}

.section-page.metaeden-site .crumbs,
.section-page.metaeden-site .section-nav,
.section-page.metaeden-site .section-card {
  border: 1px solid #56ffd8;
  background: #10172a;
}

.section-page.metaeden-site a {
  color: #56ffd8;
}

.metaeden-section-page .section-shell {
  padding: 0;
}

.metaeden-section-page .section-shell h1 {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid #56ffd8;
  color: #ffffff;
  font-size: 2.2rem;
  text-align: left;
}

.metaeden-section-page .crumbs,
.metaeden-section-page .section-nav {
  margin: 0;
  border-width: 0 0 1px;
  text-align: left;
}

.metaeden-section-page .section-card {
  border: 0;
  background: transparent;
}

.meta-node-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1px;
  background: #56ffd8;
}

.meta-node-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1px;
  background: #56ffd8;
  color: #ffffff;
  font-family: "Courier New", monospace;
}

.meta-node-header span,
.meta-node-header strong {
  display: block;
  padding: 10px 12px;
  background: #050506;
}

.meta-node-header span {
  color: #a8fff0;
}

.meta-node-header strong {
  color: #ffb7ef;
  text-transform: uppercase;
}

.meta-node-content,
.meta-node-side {
  min-height: 330px;
  padding: 18px;
  background: #050506;
}

.meta-node-content {
  border-left: 14px solid #10172a;
}

.meta-node-content p {
  max-width: 680px;
  line-height: 1.55;
}

.meta-node-content ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}

.meta-node-content li {
  margin: 0;
  padding: 8px;
  border: 1px dotted #56ffd8;
  background: #10172a;
}

.meta-node-side h3 {
  margin-top: 0;
  color: #ffb7ef;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

.meta-node-side .section-link-list {
  padding-left: 0;
  list-style: none;
}

.meta-node-side .section-link-list li {
  border-bottom: 1px solid rgba(86, 255, 216, 0.35);
}

.meta-node-side .section-link-list a {
  display: block;
  padding: 7px 0;
  text-decoration: none;
}

.meta-node-content .subject-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  color: #e9fff9;
  font: 0.92rem "Courier New", monospace;
}

.meta-node-content .subject-table th,
.meta-node-content .subject-table td {
  padding: 8px;
  border: 1px solid #56ffd8;
  vertical-align: top;
  text-align: left;
}

.meta-node-content .subject-table th {
  background: #10172a;
  color: #ffb7ef;
  text-transform: uppercase;
}

.meta-node-content .subject-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.meta-node-content .subject-card {
  padding: 14px;
  border: 1px solid #56ffd8;
  background: #10172a;
}

.meta-node-content .subject-card h4 {
  margin: 0 0 8px;
  color: #ffb7ef;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

.meta-node-content .subject-meta {
  color: #a8fff0;
  font-family: "Courier New", monospace;
}

.meta-tool-note {
  padding: 10px;
  border-left: 10px solid #ffb7ef;
  background: #10172a;
  color: #ffffff;
  font-family: "Courier New", monospace;
}

.meta-contact-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #56ffd8;
  background: #10172a;
}

.meta-contact-form label {
  display: grid;
  gap: 4px;
  color: #a8fff0;
  font: 700 0.78rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-contact-form input,
.meta-contact-form textarea {
  min-height: 28px;
  border: 2px inset #c0c0c0;
  background: #ffffff;
  color: #000000;
}

.meta-contact-form textarea {
  min-height: 90px;
}

.meta-contact-form button {
  justify-self: start;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  color: #000000;
  font-weight: 700;
}

.section-page.metaeden-site.section-games .section-shell {
  width: min(100% - 48px, 1240px);
}

.section-games .meta-node-page {
  grid-template-columns: minmax(0, 1fr) 210px;
}

.section-games .meta-node-content {
  padding: 10px;
}

.section-games .meta-node-content > p {
  margin: 6px 0 10px;
}

.meta-game-jump {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
  padding: 10px;
  border: 1px solid #56ffd8;
  background: #10172a;
}

.meta-game-jump h3 {
  margin: 0;
  color: #ffb7ef;
  font: 700 0.98rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-game-jump-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  border: 1px solid #56ffd8;
  background: #56ffd8;
}

.meta-game-jump-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 8px;
  background: #050506;
  color: #e9fff9;
  font: 700 0.82rem "Courier New", monospace;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.meta-game-jump-list a:hover,
.meta-game-jump-list a:focus-visible {
  background: #241339;
  color: #ffb7ef;
  outline: 1px solid #ffb7ef;
  outline-offset: -3px;
}

.meta-game-anchor {
  scroll-margin-top: 14px;
}

.meta-game-shelf {
  display: grid;
  gap: 18px;
}

.meta-golf-game {
  margin-top: 12px;
  border: 1px solid #56ffd8;
  background: #050506;
  box-shadow: 8px 8px 0 rgba(255, 91, 215, 0.18);
}

.meta-golf-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #56ffd8;
  background: #10172a;
}

.meta-golf-top h3 {
  margin: 0 0 4px;
  color: #ffb7ef;
  font: 700 1.1rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-golf-top p {
  margin: 0;
  color: #a8fff0;
  font: 0.86rem "Courier New", monospace;
}

.meta-golf-readout {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 8px;
  margin: 0;
  color: #ffffff;
  font: 0.78rem "Courier New", monospace;
}

.meta-golf-readout dt {
  color: #56ffd8;
  text-transform: uppercase;
}

.meta-golf-readout dd {
  margin: 0;
  color: #ffffff;
}

.meta-golf-stage {
  padding: 6px;
  border-bottom: 1px solid #56ffd8;
  background: #050506;
}

.meta-golf-canvas {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 9 / 5;
  margin: 0 auto;
  border: 4px solid #56ffd8;
  background: #063d28;
  image-rendering: pixelated;
  touch-action: none;
}

.meta-golf-console {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(90px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 8px;
  background: #050506;
  color: #e9fff9;
}

.meta-golf-hole-name {
  padding: 6px;
  border: 1px dotted #ffb7ef;
  background: #10172a;
  color: #ffb7ef;
  font: 700 0.9rem "Courier New", monospace;
  text-align: center;
  text-transform: uppercase;
}

.meta-golf-power {
  height: 14px;
  border: 2px inset #c0c0c0;
  background: #000000;
}

.meta-golf-power span {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #56ffd8 0 8px, #ffb7ef 8px 16px);
}

.meta-golf-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.meta-golf-flippers {
  display: none;
  grid-template-columns: repeat(2, minmax(48px, 1fr));
  gap: 4px;
}

.meta-golf-game.is-pinball .meta-golf-flippers {
  display: grid;
}

/* 0.75rem, not 0.72rem: the old value computed to 11.52px, under the 12px
   readable-text floor CLAUDE.md sets, and the hole strip is 18 buttons a
   player reads to navigate the course. All three selectors were on the same
   declaration and all three are read, so the floor is met once here rather
   than carved out for the strip alone. Nothing gets wider: the strip is six
   44px columns on a phone (below) and 28px minimum on a desktop, both of
   which hold a two-digit label at 12px. */
.meta-golf-buttons button,
.meta-golf-flippers button,
.meta-golf-hole-list button {
  min-height: 28px;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  color: #000000;
  font: 700 0.75rem Arial, sans-serif;
}

.meta-golf-flippers button.is-active {
  border-color: #ffb7ef;
  background: #10172a;
  color: #ffb7ef;
}

.meta-golf-hole-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(18, minmax(28px, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meta-golf-hole-list button {
  width: 100%;
}

.meta-golf-hole-list button.is-current {
  border-color: #56ffd8;
  background: #10172a;
  color: #56ffd8;
}

.meta-golf-hole-list button.is-complete {
  color: #ff00aa;
}

.meta-golf-scoreline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 3px;
  color: #e9fff9;
  font: 0.72rem "Courier New", monospace;
}

.meta-golf-score-tile {
  padding: 4px 3px;
  border: 1px solid rgba(86, 255, 216, 0.45);
  text-align: center;
}

.meta-golf-score-tile.is-current {
  background: #10172a;
  color: #ffb7ef;
}

.meta-mines-game {
  --mine-cell: 24px;
  margin-top: 12px;
  border: 1px solid #56ffd8;
  background: #c0c0c0;
  box-shadow: 8px 8px 0 rgba(255, 91, 215, 0.18);
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

.meta-mines-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #56ffd8;
  background: #10172a;
  color: #e9fff9;
}

.meta-mines-top h3 {
  margin: 0 0 4px;
  color: #ffb7ef;
  font: 700 1.1rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-mines-top p {
  margin: 0;
  color: #a8fff0;
  font: 0.86rem "Courier New", monospace;
}

/* Even column count, same as snake and the shared block below. The audit named
   the shared block and snake and missed this one, but it is the identical
   defect in the identical shape -- minesweeper's Mines / Time / Best walked out
   of phase exactly as lex trace's did, and fixing eight readouts while leaving
   the ninth broken would just be the same bug report again. */
.meta-mines-readout {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 8px;
  margin: 0;
  color: #ffffff;
  font: 0.78rem "Courier New", monospace;
}

.meta-mines-readout dt {
  color: #56ffd8;
  text-transform: uppercase;
}

.meta-mines-readout dd {
  margin: 0;
  color: #ffffff;
}

.meta-mines-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-bottom: 2px inset #eeeeee;
  background: #c0c0c0;
}

.meta-mines-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.meta-mines-modes button,
.meta-mines-reset {
  min-height: 30px;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  color: #000000;
  font: 700 0.74rem Arial, sans-serif;
}

.meta-mines-modes button {
  padding: 0 9px;
}

.meta-mines-modes button.is-current {
  border-fashion: inset;
  background: #10172a;
  color: #56ffd8;
}

.meta-mines-reset {
  min-width: 48px;
  font: 700 0.95rem "Courier New", monospace;
}

.meta-mines-flag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  color: #000000;
  font: 700 0.78rem Arial, sans-serif;
  white-space: nowrap;
}

.meta-mines-stage {
  overflow: auto;
  padding: 10px;
  background: #808080;
}

.meta-mines-board {
  display: grid;
  grid-template-columns: repeat(var(--mine-cols), var(--mine-cell));
  width: max-content;
  margin: 0 auto;
  padding: 8px;
  border: 3px inset #eeeeee;
  background: #bdbdbd;
}

.meta-mines-cell {
  display: grid;
  width: var(--mine-cell);
  height: var(--mine-cell);
  min-width: var(--mine-cell);
  min-height: var(--mine-cell);
  place-items: center;
  padding: 0;
  border: 2px outset #eeeeee;
  background: #c0c0c0;
  color: #000000;
  font: 700 0.92rem Arial, Helvetica, sans-serif;
  line-height: 1;
  text-align: center;
}

.meta-mines-cell:focus {
  outline: 2px dotted #000000;
  outline-offset: -5px;
}

.meta-mines-cell.is-revealed {
  border: 1px solid #8b8b8b;
  background: #d6d6d6;
}

.meta-mines-cell.is-flagged {
  color: #ff00aa;
}

.meta-mines-cell.is-mine {
  background: #ffb7ef;
  color: #000000;
}

.meta-mines-cell.is-hit {
  background: #ff3b6e;
  color: #000000;
}

.meta-mines-cell.is-wrong {
  background: #10172a;
  color: #ffffff;
}

.meta-mines-cell[data-adjacent="1"] {
  color: #0000c0;
}

.meta-mines-cell[data-adjacent="2"] {
  color: #008000;
}

.meta-mines-cell[data-adjacent="3"] {
  color: #c00000;
}

.meta-mines-cell[data-adjacent="4"] {
  color: #000080;
}

.meta-mines-cell[data-adjacent="5"] {
  color: #800000;
}

.meta-mines-cell[data-adjacent="6"] {
  color: #008080;
}

.meta-mines-cell[data-adjacent="7"],
.meta-mines-cell[data-adjacent="8"] {
  color: #000000;
}

.meta-ttt-game,
.meta-pool-game,
.meta-sol-game,
.meta-art-game,
.meta-word-game,
.meta-lex-game,
.meta-marble-game {
  margin-top: 12px;
  border: 1px solid #56ffd8;
  background: #050506;
  box-shadow: 8px 8px 0 rgba(255, 91, 215, 0.18);
  color: #e9fff9;
}

.meta-ttt-top,
.meta-pool-top,
.meta-sol-top,
.meta-art-top,
.meta-word-top,
.meta-lex-top,
.meta-marble-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #56ffd8;
  background: #10172a;
}

.meta-ttt-top h3,
.meta-pool-top h3,
.meta-sol-top h3,
.meta-art-top h3,
.meta-word-top h3,
.meta-lex-top h3,
.meta-marble-top h3 {
  margin: 0 0 4px;
  color: #ffb7ef;
  font: 700 1.1rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-ttt-top p,
.meta-pool-top p,
.meta-sol-top p,
.meta-art-top p,
.meta-word-top p,
.meta-lex-top p,
.meta-marble-top p {
  margin: 0;
  color: #a8fff0;
  font: 0.86rem "Courier New", monospace;
}

/* A READOUT'S COLUMN COUNT MUST BE EVEN, and this one was 3 (TASK-1174[Q]).
   Every cartridge writes its readout as a flat run of <dt>label</dt><dd>value
   </dd> pairs with no wrapper around each pair, so the grid is what holds a
   label next to its own value. An ODD column count walks the pairs out of
   phase one step per row: lex trace read "Round | 1 / 4 | Time" across the
   top and put Time's value at the START of the next row, under Round, which
   is why the audit called it the worst instance -- five pairs and an odd
   count means no row after the first is honest.

   Four rather than two, which would also pair correctly: these are panel-top
   strips with short labels and short values, and two columns makes a five-pair
   readout five rows tall, pushing every playfield further down a screen the
   audit already flagged for burning its top half on chrome. Four gives two
   pairs a row and is what golf (:3189) and marble (:3701) have shipped
   correctly all along -- this brings the other nine onto the idiom that was
   already here rather than inventing a tenth. Any even number works if a
   future readout wants a different shape; an odd one is always a bug. */
.meta-ttt-readout,
.meta-pool-readout,
.meta-sol-readout,
.meta-art-readout,
.meta-word-readout,
.meta-lex-readout,
.meta-marble-readout {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 8px;
  margin: 0;
  color: #ffffff;
  font: 0.78rem "Courier New", monospace;
}

.meta-ttt-readout dt,
.meta-pool-readout dt,
.meta-sol-readout dt,
.meta-art-readout dt,
.meta-word-readout dt,
.meta-lex-readout dt,
.meta-marble-readout dt {
  color: #56ffd8;
  text-transform: uppercase;
}

.meta-ttt-readout dd,
.meta-pool-readout dd,
.meta-sol-readout dd,
.meta-art-readout dd,
.meta-word-readout dd,
.meta-lex-readout dd,
.meta-marble-readout dd {
  margin: 0;
  color: #ffffff;
}

.meta-ttt-controls,
.meta-pool-controls,
.meta-sol-controls,
.meta-art-controls,
.meta-word-controls,
.meta-lex-controls,
.meta-marble-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #56ffd8;
  background: #050506;
}

.meta-ttt-controls button,
.meta-pool-controls button,
.meta-sol-controls button,
.meta-art-controls button,
.meta-word-controls button,
.meta-lex-controls button,
.meta-marble-controls button {
  min-height: 30px;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  color: #000000;
  font: 700 0.74rem Arial, sans-serif;
}

.meta-pool-controls p,
.meta-sol-controls p,
.meta-word-controls p,
.meta-lex-controls p,
.meta-marble-controls p {
  margin: 0;
  color: #a8fff0;
  font: 0.82rem "Courier New", monospace;
}

/* Solitaire's double-click toggle reads its state off aria-pressed, so the
   face a player sees and the state a screen reader is told are one fact.
   Pressed is the Win95 inset face at the SAME 2px border, so the row does not
   shift when it flips.  Scoped to .meta-sol-controls on purpose: the button
   rule above is shared with six other cartridges that have no such toggle. */
.meta-sol-controls button[aria-pressed="true"] {
  border-style: inset;
  background: #a8a8a8;
}

/* The no-moves-left notice lives INSIDE the controls row, not beside it.  Both
   the arcade skin and the sideways fit-mode layout put .meta-sol-game's own
   children into named grid tracks, so a fourth child of the game would land in
   an implicit row and push the board; a child of the controls row inherits
   whatever those layouts already do with that row, the phone-held-sideways
   vertical rail included. */
.meta-sol-stuck {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid #ffb7ef;
  background: #2a0b22;
  color: #ffd8f4;
  font: 700 0.82rem "Courier New", monospace;
}

/* The class sets display:flex, which would otherwise beat the browser's own
   [hidden] rule and leave the notice on screen for the whole game. */
.meta-sol-stuck[hidden] {
  display: none;
}

.meta-marble-readout {
  grid-template-columns: repeat(4, auto);
}

.meta-ttt-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(136px, 1fr));
  gap: 8px;
  padding: 10px;
  background: #050506;
}

.meta-ttt-layer {
  border: 1px solid #56ffd8;
  background: #10172a;
}

.meta-ttt-layer h4 {
  margin: 0;
  padding: 6px;
  border-bottom: 1px solid #56ffd8;
  color: #ffb7ef;
  font: 700 0.78rem "Courier New", monospace;
  text-align: center;
  text-transform: uppercase;
}

.meta-ttt-layer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 6px;
}

.meta-ttt-cell {
  display: grid;
  aspect-ratio: 1;
  min-height: 30px;
  place-items: center;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
  color: #000000;
  font: 700 1.1rem "Courier New", monospace;
}

.meta-ttt-cell.is-x {
  color: #000080;
}

.meta-ttt-cell.is-o {
  color: #c00000;
}

.meta-ttt-cell.is-win {
  border-color: #ffb7ef;
  background: #56ffd8;
}

.meta-pool-stage {
  padding: 8px;
  background: #050506;
}

.meta-pool-canvas {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  aspect-ratio: 38 / 21;
  margin: 0 auto;
  border: 4px solid #56ffd8;
  background: #0d714e;
  touch-action: none;
}

.meta-sol-game {
  background: #0b5b3e;
}

.meta-sol-board {
  --sol-card-w: 78px;
  --sol-card-h: 108px;
  --sol-gap: 8px;
  padding: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    #0b5b3e;
  background-size: 18px 18px;
  overflow-x: auto;
}

.meta-sol-top-row {
  display: grid;
  grid-template-columns: repeat(2, var(--sol-card-w)) minmax(var(--sol-card-w), 1fr) repeat(4, var(--sol-card-w));
  gap: var(--sol-gap);
  min-width: calc(var(--sol-card-w) * 7 + var(--sol-gap) * 6);
  margin-bottom: 18px;
}

.meta-sol-tableau {
  display: grid;
  grid-template-columns: repeat(7, var(--sol-card-w));
  gap: var(--sol-gap);
  min-width: calc(var(--sol-card-w) * 7 + var(--sol-gap) * 6);
}

.meta-sol-pile {
  position: relative;
  min-width: var(--sol-card-w);
}

.meta-sol-card,
.meta-sol-empty {
  width: var(--sol-card-w);
  height: var(--sol-card-h);
  border: 2px solid #050506;
  border-radius: 5px;
  background: #fffef5;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
  font: 700 1rem "Times New Roman", serif;
  text-align: left;
  overflow: hidden;
}

.meta-sol-card {
  position: relative;
  padding: 0;
}

.meta-sol-pile .meta-sol-card {
  position: absolute;
  left: 0;
}

.meta-sol-card.red {
  color: #c00000;
}

.meta-sol-card.black {
  color: #000000;
}

.meta-sol-card.is-down {
  background:
    radial-gradient(circle at 50% 50%, rgba(86, 255, 216, 0.28) 0 22%, transparent 23%),
    linear-gradient(135deg, transparent 46%, #ffb7ef 47% 53%, transparent 54%),
    linear-gradient(45deg, transparent 46%, #56ffd8 47% 53%, transparent 54%),
    repeating-linear-gradient(45deg, #10172a 0 8px, #1b2b52 8px 16px);
  color: transparent;
}

.meta-sol-card.is-selected {
  outline: 3px solid #56ffd8;
  outline-offset: -6px;
}

.meta-sol-card.is-covered .meta-sol-art,
.meta-sol-card.is-covered .meta-sol-corner-bottom {
  display: none;
}

.meta-sol-card.is-covered .meta-sol-corner-top {
  top: 4px;
  left: 6px;
  grid-template-columns: auto auto;
  width: auto;
  gap: 4px;
  align-items: center;
  font-size: 0.86rem;
}

.meta-sol-card.is-covered .meta-sol-corner-suit {
  width: 10px;
  height: 10px;
}

.meta-sol-empty {
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  background: rgba(5, 5, 6, 0.24);
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
}

.meta-sol-empty.red {
  color: #c00000;
}

.meta-sol-empty.black {
  color: #000000;
}

.meta-sol-foundation-empty {
  background: rgba(255, 254, 245, 0.42);
}

.meta-sol-empty-suit {
  width: 25px;
  height: 25px;
  opacity: 0.58;
}

.meta-sol-empty.has-cards {
  border-fashion: solid;
  background:
    radial-gradient(circle at 50% 50%, rgba(86, 255, 216, 0.28) 0 22%, transparent 23%),
    linear-gradient(135deg, transparent 46%, #ffb7ef 47% 53%, transparent 54%),
    linear-gradient(45deg, transparent 46%, #56ffd8 47% 53%, transparent 54%),
    repeating-linear-gradient(45deg, #10172a 0 8px, #1b2b52 8px 16px);
  color: transparent;
}

.meta-sol-corner {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 18px;
  gap: 1px;
  justify-items: center;
  color: currentColor;
  font: 700 0.82rem "Times New Roman", serif;
  line-height: 0.9;
  pointer-events: none;
}

.meta-sol-corner-top {
  top: 5px;
  left: 5px;
}

.meta-sol-corner-bottom {
  right: 5px;
  bottom: 5px;
  transform: rotate(180deg);
}

.meta-sol-rank {
  display: block;
}

.meta-sol-suit {
  display: inline-block;
  width: 12px;
  height: 12px;
  color: currentColor;
  pointer-events: none;
}

.meta-sol-corner-suit {
  width: 9px;
  height: 9px;
}

.meta-sol-suit-S {
  background: currentColor;
  clip-path: polygon(50% 0, 86% 36%, 78% 62%, 58% 55%, 64% 100%, 36% 100%, 42% 55%, 22% 62%, 14% 36%);
}

.meta-sol-suit-H {
  background: currentColor;
  clip-path: polygon(50% 96%, 12% 58%, 2% 34%, 12% 12%, 34% 9%, 50% 24%, 66% 9%, 88% 12%, 98% 34%, 88% 58%);
}

.meta-sol-suit-D {
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.meta-sol-suit-C {
  background:
    radial-gradient(circle at 50% 30%, currentColor 0 29%, transparent 31%),
    radial-gradient(circle at 30% 54%, currentColor 0 27%, transparent 29%),
    radial-gradient(circle at 70% 54%, currentColor 0 27%, transparent 29%),
    linear-gradient(currentColor 0 0) 50% 82% / 28% 36% no-repeat;
}

.meta-sol-art {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.meta-sol-pip-grid {
  position: absolute;
  inset: 24px 13px 19px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
}

.meta-sol-pip {
  width: 11px;
  height: 11px;
}

.meta-sol-pip.is-large {
  width: 24px;
  height: 24px;
}

.meta-sol-royal {
  position: absolute;
  inset: 24px 13px 19px;
  display: grid;
  place-items: center;
}

.meta-sol-portrait {
  position: relative;
  display: grid;
  width: 42px;
  height: 58px;
  place-items: center;
  border: 1px solid currentColor;
  background:
    linear-gradient(135deg, rgba(86, 255, 216, 0.24), transparent 45%),
    linear-gradient(45deg, rgba(255, 183, 239, 0.3), transparent 52%),
    #fff8d9;
  overflow: hidden;
}

.meta-sol-portrait::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
}

.meta-sol-portrait::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 7px;
  left: 9px;
  height: 25px;
  border: 1px solid currentColor;
  background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px);
  opacity: 0.55;
}

.meta-sol-portrait-11 {
  transform: skew(-2deg);
}

.meta-sol-portrait-12 {
  border-radius: 16px 16px 4px 4px;
}

.meta-sol-portrait-13 {
  border-width: 2px;
  background:
    linear-gradient(135deg, rgba(255, 183, 239, 0.34), transparent 45%),
    linear-gradient(45deg, rgba(86, 255, 216, 0.3), transparent 52%),
    #fff8d9;
}

.meta-sol-royal-suit {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 13px;
  height: 13px;
  z-index: 2;
}

.meta-sol-royal-rank {
  position: relative;
  z-index: 3;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #fffef5;
  font: 700 1rem "Times New Roman", serif;
}

/* TEN, NOT FIVE, AND IT MEANS THE SAME THING (TASK-1174[Q]). Word fret's
   readout is five pairs -- Score, Best, Streak, Lives, Time -- and this rule
   was written to put all five across one row. But a grid column here holds ONE
   <dt> or ONE <dd>, not a pair, so five columns fitted two and a half pairs to
   a row and walked every one after the first out of phase. Five pairs across
   is ten columns. The desktop layout this rule was reaching for is what it now
   actually produces. */
.meta-word-readout {
  grid-template-columns: repeat(10, auto);
}

.meta-word-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a8fff0;
  font: 700 0.78rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-word-controls select,
.meta-word-controls input {
  min-height: 30px;
  border: 2px inset #c0c0c0;
  background: #ffffff;
  color: #000000;
  font: 700 0.9rem "Courier New", monospace;
}

.meta-word-controls input {
  flex: 1 1 210px;
  min-width: 180px;
  padding: 3px 7px;
  text-transform: lowercase;
}

.meta-word-controls input.is-error {
  background: #ffe1ef;
  color: #a00000;
}

.meta-word-stage {
  padding: 8px;
  background: #050506;
}

.meta-word-track {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 760px;
  height: 260px;
  margin: 0 auto;
  border: 4px solid #56ffd8;
  background:
    linear-gradient(90deg, transparent 0 76px, rgba(255, 183, 239, 0.22) 77px 80px, transparent 81px),
    linear-gradient(90deg, transparent 0 92%, rgba(255, 59, 0, 0.28) 92.3% 93%, transparent 93.3%),
    #10172a;
  overflow: hidden;
}

.meta-word-lane {
  position: relative;
  border-bottom: 1px dashed rgba(86, 255, 216, 0.42);
}

.meta-word-lane:last-of-type {
  border-bottom: 0;
}

.meta-word-lane span {
  position: absolute;
  top: 50%;
  left: 12px;
  color: rgba(168, 255, 240, 0.58);
  font: 700 0.78rem "Courier New", monospace;
  transform: translateY(-50%);
}

.meta-word-finish {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  display: grid;
  width: 56px;
  place-items: center;
  border-right: 2px solid #ffb7ef;
  color: #ffb7ef;
  font: 900 0.72rem "Courier New", monospace;
  letter-spacing: 0;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}

.meta-word-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.meta-word-token {
  position: absolute;
  display: inline-grid;
  min-width: 70px;
  padding: 4px 8px;
  place-items: center;
  border: 1px solid #56ffd8;
  background: #050506;
  color: #ffffff;
  box-shadow: 3px 3px 0 rgba(255, 183, 239, 0.32);
  font: 900 0.88rem "Courier New", monospace;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.meta-word-token.is-target {
  border-color: #ffb7ef;
  color: #ffb7ef;
}

.meta-word-token.is-danger {
  border-color: #ff3b00;
  color: #ffb000;
}

/* Ten for five pairs, exactly as word fret above, and this is the one the audit
   measured: Round, Time, Score, Best, Words, with Time's value landing on the
   next row underneath Round. Both per-game overrides sat BELOW the shared block
   and outside the narrow media query, so this readout was the rare thing that
   was correct on a phone and wrong on a desktop once the shared rule was
   fixed -- which is how a desktop check caught it after the phone one passed. */
.meta-lex-readout {
  grid-template-columns: repeat(10, auto);
}

.meta-lex-controls input {
  flex: 1 1 190px;
  min-width: 180px;
  min-height: 30px;
  padding: 3px 7px;
  border: 2px inset #c0c0c0;
  background: #ffffff;
  color: #000000;
  font: 900 0.9rem "Courier New", monospace;
  text-transform: lowercase;
}

.meta-lex-controls input.is-error {
  background: #ffe1ef;
  color: #a00000;
}

.meta-lex-stage {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(150px, 190px);
  gap: 10px;
  padding: 10px;
  background: #3f3f3f;
}

.meta-lex-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  grid-template-rows: repeat(6, minmax(42px, 1fr));
  gap: 7px;
  align-self: start;
  max-width: 520px;
  min-height: 360px;
  margin: 0 auto;
  padding: 12px;
  border: 3px solid #c0c0c0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    #333333;
  background-size: calc(100% / 6) calc(100% / 6);
}

.meta-lex-tile {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  border: 2px solid #050506;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 55%, #ffe88a 0 55%, #d5a84b 76%, #85621f 100%);
  color: #050506;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.42);
  font: 900 clamp(1.05rem, 3vw, 1.65rem) "Courier New", monospace;
  line-height: 1;
}

.meta-lex-tile.is-blue {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 55%, #9fe6ff 0 55%, #4fa7d5 76%, #1e5c86 100%);
}

.meta-lex-tile.is-pink {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 55%, #ffd3df 0 55%, #d7819b 76%, #88465d 100%);
}

.meta-lex-tile.is-path {
  outline: 4px solid #ff3b00;
  outline-offset: -2px;
}

.meta-lex-tile.is-last {
  box-shadow:
    0 0 0 4px rgba(255, 183, 239, 0.5),
    2px 3px 0 rgba(0, 0, 0, 0.42);
}

.meta-lex-tile[data-path-index]::after {
  content: attr(data-path-index);
  position: absolute;
  right: -2px;
  bottom: -4px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #050506;
  border-radius: 50%;
  background: #ff3b00;
  color: #ffffff;
  font: 900 0.62rem Arial, sans-serif;
}

.meta-lex-found {
  min-height: 0;
  border: 2px inset #c0c0c0;
  background: #e7e7d4;
  color: #050506;
}

.meta-lex-found h4 {
  margin: 0;
  padding: 6px 8px;
  border-bottom: 1px solid #808080;
  background: #c0c0c0;
  font: 900 0.78rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-lex-found ol {
  display: grid;
  max-height: 312px;
  gap: 3px;
  margin: 0;
  padding: 8px 8px 8px 28px;
  overflow: auto;
  font: 700 0.8rem "Courier New", monospace;
}

.meta-lex-found li {
  padding: 4px 6px;
  border: 1px solid #b2b299;
  background: #fffef5;
  color: #050506;
}

.meta-lex-found li:nth-child(odd) {
  background: #f3f0d5;
}

.meta-art-stage,
.meta-marble-stage {
  padding: 8px;
  background: #050506;
}

.meta-art-canvas,
.meta-marble-canvas {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  border: 4px solid #56ffd8;
  background: #10172a;
  image-rendering: auto;
}

.meta-art-canvas {
  aspect-ratio: 76 / 39;
}

.meta-marble-canvas {
  aspect-ratio: 38 / 21;
  background: #000000;
}

.meta-art-controls label {
  display: grid;
  min-width: 170px;
  gap: 4px;
  color: #a8fff0;
  font: 700 0.78rem "Courier New", monospace;
  text-transform: uppercase;
}

.meta-art-controls input {
  accent-color: #ffb7ef;
}

body.metaeden-arcade-site .meta-arcade-play-marquee {
  min-height: 78px;
  padding: 12px 112px 12px 18px;
}

body.metaeden-arcade-site .meta-arcade-play-marquee h2 {
  font-size: 1.95rem;
}

body.metaeden-arcade-site .meta-arcade-shared-screen {
  display: grid;
  min-height: 0;
  padding: 14px;
  overflow: hidden;
  border-top-width: 8px;
}

body.metaeden-arcade-site .meta-arcade-game-panel.is-active {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.metaeden-arcade-site .meta-arcade-game-panel > div {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

body.metaeden-arcade-site .meta-golf-game,
body.metaeden-arcade-site .meta-mines-game,
body.metaeden-arcade-site .meta-ttt-game,
body.metaeden-arcade-site .meta-pool-game,
body.metaeden-arcade-site .meta-sol-game,
body.metaeden-arcade-site .meta-art-game,
body.metaeden-arcade-site .meta-word-game,
body.metaeden-arcade-site .meta-lex-game {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-width: 2px;
}

body.metaeden-arcade-site .meta-golf-game,
body.metaeden-arcade-site .meta-pool-game,
body.metaeden-arcade-site .meta-art-game {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

body.metaeden-arcade-site .meta-mines-game,
body.metaeden-arcade-site .meta-ttt-game,
body.metaeden-arcade-site .meta-sol-game,
body.metaeden-arcade-site .meta-word-game,
body.metaeden-arcade-site .meta-lex-game {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body.metaeden-arcade-site .meta-golf-top,
body.metaeden-arcade-site .meta-mines-top,
body.metaeden-arcade-site .meta-ttt-top,
body.metaeden-arcade-site .meta-pool-top,
body.metaeden-arcade-site .meta-sol-top,
body.metaeden-arcade-site .meta-art-top,
body.metaeden-arcade-site .meta-word-top,
body.metaeden-arcade-site .meta-lex-top {
  padding: 12px 16px;
}

body.metaeden-arcade-site .meta-golf-top h3,
body.metaeden-arcade-site .meta-mines-top h3,
body.metaeden-arcade-site .meta-ttt-top h3,
body.metaeden-arcade-site .meta-pool-top h3,
body.metaeden-arcade-site .meta-sol-top h3,
body.metaeden-arcade-site .meta-art-top h3,
body.metaeden-arcade-site .meta-word-top h3,
body.metaeden-arcade-site .meta-lex-top h3 {
  font-size: 1.35rem;
}

body.metaeden-arcade-site .meta-golf-readout,
body.metaeden-arcade-site .meta-mines-readout,
body.metaeden-arcade-site .meta-ttt-readout,
body.metaeden-arcade-site .meta-pool-readout,
body.metaeden-arcade-site .meta-sol-readout,
body.metaeden-arcade-site .meta-art-readout,
body.metaeden-arcade-site .meta-word-readout,
body.metaeden-arcade-site .meta-lex-readout {
  gap: 5px 12px;
  font-size: 0.88rem;
}

body.metaeden-arcade-site .meta-golf-stage,
body.metaeden-arcade-site .meta-pool-stage,
body.metaeden-arcade-site .meta-art-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 18px;
  overflow: hidden;
}

body.metaeden-arcade-site .meta-golf-canvas,
body.metaeden-arcade-site .meta-pool-canvas,
body.metaeden-arcade-site .meta-art-canvas {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-width: 6px;
}

body.metaeden-arcade-site .meta-golf-console,
body.metaeden-arcade-site .meta-pool-controls,
body.metaeden-arcade-site .meta-art-controls {
  padding: 12px 16px;
}

body.metaeden-arcade-site .meta-golf-console {
  grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr) auto auto;
  gap: 10px;
}

body.metaeden-arcade-site .meta-golf-hole-list,
body.metaeden-arcade-site .meta-golf-scoreline {
  gap: 4px;
}

body.metaeden-arcade-site .meta-golf-hole-list button {
  min-height: 34px;
}

body.metaeden-arcade-site .meta-mines-game {
  --mine-cell: clamp(32px, 2.5vw, 50px);
}

body.metaeden-arcade-site .meta-mines-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: 18px;
}

body.metaeden-arcade-site .meta-mines-board {
  margin: auto;
}

body.metaeden-arcade-site .meta-mines-cell {
  font-size: clamp(1rem, 1.18vw, 1.4rem);
}

body.metaeden-arcade-site .meta-ttt-board {
  --ttt-field-x: 0px;
  --ttt-field-y: 0px;
  --ttt-reticle-x: 0px;
  --ttt-reticle-y: 0px;
  --ttt-ridge-x: 0px;
  --ttt-ridge-y: 0px;
  --ttt-stars-x: 0px;
  --ttt-stars-y: 0px;
  --ttt-glow-x: 50%;
  --ttt-glow-y: 42%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  align-content: center;
  align-items: center;
  min-height: 0;
  padding:
    clamp(62px, 7vh, 88px)
    clamp(34px, 3vw, 58px)
    clamp(104px, 13vh, 148px);
  gap: clamp(20px, 2vw, 38px);
  border: 2px solid #73fff0;
  background:
    radial-gradient(circle at var(--ttt-glow-x) var(--ttt-glow-y), rgba(0, 231, 255, 0.12), transparent 32%),
    #000000;
  box-shadow:
    inset 0 0 0 8px #02070a,
    inset 0 0 0 9px rgba(0, 231, 255, 0.35),
    inset 0 0 46px rgba(0, 231, 255, 0.1),
    0 0 16px rgba(0, 231, 255, 0.34);
  overflow: hidden;
}

body.metaeden-arcade-site .meta-ttt-board::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgba(99, 255, 235, 0.42);
  background:
    linear-gradient(90deg, #73fff0 0 32px, transparent 32px calc(100% - 32px), #73fff0 calc(100% - 32px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, #73fff0 0 32px, transparent 32px calc(100% - 32px), #73fff0 calc(100% - 32px)) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, #73fff0 0 32px, transparent 32px calc(100% - 32px), #73fff0 calc(100% - 32px)) left / 1px 100% no-repeat,
    linear-gradient(0deg, #73fff0 0 32px, transparent 32px calc(100% - 32px), #73fff0 calc(100% - 32px)) right / 1px 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 0 22px rgba(0, 231, 255, 0.08);
}

body.metaeden-arcade-site .meta-ttt-board::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(112, 255, 237, 0.035) 5px 6px),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.76) 100%);
  mix-blend-mode: screen;
}

body.metaeden-arcade-site .meta-ttt-vector-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.metaeden-arcade-site .meta-ttt-vector-stars {
  position: absolute;
  inset: -18px;
  background:
    radial-gradient(circle at 4% 17%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 11% 72%, #73fff0 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 31%, #ffffff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 24% 8%, #ffb000 0 1px, transparent 1.6px),
    radial-gradient(circle at 31% 61%, #73fff0 0 1px, transparent 1.8px),
    radial-gradient(circle at 37% 22%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 44% 81%, #ffffff 0 1px, transparent 1.7px),
    radial-gradient(circle at 51% 12%, #73fff0 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 57% 66%, #ff4fdf 0 1px, transparent 1.8px),
    radial-gradient(circle at 63% 29%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 69% 88%, #73fff0 0 1px, transparent 1.7px),
    radial-gradient(circle at 76% 18%, #ffffff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 83% 57%, #ffb000 0 1px, transparent 1.7px),
    radial-gradient(circle at 91% 11%, #73fff0 0 1px, transparent 1.8px),
    radial-gradient(circle at 96% 76%, #ffffff 0 1.2px, transparent 1.8px);
  opacity: 0.76;
  transform: translate3d(var(--ttt-stars-x), var(--ttt-stars-y), 0);
  transition: transform 150ms ease-out;
  filter: drop-shadow(0 0 4px rgba(115, 255, 240, 0.72));
}

body.metaeden-arcade-site .meta-ttt-vector-horizon {
  position: absolute;
  right: -7%;
  bottom: -13%;
  left: -7%;
  height: 58%;
  background:
    repeating-linear-gradient(90deg, rgba(75, 255, 224, 0.76) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(75, 255, 224, 0.62) 0 1px, transparent 1px 38px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%);
  opacity: 0.66;
  transform: perspective(430px) rotateX(64deg) translate3d(var(--ttt-field-x), var(--ttt-field-y), 0);
  transform-origin: center top;
  transition: transform 150ms ease-out;
  filter:
    drop-shadow(0 0 4px rgba(0, 255, 218, 0.72))
    drop-shadow(0 0 12px rgba(0, 157, 255, 0.34));
}

body.metaeden-arcade-site .meta-ttt-vector-ridge {
  position: absolute;
  top: 39%;
  left: -3%;
  width: 106%;
  height: 31%;
  overflow: visible;
  opacity: 0.46;
  transform: translate3d(var(--ttt-ridge-x), var(--ttt-ridge-y), 0);
  transition: transform 150ms ease-out;
  filter: drop-shadow(0 0 6px rgba(0, 231, 255, 0.66));
}

body.metaeden-arcade-site .meta-ttt-vector-ridge polyline {
  fill: none;
  stroke: #59ffe2;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body.metaeden-arcade-site .meta-ttt-vector-ridge polyline:last-child {
  stroke: rgba(255, 79, 223, 0.68);
}

body.metaeden-arcade-site .meta-ttt-vector-reticle {
  position: absolute;
  top: 32%;
  left: 50%;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(255, 176, 0, 0.62);
  border-radius: 50%;
  transform: translate3d(calc(-50% + var(--ttt-reticle-x)), var(--ttt-reticle-y), 0);
  transition: transform 130ms ease-out;
  box-shadow:
    0 0 8px rgba(255, 176, 0, 0.35),
    inset 0 0 8px rgba(255, 176, 0, 0.2);
}

body.metaeden-arcade-site .meta-ttt-vector-reticle::before,
body.metaeden-arcade-site .meta-ttt-vector-reticle::after {
  content: "";
  position: absolute;
  background: rgba(255, 176, 0, 0.82);
  box-shadow: 0 0 5px rgba(255, 176, 0, 0.58);
}

body.metaeden-arcade-site .meta-ttt-vector-reticle::before {
  top: 50%;
  left: -17px;
  width: 102px;
  height: 1px;
}

body.metaeden-arcade-site .meta-ttt-vector-reticle::after {
  top: -17px;
  left: 50%;
  width: 1px;
  height: 102px;
}

body.metaeden-arcade-site .meta-ttt-vector-telemetry {
  position: absolute;
  top: 25px;
  right: 28px;
  left: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgba(115, 255, 240, 0.82);
  font: 700 0.7rem "Courier New", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 7px rgba(0, 231, 255, 0.72);
}

body.metaeden-arcade-site .meta-ttt-vector-telemetry span:last-child {
  color: #ffb000;
  text-shadow: 0 0 7px rgba(255, 176, 0, 0.6);
}

body.metaeden-arcade-site .meta-ttt-layer {
  position: relative;
  z-index: 3;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 1px solid #73fff0;
  background: rgba(0, 3, 6, 0.14);
  box-shadow:
    0 0 0 1px rgba(115, 255, 240, 0.12),
    0 0 7px rgba(0, 231, 255, 0.64),
    inset 0 0 22px rgba(0, 231, 255, 0.05);
}

body.metaeden-arcade-site .meta-ttt-layer::before,
body.metaeden-arcade-site .meta-ttt-layer::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  transition: transform 130ms ease-out;
}

body.metaeden-arcade-site .meta-ttt-layer::before {
  inset: -9px 9px 9px -9px;
  border: 1px solid rgba(0, 231, 255, 0.58);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  transform: translate3d(var(--ttt-parallax-x, 0px), var(--ttt-parallax-y, 0px), 0);
  box-shadow: 0 0 8px rgba(0, 231, 255, 0.24);
}

body.metaeden-arcade-site .meta-ttt-layer::after {
  inset: -16px 16px 16px -16px;
  border: 1px solid rgba(255, 79, 223, 0.42);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  transform: translate3d(var(--ttt-parallax-back-x, 0px), var(--ttt-parallax-back-y, 0px), 0);
  box-shadow: 0 0 8px rgba(255, 79, 223, 0.16);
}

body.metaeden-arcade-site .meta-ttt-layer:nth-child(n) {
  margin-left: 0;
}

body.metaeden-arcade-site .meta-ttt-layer:nth-of-type(1) {
  translate: 0 -16px;
}

body.metaeden-arcade-site .meta-ttt-layer:nth-of-type(2) {
  translate: 0 -5px;
}

body.metaeden-arcade-site .meta-ttt-layer:nth-of-type(3) {
  translate: 0 6px;
}

body.metaeden-arcade-site .meta-ttt-layer:nth-of-type(4) {
  translate: 0 17px;
}

body.metaeden-arcade-site .meta-ttt-layer h4 {
  position: relative;
  z-index: 1;
  width: auto;
  padding: 8px 10px 7px;
  border: 0;
  border-bottom: 1px solid rgba(115, 255, 240, 0.7);
  background: rgba(0, 0, 0, 0.9);
  color: #ffb000;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 176, 0, 0.78);
  transform: none;
}

body.metaeden-arcade-site .meta-ttt-layer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  aspect-ratio: 1;
  padding: 5px;
  gap: 2px;
  border: 0;
  background: rgba(0, 2, 4, 0.08);
  box-shadow:
    inset 0 0 24px rgba(0, 231, 255, 0.06),
    0 0 10px rgba(0, 231, 255, 0.12);
  transform: none;
}

body.metaeden-arcade-site .meta-ttt-cell {
  display: grid;
  aspect-ratio: 1;
  min-height: 0;
  place-items: center;
  border: 1px solid rgba(115, 255, 240, 0.78);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font: 700 clamp(1.35rem, 2.2vw, 2.5rem) "Courier New", monospace;
  line-height: 1;
  box-shadow:
    inset 0 0 12px rgba(0, 231, 255, 0.035),
    0 0 3px rgba(0, 231, 255, 0.18);
  outline-offset: -4px;
}

body.metaeden-arcade-site .meta-ttt-cell:hover,
body.metaeden-arcade-site .meta-ttt-cell:focus-visible {
  border-color: #ffffff;
  background: rgba(0, 255, 216, 0.1);
  outline: 3px solid #ffb000;
  box-shadow:
    inset 0 0 16px rgba(0, 231, 255, 0.2),
    0 0 12px rgba(0, 231, 255, 0.7);
}

body.metaeden-arcade-site .meta-ttt-cell::after {
  content: none;
}

body.metaeden-arcade-site .meta-ttt-cell.is-x {
  color: #8efff0;
  text-shadow:
    0 0 3px #ffffff,
    0 0 10px #00e7ff,
    0 0 20px rgba(0, 231, 255, 0.66);
}

body.metaeden-arcade-site .meta-ttt-cell.is-o {
  color: #ffb000;
  text-shadow:
    0 0 3px #ffffff,
    0 0 10px #ff5a00,
    0 0 20px rgba(255, 90, 0, 0.68);
}

body.metaeden-arcade-site .meta-ttt-cell.is-win {
  border-color: #ffffff;
  background: #123f3a;
  box-shadow:
    inset 0 0 0 3px #fffc58,
    0 0 18px #fffc58,
    inset 0 0 20px rgba(255, 252, 88, 0.4);
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  body.metaeden-arcade-site .meta-ttt-vector-stars,
  body.metaeden-arcade-site .meta-ttt-vector-horizon,
  body.metaeden-arcade-site .meta-ttt-vector-ridge,
  body.metaeden-arcade-site .meta-ttt-vector-reticle,
  body.metaeden-arcade-site .meta-ttt-layer::before,
  body.metaeden-arcade-site .meta-ttt-layer::after {
    transform: none;
    transition: none;
  }
}

body.metaeden-arcade-site .meta-sol-board {
  --sol-card-w: 144px;
  --sol-card-h: 200px;
  --sol-gap: 16px;
  --sol-tableau-offset: 48px;
  min-height: 0;
  height: 100%;
  padding: 18px;
  overflow: auto;
}

body.metaeden-arcade-site .meta-sol-top-row,
body.metaeden-arcade-site .meta-sol-tableau {
  justify-content: center;
}

body.metaeden-arcade-site .meta-sol-card,
body.metaeden-arcade-site .meta-sol-empty {
  border-radius: 7px;
  font-size: 1.18rem;
}

body.metaeden-arcade-site .meta-sol-corner {
  width: 24px;
  font-size: 1.05rem;
}

body.metaeden-arcade-site .meta-sol-pip-grid,
body.metaeden-arcade-site .meta-sol-royal {
  inset: 30px 18px 24px;
}

body.metaeden-arcade-site .meta-sol-pip {
  width: 20px;
  height: 20px;
}

body.metaeden-arcade-site .meta-sol-pip.is-large {
  width: 44px;
  height: 44px;
}

body.metaeden-arcade-site .meta-sol-portrait {
  width: 82px;
  height: 116px;
}

body.metaeden-arcade-site .meta-word-stage {
  min-height: 0;
  padding: 18px;
  overflow: hidden;
}

body.metaeden-arcade-site .meta-word-track {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 420px;
  border-width: 6px;
}

body.metaeden-arcade-site .meta-word-token {
  min-width: 94px;
  padding: 7px 12px;
  font-size: clamp(1rem, 1.2vw, 1.35rem);
}

body.metaeden-arcade-site .meta-word-finish {
  width: 72px;
  font-size: 0.86rem;
}

body.metaeden-arcade-site .meta-lex-stage {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: stretch;
  min-height: 0;
  gap: 18px;
  padding: 18px;
  overflow: hidden;
}

body.metaeden-arcade-site .meta-lex-board {
  align-self: stretch;
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1;
  gap: 10px;
  padding: 16px;
}

body.metaeden-arcade-site .meta-lex-tile {
  font-size: clamp(1.5rem, 2.4vw, 2.85rem);
}

body.metaeden-arcade-site .meta-lex-tile[data-path-index]::after {
  right: 0;
  bottom: 0;
  width: 23px;
  height: 23px;
  font-size: 0.72rem;
}

body.metaeden-arcade-site .meta-lex-found {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

body.metaeden-arcade-site .meta-lex-found ol {
  max-height: none;
  min-height: 0;
  font-size: 0.9rem;
}

/* ==========================================================================
   THE TWO NEWEST CABINETS, FITTED TO THE CABINET SCREEN (TASK-1158[Q]).

   THE BUG, reported by the user with a screenshot of the fishing cabinet and
   then measured on the rig rather than eyeballed.  Every rule above fits one
   of the first eight cabinets to this panel: game root at height:100%, a grid
   with a minmax(0, 1fr) playfield row, and a canvas sized by HEIGHT so it
   letterboxes inside whatever width is left.  Cabinets 12 and 13 arrived
   after that block was written and were never added to it, so they fell
   through to their own stylesheets, where the playfield canvas is
   `width: 100%` and its height therefore follows the panel's WIDTH.  In a
   1880x927 panel that made fishing 1128px tall and strip mine 1161px, and
   `overflow: hidden` on the panel took the difference off the bottom: 201px
   and 234px of game, including fishing's kelp and the game's own name plate,
   which is what the user could see was missing.

   THE RULE THIS FIXES IT UNDER is the user's, stated generally for the whole
   ticket: "please prefer letterboxing over cut off content."  So the fix is
   not a bigger panel or a scrollbar.  Each screen becomes the largest box of
   its OWN shape that fits the height it is given, centred, with the spare
   width either side as letterbox.  Nothing is cropped and nothing moves off
   screen.

   WHY aspect-ratio IS EXACT HERE rather than a guess: both cartridges draw
   into a FIXED backing store, set once from constants in their shared engine
   and never resized (fishing.core.js `canvas.width = W` at 320x180, exactly
   16:9; stripmine.core.js `canvas.width = VW * TS` at 640x352, which is
   20:11).  The ratios below are those two numbers, not a rounding of them.

   AND WHY THE SHAPE SITS ON .Xx-scr RATHER THAN ON THE CANVAS.  That element
   is the canvas's positioning parent and it carries the overlays that have to
   line up with the drawing: the start card at inset:0, and -- the one the
   user actually noticed missing -- the name plate at right:14px, bottom:12px.
   Shrinking the canvas alone would have left every one of those pinned to the
   old, wider box, so the name plate would have floated in the letterbox bar
   instead of sitting in the corner of the picture.  Sizing the parent moves
   the picture and everything registered to it together.

   These two cartridges are the same shape as each other by construction (both
   are `.Xx > .Xx-top, .Xx-scr, .Xx-bot` flex columns), so they share one rule
   set with only the ratio differing. */
body.metaeden-arcade-site .fsx,
body.metaeden-arcade-site .smx {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
}

/* The two chrome rows keep their own height; the screen takes what is left.
   min-height:0 is what lets it actually shrink -- a flex item's floor is its
   content, and without this the canvas would push the row back out to the
   height the panel could not hold, which is the bug all over again. */
body.metaeden-arcade-site .fsx-top,
body.metaeden-arcade-site .fsx-bot,
body.metaeden-arcade-site .smx-top,
body.metaeden-arcade-site .smx-bot {
  flex: 0 0 auto;
}

body.metaeden-arcade-site .fsx-scr,
body.metaeden-arcade-site .smx-scr {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

body.metaeden-arcade-site .fsx-scr { aspect-ratio: 16 / 9; }
body.metaeden-arcade-site .smx-scr { aspect-ratio: 20 / 11; }

/* The canvas fills the box the line above shaped, so the element the player
   clicks is still exactly the picture they are looking at.  NOT object-fit:
   a canvas is a replaced element, so object-fit would letterbox the DRAWING
   inside an element box of the wrong shape, and both of these read pointer
   positions off getBoundingClientRect -- which returns the element box, not
   the drawing -- so every click would land somewhere the fish is not. */
body.metaeden-arcade-site .fsx-scr canvas.fsx-cv,
body.metaeden-arcade-site .smx-scr canvas.smx-cv {
  width: 100%;
  height: 100%;
}

.meta-marble-controls {
  justify-content: space-between;
}

.meta-marble-pad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 4px;
  margin-left: auto;
}

.meta-marble-pad button {
  min-width: 46px;
}

.meta-marble-pad button:nth-child(1) {
  grid-column: 2;
}

.meta-marble-pad button:nth-child(2) {
  grid-column: 1;
}

.meta-marble-pad button:nth-child(3) {
  grid-column: 2;
}

.meta-marble-pad button:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.meta-ring {
  margin-top: 18px;
  border-color: #56ffd8;
  background: rgba(5, 5, 6, 0.92);
  box-shadow: 8px 8px 0 rgba(255, 91, 215, 0.18);
  color: #e9fff9;
}

.meta-ring h2 {
  color: #ffb7ef;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

.meta-ring .ring-controls a {
  border-color: #56ffd8;
  background: #10172a;
  color: #56ffd8;
}

.meta-ring .ring-members {
  columns: 2;
}

.mgp-tool {
  margin-top: 10px;
  border: 1px solid #b8b8ae;
  background: #ffffff;
  color: #222222;
  font: 12px Verdana, Arial, sans-serif;
}

.mgp-tool button {
  min-height: 28px;
  padding: 3px 8px;
  border: 2px outset #d6d6d6;
  border-radius: 0;
  background: #e7e7e7;
  color: #111111;
  font: 700 11px Verdana, Arial, sans-serif;
  cursor: pointer;
}

.mgp-tool button:active {
  border-fashion: inset;
}

.mgp-tool button:focus-visible,
.mgp-tool input:focus-visible,
.mgp-tool summary:focus-visible {
  outline: 2px solid #0000cc;
  outline-offset: 2px;
}

.mgp-tool-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-bottom: 4px solid #ff6600;
  background: #f6f6ef;
}

.mgp-tool-header h3 {
  margin: 2px 0 5px;
  color: #000066;
  font-size: 18px;
}

.mgp-tool-header p {
  margin: 0;
}

.mgp-kicker {
  color: #777777;
  font: 700 10px "Courier New", monospace;
  letter-spacing: 0.08em;
}

.mgp-reset-tools {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 5px;
}

.mgp-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border-bottom: 1px solid #cccccc;
  background: #cccccc;
}

.mgp-summary > div {
  min-height: 66px;
  padding: 9px;
  background: #ffffff;
}

.mgp-summary span,
.mgp-summary strong {
  display: block;
}

.mgp-summary span {
  margin-bottom: 5px;
  color: #666666;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.mgp-summary strong {
  color: #000066;
  font-size: 14px;
  line-height: 1.3;
}

.mgp-summary progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 14px;
  border: 0;
  background: #dddddd;
  accent-color: #008000;
}

.mgp-summary progress::-webkit-progress-bar {
  background: #dddddd;
}

.mgp-summary progress::-webkit-progress-value {
  background: #008000;
}

.mgp-summary progress::-moz-progress-bar {
  background: #008000;
}

.mgp-summary .mgp-summary-note {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding: 6px 8px;
  background: #ffffdd;
  color: #555555;
  font-size: 10px;
}

.mgp-group {
  padding: 10px 12px 2px;
  border-bottom: 1px solid #b8b8ae;
}

.mgp-group-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mgp-group-heading h4 {
  display: inline;
  margin: 0 0 0 6px;
  color: #333333;
  font-size: 14px;
}

.mgp-group-heading p {
  margin: 0;
  color: #666666;
  font-size: 10px;
}

.mgp-tab {
  display: inline-block;
  padding: 3px 5px;
  background: #000066;
  color: #ffffff;
  font: 700 10px Verdana, Arial, sans-serif;
}

.mgp-daily {
  background: #ffffee;
}

.mgp-optional {
  background: #f5f5f5;
}

.mgp-task {
  margin: 0 0 9px;
  border: 1px solid #cccccc;
  background: #ffffff;
}

.mgp-task-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid #dddddd;
  background: #eeeeee;
}

.mgp-task-title b {
  color: #0000cc;
}

.mgp-task-title span {
  color: #006600;
  font-weight: 700;
  white-space: nowrap;
}

.mgp-gate-clock {
  padding: 7px 8px;
  border-bottom: 1px dotted #aaaaaa;
  background: #e8f4ff;
  color: #003366;
}

.mgp-counter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 7px 8px;
  border-bottom: 1px dotted #cccccc;
}

.mgp-counter > div:first-child strong,
.mgp-counter > div:first-child span {
  display: block;
}

.mgp-counter > div:first-child span {
  margin-top: 2px;
  color: #666666;
  font-size: 10px;
}

.mgp-counter.is-complete,
.mgp-check.is-complete {
  background: #e9f8e9;
}

.mgp-counter.is-complete strong,
.mgp-check.is-complete strong {
  color: #006600;
  text-decoration: line-through;
}

.mgp-stepper {
  display: grid;
  grid-template-columns: 28px 58px 28px;
  align-items: center;
}

.mgp-stepper button {
  min-width: 28px;
  padding: 1px;
  font-size: 15px;
}

.mgp-stepper output {
  text-align: center;
  font: 700 11px "Courier New", monospace;
}

.mgp-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 7px 8px;
  border-bottom: 1px dotted #cccccc;
  cursor: pointer;
}

.mgp-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #008000;
}

.mgp-check span,
.mgp-check strong,
.mgp-check small {
  display: block;
}

.mgp-check small {
  margin-top: 3px;
  color: #666666;
  font-size: 10px;
}

.mgp-help {
  padding: 6px 8px;
}

.mgp-help summary {
  color: #0000cc;
  font-weight: 700;
  cursor: pointer;
}

.mgp-help > div {
  margin-top: 7px;
  padding: 8px;
  border-left: 3px solid #ff6600;
  background: #f6f6ef;
}

.mgp-help p {
  margin: 0 0 6px;
}

.mgp-help ol,
.mgp-help ul {
  margin: 0;
  padding-left: 22px;
}

.mgp-help li {
  margin: 0 0 5px;
  line-height: 1.4;
}

.mgp-footer {
  padding: 9px 12px;
  background: #000066;
  color: #ffffff;
}

.mgp-footer p {
  max-width: none;
  margin: 2px 0;
}

@media (max-width: 900px) {
  .meta-hero,
  .meta-grid,
  .meta-tool-form,
  .meta-v2-hero,
  .meta-v2-dashboard,
  .meta-v2-node-page,
  .meta-v2-node-mast,
  .meta-v3-layout,
  .meta-v3-board-page,
  .metaeden-v3-site .meta-tool-form,
  .meta-arcade-cabinet {
    grid-template-columns: 1fr;
  }

  .meta-nav,
  .meta-v2-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-v2-title h1 {
    font-size: 2.8rem;
  }

  .meta-v2-signal {
    min-height: 170px;
  }

  .meta-v2-node-side {
    min-height: 0;
    border-right: 0;
    border-bottom: 3px solid #12141c;
  }

  .meta-v2-node-content ul {
    grid-template-columns: 1fr;
  }

  .meta-v3-topline span:last-child {
    margin-left: 0;
  }

  .meta-v3-left,
  .meta-v3-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
  }

  .meta-v3-left h2,
  .meta-v3-right h2 {
    grid-column: 1 / -1;
  }

  .meta-v3-posts li {
    grid-template-columns: 24px 36px minmax(0, 1fr);
  }

  .meta-v3-comments {
    grid-column: 3;
  }

  .meta-v3-board-side {
    border-right: 0;
    border-bottom: 1px solid #cccccc;
  }

  .mgp-tool-header,
  .mgp-group-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .mgp-reset-tools {
    justify-content: flex-start;
  }

  .mgp-summary {
    grid-template-columns: 1fr;
  }

  .mgp-counter {
    grid-template-columns: 1fr;
  }

  .mgp-stepper {
    justify-content: start;
  }

  .meta-arcade-shell {
    width: min(100% - 22px, 1680px);
  }

  .meta-arcade-hero {
    min-height: 620px;
  }

  .meta-arcade-hero-copy {
    padding: 22px;
  }

  .meta-arcade-hero-copy h1 {
    font-size: 3rem;
  }

  .meta-arcade-art-switch {
    top: auto;
    right: 12px;
    bottom: 134px;
    left: 12px;
    justify-content: space-between;
  }

  .meta-arcade-mgp-bar {
    right: 12px;
    bottom: 12px;
    left: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-arcade-concourse {
    padding: 12px;
  }

  .meta-arcade-modal-backdrop {
    top: var(--arcade-modal-top, 0);
    right: auto;
    bottom: auto;
    left: var(--arcade-modal-left, 0);
    width: var(--arcade-modal-width, 100vw);
    height: var(--arcade-modal-height, 100vh);
    height: var(--arcade-modal-height, 100dvh);
  }

  .meta-arcade-play-cabinet {
    top: var(--arcade-modal-top, 50%);
    right: auto;
    bottom: auto;
    left: var(--arcade-modal-left, 50%);
    width: var(--arcade-modal-width, min(100vw, 1920px));
    height: var(--arcade-modal-height, min(100vh, 1080px));
    height: var(--arcade-modal-height, min(100dvh, 1080px));
    max-height: var(--arcade-modal-height, 1080px);
  }

  .meta-arcade-modal-close {
    min-width: 62px;
    padding: 7px 8px;
    font-size: 0.7rem;
  }

  /* ...and NOT on a phone. The marquee beside these reserves 88px for one
     control and a second would take the title's room; and a cabinet here
     already fills the screen, so a window with less around it is close to
     the window you are looking at. The play surface keeps its own pop out
     at every width, which is where a phone can still reach this. */
  .meta-arcade-modal-pop {
    display: none;
  }

  .meta-arcade-play-marquee {
    grid-template-columns: 1fr;
    padding: 16px 88px 16px 16px;
  }

  .meta-arcade-play-marquee p:last-child {
    text-align: left;
  }

  .meta-arcade-shared-screen {
    height: auto;
    min-height: 0;
  }

  .meta-arcade-cart-wall {
    display: block;
    gap: 0;
    height: clamp(320px, 64vw, 560px);
  }

  .meta-arcade-cart {
    min-height: 0;
  }

  .meta-arcade-cabinet-art {
    min-height: 0;
    border-right: 0;
    border-bottom: 3px solid #120022;
  }

  .meta-arcade-screen {
    border-left: 12px solid #09000f;
  }

  .meta-mines-game {
    --mine-cell: 22px;
  }

  .meta-mines-top,
  .meta-mines-controls {
    grid-template-columns: 1fr;
  }

  .meta-mines-reset {
    justify-self: start;
  }

  .meta-ttt-top,
  .meta-pool-top,
  .meta-sol-top,
  .meta-art-top,
  .meta-word-top,
  .meta-lex-top,
  .meta-marble-top {
    grid-template-columns: 1fr;
  }

  /* This narrow-viewport override RESTATED the odd count the shared block used
     to carry, so lex trace and word fret went on mis-pairing under 900px even
     once the base rule was even -- the reason lex trace's readout is the
     instance the audit measured and called the worst. Even here too. */
  .meta-word-readout,
  .meta-lex-readout {
    grid-template-columns: repeat(4, auto);
  }

  .meta-word-controls input,
  .meta-lex-controls input {
    flex-basis: 100%;
  }

  .meta-word-track {
    height: 230px;
  }

  .meta-lex-stage {
    grid-template-columns: 1fr;
  }

  .meta-lex-board {
    grid-template-columns: repeat(6, minmax(34px, 1fr));
    grid-template-rows: repeat(6, minmax(34px, 1fr));
    min-height: 300px;
  }

  .meta-ttt-board {
    grid-template-columns: repeat(2, minmax(126px, 1fr));
  }

  .meta-sol-board {
    --sol-card-w: 68px;
    --sol-card-h: 96px;
    --sol-gap: 5px;
  }

  .meta-sol-pip-grid,
  .meta-sol-royal {
    inset: 22px 11px 17px;
  }

  .meta-sol-pip {
    width: 10px;
    height: 10px;
  }

  .meta-sol-pip.is-large {
    width: 21px;
    height: 21px;
  }

  .meta-sol-portrait {
    width: 38px;
    height: 52px;
  }

  .meta-art-controls label {
    min-width: min(100%, 240px);
  }

  .meta-marble-pad {
    margin-left: 0;
  }
}

/* ============================================================================
   TOUCH TARGETS (TASK-1157[Q])
   ----------------------------------------------------------------------------
   ONE BLOCK, GATED ON THE POINTER, APPENDED RATHER THAN THREADED THROUGH.
   Every rule here exists because a control measured under roughly 40x40 CSS
   pixels on a 375px phone, which is the size below which a finger starts
   missing what it aimed at.  They are gathered in one place and gated on
   (pointer: coarse) for three reasons: a mouse loses nothing, the desktop
   layouts these cartridges were tuned for are untouched, and a reviewer reads
   the whole change as one hunk instead of hunting edits through 5600 lines.

   WHAT THIS BLOCK DELIBERATELY DOES NOT TOUCH: the .v4-game-page.gfs rules in
   metaeden-v4-game.css and metaeden-v4-game-fit.css.  Those are the fullscreen
   frame, they carry far higher specificity, and they go on winning inside that
   mode exactly as they did before.  This block is about the DEFAULT view,
   which is what a visitor gets before they press anything.
   ========================================================================= */
@media (pointer: coarse) {
  /* Minesweeper: the cell is not a control on the game, it IS the game, and
     the --mine-cell knob resolved to somewhere between 22 and 34px on a phone
     through every path it has.

     THIS IS THE ONE TARGET IN THIS BLOCK THAT DOES NOT REACH 40px ON A SMALL
     PHONE, and it cannot: Beginner is nine columns, and nine 40px columns want
     360px of cell plus about 42px of border and padding inside the 353px a
     375px screen actually offers.  Something has to give, and a board that
     pans sideways is the worse answer of the two, because on a touch screen a
     drag that was meant to be a tap scrolls the board instead of opening the
     cell.  So the cell takes every pixel that IS there and stops: about 35px
     at 375, past 40px on any phone 430px or wider, capped at 44 so a tablet
     does not grow silly checkerboard squares.  The same shape (and nearly the
     same constant) is what metaeden-v4-game-fit.css settled on for fullscreen.

     Worth saying plainly since the number is short of the rule: minesweeper's
     touch INPUT is not what is lacking here.  Flagging has three working
     paths, and one of them (the flag-mode toggle below) was built for touch. */
  .meta-mines-game {
    --mine-cell: clamp(30px, calc((100vw - 64px) / 9), 44px);
  }

  /* The flag-mode toggle IS the touch answer to right-clicking, so it should
     not be the thinnest thing on the panel. */
  .meta-mines-flag-toggle {
    min-height: 44px;
  }

  /* Lex Trace: six tiles across, held to 34px wide by the 900px rule.  44
     leaves 299px of board inside a 375px screen, so it fits without pushing
     the found-words column anywhere. */
  .meta-lex-board {
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    grid-template-rows: repeat(6, minmax(44px, 1fr));
  }

  /* 3D tic tac toe: two lattice layers per row, and the layers were holding a
     136px floor they no longer need once they may share the full width. */
  .meta-ttt-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* THE min-height HERE USED TO BE 40px AND IT BROKE THE BOARD (TASK-1174[Q]).
     Two layers per row leave a ~35px cell track at 375px, so a 40px floor on a
     cell that is also aspect-ratio:1 made every cell wider than the track it
     sits in. Each row then overhung its neighbour by the 3px gap, the gaps
     stopped being visible, and all four layers rendered as solid bars with no
     cell boundaries at all -- the audit's one genuinely unplayable board.

     A hit-target floor and a fixed track cannot both win, so the track wins
     and the floor is dropped: minmax(0, 1fr) columns divide whatever width
     there is, aspect-ratio keeps the cells square, and the gaps reappear
     because nothing is overhanging them any more. The base rule's own
     min-height:30px still applies and is satisfied, so a cell can never
     collapse.

     Two per row rather than the one-per-row the audit also offered: 4x4x4 is
     played by reading the layers AGAINST each other, and one per row puts
     roughly one and a half of the four on an 812px screen. Two per row keeps
     all four in view at once, which is the game. The width the cells give up
     to get that is bought back below. */

  /* Reclaimed from the chrome, not from the cells: the board's own padding and
     the gaps between and inside the layers are the only things competing with
     the cells for the 375px, and a few px off each is invisible next to what
     it returns to every cell in all four layers. */
  .meta-ttt-board {
    gap: 6px;
    padding: 6px;
  }

  .meta-ttt-layer-grid {
    gap: 2px;
    padding: 4px;
  }

  /* Artillery: angle and power ARE the game, and both sliders were 16px tall.
     The track keeps its own look; the input is given room around it, which is
     what a thumb needs to catch a range thumb at all. */
  .meta-art-controls input[type="range"] {
    height: 44px;
  }

  /* The chrome buttons every cartridge shares, all of them 28-32px tall. */
  .meta-golf-buttons button,
  .meta-golf-flippers button,
  .meta-golf-hole-list button,
  .meta-ttt-controls button,
  .meta-pool-controls button,
  .meta-sol-controls button,
  .meta-art-controls button,
  .meta-word-controls button,
  .meta-lex-controls button,
  .meta-marble-controls button,
  .meta-mines-modes button,
  .meta-mines-reset {
    min-height: 44px;
    /* A short label is still a button.  Artillery's FIRE came out 38px wide
       on its own text, which is the whole game in one press. */
    min-width: 44px;
  }

  /* Golf's hole jump strip: 18 columns with a 28px floor is 555px of hard
     minimum against 375 of screen, and it is what made the whole cartridge
     scroll sideways.  metaeden-v4-game-fit.css already reaches for nine per
     row inside fullscreen; this brings the same idea to the default view,
     where a visitor meets it first, and takes it to SIX rather than nine
     because nine 44px-wide buttons come to 420px and simply move the sideways
     scroll somewhere else.  Six across, three rows down, every button past
     44px in both directions. */
  /* The console's own top row is what actually sets golf's width: four fixed
     tracks (a 140px hole name, a 90px power meter, then the buttons) sitting
     on ONE line, which came to 388px inside 353px of glass and made the whole
     cartridge scroll sideways before anything here was touched -- and giving
     the three buttons a 44px floor above would have widened it further.  Two
     tracks that may both shrink lets the row wrap instead of overflow, and
     costs a phone nothing: there is height to spare and never width. */
  .meta-golf-console {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .meta-golf-hole-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* The scoreline underneath it is not a control, so it is not a hit-target
     fix, but it is 18 columns of digits with a min-content floor and it went
     on making the cartridge scroll sideways after the buttons above stopped.
     A sideways-scrolling card is a touch problem even when the thing causing
     it is only a readout: near the edges, a drag meant for the putt becomes a
     scroll of the panel. Nine and nine, in two rows, out of the way. */
  .meta-golf-scoreline {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  /* MGP tracker: the +/- stepper is the most-tapped control in the whole tool,
     repeated down every minigame row, and it was 28x28. */
  .mgp-stepper {
    grid-template-columns: 44px minmax(48px, 1fr) 44px;
  }

  .mgp-stepper button {
    min-width: 44px;
    min-height: 44px;
  }

  .mgp-tool button {
    min-height: 44px;
  }
}