/* 트리런 게임, 결과, 트레일 */

/* TREE RUN 게임 */
.beacon.game b{background:#3EC8FF;box-shadow:0 0 12px #3EC8FF,0 0 34px rgba(62,200,255,.75)}
.beacon.game i{border-color:#3EC8FF}
#hlab.game span{background:#3EC8FF;color:#08131C;
  box-shadow:0 0 32px rgba(62,200,255,.85),0 12px 34px rgba(0,0,0,.55)}
body.playing #cur{display:none}

#game{position:fixed;inset:0;z-index:64;display:none;background:#0A1728}
#game.on{display:block}
#gcv{position:absolute;inset:0;width:100%;height:100%;display:block}
#ghud{position:absolute;inset:0;pointer-events:none;padding:clamp(14px,3vh,28px) clamp(14px,3vw,34px);
  display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-weight:500}
#ghud .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
#ghud .box{background:rgba(11,15,22,.6);border:2px solid rgba(244,241,233,.45);border-radius:6px;
  padding:9px 14px;backdrop-filter:blur(8px)}
#ghud .lb{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.6}
#ghud .vl{font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
#glives{display:flex;gap:5px;margin-top:5px}
#glives i{width:11px;height:11px;box-shadow:0 0 0 1.5px rgba(25,20,16,.35);border-radius:50%;background:#FF5A2D;
  transition:var(--t-fast) var(--ease)}
#glives i.off{background:transparent;opacity:.35}
#gbarwrap{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(14px,3vh,26px);
  width:min(420px,78vw)}
#gbar{height:9px;border-radius:100px;background:rgba(255,255,255,.85);
  overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.45)}
#gbar i{display:block;height:100%;background:#C6FF3D;width:0}
#gbartx{display:flex;justify-content:space-between;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;margin-top:6px;opacity:.75}
#gcount{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#gcount b{font-family:var(--kr);font-weight:900;font-size:clamp(70px,16vw,180px);color:#FFF4E2;
  -webkit-text-stroke:5px #191410;text-shadow:0 12px 40px rgba(0,0,0,.6)}
#gflash{position:absolute;inset:0;background:#FF5A2D;opacity:0;pointer-events:none;
  transition:opacity .18s ease}
#gquit{position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,34px);z-index:3;
  pointer-events:auto;background:none;border:0;border-bottom:1px solid rgba(244,241,233,.6);
  color:var(--paper);font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;cursor:none;padding:4px 0}

/* 결과 카드 */
#gres{z-index:66}
#grcard{box-shadow:0 30px 70px -30px rgba(0,0,0,.55);margin:auto;width:min(480px,100%);background:#FFF4E2;color:#191410;
  border-radius:8px;box-shadow:var(--shadow-scene);overflow:hidden}
#grcard .hd{background:#191410;color:#FFF4E2;padding:15px 22px;display:flex;
  justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#grcard .hd b{font-family:var(--en);font-weight:800;font-size:16px}
