:root {
  --night: #0c0e11;
  --line: #2a2f36;
  --line-2: #3a4048;
  --fog: #8f99a3;
  --dim: #7d8792;
  --ink: #e8e3d5;
  --parch: #d6c8a2;
  --lamp: #f2a23a;
  --lamp-deep: #8a5413;
  --ok: #9ed58f;
  --err: #ff7a6b;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --pad: clamp(12px, 2.4vw, 28px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font: 400 14px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lamp); }
button { font: inherit; color: inherit; }

/* ---------- the terminal window ---------- */

/* an Omarchy (Hyprland) window: flat, thin active border, no title bar */
.tty {
  position: fixed;
  inset: var(--pad);
  display: flex;
  flex-direction: column;
  border: 2px solid var(--lamp);
  border-radius: 4px;
  background: #151515;
  overflow: hidden;
}

.tty-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 26px 26px 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}

/* header, Claude Code style: small mascot + three lines */
.welcome { display: flex; align-items: center; gap: 22px; }
.mascot {
  --px: 4px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(var(--cols, 24), var(--px));
  grid-auto-rows: var(--px);
}
.w-text p { margin: 0; line-height: 1.5; }
.w-text b { color: #f0ece2; font-weight: 700; }
.w-text .sub { color: #a3a3a3; }
.w-note {
  margin: 18px 0 4px;
  padding-left: 12px;
  border-left: 3px solid #4a4a4a;
  color: #9a9a9a;
}
.w-note .cmd { background: none; padding: 0; color: #9a9a9a; text-decoration: underline dotted; }

/* clickable command words */
.cmd {
  padding: 0 4px;
  margin: 0 1px;
  border: 0;
  border-radius: 4px;
  background: #f2a23a1a;
  color: var(--lamp);
  cursor: pointer;
  white-space: pre;
}
.cmd:hover { background: #f2a23a33; }

/* output */
.log { padding-top: 6px; }
.l { white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.l.echo { margin-top: 10px; color: var(--ink); }
.pr { color: var(--lamp); }
.dim { color: var(--dim); }
.lamp { color: var(--lamp); }
.ok { color: var(--ok); }
.l.err, .err { color: var(--err); }
.h { color: var(--parch); font-weight: 700; }
.f { color: var(--ink); }
.dir { color: var(--lamp); font-weight: 700; }
.blink { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.progress { color: var(--parch); margin: 4px 0 8px; letter-spacing: -.5px; }

.card {
  margin: 10px 0 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d0f12d9;
  max-width: 640px;
}
.ca-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ca-row code { font-size: 13px; word-break: break-all; }
.tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--lamp);
  color: #1a1206;
}
.venues-label { margin: 12px 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.venues { display: flex; flex-wrap: wrap; gap: 8px; }
.venue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #14171b;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.venue:hover { border-color: var(--lamp); }
.venue img { width: 22px; height: 22px; border-radius: 6px; background: #0c0e11; }
.venue em { font-style: normal; font-size: 10px; color: var(--lamp); border: 1px solid #f2a23a55; border-radius: 999px; padding: 1px 6px; }

.orders { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; max-width: 640px; }
.order {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0d0f12cc;
  color: var(--ink);
  text-decoration: none;
}
a.order:hover { border-color: var(--lamp); }
.order b { color: var(--lamp); }
.order em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--fog); }
.order.done { border-color: #9ed58f55; }
.order.done b, .order.done em { color: var(--ok); }
.order.off { opacity: .45; }

.tag-card img { width: 100%; height: auto; display: block; border-radius: 8px; aspect-ratio: 1200 / 630; background: #14171b; }
.tag-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.t-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #14171b;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.t-btn:hover { border-color: var(--lamp); }
.t-btn.main { background: var(--lamp); border-color: var(--lamp); color: #1a1206; font-weight: 700; }

/* prompt box */
.tty-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 26px 0;
  padding: 10px 2px;
  border-top: 1px solid #3a3a3a;
  border-bottom: 1px solid #3a3a3a;
  transition: border-color .15s;
}
.tty-input:focus-within { border-color: #5c4a2e; }
.prompt-label { color: var(--lamp); font-weight: 700; white-space: nowrap; }
.prompt-label.asking { color: var(--parch); }
#cmd {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  caret-color: var(--lamp);
}
#cmd::placeholder { color: #5a5a5a; }

.chips {
  display: flex;
  gap: 6px;
  margin: 10px 26px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #1b1b1b;
  color: #a3a3a3;
  font-size: 12px;
  cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip.main { color: var(--lamp); border-color: #f2a23a66; }

.statusline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  padding: 8px 26px 10px;
  border-top: 1px solid #262626;
  background: #121212;
  font-size: 11px;
  color: var(--dim);
}
.statusline span:empty { display: none; }
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: 1px;
  animation: pulse 2.4s ease-in-out infinite;
}
.s-tag { margin-left: auto; color: var(--lamp); }

/* ---------- coming soon emote ---------- */

.emote {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  animation: emote 1.5s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
.emote img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--parch); box-shadow: 0 6px 16px #000a; }
.emote span {
  margin-top: -14px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--lamp);
  color: #1a1206;
  font: 700 17px var(--mono);
  letter-spacing: .04em;
  transform: rotate(var(--tilt, -6deg));
  box-shadow: 0 3px 0 var(--lamp-deep);
}
.emote i { margin-top: 6px; font: 500 11px var(--mono); font-style: normal; color: var(--ink); text-shadow: 0 1px 2px #000; }
@keyframes emote {
  0%   { opacity: 0; transform: translate(-50%, -80%) scale(.3); }
  18%  { opacity: 1; transform: translate(-50%, -125%) scale(1.15) rotate(var(--tilt)); }
  30%  { transform: translate(-50%, -120%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -135%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.9); }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- phones ---------- */

@media (max-width: 640px) {
  :root { --pad: 0px; }
  body { font-size: 13px; }
  .tty { border-radius: 0; inset: 0; }
  .tty-scroll { padding: 20px 14px 6px; }
  .welcome { gap: 14px; }
  .mascot { --px: 3px; }
  .tty-input { margin: 6px 14px 0; }
  #cmd { font-size: 16px; } /* no iOS zoom */
  .chips { margin: 8px 14px 0; }
  .statusline { padding: 7px 14px calc(9px + env(safe-area-inset-bottom, 0px)); gap: 2px 12px; }
  .s-tag { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dot, .blink { animation: none; }
  .emote { animation: none; transform: translate(-50%, -120%); }
}

/* ---------- pixel trench landing ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #07080a;
  cursor: pointer;
}
.pix {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform .7s cubic-bezier(.6, 0, .2, 1), opacity .7s ease-in;
}
.zooming .pix { transform: scale(6); opacity: 0; }
.zooming .st-top, .zooming .st-hint, .zooming .hotspot { opacity: 0; transition: opacity .2s; }

.st-top {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Silkscreen', var(--mono);
  pointer-events: none;
}
.st-top img { width: 36px; height: 36px; border-radius: 4px; image-rendering: pixelated; box-shadow: 0 0 0 3px #000; }
.st-top b { font-size: 26px; font-weight: 400; color: var(--parch); text-shadow: 3px 3px 0 #000; letter-spacing: 1px; }
.st-sub {
  font-size: 12px;
  color: var(--lamp);
  background: #000c;
  padding: 3px 8px;
  border: 2px solid var(--lamp);
}

.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hotspot::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px dashed #f2a23acc;
  animation: march 1.2s steps(2) infinite;
}
@keyframes march { 50% { border-color: #ffd27a; inset: -4px; } }
.hs-arrow {
  position: absolute;
  bottom: 100%;
  margin-bottom: 30px;
  color: var(--lamp);
  font-size: 22px;
  text-shadow: 3px 3px 0 #000;
  animation: hop .6s steps(2) infinite;
}
@keyframes hop { 50% { transform: translateY(-6px); } }
.hs-label {
  position: absolute;
  bottom: 100%;
  margin-bottom: 6px;
  white-space: nowrap;
  font: 400 12px 'Silkscreen', var(--mono);
  color: #1a1206;
  background: var(--lamp);
  padding: 2px 8px;
  box-shadow: 3px 3px 0 #000;
}
.hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

.st-hint {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font: 400 14px 'Silkscreen', var(--mono);
  color: var(--parch);
  background: #000c;
  padding: 6px 14px;
  border: 2px solid var(--parch);
  animation: blinkhint 1.2s steps(1) infinite;
  pointer-events: none;
}
@keyframes blinkhint { 50% { opacity: .35; } }

/* terminal only exists once you're inside */
body:not(.in-terminal) .tty { display: none; }
.in-terminal .stage { display: none; }
.in-terminal .tty { animation: boot .35s ease-out; }
@keyframes boot { from { opacity: 0; transform: scale(.97); filter: brightness(2); } }

.tty-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  padding: 3px 8px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #1b1b1b;
  color: #8a8a8a;
  font-size: 11px;
  cursor: pointer;
}
.tty-close:hover { background: #ffffff14; color: var(--ink); }

@media (max-width: 640px) {
  .st-top b { font-size: 20px; }
  .st-sub { font-size: 10px; }
  .st-hint { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot::before, .hs-arrow, .st-hint { animation: none; }
  .pix { transition: none; }
}