/* =====================================================================
   SYNTAX: ZERO, THE LOOK
   Only the game page loads this. Everything is scoped to .sz-stage, .sz
   and .sz-modal, so nothing here touches the rest of the site. Letter
   spacing is marked !important because the site's handwriting mode
   resets it everywhere else.
   ===================================================================== */

@font-face { font-family: 'Orbitron'; src: url('../assets/fonts/orbitron-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('../assets/fonts/orbitron-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('../assets/fonts/orbitron-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url('../assets/fonts/share-tech-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

.sz-stage, .sz-modal {
  --sz-bg: #07040e;
  --sz-panel: #110822;
  --sz-panel-2: #190d33;
  --sz-violet: #9d2eff;
  --sz-glow: #d98aff;
  --sz-magenta: #ff2a85;
  --sz-cyan: #00f5d4;
  --sz-text: #f3e8ff;
  --sz-soft: rgba(233, 213, 255, .78);
  --sz-dim: rgba(216, 180, 254, .62);
  --sz-display: 'Orbitron', 'Share Tech Mono', ui-monospace, monospace;
  --sz-mono: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---------- the stage: the game's own night sky, scanlines included ---------- */
.sz-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(18px, 4vw, 52px) 0 clamp(28px, 5vw, 64px);
  background:
    radial-gradient(circle at 50% 12%, rgba(157, 46, 255, .25) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(255, 42, 133, .12) 0%, transparent 45%),
    linear-gradient(180deg, #0a0514 0%, #07040e 100%);
  color: var(--sz-text);
}
.sz-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .32) 50%);
  background-size: 100% 4px;
}
.sz-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 448px) minmax(0, 340px);
  justify-content: center;
  align-items: start;
  gap: 24px;
  padding: 0 16px;
}
@media (max-width: 860px) {
  .sz-wrap { grid-template-columns: minmax(0, 448px); }
}

/* ---------- shared bits ---------- */
.sz, .sz-modal { font: 400 14px/1.45 var(--sz-mono); color: var(--sz-text); font-size-adjust: none; text-align: left; }
.sz *, .sz-modal * { box-sizing: border-box; font-size-adjust: none; }
.sz { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.sz input { -webkit-user-select: text; user-select: text; }
:where(.sz, .sz-modal) button { font: inherit; color: inherit; cursor: pointer; margin: 0; }
:where(.sz, .sz-modal) h1, :where(.sz, .sz-modal) h2, :where(.sz, .sz-modal) h3, :where(.sz, .sz-modal) p, :where(.sz, .sz-modal) ol { margin: 0; }
.sz :focus-visible, .sz-modal :focus-visible { outline: 2px solid var(--sz-cyan); outline-offset: 2px; }
.sz-cyan { color: var(--sz-cyan); text-shadow: 0 0 8px rgba(0, 245, 212, .75); }
.sz-magenta { color: var(--sz-magenta); text-shadow: 0 0 8px rgba(255, 42, 133, .8); }

/* ---------- the deck ---------- */
.sz-deck {
  position: relative;
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 12px;
  background: rgba(17, 8, 34, .92);
  border: 2px solid var(--sz-violet);
  box-shadow: 0 0 30px rgba(157, 46, 255, .35), inset 0 0 20px rgba(157, 46, 255, .15);
}
@media (min-width: 640px) { .sz-deck { padding: 20px; } }

.sz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(157, 46, 255, .6); }
.sz-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sz-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sz-cyan); animation: szPulse 2s ease-in-out infinite; }
.sz-title { font: 900 16px/1 var(--sz-display); --ls: .06em; color: var(--sz-glow); text-shadow: 0 0 10px var(--sz-violet), 0 0 22px rgba(157, 46, 255, .7); }
@media (min-width: 640px) { .sz-title { font-size: 18px; } }
.sz-sub { margin-top: 3px; font-size: 10px; line-height: 1.2; --ls: .2em; color: rgba(0, 245, 212, .8); }
.sz-head-btns { display: flex; gap: 6px; flex: none; }
.sz-chip { padding: 4px 8px; font-size: 12px; line-height: 1.2; border-radius: 4px; border: 1px solid rgba(157, 46, 255, .6); background: var(--sz-panel-2); color: var(--sz-cyan); transition: border-color .15s; }
.sz-chip:hover { border-color: var(--sz-cyan); }
.sz-chip.is-off { color: var(--sz-magenta); }
.sz-chip-help { color: var(--sz-glow); }
.sz-chip-help:hover { border-color: var(--sz-magenta); }

