/* =========================================================
   가이스터 (Geister) — 스타일 (어두운 강령술 톤, board_bg 배경)
   팔레트/타이포는 :root에서 제어(아래). 색 바꾸려면 :root 5색만 수정.
   ⚠️ 아직 방향 베이스라인 — 디테일(여백·카드 장식·로고·일러스트)은 다듬을 여지 있음.
   ========================================================= */
:root{
  /* 팔레트 — "빛바랜 양피지"(빈티지 지도 A·소프트). 이 5색 + paper/ink만 바꾸면 전체 반영 */
  --red:#B06A52; --yellow:#C2A05E; --blue:#6E94A6; --green:#7D9070; --purple:#8C7A92;
  --paper:#EFE7D2; --ink:#5B5240; --line:rgba(80,60,30,0.13);
  --gold:rgba(176,142,74,0.55);  /* 카드 금박 악센트(다크골드) — 럭셔리 디테일 */
  /* 타이포 — 라틴·숫자=IM Fell Double Pica(고풍·음산한 고서체), 한글=고운바탕 폴백.
     IM Fell은 한글 글리프가 없어 한글은 자동으로 Gowun Batang으로 떨어진다. */
  --font-display:'IM Fell Double Pica','Gowun Batang',serif;
  --font-serif:'Gowun Batang',serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{overflow-x:hidden;}
body{
  margin:0; background:#15100a; color:var(--ink);
  font-family:var(--font-serif),'Pretendard Variable',Pretendard,system-ui,sans-serif;
  display:flex; justify-content:center; min-height:100vh; min-height:100dvh;
}

/* ── 첫 로딩 화면 (푸른 어둠). spectre에 혼이 차오름. html.fonts-ready 가 붙으면 페이드아웃 ── */
#loading{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%, #0f1820 0%, #0a0e14 65%, #06080b 100%);
  transition:opacity .8s ease;
}
html.fonts-ready #loading{ opacity:0; pointer-events:none; }
#loading .lc-boot{ text-align:center; padding:0 24px; }
#loading .gst-spectre-load{ display:block; margin:0 auto 22px; filter:drop-shadow(0 0 22px rgba(110,148,166,.35)); }
#loading .lc-boot-sub{
  font-family:var(--font-serif); font-size:.8rem; letter-spacing:.3em;
  color:rgba(167,205,224,.85); animation:lc-boot-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-boot-pulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* ── 화면 전환 ── */
.screen{display:none;}
.screen.active{display:flex; flex-direction:column; align-items:center; width:100%; background:var(--paper); min-height:100dvh; position:relative; z-index:1;}
#app{width:100%; max-width:430px; min-height:100vh; min-height:100dvh; position:relative; background:transparent;}
/* 데스크탑: 게임 화면만 적당히 넓혀 중앙 정렬 (로비/입구는 폰 폭 유지) — davinci 방식 */
@media (min-width: 768px){
  #app.on-game{ max-width: 640px; }
  #app.on-game .gst-board{ width:min(88vw, calc(100dvh - 250px), 580px); }   /* 태블릿: 보드 확대 (#app.on-game로 specificity↑ → 뒤 기본정의에 안 덮임) */
}
@media (min-width: 1100px){
  #app.on-game{ max-width: 740px; }
  #app.on-game .gst-board{ width:min(82vw, calc(100dvh - 280px), 680px); }
}

/* ════ 입구 화면(로그인·로비·대기) — 어두운 빈티지 무드 ════ */
/* 배경 사진은 #entry-bg 레이어가 담당 → 화면 자체는 투명 */
#auth.screen.active, #lobby.screen.active, #waiting.screen.active, #game.screen.active{ background:transparent; }

