:root{
      /* 밝은 테마 컬러 */
      --bg:#f4f5ff;
      --bg-gradient:radial-gradient(circle at top,#ffffff 0,#edf0ff 40%,#e2e6ff 100%);
      --card:#ffffff;
      --card-border:#d7ddff;
      --card-shadow:0 12px 30px rgba(15,23,42,0.12);

      --accent:#4f46e5;
      --accent-soft:#6366f1;
      --accent-strong:#2563eb;

      --text:#111827;
      --sub:#6b729c;

      --pill:#f3f4ff;
      --border:rgba(148,163,184,.45);
      --danger:#f97373;
      --accent2:#2563eb;
      --shadow:0 18px 40px rgba(15,23,42,.16);
    }

    *{box-sizing:border-box}
    html,body{margin:0;height:100%}

    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,Apple SD Gothic Neo,Noto Sans KR,sans-serif;
      color:var(--text);
      background:var(--bg-gradient);
    }

    .container{
      max-width:520px;
      margin:0 auto;
      padding:16px 16px 96px 16px;
    }

    header{
      position:sticky;top:0;z-index:10;
      backdrop-filter:blur(16px);
      background:linear-gradient(180deg, rgba(244,245,255,.98), rgba(244,245,255,.9), transparent);
      border-bottom:1px solid rgba(209,213,250,.7);
    }
    .head-inner{
      max-width:520px;
      margin:0 auto;
      padding:12px 16px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .logo-box{display:flex;align-items:center;gap:10px}

    /* 1·2 / 3·4 카드 아이콘 */
    .logo-badge{
      width:32px;height:32px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      background:#ffffff;
      box-shadow:0 6px 14px rgba(15,23,42,.18);
      border:1px solid #d7ddff;
      padding:3px;
    }
    .logo-card-grid{
      width:100%;height:100%;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:2px;
    }
    .logo-card-tile{
      border-radius:5px;
      background:#f4f6ff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:9px;
      font-weight:800;
      color:#111827;
      box-shadow:0 1px 2px rgba(15,23,42,.18);
    }
    .logo-card-tile:nth-child(1){background:#eef2ff;}
    .logo-card-tile:nth-child(2){background:#e0f2fe;}
    .logo-card-tile:nth-child(3){background:#fee2e2;}
    .logo-card-tile:nth-child(4){background:#fef3c7;}

    h1{
      margin:0;
      font-size:19px;
      font-weight:800;
      letter-spacing:-.02em;
      color:#111827;
    }
    .small{font-size:11px;color:var(--sub)}

    .lang-select-wrap{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .lang-select{
      display:flex;align-items:center;gap:6px;
      background:rgba(248,249,255,.96);
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      padding:4px 8px;
      font-size:11px;
    }
    .lang-select select{
      background:transparent;
      color:var(--text);
      border:none;
      outline:none;
      font-size:11px;
    }

    .sound-btn{
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      padding:6px 8px;
      background:rgba(248,249,255,.96);
      font-size:14px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 2px 6px rgba(15,23,42,.12);
      transition:transform .08s ease, box-shadow .08s ease, opacity .12s ease;
    }
    .sound-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 6px 14px rgba(15,23,42,.2);
    }
    .sound-btn:active{
      transform:translateY(0);
      box-shadow:0 3px 8px rgba(15,23,42,.15);
    }
    .sound-btn.muted{
      opacity:0.55;
    }

    .card{
      margin-top:16px;
      position:relative;
      background:
        radial-gradient(circle at 0 0, rgba(255,255,255,.9), transparent 55%),
        var(--card);
      border-radius:20px;
      border:1px solid var(--card-border);
      padding:18px 16px 16px;
      box-shadow:var(--card-shadow);
      animation:fadeUp .26s ease-out;
    }
    .card h2{margin:0 0 6px 0;font-size:18px}
    .card p{margin:4px 0;font-size:13px;color:var(--sub)}

    @keyframes fadeUp{
      from{opacity:0;transform:translateY(6px);}
      to{opacity:1;transform:translateY(0);}
    }

    label{
      font-size:12px;
      color:var(--sub);
      display:block;
      margin-bottom:4px;
    }
    input,button,select,textarea{
      border-radius:14px;
      border:1px solid var(--border);
      padding:10px 12px;
      background:var(--pill);
      color:var(--text);
      outline:none;
      font-size:14px;
      transition:transform .08s ease, box-shadow .08s ease, background .12s ease, border-color .12s ease;
      box-sizing:border-box;
    }
    textarea{resize:vertical;min-height:80px;}
    input::placeholder,textarea::placeholder{color:#9ca3c7}
    input:focus,select:focus,textarea:focus{
      border-color:var(--accent-soft);
      box-shadow:0 0 0 1px rgba(99,102,241,.35);
      background:#ffffff;
    }
    button{
      background:linear-gradient(135deg,var(--accent),var(--accent-soft));
      color:#ffffff;
      font-weight:800;
      border:none;
      cursor:pointer;
      box-shadow:0 10px 22px rgba(15,23,42,.18);
    }
    button.secondary{
      background:#f3f4ff;
      color:var(--text);
      border:1px solid #d4d7ff;
      box-shadow:none;
    }
    button.danger{
      background:#fef2f2;
      color:#b91c1c;
      border:1px solid rgba(248,113,113,.8);
      box-shadow:none;
    }
    button.full{width:100%;margin-top:10px}
    button:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 30px rgba(15,23,42,.25);
    }
    button:active{
      transform:translateY(0);
      box-shadow:0 8px 18px rgba(15,23,42,.2);
    }

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.row-name{
  flex-wrap:nowrap;
  align-items:flex-end;
}

.row-name > div{
  flex:1 1 auto;
  min-width:0;
}

.row-name input#playerName{
  width:100%;
  display:block;
}

.row-name > button{
  flex:0 0 auto;
  padding:10px 18px;
  white-space:nowrap;
}

    .player-list{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* 이름 / 커스텀 옵션 pill 공통 스타일 */
.player-pill{
  padding:6px 10px;
  border-radius:999px;
  background:#eef0ff;
  border:1px solid #d1d7ff;
  font-size:13px;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;              /* ✅ 카드 밖으로 안 나가게 */
  white-space:normal;          /* ✅ 여러 줄 허용 */
  word-break:break-all;        /* ✅ 숫자/영문도 중간에서 줄바꿈 */
  overflow-wrap:anywhere;      /* ✅ 긴 문자열 강제 줄바꿈 */
}

/* pill 안의 텍스트(span)에 대해서도 같은 처리 */
.player-pill > span{
  max-width:100%;
  white-space:normal;
  word-break:break-all;
  overflow-wrap:anywhere;
}

.player-list.compact .player-pill{
  padding:4px 8px;
  font-size:12px;
}

.player-list.dense .player-pill{
  padding:3px 6px;
  font-size:11px;
  gap:4px;
}

    .pill-remove{
      border:none;
      background:transparent;
      padding:0 2px;
      font-size:13px;
      cursor:pointer;
      color:#9b1c1c;
    }

    .screen{display:none}
    .screen.active{display:block}
    /* =========================
   GAME-LIKE MENU (LIGHT)
   - 사이즈 변경 없음
   ========================= */

/* 메뉴 화면 자체를 게임 로비처럼 */
#screenMenu .card{
  /* 기존 카드 스타일은 유지하면서 "게임 프레임"만 추가 */
  overflow:hidden;
}

/* 카드 안에 은은한 게임 UI 라이트 효과 */
#screenMenu .card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 10%, rgba(99,102,241,.18) 0, transparent 45%),
    radial-gradient(circle at 85% 35%, rgba(59,130,246,.14) 0, transparent 50%),
    radial-gradient(circle at 35% 95%, rgba(244,114,182,.12) 0, transparent 55%);
  pointer-events:none;
  transform:rotate(6deg);
}

/* 카드 상단에 "게임 HUD" 같은 얇은 라인 */
#screenMenu .card::after{
  content:"";
  position:absolute;
  left:14px; right:14px; top:14px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(99,102,241,.0),
    rgba(99,102,241,.45),
    rgba(59,130,246,.45),
    rgba(99,102,241,.0)
  );
  pointer-events:none;
  opacity:.9;
}

    .center{text-align:center}
    .big-round{margin-top:12px;font-size:26px;font-weight:900;}

    /* 카드 배치 전체 – 숫자/커스텀 공통 */
.num-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:20px;
}

