@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&family=Montserrat:wght@300;400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --acc:#3b82f6;
  --acc2:#60a5fa;
  --acc-glow:rgba(59,130,246,0.45);
  --acc-dim:rgba(59,130,246,0.12);
  --panel:rgba(8,14,30,0.82);
  --border:rgba(59,130,246,0.18);
  --muted:#64748b;
  --sub:#94a3b8;
}

body{
  width:100%;min-height:600px;height:600px;
  overflow:hidden;background:#000;
  font-family:'Montserrat',sans-serif;
  color:#fff;user-select:none;
  position:relative;
}

#canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%}

.bg-img{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(135deg,#0a0f20 0%,#0d1829 40%,#060b16 100%);
}
.bg-img::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%,rgba(59,130,246,0.06) 0%,transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 70%,rgba(59,130,246,0.04) 0%,transparent 60%);
}

.vig{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse at 50% 40%,transparent 25%,rgba(0,0,0,0.88) 100%)}
.bot-grad{position:absolute;bottom:0;left:0;right:0;height:60%;z-index:3;background:linear-gradient(to top,rgba(0,0,0,0.97) 0%,transparent 100%)}
.top-grad{position:absolute;top:0;left:0;right:0;height:30%;z-index:3;background:linear-gradient(to bottom,rgba(0,0,0,0.7) 0%,transparent 100%)}
.scanlines{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 4px);
}

.ui{position:absolute;inset:0;z-index:10}

/* CORNER BRACKETS */
.brk{position:absolute;width:28px;height:28px}
.brk svg{width:100%;height:100%}
.brk-tl{top:14px;left:14px}
.brk-tr{top:14px;right:14px;transform:scaleX(-1)}
.brk-bl{bottom:14px;left:14px;transform:scaleY(-1)}
.brk-br{bottom:14px;right:14px;transform:scale(-1,-1)}

.brk-svg path{
  stroke:#3b82f6;stroke-width:1.5;stroke-linecap:square;fill:none;
  stroke-dasharray:28;stroke-dashoffset:28;
  animation:draw-bracket 0.8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes draw-bracket{to{stroke-dashoffset:0}}
.brk-tl .brk-svg path{animation-delay:0.1s}
.brk-tr .brk-svg path{animation-delay:0.2s}
.brk-bl .brk-svg path{animation-delay:0.3s}
.brk-br .brk-svg path{animation-delay:0.4s}

/* HEADER */
.header{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;
  padding:18px 28px;
  border-bottom:1px solid rgba(59,130,246,0.1);
  background:linear-gradient(to bottom,rgba(0,0,0,0.6),transparent);
  opacity:0;animation:fade-down 0.9s ease 0.5s forwards;
}
.hdr-logo{
  font-family:'Oswald',sans-serif;
  font-size:1.25rem;font-weight:700;letter-spacing:6px;text-transform:uppercase;
}
.hdr-logo .hl{color:var(--acc)}
.hdr-sep{flex:1;height:1px;margin:0 1.5rem;background:linear-gradient(to right,rgba(59,130,246,0.3),transparent)}
.hdr-right{display:flex;align-items:center;gap:1.5rem}
.hdr-stat{
  display:flex;align-items:center;gap:6px;
  font-size:0.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--sub);
}
.hdr-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 6px var(--acc-glow);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}
.hdr-clock{
  font-family:'Oswald',sans-serif;font-size:0.9rem;font-weight:400;
  color:rgba(255,255,255,0.6);letter-spacing:2px;
}

