(() => {
  'use strict';

  let forceLoginPage = window.location.pathname.replace(/\/+$/, '') === '/login';

  const socket = io({
    reconnection: true,
    reconnectionAttempts: Infinity,
    reconnectionDelay: 500,
    reconnectionDelayMax: 4000,
    randomizationFactor: 0.3,
    timeout: 20000,
    transports: ['polling', 'websocket'],
    tryAllTransports: true,
    rememberUpgrade: true
  });
  const $ = (id) => document.getElementById(id);
  const state = {
    user: null,
    rooms: [],
    activeRooms: [],
    rankings: [],
    rankingEvent: null,
    guildRankingEvent: null,
    tournaments: [],
    notices: [],
    shop: [],
    guilds: [],
    myGuild: null,
    history: [],
    roomStates: {},
    activeRoomId: null,
    selectedLoginAvatar: '🦊',
    sound: localStorage.getItem('royal-sound') !== 'off',
    resultKeys: new Set(),
    timerInterval: null,
    shopFilter: 'all',
    historyFilter: 'all',
    emojiTargetSeatIndex: null,
    jackpot: null,
    userRedemptions: [],
    support: { telegramId: '232344', handle: '@232344', url: 'https://t.me/232344' },
    pendingBuyIn: null,
    allInSelected: false,
    actionPending: false,
    activeTimerSeat: -1,
    sideDrawerOpen: window.matchMedia('(min-width:761px)').matches,
    tableCloseDeadline: null,
    turnAlertKeys: new Set(),
    turnPulseTimer: null,
    authMode: 'login',
    sessionToken: '',
    expandedHoleSeat: null,
    holeCollapseTimer: null,
    emoteReadyAt: 0,
    emoteCooldownTimer: null,
    mobileNavOpen: false,
    ttsVoices: [],
    winFxTimers: [],
    myCardPeekOpen: false,
    pendingExitRooms: new Set(),
    currentVoiceAudio: null,
    voicePreviewTimers: [],
    socketConnectedOnce: false,
    socketAuthInFlight: false,
    reconnectAuthFailures: 0,
    reconnectAuthTimer: null
  };
  const loginAvatars = ['🦊', '🐼', '🐯', '🐰', '🐸', '🦁', '🐧', '🐻'];
  const EMOTES = [
    { id: 'clap', emoji: '👏', name: '박수', cost: 0, effect: 'float' },
    { id: 'wow', emoji: '😮', name: '놀람', cost: 0, effect: 'float' },
    { id: 'fire', emoji: '🔥', name: '불꽃', cost: 0, effect: 'float' },
    { id: 'gun', emoji: '🔫', name: '물총 쏘기', cost: 50, effect: 'gun' },
    { id: 'egg', emoji: '🥚', name: '달걀 던지기', cost: 50, effect: 'egg' },
    { id: 'tomato', emoji: '🍅', name: '토마토 던지기', cost: 50, effect: 'tomato' },
    { id: 'kiss', emoji: '💋', name: '하트 키스', cost: 50, effect: 'kiss' },
    { id: 'lightning', emoji: '⚡', name: '번개', cost: 50, effect: 'lightning' }
  ];

  function escapeHtml(value) {
    return String(value ?? '').replace(/[&<>'"]/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#039;', '"': '&quot;' })[char]);
  }
  function fmt(value) { return Number(value || 0).toLocaleString('ko-KR'); }
  function phaseName(value) { return ({ idle: '대기', waiting: '대기', preflop: '프리플랍', flop: '플랍', turn: '턴', river: '리버', showdown: '쇼다운' })[value] || value; }
  function currentRoom() { return state.activeRoomId ? state.roomStates[state.activeRoomId] : null; }
  function compactCardLabel(card) {
    if (!card) return '?';
    const rank = ({ 11: 'J', 12: 'Q', 13: 'K', 14: 'A' })[Number(card.rank)] || String(card.rank || '?');
    const suit = ({ s: '♠', h: '♥', d: '♦', c: '♣' })[card.suit] || '';
    return `${rank}${suit}`;
  }
  function viewerSeat(payload = currentRoom()) { return payload?.seats?.find((seat) => seat?.userId === state.user?.id) || null; }
  function isImageAvatar(value) { return typeof value === 'string' && value.startsWith('data:image/'); }
  function avatarHtml(value, className = '') {
    if (isImageAvatar(value)) return `<img class="avatar-photo ${className}" src="${value}" alt="프로필" />`;
    return `<span class="avatar-emoji ${className}">${escapeHtml(value || '🦊')}</span>`;
  }

  function toast(message, type = 'info') {
    const node = document.createElement('div');
    node.className = `toast ${type}`;
    node.textContent = message;
    $('toastLayer').appendChild(node);
    setTimeout(() => node.remove(), 3400);
  }

  const GAME_SOUND_SAMPLES = Object.freeze({
    card: '/audio/sfx/card-place.wav?v=3022',
    'board-card': '/audio/sfx/card-place.wav?v=3022',
    chips: '/audio/sfx/chips-place.wav?v=3022',
    'chips-collect': '/audio/sfx/chips-place.wav?v=3037',
    'pot-award': '/audio/sfx/pot-award.wav?v=3024'
  });
  const gameSoundTemplates = new Map();

  function playRecordedGameSound(kind) {
    const source = GAME_SOUND_SAMPLES[kind];
    if (!source) return false;
    try {
      let template = gameSoundTemplates.get(kind);
      if (!template) {
        template = new Audio(source);
        template.preload = 'auto';
        gameSoundTemplates.set(kind, template);
      }
      const audio = template.cloneNode(true);
      audio.volume = kind === 'chips' ? .82 : kind === 'pot-award' ? .76 : .64;
      if (kind === 'chips-collect') audio.volume = .82;
      audio.play()?.catch?.(() => playSyntheticSound(kind));
      return true;
    } catch {
      return false;
    }
  }

  function playSyntheticSound(kind = 'click') {
    try {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      const ctx = new AudioContext();
      const tones = kind === 'chips' ? [[760, .00, .035], [930, .045, .035]]
        : kind === 'check' ? [[320, 0, .035], [270, .075, .035]]
        : kind === 'call' ? [[520, 0, .055], [640, .065, .060]]
        : kind === 'raise' ? [[430, 0, .065], [650, .075, .075], [880, .165, .095]]
        : kind === 'fold' ? [[410, 0, .065], [285, .075, .11]]
        : kind === 'allin' ? [[310, 0, .09], [620, .10, .10], [930, .22, .14], [1240, .38, .20]]
        : kind === 'win' ? [[660, 0, .10], [880, .10, .12], [1120, .22, .18]]
        : ['card', 'board-card'].includes(kind) ? [[500, 0, .045], [610, .035, .045]]
        : kind === 'turn' ? [[740, 0, .08], [980, .11, .10], [740, .24, .08]]
        : kind === 'alert' ? [[260, 0, .10]] : [[420, 0, .04]];
      tones.forEach(([frequency, startAt, duration]) => {
        const oscillator = ctx.createOscillator();
        const gain = ctx.createGain();
        oscillator.type = ['chips','check','fold'].includes(kind) ? 'triangle' : kind === 'allin' ? 'sawtooth' : 'sine';
        oscillator.frequency.value = frequency;
        gain.gain.setValueAtTime(.055, ctx.currentTime + startAt);
        gain.gain.exponentialRampToValueAtTime(.001, ctx.currentTime + startAt + duration);
        oscillator.connect(gain).connect(ctx.destination);
        oscillator.start(ctx.currentTime + startAt);
        oscillator.stop(ctx.currentTime + startAt + duration);
      });
      setTimeout(() => ctx.close(), 700);
    } catch { /* browser audio restriction */ }
  }

  function playSound(kind = 'click') {
    if (!state.sound) return;
    if (playRecordedGameSound(kind)) return;
    playSyntheticSound(kind);
  }



  const ACTION_VOICE_PRESETS = {
    female: {
      label: '젊은 여성',
      gender: 'female',
      pitch: 1.02,
      rate: 1.00,
      volume: .72,
      preferredNames: ['SunHi', 'Sora', 'Yuna', 'Seoyeon', '여성', 'Female', 'Heami', 'Yumi']
    }
  };
  const ACTION_VOICE_WORDS = { check: '체크', call: '콜', raise: '레이즈', fold: '폴드', allin: '올인' };
  const ACTION_VOICE_PREVIEW_TEXT = '레이즈! 콜! 체크! 폴드!';

  function refreshTtsVoices() {
    if (!('speechSynthesis' in window)) return;
    state.ttsVoices = window.speechSynthesis.getVoices().filter((voice) => /^ko[-_]/i.test(voice.lang) || /korean|한국/i.test(voice.name));
    if (!state.ttsVoices.length) state.ttsVoices = window.speechSynthesis.getVoices();
  }

  function selectedActionVoiceStyle() {
    return 'female';
  }

  function stopActionVoice({ keepPreviewTimers = false } = {}) {
    if (state.currentVoiceAudio) {
      try { state.currentVoiceAudio.pause(); state.currentVoiceAudio.currentTime = 0; } catch { /* ignore */ }
      state.currentVoiceAudio = null;
    }
    if ('speechSynthesis' in window) window.speechSynthesis.cancel();
    if (!keepPreviewTimers) {
      state.voicePreviewTimers.forEach((timer) => clearTimeout(timer));
      state.voicePreviewTimers = [];
    }
  }

  function scoreVoiceForPreset(voice, preset) {
    const name = `${voice?.name || ''} ${voice?.voiceURI || ''}`.toLowerCase();
    const preferred = (preset.preferredNames || []).reduce((score, hint) => score + (name.includes(String(hint).toLowerCase()) ? 12 : 0), 0);
    const naturalHints = ['natural', 'neural', 'online', 'google', 'samsung', 'bixby', 'premium', 'enhanced'];
    const natural = naturalHints.reduce((score, hint) => score + (name.includes(hint) ? 5 : 0), 0);
    const korean = /^ko[-_]/i.test(voice?.lang || '') || /korean|한국|ko-kr/i.test(name) ? 20 : 0;
    return preferred + natural + korean + (voice?.localService ? 1 : 0);
  }

  function chooseNaturalVoice(preset) {
    refreshTtsVoices();
    const voices = [...state.ttsVoices];
    if (!voices.length) return null;
    voices.sort((a, b) => scoreVoiceForPreset(b, preset) - scoreVoiceForPreset(a, preset) || String(a.name).localeCompare(String(b.name)));
    return voices[0] || null;
  }

  function styledActionText(actionType) {
    const word = ACTION_VOICE_WORDS[actionType] || '';
    return `${word}!`;
  }

  function playPackagedActionVoice(actionType, { keepPreviewTimers = false } = {}) {
    if (!ACTION_VOICE_WORDS[actionType]) return;
    const style = selectedActionVoiceStyle();
    stopActionVoice({ keepPreviewTimers });
    try {
      const audio = new Audio(`/audio/actions/female/${actionType}.wav?v=3023`);
      audio.preload = 'auto';
      audio.volume = .68;
      state.currentVoiceAudio = audio;
      audio.addEventListener('ended', () => { if (state.currentVoiceAudio === audio) state.currentVoiceAudio = null; }, { once: true });
      audio.play()?.catch?.(() => playSound(actionType || 'click'));
    } catch {
      playSound(actionType || 'click');
    }
  }

  function speakNaturalAction(actionType, { keepPreviewTimers = false, retry = 0 } = {}) {
    const text = ACTION_VOICE_WORDS[actionType];
    if (!text || !('speechSynthesis' in window) || typeof SpeechSynthesisUtterance === 'undefined') {
      playPackagedActionVoice(actionType, { keepPreviewTimers });
      return;
    }
    const style = selectedActionVoiceStyle();
    const preset = ACTION_VOICE_PRESETS.female;
    refreshTtsVoices();
    const voice = chooseNaturalVoice(preset);
    if (!voice && retry < 2) {
      const timer = setTimeout(() => speakNaturalAction(actionType, { keepPreviewTimers: true, retry: retry + 1 }), 140);
      state.voicePreviewTimers.push(timer);
      return;
    }
    stopActionVoice({ keepPreviewTimers });
    try {
      const utterance = new SpeechSynthesisUtterance(styledActionText(actionType));
      utterance.lang = 'ko-KR';
      utterance.pitch = preset.pitch;
      utterance.rate = preset.rate;
      utterance.volume = preset.volume;
      if (voice) utterance.voice = voice;
      utterance.onerror = () => playPackagedActionVoice(actionType, { keepPreviewTimers: true });
      window.speechSynthesis.resume?.();
      window.speechSynthesis.speak(utterance);
    } catch {
      playPackagedActionVoice(actionType, { keepPreviewTimers });
    }
  }

  function speakAction(actionType, preview = false) {
    if (!state.sound) return;
    if (!preview) {
      speakNaturalAction(actionType);
      return;
    }
    stopActionVoice();
    const previewActions = ['raise', 'call', 'check', 'fold', 'allin'];
    previewActions.forEach((type, index) => {
      const timer = setTimeout(() => speakNaturalAction(type, { keepPreviewTimers: true }), index * 1800);
      state.voicePreviewTimers.push(timer);
    });
  }

  if ('speechSynthesis' in window) {
    refreshTtsVoices();
    window.speechSynthesis.addEventListener?.('voiceschanged', refreshTtsVoices);
  }

  function resizeProfileImage(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = () => reject(new Error('파일을 읽을 수 없습니다.'));
      reader.onload = () => {
        const image = new Image();
        image.onerror = () => reject(new Error('이미지를 불러올 수 없습니다.'));
        image.onload = () => {
          const size = 256;
          const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size;
          const ctx = canvas.getContext('2d');
          const crop = Math.min(image.width, image.height);
          const sx = (image.width - crop) / 2; const sy = (image.height - crop) / 2;
          ctx.drawImage(image, sx, sy, crop, crop, 0, 0, size, size);
          resolve(canvas.toDataURL('image/jpeg', .82));
        };
        image.src = reader.result;
      };
      reader.readAsDataURL(file);
    });
  }

  function renderLoginAvatars() {
    $('loginAvatars').innerHTML = loginAvatars.map((avatar) => `<button type="button" class="avatar-option ${avatar === state.selectedLoginAvatar ? 'selected' : ''}" data-login-avatar="${avatar}">${avatar}</button>`).join('');
  }

  function scheduleReconnectAuthentication() {
    clearTimeout(state.reconnectAuthTimer);
    if (!socket.connected) return;
    const delay = Math.min(8000, 750 * (2 ** Math.min(state.reconnectAuthFailures, 4)));
    state.reconnectAuthTimer = setTimeout(() => {
      const token = localStorage.getItem('royal-token');
      authenticate({ token, reconnect: true, silent: true });
    }, delay);
  }

  function restoreSpectatorRoom(roomId) {
    if (!roomId || !socket.connected) return;
    socket.timeout(8000).emit('room:spectate', { roomId }, (error, result) => {
      if (error || !result?.ok) return;
      state.activeRoomId = roomId;
      renderMyRoomTabs();
      if (!$('gameView').classList.contains('hidden')) showGameView();
    });
  }

  function authenticate({ nickname, avatar, token, reconnect = false, silent = false } = {}) {
    if (state.socketAuthInFlight || !socket.connected) return;
    state.socketAuthInFlight = true;
    const previousRoomId = state.activeRoomId;
    const wasSpectating = Boolean(previousRoomId && state.roomStates[previousRoomId]?.viewer?.isSpectator);

    socket.timeout(12000).emit('auth', {
      nickname,
      avatar,
      token,
      sessionToken: state.sessionToken,
      reconnect
    }, (timeoutError, result) => {
      state.socketAuthInFlight = false;

      if (timeoutError) {
        state.reconnectAuthFailures += 1;
        $('connectionBadge').textContent = '재연결 중';
        $('connectionBadge').className = 'connection offline';
        scheduleReconnectAuthentication();
        return;
      }

      if (!result?.ok) {
        if (result?.code === 'AUTH_REQUIRED' || result?.code === 'BANNED') {
          clearTimeout(state.reconnectAuthTimer);
          localStorage.removeItem('royal-token');
          state.sessionToken = '';
          state.user = null;
          unlockAuthPageScroll();
          $('loginScreen').classList.remove('hidden');
          if (!silent) toast(result?.message || '로그인에 실패했습니다.', 'error');
          return;
        }
        state.reconnectAuthFailures += 1;
        $('connectionBadge').textContent = '재연결 중';
        $('connectionBadge').className = 'connection offline';
        scheduleReconnectAuthentication();
        return;
      }

      clearTimeout(state.reconnectAuthTimer);
      state.reconnectAuthFailures = 0;
      $('connectionBadge').textContent = '온라인';
      $('connectionBadge').className = 'connection online';
      if (result.token) localStorage.setItem('royal-token', result.token);
      if (result.sessionToken) state.sessionToken = result.sessionToken;
      state.user = result.user;
      if (forceLoginPage) {
        forceLoginPage = false;
        window.history.replaceState({}, document.title, '/');
      }
      $('loginScreen').classList.add('hidden');
      $('app').classList.remove('hidden');
      updateTopUser();

      const reconnectedRoomIds = Array.isArray(result.reconnectedRoomIds) ? result.reconnectedRoomIds : [];
      if (reconnectedRoomIds.length) {
        state.activeRoomId = reconnectedRoomIds.includes(previousRoomId) ? previousRoomId : reconnectedRoomIds[0];
        if (!$('gameView').classList.contains('hidden')) showGameView();
      } else if (reconnect && wasSpectating) {
        restoreSpectatorRoom(previousRoomId);
      }
    });
  }

  function updateTopUser() {
    if (!state.user) return;
    const displayAvatar = state.user.profileImage || state.user.avatar;
    $('topAvatar').innerHTML = avatarHtml(displayAvatar);
    $('topNickname').textContent = state.user.nickname;
    $('topChips').textContent = fmt(state.user.chips);
    $('profileAvatar').innerHTML = avatarHtml(displayAvatar, 'profile-photo');
    $('profileName').textContent = state.user.nickname;
  }

  function applyBootstrap(data) {
    if (!data) return;
    ['user', 'rooms', 'activeRooms', 'rankings', 'rankingEvent', 'guildRankingEvent', 'tournaments', 'notices', 'shop', 'guilds', 'myGuild', 'history', 'jackpot', 'userRedemptions', 'support'].forEach((key) => {
      if (data[key] !== undefined) state[key] = data[key];
    });
    updateTopUser();
    renderAll();
  }

  function renderAll() {
    renderMyRoomTabs();
    renderRooms();
    renderTournaments();
    renderNotices();
    renderRankings();
    renderRewards();
    renderMissions();
    renderShop();
    renderGuilds();
    renderProfile();
    renderEmojiBar();
    renderSupportContact();
  }

  function renderSupportContact() {
    const telegramId = String(state.support?.telegramId || '232344').replace(/^@+/, '');
    const handle = `@${telegramId}`;
    const url = state.support?.url || `https://t.me/${telegramId}`;
    if ($('telegramContactId')) $('telegramContactId').textContent = handle;
    if ($('telegramContactLink')) $('telegramContactLink').href = url;
  }

  async function loadSupportContact() {
    try {
      const response = await fetch('/api/support-contact', { credentials: 'same-origin' });
      const data = await response.json();
      if (response.ok && data?.support) {
        state.support = data.support;
        renderSupportContact();
      }
    } catch {}
  }

  function switchTab(tab) {
    document.querySelectorAll('.tab-panel').forEach((panel) => panel.classList.toggle('active', panel.id === `tab-${tab}`));
    document.querySelectorAll('.nav-btn[data-tab]').forEach((button) => button.classList.toggle('active', button.dataset.tab === tab));
    socket.emit('bootstrap:refresh', () => {});
  }

  function roomTypeLabel(type) {
    return ({ stake20000: '20,000P', stake50000: '50,000P', stake100000: '100,000P', stake300000: '300,000P', bot: '연습방', friend: '친구방', rush: '러시', tournament: '토너먼트' })[type] || type;
  }

  function renderMyRoomTabs() {
    const rows = state.activeRooms || [];
    if (!rows.length) {
      $('myRoomTabs').innerHTML = '<span class="empty-room-tab">참가 중인 방 없음</span>';
      return;
    }
    $('myRoomTabs').innerHTML = rows.map((room) => {
      const payload = state.roomStates[room.id];
      const me = viewerSeat(payload);
      const isTurn = payload?.game?.active && payload.game.actionIndex === me?.seatIndex;
      const holeText = (me?.cards || []).filter(Boolean).map(compactCardLabel).join(' ');
      return `<button class="my-room-tab ${state.activeRoomId === room.id ? 'active' : ''} ${isTurn ? 'my-turn' : ''}" data-my-room="${room.id}"><b>${escapeHtml(room.name)}</b><span>${room.pending ? '대기 중' : `${phaseName(room.status)} · ${fmt(room.stack)}P`}</span>${isTurn ? `<em class="my-room-hole-cards">내 카드 ${escapeHtml(holeText || '배분 중')}</em><i>MY TURN</i>` : ''}</button>`;
    }).join('');
  }

  function renderRooms() {
    const rooms = state.rooms || [];
    const joined = new Set((state.activeRooms || []).map((room) => room.id));
    const jackpot = Number(state.jackpot?.balance || 10000000);
    if ($('lobbyJackpot')) $('lobbyJackpot').innerHTML = `<div><span>ROYAL JACKPOT</span><b>${fmt(jackpot)}P</b></div><small>원핸드·투핸드만 · 보드 단독 제외</small>`;
    const time = (value) => new Date(value).toLocaleTimeString('ko-KR',{hour:'2-digit',minute:'2-digit'});
    $('roomGrid').innerHTML = rooms.map((room) => {
      const left = Math.max(0, Number(room.remainingOpenMs || 0));
      const hh = String(Math.floor(left/3600000)).padStart(2,'0');
      const mm = String(Math.floor(left%3600000/60000)).padStart(2,'0');
      const openTimeHtml = `<span>OPEN ${time(room.createdAt)}</span><b>입장 가능 ${hh}:${mm} 남음</b><small>${time(room.createdAt)} ~ ${time(room.closesAt)}</small>`;
      const full = Number(room.total || 0) >= Number(room.maxPlayers || 8);
      const joinedRoom = joined.has(room.id);
      const mainAction = joinedRoom
        ? `<button class="primary" data-open-joined="${room.id}">게임으로</button>`
        : full
          ? `<button class="gold reserve-room-btn" data-reserve-room="${room.id}">예약${room.pending ? ` · ${room.pending}명 대기` : ''}</button>`
          : `<button class="primary" data-join-room="${room.id}">입장</button>`;
      return `<article class="room-card ${joinedRoom ? 'joined' : ''} ${full ? 'room-full' : ''}">
        <div class="room-meta">${room.locked ? '🔒 ' : ''}${roomTypeLabel(room.type)} · ${phaseName(room.status)}</div>
        <h3>${escapeHtml(room.name)}</h3>
        <div class="room-meta">바이인 <b>${fmt(room.buyIn)}P</b> · 블라인드 ${fmt(room.smallBlind)} / ${fmt(room.bigBlind)}</div>
        <div class="room-open-time">${openTimeHtml}</div>
        <div class="room-counts"><span class="pill total">${room.total || 0}/${room.maxPlayers || 8}명</span>${room.pending ? `<span class="pill reservation-pill">예약 ${room.pending}명</span>` : ''}<span class="pill">👁 ${room.spectators}</span></div>
        ${(room.pendingNames || []).length ? `<div class="room-waiting-names">${room.pendingNames.map((name) => `${escapeHtml(name)} 대기 중`).join(' · ')}</div>` : ''}
        <div class="room-actions">${mainAction}<button class="secondary" data-watch-room="${room.id}">관전</button></div>
      </article>`;
    }).join('') || '<div class="info-card glass">현재 입장 가능한 방이 없습니다.</div>';
  }

  function renderTournaments() {
    if (!$('tournamentGrid')) return;
    const statusLabel = { scheduled: '참가 모집', running: '진행 중', completed: '종료', cancelled: '취소' };
    $('tournamentGrid').innerHTML = (state.tournaments || []).map((item) => {
      const joined = item.participants?.includes(state.user?.id);
      const canJoin = item.status === 'scheduled' && !joined && (item.participants?.length || 0) < item.maxPlayers && new Date(item.startsAt).getTime() > Date.now();
      const canEnter = item.status === 'running' && joined && item.roomId;
      const prizes = (item.prizes || []).map((row) => `${row.rank}위 ${fmt(row.amount)}P`).join(' · ');
      const winners = (item.winners || []).map((row) => `${row.rank}위 ${escapeHtml(row.nickname)} +${fmt(row.amount)}P`).join('<br>');
      const action = canEnter
        ? `<button class="primary" data-tournament-room-enter="${item.roomId}">토너먼트방 입장</button>`
        : canJoin
          ? `<button class="primary" data-tournament="${item.id}">참가 신청</button>`
          : `<button class="secondary" disabled>${joined ? '참가 완료' : item.status === 'completed' ? '종료' : item.status === 'cancelled' ? '취소' : '신청 마감'}</button>`;
      return `<article class="feature-card tournament-card"><span class="eyebrow">${escapeHtml(statusLabel[item.status] || item.status)}</span><h3>${escapeHtml(item.name)}</h3><p>시작 ${new Date(item.startsAt).toLocaleString('ko-KR')}<br>참가비 ${fmt(item.entryFee)}P · 시작 스택 ${fmt(item.startingStack)}P<br>상금 ${escapeHtml(prizes || '미정')}<br>${item.participants?.length || 0} / ${item.maxPlayers}명</p>${winners ? `<p class="tournament-winners">${winners}</p>` : ''}${action}</article>`;
    }).join('') || '<div class="info-card glass">예정된 토너먼트가 없습니다.</div>';
  }

  function renderNotices() {
    const notices = (state.notices || []).filter((notice) => notice?.active !== false);
    if (!$('noticeGrid')) return;
    $('noticeGrid').innerHTML = notices.map((notice) => {
      const images = (notice.images || []).slice(0, 4).map((src, index) => `<div class="notice-image-button"><img src="${src}" alt="${escapeHtml(notice.title)} 첨부사진 ${index + 1}" loading="lazy" /></div>`).join('');
      const updatedAt = notice.updatedAt || notice.createdAt;
      return `<button type="button" class="notice-card glass ${notice.pinned ? 'pinned' : ''}" data-notice-open="${escapeHtml(notice.id)}">
        <div class="notice-card-top"><div><span class="eyebrow">${notice.pinned ? 'IMPORTANT' : 'NOTICE'}</span><h3>${escapeHtml(notice.title)}</h3></div>${notice.pinned ? '<span class="notice-pin">고정</span>' : ''}</div>
        <p class="notice-content notice-content-preview">${escapeHtml(notice.content).replace(/\n/g, '<br>')}</p>
        ${images ? `<div class="notice-image-grid count-${Math.min(4, notice.images.length)}">${images}</div>` : ''}
        <span class="notice-open-hint">눌러서 전체 글과 사진 보기</span><time>${updatedAt ? new Date(updatedAt).toLocaleString('ko-KR') : ''}</time>
      </button>`;
    }).join('') || '<div class="info-card glass">등록된 공지사항이 없습니다.</div>';
  }

  function openNoticeDetail(noticeId) {
    const notice = (state.notices || []).find((row) => row.id === noticeId);
    if (!notice || !$('noticeDetailDialog') || !$('noticeDetailContent')) return;
    const images = (notice.images || []).map((src, index) => `<figure><img src="${src}" alt="${escapeHtml(notice.title)} 첨부사진 ${index + 1}" /><figcaption>첨부사진 ${index + 1}</figcaption></figure>`).join('');
    $('noticeDetailContent').innerHTML = `<article class="notice-detail-article"><span class="eyebrow">${notice.pinned ? 'IMPORTANT NOTICE' : 'NOTICE'}</span><h2>${escapeHtml(notice.title)}</h2><time>${new Date(notice.updatedAt || notice.createdAt || Date.now()).toLocaleString('ko-KR')}</time><div class="notice-detail-text">${escapeHtml(notice.content).replace(/\n/g, '<br>')}</div>${images ? `<div class="notice-detail-images">${images}</div>` : ''}</article>`;
    $('noticeDetailDialog').showModal();
  }

  function renderRankings() {
    const event = state.rankingEvent;
    if (event) {
      $('rankingEnds').textContent = `${new Date(event.endsAt).toLocaleString('ko-KR')} 마감 · 환전 불가 이벤트 포인트`;
      $('rankingPayouts').innerHTML = event.payouts.map((row) => `<div><b>${row.rank}위</b><span>${fmt(row.prize)}P</span></div>`).join('');
    }
    $('rankingBody').innerHTML = (state.rankings || []).slice(0, 10).map((row) => `<tr class="${row.id === state.user?.id ? 'me-row' : ''}"><td><b>${row.rank}</b></td><td><span class="rank-player">${avatarHtml(row.profileImage || row.avatar, 'rank-avatar')}<b>${escapeHtml(row.nickname)}</b></span></td><td><strong>${fmt(row.weeklyRankPoints)}</strong></td><td>${fmt(row.rankPoints)}</td><td>${row.wins}승 / ${row.hands}핸드</td></tr>`).join('');
    const jackpot = state.jackpot || { balance: 10000000, recentHits: [] };
    const hits = [...(jackpot.recentHits || [])]
      .filter((hit) => hit && Number(hit.amount || 0) > 0)
      .sort((left, right) => new Date(right.createdAt || 0) - new Date(left.createdAt || 0))
      .slice(0, 30);
    if ($('jackpotStatusBalance')) $('jackpotStatusBalance').textContent = `현재 잭팟 ${fmt(jackpot.balance)}P`;
    if ($('jackpotStatusCount')) $('jackpotStatusCount').textContent = `최근 당첨 ${hits.length}건`;
    if ($('jackpotStatusFeed')) {
      $('jackpotStatusFeed').innerHTML = hits.map((hit, index) => {
        const status = hit.status === 'claimable' ? '수령 대기' : '지급 완료';
        const occurredAt = hit.createdAt ? new Date(hit.createdAt).toLocaleString('ko-KR') : '-';
        return `<article class="jackpot-status-row"><span class="jackpot-hit-rank">${index + 1}</span><div class="jackpot-status-player"><div><b>${escapeHtml(hit.nickname || '플레이어')}</b><small>${escapeHtml(hit.roomName || '게임방')} · Hand #${Number(hit.handNo || 0)}</small></div></div><div class="jackpot-status-hand"><strong>${escapeHtml(hit.handName || '잭팟')}</strong><small>${occurredAt}</small></div><div class="jackpot-status-amount"><b>+${fmt(hit.amount)}P</b><span class="status-${hit.status}">${status}</span></div></article>`;
      }).join('') || '<div class="jackpot-status-empty"><b>아직 잭팟 당첨자가 없습니다.</b><span>홀카드 1장 또는 2장이 실제 족보 구성에 들어간 잭팟만 표시됩니다.</span></div>';
    }
  }

  function rewardCard(item, kind) {
    const percent = Math.min(100, (item.progress / item.target) * 100);
    const ready = item.progress >= item.target;
    const attr = kind === 'signup' ? `data-signup-reward="${item.id}"` : `data-weekly-reward="${item.id}"`;
    return `<article class="mission-card"><div class="mission-top"><div><span class="eyebrow">${kind === 'signup' ? 'NEW' : 'WEEKLY'}</span><h3>${escapeHtml(item.title)}</h3></div><strong>+${fmt(item.reward)}P</strong></div><p>${escapeHtml(item.description || '')}${item.description ? '<br>' : ''}${item.progress} / ${item.target}</p><div class="mission-progress"><i style="width:${percent}%"></i></div><button class="${ready && !item.claimed ? 'primary' : 'secondary'}" ${attr} ${!ready || item.claimed ? 'disabled' : ''}>${item.claimed ? '수령 완료' : ready ? '보상 받기' : '진행 중'}</button></article>`;
  }

  function renderRewards() {
    const signup = state.user?.signupRewards || [];
    const weekly = state.user?.weeklyRewards || [];
    $('signupRewardGrid').innerHTML = signup.map((item) => rewardCard(item, 'signup')).join('');
    $('weeklyRewardGrid').innerHTML = weekly.map((item) => rewardCard(item, 'weekly')).join('');
    if (state.rankingEvent) $('weeklyResetText').textContent = `${new Date(state.rankingEvent.endsAt).toLocaleDateString('ko-KR')} 초기화`;
  }

  function renderMissions() {
    const missions = state.user?.missions?.items || [];
    $('missionGrid').innerHTML = missions.map((mission) => {
      const percent = Math.min(100, (mission.progress / mission.target) * 100);
      const ready = mission.progress >= mission.target;
      return `<article class="mission-card"><div class="mission-top"><div><span class="eyebrow">DAILY</span><h3>${escapeHtml(mission.title)}</h3></div><strong>+${fmt(mission.reward)}P</strong></div><p>${mission.progress} / ${mission.target}</p><div class="mission-progress"><i style="width:${percent}%"></i></div><button class="${ready && !mission.claimed ? 'primary' : 'secondary'}" data-mission="${mission.id}" ${!ready || mission.claimed ? 'disabled' : ''}>${mission.claimed ? '수령 완료' : ready ? '받기' : '진행 중'}</button></article>`;
    }).join('');
  }


  const SKIN_THEMES = {
    classic: { felt:'#12603d', felt2:'#062b1c', rail:'#111918', rail2:'#89d95a', accent:'#a6ee72', glow:'rgba(104,255,150,.38)', sigil:'♠', motif:'classic' },
    'azure-dragon': { felt:'#075e74', felt2:'#031c2d', rail:'#07141b', rail2:'#52d9e9', accent:'#7af3ff', glow:'rgba(66,229,255,.48)', sigil:'龍', motif:'dragon' },
    'white-tiger': { felt:'#59616a', felt2:'#161b20', rail:'#0b0d0f', rail2:'#e6d8b1', accent:'#fff1c6', glow:'rgba(255,240,198,.42)', sigil:'虎', motif:'tiger' },
    'black-tortoise': { felt:'#17493d', felt2:'#041813', rail:'#050b0a', rail2:'#6fb59e', accent:'#8bd7bd', glow:'rgba(97,215,177,.42)', sigil:'玄', motif:'tortoise' },
    'vermilion-bird': { felt:'#8d2d20', felt2:'#2a0605', rail:'#180807', rail2:'#ff9d48', accent:'#ffbe68', glow:'rgba(255,92,43,.52)', sigil:'朱', motif:'phoenix' },
    'golden-dragon': { felt:'#564210', felt2:'#171003', rail:'#100d05', rail2:'#f1d36d', accent:'#ffe992', glow:'rgba(255,213,77,.54)', sigil:'皇', motif:'gold-dragon' }
  };
  function valueHue(value) {
    let hash = 0;
    for (const char of String(value || 'royal')) hash = ((hash << 5) - hash + char.charCodeAt(0)) | 0;
    return Math.abs(hash) % 360;
  }
  function skinTheme(value) {
    if (SKIN_THEMES[value]) return SKIN_THEMES[value];
    const hue = valueHue(value);
    return {
      felt:`hsl(${hue} 52% 28%)`, felt2:`hsl(${hue} 58% 10%)`,
      rail:`hsl(${(hue + 25) % 360} 35% 8%)`, rail2:`hsl(${(hue + 55) % 360} 74% 62%)`,
      accent:`hsl(${(hue + 70) % 360} 88% 72%)`, glow:`hsla(${hue} 88% 58% / .44)`,
      sigil:'◆', motif:'classic'
    };
  }
  function skinInlineStyle(value) {
    const t = skinTheme(value);
    return `--felt:${t.felt};--felt2:${t.felt2};--rail:${t.rail};--rail2:${t.rail2};--accent:${t.accent};--table-glow:${t.glow};--sigil:"${t.sigil}"`;
  }
  const BUILTIN_CARD_SKINS = new Set(['classic-card','midnight-blue','emerald-grid','royal-gold','crimson-dragon','violet-neon']);
  function cardSkinInlineStyle(value) {
    if (BUILTIN_CARD_SKINS.has(value)) return '';
    const hue = valueHue(value);
    return `background:repeating-linear-gradient(45deg,hsl(${hue} 62% 28%) 0 7px,hsl(${(hue + 42) % 360} 72% 42%) 7px 14px);`;
  }

  function itemIcon(item) {
    if (item.type === 'avatar') return item.value;
    if (item.type === 'skin') return ({ classic: '♠', 'azure-dragon':'龍', 'white-tiger':'虎', 'black-tortoise':'玄', 'vermilion-bird':'朱', 'golden-dragon':'皇' })[item.value] || '🎨';
    if (item.type === 'cardSkin') return '🂠';
    return Array.isArray(item.value) ? item.value.join(' ') : item.value;
  }

  function ownsItem(item) {
    const inventory = state.user?.inventory || {};
    const bucket = item.type === 'avatar' ? inventory.avatars : item.type === 'skin' ? inventory.skins : item.type === 'cardSkin' ? inventory.cardSkins : inventory.emojis;
    const values = Array.isArray(item.value) ? item.value : [item.value];
    return values.every((value) => bucket?.includes(value));
  }

  function renderShop() {
    const rows = (state.shop || []).filter((item) => state.shopFilter === 'all' || item.category === state.shopFilter);
    $('shopGrid').innerHTML = rows.map((item) => `<article class="shop-card ${item.type === 'skin' ? `skin-shop-card skin-${item.value}` : item.type === 'cardSkin' ? `card-skin-shop-card card-back-${item.value}` : ''}">
      ${item.type === 'skin'
        ? `<div class="skin-shop-preview skin-${item.value} motif-${skinTheme(item.value).motif}" style='${skinInlineStyle(item.value)}'><i class="skin-mini-rail"></i><b>${itemIcon(item)}</b><em>${escapeHtml(item.name)}</em><span>ROYAL TABLE</span></div>`
        : item.type === 'cardSkin'
          ? `<div class="card-skin-shop-preview"><div class="playing-card back card-back-${item.value}" style="${cardSkinInlineStyle(item.value)}"><div class="card-back-mark">♠</div></div><em>${escapeHtml(item.name)}</em></div>`
          : `<div class="shop-icon ${item.type === 'emoji' ? 'emoji-pack-icon' : ''}">${itemIcon(item)}</div>`}
      <span class="eyebrow">${escapeHtml(item.category)}</span><h3>${escapeHtml(item.name)}</h3><p>${fmt(item.price)}P</p>
      <div class="shop-card-actions">${item.type === 'skin' ? `<button class="secondary" data-skin-preview="${item.value}" data-skin-name="${escapeHtml(item.name)}">미리보기</button>` : item.type === 'cardSkin' ? `<button class="secondary" data-card-skin-preview="${item.value}" data-card-skin-name="${escapeHtml(item.name)}">미리보기</button>` : ''}<button class="${ownsItem(item) ? 'secondary' : 'primary'}" data-shop-item="${item.id}" ${ownsItem(item) ? 'disabled' : ''}>${ownsItem(item) ? '보유 중' : '구매'}</button></div>
    </article>`).join('');
    document.querySelectorAll('[data-shop-filter]').forEach((button) => button.classList.toggle('active', button.dataset.shopFilter === state.shopFilter));
  }

  function renderGuilds() {
    const mine = state.myGuild;
    const event = state.guildRankingEvent || { totalPrizePoints: 100000, payouts: [{ rank: 1, prize: 50000 }, { rank: 2, prize: 30000 }, { rank: 3, prize: 20000 }], maxMembers: 20, creationCost: 100000 };
    const payoutText = (event.payouts || []).map((row) => `${row.rank}위 ${fmt(row.prize)}P`).join(' · ');
    $('guildRankingPrize').innerHTML = `<div><span class="eyebrow">WEEKLY GUILD PRIZE</span><h3>주간 길드 상금 총 ${fmt(event.totalPrizePoints || 100000)}P</h3><p>${payoutText}</p></div><div><b>RP 기준</b><span>매주 월요일 길드원에게 균등 분배</span></div>`;
    const guildRejoinAt = Date.parse(state.user?.guildRejoinAvailableAt || '');
    const guildCooldownActive = Number.isFinite(guildRejoinAt) && guildRejoinAt > Date.now();
    const guildCooldownHours = guildCooldownActive ? Math.max(1, Math.ceil((guildRejoinAt - Date.now()) / 3600000)) : 0;
    $('openGuildCreate').disabled = Boolean(mine) || guildCooldownActive;
    if (!mine) {
      $('myGuild').innerHTML = guildCooldownActive
        ? `<div class="empty-guild guild-cooldown"><h3>길드 재가입 대기 중</h3><p>길드 탈퇴 후 24시간 동안 재가입할 수 있습니다. 약 ${guildCooldownHours}시간 후 가입·창설할 수 있습니다.</p></div>`
        : '<div class="empty-guild"><h3>가입한 길드가 없습니다.</h3><p>길드를 만들거나 아래 목록에서 가입하세요. 길드 출석·후원·게임 결과로 주간 RP를 쌓을 수 있습니다.</p></div>';
    } else {
      const memberRows = mine.members.map((member, index) => `<tr><td>${index + 1}</td><td>${member.avatar} <b>${escapeHtml(member.nickname)}</b>${member.role === 'master' ? ' 👑' : ''}</td><td>${fmt(member.contribution)}P</td><td>${member.wins}승</td></tr>`).join('');
      const guildTopTen = Array.from({ length: 10 }, (_, index) => { const guild = (state.guilds || [])[index]; return guild ? `<div class="guild-top-row ${guild.id === mine.id ? 'mine' : ''}"><b>${index + 1}위</b><span>${escapeHtml(guild.name)}</span><strong>${fmt(guild.weeklyRp ?? guild.weeklyPoints)} RP</strong></div>` : `<div class="guild-top-row empty"><b>${index + 1}위</b><span>-</span><strong>0 RP</strong></div>`; }).join('');
      $('myGuild').innerHTML = `
        <div class="guild-hero"><div><span class="eyebrow">MY GUILD · LV.${mine.level}</span><h2>🛡️ ${escapeHtml(mine.name)}</h2><p>${escapeHtml(mine.description)}</p></div><div class="guild-score"><b>${fmt(mine.weeklyPoints)}</b><span>주간 길드 RP</span></div></div>
        <div class="guild-notice"><b>📢 공지</b><span>${escapeHtml(mine.notice)}</span></div>
        <div class="guild-actions"><button class="primary" data-guild-checkin ${mine.checkedInToday ? 'disabled' : ''}>${mine.checkedInToday ? '오늘 출석 완료' : '길드 출석 +200P'}</button><button class="secondary" data-guild-donate="100">100P 후원</button><button class="secondary" data-guild-donate="500">500P 후원</button><button class="secondary" data-guild-donate="1000">1,000P 후원</button><button class="danger" data-guild-leave>길드 탈퇴</button></div>
        ${mine.isOwner ? `<div class="guild-editor"><label>길드 소개<textarea id="guildDescriptionInput" maxlength="100">${escapeHtml(mine.description)}</textarea></label><label>길드 공지<textarea id="guildNoticeInput" maxlength="120">${escapeHtml(mine.notice)}</textarea></label><button class="primary" data-guild-save>길드 정보 저장</button></div>` : ''}
        <div class="guild-columns"><div><h3>길드원 · ${mine.memberCount}/${mine.maxMembers || 20}명</h3><div class="table-scroll"><table><thead><tr><th>#</th><th>길드원</th><th>주간 RP</th><th>승리</th></tr></thead><tbody>${memberRows}</tbody></table></div></div><div><h3>주간 길드 TOP 10</h3><div class="guild-top-ten">${guildTopTen}</div></div></div>`;
    }
    $('guildGrid').innerHTML = (state.guilds || []).map((guild, index) => `<article class="guild-card"><span class="eyebrow">RANK ${index + 1} · LV.${guild.level}</span><h3>🛡️ ${escapeHtml(guild.name)}</h3><p>${escapeHtml(guild.description)}</p><div class="guild-mini-stats"><span>${guild.memberCount}/${guild.maxMembers || 20}명</span><span>주간 ${fmt(guild.weeklyRp ?? guild.weeklyPoints)} RP</span><span>누적 ${fmt(guild.points)} RP</span></div><button class="${state.user?.guildId || guildCooldownActive ? 'secondary' : 'primary'}" data-guild-join="${guild.id}" ${state.user?.guildId || guildCooldownActive ? 'disabled' : ''}>${guild.id === state.user?.guildId ? '내 길드' : guildCooldownActive ? '재가입 대기' : '가입'}</button></article>`).join('') || '<div class="info-card glass">아직 생성된 길드가 없습니다.</div>';
  }

  function historyBoardHtml(board = [], compact = false) {
    const cards = Array.isArray(board) ? board : [];
    const street = (label, items) => items.length
      ? `<div class="history-street"><span>${label}</span><div>${items.map((card) => cardHtml(card, true)).join('')}</div></div>` : '';
    return `<div class="history-board ${compact ? 'compact' : ''}">${street('플랍', cards.slice(0, 3))}${street('턴', cards.slice(3, 4))}${street('리버', cards.slice(4, 5))}</div>`;
  }

  function replayPlayerCards(row, player) {
    const revealed = player.cardsRevealed !== undefined
      ? Boolean(player.cardsRevealed)
      : Boolean(!player.folded && row?.result?.revealAll !== false);
    if (!revealed) return '<span class="history-hidden-cards">카드 비공개</span>';
    return `<span class="history-open-cards">${(player.cards || []).map((card) => cardHtml(card, true)).join('')}</span>`;
  }

  function historyRow(row) {
    const me = row.players?.find((player) => player.userId === state.user?.id);
    const net = Number(me?.net ?? 0);
    const won = net > 0;
    const label = `${net > 0 ? '+' : ''}${fmt(net)}P`;
    return { me, net, won, html: `<article class="replay-item ${won ? 'history-win' : 'history-loss'}"><div><b>${escapeHtml(row.roomName)}</b><p>${new Date(row.createdAt).toLocaleString('ko-KR')} · Hand #${row.handNo} · ${escapeHtml(row.blinds)}</p></div><div><span>${label}</span><button class="secondary" data-replay-id="${row.id}">상세 로그</button></div></article>` };
  }

  function renderProfile() {
    if (!state.user) return;
    const winRate = state.user.hands ? Math.round((state.user.wins / state.user.hands) * 1000) / 10 : 0;
    $('profileStats').innerHTML = [
      ['보유 포인트', `${fmt(state.user.chips)}P`],
      ['누적 전적', `${state.user.wins}승 ${state.user.losses}패`],
      ['승률', `${winRate}%`],
      ['누적 RP', fmt(state.user.rankPoints)],
      ['주간 RP', fmt(state.user.weeklyRankPoints)],
      ['플레이 핸드', fmt(state.user.hands)]
    ].map(([label, value]) => `<div><span>${label}</span><b>${value}</b></div>`).join('');
    const avatars = state.user.inventory?.avatars || [];
    $('avatarInventory').innerHTML = avatars.map((avatar) => `<button class="avatar-option ${avatar === state.user.avatar ? 'selected' : ''}" data-select-avatar="${avatar}">${avatar}</button>`).join('');
    const skins = state.user.inventory?.skins || ['classic'];
    const skinNames = { classic: '클래식', 'azure-dragon': '청룡', 'white-tiger': '백호', 'black-tortoise': '현무', 'vermilion-bird': '주작', 'golden-dragon': '황룡' };
    $('skinInventory').innerHTML = skins.map((skin) => `<button class="skin-option skin-${skin} ${skin === state.user.selectedSkin ? 'selected' : ''}" data-skin="${skin}" data-select-skin="${skin}">${escapeHtml(skinNames[skin] || skin)}</button>`).join('');
    const cardSkins = state.user.inventory?.cardSkins || ['classic-card'];
    const cardSkinNames = { 'classic-card':'클래식', 'midnight-blue':'미드나이트', 'emerald-grid':'에메랄드', 'royal-gold':'로열 골드', 'crimson-dragon':'크림슨', 'violet-neon':'바이올렛' };
    $('cardSkinInventory').innerHTML = cardSkins.map((skin) => `<div class="card-skin-inventory-item"><button class="card-skin-option ${skin === state.user.selectedCardSkin ? 'selected' : ''}" data-select-card-skin="${skin}" title="${escapeHtml(cardSkinNames[skin] || skin)}"><span class="playing-card back card-back-${skin}" style="${cardSkinInlineStyle(skin)}"><span class="card-back-mark">♠</span></span><b>${escapeHtml(cardSkinNames[skin] || skin)}</b></button><button class="card-skin-mini-preview" type="button" data-card-skin-preview="${skin}" data-card-skin-name="${escapeHtml(cardSkinNames[skin] || skin)}">보기</button></div>`).join('');
    $('emojiInventory').innerHTML = (state.user.inventory?.emojis || []).map((emoji) => `<span>${emoji}</span>`).join('');


    if ($('voucherWallet')) $('voucherWallet').textContent = `${fmt(state.user.exchangeablePoints ?? state.user.chips)}P`;
    if ($('voucherRestriction')) {
      const remaining = Number(state.user.rewardUnlockRemainingHands || 0);
      const locked = Number(state.user.restrictedExchangePoints || 0);
      $('voucherRestriction').classList.toggle('hidden', remaining <= 0 || locked <= 0);
      $('voucherRestriction').innerHTML = remaining > 0 && locked > 0
        ? `<b>보상 포인트 교환 잠금</b><span>가입·신규·주간 보상 ${fmt(locked)}P는 ${fmt(remaining)}핸드를 더 완료하면 교환할 수 있습니다. 게임 플레이에는 사용할 수 있습니다.</span>`
        : '';
    }
    const voucherRows = state.userRedemptions || [];
    if ($('voucherHistory')) {
      const labels = { pending: '처리 대기', approved: '승인 완료', rejected: '반려·환불' };
      $('voucherHistory').innerHTML = voucherRows.map((row) => `<article class="voucher-row status-${row.status}">
        <div><b>${escapeHtml(row.reward)}</b><small>${new Date(row.createdAt).toLocaleString('ko-KR')} · ${escapeHtml(row.contact || '')}</small></div>
        <div><strong>${fmt(row.points)}P</strong><span>${labels[row.status] || escapeHtml(row.status)}</span></div>
        ${row.adminNote ? `<p>관리자 메모: ${escapeHtml(row.adminNote)}</p>` : ''}
      </article>`).join('') || '<div class="voucher-empty">아직 신청한 교환권이 없습니다.</div>';
    }

    const jackpot = state.jackpot || { balance: 10000000, claims: [] };
    $('jackpotBalanceLabel').textContent = `현재 잭팟 ${fmt(jackpot.balance)}P`;
    const jackpotClaims = jackpot.claims || [];
    $('jackpotPanel').innerHTML = `<div class="jackpot-summary jackpot-summary-compact"><div><span>현재 누적</span><b>${fmt(jackpot.balance)}P</b></div><div><span>내 수령 누계</span><b>${fmt(state.user.jackpotWins || 0)}P</b></div></div>
      <div class="jackpot-rate-note"><b>잭팟 대상: 포카드 · 스티플 · 로티플의 원핸드/투핸드</b><br>보드 5장만으로 완성된 족보와 단순 키커는 제외됩니다.</div>
      <div class="jackpot-claims">${jackpotClaims.map((claim) => `<article><div><b>${escapeHtml(claim.handName)}</b><small>${escapeHtml(claim.roomName)} · Hand #${claim.handNo} · ${claim.percent}%</small></div><div><strong>${fmt(claim.amount)}P</strong>${claim.status === 'claimable' ? `<button class="gold" data-jackpot-claim="${claim.id}">받기</button>` : '<span class="claimed">수령 완료</span>'}</div></article>`).join('') || '<p>아직 달성한 잭팟 보상이 없습니다.</p>'}</div>`;

    const rows = (state.history || []).map(historyRow).filter((row) => state.historyFilter === 'all' || (state.historyFilter === 'win' ? row.won : !row.won));
    $('profileHistory').innerHTML = rows.map((row) => row.html).join('') || '<div class="info-card glass">해당하는 게임 기록이 없습니다.</div>';
    document.querySelectorAll('[data-history-filter]').forEach((button) => button.classList.toggle('active', button.dataset.historyFilter === state.historyFilter));
  }

  function showLobby() {
    clearWinFx();
    state.myCardPeekOpen = false;
    collapseHoleCards();
    $('pokerTable')?.classList.remove('my-turn-pulse');
    $('gameView').classList.add('hidden');
    $('lobbyView').classList.remove('hidden');
    document.body.classList.remove('game-active');
    setMobileNav(false);
    socket.emit('bootstrap:refresh', () => {});
  }

  function syncGameSideDrawerForViewport() {
    if (window.matchMedia('(min-width:761px)').matches) state.sideDrawerOpen = true;
    $('gameSideDrawer').classList.toggle('collapsed', !state.sideDrawerOpen);
    $('sideDrawerToggle').setAttribute('aria-expanded', state.sideDrawerOpen ? 'true' : 'false');
    $('sideDrawerToggle').querySelector('span').textContent = state.sideDrawerOpen ? '▶' : '◀';
  }

  function showGameView() {
    setMobileNav(false);
    document.body.classList.add('game-active');
    $('lobbyView').classList.add('hidden');
    $('gameView').classList.remove('hidden');
    window.scrollTo({ top: 0, behavior: 'auto' });
    syncGameSideDrawerForViewport();
    setSidePanel('chat');
    const payload = currentRoom();
    if (payload) renderGame(payload);
  }

  function openRoom(roomId, options = {}) {
    if (!roomId) return toast('게임방 정보를 찾을 수 없습니다.', 'error');
    state.activeRoomId = roomId;
    state.emojiTargetSeatIndex = null;
    state.allInSelected = false;
    renderMyRoomTabs();
    showGameView();
    if (!state.roomStates[roomId] && options.skipSpectate !== true) {
      socket.emit('room:spectate', { roomId }, (result) => {
        if (!result?.ok) {
          showLobby();
          toast(result?.message || '모바일에서 게임방 정보를 불러오지 못했습니다.', 'error');
        }
      });
    }
  }

  function joinRoom(roomId) {
    const room = state.rooms.find((entry) => entry.id === roomId);
    let password = '';
    if (room?.locked) password = prompt('방 비밀번호를 입력하세요.') || '';
    socket.emit('room:spectate', { roomId, password }, (result) => {
      if (!result?.ok) return toast(result?.message || '방에 입장할 수 없습니다.', 'error');
      openRoom(result.roomId, { skipSpectate: true }); playSound('click');
      toast('게임방에 입장했습니다. 원하는 좌석의 착석 버튼을 누르세요.', 'info');
    });
  }

  function watchRoom(roomId) {
    socket.emit('room:spectate', { roomId }, (result) => {
      if (!result?.ok) return toast(result?.message || '관전할 수 없습니다.', 'error');
      openRoom(roomId, { skipSpectate: true });
    });
  }

  function cardHtml(card, small = false, extraClass = '', delayMs = 0) {
    const style = `--deal-delay:${Number(delayMs || 0)}ms`;
    if (!card) { const backSkin = state.user?.selectedCardSkin || 'classic-card'; return `<div class="playing-card ${small ? 'small' : ''} ${extraClass} back card-back-${backSkin}" style="${style};${cardSkinInlineStyle(backSkin)}"><div class="card-back-mark">♠</div></div>`; }
    const rank = ({ 11: 'J', 12: 'Q', 13: 'K', 14: 'A' })[card.rank] || card.rank;
    const suit = ({ s: '♠', h: '♥', d: '♦', c: '♣' })[card.suit];
    const red = card.suit === 'h' || card.suit === 'd';
    return `<div class="playing-card ${small ? 'small' : ''} ${red ? 'red' : 'black'} ${extraClass}" style="${style}">
      <div class="card-corner top"><b>${rank}</b><span>${suit}</span></div>
      <div class="card-center-suit">${suit}</div>
      <div class="card-corner bottom"><b>${rank}</b><span>${suit}</span></div>
    </div>`;
  }


  function evaluateFiveClient(cards) {
    const ranks = cards.map((card) => Number(card.rank)).sort((a, b) => b - a);
    const counts = {};
    ranks.forEach((rank) => { counts[rank] = (counts[rank] || 0) + 1; });
    const groups = Object.entries(counts)
      .map(([rank, count]) => ({ rank: Number(rank), count }))
      .sort((a, b) => b.count - a.count || b.rank - a.rank);
    const flush = cards.every((card) => card.suit === cards[0].suit);
    const unique = [...new Set(ranks)].sort((a, b) => b - a);
    if (unique.includes(14)) unique.push(1);
    let straightHigh = 0;
    for (let index = 0; index <= unique.length - 5; index += 1) {
      let sequential = true;
      for (let step = 1; step < 5; step += 1) if (unique[index + step] !== unique[index] - step) sequential = false;
      if (sequential) { straightHigh = unique[index]; break; }
    }
    if (flush && straightHigh) return { category: 8, tiebreak: [straightHigh], name: straightHigh === 14 ? '로열 스트레이트 플러시' : '스트레이트 플러시' };
    if (groups[0]?.count === 4) return { category: 7, tiebreak: [groups[0].rank, groups[1]?.rank || 0], name: '포카드' };
    if (groups[0]?.count === 3 && groups[1]?.count === 2) return { category: 6, tiebreak: [groups[0].rank, groups[1].rank], name: '풀하우스' };
    if (flush) return { category: 5, tiebreak: ranks, name: '플러시' };
    if (straightHigh) return { category: 4, tiebreak: [straightHigh], name: '스트레이트' };
    if (groups[0]?.count === 3) return { category: 3, tiebreak: [groups[0].rank, ...groups.slice(1).map((group) => group.rank).sort((a, b) => b - a)], name: '트리플' };
    if (groups[0]?.count === 2 && groups[1]?.count === 2) {
      const pairs = [groups[0].rank, groups[1].rank].sort((a, b) => b - a);
      const kicker = groups.find((group) => group.count === 1)?.rank || 0;
      return { category: 2, tiebreak: [...pairs, kicker], name: '투페어' };
    }
    if (groups[0]?.count === 2) {
      const kickers = groups.filter((group) => group.count === 1).map((group) => group.rank).sort((a, b) => b - a);
      return { category: 1, tiebreak: [groups[0].rank, ...kickers], name: '원페어' };
    }
    return { category: 0, tiebreak: ranks, name: '하이카드' };
  }

  function compareClientHands(left, right) {
    if (left.category !== right.category) return left.category - right.category;
    const length = Math.max(left.tiebreak.length, right.tiebreak.length);
    for (let index = 0; index < length; index += 1) {
      const difference = (left.tiebreak[index] || 0) - (right.tiebreak[index] || 0);
      if (difference) return difference;
    }
    return 0;
  }

  function evaluateBestClient(cards) {
    if (!Array.isArray(cards) || cards.length < 5) return null;
    let best = null;
    for (let a = 0; a < cards.length - 4; a += 1)
      for (let b = a + 1; b < cards.length - 3; b += 1)
        for (let c = b + 1; c < cards.length - 2; c += 1)
          for (let d = c + 1; d < cards.length - 1; d += 1)
            for (let e = d + 1; e < cards.length; e += 1) {
              const evaluated = evaluateFiveClient([cards[a], cards[b], cards[c], cards[d], cards[e]]);
              if (!best || compareClientHands(evaluated, best) > 0) best = evaluated;
            }
    return best;
  }

  function renderMyHandAssist(payload = currentRoom()) {
    const guide = $('myHandGuide');
    const guideName = $('myHandGuideName');
    const dock = $('myCardPeekDock');
    const button = $('myCardPeekBtn');
    const panel = $('myCardPeekPanel');
    const cardsNode = $('myCardPeekCards');
    if (!guide || !dock || !button || !panel || !cardsNode) return;

    const me = viewerSeat(payload);
    const hole = Array.isArray(me?.cards) ? me.cards.filter(Boolean) : [];
    const board = Array.isArray(payload?.game?.board) ? payload.game.board.filter(Boolean) : [];
    const canEvaluate = Boolean(me && !me.folded && hole.length === 2 && board.length >= 3);
    if (canEvaluate) {
      const evaluated = evaluateBestClient([...hole, ...board]);
      guideName.textContent = evaluated?.name || '확인 중';
      guide.classList.remove('hidden');
      guide.dataset.category = String(evaluated?.category ?? 0);
    } else {
      guide.classList.add('hidden');
      guideName.textContent = '-';
      guide.removeAttribute('data-category');
    }

    const isMyTurn = Boolean(me && !me.folded && hole.length === 2 && payload?.game?.active && Number(payload.game.actionIndex) === Number(me.seatIndex));
    dock.classList.toggle('hidden', !isMyTurn);
    if (!isMyTurn) state.myCardPeekOpen = false;
    button.setAttribute('aria-expanded', state.myCardPeekOpen ? 'true' : 'false');
    button.textContent = state.myCardPeekOpen ? '내 카드 닫기' : '내 카드 보기';
    panel.classList.toggle('hidden', !state.myCardPeekOpen || !isMyTurn);
    cardsNode.innerHTML = isMyTurn ? hole.map((card) => cardHtml(card, false, 'my-card-peek-face')).join('') : '';
  }


  function actionBadge(action = '') {
    const text = String(action || '').trim();
    if (!text) return { text: '', kind: 'none' };
    if (text.startsWith('레이즈')) return { text, kind: 'raise' };
    if (text.startsWith('콜')) return { text, kind: 'call' };
    if (text.startsWith('체크')) return { text, kind: 'check' };
    if (text.startsWith('폴드')) return { text, kind: 'fold' };
    if (text.startsWith('올인')) return { text, kind: 'allin' };
    if (text.startsWith('SB') || text.startsWith('BB')) return { text, kind: 'blind' };
    return { text, kind: 'status' };
  }

  function renderGame(payload, options = {}) {
    if (!payload || payload.room.id !== state.activeRoomId) return;
    if (payload.game.active && !payload.game.lastResult) clearWinFx();
    const { room, game, seats, viewer, chat, meta } = payload;
    const mySeat = viewerSeat(payload);
    const myActualIndex = mySeat?.seatIndex ?? -1;
    const visualIndex = (actual) => myActualIndex >= 0 ? (actual - myActualIndex + 8) % 8 : actual;

    $('gameRoomName').textContent = room.name;
    $('gameBlinds').textContent = `최소 ${fmt(room.buyIn)}P · ${fmt(room.smallBlind)} / ${fmt(room.bigBlind)}`;
    $('gameOccupancy').textContent = `${room.total || seats.filter(Boolean).length}/${room.maxPlayers || 8}명`;
    $('myBuyInBadge').classList.toggle('hidden', !mySeat);
    $('myBuyInBadge').textContent = mySeat ? `테이블 보유 ${fmt(mySeat.stack || 0)}P` : '테이블 보유 0P';
    state.tableCloseDeadline = Number(room.closesAt || 0) || null;
    $('spectatorBadge').classList.toggle('hidden', !viewer.isSpectator && !mySeat?.rebuyDeadline);
    $('spectatorBadge').textContent = viewer.pending
      ? `예약 대기 ${viewer.reservationPosition || 1}번`
      : mySeat?.rebuyDeadline ? '리바이 대기' : (viewer.isSpectator ? '관전 중' : '플레이 중');
    $('quickSitBtn').classList.toggle('hidden', !viewer.isSpectator || viewer.pending);
    if (viewer.isSpectator && !viewer.pending) {
      $('quickSitBtn').textContent = seats.some((seat) => !seat) ? '빠른 착석' : '예약';
    }
    $('rebuyBtn').classList.toggle('hidden', !mySeat?.rebuyDeadline);
    const exitIsReserved = Boolean(mySeat?.exitReserved || state.pendingExitRooms.has(room.id));
    if (mySeat && !mySeat.exitReserved) state.pendingExitRooms.delete(room.id);
    $('exitRoomBtn').classList.remove('hidden');
    $('exitRoomBtn').disabled = false;
    $('exitRoomBtn').textContent = exitIsReserved ? '나가기 취소' : '방 나가기';
    $('exitRoomBtn').classList.toggle('exit-cancel-mode', exitIsReserved);
    const exitQuote = mySeat?.earlyExitQuote;
    if ($('earlyExitNotice')) {
      const showPolicy = Boolean(mySeat && Number(exitQuote?.sessionHands || 0) < Number(exitQuote?.requiredHands || 50));
      $('earlyExitNotice').classList.toggle('hidden', !showPolicy);
      $('earlyExitNotice').innerHTML = showPolicy
        ? `<b>${Number(exitQuote.sessionHands || 0)}/50핸드</b><span>50핸드 전에 나가면 순이익의 20% 공제${Number(exitQuote.fee || 0) > 0 ? ` · 현재 예상 ${fmt(exitQuote.fee)}P` : ''}</span>`
        : '';
    }
    $('gamePhase').textContent = `HAND #${game.handNo} · ${phaseName(game.phase).toUpperCase()}`;
    $('gamePot').textContent = `POT ${fmt(game.pot)}P`;
    if ($('tableJackpot')) $('tableJackpot').innerHTML = `<span>JACKPOT</span><b>${fmt(state.jackpot?.balance || 10000000)}P</b>`;
    const animateBoard = !options.suppressFx && ['board', 'board-card'].includes(meta?.animation);
    const animatedBoardIndex = Number.isInteger(Number(meta?.boardCardIndex)) ? Number(meta.boardCardIndex) : game.board.length - 1;
    $('boardCards').innerHTML = game.board.map((card, index) => cardHtml(card, false, animateBoard && index === animatedBoardIndex ? 'board-deal-card' : '', 0)).join('');
    renderPotStack(game.pot, room.bigBlind, { stable: Boolean(game.dealing || meta?.animation === 'deal-card') });
    $('gameMessage').textContent = game.dealing
      ? `카드를 한 장씩 나누는 중… ${Math.min(game.dealPosition || 0, game.dealTotal || 0)}/${game.dealTotal || 0}`
      : game.revealAll && game.active ? 'ALL-IN SHOW · 모든 생존 패를 공개하고 보드를 진행합니다.'
      : !game.active ? (viewer.isSpectator ? '관전 중 · 좌석을 선택해 착석할 수 있습니다.' : mySeat?.rebuyDeadline ? '2분 안에 리바이하지 않으면 자동 퇴장합니다.' : '다음 핸드를 준비하는 중')
      : game.actionIndex === mySeat?.seatIndex ? '당신의 차례입니다. 20초 안에 선택하세요.'
      : `${seats[game.actionIndex]?.name || '플레이어'} 생각 중…`;

    const generalWaitingPlayers = (payload.pending || []).filter((entry) => !Number.isInteger(entry.requestedSeat)).map((entry, index) => `${escapeHtml(entry.name || '플레이어')} 대기 중${index ? ` · ${entry.position || index + 1}번` : ''}`);
    $('waitingQueueNotice').classList.toggle('hidden', generalWaitingPlayers.length === 0);
    $('waitingQueueNotice').innerHTML = generalWaitingPlayers.length ? `<b>대기석</b><span>${generalWaitingPlayers.join(' · ')}</span>` : '';
    const pendingBySeat = new Map((payload.pending || []).filter((entry) => Number.isInteger(entry.requestedSeat)).map((entry) => [Number(entry.requestedSeat), entry]));

    const dealOrder = Array.from({ length: 8 }, (_, step) => (game.dealer + 1 + step + 8) % 8).filter((index) => seats[index]?.cardCount > 0);
    const dealPosition = new Map(dealOrder.map((seatIndex, position) => [seatIndex, position]));
    $('seatLayer').innerHTML = seats.map((seat, index) => {
      const slot = visualIndex(index);
      if (!seat) {
        const waiting = pendingBySeat.get(index);
        if (waiting) return `<div class="seat empty-seat pending-seat seat${slot}" data-seat-index="${index}"><div class="pending-seat-avatar">${avatarHtml(waiting.avatar, 'pending-seat-image')}</div><b>${escapeHtml(waiting.name || '플레이어')}</b><span>대기 중</span></div>`;
        const canSit = viewer.isSpectator && !viewer.pending;
        return `<div class="seat empty-seat seat${slot}" data-seat-index="${index}"><div class="empty-seat-number">${index + 1}</div>${canSit ? `<button class="sit-seat-btn" data-sit-seat="${index}">착석</button>` : '<span>빈 좌석</span>'}</div>`;
      }
      if (seat.waitingForNextHand) {
        return `<div class="seat empty-seat pending-seat pending-seated-seat seat${slot}" data-seat-index="${index}" data-player-seat="${index}"><div class="pending-seat-avatar">${avatarHtml(seat.avatar, 'pending-seat-image')}</div><b>${escapeHtml(seat.name || '플레이어')}</b><span>대기 중</span></div>`;
      }
      const isMe = seat.userId && seat.userId === state.user?.id;
      const cards = seat.cards?.length ? seat.cards.map((card, cardIndex) => {
        const isNewDealCard = !options.suppressFx
          && meta?.animation === 'deal-card'
          && Number(meta.dealSeat) === index
          && cardIndex === seat.cards.length - 1;
        const holeClass = `${isMe ? 'my-hole-card' : ''}${isNewDealCard ? ' deal-hole-card sequential-deal-card' : ''}`.trim();
        return cardHtml(card, true, holeClass, 0);
      }).join('') : '';
      const classes = ['seat', `seat${slot}`];
      if (game.actionIndex === index && game.active) classes.push('active');
      if (seat.folded) classes.push('folded');
      if (!seat.connected && !seat.isBot) classes.push('disconnected');
      if (game.lastResult?.winners?.some((winner) => winner.seatIndex === index)) classes.push('winner-glow');
      if (state.emojiTargetSeatIndex === index) classes.push('emoji-selected');
      if (index === myActualIndex) classes.push('my-seat');
      const lastAction = actionBadge(seat.lastAction || seat.action || (seat.folded ? '폴드' : seat.rebuyDeadline ? '리바이 대기' : ''));
      const winnerRows = (game.lastResult?.winners || []).filter((winner) => Number(winner.seatIndex) === index);
      const winnerAmount = winnerRows.reduce((sum, winner) => sum + Number(winner.amount || 0), 0);
      const finalHand = game.lastResult?.hands?.[index]?.name || '';
      const winnerHand = finalHand || winnerRows.map((winner) => winner.hand).filter(Boolean).at(-1) || '';
      const inlineWin = !game.active && winnerAmount > 0
        ? `<div class="seat-win-summary winner-result"><b>+${fmt(winnerAmount)}P</b><span>${escapeHtml(winnerHand || '승리')}</span></div>`
        : !game.active && finalHand
          ? `<div class="seat-win-summary showdown-result"><b>최종 패</b><span>${escapeHtml(finalHand)}</span></div>`
          : '';
      const positionBadges = [
        game.dealer === index ? '<span class="seat-position-badge dealer-position" title="딜러 버튼">D</span>' : '',
        Number(game.smallBlindIndex) === index ? '<span class="seat-position-badge sb-position" title="스몰 블라인드">SB</span>' : '',
        Number(game.bigBlindIndex) === index ? '<span class="seat-position-badge bb-position" title="빅 블라인드">BB</span>' : ''
      ].join('');
      return `<div class="${classes.join(' ')}" data-seat-index="${index}" data-player-seat="${index}">
        ${inlineWin}${!inlineWin && lastAction.text ? `<div class="seat-last-action action-${lastAction.kind}">${escapeHtml(lastAction.text)}</div>` : ''}<div class="seat-profile-top">${avatarHtml(seat.avatar, 'seat-avatar-image')}${seat.allIn ? '<span class="allin-profile-badge">ALL IN</span>' : ''}</div>
        <div class="seat-name-row"><span class="seat-name">${escapeHtml(seat.name)}</span>${seat.isProxy && !seat.exitReserved ? '<span class="seat-badge">자동</span>' : ''}${seat.exitReserved ? '<span class="exit-reserved-badge">나가기 예약</span>' : ''}<span class="seat-position-badges">${positionBadges}</span></div>
        <div class="seat-stack">테이블 ${fmt(seat.stack)}P</div>
        <div class="seat-round-bet" aria-hidden="true"></div>
        ${Number(seat.bet || 0) > 0 ? `<div class="seat-chip-image" data-round-bet-seat="${index}" data-round-bet-amount="${Number(seat.bet || 0)}" aria-label="베팅 칩 ${fmt(seat.bet)}P"><i></i><i></i><i></i></div><div class="seat-bet-info"><span class="seat-bet-amount">${fmt(seat.bet)}P</span></div>` : '<div class="seat-bet-info seat-bet-empty" aria-hidden="true"></div>'}
        ${cards ? `<button type="button" class="hole-cards hole-cards-toggle ${state.expandedHoleSeat === index ? 'expanded' : 'collapsed'} ${isMe ? 'own-hole-cards' : ''}" data-hole-seat="${index}" aria-expanded="${state.expandedHoleSeat === index ? 'true' : 'false'}" aria-label="${isMe ? '내 카드' : '플레이어 카드'} ${state.expandedHoleSeat === index ? '접기' : '펼쳐 보기'}">${cards}</button>` : '<div class="hole-cards hole-cards-empty" aria-hidden="true"></div>'}
        ${seat.rebuyDeadline ? `<div class="seat-rebuy" data-rebuy-deadline="${seat.rebuyDeadline}">02:00</div>` : ''}
      </div>`;
    }).join('');

    const selectedTableSkin = state.user?.selectedSkin || 'classic';
    $('pokerTable').className = `poker-table skin-${selectedTableSkin}`;
    $('pokerTable').setAttribute('style', skinInlineStyle(selectedTableSkin));
    renderActionControls(); renderMyHandAssist(payload); renderChat(chat || []); renderSessionHistory(viewer.sessionHistory || []); renderEmojiBar();
    startTurnTimer(game.actionDeadline, game.actionIndex); renderMyRoomTabs();
    const gameVisible = !$('gameView').classList.contains('hidden') && room.id === state.activeRoomId;
    if (!options.suppressFx && gameVisible && meta?.animation === 'deal-card') playSound('card');
    else if (!options.suppressFx && gameVisible && meta?.animation === 'board-card') playSound('board-card');
    else if (!options.suppressFx && gameVisible && meta?.animation === 'board') playSound('card');
    if (!options.suppressFx && gameVisible && meta?.animation === 'chips') {
      animateChips(meta.actorSeat, meta.amount);
      playSound('chips');
    }
    if (!options.suppressFx && gameVisible && meta?.animation === 'collect-bets') {
      animateRoundBetsToPot(meta.roundBets || []);
      playSound('chips');
    }
    if (!options.suppressFx && gameVisible && meta?.animation === 'bets-collected') {
      playSound('chips-collect');
    }
    if (!options.suppressFx && gameVisible && ['check','call','raise','fold','allin'].includes(meta?.actionType)) speakAction(meta.actionType);
    if (game.lastResult) showResultIfNew(payload);
  }


  function renderPotStack(pot, bigBlind = 10, options = {}) {
    const stack = $('potChipStack');
    if (!stack) return;
    const amount = Math.max(0, Number(pot || 0));
    const normalized = amount / Math.max(1, Number(bigBlind || 10));
    const chipCount = amount <= 0 ? 0 : Math.max(5, Math.min(42, 5 + Math.floor(Math.log2(normalized + 1) * 4.2)));
    const colors = ['red','blue','gold','black','green'];
    const towerCount = chipCount ? Math.min(6, Math.max(2, Math.ceil(chipCount / 7))) : 0;
    const signature = `${amount}:${Math.max(1, Number(bigBlind || 10))}:${chipCount}:${towerCount}`;
    stack.classList.toggle('stable-pot', Boolean(options.stable));
    if (stack.dataset.signature === signature) return;
    stack.dataset.signature = signature;
    const towers = Array.from({length:towerCount},(_,tower)=>{
      const count = Math.max(1, Math.ceil((chipCount-tower)/towerCount));
      const chips = Array.from({length:count},(_,level)=>`<i class="vertical-chip ${colors[(tower+level)%colors.length]}" style="--level:${level};--delay:${(tower*2+level)*18}ms"></i>`).join('');
      const offset = Math.abs(tower - (towerCount - 1) / 2) * 2;
      return `<div class="vertical-chip-tower" style="--tower:${tower};--tower-count:${towerCount};--tower-offset:${offset}px">${chips}</div>`;
    }).join('');
    stack.innerHTML = `<div class="vertical-chip-pile">${towers}</div>`;
  }

  function renderActionControls() {
    const payload = currentRoom(); if (!payload) return;
    const me = viewerSeat(payload);
    const isTurn = Boolean(me && payload.game.active && payload.game.actionIndex === me.seatIndex && !payload.viewer.isSpectator && !me.folded && !me.allIn && !me.exitReserved);
    const callAmount = me ? Math.max(0, payload.game.currentBet - me.bet) : 0;
    $('actionPanel').classList.toggle('hidden', !isTurn);
    if (!isTurn) { state.allInSelected = false; document.querySelectorAll('[data-pot]').forEach((button) => button.classList.remove('selected')); return; }
    const actionPending = Boolean(state.actionPending);
    $('foldBtn').disabled = actionPending;
    $('callBtn').disabled = actionPending;
    $('raiseBtn').disabled = actionPending || !me || me.stack <= callAmount;
    const minTo = Math.min(me.bet + me.stack, Math.max(payload.game.currentBet + payload.game.minRaise, payload.room.bigBlind));
    const maxTo = me.bet + me.stack;
    $('raiseSlider').min = minTo; $('raiseSlider').max = Math.max(minTo, maxTo); $('raiseSlider').step = payload.room.bigBlind;
    if (Number($('raiseSlider').value) < minTo || Number($('raiseSlider').value) > maxTo) $('raiseSlider').value = minTo;
    const selectedRaiseTotal = state.allInSelected ? maxTo : Number($('raiseSlider').value);
    $('raiseValue').textContent = fmt(selectedRaiseTotal);
    const raiseLabel = state.allInSelected || selectedRaiseTotal >= maxTo ? 'All-in' : 'Raise';
    const raiseText = $('raiseBtn').querySelector('span:last-child'); if (raiseText) raiseText.textContent = raiseLabel;
    const callText = $('callBtn').querySelector('span:last-child'); if (callText) callText.textContent = callAmount === 0 ? 'Check' : `Call ${fmt(Math.min(callAmount, me.stack))}`;
    $('actionWaitText').textContent = actionPending ? '행동 처리 중...' : state.allInSelected ? 'ALL-IN 금액이 선택되었습니다. Raise 버튼을 누르면 실행됩니다.' : '베팅 크기를 선택한 뒤 행동하세요.';
    document.querySelector('[data-pot="allin"]')?.classList.toggle('selected', state.allInSelected);
    document.querySelectorAll('[data-pot]').forEach((button) => { button.disabled = actionPending; });
  }

  function startTurnTimer(deadline, actionIndex = -1) {
    clearInterval(state.timerInterval); state.activeTimerSeat = actionIndex;
    const render = () => {
      const seconds = deadline ? Math.max(0, Math.ceil((deadline - Date.now()) / 1000)) : 0;
      const centralTimer = $('turnTimer');
      centralTimer.textContent = deadline ? `${seconds}s` : '--';
      centralTimer.classList.toggle('active', Boolean(deadline));
      centralTimer.classList.toggle('urgent', Boolean(deadline) && seconds <= 5);
      centralTimer.setAttribute('aria-hidden', deadline ? 'false' : 'true');
      if ($('tableOpenCountdown')) {
        const leftMs = Math.max(0, Number(state.tableCloseDeadline || 0) - Date.now());
        const total = Math.ceil(leftMs / 1000);
        const hh = String(Math.floor(total / 3600)).padStart(2, '0');
        const mm = String(Math.floor((total % 3600) / 60)).padStart(2, '0');
        const ss = String(total % 60).padStart(2, '0');
        $('tableOpenCountdown').textContent = `${hh}:${mm}:${ss}`;
        $('tableOpenCountdown').classList.toggle('urgent', total <= 600);
      }
      document.querySelectorAll('[data-rebuy-deadline]').forEach((node) => {
        const left = Math.max(0, Math.ceil((Number(node.dataset.rebuyDeadline) - Date.now()) / 1000));
        node.textContent = `${String(Math.floor(left / 60)).padStart(2, '0')}:${String(left % 60).padStart(2, '0')}`;
        if (node.closest('.my-seat')) $('rebuyCountdown').textContent = node.textContent;
      });
      if (deadline && seconds <= 0) clearInterval(state.timerInterval);
    };
    render(); state.timerInterval = setInterval(render, 250);
  }

  function renderChat(rows) {
    $('chatList').innerHTML = rows.map((row) => row.type === 'emoji'
      ? `<div class="chat-row emoji-chat"><b>${avatarHtml(row.avatar, 'chat-avatar')} ${escapeHtml(row.name)}</b><span>${row.text}</span><small>→ ${escapeHtml(row.targetName || '테이블')}${row.cost ? ` · ${row.cost}P` : ''}</small></div>`
      : `<div class="chat-row"><b>${avatarHtml(row.avatar, 'chat-avatar')} ${escapeHtml(row.name)}</b><br>${escapeHtml(row.text)}</div>`).join('');
    $('chatList').scrollTop = $('chatList').scrollHeight;
  }

  function renderSessionHistory(rows) {
    $('sessionHistory').innerHTML = rows.map((row) => `<article class="session-row ${Number(row.net) >= 0 ? 'win' : 'loss'}"><div><b>Hand #${row.handNo} · ${escapeHtml(row.result)}</b><small>${escapeHtml(row.relation || '상대 결과 기록 없음')}</small><small>${new Date(row.at).toLocaleTimeString('ko-KR')} · ${escapeHtml(row.hand)}</small></div><strong>${Number(row.net) >= 0 ? '+' : ''}${fmt(row.net)}P</strong><div class="session-own-cards"><span>내 카드</span><div>${(row.cards || []).map((card) => cardHtml(card, true)).join('')}</div></div>${historyBoardHtml(row.board || [], true)}${(row.revealedOpponents || []).length ? `<div class="session-open-opponents"><b>오픈된 상대 카드</b>${row.revealedOpponents.map((opponent) => `<div><span>${escapeHtml(opponent.name)} · ${escapeHtml(opponent.hand || '')}</span><div>${(opponent.cards || []).map((card) => cardHtml(card, true)).join('')}</div></div>`).join('')}</div>` : ''}</article>`).join('') || '<div class="info-card">이 방에서 완료한 게임이 아직 없습니다.</div>';
  }

  function chipLabelsForAmount(amount = 0) {
    return amount >= 10000 ? ['1K','5K','1K'] : amount >= 1000 ? ['500','1K','500'] : ['10','50','100'];
  }

  function animateChips(actorSeat, amount = 0) {
    const layer = $('chipAnimationLayer');
    const seat = document.querySelector(`[data-seat-index="${actorSeat}"]`);
    if (!layer || !seat) return;
    const tableRect = $('pokerTable').getBoundingClientRect();
    const seatRect = seat.getBoundingClientRect();
    const targetNode = seat.querySelector('.seat-chip-image') || seat.querySelector('[data-round-bet-seat]') || seat.querySelector('.seat-bet-info:not(.seat-bet-empty)');
    const targetRect = targetNode?.getBoundingClientRect?.();
    const sx = seatRect.left - tableRect.left + seatRect.width / 2;
    const sy = seatRect.top - tableRect.top + seatRect.height * .48;
    const tx = targetRect ? targetRect.left - tableRect.left + targetRect.width / 2 : sx;
    const ty = targetRect ? targetRect.top - tableRect.top + targetRect.height / 2 : seatRect.top - tableRect.top - 16;
    const labels = chipLabelsForAmount(amount);
    for (let i = 0; i < 7; i += 1) {
      const chip = document.createElement('div');
      chip.className = `flying-chip seat-bet-flying-chip chip-${i % 3}`;
      chip.textContent = labels[i % labels.length];
      chip.style.setProperty('--sx', `${sx + (i - 3) * 5}px`);
      chip.style.setProperty('--sy', `${sy + (i % 2) * 4}px`);
      chip.style.setProperty('--tx', `${tx + (i - 3) * 3}px`);
      chip.style.setProperty('--ty', `${ty + (i % 2) * 3}px`);
      chip.style.animationDelay = `${i * 32}ms`;
      layer.appendChild(chip);
      setTimeout(() => chip.remove(), 950);
    }
  }

  function animateRoundBetsToPot(roundBets = []) {
    const layer = $('chipAnimationLayer');
    const table = $('pokerTable');
    if (!layer || !table) return;
    const tableRect = table.getBoundingClientRect();
    const tx = tableRect.width / 2;
    const ty = tableRect.height * .47;
    roundBets.forEach((amount, seatIndex) => {
      if (Number(amount || 0) <= 0) return;
      const seat = document.querySelector(`[data-seat-index="${seatIndex}"]`);
      const marker = seat?.querySelector('.seat-chip-image') || document.querySelector(`[data-round-bet-seat="${seatIndex}"]`) || seat?.querySelector('.seat-bet-info:not(.seat-bet-empty)');
      const node = marker || seat;
      if (!node) return;
      const rect = node.getBoundingClientRect();
      const sx = rect.left - tableRect.left + rect.width / 2;
      const sy = rect.top - tableRect.top + rect.height / 2;
      const labels = chipLabelsForAmount(amount);
      for (let index = 0; index < 8; index += 1) {
        const chip = document.createElement('div');
        chip.className = `flying-chip round-to-pot-chip chip-${index % 3}`;
        chip.textContent = labels[index % labels.length];
        chip.style.setProperty('--sx', `${sx + ((index % 4) - 1.5) * 5}px`);
        chip.style.setProperty('--sy', `${sy + (index % 2) * 4}px`);
        chip.style.setProperty('--tx', `${tx + ((index % 5) - 2) * 5}px`);
        chip.style.setProperty('--ty', `${ty + (index % 3) * 4}px`);
        chip.style.animationDelay = `${seatIndex * 24 + index * 28}ms`;
        layer.appendChild(chip);
        setTimeout(() => chip.remove(), 1050);
      }
      marker?.classList.add('collecting');
    });
  }

  function playEmoteSound(effect, stage = 'launch') {
    if (!state.sound || !effect || effect === 'float') return;
    try {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      const ctx = new AudioContext();
      const now = ctx.currentTime;
      const master = ctx.createGain();
      master.gain.value = .72;
      master.connect(ctx.destination);

      const tone = (frequency, start, duration, type = 'sine', gainValue = .12, endFrequency = null) => {
        const oscillator = ctx.createOscillator();
        const gain = ctx.createGain();
        oscillator.type = type;
        oscillator.frequency.setValueAtTime(frequency, now + start);
        if (endFrequency) oscillator.frequency.exponentialRampToValueAtTime(Math.max(25, endFrequency), now + start + duration);
        gain.gain.setValueAtTime(gainValue, now + start);
        gain.gain.exponentialRampToValueAtTime(.001, now + start + duration);
        oscillator.connect(gain).connect(master);
        oscillator.start(now + start);
        oscillator.stop(now + start + duration);
      };
      const noise = (start, duration, gainValue, frequency, type = 'bandpass') => {
        const length = Math.max(1, Math.floor(ctx.sampleRate * duration));
        const buffer = ctx.createBuffer(1, length, ctx.sampleRate);
        const samples = buffer.getChannelData(0);
        for (let index = 0; index < length; index += 1) {
          const envelope = Math.pow(1 - index / length, 2.4);
          samples[index] = (Math.random() * 2 - 1) * envelope;
        }
        const source = ctx.createBufferSource();
        const filter = ctx.createBiquadFilter();
        const gain = ctx.createGain();
        filter.type = type;
        filter.frequency.value = frequency;
        filter.Q.value = .8;
        gain.gain.setValueAtTime(gainValue, now + start);
        gain.gain.exponentialRampToValueAtTime(.001, now + start + duration);
        source.buffer = buffer;
        source.connect(filter).connect(gain).connect(master);
        source.start(now + start);
      };

      if (effect === 'gun') {
        if (stage === 'launch') { noise(0, .075, .30, 2100, 'highpass'); tone(125, 0, .12, 'square', .15, 58); tone(950, .012, .055, 'sawtooth', .08, 340); }
        else { tone(155, 0, .11, 'sine', .09, 70); noise(.01, .09, .12, 720); }
      } else if (effect === 'egg') {
        if (stage === 'launch') { noise(0, .24, .08, 900, 'highpass'); tone(520, 0, .22, 'sine', .04, 170); }
        else { noise(0, .16, .24, 430, 'lowpass'); tone(145, .01, .18, 'triangle', .12, 70); tone(690, .02, .07, 'sine', .04, 280); }
      } else if (effect === 'tomato') {
        if (stage === 'launch') { noise(0, .20, .07, 780, 'bandpass'); tone(380, 0, .18, 'sine', .04, 135); }
        else { noise(0, .22, .28, 300, 'lowpass'); tone(105, 0, .20, 'triangle', .15, 48); tone(240, .035, .12, 'sine', .06, 90); }
      } else if (effect === 'kiss') {
        if (stage === 'launch') { tone(660, 0, .07, 'sine', .10, 910); tone(980, .07, .10, 'sine', .09, 1320); }
        else { tone(880, 0, .12, 'sine', .08, 1180); tone(1320, .10, .18, 'sine', .07, 1760); }
      } else if (effect === 'lightning') {
        if (stage === 'launch') { noise(0, .16, .24, 3500, 'highpass'); tone(1280, 0, .16, 'sawtooth', .11, 180); tone(2200, .035, .08, 'square', .06, 420); }
        else { noise(0, .21, .25, 2400, 'bandpass'); tone(520, 0, .22, 'sawtooth', .13, 65); }
      }
      setTimeout(() => ctx.close(), 750);
    } catch { /* autoplay or browser audio restriction */ }
  }

  function showFloatingEmoji(data) {
    if (data.roomId !== state.activeRoomId) return;
    const layer = $('emojiLayer');
    const table = $('pokerTable');
    const tableRect = table.getBoundingClientRect();
    const source = data.sourceSeatIndex >= 0 ? document.querySelector(`[data-seat-index="${data.sourceSeatIndex}"]`) : null;
    const target = data.targetSeatIndex >= 0 ? document.querySelector(`[data-seat-index="${data.targetSeatIndex}"]`) : null;
    const point = (node, fallbackX, fallbackY) => {
      if (!node) return { x: fallbackX, y: fallbackY };
      const rect = node.getBoundingClientRect();
      return { x: rect.left - tableRect.left + rect.width / 2, y: rect.top - tableRect.top + rect.height / 2 };
    };
    const from = point(source, tableRect.width / 2, tableRect.height * .82);
    const to = point(target, tableRect.width / 2, tableRect.height * .45);

    if (data.effect === 'float') {
      const node = document.createElement('div');
      node.className = 'floating-emoji free-reaction'; node.textContent = data.emoji;
      node.style.left = `${to.x}px`; node.style.top = `${to.y}px`;
      layer.appendChild(node); setTimeout(() => node.remove(), 2300); return;
    }

    playEmoteSound(data.effect, 'launch');
    const projectile = document.createElement('div');
    projectile.className = `emote-projectile effect-${data.effect}`;
    projectile.textContent = data.emoji;
    projectile.style.setProperty('--sx', `${from.x}px`); projectile.style.setProperty('--sy', `${from.y}px`);
    projectile.style.setProperty('--tx', `${to.x}px`); projectile.style.setProperty('--ty', `${to.y}px`);
    projectile.style.setProperty('--mx', `${(from.x + to.x) / 2}px`); projectile.style.setProperty('--my', `${(from.y + to.y) / 2 - 110}px`);
    layer.appendChild(projectile);

    if (data.effect === 'gun') {
      const bullet = document.createElement('div');
      bullet.className = 'emote-projectile bullet'; bullet.textContent = '💦';
      bullet.style.cssText = projectile.style.cssText; layer.appendChild(bullet);
      setTimeout(() => bullet.remove(), 900);
    }
    setTimeout(() => {
      playEmoteSound(data.effect, 'impact');
      const hit = document.createElement('div');
      hit.className = `emote-hit hit-${data.effect}`;
      hit.textContent = ({ gun: '💥', egg: '🍳', tomato: '💢', kiss: '💕', lightning: '⚡' })[data.effect] || '✨';
      hit.style.left = `${to.x}px`; hit.style.top = `${to.y}px`;
      layer.appendChild(hit); setTimeout(() => hit.remove(), 1500);
    }, 650);
    setTimeout(() => projectile.remove(), 1100);
  }

  function clearWinFx() {
    (state.winFxTimers || []).forEach((timer) => clearTimeout(timer));
    state.winFxTimers = [];
    document.querySelectorAll('.pot-to-winner-chip,.winner-money-fx,.winner-hand-fx').forEach((node) => node.remove());
    document.querySelectorAll('.seat.win-award-pulse').forEach((node) => node.classList.remove('win-award-pulse'));
    $('potChipStack')?.classList.remove('pot-awarding');
  }

  function animatePotToWinner(winner, order = 0) {
    const layer = $('chipAnimationLayer');
    const table = $('pokerTable');
    const seat = document.querySelector(`[data-seat-index="${winner.seatIndex}"]`);
    if (!layer || !table || !seat) return;
    const tableRect = table.getBoundingClientRect();
    const seatRect = seat.getBoundingClientRect();
    const sx = tableRect.width / 2;
    const sy = tableRect.height * .47;
    const tx = seatRect.left - tableRect.left + seatRect.width / 2;
    const ty = seatRect.top - tableRect.top + seatRect.height / 2;
    const delayBase = order * 260;

    $('potChipStack')?.classList.add('pot-awarding');
    seat.classList.add('win-award-pulse');
    for (let index = 0; index < 12; index += 1) {
      const chip = document.createElement('i');
      chip.className = `pot-to-winner-chip chip-${index % 3}`;
      chip.style.setProperty('--sx', `${sx + ((index % 5) - 2) * 8}px`);
      chip.style.setProperty('--sy', `${sy + (index % 3) * 5}px`);
      chip.style.setProperty('--tx', `${tx + ((index % 4) - 1.5) * 7}px`);
      chip.style.setProperty('--ty', `${ty + (index % 3) * 5}px`);
      chip.style.animationDelay = `${delayBase + index * 32}ms`;
      layer.appendChild(chip);
      state.winFxTimers.push(setTimeout(() => chip.remove(), delayBase + 1450));
    }

    const money = document.createElement('div');
    money.className = 'winner-money-fx';
    money.textContent = `테이블 머니 +${fmt(winner.amount)}P`;
    money.style.left = `${tx}px`;
    money.style.top = `${ty}px`;
    money.style.animationDelay = `${delayBase + 330}ms`;
    layer.appendChild(money);

    const hand = document.createElement('div');
    hand.className = 'winner-hand-fx';
    hand.textContent = `${winner.hand || '승리'} 승리`;
    hand.style.left = `${tx}px`;
    hand.style.top = `${ty}px`;
    hand.style.animationDelay = `${delayBase + 400}ms`;
    layer.appendChild(hand);

    state.winFxTimers.push(setTimeout(() => playSound('pot-award'), delayBase + 560));
    state.winFxTimers.push(setTimeout(() => money.remove(), delayBase + 3100));
    state.winFxTimers.push(setTimeout(() => hand.remove(), delayBase + 3300));
    state.winFxTimers.push(setTimeout(() => seat.classList.remove('win-award-pulse'), delayBase + 3400));
    state.winFxTimers.push(setTimeout(() => $('potChipStack')?.classList.remove('pot-awarding'), delayBase + 1450));
  }

  function showResultIfNew(payload) {
    const { room, game } = payload;
    const result = game.lastResult;
    const key = `${room.id}-${game.handNo}`;
    if (!result || state.resultKeys.has(key)) return;
    state.resultKeys.add(key);
    const gameVisible = !$('gameView').classList.contains('hidden') && room.id === state.activeRoomId;
    if (!gameVisible) return;

    clearWinFx();
    const grouped = new Map();
    (result.winners || []).forEach((winner) => {
      const seatIndex = Number(winner.seatIndex);
      const current = grouped.get(seatIndex) || { seatIndex, name: winner.name, amount: 0, hand: winner.hand || '승리' };
      current.amount += Number(winner.amount || 0);
      if (winner.hand) current.hand = winner.hand;
      grouped.set(seatIndex, current);
    });
    [...grouped.values()].forEach((winner, index) => animatePotToWinner(winner, index));

    if (result.jackpotClaims?.length) {
      const names = result.jackpotClaims.map((claim) => `${claim.name} ${claim.handName} +${fmt(claim.amount)}P`).join(' · ');
      state.winFxTimers.push(setTimeout(() => toast(`🎰 잭팟 ${names}`, 'success'), 900));
    }
  }

  function notifyTurnIfNeeded(payload) {
    const me = viewerSeat(payload);
    if (!me || !payload.game?.active || payload.game.actionIndex !== me.seatIndex || me.folded || me.allIn) return;
    const key = `${payload.room.id}-${payload.game.handNo}-${payload.game.actionIndex}`;
    if (state.turnAlertKeys.has(key)) return;
    state.turnAlertKeys.add(key);
    playSound('turn');
    renderMyRoomTabs();
    const holeText = (me.cards || []).filter(Boolean).map(compactCardLabel).join(' ');
    const gameVisible = payload.room.id === state.activeRoomId && !$('gameView').classList.contains('hidden');
    if (!gameVisible) toast(`${payload.room.name} · 내 차례 · 내 카드 ${holeText || '배분 중'}`, 'success');

    if (gameVisible) {
      clearTimeout(state.turnPulseTimer);
      $('pokerTable').classList.add('my-turn-pulse');
      state.turnPulseTimer = setTimeout(() => $('pokerTable').classList.remove('my-turn-pulse'), 2600);
    }
  }

  function emoteRemainingMs() {
    return Math.max(0, Number(state.emoteReadyAt || 0) - Date.now());
  }

  function beginEmoteCooldown(ms = 1000) {
    state.emoteReadyAt = Date.now() + Math.max(0, Number(ms || 1000));
    clearTimeout(state.emoteCooldownTimer);
    renderEmojiBar();
    state.emoteCooldownTimer = setTimeout(() => {
      state.emoteReadyAt = 0;
      renderEmojiBar();
      if ($('playerDialog')?.open && Number.isInteger(state.emojiTargetSeatIndex)) openPlayerDialog(state.emojiTargetSeatIndex);
    }, Math.max(0, Number(ms || 1000)) + 30);
  }

  function sendEmote(emoteId, targetSeatIndex) {
    const emote = EMOTES.find((item) => item.id === emoteId);
    if (emoteRemainingMs() > 0) return toast('이모티콘은 1초 후 다시 사용할 수 있습니다.', 'info');
    socket.emit('emoji:send', { roomId: state.activeRoomId, emoteId, targetSeatIndex }, (result) => {
      if (result?.ok) beginEmoteCooldown(1000);
      if (!result?.ok && result?.cooldownMs) beginEmoteCooldown(result.cooldownMs);
      toast(result?.message || (result?.ok ? '이모티콘을 보냈습니다.' : '이모티콘 전송 실패'), result?.ok ? 'success' : 'error');
    });
  }

  function renderEmojiBar() {
    const payload = currentRoom();
    const target = Number.isInteger(state.emojiTargetSeatIndex) ? payload?.seats?.[state.emojiTargetSeatIndex] : null;
    $('emojiTargetLabel').innerHTML = target ? `${avatarHtml(target.avatar, 'target-avatar')} ${escapeHtml(target.name)}` : '테이블 전체';
    const cooling = emoteRemainingMs() > 0;
    $('emojiBar').innerHTML = EMOTES.map((emote) => `<button type="button" class="${emote.cost ? 'paid-emote' : 'free-emote'}" data-emote-id="${emote.id}" ${cooling ? 'disabled aria-disabled="true"' : ''} title="${escapeHtml(emote.name)} · ${emote.cost ? `${emote.cost}P` : '무료'} · 재사용 1초"><span>${emote.emoji}</span><small>${emote.cost ? `${emote.cost}P` : 'FREE'}</small></button>`).join('');
  }

  function showReplay(id) {
    const row = state.history.find((entry) => entry.id === id);
    if (!row) return;
    $('replayContent').innerHTML = `<h2>${escapeHtml(row.roomName)} · Hand #${row.handNo}</h2><p>${new Date(row.createdAt).toLocaleString('ko-KR')} · 블라인드 ${escapeHtml(row.blinds)}</p><h3>테이블 오픈 카드</h3>${historyBoardHtml(row.board || [])}<h3>플레이어</h3><div class="replay-player-list">${(row.players || []).map((player) => `<article class="replay-player-row"><div>${avatarHtml(player.avatar, 'replay-avatar')} <b>${escapeHtml(player.name)}</b>${player.userId === state.user?.id ? ' <em>나</em>' : ''}</div>${replayPlayerCards(row, player)}<small>시작 ${fmt(player.startStack)}P → 종료 ${fmt(player.finalStack)}P · ${Number(player.net || 0) >= 0 ? '+' : ''}${fmt(player.net || 0)}P${player.folded ? ' · 폴드' : ''}</small></article>`).join('')}</div><h3>액션 로그</h3><div class="scroll-list replay-log">${(row.actions || []).map((action) => `<div class="log-row">${escapeHtml(action.text)}</div>`).join('')}</div>`;
    $('replayDialog').showModal();
  }

  function openBuyInDialog({ roomId, seatIndex = null, mode = 'sit' }) {
    const livePayload = state.roomStates[roomId];
    const room = livePayload?.room || state.rooms.find((entry) => entry.id === roomId);
    if (!room || !state.user) return toast('방 정보를 불러오지 못했습니다.', 'error');
    const minimum = Number(room.buyIn || 500); const maximum = Math.max(minimum, Math.min(Number(state.user.chips || 0), minimum * 20));
    if (Number(state.user.chips || 0) < minimum) return toast(`최소 ${fmt(minimum)}P가 필요합니다.`, 'error');
    state.pendingBuyIn = { roomId, seatIndex, mode, minimum, maximum };
    $('buyInTitle').textContent = mode === 'rebuy' ? '리바이 포인트 선택' : mode === 'reserve' ? '예약 바이인 선택' : '착석 바이인 선택';
    $('buyInWallet').textContent = `${fmt(state.user.chips)}P`; $('buyInMinimum').textContent = `${fmt(minimum)}P`;
    $('buyInAmount').min = minimum; $('buyInAmount').max = maximum; $('buyInAmount').step = room.bigBlind;
    $('buyInRange').min = minimum; $('buyInRange').max = maximum; $('buyInRange').step = room.bigBlind;
    const initial = Math.min(maximum, mode === 'rebuy' ? Number(viewerSeat(livePayload)?.buyIn || minimum) : minimum);
    $('buyInAmount').value = initial; $('buyInRange').value = initial; $('buyInDialog').showModal();
  }

  function openPlayerDialog(seatIndex) {
    const payload = currentRoom(); const seat = payload?.seats?.[seatIndex]; if (!seat) return;
    state.emojiTargetSeatIndex = seatIndex; renderEmojiBar();
    const stats = seat.stats || {};
    const cooling = emoteRemainingMs() > 0;
    $('playerDialogContent').innerHTML = `<div class="player-popup-head">${avatarHtml(seat.avatar, 'player-popup-avatar')}<div><h2>${escapeHtml(seat.name)}</h2><p>${fmt(stats.hands)}핸드 · ${fmt(stats.wins)}승 · 승률 ${stats.winRate || 0}%</p><p>누적 손익 ${Number(stats.net || 0) >= 0 ? '+' : ''}${fmt(stats.net || 0)}P</p></div></div><h3>이모티콘 보내기</h3><div class="player-popup-emotes">${EMOTES.map((emote) => `<button data-popup-emote="${emote.id}" ${cooling ? 'disabled aria-disabled="true"' : ''}><span>${emote.emoji}</span><small>${emote.cost ? `${emote.cost}P` : '무료'} · 1초</small></button>`).join('')}</div>`;
    if (!$('playerDialog').open) $('playerDialog').showModal();
  }

  function emitWithToast(event, payload, successRefresh = true) {
    socket.emit(event, payload, (result) => {
      toast(result?.message || (result?.ok ? '처리되었습니다.' : '처리하지 못했습니다.'), result?.ok ? 'success' : 'error');
      if (result?.ok && successRefresh) socket.emit('bootstrap:refresh', () => {});
    });
  }

  renderLoginAvatars();
  $('soundBtn').textContent = state.sound ? '🔊' : '🔇';


  function collapseHoleCards() {
    clearTimeout(state.holeCollapseTimer);
    state.holeCollapseTimer = null;
    if (state.expandedHoleSeat === null) return;
    state.expandedHoleSeat = null;
    const payload = currentRoom();
    if (payload) renderGame(payload, { suppressFx: true });
  }

  function toggleHoleCards(seatIndex) {
    clearTimeout(state.holeCollapseTimer);
    const wasExpanded = state.expandedHoleSeat === seatIndex;
    state.expandedHoleSeat = wasExpanded ? null : seatIndex;
    const payload = currentRoom();
    if (payload) renderGame(payload, { suppressFx: true });
    if (!wasExpanded) {
      state.holeCollapseTimer = setTimeout(() => {
        if (state.expandedHoleSeat === seatIndex) collapseHoleCards();
      }, 2800);
    }
  }

  function setSidePanel(name) {
    document.querySelectorAll('[data-side]').forEach((button) => button.classList.toggle('active', button.dataset.side === name));
    document.querySelectorAll('.side-panel').forEach((panel) => panel.classList.toggle('active', panel.id === `side-${name}`));
  }

  function openMobileChat() {
    state.sideDrawerOpen = true;
    $('gameSideDrawer').classList.remove('collapsed');
    $('sideDrawerToggle').setAttribute('aria-expanded', 'true');
    $('sideDrawerToggle').querySelector('span').textContent = '▶';
    setSidePanel('chat');
  }

  function syncMobileKeyboardOffset() {
    const viewport = window.visualViewport;
    if (!viewport) return;
    const offset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
    document.documentElement.style.setProperty('--keyboard-offset', `${Math.round(offset)}px`);
  }

  function setMobileNav(open) {
    state.mobileNavOpen = Boolean(open);
    $('lobbySidebar')?.classList.toggle('mobile-open', state.mobileNavOpen);
    const backdrop = $('mobileNavBackdrop');
    if (backdrop) backdrop.hidden = !state.mobileNavOpen;
    $('mobileNavToggle')?.setAttribute('aria-expanded', state.mobileNavOpen ? 'true' : 'false');
    document.body.classList.toggle('mobile-nav-open', state.mobileNavOpen);
  }

  document.addEventListener('click', (event) => {
    const loginAvatar = event.target.closest('[data-login-avatar]');
    if (loginAvatar) { state.selectedLoginAvatar = loginAvatar.dataset.loginAvatar; renderLoginAvatars(); return; }
    const tab = event.target.closest('[data-tab]');
    if (tab && !tab.classList.contains('brand')) { switchTab(tab.dataset.tab); setMobileNav(false); return; }
    const brand = event.target.closest('.brand[data-tab]');
    if (brand) { showLobby(); switchTab('rooms'); setMobileNav(false); return; }
    const myRoom = event.target.closest('[data-my-room]');
    if (myRoom) { openRoom(myRoom.dataset.myRoom); return; }
    const quick = event.target.closest('[data-quick]');
    if (quick) {
      socket.emit('room:quickJoin', { type: quick.dataset.quick }, (result) => result?.ok ? openRoom(result.roomId) : toast(result?.message || '빠른 입장 실패', 'error'));
      return;
    }
    const openJoined = event.target.closest('[data-open-joined]'); if (openJoined) { openRoom(openJoined.dataset.openJoined); return; }
    const join = event.target.closest('[data-join-room]'); if (join) { joinRoom(join.dataset.joinRoom); return; }
    const reserve = event.target.closest('[data-reserve-room]');
    if (reserve) {
      openBuyInDialog({ roomId: reserve.dataset.reserveRoom, mode: 'reserve' });
      return;
    }
    const watch = event.target.closest('[data-watch-room]'); if (watch) { watchRoom(watch.dataset.watchRoom); return; }
    const noticeOpen = event.target.closest('[data-notice-open]');
    if (noticeOpen) { openNoticeDetail(noticeOpen.dataset.noticeOpen); return; }
    const tournamentRoomEnter = event.target.closest('[data-tournament-room-enter]');
    if (tournamentRoomEnter) { joinRoom(tournamentRoomEnter.dataset.tournamentRoomEnter); return; }
    const tournament = event.target.closest('[data-tournament]'); if (tournament) { emitWithToast('tournament:join', { tournamentId: tournament.dataset.tournament }); return; }
    const mission = event.target.closest('[data-mission]'); if (mission) { emitWithToast('mission:claim', { missionId: mission.dataset.mission }); return; }
    const signup = event.target.closest('[data-signup-reward]'); if (signup) { emitWithToast('signup:claim', { rewardId: signup.dataset.signupReward }); return; }
    const weekly = event.target.closest('[data-weekly-reward]'); if (weekly) { emitWithToast('weekly:claim', { rewardId: weekly.dataset.weeklyReward }); return; }
    const shop = event.target.closest('[data-shop-item]'); if (shop) { emitWithToast('shop:buy', { itemId: shop.dataset.shopItem }); return; }
    const shopFilter = event.target.closest('[data-shop-filter]'); if (shopFilter) { state.shopFilter = shopFilter.dataset.shopFilter; renderShop(); return; }
    const historyFilter = event.target.closest('[data-history-filter]'); if (historyFilter) { state.historyFilter = historyFilter.dataset.historyFilter; renderProfile(); return; }
    const guild = event.target.closest('[data-guild-join]'); if (guild) { emitWithToast('guild:join', { guildId: guild.dataset.guildJoin }); return; }
    if (event.target.closest('[data-guild-checkin]')) { emitWithToast('guild:checkin', {}); return; }
    const donate = event.target.closest('[data-guild-donate]'); if (donate) { emitWithToast('guild:donate', { amount: Number(donate.dataset.guildDonate) }); return; }
    if (event.target.closest('[data-guild-save]')) { emitWithToast('guild:update', { description: $('guildDescriptionInput')?.value || '', notice: $('guildNoticeInput')?.value || '' }); return; }
    if (event.target.closest('[data-guild-leave]')) { if (confirm('길드에서 탈퇴할까요? 탈퇴 후 24시간 동안 다른 길드에 재가입하거나 새 길드를 만들 수 없습니다.')) emitWithToast('guild:leave', {}); return; }
    const avatar = event.target.closest('[data-select-avatar]'); if (avatar) { emitWithToast('cosmetic:select', { type: 'avatar', value: avatar.dataset.selectAvatar }); return; }
    const skin = event.target.closest('[data-select-skin]'); if (skin) { emitWithToast('cosmetic:select', { type: 'skin', value: skin.dataset.selectSkin }); return; }
    const cardSkin = event.target.closest('[data-select-card-skin]'); if (cardSkin) { emitWithToast('cosmetic:select', { type: 'cardSkin', value: cardSkin.dataset.selectCardSkin }); return; }
    const replay = event.target.closest('[data-replay-id]'); if (replay) { showReplay(replay.dataset.replayId); return; }
    const sitSeat = event.target.closest('[data-sit-seat]');
    if (sitSeat) { openBuyInDialog({ roomId: state.activeRoomId, seatIndex: Number(sitSeat.dataset.sitSeat), mode: 'sit' }); return; }
    const holeCards = event.target.closest('[data-hole-seat]');
    if (holeCards) {
      event.preventDefault();
      event.stopPropagation();
      toggleHoleCards(Number(holeCards.dataset.holeSeat));
      return;
    }
    const playerSeat = event.target.closest('[data-player-seat]');
    if (playerSeat) { const index = Number(playerSeat.dataset.playerSeat); const seat = currentRoom()?.seats?.[index]; if (seat?.userId !== state.user?.id) openPlayerDialog(index); return; }
    const popupEmote = event.target.closest('[data-popup-emote]');
    if (popupEmote) { sendEmote(popupEmote.dataset.popupEmote, state.emojiTargetSeatIndex); return; }
    const skinPreview = event.target.closest('[data-skin-preview]');
    if (skinPreview) {
      const skin = skinPreview.dataset.skinPreview;
      const name = skinPreview.dataset.skinName || '테이블 스킨';
      const theme = skinTheme(skin);
      $('skinPreviewContent').innerHTML = `<div class="skin-preview-modal"><span class="eyebrow">LIVE PREVIEW</span><h2>${escapeHtml(name)}</h2><div class="skin-preview-table skin-${skin} motif-${theme.motif}" style='${skinInlineStyle(skin)}'><div class="preview-rail"></div><div class="preview-sigil">${theme.sigil}</div><div class="preview-seat p1"></div><div class="preview-seat p2"></div><div class="preview-seat p3"></div><div class="preview-seat p4"></div><div class="preview-pot">POT 88,888P</div><div class="preview-board">A♠ K♥ Q♦ J♣ 10♠</div><small>${escapeHtml(name)} 실제 색상·레일·문양 미리보기</small></div></div>`;
      $('skinPreviewDialog').showModal();
      return;
    }
    const cardSkinPreview = event.target.closest('[data-card-skin-preview]');
    if (cardSkinPreview) {
      const skin = cardSkinPreview.dataset.cardSkinPreview || 'classic-card';
      const name = cardSkinPreview.dataset.cardSkinName || '카드 스킨';
      $('skinPreviewContent').innerHTML = `<div class="card-skin-preview-modal"><span class="eyebrow">CARD BACK PREVIEW</span><h2>${escapeHtml(name)}</h2><div class="card-skin-preview-stage"><div class="playing-card back card-back-${skin} preview-card-left" style="${cardSkinInlineStyle(skin)}"><div class="card-back-mark">♠</div></div><div class="playing-card back card-back-${skin} preview-card-right" style="${cardSkinInlineStyle(skin)}"><div class="card-back-mark">♠</div></div><div class="card-skin-preview-label"><b>${escapeHtml(name)}</b><small>게임 중 상대 카드 뒷면과 딜링 애니메이션에 적용됩니다.</small></div></div></div>`;
      $('skinPreviewDialog').showModal();
      return;
    }

    const jackpotClaim = event.target.closest('[data-jackpot-claim]');
    if (jackpotClaim) { emitWithToast('jackpot:claim', { claimId: jackpotClaim.dataset.jackpotClaim }); return; }
    const targetSeat = event.target.closest('[data-emote-target-seat]');
    if (targetSeat) { state.emojiTargetSeatIndex = Number(targetSeat.dataset.emoteTargetSeat); renderGame(currentRoom()); toast('이모티콘 받을 상대를 선택했습니다.', 'info'); return; }
    const emoji = event.target.closest('[data-emote-id]');
    if (emoji) {
      sendEmote(emoji.dataset.emoteId, state.emojiTargetSeatIndex);
      return;
    }
    const side = event.target.closest('[data-side]');
    if (side) {
      setSidePanel(side.dataset.side);
    }
  });

  function setAuthStatus(message = '', type = '') {
    const node = $('authStatus');
    if (!node) return;
    node.textContent = message;
    node.className = `auth-status${type ? ` ${type}` : ''}`;
  }

  function normalizePhoneInput(value) {
    let digits = String(value || '').replace(/\D/g, '');
    if (digits.startsWith('82')) digits = `0${digits.slice(2)}`;
    return digits.slice(0, 11);
  }

  function unlockAuthPageScroll() {
    document.body.classList.remove('mobile-nav-open', 'game-active', 'chat-keyboard-open');
    document.documentElement.style.removeProperty('overflow');
    document.body.style.removeProperty('overflow');
    document.documentElement.style.removeProperty('overflow-y');
    document.body.style.removeProperty('overflow-y');
  }

  function setAuthMode(mode) {
    unlockAuthPageScroll();
    state.authMode = mode;
    const register = mode === 'register';
    $('showLoginMode').classList.toggle('active', !register);
    $('showRegisterMode').classList.toggle('active', register);
    $('realNameLabel').classList.toggle('hidden', !register);
    $('realNameInput').classList.toggle('hidden', !register);
    $('realNameInput').disabled = !register;
    $('realNameInput').required = register;
    $('nicknameLabel').classList.toggle('hidden', !register);
    $('nicknameInput').classList.toggle('hidden', !register);
    $('nicknameInput').disabled = !register;
    $('nicknameInput').required = register;
    $('phoneEntryArea').classList.toggle('hidden', !register);
    $('phoneInput').disabled = !register;
    $('phoneInput').required = register;
    $('registerAvatarArea').classList.toggle('hidden', !register);
    $('referralLabel').classList.toggle('hidden', !register);
    $('referralInput').classList.toggle('hidden', !register);
    $('referralInput').disabled = !register;
    $('passwordInput').autocomplete = register ? 'new-password' : 'current-password';
    $('passwordInput').enterKeyHint = register ? 'next' : 'done';
    $('loginBtn').textContent = register ? '가입 신청' : '로그인';
    $('loginBtn').disabled = false;
    setAuthStatus(register ? '정보를 입력하면 관리자 승인 대기로 접수됩니다.' : '');
    if (register && window.matchMedia('(max-width:520px)').matches) {
      requestAnimationFrame(() => $('loginScreen')?.scrollTo({ top: 0, behavior: 'smooth' }));
    }
  }

  async function accountRequest(path, body) {
    const response = await fetch(path, {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    });
    const data = await response.json().catch(() => ({ ok: false, message: '서버 응답을 읽을 수 없습니다.' }));
    if (!response.ok || !data.ok) throw new Error(data.message || '요청에 실패했습니다.');
    return data;
  }

  $('showLoginMode').addEventListener('click', () => setAuthMode('login'));
  $('showRegisterMode').addEventListener('click', () => setAuthMode('register'));
  $('accountAuthForm').addEventListener('submit', async (event) => {
    event.preventDefault();
    const register = state.authMode === 'register';
    const email = $('emailInput').value.trim();
    const password = $('passwordInput').value;
    const realName = $('realNameInput').value.trim();
    const nickname = $('nicknameInput').value.trim();
    const phone = normalizePhoneInput($('phoneInput')?.value);
    const referralCode = $('referralInput').value.trim();

    if (!email || !$('emailInput').checkValidity()) {
      setAuthStatus('올바른 이메일 주소를 입력해 주세요.', 'error');
      $('emailInput').focus();
      return;
    }
    if (password.length < 4) {
      setAuthStatus('비밀번호는 4글자 이상 입력해 주세요.', 'error');
      $('passwordInput').focus();
      return;
    }
    if (register && realName.length < 2) {
      setAuthStatus('이름을 2자 이상 입력해 주세요.', 'error');
      $('realNameInput').focus();
      return;
    }
    if (register && !nickname) {
      setAuthStatus('닉네임을 입력해 주세요.', 'error');
      $('nicknameInput').focus();
      return;
    }
    if (register && !/^010\d{8}$/.test(phone)) {
      setAuthStatus('010으로 시작하는 11자리 휴대폰 번호를 입력해 주세요.', 'error');
      $('phoneInput').focus();
      return;
    }

    const button = $('loginBtn');
    button.disabled = true;
    button.textContent = register ? '신청 중…' : '로그인 중…';
    setAuthStatus(register ? '가입 신청을 전송하고 있습니다…' : '로그인하고 있습니다…');
    try {
      const endpoint = register ? '/api/auth/register' : '/api/auth/login';
      const result = await accountRequest(endpoint, {
        email,
        password,
        realName,
        nickname,
        phone,
        avatar: state.selectedLoginAvatar,
        referralCode
      });
      if (register && result.pending) {
        const message = result.message || '가입 신청이 접수되었습니다.';
        toast(message, 'success');
        setAuthMode('login');
        setAuthStatus(message, 'success');
        $('passwordInput').value = '';
        $('realNameInput').value = '';
        $('nicknameInput').value = '';
        $('phoneInput').value = '';
        $('referralInput').value = '';
        return;
      }
      state.sessionToken = result.sessionToken || '';
      if (result.token) localStorage.setItem('royal-token', result.token);
      authenticate({ token: result.token || undefined });
    } catch (error) {
      setAuthStatus(error.message, 'error');
      toast(error.message, 'error');
    } finally {
      button.disabled = false;
      button.textContent = state.authMode === 'register' ? '가입 신청' : '로그인';
    }
  });
  $('forgotPasswordBtn').addEventListener('click', async () => {
    const email = prompt('가입한 이메일을 입력하세요.');
    if (!email) return;
    try {
      const result = await accountRequest('/api/auth/password-reset/request', { email });
      alert(result.developmentToken
        ? `${result.message}\n\n개발용 재설정 토큰: ${result.developmentToken}`
        : result.message);
    } catch (error) {
      toast(error.message, 'error');
    }
  });
  $('mobileNavToggle')?.addEventListener('click', () => setMobileNav(!state.mobileNavOpen));
  $('mobileNavClose')?.addEventListener('click', () => setMobileNav(false));
  $('mobileNavBackdrop')?.addEventListener('click', () => setMobileNav(false));
  $('soundBtn').addEventListener('click', () => { state.sound = !state.sound; localStorage.setItem('royal-sound', state.sound ? 'on' : 'off'); $('soundBtn').textContent = state.sound ? '🔊' : '🔇'; playSound(); });
  $('openCreateRoom')?.addEventListener('click', () => {});
  $('openGuildCreate').addEventListener('click', () => $('guildDialog').showModal());
  $('reportBtn').addEventListener('click', () => $('reportDialog').showModal());
  $('closeSkinPreviewBtn').addEventListener('click', () => $('skinPreviewDialog').close());
  $('closePlayerDialogBtn').addEventListener('click', () => $('playerDialog').close());
  $('closeReplayDialogBtn').addEventListener('click', () => $('replayDialog').close());
  $('closeNoticeDetailBtn')?.addEventListener('click', () => $('noticeDetailDialog')?.close());
  ['skinPreviewDialog', 'playerDialog', 'replayDialog'].forEach((id) => {
    const dialog = $(id);
    dialog.addEventListener('click', (event) => {
      if (event.target === dialog) dialog.close();
    });
  });
  $('clearEmojiTarget').addEventListener('click', () => { state.emojiTargetSeatIndex = null; renderEmojiBar(); if (currentRoom()) renderGame(currentRoom()); });

  $('quickSitBtn').addEventListener('click', () => {
    const payload = currentRoom(); if (!payload) return;
    const index = payload.seats.findIndex((seat) => !seat);
    if (index >= 0) {
      openBuyInDialog({ roomId: state.activeRoomId, seatIndex: index, mode: 'sit' });
      return;
    }
    openBuyInDialog({ roomId: state.activeRoomId, mode: 'reserve' });
  });
  $('rebuyBtn').addEventListener('click', () => openBuyInDialog({ roomId: state.activeRoomId, mode: 'rebuy' }));
  $('buyInAmount').addEventListener('input', () => { $('buyInRange').value = $('buyInAmount').value; });
  $('buyInRange').addEventListener('input', () => { $('buyInAmount').value = $('buyInRange').value; });
  document.querySelectorAll('[data-buyin-mult]').forEach((button) => button.addEventListener('click', () => { const x = state.pendingBuyIn; if (!x) return; const v = Math.min(x.maximum, x.minimum * Number(button.dataset.buyinMult)); $('buyInAmount').value = v; $('buyInRange').value = v; }));
  document.querySelector('[data-buyin-all]').addEventListener('click', () => { const x = state.pendingBuyIn; if (!x) return; $('buyInAmount').value = x.maximum; $('buyInRange').value = x.maximum; });
  $('cancelBuyInBtn').addEventListener('click', () => { state.pendingBuyIn = null; $('buyInDialog').close(); });
  $('buyInDialog').addEventListener('cancel', () => { state.pendingBuyIn = null; });
  $('buyInForm').addEventListener('submit', (event) => {
    event.preventDefault(); const pending = state.pendingBuyIn; if (!pending) return;
    const buyInAmount = Number($('buyInAmount').value);
    const eventName = pending.mode === 'rebuy' ? 'room:rebuy' : pending.mode === 'reserve' ? 'room:reserve' : 'room:sit';
    socket.emit(eventName, { roomId: pending.roomId, seatIndex: pending.seatIndex, buyInAmount }, (result) => {
      toast(result?.message || (result?.ok ? '처리되었습니다.' : '실패했습니다.'), result?.ok ? 'success' : 'error');
      if (result?.ok) { $('buyInDialog').close(); state.pendingBuyIn = null; if (pending.mode === 'reserve') setTimeout(() => openRoom(pending.roomId), 120); }
    });
  });
  $('logoutBtn').addEventListener('click', () => {
    if (!confirm('로그아웃할까요? 진행 중인 핸드는 자동 플레이 후 퇴석합니다.')) return;
    fetch('/api/auth/logout', {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' }
    }).catch(() => {});
    socket.emit('auth:logout', {}, () => {
      localStorage.removeItem('royal-token');
      state.sessionToken = '';
      state.user = null;
      socket.disconnect();
      location.reload();
    });
  });
  $('profileImageInput').addEventListener('change', async (event) => {
    const file = event.target.files?.[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) return toast('이미지 파일만 선택할 수 있습니다.', 'error');
    try {
      const imageData = await resizeProfileImage(file);
      socket.emit('profile:image', { imageData }, (result) => toast(result?.message || '프로필 사진 처리 완료', result?.ok ? 'success' : 'error'));
    } catch (error) { toast(error.message || '사진을 처리할 수 없습니다.', 'error'); }
    event.target.value = '';
  });
  $('removeProfileImage').addEventListener('click', () => socket.emit('profile:image', { imageData: null }, (result) => toast(result?.message || '사진을 삭제했습니다.', result?.ok ? 'success' : 'error')));


  function adjustVoucherPoints(delta) {
    const input = $('voucherPoints');
    const next = Math.max(10000, Math.min(1000000, Math.round((Number(input.value || 10000) + delta) / 10000) * 10000));
    input.value = next;
  }
  $('voucherMinus').addEventListener('click', () => adjustVoucherPoints(-10000));
  $('voucherPlus').addEventListener('click', () => adjustVoucherPoints(10000));
  $('voucherPoints').addEventListener('change', () => adjustVoucherPoints(0));

  $('voucherForm')?.addEventListener('submit', (event) => {
    event.preventDefault();
    const payload = {
      rewardType: $('voucherProduct').value,
      points: Number($('voucherPoints').value),
      contact: $('voucherContact').value.trim(),
      note: $('voucherNote').value.trim()
    };
    if (!payload.contact) return toast('교환권을 받을 연락처를 입력해 주세요.', 'error');
    if (!Number.isFinite(payload.points) || payload.points < 10000 || payload.points % 10000 !== 0) return toast('신청 금액은 10,000P 단위로 입력해 주세요.', 'error');
    if (!confirm(`${fmt(payload.points)}P 교환권을 신청할까요? 신청 포인트는 즉시 차감됩니다.`)) return;
    socket.emit('redemption:create', payload, (result) => {
      toast(result?.message || '교환 신청을 처리했습니다.', result?.ok ? 'success' : 'error');
      if (result?.ok) {
        $('voucherContact').value = '';
        $('voucherNote').value = '';
        socket.emit('bootstrap:refresh', () => {});
      }
    });
  });

  const setContactOpen = (open) => { $('contactPanel').hidden = !open; $('contactToggle').setAttribute('aria-expanded', open ? 'true' : 'false'); };
  $('contactToggle').addEventListener('click', () => setContactOpen($('contactPanel').hidden));
  $('contactClose').addEventListener('click', () => setContactOpen(false));
  $('copyTelegram').addEventListener('click', async () => {
    const handle = state.support?.handle || `@${String(state.support?.telegramId || '232344').replace(/^@+/, '')}`;
    try { await navigator.clipboard.writeText(handle); toast(`텔레그램 아이디 ${handle}를 복사했습니다.`, 'success'); }
    catch { window.prompt('아래 아이디를 복사하세요.', handle); }
  });

  $('createRoomForm').addEventListener('submit', (event) => {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(event.currentTarget));
    socket.emit('room:create', data, (result) => {
      if (!result?.ok) return toast(result?.message || '방 생성 실패', 'error');
      $('createRoomDialog').close(); openRoom(result.roomId); toast('친구방을 만들었습니다.', 'success');
    });
  });
  $('guildForm').addEventListener('submit', (event) => { event.preventDefault(); const data = Object.fromEntries(new FormData(event.currentTarget)); $('guildDialog').close(); emitWithToast('guild:create', data); });
  $('reportForm').addEventListener('submit', (event) => { event.preventDefault(); const data = Object.fromEntries(new FormData(event.currentTarget)); $('reportDialog').close(); emitWithToast('report:create', data, false); });

  $('backToLobbyBtn').addEventListener('click', showLobby);
  $('exitRoomBtn').addEventListener('click', () => {
    if (!state.activeRoomId) return;
    const livePayload = currentRoom();
    const liveSeat = viewerSeat(livePayload);
    const exitIsReserved = Boolean(liveSeat?.exitReserved || state.pendingExitRooms.has(state.activeRoomId));
    if (exitIsReserved) {
      if (!confirm('나가기 예약을 취소할까요? 이미 자동 폴드가 처리된 뒤에는 취소할 수 없습니다.')) return;
      const roomId = state.activeRoomId;
      socket.emit('room:leave:cancel', { roomId }, (result) => {
        if (!result?.ok) return toast(result?.message || '나가기 예약 취소에 실패했습니다.', 'error');
        state.pendingExitRooms.delete(roomId);
        const payload = state.roomStates[roomId];
        const me = viewerSeat(payload);
        if (me) me.exitReserved = false;
        if (payload) renderGame(payload, { suppressFx: true });
        toast(result.message || '나가기 예약을 취소했습니다.', 'success');
      });
      return;
    }
    const quote = liveSeat?.earlyExitQuote;
    const policyText = quote && Number(quote.sessionHands || 0) < Number(quote.requiredHands || 50)
      ? `\n\n현재 ${Number(quote.sessionHands || 0)}/50핸드입니다. 50핸드 전에 나가면 순이익의 20%가 공제됩니다.${Number(quote.fee || 0) > 0 ? `\n현재 기준 예상 공제: ${fmt(quote.fee)}P\n예상 지급: ${fmt(quote.cashout)}P` : `\n현재 기준 공제할 순이익은 없습니다.`}`
      : '';
    if (!confirm(`나가기를 예약할까요? 현재 핸드에서 차례가 오면 체크 가능 시 자동 체크하고, 받아야 할 금액이 있으면 자동 폴드합니다. 핸드가 끝나면 로비로 이동합니다.${policyText}`)) return;
    const leavingId = state.activeRoomId;
    socket.emit('room:leave', { roomId: leavingId }, (result) => {
      if (!result?.ok) return toast(result?.message || '방 나가기에 실패했습니다.', 'error');
      toast(result.message || '방에서 나갔습니다.', 'success');
      if (result.waitForResult) {
        state.pendingExitRooms.add(leavingId);
        const payload = state.roomStates[leavingId];
        if (payload) renderGame(payload, { suppressFx: true });
        return;
      }
      delete state.roomStates[leavingId];
      state.activeRooms = state.activeRooms.filter((room) => room.id !== leavingId);
      state.activeRoomId = state.activeRooms[0]?.id || null;
      renderMyRoomTabs();
      showLobby();
    });
  });
  $('myCardPeekBtn').addEventListener('click', () => {
    state.myCardPeekOpen = !state.myCardPeekOpen;
    renderMyHandAssist();
  });
  $('myCardPeekClose').addEventListener('click', () => {
    state.myCardPeekOpen = false;
    renderMyHandAssist();
  });
  function sendGameAction(type, amount = null, onSuccess = null) {
    if (state.actionPending) return;
    state.actionPending = true;
    renderActionControls();
    const payload = { roomId: state.activeRoomId, type };
    if (amount !== null && amount !== undefined) payload.amount = amount;
    socket.timeout(4000).emit('game:action', payload, (error, result) => {
      state.actionPending = false;
      renderActionControls();
      if (error) return toast('서버 응답이 늦습니다. 연결 상태를 확인해 주세요.', 'error');
      if (!result?.ok) return toast(result?.message || '행동 처리에 실패했습니다.', 'error');
      if (typeof onSuccess === 'function') onSuccess(result);
    });
  }
  $('foldBtn').addEventListener('click', () => sendGameAction('fold'));
  $('callBtn').addEventListener('click', () => sendGameAction('checkcall'));
  $('raiseBtn').addEventListener('click', () => {
    const payload = currentRoom(); const me = viewerSeat(payload); if (!me) return;
    const maxTo = me.bet + me.stack;
    const isAll = state.allInSelected || Number($('raiseSlider').value) >= maxTo;
    sendGameAction(isAll ? 'allin' : 'raise', isAll ? maxTo : Number($('raiseSlider').value), () => {
      state.allInSelected = false;
      document.querySelectorAll('[data-pot]').forEach((button) => button.classList.remove('selected'));
    });
  });
  $('raiseSlider').addEventListener('input', () => { const me = viewerSeat(); state.allInSelected = Boolean(me && Number($('raiseSlider').value) >= me.bet + me.stack); renderActionControls(); });
  document.querySelectorAll('[data-pot]').forEach((button) => button.addEventListener('click', () => {
    const payload = currentRoom(); const me = viewerSeat(payload); if (!me || !payload) return;
    const value = button.dataset.pot;
    document.querySelectorAll('[data-pot]').forEach((item) => item.classList.remove('selected'));
    if (value === 'allin') {
      state.allInSelected = true;
      $('raiseSlider').value = Number($('raiseSlider').max);
      button.classList.add('selected');
      $('raiseValue').textContent = fmt(me.bet + me.stack);
      renderActionControls();
      return;
    }
    state.allInSelected = false;
    button.classList.add('selected');
    const target = payload.game.currentBet + Math.round((payload.game.pot * Number(value)) / payload.room.bigBlind) * payload.room.bigBlind;
    $('raiseSlider').value = Math.max(Number($('raiseSlider').min), Math.min(Number($('raiseSlider').max), target));
    $('raiseValue').textContent = fmt($('raiseSlider').value); renderActionControls();
  }));
  window.addEventListener('resize', () => {
    if (!$('gameView').classList.contains('hidden')) syncGameSideDrawerForViewport();
  });
  $('sideDrawerToggle').addEventListener('click', () => {
    state.sideDrawerOpen = !state.sideDrawerOpen;
    $('gameSideDrawer').classList.toggle('collapsed', !state.sideDrawerOpen);
    $('sideDrawerToggle').setAttribute('aria-expanded', state.sideDrawerOpen ? 'true' : 'false');
    $('sideDrawerToggle').querySelector('span').textContent = state.sideDrawerOpen ? '▶' : '◀';
  });
  $('chatForm').addEventListener('submit', (event) => {
    event.preventDefault();
    const message = $('chatInput').value.trim();
    if (!message) return;
    socket.emit('chat:send', { roomId: state.activeRoomId, message }, (result) => { if (!result?.ok) toast(result?.message, 'error'); else $('chatInput').value = ''; });
  });
  $('chatInput').addEventListener('focus', () => {
    openMobileChat();
    document.body.classList.add('chat-keyboard-open');
    syncMobileKeyboardOffset();
    setTimeout(() => $('chatInput').scrollIntoView({ block: 'nearest', behavior: 'smooth' }), 120);
  });
  $('chatInput').addEventListener('blur', () => {
    document.body.classList.remove('chat-keyboard-open');
    setTimeout(syncMobileKeyboardOffset, 80);
  });
  if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', syncMobileKeyboardOffset);
    window.visualViewport.addEventListener('scroll', syncMobileKeyboardOffset);
    syncMobileKeyboardOffset();
  }

  socket.on('connect', async () => {
    const reconnecting = state.socketConnectedOnce || Boolean(state.user);
    state.socketConnectedOnce = true;
    $('connectionBadge').textContent = reconnecting ? '복구 중' : '온라인';
    $('connectionBadge').className = reconnecting ? 'connection offline' : 'connection online';

    if (forceLoginPage && !state.user) {
      unlockAuthPageScroll();
      $('app').classList.add('hidden');
      $('loginScreen').classList.remove('hidden');
      return;
    }

    const token = localStorage.getItem('royal-token');
    if (state.user || state.sessionToken || token) {
      authenticate({ token, reconnect: reconnecting, silent: reconnecting });
      return;
    }
    try {
      const response = await fetch('/api/auth/me', { credentials: 'include' });
      if (response.ok) return authenticate({ reconnect: reconnecting, silent: reconnecting });
    } catch {}
    unlockAuthPageScroll();
    $('loginScreen').classList.remove('hidden');
  });
  socket.on('disconnect', () => {
    clearTimeout(state.reconnectAuthTimer);
    state.socketAuthInFlight = false;
    state.actionPending = false;
    $('connectionBadge').textContent = '재연결 중';
    $('connectionBadge').className = 'connection offline';
  });
  socket.on('connect_error', () => {
    $('connectionBadge').textContent = '연결 재시도 중';
    $('connectionBadge').className = 'connection offline';
  });
  socket.io.on('reconnect_attempt', () => {
    $('connectionBadge').textContent = '재연결 중';
    $('connectionBadge').className = 'connection offline';
  });
  window.addEventListener('online', () => {
    if (!socket.connected) socket.connect();
    else if (state.user) authenticate({ token: localStorage.getItem('royal-token'), reconnect: true, silent: true });
  });
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState !== 'visible') return;
    if (!socket.connected) socket.connect();
    else if (state.user && !state.socketAuthInFlight) authenticate({ token: localStorage.getItem('royal-token'), reconnect: true, silent: true });
  });
  socket.on('bootstrap', applyBootstrap);
  socket.on('wallet:update', (user) => { state.user = user; updateTopUser(); renderRewards(); renderMissions(); renderProfile(); renderShop(); renderEmojiBar(); });
  socket.on('user:rooms', (rooms) => {
    state.activeRooms = rooms || [];
    if (state.activeRoomId && !state.activeRooms.some((room) => room.id === state.activeRoomId) && !state.roomStates[state.activeRoomId]?.viewer?.isSpectator) {
      state.activeRoomId = state.activeRooms[0]?.id || null;
    }
    renderMyRoomTabs(); renderRooms();
  });
  socket.on('lobby:rooms', (rooms) => { state.rooms = rooms; renderRooms(); });
  socket.on('notices:updated', (notices) => {
    state.notices = Array.isArray(notices) ? notices : [];
    renderNotices();
  });
  socket.on('tournaments:updated', (tournaments) => { state.tournaments = Array.isArray(tournaments) ? tournaments : []; renderTournaments(); });
  socket.on('support:update', (support) => { state.support = support || state.support; renderSupportContact(); });
  socket.on('room:state', (payload) => {
    if (!payload?.room?.id) return;
    if (payload.jackpot) {
      state.jackpot = { ...(state.jackpot || {}), ...payload.jackpot };
      if ($('tab-ranking')?.classList.contains('active')) renderRankings();
    }
    state.roomStates[payload.room.id] = payload;
    if (payload.room.id === state.activeRoomId) state.actionPending = false;
    if (!state.activeRoomId) state.activeRoomId = payload.room.id;
    const gameVisible = !$('gameView').classList.contains('hidden') && payload.room.id === state.activeRoomId;
    if (payload.game?.lastResult && !gameVisible) {
      state.resultKeys.add(`${payload.room.id}-${payload.game.handNo}`);
    }
    if (payload.room.id === state.activeRoomId) renderGame(payload);
    else renderMyRoomTabs();
    notifyTurnIfNeeded(payload);
  });
  socket.on('chat:new', (data) => {
    const payload = state.roomStates[data.roomId];
    if (!payload) return;
    payload.chat ||= [];
    payload.chat.push(data.entry);
    if (data.roomId === state.activeRoomId) renderChat(payload.chat);
  });
  socket.on('emoji:show', showFloatingEmoji);
  socket.on('rebuy:required', (data) => { if (data.roomId === state.activeRoomId) toast('올인으로 포인트가 소진되었습니다. 2분 안에 리바이하세요.', 'error'); });
  socket.on('toast', (data) => toast(data.message, data.type));
  socket.on('rush:queued', (data) => toast(data.message, 'info'));
  socket.on('room:exitComplete', (data) => {
    const roomId = data?.roomId;
    if (!roomId) return;
    state.pendingExitRooms.delete(roomId);
    delete state.roomStates[roomId];
    state.activeRooms = state.activeRooms.filter((room) => room.id !== roomId);
    if (state.activeRoomId === roomId) state.activeRoomId = state.activeRooms[0]?.id || null;
    renderMyRoomTabs();
    showLobby();
    toast('나가기 예약이 완료되어 핸드 종료 후 로비로 이동했습니다.', 'success');
  });
  socket.on('room:closed', (data) => {
    toast(data.reason || '방이 종료되었습니다.', 'error');
    if (data.roomId) {
      delete state.roomStates[data.roomId];
      state.activeRooms = state.activeRooms.filter((room) => room.id !== data.roomId);
    }
    showLobby();
  });

  loadSupportContact();
  if (forceLoginPage || !localStorage.getItem('royal-token')) {
    $('app').classList.add('hidden');
    $('loginScreen').classList.remove('hidden');
  }
})();