:root {
  --bg: #0e1b12;
  --bg2: #14251a;
  --field: #1d3a26;
  --line: #2c5237;
  --sand: #d8b077;
  --cream: #f6efe0;
  --accent: #ffd166;
  --accent2: #ef6351;
  --sky: #7fd1e8;
  --text: #f0ead8;
  --dim: #9fb5a4;
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Gowun Dodum", sans-serif;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #1c3626 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

h1, h2, .card-title, .btn, .hud-name, .hud-turn, .actions-title, .tour-round {
  font-family: "Jua", sans-serif;
  font-weight: 400;
}

#app {
  width: 100%;
  max-width: 480px;
  padding: 20px 16px 40px;
}

.screen { display: none; animation: fadein .35s ease; }
.screen.active { display: block; }
.hidden { display: none !important; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 타이틀 ---------- */
.title-box {
  text-align: center;
  padding: 12vh 0 0;
}
.title-ball {
  font-size: 4rem;
  animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}
.title-box h1 {
  font-size: 3.2rem;
  letter-spacing: .08em;
  color: var(--accent);
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.subtitle { font-size: 1.15rem; color: var(--sky); margin-top: 2px; }
.desc { color: var(--dim); line-height: 1.6; margin: 20px 0 32px; }

/* ---------- 공통 ---------- */
h2 { font-size: 1.6rem; margin: 8px 0 6px; color: var(--accent); }
.hint { color: var(--dim); line-height: 1.55; margin-bottom: 18px; }

.btn {
  display: inline-block;
  border: none;
  border-radius: 14px;
  padding: 14px 28px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(.96); }
/* ⚠️ `hidden`이 버튼에는 안 먹었어요.
 * 브라우저 기본 규칙 `[hidden] { display: none }`은 **작성자 스타일에 무조건 집니다.**
 * 그래서 위의 `.btn { display: inline-block }`이 이기고, JS에서 btn.hidden = true를
 * 걸어도 버튼이 그대로 남았어요 — 승부차기가 끝났는데 "⚽ 승부차기 시작" 버튼이
 * 계속 떠 있던 게 이것 때문입니다(제보).
 * 버튼에 hidden을 거는 건 언제나 의도적이라, 그 자리만 좁게 되돌려요.
 *
 * !important를 쓰는 이유: `#move-actions .btn`처럼 ID가 붙은 선택자(1,1,0)가
 * `.btn[hidden]`(0,2,0)보다 세서, 그런 자리에서는 또 안 먹어요.
 * "보이나 안 보이나"는 다른 어떤 스타일보다 먼저 지켜져야 하는 값이라
 * 표준 리셋(normalize.css)도 같은 방식으로 잠급니다. */
.btn[hidden] { display: none !important; }
.btn-primary {
  background: linear-gradient(180deg, #ffd97a, var(--accent));
  color: #4a3200;
  box-shadow: 0 4px 0 #b98e2f;
  width: 100%;
  margin-top: 10px;
}
.btn-ghost {
  background: transparent;
  color: var(--sky);
  border: 2px solid var(--line);
  width: 100%;
  margin-top: 10px;
}

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-grid.two { grid-template-columns: 1fr 1fr; }

.card {
  background: linear-gradient(180deg, var(--bg2), var(--field));
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 16px 12px;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover, .card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.card-emoji { font-size: 1.9rem; }
.card-title { font-size: 1.15rem; color: var(--accent); }
.card-sub { font-size: .8rem; color: var(--sky); }
.card-desc { font-size: .78rem; color: var(--dim); line-height: 1.5; }
.card-tags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.tag {
  font-size: .68rem;
  background: rgba(255, 209, 102, .12);
  color: var(--accent);
  border-radius: 99px;
  padding: 2px 8px;
}

/* ---------- 이름 ---------- */
.name-box { display: flex; gap: 8px; }
.name-box .btn-ghost { width: auto; margin: 0; padding: 12px 14px; white-space: nowrap; flex-shrink: 0; }
#input-name {
  flex: 1;
  min-width: 0;
  background: var(--bg2);
  border: 2px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  font-size: 1.2rem;
  font-family: "Jua", sans-serif;
  padding: 12px 16px;
  text-align: center;
}
#input-name:focus { outline: none; border-color: var(--accent); }

/* ---------- 메인 HUD ---------- */
.hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: var(--bg2);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.hud-name { font-size: 1.2rem; color: var(--accent); }
.hud-school { font-size: .8rem; color: var(--dim); word-break: keep-all; }
.hud-turn { font-size: 1.05rem; color: var(--sky); text-align: right; white-space: nowrap; }

.gauges { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gauge-label {
  display: flex; justify-content: space-between;
  font-size: .82rem; color: var(--dim); margin-bottom: 3px;
}
.bar {
  height: 12px;
  background: #0a140d;
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.bar-fill.cond { background: linear-gradient(90deg, #6ee7a0, #2fbf71); }
.bar-fill.cond.low { background: linear-gradient(90deg, #f59e8b, var(--accent2)); }
.bar-fill.scout { background: linear-gradient(90deg, #ffe29a, var(--accent)); }
.bar-fill.stat { background: linear-gradient(90deg, #9ad8ec, var(--sky)); }

/* ---------- 스탯 ---------- */
.stats {
  background: var(--bg2);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 포스트시즌처럼 능력치를 비우는 화면에서 빈 상자만 남지 않게 */
.stats:empty { display: none; }
.stat-row { display: flex; align-items: center; gap: 8px; }
.stat-name { width: 62px; font-size: .85rem; }
.stat-row .bar { flex: 1; height: 10px; }
.stat-val { width: 34px; text-align: right; font-size: .85rem; color: var(--sky); }
/* 별 + MAX/✨단계 — 한 줄에 들어가되, ✨단계가 붙으면 내용만큼 늘어나요 (막대가 대신 줄어듦) */
.stat-pot { flex: 0 0 auto; min-width: 76px; font-size: .7rem; color: var(--accent); letter-spacing: -1px; white-space: nowrap; }
.stat-pot .tr { color: #c9aaff; letter-spacing: 0; }

/* ---------- 행동 ---------- */
.actions-title { margin-bottom: 8px; color: var(--cream); }
.action-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.action-btn {
  background: linear-gradient(180deg, var(--field), #16301f);
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 4px;
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  transition: border-color .12s ease, transform .12s ease;
}
.action-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.action-btn .a-emoji { font-size: 1.3rem; }
.action-btn .a-sub { font-size: .65rem; color: var(--dim); }
.action-btn.rest { grid-column: span 3; flex-direction: row; justify-content: center; gap: 8px; }

/* ---------- 로그 ---------- */
.log {
  margin-top: 14px;
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--dim);
  max-height: 180px;
  overflow-y: auto;
}
.log .new { color: var(--cream); }

/* ---------- 대회 ---------- */
.tour-round { font-size: 1.2rem; color: var(--sky); margin: 6px 0 10px; }
.tour-card {
  background: linear-gradient(180deg, var(--bg2), var(--field));
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 20px 16px;
  min-height: 220px;
  line-height: 1.7;
}
.tour-vs { font-family: "Jua"; font-size: 1.3rem; text-align: center; margin-bottom: 10px; }
.tour-vs .win { color: #6ee7a0; }
.tour-vs .lose { color: var(--accent2); }
.tour-line { font-size: .92rem; }
.tour-highlight { color: var(--accent); }
.tour-pts { margin-top: 12px; color: var(--sky); font-size: .88rem; }

/* 🌏 월드투어 — 도시별 객석 게이지 */
.tour-fill { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .85rem; }
.tour-fill .bar { flex: 1; }
.tour-grade { font-family: "Jua", sans-serif; font-size: 2.4rem; color: var(--accent); text-align: center; margin: 10px 0; }

/* ---------- 드래프트 ---------- */
.draft-card {
  background: linear-gradient(180deg, #1a2f3f, #10202c);
  border: 2px solid #2e5670;
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  line-height: 1.8;
  margin: 10px 0 16px;
}
.draft-emoji { font-size: 3rem; }
.draft-title { font-family: "Jua"; font-size: 1.5rem; color: var(--accent); margin: 6px 0; }
.draft-team { font-size: 1.1rem; color: var(--sky); }
.draft-summary {
  margin-top: 14px;
  font-size: .85rem;
  color: var(--dim);
  border-top: 1px dashed #2e5670;
  padding-top: 12px;
  text-align: left;
}
/* 버튼이 3개 이상이면 좁은 화면에서 글자가 쪼개져요 — 줄바꿈 허용 + 최소 폭 확보 */
.draft-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.draft-actions .btn { flex: 1 1 140px; min-width: 0; white-space: nowrap; padding-left: 12px; padding-right: 12px; }

@media (max-width: 380px) {
  .card-grid { grid-template-columns: 1fr; }
  .card-grid.two { grid-template-columns: 1fr 1fr; }
}

/* ---------- 시리즈 공통 ---------- */
.series-link {
  display: block;
  margin-top: 18px;
  color: var(--dim);
  font-size: 0.85rem;
  text-decoration: none;
}
.series-link:hover { color: var(--sky); }

/* ---------- 얼굴 아바타 ---------- */
.avatar-slot { margin: 14px 0 4px; text-align: center; }
.av-row { display: flex; align-items: center; gap: 10px; justify-content: center; }
.av-row .btn-ghost { width: auto; margin: 0; padding: 10px 16px; font-size: 0.95rem; }
.av-preview { position: relative; }
.av-preview img {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--accent); display: block; object-fit: cover;
}
.av-clear {
  position: absolute; top: -6px; right: -6px;
  background: var(--accent2); color: #fff; border: none;
  border-radius: 50%; width: 20px; height: 20px;
  font-size: 0.6rem; cursor: pointer; line-height: 1;
}
.av-note { font-size: 0.7rem; color: var(--dim); margin-top: 6px; }
.av-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
/* 게임이 여럿 나열되면 모달이 화면보다 길어져서, 폰에서는 맨 아래 확인 버튼에
   손이 안 닿았어요. 안에서 스크롤되게 높이를 묶어둡니다. */
.av-modal {
  background: var(--bg2); border: 2px solid var(--line);
  border-radius: 18px; padding: 18px; text-align: center;
  max-width: 92vw; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
}
.av-title { font-family: "Jua", sans-serif; color: var(--cream); margin-bottom: 10px; }
#av-canvas { border-radius: 12px; touch-action: none; cursor: grab; background: #000; max-width: 80vw; }
#av-zoom { width: 100%; margin: 12px 0 4px; accent-color: var(--accent); }
.av-actions { display: flex; gap: 8px; }
.av-actions .btn { flex: 1; margin-top: 6px; padding: 10px; font-size: 1rem; }
/* 프로의 팀 정보 줄이 길어서 오른쪽 블록을 아래로 밀어내곤 했어요.
   min-width: 0 을 줘야 긴 글이 줄바꿈되면서 오른쪽 자리를 지켜줘요. */
.hud-id { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.hud-left { min-width: 0; }   /* 이게 없으면 긴 팀 정보가 안 접히고 폭을 밀어내요 */
.hud-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--accent); object-fit: cover;
}
.draft-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid var(--accent); object-fit: cover; margin-bottom: 4px;
}

/* ---------- 경기/무대 중계 연출 ---------- */
/* 연장에 들어가면 이닝 칸이 10·11회로 늘어나요. 좁은 화면에서 넘칠 때만 가로로 밀려요. */
.sb-wrap { overflow-x: auto; margin-bottom: 10px; }
.scoreboard { width: 100%; border-collapse: collapse; font-size: 0.7rem; margin-bottom: 10px; }
.sb-wrap .scoreboard { margin-bottom: 0; min-width: 100%; }
.scoreboard th, .scoreboard td { border: 1px solid var(--line); padding: 3px 1px; text-align: center; color: var(--dim); min-width: 16px; }
.scoreboard tbody th { color: var(--cream); font-family: "Jua", sans-serif; font-size: 0.72rem; padding: 3px 4px; }
.scoreboard .sb-r { color: var(--accent); font-weight: bold; }
.pbp {
  background: rgba(0, 0, 0, 0.25); border-radius: 10px;
  padding: 8px 12px; font-size: 0.8rem; line-height: 1.75;
  max-height: 170px; min-height: 56px; overflow-y: auto; margin-bottom: 10px;
  color: var(--dim);
}
.pbp .good { color: #6ee7a0; }
.pbp .bad { color: #f59e8b; }

/* ---------- 명예의 전당 · 배틀 ---------- */
.hof-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg2); border: 2px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.hof-card.me { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.hof-face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.hof-face-emoji {
  width: 52px; height: 52px; border-radius: 50%; background: var(--field);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;
}
.hof-info { flex: 1; font-size: 0.78rem; color: var(--dim); line-height: 1.5; }
.hof-info .hof-name { font-family: "Jua", sans-serif; font-size: 1rem; color: var(--cream); }
.hof-grade { font-size: 0.72rem; color: var(--accent); }
.mini-btn {
  background: transparent; border: 1px solid var(--line); color: var(--sky);
  border-radius: 8px; padding: 6px 10px; font-size: 0.72rem; cursor: pointer; flex-shrink: 0;
}
.battle-row {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg2); border: 2px solid var(--line);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
  font-size: 0.85rem; color: var(--dim);
}
.battle-row select, .battle-row textarea {
  background: var(--bg); color: var(--text); border: 2px solid var(--line);
  border-radius: 10px; padding: 10px; font-size: 0.9rem; font-family: inherit;
}
.rank-title { font-size: 1.1rem; margin-top: 14px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 8px; }
.rank-table th, .rank-table td { border-bottom: 1px solid var(--line); padding: 7px 6px; text-align: left; color: var(--dim); }
.rank-table th { color: var(--cream); font-family: "Jua", sans-serif; font-weight: 400; }
.rank-table .me td { color: var(--accent); }
.season-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; margin: 10px 0; }
.season-table th, .season-table td { border-bottom: 1px solid var(--line); padding: 5px 4px; text-align: center; color: var(--dim); }
.season-table th { color: var(--cream); font-weight: 400; }

/* 연도별 통산 기록표 — 좁은 칸이 세로로 쪼개지지 않게 폭을 고정해요.
   ⚠️ table-layout:fixed + nth-child라 칼럼을 더하거나 빼면 폭이 통째로 밀립니다.
   시즌 결산표(4칸)와 📊 기록표(5칸)가 같은 클래스를 쓰므로 아래처럼 나눠서 잡아요. */
.season-career { table-layout: fixed; }
/* 시즌 결산 — 시즌 · 나이 · 성적 · WAR */
.season-career th:nth-child(1), .season-career td:nth-child(1) { width: 60px; }
.season-career th:nth-child(2), .season-career td:nth-child(2) { width: 50px; }
.season-career th:nth-child(4), .season-career td:nth-child(4) { width: 38px; }
/* 📊 기록도 4칸이에요 — 소속(팀+보직)을 한 칸에 쌓습니다.
   칼럼을 하나 더 두면 '성적'이 그만큼 좁아져 세로로 접혀요. */
.season-career td { vertical-align: top; word-break: keep-all; }
.season-career .sn-y, .season-career .sn-role, .season-career .sn-team { white-space: nowrap; }
/* 이적한 시즌은 눈에 띄게 — 칼럼을 훑으며 언제 팀을 옮겼는지 바로 보이게 */
.season-career .sn-team.moved { color: var(--accent); }
.season-career .sn-y { color: var(--cream); }
.season-career .sn-age, .season-career .sn-role { display: block; font-size: 0.64rem; opacity: .65; }
.season-career .sn-line { text-align: left; }
.season-career .sn-war { color: var(--cream); }
.sn-tags { display: block; margin-top: 2px; }
.sn-tag {
  display: inline-block; margin: 1px 3px 0 0; padding: 1px 5px;
  border-radius: 99px; font-size: 0.62rem; white-space: nowrap;
}
.sn-tag.champ { background: rgba(255,196,0,.16); color: #ffd45e; }
.sn-tag.award { background: rgba(120,200,255,.14); color: #8fd0ff; }

/* ---------- 타이밍 미니게임 ---------- */
.tm-box {
  background: var(--bg2); border: 2px solid var(--accent);
  border-radius: 14px; padding: 14px; margin: 10px 0; text-align: center;
  animation: fadein .25s ease;
}
.tm-label { font-family: "Jua", sans-serif; color: var(--cream); margin-bottom: 10px; font-size: 0.95rem; }
.tm-bar {
  position: relative; height: 26px; border-radius: 99px;
  background: #0a0f0c; border: 1px solid var(--line); overflow: hidden;
}
.tm-zone { position: absolute; top: 0; bottom: 0; background: rgba(110, 231, 160, 0.35); }
.tm-zone-perfect { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: 0.55; }
/* 존 색 범례 — 초록 안의 노랑이 오류로 보인다는 문의가 있어 추가 */
.tm-legend {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 6px 0 0; font-size: 0.72rem; color: var(--dim);
}
.tm-legend .tm-lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tm-legend .tm-lg-good { margin-left: 8px; }
.tm-lg-perfect { background: var(--accent); opacity: 0.75; }
.tm-lg-good { background: rgba(110, 231, 160, 0.55); }
.tm-legend-tip { margin: 2px 0 0; font-size: 0.7rem; color: var(--dim); opacity: 0.85; text-align: center; }

/* ☁️ 클라우드 세이브 — 동기화 표시, 알림 토스트, 연동 모달 */

/* 동기화 표시(스펙 6.3) — 우측 상단 알약.
   자동 저장마다 깜빡이지 않도록, cloud.js가 오래 걸린 전송에만 켭니다.
   position:fixed 라 레이아웃을 밀지 않고, pointer-events:none 이라 터치를 먹지 않아요. */
/* z-index는 모달(.av-overlay, 50)보다 낮게 둡니다. 폰처럼 좁은 화면에서는 알약 자리와
   모달의 우측 상단이 겹쳐서, 위에 뜨면 고르는 화면 위로 글자가 떠 보여요. */
.cloud-sync {
  position: fixed; right: 10px; top: 10px; z-index: 40; pointer-events: none;
  background: rgba(10, 15, 12, .78); border: 1px solid var(--line);
  color: var(--cream); font-size: .72rem; padding: 6px 11px; border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); white-space: nowrap;
  animation: cloudin .2s ease;
}
/* 사라지기 직전에만 서서히 흐려져요 (지속 시간은 cloud.js의 제거 타이머와 맞춰둡니다) */
.cloud-sync-ok { animation: cloudin .2s ease, cloudout .35s ease 1.15s forwards; }
.cloud-sync-off { animation: cloudin .2s ease, cloudout .35s ease 1.65s forwards; }
@keyframes cloudout { to { opacity: 0; } }

/* 토스트 — 동기화가 끝난 뒤 사용자에게 하는 말 (같은 자리를 쓰고 이쪽이 우선이에요)
   알약과 마찬가지로 pointer-events:none — 1.8초 동안 그 구석의 탭을 삼키면 안 돼요. */
.cloud-toast {
  position: fixed; right: 10px; top: 10px; z-index: 9998; pointer-events: none;
  background: rgba(10, 15, 12, .88); border: 1px solid var(--line);
  color: var(--cream); font-size: .74rem; padding: 7px 12px; border-radius: 99px;
  box-shadow: 0 2px 10px rgba(0,0,0,.4); animation: cloudin .25s ease;
}
@keyframes cloudin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cloud-toast, .cloud-sync, .cloud-sync-ok, .cloud-sync-off { animation: none; }
}

/* 연동 화면은 게임 8종이 다 뜰 수 있어서 제일 길어져요 (.av-modal에서 스크롤을 받아요) */
.cloud-modal { width: 420px; max-width: 92vw; text-align: left; }
/* 코드 옆 복사 버튼 — 클립보드 쓰기는 이 클릭(사용자 제스처) 안에서만 확실히 돼요 */
.cloud-copy { padding: 8px 14px; font-size: .85rem; margin-bottom: 8px; }
.cloud-modal p { font-size: .82rem; color: var(--dim); line-height: 1.65; margin-bottom: 12px; }
.cloud-code {
  display: block; font-family: ui-monospace, monospace; font-size: .95rem; color: var(--accent);
  background: rgba(0,0,0,.3); border: 1px dashed var(--line); border-radius: 10px;
  padding: 10px; margin: 10px 0; text-align: center; word-break: break-all; user-select: all;
}
.cloud-note { color: var(--sky) !important; }
.cloud-sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.cloud-row { display: flex; gap: 8px; }
.cloud-row input {
  flex: 1; min-width: 0; background: var(--bg2); border: 2px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: .9rem; padding: 10px;
}
.cloud-row .btn { width: auto; margin: 0; padding: 10px 14px; white-space: nowrap; }
.cloud-pick { margin: 10px 0; font-size: .82rem; color: var(--text); }
.cloud-pick label { display: block; padding: 6px 0; cursor: pointer; }
/* "(2시간 전)" — 스펙 5.4·6.2. 어느 쪽이 최근인지 알려주는 곁말이라 흐리게 둬요 */
.cloud-ago { color: var(--dim); font-size: .76rem; }

/* 🔔 구원 등판 점수판 — 1~2이닝 등판에 9이닝 표는 과해서 점수만 크게 보여줘요 */
.relief-score {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 10px;
}
.relief-score .rs-name { font-size: .78rem; color: var(--dim); min-width: 54px; text-align: center; }
.relief-score .rs-num {
  font-family: "Jua", sans-serif; font-size: 1.5rem; color: var(--text);
  min-width: 28px; text-align: center; transition: color .2s ease;
}
.relief-score .rs-lead { color: var(--accent); }
.relief-score .rs-sep { color: var(--dim); font-size: 1.1rem; }
.tm-marker {
  position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px;
  background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,.8);
}
.tm-marker.tm-perfect { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tm-marker.tm-miss { background: var(--accent2); }
.tm-btn { margin-top: 12px; padding: 12px; font-size: 1.05rem; }
.tm-done-perfect { border-color: #6ee7a0; }
.tm-done-miss { border-color: var(--accent2); }
.hud-battle { margin-top: 6px; }
/* 턴 표시와 자금을 한 줄에 우측 정렬해요. 좁아서 안 들어가면 알아서 접혀요. */
.hud-right {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: flex-end; gap: 2px 10px;
  flex: 0 0 auto; margin-left: auto;   /* 줄이 바뀌어도 항상 오른쪽에 붙어요 */
}
/* 🎛️ HUD 액션 버튼 — 세로로 쌓이면 헤더가 너무 길어져서 아래 한 줄로 빼요.
   좁은 화면에선 알아서 다음 줄로 넘어가요. */
.hud-acts {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.hud-acts .hud-battle { margin-top: 0; }

/* ---------- 자금 · 상점 ---------- */
.hud-money { font-size: 0.78rem; color: var(--accent); }
.bar-fill.stat.over { background: linear-gradient(90deg, #ffe29a, #ffb84d); }
.shop-money { font-family: "Jua", sans-serif; color: var(--accent); font-size: 1.05rem; margin: 6px 0 12px; }
.shop-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 2px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.shop-item .si-emoji { font-size: 1.5rem; }
.shop-item .si-info { flex: 1; font-size: 0.8rem; color: var(--dim); line-height: 1.5; }
.shop-item .si-name { font-family: "Jua", sans-serif; color: var(--cream); font-size: 0.95rem; }
.shop-item.owned { opacity: 0.55; }

/* ---------- 스탯 뽑기 (캐릭터 생성) ---------- */
.roll-box {
  background: var(--bg2); border: 2px solid var(--line);
  border-radius: 16px; padding: 14px 10px 6px; margin-top: 14px; text-align: center;
}
.roll-box canvas { max-width: 100%; }
.roll-stars { font-size: 0.72rem; color: var(--dim); line-height: 1.8; margin: 4px 0 6px; }
.roll-box .btn-ghost { margin-top: 4px; }

/* ---------- 재능 각성 ---------- */
.awaken-btn { color: var(--accent); border-color: var(--accent); flex-shrink: 0; padding: 4px 8px; }
/* 상한까지 꽉 채워 각성 조건을 만족한 상태 */
.awaken-btn.ready { color: #ffe29a; border-color: #ffd166; background: rgba(255, 209, 102, .12); animation: awakenPulse 1.6s ease-in-out infinite; }
.stat-val.max { color: #ffd166; font-weight: 700; }
/* 상한 도달 — 훈련 버튼 자리를 각성 버튼이 대신해요 */
.action-btn.awaken-act {
  background: linear-gradient(180deg, #2b1f3f, #1d1630);
  border-color: #b48cff;
  color: #f0e6ff;
  animation: awakenPulse 1.8s ease-in-out infinite;
}
.action-btn.awaken-act .a-sub { color: #c9aaff; }
.action-btn.awaken-act:hover { border-color: #ffd166; }
@keyframes awakenPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(180, 140, 255, 0); }
  50% { box-shadow: 0 0 10px rgba(180, 140, 255, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .awaken-btn.ready, .action-btn.awaken-act { animation: none; }
}

/* ---------- 이적 (FA 제안 · 트레이드 협상) ---------- */
.team-str { font-size: .8rem; color: var(--sky); }
.offer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.offer {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  background: var(--field); border: 2px solid var(--line); border-radius: 12px;
  padding: 12px 14px; color: var(--text); text-align: left; cursor: pointer;
  font-family: inherit; transition: border-color .12s ease, transform .12s ease;
}
.offer:hover { border-color: var(--accent); transform: translateY(-1px); }
.offer:active { transform: scale(.99); }
.offer-team { font-family: "Jua", sans-serif; font-size: 1.05rem; color: var(--cream); }
.offer-stay { font-size: .68rem; color: var(--accent); background: rgba(255,209,102,.14); border-radius: 99px; padding: 1px 7px; }
.offer-str { grid-column: 1; font-size: .78rem; color: var(--dim); }
.offer-money { grid-column: 2; grid-row: 1 / span 2; font-family: "Jua", sans-serif; color: var(--accent); white-space: nowrap; }
/* 협상 게이지 */
.neg-gauge { margin-top: 10px; }
.neg-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--dim); margin-bottom: 4px; }
.neg-log {
  margin-top: 12px; background: rgba(0,0,0,.25); border-radius: 10px;
  padding: 8px 12px; font-size: .78rem; line-height: 1.7; color: var(--dim); text-align: left;
}
.neg-log div:first-child { color: var(--cream); }
/* 협상 카드는 설명이 붙어서 세로로 쌓아요 */
#move-actions .btn { display: flex; flex-direction: column; gap: 2px; align-items: center; }
#move-actions .btn .a-sub { font-size: .7rem; opacity: .75; }

/* ---------- 행동 피드백 (Fx.tap) ---------- */
/* 누르면 화면이 다시 그려져서 :active가 남지 않아요. 결과를 따로 알려줍니다. */
.fx-tap { animation: fxTap .6s ease-out; border-color: var(--accent) !important; }
@keyframes fxTap {
  0%   { transform: scale(.96); background: rgba(255, 209, 102, .30); }
  40%  { transform: scale(1.02); background: rgba(255, 209, 102, .16); }
  100% { transform: none; }
}
.fx-tap-bad { animation: fxTapBad .45s ease-out; border-color: #c8443c !important; }
@keyframes fxTapBad {
  0%,100% { transform: none; }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}
.fx-pop {
  position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 5;
  font-family: "Jua", sans-serif; font-size: .9rem; color: #1a1206;
  background: var(--accent); border-radius: 99px; padding: 3px 11px;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  animation: fxPop .8s ease-out forwards;
}
.fx-pop.bad { color: #fff; background: #c8443c; }
@keyframes fxPop {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(.8); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -155%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-tap, .fx-tap-bad, .fx-pop { animation-duration: .01ms; }
}

/* ---------- 광고 보상 팝업 · 보너스 슬롯 ---------- */
.ad-modal { min-width: 260px; }
.ad-modal-body { padding: 18px 8px; font-size: 1rem; color: var(--cream); line-height: 1.7; }
.ad-modal-body .ad-emoji { font-size: 2.4rem; margin-bottom: 6px; }
.action-btn.ad-slot { border-color: var(--accent); }
.action-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

/* ---------- 미니게임: 홀드 · 순서 기억 · 반응 속도 · 수싸움 ---------- */
.tm-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, rgba(255, 226, 154, .45), rgba(255, 209, 102, .7)); border-radius: 99px; }
.tm-hold-btn { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tm-hint { font-size: 0.8rem; color: var(--sky); margin-bottom: 10px; }
.tm-duel { display: flex; gap: 8px; }
.tm-duel .tm-duel-btn, .tm-duel .tm-seq-btn { flex: 1; margin: 0; padding: 12px 4px; font-size: 0.95rem; }
.tm-seq-show { font-size: 1.6rem; letter-spacing: 6px; text-align: center; margin: 8px 0 12px; min-height: 2.2rem; }
.tm-seq-btn { font-size: 1.2rem; }
.tm-seq-wrong { border-color: var(--accent2) !important; color: var(--accent2) !important; }
.tm-react-btn { transition: none; }
.tm-react-wait { filter: grayscale(0.8) brightness(0.7); }
.tm-react-go { animation: reactpulse 0.5s ease infinite; }
@keyframes reactpulse {
  0%, 100% { box-shadow: 0 4px 0 #b98e2f, 0 0 0 0 rgba(255, 209, 102, .7); }
  50% { box-shadow: 0 4px 0 #b98e2f, 0 0 0 10px rgba(255, 209, 102, 0); }
}
/* 조준 탭 (target) */
.tm-field { position: relative; height: 150px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tm-target { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0; border-radius: 50%; border: 2px solid var(--accent); background: rgba(0, 0, 0, 0.35); font-size: 1.4rem; line-height: 1; cursor: pointer; animation: tmPop 0.12s ease; }
.tm-target-hit { border-color: #6ee7a0; transform: scale(1.3); opacity: 0; transition: all 0.13s; }
.tm-target-miss { border-color: var(--accent2); opacity: 0; transition: opacity 0.16s; }
@keyframes tmPop { from { transform: scale(0.4); } to { transform: scale(1); } }
/* 낙하 캐치 (drop) */
.tm-drop { position: relative; height: 150px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.15)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.tm-drop-band { position: absolute; left: 0; right: 0; background: rgba(110, 231, 160, 0.28); }
.tm-drop-perfect { position: absolute; left: 0; right: 0; background: var(--accent); opacity: 0.5; }
.tm-drop-icon { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); font-size: 1.7rem; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
/* 다른 그림 찾기 (odd) */
.tm-odd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 220px; margin: 0 auto; }
.tm-odd-cell { padding: 10px 0; font-size: 1.4rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; }
.tm-odd-hit { border-color: #6ee7a0 !important; }
.ad-box { margin-top: 16px; min-height: 0; }

.auto-toggle { display: block; font-size: 0.8rem; color: var(--dim); margin: -2px 0 10px; cursor: pointer; }
.auto-toggle input { accent-color: var(--accent); }

/* ---------- 하단 띠 배너 (콘텐츠 맨 아래 일반 배치) ---------- */
.ad-anchor {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  min-height: 60px;
}

/* ---------- 이어하기 선수 선택 ---------- */
.slot-modal { width: min(360px, 92vw); }
.slot-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; margin: 4px 0 6px; }
.slot-row { display: flex; gap: 6px; align-items: stretch; }
.slot-go {
  flex: 1; display: flex; align-items: center; gap: 10px; text-align: left;
  background: linear-gradient(180deg, var(--bg2), var(--field));
  border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px;
  color: var(--text); cursor: pointer; min-width: 0;
}
.slot-go:hover { border-color: var(--accent); }
.slot-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.slot-emoji { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: rgba(0, 0, 0, .25); }
.slot-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slot-info b { font-size: 1rem; color: var(--accent); }
.slot-info span { font-size: .74rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-info .slot-date { font-size: .66rem; }
.slot-del {
  width: 42px; border: 2px solid var(--line); border-radius: 12px;
  background: transparent; color: var(--dim); cursor: pointer; flex-shrink: 0;
}
.slot-del:hover { border-color: var(--accent2); color: var(--accent2); }

/* ---------- 타이틀 플레이어 수 ---------- */
.title-count { font-size: .85rem; color: var(--sky); margin: -18px 0 20px; }
.title-count b { color: var(--accent); }

/* 🧬 명예의 전당 세대 표기 (환생으로 이어받은 세대) */
.hof-gen {
  display: inline-block; padding: 1px 6px; border-radius: 99px;
  background: rgba(160,120,255,.18); color: #c9aaff;
  font-size: 0.68rem; vertical-align: middle;
}

/* 랭킹·명예의 전당 — 더 보기 / 내 순위 고정 */
.rank-title .rank-total { font-family: "Gowun Dodum", sans-serif; font-size: .78rem; color: var(--dim); margin-left: 6px; }
.rank-more { display: block; width: 100%; margin-top: 10px; }
.hof-gap { text-align: center; color: var(--dim); letter-spacing: 4px; padding: 6px 0; }
.rank-table .hof-gap-row td { text-align: center; color: var(--dim); letter-spacing: 4px; padding: 4px 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ❓ 도움말 모달 — .av-modal 위에 얹어 본문만 읽기 좋게 만들어요 */
.help-modal { width: 420px; max-width: 92vw; text-align: left; }
.help-body { max-height: 62vh; overflow-y: auto; padding: 2px 2px 6px; }
.help-sec { margin-bottom: 14px; }
.help-sec:last-child { margin-bottom: 4px; }
.help-sec h4 { font-size: .92rem; color: var(--cream); margin-bottom: 4px; font-weight: 400; font-family: "Jua", sans-serif; }
.help-sec p { font-size: .82rem; color: var(--dim); line-height: 1.65; }