@font-face {
  font-family: 'Maplestory';
  src: url('../fonts/MaplestoryBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --felt-dark: #06231a;
  --felt: #0d3d2c;
  --felt-light: #144d38;
  --ink: #071811;
  --gold: #c9a227;
  --gold-bright: #e6c860;
  --cream: #efe7d3;
  --cream-dim: #b9b39f;
  --red: #b8433f;
  --blue-tie: #3f7ea6;
  --shadow: rgba(0, 0, 0, 0.45);

  --font-display: 'Maplestory', 'Fraunces', serif;
  --font-body: 'Maplestory', 'Inter', sans-serif;
  --font-mono: 'Maplestory', 'IBM Plex Mono', monospace;
}

/* ---------- 하이로우 전용 테마: 바카라(금색/초록)와 다른 회색+어두운색 모던 톤 ----------
   기존 CSS 전체가 --felt/--gold/--ink 같은 변수를 참조하고 있어서, 이 변수들만 재정의하면
   game-hilo(하이로우 테이블)만 통째로 다른 분위기가 되고, 지갑/마이페이지/관리자 페이지 등
   나머지 화면은 원래 바카라 골드 테마 그대로 유지됨 */
html.hilo-theme,
body.hilo-theme {
  --felt-dark: #18191c;
  --felt: #26282d;
  --felt-light: #34363c;
  --ink: #0d0e10;
  --gold: #8a8f99;
  --gold-bright: #eceef1;
  --cream: #e7e8eb;
  --cream-dim: #9497a0;
  --red: #c4645f;
  --blue-tie: #6b7280;
  --shadow: rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

.hidden { display: none !important; }

/* ---------- 토스트 팝업 (공용) ---------- */
.toast-container {
  position: fixed !important;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}

.toast {
  max-width: 420px;
  width: fit-content;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(6, 15, 11, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  overflow-wrap: break-word;
  word-break: keep-all;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* 탄성있게 "띠용" 하고 튀어나오는 등장 애니메이션 - 충전/환전 승인·거절 안내처럼 임팩트를 주고싶은 토스트에 씀 */
.toast.toast-bouncy {
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.toast-bouncy.show {
  transform: translateY(0) scale(1);
}
.toast.toast-bouncy:not(.show) {
  transform: translateY(-12px) scale(0.85);
}

.toast-success { border-color: rgba(34, 197, 94, 0.5); color: #7fe0a0; }
.toast-error { border-color: rgba(239, 17, 17, 0.5); color: #f0a9a3; }
.toast-info { border-color: rgba(230, 200, 96, 0.4); color: var(--gold-bright); }
.toast-charge { border-color: rgba(91, 155, 213, 0.55); background: rgba(91, 155, 213, 0.1); color: #a9cef2; }
.toast-exchange { border-color: rgba(74, 222, 128, 0.55); background: rgba(74, 222, 128, 0.1); color: #8fe0ac; }

.pending-note {
  color: var(--gold-bright);
  text-align: center;
  font-size: 12px;
  white-space: pre-line;
}
.pending-note .note-success { color: #7fbf8f; }
.pending-note .note-danger { color: var(--red); }

/* 페이지마다 콘텐츠 길이가 달라서(로그인 페이지는 짧고, 게임화면은 김) 스크롤바가 있다 없다
   하는데, 사파리(특히 macOS에서 마우스를 쓰면 스크롤바가 실제 레이아웃 공간을 차지함)에서는
   이 때문에 페이지를 오갈 때 버튼/콘텐츠가 스크롤바 폭(약 15px)만큼 좌우로 밀리는 문제가 있음.
   항상 세로 스크롤바 공간을 미리 확보해둬서, 콘텐츠 길이와 무관하게 레이아웃이 흔들리지 않게 함
   (오버레이 스크롤바를 쓰는 환경 - 대부분의 모바일/최신 macOS - 에서는 어차피 공간을 안 차지하니
   부작용 없음. scrollbar-gutter가 더 깔끔한 최신 해법이지만 사파리가 아직 지원을 안 해서 못 씀) */
/* 사파리는 스크롤바 뒤쪽 빈 공간(거터)이나 오버스크롤(바운스) 영역의 배경색을 body가 아니라
   html 요소의 background 기준으로 계산함(크롬/파이어폭스는 이런 문제가 덜함). html에 배경이
   따로 없으면 기본값인 흰색이 그 틈으로 보이게 됨 - 아래 body의 그라데이션 가장자리색과
   동일하게 맞춰서, 사파리에서도 자연스럽게 이어져 보이도록 함 */
html {
  overflow-y: scroll;
  background: var(--felt-dark);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream);
  background: radial-gradient(ellipse at top, var(--felt) 0%, var(--felt-dark) 70%);
  min-height: 100vh;
}
/* 모달이 열려있는 동안엔 뒷배경(페이지 본문)이 스크롤되지 않게 막음 (js/toast.js의 MutationObserver가 자동으로 붙였다 뗐다 함) */
body.modal-scroll-lock {
  overflow: hidden;
  height: 100vh;
}

/* 브라우저는 button/input/select 요소의 폰트를 자동으로 초기화해서 body의 폰트를 상속 안 받는 특성이 있음.
   이걸 명시적으로 강제해서, 개별 버튼 클래스마다 font-family를 깜빡하고 안 넣어도 항상 사이트 폰트를 쓰게 함 */
button, input, select, textarea {
  font-family: inherit;
}

/* ---------- 커스텀 스크롤바 (노란색) ---------- */
* {
  scrollbar-width: thin; /* 파이어폭스용 */
  scrollbar-color: var(--gold-bright) rgba(0,0,0,0.2);
}
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: var(--gold-bright);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
  background-clip: padding-box;
}

/* ---------- 인증 화면 ---------- */
/* ---------- 충전/환전 신청 성공 애니메이션 ---------- */
.request-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  opacity: 1;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: opacity 0.4s ease;
}
.request-success-overlay.fade-out { opacity: 0; pointer-events: none; }
.request-success-overlay.hidden { display: none; }

/* 충전 - 체크마크 리플 */
.checkmark-ripple { position: relative; display: flex; align-items: center; justify-content: center; }
.ripple-ring {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px solid var(--gold-bright);
  opacity: 0;
}
.ripple-ring.play { animation: rippleOut 0.8s ease-out 0.55s; }
@keyframes rippleOut {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.8); opacity: 0; }
}
.checkmark-circle {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--felt-light) 0%, var(--felt-dark) 100%);
  border: 3px solid var(--gold-bright);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0);
}
.checkmark-circle.play { animation: checkmarkPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes checkmarkPop {
  0% { transform: scale(0); opacity: 0; }
  55% { transform: scale(1.15); opacity: 1; }
  75% { transform: scale(0.94); }
  100% { transform: scale(1); opacity: 1; }
}
.checkmark-circle svg { width: 50px; height: 50px; }
.checkmark-circle path {
  fill: none; stroke: var(--gold-bright); stroke-width: 8;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
}
.checkmark-circle path.play { animation: drawCheck 0.4s ease-out 0.5s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* 환전 - 지폐/동전 떨어짐 */
.money-rain-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.money-piece {
  position: absolute;
  top: -60px;
  opacity: 0;
  will-change: transform, opacity;
}
.money-piece.play {
  animation-name: moneyFallDown;
  animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 1);
  animation-fill-mode: forwards;
}
@keyframes moneyFallDown {
  0% { transform: translateY(0) translateX(0) rotate(var(--r0, 0deg)); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(var(--fall-dist, 720px)) translateX(var(--drift, 0px)) rotate(var(--r1, 360deg)); opacity: 0.95; }
}
.money-bill-svg { width: 46px; height: 24px; }
.money-bill-svg .bill-body { fill: #1f8a4c; stroke: #0d3d2c; stroke-width: 1.5; }
.money-bill-svg .bill-inner { fill: none; stroke: #eaffef; stroke-width: 1; opacity: 0.7; }
.money-bill-svg .bill-mark { fill: #eaffef; opacity: 0.85; }
.money-bill-svg text { fill: #0d3d2c; font-size: 9px; font-weight: 800; font-family: sans-serif; }
.money-coin-svg { width: 26px; height: 26px; }

.exchange-success-message {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 26px 30px;
  background: rgba(0,0,0,0.45);
  border-radius: 14px;
  border: 1px solid rgba(230,200,96,0.4);
}
.exchange-success-title {
  color: #7fbf8f;
  font-weight: 800;
  font-size: 17px;
  opacity: 0;
  transform: scale(0);
}
.exchange-success-title.play { animation: checkmarkPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards; }
.exchange-success-sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(239,231,211,0.7);
  opacity: 0;
}
.exchange-success-sub.play { animation: fadeUpSub 0.4s ease 0.55s forwards; }
@keyframes fadeUpSub {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.table-entry-splash {
  position: fixed !important;
  inset: 0;
  z-index: 9998 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  opacity: 1;
  transition: opacity 0.7s ease;
}
.table-entry-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}
.table-entry-splash.hidden-splash {
  display: none;
}

.table-entry-splash-dragon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  max-width: 72vw;
  max-height: 55vh;
  width: auto;
  height: auto;
  opacity: 0;
  animation: dragonFadeIn 0.8s ease-out 0.1s forwards;
}
/* 하이로우 스플래시(호랑이)는 바카라(용)보다 더 크게 표시 */
body.hilo-theme .table-entry-splash-dragon {
  max-width: 88vw;
  max-height: 70vh;
}

@keyframes dragonFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
}

.table-entry-splash-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 8vw, 44px);
  color: #000000;
  -webkit-text-stroke: 1.2px #FF0000;
  letter-spacing: 0.03em;
  text-shadow:
    -1px -1px 0 #FF0000,
    1px -1px 0 #FF0000,
    -1px 1px 0 #FF0000,
    1px 1px 0 #FF0000,
    0 4px 12px rgba(0,0,0,0.5);
  opacity: 0;
  transform: scale(0);
  animation: elasticPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

@keyframes elasticPop {
  0% { transform: scale(0); opacity: 0; }
  55% { transform: scale(1.18); opacity: 1; }
  75% { transform: scale(0.94); }
  90% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

/* 회원가입 성공 스플래시는 용/호랑이 큰 그림 대신 아담한 로고를 쓰므로 크기만 따로 조정 */
.register-success-splash-logo {
  max-width: 140px !important;
  max-height: 140px !important;
}

/* 회원가입 성공 텍스트는 게임입장 스플래시(무섭고 강렬한 빨간 테두리)와 달리, 축하하는
   느낌에 맞게 금색 계열로 다르게 표시함(공유 클래스는 그대로 두고 이 안에서만 덮어씀) */
#register-success-splash .table-entry-splash-text {
  color: var(--cream);
  -webkit-text-stroke: 1px var(--gold-bright);
  text-shadow:
    0 0 12px rgba(230, 200, 96, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.5);
}

.app-splash {
  position: fixed !important;
  inset: 0;
  z-index: 9998 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #000000;
  opacity: 1;
  transition: opacity 1s ease;
}
.app-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

.app-splash-logo {
  width: 120px;
  height: auto;
  animation: splashPulse 1.8s ease-in-out infinite;
}

.app-splash-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.04em;
}

@keyframes splashPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}
.auth-body img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

.auth-scene {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201, 162, 39, 0.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(201, 162, 39, 0.06), transparent 40%);
}

/* ---- 카드를 감싸는 바깥 래퍼: 테두리를 따라 골드빛이 계속 회전하며 흐름 ---- */
.auth-card-outer {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 18px;
  padding: 2px;
}
.auth-card-outer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg), transparent 0%, rgba(230,200,96,0.15) 15%, #ffe9a8 25%, rgba(230,200,96,0.15) 35%, transparent 50%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: authBorderRotate 5s linear infinite;
}
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes authBorderRotate {
  to { --border-angle: 360deg; }
}

.auth-card {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, rgba(9, 43, 30, 0.9), rgba(6, 26, 18, 0.95));
  border-radius: 16px;
  padding: 40px 32px 28px;
  box-shadow: 0 30px 60px var(--shadow);
  overflow: hidden;
}

/* ---- 카드 내부에도 은은하게 도는 별빛 (폼을 가리면 안되니 어둡고 적게) ---- */
.auth-card-starfield-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.auth-card-starfield {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  animation: authCardStarSpin 55s linear infinite;
}
@keyframes authCardStarSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.auth-card-star { position: absolute; border-radius: 50%; background: #fff4d6; box-shadow: 0 0 4px 1.5px rgba(230,200,96,0.85); }
.auth-card-star.twinkle { animation: authCardStarTwinkle ease-in-out infinite alternate; }
@keyframes authCardStarTwinkle { from { opacity: 0.3; } to { opacity: 0.95; } }

.auth-card > .brand,
.auth-card > .tabs,
.auth-card > .auth-form-wrap {
  position: relative;
  z-index: 1;
}

.brand {
  text-align: center;
  margin-bottom: 28px;
  -webkit-user-select: none;
  user-select: none;
}
.brand-suit {
  display: block;
  width: 56px;
  height: auto;
  margin: 0 auto 8px;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.brand-suit.small {
  display: inline-block;
  width: 22px;
  height: auto;
  vertical-align: middle;
  margin-right: 6px;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.brand h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.02em;
  margin: 4px 0 6px;
  position: relative;
  display: inline-block;
  color: var(--cream);
  /* 글자 자체에 항상 은은한 흰빛 글로우를 깔아둠 */
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)) drop-shadow(0 0 10px rgba(255,255,255,0.4)) drop-shadow(0 0 20px rgba(230,200,96,0.3));
}
/* 글자 모양 그대로 복사한 투명 레이어를 하나 더 깔고, 거기에만 밝은 흰빛+강한 글로우를 입혀서
   그 레이어가 좌우로 스치듯 지나가게 함 -> 평소엔 은은하다가, 빛이 지나가는 순간만 확실하게 반짝임 */
