/* =========================================================
   오목 (Gomoku) — 스타일 (나무판/흑백돌 톤, 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);  /* 카드 금박 악센트(다크골드) — 럭셔리 디테일 */
  /* 타이포 — 고운바탕(Gowun Batang). 한글·라틴·숫자 모두 한 폰트로 (단정한 명조) */
  --font-display:'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;
}

/* ── 첫 로딩 화면 (빛바랜 양피지 톤). 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% 38%, #241808 0%, #15100a 68%, #0d0905 100%);
  transition:opacity .8s ease;
}
html.fonts-ready #loading{ opacity:0; pointer-events:none; }
/* ── 로딩: 흑돌이 또옥 떨어져 착수 → 파문 (오목) ── */
#loading .go-boot{ position:relative; width:120px; height:120px; }
#loading .go-boot::after{   /* 바둑판 착점 */
  content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:rgba(243,233,210,.28);
}
#loading .go-stone{
  position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #6f6f6f 0%, #242424 47%, #000 100%);
  box-shadow:0 7px 16px rgba(0,0,0,.6), inset 0 -3px 5px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.12);
  animation:go-drop 1.7s cubic-bezier(.5,0,.75,1) infinite;
}
#loading .go-ripple{
  position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%;
  border:2px solid rgba(243,233,210,.7); opacity:0;
  animation:go-ripple 1.7s ease-out infinite;
}
@keyframes go-drop{
  0%{ transform:translateY(-92px) scale(.9); opacity:0; }
  12%{ opacity:1; }
  36%{ transform:translateY(0) scale(1); }
  44%{ transform:translateY(0) scaleX(1.14) scaleY(.84); }   /* 착지 눌림 */
  54%{ transform:translateY(0) scale(1); }
  82%{ transform:translateY(0) scale(1); opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:0; }
}
@keyframes go-ripple{
  0%,36%{ transform:scale(.55); opacity:0; }
  44%{ opacity:.7; }
  82%,100%{ transform:scale(2.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ #loading .go-stone, #loading .go-ripple{ animation:none; } }

/* ── 화면 전환 ── */
.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 방식.
   #app.on-game .go-board로 specificity를 올려 세로 공간이 넉넉한 태블릿 세로모드에서 보드를 키운다. */
@media (min-width: 768px){
  #app.on-game{ max-width: 720px; }
  #app.on-game .go-board{ width:min(92vw, calc(100dvh - 180px), 680px); }   /* 세로 가용공간 적극 활용 */
}
@media (min-width: 1100px){
  #app.on-game{ max-width: 760px; }
  #app.on-game .go-board{ width:min(86vw, calc(100dvh - 200px), 720px); }
}

/* ════ 입구 화면(로그인·로비·대기) — 어두운 빈티지 무드 ════ */
/* 배경 사진은 #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;}
.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;
  /* 오목 주 버튼 — lostcities(세이지 그린)와 구분되는 따뜻한 단풍/주홍 톤 */
  background:#AE4A39; color:#fff; font-weight:600; font-size:.95rem; letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(174,74,57,.35); transition:transform .1s, box-shadow .15s, opacity .15s;
}
.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:var(--paper); box-shadow:-6px 0 30px rgba(0,0,0,.2); 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:var(--ink); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:8px;}
.drawer-head button{background:none; border:none; font-size:18px; color:rgba(58,52,44,.5); cursor:pointer;}
.lc-log-line{padding:4px 6px; border-radius:6px; background:rgba(0,0,0,.02);}

/* ── 모달 (게임방법·전적·확인·게임오버 공통. .modal 기본 숨김 → .show 시 표시) ── */
.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);}
.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; white-space:nowrap; max-width:calc(100vw - 28px);}
.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)}}