/* 숫자/옵션 카드 버튼 – 게임 패드 느낌 */
.num-btn{
  position:relative;
  width:100px;
  min-height:72px;
  padding:10px 8px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.85);
  background:radial-gradient(circle at top,#ffffff 0,#e3e7ff 45%,#cdd5ff 100%);
  color:#0f172a;
  font-size:22px;
  font-weight:900;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  word-break:break-all;   /* 긴 글자도 카드 안에서 줄바꿈 */
  white-space:normal;

  box-shadow:0 10px 22px rgba(15,23,42,.22);
  transition:
    transform .09s ease,
    box-shadow .09s ease,
    background .12s ease,
    border-color .12s ease,
    filter .12s ease;
}

/* 위에서 반짝이는 하이라이트 */
.num-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.65),transparent 55%);
  opacity:.9;
  pointer-events:none;
}

/* 호버 시 살짝 떠오르는 느낌 */
.num-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.25);
  filter:brightness(1.03);
}

/* 누를 때 쿵 – 살짝 눌리는 애니메이션 */
.num-btn:active{
  transform:translateY(1px) scale(.97);
  box-shadow:0 6px 16px rgba(15,23,42,.28);
}

/* 선택된 카드 – 완전 게임 버튼 느낌으로 강조 */
.num-btn.selected{
  background:linear-gradient(135deg,#4f46e5,#6366f1);
  color:#ffffff;
  border-color:rgba(129,140,248,1);
  box-shadow:
    0 0 0 1px rgba(191,219,254,.7),
    0 16px 30px rgba(79,70,229,.55);
  transform:translateY(0) scale(.99);
}

/* 기존 타이머 스타일은 지우고, 이걸로 교체하세요 */
.timer {
  margin: 16px auto 8px;
  font-size: 70px !important;   /* 더 크게 */
  font-weight: 900;
  color: #7c3aed;
  background: rgba(255, 255, 255, 0.95);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(124,58,237,0.35),
              inset 0 6px 16px rgba(255,255,255,0.8);
  border: 7px solid #c4b5fd;
  backdrop-filter: blur(10px);
  animation: none !important;
}

/* 마지막 5초 붉게 */
.timer.warning {
  color: #ef4444;
  border-color: #fca5a5;
  box-shadow: 0 12px 40px rgba(239,68,68,0.4),
              inset 0 6px 16px rgba(255,255,255,0.8);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

    footer{
      position:fixed;bottom:0;left:0;right:0;
      padding:10px 16px;
      font-size:11px;
      color:var(--sub);
      background:linear-gradient(0deg, rgba(244,245,255,.98), rgba(244,245,255,.9), transparent);
      border-top:1px solid rgba(209,213,250,.9);
    }
    footer .inner{max-width:520px;margin:0 auto}

    .result-table{
      margin-top:8px;
      border-radius:16px;
      border:1px solid #e0e3ff;
      padding:8px 10px;
      background:#f9f9ff;
      font-size:12px;
    }
    .winrule-badge{
  position:static;              /* 🔹 카드 안에서 자연스럽게 흐르도록 */
  display:block;                /* 🔹 한 줄 전체 차지 */
  margin:0 auto 8px;            /* 🔹 위는 0, 아래는 8px, 좌우 가운데 정렬 */
  font-size:12px;
  line-height:1.4;
  color:var(--sub);
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:6px 14px;
  border:1px solid #e0e3ff;
  max-width:100%;               /* 🔹 카드 전체 폭 사용 */
  text-align:center;            /* 🔹 가운데 정렬 */

  white-space:normal;           /* 🔹 여러 줄 허용 */
  word-break:break-all;         /* 🔹 긴 영어/숫자도 줄바꿈 */
  overflow-wrap:anywhere;       /* 🔹 어디서든 줄바꿈 가능 */
  overflow:visible;             /* 🔹 잘리지 않게 */
}
    .result-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin:2px 0;
  gap:8px;
}

/* 왼쪽(옵션 라벨 / 플레이어 이름) */
.result-row span.left{
  color:var(--text);
  flex:0 0 52%;
  min-width:0;
  white-space:normal;      /* ✅ 여러 줄 허용 */
  word-break:break-all;    /* ✅ 긴 숫자/문자도 줄바꿈 */
  overflow-wrap:anywhere;
}

/* 오른쪽(선택한 값 / 상태) */
.result-row span.right{
  color:var(--sub);
  flex:1;
  min-width:0;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

    .tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid #d4d7ff;
  font-size:11px;
  color:#4b5563;
  background:#eef2ff;
  margin-right:4px;
  max-width:100%;           /* ✅ 카드 안에서만 표시 */
  white-space:normal;       /* ✅ 여러 줄 허용 */
  word-break:break-all;     /* ✅ 숫자/영문 중간 줄바꿈 */
  overflow-wrap:anywhere;
}

    .mode-toggle{
      display:flex;
      padding:3px;
      border-radius:999px;
      background:#eef0ff;
      border:1px solid #d4d7ff;
      margin-top:4px;
    }
    .mode-toggle label{
      margin:0;
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      font-size:12px;
      color:var(--sub);
      padding:6px 4px;
      border-radius:999px;
      cursor:pointer;
      border:none;
    }
    .mode-toggle input{display:none;}
    .mode-toggle label.active{
      background:radial-gradient(circle at 0 0,var(--accent-soft) 0,var(--accent) 55%,var(--accent-strong) 100%);
      color:#f9fafb;
      font-weight:700;
      box-shadow:0 6px 14px rgba(15,23,42,.25);
    }

    @media (max-width:480px){
      .container{
        padding:14px 10px 80px 10px;
      }
      .head-inner{
        padding:10px 12px 8px;
      }
      .card{
        border-radius:18px;
        padding:16px 14px 14px;
      }
    }
#localTurnCard{
  padding-top:28px;
  position:relative;
  overflow:hidden;
  /* 카드 배경을 살짝 게임 화면처럼 */
  background:radial-gradient(circle at top,#ffffff 0,#eef2ff 40%,#d6ddff 100%);
  border:1px solid rgba(148,163,184,.6);
  box-shadow:0 16px 34px rgba(15,23,42,.25);
}
/* 위쪽에서 은은하게 빛나는 효과 */
#localTurnCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 0 0,rgba(129,140,248,.4) 0,transparent 55%);
  opacity:.8;
  pointer-events:none;
}

