/* ==========================================================================
   KUTAY OS — Terminal app
   The command-line page and its hidden "Terminal Lab" (arcade games +
   generative motion). A terminal reads as a terminal — its own dark,
   monospace palette — but still follows the OS light/dark switch.
   ========================================================================== */

.terminal-page {
  --term-bg: #0a0c11;
  --term-text: #dfe3ea;
  --term-echo: #7ee2a0;
  --term-id: #f0a45e;
  --term-dim: #8a919c;
  --term-accent: var(--accent);
  --term-warn: #ffb3a8;
  --term-link: #8fc6ff;
  --term-link-hover: #b7dcff;
  position: relative;
  display: flex; flex-direction: column; min-height: 0; height: 100%;
  overflow: hidden;
  background: var(--term-bg);
  color: var(--term-text);
  font: 14px/1.62 var(--font-mono);
}
:root[data-theme="light"] .terminal-page {
  --term-bg: #fbfaf8;
  --term-text: #22262d;
  --term-id: #a6600f;
  --term-dim: #7d838d;
  --term-echo: #2f7a4a;
}

.terminal-output { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px 24px 10px; }
.term-line { white-space: pre-wrap; word-break: break-word; min-height: 1.2em; }
.term-line a { color: var(--term-link); text-decoration: underline; text-underline-offset: 3px; }
.term-line code { background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 5px; }
/* output arrives, it doesn't pop: each new line fades up a few pixels */
.term-line { animation: term-line-in .16s var(--ease-out) both; }
.term-boot { animation: term-line-in .3s var(--ease-out) both; }
@keyframes term-line-in { from { opacity: 0; transform: translate3d(0, 4px, 0); } }
@keyframes term-panel-in { from { opacity: 0; transform: scale(.985); } }
.term-chip { font: inherit; color: var(--term-text); background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.terminal-input { transition: background var(--dur-base); }
.terminal-input:focus-within { background: rgba(255, 255, 255, .02); }
.terminal-input:focus-within .terminal-prompt { text-shadow: 0 0 12px color-mix(in srgb, var(--term-echo) 45%, transparent); }
.term-cmd { margin-top: 12px; }
.term-echo { color: var(--term-echo); }
.term-id { color: var(--term-id); white-space: pre; }
.term-dim { color: var(--term-dim); }
.term-accent { color: var(--term-accent); font-weight: 700; letter-spacing: .14em; }
.term-warn { color: var(--term-warn); }

.terminal-input { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 24px 18px; border-top: 1px solid var(--line-2); }
.terminal-prompt { color: var(--term-echo); white-space: nowrap; font-weight: 600; }
.terminal-prompt span { color: var(--term-dim); font-weight: 400; }
.terminal-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--term-text); font: inherit; padding: 8px 0; caret-color: var(--term-echo); }
.terminal-input input::placeholder { color: var(--term-dim); }
.terminal-input .btn { min-height: 36px; padding: 0 14px; flex-shrink: 0; }

.term-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.term-menu-btn { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: rgba(255, 255, 255, .03); color: inherit; font: inherit; transition: background var(--dur-fast), transform var(--dur-fast); }
.term-menu-btn b { display: block; font-size: 12px; }
.term-menu-btn small { display: block; opacity: .55; margin-top: 3px; font-size: 10px; }
.term-score-table { display: grid; grid-template-columns: minmax(120px, 1fr) auto; max-width: 420px; gap: 3px 16px; margin: 7px 0; }
.term-score-table span:nth-child(even) { text-align: right; color: var(--term-accent); }

