@font-face{font-family:VT323;src:url(/fonts/vt323.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#070a1a;color:#fff;position:fixed;inset:0;width:100%}
#game{position:fixed;inset:0;width:100%;height:100%;border:0;background:#070a1a;display:none}
#game.on{display:block}
#loader{position:fixed;inset:0;z-index:100;background:#070a1a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-family:VT323,ui-monospace,monospace;color:#fff;transition:opacity .9s ease;touch-action:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);user-select:none;-webkit-user-select:none}
#loader .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);pointer-events:none}
#loader .lbox{position:relative;width:min(86vw,420px);text-align:center;text-shadow:0 0 12px rgba(30,166,234,.9)}
#loader .ttl{font-size:46px;line-height:1;letter-spacing:.16em;color:#FFB000;text-shadow:0 0 14px rgba(255,176,0,.8),0 0 28px rgba(255,79,208,.5);margin-bottom:2px}
#loader .sub{font-size:20px;letter-spacing:.14em;color:#FF4FD0;text-shadow:0 0 10px #FF4FD0;margin-bottom:14px}
#loader .osd{font-size:26px;letter-spacing:.12em;color:#1EA6EA;margin-bottom:10px}
#loader .bar{display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:1fr;gap:3px;height:26px;padding:4px;border:2px solid #FFB000;box-shadow:0 0 14px rgba(255,176,0,.6),inset 0 0 10px rgba(255,176,0,.25);background:rgba(7,10,26,.7)}
#loader .bar i{display:block;min-height:12px;background:rgba(255,176,0,.12)}
#loader .bar i.on{background:linear-gradient(#FFD36B,#FFB000);box-shadow:0 0 8px #FFB000,0 0 14px rgba(255,79,208,.6)}
#loader .pct{font-size:22px;margin-top:8px;color:#FF4FD0;text-shadow:0 0 10px #FF4FD0}
#enter{display:none;margin-top:16px;font:inherit;font-size:32px;letter-spacing:.2em;color:#FFB000;background:rgba(7,10,26,.6);border:2px solid #FFB000;padding:10px 26px;min-height:48px;cursor:pointer;text-shadow:0 0 12px #FFB000;box-shadow:0 0 18px rgba(255,176,0,.5);animation:blink 1.4s steps(2,jump-none) infinite}
#enter:active{background:#fff;color:#000}
@keyframes blink{50%{opacity:.35}}
#loader.ready #enter{display:inline-block}
#loader.ready .bar,#loader.ready .pct{opacity:.85}
#loader.out{opacity:0;pointer-events:none}
#noise{position:fixed;inset:0;z-index:101;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;display:none;opacity:.9;animation:tvs .45s steps(1) forwards}
@keyframes tvs{0%{opacity:.95}60%{opacity:.7}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#loader .still,#enter{animation:none}#loader{transition:none}#noise{display:none!important}}
#fs{position:fixed;top:max(8px,env(safe-area-inset-top));right:10px;z-index:5;font:18px VT323,monospace;color:#FFB000;background:rgba(7,10,26,.6);border:1px solid #FFB000;padding:2px 8px;text-decoration:none;display:none;letter-spacing:1px}
body.entered #fs{display:block}
#gload{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:4;background:linear-gradient(90deg,#FFB000,#FF4FD0,#1EA6EA);background-size:200% 100%;animation:gl 1.2s linear infinite;display:none}
body.loadinggame #gload{display:block}
@keyframes gl{to{background-position:-200% 0}}

#loader .still{position:absolute;inset:0;overflow:hidden;background:#070a1a}
#skyback{position:absolute;inset:0;background:linear-gradient(180deg,#24103f 0%,#120d30 35%,#070a1a 100%)}
#poster{position:absolute;background:url(/CIBYM/assets/cibym-scene.jpg) 0 0/100% 100% no-repeat;opacity:1;transition:opacity .5s ease .1s}
#poster.off{opacity:0}
#scene{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;perspective:1100px;perspective-origin:50% 42%;overflow:hidden}
#scene.on{opacity:1}
#scene .cl{position:absolute;pointer-events:none;will-change:transform;backface-visibility:hidden}
#scene .cl img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
#scene .cl-skyline{animation:flick 6.5s steps(1,end) infinite}
#scene .cl-sheen{opacity:.6}
#scene .cl-rimm,#scene .cl-rimw{opacity:.9}
#scene .cl-man img{filter:drop-shadow(0 16px 22px rgba(0,0,0,.65))}
#scene .cl-woman img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
#scene .cl-back img{filter:brightness(.88) saturate(1.05)}
#scene .haze{position:absolute;pointer-events:none;will-change:transform}
#scene .h1{background:linear-gradient(180deg,rgba(90,60,200,0),rgba(110,70,210,.22) 60%,rgba(255,120,200,0))}
#scene .h2{background:linear-gradient(180deg,rgba(150,60,190,0),rgba(170,80,210,.2) 55%,rgba(255,150,80,0))}
#scene .h3{background:linear-gradient(180deg,rgba(255,120,80,0),rgba(255,110,170,.12) 50%,rgba(255,150,80,0))}
#scene .bolt{position:absolute;pointer-events:none;opacity:0;background:radial-gradient(ellipse 45% 55% at 72% 18%,rgba(220,235,255,.95),rgba(140,170,255,.45) 40%,rgba(80,60,200,0) 75%)}
#scene .fx{position:absolute;pointer-events:none;will-change:transform}
#scene .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 45%,rgba(7,10,26,0) 55%,rgba(7,10,26,.55) 100%)}
#scene .flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,45%),rgba(255,255,255,var(--fi,.6)),rgba(255,176,0,calc(var(--fi,.6)*.45)) 18%,rgba(255,79,208,.12) 40%,rgba(0,0,0,0) 65%)}
canvas.glass{position:absolute;left:0;top:0;pointer-events:none}
@keyframes flick{0%{filter:blur(1.4px) brightness(1)}8%{filter:blur(1.4px) brightness(.82)}9%{filter:blur(1.4px) brightness(1.15)}11%{filter:blur(1.4px) brightness(.9)}13%{filter:blur(1.4px) brightness(1)}47%{filter:blur(1.4px) brightness(1)}48%{filter:blur(1.4px) brightness(.78)}50%{filter:blur(1.4px) brightness(1.18)}52%{filter:blur(1.4px) brightness(.95)}54%{filter:blur(1.4px) brightness(1)}81%{filter:blur(1.4px) brightness(1.12)}83%{filter:blur(1.4px) brightness(.85)}86%{filter:blur(1.4px) brightness(1)}100%{filter:blur(1.4px) brightness(1)}}
/* UI lives in the lower band so faces stay clear */
#loader{justify-content:flex-end;padding-bottom:max(5vh,calc(env(safe-area-inset-bottom) + 18px))}
#loader .lbox{text-shadow:0 0 12px rgba(30,166,234,.9),0 2px 6px rgba(0,0,0,.9)}
#loader .hint{font-size:16px;line-height:1.1;letter-spacing:.1em;color:#1EA6EA;margin-top:12px;opacity:.9;text-shadow:0 0 8px rgba(30,166,234,.8),0 1px 4px #000}
#loader .hint:empty{display:none}
@media (min-aspect-ratio:6/5){#loader{align-items:flex-end;padding-right:max(4vw,env(safe-area-inset-right))}#loader .lbox{width:min(38vw,420px)}}
@media (max-height:560px){#loader{gap:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}#loader .ttl{font-size:32px}#loader .sub{font-size:15px;margin-bottom:6px}#loader .osd{display:none}#loader .bar{height:20px;padding:3px}#loader .bar i{min-height:8px}#loader .pct{font-size:18px;margin-top:4px}#enter{font-size:24px;padding:6px 18px;margin-top:8px;min-height:40px}#loader .hint{font-size:14px;margin-top:6px}}
@media (prefers-reduced-motion:reduce){#scene,canvas.glass{display:none}#poster{opacity:1!important;transition:none}}

/* back to the home page: same pill as the home page's BACK TO THE CITY (.panel-x button) */
#back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:14px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,14,38,.7);color:#fff;font-family:VT323,ui-monospace,monospace;font-size:17px;letter-spacing:.12em;text-decoration:none;cursor:pointer;text-shadow:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;z-index:2}
#back:hover,#back:focus-visible{border-color:#FFB000;color:#FFB000}
#loader .lbox{display:flex;flex-direction:column;align-items:center}
#loader .lbox>.bar{align-self:stretch}
#home{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:5;display:none;font:18px VT323,monospace;letter-spacing:1px;color:#FFB000;background:rgba(7,10,26,.6);border:1px solid #FFB000;padding:2px 8px;text-decoration:none;opacity:.45;transition:opacity .2s;-webkit-tap-highlight-color:transparent}
#home:hover,#home:focus-visible,#home:active{opacity:1}
body.entered #home{display:block}
@media (max-height:560px){#back{margin-top:6px;min-height:40px}}