/* =========================================================
   Z3RO PING HUB — "Seoul After Dark" design system
   Futuristic neon · anime × Korean PC방 aesthetic
   All class names / IDs used by the booking scripts are kept.
   ========================================================= */

:root{
  --bg:#07050f;
  --bg2:#0c0918;
  --panel:rgba(22,15,42,.62);
  --panel-solid:#110c20;
  --pink:#ff2e88;
  --cyan:#22f0ff;
  --violet:#9d4dff;
  --purple:#9d4dff;
  --amber:#ffb13b;
  --text:#f4f1ff;
  --muted:#a9a2c4;
  --dim:#6f6890;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.18);
  --border:rgba(255,255,255,.1);
  --grad:linear-gradient(100deg,#ff2e88 0%,#b53dff 50%,#22f0ff 100%);
  --heading:'Chakra Petch','Arial Narrow',system-ui,sans-serif;
  --body:'Inter',system-ui,Arial,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,Consolas,monospace;
  --kr:'Black Han Sans','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --cut:14px;
  --clip:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--text);font:16px/1.65 var(--body);overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 88% -8%,rgba(157,77,255,.20),transparent 62%),
    radial-gradient(900px 520px at -12% 38%,rgba(255,46,136,.10),transparent 60%),
    radial-gradient(900px 520px at 110% 80%,rgba(34,240,255,.07),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 78%);
}
::selection{background:var(--pink);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#05030b}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--pink),var(--violet));border:2px solid #05030b}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
:where(a,button,summary):focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
img{display:block;max-width:100%;height:auto;object-fit:cover}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{font-family:var(--heading);font-weight:700;line-height:1.02;letter-spacing:-.01em;color:var(--text)}
h2{font-size:clamp(2.3rem,4.6vw,4.3rem);text-transform:uppercase;margin-bottom:22px}
h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:14px}
h4{font-size:1.5rem;margin-bottom:10px}
p{color:var(--muted)}
[hidden]{display:none!important}
.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}
.section{padding-block:110px;position:relative}
.pink{color:var(--pink);text-shadow:0 0 28px rgba(255,46,136,.45)}
.cyan{color:var(--cyan);text-shadow:0 0 28px rgba(34,240,255,.4)}
.muted{font-size:.9rem}
.kr{font-family:var(--kr);font-weight:400;letter-spacing:.04em}

.eyebrow{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font:500 .78rem/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;box-shadow:0 0 10px currentColor;flex-shrink:0}
.eyebrow .kr{color:var(--pink);font-size:.95rem;letter-spacing:.08em;text-shadow:0 0 14px rgba(255,46,136,.5)}
.hero .eyebrow::before,.eyebrow.no-bar::before{display:none}
.line{width:28px;height:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}

.skip{position:fixed;top:-100px;left:15px;padding:12px 16px;background:var(--cyan);color:#000;z-index:100;font-weight:700}
.skip:focus{top:10px}

/* ---------- Buttons ---------- */
.button{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;
  padding:15px 22px 15px 24px;border:0;
  font:700 .88rem/1 var(--heading);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(100deg,#ff2e88,#c13bff);
  clip-path:var(--clip);
  transition:transform .2s ease,filter .2s ease,color .2s,background .2s;
}
.button::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s ease;
}
.button:hover{transform:translateY(-2px);filter:brightness(1.12) saturate(1.1);color:#fff}
.button:hover::after{transform:translateX(120%)}
.button span{font-size:1.15rem;line-height:1;transition:transform .2s}
.button:hover span{transform:translate(2px,-2px)}
.button.small{padding:11px 16px 11px 18px;gap:14px;font-size:.78rem;--cut:10px}
.button.ghost,.ghost{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);color:var(--text)}
.button.ghost:hover{background:rgba(34,240,255,.08);box-shadow:inset 0 0 0 1px var(--cyan);color:var(--cyan)}
.full{width:100%}
.button:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:50;height:84px;padding:0 max(24px,4%);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(7,5,15,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--pink),var(--violet),var(--cyan),transparent);
  background-size:200% 100%;animation:lineFlow 6s linear infinite;opacity:.8;
}
@keyframes lineFlow{to{background-position:200% 0}}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-logo{height:46px;width:auto;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,46,136,.25))}
/* legacy wrapper kept harmless */
.logo-crop{display:contents}
nav{display:flex;gap:6px;align-items:center}
nav>a:not(.button){
  position:relative;padding:10px 14px;font:600 .82rem/1 var(--heading);letter-spacing:.12em;text-transform:uppercase;color:#d9d3ee;transition:color .2s;
}
nav>a:not(.button)::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
nav>a:not(.button):hover,nav>a[aria-current=page]{color:var(--cyan)}
nav>a:not(.button):hover::after,nav>a[aria-current=page]::after{transform:scaleX(1)}
nav .button{margin-left:10px}
.menu-toggle{display:none}