/* ---- Terminal-only visual themes (`theme <amber|green|mono|crt>`) ---- */
.terminal-page.term-theme-green .terminal-output, .terminal-page.term-theme-green .terminal-input { color: #baffad; }
.terminal-page.term-theme-amber .terminal-output, .terminal-page.term-theme-amber .terminal-input { color: #ffc56d; }
.terminal-page.term-theme-mono .terminal-output, .terminal-page.term-theme-mono .terminal-input { color: #efefef; }
.terminal-page.term-theme-crt { filter: saturate(.9) contrast(1.08); }
.terminal-page.term-theme-crt::after {
  content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 70;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .16) 3px 4px);
  mix-blend-mode: multiply;
}

/* ---- The launcher bar making Terminal Lab discoverable without commands ---- */
.term-lab-launchbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
}
.term-lab-launchbar > span { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 150px; }
.term-lab-launchbar > span b { font-size: 10px; letter-spacing: .16em; color: #e5cfaa; }
.term-lab-launchbar > span small { font-size: 9px; letter-spacing: .08em; opacity: .55; }
.term-lab-launchbar button { border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: inherit; border-radius: 9px; min-height: 32px; padding: 0 12px; font: 600 11px/1 var(--font-mono); transition: transform var(--dur-base), background var(--dur-base), border-color var(--dur-base); }
.term-lab-launchbar button i { font-style: normal; opacity: .46; margin-left: 4px; }
.term-lab-welcome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid rgba(216, 197, 159, .18); background: rgba(216, 197, 159, .045); border-radius: 10px; }
.term-lab-welcome > b { font-size: 10px; letter-spacing: .14em; color: #e5cfaa; }
.term-lab-welcome > span { font-size: 11px; opacity: .72; }

/* ---- Terminal Lab — the full-panel games / generative-motion overlay ---- */
.term-lab-panel {
  position: absolute; inset: 0; z-index: 40; background: rgba(5, 7, 9, .98); color: #e9efe9;
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; font-family: var(--font-mono);
  animation: term-panel-in .22s var(--ease-out) both;
}
.term-lab-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.term-lab-bar strong { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.term-lab-bar span { font-size: 11px; opacity: .58; }
.term-lab-close { margin-left: auto; border: 1px solid var(--line); background: transparent; color: inherit; border-radius: var(--r-pill); min-height: 32px; padding: 0 12px; font: 600 11px var(--font-mono); transition: background var(--dur-fast), border-color var(--dur-fast); }
.term-lab-stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #050709; touch-action: none; }
.term-lab-stage canvas { width: 100%; height: 100%; display: block; }
.term-lab-foot { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border-top: 1px solid var(--line-2); font-size: 10px; letter-spacing: .06em; opacity: .66; }
.term-lab-ui { position: absolute; inset: 0; pointer-events: none; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.term-lab-score { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.term-lab-message { align-self: center; margin: auto; background: rgba(0, 0, 0, .58); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; text-align: center; max-width: 440px; font-size: 13px; line-height: 1.55; }
.term-lab-message b { font-size: 18px; display: block; margin-bottom: 4px; }

.term-game-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.term-game-controls > [data-game-level] { font-size: 10px; letter-spacing: .14em; opacity: .72; white-space: nowrap; }
.term-game-controls > div { display: flex; align-items: center; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(255, 255, 255, .025); }
.term-game-controls button { border: 0; background: transparent; color: inherit; font: 700 10px/1 var(--font-mono); letter-spacing: .06em; min-height: 26px; padding: 0 9px; border-radius: var(--r-pill); opacity: .48; transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.term-game-controls button[aria-pressed="true"] { opacity: 1; background: #e5cfaa; color: #141414; }
.term-game-controls button:active { transform: scale(.94); }

/* touch pad for games (terminal-lab.js installTouchPad, coarse pointers only) */
.term-touchpad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); user-select: none; -webkit-user-select: none; touch-action: none; }
.term-touchpad button { min-width: 52px; height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: inherit; font: 700 13px var(--font-mono); transition: transform var(--dur-fast), background var(--dur-fast); }
.term-touchpad button.is-down { transform: scale(.93); background: #e5cfaa; color: #141414; }
.term-touchpad [data-pad-key="r"] { margin-left: auto; opacity: .7; }

@media (pointer: coarse) {
  .terminal-input input { font-size: 16px; }
  .terminal-input .btn { min-height: 44px; min-width: 48px; }
  .term-lab-launchbar button { min-height: 42px; }
  .term-lab-close { min-height: 42px; padding: 0 16px; }
  .term-game-controls button { min-height: 36px; }
  .term-menu-btn { min-height: 56px; }
}
@media (max-width: 720px) {
  .terminal-output { padding: 16px 14px 8px; font-size: 13px; }
  .terminal-input { padding: 10px 14px 14px; }
  .terminal-prompt { font-size: 12px; }
  .term-lab-bar span, .term-lab-bar > span { display: none; }
  .term-lab-foot { font-size: 9px; }
  .term-menu-grid { grid-template-columns: 1fr 1fr; }
  .term-game-controls > [data-game-level] { display: none; }
  .term-game-controls { gap: 4px; }
  .term-game-controls button { padding: 0 7px; }
}
@media (max-width: 620px) {
  .term-lab-launchbar { overflow-x: auto; }
  .term-lab-launchbar > span { display: none; }
  .term-lab-launchbar button { white-space: nowrap; }
}


/* hover affordances only where hover exists — no sticky rings after a tap */
@media (hover: hover) {
  .term-line a:hover { color: var(--term-link-hover); }
  .term-chip:hover { border-color: color-mix(in srgb, var(--term-echo) 60%, transparent); background: rgba(126, 226, 160, .1); }
  .term-menu-btn:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
  .term-lab-launchbar button:hover, .term-lab-launchbar button:focus-visible { transform: translateY(-2px); background: rgba(216, 197, 159, .1); border-color: rgba(216, 197, 159, .45); }
  .term-lab-close:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
  .term-game-controls button:hover { opacity: .8; }
}.term-lab-launchbar button:focus-visible { background: rgba(216, 197, 159, .1); border-color: rgba(216, 197, 159, .45); }