/* 기본 텍스트용 — 눈누(noonnu.cc) 웹폰트 링크: Pretendard */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* 타일 속 숫자용 — 눈누(noonnu.cc) 웹폰트 링크: 넥슨 Lv.2 고딕 */
@font-face {
  font-family: "NexonLv2Gothic";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "NexonLv2Gothic";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "NexonLv2Gothic";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0b0c11;
  --bg-glow: radial-gradient(circle at 50% -10%, rgba(255, 122, 184, 0.14), transparent 55%);
  --bg-code-texture: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'480'%20height%3D'480'%20viewBox%3D'0%200%20480%20480'%3E%3Cg%20fill%3D'none'%20font-family%3D'Menlo%2CConsolas%2Cmonospace'%20fill-opacity%3D'0.05'%3E%3Ctext%20x%3D'18'%20y%3D'40'%20font-size%3D'13'%20fill%3D'%23ffffff'%3E%26lt%3B%3Fphp%3C%2Ftext%3E%3Ctext%20x%3D'34'%20y%3D'60'%20font-size%3D'11'%20fill%3D'%23ffffff'%3Epublic%20function()%20%7B%3C%2Ftext%3E%3Ctext%20x%3D'50'%20y%3D'80'%20font-size%3D'11'%20fill%3D'%23ffffff'%3Ereturn%20cipher()%3B%3C%2Ftext%3E%3Ctext%20x%3D'34'%20y%3D'100'%20font-size%3D'13'%20fill%3D'%23ffffff'%3E%7D%3C%2Ftext%3E%3Ctext%20x%3D'230'%20y%3D'34'%20font-size%3D'12'%20fill%3D'%23ffffff'%3E0%201%202%203%204%205%206%3C%2Ftext%3E%3Ctext%20x%3D'260'%20y%3D'58'%20font-size%3D'12'%20fill%3D'%23ffffff'%3E9%205%2023%2039%3C%2Ftext%3E%3Ctext%20x%3D'210'%20y%3D'140'%20font-size%3D'12'%20fill%3D'%23ffffff'%3E7%2080%209%203%206%3C%2Ftext%3E%3Ctext%20x%3D'40'%20y%3D'190'%20font-size%3D'11'%20fill%3D'%23ffffff'%3Evar%20guess%20%3D%20null%3B%3C%2Ftext%3E%3Ctext%20x%3D'60'%20y%3D'212'%20font-size%3D'11'%20fill%3D'%23ffffff'%3Eif%20(match)%20%7B%3C%2Ftext%3E%3Ctext%20x%3D'330'%20y%3D'210'%20font-size%3D'13'%20fill%3D'%23ffffff'%3E355%3C%2Ftext%3E%3Ctext%20x%3D'300'%20y%3D'232'%20font-size%3D'13'%20fill%3D'%23ffffff'%3E345%20345%3C%2Ftext%3E%3Ctext%20x%3D'20'%20y%3D'280'%20font-size%3D'12'%20fill%3D'%23ffffff'%3E6%209%203%203%203%201%204%3C%2Ftext%3E%3Ctext%20x%3D'250'%20y%3D'300'%20font-size%3D'11'%20fill%3D'%23ffffff'%3Ereveal(tile)%3B%3C%2Ftext%3E%3Ctext%20x%3D'150'%20y%3D'340'%20font-size%3D'12'%20fill%3D'%23ffffff'%3E2%201%209%208%205%3C%2Ftext%3E%3Ctext%20x%3D'60'%20y%3D'380'%20font-size%3D'11'%20fill%3D'%23ffffff'%3E%7D%3C%2Ftext%3E%3Ctext%20x%3D'300'%20y%3D'400'%20font-size%3D'12'%20fill%3D'%23ffffff'%3E9%203%207%3C%2Ftext%3E%3Ctext%20x%3D'150'%20y%3D'430'%20font-size%3D'11'%20fill%3D'%23ffffff'%3E%26lt%3B%2Fphp%26gt%3B%3C%2Ftext%3E%3Ctext%20x%3D'340'%20y%3D'450'%20font-size%3D'12'%20fill%3D'%23ffffff'%3E4%205%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --panel: #15171f;
  --panel-border: #262a35;
  --accent: #e0274a;
  --accent-soft: rgba(224, 39, 74, 0.16);
  --gold: #e8b45c;
  --pink: #ff7ab8;
  --pink-deep: #a8386b;
  --pink-soft: rgba(255, 122, 184, 0.2);
  --text: #f2f3f5;
  --muted: #8b909c;
  --tile-black-bg: linear-gradient(160deg, #24262e, #17181e);
  --tile-white-bg: linear-gradient(160deg, #f4f5f7, #dfe1e6);
  --radius-lg: 16px;
  --radius-md: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background-color: var(--bg);
  background-image: var(--bg-code-texture), var(--bg-glow);
  background-size: 480px 480px, auto;
  background-attachment: fixed;
  color: var(--text);
  display: flex;
  justify-content: center;
  padding: 32px 14px 60px;
}

#app {
  width: 100%;
  max-width: 640px;
}

header {
  position: relative;
  text-align: center;
  margin-bottom: 22px;
}

/* 화면엔 안 보이지만 스크린리더/검색엔진은 읽을 수 있는 텍스트 (이미지 로고의 대체 제목) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-logo {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}

.mute-btn {
  position: absolute;
  right: 0;
  top: 0;
  background: #171922;
  border: 1px solid var(--panel-border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mute-btn:hover {
  border-color: var(--pink);
  color: var(--pink);
  transform: translateY(-1px);
}

.screen.hidden {
  display: none;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
  animation: fadeUp 0.35s ease both;
}

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

/* 시작 화면 */
#screen-start .option-group {
  margin-bottom: 20px;
}

