/* v618 — 화면을 켜면 「오프닝(시작 연출)만」 먼저 보입니다.
   준비가 끝나기 전에는 본문을 숨겨서, 예전 버튼 배열·입장 화면이 잠깐 깜빡이며 보이던 것을 막습니다.
   (준비가 끝나면 pmb-ui.js 가 body 에 pmbReady 를 붙입니다 · 어떤 경우에도 3.5초 뒤에는 풀립니다) */
html.pmbBoot body:not(.pmbReady) > *:not(#pmbIntro):not(#pmbBootCover):not(script):not(style){visibility:hidden !important}
html.pmbBoot body:not(.pmbReady){background:#070B1C !important}
/* =========================================================
   모두의 PLAY AI — 네온 아케이드 스킨 (pmb-neon.css)
   v560 · 1단계

   지금 색·구조는 그대로 두고 그 위에 네온 톤만 덧입힙니다.
   · 어두운 남색 바탕 + 형광 청록(#22D3EE) · 형광 핑크(#FF4B8D)
   · 밝은 「종이」 테마에서는 적용되지 않습니다 (인쇄·밝은 회의실용)
   되돌리려면 각 화면의 pmb-neon.css 한 줄만 지우면 됩니다.
   ========================================================= */

:root{
  --neon-cy:#22D3EE;          /* 형광 청록 — 기본 포인트 */
  --neon-pk:#FF4B8D;          /* 형광 핑크 — 강조·시작 */
  --neon-vi:#8B5CF6;          /* 보라 — 보조 */
  --neon-line:rgba(34,211,238,.45);
  --neon-glow-cy:0 0 18px rgba(34,211,238,.45);
  --neon-glow-pk:0 0 20px rgba(255,75,141,.45);
}

/* ── 바탕 ──
   v581: 게임마다 자기 배경 연출이 있어서, 그 위에 네온 격자·번짐을 덮으니
   색이 흐려 보였습니다. 바탕 덧칠은 껐습니다.
   (다시 보고 싶으면 body 에 class="pmb-neon-bg" 를 주면 켜집니다) */
body.pmb-neon-bg #bg::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), rgba(34,211,238,.10) calc(100% - 1px)) 0 0/100% 72px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(34,211,238,.08) calc(100% - 1px)) 0 0/72px 100%;
  mask-image:linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
body.pmb-neon-bg #stage::after{
  content:''; position:fixed; left:50%; bottom:-22vh; width:120vw; height:46vh;
  transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(60% 100% at 50% 100%, rgba(139,92,246,.26), rgba(34,211,238,.12) 45%, transparent 72%);
}

/* ── 상단 브랜드 ── */
body:not([data-theme="paper"]) #brand .t{
  text-shadow:0 0 14px rgba(34,211,238,.35);
}
body:not([data-theme="paper"]) #brand .logo{
  box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 0 2px rgba(34,211,238,.35), var(--neon-glow-cy);
}
body:not([data-theme="paper"]) #count{
  border-color:var(--neon-line);
  box-shadow:inset 0 0 12px rgba(34,211,238,.12);
}

/* ── 아래 툴바 ── */
body:not([data-theme="paper"]) #bar{
  background:linear-gradient(180deg, rgba(10,16,34,.86), rgba(6,10,24,.92));
  border:1px solid var(--neon-line);
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(34,211,238,.18), 0 0 26px rgba(34,211,238,.10);
}
body:not([data-theme="paper"]) #bar > button,
body:not([data-theme="paper"]) #bar .tbtn,
body:not([data-theme="paper"]) #bar > div > button{
  background:rgba(34,211,238,.10);
  border:1px solid rgba(34,211,238,.28) !important;
  color:#D9FBFF;
  transition:box-shadow .15s, background .15s, transform .12s;
}
body:not([data-theme="paper"]) #bar > button:hover,
body:not([data-theme="paper"]) #bar .tbtn:hover,
body:not([data-theme="paper"]) #bar > div > button:hover{
  background:rgba(34,211,238,.20);
  box-shadow:var(--neon-glow-cy);
  transform:translateY(-1px);
}
/* 시작 계열은 핑크 */
body:not([data-theme="paper"]) #bar #bStart,
body:not([data-theme="paper"]) #bar #bGo,
body:not([data-theme="paper"]) #bar .go{
  background:linear-gradient(180deg, #FF6FA5, #FF2E78) !important;
  border-color:rgba(255,75,141,.6) !important;
  color:#2A0713 !important;
  box-shadow:var(--neon-glow-pk);
}
body:not([data-theme="paper"]) #bar .warn,
body:not([data-theme="paper"]) #bar #bWipe{
  background:rgba(255,75,141,.14); border-color:rgba(255,75,141,.42) !important; color:#FFD7E6;
}

