:root{
  --phos:#39ff5a;
  --phos-dim:#1f8f34;
  --red:#ff2b2b;
  --ink:#0b0b0d;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;}
body{
  background:#fff;
  font-family:'Inter',system-ui,sans-serif;
  cursor:default;
  -webkit-user-select:none;user-select:none;
  transition:background .3s ease;
}
.hidden{display:none !important;}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:10;}

/* ============ full-screen 9:16 on black (no phone outline) ============ */
#clean-layer{
  position:fixed;inset:0;z-index:20;background:#000;
  display:grid;place-items:center;
}
.phone{
  position:relative;
  width:min(100vw, calc(100vh * 9 / 16));
  height:min(100vh, calc(100vw * 16 / 9));
  aspect-ratio:9/16;
  background:#fff;
  overflow:hidden;
  display:flex;flex-direction:column;
  font-family:-apple-system,'SF Pro Text','Inter',system-ui,sans-serif;
}
/* sleek status bar with dynamic-island style notch */
.status-bar{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 30px 6px;font-size:16px;font-weight:600;color:#000;
  flex-shrink:0;z-index:60;
}
.sb-notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:32%;max-width:130px;height:28px;background:#000;border-radius:20px;
}
.sb-time{letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.sb-icons{display:flex;align-items:center;gap:7px;}
.sb-cell{width:18px;height:12px;fill:#000;}
.sb-wifi{width:18px;height:14px;fill:#000;}
.sb-batt{
  width:26px;height:13px;border:1.4px solid rgba(0,0,0,.35);border-radius:4px;
  position:relative;padding:1.5px;display:flex;align-items:center;
}
.sb-batt i{display:block;height:100%;width:78%;background:#000;border-radius:2px;}
.sb-batt::after{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:2px;height:5px;background:rgba(0,0,0,.35);border-radius:0 2px 2px 0;}

/* ============ ACT 0: HOME SCREEN ============ */
.home{
  position:absolute;inset:0;z-index:22;padding-top:52px;
  background:
    radial-gradient(120% 90% at 30% 15%, #d9cfc4 0%, #b7ada6 40%, #8f857f 75%, #6d6560 100%);
  display:flex;flex-direction:column;
  font-family:-apple-system,'SF Pro Text',system-ui,sans-serif;
  overflow:hidden;
}
.home.fade-in{animation:fadeIn .4s ease both;}
.home.dim{animation:homeDim .5s ease forwards;}
@keyframes homeDim{to{filter:brightness(.55) blur(2px);transform:scale(1.04);}}
.home-widgets{display:flex;gap:14px;padding:6px 18px 0;}
.hw{flex:1;border-radius:22px;padding:14px 16px;color:#fff;min-height:118px;
  box-shadow:0 6px 22px -8px rgba(0,0,0,.4);backdrop-filter:blur(6px);}
.hw-weather{background:linear-gradient(160deg,#3a4a63,#22303f);}
.hw-loc{font-size:13px;font-weight:600;}
.hw-temp{font-size:44px;font-weight:300;line-height:1.1;margin-top:2px;}
.hw-cond{font-size:12px;font-weight:600;margin-top:18px;}
.hw-cal{background:rgba(255,255,255,.92);color:#111;}
.hw-day{font-size:12px;font-weight:700;color:#ff3b30;letter-spacing:.02em;}
.hw-date{font-size:40px;font-weight:400;line-height:1.05;}
.hw-events{font-size:12px;color:#8a8a90;margin-top:8px;}
.home-labels{display:flex;gap:14px;padding:6px 18px 0;}
.home-labels span{flex:1;text-align:center;font-size:11px;color:rgba(255,255,255,.85);
  text-shadow:0 1px 3px rgba(0,0,0,.4);}
.home-grid{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px 8px;padding:20px 20px 6px;align-content:flex-start;
}
.app-icon{display:flex;flex-direction:column;align-items:center;gap:5px;}
.app-icon span{font-size:10px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);letter-spacing:-.01em;}
.ai{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  font-size:26px;font-style:normal;color:#fff;
  box-shadow:0 3px 10px -3px rgba(0,0,0,.5);
}
.ai.facetime{background:#34c759;} .ai.calendar{background:#fff;color:#ff3b30;font-weight:700;font-size:22px;}
.ai.photos{background:radial-gradient(circle,#fff 40%,#ffd60a 55%,#ff2d55 75%,#5856d6);}
.ai.camera{background:#1c1c1e;} .ai.mail{background:#1e90ff;} .ai.notes{background:linear-gradient(#fff 40%,#ffd60a 40%);color:#111;}
.ai.clock{background:#111;} .ai.maps{background:#34c759;} .ai.tv{background:#111;font-size:16px;font-weight:700;}
.ai.news{background:linear-gradient(#ff2d55,#ff375f);font-weight:800;} .ai.store{background:#0a84ff;font-weight:800;}
.ai.games{background:#ff453a;} .ai.health{background:#fff;color:#ff2d55;} .ai.wallet{background:#1c1c1e;}
.ai.siri{background:radial-gradient(circle,#ff2d55,#5856d6);} .ai.settings{background:#8e8e93;}
.home-search{
  align-self:center;margin:2px auto 10px;padding:6px 16px;border-radius:16px;
  background:rgba(255,255,255,.25);color:#fff;font-size:13px;backdrop-filter:blur(10px);
}
.home-dock{
  display:flex;justify-content:space-around;align-items:center;
  margin:0 12px 16px;padding:12px;border-radius:30px;
  background:rgba(255,255,255,.28);backdrop-filter:blur(18px);
}
.home-dock .ai{width:56px;height:56px;font-size:28px;background:transparent;box-shadow:none;}
.home-dock .ai.phone{background:#34c759;} .home-dock .ai.safari{background:#1e90ff;}
.home-dock .ai.messages{background:#34c759;cursor:pointer;} .home-dock .ai.music{background:linear-gradient(#ff375f,#ff2d55);}
.home-dock .ai.messages{transition:transform .15s;}
.home-dock .ai.messages:active{transform:scale(.9);}

/* ============ ACT 1: notification banner (inside phone) ============ */
.notif{
  position:absolute;top:52px;left:12px;right:12px;
  background:rgba(245,245,247,.86);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,.05);
  border-radius:20px;
  padding:14px 16px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.35);
  cursor:pointer;
  z-index:40;
  animation:notifpulse 2s ease-in-out infinite;
}
@keyframes notifpulse{
  0%,100%{box-shadow:0 14px 40px -12px rgba(0,0,0,.35);}
  50%{box-shadow:0 16px 46px -8px rgba(52,199,89,.35);}
}
.notif.slide-in{animation:slideIn .55s cubic-bezier(.16,1.2,.3,1) both, notifpulse 2s ease-in-out 1s infinite;}
.notif.slide-out{animation:slideOut .34s ease forwards;}
@keyframes slideIn{from{transform:translateY(-160%) scale(.9);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
@keyframes slideOut{to{transform:translateY(-160%) scale(.92);opacity:0;}}
.notif-head{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#6b6b70;font-weight:600;}
.notif-dot{width:9px;height:9px;border-radius:50%;background:#34c759;box-shadow:0 0 0 0 rgba(52,199,89,.5);animation:dot 1.4s infinite;}
@keyframes dot{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5);}70%{box-shadow:0 0 0 7px rgba(52,199,89,0);}100%{box-shadow:0 0 0 0 rgba(52,199,89,0);}}
.notif-time{margin-left:auto;color:#9a9aa0;}
.notif-body{margin-top:8px;font-size:15px;color:#1a1a1e;line-height:1.4;font-weight:500;}
.notif-hint{margin-top:6px;font-size:11px;color:#a0a0a6;font-style:italic;}

/* ============ ACT 2: iOS 27 chat ============ */
.chat{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;z-index:25;padding-top:46px;}
.chat.fade-in{animation:fadeIn .4s ease both;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 16px 12px;border-bottom:.5px solid #e4e4e8;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
}
.chat-back{font-size:30px;color:#34c759;font-weight:400;line-height:1;width:24px;}
.chat-video{font-size:22px;color:#34c759;width:24px;text-align:right;}
.chat-head-center{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.chat-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#3a3a3f,#0d0d10);
  color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700;
}
.chat-name{font-weight:600;font-size:14px;color:#111;}
.chat-status{font-size:10px;color:#8a8a90;}
.chat-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:4px;}
.chat-daystamp{align-self:center;font-size:11px;color:#9a9aa0;margin:4px 0 10px;font-weight:500;}
.bubble{
  max-width:75%;padding:9px 14px;border-radius:19px;font-size:15px;line-height:1.32;
  margin-top:6px;position:relative;
}
/* received (gray, left) */
.bubble.in{align-self:flex-start;background:#e9e9eb;color:#000;border-bottom-left-radius:5px;}
/* sent (green iOS RCS, right) */
.bubble.out{align-self:flex-end;background:#34c759;color:#fff;border-bottom-right-radius:5px;}
.bubble.reveal{animation:pop .3s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes pop{from{transform:scale(.85) translateY(6px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.bubble.typing{display:flex;gap:5px;align-items:center;padding:13px 15px;}
.bubble.typing span{width:8px;height:8px;background:#b0b0b6;border-radius:50%;animation:blink 1.2s infinite;}
.bubble.typing span:nth-child(2){animation-delay:.2s;}
.bubble.typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.bubble-meta{align-self:flex-end;font-size:10px;color:#9a9aa0;margin:-2px 4px 2px 0;}

/* footer: choices (stacked vertical) + imessage bar */
.chat-footer{padding:8px 10px 14px;border-top:.5px solid #eee;background:#fff;flex-shrink:0;}
.choices{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.choices.hidden{display:none;}
.choice-btn{
  align-self:stretch;width:100%;
  padding:11px 16px;font-size:14px;font-weight:500;line-height:1.3;
  color:#34c759;background:#fff;
  border:1.5px solid #34c759;border-radius:16px;cursor:pointer;text-align:left;
  white-space:nowrap;overflow:hidden;
  transition:transform .12s ease,background .15s,color .15s,opacity .2s;
  animation:choiceIn .35s cubic-bezier(.2,1.2,.4,1) both;
}
/* the "cut" animation — option flies down into the text field */
.choice-btn.cut{
  animation:choiceCut .45s cubic-bezier(.5,0,.6,1) forwards;
  pointer-events:none;background:#34c759;color:#fff;
}
@keyframes choiceIn{from{transform:translateY(8px) scale(.96);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
@keyframes choiceCut{
  0%{transform:scale(1);opacity:1;}
  40%{transform:scale(.9) translateY(6px);opacity:.9;}
  100%{transform:scale(.6) translateY(60px);opacity:0;}
}
.choice-btn.fadeout{animation:choiceOut .25s ease forwards;pointer-events:none;}
@keyframes choiceOut{to{opacity:0;transform:translateY(4px) scale(.97);height:0;padding:0;margin:0;border-width:0;}}
.choice-btn:hover{background:#34c759;color:#fff;}
.choice-btn:active{transform:scale(.97);}
.choice-btn.confirm{border-color:#0a84ff;color:#0a84ff;font-weight:700;letter-spacing:.02em;}
.choice-btn.confirm:hover{background:#0a84ff;color:#fff;}

.imsg-bar{display:flex;align-items:center;gap:8px;padding:0 4px;}
.imsg-plus{
  width:32px;height:32px;flex-shrink:0;border-radius:50%;background:#e9e9eb;
  display:grid;place-items:center;font-size:20px;color:#7a7a80;font-weight:300;
}
.imsg-field{
  flex:1;border:1px solid #d8d8dc;border-radius:18px;padding:8px 14px;
  font-size:14px;min-height:34px;display:flex;align-items:center;position:relative;
}
.imsg-text{color:#111;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#imsg-placeholder{color:#9a9aa0;position:absolute;left:14px;}
.imsg-caret{
  width:1.5px;height:18px;background:#0a84ff;margin-left:1px;
  animation:caretBlink 1s step-end infinite;
}
.imsg-caret.hidden{display:none;}
@keyframes caretBlink{50%{opacity:0;}}
/* send button pops in when text present */
.imsg-send{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#34c759;color:#fff;
  display:grid;place-items:center;font-size:16px;cursor:pointer;
  transform:scale(0);transition:transform .2s cubic-bezier(.2,1.4,.4,1);
}
.imsg-send.show{transform:scale(1);}
.confirm-btn{display:none;}

/* ============ ACT 3: cursor + exe ============ */
.fake-cursor{
  position:fixed;z-index:40;width:0;height:0;pointer-events:none;
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;
  transform:rotate(-35deg);filter:drop-shadow(0 0 3px rgba(0,0,0,.6));
}
.exe-icon{
  position:fixed;z-index:35;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;pointer-events:none;
}
.exe-icon.appear{animation:fadeIn .5s ease both;}
.exe-glyph{
  width:78px;height:78px;border-radius:14px;
  background:#111;border:1px solid #2b2b2b;
  display:grid;place-items:center;font-size:42px;color:var(--phos);
  box-shadow:0 0 24px -6px var(--phos);
  animation:glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{box-shadow:0 0 18px -6px var(--phos);}50%{box-shadow:0 0 34px -2px var(--phos);}}
.exe-label{font-family:'VT323',monospace;font-size:17px;color:var(--phos);letter-spacing:.03em;text-shadow:0 0 8px var(--phos);}
.exe-icon.clicked .exe-glyph{background:#0a2a12;transform:scale(.94);}
.exe-icon.launch .exe-glyph{animation:launchZoom .5s ease forwards;}
@keyframes launchZoom{to{transform:scale(6);opacity:0;filter:blur(6px);}}

/* ============ ACT 4: CRT ============ */
.crt-stage{position:fixed;inset:0;z-index:15;background:#010601;transition:opacity .1s linear;}
.crt-canvas{
  filter:brightness(1.05) contrast(1.15) saturate(1.2);
}
/* scanlines + curvature overlay */
.crt-overlay{
  position:fixed;inset:0;z-index:16;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.28) 3px,
    rgba(0,0,0,.28) 4px);
  mix-blend-mode:multiply;
  animation:scanmove 8s linear infinite,flicker 6s steps(60) infinite;
}
@keyframes scanmove{from{background-position:0 0;}to{background-position:0 8px;}}
@keyframes flicker{
  0%,100%{opacity:.85;}
  48%{opacity:.9;}
  49%{opacity:.65;}
  50%{opacity:.9;}
  92%{opacity:.88;}
  93%{opacity:.7;}
}
.crt-vignette{
  position:fixed;inset:0;z-index:17;pointer-events:none;
  border-radius:44% / 8%;
  box-shadow:inset 0 0 160px 40px rgba(0,0,0,.9),
             inset 0 0 60px 10px rgba(0,20,0,.6);
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* ============ ACT 5: title ============ */
.title-stage{position:fixed;inset:0;z-index:18;background:#000;}
.title-ui{
  position:fixed;inset:0;z-index:19;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;pointer-events:none;
}
.title-ui.shown{pointer-events:auto;}
.game-title{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(52px,14vw,150px);letter-spacing:.08em;
  color:#eafff0;
  text-shadow:0 0 20px var(--phos),0 0 48px rgba(57,255,90,.5);
  opacity:0;transform:scale(1.4);
  transition:opacity 1s ease,transform 1.4s cubic-bezier(.16,1,.3,1);
}
.title-line{
  width:0;height:3px;background:var(--red);
  box-shadow:0 0 12px var(--red);
  transition:width 1s ease .5s;
}
.game-sub{
  font-family:'VT323',monospace;font-size:clamp(14px,3.5vw,22px);
  letter-spacing:.28em;color:var(--phos);text-shadow:0 0 8px var(--phos);
  opacity:0;transition:opacity 1s ease .8s;
}
.begin-btn{
  margin-top:14px;font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:clamp(14px,3.5vw,18px);letter-spacing:.16em;
  color:#000;background:var(--phos);
  border:none;padding:16px 40px;border-radius:4px;cursor:pointer;
  box-shadow:0 0 24px -4px var(--phos);
  opacity:0;transform:translateY(16px);
  transition:opacity 1s ease 1.2s,transform 1s ease 1.2s,filter .2s;
}
.begin-btn:hover{filter:brightness(1.2) saturate(1.3);}
.replay-btn{
  background:none;border:1px solid rgba(57,255,90,.4);
  color:var(--phos);font-family:'VT323',monospace;font-size:16px;
  padding:8px 18px;border-radius:4px;cursor:pointer;letter-spacing:.1em;
  opacity:0;transition:opacity 1s ease 1.5s,background .2s;
}
.replay-btn:hover{background:rgba(57,255,90,.12);}
.title-ui.shown .game-title{opacity:1;transform:scale(1);}
.title-ui.shown .title-line{width:min(420px,70vw);}
.title-ui.shown .game-sub,
.title-ui.shown .begin-btn,
.title-ui.shown .replay-btn{opacity:1;transform:translateY(0);}

/* ============ footer ============ */
#remix-footer{
  position:fixed;bottom:10px;left:50%;transform:translateX(-50%);
  z-index:60;font-family:'VT323',monospace;font-size:14px;
}
#remix-footer a{color:rgba(57,255,90,.65);text-decoration:none;letter-spacing:.06em;}
#remix-footer a:hover{color:var(--phos);text-shadow:0 0 8px var(--phos);}

@media (max-width:640px){
  .phone{border-radius:0;box-shadow:none;width:100vw;height:100vh;max-width:100vw;}
  .phone-notch{width:38%;}
}