/*
 * Design system definition.
 *
 * The @theme inline block maps CSS custom properties to Tailwind utility
 * classes (e.g. --color-primary -> bg-primary, text-primary).
 *
 * The :root and .dark blocks define the actual color values using oklch.
 * All colors MUST use oklch format.
 *
 * To add a new semantic color:
 * 1. Add the variable to :root (light value) and .dark (dark value)
 * 2. Register it in @theme inline as --color-<name>: var(--<name>)
 */

@theme inline {
  --font-sans: "Manrope", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.35rem;
  --background: oklch(0.075 0.018 255);
  --foreground: oklch(0.94 0.018 245);
  --card: oklch(0.11 0.025 255);
  --card-foreground: oklch(0.94 0.018 245);
  --popover: oklch(0.09 0.022 255);
  --popover-foreground: oklch(0.94 0.018 245);
  --primary: oklch(0.69 0.17 250);
  --primary-foreground: oklch(0.08 0.025 255);
  --secondary: oklch(0.18 0.045 252);
  --secondary-foreground: oklch(0.9 0.03 245);
  --muted: oklch(0.15 0.025 255);
  --muted-foreground: oklch(0.65 0.035 250);
  --accent: oklch(0.22 0.075 250);
  --accent-foreground: oklch(0.96 0.015 245);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.28 0.045 252 / 65%);
  --input: oklch(0.2 0.04 252);
  --ring: oklch(0.69 0.17 250);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    margin: 0;
    overflow-x: hidden;
  }
  button, input, textarea { letter-spacing: 0; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }
}

@utility bg-sequence-mask {
  background: linear-gradient(90deg, var(--background) 0%, transparent 36%, transparent 64%, var(--background) 100%);
}

