/* ======================================================================
   게임 입장 화면 아케이드 스킨 (게임 10종 공용)
   허브 메인(arcade.css)과 같은 --ar-* 색을 써서 두 화면이 이어져 보이게 한다.

     <link rel="stylesheet" href="/pixel.css?v=202609021322">
     <link rel="stylesheet" href="/pixel-skin.css?v=202609021322">
     <link rel="stylesheet" href="/lobby-arcade.css?v=202609021322">   ← 맨 마지막

   pixel-skin 과 각 게임 <style> 이 앞에 오므로, 겹치는 곳은 !important 로 이긴다.
   광고 자리(.side-ad · .ad-slot · #adBottom)는 건드리지 않는다 — 애드센스가
   자기 규격대로 채우는 영역이라 바깥에서 색·크기를 바꾸면 안 된다.
   ====================================================================== */

body { background-color: var(--ar-night) !important; }

.app-shell {
  background: var(--ar-panel) !important;
  border: 3px solid var(--ar-ink) !important;
  box-shadow: 6px 6px 0 0 var(--ar-ink) !important;
}
.app-header {
  background: var(--ar-deep) !important;
  border-bottom: 3px solid var(--ar-ink) !important;
}
.app-header .logo { color: var(--px-cream); text-shadow: 2px 2px 0 var(--px-ink); }

/* 머리줄 단추 — 허브 머리줄과 같은 틀 */
.back-link, .app-header button, .header-actions button, .tab-btn {
  background: #3A2158 !important;
  border: 2px solid var(--px-ink) !important;
  box-shadow: 0 3px 0 0 var(--ar-ink);
  color: var(--px-cream) !important;
}
.back-link:hover, .app-header button:hover, .header-actions button:hover {
  background: #4C2C72 !important; color: var(--px-white) !important;
}
.back-link:active, .app-header button:active, .header-actions button:active {
  transform: translateY(3px); box-shadow: none;
}

/* ── 입장 화면 ────────────────────────────────────────────────────────
   방 목록을 걷어내고 「방 만들기 / 빠른 입장」 두 갈래만 남긴 화면. */
.enter-area {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 24px 16px;
}
.enter-panel {
  position: relative;
  width: min(460px, 100%);
  background: var(--ar-deep);
  border: 3px solid var(--px-ink);
  box-shadow: 6px 6px 0 0 var(--ar-ink);
  padding: 30px 26px 24px;
  text-align: center;
}
/* 허브 간판과 같은 전구 테두리 — 네 변에 반복 무늬를 한 겹씩 */
.enter-panel::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background-repeat: no-repeat;
  background-position: top left, bottom left, left top, right top;
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-image:
    repeating-linear-gradient(90deg, var(--ar-bulb) 0 5px, transparent 5px 16px),
    repeating-linear-gradient(90deg, var(--ar-bulb) 0 5px, transparent 5px 16px),
    repeating-linear-gradient(180deg, var(--ar-bulb) 0 5px, transparent 5px 16px),
    repeating-linear-gradient(180deg, var(--ar-bulb) 0 5px, transparent 5px 16px);
  animation: arBulb 1.4s steps(1, end) infinite;
}
@keyframes arBulb { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .enter-panel::before { animation: none } }

.enter-icon {
  width: 64px; height: 64px; image-rendering: pixelated;
  filter: drop-shadow(3px 3px 0 rgba(13,8,24,.55));
  margin-bottom: 8px;
}
.enter-title {
  font-size: 20px; font-weight: 700; color: var(--ar-bulb);
  text-shadow: 2px 2px 0 var(--px-ink); margin-bottom: 6px;
}
.enter-sub { font-size: 12px; color: var(--px-shade); line-height: 1.6; margin-bottom: 18px; }

