@keyframes fin{to{opacity:1}}
@keyframes grev{
  0%{opacity:0;transform:skewX(-4deg) scale(.95)}
  30%{opacity:1;filter:hue-rotate(90deg)}
  100%{opacity:1;transform:skewX(0) scale(1);filter:none}
}

/* TEAM GRID */
.team-label{
  font-family:var(--mono);font-size:clamp(13px,3.5vw,15px);letter-spacing:.32em;color:var(--pink);
  text-align:center;margin-bottom:24px;opacity:0;animation:fin .4s 1.8s forwards;font-weight:400;
}
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-width:420px;margin:0 auto;opacity:0;animation:fin .5s 2.1s forwards;
}
.team-card{
  border:1px solid rgba(255,255,255,.07);padding:14px 10px 12px;
  background:var(--card);text-align:center;cursor:var(--cursor-spear);
  transition:border-color .3s,transform .3s;touch-action:manipulation;
  position:relative;overflow:hidden;
}
.team-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  opacity:0;transition:opacity .3s;
}
.team-card:active,.team-card:hover{border-color:var(--pink);transform:translateY(-2px)}
.team-card:active::after,.team-card:hover::after{opacity:1}

/* AVATAR — SVG pixel character */
.avatar-wrap{width:52px;height:52px;margin:0 auto 8px;position:relative}
.avatar-wrap svg{width:100%;height:100%}

.tc-name{font-family:var(--head);font-size:clamp(12px,3.5vw,14px);letter-spacing:.08em;margin-bottom:4px;font-weight:700}
.tc-role{font-family:var(--mono);font-size:clamp(12px,3.2vw,13px);color:var(--muted);line-height:1.4}
.tc-stat{
  font-family:var(--mono);font-size:clamp(12px,3.2vw,13px);color:var(--pink);
  margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,45,120,.25);
  line-height:1.55;
}

.s0-cta{text-align:center;margin-top:32px;opacity:0;animation:fin .5s 2.5s forwards}
.s0-cta p{font-family:var(--mono);font-size:clamp(13px,3.5vw,15px);color:var(--muted);margin-bottom:14px;letter-spacing:.16em;line-height:1.5}

/* =========================================
   SCREEN 1 — MISSION SCREEN
   ========================================= */
#s1{}
.boot-seq{
  font-family:var(--mono);font-size:clamp(9px,2.5vw,11px);color:var(--blue);
  margin-bottom:28px;text-align:center;
}
.bl{display:block;overflow:hidden;white-space:nowrap;opacity:0;max-width:0}
.bl:nth-child(1){animation:typ .5s .3s forwards}
.bl:nth-child(2){animation:typ .5s .9s forwards}
.bl:nth-child(3){animation:typ .5s 1.5s forwards}
.bl:nth-child(4){animation:typ .5s 2s forwards}
@keyframes typ{to{opacity:1;max-width:100%}}

.s1-pos{
  font-family:var(--mono);font-size:clamp(9px,2.8vw,11px);color:var(--muted);
  letter-spacing:.25em;margin:14px 0 36px;text-align:center;
}
.s1-pos span{color:var(--pink)}
.scroll-hint{
  position:absolute;bottom:20px;font-family:var(--mono);font-size:9px;
  color:var(--muted);letter-spacing:.3em;animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.9}}

/* =========================================
   SCREEN 2 — CHECK INTENT (replaces age)
   ========================================= */
#s2{}
.intent-state{transition:all .4s}
.confirm-msg{
  display:none;font-family:var(--mono);font-size:13px;
  color:#0f0;text-align:center;padding:16px 0;letter-spacing:.15em;
}
.confirm-msg.on{display:block;animation:fin .4s forwards}
.doubt-msg{
  display:none;font-family:var(--body);font-size:clamp(13px,4vw,15px);
  color:var(--muted);text-align:center;padding:12px 0;line-height:1.6;
}
.doubt-msg.on{display:block;animation:fin .4s forwards}
.doubt-btns{display:none;gap:12px;margin-top:16px}
.doubt-btns.on{display:flex}

/* =========================================
   SCREEN 3 — CLASS SELECT
   ========================================= */
#s3{}
.class-list{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.cls-card{
  border:1px solid rgba(255,255,255,.07);padding:16px 16px;background:var(--card);
  cursor:var(--cursor-spear);transition:all .3s;display:flex;align-items:center;gap:14px;
  position:relative;overflow:hidden;touch-action:manipulation;
}
.cls-card::before{
  content:'';position:absolute;left:0;top:0;width:3px;height:100%;
  background:var(--pink);transform:scaleY(0);transition:transform .3s;transform-origin:bottom;
}
.cls-card:active,.cls-card:hover{border-color:var(--pink);background:rgba(255,45,120,.06)}
.cls-card:active::before,.cls-card:hover::before,.cls-card.sel::before{transform:scaleY(1)}
.cls-card.sel{border-color:var(--pink);background:rgba(255,45,120,.08)}

/* AVATAR IN CLASS CARDS */
.cls-avatar{width:48px;height:48px;flex-shrink:0}
.cls-avatar svg{width:100%;height:100%}
.cls-info{flex:1}
.cls-name{font-family:var(--head);font-size:clamp(16px,4.5vw,18px);font-weight:800;letter-spacing:.08em;line-height:1.25}
.cls-desc{font-family:var(--body);font-size:clamp(17px,4.2vw,17px);color:var(--muted);margin-top:6px;font-weight:400;line-height:1.5}
.cls-arr{font-family:var(--mono);color:var(--muted);transition:color .3s,transform .3s;font-size:18px}
.cls-card:active .cls-arr,.cls-card:hover .cls-arr{color:var(--pink);transform:translateX(4px)}

.prof-ok{display:none;font-family:var(--mono);font-size:clamp(14px,4vw,16px);color:var(--blue);
  text-align:center;margin-top:18px;letter-spacing:.16em;line-height:1.5}
.prof-ok.on{display:block;animation:fin .4s forwards}

/* =========================================
   FINAL SCREEN
   ========================================= */
#sf{background:radial-gradient(ellipse at center,#0f0020 0%,var(--dark) 65%)}
.ag-text{font-family:var(--head);font-size:clamp(13px,3.5vw,15px);letter-spacing:.45em;
  color:var(--pink);margin-bottom:12px;text-align:center;animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:0}}
.checklist{display:flex;flex-direction:column;gap:12px;margin:28px auto;align-items:flex-start;
  max-width:320px}
.ci{display:flex;align-items:center;gap:12px;
  font-family:var(--body);font-size:clamp(16px,4.5vw,18px);font-weight:600;letter-spacing:.05em;line-height:1.5}
.ci .ck{color:var(--pink);font-size:18px;flex-shrink:0}
.final-footer{position:absolute;bottom:16px;width:100%;text-align:center;
  font-family:var(--mono);font-size:clamp(12px,3.2vw,13px);color:rgba(255,255,255,.22);letter-spacing:.2em;
  pointer-events:none}