/* ==========================================================
   Y17K — phone layer (loaded only at max-width 760px).
   Same Y2K elements and theme as PC. This file only sets the
   phone STRUCTURE: one side margin, one section rhythm, one
   heading pattern, framed inset blocks, a full-screen hero.
   ========================================================== */

:root{
  --g:18px;            /* the one side margin used everywhere */
  --sec:52px;          /* the one vertical rhythm between sections */
  --tb:46px;           /* taskbar height */
  --gutter:var(--g);
}
body{font-size:15.5px;padding-bottom:calc(var(--tb) + env(safe-area-inset-bottom))}
section[id]{scroll-margin-top:52px}

/* ---------- nav ---------- */
.nav{padding:8px var(--g);padding-top:calc(8px + env(safe-area-inset-top));background:linear-gradient(180deg,rgba(4,5,26,.92),rgba(4,5,26,.5) 70%,rgba(4,5,26,0))}
.nav__logo img{height:28px}
.nav .btn--sm{padding:8px 14px;font-size:11px}

/* ==========================================================
   HERO — fills the first screen: kicker on top, the logo as the
   centrepiece, date + countdown + button anchored at the bottom.
   ========================================================== */
.hero{min-height:calc(100svh - var(--tb) - env(safe-area-inset-bottom));display:flex;flex-direction:column;padding:calc(64px + env(safe-area-inset-top)) var(--g) 26px}
.hero__inner{--lw:min(88vw,400px);flex:1;display:flex;flex-direction:column;align-items:center;max-width:none}
.hero__inner .kicker{font-size:13.5px;letter-spacing:.24em;margin:6px 0 0}
.hero__logo{margin-top:auto;position:relative}
.hero__logo::before{content:"";position:absolute;inset:-18% -8%;z-index:-1;background:radial-gradient(50% 50% at 50% 55%,rgba(183,166,255,.38),transparent 70%);pointer-events:none}
.hero__reflect{opacity:.3}
.hero__tag{margin-top:auto;font-size:12px;letter-spacing:.26em}
.hero__line{font-size:17px;margin:8px 0 18px}
.hero__row{width:100%;flex-direction:column;gap:12px}
.countdown{width:100%;gap:8px}
.countdown__cell{padding:9px 2px 6px;border-radius:12px}
.countdown__cell span{font-size:32px}
.countdown__cell small{font-size:12px}
.hero__cta{width:100%;gap:8px}
.hero__cta .btn{width:100%;padding:17px 20px;font-size:14.5px}
.hero__note{font-size:15.5px}
.hero__bg::after{background:radial-gradient(90% 60% at 50% 42%,transparent 35%,rgba(4,5,26,.55) 100%),linear-gradient(180deg,rgba(4,5,26,.55),transparent 18%,transparent 62%,rgba(4,5,26,.85) 88%,var(--void))}
.spark--1{left:10%;top:20%}.spark--2{right:9%;top:30%}.spark--3{display:none}

/* ---------- ticker ---------- */
.marquee{font-size:19px;padding:6px 0}

/* ==========================================================
   SECTION SYSTEM — same rhythm, margin and heading everywhere
   ========================================================== */
.info,.dress,.register,.faq{padding:var(--sec) var(--g)}
.section-head,.section-head--phone{display:block;max-width:none;margin:0 0 22px;text-align:left}
.section-head .kicker,.section-head--phone .kicker{font-size:14px;letter-spacing:.22em;margin:0 0 6px}
.display--md{font-size:clamp(25px,7.6vw,32px);line-height:.98}
.section-head__sub{max-width:none;margin:10px 0 0;font-size:14.5px}
.info .win__h{display:none}            /* the phone heading above already says it */

/* framed inset blocks: same side margin, same radius */
.blink,.sponsors{margin:var(--sec) var(--g);border-radius:24px;overflow:hidden}

/* ---------- don't blink (inset card) ---------- */
.blink{padding:26px 20px 24px;gap:0;grid-template-columns:1fr 48%;grid-template-areas:"title title" "or art" "body body";align-items:end;box-shadow:0 18px 40px rgba(30,0,80,.4)}
.blink__title{font-size:clamp(40px,12.4vw,52px)}
.blink__art{width:100%;margin:10px 0 0;align-self:end}
.blink__monkey{height:114%;bottom:-3%}
.blink__or{text-align:left;font-size:clamp(26px,7.8vw,33px);margin:12px 0 0;align-self:center}
.blink__or small{font-size:14px;margin-bottom:2px}
.blink__body{font-size:14.5px;margin-top:18px;max-width:none}

/* ---------- event info: CRT + System Properties ---------- */
.info__grid{gap:0}
.info__crt{max-width:250px;margin:0 auto 70px}
.oct-stack{font-size:18px}
.oct-stack span:nth-child(n+4){display:none}
.cdstack{width:84px;height:84px;right:-28px;top:calc(var(--sec) + 120px)}
.cdstack i:nth-child(-n+3){display:none}
.info__win{max-width:none}
.specs{font-size:14px}
.specs th,.specs td{padding:10px 9px}
.specs th{width:36%}
.win__actions .btn98{flex:1}