/* ── 배경 레이어: board_bg 사진 + 가독용 옅은 어둠막 (켄번스/먼지 효과는 걷어냄 — board_bg 선명하게) ── */
/* 배경 사진은 뷰포트 전체로 — #app 폭(데스크탑 제한)에 갇히지 않게 fixed */
#entry-bg{position:fixed; inset:0; z-index:0; overflow:hidden;}
/* 게임 중엔 보드 집중 위해 살짝만 더 가라앉힘 */
#app.on-game .eb-tint{background:linear-gradient(180deg, rgba(14,9,5,.30) 0%, rgba(12,8,4,.24) 45%, rgba(10,7,3,.44) 100%);}
.eb-dust{display:none;}                            /* 먼지 입자 끔 */
.eb-photo{position:absolute; inset:0; background:url('board_bg.webp?v=2') center/cover no-repeat;}  /* ?v=2: 옛 캐시(=lostcities 복제본) 무효화 */
.eb-tint{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,10,6,.26) 0%, rgba(15,10,6,.20) 45%, rgba(12,8,4,.52) 100%);}
.mote{position:absolute; border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(255,245,224,.95), rgba(255,238,205,0) 70%);
  animation:moteFloat linear infinite;}
@keyframes moteFloat{
  0%{transform:translate3d(0,0,0) scale(.7); opacity:0;}
  12%{opacity:var(--o,.4);}
  88%{opacity:var(--o,.4);}
  100%{transform:translate3d(var(--drift,0),-130px,0) scale(1.15); opacity:0;}
}
/* 멀미 방지: 모션 줄이기 설정이면 정지 */
@media (prefers-reduced-motion: reduce){ .eb-photo{animation:none;} .mote{display:none;} }
/* 로고·문구 → 크림 */
#auth .lc-logo, #lobby .lc-logo{ color:#F3E9D2; text-shadow:0 2px 20px rgba(0,0,0,.6); }
#auth .lc-sub, #lobby .lc-sub{ color:rgba(243,233,210,.72); }
#auth #auth-title{ color:rgba(243,233,210,.7)!important; }
/* 작은 고스트 버튼(텍스트) → 크림 */
#auth .lc-btn-ghost-sm, #lobby .lc-btn-ghost-sm, #waiting .lc-btn-ghost-sm{ color:rgba(243,233,210,.62); }
#auth .lc-btn-ghost-sm:hover, #lobby .lc-btn-ghost-sm:hover, #waiting .lc-btn-ghost-sm:hover{ color:rgba(243,233,210,.95); }
/* 입력칸 → 프로스트 다크 */
#auth .lc-input, #lobby .lc-input{ background:rgba(18,12,8,.5); border-color:rgba(243,233,210,.22); color:#F3E9D2; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
#auth .lc-input::placeholder, #lobby .lc-input::placeholder{ color:rgba(243,233,210,.42); }
#auth .lc-input:focus, #lobby .lc-input:focus{ border-color:rgba(243,233,210,.6); }
/* 로비 탭 */
#lobby .lc-tab{ color:rgba(243,233,210,.5); }
#lobby .lc-tab.active{ color:#F3E9D2; border-bottom-color:#F3E9D2; }
/* 대기실 카드 → 프로스트 다크 */
#waiting .lc-roomcode{ background:rgba(18,12,8,.5); border-color:rgba(243,233,210,.22); color:#F3E9D2; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
#waiting .lc-player-row{ background:rgba(18,12,8,.45); border-color:rgba(243,233,210,.18); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
#waiting .lc-player-row .pname{ color:#F3E9D2; }
#auth .lc-btn-ghost, #lobby .lc-btn-ghost, #waiting .lc-btn-ghost{ background:rgba(18,12,8,.4); border-color:rgba(243,233,210,.25); color:#F3E9D2; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

/* ── 로고/문구 ── */
.lc-logo{font-family:var(--font-display); font-size:2.6rem; color:var(--ink); letter-spacing:-.01em; text-align:center;}
.lc-logo-lg{font-size:3.2rem;}
/* 가이스터 영문 타이틀 — IM Fell Double Pica 정자체·대문자(썸네일 톤과 통일), 밝은 잿빛 + 은은한 발광 */
.gst-title{font-family:'IM Fell Double Pica','Gowun Batang',serif; font-style:normal;
  text-transform:uppercase; color:#ECE4D6; letter-spacing:.04em; font-size:3.3rem;
  text-shadow:0 2px 24px rgba(0,0,0,.6), 0 0 40px rgba(150,170,200,.18);}