/* 라운드 진행 화면에서 현재 플레이어 이름 줄바꿈 */
#turnPlayer{
  word-break:break-all;
  overflow-wrap:anywhere;
}

#localResultCard{
  padding-top:40px;
}

    #playerChips{
      max-height:150px;
      overflow-y:auto;
    }
    
    #resultByOption,
    #resultByPlayer{
      max-height:220px;
      overflow-y:auto;
    }

    /* 로컬 아파트 게임 박스 */
    .apt-local-box{
      margin-top:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--card-border);
      background:rgba(255,255,255,0.92);
    }
    .apt-local-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .apt-local-title{
      font-size:13px;
      font-weight:600;
      color:var(--text);
    }
    .apt-local-sub{
      font-size:11px;
      color:var(--sub);
    }
    .apt-local-toggle{
      padding:4px 10px;
      border-radius:999px;
      border:1px solid #d4d7ff;
      background:#eef2ff;
      font-size:11px;
      font-weight:600;
      cursor:pointer;
      min-width:46px;
      text-align:center;
      color:#000000;
    }
    .apt-local-toggle.active{
      background:radial-gradient(circle at 0 0,var(--accent-soft) 0,var(--accent) 55%,var(--accent-strong) 100%);
      color:#f9fafb;
      box-shadow:0 4px 10px rgba(15,23,42,.25);
    }
   /* 아파트 설정 줄이 모바일에서 잘 접히도록 수정 */
