/* 토큰, 리셋, 타이포, 커서 */

:root{
  --neon:#C6FF3D; --ink:#0B0F16; --paper:#F4F1E9;
  --mono:'Pretendard','Pretendard Variable',-apple-system,sans-serif;
  --pre:'Pretendard','Pretendard Variable',-apple-system,sans-serif;
  --en:'Pretendard','Pretendard Variable',-apple-system,sans-serif;
  --kr:'Pretendard','Pretendard Variable',-apple-system,sans-serif;
  --body:'Pretendard','Pretendard Variable',-apple-system,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --warm:#FF9E2C;
  --warm-soft:#FFE3C4;
  --warm-soft-on:#FFD2A3;
  --lime-soft:#E2F4AE;
  --gold-soft:#FFE9AE;
  --num:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --t-fast:.25s; --t-base:.4s; --t-slow:.55s;
  --shadow-scene:0 30px 80px rgba(0,0,0,.55);
  --shadow-card:0 18px 40px -22px rgba(9,26,48,.34);
  --shadow-float:0 28px 60px -26px rgba(9,26,48,.42);
  --shadow-device:0 46px 82px -32px rgba(9,26,48,.44);
}
*{margin:0;padding:0;box-sizing:border-box}
button{border:0}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{font-family:var(--body);font-weight:400;color:var(--paper);cursor:none;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--neon);color:#000}

#stage{position:fixed;inset:0;overflow:hidden;background:#05080E}
#zoom{position:absolute;inset:0;transform-origin:50% 50%;
  transition:transform 1s var(--ease),opacity .55s ease,filter .55s ease}
#zoom.out{opacity:0;filter:blur(7px)}
#frame{position:absolute;top:50%;left:50%;will-change:transform}
#frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  transition:opacity .7s ease;opacity:0}
#frame img.on{opacity:1}
#hot{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.hs{fill:rgba(198,255,61,.02);stroke:var(--neon);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
  opacity:.001;cursor:none;transition:opacity .35s var(--ease),stroke-width .35s}
.hs.info{fill:rgba(255,255,255,.03);stroke:#FFFFFF}
.hs.info:hover{fill:rgba(255,255,255,.10);
  filter:drop-shadow(0 0 3px rgba(8,12,20,.95)) drop-shadow(0 0 14px #fff)
         drop-shadow(0 0 44px rgba(255,255,255,.6))}
.hs.info.show{filter:drop-shadow(0 0 8px rgba(255,255,255,.65))}
.hs.app{fill:rgba(255,158,44,.025);stroke:#FF9E2C}
.hs.app:hover{fill:rgba(255,158,44,.08);
  filter:drop-shadow(0 0 3px rgba(8,12,20,.9)) drop-shadow(0 0 14px #FF9E2C)
         drop-shadow(0 0 44px rgba(255,158,44,.6))}
.hs.app.show{filter:drop-shadow(0 0 8px rgba(255,158,44,.6))}
.hs.game{fill:rgba(62,200,255,.025);stroke:#3EC8FF}
.hs.game:hover{fill:rgba(62,200,255,.08);
  filter:drop-shadow(0 0 3px rgba(8,12,20,.9)) drop-shadow(0 0 14px #3EC8FF)
         drop-shadow(0 0 44px rgba(62,200,255,.6))}
.hs.game.show{filter:drop-shadow(0 0 8px rgba(62,200,255,.6))}
.hs:hover,.hs.show{opacity:1}
.hs:hover{fill:rgba(198,255,61,.07);stroke-width:4.5;
  filter:drop-shadow(0 0 3px rgba(8,12,20,.9)) drop-shadow(0 0 14px var(--neon))
         drop-shadow(0 0 44px rgba(198,255,61,.6))}
.hs.show{opacity:.5;filter:drop-shadow(0 0 8px rgba(198,255,61,.6))}
.beacon{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;z-index:4;
  transition:opacity .3s}
.beacon b{position:absolute;inset:4px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 12px #fff,0 0 30px rgba(255,255,255,.6)}
.beacon i{position:absolute;inset:0;border-radius:50%;border:1.5px solid #FFFFFF;
  animation:ping 2.4s ease-out infinite}
.beacon.go b{background:var(--neon);box-shadow:0 0 12px var(--neon),0 0 32px rgba(198,255,61,.7)}
.beacon.go i{border-color:var(--neon)}
@keyframes ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.7);opacity:0}}
.beacon.hidden{opacity:0}
#hlab{position:fixed;z-index:28;pointer-events:none;opacity:0;
  transform:translate(-50%,0) translateY(6px);
  transition:opacity .25s var(--ease),transform .4s var(--ease)}
#hlab.on{opacity:1;transform:translate(-50%,0) translateY(0)}
#hlab span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:clamp(11px,1.3vh,15px) clamp(18px,1.9vw,28px);
  border-radius:100px;background:var(--neon);color:#0B0F16;font-family:var(--mono);font-weight:800;
  font-size:clamp(14px,1.45vw,18px);letter-spacing:-.01em;
  box-shadow:0 0 32px rgba(198,255,61,.8),0 12px 34px rgba(0,0,0,.55)}
#hlab.info span{background:var(--paper);
  box-shadow:0 0 32px rgba(255,255,255,.85),0 12px 34px rgba(0,0,0,.55)}

#nav{position:fixed;top:0;left:0;right:0;z-index:40;pointer-events:none;
  padding:14px clamp(12px,2.6vw,30px) 0;
  background:linear-gradient(180deg,rgba(6,10,18,.62) 0%,rgba(6,10,18,.28) 62%,transparent 100%)}
