:root {
  --bg: #07090a;
  --panel: #0d1112;
  --line: #1f2a2b;
  --fg: #c9f5d9;
  --dim: #6b8a7a;
  --accent: #39ff8f;
  --warn: #ffb347;
  --danger: #ff4d5e;
  --bronze: #c98a4b;
  --silver: #c7d0d6;
  --gold: #ffd54a;
  --legendary: #c77dff;
  --font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body::after { /* scanlines */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
}
button { font: inherit; color: inherit; cursor: pointer; }

.app {
  display: flex; flex-direction: column;
  height: 100dvh;
  max-width: 760px; margin: 0 auto;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: 0.2em; color: var(--accent); white-space: nowrap; }
.cursor { animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.stability { flex: 1; min-width: 0; }
.stability-label { font-size: 11px; color: var(--dim); letter-spacing: 0.1em; white-space: nowrap; }
.stability-track { height: 6px; background: var(--line); margin-top: 4px; }
.stability-fill { height: 100%; width: 100%; background: var(--accent); transition: width .6s ease, background-color .6s; }
.icon-btn {
  background: none; border: 1px solid var(--line); padding: 6px 10px;
  font-size: 12px; letter-spacing: 0.1em; white-space: nowrap;
}
.badge { color: var(--accent); }

/* Log */
.log { flex: 1; overflow-y: auto; padding: 16px 0; display: flex; flex-direction: column; gap: 14px; }
.msg-user { align-self: flex-end; max-width: 85%; color: var(--fg); }
.msg-user::before { content: "> "; color: var(--dim); }
.sysbox {
  border: 1px solid var(--accent);
  background: var(--panel);
  max-width: 95%;
  box-shadow: 0 0 18px rgba(57,255,143,0.08);
  animation: boxin .25s ease-out;
}
.sysbox-head {
  background: var(--accent); color: var(--bg);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  padding: 3px 10px; display: flex; justify-content: space-between;
}
.sysbox-body { padding: 10px 12px; white-space: pre-wrap; word-wrap: break-word; }
.sysbox.error { border-color: var(--danger); }
.sysbox.error .sysbox-head { background: var(--danger); }
@keyframes boxin { from { opacity: 0; transform: translateY(4px); } }
.typing { color: var(--dim); font-size: 13px; }
.typing .cursor { color: var(--accent); }

/* Lootbox (inline, tap to open) */
.lootbox {
  display: block; width: calc(100% - 24px); margin: 0 12px 12px;
  border: 1px dashed currentColor; background: none; padding: 10px; text-align: left;
}
.lootbox[data-tier="bronze"] { color: var(--bronze); }
.lootbox[data-tier="silver"] { color: var(--silver); }
.lootbox[data-tier="gold"] { color: var(--gold); }
.lootbox[data-tier="legendary"] { color: var(--legendary); animation: shimmer 2s ease-in-out infinite; }
.lootbox:not(.opened) { animation: wobble 1.6s ease-in-out infinite; }
.lootbox-title { font-weight: 700; letter-spacing: 0.12em; font-size: 12px; }
.lootbox-contents { color: var(--fg); margin-top: 6px; display: none; }
.lootbox.opened { border-style: solid; animation: none; cursor: default; }
.lootbox.opened .lootbox-contents { display: block; animation: boxin .3s ease-out; }
@keyframes wobble { 0%,100% { transform: rotate(0); } 10% { transform: rotate(-1deg); } 20% { transform: rotate(1deg); } 30% { transform: rotate(0); } }
@keyframes shimmer { 50% { box-shadow: 0 0 16px currentColor; } }

/* Composer */
.composer {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--line); padding: 12px 0 6px;
}
.prompt { color: var(--accent); }
#input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--fg); caret-color: var(--accent);
  font: 16px var(--font); /* 16px stops iOS zoom */
}
#input::placeholder { color: var(--dim); }
#send {
  background: var(--accent); color: var(--bg); border: none;
  padding: 8px 14px; font-weight: 700; letter-spacing: 0.1em;
}
#send:disabled { opacity: 0.4; cursor: default; }
.meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--dim); padding-bottom: 10px; }

/* Drawer */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--panel); border-left: 1px solid var(--line);
  padding: calc(16px + env(safe-area-inset-top)) 16px 16px;
  transform: translateX(100%); transition: transform .25s ease;
  overflow-y: auto; z-index: 20;
}
.drawer.open { transform: none; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 10; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer h2 { font-size: 14px; letter-spacing: 0.18em; color: var(--accent); margin: 0; }
.drawer h3 { font-size: 11px; letter-spacing: 0.18em; color: var(--dim); margin: 20px 0 8px; }
.drawer-crawler { margin-top: 8px; font-size: 13px; }
.ach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ach-list li { border-left: 2px solid var(--accent); padding: 2px 0 2px 10px; font-size: 13px; }
.ach-list li b { display: block; color: var(--accent); }
.ach-list li.empty { border: none; padding: 0; color: var(--dim); }
.ach-list li[data-tier="bronze"] { border-color: var(--bronze); }
.ach-list li[data-tier="silver"] { border-color: var(--silver); }
.ach-list li[data-tier="gold"] { border-color: var(--gold); }
.ach-list li[data-tier="legendary"] { border-color: var(--legendary); }
.drawer-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.drawer-actions button { background: var(--accent); color: var(--bg); border: none; padding: 10px; font-weight: 700; letter-spacing: 0.1em; }
.drawer-actions button.ghost { background: none; color: var(--dim); border: 1px solid var(--line); }

/* Toasts */
.toasts {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; z-index: 30; pointer-events: none;
}
.toast {
  background: var(--panel); border: 1px solid var(--gold); color: var(--fg);
  padding: 10px 12px; pointer-events: auto;
  box-shadow: 0 0 24px rgba(255,213,74,0.25);
  animation: toastin .4s cubic-bezier(.2,1.4,.4,1);
}
.toast.out { animation: toastout .3s ease-in forwards; }
.toast-head { font-size: 11px; letter-spacing: 0.18em; color: var(--gold); font-weight: 700; }
.toast-title { font-weight: 700; margin-top: 2px; }
.toast-desc { font-size: 13px; color: var(--dim); }
@keyframes toastin { from { opacity: 0; transform: translateY(-16px) scale(.95); } }
@keyframes toastout { to { opacity: 0; transform: translateY(-12px); } }

/* Stability level styling */
body[data-level="2"] .stability-fill { background: var(--warn); }
body[data-level="3"] .stability-fill,
body[data-level="4"] .stability-fill { background: var(--danger); }
body[data-level="3"] .sysbox,
body[data-level="4"] .sysbox { border-color: var(--warn); }
body[data-level="3"] .sysbox-head,
body[data-level="4"] .sysbox-head { background: var(--warn); }

/* Level 4 glitch */
body[data-level="4"] .brand,
body[data-level="4"] .sysbox-head { animation: glitch 3.5s infinite; }
body[data-level="4"] .log { animation: jitter 7s infinite; }
@keyframes glitch {
  0%, 92%, 100% { text-shadow: none; transform: none; }
  93% { text-shadow: -2px 0 var(--danger), 2px 0 #3cf; transform: translateX(1px); }
  95% { text-shadow: 2px 0 var(--danger), -2px 0 #3cf; transform: translateX(-1px) skewX(-4deg); }
  97% { text-shadow: none; transform: none; }
}
@keyframes jitter {
  0%, 96%, 100% { filter: none; transform: none; }
  97% { filter: hue-rotate(40deg) contrast(1.3); transform: translateX(-2px); }
  98% { filter: none; transform: translateX(1px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}