.apt-local-settings{
  display:flex;
  flex-wrap:wrap;          /* 🔹 폭 부족하면 아래 줄로 떨어지게 */
  gap:8px;
  margin-top:8px;
  align-items:flex-end;
}

/* 기본 필드는 남는 폭 채우도록 */
.apt-local-settings .field{
  flex:1 1 0;
  min-width:0;
}

/* 첫 번째 필드(목표층)는 너무 넓지 않게 고정 폭 느낌으로 */
.apt-local-settings .field:first-child{
  flex:0 0 auto;
}

    /* 아파트 게임 게이지 – 빌딩/엘리베이터 느낌 */
/* ✅ 수정할 코드: 게이지 상단 여백 및 채움 효과 강조 */
/* 아파트 게임 게이지 컨테이너 */
/* 아파트 게임 게이지 컨테이너 – 배경 박스 제거 */
.apt-local-gauge{
  margin-top:18px;          /* 살짝만 띄우기 */
  padding:0;                /* 안쪽 패딩 제거 */
  border-radius:0;          /* 둥근 박스 느낌 제거 */
  background:transparent;   /* 어두운 배경 없애기 */
  box-shadow:none;          /* 그림자 제거 */
}

/* “현재층 / 목표층” 설명 라벨 – 글자 더 잘 보이게 */
.apt-local-gauge-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;           /* 살짝 크게 */
  font-weight:700;
  color:var(--text-main);   /* 카드랑 같은 진한 글자색 */
  margin-bottom:6px;
  opacity:1;                /* 완전 불투명 */
}