/* ---------- Service status (API offline notice) ---------- */
#service-status{
  margin:0;max-width:none;padding:12px max(24px,4%);border:0;border-bottom:1px solid rgba(255,177,59,.35);
  background:linear-gradient(90deg,rgba(255,177,59,.12),rgba(255,46,136,.08));color:#ffd9a0;font:500 .85rem/1.5 var(--mono);letter-spacing:.02em;
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:min(860px,calc(100svh - 84px));display:flex;align-items:center}
.hero-art{
  position:absolute;inset:-2%;z-index:-4;
  background:
    linear-gradient(90deg,var(--bg) 0%,rgba(7,5,15,.9) 28%,rgba(7,5,15,.35) 62%,rgba(7,5,15,.55) 100%),
    linear-gradient(0deg,var(--bg) 0%,transparent 40%),
    linear-gradient(180deg,rgba(7,5,15,.6) 0%,transparent 20%),
    url('assets/hub-floor.jpg') center right/cover;
  animation:heroDrift 28s ease-in-out infinite alternate;
}
@keyframes heroDrift{to{transform:scale(1.06) translateX(-1%)}}
.hero-grid{
  position:absolute;left:-40%;right:-40%;bottom:0;height:42%;z-index:-3;pointer-events:none;
  background-image:linear-gradient(rgba(255,46,136,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(34,240,255,.55) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(380px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 80%);mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 80%);
  opacity:.28;animation:gridRun 2.4s linear infinite;
}
@keyframes gridRun{to{background-position:0 64px,0 0}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px);mix-blend-mode:multiply;
}
.hero-kr{
  position:absolute;right:max(24px,4%);top:56px;z-index:-1;pointer-events:none;
  font:clamp(3rem,6.2vw,6.4rem)/1 var(--kr);letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1.2px rgba(255,46,136,.55);text-shadow:0 0 40px rgba(255,46,136,.2);
  user-select:none;
}
.petals{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;top:-30px;width:12px;height:9px;border-radius:12px 0 12px 0;
  background:linear-gradient(135deg,#ffc2dc,#ff5fa2);opacity:.75;box-shadow:0 0 8px rgba(255,95,162,.6);
  animation:petalFall linear infinite;
}
@keyframes petalFall{
  0%{transform:translate3d(0,-5vh,0) rotate(0)}
  100%{transform:translate3d(var(--drift,-120px),110vh,0) rotate(540deg)}
}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;align-items:end}
.hero-content{padding-top:72px;padding-bottom:80px}
.hero .eyebrow{gap:14px;color:#dff9ff}
h1{
  font-family:var(--heading);font-weight:700;text-transform:uppercase;
  font-size:clamp(3.6rem,8vw,7.4rem);line-height:.9;letter-spacing:-.02em;margin:28px 0 26px;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}
h1>span{color:var(--pink);text-shadow:0 0 22px rgba(255,46,136,.65),0 0 60px rgba(255,46,136,.35)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;text-shadow:none;
  clip-path:inset(0 0 100% 0);
}
.glitch::before{color:var(--cyan);animation:glitchA 5s infinite steps(1)}
.glitch::after{color:var(--violet);animation:glitchB 5s infinite steps(1)}
@keyframes glitchA{0%,88%,100%{clip-path:inset(0 0 100% 0);transform:none}89%{clip-path:inset(8% 0 62% 0);transform:translate(-5px,0)}91%{clip-path:inset(58% 0 18% 0);transform:translate(5px,0)}93%{clip-path:inset(32% 0 44% 0);transform:translate(-3px,0)}95%{clip-path:inset(0 0 100% 0)}}
@keyframes glitchB{0%,88%,100%{clip-path:inset(0 0 100% 0);transform:none}90%{clip-path:inset(62% 0 8% 0);transform:translate(5px,0)}92%{clip-path:inset(20% 0 60% 0);transform:translate(-5px,0)}94%{clip-path:inset(0 0 100% 0)}}
.hero-copy{font-size:1.1rem;color:#dcd5ee;max-width:460px}
.hero-copy .kr{display:block;margin-top:10px;color:var(--pink);font-size:1rem;opacity:.9}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 44px}
.hero-stats{display:flex;gap:0;width:fit-content;background:rgba(7,5,15,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);clip-path:var(--clip)}
.hero-stats>div{display:flex;flex-direction:column;gap:8px;padding:16px 26px;border-right:1px solid var(--line)}
.hero-stats>div:last-child{border:0}
.hero-stats strong{font:700 2.3rem/1 var(--heading);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{font:.68rem/1.2 var(--mono);letter-spacing:.14em;color:var(--muted)}
.hero-caption{position:absolute;right:max(24px,4%);bottom:26px;font:.68rem var(--mono);letter-spacing:.16em;color:#bdb5d6}
.hero-caption span{margin-left:28px;color:var(--cyan)}

/* HUD status panel */
.hud-panel{
  position:relative;margin-bottom:80px;padding:22px 22px 18px;
  background:rgba(10,7,22,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(34,240,255,.28);clip-path:var(--clip);
}
.hud-head{display:flex;align-items:center;gap:10px;font:.72rem var(--mono);letter-spacing:.16em;color:var(--cyan);padding-bottom:14px;border-bottom:1px dashed rgba(34,240,255,.25)}
.hud-head .kr{margin-left:auto;color:var(--pink);font-size:.8rem;letter-spacing:.06em}
.live-dot{width:8px;height:8px;border-radius:50%;background:#3dff9a;box-shadow:0 0 10px #3dff9a;animation:pulse 1.6s ease-in-out infinite}
.live-dot.closed{background:var(--amber);box-shadow:0 0 10px var(--amber)}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
.hud-panel dl{margin:0}
.hud-panel dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.hud-panel dl>div:last-child{border:0}
.hud-panel dt{font:.66rem var(--mono);letter-spacing:.14em;color:var(--muted)}
.hud-panel dd{margin:0;font:700 1.05rem/1.2 var(--heading);text-align:right;letter-spacing:.04em}
#hud-clock{font:400 1.6rem/1 var(--mono);color:var(--cyan);text-shadow:0 0 14px rgba(34,240,255,.6)}
.hud-bars{display:flex;gap:4px;margin-top:14px}
.hud-bars i{flex:1;height:18px;background:linear-gradient(var(--cyan),rgba(34,240,255,.15));opacity:.25;clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.hud-bars i.on{opacity:1;box-shadow:0 0 10px var(--cyan)}
.hud-bars i.ps.on{background:linear-gradient(var(--violet),rgba(157,77,255,.2))}
.hud-legend{display:flex;justify-content:space-between;margin-top:8px;font:.62rem var(--mono);letter-spacing:.14em;color:var(--dim)}

.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;font:.8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.back-link:hover{color:var(--cyan)}

/* ---------- Ticker ---------- */
.ticker{
  position:relative;overflow:hidden;white-space:nowrap;padding:16px 0;
  background:linear-gradient(90deg,rgba(255,46,136,.16),rgba(157,77,255,.16),rgba(34,240,255,.12));
  border-block:1px solid rgba(255,46,136,.35);
  font:700 1.35rem/1 var(--heading);letter-spacing:.14em;text-transform:uppercase;
}
.ticker-track{display:inline-flex;align-items:center;gap:34px;padding-right:34px;animation:marquee 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker span{color:#fff}
.ticker .kr{color:var(--pink);font-size:1.25rem;text-shadow:0 0 16px rgba(255,46,136,.6);letter-spacing:.06em}
.ticker b{color:var(--cyan);font-weight:400;text-shadow:0 0 10px var(--cyan)}

/* ---------- Section heading ---------- */
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:44px}
.section-heading h2{margin-bottom:0}
.section-heading>p{max-width:340px;margin-bottom:6px;font-size:.95rem;padding-left:16px;border-left:2px solid var(--pink)}
.section-num{
  position:absolute;right:0;top:40px;z-index:-1;pointer-events:none;user-select:none;
  font:clamp(7rem,16vw,14rem)/1 var(--heading);font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);
}

/* ---------- HUD cards (shared) ---------- */
.rig-card,.price-card,.membership-card,.library-card,.booking-card,.launch-offer,.community,.gallery-grid figure,.hud-card{
  --mx:50%;--my:0%;
}
.rig-card,.price-card,.membership-card,.booking-card,.hud-card{
  position:relative;isolation:isolate;
  background:
    radial-gradient(520px circle at var(--mx) var(--my),rgba(34,240,255,.09),transparent 45%),
    linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),
    var(--panel);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line2);
}
.rig-card::before,.price-card::before,.membership-card::before,.booking-card::before,.hud-card::before,.library-card::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;z-index:1;--c:var(--cyan);--s:16px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/2px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--s) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/2px var(--s) no-repeat;
  opacity:.85;transition:opacity .3s,filter .3s;
}
.rig-card:hover::before,.price-card:hover::before,.membership-card:hover::before,.library-card:hover::before{filter:drop-shadow(0 0 6px var(--c))}

/* ---------- Rigs ---------- */
.rig-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.rig-card{padding:34px;overflow:hidden;transition:transform .3s ease,border-color .3s}
.rig-card:hover{transform:translateY(-4px);border-color:rgba(34,240,255,.45)}
.rig-card.console{--c2:var(--violet)}
.rig-card.console::before{--c:var(--violet)}
.rig-card.console:hover{border-color:rgba(157,77,255,.6)}
.rig-top{display:flex;justify-content:space-between;align-items:center}
.tag{font:.74rem var(--mono);letter-spacing:.16em;color:var(--cyan);padding:5px 10px;border:1px solid rgba(34,240,255,.35);background:rgba(34,240,255,.06)}
.console .tag{color:#c9a2ff;border-color:rgba(157,77,255,.45);background:rgba(157,77,255,.08)}
.count{font:1.1rem var(--mono);color:var(--dim);letter-spacing:.1em}
.rig-symbol{display:flex;justify-content:space-between;align-items:center;padding:14px 0 6px;font:700 4.2rem/1 var(--heading);color:var(--cyan);text-shadow:0 0 24px rgba(34,240,255,.6)}
.rig-symbol span{
  font-size:clamp(5rem,9vw,7.5rem);line-height:.9;font-weight:700;
  color:transparent;-webkit-text-stroke:1.5px rgba(34,240,255,.35);text-shadow:none;letter-spacing:-.02em;
}
.console .rig-symbol{color:#c08bff;text-shadow:0 0 24px rgba(157,77,255,.7)}
.console .rig-symbol span{-webkit-text-stroke-color:rgba(157,77,255,.45)}
.rig-card h3{text-transform:uppercase;font-size:clamp(1.7rem,2.6vw,2.2rem)}
.rig-card p{max-width:420px}
.spec-row{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.spec-row span{font:.76rem var(--mono);letter-spacing:.06em;background:rgba(255,255,255,.04);border:1px solid var(--line2);padding:6px 10px;color:#ddd7f0}
.text-link{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font:700 .85rem/1 var(--heading);letter-spacing:.14em;text-transform:uppercase;
  border-top:1px solid var(--line2);padding-top:20px;margin-top:6px;transition:color .2s;
}
.text-link span{transition:transform .2s}
.text-link:hover{color:var(--cyan)}
.text-link:hover span{transform:translate(3px,-3px)}

.hardware-specs{margin:0 0 24px}
.hardware-specs>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.hardware-specs dt{font:.7rem/1.6 var(--mono);letter-spacing:.14em;color:var(--dim)}
.hardware-specs dd{margin:0;font-size:.9rem;color:var(--text);font-weight:500;overflow-wrap:anywhere}
.hardware-specs small{display:block;color:var(--muted);font-size:.82rem;font-weight:400;margin-top:3px}
.hardware-specs a{border-bottom:1px dashed rgba(34,240,255,.4)}
.hardware-specs a:hover{color:var(--cyan)}
.full-specs{margin:0 0 20px;border-top:1px solid var(--line);padding-top:16px}
.full-specs summary{cursor:pointer;font:600 .8rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);list-style:none;display:flex;align-items:center;gap:10px}
.full-specs summary::-webkit-details-marker{display:none}
.full-specs summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border:1px solid currentColor;transition:transform .25s}
.full-specs[open] summary::before{transform:rotate(45deg)}
.full-specs .hardware-specs{margin:14px 0 0}

/* ---------- Booking ---------- */
.booking-section{
  position:relative;padding:110px 0;overflow:hidden;
  background:
    radial-gradient(ellipse at 0% 100%,rgba(255,46,136,.16),transparent 55%),
    radial-gradient(ellipse at 100% 0%,rgba(34,240,255,.10),transparent 55%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 14px),
    #0b0816;
  border-block:1px solid var(--line);
}
.booking-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.booking-layout h2{font-size:clamp(2.6rem,5vw,4.6rem)}
.demo-note{
  position:relative;margin-top:32px;max-width:400px;padding:16px 18px 16px 20px;
  border-left:2px solid var(--pink);background:linear-gradient(90deg,rgba(255,46,136,.1),rgba(255,46,136,.02));
}
.demo-note strong{font:.74rem var(--mono);letter-spacing:.16em;color:var(--pink)}
.demo-note p{font-size:.88rem;margin:8px 0 0}
.booking-card{padding:32px;box-shadow:0 30px 80px -30px rgba(255,46,136,.35)}
.booking-card::before{--c:var(--pink)}
fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}
legend,.form-row>label,label.game-pick{font:500 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pink);width:100%;margin-bottom:12px;padding:0}
legend span,.form-row>label>span,label.game-pick>span{color:var(--text);margin-left:8px;font-family:var(--heading);font-weight:600;font-size:.92rem;letter-spacing:.06em}
.platform-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.platform-options input{position:absolute;opacity:0;pointer-events:none}
.platform-options label{position:relative;cursor:pointer}
.platform-options label>span{
  display:block;padding:16px 18px;border:1px solid var(--line2);background:rgba(7,5,15,.6);
  font:700 1.5rem/1 var(--heading);letter-spacing:.04em;clip-path:var(--clip);--cut:10px;transition:all .2s;
}
.platform-options label:hover>span{border-color:rgba(34,240,255,.5)}
.platform-options small{display:block;margin-top:8px;font:.78rem var(--mono);letter-spacing:.06em;color:var(--muted)}
.platform-options input:checked+span{border-color:var(--cyan);background:linear-gradient(135deg,rgba(34,240,255,.16),rgba(34,240,255,.03));color:var(--cyan);text-shadow:0 0 16px rgba(34,240,255,.6);box-shadow:inset 0 0 24px rgba(34,240,255,.12)}
.platform-options input:checked+span small{color:#bff9ff}
.platform-options input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}
.form-row{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:12px}

input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;min-width:0;margin-top:10px;padding:13px 14px;border-radius:0;
  background:rgba(5,3,12,.75);color:var(--text);border:1px solid var(--line2);
  font:500 .95rem/1.3 var(--body);transition:border-color .2s,box-shadow .2s,background .2s;
}
input::placeholder,textarea::placeholder{color:#6f6890}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.3)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,240,255,.14),0 0 22px rgba(34,240,255,.14);background:rgba(5,3,12,.95)}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2322f0ff' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
select option{background:#0c0918}
::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(1) hue-rotate(140deg) saturate(4);cursor:pointer}
input[type=checkbox]{accent-color:var(--pink)}

.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slots button{
  padding:11px 6px;background:rgba(5,3,12,.7);border:1px solid var(--line2);
  font:600 .9rem/1.2 var(--mono);letter-spacing:.04em;clip-path:var(--clip);--cut:8px;transition:all .15s;
}
.slots button:not(:disabled):hover{border-color:rgba(34,240,255,.6);color:var(--cyan)}
.slots button small{display:block;font:.7rem var(--body);margin-top:4px;color:var(--muted);letter-spacing:0}
.slots button[aria-pressed=true]{color:#051317;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 22px rgba(34,240,255,.45)}
.slots button[aria-pressed=true] small{color:#063a44}
.slots button[aria-pressed=true]:not(:disabled):hover,.slots button[aria-pressed=true]:focus-visible{color:#051317;background:#5ff6ff;border-color:#5ff6ff;box-shadow:0 0 28px rgba(34,240,255,.6)}
.slots button[aria-pressed=true]:hover small{color:#063a44}
.slots button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.slots:empty::before{content:"";display:block;grid-column:1/-1;height:44px;background:linear-gradient(90deg,transparent,rgba(34,240,255,.1),transparent);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border:1px dashed var(--line2)}
@keyframes shimmer{to{background-position:-200% 0}}
.booking-total{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px dashed var(--line2);padding:22px 0 20px}
.booking-total span{font:.68rem var(--mono);letter-spacing:.16em;color:var(--muted)}
.booking-total p{color:var(--text);margin:4px 0 0;font-size:.9rem;font-weight:600}
.booking-total strong{font:700 2.7rem/1 var(--heading);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(255,46,136,.35))}
.fine-print{font-size:.78rem;color:var(--muted);margin:16px 0 0;line-height:1.55}
.booking-card>.fine-print{text-align:center}
#availability-status{font-family:var(--mono);letter-spacing:.02em;color:#bfb8d8}

/* ---------- Pricing ---------- */
.sample-label{border-left:2px solid var(--violet)!important}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price-card{padding:32px;display:flex;flex-direction:column;transition:transform .3s}
.price-card:hover{transform:translateY(-5px)}
.price-card>.eyebrow{margin-bottom:18px}
.price-card h3{font-size:2.6rem;text-transform:uppercase;margin-bottom:10px}
.price-card p:not(.price){font-size:.88rem}
.session-rate{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.session-rate>span{font:.74rem var(--mono);letter-spacing:.16em;color:var(--muted)}
.session-rate strong{font:700 2.4rem/1 var(--heading);color:var(--text)}
.price-card .session-rate+p{margin-top:18px}
.price-card .button{width:100%;margin-top:14px}
.price-card .session-rate+.button{margin-bottom:6px}
.featured{border-color:transparent!important;background:linear-gradient(160deg,rgba(255,46,136,.16),rgba(157,77,255,.08) 60%),var(--panel)!important}
.featured::before{--c:var(--pink)}
.featured::after{
  content:"";position:absolute;inset:-1px;z-index:-1;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--spin,0deg),var(--pink),var(--violet),var(--cyan),var(--pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spin 6s linear infinite;
}
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--spin:360deg}}
.featured>.eyebrow{color:var(--pink)}
.featured .session-rate strong{color:#fff;text-shadow:0 0 20px rgba(255,46,136,.5)}
.price{font:700 3.2rem/1 var(--heading);color:var(--text);margin:18px 0 20px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price small{font:.8rem var(--body);color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:6px}

.launch-memberships{margin-top:80px;padding-top:50px;border-top:1px solid var(--line);scroll-margin-top:100px}
.launch-memberships>h3{font-size:clamp(2rem,3.4vw,3rem);text-transform:uppercase}
.membership-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.membership-card{padding:32px;transition:transform .3s}
.membership-card:hover{transform:translateY(-4px)}
.membership-card:nth-child(2),.membership-card.pro{border-color:rgba(157,77,255,.55);background:radial-gradient(520px circle at var(--mx) var(--my),rgba(157,77,255,.16),transparent 45%),linear-gradient(145deg,rgba(157,77,255,.14),transparent 60%),var(--panel)}
.membership-card:nth-child(2)::before,.membership-card.pro::before{--c:var(--violet)}
.membership-card h4{font-size:1.9rem;text-transform:uppercase;letter-spacing:.02em}
.membership-card ul{list-style:none;padding:0;margin:0;color:#ddd6ef;font-size:.94rem}
.membership-card li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--line)}
.membership-card li:last-child{border:0}
.membership-card li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;background:var(--cyan);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 8px var(--cyan)}
.notice-alert{display:block;padding:12px 16px;border:1px solid rgba(255,177,59,.7);border-left:4px solid var(--amber);background:linear-gradient(90deg,rgba(255,177,59,.16),rgba(255,46,136,.06));color:#ffe3b8}
.notice-alert .notice-alert-text{color:var(--amber);font-weight:700}
.notice-blink{animation:noticeBlink .9s ease-in-out 4}
@keyframes noticeBlink{0%,100%{box-shadow:0 0 0 rgba(255,177,59,0);border-color:rgba(255,177,59,.7)}50%{box-shadow:0 0 22px rgba(255,177,59,.55),inset 0 0 12px rgba(255,177,59,.18);border-color:#ffd27a;background-color:rgba(255,177,59,.14)}}
@media (prefers-reduced-motion:reduce){.notice-blink{animation:none}}
.member-hint{display:block;margin-top:4px;color:var(--cyan);font-weight:600}
.join-hub{display:flex;align-items:center;gap:20px;margin-top:24px;padding:22px 24px;border:1px solid rgba(37,240,255,.45);background:linear-gradient(90deg,rgba(37,240,255,.12),rgba(157,77,255,.08) 60%,transparent);clip-path:var(--clip);--cut:14px}
.join-hub-icon{font-size:2rem;filter:drop-shadow(0 0 10px rgba(37,240,255,.6))}
.join-hub strong{display:block;font-family:var(--heading);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px}
.join-hub p{margin:0;font-size:.92rem;color:#ddd6ef}
.join-hub .button{flex-shrink:0}
.join-note{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line2);font:.8rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
@media (max-width:700px){.join-hub{flex-direction:column;align-items:flex-start}}
.membership-terms{padding:20px 22px;border-left:2px solid var(--violet);background:linear-gradient(90deg,rgba(157,77,255,.1),transparent);font-size:.88rem;margin-top:26px}
.membership-terms strong{display:block;color:var(--text);margin-bottom:6px;font-family:var(--heading);letter-spacing:.06em;text-transform:uppercase}

.launch-offer{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:32px;padding:34px;margin-top:40px;
  border:1px solid rgba(255,46,136,.45);
  background:radial-gradient(ellipse at 0% 0%,rgba(255,46,136,.22),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(255,177,59,.12),transparent 60%),var(--panel);
  clip-path:var(--clip);--cut:22px;
}
.launch-offer::after{content:"보너스";position:absolute;right:-10px;bottom:-30px;font:8rem/1 var(--kr);color:transparent;-webkit-text-stroke:1px rgba(255,46,136,.18);pointer-events:none}
.launch-offer h3{text-transform:uppercase}
.launch-offer p{margin-bottom:0}
.launch-offer .eyebrow{margin-bottom:14px;color:var(--amber)}
.launch-offer strong{color:#fff}
.offer-terms{font-size:.86rem;border-left:1px solid var(--line2);padding-left:24px;position:relative;z-index:1}

/* ---------- Games ---------- */
.games-section{background:linear-gradient(180deg,rgba(12,9,24,.6),rgba(12,9,24,.9));border-block:1px solid var(--line)}
.filters{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.filters button{
  background:rgba(255,255,255,.03);border:1px solid var(--line2);padding:10px 16px;
  font:600 .78rem/1 var(--heading);letter-spacing:.14em;text-transform:uppercase;clip-path:var(--clip);--cut:8px;transition:all .2s;
}
.filters button:hover{border-color:var(--cyan);color:var(--cyan)}
.filters button.active{background:var(--cyan);color:#041216;border-color:var(--cyan);box-shadow:0 0 20px rgba(34,240,255,.4)}
.library-count{font:.85rem var(--mono);letter-spacing:.1em;color:var(--cyan);margin:22px 0}
.library-count::before{content:"▶ ";color:var(--pink)}
.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:game}
.library-card{
  position:relative;counter-increment:game;isolation:isolate;overflow:hidden;
  padding:22px 20px 18px;min-height:170px;display:flex;flex-direction:column;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(34,240,255,.12),transparent 50%),linear-gradient(150deg,rgba(28,19,52,.85),rgba(12,9,24,.9));
  border:1px solid var(--line);transition:transform .25s,border-color .25s;
}
.library-card::before{--s:10px;opacity:0}
.library-card:hover{transform:translateY(-4px);border-color:rgba(34,240,255,.45)}
.library-card:hover::before{opacity:1}
.library-card::after{
  content:counter(game,decimal-leading-zero);position:absolute;right:12px;top:6px;z-index:-1;
  font:700 3.4rem/1 var(--heading);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
}
.library-number{display:none}
.library-card h3{font-size:1.45rem;line-height:1.1;margin:auto 0 16px;overflow-wrap:anywhere;text-transform:uppercase;padding-top:26px}
.platform-badges{display:flex;gap:6px;flex-wrap:wrap}
.platform-badges span{font:.7rem var(--mono);letter-spacing:.12em;color:var(--cyan);border:1px solid rgba(34,240,255,.35);background:rgba(34,240,255,.06);padding:3px 8px}
.platform-badges span:nth-child(2){color:#c9a2ff;border-color:rgba(157,77,255,.45);background:rgba(157,77,255,.08)}
.library-card[data-game="ps5"] .platform-badges span:first-child{color:#c9a2ff;border-color:rgba(157,77,255,.45);background:rgba(157,77,255,.08)}
.upcoming-game{grid-column:span 2;border-color:rgba(255,46,136,.55);background:radial-gradient(ellipse at 100% 0%,rgba(255,177,59,.18),transparent 55%),linear-gradient(120deg,rgba(255,46,136,.2),rgba(157,77,255,.14))}
.upcoming-game::before{--c:var(--pink);opacity:1}
.upcoming-game::after{content:"SOON";-webkit-text-stroke-color:rgba(255,46,136,.3)}
.upcoming-label{font:.72rem var(--mono);letter-spacing:.16em;color:var(--pink);margin-bottom:8px}
.upcoming-game h3{padding-top:12px;font-size:1.9rem}
.upcoming-game p{font-size:.86rem;margin-bottom:14px}
.upcoming-game .platform-badges span:last-child{color:var(--pink);border-color:rgba(255,46,136,.5);background:rgba(255,46,136,.08)}

/* ---------- Events teaser & private promo ---------- */
.events-teaser{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hud-card{padding:34px;overflow:hidden;display:flex;flex-direction:column;gap:6px;transition:transform .3s}
.hud-card:hover{transform:translateY(-4px)}
.hud-card h3{font-size:clamp(1.8rem,3vw,2.5rem);text-transform:uppercase}
.hud-card .button{align-self:flex-start;margin-top:auto}
.hud-card .big-kr{position:absolute;right:18px;bottom:-18px;z-index:-1;font:7rem/1 var(--kr);color:transparent;-webkit-text-stroke:1px rgba(34,240,255,.14);pointer-events:none}
.hud-card.alt::before{--c:var(--pink)}
.hud-card.alt{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,46,136,.12),transparent 45%),linear-gradient(150deg,rgba(255,46,136,.12),transparent 60%),var(--panel)}
.hud-card.alt .big-kr{-webkit-text-stroke-color:rgba(255,46,136,.18)}
.format-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 24px}
.format-chips span{font:.74rem var(--mono);letter-spacing:.12em;padding:6px 10px;border:1px solid var(--line2);background:rgba(255,255,255,.03)}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:260px 260px;gap:18px}
.gallery-grid figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line2);clip-path:var(--clip);--cut:18px}
.gallery-grid figure:first-child{grid-row:1/3}
.gallery-grid img{width:100%;height:100%;transition:transform .8s ease,filter .5s}
.gallery-grid figure:hover img{transform:scale(1.05);filter:saturate(1.2) contrast(1.05)}
.gallery-grid figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px);opacity:.5}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:40px 20px 16px;background:linear-gradient(transparent,rgba(7,5,15,.95));display:flex;justify-content:space-between;align-items:end;gap:15px;font:.7rem var(--mono);letter-spacing:.1em;color:var(--muted)}
.gallery-grid figcaption span{color:#fff;letter-spacing:.14em}
.gallery-grid figcaption .kr{color:var(--pink);font-size:.9rem;letter-spacing:.04em}

/* ---------- Community ---------- */
.community{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:80px 40px;margin-block:30px 110px;
  background:radial-gradient(ellipse at 50% 0%,rgba(157,77,255,.3),transparent 60%),radial-gradient(ellipse at 50% 120%,rgba(255,46,136,.2),transparent 55%),var(--panel);
  border:1px solid rgba(157,77,255,.4);clip-path:var(--clip);--cut:28px;
}
.community::before{content:"스쿼드";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;font:clamp(8rem,22vw,18rem)/1 var(--kr);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05);white-space:nowrap;pointer-events:none}
.community .eyebrow{justify-content:center}
.community h2{font-size:clamp(2.4rem,5vw,4.6rem)}
.community h2 span{background:linear-gradient(90deg,#c08bff,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:36px}
.socials>span,.socials>a{
  min-width:200px;padding:16px 22px;border:1px solid var(--line2);background:rgba(7,5,15,.5);
  font:700 1.05rem/1.2 var(--heading);letter-spacing:.1em;text-transform:uppercase;clip-path:var(--clip);--cut:10px;
}
.socials>a.social{display:block;text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s,box-shadow .2s}
.socials>a.social:hover{transform:translateY(-3px)}
.socials .social svg{display:block;margin:0 auto 10px}
.socials .ig svg{color:#ff5fa2}.socials .ig:hover{border-color:#ff2e88;box-shadow:0 0 22px rgba(255,46,136,.35)}
.socials .wa svg{color:#25d366}.socials .wa:hover{border-color:#25d366;box-shadow:0 0 22px rgba(37,211,102,.3)}
.foot-social{display:flex;gap:10px}
.foot-social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line2);color:var(--muted);transition:color .2s,border-color .2s,box-shadow .2s}
.foot-social a.ig:hover{color:#ff5fa2;border-color:#ff2e88;box-shadow:0 0 14px rgba(255,46,136,.4)}
.foot-social a.wa:hover{color:#25d366;border-color:#25d366;box-shadow:0 0 14px rgba(37,211,102,.35)}
.socials small{display:block;color:var(--muted);font:.72rem var(--mono);letter-spacing:.06em;text-transform:none;margin-top:6px}

/* ---------- Visit + FAQ ---------- */
.visit-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:90px}
.visit-layout h2{font-size:clamp(2.6rem,5vw,4.6rem)}
.contact-details{margin:32px 0}
.contact-details>div{padding:14px 0 14px 18px;border-left:2px solid var(--line2);margin-bottom:6px;transition:border-color .2s}
.contact-details>div:hover{border-color:var(--cyan)}
.contact-details dt{font:.68rem var(--mono);letter-spacing:.16em;color:var(--dim)}
.contact-details dd{margin:6px 0 0;font-size:.95rem;font-weight:500}
.contact-details a:hover{color:var(--cyan)}
.contact-details dd>div{font:.86rem/1.8 var(--mono);letter-spacing:.04em;color:#d9d3ee}
.faq h3{font-size:clamp(2rem,3vw,2.6rem);text-transform:uppercase}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font:600 1rem/1.4 var(--heading);letter-spacing:.03em;list-style:none;position:relative;padding:20px 44px 20px 0;transition:color .2s}
.faq summary:hover{color:var(--cyan)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;width:26px;height:26px;margin-top:-13px;display:grid;place-items:center;border:1px solid rgba(255,46,136,.5);color:var(--pink);font:400 1.1rem/1 var(--body);transition:transform .25s,background .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:rgba(255,46,136,.12)}
.faq details[open] summary{color:var(--cyan)}
.faq details p{font-size:.92rem;margin:0 0 20px;padding-left:14px;border-left:2px solid var(--cyan)}

/* ---------- Footer ---------- */
footer{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding:40px 0 34px;border-top:1px solid var(--line)}
footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent)}
footer .brand-logo{height:40px}
footer p{font:.8rem var(--mono);letter-spacing:.08em;margin:0 auto}
footer p .kr{color:var(--pink);margin-left:8px}
footer>a:last-of-type{font:600 .78rem var(--heading);letter-spacing:.14em;text-transform:uppercase}
footer>a:last-of-type:hover{color:var(--cyan)}
footer small{flex-basis:100%;font:.7rem var(--mono);letter-spacing:.08em;color:var(--dim)}

/* ---------- Dialogs ---------- */
dialog{
  max-width:560px;width:calc(100% - 32px);max-height:90vh;overflow:auto;padding:32px;
  background:radial-gradient(ellipse at 100% 0%,rgba(255,46,136,.16),transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(34,240,255,.1),transparent 55%),#0e0a1c;
  color:var(--text);border:1px solid rgba(255,46,136,.55);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 100px rgba(0,0,0,.7),0 0 60px rgba(255,46,136,.2);
}
dialog[open]{animation:dialogIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes dialogIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
dialog::backdrop{background:rgba(4,2,10,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dialog-head .eyebrow{margin:0}
.dialog-head button{border:1px solid var(--line2);background:rgba(255,255,255,.04);width:38px;height:38px;display:grid;place-items:center;transition:all .2s}
.dialog-head button:hover{border-color:var(--pink);color:var(--pink);transform:rotate(90deg)}
dialog h2{font-size:clamp(2rem,5vw,2.8rem)}
dialog .demo-note{font-size:.86rem;margin:20px 0;max-width:none}
body.modal-open{overflow:hidden}
.booking-details{margin:0 0 24px;border:1px solid var(--line);background:rgba(5,3,12,.5)}
.booking-details>div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:11px 14px;font-size:.9rem}
.booking-details>div:last-child{border:0}
.booking-details dt{font:.72rem/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.booking-details dd{margin:0;text-align:right;font-weight:600}
#guest-form>label{display:block;font:.72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:16px}
#guest-form input{margin-top:8px}
#guest-review-details{white-space:pre-line;overflow-wrap:anywhere;font-family:var(--mono);color:var(--cyan)}
#guest-review .button{margin-top:12px}
#booking-save-status{font-family:var(--mono)}

/* ---------- Reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(min-width:1600px){.hero-art{background-position:center}}
@media(max-width:1180px){
  nav>a:not(.button){padding:10px 9px;font-size:.75rem}
  .wrap{width:calc(100% - 64px)}
  .booking-layout{gap:48px}
  .visit-layout{gap:56px}
  .library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-layout{grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:1000px){
  .hero-layout{grid-template-columns:1fr}
  .hud-panel{display:none}
  .hero-caption{display:none}
}
@media(max-width:900px){
  .header{height:74px}
  .brand-logo{height:38px}
  .menu-toggle{
    display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid rgba(34,240,255,.45);background:rgba(34,240,255,.06);
    font:600 .78rem var(--heading);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);clip-path:var(--clip);--cut:8px;
  }
  nav{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:18px 20px 24px;
    background:rgba(9,6,20,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,46,136,.4);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .25s,visibility .25s;
  }
  nav.open{opacity:1;visibility:visible;transform:none}
  nav>a:not(.button){padding:14px 6px;font-size:.95rem;border-bottom:1px solid var(--line)}
  nav>a:not(.button)::after{display:none}
  nav .button{margin:14px 0 0}
  .section{padding-block:80px}
  .booking-section{padding:80px 0}
  .booking-layout,.visit-layout{grid-template-columns:1fr;gap:40px}
  .section-heading{align-items:start;flex-direction:column;gap:18px}
  .price-grid{grid-template-columns:1fr;max-width:560px}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .events-teaser{grid-template-columns:1fr}
  .rig-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 32px)}
  .header{padding-inline:16px}
  .hero{min-height:auto}
  .hero-art{background:linear-gradient(90deg,rgba(7,5,15,.94),rgba(7,5,15,.55)),linear-gradient(0deg,var(--bg),transparent 50%),url('assets/hub-floor.jpg') 70% center/cover}
  .hero-content{padding-top:48px;padding-bottom:54px}
  .hero .eyebrow{font-size:.66rem;letter-spacing:.1em}
  .hero-kr,.page-hero .hero-kr{display:none}
  h1{font-size:clamp(3.1rem,15vw,4.6rem);margin-top:22px}
  .hero-copy{font-size:1rem}
  .actions{gap:10px}
  .actions .button{flex:1 1 auto;padding:14px 16px;gap:14px}
  .hero-stats{width:100%}
  .hero-stats>div{flex:1;padding:14px 12px}
  .hero-stats strong{font-size:1.9rem}
  .hero-stats span{font-size:.58rem;letter-spacing:.08em}
  .ticker{font-size:1.05rem;padding:13px 0}
  .ticker .kr{font-size:1rem}
  .rig-card,.booking-card,.price-card,.membership-card,.hud-card{padding:24px}
  .rig-symbol{font-size:3.2rem}
  .hardware-specs>div{grid-template-columns:1fr;gap:4px}
  .platform-options label>span{font-size:1.25rem;padding:14px}
  .form-row{grid-template-columns:1fr;gap:4px}
  .booking-total strong{font-size:2.2rem}
  .membership-grid,.launch-offer{grid-template-columns:1fr}
  .launch-offer{padding:26px}
  .offer-terms{padding-left:0;border-left:0;border-top:1px solid var(--line2);padding-top:18px}
  .library-grid{gap:10px}
  .library-card{padding:16px 14px 14px;min-height:140px}
  .library-card h3{font-size:1.15rem}
  .library-card::after{font-size:2.4rem}
  .upcoming-game{grid-column:1/-1}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:260px 200px 200px}
  .gallery-grid figure:first-child{grid-row:auto}
  .community{padding:54px 20px;margin-bottom:80px}
  .socials>span,.socials>a{min-width:0;width:100%}
  footer{gap:16px}
  footer p{margin:0;flex-basis:100%}
  dialog{padding:22px}
  .section-num{display:none}
}
@media(max-width:380px){
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking-details>div{flex-direction:column;gap:2px}
  .booking-details dd{text-align:left}
  .library-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .petals{display:none}
}

/* Package savings */
.booking-total{flex-wrap:wrap}
.savings-line{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:-8px 0 18px;padding:10px 14px;border:1px solid rgba(61,255,154,.4);background:linear-gradient(90deg,rgba(61,255,154,.12),rgba(34,240,255,.05));font:.9rem var(--body);color:#d8ffe9;clip-path:var(--clip);--cut:8px}
.savings-line b{color:#3dff9a;font:700 1.05rem var(--heading);letter-spacing:.04em}
.savings-line small{font:.74rem var(--mono);color:var(--muted)}
.savings-line s{color:#8f89a8}
.session-rate{flex-wrap:wrap}
.save-badge{flex-basis:100%;text-align:right;margin-top:-6px;font:600 .74rem var(--mono);letter-spacing:.06em;color:#3dff9a}

.form-row{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
@media(max-width:620px){.form-row{grid-template-columns:1fr}}

/* Players stepper */
.players{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.players .step{width:44px;height:44px;border:1px solid var(--line2);background:rgba(5,3,12,.75);color:var(--cyan);font:700 1.3rem/1 var(--heading);cursor:pointer;clip-path:var(--clip);--cut:8px}
.players .step:hover:not(:disabled){border-color:var(--cyan);background:rgba(34,240,255,.08)}
.players .step:disabled{opacity:.35;cursor:not-allowed}
.players input{width:70px!important;margin:0!important;text-align:center;font:700 1.2rem var(--heading)!important;-moz-appearance:textfield}
.players input::-webkit-outer-spin-button,.players input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.players-note{font:.78rem var(--mono);color:var(--muted);letter-spacing:.04em}

/* Special offers */
.offer-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;margin-bottom:26px}
.offer-card{position:relative;padding:24px;border:1px solid rgba(255,177,59,.55);background:radial-gradient(ellipse at 100% 0%,rgba(255,177,59,.2),transparent 60%),radial-gradient(ellipse at 0% 100%,rgba(255,46,136,.18),transparent 60%),var(--panel);clip-path:var(--clip);--cut:18px}
.happy-card{border-color:rgba(37,240,255,.55);background:radial-gradient(ellipse at 100% 0%,rgba(37,240,255,.18),transparent 60%),radial-gradient(ellipse at 0% 100%,rgba(157,77,255,.2),transparent 60%),var(--panel)}
.happy-card .offer-pct{background:linear-gradient(135deg,var(--cyan),#9d4dff);color:#05030c;box-shadow:0 0 22px rgba(37,240,255,.5)}
.offer-card.happy-card .eyebrow,.offer-card.happy-card .offer-pl{color:var(--cyan)}.happy-card .offer-when{color:#bff9ff}
.offer-pct{flex:0 0 auto;font:800 1.2rem/1.1 var(--heading);letter-spacing:.02em;white-space:nowrap;color:#1a0b00;background:linear-gradient(135deg,var(--amber),#ff7a3d);padding:7px 12px;transform:rotate(2deg);box-shadow:0 0 18px rgba(255,177,59,.5)}
.offer-top{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px}
.offer-top .eyebrow{margin:0!important;min-width:0}
.offer-card .eyebrow{color:var(--amber);margin-bottom:10px}
.offer-card h3{text-transform:uppercase;font-size:1.7rem;margin-bottom:6px}
.offer-when{font:.82rem var(--mono);color:#ffd9a0;margin-bottom:14px}
.offer-table{display:grid;align-items:center;gap:0 14px;margin:0 0 18px;border-top:1px solid var(--line)}
.offer-table>span{padding:9px 0;border-bottom:1px solid var(--line)}
.offer-th{font:.72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:7px 0!important}
.offer-pl{font:700 .82rem var(--mono);letter-spacing:.12em;color:var(--amber);padding-right:6px!important}
.offer-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;white-space:nowrap}
.offer-price b{font:700 1.2rem var(--heading);color:#fff}
.offer-price s{font:.75rem var(--mono);color:#8f89a8}
@media (max-width:480px){.offer-pct{font-size:1rem}.offer-table{gap:0 10px}.offer-price b{font-size:1.05rem}}
@media (max-width:900px){#booking-form{scroll-margin-top:18px}}
/* Online payment retry */
.pay-retry{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pay-retry .ghost{background:transparent;border:1px solid var(--line2);color:var(--text)}
/* Non-refundable notice above the pay button */
.pay-policy{margin:14px 0 12px;padding:11px 14px;border:1px solid rgba(255,196,0,.55);border-left:4px solid #ffc400;border-radius:10px;background:rgba(255,196,0,.09);color:#ffe7a3;font-size:.86rem;line-height:1.5}
.pay-policy b{color:#ffc400}
/* Footer policy links + booking terms checkbox */
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.82rem}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--cyan)}
.terms-agree{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:.86rem;line-height:1.5;color:#dcd5ee;cursor:pointer}
.terms-agree input{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:#ff2e88}
.terms-agree a{color:var(--cyan)}
#guest-form>label.terms-agree{display:flex;font:400 .86rem/1.5 var(--body);letter-spacing:0;text-transform:none;color:#dcd5ee;margin-top:0}
#guest-form>label.terms-agree input{margin-top:2px}
/* Game picker in the booking form */
.game-pick{display:block;margin:0 0 18px}
.game-pick select{width:100%;margin-top:8px}
.game-pick .fine-print{display:block;margin-top:6px;text-transform:none;letter-spacing:0;font:400 .8rem/1.45 var(--body);color:var(--muted)}
/* Member preview in the booking dialog */
.member-preview{margin:12px 0;padding:12px 14px;border:1px solid rgba(34,240,255,.45);border-left:4px solid #22f0ff;border-radius:10px;background:rgba(34,240,255,.07)}
.member-preview p{margin:0 0 6px;font-size:.88rem;line-height:1.45;color:#dff9fc}
.member-preview .mp-head{font-weight:700;color:#22f0ff}
.member-preview .mp-total{margin:8px 0 0;font-weight:700;color:#fff}
.member-preview .mp-free{display:flex;gap:10px;align-items:flex-start;margin:8px 0 2px;font-size:.88rem;color:#fff;cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--body)}
.member-preview .mp-free input{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:#22f0ff}
#guest-form>.member-preview label{margin:8px 0 2px}

/* PS5 controller tiers */
.ctl-field .platform-options label>span{font-size:1.05rem}
.ctl-field .fine-print{margin-top:8px}
.session-rate.rate-sub{border-bottom-style:dashed}
.session-rate.rate-sub>span{color:var(--cyan)}
.rates-tc{margin-top:14px;text-align:center}
.rates-tc a,.offer-tc a,.tc-link{color:var(--amber)}
.offer-tc{margin-top:10px;font:.72rem var(--mono);letter-spacing:.04em;color:var(--muted)}

/* coupon code at checkout */
.coupon-box{margin:14px 0 4px}.coupon-box label{display:block;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.coupon-row{display:flex;gap:8px}.coupon-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.12em;font-family:var(--mono)}
.coupon-msg{min-height:20px;margin:6px 0 0;font-size:14px}.coupon-msg.good{color:#3dff9a;font-weight:600}.coupon-msg.bad{color:#ff8fab;font-weight:600}.coupon-msg.info{color:#ffd28a}

/* real hub photos gallery (5 photos) */
.gallery-grid.real{grid-template-columns:1fr 1fr .8fr;grid-template-rows:300px 260px}
.gallery-grid.real figure:nth-child(1){grid-column:1/3;grid-row:1}
.gallery-grid.real figure:nth-child(2){grid-column:3;grid-row:1/3}
.gallery-grid.real figure:nth-child(3){grid-column:1;grid-row:2}
.gallery-grid.real figure:nth-child(4){grid-column:2;grid-row:2}
.gallery-grid.real img{object-fit:cover;display:block}
@media(max-width:760px){.gallery-grid.real{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:240px}.gallery-grid.real figure:nth-child(n){grid-column:auto;grid-row:auto}.gallery-grid.real figure:nth-child(2){grid-row:span 2}}