.gst-title.lc-logo-lg{font-size:3.8rem;}
.lc-sub{margin-top:.5rem; font-size:.72rem; letter-spacing:.25em; color:rgba(58,52,44,.45); text-transform:uppercase;}

/* ── 입력/버튼 ── */
.lc-input{
  width:100%; padding:.8rem 1rem; border-radius:.6rem; background:#fff;
  border:1.5px solid var(--line); color:var(--ink); text-align:center; font-size:1rem;
  transition:border-color .15s;
}
.lc-input::placeholder{color:rgba(58,52,44,.35);}
.lc-input:focus{outline:none; border-color:var(--blue);}
.lc-input-code{letter-spacing:.5em; text-indent:.5em; font-family:var(--font-display); text-transform:uppercase;}

.lc-btn{
  width:100%; padding:.85rem 1rem; border-radius:.6rem; border:none; cursor:pointer;
  background:#5E8CA6; color:#fff; font-weight:600; font-size:.95rem; letter-spacing:.02em;   /* 가이스터 블루 톤 */
  box-shadow:0 4px 14px rgba(94,140,166,.35); transition:transform .1s, box-shadow .15s, opacity .15s;
}
.lc-btn:hover:not(:disabled){background:#6E9BB5;}
.lc-btn:active{transform:scale(.98);}
.lc-btn:disabled{opacity:.4; box-shadow:none; cursor:default;}
.lc-btn-ghost{
  width:100%; padding:.8rem 1rem; border-radius:.6rem; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); color:var(--ink); font-weight:600; font-size:.9rem;
  transition:transform .1s, border-color .15s;
}
.lc-btn-ghost:active{transform:scale(.98);}
.lc-btn-ghost-sm{
  width:100%; padding:.5rem; background:none; border:none; cursor:pointer;
  color:rgba(58,52,44,.45); font-size:.78rem; letter-spacing:.06em; transition:color .15s;
}
.lc-btn-ghost-sm:hover{color:rgba(58,52,44,.75);}

/* AI 대국 버튼/난이도 — 밝은 나무 배경 위에서도 또렷하게(반투명 다크 + 테두리 + blur) */
.lc-btn-ai, .lc-ai-level{
  padding:.6rem .5rem; border-radius:.6rem; cursor:pointer;
  background:rgba(18,12,8,.55); border:1.5px solid rgba(243,233,210,.3);
  color:#F3E9D2; font-size:.85rem; font-weight:600; letter-spacing:.04em;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .15s, border-color .15s;
}
.lc-btn-ai{ width:100%; }
.lc-btn-ai:hover, .lc-ai-level:hover{ background:rgba(18,12,8,.72); border-color:rgba(243,233,210,.55); }
.lc-ai-level:active{ transform:scale(.98); }
/* 난이도(중급/고급)를 'AI와 대국' 버튼 바로 아래로 당김 (부모 gap-3 일부 상쇄) */
#ai-difficulty{ margin-top:-.35rem; }
.lc-btn-danger{
  background:#fff; border:1.5px solid var(--red); color:var(--red);
  font-weight:600; cursor:pointer; transition:background .15s;
}
.lc-btn-danger:active{background:rgba(176,106,82,.1);}

/* ── 로비 탭 ── */
.lc-tab{
  flex:1; padding:.75rem; font-size:.85rem; letter-spacing:.04em; cursor:pointer;
  background:none; border:none; color:rgba(58,52,44,.4); margin-bottom:-1px; transition:color .15s;
}
.lc-tab.active{color:var(--ink); border-bottom:2px solid var(--ink); font-weight:600;}