/* 게이지 바 – 더 크고 시원하게 */
.apt-local-gauge-bar{
  position:relative;
  width:100%;
  height:30px;              /* 🔺 14px → 22px 로 두껍게 */
  border-radius:999px;
  background:linear-gradient(
    to right,
    rgba(15,23,42,.9),
    rgba(30,41,59,.9)
  );                        /* 바탕은 그대로 유지 */
  overflow:hidden;
  border:1px solid rgba(148,163,184,.6);
}

/* 층 구분용 세로 줄 */
.apt-local-gauge-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    to right,
    rgba(148,163,184,.45) 0,
    rgba(148,163,184,.45) 1px,
    transparent 1px,
    transparent 12px
  );
  opacity:.7;
  mix-blend-mode:soft-light;
  pointer-events:none;
}

/* 실제 이동하는 게이지 – 초록빛 엘리베이터 */
.apt-local-gauge-fill{
  /* 기존 스타일 유지 */
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#a3e635,#facc15);
  box-shadow:0 0 18px 5px rgba(250,204,21,1); /* 그림자 강도 및 범위 증가 */
  transition:
    width .3s ease-out,
    box-shadow .2s ease-out;
}

#resultElim,
#resultSurv{
  word-break:break-all;
  overflow-wrap:anywhere;
}

/* 목표층 입력칸 폭 좁게 (스마트폰 최적화) */
#aptLocalTarget{
  width:80px;          /* 🔹 필요하면 70~90px 사이로 조절 가능 */
  max-width:100%;
}

.num-grid{
  gap: 10px; /* 12px에서 10px로 감소 */
  margin-top: 30px; /* 상단 여백 증가 */
}

/* 개별 버튼: 크기를 조정하여 모바일에서 클릭하기 쉽게 함 */
.num-btn{
  width: 96px; /* 100px에서 약간 감소 */
  min-height: 80px; /* 높이를 늘려 좀 더 안정적인 모양 */
  padding: 12px 8px; /* 패딩 조정 */
  border-radius: 18px; /* 모서리 둥글기 조정 */
  font-size: 28px; /* 숫자를 더 크게 */
  
  /* 배경색을 더 밝고 대비되게 조정 */
  background:radial-gradient(circle at top,#ffffff 0,#f2f4ff 45%,#e8ecff 100%);
  
  /* 그림자 효과 강화 */
  box-shadow:0 12px 26px rgba(15,23,42,.28);
}

/* 버튼 눌림 애니메이션 강화 */
.num-btn:active{
  transform:translateY(0) scale(.95); /* 눌리는 느낌을 더 강하게 */
  box-shadow:0 6px 16px rgba(15,23,42,.35);
}

/* 선택된 카드: 강조 효과를 강하게 변경 */
.num-btn.selected{
  background:linear-gradient(135deg,var(--accent-strong),var(--accent-soft)); /* 더 강한 색상 순서 */
  color:#ffffff;
  border-color:rgba(191,219,254,1);
  box-shadow:
    0 0 0 3px rgba(255,255,255,1), /* 흰색 이중 테두리 추가 */
    0 0 0 6px rgba(79,70,229,.9), /* 강조색 테두리 추가 */
    0 18px 40px rgba(79,70,229,.6); /* 그림자를 더욱 강하게 */
  transform:translateY(0) scale(1); /* 크기 변화 없애고 고정 */
}

/* 하단 광고 영역 */
#adAreaBottom.ad-area{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 64px;              /* 광고 실제 높이 */
  line-height: 44px;

  background: #111;          /* 임시 배경 (테스트용) */
  color: #fff;
  text-align: center;

  z-index: 1000;             /* 타이틀보다 낮게 */
}