/* GRID LINES */
.grid-h,.grid-v{position:absolute;pointer-events:none;opacity:0.04}
.grid-h{left:0;right:0;height:1px;background:#3b82f6}
.grid-h-1{top:33%}.grid-h-2{top:66%}
.grid-v{top:0;bottom:0;width:1px;background:#3b82f6}
.grid-v-1{left:33%}.grid-v-2{left:66%}

/* CENTER LOGO */
.logo-block{
  position:absolute;top:43%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  opacity:0;animation:reveal-center 1.4s cubic-bezier(.16,1,.3,1) 0.6s forwards;
}
@keyframes reveal-center{
  from{opacity:0;transform:translate(-50%,-42%) scale(0.96)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.logo-eyebrow{
  font-size:0.62rem;letter-spacing:8px;text-transform:uppercase;
  color:var(--acc);margin-bottom:0.9rem;font-weight:500;
  opacity:0;animation:fade-in 0.8s ease 1.2s forwards;
}
.logo-main-wrap{position:relative;display:inline-block}
.logo-main{
  font-family:'Oswald',sans-serif;font-size:6.5rem;font-weight:700;
  letter-spacing:8px;line-height:1;text-transform:uppercase;
  position:relative;
}
.logo-main .w{color:#fff}
.logo-main .b{
  color:var(--acc);
  text-shadow:0 0 40px rgba(59,130,246,0.5),0 0 80px rgba(59,130,246,0.2);
}

/* Glitch layers */
.logo-glitch-r,.logo-glitch-c{
  position:absolute;inset:0;
  font-family:'Oswald',sans-serif;font-size:6.5rem;font-weight:700;
  letter-spacing:8px;line-height:1;text-transform:uppercase;
  pointer-events:none;
}
.logo-glitch-r{
  color:rgba(255,60,80,0.55);
  clip-path:polygon(0 38%,100% 38%,100% 52%,0 52%);
  animation:glitch-r 5s 2s infinite;
}
.logo-glitch-c{
  color:rgba(0,200,255,0.4);
  clip-path:polygon(0 62%,100% 62%,100% 76%,0 76%);
  animation:glitch-c 5s 2.3s infinite;
}
@keyframes glitch-r{
  0%,87%,100%{transform:translateX(0);opacity:0}
  88%{transform:translateX(-5px);opacity:1}
  90%{transform:translateX(5px);opacity:1}
  92%{transform:translateX(-2px);opacity:0.6}
  94%{opacity:0}
}
@keyframes glitch-c{
  0%,89%,100%{transform:translateX(0);opacity:0}
  90%{transform:translateX(5px);opacity:1}
  92%{transform:translateX(-3px);opacity:0.8}
  94%{opacity:0}
}

.logo-rule{
  width:80px;height:1px;margin:1rem auto;
  background:linear-gradient(to right,transparent,var(--acc),transparent);
}
.logo-sub{
  font-size:0.72rem;letter-spacing:7px;text-transform:uppercase;
  color:var(--sub);font-weight:300;
  opacity:0;animation:fade-in 0.8s ease 1.5s forwards;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* Floating animation AFTER reveal */
.logo-block.floating{animation:float-idle 7s ease-in-out infinite}
@keyframes float-idle{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,-53%)}
}

/* RIGHT PANEL */
.panel-right{
  position:absolute;top:50%;right:24px;
  transform:translateY(-50%);
  width:290px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.25rem;
  backdrop-filter:blur(16px);
  opacity:0;animation:slide-from-right 1s cubic-bezier(.16,1,.3,1) 0.8s forwards;
}
@keyframes slide-from-right{
  from{opacity:0;transform:translateY(-50%) translateX(30px)}
  to{opacity:1;transform:translateY(-50%) translateX(0)}
}
.panel-head{
  font-size:0.6rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--acc);padding-bottom:0.75rem;
  border-bottom:1px solid rgba(59,130,246,0.15);
  margin-bottom:1rem;
}
.tip-body{
  font-size:0.82rem;line-height:1.7;color:#cbd5e1;
  min-height:3.5rem;transition:opacity 0.4s;
}
.tip-body.fout{opacity:0}
.panel-div{height:1px;background:rgba(255,255,255,0.06);margin:1rem 0}

.link-item{
  display:flex;align-items:center;gap:8px;
  font-size:0.75rem;color:var(--sub);
  padding:5px 0;
}
.link-ico{
  width:20px;height:20px;border-radius:4px;
  background:var(--acc-dim);border:1px solid rgba(59,130,246,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:0.65rem;color:var(--acc);flex-shrink:0;font-weight:700;
}

/* CHAR PANEL */
.char-panel{
  position:absolute;bottom:5rem;left:3rem;
  opacity:0;animation:slide-from-left 0.8s ease forwards;
}
@keyframes slide-from-left{
  from{opacity:0;transform:translateX(-20px)}
  to{opacity:1;transform:translateX(0)}
}
.char-panel.hiding{animation:slide-to-left 0.6s ease forwards}
@keyframes slide-to-left{
  to{opacity:0;transform:translateX(-15px)}
}
.char-role{
  font-size:0.65rem;letter-spacing:4px;text-transform:uppercase;
  color:var(--acc);margin-bottom:6px;
}
.char-name{
  font-family:'Oswald',sans-serif;
  font-size:3.8rem;font-weight:700;text-transform:uppercase;line-height:0.9;
  text-shadow:2px 2px 20px rgba(0,0,0,0.9);
}
.char-line{
  display:flex;align-items:center;gap:10px;margin:10px 0 6px;
}
.char-accent{width:2px;height:40px;background:var(--acc);flex-shrink:0}
.char-quote{
  font-size:0.88rem;font-style:italic;color:#94a3b8;line-height:1.55;
  max-width:340px;
}

/* LOADING */
.loading-wrap{
  position:absolute;bottom:20px;left:3rem;right:3rem;
  opacity:0;animation:fade-up 1s ease 1s forwards;
}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.load-row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;
}
.load-label{font-size:0.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.load-right{display:flex;align-items:baseline;gap:12px}
.load-pct{
  font-family:'Oswald',sans-serif;font-size:1.6rem;font-weight:700;
  color:var(--acc);line-height:1;
  text-shadow:0 0 12px var(--acc-glow);
}
.load-eta{font-size:0.62rem;color:var(--muted);letter-spacing:1px}

/* Segmented bar */
.seg-bar{display:flex;gap:2px;margin-bottom:6px}
.seg{
  flex:1;height:4px;border-radius:1px;
  background:rgba(255,255,255,0.07);
  transition:background 0.2s ease;
  position:relative;overflow:hidden;
}
.seg.done{background:var(--acc)}
.seg.active{background:rgba(59,130,246,0.4)}
.seg.done::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%);
  animation:shimmer-seg 1.5s ease-in-out infinite;
}
@keyframes shimmer-seg{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.load-file{
  font-size:0.67rem;color:#334155;
  font-family:'Montserrat',monospace;letter-spacing:0.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
  transition:color 0.3s;
}
.load-file.active{color:#475569}

@keyframes fade-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}