/* ---------- dress code: Explorer on the wall ---------- */
.dress .section-head{width:100%;padding:16px 16px 18px;box-shadow:0 0 0 2px var(--pixel-blue),5px 5px 0 var(--pixel-blue)}
.blue3d{font-size:clamp(24px,7.4vw,31px);line-height:1.02;text-shadow:1px 1px 0 #0b2bd8,2px 2px 0 #0820b8,3px 3px 0 #0614a0}
.section-head__sub--dark{font-size:14.5px}
.dress__wall{font-size:15px}
.dress__cd{width:80px;height:80px;right:-28px;top:20px}
.explorer__menu{font-size:12.5px;padding:2px}
.explorer__menu span{padding:2px 6px}
.explorer__addr{font-size:12.5px;padding:4px}
.explorer__grid{grid-template-columns:1fr 1fr;gap:4px;padding:8px}
.file{padding:12px 6px 10px}
.file__ico{width:48px;height:48px;margin-bottom:6px}
.file__name{font-size:12px;margin-bottom:4px}
.file p{font-size:12.5px;line-height:1.4}
.explorer__status{font-size:11.5px}
.dress__crush{margin-top:24px;width:100%}

/* ---------- registration wizard ---------- */
.wizard__body{grid-template-columns:1fr}
.wizard__side{display:none}
.wizard__main{padding:16px 14px 18px}
.step__h{font-size:16px}
.field{margin-bottom:14px}
.field label{font-size:14px}
.field input{padding:12px 10px;font-size:16px}
.wizard__btns .spacer{display:none}
.wizard__btns .btn98{flex:1 1 100%;min-height:48px;font-size:15px}
.done .wizard__btns{flex-direction:column-reverse;align-items:stretch}
.done .wizard__btns .btn98{width:100%;flex:none}
.pass-img{width:100%;border-radius:10px}
.notice{font-size:13.5px}

/* ---------- FAQ ---------- */
.faq__list{gap:12px;max-width:none}
.faqd>summary{padding:10px 8px 10px 10px;font-size:13.5px;min-height:44px}
.faqd .win__title{white-space:normal}
.faqd .win__body{padding:14px 12px}
.faqd .win__body p{font-size:14px}
.faqd:nth-child(odd),.faqd:nth-child(even){transform:none}

/* ---------- sponsors (inset card) ---------- */
.sponsors{padding:26px 18px}
.sponsors__title{font-size:22px;letter-spacing:.3em;margin-bottom:16px}
.sponsors__co{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:15px;letter-spacing:.14em}
.sponsors__co li{padding:10px 4px;border-radius:12px;background:rgba(0,0,40,.35)}

/* ---------- closing banner + footer ---------- */
.outro{padding:0 var(--g) var(--sec)}
.outro__card{border-radius:24px}
.outro__bg,.outro__body{border-radius:21px}
.outro__body{padding:30px 18px 26px}
.outro__logo{width:160px}
.outro__title{font-size:23px}
.outro__sub{font-size:14.5px}
.outro .btn--lg{width:100%}
.foot{padding:34px var(--g) calc(var(--tb) + 22px + env(safe-area-inset-bottom))}
.foot__grid{gap:24px}

/* ---------- Windows 98 taskbar (phone navigation) ---------- */
.sticky-cta{display:none!important}
.taskbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:4px;height:calc(var(--tb) + env(safe-area-inset-bottom));padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:var(--win-gray);border-top:2px solid #fff;box-shadow:inset 0 1px 0 #dfdfdf,0 -6px 20px rgba(0,0,20,.45);font-family:var(--f-win);font-size:13px}
.taskbar a{color:#000;text-decoration:none}
.taskbar__start,.taskbar__btn,.taskbar__clock{height:36px;display:inline-flex;align-items:center;justify-content:center}
.taskbar__start{gap:6px;padding:0 10px;font-weight:700;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px 0 var(--win-dark),inset 1px 1px 0 #dfdfdf;white-space:nowrap}
.taskbar__start img{width:30px;height:auto;filter:drop-shadow(0 0 1px #000)}
.taskbar__sep{width:2px;height:30px;border-left:1px solid var(--win-dark);border-right:1px solid #fff;margin:0 2px}
.taskbar__btn{flex:1;min-width:0;padding:0 4px;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px 0 var(--win-dark),inset 1px 1px 0 #dfdfdf}
.taskbar a.is-active,.taskbar a:active{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px 0 var(--win-dark);background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px;font-weight:700}
.taskbar__clock{color:#000;padding:0 8px;border:1px solid;border-color:var(--win-dark) #fff #fff var(--win-dark);font-size:12px;white-space:nowrap}

/* ---------- short phones: keep the whole hero on one screen ---------- */
@media (max-height:700px){
  .hero__inner{--lw:min(78vw,330px)}
  .hero__line{margin:4px 0 12px}
  .countdown__cell span{font-size:27px}
  .hero__cta .btn{padding:14px 20px}
}

/* ---------- very small phones (≤360px wide) ---------- */
@media (max-width:360px){
  :root{--g:14px;--sec:44px}
  body{font-size:15px}
  .hero__inner .kicker{font-size:12.5px;letter-spacing:.14em}
  .hero__tag{font-size:10.5px;letter-spacing:.14em}
  .countdown{gap:5px}.countdown__cell span{font-size:27px}.countdown__cell small{font-size:11px;letter-spacing:.08em}
  .blink{padding:22px 16px 20px;grid-template-columns:1fr 44%}
  .blink__title{font-size:37px}.blink__or{font-size:23px}
  .explorer__grid{grid-template-columns:1fr}
  .file{display:grid;grid-template-columns:44px 1fr;gap:2px 10px;text-align:left;align-items:start}
  .file__ico{grid-row:span 2;width:44px;height:44px;margin:2px 0 0}
  .file__name{margin:0}
  .specs th{width:38%}
  .taskbar{font-size:12px;gap:3px}
  .taskbar__start{padding:0 7px}
  .taskbar__start img{width:24px}
  .taskbar__clock{padding:0 5px;font-size:11px}
}
@media (max-width:330px){.taskbar__clock{display:none}}