@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/fraunces-latin-full-normal.woff2') format('woff2-variations'); }
  @font-face { font-family: 'Fraunces'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('fonts/fraunces-latin-full-italic.woff2') format('woff2-variations'); }
  @font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-display: swap; font-weight: 300 700; src: url('fonts/spline-sans-mono-latin-wght-normal.woff2') format('woff2-variations'); }
  :root {
    --bg:#030407; --ink:#e8e4dd; --muted:#6b6f7e; --accent:#9fb8c8; --hot:#ff3366;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { height:100%; background:var(--bg); color:var(--ink); font-family:'Spline Sans Mono',monospace; overflow:hidden; touch-action:none; }
  body { cursor:grab; }
  body:active { cursor:grabbing; }

  #scene { position:fixed; inset:0; }
  #vignette { position:fixed; inset:0; pointer-events:none; z-index:2; background:radial-gradient(ellipse at center, transparent 35%, rgba(2,3,6,0.95) 100%); }
  #grain { position:fixed; inset:0; pointer-events:none; z-index:3; opacity:0.06; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  #scanlines { position:fixed; inset:0; pointer-events:none; z-index:3; opacity:0.05; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.9) 2px 3px); }

  .ui { position:fixed; z-index:4; pointer-events:none; text-transform:uppercase; letter-spacing:0.2em; }
  .ui b { color:var(--accent); font-weight:700; }
  .btn { pointer-events:auto; cursor:pointer; display:inline-block; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:5px 12px; color:var(--accent); transition:all 0.3s; background:transparent; font-family:'Spline Sans Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.2em; }
  .btn:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); }

  #title { top:30px; left:36px; }
  #title .kicker { font-size:9px; color:var(--muted); letter-spacing:0.4em; margin-bottom:6px; }
  #title h1 { font-family:'Fraunces',serif; font-weight:300; font-size:30px; letter-spacing:0.02em; font-style:italic; line-height:0.9; text-transform:none; }
  #title .sub { font-size:9px; color:var(--muted); margin-top:8px; padding-left:2px; }

  #status { top:34px; right:40px; text-align:right; }
  #status .lvl { font-family:'Fraunces',serif; font-style:italic; font-size:46px; font-weight:300; line-height:0.8; transition:color 0.3s; text-transform:none; }
  #status .act { font-size:9px; color:var(--accent); margin-top:8px; letter-spacing:0.32em; }
  #status .lbl { font-size:9px; color:var(--muted); margin-top:4px; }
  #timer { font-size:24px; font-weight:700; color:var(--accent); margin-top:14px; font-variant-numeric:tabular-nums; }
  #timer.danger { color:var(--hot); animation:glitch 0.2s infinite; }

  #score { bottom:30px; right:40px; text-align:right; font-size:10px; }
  #score .lbl { font-size:9px; color:var(--muted); }
  #score .val { font-size:18px; font-weight:500; color:var(--ink); margin:4px 0 10px; }
  #seedTag { font-size:9px; color:var(--muted); letter-spacing:0.24em; }
  #seedTag b { cursor:pointer; pointer-events:auto; }

  #hud { bottom:30px; left:36px; font-size:10px; color:var(--muted); line-height:2.1; }
  #hud .k { display:inline-block; min-width:76px; color:var(--ink); opacity:0.55; }
  #hud .togglerow { margin-top:10px; display:flex; gap:8px; }

  #banner { top:110px; left:50%; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity 0.7s ease; font-size:10px; color:var(--muted); letter-spacing:0.34em; }
  #banner.show { opacity:1; }
  #banner .arch { color:var(--accent); margin-top:6px; }

  #debug { top:120px; left:36px; font-size:9px; color:var(--muted); line-height:1.9; letter-spacing:0.1em; display:none; text-transform:none; background:rgba(3,4,7,0.55); padding:10px 14px; border:1px solid rgba(120,130,150,0.15); }
  #debug.show { display:block; }

  .overlay { position:fixed; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:radial-gradient(ellipse at center, rgba(10,14,20,0.6), rgba(2,3,6,0.98)); opacity:1; pointer-events:auto; transition:opacity 0.8s ease; backdrop-filter:blur(6px); text-align:center; }
  .overlay.hide { opacity:0; pointer-events:none; }
  .overlay .big { font-family:'Fraunces',serif; font-style:italic; font-weight:900; font-size:64px; letter-spacing:0.02em; background:linear-gradient(110deg,#fff,var(--accent),#ff0077); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .overlay .note { font-size:11px; color:var(--muted); letter-spacing:0.24em; text-transform:uppercase; }
  .overlay button { pointer-events:auto; font-family:'Spline Sans Mono',monospace; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink); background:transparent; border:1px solid rgba(232,228,221,0.25); padding:13px 30px; cursor:pointer; transition:all 0.4s ease; }
  .overlay button:hover { border-color:var(--accent); box-shadow:0 0 15px color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent); letter-spacing:0.4em; }
  .overlay button.ghost { border-color:rgba(232,228,221,0.12); color:var(--muted); font-size:9px; padding:9px 20px; }
  .btnrow { display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; justify-content:center; }

  /* boot / title screen */
  #boot .kicker { font-size:10px; color:var(--muted); letter-spacing:0.5em; text-transform:uppercase; }
  #boot h1 { font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:58px; line-height:1; }
  #boot h1 .ver { font-size:20px; color:var(--accent); font-style:normal; font-family:'Spline Sans Mono',monospace; letter-spacing:0.2em; vertical-align:super; }
  #bootlog { font-size:10px; color:var(--muted); text-align:left; line-height:2; letter-spacing:0.14em; text-transform:uppercase; }
  #bootlog .ok { color:var(--accent); }
  #bootlog div { opacity:0; animation:fade 0.5s ease forwards; }
  #bootlog div:nth-child(1){animation-delay:0.2s} #bootlog div:nth-child(2){animation-delay:0.55s}
  #bootlog div:nth-child(3){animation-delay:0.9s} #bootlog div:nth-child(4){animation-delay:1.25s}
  #bootlog div:nth-child(5){animation-delay:1.6s}
  #seedrow { display:flex; gap:10px; align-items:center; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.2em; }
  #seedInput { background:rgba(10,14,20,0.8); border:1px solid rgba(143,211,200,0.25); color:var(--accent); font-family:'Spline Sans Mono',monospace; font-size:12px; letter-spacing:0.3em; padding:8px 12px; width:130px; text-transform:uppercase; text-align:center; outline:none; }
  #seedInput:focus { border-color:var(--accent); }
  #bestline { font-size:9px; color:var(--muted); letter-spacing:0.24em; text-transform:uppercase; }
  #legend { font-size:9px; color:var(--muted); letter-spacing:0.2em; text-transform:uppercase; line-height:2; }

  /* grades */
  #grades { display:flex; flex-direction:column; gap:7px; width:300px; }
  .grade { display:flex; align-items:center; gap:10px; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }
  .grade .gl { width:86px; text-align:right; }
  .grade .bar { flex:1; height:4px; background:rgba(120,130,150,0.14); position:relative; }
  .grade .bar i { position:absolute; inset:0 auto 0 0; background:var(--accent); box-shadow:0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); transition:width 1s cubic-bezier(0.2,0.8,0.2,1); width:0; }
  .grade .gv { width:34px; text-align:left; color:var(--ink); }
  #stateWord { font-family:'Fraunces',serif; font-style:italic; font-size:26px; font-weight:500; color:var(--accent); text-transform:none; letter-spacing:0.04em; }
  #runStats { font-size:9px; color:var(--muted); letter-spacing:0.22em; text-transform:uppercase; }

  @media (max-width: 720px) {
    #title h1 { font-size:20px; }
    #title .kicker { font-size:8px; letter-spacing:0.28em; }
    #status .lvl { font-size:32px; }
    #timer { font-size:18px; }
    #hud { font-size:9px; }
    .overlay .big { font-size:44px; }
    #boot h1 { font-size:38px; }
    #seedrow { flex-wrap:wrap; justify-content:center; }
  }

  .fade-in { animation:fade 1.6s ease both; }
  @keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @keyframes glitch { 0% { transform:translate(1px,1px) skew(2deg); } 50% { transform:translate(-1px,-2px) skew(-2deg); } 100% { transform:translate(0,1px) skew(0); } }

.restart-key { min-width: 0; }
.iamu-home { position: fixed; z-index: 8; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 9px; border: 1px solid rgba(159,184,200,0.35); color: rgba(232,228,221,0.7); background: rgba(3,4,7,0.82); font: 9px/1 'Spline Sans Mono', monospace; letter-spacing: 0.18em; text-decoration: none; white-space: nowrap; }
.iamu-home:hover, .iamu-home:focus-visible { color: #fff; border-color: var(--accent); outline: none; box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 30%, transparent); }
.iamu-home svg { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.5em; vertical-align: -0.12em; overflow: visible; }
.iamu-home path { fill: none; stroke: currentColor; stroke-width: 27; stroke-linecap: round; }