/* ============================================================
   ARTIFICIAL INGESTION — warm papercraft world / cold AI void
   ============================================================ */

:root{
  --void:#0a0812;
  --void-2:#151024;
  --cyan:#5ef2e0;
  --magenta:#ff4fd8;
  --cream:#f5ead3;
  --paper:#efe0c2;
  --ink:#3a2e26;
  --terra:#d96f4e;
  --mono:'Cascadia Code','Consolas','Menlo',monospace;
  --serif:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --hand:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--void)}
body{font-family:var(--mono);-webkit-font-smoothing:antialiased}

#stage{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;cursor:none;touch-action:none}

.hidden{display:none !important}

/* ---------- atmosphere layers ---------- */
#vignette{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 120% 105% at 50% 45%, transparent 55%, rgba(20,10,5,.28) 82%, rgba(8,4,12,.55) 100%);
  transition:opacity 2s}
#grain{position:absolute;inset:-100px;pointer-events:none;z-index:4;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(4) infinite}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-38px,22px)}
  50%{transform:translate(24px,-30px)} 75%{transform:translate(-14px,-18px)} 100%{transform:translate(0,0)}}
#flash{position:absolute;inset:0;pointer-events:none;z-index:9;background:#fff;opacity:0;transition:opacity .12s}
#flash.on{opacity:1;transition:none}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5;color:var(--cream)}
#hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  padding:18px 22px 40px;align-items:flex-start;
  background:linear-gradient(180deg, rgba(8,5,16,.66) 0%, rgba(8,5,16,.28) 46%, transparent 100%);
  text-shadow:0 1px 3px rgba(8,5,16,.7)}
#brand{font-size:11px;letter-spacing:.22em;color:var(--cyan);opacity:.9;
  text-shadow:0 1px 3px rgba(8,5,16,.6), 0 0 12px rgba(94,242,224,.45)}
#count{margin-top:8px;font-size:13px;letter-spacing:.12em}
#count b{color:var(--cream);font-size:17px}
.dim{opacity:.62}
#telemetry{margin-top:7px;font-size:10.5px;letter-spacing:.15em;color:var(--cream)}
#telemetry b{display:inline-block;color:var(--cyan);font-weight:700;
  text-shadow:0 1px 3px rgba(8,5,16,.55), 0 0 8px rgba(94,242,224,.35)}
#telemetry .tsep{margin:0 8px;opacity:.3}
#telemetry b.flip{animation:teleFlip .5s steps(1) both}
@keyframes teleFlip{
  0%{color:var(--magenta);transform:translateX(-2px);text-shadow:0 0 11px rgba(255,79,216,.75)}
  28%{color:var(--cyan);transform:translateX(2px)}
  55%{color:var(--magenta);transform:translateX(-1px)}
  100%{color:var(--cyan);transform:none}}
#hud-right{text-align:right}
#dia{font-size:13px;letter-spacing:.12em}
#dia b{display:inline-block;color:var(--cyan);text-shadow:0 1px 3px rgba(8,5,16,.6), 0 0 10px rgba(94,242,224,.4)}
#dia b.pulse{animation:diaPulse .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes diaPulse{0%{transform:scale(1)}
  32%{transform:scale(1.4);color:#fff;text-shadow:0 0 18px rgba(94,242,224,.95)}
  100%{transform:scale(1)}}
#mute{pointer-events:auto;margin-top:9px;background:rgba(10,8,18,.55);border:1px solid rgba(94,242,224,.35);
  color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.2em;padding:5px 10px;cursor:pointer;
  transition:all .15s;backdrop-filter:blur(3px)}
#mute:hover{background:rgba(94,242,224,.15);box-shadow:0 0 14px rgba(94,242,224,.3)}
#mute.off{color:#8b8496;border-color:#4a4456;text-shadow:none}

/* combo */
#combo{position:absolute;right:26px;bottom:74px;text-align:right;
  animation:comboPop .25s cubic-bezier(.2,2.4,.4,1)}