/* ── 드롭다운·설정 패널 ── */
body:not([data-theme="paper"]) #bMoreMenu,
body:not([data-theme="paper"]) #soundMenu,
body:not([data-theme="paper"]) #panel,
body:not([data-theme="paper"]) #setModal .box,
body:not([data-theme="paper"]) .pmbui-box{
  border:1px solid var(--neon-line) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 30px rgba(34,211,238,.10) !important;
}

/* ── QR 패널 — 네온 테두리 ── */
body:not([data-theme="paper"]) #qrPanel{
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 2px rgba(34,211,238,.35), 0 0 26px rgba(34,211,238,.25);
}
body:not([data-theme="paper"]) #qrPanel .code b{ color:#0E7490; }

/* ── 순위·카드 줄 ── */
body:not([data-theme="paper"]) .rk,
body:not([data-theme="paper"]) .tmr{
  border-color:rgba(34,211,238,.18);
  box-shadow:inset 0 0 14px rgba(34,211,238,.06);
}
body:not([data-theme="paper"]) .rk.m1,
body:not([data-theme="paper"]) .tmr.m1{
  box-shadow:inset 0 0 18px rgba(255,206,46,.14), 0 0 22px rgba(255,206,46,.16);
}

/* ── 큰 숫자·카운트다운 ── */
body:not([data-theme="paper"]) #ovBig,
body:not([data-theme="paper"]) .bigNum,
body:not([data-theme="paper"]) #go{
  text-shadow:0 0 18px rgba(34,211,238,.55), 0 0 44px rgba(255,75,141,.35);
}

/* ── 참가자 폰 — 큰 버튼 ── */
body:not([data-theme="paper"]) .btn,
body:not([data-theme="paper"]) .jGo{
  box-shadow:0 8px 0 rgba(0,0,0,.28), var(--neon-glow-cy);
}

/* 움직임을 줄이는 설정을 켠 기기에서는 번쩍임을 뺍니다 */
@media (prefers-reduced-motion: reduce){
  body #bar > button, body #bar .tbtn{ transition:none }
}

/* =========================================================
   참가자 폰 화면 — v561에서 더 또렷하게
   (큰 화면과 달리 #bar·#qrPanel 이 없어서 따로 잡아 줍니다)
   ========================================================= */

/* 화면 전체에 아주 옅은 네온 격자 — 글자를 가리지 않는 세기 */
html:not([data-theme="paper"])::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:2147483000; opacity:.05;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), #22D3EE calc(100% - 1px)) 0 0/100% 64px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), #22D3EE calc(100% - 1px)) 0 0/64px 100%;
}

/* 큰 액션 버튼 (참여하기 · PICK · 시작 등) */
body:not([data-theme="paper"]) .btn,
body:not([data-theme="paper"]) .jGo,
body:not([data-theme="paper"]) button.big,
body:not([data-theme="paper"]) button.go{
  border:1px solid rgba(34,211,238,.5);
  box-shadow:0 8px 0 rgba(0,0,0,.3), 0 0 22px rgba(34,211,238,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
body:not([data-theme="paper"]) .btn:active,
body:not([data-theme="paper"]) .jGo:active{ box-shadow:0 3px 0 rgba(0,0,0,.3), 0 0 26px rgba(255,75,141,.5); }

/* 입력칸 */
body:not([data-theme="paper"]) input[type="text"],
body:not([data-theme="paper"]) input:not([type]),
body:not([data-theme="paper"]) textarea{
  border-color:rgba(34,211,238,.35);
}
body:not([data-theme="paper"]) input[type="text"]:focus,
body:not([data-theme="paper"]) input:not([type]):focus,
body:not([data-theme="paper"]) textarea:focus{
  outline:none; border-color:#22D3EE; box-shadow:0 0 0 3px rgba(34,211,238,.18), 0 0 18px rgba(34,211,238,.25);
}

/* 폰 상단 줄 */
body:not([data-theme="paper"]) .top{
  border-bottom:1px solid rgba(34,211,238,.22);
}

/* 채팅 버튼 · 팀 칩과 어울리게 */
body:not([data-theme="paper"]) #pmbChatFab{
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 20px rgba(255,206,46,.45);
}

/* =========================================================
   v562 — 참가자 폰: 맨 위 줄(탭)을 모든 프로그램에서 똑같이 화면 위에 고정
   ========================================================= */
html[data-pmb-phone] body:not([data-theme="paper"]) > header,
html[data-pmb-phone] body:not([data-theme="paper"]) .screen > header,
html[data-pmb-phone] body:not([data-theme="paper"]) .screen > .top{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(8,12,24,.94), rgba(8,12,24,.86));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(34,211,238,.22);
  padding-top:calc(6px + env(safe-area-inset-top));
}
/* 헤더 안의 팀 칩·채팅 버튼이 줄바꿈되어도 겹치지 않게 */
html[data-pmb-phone] body header, html[data-pmb-phone] body .top{ row-gap:6px }