#screen-start .option-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.hint-inline {
  color: var(--muted);
  font-weight: 400;
  font-size: 11.5px;
}

.rules-box {
  background: #101218;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.rules-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #ced1d8;
}

.rules-list li {
  margin-bottom: 6px;
}

.rules-list b {
  color: var(--gold);
  font-weight: 600;
}

.rule-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* 칩(세그먼트) 스타일 라디오 */
.chip-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: #1a1d26;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chip:hover span {
  border-color: var(--accent);
  color: var(--text);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
}

.toggle-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

button#btn-start,
button#btn-replay {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 8px 20px -8px rgba(255, 122, 184, 0.55);
}

button#btn-start:hover,
button#btn-replay:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(255, 122, 184, 0.7);
}

button#btn-start:active,
button#btn-replay:active {
  transform: translateY(0);
}

/* 이름 입력, 랭킹/공유 보조 버튼 */
.name-input {
  width: 100%;
  background: #1a1d26;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.name-input:focus {
  outline: none;
  border-color: var(--accent);
}

.name-input::placeholder {
  color: var(--muted);
}

.start-secondary-row,
.result-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.secondary-btn {
  flex: 1;
  background: #1a1d26;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  margin-top: 10px;
}

.secondary-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* 랭킹 화면 */
.rank-tabs {
  margin: 14px 0;
}

.rank-tabs-playercount {
  margin-top: -6px;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-height: 60px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #171922;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13.5px;
}

.rank-num {
  width: 40px;
  font-weight: 700;
  color: var(--muted);
}

.rank-name {
  flex: 1;
  font-weight: 600;
}

.rank-time {
  color: var(--gold);
  font-weight: 600;
  font-family: "Sora", sans-serif;
}

.rank-row.rank-top1 {
  border-color: var(--gold);
  background: rgba(232, 180, 92, 0.1);
}
.rank-row.rank-top1 .rank-num {
  color: var(--gold);
}

.rank-row.rank-top2 {
  border-color: rgba(200, 205, 214, 0.5);
}
.rank-row.rank-top2 .rank-num {
  color: #c8cdd6;
}

.rank-row.rank-top3 {
  border-color: rgba(196, 130, 80, 0.5);
}
.rank-row.rank-top3 .rank-num {
  color: #c48250;
}

.rank-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 0;
}

/* 결과 상세(승리 시간/랭킹) */
.result-detail {
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 12px;
}

.result-detail.hidden {
  display: none;
}

/* 결과 오버레이 — 게임 화면(마지막 판 보드)은 그대로 둔 채, 하단에 겹쳐서
   결과/다시하기/공유하기/랭킹/처음으로를 보여준다. */
.result-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(6, 7, 10, 0.98) 60%, rgba(6, 7, 10, 0.82));
  border-top: 1px solid var(--panel-border);
  box-shadow: 0 -14px 34px -12px rgba(0, 0, 0, 0.7);
  animation: resultSheetUp 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.result-overlay.hidden {
  display: none;
}

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