/* HUD: score, combo, clock */
.sz-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sz-stat { padding: 8px; border-radius: 8px; text-align: center; background: rgba(7, 4, 14, .9); border: 1px solid rgba(157, 46, 255, .5); }
.sz-label { font-size: 10px; line-height: 1.3; --ls: .18em; color: rgba(217, 138, 255, .8); white-space: nowrap; }
.sz-num { font: 700 18px/1.35 var(--sz-display); }
@media (min-width: 640px) { .sz-num { font-size: 20px; } }
.sz-num.is-low { color: var(--sz-magenta); text-shadow: 0 0 8px rgba(255, 42, 133, .8); animation: szPulse 1s ease-in-out infinite; }
.sz-bar { height: 4px; margin-top: 4px; border-radius: 99px; overflow: hidden; background: var(--sz-panel-2); }
.sz-bar > i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sz-violet), var(--sz-magenta)); transition: width .2s; }

/* the bounty cipher */
.sz-bounty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin-bottom: 12px; border-radius: 8px; background: rgba(255, 42, 133, .1); border: 1px dashed var(--sz-magenta); }
.sz-bounty-k { display: block; font-size: 10px; line-height: 1.3; font-weight: 700; --ls: .16em; color: var(--sz-magenta); }
.sz-bounty-note { display: block; font-size: 11px; color: var(--sz-soft); }
.sz-bounty-mask { flex: none; padding: 4px 10px; border-radius: 4px; font: 700 14px/1.3 var(--sz-display); --ls: .18em; color: var(--sz-magenta); text-shadow: 0 0 8px rgba(255, 42, 133, .8); background: rgba(7, 4, 14, .8); border: 1px solid rgba(255, 42, 133, .5); white-space: nowrap; }
@media (min-width: 640px) { .sz-bounty-mask { font-size: 16px; } }