/* v563 — 폰 탭을 더 낮게 (한 화면에 들어가도록) */
html[data-pmb-phone] body:not([data-theme="paper"]) > header,
html[data-pmb-phone] body:not([data-theme="paper"]) .screen > header,
html[data-pmb-phone] body:not([data-theme="paper"]) .screen > .top{
  padding-top:calc(4px + env(safe-area-inset-top));
  padding-bottom:4px;
}
html[data-pmb-phone] body header .s, html[data-pmb-phone] body .top .s{ font-size:10.5px }

/* v569 — 폰 탭: 한 줄 고정. 이름은 그대로, 버튼만 작아집니다 */
html[data-pmb-phone] body header .t, html[data-pmb-phone] body .top .t{ flex:0 0 auto; white-space:nowrap }
html[data-pmb-phone] body header, html[data-pmb-phone] body .top{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
html[data-pmb-phone] body header::-webkit-scrollbar, html[data-pmb-phone] body .top::-webkit-scrollbar{ display:none }
html[data-pmb-phone] body header > *, html[data-pmb-phone] body .top > *{ flex:0 0 auto }
@media (max-width:460px){
  html[data-pmb-phone] body header, html[data-pmb-phone] body .top{ gap:5px; padding-left:9px; padding-right:9px }
  html[data-pmb-phone] body header .s, html[data-pmb-phone] body .top .s{ display:none }
  html[data-pmb-phone] body header .t, html[data-pmb-phone] body .top .t{ font-size:14px }
  html[data-pmb-phone] body header button, html[data-pmb-phone] body .top button, html[data-pmb-phone] body header a, html[data-pmb-phone] body .top a{ font-size:10.5px; padding:5px 7px }
}

/* =========================================================
   v570 — 네온 아케이드 2단계: 시상대·순위판
   ========================================================= */
body:not([data-theme="paper"]) #pmbPodium{
  background:radial-gradient(120% 90% at 50% 10%, rgba(22,32,70,.95), rgba(4,6,14,.98));
}
body:not([data-theme="paper"]) #pmbPodium .ttl{
  text-shadow:0 0 30px rgba(255,206,46,.55), 0 0 70px rgba(34,211,238,.28);
}
body:not([data-theme="paper"]) #pmbPodium .s1 .box{
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4), 0 -8px 34px rgba(255,206,46,.35), 0 0 40px rgba(255,206,46,.2);
}
body:not([data-theme="paper"]) #pmbPodium .s2 .box{
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35), 0 -8px 28px rgba(34,211,238,.22);
}
body:not([data-theme="paper"]) #pmbPodium .s3 .box{
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3), 0 -8px 26px rgba(255,75,141,.22);
}
body:not([data-theme="paper"]) #pmbPodium .rest span{
  border-color:rgba(34,211,238,.28); box-shadow:inset 0 0 14px rgba(34,211,238,.08);
}
/* 순위 보드(🏆 순위) */
body:not([data-theme="paper"]) #pmbRank .glass{
  border-color:rgba(34,211,238,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(34,211,238,.28), 0 0 40px rgba(34,211,238,.12);
}
body:not([data-theme="paper"]) #pmbRank .row{ border-color:rgba(34,211,238,.16) }
body:not([data-theme="paper"]) #pmbRank .pts{ text-shadow:0 0 16px rgba(255,206,46,.6) }


/* v575 — 스크롤 안전장치: 스킨 때문에 페이지가 잠기지 않도록 */
html, body{ overflow-y:auto }
html:not([data-pmb-phone]) header{ position:static; overflow:visible }