.brand h1::after {
  content: 'X_TAKE1 CASINO';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(100deg, transparent 0%, transparent 38%, #ffffff 50%, transparent 62%, transparent 100%);
  background-size: 200% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #ffffff) drop-shadow(0 0 26px rgba(255,255,255,0.7));
  animation: titleShine 3s ease-in-out infinite;
}
@keyframes titleShine {
  0% { background-position: 200% 0; }
  50%, 100% { background-position: -40% 0; }
}

.tabs {
  display: flex;
  position: relative;
  border-bottom: 1px solid rgba(239, 231, 211, 0.15);
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn.active {
  color: var(--gold-bright);
}

.tab-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-form-wrap {
  position: relative;
  overflow: hidden;
  /* height는 더 이상 transition으로 애니메이션시키지 않음 (height는 리플로우를 유발하는 무거운
     속성이라, 다른 배경 애니메이션들과 겹치면 탭 전환 순간 렉이 느껴지는 문제가 있었음).
     대신 아래 opacity 크로스페이드로 부드러운 느낌을 내고, 높이 자체는 폼이 안 보이는
     찰나의 순간에 애니메이션 없이 순간적으로 바뀌게 해서 무겁지 않으면서도 자연스러움 */
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.25s ease;
}
.auth-form.inactive {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.label-note {
  text-transform: none;
  letter-spacing: normal;
  color: var(--red);
  font-size: 11px;
}

.auth-form input {
  font-family: var(--font-mono);
  font-size: 15px;
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--cream);
  outline: none;
  transition: border-color 0.2s, border-width 0.15s, background 0.2s, padding 0.15s;
}

.auth-form input:focus {
  border-color: var(--gold);
  border-width: 1.5px;
  padding: 9.5px 11.5px; /* 테두리가 두꺼워진 만큼 안쪽 내용이 밀리지 않도록 미세 보정 */
  background: rgba(201, 162, 39, 0.08);
}

/* ---------- 커스텀 은행 드롭다운 ---------- */
.custom-select {
  position: relative;
}

.custom-select-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 15px;
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--cream-dim);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.custom-select.selected .custom-select-trigger { color: var(--cream); }
.custom-select-trigger:hover { border-color: rgba(201, 162, 39, 0.5); }
.custom-select.open .custom-select-trigger { border-color: var(--gold); background: rgba(201, 162, 39, 0.08); }

.bank-select-label-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bank-option-logo {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

.custom-select-arrow {
  color: var(--cream-dim);
  transition: transform 0.25s ease;
  font-size: 11px;
}
.custom-select.open .custom-select-arrow { transform: rotate(180deg); }

.custom-select-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}
.custom-select.open .custom-select-panel {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid rgba(239, 231, 211, 0.15);
}

.custom-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: rgba(6, 15, 11, 0.9);
  border: none;
  border-bottom: 1px solid rgba(239, 231, 211, 0.08);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.custom-select-option:last-child { border-bottom: none; }
.custom-select-option:hover { background: rgba(201, 162, 39, 0.15); }


.primary-btn {
  margin-top: 6px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(201, 162, 39, 0.3); }

/* 로그인/회원가입 페이지("입장하기"/"계정 생성")의 버튼만 모서리를 둥글게 (다른 페이지 버튼엔 영향 없음) */
.auth-body .primary-btn { border-radius: 10px; }
.primary-btn:focus { outline: none; }

.primary-btn.click-invert {
  background: var(--ink);
  color: var(--gold-bright);
}

.long-press-gauge-btn {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 70%, #a8811d);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.long-press-gauge-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.25);
}

.long-press-gauge-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 244, 214, 0.95), rgba(255, 214, 102, 0.85));
  box-shadow: 0 0 14px 2px rgba(255, 224, 130, 0.6);
  z-index: 1;
  pointer-events: none;
}
.long-press-gauge-fill.filling {
  transition: width 0.7s linear;
  width: 100%;
}
.long-press-gauge-fill.reset {
  transition: width 0.15s ease-out;
  width: 0%;
}

.long-press-gauge-label {
  position: relative;
  z-index: 2;
}

.long-press-hint {
  text-align: center;
  font-size: 11px;
  color: var(--cream-dim);
  margin: 6px 0 0;
}

.terms-agree-row {
  display: flex !important;
  flex-direction: row !important; /* .auth-form label의 flex-direction:column보다 확실히 우선되도록 */
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.terms-agree-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  border: 1.5px solid rgba(239, 231, 211, 0.3);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.terms-agree-row input[type="checkbox"]:active {
  transform: scale(0.88);
}
.terms-agree-row input[type="checkbox"]:checked {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright);
  box-shadow: 0 0 10px rgba(230, 200, 96, 0.55);
}
.terms-agree-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}
.terms-agree-row input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.terms-agree-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream-dim);
  -webkit-user-select: none;
  user-select: none;
}
.terms-agree-highlight {
  color: var(--gold-bright);
  font-weight: 600;
}

.primary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.primary-btn:active { transform: translateY(1px) scale(0.97); box-shadow: 0 2px 8px rgba(201, 162, 39, 0.2); }

.form-msg {
  min-height: 18px;
  font-size: 13px;
  color: var(--red);
  margin: 0;
  text-align: center;
  white-space: pre-line;
}
.form-msg.success { color: #7fbf8f; }
/* 테이블 화면의 안내메시지는 평소 비어있는 경우가 많아서, 리본배너-베팅존 사이 간격이 불필요하게
   커 보이는 원인이 되고 있었음. 이 자리(#game-msg)만 최소높이를 줄임 */
#game-msg { min-height: 4px; }

/* ---------- 게임 화면 ---------- */
/* position: relative를 명시적으로 줌(다른 페이지의 mypage-page-body/wallet-page-body가 이미
   갖고 있던 것과 맞춤) - iOS 사파리에서 position:fixed 자식요소(.gold-particles 등)와
   position:sticky(.topbar)가 있는 페이지가, body가 static일 때 스크롤/스크롤바 렌더링
   계산이 꼬이는 경우가 있다고 알려져 있어서, 안전하게 명시적으로 맞춰둠(offset값이 없어
   시각적으로는 전혀 안 바뀜) */
.game-body { padding-bottom: 40px; position: relative; }

.gold-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.gold-particle {
  position: absolute;
  bottom: -10px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(230, 200, 96, 0.55);
  opacity: 0;
  animation: goldParticleFloat linear infinite;
}
/* 하이로우 테마에서는 파티클을 노란빛 대신 하얀빛으로 */
body.hilo-theme .gold-particle {
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5);
}
@keyframes goldParticleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.7; }
  88% { opacity: 0.45; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 20px)); opacity: 0; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--ink);
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- 3단 상단바 (바카라 테이블 전용) ----------
   1행: 로고 ... 관리자페이지/리모컨
   2행: 공지사항 잔액 닉네임 ... 소리버튼
   3행: 충전환전 마이페이지 로그아웃 (한 그룹으로 우측 끝에 붙음) */
.topbar.topbar-3row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 3px;
  row-gap: 4px;
  flex-wrap: wrap;
}
.topbar-row-1 {
  justify-content: space-between;
}
.topbar-row-3 {
  justify-content: flex-start;
}
/* 테이블이동 버튼(하이로우이동/바카라이동)만 맨 왼쪽에 딱 붙이고,
   나머지 버튼들(충전환전/마이페이지/로그아웃)은 오른쪽에 그룹으로 모이게 함 */
.topbar-row-3 .hilo-nav-btn {
  margin-right: auto;
}
.topbar-row-1-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hilo-theme .topbar {
  border-bottom-color: rgba(180, 183, 190, 0.25);
}

