.play-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 7%, rgba(244, 123, 32, 0.23), transparent 24rem),
    radial-gradient(circle at 10% 28%, rgba(23, 105, 194, 0.2), transparent 28rem),
    #0d0918;
}

.terminal-grid-bg {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.32;
  background:
    linear-gradient(rgba(72, 231, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 231, 255, 0.045) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent);
  pointer-events: none;
}

.play-header {
  width: min(1380px, calc(100% - 3rem));
}

.play-header .site-nav {
  gap: clamp(0.8rem, 1.8vw, 1.55rem);
}

.play-header .site-nav .active::after {
  right: 0;
  left: 0;
}

.active-terminal-link {
  border-color: rgba(124, 246, 141, 0.5);
  color: var(--green);
}

.play-page main {
  width: min(1380px, calc(100% - 3rem));
  margin: 0 auto;
}

.play-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  align-items: end;
  padding: 2.8rem 0 2.2rem;
}

.play-intro h1 {
  margin: 0.35rem 0 0.55rem;
  font-family: var(--display);
  font-size: clamp(3.5rem, 7vw, 6.7rem);
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 0.85;
  text-transform: uppercase;
}

.play-intro h1 mark {
  color: var(--orange-hot);
  background: none;
  text-shadow: 3px 3px 0 #781f25;
}

.play-intro > div > p:not(.eyebrow) {
  max-width: 750px;
  margin: 0;
  color: #c7bbd1;
}

.play-signal {
  display: grid;
  grid-template-columns: repeat(4, minmax(5.5rem, 1fr));
  min-width: min(100%, 31rem);
  margin: 0;
  border: 1px solid rgba(72, 231, 255, 0.18);
  border-radius: 0.35rem;
  background: rgba(10, 14, 31, 0.7);
}

.play-signal div {
  padding: 0.8rem 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.play-signal div:last-child {
  border-right: 0;
}

.play-signal dt {
  color: #7c7189;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.play-signal dd {
  margin: 0.15rem 0 0;
  color: #d9faff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 800;
}

.play-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  min-height: 47rem;
  overflow: hidden;
  border: 1px solid rgba(72, 231, 255, 0.28);
  border-radius: 0.6rem;
  background: #101121;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.48), 0 0 5rem rgba(23, 105, 194, 0.08);
}

.console-main {
  display: grid;
  grid-template-rows: auto minmax(25rem, 1fr) auto;
  min-width: 0;
}

.console-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  min-height: 4.8rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(72, 231, 255, 0.16);
  background: linear-gradient(180deg, #18192c, #121324);
}

.console-identity {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.console-identity > div {
  display: grid;
}

.console-identity strong {
  color: #e5edf1;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.console-identity small {
  color: #756a83;
  font-size: 0.62rem;
}

.console-lights {
  display: flex;
  gap: 0.28rem;
}

.console-lights i {
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5b4e;
}

.console-lights i:nth-child(2) { background: var(--gold); }
.console-lights i:nth-child(3) { background: var(--green); }

.console-connection {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-self: center;
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.console-connection i {
  width: 0.48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.8rem currentColor;
}

.console-connection.online {
  color: var(--green);
}

.console-connection.offline {
  color: #ff796f;
}

.console-actions {
  display: flex;
  gap: 0.45rem;
  justify-self: end;
}

.console-actions button,
.clear-terminal {
  padding: 0.48rem 0.65rem;
  border: 1px solid rgba(72, 231, 255, 0.22);
  border-radius: 0.2rem;
  background: #0c1120;
  color: #a9eaf3;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.console-actions button:hover:not(:disabled),
.console-actions button:focus-visible,
.clear-terminal:hover,
.clear-terminal:focus-visible {
  border-color: var(--cyan);
  color: #fff;
}

.console-actions button:disabled {
  cursor: default;
  opacity: 0.35;
}

.terminal-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(17, 78, 68, 0.11), transparent 32rem),
    #050a0e;
}

.terminal-shell::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(124, 246, 141, 0.07);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.62);
  content: "";
  pointer-events: none;
}

.terminal-scanline {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0.14;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, 0.08) 3px 4px);
  pointer-events: none;
}

.terminal-output {
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 1.35rem;
  overflow: auto;
  color: #d9e4df;
  font-family: "Cascadia Mono", "Lucida Console", Consolas, ui-monospace, monospace;
  font-size: var(--terminal-font-size, 16px);
  line-height: 1.28;
  tab-size: 4;
  white-space: pre;
  scrollbar-color: #274b45 #070b0f;
  scrollbar-width: thin;
}

.terminal-output.wrap-lines {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.terminal-output:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -4px;
}