/* 페이지 전체 콘텐츠가 광고에 안 가리게 */
body{
  padding-bottom: 64px;      /* 광고 높이와 동일 */
}

.menu-exit-row{
  display:flex;
  margin-top: 16px;
  justify-content:flex-end;
}

/* =========================
   SWAP: ONLINE = MAIN, LOCAL = SECONDARY
   (사이즈 변경 없음)
   ========================= */

/* 1) 온라인 버튼을 메인 게임 버튼으로 (secondary라도 강제로 메인 룩) */
#btnGoOnline.full.secondary{
  position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 45%),
    linear-gradient(135deg, var(--accent), var(--accent-soft)) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 14px 30px rgba(79,70,229,.28),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
  transform:translateZ(0);
}

/* 온라인 버튼 하이라이트 */
#btnGoOnline.full.secondary::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent 55%);
  opacity:.65;
  pointer-events:none;
}

/* 온라인 버튼 글로우 */
#btnGoOnline.full.secondary::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(99,102,241,.65),
    rgba(59,130,246,.55),
    rgba(244,114,182,.35),
    rgba(99,102,241,.65)
  );
  z-index:-1;
  filter:blur(10px);
  opacity:.55;
  pointer-events:none;
}

#btnGoOnline.full.secondary:hover{
  filter:saturate(1.05) brightness(1.02);
}
#btnGoOnline.full.secondary:active{
  filter:saturate(1.0) brightness(.98);
}

/* 온라인 텍스트 */
#btnGoOnline span{
  text-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* 2) 로컬 버튼을 보조 패널 버튼으로 */
#btnGoLocal.full{
  position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), transparent 50%),
    linear-gradient(180deg, #ffffff, #eef2ff) !important;
  border:1px solid rgba(99,102,241,.28) !important;
  color:var(--text) !important;
  box-shadow:
    0 10px 22px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.8) inset !important;
}

/* 로컬 버튼 얇은 상단 하이라이트 */
#btnGoLocal.full::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(to bottom, rgba(99,102,241,.18), transparent 60%);
  opacity:.8;
  pointer-events:none;
}

/* 로컬 텍스트 */
#btnGoLocal span{
  text-shadow:none;
}

/* =========================================
   FULL VISUAL REDESIGN (LIGHT GAME UI)
   - 크기/사이즈(폭/높이/패딩/폰트) 변경 없음
   - 룩(색/질감/그림자/하이라이트/테두리)만 통일
   ========================================= */

/* 0) 토큰: 기존 컬러 유지 + "질감"용 보조 토큰만 추가 */
:root{
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.92);
  --line: rgba(99,102,241,.22);
  --line-strong: rgba(99,102,241,.38);
  --shine: rgba(255,255,255,.65);
  --shine-soft: rgba(255,255,255,.38);
  --ink: rgba(15,23,42,.08);
  --ink2: rgba(15,23,42,.12);
  --glow: rgba(79,70,229,.22);
  --glow2: rgba(59,130,246,.18);
}

/* 1) 바디 배경: 밝은 게임 로비 느낌(어둡게 X) */
body{
  background:
    radial-gradient(circle at 15% 10%, rgba(99,102,241,.16), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(59,130,246,.12), transparent 45%),
    radial-gradient(circle at 40% 95%, rgba(244,114,182,.10), transparent 45%),
    var(--bg-gradient);
}