#combo-n{display:block;font-size:44px;font-weight:700;color:var(--magenta);
  text-shadow:0 0 18px rgba(255,79,216,.6),3px 0 0 rgba(94,242,224,.55);line-height:1}
#combo-label{display:block;font-size:10px;letter-spacing:.34em;color:var(--magenta);opacity:.8;margin-top:4px}
@keyframes comboPop{0%{transform:scale(.4) rotate(6deg)}100%{transform:scale(1) rotate(0)}}

/* milestone announcements */
#milestone{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  font-size:clamp(26px,4.6vw,52px);font-weight:700;letter-spacing:.14em;color:var(--cream);
  text-shadow:0 0 26px rgba(94,242,224,.5); text-align:center;white-space:nowrap;
  animation:mileIn 2.6s cubic-bezier(.2,.9,.3,1) forwards}
#milestone::before,#milestone::after{content:attr(data-text);position:absolute;inset:0;text-align:center}
#milestone::before{color:var(--cyan);transform:translate(-3px,0);opacity:.75;
  clip-path:inset(12% 0 58% 0);animation:sliceA .38s steps(3) infinite}
#milestone::after{color:var(--magenta);transform:translate(3px,0);opacity:.75;
  clip-path:inset(62% 0 8% 0);animation:sliceB .29s steps(3) infinite}
@keyframes mileIn{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5);filter:blur(8px)}
  8%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  82%{opacity:1} 100%{opacity:0;transform:translate(-50%,-52%) scale(.97)}}
@keyframes sliceA{0%{clip-path:inset(8% 0 66% 0)}50%{clip-path:inset(38% 0 30% 0)}100%{clip-path:inset(72% 0 4% 0)}}
@keyframes sliceB{0%{clip-path:inset(66% 0 12% 0)}50%{clip-path:inset(20% 0 58% 0)}100%{clip-path:inset(44% 0 36% 0)}}

/* AI log ticker */
#ticker{position:absolute;left:0;right:0;bottom:0;padding:13px 22px 15px;
  background:linear-gradient(transparent, rgba(8,5,16,.78) 34%);
  font-size:12.5px;letter-spacing:.04em;color:#cfd8d4;min-height:46px}
#ticker-pre{color:var(--cyan);margin-right:10px;text-shadow:0 0 8px rgba(94,242,224,.5)}
#caret{display:inline-block;width:7px;height:14px;background:var(--cyan);margin-left:3px;
  vertical-align:-2px;animation:blink 1s steps(1) infinite;box-shadow:0 0 8px rgba(94,242,224,.7)}
@keyframes blink{50%{opacity:0}}
.blink{animation:blink 1s steps(1) infinite}

/* ---------- TITLE SCREEN ---------- */
#title,#ending{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:var(--cream);
  background:radial-gradient(ellipse 90% 70% at 50% 42%, rgba(21,16,36,.6), rgba(10,8,18,.92) 75%);
  backdrop-filter:blur(2px)}
#title{animation:titleIn 1.2s ease both}
@keyframes titleIn{from{opacity:0}to{opacity:1}}
#title.leaving{animation:titleOut .55s ease forwards}
@keyframes titleOut{to{opacity:0;transform:scale(1.06);filter:blur(6px)}}

/* a quiet ghost — atmosphere, not instruction */
.t-status{font-size:10.5px;letter-spacing:.34em;color:#8f8aa0;opacity:.32;margin-bottom:28px;
  text-shadow:none}
.glitch{font-family:var(--mono);font-weight:800;font-size:clamp(40px,8.4vw,96px);
  line-height:.98;letter-spacing:.06em;position:relative;color:var(--cream);
  text-shadow:0 0 34px rgba(94,242,224,.25)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;white-space:pre;
  pointer-events:none;line-height:.98}