.result-overlay-inner {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

.result-overlay-inner #result-text {
  font-family: "Sora", sans-serif;
  font-size: 21px;
  margin: 0 0 10px;
}

/* 공유 결과 등을 잠깐 알려주는 토스트 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: #232631;
  border: 1px solid rgba(232, 180, 92, 0.4);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.toast.hidden {
  display: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 게임 화면 */
/* 셔플·딜링 연출 */
.deck-pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 4px auto 20px;
}

.deck-pile.hidden {
  display: none;
}

.deck-stack {
  width: 46px;
  height: 62px;
  border-radius: 8px;
  background: var(--tile-black-bg);
  border: 2px solid #363b47;
  box-shadow: 3px 3px 0 -1px #101218, 3px 3px 0 0 #363b47, 6px 6px 0 -1px #0c0d11,
    6px 6px 0 0 #2a2e38;
}

.deck-stack.shuffling {
  animation: shuffleWiggle 0.9s ease-in-out;
}

@keyframes shuffleWiggle {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  15% {
    transform: rotate(-7deg) translateX(-3px);
  }
  30% {
    transform: rotate(6deg) translateX(3px);
  }
  45% {
    transform: rotate(-5deg) translateX(-2px);
  }
  60% {
    transform: rotate(4deg) translateX(2px);
  }
  75% {
    transform: rotate(-2deg) translateX(-1px);
  }
}

.deck-count-wrap {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.deck-count {
  color: var(--gold);
  font-weight: 600;
}

.dealt-tile {
  animation: tileDeal 0.3s ease both;
}

@keyframes tileDeal {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.opponents-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.opponent-panel {
  margin-bottom: 0;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.opponent-panel.active-turn {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -14px rgba(224, 39, 74, 0.6);
}

.opponent-panel.eliminated {
  opacity: 0.4;
  filter: grayscale(0.6);
}

.opponent-panel .option-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 13.5px;
  color: #d7dae0;
}

/* 도발/블러핑 말풍선 */
.speech-bubble {
  position: relative;
  background: #232631;
  border: 1px solid rgba(232, 180, 92, 0.35);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #ecd9b0;
  font-style: italic;
  animation: speechPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: #232631;
  border-right: 1px solid rgba(232, 180, 92, 0.35);
  border-bottom: 1px solid rgba(232, 180, 92, 0.35);
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
}

@keyframes speechPop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.my-panel {
  border-color: rgba(232, 180, 92, 0.35);
}

.tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 68px;
  align-items: center;
  padding: 6px 0;
}

.tile {
  width: 44px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NexonLv2Gothic", "Sora", sans-serif;
  font-size: 19px;
  font-weight: 700;
  position: relative;
  border: 2px solid transparent;
  animation: tileIn 0.22s ease both;
}

@keyframes tileIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tile-black {
  background: var(--tile-black-bg);
  color: #f2f2f2;
  border-color: #363b47;
}

.tile-white {
  background: var(--tile-white-bg);
  color: #1a1c22;
  border-color: #cfd3da;
}

.tile.clickable {
  cursor: pointer;
}

.tile.clickable:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 16px -8px rgba(224, 39, 74, 0.7);
}

.tile.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232, 180, 92, 0.3);
}

.tile.revealed {
  box-shadow: 0 0 0 2px var(--accent) inset;
}

.tile-joker {
  border-color: var(--gold) !important;
  box-shadow: 0 0 8px -1px rgba(232, 180, 92, 0.55);
}

.tile-joker .tile-face {
  color: var(--gold);
}

.diff-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0.2px;
}

.diff-badge.diff-easy {
  background: rgba(120, 200, 140, 0.15);
  color: #7ecb96;
}

.diff-badge.diff-normal {
  background: rgba(232, 180, 92, 0.15);
  color: var(--gold);
}

.diff-badge.diff-hard {
  background: var(--accent-soft);
  color: var(--accent);
}

/* 조커 배치 UI */
#joker-placement.hidden {
  display: none;
}

.joker-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
  text-align: center;
}

.joker-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.joker-gap {
  width: 20px;
  height: 60px;
  border: 1px dashed var(--panel-border);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
}

.joker-gap:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(232, 180, 92, 0.08);
}