/* 2) 헤더: "게임 HUD" 느낌 강화(사이즈 유지) */
header{
  background:
    linear-gradient(180deg, rgba(244,245,255,.98), rgba(244,245,255,.92), rgba(244,245,255,.72), transparent);
  border-bottom: 1px solid rgba(99,102,241,.14);
}
.head-inner{
  position:relative;
}
.head-inner::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(99,102,241,0),
    rgba(99,102,241,.28),
    rgba(59,130,246,.22),
    rgba(99,102,241,0)
  );
  pointer-events:none;
}

/* 3) 카드: 전체 카드 룩 통일(사이즈/패딩 유지) */
.card{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.95), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)),
    var(--card);
  border:1px solid rgba(99,102,241,.18);
  box-shadow:
    0 14px 34px rgba(15,23,42,.12),
    0 0 0 1px rgba(255,255,255,.7) inset;
  overflow:hidden;
}

/* 카드 내부 "게임 프레임" 라이트 */
.card::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(circle at 20% 12%, rgba(99,102,241,.18) 0, transparent 45%),
    radial-gradient(circle at 85% 40%, rgba(59,130,246,.12) 0, transparent 52%),
    radial-gradient(circle at 40% 95%, rgba(244,114,182,.10) 0, transparent 55%);
  transform:rotate(6deg);
  pointer-events:none;
  opacity:.95;
}

/* 카드 상단 HUD 라인 */
.card::after{
  content:"";
  position:absolute;
  left:14px; right:14px; top:14px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(99,102,241,.0),
    rgba(99,102,241,.30),
    rgba(59,130,246,.24),
    rgba(99,102,241,.0)
  );
  pointer-events:none;
  opacity:.9;
}

/* 4) 입력/셀렉트/텍스트영역: 유리(글래스) + 포커스 링 통일 */
input,select,textarea{
  background: rgba(243,244,255,.92);
  border:1px solid rgba(148,163,184,.42);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 8px 18px rgba(15,23,42,.06);
}

input:focus,select:focus,textarea:focus{
  border-color: rgba(99,102,241,.55);
  box-shadow:
    0 0 0 1px rgba(99,102,241,.22),
    0 0 0 5px rgba(99,102,241,.10),
    0 8px 20px rgba(15,23,42,.08);
  background: rgba(255,255,255,.98);
}

/* 5) 공통 버튼: "게임 버튼" 질감 통일(사이즈/패딩/폰트 유지) */
button{
  position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow:
    0 14px 30px rgba(79,70,229,.22),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

/* 버튼 상단 광택 */
button::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent 55%);
  opacity:.65;
  pointer-events:none;
}

/* 버튼 외곽 글로우(메인만 자연스럽게) */
button::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(99,102,241,.55),
    rgba(59,130,246,.45),
    rgba(244,114,182,.30),
    rgba(99,102,241,.55)
  );
  z-index:-1;
  filter:blur(10px);
  opacity:.45;
  pointer-events:none;
}

button:hover{
  filter:saturate(1.04) brightness(1.015);
}
button:active{
  filter:saturate(1.0) brightness(.99);
}

/* 6) 보조 버튼(secondary): "패널 버튼" 룩(사이즈 유지) */
button.secondary{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,242,255,.92)) !important;
  color: var(--text) !important;
  border:1px solid rgba(99,102,241,.26) !important;
  box-shadow:
    0 10px 22px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.78) inset !important;
}

/* 보조 버튼은 글로우 약하게 */
button.secondary::after{
  opacity:.18;
}

/* 7) "온라인 메인 / 로컬 보조" 룩 강제 스왑 (HTML 안 바꿔도 됨)
      - 온라인이 secondary여도 메인으로 보이게
      - 로컬은 메인 클래스지만 보조로 보이게 */
#btnGoOnline.full.secondary{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(135deg, var(--accent), var(--accent-soft)) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 14px 30px rgba(79,70,229,.24),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
}
#btnGoOnline.full.secondary::after{ opacity:.50; }