#navrow{pointer-events:auto;display:flex;align-items:center;gap:clamp(10px,2vw,26px);
  padding-bottom:11px;border-bottom:1px solid rgba(244,241,233,.5)}
#navrow .brand{font-family:var(--en);font-weight:800;font-size:clamp(15px,1.5vw,20px);
  display:inline-flex;align-items:center;gap:8px;
  letter-spacing:-.02em;color:var(--paper);text-shadow:0 2px 12px rgba(0,0,0,.8);flex:0 0 auto;
  background:none;border:0;cursor:none;padding:16px 10px;margin:-16px -10px;border-radius:8px;
  transition:var(--t-fast) var(--ease)}
#navrow .brand .logo-mark{width:19px;height:19px;flex:0 0 auto;color:var(--paper);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.75));transition:color .3s var(--ease)}
#navrow .brand:hover{color:var(--neon);background:rgba(198,255,61,.12);
  text-shadow:0 0 16px rgba(198,255,61,.9)}
#navrow .brand:hover .logo-mark{color:var(--neon)}
.feats{display:flex;align-items:center;gap:clamp(2px,.5vw,8px);flex:1;
  justify-content:center;flex-wrap:nowrap}
.feats a{font-family:var(--pre);font-weight:700;font-size:clamp(13px,1.05vw,15.4px);
  letter-spacing:-.01em;color:var(--paper);text-decoration:none;white-space:nowrap;position:relative;
  padding:16px clamp(8px,1vw,15px);margin:-16px 0;border-radius:8px;
  text-shadow:0 2px 10px rgba(0,0,0,.75);transition:color .3s,text-shadow .3s,background .3s;opacity:.88}
.feats a:hover{color:var(--neon);opacity:1;
  text-shadow:0 0 16px rgba(198,255,61,.9);background:rgba(198,255,61,.12)}
.feats a.on{color:var(--neon);opacity:1;text-shadow:0 0 18px rgba(198,255,61,.9)}
.feats a.on::after{content:'';position:absolute;
  left:clamp(8px,1vw,15px);right:clamp(8px,1vw,15px);bottom:-4px;height:2px;
  background:var(--neon);box-shadow:0 0 12px var(--neon)}
.navend{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex:0 0 auto;
  padding-left:clamp(10px,1.6vw,22px)}
.ghostlink{font-family:var(--pre);font-weight:700;font-size:clamp(13px,1.05vw,15.4px);
  letter-spacing:-.01em;color:var(--paper);text-decoration:none;opacity:.88;
  padding:16px 14px;margin:-16px 0;border-radius:8px;
  text-shadow:0 2px 10px rgba(0,0,0,.75);transition:.3s}
.ghostlink:hover{opacity:1;color:var(--neon);
  text-shadow:0 0 16px rgba(198,255,61,.9);background:rgba(198,255,61,.12)}
.cta{font-family:var(--pre);font-weight:800;font-size:clamp(15.4px,1.05vw,15.4px);letter-spacing:-.01em;
  color:#0B0F16;background:var(--neon);border-radius:100px;padding:13px 22px;text-decoration:none;
  white-space:nowrap;box-shadow:0 0 24px rgba(198,255,61,.45);transition:var(--t-base) var(--ease)}
.cta:hover{background:var(--paper);box-shadow:0 0 34px rgba(244,241,233,.6);transform:translateY(-1px)}
@media (max-width:1024px){.feats{gap:14px}.feats a{font-size:15.4px}}
@media (max-width:860px){.feats{display:none}#navrow{justify-content:space-between}}
@media (max-width:640px){.cta{padding:8px 13px;font-size:15.4px}}

#where{position:fixed;left:clamp(14px,3vw,34px);bottom:clamp(16px,3vh,30px);z-index:30;
  pointer-events:none;text-shadow:0 2px 16px rgba(0,0,0,.85)}
