:root {
  color-scheme: dark;
  --bg: #020201;
  --yellow: #ffe300;
  --yellow-soft: #bd9e18;
  --yellow-dim: #786511;
  --green: #48ff68;
  --line: rgba(255, 226, 0, .58);
  --font: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--yellow); background: var(--bg); font-family: var(--font); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible, #myCanvas:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
#matrixRain { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.matrix-column { position: absolute; top: 0; display: block; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; font: 700 14px/1.25 var(--font); letter-spacing: .13em; color: #ffd700; text-shadow: 0 0 7px rgba(255,222,0,.64); opacity: var(--glow, .44); user-select: none; will-change: transform; animation: matrix-fall var(--duration, 16s) linear infinite; animation-delay: var(--delay, -4s); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 76%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 76%, transparent); }
@keyframes matrix-fall { from { transform: translateY(-115%); } to { transform: translateY(110vh); } }
.screen-shade { position: fixed; inset: 0; z-index: 0; pointer-events:none; background: radial-gradient(ellipse at 50% 44%, rgba(0,0,0,.55) 4%, rgba(0,0,0,.18) 63%, rgba(0,0,0,.23) 100%); }
.shell { position: relative; z-index: 1; width: min(calc(100% - 32px), 900px); margin: 0 auto; padding: 24px 0 20px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin: 0 6px 20px; gap: 12px; color: #fce400; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-shadow: 0 0 8px rgba(255,226,0,.26); }
.brand-mark { padding: 3px; border: 1px solid var(--yellow); margin-right: 5px; }
.muted { color: #a89028; font-weight: 400; }
.connection { color: #e9d258; white-space: nowrap; font-size: .7rem; }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--yellow); box-shadow: 0 0 10px var(--yellow); animation: flicker 2.5s infinite; }
.terminal { position: relative; width: 100%; padding: 26px clamp(15px, 5vw, 55px) 19px; background: rgba(2, 3, 1, .955); border: 1px solid var(--line); box-shadow: 0 0 0 5px rgba(0,0,0,.56), 0 0 33px rgba(255,229,0,.11), inset 0 0 36px rgba(255,225,0,.018); clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px)); text-align: center; }
.terminal:before, .terminal:after { content: ''; display: block; position: absolute; top: 12px; width: 74px; height: 1px; background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.terminal:before { left: 29px; }.terminal:after { right: 29px; }
.corner { position:absolute; width:35px; height:4px; background:var(--yellow); box-shadow:0 0 9px rgba(255,232,0,.7); }
.corner-tl { top:0; left:19px; }.corner-tr { top:0; right:19px; }.corner-bl { bottom:0; left:19px; }.corner-br { bottom:0; right:19px; }
.hero-icon { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto 9px; border: 1px solid #a9971d; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,226,0,.035), 0 0 15px rgba(255,226,0,.13); }
.hero-icon img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(255,230,0,.5)); }
.eyebrow { font-size: .63rem; letter-spacing: .22em; color: #a58c24; margin: 0 0 2px; }
h1 { margin: 0; font-family: 'Arial Black', Impact, var(--font); font-weight: 900; font-size: clamp(3.2rem, 9.8vw, 5.8rem); line-height: 1.12; letter-spacing: -.055em; text-shadow: 0 0 18px rgba(255,231,0,.28); }
.title-number { color: #ffec53; }.cursor { font-family: var(--font); font-weight: 400; font-size: .7em; animation: blink 1.2s steps(1,end) infinite; }
.lead { color: #b5a869; font-size: clamp(.7rem, 2vw, .82rem); letter-spacing:.09em; margin: 4px 0 18px; }
.lead strong { color: var(--green); text-shadow: 0 0 11px rgba(49,255,85,.5); }
.stats { max-width: 650px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid rgba(255,222,0,.18); background: rgba(255,218,0,.025); }
.stat { padding: 10px 7px 8px; display: grid; gap: 3px; }
.stat + .stat { border-left: 1px solid rgba(255,222,0,.18); }
.stat-label { color: #90802e; font-size: .64rem; letter-spacing:.14em; }
.stat strong { font-size: clamp(1rem,3vw,1.45rem); letter-spacing:.11em; font-weight:700; font-variant-numeric: tabular-nums; }
.arena-shell { width: min(100%, 575px); margin: 0 auto; padding: 0 8px; border: 1px solid rgba(255,225,0,.63); background: #030301; box-shadow: inset 0 0 12px rgba(255,226,0,.04), 0 0 24px rgba(255,226,0,.07); }
.arena-chrome { display: flex; justify-content: space-between; padding: 7px 0; font-size: .62rem; letter-spacing: .09em; text-align: left; color: #b9a12d; }
.arena-chrome #runStatus { color: #ffe200; }
.arena-chrome.bottom { padding: 7px 0 8px; border-top: 1px solid rgba(255,225,0,.15); }
.arena { position: relative; width: 100%; aspect-ratio: 1 / 1; border: 1px solid rgba(255,226,0,.42); overflow: hidden; background: #040602; touch-action: none; }
#myCanvas { display: block; width: 100%; height: 100%; background: #030502; touch-action: none; }
.game-over-overlay, .pause-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.83); color: #ffe300; gap: 11px; text-align: center; }
.game-over-overlay h2 { margin: 0; font-family: 'Arial Black', Impact, sans-serif; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1; text-shadow: 0 0 18px rgba(255,226,0,.3); }
.game-over-overlay p { margin: 0; color: #b7a44a; font-size: .78rem; letter-spacing: .13em; }
.game-over-overlay .game-over-kicker { color: #ffe300; }
.failure-symbol { width: 65px; height:65px; border: 3px solid #ffe300; border-radius: 50%; display:grid; place-items:center; font-size: 2.6rem; font-weight: 900; box-shadow: 0 0 25px rgba(255,226,0,.15); }
#restartButton { margin-top: 12px; padding: 13px 25px; cursor: pointer; color: #060600; background:#ffe300; border: 1px solid #ffeb6b; font-size: .8rem; font-weight: 900; letter-spacing:.09em; box-shadow: 0 0 19px rgba(255,226,0,.22); }
#restartButton:hover { background: #fff272; }
.pause-overlay[hidden] { display: none; }
.pause-overlay strong { font-size: clamp(2rem,6vw,3rem); letter-spacing:.14em; }
.pause-overlay span { font-size:.72rem; color:#aaa05a; }
.under-arena { width: min(100%,575px); display: flex; gap: 12px; justify-content: space-between; align-items: center; margin: 12px auto 0; text-align: left; }
.instructions { font-size: .66rem; color: #ad9a45; margin: 0; line-height: 1.5; }
.instructions strong, .mini-diamond { color: #ffe300; }
.game-actions { display:flex; gap:7px; flex-shrink:0; }
.pause-button { flex-shrink: 0; background: transparent; border: 1px solid #ae9918; color: #ffe300; padding: 7px 9px; font-size: .67rem; cursor:pointer; }
.pause-button:hover { background: rgba(255,226,0,.12); }
.touch-controls { display: none; flex-direction: column; align-items: center; gap: 5px; margin-top: 17px; }
.touch-middle { display: flex; gap: 5px; }
.touch-key { width: 57px; height: 41px; background: rgba(255,226,0,.09); border: 1px solid #968110; color: #ffe300; font-size: 1.1rem; cursor: pointer; touch-action: manipulation; }
.touch-key:active { background: rgba(255,226,0,.36); }
.footer { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 17px; padding: 8px 0; color: #837324; text-align:center; font-size: .62rem; letter-spacing:.06em; }
.footer a { color: #d5b620; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #ffef69; }
@keyframes blink { 50% { opacity:0 } }
@keyframes flicker { 50% { box-shadow:0 0 3px var(--yellow); opacity:.7; } }
@media (max-width: 680px) {
  .shell { width: min(calc(100% - 16px), 560px); padding: 10px 0; }
  .topbar { margin: 0 5px 12px; font-size: .68rem; }
  .connection { font-size: .57rem; }
  .brand .muted { display:none; }
  .terminal { padding: 18px 12px 14px; }
  .hero-icon { width: 34px; height:34px; margin-bottom:5px; }.hero-icon img { width:27px; height:27px; }
  .eyebrow { font-size: .53rem; }.lead { margin: 2px 0 11px; }
  .stats { margin-bottom: 10px; }
  .arena-shell { padding: 0 5px; }.arena-chrome { font-size:.54rem; }
  .under-arena { align-items: center; }
  .instructions { font-size:.57rem; }
  .touch-controls { display: flex; }
  .footer { gap: 5px; font-size:.52rem; flex-wrap: wrap; }
}
@media (max-width: 380px) { .terminal { padding-inline: 7px; } .under-arena { flex-wrap:wrap; justify-content:center; text-align:center; } }
@media (prefers-reduced-motion: reduce) { .cursor, .pulse, .matrix-column { animation:none; } .matrix-column { transform:translateY(-30%); } }


/* Welcome screen – yellow/black Arch Linux Matrix interface. */
body.welcome-visible { overflow: hidden; }
body.welcome-visible .shell { visibility: hidden; }
.welcome-screen[hidden], .welcome-content[hidden] { display: none !important; }
.welcome-screen {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center;
  justify-content: center; overflow: auto; overscroll-behavior: contain;
  padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at center, rgba(0,0,0,.34), rgba(0,0,0,.08));
}
.welcome-frame {
  position: relative; width: min(100%, 764px); margin: auto; flex-shrink: 0;
  padding: clamp(22px,3vw,36px) clamp(18px,4vw,48px) 24px;
  color: #ffe300; text-align: center; border: 2px solid #f2d000;
  background: rgba(1,2,0,.94); box-shadow: 0 0 0 5px rgba(0,0,0,.5), 0 0 35px rgba(255,210,0,.16), inset 0 0 30px rgba(255,218,0,.025);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}
.welcome-frame::before, .welcome-frame::after {
  content: ''; position: absolute; top: 11px; width: 96px; height: 2px;
  background: linear-gradient(90deg, transparent, #ffe300); box-shadow: 0 0 7px #ac8d00;
}
.welcome-frame::before {left:20px} .welcome-frame::after {right:20px;transform:scaleX(-1)}
.welcome-corner { position:absolute; width:37px; height:5px; background:#ffeb00; box-shadow:0 0 9px rgba(255,230,0,.7); }
.welcome-corner--tl { top:0;left:15px } .welcome-corner--tr {top:0;right:15px}
.welcome-corner--bl {bottom:0;left:15px} .welcome-corner--br {bottom:0;right:15px}
.welcome-icon-row { display:flex; align-items:center; justify-content:center; margin:0 auto 5px; }
.welcome-wing { height: 1px; width: min(18%,140px); background: linear-gradient(to right, transparent, #fbd600); box-shadow: 0 0 6px rgba(255,226,0,.5); }
.welcome-wing:last-child { transform:rotate(180deg) }
.arch-ring {
  position:relative; flex-shrink:0; width:144px; height:144px; padding:17px;
  display:grid; place-items:center; border:2px solid #f6d900; border-radius:50%;
  outline:1px dashed rgba(255,225,0,.6); outline-offset:8px;
  box-shadow: 0 0 17px rgba(255,226,0,.22), inset 0 0 20px rgba(255,226,0,.06);
}
.arch-ring::before {content:'';position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(255,226,0,.32)}
.arch-ring img { width: 100%; height: 100%; object-fit: contain; filter:drop-shadow(0 0 5px rgba(255,219,0,.6)); }
.welcome-title {
  margin: 12px 0 10px; white-space:normal; font-family:'Arial Black',Impact,sans-serif;
  font-size:clamp(2.1rem,6.1vw,3.85rem); line-height:1.12; font-weight:900;
  letter-spacing:-.055em; color:#ffe400; text-shadow: 0 0 18px rgba(255,218,0,.33);
}
.welcome-dashes { height:2px;width:96px;margin:13px auto 14px;background: repeating-linear-gradient(to right,#ffe500 0 27px,transparent 27px 36px); }
.welcome-content { min-height:180px; }
.welcome-content h3 { font-size: 1.16rem; margin: 4px 0 14px; letter-spacing:.04em; color:#ffea3c; }
.welcome-steps { display:grid; gap:10px; padding:0; margin:0 auto; width:fit-content; max-width:100%; list-style:none; text-align:left; color:#ebd45b; }
.welcome-steps li { position:relative; padding-left:23px; font-size: clamp(.8rem,1.7vw,.98rem); line-height:1.42; }
.welcome-steps li::before { content:'▪'; position:absolute;left:0;color:#ffdf00; }
.welcome-steps em { font-style:normal; color:#5aff74; font-weight:700; }
.welcome-steps strong {color:#fff090}
.welcome-score strong {display:block;margin:16px 0 7px;font-size:clamp(2.5rem,6vw,3.5rem);letter-spacing:.1em;text-shadow:0 0 14px rgba(255,230,0,.5)}
.welcome-score p {font-size:.8rem;color:#ab9543}
.welcome-dashes--bottom { margin-top:17px; margin-bottom:11px; }
.welcome-nav { display:flex;justify-content:space-evenly;gap:0;align-items:stretch; }
.welcome-action { display:flex;align-items:center;justify-content:center;gap:9px; min-height:49px; flex:1; border:0; color:#ffe300; background:transparent; cursor:pointer; font-weight:700; font-size:clamp(.76rem,1.7vw,.95rem); }
.welcome-action + .welcome-action {border-left:1px solid rgba(255,226,0,.28)}
.welcome-action:hover, .welcome-action[aria-pressed="true"] {color:#fff9a0;background:rgba(255,226,0,.095);text-shadow:0 0 10px rgba(255,225,0,.65)}
.welcome-action-icon {font-size:1.6em;line-height:1}
.welcome-credit {margin:16px 0 0;color: #a18b28; font-size:.62rem;letter-spacing:.12em}
@media (max-width:580px) {
  .welcome-screen {align-items:center; padding:12px 10px}
  .welcome-frame {padding:24px 15px 16px}
  .arch-ring {width:103px;height:103px;padding:11px;outline-offset:5px}
  .arch-ring::before {inset:-9px}
  .welcome-title {font-size:clamp(1.9rem,8.8vw,3rem);margin-top:17px}
  .welcome-content {min-height:188px}
  .welcome-content h3 {font-size:1rem}
  .welcome-steps {gap:9px}
  .welcome-steps li {font-size:.75rem;padding-left:16px}
  .welcome-action {gap:4px;font-size:.68rem; min-height:45px}
  .welcome-action-icon {font-size:1.35em}
  .welcome-credit {font-size:.49rem}
}
@media (max-height:660px) and (min-width:600px) {
  .welcome-frame {padding-top:15px;padding-bottom:10px}
  .arch-ring {width:97px;height:97px;outline-offset:4px}
  .arch-ring::before {inset:-8px}
  .welcome-title {margin-top:6px;font-size:clamp(1.9rem,5vw,3rem)}
  .welcome-content {min-height:132px}
  .welcome-content h3 {margin-bottom:8px}
  .welcome-steps {gap:5px}
  .welcome-dashes {margin-top:8px;margin-bottom:8px}
  .welcome-credit {margin-top:7px}
}
@media (prefers-reduced-motion:reduce){.welcome-frame{scroll-behavior:auto}}