#btnGoLocal.full{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,242,255,.92)) !important;
  color: var(--text) !important;
  border:1px solid rgba(99,102,241,.26) !important;
  box-shadow:
    0 10px 22px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.78) inset !important;
}
#btnGoLocal.full::after{ opacity:.18; }

/* 8) 모드 토글(라디오 버튼 영역): 밝은 게임 탭 느낌 */
.mode-toggle{
  background: rgba(238,240,255,.92);
  border:1px solid rgba(99,102,241,.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 10px 20px rgba(15,23,42,.06);
}
.mode-toggle label{
  color: rgba(107,114,156,.95);
}
.mode-toggle label.active{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(circle at 0 0, var(--accent-soft) 0, var(--accent) 55%, var(--accent-strong) 100%);
  box-shadow:
    0 10px 22px rgba(79,70,229,.22),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

/* 9) pill(플레이어 칩 등): "칩 UI" 통일 (사이즈는 그대로) */
.player-pill{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(180deg, rgba(238,240,255,.95), rgba(231,235,255,.95));
  border:1px solid rgba(99,102,241,.22);
  box-shadow:
    0 10px 18px rgba(15,23,42,.07),
    0 0 0 1px rgba(255,255,255,.65) inset;
}

/* pill remove 버튼도 게임 UI */
.pill-remove{
  color:#b91c1c;
  opacity:.85;
}
.pill-remove:hover{ opacity:1; }

/* 10) 결과 테이블/태그: 밝은 패널화 */
.result-table{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(180deg, rgba(249,249,255,.95), rgba(238,242,255,.95));
  border:1px solid rgba(99,102,241,.18);
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}

.tag{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.85), transparent 65%),
    linear-gradient(180deg, rgba(238,242,255,.95), rgba(231,235,255,.95));
  border:1px solid rgba(99,102,241,.20);
  box-shadow: 0 8px 14px rgba(15,23,42,.06);
  color:#4b5563;
}

/* 11) 스크롤 영역: 경계만 깔끔하게(사이즈 변경 없음) */
#playerChips,
#resultByOption,
#resultByPlayer{
  border-radius:14px;
  border:1px solid rgba(99,102,241,.16);
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 16px rgba(15,23,42,.05) inset;
  padding:8px; /* ❗ 너가 "패딩/사이즈" 건드리지 말랬는데, 여기 padding은 기존에 없던 값이라면 빼도 됨 */
}

/* padding이 싫으면 위 줄만 삭제해도 됨. (기능 영향 없음) */

/* 12) 광고 영역: 어둡게 하지 말랬으니 밝게 (테스트용 #111 제거) */
#adAreaBottom.ad-area{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.75), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(238,242,255,.95));
  color:#111827;
  border-top:1px solid rgba(99,102,241,.18);
}

/* 13) 푸터: 게임 UI 하단 바 느낌 */
footer{
  background:
    linear-gradient(0deg, rgba(244,245,255,.98), rgba(244,245,255,.92), transparent);
  border-top:1px solid rgba(99,102,241,.16);
}

#btnGoOnline span::before{
  content:"🌍 ";
}
#btnGoLocal span::before{
  content:"🎮 ";
}

/* 모드 선택 제목 앞 이모지 */
#screenMenu h2::before{
  content:"🎯 ";
}

/* =====================================
   LOCAL GAME SETUP – LABEL EMOJIS
   (data-i18n / 구조 유지, CSS만)
   ===================================== */

/* 🔹 로컬 모드(타이틀 느낌) */
#screenLocal h2::before{
  content:"🎮 ";
}

/* 🔹 참가자 */
label[data-i18n="label_players"]::before{
  content:"👥 ";
}

/* 🔹 선택 방식 (숫자 / 커스텀) */
label[data-i18n="label_mode"]::before{
  content:"🧩 ";
}

/* 🔹 숫자 범위 */
label[data-i18n="label_range"]::before{
  content:"🔢 ";
}

/* 🏢 아파트 게임 제목 */
.apt-local-title::before{
  content:"🏢 ";
}

/* 🔹 제한 시간(초) */
label[data-i18n="label_time"]::before{
  content:"⏱️ ";
}

/* 🔹 승리 규칙 */
label[data-i18n="label_rule"]::before{
  content:"🏆 ";
}