/* The terminal easter egg (assets/term.js). Moved out of style.css on 2026-10-17 so the
   studio homepage can load it without the old theme; style.css keeps its copy for the app pages. */
/* ---- terminal easter egg ------------------------------------------------ */
#term{position:fixed;inset:0;z-index:420;display:grid;place-items:center;padding:24px;
  background:rgba(3,4,9,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.2s}
#term.open{opacity:1;visibility:visible}
.termwin{width:min(680px,95vw);height:min(440px,80vh);display:flex;flex-direction:column;border-radius:14px;
  overflow:hidden;background:#0a0c15;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(0,0,0,.7);transform:scale(.97);transition:transform .2s}
#term.open .termwin{transform:none}
.termbar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.td{width:12px;height:12px;border-radius:50%}
.td.r{background:#ff5f57}.td.y{background:#febc2e}.td.g{background:#28c840}
.termtitle{margin-left:8px;font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:12.5px;color:#8b93ab}
.termx{margin-left:auto;background:none;border:none;color:#8b93ab;cursor:pointer;font-size:14px}
.termx:hover{color:#fff}
.termbody{flex:1;overflow-y:auto;padding:16px;font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.65;color:#d7dcf0}
.terml{white-space:pre-wrap;word-break:break-word}
.terml.muted{color:#6b7390}.terml.ok{color:#34d399}.terml.err{color:#fb7185}.terml.echo{color:#a9b1cf}
.terml b{color:#fab84d;font-weight:700}
.terml .tapp{color:#33e6d1}
.terml .termps,.termps{color:#34d399;font-weight:700}
.termline{display:flex;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);
  font-family:'SF Mono',ui-monospace,Menlo,monospace}
.termline input{flex:1;background:none;border:none;outline:none;color:#d7dcf0;font:inherit;font-size:13.5px}
.termline input:disabled{opacity:.4}
/* terminal toys: snake board + matrix rain */
.snakewrap,.mtxwrap{margin:12px 0;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.snakecv,.mtxcv{border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#06070d;max-width:100%}
.snakehud{font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:11.5px;color:#6b7390}
.snakescore{color:#33e6d1;font-weight:700}


/* ---- terminal: dock button, source view, games -------------------------- */
/* The dock is the only entry point a visitor can SEE. It reads as a devtool —
   monospace, a prompt glyph and a live caret — rather than a support widget,
   because the people who will enjoy this recognise a shell on sight. */
.termdock{position:fixed;right:20px;bottom:20px;z-index:400;display:flex;align-items:center;gap:8px;
  padding:11px 15px;border-radius:11px;cursor:pointer;
  font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.02em;
  color:#d7dcf0;background:rgba(12,14,22,.86);backdrop-filter:blur(12px);
  border:1px solid rgba(51,230,209,.32);
  box-shadow:0 6px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s,border-color .2s,box-shadow .2s}
.termdock:hover{border-color:rgba(51,230,209,.75);box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 4px rgba(51,230,209,.09)}
.termdock:focus-visible{outline:2px solid #33e6d1;outline-offset:3px}
.termdock .tdps{color:#34d399;font-weight:700}
.termdock .tdlabel{opacity:.92}
.termdock .tdcur{width:7px;height:15px;background:#33e6d1;border-radius:1px;animation:tdblink 1.15s steps(2,start) infinite}
@keyframes tdblink{0%,100%{opacity:1}50%{opacity:0}}
.termdock.down{transform:translateY(96px);opacity:0;pointer-events:none}
html.term-open .termdock{opacity:0;pointer-events:none}
@media(max-width:680px){.termdock{right:14px;bottom:14px;padding:10px 13px;font-size:12px}
  .termdock .tdlabel{display:none}}
@media(prefers-reduced-motion:reduce){.termdock .tdcur{animation:none}.termdock{transition:none}}

/* window sizing: a shell wants room */
.termwin{width:min(860px,95vw);height:min(560px,82vh)}
.termbar .tdot{width:11px;height:11px;border-radius:50%;display:inline-block}
.termbar .tdot.r{background:#ff5f57}.termbar .tdot.y{background:#febc2e}.termbar .tdot.g{background:#28c840}

/* directories, files, matches */
.terml .tdir{color:#7aa2ff;font-weight:700}
.terml .tfile{color:#d7dcf0}
.terml .thit{background:rgba(250,184,77,.22);color:#fab84d;border-radius:2px}
.terml .tln{color:#4d5570;user-select:none}
.terml .ttarget{color:#fab84d}
.terml.tsrc{margin:6px 0;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.07);overflow-x:auto;font-size:12.5px;line-height:1.55}
/* syntax colours, deliberately few: keyword, string, value, number, comment */
.terml .tsrc i,.tsrc i{font-style:normal}
.tsrc .k{color:#7aa2ff}.tsrc .t{color:#9ece6a}.tsrc .v{color:#33e6d1}
.tsrc .n{color:#fab84d}.tsrc .c{color:#565f89}.tsrc .s{color:#e0af68}

/* 2048 */
.gwrap{margin:12px 0}
.g2048{display:grid;grid-template-columns:repeat(4,54px);gap:6px;padding:6px;
  background:#11131c;border:1px solid rgba(255,255,255,.14);border-radius:10px;width:max-content}
.g2048 .t2{display:grid;place-items:center;height:54px;border-radius:6px;font-weight:700;
  font-size:17px;font-style:normal;background:rgba(255,255,255,.04);color:#d7dcf0}
.g2048 .v2{background:#1d2233}.g2048 .v4{background:#243049}
.g2048 .v8{background:#2a4a6b;color:#cfe8ff}.g2048 .v16{background:#1f7a6c;color:#eafff9}
.g2048 .v32{background:#1f9e8c;color:#06120f}.g2048 .v64{background:#33e6d1;color:#06120f}
.g2048 .v128,.g2048 .v256{background:#fab84d;color:#1a1405;font-size:15px}
.g2048 .v512,.g2048 .v1024,.g2048 .v2048{background:#ff9f43;color:#1a1405;font-size:14px}

/* 2026-10-17 redesign: the dock matches the studio's square mono buttons and sits left of the ruler scrollbar */
.termdock{right:76px;bottom:20px;border-radius:0;font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;background:rgba(15,16,19,.9);border:1px solid rgba(242,241,238,.32);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.termdock:hover{border-color:#4fe0cf;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.termdock .tdcur{background:#4fe0cf;border-radius:0}
@media(max-width:760px){.termdock{right:40px;bottom:14px}}