.dsc-shell { min-height: 100vh; background: var(--background); color: var(--foreground); isolation: isolate; }
.dsc-shell::before { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.12; background-image:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in oklab,var(--primary) 9%,transparent) 4px); mix-blend-mode:screen; }
.signal-label { display:block; color:var(--primary); font:600 .68rem/1.4 var(--font-mono); letter-spacing:.12em; }
.intro-screen { position:relative; z-index:2; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; padding:1.5rem clamp(1.25rem,5vw,5rem); transition:opacity .8s ease; }
.intro-complete { opacity:.22; }
.topline,.intro-foot { display:flex; justify-content:space-between; color:var(--muted-foreground); font:500 .65rem var(--font-mono); letter-spacing:.08em; }
.topline span:first-child { display:flex; align-items:center; gap:.55rem; color:var(--foreground); }.topline svg{width:1rem}
.intro-copy { align-self:center; width:min(42rem,100%); margin:auto; text-align:center; }
.intro-copy h1 { margin:.8rem 0 .7rem; font-size:clamp(2.5rem,7vw,6.4rem); line-height:.96; font-weight:600; letter-spacing:0; }
.intro-copy p { max-width:33rem; margin:0 auto 2rem; color:var(--muted-foreground); font-size:clamp(.95rem,2vw,1.08rem); }
.name-entry { margin:auto; width:min(31rem,100%); display:grid; grid-template-columns:auto 1fr auto; align-items:center; border-bottom:1px solid var(--border); }
.name-entry label { font:500 .65rem var(--font-mono); color:var(--primary); }.name-entry input{min-width:0;background:transparent;border:0;padding:1rem;color:var(--foreground);font:500 1rem var(--font-mono);outline:0}.name-entry button{border-radius:50%}
.briefing-screen { position:relative;z-index:2;min-height:110svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);gap:3rem;align-content:center;padding:8rem clamp(1.25rem,8vw,8rem);background:linear-gradient(180deg,transparent,var(--background) 18% 82%,transparent); }
.stat-block { max-width:48rem; }.stat-block strong{display:block;font:500 clamp(7rem,22vw,18rem)/.8 var(--font-mono);color:var(--foreground)}.stat-block h2{max-width:40rem;font-size:clamp(1.35rem,3vw,2.4rem);line-height:1.15;font-weight:500}.stat-block a{display:inline-block;margin-top:1.5rem;color:var(--primary);font:.72rem var(--font-mono);text-decoration:underline;text-underline-offset:5px}.briefing-screen aside{align-self:end;border-left:1px solid var(--primary);padding-left:1.2rem;color:var(--muted-foreground);font-size:.84rem}.scroll-cue{position:absolute;bottom:2rem;left:50%;display:flex;align-items:center;gap:.7rem;transform:translateX(-50%);white-space:nowrap;font:.65rem var(--font-mono);color:var(--muted-foreground)}.scroll-cue i{width:.4rem;height:.4rem;border-radius:50%;background:var(--primary);animation:breathe 1.8s ease-in-out infinite}.scroll-cue svg{width:.85rem}
.sequence-copy{position:absolute;top:18%;left:clamp(1.5rem,7vw,7rem);width:min(28rem,40vw);opacity:0;transform:translateY(2rem);transition:.5s ease}.sequence-copy.ml-auto{left:auto;right:clamp(1.5rem,7vw,7rem);top:61%}.sequence-copy-visible{opacity:1;transform:none}.sequence-copy h2{font-size:clamp(1.75rem,4vw,3.8rem);line-height:1;margin:.7rem 0}.sequence-copy p{color:var(--muted-foreground)}
.launch-console { display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border:1px solid color-mix(in oklab,var(--primary) 55%,transparent);background:color-mix(in oklab,var(--background) 88%,transparent);color:var(--foreground);font:600 .75rem var(--font-mono);box-shadow:0 0 35px color-mix(in oklab,var(--primary) 18%,transparent);backdrop-filter:blur(14px)}.launch-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);box-shadow:0 0 12px var(--primary)}
.game-layer{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:clamp(.5rem,3vw,2rem);background:color-mix(in oklab,var(--background) 72%,transparent);backdrop-filter:blur(12px);animation:console-in .55s cubic-bezier(.16,1,.3,1)}
.game-console{width:min(70rem,100%);height:min(49rem,96svh);overflow:auto;background:color-mix(in oklab,var(--card) 97%,transparent);border:1px solid var(--border);box-shadow:0 25px 90px oklch(0 0 0 / 75%),0 0 45px color-mix(in oklab,var(--primary) 12%,transparent);transition:.45s ease}.console-failed{opacity:0;transform:scale(.82)}
.console-header{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--card) 94%,transparent);backdrop-filter:blur(12px)}.console-header strong{display:block;margin-top:.3rem;font:.75rem var(--font-mono)}.console-actions{display:flex;gap:.25rem}.console-actions button{color:var(--muted-foreground)}
.status-strip{display:grid;grid-template-columns:repeat(3,1fr) 2fr;border-bottom:1px solid var(--border)}.status-strip>div{padding:.8rem 1rem;border-right:1px solid var(--border)}.status-strip span{display:block;font:500 .58rem var(--font-mono);color:var(--muted-foreground)}.status-strip strong{font:600 .78rem var(--font-mono)}.integrity i{display:block;height:3px;margin-top:.55rem;background:var(--muted)}.integrity b{display:block;height:100%;background:var(--primary);transition:width .3s}.peer-hint{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-bottom:1px solid var(--border);background:var(--secondary);color:var(--muted-foreground);font:.72rem var(--font-mono)}.peer-hint svg{width:.9rem;color:var(--primary)}
.console-body{padding:clamp(1rem,4vw,2.5rem)}.stage-heading{margin-bottom:1.5rem}.stage-heading>span{font:600 .65rem var(--font-mono);color:var(--primary)}.stage-heading h3{margin:.45rem 0;font-size:clamp(1.45rem,3vw,2.5rem);line-height:1.06}.stage-heading p{color:var(--muted-foreground);margin:0}.mail-card{display:flex;justify-content:space-between;gap:2rem;padding:1rem;border:1px solid var(--border);background:var(--muted);margin-bottom:1rem}.mail-card div{display:grid;gap:.25rem}.mail-card span,.mail-card p{font-size:.8rem;color:var(--muted-foreground);margin:0}.evidence-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}.evidence{position:relative;display:grid;text-align:left;gap:.3rem;padding:.85rem;border:1px solid var(--border);background:transparent;color:var(--foreground);transition:.2s}.evidence:hover{border-color:var(--primary)}.evidence.selected{background:var(--secondary);border-color:var(--primary)}.evidence span{font:.6rem var(--font-mono);color:var(--muted-foreground)}.evidence strong{font:.76rem var(--font-mono);overflow-wrap:anywhere}.evidence svg{position:absolute;right:.7rem;top:.7rem;width:.8rem;color:var(--primary)}.console-submit{width:100%;margin-top:1rem}.console-submit span{opacity:.6}.order-tray{display:flex;gap:.5rem;min-height:3.5rem;align-items:center;padding:.6rem;border:1px dashed var(--border);margin-bottom:1rem;overflow:auto}.order-tray span{display:flex;align-items:center;gap:.4rem;white-space:nowrap;background:var(--secondary);padding:.55rem;font:.65rem var(--font-mono)}.order-tray b{color:var(--primary)}.order-tray em{color:var(--muted-foreground);font:.7rem var(--font-mono)}.action-list{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.action-list button{display:flex;gap:.8rem;text-align:left;padding:1rem;border:1px solid var(--border);background:transparent;color:var(--foreground)}.action-list button:hover{border-color:var(--primary)}.action-list button:disabled{opacity:.3}.action-list svg{width:1rem;color:var(--primary)}.action-list span{display:grid;gap:.3rem}.action-list small{color:var(--muted-foreground)}.button-row{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}.console-body textarea{width:100%;min-height:15rem;resize:vertical;border:1px solid var(--border);background:var(--background);color:var(--foreground);padding:1rem;font:.78rem/1.65 var(--font-mono)}.analysis-results{display:grid;gap:.55rem}.analysis-results>div{display:flex;gap:.7rem;align-items:center;padding:.8rem;border-left:2px solid var(--primary);background:var(--muted);font-size:.82rem}.analysis-results svg{width:1rem;color:var(--primary)}.achievement{display:flex;align-items:center;gap:.8rem;margin:1rem 0;padding:1rem;border:1px solid color-mix(in oklab,var(--primary) 40%,var(--border));background:var(--secondary)}.achievement>svg{color:var(--primary)}.achievement span{display:grid}.achievement small{font:.58rem var(--font-mono);color:var(--muted-foreground)}.achievement strong{font:600 1rem var(--font-mono)}.achievement svg:last-child{margin-left:auto}.cutoff{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1rem}.cutoff span{font:.6rem var(--font-mono);color:var(--primary)}.cutoff p{max-width:42rem;font-size:1.1rem}.cutoff i{display:block;width:40%;height:1px;background:linear-gradient(90deg,var(--destructive),transparent);animation:cutoff 1s steps(6) infinite}
.teacher-scrim{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:oklch(0 0 0 / 75%)}.teacher-dialog{position:relative;width:min(31rem,100%);padding:2rem;border:1px solid var(--border);background:var(--popover);box-shadow:0 20px 60px oklch(0 0 0 / 70%)}.teacher-dialog h3{font-size:1.8rem;margin:.5rem 0}.teacher-dialog p{color:var(--muted-foreground)}.teacher-dialog input{width:100%;padding:.8rem;margin:.75rem 0;border:1px solid var(--border);background:var(--background);color:var(--foreground);font-family:var(--font-mono)}.teacher-dialog>button:not(.dialog-close){width:100%}.dialog-close{position:absolute;right:.8rem;top:.8rem}.rubric{display:grid;gap:.6rem}.rubric p{margin:0;padding:.8rem;background:var(--muted);font-size:.82rem}.failure-field{position:fixed;inset:0;z-index:99;pointer-events:none;overflow:hidden}.failure-field span{position:absolute;left:calc((var(--i) * 37) * 1% / 7);top:-10%;color:var(--destructive);font:600 clamp(2rem,8vw,6rem) var(--font-mono);animation:x-fall 2.2s calc(var(--i) * .05s) ease-in forwards}
.credits-section{position:relative;z-index:2;padding:8rem clamp(1.25rem,8vw,8rem);border-top:1px solid var(--border)}.credits-section h2{font-size:clamp(2rem,5vw,4.5rem);max-width:45rem;line-height:1}.credits-section>p{max-width:38rem;color:var(--muted-foreground)}.credits-section>div{display:flex;flex-wrap:wrap;gap:1rem;margin-top:4rem;font:.65rem var(--font-mono)}.credits-section>div span{color:var(--muted-foreground)}.credits-section a{color:var(--primary)}
@keyframes breathe{50%{opacity:.25;transform:scale(.7)}}@keyframes console-in{from{opacity:0;transform:translateY(18vh) scale(.96)}}@keyframes cutoff{50%{opacity:.25}}@keyframes x-fall{to{transform:translateY(120vh) rotate(220deg);opacity:0}}@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}.console-shake{animation:shake .45s;background:color-mix(in oklab,var(--card) 88%,var(--destructive))}
@media(max-width:700px){.intro-screen{padding:1.1rem}.intro-foot span:last-child,.topline span:last-child{display:none}.name-entry{grid-template-columns:1fr auto}.name-entry label{grid-column:1/-1;padding-top:.6rem}.briefing-screen{grid-template-columns:1fr;gap:2rem;padding:6rem 1.25rem}.stat-block strong{font-size:8rem}.briefing-screen aside{align-self:start}.sequence-copy,.sequence-copy.ml-auto{left:1.25rem;right:1.25rem;top:13%;width:auto;text-align:left}.sequence-copy.ml-auto{top:64%}.bg-sequence-mask{background:linear-gradient(180deg,var(--background) 0%,transparent 25%,transparent 58%,var(--background) 100%)}.game-layer{padding:0}.game-console{height:100svh;border:0}.status-strip{grid-template-columns:repeat(3,1fr)}.status-strip>div{padding:.65rem}.integrity{grid-column:1/-1;border-top:1px solid var(--border)}.mail-card{display:grid;gap:.7rem}.evidence-grid,.action-list{grid-template-columns:1fr}.console-body{padding:1rem}.console-header{padding:.75rem}.console-header strong{font-size:.65rem}.credits-section{padding:5rem 1.25rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sequence-copy{opacity:1;transform:none}.dsc-shell>div:first-child{display:none}}

button{cursor:pointer} button:disabled{cursor:not-allowed}.console-actions button,.dialog-close{background:transparent;border:0;padding:.45rem;color:inherit}.console-submit,.button-row button,.teacher-dialog>button:not(.dialog-close){border:1px solid var(--primary);background:var(--primary);color:var(--primary-foreground);padding:.75rem 1rem;font:600 .72rem var(--font-mono)}.button-row button:first-child{background:transparent;color:var(--foreground);border-color:var(--border)}
.signal-orbit{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(40,110,220,.11),transparent 35%),linear-gradient(135deg,transparent 30%,rgba(76,157,255,.035) 50%,transparent 70%)}.signal-orbit:before,.signal-orbit:after{content:"";position:absolute;border:1px solid rgba(76,157,255,.16);border-radius:50%;left:50%;top:45%;transform:translate(-50%,-50%);animation:orbit 18s linear infinite}.signal-orbit:before{width:55vw;height:55vw;box-shadow:0 0 80px rgba(76,157,255,.06)}.signal-orbit:after{width:28vw;height:28vw;animation-direction:reverse;animation-duration:11s}@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}