/* =========================================================
   51. 씬 화면 모바일 UI
   ========================================================= */
/* 이벤트 카운터: 데스크탑은 한 줄 유지 */
#evbtn .s .c{display:inline-flex;align-items:center;gap:5px}
#evbtn .s{gap:8px}

/* 햄버거 (데스크탑에서는 숨김) */
#navburger{display:none;flex-direction:column;justify-content:center;gap:4.5px;
  width:40px;height:40px;padding:0 9px;margin-left:auto;flex:0 0 auto;
  border:0;background:transparent;border-radius:11px;cursor:none;
  transition:background .3s var(--ease)}
#navburger span{display:block;height:2px;border-radius:2px;background:var(--paper);
  box-shadow:0 1px 6px rgba(0,0,0,.6);
  transition:transform .32s var(--ease),opacity .22s var(--ease)}
#navrow.open #navburger{background:rgba(198,255,61,.14)}
#navrow.open #navburger span{background:var(--neon)}
#navrow.open #navburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#navrow.open #navburger span:nth-child(2){opacity:0}
#navrow.open #navburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* 데스크탑에서는 래퍼가 없는 것처럼 동작 */
#navmenu{display:contents}

@media (max-width:860px){
  /* ---- 상단바: 로고 + 햄버거 ---- */
  #navrow{position:relative;justify-content:space-between}
  #navburger{display:flex}
  #navmenu{display:block;position:absolute;top:calc(100% + 10px);right:0;
    width:min(260px,72vw);padding:8px;border-radius:16px;
    background:rgba(11,15,22,.94);border:1px solid rgba(244,241,233,.22);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 24px 48px -22px rgba(0,0,0,.8);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .26s var(--ease),transform .28s var(--ease),visibility .28s}
  #navrow.open #navmenu{opacity:1;visibility:visible;transform:none}
  #navmenu .feats{display:flex;flex-direction:column;align-items:stretch;gap:0}
  #navmenu .feats a,#navmenu .ghostlink{display:block;margin:0;padding:11px 12px;
    font-size:14px;text-align:left;border-radius:9px;opacity:.9}
  #navmenu .feats a.on::after{display:none}
  #navmenu .feats a.on{background:rgba(198,255,61,.14)}
  #navmenu .navend{display:flex;flex-direction:column;align-items:stretch;gap:6px;
    padding:8px 0 0;margin-top:8px;border-top:1px solid rgba(244,241,233,.16)}
  /* 앱 다운로드는 메뉴 안에서 강조 버튼으로 */
  #navmenu .cta{display:block;text-align:center;padding:12px 14px;font-size:14px;
    border-radius:11px;box-shadow:none}

  /* ---- 씬 HUD: 상단 우측 세로 배치 ---- */
  #hud{top:calc(72px + env(safe-area-inset-top));right:12px;
    flex-direction:column;align-items:stretch;gap:7px}
  #apcount,#evbtn{flex-direction:column;align-items:flex-start;gap:2px;
    padding:9px 12px;font-size:12.5px;line-height:1.35}
  #evbtn .s{flex-direction:column;align-items:flex-start;gap:1px}
  #apcount .s,#evbtn .s{font-size:13px}
  #back{top:calc(72px + env(safe-area-inset-top));left:12px;
    padding:9px 13px;font-size:12.5px}
  /* 키보드 단축키 안내는 터치 기기에서 의미가 없다 */
  #tip{display:none}
  #where{left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media (max-width:375px){
  #hud{right:10px}
  #apcount,#evbtn{padding:8px 10px;font-size:11.5px}
  #back{left:10px;padding:8px 11px;font-size:11.5px}
}