#where .k{font-family:var(--kr);font-weight:800;font-size:clamp(22px,3.4vw,44px);letter-spacing:-.02em;line-height:1}
#where .e{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.3em;opacity:.7;
  text-transform:uppercase;margin-top:7px}
#tip{position:fixed;right:clamp(14px,3vw,34px);bottom:clamp(16px,3vh,30px);z-index:30;
  font-family:var(--mono);font-weight:500;font-size:13.3px;letter-spacing:.01em;text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.85);opacity:.85;line-height:1.85}
#tip b{font-weight:800}
#tip b.app{color:#FF9E2C;text-shadow:0 0 14px rgba(255,158,44,.75)}
#tip b.game{color:#3EC8FF;text-shadow:0 0 14px rgba(62,200,255,.75)}
#tip b.info{color:var(--neon);text-shadow:0 0 14px rgba(198,255,61,.7)}
#tip u{display:inline-block;text-decoration:none;border:1px solid rgba(244,241,233,.55);
  border-radius:4px;padding:1px 7px;margin:0 4px;font-weight:700}
#back{position:fixed;left:clamp(14px,3vw,34px);top:clamp(74px,9vh,96px);z-index:30;cursor:none;display:none;
  align-items:center;gap:9px;padding:10px 17px;border-radius:12px;
  border:1.5px solid rgba(244,241,233,.5);background:rgba(11,15,22,.74);backdrop-filter:blur(12px);
  font-family:var(--pre);font-weight:600;font-size:14px;letter-spacing:-.01em;
  color:var(--paper);transition:var(--t-base) var(--ease);white-space:nowrap}
#back.on{display:inline-flex}
#back:hover,#apcount:hover,#evbtn:hover{background:rgba(11,15,22,.9);
  transform:translateY(-1px)}
#back:hover{border-color:var(--neon);color:var(--neon)}
#apcount:hover{border-color:#FF9E2C}
#evbtn:hover{border-color:#FFD23F}
#toast{position:fixed;left:50%;bottom:12vh;transform:translateX(-50%);z-index:35;
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  pointer-events:none;max-width:min(760px,94vw)}
.tmsg{display:flex;align-items:center;gap:12px;white-space:nowrap;
  box-sizing:border-box;height:54px;padding:0 17px;border-radius:8px;
  background:#0A0E14;color:var(--paper);
  border:1.5px solid rgba(198,255,61,.5);box-shadow:0 14px 36px -14px rgba(0,0,0,.6);
  font-family:var(--pre);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  opacity:0;transform:translateY(8px);
  transition:opacity .1s linear,transform .1s linear}
.tmsg.on{opacity:1;transform:none;transition:opacity .32s var(--ease),transform .32s var(--ease)}
.tmsg .tg{flex:0 0 auto;min-width:62px;text-align:center;font-size:11.5px;font-weight:800;
  letter-spacing:-.01em;padding:5px 10px;border-radius:6px;background:var(--paper);color:#0B0F16}
.tmsg .tx{color:var(--paper);overflow:hidden}
.tmsg.t-quest{border-color:rgba(198,255,61,.7)}   .tmsg.t-quest .tg{background:var(--neon)}
.tmsg.t-get{border-color:rgba(255,210,63,.7)}     .tmsg.t-get .tg{background:#FFD23F}
.tmsg.t-app{border-color:rgba(255,158,44,.7)}     .tmsg.t-app .tg{background:#FF9E2C}
.tmsg.t-stamp{border-color:rgba(198,255,61,.7)}   .tmsg.t-stamp .tg{background:var(--neon)}
.tmsg.t-snow{border-color:rgba(150,214,245,.7)}   .tmsg.t-snow .tg{background:#96D6F5}
.tmsg.t-game{border-color:rgba(62,200,255,.7)}    .tmsg.t-game .tg{background:#3EC8FF}
.tmsg.t-lock{border-color:rgba(244,241,233,.5)}   .tmsg.t-lock .tg{background:#8C93A0;color:#fff}
.tmsg.t-warn{border-color:rgba(255,158,44,.75)}   .tmsg.t-warn .tg{background:#FF9E2C}

#snowfx{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity 1s}
#snowfx.on{opacity:1}
#vig{position:fixed;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 44%,rgba(4,7,13,.30) 72%,rgba(3,6,12,.72) 100%)}
#flash{position:fixed;inset:0;z-index:36;pointer-events:none;background:#fff;opacity:0;
  transition:opacity .35s ease}

/* 전체화면 모달 : 6개 레이어가 공유하는 기본형 */
.overlay{position:fixed;inset:0;background:rgba(6,9,15,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(30px,6vh,70px) 22px 40px;
  opacity:0;visibility:hidden;transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.overlay.on{opacity:1;visibility:visible}