.glitch::before{color:var(--cyan);transform:translate(-4px,-2px);opacity:.55;
  clip-path:inset(10% 0 62% 0);animation:sliceA 2.1s steps(5) infinite}
.glitch::after{color:var(--magenta);transform:translate(4px,2px);opacity:.55;
  clip-path:inset(58% 0 12% 0);animation:sliceB 1.7s steps(4) infinite}
.t-sub{font-family:var(--serif);font-style:italic;font-size:clamp(15px,2vw,21px);
  color:#e9dcc0;opacity:.92;margin-top:26px;line-height:1.55}
.t-sub em{color:var(--cyan);font-style:italic}
.t-rule{display:flex;align-items:center;gap:14px;margin:26px 0 18px;width:min(360px,70vw)}
.t-rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(245,234,211,.4))}
.t-rule span:last-child{background:linear-gradient(90deg,rgba(245,234,211,.4),transparent)}
.t-rule{margin:26px 0 34px}
.t-rule i{color:var(--terra);font-style:normal;font-size:11px}

#begin,#again{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.3em;
  color:var(--void);background:var(--cyan);border:none;padding:16px 42px;cursor:pointer;
  box-shadow:0 0 30px rgba(94,242,224,.45), inset 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .12s, box-shadow .2s;animation:pulse 2.2s ease-in-out infinite}
#begin:hover,#again:hover{transform:scale(1.05);box-shadow:0 0 50px rgba(94,242,224,.8)}
#begin:active,#again:active{transform:scale(.97)}
@keyframes pulse{50%{box-shadow:0 0 46px rgba(94,242,224,.7), inset 0 0 0 1px rgba(255,255,255,.4)}}
.t-keys{margin-top:22px;font-size:10.5px;letter-spacing:.22em;opacity:.4}

/* ---------- ENDING ---------- */
#ending{background:radial-gradient(ellipse 90% 70% at 50% 42%, rgba(21,16,36,.92), rgba(6,4,12,.99) 75%)}
#ending.showing{animation:endIn 1.6s ease both}
@keyframes endIn{from{opacity:0}to{opacity:1}}
.e-status{font-size:11px;letter-spacing:.3em;color:var(--cyan);opacity:.75;margin-bottom:24px}
.e-status span{color:var(--magenta)}
#ending h2{font-size:clamp(38px,7vw,78px);font-weight:800;letter-spacing:.1em;line-height:1;
  color:var(--cream);text-shadow:0 0 40px rgba(255,79,216,.3)}
.e-stats{display:flex;gap:clamp(18px,4vw,52px);margin:36px 0 22px;flex-wrap:wrap;justify-content:center}
.e-stats div{display:flex;flex-direction:column;gap:6px}
.e-stats b{font-size:clamp(22px,3vw,34px);color:var(--cyan);text-shadow:0 0 14px rgba(94,242,224,.4)}
.e-stats span{font-size:10px;letter-spacing:.24em;opacity:.5;text-transform:uppercase}
.e-verdict{font-size:12.5px;letter-spacing:.16em;opacity:.85;margin-bottom:26px}
.e-verdict b{color:var(--cream)}
.e-verdict .warn{color:var(--magenta);text-shadow:0 0 12px rgba(255,79,216,.5)}
.e-note{font-family:var(--serif);font-style:italic;font-size:clamp(15px,2vw,20px);
  line-height:1.6;color:#e9dcc0;margin-bottom:36px}
.e-foot{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:13px;color:#c9b98f;opacity:.75}
.e-credit{position:absolute;left:0;right:0;bottom:18px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.22em;color:#8f8aa0;opacity:.5;text-decoration:none;transition:opacity .2s,color .2s}
.e-credit:hover{opacity:.9;color:var(--cyan)}

@media (max-width:640px){
  #hud-top{padding:12px 14px}
  #brand{font-size:9px}
  #combo{right:16px;bottom:64px}
  #combo-n{font-size:34px}
  #milestone{white-space:normal;width:92vw}
}