/* the word being built */
.sz-assembly { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; background: #05020a; border: 2px solid var(--sz-cyan); box-shadow: 0 0 15px rgba(0, 245, 212, .2); }
.sz-assembly.shake { animation: szShake .3s ease-in-out; }
.sz-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sz-hint { font-size: 12px; --ls: .2em; color: rgba(216, 180, 254, .4); }
.sz-letter { padding: 2px 8px; border-radius: 4px; font: 700 17px/1.35 var(--sz-display); --ls: .04em; color: var(--sz-cyan); background: var(--sz-panel-2); border: 1px solid rgba(0, 245, 212, .7); transition: border-color .15s; }
.sz-letter:hover { border-color: var(--sz-magenta); }
.sz-preview { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.sz-preview-pts { padding: 2px 8px; border-radius: 4px; font: 700 12px/1.4 var(--sz-display); color: var(--sz-cyan); background: rgba(157, 46, 255, .3); border: 1px solid var(--sz-violet); white-space: nowrap; }
.sz-preview-mods { margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--sz-magenta); }

.sz-toast { min-height: 18px; margin-bottom: 10px; text-align: center; font-size: 12px; line-height: 1.4; font-weight: 700; --ls: .05em; color: var(--sz-glow); }

/* the 4x4 matrix */
.sz-play { position: relative; }
.sz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.sz-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  color: var(--sz-text);
  background: linear-gradient(145deg, #21103d 0%, #100720 100%);
  border: 2px solid rgba(157, 46, 255, .75);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
  transition: transform .1s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.sz-tile:hover { border-color: var(--sz-cyan); transform: translateY(-2px); box-shadow: 0 0 14px rgba(0, 245, 212, .35); }
.sz-tile:active { transform: scale(.95); }
.sz-tile.is-2x { border-color: var(--sz-magenta); box-shadow: 0 0 12px rgba(255, 42, 133, .28); }
.sz-tile.is-time { border-color: var(--sz-cyan); box-shadow: 0 0 12px rgba(0, 245, 212, .28); }
.sz-tile.is-glitch { border-color: var(--sz-glow); background: linear-gradient(145deg, #2d124d 0%, #16072c 100%); animation: szGlitch 2.2s ease-in-out infinite; }
.sz-tile.is-sel { color: #fff; background: linear-gradient(135deg, #9d2eff 0%, #6b11c9 100%); border-color: var(--sz-cyan); transform: scale(.94); box-shadow: 0 0 18px rgba(0, 245, 212, .65), inset 0 0 10px rgba(255, 255, 255, .35); }
.sz-tile.is-idle { opacity: .55; cursor: default; }
.sz-tile.is-idle:hover { transform: none; border-color: rgba(157, 46, 255, .75); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.sz-tile-ch { font: 900 24px/1 var(--sz-display); --ls: -.02em; }
@media (min-width: 640px) { .sz-tile-ch { font-size: 30px; } }
.sz-tile-tag { position: absolute; top: 4px; left: 6px; padding: 0 4px; border-radius: 4px; font-size: 9px; line-height: 1.5; font-weight: 700; color: #fff; background: var(--sz-violet); }
.sz-tile-tag.t-2x { background: var(--sz-magenta); }
.sz-tile-tag.t-time, .sz-tile-tag.t-step { background: var(--sz-cyan); color: var(--sz-bg); }
.sz-tile-pts { position: absolute; right: 6px; bottom: 4px; font-size: 10px; line-height: 1; color: rgba(216, 180, 254, .75); }

/* controls */
.sz-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sz-btn { padding: 10px 8px; border-radius: 8px; font: 700 12px/1.3 var(--sz-display); --ls: .02em; transition: background .15s, filter .15s, transform .1s; }
.sz-btn:active { transform: scale(.95); }
.sz-btn small { display: block; margin-top: 2px; font: 400 9px/1.2 var(--sz-mono); --ls: .04em; }
.sz-btn-clear { background: var(--sz-panel-2); border: 1px solid var(--sz-violet); color: #e9d5ff; }
.sz-btn-clear:hover { background: rgba(157, 46, 255, .3); }
.sz-btn-clear small { color: rgba(216, 180, 254, .6); }
.sz-btn-scramble { background: var(--sz-panel-2); border: 1px solid rgba(255, 42, 133, .8); color: var(--sz-magenta); }
.sz-btn-scramble:hover { background: rgba(255, 42, 133, .25); }
.sz-btn-scramble small { color: rgba(255, 42, 133, .8); }
.sz-btn-exec { grid-column: span 2; padding: 10px 12px; border: 0; font-weight: 900; font-size: 14px; --ls: .05em; color: var(--sz-bg); background: linear-gradient(90deg, #00f5d4, #00bbff); box-shadow: 0 0 15px rgba(0, 245, 212, .4); }
.sz-btn-exec:hover { filter: brightness(1.1); }
.sz-btn[disabled] { opacity: .55; cursor: progress; }

/* terminal log */
.sz-log { padding: 8px; border-radius: 8px; background: rgba(5, 2, 10, .9); border: 1px solid rgba(157, 46, 255, .4); }
.sz-log-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; margin-bottom: 4px; font-size: 10px; color: rgba(217, 138, 255, .7); border-bottom: 1px solid rgba(157, 46, 255, .2); }
.sz-log-body { height: 80px; overflow-y: auto; padding-right: 4px; font-size: 12px; line-height: 1.35; color: rgba(233, 213, 255, .9); scrollbar-width: thin; scrollbar-color: var(--sz-violet) #090414; }
.sz-log-body > div + div { margin-top: 4px; }
.sz-log-body::-webkit-scrollbar { width: 5px; }
.sz-log-body::-webkit-scrollbar-track { background: #090414; }
.sz-log-body::-webkit-scrollbar-thumb { background: var(--sz-violet); border-radius: 3px; }
.sz-log .l-ok { color: var(--sz-cyan); }
.sz-log .l-err { color: var(--sz-magenta); }
.sz-log .l-sys { color: var(--sz-glow); }
.sz-log .l-bounty { color: var(--sz-magenta); font-weight: 700; }
.sz-log .l-pts { color: #d8b4fe; }
.sz-log .l-dim { color: rgba(216, 180, 254, .7); }

/* start and game-over screens, over the matrix */
.sz-overlay { position: absolute; inset: -6px; z-index: 2; display: grid; place-items: center; padding: 14px; border-radius: 10px; background: rgba(7, 4, 14, .88); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid rgba(0, 245, 212, .35); }
.sz-panel { display: grid; gap: 10px; width: 100%; max-width: 340px; text-align: center; }
.sz-panel-k { font-size: 11px; font-weight: 700; --ls: .24em; color: var(--sz-cyan); }
.sz-panel-h { font: 900 17px/1.25 var(--sz-display); --ls: .04em; color: var(--sz-glow); text-shadow: 0 0 10px var(--sz-violet), 0 0 22px rgba(157, 46, 255, .7); }
.sz-panel-p { font-size: 12px; color: #e9d5ff; }
.sz-field { display: grid; gap: 4px; text-align: left; }
.sz-field > span { font-size: 10px; --ls: .2em; color: var(--sz-glow); }
.sz-field input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--sz-cyan); background: #05020a; color: var(--sz-cyan); font: 700 17px/1.2 var(--sz-display); --ls: .1em; }
.sz-field input::placeholder { color: rgba(0, 245, 212, .35); }
.sz-field input:focus { outline: 2px solid var(--sz-magenta); outline-offset: 2px; }
.sz-err { font-size: 11px; color: var(--sz-magenta); }
.sz-go { grid-column: auto; width: 100%; }
.sz-small { font-size: 10px; --ls: .18em; color: rgba(0, 245, 212, .8); }
.sz-small.is-warn { color: var(--sz-magenta); }
.sz-final { font: 900 40px/1 var(--sz-display); color: var(--sz-cyan); text-shadow: 0 0 12px rgba(0, 245, 212, .75); }
.sz-result { min-height: 18px; font-size: 12px; font-weight: 700; --ls: .04em; color: var(--sz-glow); }
.sz-result.is-good { color: var(--sz-cyan); }
.sz-result.is-bad { color: var(--sz-magenta); }

/* ---------- the daily leaderboard ---------- */
.sz-board {
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 12px;
  background: rgba(17, 8, 34, .92);
  border: 2px solid rgba(0, 245, 212, .7);
  box-shadow: 0 0 24px rgba(0, 245, 212, .18), inset 0 0 18px rgba(0, 245, 212, .08);
}
.sz-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid rgba(0, 245, 212, .35); }
.sz-board-head h2 { font: 700 14px/1.3 var(--sz-display); --ls: .06em; color: var(--sz-cyan); text-shadow: 0 0 8px rgba(0, 245, 212, .6); }
.sz-board-day { font-size: 10px; --ls: .2em; color: var(--sz-glow); white-space: nowrap; }
.sz-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.sz-tabs button { padding: 4px 10px; border-radius: 4px; font-size: 11px; --ls: .1em; background: var(--sz-panel-2); border: 1px solid rgba(157, 46, 255, .6); color: #e9d5ff; }
.sz-tabs button[aria-selected="true"] { background: var(--sz-violet); border-color: var(--sz-violet); color: #fff; }
.sz-rows { list-style: none; padding: 0; margin: 0; min-height: 60px; }
.sz-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; padding: 7px 8px; border-bottom: 1px dashed rgba(157, 46, 255, .25); }
.sz-rows li:last-child { border-bottom: 0; }
.sz-rows .rk { font: 700 12px/1.4 var(--sz-display); color: var(--sz-glow); }
.sz-rows li:nth-child(1) .rk { color: var(--sz-cyan); text-shadow: 0 0 8px rgba(0, 245, 212, .7); }
.sz-rows li:nth-child(3) .rk { color: var(--sz-magenta); }
.sz-rows .nm { font-size: 14px; --ls: .06em; color: var(--sz-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-rows .sc { font: 700 13px/1.4 var(--sz-display); color: var(--sz-cyan); text-align: right; }
.sz-rows .mt { grid-column: 2 / 4; font-size: 10px; --ls: .08em; color: var(--sz-dim); }
.sz-rows li.is-me { background: rgba(0, 245, 212, .08); box-shadow: inset 2px 0 0 var(--sz-cyan); }
.sz-board-note { padding: 10px 8px; font-size: 12px; color: var(--sz-soft); }
.sz-reset { margin-top: 10px; font-size: 10px; --ls: .16em; color: rgba(0, 245, 212, .75); }
.sz-board-rules { margin-top: 8px; font-size: 11px; line-height: 1.5; color: rgba(233, 213, 255, .62); }

/* ---------- the manual ---------- */
.sz-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sz-modal-card { width: 100%; max-width: 448px; max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 12px; padding: 20px; border-radius: 12px; background: rgba(17, 8, 34, .97); border: 2px solid var(--sz-cyan); box-shadow: 0 0 30px rgba(157, 46, 255, .35); }
.sz-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(157, 46, 255, .5); }
.sz-modal-head h2 { font: 700 15px/1.3 var(--sz-display); --ls: .04em; color: var(--sz-cyan); }
.sz-x { padding: 2px 8px; border-radius: 4px; font-size: 14px; font-weight: 700; color: var(--sz-magenta); background: transparent; border: 1px solid rgba(255, 42, 133, .5); }
.sz-modal-body { display: grid; gap: 8px; font-size: 12px; line-height: 1.6; color: rgba(243, 232, 255, .9); }
.sz-modal-body strong { color: var(--sz-cyan); }
.sz-modal-body .m-bounty { color: var(--sz-magenta); }
.sz-modal-body .m-glow { color: var(--sz-glow); }
.sz-modal-body code { color: var(--sz-cyan); font-family: var(--sz-mono); }
.sz-mods { display: grid; gap: 4px; padding: 10px; border-radius: 6px; background: var(--sz-bg); border: 1px solid rgba(157, 46, 255, .4); }
.sz-mods b { font-weight: 700; }
.sz-resume { width: 100%; padding: 9px; border-radius: 6px; border: 0; font: 700 12px/1.3 var(--sz-display); --ls: .08em; color: #fff; background: var(--sz-violet); }
.sz-resume:hover { background: #b155ff; }

/* ---------- winning letter spacing back from the site's handwriting mode ----------
   style.css resets letter-spacing and text-transform on every element while the handwriting
   font is on (html:not(.font-plain) body *). Each rule above sets --ls instead, and this one
   applies it with a selector that outranks the reset. */
html:root body :is(.sz, .sz-modal) * { letter-spacing: var(--ls, normal) !important; }
html:root body .sz .sz-field input { text-transform: uppercase !important; }

/* ---------- motion ---------- */
@keyframes szPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes szGlitch { 0%, 100% { box-shadow: 0 0 10px rgba(217, 138, 255, .35); } 50% { box-shadow: 0 0 18px rgba(255, 42, 133, .65); } }
@keyframes szShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .sz-dot, .sz-num.is-low, .sz-tile.is-glitch, .sz-assembly.shake { animation: none; }
  .sz-tile, .sz-btn, .sz-letter, .sz-bar > i { transition: none; }
}