.num-btn.joker-guess {
  background: rgba(232, 180, 92, 0.12);
  color: var(--gold);
  border-color: rgba(232, 180, 92, 0.4);
  font-size: 12px;
  width: auto;
  padding: 0 12px;
}

.num-btn.joker-guess:hover {
  background: var(--gold);
  color: #1a1c22;
}

.wrong-hint {
  position: absolute;
  bottom: -15px;
  font-size: 9.5px;
  color: var(--muted);
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
}

/* 방금 벌어진 일을 크게 알려주는 배너 (로그보다 눈에 잘 띄도록) */
.action-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin: 0 auto 14px;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  border: 1px solid var(--panel-border);
  background: #171922;
  color: var(--text);
}

.action-banner.hidden {
  display: none;
}

.action-banner-text {
  line-height: 1.5;
}

/* "다음"으로 넘겨야 하는 상태임을 배너 테두리로도 알 수 있게 강조 */
.action-banner.awaiting-next {
  border-color: var(--pink);
  box-shadow: 0 0 0 1px rgba(255, 122, 184, 0.3);
}

.banner-next-btn {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: white;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 6px 16px -8px rgba(255, 122, 184, 0.7);
  animation: nextBtnPulse 1.6s ease-in-out infinite;
}

.banner-next-btn:hover {
  transform: translateY(-1px);
}

.banner-next-btn:active {
  transform: translateY(0);
}

@keyframes nextBtnPulse {
  0%,
  100% {
    box-shadow: 0 6px 16px -8px rgba(255, 122, 184, 0.7);
  }
  50% {
    box-shadow: 0 6px 20px -6px rgba(255, 122, 184, 0.95);
  }
}

.action-banner.pop {
  animation: bannerPop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes bannerPop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.action-banner.banner-correct {
  color: var(--gold);
  border-color: rgba(232, 180, 92, 0.45);
  background: rgba(232, 180, 92, 0.1);
}

.action-banner.banner-wrong {
  color: var(--accent);
  border-color: rgba(224, 39, 74, 0.45);
  background: var(--accent-soft);
}

.action-banner.banner-eliminated {
  color: #d7dae0;
  border-color: #3a3f4c;
  background: #1c1e27;
}

.action-banner.banner-gameover {
  color: var(--gold);
  border-color: rgba(232, 180, 92, 0.55);
  background: rgba(232, 180, 92, 0.14);
  font-size: 16px;
}

/* 방금 화면에서 조명받은(공개/강제공개/지목당한) 타일을 잠깐 반짝여서 시선을 끈다 */
.tile.just-acted {
  animation: justActedPulse 1s ease-in-out;
}

@keyframes justActedPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 180, 92, 0.9);
  }
  40% {
    box-shadow: 0 0 0 6px rgba(232, 180, 92, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 180, 92, 0);
  }
}

.turn-pill {
  text-align: center;
  margin: 4px auto 18px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
  border: 1px solid var(--panel-border);
  background: #171922;
  color: var(--muted);
}

.turn-pill.my-turn {
  color: var(--gold);
  border-color: rgba(232, 180, 92, 0.4);
  background: rgba(232, 180, 92, 0.08);
}

.turn-pill.ai-turn {
  color: var(--accent);
  border-color: rgba(224, 39, 74, 0.4);
  background: var(--accent-soft);
}

#guess-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

#guess-picker.hidden {
  display: none;
}

.num-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #1a1d26;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.num-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.num-btn.cancel {
  background: transparent;
  color: var(--muted);
  border-color: var(--panel-border);
}

.num-btn.cancel:hover {
  background: #232631;
  color: var(--text);
}

#btn-pass {
  display: block;
  margin: 0 auto 18px;
  background: #1a1d26;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

#btn-pass:hover {
  border-color: var(--gold);
  color: var(--gold);
}

#btn-pass.hidden {
  display: none;
}

#log {
  background: #0e0f14;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  height: 160px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--muted);
}

.log-line {
  padding: 4px 0;
  border-bottom: 1px solid #1a1d24;
}

.log-line:last-child {
  border-bottom: none;
}

/* 모바일 대응 */
@media (max-width: 480px) {
  .tile {
    width: 38px;
    height: 52px;
    font-size: 16px;
  }
  .opponents-container {
    grid-template-columns: 1fr;
  }
  .hero-logo {
    max-width: 100%;
  }
}