.terminal-output .ansi-bold { font-weight: 800; }
.terminal-output .ansi-1 { color: #8c3434; }
.terminal-output .ansi-2 { color: #4ca15d; }
.terminal-output .ansi-3 { color: #a69d42; }
.terminal-output .ansi-4 { color: #4d6eb8; }
.terminal-output .ansi-5 { color: #9d4fae; }
.terminal-output .ansi-6 { color: #48a7a9; }
.terminal-output .ansi-7 { color: #c9d0cc; }
.terminal-output .ansi-8 { color: #717b76; }
.terminal-output .ansi-9 { color: #ff685c; }
.terminal-output .ansi-10 { color: #74ef88; }
.terminal-output .ansi-11 { color: #ffe45f; }
.terminal-output .ansi-12 { color: #65a0ff; }
.terminal-output .ansi-13 { color: #f07cfa; }
.terminal-output .ansi-14 { color: #67e9f2; }
.terminal-output .ansi-15 { color: #f5fbf7; }
.terminal-output .ansi-29 { color: #2ec38a; }
.terminal-output .ansi-45 { color: #35dcff; }
.terminal-output .ansi-51 { color: #59f6ff; }
.terminal-output .ansi-93 { color: #a066ff; }
.terminal-output .ansi-141 { color: #c595ff; }
.terminal-output .ansi-172 { color: #e29221; }
.terminal-output .ansi-180 { color: #d8af86; }
.terminal-output .ansi-205 { color: #ff69b7; }
.terminal-output .ansi-213 { color: #f58dff; }
.terminal-output .ansi-220 { color: #ffdf3c; }
.terminal-output .ansi-230 { color: #fffbd5; }
.terminal-output .ansi-250 { color: #c4cbc7; }

.terminal-output .terminal-system {
  color: #5e8d83;
  font-size: 0.86em;
  font-weight: 700;
}

.terminal-output .terminal-system.error {
  color: #dc776d;
}

.jump-latest {
  position: absolute;
  z-index: 5;
  right: 1rem;
  bottom: 0.8rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #397769;
  border-radius: 99rem;
  background: #10211e;
  color: #b0f6d4;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 800;
}

.jump-latest[hidden] {
  display: none;
}

.terminal-form {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid rgba(72, 231, 255, 0.16);
  background: #111322;
}

.terminal-form label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
  color: #8b8095;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.terminal-form label small {
  color: #655c70;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.terminal-input-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
}

.terminal-input-row > span {
  color: var(--green);
  font-family: ui-monospace, monospace;
  font-weight: 900;
}

.terminal-input-row input {
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid #27433f;
  border-radius: 0.2rem;
  outline: none;
  background: #070c11;
  color: #ecf8f2;
  caret-color: var(--green);
  font-family: "Cascadia Mono", "Lucida Console", Consolas, ui-monospace, monospace;
  font-size: 0.9rem;
}

.terminal-input-row input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(124, 246, 141, 0.1);
}

.terminal-input-row input:disabled {
  opacity: 0.4;
}

.terminal-input-row button {
  align-self: stretch;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.2rem;
  background: var(--orange);
  color: #241125;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminal-input-row button:disabled {
  cursor: default;
  filter: saturate(0);
  opacity: 0.4;
}

.console-sidebar {
  border-left: 1px solid rgba(72, 231, 255, 0.16);
  background: #0d0e1b;
}

.side-module {
  padding: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.side-module header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  color: #81758d;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-module header b {
  color: var(--orange);
  font-family: ui-monospace, monospace;
}

.side-module h2 {
  margin: 0.85rem 0 0.5rem;
  font-family: var(--display);
  font-size: 1.7rem;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.side-module p,
.side-module li {
  color: #92879d;
  font-size: 0.72rem;
}

.side-module p {
  margin: 0.5rem 0;
}

.side-module ul {
  display: grid;
  gap: 0.38rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.side-module li {
  position: relative;
  padding-left: 0.9rem;
}

.side-module li::before {
  position: absolute;
  left: 0;
  color: var(--green);
  content: "◆";
  font-size: 0.48rem;
}

.signin-module {
  background:
    radial-gradient(circle at 90% 10%, rgba(72, 231, 255, 0.11), transparent 8rem),
    linear-gradient(145deg, rgba(244, 123, 32, 0.12), transparent 72%);
}

.account-signin-form {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.9rem;
}

.account-signin-form label {
  color: #91859d;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-signin-form input {
  width: 100%;
  min-width: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid #343249;
  border-radius: 0.2rem;
  outline: none;
  background: #090b16;
  color: #f2edf5;
  caret-color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.76rem;
}

.account-signin-form input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(72, 231, 255, 0.1);
}

.account-signin-form input:disabled {
  opacity: 0.5;
}

.account-signin-form button {
  margin-top: 0.35rem;
  padding: 0.68rem;
  border: 1px solid #ff9d3d;
  border-radius: 0.2rem;
  background: linear-gradient(135deg, var(--orange), #ffad32);
  color: #241125;
  cursor: pointer;
  font-size: 0.63rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-signin-form button:hover:not(:disabled),
.account-signin-form button:focus-visible {
  border-color: #ffd269;
  filter: brightness(1.08);
}

.account-signin-form button:disabled {
  cursor: default;
  filter: saturate(0.35);
  opacity: 0.45;
}

.account-signin-status {
  min-height: 1.2rem;
  margin-top: 0.68rem !important;
  color: #81788b !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.62rem !important;
}

.account-signin-status.ready { color: var(--cyan) !important; }
.account-signin-status.working { color: var(--gold) !important; }
.account-signin-status.success { color: var(--green) !important; }
.account-signin-status.error { color: #ff796f !important; }

.signin-alternate {
  margin-top: 0.65rem !important;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.63rem !important;
}

.signin-alternate a {
  color: var(--cyan);
}

.account-module {
  background: linear-gradient(145deg, rgba(244, 123, 32, 0.1), transparent 70%);
}

.portal-open-link {
  display: block;
  margin-top: 0.85rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(124, 246, 141, 0.35);
  border-radius: 0.2rem;
  background: rgba(124, 246, 141, 0.07);
  color: var(--green);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.portal-open-link:hover,
.portal-open-link:focus-visible {
  border-color: var(--green);
  color: #fff;
}

.module-note {
  margin-top: 0.65rem !important;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.quick-grid button {
  padding: 0.52rem 0.3rem;
  border: 1px solid #27263c;
  border-radius: 0.2rem;
  background: #151626;
  color: #bdb3c8;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.quick-grid button:hover:not(:disabled),
.quick-grid button:focus-visible {
  border-color: var(--orange);
  color: #fff;
}

.quick-grid button:disabled {
  cursor: default;
  opacity: 0.35;
}

.setting-row,
.setting-toggle {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 0.8rem;
  color: #a69bad;
  font-size: 0.7rem;
}

.setting-row div {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.setting-row button {
  display: grid;
  width: 1.65rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #35334a;
  border-radius: 0.15rem;
  background: #171828;
  color: #fff;
  cursor: pointer;
}

.setting-row output {
  min-width: 2.6rem;
  color: var(--cyan);
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  text-align: center;
}

.setting-toggle input {
  width: 1rem;
  accent-color: var(--orange);
}

.clear-terminal {
  width: 100%;
  margin-top: 0.9rem;
}

.fallback-module code {
  display: block;
  margin: 0.7rem 0;
  color: var(--gold);
  font-size: 0.7rem;
}

.fallback-module a {
  color: var(--cyan);
  font-size: 0.68rem;
}

.play-safety {
  max-width: 900px;
  margin: 1.2rem auto 3.5rem;
  color: #83768e;
  font-size: 0.7rem;
  text-align: center;
}

.play-footer {
  width: min(1380px, calc(100% - 3rem));
}

@media (max-width: 1060px) {
  .play-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .play-signal {
    width: 100%;
  }

  .play-console {
    grid-template-columns: 1fr;
  }

  .console-main {
    min-height: 44rem;
  }

  .console-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(72, 231, 255, 0.16);
    border-left: 0;
  }

  .side-module {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 720px) {
  .play-page main,
  .play-footer {
    width: min(100% - 1rem, 1380px);
  }

  .play-intro {
    padding-top: 2rem;
  }

  .play-intro h1 {
    font-size: clamp(3.4rem, 17vw, 5.4rem);
  }

  .play-signal {
    grid-template-columns: repeat(2, 1fr);
  }

  .play-signal div:nth-child(2) {
    border-right: 0;
  }

  .play-signal div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .play-console {
    border-radius: 0.35rem;
  }

  .console-main {
    min-height: 40rem;
    grid-template-rows: auto minmax(25rem, 1fr) auto;
  }

  .console-bar {
    grid-template-columns: 1fr auto;
  }

  .console-connection {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .console-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .console-identity small {
    display: none;
  }

  .terminal-output {
    padding: 0.9rem;
  }

  .terminal-form label {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
  }

  .terminal-input-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .terminal-input-row button {
    grid-column: 2;
    min-height: 2.4rem;
  }

  .console-sidebar {
    grid-template-columns: 1fr;
  }

  .side-module {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-scanline {
    display: none;
  }
}