#grcard .hd span{font-family:var(--mono);font-weight:500;font-size:12.6px;letter-spacing:.18em;opacity:.7}
#grcard .bd{padding:20px 22px 22px}
#grcard h5{font-family:var(--kr);font-weight:800;font-size:clamp(24px,4.2vw,34px);letter-spacing:-.03em;line-height:1.25}
#grcard .sub{font-size:14.5px;line-height:1.8;opacity:.8;margin-top:8px}
.grstats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}
.grst{border-radius:5px;background:#fff;padding:11px 6px;text-align:center}
.grst b{display:block;font-family:var(--mono);font-weight:700;font-size:22px;line-height:1;letter-spacing:-.02em}
.grst span{display:block;font-family:var(--pre);font-weight:500;font-size:14px;letter-spacing:-.005em;opacity:.6;margin-top:5px}
.grbadges{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.grb{display:inline-flex;background:#191410;color:#FFF4E2;align-items:center;gap:7px;border-radius:5px;
  padding:8px 14px;background:#FFD23F;font-family:var(--pre);font-size:16.8px;font-weight:700;
  letter-spacing:-.005em}
.grb.new::after{content:'NEW';background:#FF5A2D;color:#fff;border-radius:100px;padding:1px 5px;font-size:12.5px}
#grfoot{border-top:1px solid rgba(25,20,16,.1);display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px}
#grfoot .n{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.1em;opacity:.6;margin-right:auto;
  line-height:1.7;flex:1;min-width:150px}


#dlm{z-index:60}
#dlcard{box-shadow:0 30px 70px -30px rgba(0,0,0,.55);box-shadow:0 30px 70px -30px rgba(0,0,0,.55);margin:auto;width:min(560px,100%);background:#FFF4E2;color:#191410;
  border-radius:8px;box-shadow:var(--shadow-scene);overflow:hidden}
#dlcard .hd{background:#191410;color:#FFF4E2;padding:17px 26px;display:flex;
  justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#dlcard .hd b{font-family:var(--en);font-weight:800;font-size:19px;letter-spacing:-.01em}
#dlcard .hd span{font-family:var(--mono);font-weight:500;font-size:16.8px;letter-spacing:-.005em;opacity:.72}
#dlcard .bd{padding:26px}
#dlcard h5{font-family:var(--kr);font-weight:800;font-size:clamp(26px,4.4vw,36px);letter-spacing:-.032em;line-height:1.26}
#dlcard .sub{font-size:clamp(14px,1.5vw,16.5px);line-height:1.8;opacity:.8;margin-top:12px}
.dlfeats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:22px}
.dlf{display:flex;align-items:center;gap:10px;border-radius:5px;
  background:#fff;padding:13px 15px;font-family:var(--pre);font-weight:700;
  font-size:clamp(13.5px,1.4vw,16px);cursor:none;transition:.28s var(--ease)}
.dlf:hover{background:var(--neon);transform:translateY(-2px)}
.dlf .ic{font-size:17px}
#evqr{width:96px;height:96px;padding:7px;background:#fff;
  border-radius:5px;display:grid;grid-template-columns:repeat(21,1fr);
  grid-template-rows:repeat(21,1fr);flex:0 0 auto}
#evqr i{background:#191410}
.evbtns{display:flex;flex-direction:column;gap:7px;flex:0 0 auto}
#dlqr{width:120px;height:120px;padding:8px;background:#fff;border-radius:5px;
  display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr)}
#dlqr i{background:#191410}


#dlcard .apbtn{border-width:1.2px;border-radius:6px;font-size:12.5px;padding:12px 20px;letter-spacing:-.005em}
#dlcard .apbtn:hover{transform:translateY(-2px)}
#ev::-webkit-scrollbar,#gres::-webkit-scrollbar,#dlm::-webkit-scrollbar,
#done::-webkit-scrollbar,#map::-webkit-scrollbar{width:9px}
#ev::-webkit-scrollbar-thumb,#gres::-webkit-scrollbar-thumb,#dlm::-webkit-scrollbar-thumb,
#done::-webkit-scrollbar-thumb,#map::-webkit-scrollbar-thumb{
  background:rgba(198,255,61,.45);border-radius:6px}
#ev,#gres,#dlm,#done,#map{scrollbar-width:thin;scrollbar-color:rgba(198,255,61,.45) transparent}

#fstat{z-index:57;background:rgba(6,9,15,.93);padding:clamp(66px,9vh,90px) 22px 40px}
#fcard{box-shadow:0 30px 70px -30px rgba(0,0,0,.55);margin:auto;width:min(600px,100%);background:#FFF4E2;color:#191410;
  border-radius:8px;box-shadow:var(--shadow-scene);overflow:hidden}
#fcard .head{background:#191410;color:#FFF4E2;padding:17px 26px;display:flex;
  justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#fcard .head b{font-family:var(--en);font-weight:800;font-size:19px;letter-spacing:-.01em}
#fcard .head span{font-family:var(--pre);font-weight:500;font-size:12px;opacity:.72}
#fcard .body{padding:26px 28px 22px}
#fcard h5{font-family:var(--kr);font-weight:800;font-size:clamp(23px,4vw,31px);
  letter-spacing:-.032em;line-height:1.26}