.enter-actions { display: flex; flex-direction: column; gap: 10px; }
.enter-btn {
  width: 100%; padding: 13px 16px;
  border: 2px solid var(--px-ink); border-radius: 0;
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
}
.enter-btn.make  { background: var(--ar-red);   box-shadow: 0 4px 0 0 var(--ar-red-lo); }
.enter-btn.quick { background: var(--ar-green); box-shadow: 0 4px 0 0 var(--ar-green-lo); }
.enter-btn.make:hover  { background: #EE5A48; }
.enter-btn.quick:hover { background: #3CC46C; }
.enter-btn:active { transform: translateY(4px); box-shadow: none !important; }
.enter-note { font-size: 11px; color: var(--px-shade); margin-top: 14px; }

/* ── 방 만들기 창의 공개/비공개 고르개 ───────────────────────────────── */
.vis-seg { display: flex; gap: 0; margin-top: 12px; }
.vis-seg button {
  flex: 1; padding: 10px 8px;
  background: var(--px-bg2); color: var(--px-shade);
  border: 2px solid var(--px-ink); border-radius: 0;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.vis-seg button + button { border-left-width: 0; }
.vis-seg button.on { background: var(--ar-blue); color: #fff; }
.vis-hint {
  font-size: 11px; color: var(--px-shade); line-height: 1.6;
  margin-top: 7px; min-height: 30px;
}

/* ── 방 만들기 창 ────────────────────────────────────────────────────
   창 상자는 게임마다 인라인 style 로 색이 박혀 있다(윷놀이는 #createRoomModal
   바로 밑 div, 나머지는 .modal-box). 인라인은 !important 로만 이긴다. */
#createRoomModal > div, .modal .modal-box {
  background: var(--px-bg1) !important;
  border: 3px solid var(--px-ink) !important;
  box-shadow: 6px 6px 0 0 var(--ar-ink) !important;
}
#createRoomModal input[type="text"], #createRoomModal input:not([type]),
.modal .modal-box input[type="text"], .modal .modal-box input:not([type]) {
  background: var(--px-bg2) !important;
  border: 2px solid var(--px-ink) !important;
  color: var(--px-cream) !important;
}
#createRoomConfirm, #createConfirm, .modal .btn.primary {
  background: var(--ar-red) !important; color: #fff !important;
  border: 2px solid var(--px-ink) !important;
  box-shadow: 0 4px 0 0 var(--ar-red-lo) !important;
}
#createRoomCancel, #createCancel {
  background: var(--px-bg2) !important; color: var(--px-cream) !important;
  border: 2px solid var(--px-ink) !important;
  box-shadow: 0 4px 0 0 var(--ar-ink) !important;
}
#createRoomConfirm:active, #createConfirm:active,
#createRoomCancel:active, #createCancel:active {
  transform: translateY(4px); box-shadow: none !important;
}

/* 대기실 제목 옆 공개 범위 표시 */
.vis-badge {
  display: inline-block; padding: 4px 10px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--ar-blue); border: 2px solid var(--px-ink);
}
.vis-badge.private { background: var(--ar-deep); color: var(--ar-bulb); }

/* ── 아래 줄: 내 정보 + 로비 채팅 ────────────────────────────────────── */
.my-info-card, .chat-box {
  background: var(--px-bg1) !important;
  border: 2px solid var(--px-ink) !important;
  box-shadow: 4px 4px 0 0 var(--ar-ink) !important;
}
.online-pill, .count-badge {
  background: var(--ar-deep) !important;
  border: 2px solid var(--px-ink) !important;
  color: var(--px-cream) !important;
}
.chat-input-row input { background: var(--px-bg2) !important; border: 2px solid var(--px-ink) !important; }
.chat-input-row button {
  background: var(--ar-blue) !important; color: #fff !important;
  border: 2px solid var(--px-ink) !important; box-shadow: 0 3px 0 0 var(--ar-ink);
}
.chat-input-row button:active { transform: translateY(3px); box-shadow: none; }

@media (max-width: 640px) {
  .enter-area { padding: 16px 10px; }
  .enter-panel { padding: 22px 14px 18px; border-width: 2px; }
  .enter-panel::before { inset: 5px; background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%; }
  .enter-icon { width: 48px; height: 48px; }
  .enter-title { font-size: 17px; }
}