:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#15130f; --fg:#efe9dc; --muted:#9a9184; --panel:#1f1c17; --line:#35302a; --accent2:#2b7cad; --accent:#b8541f; --ok:#8fe0aa; --bad:#ff9c8e; color-scheme:dark; }
*{ box-sizing:inherit; }
body{ margin:0; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg); font-family:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:15px; line-height:1.5; }
.wrap{ max-width:1100px; margin:0 auto; padding:12px 12px 32px; width:100%; box-sizing:border-box; flex:1; }
header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
header h1{ font-size:17px; font-weight:700; margin:0; }
header span{ color:var(--muted); font-size:13px; }
.screen{ display:none; } .screen.on{ display:block; }
/* 로비 */
.lobby{ max-width:420px; margin:40px auto; display:grid; gap:14px; }
.lobby h2{ margin:0; font-size:22px; }
.lobby p{ margin:0; color:var(--muted); }
.lobby .hero{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:10px; border:1px solid var(--line); }   /* 메인 화면 이미지: 버튼 위에 축소 배치 */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; display:grid; gap:10px; }
label{ font-size:13px; color:var(--muted); display:grid; gap:4px; }
input[type=text], select{ font:inherit; padding:9px 11px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--fg); width:100%; }
input.code{ font-size:22px; letter-spacing:4px; text-align:center; font-variant-numeric:tabular-nums; }
.pri{ font:inherit; font-weight:700; font-size:15px; padding:11px 16px; border-radius:8px; border:0; background:var(--accent); color:#fff; cursor:pointer; }
.pri:disabled{ opacity:.45; cursor:default; }
.pri.alt{ background:var(--accent2); }   /* 두 번째 주 버튼 색 (멀티 · 방 만들기) */
.pri.alt3{ background:#3f8a5a; }         /* 연습 모드 */
/* 버전·저작권: 브라우저 창 맨 아래 고정 (메인 화면에서만) */
#foot{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px)); }   /* 페이지 흐름 맨 끝: 내용이 짧으면 창 아래에, 길면 스크롤 뒤에 */
#foot.hidden{ display:none; }
.ver{ color:var(--muted); font-size:11px; text-align:center; opacity:.8; }
.qrow{ margin-top:10px; display:grid; gap:6px; } .qrow > span{ font-size:13px; color:var(--muted); } .qrow small{ font-size:12px; color:var(--muted); }
#pTableSeg{ margin-top:4px; }
.beta{ display:inline-block; font-size:11px; font-weight:700; background:var(--accent2); color:#fff; padding:2px 7px; border-radius:9px; vertical-align:middle; margin:0 2px; }
#sLevelSeg, #sTableSeg, #rTableSeg{ margin-top:4px; }
#btnLeave, #btnRoomBack, #ovBtn2{ color:var(--accent); border-color:rgba(184,84,31,.5); }   /* 나가기 버튼 글씨는 주황 */
#btnRestart.hidden{ display:none; }
.sec{ font:inherit; padding:8px 12px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; }
.sec:hover{ border-color:var(--muted); } .sec.on{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.row2{ display:flex; gap:8px; } .row2 > *{ flex:1; }
.big{ font-size:40px; font-weight:700; letter-spacing:6px; text-align:center; font-variant-numeric:tabular-nums; }
.copyrow{ display:flex; align-items:center; justify-content:center; gap:10px; } .copyrow > :first-child{ flex:1; min-width:0; } .copyrow .sec{ flex:none; white-space:nowrap; font-size:13px; padding:7px 10px; }
.chk{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--fg); }
.hint{ display:block; color:#b98a4a; font-size:12px; line-height:1.4; margin:-2px 0 6px 24px; }   /* 체크 항목 아래 별도 설명 (강조색) */
.seats{ display:grid; gap:6px; }
.seat{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.seat i{ width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.4); }
.seat .wait{ color:var(--muted); }
/* 게임 */
.board{ display:flex; gap:10px; margin-bottom:10px; }
.pl{ flex:1; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pl.turn{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.pl.turn .nm, .pl.turn .nm small{ color:var(--accent); font-weight:700; }   /* 지금 칠 사람 이름 강조 */
.pl.out{ opacity:.45; } .pl.out .rm{ font-size:16px; color:var(--muted); }
.pl .nm{ font-weight:500; display:flex; align-items:center; gap:8px; min-width:0; }
.pl .nm span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl .nm i{ flex:none; }
.pl .nm i{ width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.4); }
.pl .nm small{ color:var(--muted); font-size:12px; font-weight:400; }
.pl .rm{ font-size:30px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; }
.pl .rm .num{ font-weight:700; min-width:3ch; text-align:right; white-space:pre; }   /* 숫자 3자리 고정폭: " 80" / "100" */
.pl .rm small{ font-size:12px; color:var(--muted); font-weight:400; margin-left:4px; }
/* PC: 이름 줄 아래에 점수 줄. 점수 오른쪽 빈 공간에 점수 막대 */
body:not(.mobile) .pl.tm{ display:grid; grid-template-columns:1fr; gap:6px; align-content:start; }
.pl .bars{ display:flex; align-items:center; gap:3px; margin-left:16px; flex:1; min-width:0; overflow:hidden; }
.pl .bars i{ display:block; width:7px; height:20px; border-radius:2px; flex:none; } .pl .bars i.gap{ margin-left:6px; }   /* 10개마다 간격 */
.pl .bars.thin i{ width:4px; gap:2px; } .pl .bars.thin{ gap:2px; }
.pl .bars i.w{ background:#f6f1e4; } .pl .bars i.r{ background:#cf3620; } .pl .bars i.b{ background:#5aa8e0; } .pl .bars i.y{ background:#f2c43c; }
body.mobile .pl .bars{ display:none; }
.pl .bars .mb{ width:22px; height:22px; border-radius:50%; background:var(--c); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; border:1px solid rgba(0,0,0,.45); text-shadow:0 0 2px rgba(0,0,0,.8); }   /* 8볼 남은 공 */
.pl .bars .mb.s{ background:linear-gradient(#f6f1e4 22%, var(--c) 22%, var(--c) 78%, #f6f1e4 78%); }   /* 줄무늬 */
.stagewrap{ position:relative; }
#stage{ width:100%; aspect-ratio:16/9; display:block; touch-action:none; cursor:grab; border-radius:8px; background:#0e0c0a; }
#toast{ position:absolute; left:50%; top:14px; transform:translateX(-50%); background:rgba(20,16,12,.85); color:#fff; padding:8px 16px; border-radius:20px; font-weight:700; pointer-events:none; opacity:0; transition:opacity .25s; }
#toast.show{ opacity:1; } #toast.ok{ color:var(--ok); } #toast.bad{ color:var(--bad); }
#overlay{ position:absolute; inset:0; background:rgba(14,12,10,.86); display:flex; align-items:center; justify-content:center; border-radius:8px; }
#overlay.hidden{ display:none; }
#overlay .card{ width:min(92%,380px); text-align:center; }
#overlay p:empty, #ovResult:empty, #ovBtn2:empty{ display:none; }
#ovResult table{ width:100%; border-collapse:collapse; font-size:14px; }
#ovResult th{ font-weight:500; color:var(--muted); font-size:12px; padding:0 8px 4px; text-align:left; }
#ovResult td{ padding:7px 8px; border-top:1px solid var(--line); text-align:left; }
#ovResult th:last-child, #ovResult td:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
#ovResult tr.win td{ color:var(--accent); font-weight:700; }
.ctl{ display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; margin-top:12px; }
.box{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.spin{ display:flex; gap:10px; align-items:center; }
#elev{ touch-action:pan-x; }
#spinpad{ width:96px; height:96px; border-radius:50%; background:radial-gradient(circle at 38% 35%, #fff, #d8d2c4 70%, #9f978a); border:1px solid var(--line); position:relative; cursor:pointer; touch-action:none; flex:none; }
#spinpad::before,#spinpad::after{ content:""; position:absolute; background:rgba(0,0,0,.18); }
#spinpad::before{ left:50%; top:8%; width:1px; height:84%; } #spinpad::after{ top:50%; left:8%; height:1px; width:84%; }
#spindot{ position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid #fff; transform:translate(-50%,-50%); left:50%; top:50%; pointer-events:none; }
.spin small{ color:var(--muted); display:block; font-size:12px; }
.shoot{ display:flex; flex-direction:column; gap:6px; min-width:300px; flex:1; }   /* PC: 샷 영역 1.5배 폭 */
#shot{ touch-action:none; user-select:none; -webkit-user-select:none; order:3; }   /* 게이지·파워% 아래에 위치 */
.bar{ height:10px; border-radius:5px; background:var(--line); overflow:hidden; }
.bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#e0a93a,var(--accent),#b32a2a); }
.shoot small{ color:#fff; font-size:13px; } .btns small{ color:var(--muted); font-size:12px; }   /* 파워 % 흰색으로 또렷하게 */
kbd{ display:inline-block; font:inherit; font-size:11px; line-height:1; padding:2px 5px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:rgba(255,255,255,.06); color:var(--fg); margin:0 1px; vertical-align:1px; }   /* 키보드 키 표시 (PC) */
#shot .key{ display:block; font-weight:400; font-size:11px; color:rgba(255,255,255,.8); margin-top:3px; } #shot .key kbd{ border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.2); color:#fff; }
.btns kbd{ font-size:10px; padding:1px 4px; opacity:.8; }
.sec.on kbd{ color:inherit; border-color:rgba(0,0,0,.35); background:rgba(0,0,0,.08); }   /* 선택된(밝은 배경) 버튼에서는 어두운 글씨로 */
.btns{ display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.btns .seg{ flex-direction:row; flex:1; align-items:stretch; } .btns .seg:empty{ display:none; } .btns .seg button{ flex:1; }   /* 좌우로 나란히, 각각 세로로 꽉 차게 */
.seg{ display:flex; gap:4px; } .seg button{ flex:1; }
.seg .ico{ width:28px; height:20px; vertical-align:-5px; margin-right:5px; }   /* 종목 버튼 아이콘 (공 배치 모양) */
#sTypeSeg button, #pTypeSeg button, #rTypeSeg button{ padding:17px 12px; font-size:15px; }   /* 종목 선택 버튼: 세로 1.5배 */
.log{ flex:1; min-width:220px; }
.log b{ font-weight:500; color:var(--muted); font-size:13px; }
#seq{ margin:4px 0 0; min-height:24px; }
#verdict{ margin-top:4px; font-weight:700; } #verdict.ok{ color:var(--ok); } #verdict.bad{ color:var(--bad); }
details{ margin-top:12px; } summary{ cursor:pointer; color:var(--muted); font-size:14px; }
.params{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px 24px; margin-top:10px; }
.params .param{ display:grid; gap:4px; align-content:start; }
.params label{ display:flex; justify-content:space-between; font-size:14px; font-weight:500; }
.params label span:last-child{ color:var(--accent); font-variant-numeric:tabular-nums; }
.params .pdesc{ color:var(--muted); font-size:12px; line-height:1.45; }
body.mobile .params{ grid-template-columns:1fr; gap:10px; } body.mobile .params .pdesc{ font-size:11px; }
.params input[type=range]{ width:100%; }
button:focus-visible, #spinpad:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ─── 게임 화면: 3D는 브라우저 전체, UI는 오버레이 ─── */
.hold{ user-select:none; -webkit-user-select:none; touch-action:none; }
.hidden{ display:none !important; }
#rotate{ display:none; position:absolute; inset:0; background:rgba(14,12,10,.92); align-items:center; justify-content:center; font-size:20px; font-weight:700; z-index:5; }
#game.on{ position:fixed; inset:0; z-index:2; background:#0e0c0a; --chatw:0px; }
#game.on.chat-on{ --chatw:300px; }
#game .stagewrap{ position:absolute; inset:0; }
#stage{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
#topLeft{ position:absolute; top:calc(8px + env(safe-area-inset-top,0px)); left:calc(10px + env(safe-area-inset-left,0px)); right:calc(410px + var(--chatw) + env(safe-area-inset-right,0px)); z-index:3; pointer-events:none; max-width:900px; display:grid; gap:6px; justify-items:start; }   /* 우측 290px은 🔊·⚙·?·나가기 자리 */
#game .board{ flex-wrap:wrap; position:static; margin:0; gap:8px; width:100%; }
#viewBar, #multiSeg{ pointer-events:auto; gap:4px; } #viewBar .sec, #multiSeg .sec{ flex:none; white-space:nowrap; padding:6px 10px; font-size:13px; background:rgba(31,28,23,.82); backdrop-filter:blur(4px); } #viewBar .sec.on, #multiSeg .sec.on{ background:var(--fg); }
#multiSeg.hidden{ display:none; }
#multiSeg .sec{ min-width:96px; text-align:center; } body.mobile #multiSeg .sec{ min-width:78px; }   /* 채팅·포인터: 같은 폭, 1.5배 */
body.mobile #viewBar .sec, body.mobile #multiSeg .sec{ padding:4px 8px; font-size:12px; }
#game .pl{ background:rgba(31,28,23,.78); backdrop-filter:blur(4px); }
#toast{ top:calc(72px + env(safe-area-inset-top,0px)); right:var(--chatw); left:auto; transform:none; margin-right:20px; }
#overlay{ right:var(--chatw); }
/* 채팅 닫힘 상태의 새 메시지 알림: 토스트 아래 우측 상단에 쌓임 */
#chatToasts{ position:absolute; top:calc(112px + env(safe-area-inset-top,0px)); right:calc(20px + var(--chatw) + env(safe-area-inset-right,0px)); display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:min(50%, 360px); pointer-events:none; z-index:3; }
#chatToasts div{ background:rgba(20,16,12,.85); color:#fff; padding:7px 12px; border-radius:14px; font-size:14px; opacity:0; transform:translateX(12px); transition:opacity .25s, transform .25s; overflow-wrap:anywhere; }
#chatToasts div.show{ opacity:1; transform:none; }
/* 샷 제한시간 (멀티) */
#shotClock{ position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); left:50%; transform:translate(-50%, 100%);   /* 가로 가운데, 세로는 제 높이만큼 아래 */ z-index:3; pointer-events:none; background:rgba(20,16,12,.85); color:#fff; font-weight:700; font-size:22px; padding:6px 16px; border-radius:20px; font-variant-numeric:tabular-nums; min-width:72px; text-align:center; }
/* 8볼 프리볼: 당구대 중앙(화면 투영 위치)에 크게 */
#bihTag{ position:absolute; transform:translate(-50%,-50%); z-index:4; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:2px; color:#fff; font-size:56px; font-weight:800; letter-spacing:4px; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.9); opacity:.85; }
#bihTag small{ font-size:15px; font-weight:600; letter-spacing:0; opacity:.9; }
#bihTag.hidden{ display:none; } body.mobile #bihTag{ font-size:36px; } body.mobile #bihTag small{ font-size:12px; }
/* 큐 각도 조절 중 화면 중앙에 크게 */
#elevBig{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(20,16,12,.55); border-radius:16px; padding:14px 18px; }
#elevBig.hidden{ display:none; }
#elevBig b{ color:#fff; font-size:44px; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 2px 6px rgba(0,0,0,.7); } #elevBig b.forced{ color:#ff9c8e; }
#elevBig small{ color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
body.mobile #elevBig svg{ width:200px; height:116px; } body.mobile #elevBig b{ font-size:34px; }
/* 당점 조절 중 화면 중앙에 크게 */
#spinBig{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
#spinBig.hidden{ display:none; }
#spinBig .ball{ width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at 38% 35%, #fff, #d8d2c4 70%, #9f978a); box-shadow:0 10px 40px rgba(0,0,0,.6); position:relative; }
#spinBig .ball::before, #spinBig .ball::after{ content:""; position:absolute; background:rgba(0,0,0,.2); }
#spinBig .ball::before{ left:50%; top:6%; width:1px; height:88%; } #spinBig .ball::after{ top:50%; left:6%; height:1px; width:88%; }
#spinBig .lim{ position:absolute; left:50%; top:50%; width:var(--limd, 80%); height:var(--limd, 80%); transform:translate(-50%,-50%); border-radius:50%; border:1px dashed rgba(0,0,0,.25); }   /* 당점 최대 반경 */
#spinBig .dot{ position:absolute; width:22px; height:22px; border-radius:50%; background:var(--accent); border:3px solid #fff; transform:translate(-50%,-50%); left:50%; top:50%; box-shadow:0 2px 6px rgba(0,0,0,.4); }
#spinBig small{ color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
body.mobile #spinBig .ball{ width:170px; height:170px; } body.mobile #spinBig .dot{ width:18px; height:18px; }
#shotClock.low{ color:var(--bad); animation:clockBlink .5s steps(1) infinite; }
@keyframes clockBlink{ 50%{ opacity:.45; } }
body.mobile #shotClock{ top:calc(44px + env(safe-area-inset-top,0px)); transform:translate(-50%, 0); font-size:18px; padding:4px 12px; }   /* 모바일은 한 칸 위로 */
#rTimeSeg{ margin-top:4px; }
#chatToasts b{ font-weight:500; margin-right:6px; }
#game .ctl{ position:absolute; left:calc(10px + env(safe-area-inset-left,0px)); width:min(1200px, calc(100% - 20px - var(--chatw))); bottom:calc(10px + env(safe-area-inset-bottom,0px)); margin:0; gap:8px; align-items:stretch; flex-wrap:nowrap; z-index:3; }
#game .box{ background:rgba(31,28,23,.82); backdrop-filter:blur(4px); }
#game .log{ min-width:200px; max-width:624px; }   /* PC: 접촉 순서 박스 가로 2배 */
#game #seq{ font-size:70%; }
#physPanel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(94%,1000px); z-index:6; padding:14px 18px; }
#physPanel .params{ max-height:72vh; overflow:auto; padding-right:6px; }
body.mobile #physPanel{ width:96%; padding:8px 10px; } body.mobile #physPanel .params{ max-height:68vh; }
#chat{ position:absolute; top:0; right:0; bottom:0; width:var(--chatw); background:rgba(31,28,23,.94); border-left:1px solid var(--line); display:flex; flex-direction:column; z-index:4; overflow:hidden; transition:width .15s; }
.chat-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); }
.chat-head strong{ flex:1; }
.chatlist{ overflow-y:auto; display:flex; flex-direction:column; gap:4px; font-size:14px; }
#chatList{ flex:1; padding:8px 10px; }
.chatlist .m b{ font-weight:500; margin-right:6px; }
.chatlist .m b .tb, #chatToasts b .tb{ display:inline-block; width:4px; height:12px; border-radius:1px; margin-right:5px; vertical-align:-1px; }   /* 팀 색 세로바 */
.chatlist .sys{ color:var(--muted); font-size:12px; text-align:center; }
.chatform{ display:flex; gap:6px; }
#chatForm{ padding:8px; border-top:1px solid var(--line); }
.chatform input{ flex:1; min-width:0; } .chatform .pri{ padding:8px 10px; font-size:13px; }
/* 대기실 채팅 카드 */
.roomchat{ gap:6px; } .roomchat strong{ font-size:14px; }
.optlist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:4px 14px; font-size:13px; }
.optlist span{ color:var(--muted); margin-right:6px; }
#roomChatList{ height:160px; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px; }
#roomChatList:empty::before{ content:'아직 메시지가 없습니다'; color:var(--muted); font-size:12px; }
@media (orientation:portrait){ body.mobile #game.on #rotate{ display:flex; } }

/* ─── 모바일 전용 크기 ─── */
body.mobile .wrap{ max-width:none; padding:10px 10px 24px; }
body.mobile #game.on.chat-on{ --chatw:min(260px, 45vw); }
body.mobile #topLeft{ top:calc(6px + env(safe-area-inset-top,0px)); gap:4px; right:calc(330px + var(--chatw) + env(safe-area-inset-right,0px)); } body.mobile #game .board{ gap:6px; }
body.mobile .pl{ padding:3px 10px; flex:0 1 auto; min-width:0; max-width:min(42vw, 230px); gap:8px; font-size:13px; } body.mobile .pl .rm{ font-size:20px; } body.mobile .pl .nm small{ font-size:11px; }
body.mobile #toast{ top:calc(50px + env(safe-area-inset-top,0px)); }
body.mobile #chatToasts{ top:calc(88px + env(safe-area-inset-top,0px)); max-width:min(60%, 300px); font-size:13px; }
/* 하단 조작 영역: 한 줄에 [당점·각도][샷][버튼] 순으로 화면 폭 안에 맞춤 */
body.mobile #game .ctl{ bottom:calc(6px + env(safe-area-inset-bottom,0px)); gap:6px; flex-wrap:nowrap; }
body.mobile #game.chat-on .ctl{ flex-wrap:wrap; }   /* 채팅 패널이 열려 폭이 줄면 줄바꿈 */
body.mobile #game .box{ padding:5px 7px; }
body.mobile .spin{ gap:6px; flex:none; } body.mobile .spin > div{ min-width:0; }
body.mobile .spin strong{ font-size:12px; } body.mobile .spin small{ font-size:11px; } body.mobile .pc{ display:none !important; }
body.mobile #spinpad{ width:54px; height:54px; } body.mobile #spindot{ width:10px; height:10px; }
body.mobile .elevrow{ gap:4px; } body.mobile #elevSvg{ display:none; }
body.mobile #elev{ width:104px !important; height:26px; margin:0; pointer-events:none; }   /* 모바일: 터치 점프 없이 드래그 상대 조절 (elevWrap이 처리) */
#elevWrap{ display:inline-block; touch-action:none; } body.mobile #elevWrap{ padding:6px 0; }
body.mobile .shoot{ min-width:0; flex:none; width:192px; justify-content:center; gap:4px; }   /* 샷 영역 2배 */
body.mobile #shot{ padding:10px 6px; font-size:14px; white-space:nowrap; }
body.mobile .shoot small{ font-size:11px; white-space:nowrap; }
body.mobile .btns{ gap:3px; flex:0 0 auto; min-width:162px; width:auto; }   /* 미세 영역 폭 */
body.mobile #game .btns{ min-width:162px; }   /* 미세 영역 폭 (PC 규칙보다 우선) */
body.mobile .btns .seg{ gap:3px; }
body.mobile .btns .sec{ padding:5px 4px; font-size:12px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.mobile #game .log{ display:none; }

/* ─── 대기실 좌석 ─── */
.lobby.wide{ max-width:620px; }
.slots{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.team{ display:grid; gap:6px; align-content:start; padding:8px; border-radius:8px; border:1px solid var(--tc); background:var(--tcbg); }   /* 팀마다 색 블록으로 구분 */
.team.t0{ --tc:rgba(246,241,228,.55); --tcbg:rgba(246,241,228,.07); --tct:#f6f1e4; }
.team.t1{ --tc:rgba(242,196,60,.6);  --tcbg:rgba(242,196,60,.09);  --tct:#f2c43c; }
.team.t2{ --tc:rgba(90,168,224,.6);  --tcbg:rgba(90,168,224,.1);   --tct:#5aa8e0; }
.team.t3{ --tc:rgba(127,207,138,.6); --tcbg:rgba(127,207,138,.1);  --tct:#7fcf8a; }
.team .slot.taken{ border-color:var(--tc); }
/* 팀별 수지 라벨도 팀 색 (색 점 + 글씨 + 테두리) */
.targets .tl{ color:var(--tct); font-weight:500; } .targets .tl::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--tct); margin-right:6px; vertical-align:-1px; border:1px solid rgba(0,0,0,.4); }
.targets .tl select{ border-color:var(--tc); }
.targets .tl.t0{ --tc:rgba(246,241,228,.55); --tct:#f6f1e4; } .targets .tl.t1{ --tc:rgba(242,196,60,.6); --tct:#f2c43c; } .targets .tl.t2{ --tc:rgba(90,168,224,.6); --tct:#5aa8e0; } .targets .tl.t3{ --tc:rgba(127,207,138,.6); --tct:#7fcf8a; }
.tname{ font-size:13px; color:var(--tct, var(--muted)); font-weight:500; display:flex; align-items:center; gap:6px; }
.tname i{ width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.4); }
.slot{ font:inherit; font-size:13px; padding:10px 6px; border-radius:6px; border:1px dashed var(--line); background:transparent; color:var(--muted); cursor:pointer; text-align:center; min-height:40px; }
.slot.taken{ border-style:solid; color:var(--fg); background:var(--bg); cursor:default; }
.slot.me{ border-color:var(--accent); color:var(--fg); cursor:pointer; }
.slot:disabled{ cursor:default; opacity:.7; }
.targets{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.teamfields{ display:grid; gap:8px; }
.teamfields .tf{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)) 90px; gap:8px; align-items:end; }
.teamfields .tf.one{ grid-template-columns:1fr 90px; }
.pl .nm i.c0{ background:#f6f1e4 } .pl .nm i.c1{ background:#f2c43c } .pl .nm i.c2{ background:#5aa8e0 } .pl .nm i.c3{ background:#7fcf8a }
.pl .ball{ font-size:11px; padding:1px 6px; border-radius:10px; background:var(--line); color:var(--fg); margin-left:4px; }
@media (max-width:640px){ .slots, .targets{ grid-template-columns:repeat(2,1fr); } }
body.mobile #game .ctl{ width:calc(100% - 20px - var(--chatw)); }
.elevrow{ display:flex; align-items:center; gap:6px; }
#game .btns{ min-width:306px; flex:0 0 auto; }   /* 미세 버튼 폭 1.5배 */
.btns .seg.hidden{ display:none; }
#game .btns .sec{ padding:6px 12px; white-space:nowrap; }
#game .btns .sec{ white-space:nowrap; padding-left:6px; padding-right:6px; }   /* 버튼 글자가 두 줄로 꺾이지 않게 */
.slot{ padding:7px 6px; min-height:34px; }
@media (max-width:640px){ .slots{ grid-template-columns:repeat(2,1fr); } .team{ padding:6px; } }

/* 우측 상단: 🔊 ⚙ ? 나가기 (아이콘은 1.5배 크기) */
#topRight{ position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); right:calc(10px + var(--chatw) + env(safe-area-inset-right,0px)); display:flex; align-items:center; gap:8px; z-index:4; }
#topRight .sec{ background:rgba(31,28,23,.82); backdrop-filter:blur(4px); }
#btnMute, #btnOpt, #btnHelp{ width:51px; height:51px; border-radius:50%; padding:0; }
#gameClock{ height:51px; display:flex; align-items:center; padding:0 14px; border-radius:26px; background:rgba(31,28,23,.82); backdrop-filter:blur(4px); border:1px solid var(--line); color:var(--fg); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:1px; }   /* 게임 진행 시간 */
#gameClock.hidden{ display:none; } body.mobile #gameClock{ height:42px; padding:0 10px; font-size:13px; }
.pl.eye{ flex:0 0 auto; padding:8px 12px; gap:6px; font-weight:700; font-variant-numeric:tabular-nums; }   /* 관전자 수 카드 */
.pl.eye.hidden{ display:none; }
#btnMute{ font-size:22px; } #btnOpt{ font-size:26px; }
#topRight #btnLeave{ height:51px; padding:0 18px; font-size:15px; }
body.mobile #btnMute, body.mobile #btnOpt, body.mobile #btnHelp{ width:42px; height:42px; } body.mobile #btnMute{ font-size:18px; } body.mobile #btnOpt{ font-size:21px; } body.mobile #btnHelp{ font-size:18px; }
body.mobile #topRight #btnLeave{ height:42px; padding:0 12px; font-size:13px; } body.mobile #topRight{ gap:6px; }
#btnOpt.hidden{ display:none; }
#optPanel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%,520px); max-height:88%; overflow:auto; z-index:6; padding:12px 16px; }
#peoplePanel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%,420px); max-height:80%; overflow:auto; z-index:6; padding:12px 16px; }
#peoplePanel.hidden{ display:none; }
.plist{ display:grid; gap:6px; margin-top:8px; }
.plist .pp{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.plist .pp i{ width:10px; height:10px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.4); background:#8a8378; }
.plist .pp span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .plist .pp small{ color:var(--muted); }
.plist .pp .kick{ font-size:12px; padding:3px 8px; color:#ff9c8e; } .plist .empty{ color:var(--muted); font-size:13px; }
.pl.eye.clickable{ cursor:pointer; }   /* 모바일에서 길면 스크롤 */
.optgrid{ display:grid; gap:10px; margin-top:10px; } .optgrid .seg{ margin-top:4px; }
.ghostOpt{ display:block; margin-top:10px; font-size:13px; } .ghostOpt span{ color:var(--muted); margin-left:4px; } .ghostOpt input[type=range]{ width:100%; margin-top:4px; }   /* 조준점 불투명도 슬라이더 */
.optgroup{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line); } .optgroup:first-of-type{ margin-top:4px; border-top:0; padding-top:0; }
.optTitle{ font-size:14px; } .optTitle small{ color:var(--muted); font-weight:400; margin-left:6px; }
#hostOptArea.ro{ pointer-events:none; opacity:.55; }   /* 게스트: 호스트 설정은 보기만, 조작 불가 */
#hostOptArea.hidden{ display:none; }
#btnHelp{ font-weight:700; font-size:24px; }
#helpPanel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%,640px); max-height:88%; z-index:6; padding:12px 16px; overflow:auto; }
.help h4{ margin:12px 0 4px; font-size:14px; color:var(--accent); }
.help dl{ display:grid; grid-template-columns:80px 1fr; gap:4px 10px; margin:0; font-size:14px; }
.help dt{ color:var(--muted); } .help dd{ margin:0; }
#game .pl{ pointer-events:auto; cursor:pointer; }
#game .pl.nomine{ cursor:default; }

#cursors{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.rcur{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:2px; transition:left .08s linear, top .08s linear; }
.rcur span{ font-size:11px; padding:1px 6px; border-radius:8px; background:rgba(20,16,12,.8); color:#fff; white-space:nowrap; border:1px solid var(--c); }
.rcur i{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid var(--c); }

/* ─── 가로 화면(PC·모바일 가로)에서는 메인·대기실을 2단으로 ─── */
@media (orientation: landscape) and (min-width: 700px){
  #lobby .lobby{ max-width:900px; grid-template-columns:1fr 1fr; grid-template-areas:"h h" "img b1" "img b2" "img b3" "img q"; column-gap:40px; align-items:start; }
  #lobby .lobby > h2{ grid-area:h; text-align:center; }
  #lobby .hero{ grid-area:img; aspect-ratio:auto; height:100%; max-height:260px; }
  #btnSingle{ grid-area:b1; } #btnMulti{ grid-area:b2; } #btnPractice{ grid-area:b3; } #lobby .qrow{ grid-area:q; margin-top:0; }
  #room .lobby{ max-width:1260px; grid-template-columns:1fr 1fr; grid-template-areas:"h h" "code opts" "slots opts" "slots msg" "slots leave" "chat people"; column-gap:12px; align-items:start; }   /* 채팅 오른쪽에 접속자 목록 */
  #roomPeople{ grid-area:people; }
  #room .lobby > h2{ grid-area:h; }
  #room .lobby > .card:nth-of-type(1){ grid-area:code; }
  #room .lobby > .card:nth-of-type(2){ grid-area:slots; }
  #room .roomchat{ grid-area:chat; }
  #guestOpts, #hostOpts{ grid-area:opts; }
  #roomMsg{ grid-area:msg; margin:0; } #btnRoomBack{ grid-area:leave; }
  #roomChatList{ height:200px; }
}