#fcard .lead{font-size:14.5px;line-height:1.8;opacity:.8;margin-top:10px}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}}
.fcell{display:flex;align-items:center;gap:11px;padding:13px 15px 13px 13px;border:0;
  background:#fff;border-radius:8px;text-align:left;cursor:none;color:rgba(25,20,16,.4);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease)}
.fcell:hover{background:var(--warm-soft-on);color:#191410;transform:translateY(-2px)}
.fcell.got{background:var(--warm-soft);color:#191410}
.fcell.got .tx b,.fcell.here .tx b{font-weight:700}
.fcell.here{box-shadow:inset 0 0 0 1.6px var(--warm);color:#191410}
.fcell.here:hover{background:var(--warm-soft)}
.fcell .no{font-family:var(--num);font-size:12px;font-weight:500;opacity:.55;flex:0 0 auto}
.fcell .tx{flex:1;min-width:0}
.fcell .tx b{display:block;font-family:var(--pre);font-size:15px;font-weight:500;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden}
.fcell .tx span{display:block;font-family:var(--pre);font-size:12.5px;font-weight:500;opacity:.7;
  margin-top:2px;white-space:nowrap;overflow:hidden}

.fcell .go{font-size:14px;font-weight:700;opacity:.5;flex:0 0 auto;
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.fcell:hover .go{opacity:.8;transform:translateX(3px)}
.fcell.got .go{opacity:.75;color:#A85C0C}
.fcell.here .go{opacity:.85;color:#A85C0C}
#ffoot{border-top:1px solid rgba(25,20,16,.1);display:flex;align-items:center;
  justify-content:center;margin-top:26px;padding-top:18px}


#fstat::-webkit-scrollbar{width:9px}
#fstat::-webkit-scrollbar-thumb{background:rgba(255,158,44,.5);border-radius:6px}

/* 커서 이동 트레일 */
.tp{position:fixed;pointer-events:none;z-index:118;transform:translate(-50%,-50%);
  opacity:0;animation:tpfade .8s ease-out forwards;filter:drop-shadow(0 0 5px rgba(255,210,63,.85))}
.tp svg{width:100%;height:100%;display:block}
@keyframes tpfade{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}
  22%{opacity:.95;transform:translate(-50%,-50%) scale(1) rotate(var(--rot))}
  100%{opacity:0;transform:translate(-50%,-30%) scale(.55) rotate(calc(var(--rot) + 60deg))}}
/* 클릭 파티클 */
.cp{position:fixed;pointer-events:none;z-index:118;transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 6px rgba(255,210,63,.9));animation:cpburst .65s cubic-bezier(.2,.8,.3,1) forwards}
.cp svg{width:100%;height:100%;display:block}
@keyframes cpburst{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15) rotate(130deg)}}
/* 호버 시 커서 애니메이션 */
@keyframes curwob{
  0%{transform:translate(11px,11px) scale(1.04) rotate(-9deg)}
  100%{transform:translate(11px,11px) scale(1.13) rotate(7deg)}}
.xclose{position:fixed;top:clamp(74px,9vh,96px);right:clamp(16px,4vw,60px);z-index:72;
  display:none;font-family:var(--pre);font-weight:700;font-size:14px;letter-spacing:-.01em;
  cursor:none;background:rgba(11,15,22,.62);backdrop-filter:blur(10px);
  border:2px solid rgba(244,241,233,.45);border-radius:100px;color:var(--paper);
  padding:10px 20px;transition:var(--t-fast) var(--ease)}
.xclose.on{display:block}
.xclose:hover{border-color:var(--neon);color:var(--neon);box-shadow:0 0 22px rgba(198,255,61,.5)}
#evclose:hover{border-color:#FFD23F;color:#FFD23F;box-shadow:0 0 22px rgba(255,210,63,.5)}
#fclose:hover{border-color:#FF9E2C;color:#FF9E2C;box-shadow:0 0 22px rgba(255,158,44,.5)}
#grclose:hover{border-color:#3EC8FF;color:#3EC8FF;box-shadow:0 0 22px rgba(62,200,255,.5)}
/* 진입 선택 (스플래시) */

/* 좁은 화면에서는 고정 닫기 버튼이 카드 헤더 위로 겹친다 */
@media (max-width:860px){
  #fcard .head{padding-right:92px}
  #grcard .head,#dlcard .head{padding-right:92px}
}