/* ── 재접속 오버레이 ── */
#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; }
/* 헤더 상대정보 — 밝은 board_bg 위에서 읽히게 크림+그림자 (#5 정리 때 지워진 .lc-who .name/.role 복원) */
.lc-who .name{ font-weight:600; font-size:15px; color:#F3E9D2; text-shadow:0 1px 6px rgba(0,0,0,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-who .role{ font-size:11px; color:rgba(243,233,210,.72); letter-spacing:.04em; text-shadow:0 1px 5px rgba(0,0,0,.65); }
/* 복기(기록) 버튼 — 어두운 글래스 칩 (#5 정리 때 지워진 .lc-icon-btn 복원) */
.lc-icon-btn{ width:34px; height:34px; border-radius:.5rem; background:rgba(18,12,8,.4); border:1px solid rgba(243,233,210,.25); color:rgba(243,233,210,.78); 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,.85); text-shadow:0 1px 6px rgba(0,0,0,.7); }
.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로만 잡으면 됨. */
.go-board{ --n:15; width:min(94vw, calc(100dvh - 150px), 560px); aspect-ratio:1;
  display:grid; grid-template-columns:repeat(var(--n),1fr); grid-template-rows:repeat(var(--n),1fr);
  background:linear-gradient(150deg,#6b5236,#4a3722); border:1px solid rgba(200,162,78,.45);
  border-radius:6px; box-shadow:0 10px 34px rgba(0,0,0,.55), inset 0 0 30px rgba(0,0,0,.28); }
/* 칸 중심을 지나는 선(가로+세로) → 인접 칸끼리 이어져 격자선이 되고, 돌은 교차점에 놓임 */
.go-cell{ position:relative;
  background-image:
    linear-gradient(rgba(200,162,78,.28), rgba(200,162,78,.28)),
    linear-gradient(rgba(200,162,78,.28), rgba(200,162,78,.28));
  background-size:100% 1px, 1px 100%;
  background-position:center, center;
  background-repeat:no-repeat; }
/* 화점(별점) — 교차점에 작은 점 (돌 놓이면 가려짐) */
.go-cell.star{
  background-image:
    radial-gradient(circle, rgba(200,162,78,.6) 0 2.5px, transparent 3px),
    linear-gradient(rgba(200,162,78,.28), rgba(200,162,78,.28)),
    linear-gradient(rgba(200,162,78,.28), rgba(200,162,78,.28));
  background-size:100% 100%, 100% 1px, 1px 100%;
  background-position:center, center, center;
  background-repeat:no-repeat; }
.go-cell.open{ cursor:pointer; }
.go-cell.open:hover::after{ content:''; position:absolute; inset:30%; border-radius:50%; background:rgba(200,162,78,.3); }
/* 가장자리 칸: 바깥쪽 반선을 잘라 격자가 바깥 교차점에서 멈추게(오버행 제거 → 둘레 여백 자동 생성) */
.go-cell:nth-child(15n+1){ background-size:50% 1px, 1px 100%; background-position:right center, center center; }  /* 왼쪽 열 */
.go-cell:nth-child(15n){   background-size:50% 1px, 1px 100%; background-position:left center,  center center; }  /* 오른쪽 열 */
.go-cell:nth-child(-n+15){ background-size:100% 1px, 1px 50%; background-position:center center, center bottom; } /* 첫 행 */
.go-cell:nth-child(n+211){ background-size:100% 1px, 1px 50%; background-position:center center, center top; }    /* 끝 행 */
.go-cell:nth-child(1){   background-size:50% 1px, 1px 50%; background-position:right center, center bottom; }     /* ┌ */
.go-cell:nth-child(15){  background-size:50% 1px, 1px 50%; background-position:left center,  center bottom; }     /* ┐ */
.go-cell:nth-child(211){ background-size:50% 1px, 1px 50%; background-position:right center, center top; }        /* └ */
.go-cell:nth-child(225){ background-size:50% 1px, 1px 50%; background-position:left center,  center top; }        /* ┘ */
/* 돌 */
.go-cell.black::after, .go-cell.white::after{
  content:''; position:absolute; inset:10%; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.55); }
.go-cell.black::after{ background:radial-gradient(circle at 34% 30%, #5c5c5c, #0a0a0a 72%); }
.go-cell.white::after{ background:radial-gradient(circle at 34% 30%, #ffffff, #c7bfab 78%); }
/* 금수(흑 쌍삼 3-3) — 둘 수 없는 자리. 흐릿한 붉은 ✕ 표시. */
.go-cell.forbidden{ cursor:not-allowed; }
/* 금수 ✕ — 셀 크기에 비례하는 두 선(글리프 대신 그려 크고 또렷하게). */
.go-cell.forbidden::before, .go-cell.forbidden::after{ content:''; position:absolute;
  left:50%; top:50%; width:62%; height:13%; border-radius:3px;
  background:rgba(205,62,50,.78); z-index:2; pointer-events:none; }
.go-cell.forbidden::before{ transform:translate(-50%,-50%) rotate(45deg); }
.go-cell.forbidden::after{ transform:translate(-50%,-50%) rotate(-45deg); }
/* 마지막 착수 표시 */
.go-cell.last::before{ content:''; position:absolute; inset:33%; border-radius:50%;
  border:2px solid #c8523a; z-index:2; pointer-events:none; }
/* 승리 라인 */
.go-cell.win{ background-color:rgba(200,162,78,.2); }
.go-cell.win::after{ box-shadow:0 0 0 2px #c8a24e, 0 0 12px 2px rgba(200,162,78,.7); }

/* 로비 메뉴 버튼 — 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; }