/* OUTOFSPACENET / 403 + 404
   Error-page-only rules. Uses the site's Space CSS and VT323 font. Theme controls stay on the homepage.
   No external resources, trackers, frameworks or external CDN. */

html { color-scheme: dark; }
.error-container { max-width: 900px; min-height: 100vh; padding-top: 7rem; padding-bottom: 3rem; }
.error-content { position: relative; z-index: 2; }
.error-brand { text-align: center; margin: 0 auto 3rem; }
.error-brand-art {
  margin: 0 auto; display: block; width: max-content; max-width: 100%;
  color: var(--terminal-text); font: 8.45px/1.14 monospace;
  white-space: pre; letter-spacing: -.4px;
  text-shadow: 0 0 10px var(--terminal-text-glow), 0 0 20px rgba(232,228,217,.2);
  animation: glow 3s ease-in-out infinite alternate;
}
.error-brand-small { display: none; }
.error-brand h2 { font-size: 1.45rem; font-weight: normal; line-height: 1.3; margin: 1.2rem 0 .15rem; }
.error-brand .mission { font-size: 1.2rem; margin: .4rem 0 0; letter-spacing: .05em; }
.error-card { background: var(--terminal-bg-light); border: 1px solid var(--terminal-text-dim); padding: 1.5rem 2rem 1.7rem; }
.error-row { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 1.6rem; align-items: center; }
.error-number { font-size: 8.5rem; line-height: .9; font-weight: normal; letter-spacing: -.035em; color: var(--terminal-text); }
.error-number::after { content: "_"; font-size: .56em; color: var(--terminal-text-dim); animation: blink 1.3s step-end infinite; }
.error-description h1 { color: var(--terminal-text); font-size: 2.15rem; font-weight: normal; line-height: 1.12; letter-spacing: .02em; margin: 0 0 .75rem; }
.error-description p { color: var(--terminal-text-dim); font-size: 1.3rem; line-height: 1.25; margin: 0; }
.error-request { margin-top: 1.55rem; padding-top: 1rem; border-top: 1px dotted var(--terminal-text-dim); display: grid; grid-template-columns: 130px minmax(0,1fr); gap: .2rem .7rem; font-size: 1.1rem; }
.error-request dt { color: var(--terminal-text-dim); }
.error-request dd { color: var(--terminal-text); overflow-wrap: anywhere; word-break: break-word; }
.error-actions { display: flex; gap: 1.35rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.error-actions .service-url { font: inherit; font-size: 1.22rem; border-left: 0; border-top: 0; border-right: 0; cursor: pointer; background: none; border-radius: 0; margin: 0; }
.error-actions button.service-url { appearance: none; }
.error-actions a:focus-visible,.error-actions button:focus-visible { outline: 1px dashed var(--terminal-text); outline-offset: 4px; }
.error-notice { color: var(--terminal-text-dim); font-size: 1.05rem; margin-top: 1rem; }
.error-footer { margin-top: 3rem; }
/* Background decorations are the original Space CSS shapes, not new illustrations. */
.error-container .section { margin-bottom: 0; }
@media (max-width: 900px) { .error-brand-art { font-size: .88vw; letter-spacing: -.045vw; } }
@media (max-width: 768px) {
  .error-container { padding: 1.2rem 1.25rem 2.2rem; min-height: 100svh; }
  .error-brand { margin-top: 1.25rem; margin-bottom: 2.5rem; }
  .error-brand-art { display: none; }
  .error-brand-small { display: block; font-size: clamp(2.05rem,7.2vw,3.1rem); letter-spacing: .045em; line-height: 1.05; text-shadow: 0 0 9px var(--terminal-text-glow); }
  .error-brand h2 { margin-top: 1rem; font-size: 1.25rem; }
  .error-brand .mission { font-size: 1.1rem; }
  .error-card { padding: 1.2rem 1.25rem 1.35rem; }
  .error-row { grid-template-columns: 1fr; gap: .5rem; }
  .error-number { font-size: 6rem; }
  .error-description h1 { font-size: 1.8rem; }
  .error-description p { font-size: 1.18rem; }
  .error-request { grid-template-columns: 1fr; gap: .15rem; }
  .error-actions { gap: .6rem 1.5rem; }
  .error-actions .service-url { font-size: 1.2rem; }
  .error-footer { margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .error-number::after,.error-brand-art { animation: none; } }


/* Original Breakout restored: deliberately simple, matching the website's native
   VT323, flat borders, dotted separators and existing CSS theme variables. */
.error-container { max-width: 1010px; padding-top: 3.1rem; }
.error-brand { margin-bottom: 2.25rem; }
.error-brand h2 { margin-top: 1rem; }
.error-brand .mission { margin-top: .15rem; }
.error-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 426px); gap: 1.15rem; align-items: start; }
.error-layout > * { min-width: 0; }
.error-card { min-height: 570px; padding: 1.35rem 1.55rem; display: flex; flex-direction: column; }
.error-row { display: block; }
.error-number { font-size: 7.3rem; margin: .15rem 0 .7rem; }
.error-description h1 { font-size: 2.1rem; }
.error-description p { font-size: 1.32rem; line-height: 1.3; }
.error-request { grid-template-columns: 119px minmax(0, 1fr); font-size: 1.12rem; }
.error-actions { gap: .7rem 1.3rem; }
.error-actions .service-url { font-size: 1.24rem; }
.error-notice { font-size: 1.08rem; }
.error-divider { color: var(--terminal-text-dim); opacity: .55; overflow: hidden; white-space: nowrap; margin: auto 0 .85rem; padding-top: 1.5rem; }
.error-arcade-invite { font-size: 1.28rem; line-height: 1.2; margin: 0 0 .2rem; }
.error-arcade-invite-secondary { color: var(--terminal-text-dim); font-size: 1.09rem; margin: 0; }
.arcade-card { background: var(--terminal-bg-light); border: 1px solid var(--terminal-text-dim); padding: 12px; }
.arcade-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: 0 2px .35rem; border-bottom: 1px dashed var(--terminal-text-dim); }
.arcade-head h2 { font: normal 1.55rem/1 "VT323", monospace; letter-spacing: .035em; margin: 0; }
.arcade-head span { color: var(--terminal-text-dim); font-size: 1.05rem; }
.arcade-hint { padding: .45rem 2px; font-size: 1.02rem; line-height: 1.1; color: var(--terminal-text-dim); }
canvas#breakout { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; background: var(--terminal-bg); border: 1px solid var(--terminal-text-dim); touch-action: none; outline-offset: 3px; }
canvas#breakout:focus-visible { outline: 2px dashed var(--terminal-text); }
.arcade-controls { display: flex; flex-wrap: wrap; gap: .45rem; margin: .65rem 0 .5rem; }
.arcade-controls button, .arcade-mobile-controls button { appearance: none; border: 1px solid var(--terminal-text-dim); border-radius: 0; background: transparent; color: var(--terminal-text); font: normal 1.23rem/1.2 "VT323", monospace; cursor: pointer; padding: .28rem .7rem; }
.arcade-controls button:hover, .arcade-mobile-controls button:hover { background: var(--terminal-bg); }
.arcade-controls button:focus-visible, .arcade-mobile-controls button:focus-visible { outline: 2px dashed var(--terminal-text); outline-offset: 2px; }
.arcade-mobile-controls { display: none; gap: .5rem; }
.arcade-mobile-controls button { flex: 1; min-height: 42px; touch-action: manipulation; }
.arcade-status { display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: space-between; font-size: 1.08rem; line-height: 1.3; color: var(--terminal-text-dim); margin: .3rem 0 0; }
.arcade-status strong { color: var(--terminal-text); font-weight: normal; }
.arcade-help { color: var(--terminal-text-dim); font-size: 1.04rem; margin: .3rem 0 0; line-height: 1.1; }
.error-footer { margin-top: 2.2rem; }
@media (max-width: 820px) {
 .error-container { padding-top: 3.2rem; }
 .error-layout { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; gap: 1rem; }
 .error-card { min-height: 0; }
 .error-divider { margin-top: 1rem; }
 .arcade-card { padding: 11px; }
 .arcade-mobile-controls { display: flex; }
 .error-brand { margin-bottom: 2rem; }
}
@media (max-width: 768px) {
 .error-container { padding-top: 1.4rem; }
 .error-brand { margin-top: 1.4rem; }
 .error-request { grid-template-columns: 1fr; }
 .error-number { font-size: 6.2rem; }
 .arcade-status { font-size: 1.05rem; }
}
@media (max-width: 390px) {
 .arcade-hint { font-size: .92rem; }
 .arcade-head h2 { font-size: 1.42rem; }
 .arcade-controls button { font-size: 1.1rem; padding: .32rem .54rem; }
}