.topbar-brand {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--gold-bright);
}
/* 상단바 로고 텍스트 - 기본(모든 페이지 공용, 텍스트 길이 상관없이 안전하게 작동하는 은은한 샤인) */
.topbar-brand-text {
  background-image: linear-gradient(100deg, var(--gold-bright) 0%, var(--gold-bright) 40%, #ffffff 50%, var(--gold-bright) 60%, var(--gold-bright) 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: topbarBrandShineSimple 3.4s ease-in-out infinite;
}
@keyframes topbarBrandShineSimple {
  0% { background-position: 200% 0; }
  55%, 100% { background-position: -60% 0; }
}

/* 바카라/하이로우 테이블 페이지 전용 - 진한 네온 (data-shine-text 속성이 있는 경우에만 적용됨.
   텍스트를 ::after로 정확히 복제해야 하는 기법이라, 텍스트가 고정된 이 두 페이지에서만 안전하게 씀) */
.topbar-brand-text[data-shine-text] {
  position: relative;
  display: inline-block;
  background: none;
  -webkit-text-fill-color: initial;
  color: #fff6d9;
  animation: topbarNeonBreatheGold 2.4s ease-in-out infinite;
}
@keyframes topbarNeonBreatheGold {
  0%, 100% { filter: drop-shadow(0 0 1px #ffe9a8) drop-shadow(0 0 3px #e6c860) drop-shadow(0 0 6px rgba(230,200,96,0.4)) drop-shadow(0 0 12px rgba(230,200,96,0.4)); }
  50% { filter: drop-shadow(0 0 1.5px #fff6d9) drop-shadow(0 0 4px #e6c860) drop-shadow(0 0 8px rgba(230,200,96,0.85)) drop-shadow(0 0 16px rgba(230,200,96,0.5)); }
}
.topbar-brand-text[data-shine-text]::after {
  content: attr(data-shine-text);
  position: absolute; top: 0; left: 0; width: 100%;
  background: linear-gradient(100deg, transparent 0%, transparent 38%, #fffdf5 50%, transparent 62%, transparent 100%);
  background-size: 200% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px #ffe9a8) drop-shadow(0 0 9px #e6c860);
  animation: topbarBrandShine 3s ease-in-out infinite;
}

/* 하이로우 페이지 전용 - 파란 네온 */
body.hilo-theme .topbar-brand-text[data-shine-text] {
  color: #f0f6ff;
  animation: topbarNeonBreatheBlue 2.4s ease-in-out infinite;
}
@keyframes topbarNeonBreatheBlue {
  0%, 100% { filter: drop-shadow(0 0 1px #a9cdff) drop-shadow(0 0 3px #1a74ff) drop-shadow(0 0 6px rgba(26,116,255,0.4)) drop-shadow(0 0 12px rgba(26,116,255,0.4)); }
  50% { filter: drop-shadow(0 0 1.5px #f0f6ff) drop-shadow(0 0 4px #1a74ff) drop-shadow(0 0 8px rgba(26,116,255,0.85)) drop-shadow(0 0 16px rgba(26,116,255,0.5)); }
}
body.hilo-theme .topbar-brand-text[data-shine-text]::after {
  background-image: linear-gradient(100deg, transparent 0%, transparent 38%, #f5f9ff 50%, transparent 62%, transparent 100%);
  background-size: 200% 100%;
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px #a9cdff) drop-shadow(0 0 9px #1a74ff);
}

@keyframes topbarBrandShine {
  0% { background-position: 200% 0; }
  50%, 100% { background-position: -40% 0; }
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  -webkit-user-select: none;
  user-select: none;
}
.topbar-right * {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
.topbar-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: -2px;
  margin-right: 1px;
  flex-shrink: 0;
}
/* 아이콘마다 요청받은 크기가 달라서 각각 따로 지정함. 박스 자체의 세로 길이는 항상 고정된
   line-height/padding으로 결정되므로, 아이콘을 얼마나 키우거나 줄이든 박스 높이는 안 변함 */
.icon-balance-img { width: 13px; height: 13px; }
.icon-charge-img { width: 13px; height: 13px; }
#charge-btn {
  padding-left: 10px;
  padding-right: 10px;
}
#charge-btn .icon-charge-img { margin-right: -1px; }
.icon-mypage-img { width: 12px; height: 13px; vertical-align: -3px; margin-left: 0; }
.icon-logout-img { width: 12px; height: 12px; }
.btn-emoji { display: inline-block; margin-right: 3px; }

/* 상단바 안의 버튼들(공지사항/충전·환전/마이페이지/로그아웃/소리버튼 등)만 정확한 세로중앙정렬을
   적용함(다른 페이지의 .ghost-btn에는 영향 없도록 범위를 상단바 안으로 한정함).
   line-height 미세조정 대신 flex의 align-items:center를 써서, 폰트 자체의 위아래 비대칭(ascent/
   descent) 때문에 생기는 미세한 오차 없이 항상 정확하게 중앙에 오도록 함 */
.topbar .ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-chip, .balance-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.15);
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-user-select: none;
  user-select: none;
}
.balance-chip {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(230, 200, 96, 0.2);
  padding: 6px 10px;
  gap: 4px;
}

.balance-label {
  color: var(--cream-dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}

#balance-amount { color: var(--gold-bright); font-weight: 600; }
body.hilo-theme #balance-amount { color: #ffd700; }

.ghost-btn {
  background: none;
  border: 1px solid rgba(239, 231, 211, 0.25);
  color: var(--cream);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.3;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.ghost-btn:focus { outline: none; }
.ghost-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.ghost-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.mypage-nav-btn {
  color: #e6c860;
  padding-left: 6px;
  padding-right: 10px;
}
.mypage-nav-btn .icon-mypage-img { margin-right: -1px; }

.topbar-right .ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- 로그아웃 확인 모달 ---------- */
/* ---------- 충전/환전 신청 확인 모달 ---------- */
.request-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(51, 51, 51, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.request-confirm-overlay.show {
  opacity: 1;
  pointer-events: auto;
  background: rgba(51, 51, 51, 0.72);
}

.request-confirm-modal {
  width: min(90vw, 340px);
  background: linear-gradient(165deg, #14100c 0%, var(--ink) 55%, #050a07 100%);
  border-radius: 20px;
  padding: 28px 22px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: scale(0.82) translateY(14px);
  opacity: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.request-confirm-overlay.show .request-confirm-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.request-confirm-icon-ring {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 200, 96, 0.2) 0%, rgba(230, 200, 96, 0.05) 70%);
  border: 1.5px solid rgba(230, 200, 96, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(230, 200, 96, 0.2);
}
.request-confirm-icon-svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.request-confirm-icon-svg.hidden { display: none; }

.request-confirm-title {
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 16px;
}

.request-confirm-info-block {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(239, 231, 211, 0.08);
  border-radius: 12px;
  padding: 4px 14px;
}
.request-confirm-info-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(239, 231, 211, 0.07);
  font-size: 12.5px;
}
#request-confirm-bonus {
  text-align: right;
  line-height: 1.5;
}
#request-confirm-bonus .bonus-extra-charge-text { color: #5b9bd5; }
.request-confirm-info-line:last-child { border-bottom: none; }
.request-confirm-info-line.hidden { display: none; }
.request-confirm-info-line span {
  color: rgba(239, 231, 211, 0.55);
  white-space: nowrap;
  flex-shrink: 0;
}
.request-confirm-info-line b {
  color: var(--cream);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}
.request-confirm-bank-logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -3px;
  margin-right: 4px;
}
.request-confirm-amount-value {
  color: var(--gold-bright) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.request-confirm-warn {
  margin: 12px 4px 0;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.request-confirm-warn.warn-red { color: #ff6a63; }
.request-confirm-warn.warn-yellow { color: #f5d142; }
.request-confirm-warn:empty { display: none; margin: 0; }

.request-confirm-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.request-confirm-btn {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  transition: transform 0.12s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.request-confirm-btn:active { transform: scale(0.96); }
.request-confirm-btn-green {
  background: linear-gradient(180deg, #5cc986, #3ea968);
  color: #06170e;
  box-shadow: 0 6px 16px rgba(62, 169, 104, 0.3);
}
.request-confirm-btn-green:hover { filter: brightness(1.08); }
.request-confirm-btn-red {
  background: linear-gradient(180deg, #cc514c, var(--red));
  color: #fff;
  box-shadow: 0 6px 16px rgba(184, 67, 63, 0.3);
}
.request-confirm-btn-red:hover { filter: brightness(1.08); }

.logout-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(51, 51, 51, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.logout-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
  background: rgba(51, 51, 51, 0.72);
}

.logout-modal {
  width: min(88vw, 320px);
  background: linear-gradient(165deg, #14100c 0%, var(--ink) 55%, #050a07 100%);
  border: 1px solid rgba(184, 67, 63, 0.35);
  border-radius: 20px;
  padding: 30px 24px 22px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: scale(0.82) translateY(14px);
  opacity: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.logout-modal-overlay.show .logout-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.logout-modal-icon-ring {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 67, 63, 0.22) 0%, rgba(184, 67, 63, 0.06) 70%);
  border: 1.5px solid rgba(184, 67, 63, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(184, 67, 63, 0.25);
}
.logout-modal-icon-svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #e08a86;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logout-modal-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(239, 231, 211, 0.9);
  margin: 0 0 24px;
}
.logout-modal-text #logout-modal-nickname {
  color: var(--gold-bright);
  font-weight: 700;
}

.logout-modal-btn-row {
  display: flex;
  gap: 10px;
}
.logout-modal-btn {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.logout-modal-btn:active { transform: scale(0.96); }

.logout-btn-confirm {
  background: linear-gradient(180deg, #cc514c, var(--red));
  color: #fff;
  box-shadow: 0 6px 16px rgba(184, 67, 63, 0.35);
}
.logout-btn-confirm:hover { filter: brightness(1.08); }

.logout-btn-cancel {
  background: rgba(239, 231, 211, 0.06);
  color: var(--cream);
  border-color: rgba(239, 231, 211, 0.25);
}
.logout-btn-cancel:hover { background: rgba(239, 231, 211, 0.12); border-color: rgba(239, 231, 211, 0.4); }

/* 테이블 이동 확인모달 전용 - 확인(초록)/취소(빨강) */
.table-switch-btn-confirm {
  background: linear-gradient(180deg, #4ade80, #22c55e);
  color: #0a2e1a;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}
.table-switch-btn-confirm:hover { filter: brightness(1.08); }

.table-switch-btn-cancel {
  background: linear-gradient(180deg, #cc514c, var(--red));
  color: #fff;
  box-shadow: 0 6px 16px rgba(184, 67, 63, 0.35);
}
.table-switch-btn-cancel:hover { filter: brightness(1.08); }

/* ---------- 공지사항 모달 ---------- */
.notice-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(51, 51, 51, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.notice-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
  background: rgba(51, 51, 51, 0.72);
}

.notice-modal {
  width: min(92vw, 380px);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #14100c 0%, var(--ink) 55%, #050a07 100%);
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 24px 60px rgba(0,0,0,0.55);
  transform: scale(0.85) translateY(14px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.notice-modal-overlay.show .notice-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.notice-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid rgba(239, 231, 211, 0.1);
  flex-shrink: 0;
}
.notice-modal-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-bright);
}
.notice-modal-back-btn {
  background: none;
  border: none;
  color: rgba(239, 231, 211, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  -webkit-tap-highlight-color: transparent;
}
.notice-modal-back-btn:hover { color: var(--cream); }
.notice-modal-back-btn.hidden { display: none; }
.notice-modal-close-btn {
  background: none;
  border: none;
  color: rgba(239, 231, 211, 0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}
.notice-modal-close-btn:hover { color: var(--cream); }

.notice-modal-body-wrap {
  overflow: hidden;
  min-height: 0;
  transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.notice-modal-list {
  overflow-y: auto;
  padding: 8px 12px 18px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.notice-modal-list.hidden { display: none; }

.notice-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 10px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(239, 231, 211, 0.07);
  color: var(--cream);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.notice-list-item:last-child { border-bottom: none; }
.notice-list-item:hover { color: var(--gold-bright); }
.notice-list-item .notice-list-arrow {
  color: rgba(239, 231, 211, 0.3);
  flex-shrink: 0;
}

.notice-modal-detail {
  overflow-y: auto;
  max-height: calc(78vh - 60px);
  padding: 12px 18px 18px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.notice-modal-detail.hidden { display: none; }
.notice-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 6px;
}
.notice-detail-date {
  font-size: 11px;
  color: rgba(239, 231, 211, 0.4);
  margin-bottom: 14px;
}
.notice-detail-content {
  font-size: 13px;
  color: rgba(239, 231, 211, 0.85);
  line-height: 1.7;
  white-space: pre-line;
}

.notice-empty {
  text-align: center;
  padding: 30px 0;
  color: rgba(239, 231, 211, 0.4);
  font-size: 13px;
}

.pause-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(239, 17, 17, 0.5);
  background: rgba(80, 10, 10, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pause-overlay.hidden { display: none; }

.pause-overlay-icon {
  font-size: 20px;
  animation: adminBadgePulse 1.4s ease-in-out infinite;
}

.pause-overlay-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #ff6b6b;
}

.pause-overlay-schedule-detail {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 210, 210, 0.8);
  line-height: 1.7;
  white-space: pre-line;
}
.pause-overlay-schedule-detail.hidden { display: none; }

.table-area {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(14px, 4vw, 24px) clamp(12px, 4vw, 20px) 0;
}

.felt {
  background: radial-gradient(ellipse at center, var(--felt-light) 0%, var(--felt) 65%, var(--felt-dark) 100%);
  border: 6px solid var(--ink);
  border-radius: 16px;
  padding: clamp(20px, 6vw, 36px) clamp(10px, 4vw, 20px) 24px;
  position: relative;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 20px 40px var(--shadow);
  min-height: 220px;
  -webkit-user-select: none;
  user-select: none;
}

.hand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 12px;
}

.hand-block { flex: 1; text-align: center; }

.hand-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
  margin-bottom: 10px;
}

.card-slots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 84px;
  flex-wrap: nowrap;
}

.playing-card {
  width: clamp(30px, 9vw, 52px);
  height: clamp(46px, 13vw, 76px);
  background: var(--cream);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(10px, 2.8vw, 16px);
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  animation: dealCard 0.35s ease-out;
  flex-shrink: 1;
  transition: transform 0.2s ease-in-out;
}
.playing-card.red { color: var(--red); }

.playing-card.face-down {
  background: url('../card-back.png') center/cover no-repeat;
  background-color: var(--ink);
}

.playing-card.flip-collapsed { transform: scaleX(0); }
.playing-card.third-card.flip-collapsed { transform: rotate(90deg) scaleX(0); }

.playing-card.third-card {
  transform: rotate(90deg);
  margin: 0 clamp(6px, 2vw, 10px);
  animation: dealCardSideways 0.35s ease-out;
  transition: transform 0.45s ease-in-out; /* 3번째 카드는 뒤집히는 속도 자체를 더 느리게(긴박한 느낌) */
}

@keyframes dealCard {
  from { transform: translateY(-24px) rotate(-6deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes dealCardSideways {
  from { transform: translateY(-24px) rotate(84deg); opacity: 0; }
  to { transform: translateY(0) rotate(90deg); opacity: 1; }
}

.playing-card.card-exit {
  animation: cardExit 0.4s ease-in forwards !important;
  pointer-events: none;
}
.playing-card.third-card.card-exit {
  animation: cardExitSideways 0.4s ease-in forwards !important;
}

@keyframes cardExit {
  from { transform: translateY(0) rotate(0); opacity: 1; }
  to { transform: translateY(-36px) rotate(0); opacity: 0; }
}

@keyframes cardExitSideways {
  from { transform: translateY(0) rotate(90deg); opacity: 1; }
  to { transform: translateY(-36px) rotate(90deg); opacity: 0; }
}

.hand-total {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: clamp(17px, 5vw, 22px);
  color: var(--cream);
}

.vs-mark {
  align-self: center;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 14px;
  opacity: 0.7;
  padding-top: 34px;
}

.outcome-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 5;
  width: max-content;
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 32px;
  border-radius: 999px;
  background: rgba(6, 15, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.outcome-banner.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.outcome-banner.hidden { display: none; }

.outcome-banner.outcome-player {
  color: #a9cef2;
  border-color: rgba(74, 144, 217, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 24px rgba(74, 144, 217, 0.18);
}
.outcome-banner.outcome-banker {
  color: #f0a9a3;
  border-color: rgba(192, 57, 43, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 24px rgba(192, 57, 43, 0.18);
}
.outcome-banner.outcome-tie {
  color: #8fe0ac;
  border-color: rgba(47, 143, 82, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 24px rgba(47, 143, 82, 0.18);
}
.outcome-banner.outcome-hi {
  color: var(--gold-bright);
  border-color: rgba(230, 200, 96, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 24px rgba(230, 200, 96, 0.18);
}
.outcome-banner.outcome-lo {
  color: #c3c7dc;
  border-color: rgba(150, 155, 175, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 24px rgba(150, 155, 175, 0.18);
}

.personal-result {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-display);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s ease, max-height 0.45s ease, margin 0.45s ease;
  -webkit-user-select: none;
  user-select: none;
}
.personal-result.show {
  opacity: 1;
  max-height: 280px;
  margin-top: 14px;
  transform: translateY(0) scale(1);
}
.personal-result.hidden { display: none; }

.personal-result .result-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 28px;
  border-radius: 10px;
  background: rgba(6, 15, 11, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(230, 200, 96, 0.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.personal-result .result-box.has-streak {
  padding-bottom: 7px;
}

.personal-result .result-headline {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  text-transform: uppercase;
}
.personal-result .result-amount {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(230, 200, 96, 0.3);
}

.streak-text {
  margin-top: 1px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.5px #333333;
}

/* 2~4연승: 빨간 불 이펙트 */
.streak-fire-red {
  color: #ff6a3d;
  animation: streakFireFlicker 0.35s ease-in-out infinite alternate;
}
/* 5~9연승: 초록 불 이펙트 */
.streak-fire-green {
  color: #4ce06a;
  animation: streakFireFlicker 0.35s ease-in-out infinite alternate;
}
@keyframes streakFireFlicker {
  0% {
    text-shadow: 0 0 6px currentColor, 0 0 12px currentColor, 0 0 18px currentColor;
    transform: scale(1);
  }
  100% {
    text-shadow: 0 0 12px currentColor, 0 0 22px currentColor, 0 0 32px currentColor;
    transform: scale(1.04);
  }
}

/* 10~14연승: 노란 번개 이펙트 / 15연승~: 파란 번개 이펙트 (불보다 더 날카롭고 불규칙하게 번쩍임) */
.streak-lightning-yellow {
  color: #f5e042;
  animation: streakLightningFlicker 0.5s steps(1, end) infinite;
}
.streak-lightning-blue {
  color: #4fb3ff;
  animation: streakLightningFlicker 0.5s steps(1, end) infinite;
}
@keyframes streakLightningFlicker {
  0%, 100% { text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; opacity: 1; }
  10% { opacity: 0.55; }
  20% { text-shadow: 0 0 18px currentColor, 0 0 32px currentColor, 0 0 46px currentColor; opacity: 1; }
  35% { opacity: 0.8; }
  50% { text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; opacity: 1; }
  65% { text-shadow: 0 0 22px currentColor, 0 0 38px currentColor; opacity: 1; }
  80% { opacity: 0.65; }
}

.personal-result.neutral {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--cream-dim);
}

.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  opacity: 0.95;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to { transform: translateY(240px) rotate(540deg); opacity: 0; }
}

.sound-toggle-btn {
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
}
.topbar-right-corner-btn {
  margin-left: auto;
}

.admin-link {
  border-color: rgba(184, 67, 63, 0.5);
  color: #e08a86;
  text-decoration: none;
}
.admin-link:hover { border-color: var(--red); color: var(--red); }

/* 다른 게임(하이로우) 테이블로 넘어가는 링크 - 관리자 링크(빨강)와 구분되게 파란빛으로 */
.hilo-nav-btn {
  border-color: rgba(74, 144, 217, 0.5);
  color: #a9cef2;
  text-decoration: none;
  font-size: 10px;
  padding-left: 8px;
  padding-right: 10px;
}
.hilo-nav-btn .btn-emoji { margin-right: 1px; }
.hilo-nav-btn:hover { border-color: #4a90d9; color: #cfe4f7; }
.baccarat-nav-btn-red {
  border-color: rgba(239, 17, 17, 0.5);
  color: #ff8080;
}
.baccarat-nav-btn-red:hover { border-color: #ef1111; color: #ffb0b0; }

.remote-link {
  position: relative;
  border: 1.5px solid #4fc3ff;
  color: #eaf4ff;
  background: rgba(10, 20, 35, 0.5);
  animation: remoteNeonBreathe 2.2s ease-in-out infinite;
}
@keyframes remoteNeonBreathe {
  0%, 100% {
    box-shadow: 0 0 4px rgba(79,195,255,0.6), 0 0 10px rgba(79,195,255,0.35), inset 0 0 6px rgba(79,195,255,0.15);
    text-shadow: 0 0 4px rgba(79,195,255,0.7), 0 0 10px rgba(79,195,255,0.4);
    border-color: #4fc3ff;
  }
  50% {
    box-shadow: 0 0 7px rgba(79,195,255,0.9), 0 0 18px rgba(79,195,255,0.55), inset 0 0 10px rgba(79,195,255,0.25);
    text-shadow: 0 0 6px rgba(150,220,255,0.9), 0 0 16px rgba(79,195,255,0.6);
    border-color: #96dcff;
  }
}
.remote-link:hover { border-color: #4fb3ff; color: #7fcaff; }
.admin-link.hidden { display: none; }

.logout-corner-btn {
}
.logout-corner-btn:focus { outline: none; }
.logout-corner-btn:hover,
.logout-corner-btn.pressed {
  border-color: var(--red);
  color: #ff9490;
  background: rgba(184, 67, 63, 0.15);
}

.admin-link-badge-wrap { position: relative; }

.admin-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef1111;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--ink);
  animation: adminBadgePulse 1.6s ease-in-out infinite;
}
.admin-badge.hidden { display: none; }

@keyframes adminBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ---- 출석보상 버튼(상단바 원형 아이콘) ---- */
.gift-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(230, 200, 96, 0.4);
  background: rgba(230, 200, 96, 0.08);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.gift-btn.hidden { display: none; }

.attendance-dot-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef1111;
  border: 2px solid var(--ink);
  animation: adminBadgePulse 1.4s ease-in-out infinite;
}
.attendance-dot-badge.hidden { display: none; }

/* ---- 출석보상 모달 내용 ---- */
.attendance-modal-body {
  padding: 16px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.attendance-streak-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 14px;
  padding: 5px 14px;
  border-radius: 20px;
  background: transparent;
  box-shadow: inset 0 0 0 100px rgba(74, 222, 128, 0.08);
  border: 1.5px solid rgba(74, 222, 128, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-size: 12.5px;
  width: fit-content;
  background-image: linear-gradient(120deg, rgba(239,231,211,0.65) 0%, rgba(239,231,211,0.65) 42%, #ffffff 50%, rgba(239,231,211,0.65) 58%, rgba(239,231,211,0.65) 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: attendanceStreakShine 3.6s ease-in-out infinite;
}
.attendance-streak-text b {
  background-image: linear-gradient(120deg, #4ade80 0%, #4ade80 42%, #ffffff 50%, #4ade80 58%, #4ade80 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: attendanceStreakShine 3.6s ease-in-out infinite;
}
@keyframes attendanceStreakShine {
  0% { background-position: 200% 0; }
  55%, 100% { background-position: -60% 0; }
}

.attendance-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.attendance-day-box {
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 9px;
  border: 1px solid rgba(239, 231, 211, 0.1);
  background: rgba(239, 231, 211, 0.03);
}
.attendance-day-box.done { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.35); }
.attendance-day-box.today { background: rgba(230, 200, 96, 0.12); border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(230, 200, 96, 0.3); }
.attendance-day-box.future { opacity: 0.4; }
.attendance-day-num { font-weight: 700; color: rgba(239, 231, 211, 0.6); }
.attendance-day-box.done .attendance-day-num { color: #4ade80; }
.attendance-day-box.today .attendance-day-num { color: var(--gold-bright); }

/* 모든 칸에 선물 이모지가 있고, 오늘 칸에서만(.attendance-day-emoji-float) 위아래로 살짝 둥둥 떠다님 */
.attendance-day-emoji {
  font-size: 13px;
  display: inline-block;
}
.attendance-day-emoji-float {
  animation: attendanceDayEmojiFloat 1.6s ease-in-out infinite;
}
@keyframes attendanceDayEmojiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.attendance-claim-btn {
  width: 100%;
  background: transparent;
  box-shadow: inset 0 0 0 100px rgba(74, 222, 128, 0.1);
  border: 1.5px solid rgba(74, 222, 128, 0.6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
  background-image: linear-gradient(120deg, #4ade80 0%, #4ade80 42%, #ffffff 50%, #4ade80 58%, #4ade80 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: attendanceClaimBtnShine 3.4s ease-in-out infinite;
}
@keyframes attendanceClaimBtnShine {
  0% { background-position: 200% 0; }
  55%, 100% { background-position: -60% 0; }
}
.attendance-claim-btn:active { transform: scale(0.96); }
.attendance-claim-btn.claimed {
  box-shadow: inset 0 0 0 100px rgba(74, 222, 128, 0.4);
  border: 1.5px solid #4ade80;
  background-image: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  cursor: pointer;
  animation: attendanceClaimBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes attendanceClaimBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  65% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
/* 출석보상 받기 버튼을 누르면, 버튼뿐 아니라 모달 박스 전체도 같이 탄성있게 반응함 */
.attendance-modal.claim-bounce {
  animation: attendanceModalBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes attendanceModalBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.05); }
  65% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.attendance-claim-btn:disabled { opacity: 1; cursor: not-allowed; }
.attendance-claim-btn.claimed:disabled { opacity: 1; }
.attendance-hint {
  text-align: center;
  font-size: 10.5px;
  color: rgba(239, 231, 211, 0.4);
  margin-top: 10px;
  animation: attendanceHintBreathe 3s ease-in-out infinite;
}
@keyframes attendanceHintBreathe {
  0%, 100% {
    color: rgba(239, 231, 211, 0.4);
    text-shadow: none;
  }
  50% {
    color: rgba(239, 231, 211, 0.75);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  }
}

/* ---- 관리자 대시보드: 출석보상 설정 ---- */
.attendance-enable-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.attendance-enable-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}
.attendance-day-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.attendance-day-input-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attendance-day-input-item label {
  font-size: 11px;
  color: var(--cream-dim);
}
.attendance-day-input-item .amount-input-wrap { margin-bottom: 0; }

.betting-panel {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  -webkit-user-select: none;
  user-select: none;
}

.bet-spot {
  flex: 1;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: #ffffff;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s, opacity 0.4s ease;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.bet-spot:active { transform: scale(0.97); }

.bet-spot[data-spot="player"] {
  background: linear-gradient(180deg, rgba(74, 144, 217, 0.45), rgba(23, 55, 94, 0.75));
  border-color: rgba(74, 144, 217, 0.4);
  border-radius: 32px 14px 14px 14px;
}
.bet-spot[data-spot="player"]:hover { border-color: rgba(74, 144, 217, 0.75); }
.bet-spot[data-spot="player"].has-bet {
  background: linear-gradient(180deg, rgba(74, 144, 217, 0.65), rgba(23, 55, 94, 0.85));
  border-color: #6fb0ea;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.3), 0 10px 24px rgba(74, 144, 217, 0.25);
}
.bet-spot[data-spot="player"] .bet-total { color: #ffffff; }

.bet-spot[data-spot="tie"] {
  background: linear-gradient(180deg, rgba(47, 143, 82, 0.55), rgba(14, 61, 37, 0.85));
  border-color: rgba(47, 143, 82, 0.4);
}
.bet-spot[data-spot="tie"]:hover { border-color: rgba(47, 143, 82, 0.75); }
.bet-spot[data-spot="tie"].has-bet {
  background: linear-gradient(180deg, rgba(47, 143, 82, 0.75), rgba(14, 61, 37, 0.9));
  border-color: #5fcf8a;
  box-shadow: 0 0 0 2px rgba(47, 143, 82, 0.3), 0 10px 24px rgba(47, 143, 82, 0.25);
}
.bet-spot[data-spot="tie"] .bet-total { color: #ffffff; }

.bet-spot[data-spot="banker"] {
  background: linear-gradient(180deg, rgba(192, 57, 43, 0.45), rgba(74, 21, 17, 0.75));
  border-color: rgba(192, 57, 43, 0.4);
  border-radius: 14px 32px 14px 14px;
}
.bet-spot[data-spot="banker"]:hover { border-color: rgba(192, 57, 43, 0.75); }
.bet-spot[data-spot="banker"].has-bet {
  background: linear-gradient(180deg, rgba(192, 57, 43, 0.65), rgba(74, 21, 17, 0.85));
  border-color: #e07a70;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.3), 0 10px 24px rgba(192, 57, 43, 0.25);
}
.bet-spot[data-spot="banker"] .bet-total { color: #ffffff; }

.bet-spot-label {
  font-size: clamp(19px, 5.5vw, 25px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.payout-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 2px 10px;
}

.chip-stack {
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stack-chip-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  animation: chipPop 0.3s ease-out;
}

.stack-chip-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 10px;
  color: #ffffff;
}
.stack-chip-label.dark-text { color: #333333; }

@keyframes chipPop {
  from { transform: translateY(-6px) scale(0.6); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.bet-total {
  display: none;
}

.bet-summary-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  -webkit-user-select: none;
  user-select: none;
}

.bet-summary-pill {
  flex: 1;
  min-width: 0;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6, 15, 11, 0.65);
  border: 1px solid rgba(242, 242, 242, 0.35);
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

.bet-summary-pill .bet-summary-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cream-dim);
  white-space: nowrap;
}

.bet-summary-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold-bright);
  white-space: nowrap;
  display: inline-block;
  transition: color 0.3s ease, font-size 0.15s ease;
}
.bet-summary-value.win-state {
  color: var(--gold-bright);
}
/* 승리시 숨쉬는 효과는 텍스트가 아니라 박스(pill) 전체에 줌.
   pill은 평소엔 overflow:hidden이라(금액이 너무 길어질 때 삐져나오지 않게 하기 위함) box-shadow가
   그대로 잘려버리므로, 숨쉬는 동안(승리 상태)에만 overflow를 풀어줘서 그림자가 바깥으로 정확히 퍼지게 함.
   box-shadow는 원래 outset(바깥쪽)이 기본값이라 안쪽으로 번질 일이 없음 */
.bet-summary-pill:has(.bet-summary-value.win-state) {
  overflow: visible;
  animation: betSummaryPillBreathe 1s ease-in-out infinite;
}
@keyframes betSummaryPillBreathe {
  0%, 100% { box-shadow: 0 0 0 rgba(230, 200, 96, 0); }
  50% { box-shadow: 0 0 6px 2px rgba(230, 200, 96, 0.9), 0 0 14px 4px rgba(230, 200, 96, 0.45); }
}

.chip-hint {
  text-align: center;
  font-size: 12px;
  color: var(--cream-dim);
  margin: 14px 0 0;
  -webkit-user-select: none;
  user-select: none;
}

.chip-rack {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  flex-wrap: wrap;
  -webkit-user-select: none;
  user-select: none;
}

.chip {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px dashed rgba(239,231,211,0.5);
  background: radial-gradient(circle, var(--felt-light) 60%, var(--ink) 100%);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { transform: scale(1.06); border-color: var(--gold); }
.chip-clear {
  border-radius: 20px;
  width: auto;
  padding: 0 16px;
  border-style: solid;
  border-color: rgba(184, 67, 63, 0.5);
  color: var(--red);
}

.chip-clear-icon {
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(239,231,211,0.3);
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.15s, transform 0.15s, border-color 0.15s;
}
.chip-clear-icon:hover { opacity: 1; border-color: var(--gold); }
.chip-clear-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
}

.chip-img {
  width: 42px;
  height: 42px;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chip-img:hover { border: none; }
.chip-img.selected {
  border: none !important;
  box-shadow: 0 0 0 3px rgba(230, 200, 96, 0.7), 0 0 14px rgba(230, 200, 96, 0.5);
}
body.hilo-theme .chip-img.selected {
  box-shadow: 0 0 0 3px rgba(230, 232, 236, 0.75), 0 0 14px rgba(230, 232, 236, 0.5);
}

.chip-img-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 9px;
  color: #ffffff;
  pointer-events: none;
  letter-spacing: 0.01em;
}
.chip-img-label.dark-text { color: #333333; }

.chip.selected {
  border-style: solid;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 3px rgba(230, 200, 96, 0.25);
  transform: scale(1.08) translateY(-3px);
}
body.hilo-theme .chip.selected {
  box-shadow: 0 0 0 3px rgba(230, 232, 236, 0.3);
}

.flying-chip {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 999;
  opacity: 1;
  transition: transform 0.42s cubic-bezier(0.3, 0.6, 0.35, 1), opacity 0.42s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

.flying-chip-fallback {
  border: 2px solid var(--gold-bright);
  background: radial-gradient(circle, var(--felt-light) 55%, var(--ink) 100%);
}

.flying-chip-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 9px;
  color: #ffffff;
}
.flying-chip-fallback .flying-chip-label { color: var(--gold-bright); font-family: var(--font-mono); font-weight: 600; }

.felt-center-timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}
/* 하이로우는 카드가 딜링박스 한가운데에 오고, 타이머는 그 위쪽(상단중앙)에 따로 위치함 */
body.hilo-theme .felt-center-timer {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.round-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 상태박스(timer-phase) - 리본형 배너 디자인 ----------
   구조: .phase-banner-wrap(바깥, 흐르는 그라디언트 테두리+배너모양) > #timer-phase(안쪽 내용물)
   JS가 #timer-phase의 className을 직접 갈아끼우므로(dealing/dealing-cards/result 등),
   바깥 wrap은 :has()로 안쪽 상태를 감지해서 색깔/애니메이션을 따라가도록 설계함 */
.phase-banner-wrap {
  position: relative;
  display: block;
  width: 100%;
  padding: 1.5px;
  clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0% 50%);
  background: linear-gradient(90deg, #7a7a7a 0%, #dcdcdc 25%, #ffffff 50%, #dcdcdc 75%, #7a7a7a 100%);
  background-size: 250% 100%;
  animation: bannerBorderShift 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.3)) drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
@keyframes bannerBorderShift {
  0% { background-position: 0% 0; }
  100% { background-position: 250% 0; }
}
/* 단계별 테두리 색상: 베팅=흰색(기본값 위에서 처리됨), 섞는중/뽑는중=골드, 딜링중/공개중=파랑, 결과확인=초록 */
.phase-banner-wrap:has(#timer-phase.dealing) {
  background: linear-gradient(90deg, #a88a3f 0%, #e6c860 25%, #fff6d2 50%, #e6c860 75%, #a88a3f 100%);
  background-size: 250% 100%;
  filter: drop-shadow(0 0 8px rgba(230,200,96,0.35)) drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
.phase-banner-wrap:has(#timer-phase.dealing-cards) {
  background: linear-gradient(90deg, #1f5faa 0%, #4fa3ff 25%, #d8ecff 50%, #4fa3ff 75%, #1f5faa 100%);
  background-size: 250% 100%;
  filter: drop-shadow(0 0 8px rgba(79,163,255,0.35)) drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
.phase-banner-wrap:has(#timer-phase.result) {
  background: linear-gradient(90deg, #1e7a4a 0%, #4ade80 25%, #d8ffe9 50%, #4ade80 75%, #1e7a4a 100%);
  background-size: 250% 100%;
  filter: drop-shadow(0 0 8px rgba(74,222,128,0.35)) drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
/* 기존에 있던 뒤뚱거림/심장박동 효과를 바깥 wrap 전체(테두리 포함)에 그대로 적용 */
/* "카드를 섞는중입니다" - 박스는 가만히, 텍스트만 좌우로 기울어짐 */
#timer-phase.phase-wobble #timer-phase-text {
  display: inline-block;
  animation: phaseWobbleText 1.1s ease-in-out infinite;
}
@keyframes phaseWobbleText {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
/* "결과확인" - 박스는 가만히, 텍스트만 커졌다작아졌다 */
#timer-phase.phase-heartbeat #timer-phase-text {
  display: inline-block;
  animation: phaseHeartbeatText 0.9s ease-in-out infinite;
}
@keyframes phaseHeartbeatText {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

.timer-phase {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  width: 100%;
  clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0% 50%);
  background: linear-gradient(180deg, #1a1510 0%, #0d0a07 100%);
}

/* 텍스트 위->아래 그라데이션 (단계별 색상, 기본값=흰색/베팅시간) */
#timer-phase-text {
  background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 55%, #8a8a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.timer-phase.dealing #timer-phase-text {
  background-image: linear-gradient(to bottom, #fff6d2 0%, #e6c860 55%, #a88a3f 100%);
}
.timer-phase.dealing-cards #timer-phase-text {
  background-image: linear-gradient(to bottom, #cfe6ff 0%, #4fa3ff 55%, #1f5faa 100%);
}
.timer-phase.result #timer-phase-text {
  background-image: linear-gradient(to bottom, #c8ffd9 0%, #4ade80 55%, #1e7a4a 100%);
}

/* 양옆 카드 장식 - 뒤집히는 미니카드, 단계별 색상 동기화 */
.card-deco {
  position: relative;
  width: 15px;
  height: 21px;
  border-radius: 2.5px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #ffffff 0%, #b0b0b0 100%);
  box-shadow: 0 0 5px rgba(255,255,255,0.35);
  color: #4a4a4a;
  transform: rotate(-6deg);
  display: none; /* 기본(베팅시간)은 카드아이콘 자체를 없앰 */
}
/* "섞는중/뽑는중"일 때만 카드아이콘이 나타나고, 뒤집히는 애니메이션도 이때만 재생 */
.timer-phase.dealing .card-deco {
  display: inline-block;
  animation: cardDecoFlip 2.6s ease-in-out infinite;
}
/* "결과확인"일 때도 카드아이콘은 보이되, 뒤집히지 않고 가만히 있음 */
.timer-phase.result .card-deco {
  display: inline-block;
}
/* "카드공개중/딜링중"일 때는 계속 기본값(숨김) 유지 - 별도 규칙 필요없음 */
.card-deco:last-child { animation-delay: 0.15s; }
.card-deco::after {
  content: attr(data-suit);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
@keyframes cardDecoFlip {
  0%, 85%, 100% { transform: rotateY(0deg) rotate(-6deg); }
  92% { transform: rotateY(180deg) rotate(-6deg); }
}
.timer-phase.dealing .card-deco {
  background: linear-gradient(160deg, #fff6d2 0%, #e6c860 100%);
  box-shadow: 0 0 5px rgba(230,200,96,0.5);
  color: #6b5518;
}
.timer-phase.dealing-cards .card-deco {
  background: linear-gradient(160deg, #cfe6ff 0%, #4fa3ff 100%);
  box-shadow: 0 0 5px rgba(79,163,255,0.5);
  color: #10396b;
}
.timer-phase.result .card-deco {
  background: linear-gradient(160deg, #c8ffd9 0%, #4ade80 100%);
  box-shadow: 0 0 5px rgba(74,222,128,0.5);
  color: #135c34;
}

.phase-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(239, 231, 211, 0.25);
  border-top-color: var(--gold-bright);
  border-radius: 50%;
  animation: phaseSpinnerRotate 0.8s linear infinite;
  flex-shrink: 0;
}
.phase-spinner.hidden { display: none; }

@keyframes phaseSpinnerRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* "카드딜링중" 앞에 붙는 작은 카드 아이콘 - 좌우로 납작해졌다 펴지며 카드 넘기는 느낌 */
.phase-card-icon {
  display: inline-block;
  width: 9px;
  height: 13px;
  background: var(--cream);
  border-radius: 2px;
  flex-shrink: 0;
  animation: phaseCardFlip 0.7s ease-in-out infinite;
}
.phase-card-icon.hidden { display: none; }

@keyframes phaseCardFlip {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.15); }
}

.timer-phase.dealing { color: var(--gold-bright); }
.timer-phase.dealing-cards { color: #38bdf8; }
.timer-phase.result { color: #7fbf8f; }

.timer-phase.phase-pop {
  animation: timerPhasePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes timerPhasePop {
  0% { transform: scale(0); opacity: 0; }
  55% { transform: scale(1.18); opacity: 1; }
  75% { transform: scale(0.94); }
  90% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

/* "카드를 섞는중입니다"/"결과확인" 애니메이션은 이제 박스(wrap)가 아니라 텍스트에만 적용됨
   (위쪽 #timer-phase.phase-wobble/phase-heartbeat 규칙 참고) */

.connecting-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.12);
  border-top-color: var(--gold-bright);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.connecting-spinner.hidden { display: none; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.timer-ring-wrap {
  position: relative;
  width: 84px;
  height: 84px;
}

.timer-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 8;
}

.timer-ring-progress {
  fill: none;
  stroke: #22c55e;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 276.5;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6));
}

.timer-ring-wrap.dealing .timer-ring-progress { stroke: var(--gold-bright); filter: drop-shadow(0 0 4px rgba(230, 200, 96, 0.6)); }
body.hilo-theme .timer-ring-wrap.dealing .timer-ring-progress { filter: drop-shadow(0 0 4px rgba(230, 232, 236, 0.6)); }
.timer-ring-wrap.result .timer-ring-progress { stroke: #7fbf8f; filter: drop-shadow(0 0 4px rgba(127, 191, 143, 0.6)); }

.timer-seconds {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.bet-spot.locked { opacity: 0.5; pointer-events: none; }

.bet-spot.locked.winner-pulse {
  opacity: 1;
  animation: winnerHeartbeat 1s ease-in-out infinite;
}

@keyframes winnerHeartbeat {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}
.chip-rack.locked .chip { opacity: 0.4; pointer-events: none; }

.bettor-count-in-felt {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  -webkit-user-select: none;
  user-select: none;
  color: var(--cream-dim);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.bettor-count-num { color: #e6c860; font-weight: 700; }

.request-panel {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.75);
}
.request-panel.hidden { display: none; }

.request-panel h2 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold-bright);
  margin: 0 0 14px;
}

.request-type-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.request-type-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 6px;
  background: rgba(6, 15, 11, 0.75);
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.request-type-btn.active {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(201, 162, 39, 0.25);
}

.amount-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(6, 15, 11, 0.85);
  border: 1px solid rgba(239, 231, 211, 0.25);
  border-radius: 4px;
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.amount-input-wrap:focus-within { border-color: var(--gold); }

.request-amount-input {
  flex: 1;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  background: none;
  border: none;
  color: var(--cream);
  padding: 10px 12px;
  outline: none;
}
/* wrap(amount-input-wrap) 없이 단독으로 쓰이는 경우 - 자체적으로 배경/테두리를 갖도록 함 */
.attendance-amount-input {
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.attendance-amount-input:focus { border-color: var(--gold); }

.amount-suffix {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--cream-dim);
  padding-right: 12px;
  white-space: nowrap;
}

.amount-hint {
  font-size: 11px;
  color: var(--cream-dim);
  margin: 0 0 10px;
}

.quick-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.quick-add-row.hidden { display: none; }
.quick-add-btn {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 4px;
  white-space: nowrap;
}
/* 짧은 금액 버튼은 좁게, 긴 금액(1,000,000) 버튼은 그만큼 더 넓게 */
.quick-add-btn[data-add="5000"] { flex: 0.9; }
.quick-add-btn[data-add="10000"] { flex: 0.95; }
.quick-add-btn[data-add="50000"] { flex: 0.95; }
.quick-add-btn[data-add="1000000"] { flex: 1.35; }

.request-submit-btn { width: 100%; margin-top: 16px; }

.bonus-select-field {
  margin-top: 14px;
  margin-bottom: 6px;
}
.bonus-select-field.hidden { display: none; }
.bonus-select-field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 6px;
}

.use-full-balance-btn {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  text-align: center;
}
.use-full-balance-btn.hidden { display: none; }

.exchange-password-field { margin-top: 14px; }
.exchange-password-field.hidden { display: none; }
.exchange-password-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  margin-bottom: 6px;
}
.exchange-password-field input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.3em;
  text-align: center;
  background: rgba(6, 15, 11, 0.85);
  border: 1px solid rgba(239, 231, 211, 0.25);
  border-radius: 4px;
  color: var(--cream);
  padding: 10px 12px;
  outline: none;
}
.exchange-password-field input:focus { border-color: var(--gold); }

/* ---------- 마이페이지 ---------- */
.mypage-area { max-width: 560px; }

.mypage-info-card {
  margin-top: 20px;
  margin-bottom: 24px;
  padding: 6px 18px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.85);
}

.mypage-my-stats-card {
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.85);
}
.mypage-my-stats-card h2 {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-bright);
  margin: 0 0 12px;
}
.my-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.my-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.my-stat-label {
  font-size: 11px;
  color: var(--cream-dim);
}
.my-stat-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}
.my-stat-value-green { color: #22c55e; }
.my-stat-value.profit-positive { color: #7fbf8f; }
.my-stat-value.profit-negative { color: var(--red); }

.mypage-stat-summary { margin-bottom: 24px; }

.mypage-password-card {
  padding: 20px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.85);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mypage-password-card h2 {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-bright);
  margin: 0;
}
.mypage-password-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.mypage-password-card input {
  font-family: var(--font-mono);
  font-size: 14px;
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--cream);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.mypage-password-card input:focus {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
}
.mypage-password-card .primary-btn { margin-top: 4px; }

/* ---------- 용 그림 배경 워터마크 (지갑/마이페이지 공용) ---------- */
.wallet-page-body,
.mypage-page-body {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.wallet-page-body::before,
.mypage-page-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../dragon-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: invert(1);
  pointer-events: none;
  z-index: 0;
}
.wallet-page-body > *:not(.toast-container):not(.request-success-overlay):not(.request-confirm-overlay),
.mypage-page-body > *:not(.toast-container) {
  position: relative;
  z-index: 1;
}

/* ---------- 용 그림 배경 워터마크 (로그인 화면 전용, 노란색) ---------- */
.auth-page-body {
  position: relative;
}
/* ::before = 항상 보이는 베이스(어두운 상태여도 노란 후광은 이미 선명하게 보임)
   ::after  = 그 위에 opacity로 숨쉬듯 겹쳐지는 "더 밝은" 레이어
   -> 두 장을 겹쳐 크로스페이드하는 방식이라, 무거운 필터 계산 없이 opacity만 애니메이션하면 되어 가벼움.
   또한 노란 후광이 두 이미지 모두에 이미 구워져있어서, 어두워져도 후광 자체가 사라지지 않음
   (예전엔 필터 하나로 전체 밝기를 조절해서, 어두워지면 원래 약했던 노란 후광이 아예 안 보이던 문제가 있었음) */
.auth-page-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../dragon-neon-dim.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.auth-page-body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../dragon-neon-bright.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  animation: dragonNeonBreathe 4s ease-in-out infinite;
}
@keyframes dragonNeonBreathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
.auth-page-body > *:not(.toast-container):not(.app-splash) {
  position: relative;
  z-index: 1;
}

/* PC처럼 화면이 넓을 땐, background-size:cover가 세로로 긴 용 이미지를 과도하게 확대시켜서
   너무 커 보이는 문제가 있었음 -> 일정 너비 이상부턴 적당한 고정 크기로 제한함 */
@media (min-width: 700px) {
  .wallet-page-body::before,
  .mypage-page-body::before,
  .auth-page-body::before,
  .auth-page-body::after {
    background-size: 480px auto;
  }
}

.wallet-area { max-width: 560px; }

.mypage-welcome-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  margin-bottom: 16px;
  overflow: hidden;
}

.mypage-welcome-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  opacity: 0;
  transform: scale(0);
  animation: elasticPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}
.mypage-welcome-text .welcome-name {
  color: var(--gold-bright);
}

.wallet-balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 24px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 0%, rgba(201, 162, 39, 0.12), transparent 55%),
    rgba(8, 9, 11, 0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.wallet-balance-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 200, 96, 0.5), transparent);
}

/* ---- 회전하는 글로우 별빛 배경 ----
   박스보다 훨씬 크게(420px) 만들어서, 회전해도 박스 안 어느 구석에도 빈 공간이 안 보이게 함.
   부모(wallet-balance-card)에 overflow:hidden이 이미 있어서 박스 밖으로는 안 삐져나감 */
.balance-starfield {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: balanceStarSpin 40s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes balanceStarSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.balance-star {
  position: absolute;
  border-radius: 50%;
  background: #fff4d6;
  box-shadow: 0 0 4px 1px rgba(230, 200, 96, 0.85), 0 0 9px 2px rgba(230, 200, 96, 0.4);
}
.balance-star.twinkle {
  animation: balanceStarTwinkle ease-in-out infinite alternate;
}
@keyframes balanceStarTwinkle {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}
/* 박스 안의 실제 내용(라벨, 숫자)은 별빛 레이어보다 항상 위에 오도록 */
.wallet-balance-card > .wallet-balance-label,
.wallet-balance-card > .wallet-balance-value {
  position: relative;
  z-index: 1;
}

.support-link-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  text-decoration: none;
  padding: 14px;
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.75);
  margin-bottom: 20px;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.support-link-box:hover {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.12);
}
.support-link-box.hidden { display: none; }

.support-link-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-bright);
}

.support-link-desc {
  font-size: 11px;
  color: var(--cream-dim);
}

.wallet-maintenance-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid rgba(239, 17, 17, 0.4);
  background: rgba(80, 10, 10, 0.35);
}
.wallet-maintenance-banner.hidden { display: none; }
.wallet-maintenance-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #ff6b6b;
}
.wallet-maintenance-desc {
  font-size: 12px;
  color: var(--cream-dim);
}

.coupon-card {
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(230, 200, 96, 0.35);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.8);
}

.my-account-card {
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(230, 200, 96, 0.25);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.8);
}
.my-account-card h2 {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold-bright);
  margin: 0 0 10px;
}
.my-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(239, 231, 211, 0.07);
  font-size: 13px;
}
.my-account-row:last-of-type { border-bottom: none; }
.my-account-row > span:first-child {
  color: var(--cream-dim);
}
.my-account-value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cream);
  font-weight: 600;
}
.my-account-bank-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.my-account-bank-logo.hidden { display: none; }
.my-account-warn {
  margin: 10px 0 0;
  font-size: 11px;
  color: #f0a04b;
  text-align: center;
  line-height: 1.5;
}

.coupon-card h2 {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold-bright);
  margin: 0 0 10px;
}

.coupon-input-row {
  display: flex;
  gap: 8px;
}
.coupon-input-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--cream);
  outline: none;
}
.coupon-input-row input:focus { border-color: var(--gold); }

.coupon-submit-btn { margin-top: 0; white-space: nowrap; padding: 10px 14px; flex-shrink: 0; }

.wallet-balance-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wallet-balance-label::before { content: '💶'; font-size: 13px; }

.wallet-balance-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(230, 200, 96, 0.35);
}

.wallet-history-section { margin-top: 28px; }
.wallet-history-section h2 {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-bright);
  margin-bottom: 10px;
}

.wallet-table {
  border: 1px solid rgba(239, 231, 211, 0.15);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(6, 15, 11, 0.8);
}

.wallet-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(201, 162, 39, 0.18);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-transform: uppercase;
}

.wallet-table-body { display: flex; flex-direction: column; }

.wallet-table-with-bonus .wallet-table-header,
.wallet-table-with-bonus .wallet-table-row {
  grid-template-columns: 1.2fr 1.3fr 1fr 0.9fr;
}

.wallet-bonus {
  font-size: 11px;
  color: #a5f0c0;
}

.wallet-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-top: 1px solid rgba(239, 231, 211, 0.08);
  align-items: center;
}

.wallet-amount { color: var(--cream); font-weight: 600; white-space: nowrap; }
.wallet-time { color: var(--cream-dim); font-size: 10.5px; line-height: 1.3; }

.wallet-status { font-weight: 700; white-space: nowrap; }
.wallet-table-row.status-approved .wallet-status { color: #ff0000; }
.wallet-table-row.status-rejected .wallet-status { color: #a78bdb; }
.wallet-table-row.status-pending .wallet-status { color: var(--gold-bright); }

.wallet-table-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--cream-dim);
  background: rgba(6, 15, 11, 0.8);
}

.charge-confirm-panel {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(127, 191, 143, 0.5);
  border-radius: 8px;
  background: rgba(10, 30, 18, 0.92);
}
.charge-confirm-panel.hidden { display: none; }
.charge-confirm-panel h2 {
  font-family: var(--font-display);
  font-size: 17px;
  color: #7fbf8f;
  margin: 0 0 14px;
}
.charge-confirm-panel .detail-row span:last-child { color: var(--cream); }
.charge-confirm-panel .full-width-btn { margin-top: 16px; }

.long-press-target {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background 0.15s;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.long-press-pressing {
  background: rgba(230, 200, 96, 0.22);
  transform: scale(0.98);
  transition: background 0.5s ease, transform 0.15s ease;
}

.long-press-copy-flash {
  background: rgba(230, 200, 96, 0.35);
}

.copyable-value {
  background: rgba(230, 200, 96, 0.1);
  border: 1px solid rgba(230, 200, 96, 0.3);
  border-radius: 4px;
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.copyable-value:hover { background: rgba(230, 200, 96, 0.2); border-color: var(--gold-bright); }
.copyable-value:active { transform: scale(0.97); }

.copy-hint {
  font-size: 10px;
  color: var(--cream-dim);
  text-align: right;
  margin: 2px 0 10px;
}

.history-panel {
  margin-top: 32px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
.history-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.history-panel .history-panel-header h2 { margin-bottom: 0; }
.history-view-all-btn {
  background: none;
  border: none;
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.history-view-all-btn:focus { outline: none; }
.history-panel h2 {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-bright);
  margin-bottom: 10px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

.history-row {
  border-radius: 10px;
  margin-bottom: 6px;
  padding: 10px 12px;
  background: rgba(239,231,211,0.09);
  border: 1px solid rgba(239,231,211,0.16);
}
.history-row.win { background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.4); }
.history-row.lose { background: rgba(239,17,17,0.14); border-color: rgba(239,17,17,0.35); }
.history-row.tie-win { background: rgba(230,200,96,0.16); border-color: rgba(230,200,96,0.4); }
.history-row.neutral { background: rgba(239,231,211,0.09); border-color: rgba(239,231,211,0.2); }

.history-mid { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.history-status-amount { display: flex; align-items: center; gap: 8px; }

.history-round {
  font-size: 12px; font-weight: 700; color: #ffffff;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(239,231,211,0.1);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-flex; align-items: center;
}
.history-round .vs { color: #ffffff; font-weight: 400; margin: 0 5px; }
.history-round .p-label { color: #5b9bd5; }
.history-round .b-label { color: #ff3b3b; }
.history-round .hi-label { color: #fa9c3c; }
.history-round .lo-label { color: #38c7c7; }

.history-result-text {
  font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 20px;
}
.history-row.win .history-result-text { background: rgba(34,197,94,0.18); color: #4ade80; }
.history-row.lose .history-result-text { background: rgba(239,17,17,0.15); color: #f0a9a3; }
.history-row.tie-win .history-result-text { background: rgba(230,200,96,0.18); color: #e6c860; }
.history-row.neutral .history-result-text { background: rgba(239,231,211,0.1); color: rgba(239,231,211,0.6); }

.history-amount { font-family: var(--font-mono); font-weight: 800; font-size: 14px; }
.history-row.win .history-amount { color: #4ade80; }
.history-row.lose .history-amount { color: #f0a9a3; }
.history-row.tie-win .history-amount { color: #e6c860; }
.history-row.neutral .history-amount { color: rgba(239,231,211,0.6); }

.history-bets {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding-top: 6px; border-top: 1px dashed rgba(239,231,211,0.1);
}
.history-bets-label { font-size: 10px; color: #ffffff; }
.history-bet-chip {
  font-size: 10px; padding: 3px 8px; border-radius: 20px;
  display: flex; align-items: center; gap: 3px; font-weight: 700;
}
.history-bet-chip.pick-player {
  background: rgba(0,0,0,0.35); color: #eaf5ff; border: 1px solid #4a90ff;
  animation: chipBreathePlayer 2.2s ease-in-out infinite;
}
.history-bet-chip.pick-banker {
  background: rgba(0,0,0,0.35); color: #fff0f0; border: 1px solid #ff6b6b;
  animation: chipBreatheBanker 2.2s ease-in-out infinite;
}
.history-bet-chip.pick-tie {
  background: rgba(0,0,0,0.35); color: #f0fff5; border: 1px solid #4ade80;
  animation: chipBreatheTie 2.2s ease-in-out infinite;
}
.history-bet-chip.pick-hi {
  background: rgba(0,0,0,0.35); color: #fff3e8; border: 1px solid #fa9c3c;
  animation: chipBreatheHi 2.2s ease-in-out infinite;
}
.history-bet-chip.pick-lo {
  background: rgba(0,0,0,0.35); color: #eafffe; border: 1px solid #38c7c7;
  animation: chipBreatheLo 2.2s ease-in-out infinite;
}
/* 픽칩 네온 - 실제 네온사인처럼 글자 중심은 하얗게, 색은 그림자(후광)로만 표현. 2.2초 주기로 은은하게 숨쉼 */
@keyframes chipBreathePlayer {
  0%, 100% { box-shadow: 0 0 5px rgba(79,195,255,0.7), 0 0 10px rgba(79,195,255,0.35); text-shadow: 0 0 3px #ffffff, 0 0 7px rgba(79,195,255,0.9), 0 0 14px rgba(79,195,255,0.5); border-color: #4a90ff; }
  50% { box-shadow: 0 0 9px rgba(79,195,255,1), 0 0 20px rgba(79,195,255,0.6), 0 0 30px rgba(79,195,255,0.25); text-shadow: 0 0 4px #ffffff, 0 0 10px rgba(79,195,255,1), 0 0 20px rgba(79,195,255,0.6); border-color: #8fc3ff; }
}
@keyframes chipBreatheBanker {
  0%, 100% { box-shadow: 0 0 5px rgba(255,122,122,0.7), 0 0 10px rgba(255,122,122,0.35); text-shadow: 0 0 3px #ffffff, 0 0 7px rgba(255,122,122,0.9), 0 0 14px rgba(255,122,122,0.5); border-color: #ff6b6b; }
  50% { box-shadow: 0 0 9px rgba(255,122,122,1), 0 0 20px rgba(255,122,122,0.6), 0 0 30px rgba(255,122,122,0.25); text-shadow: 0 0 4px #ffffff, 0 0 10px rgba(255,122,122,1), 0 0 20px rgba(255,122,122,0.6); border-color: #ffa0a0; }
}
@keyframes chipBreatheTie {
  0%, 100% { box-shadow: 0 0 5px rgba(111,240,160,0.7), 0 0 10px rgba(111,240,160,0.35); text-shadow: 0 0 3px #ffffff, 0 0 7px rgba(111,240,160,0.9), 0 0 14px rgba(111,240,160,0.5); border-color: #4ade80; }
  50% { box-shadow: 0 0 9px rgba(111,240,160,1), 0 0 20px rgba(111,240,160,0.6), 0 0 30px rgba(111,240,160,0.25); text-shadow: 0 0 4px #ffffff, 0 0 10px rgba(111,240,160,1), 0 0 20px rgba(111,240,160,0.6); border-color: #8ff5b8; }
}
@keyframes chipBreatheHi {
  0%, 100% { box-shadow: 0 0 5px rgba(255,176,102,0.7), 0 0 10px rgba(255,176,102,0.35); text-shadow: 0 0 3px #ffffff, 0 0 7px rgba(255,176,102,0.9), 0 0 14px rgba(255,176,102,0.5); border-color: #fa9c3c; }
  50% { box-shadow: 0 0 9px rgba(255,176,102,1), 0 0 20px rgba(255,176,102,0.6), 0 0 30px rgba(255,176,102,0.25); text-shadow: 0 0 4px #ffffff, 0 0 10px rgba(255,176,102,1), 0 0 20px rgba(255,176,102,0.6); border-color: #ffc07a; }
}
@keyframes chipBreatheLo {
  0%, 100% { box-shadow: 0 0 5px rgba(111,227,227,0.7), 0 0 10px rgba(111,227,227,0.35); text-shadow: 0 0 3px #ffffff, 0 0 7px rgba(111,227,227,0.9), 0 0 14px rgba(111,227,227,0.5); border-color: #38c7c7; }
  50% { box-shadow: 0 0 9px rgba(111,227,227,1), 0 0 20px rgba(111,227,227,0.6), 0 0 30px rgba(111,227,227,0.25); text-shadow: 0 0 4px #ffffff, 0 0 10px rgba(111,227,227,1), 0 0 20px rgba(111,227,227,0.6); border-color: #7fe3e3; }
}
.history-bet-chip.refund { background: rgba(239,231,211,0.06); color: rgba(239,231,211,0.5); border: 1px solid rgba(239,231,211,0.12); }
.history-bet-chip .hit-mark { font-size: 9px; }
.history-time { font-size: 9.5px; color: rgba(239,231,211,0.4); font-family: var(--font-mono); margin-left: auto; }

@media (max-width: 480px) {
  .betting-panel { gap: 6px; }
  .bet-spot { min-height: 108px; padding: 12px 4px; }
  .bet-spot-label { font-size: 17px; gap: 4px; }
  .payout-tag { font-size: 10px; padding: 1px 6px; }
  .chip-rack { gap: 5px; }
  .topbar { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .topbar-right { gap: 6px; }
  .user-chip, .balance-chip, .ghost-btn { font-size: 11px; padding: 5px 10px; }
  .vs-mark { padding-top: 20px; font-size: 12px; }
}

@media (max-width: 360px) {
  .bet-spot { min-height: 100px; }
  .bet-spot-label { font-size: 15px; }
  .chip-img { width: 36px; height: 36px; }
  .chip-img-label { font-size: 7.5px; }
  .chip-rack { gap: 4px; }
  .bet-total { font-size: 17px; }
}

/* ---------- 관리자 페이지 ---------- */
.admin-area { max-width: 480px; }

.admin-panel.hidden { display: none; }

/* 리모컨 - 바카라/하이로우 탭 전환 */
.remote-tab-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.remote-tab-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 10px;
  background: rgba(6, 15, 11, 0.6);
  color: var(--cream-dim);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.remote-tab-btn.active {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(201, 162, 39, 0.12);
}
.remote-table-panel.hidden { display: none; }

.remote-emergency-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.remote-emergency-row .ghost-btn { flex: 1; }

.remote-close-table-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(239, 231, 211, 0.15);
}
.remote-close-table-row .ghost-btn {
  width: 100%;
  margin-top: 8px;
}

.admin-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.admin-desc {
  font-size: 13px;
  color: var(--cream-dim);
  line-height: 1.6;
  margin-bottom: 20px;
}

.admin-current {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 12px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
  margin-bottom: 20px;
}
#current-forced { color: var(--gold-bright); font-weight: 600; }

.bet-summary-card {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
}

.bet-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 14px;
}

.bet-summary-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
}
.bet-summary-player { color: #6fa8e0; }
.bet-summary-tie { color: #4fb474; }
.bet-summary-banker { color: #d9635a; }

.bet-summary-amount { color: var(--cream); font-weight: 600; }

.recommended-pick {
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(230, 200, 96, 0.4);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 14px;
}
.recommended-pick.hidden { display: none; }
.recommended-pick span { color: #ffffff; }

.admin-buttons-horizontal {
  display: flex;
  gap: 8px;
}

.admin-btn {
  flex: 1;
  padding: 16px 8px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 6px;
  background: rgba(201, 162, 39, 0.08);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.admin-btn:hover { background: rgba(201, 162, 39, 0.18); }
.admin-btn:active { transform: scale(0.98); }

/* 지금 강제 지정되어있는 픽 버튼 - 어떤 색상(하이/로우 포함)이든 공통으로 밝게 빛나게 표시 */
.admin-btn-active {
  filter: brightness(1.35) saturate(1.15);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 20px rgba(255, 255, 255, 0.35);
  transform: scale(1.03);
}

.admin-btn[data-outcome="player"] {
  border-color: rgba(74, 144, 217, 0.5);
  background: rgba(74, 144, 217, 0.1);
  color: #a9cef2;
}
.admin-btn[data-outcome="player"]:hover { background: rgba(74, 144, 217, 0.2); }

.admin-btn[data-outcome="tie"] {
  border-color: rgba(47, 143, 82, 0.5);
  background: rgba(47, 143, 82, 0.1);
  color: #8fe0ac;
}
.admin-btn[data-outcome="tie"]:hover { background: rgba(47, 143, 82, 0.2); }

.admin-btn[data-outcome="banker"] {
  border-color: rgba(192, 57, 43, 0.5);
  background: rgba(192, 57, 43, 0.1);
  color: #f0a9a3;
}
.admin-btn[data-outcome="banker"]:hover { background: rgba(192, 57, 43, 0.2); }

.recommended-pick.pick-player {
  color: #a9cef2;
  border-color: rgba(74, 144, 217, 0.5);
  background: rgba(74, 144, 217, 0.1);
}
.recommended-pick.pick-player span { color: #ffffff; }

.recommended-pick.pick-tie {
  color: #8fe0ac;
  border-color: rgba(47, 143, 82, 0.5);
  background: rgba(47, 143, 82, 0.1);
}
.recommended-pick.pick-tie span { color: #ffffff; }

.recommended-pick.pick-banker {
  color: #f0a9a3;
  border-color: rgba(192, 57, 43, 0.5);
  background: rgba(192, 57, 43, 0.1);
}
.recommended-pick.pick-banker span { color: #ffffff; }

.admin-clear-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  text-align: center;
}

.admin-timer {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cream-dim);
}
#admin-seconds { color: var(--gold-bright); margin-left: 6px; }

/* ---------- 관리자 대시보드 페이지 ---------- */
.admin-dashboard-area { max-width: 640px; }

#dashboard.hidden { display: none; }

.emergency-stop-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(239, 17, 17, 0.35);
  border-radius: 10px;
  background: rgba(80, 10, 10, 0.35);
}

.emergency-stop-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.emergency-stop-title {
  font-size: 11px;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
}

.emergency-stop-status {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}
.emergency-stop-status.status-running { color: #22c55e; }
.emergency-stop-status.status-paused { color: #ef1111; animation: adminBadgePulse 1.4s ease-in-out infinite; }

.emergency-stop-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  background: #ef1111;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.emergency-stop-btn:hover { background: #c50e0e; }
.emergency-stop-btn:active { transform: scale(0.97); }
.emergency-stop-btn.btn-resume { background: #22c55e; }
.emergency-stop-btn.btn-resume:hover { background: #1ba350; }

.admin-summary {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-summary.today-stats { margin-bottom: 10px; }

.goto-review-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  font-weight: 700;
  border-color: rgba(230, 200, 96, 0.4);
  background: rgba(230, 200, 96, 0.06);
}
.goto-review-btn:last-of-type { margin-bottom: 28px; }
.site-settings-btn {
  border-color: rgba(239, 231, 211, 0.15);
  background: rgba(6, 15, 11, 0.5);
  color: #ffffff;
}

.table-settings-btn-row {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}
.table-settings-btn {
  flex: 1;
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  margin-top: 0;
}
.baccarat-settings-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.hilo-settings-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* ---- 재사용 확인모달 (브라우저 기본 confirm() 대체) ---- */
.confirm-modal { width: min(88vw, 340px); }
.confirm-modal-body { padding: 22px 18px 18px; }
.confirm-modal-message {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream);
  text-align: center;
  white-space: pre-line;
  margin-bottom: 20px;
}
.confirm-modal-buttons { display: flex; gap: 10px; }
.confirm-modal-cancel-btn,
.confirm-modal-ok-btn {
  flex: 1;
  margin-top: 0;
}
.pending-title-signup { color: #5b9bd5; }
.pending-title-charge { color: #4ade80; }
.pending-title-exchange { color: #ff0000; }
span.today-exchanged-value.summary-value { color: #f0a9a3; }

/* ---- 사이트 설정 모달 (자주 안 바꾸는 설정들을 모아둔 곳) ---- */
.site-settings-modal { width: min(92vw, 420px); }
.site-settings-modal-body {
  overflow-y: auto;
  padding: 14px 16px 20px;
  height: auto;
}
.site-settings-modal-body .admin-section {
  margin-bottom: 16px;
}
.site-settings-modal-body .admin-section:last-child {
  margin-bottom: 0;
}
.goto-review-btn:active { transform: scale(0.98); }

#signup-review-section { scroll-margin-top: 80px; }

.summary-card {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 8px;
  background: rgba(6, 15, 11, 0.8);
}

/* 대기 건이 1건 이상이면 심장뛰듯 쿵덕쿵덕 - 커질때 빨간색, 작아지면 원래색으로 돌아옴 */
.summary-card.pending-alert {
  animation: pendingHeartbeat 1.1s ease-in-out infinite;
}
@keyframes pendingHeartbeat {
  0%, 100% {
    transform: scale(1);
    border-color: rgba(201, 162, 39, 0.3);
    background: rgba(6, 15, 11, 0.8);
  }
  30% {
    transform: scale(1.06);
    border-color: rgba(239, 17, 17, 0.7);
    background: rgba(239, 17, 17, 0.12);
  }
}
.summary-card.pending-alert .summary-value {
  animation: pendingValueHeartbeat 1.1s ease-in-out infinite;
}
@keyframes pendingValueHeartbeat {
  0%, 100% { color: var(--gold-bright); }
  30% { color: #ff0000; }
}

.summary-label {
  display: block;
  font-size: 11px;
  color: var(--cream-dim);
  margin-bottom: 6px;
}

.summary-value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--gold-bright);
  font-weight: 600;
}
.summary-value.profit-positive { color: #22c55e; }
.summary-value.profit-negative { color: #ef1111; }

.user-search-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 6px;
  color: var(--cream);
  padding: 9px 12px;
  outline: none;
  margin-bottom: 10px;
}
.user-search-input:focus { border-color: var(--gold); }

.admin-log-row .admin-row-main { font-size: 12px; }
.admin-log-row .admin-row-sub { font-family: var(--font-mono); font-size: 10px; color: var(--cream-dim); white-space: nowrap; }

.admin-section {
  margin-bottom: 20px;
  padding: 18px 16px;
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-radius: 14px;
  background: rgba(239, 231, 211, 0.03);
}
.admin-section h2 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold-bright);
  margin-bottom: 10px;
}

/* ---- 접고펼 수 있는 섹션 헤더 (가짜 베팅인원수 등, 자주 안 쓰는 큰 섹션을 접어둘 때 씀) ---- */
.collapsible-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.collapsible-section-header h2 { margin-bottom: 0; }
.collapse-arrow {
  color: var(--gold-bright);
  font-size: 14px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.collapse-arrow.expanded { transform: rotate(90deg); }
.collapsible-section-body {
  margin-top: 10px;
  max-height: 600px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.35s ease;
}
.collapsible-section-body.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.section-title-row h2 {
  margin-bottom: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-title-row .toss-app-btn { flex-shrink: 0; }

.bonus-tag {
  display: inline-block;
  font-size: 10px;
  color: #a5f0c0;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 16px;
}

.toss-app-btn {
  border-color: rgba(49, 130, 246, 0.5);
  color: #7fb2fb;
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 12px;
}
.toss-app-btn:hover { background: rgba(49, 130, 246, 0.12); border-color: #7fb2fb; }

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(239, 231, 211, 0.15);
  border-radius: 6px;
  background: rgba(239,231,211,0.03);
  font-size: 13px;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-row.clickable { cursor: pointer; transition: border-color 0.15s; -webkit-tap-highlight-color: transparent; }
.admin-row.clickable:hover { border-color: var(--gold); }

.admin-row-main { font-weight: 600; }

/* 승인대기 충전/환전 신청 박스 - 충전은 초록, 환전은 빨강 */
.request-row-charge {
  border-color: rgba(47, 143, 82, 0.4);
  background: rgba(47, 143, 82, 0.08);
}
.request-row-exchange {
  border-color: rgba(192, 57, 43, 0.4);
  background: rgba(192, 57, 43, 0.08);
}

.request-amount-text { font-weight: 700; }
.request-amount-charge { color: #4ade80; }
.request-amount-exchange { color: #ff0000; }

.approve-req-btn { color: #5b9bd5; }
.reject-req-btn { color: #f0a9a3; }
.admin-row-sub { font-family: var(--font-mono); font-size: 12px; color: var(--cream-dim); }
.admin-row-actions { display: flex; gap: 8px; }

.admin-tag {
  font-size: 10px;
  color: var(--gold);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 6px;
}

.coupons-list { margin-top: 8px; }

.coupon-hide-inactive-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cream-dim);
  cursor: pointer;
  margin-top: 14px;
  -webkit-tap-highlight-color: transparent;
}

.coupon-code {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.05em;
}

.coupon-status-tag {
  font-size: 10px;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
}
.coupon-status-tag.coupon-status-active { color: #7fe0a0; border: 1px solid rgba(34, 197, 94, 0.4); }
.coupon-status-tag.coupon-status-inactive { color: var(--cream-dim); border: 1px solid rgba(239, 231, 211, 0.2); }

.user-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.user-detail-overlay.hidden { display: none; }

.user-detail-panel {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(9, 43, 30, 0.98), rgba(6, 26, 18, 0.99));
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 10px;
  padding: 24px;
}

.close-detail-btn {
  float: right;
  border-radius: 12px;
  padding: 8px 18px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.close-detail-btn:hover { border-color: rgba(230, 200, 96, 0.5); color: var(--gold-bright); }
.close-detail-btn:active { transform: scale(0.96); background: rgba(239, 231, 211, 0.06); }

.user-detail-panel h2 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin: 0 0 16px;
  clear: both;
}

.pending-review-actions {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(230, 200, 96, 0.35);
  border-radius: 8px;
  background: rgba(201, 162, 39, 0.08);
}
.pending-review-actions.hidden { display: none; }

/* ---- 시간대 자동정지 실시간 상태 뱃지 ---- */
.schedule-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  margin: 8px 0 10px;
}
.schedule-status-badge.hidden { display: none; }
.schedule-status-badge.status-paused {
  background: rgba(239, 17, 17, 0.12);
  border: 1px solid rgba(239, 17, 17, 0.4);
  color: #f0a9a3;
}
.schedule-status-badge.status-scheduled-idle {
  background: rgba(230, 200, 96, 0.1);
  border: 1px solid rgba(230, 200, 96, 0.35);
  color: var(--gold-bright);
}
.schedule-status-badge.status-normal {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
}
.schedule-duration-text {
  font-size: 11.5px;
  color: var(--cream-dim);
  text-align: center;
  margin: 2px 0 6px;
}
.schedule-duration-text b { color: var(--gold-bright); }

.pending-review-note {
  font-size: 12px;
  color: var(--cream-dim);
  margin: 0 0 12px;
  line-height: 1.5;
}

.pending-review-buttons {
  display: flex;
  gap: 8px;
}
.pending-review-buttons .primary-btn { flex: 1; margin-top: 0; }

.reject-btn-wide {
  flex: 1;
  margin-top: 0;
  background: linear-gradient(180deg, #e57373, #c0392b);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(192, 57, 43, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.reject-btn-wide:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(192, 57, 43, 0.35); }
.reject-btn-wide:active { transform: translateY(1px) scale(0.97); box-shadow: 0 2px 8px rgba(192, 57, 43, 0.2); }

.account-status-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.status-btn-warn { border-color: rgba(230, 200, 96, 0.5); color: var(--gold-bright); flex: 1; }
.status-btn-warn:hover { background: rgba(201, 162, 39, 0.15); }

.status-btn-ok { border-color: rgba(34, 197, 94, 0.5); color: #7fe0a0; flex: 1; }
.status-btn-ok:hover { background: rgba(34, 197, 94, 0.12); }

.status-btn-danger { border-color: rgba(239, 17, 17, 0.5); color: #f0a9a3; flex: 1; }
.status-btn-danger:hover { background: rgba(239, 17, 17, 0.12); }

.bulk-approve-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.bulk-select-all-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cream-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.request-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
.request-checkbox-label .admin-row-main { flex: 1; }
.request-select-checkbox { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(239,231,211,0.1);
  color: var(--cream-dim);
}
.detail-row span:last-child { color: var(--cream); font-family: var(--font-mono); }

.detail-field { margin-top: 18px; }
.detail-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  margin-bottom: 6px;
}

.detail-field-row { display: flex; gap: 8px; }
.detail-field-row input,
.detail-field-row select {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  background: rgba(239,231,211,0.06);
  border: 1px solid rgba(239,231,211,0.2);
  border-radius: 4px;
  color: var(--cream);
  padding: 8px 10px;
  outline: none;
}
.detail-field-row input:focus,
.detail-field-row select:focus { border-color: var(--gold); }
.detail-field-row select option { background: var(--felt-dark); color: var(--cream); }

/* 관리자페이지 상세패널 안의 금액 입력창(원 접미사 포함)이 행 안에서 자연스럽게 늘어나도록 */
.detail-field-row .detail-amount-wrap {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.detail-field-row .detail-amount-wrap input {
  background: none;
  border: none;
}

.user-stats-card {
  margin: 14px 0;
  padding: 14px;
  border-radius: 10px;
  background: rgba(6, 15, 11, 0.4);
  border: 1px solid rgba(239, 231, 211, 0.12);
}

.user-stats-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-bright);
  margin-bottom: 10px;
}

.user-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.user-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-stat-label {
  font-size: 11px;
  color: var(--cream-dim);
}

.user-stat-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}
.user-stat-value.profit-positive { color: #7fbf8f; }
.user-stat-value.profit-negative { color: var(--red); }

.detail-cooldown-status {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cream);
  display: flex;
  align-items: center;
}

.user-memo-textarea {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(239,231,211,0.25);
  background: rgba(0,0,0,0.3);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
  resize: vertical;
  margin-bottom: 8px;
}

.ban-reason-display {
  font-size: 13px;
  color: #e08a86;
  background: rgba(184,67,63,0.12);
  border: 1px solid rgba(184,67,63,0.3);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  line-height: 1.5;
}

.save-btn-nowrap {
  white-space: nowrap;
  flex-shrink: 0;
}

.reset-history-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reset-history-buttons .status-btn-danger { flex: 1; min-width: 100px; }

.full-width-btn { width: 100%; }

.deposit-account-form { display: flex; flex-direction: column; gap: 12px; }
.deposit-account-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
}

.sound-select-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.sound-select-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
}
.sound-select-row select {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(239,231,211,0.25);
  background: rgba(0,0,0,0.3);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
}
.sound-select-row .ghost-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.deposit-account-form input {
  font-family: var(--font-mono);
  font-size: 14px;
  background: rgba(239, 231, 211, 0.06);
  border: 1px solid rgba(239, 231, 211, 0.2);
  border-radius: 4px;
  color: var(--cream);
  padding: 9px 10px;
  outline: none;
}
.deposit-account-form input:focus { border-color: var(--gold); }
.deposit-save-btn { width: 100%; }

/* ---------- 하이로우 게임(카드/베팅존) ---------- */
.hilo-card-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0 10px;
}
.hilo-card-slot {
  position: relative;
  width: clamp(80px, 24vw, 120px);
  height: clamp(120px, 36vw, 176px);
}
.hilo-card-behind {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0; /* 앞카드가 뒤집히는 동안(scaleX로 얇아질때) 옆으로 삐져나와 보이지 않도록 기본적으로 숨겨둠 */
}
.hilo-card-behind.hilo-reveal {
  opacity: 1; /* 앞카드가 슬라이드로 빠지기 시작하는 순간에만 드러남 */
}
.hilo-card-slot > .playing-card:not(.hilo-card-behind) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.hilo-slide-away {
  animation: hiloSlideAway 4.2s linear forwards;
}
@keyframes hiloSlideAway {
  0% { transform: translateX(0) rotate(0deg); opacity: 1; }
  /* 처음 3초(전체의 약 71%) 동안 45%까지 움직여서 "천천히"라는 느낌을 줌 */
  71% { transform: translateX(45%) rotate(1deg); opacity: 1; }
  /* 나머지 약 1.2초 동안 남은 거리를 단숨에 빠르게 빠져나가며 사라짐 */
  100% { transform: translateX(150%) rotate(16deg); opacity: 0; }
}
.hilo-card-slot .playing-card {
  width: clamp(80px, 24vw, 120px);
  height: clamp(120px, 36vw, 176px);
  font-size: clamp(28px, 9vw, 44px);
  gap: 2px;
}

.hilo-betting-panel {
  flex-direction: column;
}
.hilo-spot {
  min-height: 92px;
  padding: 14px 16px;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.hilo-spot-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hilo-spot-arrow {
  font-size: 20px;
  line-height: 1;
}
.hilo-spot-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hilo-spot-range {
  font-size: 12px;
  opacity: 0.85;
}
.hilo-spot-odds {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}
.hilo-spot .chip-stack { min-height: 40px; }

.hilo-spot-hi {
  background: linear-gradient(180deg, #ffe14d, #ffc700);
  border-color: #ffd700;
  color: #2a2200;
}
.hilo-spot-hi:hover { border-color: #fff066; }
.hilo-spot-hi.has-bet {
  background: linear-gradient(180deg, #fff066, #ffcc00);
  border-color: #fff5b0;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5), 0 10px 26px rgba(255, 199, 0, 0.45);
}
.hilo-spot-hi .hilo-spot-odds { color: #2a2200; }

.hilo-spot-lo {
  background: linear-gradient(180deg, rgba(90, 95, 115, 0.55), rgba(35, 38, 50, 0.85));
  border-color: rgba(120, 125, 145, 0.4);
  color: #ffffff;
}
.hilo-spot-lo:hover { border-color: rgba(150, 155, 175, 0.75); }
.hilo-spot-lo.has-bet {
  background: linear-gradient(180deg, rgba(110, 115, 135, 0.75), rgba(35, 38, 50, 0.9));
  border-color: #b8bcd0;
  box-shadow: 0 0 0 2px rgba(150, 155, 175, 0.3), 0 10px 24px rgba(90, 95, 115, 0.25);
}
.hilo-spot-lo .hilo-spot-odds { color: var(--gold-bright); }

/* ---------- 사이트 전체 - 클릭 가능한 요소들 드래그/텍스트선택 방지 일괄 적용 ---------- */
.admin-btn,
.admin-row,
.bet-spot,
.bulk-select-all-label,
.chip,
.clickable,
.copyable-value,
.coupon-hide-inactive-label,
.custom-select-option,
.custom-select-trigger,
.emergency-stop-btn,
.ghost-btn,
.logout-modal-btn,
.notice-list-item,
.notice-modal-back-btn,
.notice-modal-close-btn,
.primary-btn,
.remote-tab-btn,
.request-checkbox-label,
.request-confirm-btn,
.request-select-checkbox,
.request-type-btn,
.tab-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* ---------- 리모컨: 결과별 색상(강제지정 박스, 추천픽) ---------- */
.outcome-color-player { border-color: rgba(74, 144, 217, 0.6) !important; background: rgba(74, 144, 217, 0.12) !important; color: #a9cef2 !important; }
.outcome-color-tie { border-color: rgba(47, 143, 82, 0.6) !important; background: rgba(47, 143, 82, 0.12) !important; color: #8fe0ac !important; }
.outcome-color-banker { border-color: rgba(192, 57, 43, 0.6) !important; background: rgba(192, 57, 43, 0.14) !important; color: #f0a9a3 !important; }
.outcome-color-hi { border-color: rgba(255, 215, 0, 0.6) !important; background: rgba(255, 215, 0, 0.12) !important; color: #ffe066 !important; }
.outcome-color-lo { border-color: rgba(120, 125, 145, 0.6) !important; background: rgba(0, 0, 0, 0.25) !important; color: #c3c7dc !important; }

.admin-current-forced { font-weight: 700; }

/* 적중 시 받는 돈(배당 포함) 표시 - 살짝 옅은 톤으로 */
.bet-potential-return {
  color: var(--gold-bright);
  font-size: 11px;
  opacity: 0.85;
}

/* 하이로우 리모컨 전용 - 하이(쨍한 노랑)/로우(검정) 버튼 */
.admin-btn-hi {
  background: linear-gradient(180deg, #ffe14d, #ffc700);
  border-color: #ffd700;
  color: #2a2200;
}
.admin-btn-hi:hover { background: linear-gradient(180deg, #fff066, #ffcc00); }
.admin-btn-lo {
  background: #14161a;
  border-color: #3a3d44;
  color: #e8e9ec;
}
.admin-btn-lo:hover { background: #1e2025; border-color: #55585f; }

/* ---------- 리모컨: 베팅자 리스트 ---------- */
.bettor-list-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(239, 231, 211, 0.15);
}
.bettor-list-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  margin: 0 0 12px;
}
.bettor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.bettor-list-empty {
  font-size: 12.5px;
  color: var(--cream-dim);
  text-align: center;
  padding: 12px 0;
}
.bettor-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: rgba(239,231,211,0.04);
  font-size: 12.5px;
}
.bettor-list-name {
  color: var(--cream);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bettor-list-amount {
  font-family: var(--font-mono);
  color: var(--cream-dim);
  white-space: nowrap;
}
.bettor-list-pick {
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 현재 온라인 유저 버튼 + 모달 ---------- */
.online-users-open-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.online-users-open-btn:hover { border-color: #4ade80; }
.online-users-open-btn #online-users-count {
  font-size: 16px;
  font-weight: 800;
  color: #4ade80;
}
.online-users-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
  flex-shrink: 0;
  animation: onlineDotPulse 1.6s ease-in-out infinite;
}
@keyframes onlineDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.online-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.online-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 231, 211, 0.03);
  border: 1px solid rgba(239, 231, 211, 0.08);
}
.online-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.online-user-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 5px rgba(74, 222, 128, 0.7);
  flex-shrink: 0;
}
.online-user-nickname {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.online-user-page-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
.online-user-page-badge.page-baccarat { background: rgba(91,155,213,0.15); color: #5b9bd5; }
.online-user-page-badge.page-hilo { background: rgba(26,116,255,0.15); color: #4fa3ff; }
.online-user-page-badge.page-mypage { background: rgba(230,200,96,0.15); color: #e6c860; }
.online-user-page-badge.page-wallet { background: rgba(74,222,128,0.15); color: #4ade80; }

.online-user-spectate-btn {
  font-size: 10.5px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(230, 200, 96, 0.12);
  border: 1px solid rgba(230, 200, 96, 0.4);
  color: #e6c860;
  cursor: pointer;
  flex-shrink: 0;
}
.online-user-spectate-btn:hover { background: rgba(230, 200, 96, 0.22); }

.online-users-empty {
  text-align: center;
  font-size: 12.5px;
  color: rgba(239, 231, 211, 0.4);
  padding: 20px 0;
}
.online-users-empty.hidden { display: none; }

/* ---------- 관전 모드 - 배너 + 종료버튼 + 베팅자목록 하이라이트 ---------- */
.spectate-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(230, 200, 96, 0.1);
  border: 1px solid rgba(230, 200, 96, 0.4);
  color: #e6c860;
  font-size: 12.5px;
  text-align: center;
}
.spectate-banner.hidden { display: none; }

.stop-spectate-btn {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 30px;
  background: rgba(239, 17, 17, 0.15);
  border: 1.5px solid #ef1111;
  color: #ff8a8a;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(239, 17, 17, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stop-spectate-btn:hover { background: rgba(239, 17, 17, 0.25); }
.stop-spectate-btn.hidden { display: none; }

.bettor-list-row.spectate-highlight {
  outline: 2px solid #e6c860;
  outline-offset: -1px;
  box-shadow: 0 0 10px rgba(230, 200, 96, 0.4);
  animation: spectateHighlightPulse 1.4s ease-in-out infinite;
}
@keyframes spectateHighlightPulse {
  0%, 100% { background-color: rgba(230, 200, 96, 0.08); }
  50% { background-color: rgba(230, 200, 96, 0.18); }
}

/* ---------- 관전 모드 - 다른페이지(마이페이지/지갑) 검은화면 ---------- */
.spectate-blackscreen {
  position: fixed;
  inset: 0;
  z-index: 8; /* topbar(z-index:10)보다 낮게 둬서, topbar가 sticky로 항상 위에 그대로 보이게 함 */
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.spectate-blackscreen.hidden { display: none; }
.spectate-blackscreen-icon { font-size: 28px; opacity: 0.5; }
.spectate-blackscreen-msg { font-size: 13.5px; color: rgba(239,231,211,0.55); text-align: center; padding: 0 20px; }

/* ---------- 관전 모드 - 상단바에 리모컨 버튼만 남기고 나머지 다 숨김 ---------- */
body.spectate-mode .topbar-row-2,
body.spectate-mode .topbar-row-3,
body.spectate-mode #admin-dashboard-link,
body.spectate-mode #attendance-toggle-btn {
  display: none;
}

/* ---------- 관전 모드 - 상단중앙 고정 실명 배지 ---------- */
.spectate-nametag {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9; /* topbar(10)보다는 낮고, 검은화면(8)보다는 위에 오도록 */
  padding: 7px 18px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(230, 200, 96, 0.5);
  color: #e6c860;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
.spectate-nametag.hidden { display: none; }
.spectate-blink-dots {
  display: inline-block;
  animation: spectateDotsBlink 1.2s steps(1) infinite;
}
@keyframes spectateDotsBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ---------- 신청관리로 이동 버튼 - 항목별 색상 텍스트 ---------- */
.review-btn-signup { color: #5b9bd5; font-weight: 700; }
.review-btn-charge { color: #4ade80; font-weight: 700; }
.review-btn-exchange { color: #ef1111; font-weight: 700; }

/* ---------- 신청관리로 이동 버튼 - 대기건수(가입/충전/환전) 1건 이상이면 빨강+흰색 아우터글로우로 숨쉬기 ---------- */
.goto-review-btn.request-alert {
  animation: requestBtnBreathe 1.1s ease-in-out infinite;
}
@keyframes requestBtnBreathe {
  0%, 100% {
    border-color: rgba(239, 17, 17, 0.4);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  30% {
    border-color: #ff3b3b;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.65), 0 0 18px 5px rgba(239,17,17,0.45);
  }
}

/* ---------- 관리자 페이지 - 승인대기 박스 종류별 숨쉬는 테두리 ----------
   가입신청=하늘색 / 충전신청=초록색 / 환전신청=빨간색
   전체회원 검색 목록도 .admin-row.clickable을 재사용하므로, 반드시 승인대기 목록
   컨테이너(#pending-users-list) 안에서만 적용되도록 자손 선택자로 정확히 범위를 좁힘 */
#pending-users-list .admin-row.clickable {
  animation: pendingRowBreatheSignup 1.6s ease-in-out infinite;
}
@keyframes pendingRowBreatheSignup {
  0%, 100% { border-color: rgba(91, 155, 213, 0.35); box-shadow: 0 0 0 rgba(91, 155, 213, 0); }
  50% { border-color: #5b9bd5; box-shadow: 0 0 8px 1px rgba(91, 155, 213, 0.55), 0 0 14px 3px rgba(91, 155, 213, 0.25); }
}

.admin-row.request-row-charge {
  animation: pendingRowBreatheCharge 1.6s ease-in-out infinite;
}
@keyframes pendingRowBreatheCharge {
  0%, 100% { border-color: rgba(74, 222, 128, 0.35); box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  50% { border-color: #4ade80; box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.55), 0 0 14px 3px rgba(74, 222, 128, 0.25); }
}

.admin-row.request-row-exchange {
  animation: pendingRowBreatheExchange 1.6s ease-in-out infinite;
}
@keyframes pendingRowBreatheExchange {
  0%, 100% { border-color: rgba(239, 17, 17, 0.35); box-shadow: 0 0 0 rgba(239, 17, 17, 0); }
  50% { border-color: #ef1111; box-shadow: 0 0 8px 1px rgba(239, 17, 17, 0.55), 0 0 14px 3px rgba(239, 17, 17, 0.25); }
}

/* ---------- 현재 온라인 유저 버튼 - 1명 이상이면 초록색으로 은은하게 숨쉬기 ---------- */
.online-users-open-btn.online-alert {
  animation: onlineAlertBreathe 1.6s ease-in-out infinite;
}
@keyframes onlineAlertBreathe {
  0%, 100% { border-color: rgba(74, 222, 128, 0.3); box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  50% { border-color: #4ade80; box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.5), 0 0 14px 3px rgba(74, 222, 128, 0.25); }
}