/* ── 메뉴 ── */
.lc-menu-btn{
  width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22);
  color:rgba(243,233,210,.6); display:flex; align-items:center; justify-content:center; font-size:1.05rem; cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.lc-menu{min-width:160px; overflow:hidden; background:#fff; border:1.5px solid var(--line); border-radius:.6rem; box-shadow:0 8px 30px rgba(0,0,0,.15); position:absolute; top:3rem; right:0;}
.lc-menu-row{display:block; width:100%; padding:.75rem 1rem; font-size:.85rem; color:rgba(58,52,44,.8); background:none; border:none; cursor:pointer; text-align:center;}
.lc-menu-row:hover{background:rgba(0,0,0,.04);}
.lc-menu-row.danger{color:var(--red);}

/* ── 대기실 ── */
.lc-roomcode{
  font-family:var(--font-display); font-size:2.6rem; letter-spacing:.3em; text-indent:.3em; color:var(--ink); text-align:center;
  padding:1.3rem 1rem; background:#fff; border:1.5px solid var(--line); border-radius:.7rem;
}
.lc-player-row{display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:#fff; border:1.5px solid var(--line); border-radius:.6rem;}
.lc-player-row .dot{width:.6rem; height:.6rem; border-radius:50%; flex:0 0 auto;}
.lc-player-row .dot.on{background:var(--green); box-shadow:0 0 6px rgba(31,174,119,.5);}
.lc-player-row .dot.off{background:#c0392b;}
.lc-player-row .dot.wait{background:#cbb; animation:pulse 1.4s infinite;}
.lc-player-row .pname{font-weight:600; color:var(--ink);}
.lc-player-row .me-tag{font-size:.65rem; color:#fff; background:var(--blue); padding:.05rem .35rem; border-radius:.3rem; margin-left:.2rem;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── 드로어(기록) ── */
.drawer{position:fixed; inset:0; z-index:70; pointer-events:none;}
.drawer.open{pointer-events:auto;}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s;}
.drawer.open .drawer-backdrop{opacity:1;}
/* 드로어 — 으스스한 블랙 톤 */
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:84%; max-width:340px; background:linear-gradient(160deg,#15171d,#0c0d11); box-shadow:-6px 0 40px rgba(0,0,0,.6); transform:translateX(100%); transition:transform .25s; display:flex; flex-direction:column; padding:16px 16px calc(16px + env(safe-area-inset-bottom));}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-size:18px; color:#ECE4D6; padding-bottom:10px; border-bottom:1px solid rgba(150,160,180,.18); margin-bottom:8px;}
.drawer-head button{background:none; border:none; font-size:18px; color:rgba(236,228,214,.5); cursor:pointer;}
.lc-log-line{padding:4px 6px; border-radius:6px; background:rgba(0,0,0,.02);}

/* ── 모달 ── */
.modal{display:none;}
.modal.show{display:flex;}
.lc-card-modal{background:var(--paper); border:1.5px solid var(--line); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25);}
/* 게임방법 모달 — 으스스한 블랙 톤 */
.gst-modal-dark{background:linear-gradient(160deg,#16181e,#0d0e12); border-color:rgba(150,160,180,.2); box-shadow:0 20px 60px rgba(0,0,0,.6);}
.gst-modal-dark .lc-help-h{color:#8FB8CC;}
/* 다크 모달 톤 — 인라인 색 텍스트를 밝게(인라인이라 !important), 버튼은 가이스터 스펙트럴 톤 */
.gst-modal-dark [style*="--ink"]{ color:#ECE4D6 !important; }
.gst-modal-dark [style*="58,52,44"]{ color:rgba(236,228,214,.6) !important; }
.gst-modal-dark .lc-btn{ background:#5E8CA6; color:#fff; box-shadow:0 4px 16px rgba(94,140,166,.4); }
.gst-modal-dark .lc-btn-ghost-sm{ color:rgba(236,228,214,.55); }
.gst-modal-dark .lc-btn-ghost-sm:hover{ color:rgba(236,228,214,.9); }
.gst-modal-dark .lc-btn-danger, #log-drawer .lc-btn-danger{ background:rgba(56,22,22,.55); border:1.5px solid rgba(200,96,84,.5); color:#E8A593; box-shadow:none; }
.gst-modal-dark .lc-btn-danger:active, #log-drawer .lc-btn-danger:active{ background:rgba(74,28,28,.65); }
.lc-help-h{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:.25rem; font-weight:600;}

/* ── 게임 방법 버튼 ── */
/* 좌상단 고정 버튼 — 게임 상단바 콘텐츠(아바타 38px, 위 12px 패딩)와 세로 중심 정렬:
   14px = 12px(상단바 패딩) + (38-34)/2(아바타-버튼 높이차 보정). safe-top은 노치 회피. */
/* 좌상단 전역 버튼(도움말·사운드) — 어두운 글래스 톤 (입구·게임 공통, 흰 동그라미가 어두운 배경에서 튐) */
.help-btn{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); z-index:60; width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22); color:rgba(243,233,210,.6); font-weight:700; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}

/* ── 사운드 ── */
.sound-control{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:calc(max(14px, env(safe-area-inset-left)) + 42px); z-index:60;}
/* 홈 버튼 — help·sound 옆(+84px), 같은 원형 톤. 게임 화면(on-game)에선 숨김 */
.lc-home-btn{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:calc(max(14px, env(safe-area-inset-left)) + 84px); z-index:60; width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22); color:rgba(243,233,210,.6); display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.lc-home-btn svg{width:18px; height:18px;}
#app.on-game .lc-home-btn{display:none;}
.mute-btn{width:34px; height:34px; border-radius:50%; background:rgba(18,12,8,.32); border:1.5px solid rgba(243,233,210,.22); color:rgba(243,233,210,.6); display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.mute-btn.muted{color:rgba(243,233,210,.4);}
.mute-btn svg{width:17px; height:17px;}
.mute-btn .mute-off{display:none;} .mute-btn.muted .mute-on{display:none;} .mute-btn.muted .mute-off{display:block;}
.sound-panel{position:absolute; top:42px; left:0; min-width:150px; background:#fff; border:1.5px solid var(--line); border-radius:.6rem; box-shadow:0 8px 30px rgba(0,0,0,.15); overflow:hidden; display:none;}
.sound-panel.open{display:block;}
.snd-row{display:flex; align-items:center; justify-content:space-between; width:100%; padding:.6rem .9rem; background:none; border:none; cursor:pointer;}
.snd-row+.snd-row{border-top:1px solid var(--line);}
.snd-label{font-size:.82rem; color:var(--ink);}
.snd-switch{width:34px; height:20px; border-radius:999px; background:#d8d2c4; position:relative; transition:background .15s;}
.snd-switch::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.snd-row.on .snd-switch{background:var(--green);}
.snd-row.on .snd-switch::after{transform:translateX(14px);}

/* ── 토스트 / 전환 / 턴 알림 ── */
.toast{transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; background:rgba(58,52,44,.92); color:#fff; max-width:80%;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* 전환 오버레이 — 게임 다크 톤과 맞는 암전. (이전: 밝은 --paper 라 눈부심) */
.transition-overlay{position:fixed; inset:0; z-index:90; background:#0d0905; opacity:0; pointer-events:none;}
.transition-overlay.fading-in{opacity:1; transition:opacity .28s;}
.transition-overlay.fading-out{opacity:0; transition:opacity .45s;}

/* 턴 알림 — 뷰포트 상단 절반 밴드(풀스크린 X). 아래로 페이드 → 손패·덱은 항상 탭 가능(입력 안 막음) */
.turn-announce{position:fixed; top:0; left:0; right:0; height:50vh; z-index:85; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(14,9,5,.9) 0%, rgba(14,9,5,.66) 50%, rgba(14,9,5,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 60%,transparent 100%);}
.turn-announce.show{animation:turn-announce-cycle 1.6s ease forwards;}   /* pointer-events 그대로 none → 탭 통과 */
/* 상대 차례 — 더 짧게(1s). 키프레임 %가 그대로 1s로 압축됨 */
.turn-announce.brief.show{animation-duration:1s;}
.turn-announce.brief.show .turn-announce-inner{animation-duration:1s;}
.turn-announce-inner{display:flex; flex-direction:column; align-items:center; gap:8px; transform:scale(.92);}
.turn-announce.show .turn-announce-inner{animation:turn-announce-scale 1.6s ease forwards;}
.turn-announce-sub{font-family:var(--font-display); font-style:italic; font-size:14px; letter-spacing:.34em; text-transform:lowercase; color:rgba(243,233,210,.45);}
.turn-announce-main{font-family:var(--font-display); font-weight:600; font-size:44px; letter-spacing:.04em; color:#F3E9D2; text-shadow:0 2px 20px rgba(0,0,0,.7);}
/* 상대(또는 솔로 P2) 차례 — 대비색(잉크빛 붉은 흙) */
.turn-announce.opp .turn-announce-main{color:#D89177; font-size:38px; text-shadow:0 0 24px rgba(176,106,82,.4), 0 2px 8px rgba(0,0,0,.7);}
.turn-announce.opp .turn-announce-sub{color:rgba(216,145,119,.5);}
@keyframes turn-announce-cycle{0%{opacity:0}25%{opacity:1}68%{opacity:1}100%{opacity:0}}
@keyframes turn-announce-scale{0%{transform:scale(.92)}25%{transform:scale(1)}68%{transform:scale(1)}100%{transform:scale(1.06)}}

/* ── 잡기 알림 오버레이 (유령 색 공개) — 상단 절반만(로스트시티식) ── */
.capture-announce{position:fixed; top:0; left:0; right:0; height:50vh; z-index:86;
  display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0;
  /* 상단을 어둡게 깔고 아래로 자연스럽게 사라지는 그라데이션(뒤 가독성 확보) */
  background:linear-gradient(180deg, rgba(8,6,10,.92) 0%, rgba(8,6,10,.82) 50%, rgba(8,6,10,0) 100%);}
.capture-announce.show{animation:turn-announce-cycle 2s ease forwards;}
.capture-inner{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:0 28px; transform:scale(.92); max-width:90vw;}
.capture-announce.show .capture-inner{animation:turn-announce-scale 2s ease forwards;}
.capture-main{font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.8); line-height:1.3; word-break:keep-all;}
/* 부연설명 — 프리텐다드, 자간 -0.04em */
.capture-sub{font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif; font-size:15px; letter-spacing:-0.04em;
  color:rgba(236,228,214,.85); text-shadow:0 2px 10px rgba(0,0,0,.8); line-height:1.45; word-break:keep-all;}
/* 파랑 유령 잡음 */
.capture-announce.blue .capture-main{color:#9CC2D6; text-shadow:0 0 28px rgba(110,148,166,.6), 0 2px 10px rgba(0,0,0,.8);}
/* 빨강 유령 잡음 */
.capture-announce.red .capture-main{color:#DD9A80; text-shadow:0 0 28px rgba(176,106,82,.6), 0 2px 10px rgba(0,0,0,.8);}
/* 위기 경고(빨강 2·1 남음) — 서브를 붉게 강조 */
.capture-announce.warn .capture-sub{color:#E8A98F; font-weight:700;}

/* ── 재접속 오버레이 ── */
#reconnect-overlay{position:fixed; inset:0; z-index:95; background:rgba(247,242,232,.96); display:none; align-items:center; justify-content:center;}
#reconnect-overlay.show{display:flex;}
.reconnect-inner{text-align:center; padding:30px;}
.reconnect-title{font-family:var(--font-display); font-size:1.5rem; color:var(--ink);}
.reconnect-sub{font-size:.9rem; color:rgba(58,52,44,.5); margin-top:8px;}
.reconnect-actions{display:none; flex-direction:column; gap:8px; margin-top:20px;}
.reconnect-actions.show{display:flex;}
.reconnect-actions button{padding:.7rem 1.4rem; border-radius:.6rem; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;}

/* ════════════ 오목 게임 화면 ════════════ */
.go-app{ position:relative; z-index:1; width:100%; min-height:100dvh; display:flex; flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); gap:10px; }
/* 좌상단 고정 버튼(도움말·볼륨, ~90px 폭)을 피해 상대정보를 오른쪽으로 — 겹침 방지 */
.go-topbar{ display:flex; align-items:center; gap:10px; padding-left:96px; padding-right:50px; }
/* 복기 버튼 — 좌측 도움말·볼륨처럼 화면 우측 끝에 고정(콘텐츠 컬럼에 안 갇히게) */
#btn-log-open{ position:fixed; top:calc(14px + env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); z-index:60; }
.go-topbar .lc-who{ flex:1; min-width:0; }
/* 헤더 상대정보·복기 버튼 (#5 정리 때 지워진 .lc-who .name/.role·.lc-icon-btn 복원) */
.lc-who .name{ font-weight:600; font-size:15px; color:#ECE4D6; text-shadow:0 1px 5px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-who .role{ font-size:11px; color:rgba(236,228,214,.62); letter-spacing:.04em; }
.lc-icon-btn{ width:34px; height:34px; border-radius:.5rem; background:rgba(18,22,30,.55); border:1px solid rgba(150,165,190,.3); color:rgba(236,228,214,.8); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.go-turnbanner{ text-align:center; font-size:.92rem; letter-spacing:.02em; min-height:1.4em;
  font-family:var(--font-serif); color:rgba(243,233,210,.8); }
.go-turnbanner.mine{ color:#F3E9D2; font-weight:700; }

.go-board-wrap{ flex:1; display:flex; align-items:center; justify-content:center; }
/* 보드 크기: 가로(94vw)·세로 가용공간·560px 중 가장 작은 값 → 모바일 세로화면에서도 꽉 차게.
   세로 가용 = 대략 100dvh − (상단바+턴배너+패딩 ≈ 150px). 정사각이라 width로만 잡으면 됨. */
/* ════ 가이스터 6×6 보드 ════ */
/* 으스스한 톤 — 차갑고 어두운 석판 느낌 */
.gst-board{ width:min(92vw, calc(100dvh - 220px), 460px); aspect-ratio:1;
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); gap:3px;
  padding:8px; border-radius:10px; background:linear-gradient(155deg,#1b1d24,#0d0e13);
  border:1px solid rgba(120,130,150,.22); box-shadow:0 12px 40px rgba(0,0,0,.7), inset 0 0 50px rgba(0,0,0,.6); }
.gst-cell{ position:relative; border-radius:6px; background:rgba(150,160,180,.04);
  border:1px solid rgba(150,160,180,.10); display:flex; align-items:center; justify-content:center; }
/* 출구 칸 — 내 출구(탈출 목표)는 창백한 푸른 빛, 상대 출구는 핏빛 */
.gst-cell.exit-mine{ background:rgba(110,148,166,.16); border-color:rgba(140,180,200,.45);
  box-shadow:inset 0 0 12px rgba(120,160,190,.4); }
.gst-cell.exit-opp{ background:rgba(120,30,30,.18); border-color:rgba(170,70,60,.4);
  box-shadow:inset 0 0 12px rgba(140,40,40,.3); }
/* 선택/이동 가능/마지막수 */
.gst-cell.selectable{ cursor:pointer; }
.gst-cell.selectable:hover{ border-color:rgba(200,210,230,.4); }
.gst-cell.selected{ outline:2px solid #8FB8CC; outline-offset:-2px; box-shadow:0 0 14px rgba(110,148,166,.4); }
.gst-cell.movable{ cursor:pointer; }
.gst-cell.movable::after{ content:''; position:absolute; width:32%; height:32%; border-radius:50%;
  background:rgba(160,190,210,.45); box-shadow:0 0 8px rgba(140,180,200,.5); pointer-events:none; }
.gst-cell.last{ box-shadow:inset 0 0 0 2px rgba(190,70,60,.7); }
.gst-cell.setup-cell{ cursor:pointer; background:rgba(150,160,180,.08); }
.gst-cell.setup-cell:hover{ border-color:rgba(200,210,230,.4); }
/* 망령 말 — SVG 실루엣을 mask로 찍고 배경색으로 색 입힘 + 흐릿한 발광 */
.ghost{ width:84%; height:84%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
/* 선한 망령 — ghost.svg, 창백한 푸른빛 */
.ghost-blue{ -webkit-mask-image:url('ghost_clean.svg'); mask-image:url('ghost_clean.svg');
  background:#8FB8CC; filter:drop-shadow(0 0 7px rgba(110,148,166,.6)); }
/* 악령 — spectre.svg, 핏빛 */
.ghost-red{ -webkit-mask-image:url('spectre_clean.svg'); mask-image:url('spectre_clean.svg');
  background:#C0664E; filter:drop-shadow(0 0 8px rgba(176,80,60,.65)); }
/* 미지(상대) — spectre 실루엣을 잿빛으로(정체불명) */
.ghost-unknown{ -webkit-mask-image:url('spectre_clean.svg'); mask-image:url('spectre_clean.svg');
  background:#9aa0ad; filter:drop-shadow(0 0 6px rgba(150,160,180,.45)); }
/* 잡힌 말 집계 바 */
/* 승리 게이지 — 2×2 격자, 각 행은 라벨 + 점 4칸 */
.gst-captured{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; padding:4px 8px; }
.gst-gauge{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gg-label{ font-size:.72rem; letter-spacing:-0.03em; white-space:nowrap;
  font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif; }
.gst-gauge.good .gg-label{ color:rgba(150,194,214,.8); }   /* 승리 쪽 — 푸른빛 */
.gst-gauge.bad .gg-label{ color:rgba(210,150,135,.8); }    /* 위험 쪽 — 붉은빛 */
.gg-dots{ display:inline-flex; gap:3px; flex:0 0 auto; }
.gd{ width:9px; height:9px; border-radius:50%; background:rgba(150,160,180,.18);
  border:1px solid rgba(150,160,180,.25); }
.gd.on.blue{ background:#8FB8CC; border-color:#8FB8CC; box-shadow:0 0 6px rgba(110,148,166,.6); }
.gd.on.red{ background:#C0664E; border-color:#C0664E; box-shadow:0 0 6px rgba(176,80,60,.6); }
/* 3칸 이상 = 승부 임박, 라벨 강조 + 점 깜빡 */
.gst-gauge.near .gg-label{ font-weight:700; }
.gst-gauge.near.good .gg-label{ color:#A7CDE0; }
.gst-gauge.near.bad .gg-label{ color:#E0A089; }
.gst-gauge.near .gd.on{ animation:gg-pulse 1.1s ease-in-out infinite; }
@keyframes gg-pulse{ 0%,100%{opacity:1;} 50%{opacity:.55;} }
/* 배치 단계 컨트롤 */
.gst-setup-bar{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 6px 4px; }
.gst-setup-info{ font-size:.95rem; color:#F3E9D2; font-weight:600; letter-spacing:.03em; }
.gst-setup-btns{ display:flex; gap:10px; width:100%; max-width:320px; }
.gst-setup-btns .gst-btn-ghost, .gst-setup-btns .gst-btn-blue{ flex:1; }
/* 자동 배치 — 반투명 버튼(또렷한 테두리+글자) */
.gst-btn-ghost{ padding:.7rem .5rem; border-radius:.6rem; cursor:pointer;
  background:rgba(18,12,8,.5); border:1.5px solid rgba(243,233,210,.3); color:#ECE4D6;
  font-size:.9rem; font-weight:600; letter-spacing:.02em;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:background .15s, border-color .15s; }
.gst-btn-ghost:hover{ background:rgba(18,12,8,.7); border-color:rgba(243,233,210,.55); }
.gst-btn-ghost:active{ transform:scale(.98); }
/* 배치 완료 — 블루 강조 */
.gst-btn-blue{ padding:.7rem .5rem; border-radius:.6rem; cursor:pointer; border:none;
  background:#5E8CA6; color:#fff; font-size:.95rem; font-weight:700; letter-spacing:.02em;
  box-shadow:0 4px 16px rgba(94,140,166,.4); transition:background .15s, box-shadow .15s, transform .1s; }
.gst-btn-blue:hover:not(:disabled){ background:#6E9BB5; }
.gst-btn-blue:active:not(:disabled){ transform:scale(.98); }
.gst-btn-blue:disabled{ opacity:.4; box-shadow:none; cursor:default; }
.gst-setup-hint{ font-size:.72rem; color:rgba(243,233,210,.5); text-align:center; }
/* 게임오버 사유 */
.gst-reason{ font-size:.9rem; color:rgba(243,233,210,.7); text-align:center; margin-top:4px; }

/* 로비 메뉴 버튼 — safe-area 보정(노치/다이나믹 아일랜드 회피, 좌측 버튼과 동일 정렬) */
#lobby-menu-wrap{ position:fixed; top:calc(14px + env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); }

/* 전적 초기화 버튼 무장(2단계 확인) 상태 — 빨강 강조 */
.reset-armed{ color:#fff !important; background:rgba(214,68,52,.92) !important; border-radius:8px; padding:5px 12px; font-weight:600; }