/* 로그인 게이트와 채팅. 게임 원래 팔레트(style.css의 토큰)를 그대로 쓴다. */

/* 게이트는 게임 프레임 바깥, 화면 전체를 덮는다. 프레임은 아직 보이지 않는 시점이다. */
.net-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#070909;padding:24px}
.net-gate-card{width:min(440px,100%);text-align:center;padding:44px 36px;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.net-gate-card h1{font-family:var(--serif);font-size:27px;letter-spacing:3px;color:var(--gold)}
.net-gate-lead{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.7}
.net-gate-button{margin-top:30px;width:100%;padding:13px 0;border:1px solid #716548;background:var(--panel2);color:var(--text);letter-spacing:1px}
.net-gate-note{margin-top:16px;color:var(--muted);font-size:11px;letter-spacing:.5px}
.net-gate-error{margin-top:16px;color:var(--red);font-size:12px;line-height:1.6}

/* 채팅은 게임 프레임 안에 둔다. 창이 작아지면 게임과 같은 비율로 함께 줄어든다.
   z-index는 반드시 #window-layer(10)보다 낮아야 한다 — 높으면 캐릭터 생성·가방 같은
   대화상자 위를 덮어 왼쪽 아래 클릭을 통째로 가로챈다. */
/* 미니맵 아래 오른쪽: 하단 스테이터스·전투 알림과 시작 지점 캐릭터를 가리지 않는다. */
.net-chat{position:absolute;right:var(--hud-gap,22px);top:244px;z-index:5;width:340px;display:flex;flex-direction:column;
  background:#141811e8;border:1px solid var(--line);border-radius:4px;backdrop-filter:blur(2px)}
.net-chat-head{height:auto;min-height:36px;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 12px;border-bottom:1px solid var(--line)}
.net-chat-head b{font-size:12px;letter-spacing:1px;color:var(--gold);font-weight:500}
.net-chat-roster{margin-left:auto;font-size:11px;color:var(--muted)}
.net-chat-toggle{width:22px;height:22px;line-height:1;padding:0;border-color:transparent;color:var(--muted);font-size:12px}

.net-chat-log{list-style:none;margin:0;padding:8px 12px;height:168px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:5px;scrollbar-width:thin;scrollbar-color:#3f4536 transparent}
.net-chat-line{font-size:12px;line-height:1.55;display:grid;grid-template-columns:auto auto 1fr;gap:0 7px;align-items:baseline;overflow-wrap:anywhere}
.net-chat-line time{font:10px/1.5 ui-monospace,monospace;color:#6f7663}
.net-chat-line b{font-weight:500;color:var(--green)}
.net-chat-line.self b{color:var(--gold)}
.net-chat-line.system{grid-template-columns:1fr;color:var(--muted);font-size:11px;font-style:italic}

.net-chat-form{border-top:1px solid var(--line);padding:7px}
.net-chat-input{width:100%;padding:7px 9px;background:#0e110c;border:1px solid #2c3126;color:var(--text);font-size:12px}
.net-chat-input::placeholder{color:#6f7663}

.net-chat.collapsed .net-chat-log,.net-chat.collapsed .net-chat-form{display:none}

@media (prefers-reduced-motion:reduce){.net-chat{backdrop-filter:none}}