:root {
  --bg: #0a0f0d;
  --bg-soft: #10171466;
  --bg-solid: #101714;
  --card: #141d19;
  --card-hover: #1a2620;
  --line: #22322b;
  --text: #e9f2ec;
  --text-dim: #93a89c;
  --text-faint: #5c6f64;
  --accent: #34d399;
  --accent-deep: #10b981;
  --gold: #fbbf24;
  --gold-deep: #d97706;
  --danger: #f4536e;
  --purple: #a78bfa;
  --radius: 16px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

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

html { color-scheme: dark; }

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(52, 211, 153, 0.12), transparent 60%),
    radial-gradient(800px 420px at 5% 110%, rgba(251, 191, 36, 0.08), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

/* ---------- topbar / footer ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 15, 13, 0.82);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: inherit;
}

.logo-emoji { font-size: 24px; }

.topbar-tag {
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-solid);
}

main#app {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 40px) 60px;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 20px clamp(16px, 4vw, 40px);
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
}

.footer-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.footer-link:hover { text-decoration: underline; }
.footer-dim { opacity: 0.5; margin-top: 4px; }

/* ---------- 공통 ---------- */
.grad {
  background: linear-gradient(90deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn {
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  padding: 13px 30px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  color: #04140d;
  box-shadow: 0 6px 24px rgba(52, 211, 153, 0.3);
}

.btn-gold {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  color: #1d1102;
  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.28);
}

.btn-ghost {
  background: var(--bg-solid);
  border: 1px solid var(--line);
  color: var(--text);
}

.btn-ghost:hover { border-color: var(--accent); }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.stage {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}

.stage-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  text-align: center;
}

.big { font-size: clamp(28px, 5.5vw, 44px); font-weight: 900; letter-spacing: -0.02em; }
.sub { font-size: 15px; color: var(--text-dim); }

/* ---------- 인트로 ---------- */
.hero { text-align: center; padding: clamp(10px, 3vw, 30px) 0 10px; }

.hero .lab-seal { font-size: 64px; filter: drop-shadow(0 0 24px rgba(52, 211, 153, 0.45)); }

.hero h1 {
  font-size: clamp(28px, 5.5vw, 46px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-top: 10px;
}

.hero p {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: clamp(14px, 2vw, 16.5px);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.intro-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0 6px;
}

.intro-step {
  background: var(--bg-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
}

.today-record {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-dim);
}

.disclaimer {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------- 진행 헤더 ---------- */
.room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-solid);
}

.room-title { font-size: 17px; font-weight: 800; }

.room-progress { display: flex; gap: 6px; }

.room-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.room-dot.done { background: var(--accent); }
.room-dot.now { background: var(--gold); box-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }

.quit-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.quit-btn:hover { color: var(--text-dim); }

/* ---------- 동전 ---------- */
.coin {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 55%, var(--gold-deep));
  color: #5c3b00;
  box-shadow: 0 8px 30px rgba(251, 191, 36, 0.35), inset 0 -4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease;
}

.coin:active { transform: scale(0.95); }

.coin.tails {
  background: radial-gradient(circle at 35% 30%, #d9e2ec, #9fb2c8 55%, #64748b);
  color: #1e293b;
}

.coin.spinning { animation: coinspin 0.38s linear; }

@keyframes coinspin {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(1080deg); }
}

.flip-tally {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 30px;
}

.flip-tally span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.flip-tally .h { background: rgba(251, 191, 36, 0.2); color: var(--gold); border: 1px solid rgba(251, 191, 36, 0.5); }
.flip-tally .t { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.4); }

/* ---------- 주사위 ---------- */
.dice-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: clamp(46px, 9vw, 64px);
  line-height: 1;
  min-height: 70px;
}

.dice-row .die { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)); }

.dice-row .die.rolling { animation: jiggle 0.12s infinite; }

@keyframes jiggle {
  0% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
  100% { transform: rotate(-8deg); }
}

/* ---------- 카드 ---------- */
.card-fan {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: min(480px, 92%);
}

.pcard {
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  cursor: pointer;
  perspective: 500px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.pcard-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.3, 1.2, 0.4, 1);
}

.pcard.flipped .pcard-inner { transform: rotateY(180deg); }

.pcard-face {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pcard-back {
  background:
    repeating-linear-gradient(45deg, rgba(52, 211, 153, 0.18) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #14352a, #0d241c);
  border: 1px solid rgba(52, 211, 153, 0.4);
  font-size: 20px;
}

.pcard:hover:not(.flipped) .pcard-inner { transform: translateY(-4px); }

.pcard-front {
  background: #f4f6f8;
  color: #111;
  border: 1px solid #cbd5e1;
  transform: rotateY(180deg);
  font-weight: 900;
}

.pcard-front .rank { font-size: clamp(16px, 3.4vw, 24px); line-height: 1.1; }
.pcard-front .suit { font-size: clamp(14px, 3vw, 22px); }
.pcard-front.red { color: #dc2626; }

/* ---------- 슬롯 ---------- */
.slot-box {
  display: flex;
  gap: 10px;
  background: linear-gradient(180deg, #1b2620, #101714);
  border: 2px solid var(--gold-deep);
  border-radius: 16px;
  padding: 18px;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 30px rgba(251, 191, 36, 0.12);
}

.reel {
  width: clamp(70px, 16vw, 92px);
  height: clamp(80px, 18vw, 104px);
  background: #f8fafc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(38px, 9vw, 54px);
  overflow: hidden;
}

.reel.spin { animation: reelblur 0.09s infinite; }

@keyframes reelblur {
  0% { filter: blur(0); transform: translateY(-3px); }
  50% { filter: blur(2px); transform: translateY(3px); }
  100% { filter: blur(0); transform: translateY(-3px); }
}

.slot-score {
  font-size: 15px;
  color: var(--text-dim);
  display: flex;
  gap: 20px;
}

.slot-score b { color: var(--gold); font-size: 18px; }

.slot-log { font-size: 14px; min-height: 22px; font-weight: 700; }

/* ---------- 로또 ---------- */
.lotto-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  width: min(460px, 94%);
}

.lball {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-solid);
  color: var(--text-dim);
  font-family: inherit;
  font-size: clamp(11px, 2.4vw, 14px);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s ease;
}

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

.lball.picked {
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%);
  color: #5c3b00;
  border-color: transparent;
  font-weight: 900;
}

.my-nums {
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
}

.my-nums span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%);
  color: #5c3b00;
}

.lotto-sim {
  width: min(440px, 92%);
  background: var(--bg-solid);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  text-align: left;
  font-size: 14.5px;
}

.lotto-sim .week { font-size: 13px; color: var(--text-faint); }
.lotto-sim .money-row { display: flex; justify-content: space-between; margin-top: 6px; }
.lotto-sim .money-row b.minus { color: var(--danger); }
.lotto-sim .money-row b.plus { color: var(--accent); }

.lotto-hits { margin-top: 10px; font-size: 13.5px; color: var(--text-dim); line-height: 1.9; }

/* ---------- 방 결과 ---------- */
.room-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: rise 0.4s ease;
}

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

.odds-pill {
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: var(--purple);
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
}

/* ---------- 리포트 ---------- */
.report { padding: clamp(24px, 4vw, 40px) clamp(18px, 4vw, 36px); display: flex; flex-direction: column; align-items: center; gap: 18px; }

.report-grade { font-size: 60px; }

.report-score {
  font-size: clamp(48px, 9vw, 72px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.report-score small { font-size: 0.34em; color: var(--text-dim); font-weight: 700; }

.report-label { font-size: 20px; font-weight: 900; }

.report-sub { font-size: 14px; color: var(--text-dim); max-width: 420px; text-align: center; }

.gauge {
  width: min(440px, 90%);
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #3d1a24, #313a2c 40%, #14532d);
  position: relative;
}

.gauge .needle {
  position: absolute;
  top: -6px;
  width: 4px;
  height: 26px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  transform: translateX(-50%);
  transition: left 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gauge-labels {
  width: min(440px, 90%);
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-faint);
}

.report-rows { width: min(520px, 100%); display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }

.rrow {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  background: var(--bg-solid);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 14px;
}

.rrow .remoji { font-size: 20px; }
.rrow .rname { font-weight: 700; }
.rrow .rdetail { color: var(--text-dim); font-size: 12.5px; }

.rrow .rbar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.rrow .rbar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--gold));
  border-radius: 3px;
}

.rrow .rpct { font-weight: 900; color: var(--accent); white-space: nowrap; }

.rare-callout {
  width: min(520px, 100%);
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  text-align: center;
}

.rare-callout b { color: var(--purple); }

/* ---------- 토스트 ---------- */
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #16241d;
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
  box-shadow: var(--shadow);
}

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

/* ---------- 홈 대시보드 ---------- */
.hero-compact { padding-bottom: 6px; }
.hero-compact h1 { font-size: clamp(24px, 4.5vw, 36px); }
.hero-compact p { font-size: clamp(13px, 1.8vw, 15px); margin-top: 8px; }

.summary-card {
  margin: 20px 0 18px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(251, 191, 36, 0.06));
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: var(--radius);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.summary-main { display: flex; align-items: center; gap: 16px; text-align: left; }

.exp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.exp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.exp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(52, 211, 153, 0.55);
  background: var(--card-hover);
}

.exp-card.done { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.05); }

.exp-top { display: flex; align-items: center; gap: 9px; }
.exp-emoji { font-size: 24px; }
.exp-name { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; flex: 1; }
.exp-check { color: var(--accent); font-weight: 900; font-size: 15px; }
.exp-desc { font-size: 12.5px; color: var(--text-dim); flex: 1; }

.exp-today {
  font-size: 12.5px;
  color: var(--text-dim);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.exp-today b { color: var(--accent); font-weight: 800; }
.exp-none { color: var(--text-faint); }
.exp-retry { color: var(--text-faint); white-space: nowrap; }
.exp-card:hover .exp-retry { color: var(--accent); }

.hist-section {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.hist-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 14.5px; }

.mini-hist {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 90px;
}

.hbar {
  flex: 1;
  max-width: 44px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.hbar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--gold), var(--accent-deep));
  min-height: 4px;
  opacity: 0.85;
}

.hbar:last-child .hbar-fill { opacity: 1; box-shadow: 0 0 12px rgba(52, 211, 153, 0.4); }
.hbar-label { font-size: 10.5px; color: var(--text-faint); }

.home-foot {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-foot .disclaimer { margin: 0; font-size: 12.5px; color: var(--text-faint); }

.home-reset {
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.home-reset:hover { color: var(--danger); }

/* ---------- 가위바위보 ---------- */
.rps-opp {
  font-size: 74px;
  line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

.rps-opp.thinking { animation: jiggle 0.16s infinite; }

.rps-log { font-size: 16px; font-weight: 700; min-height: 26px; }

.rps-hands { display: flex; gap: 12px; }

.rps-btn {
  font-family: inherit;
  background: var(--bg-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 20px 10px;
  font-size: 36px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.rps-btn span { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.rps-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
.rps-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- 행운 상자 ---------- */
.box-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.gift {
  font-family: inherit;
  width: clamp(64px, 13vw, 84px);
  height: clamp(64px, 13vw, 84px);
  font-size: clamp(30px, 6.5vw, 42px);
  background: var(--bg-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.13s ease, border-color 0.13s ease, opacity 0.2s ease;
}

.gift:hover:not(:disabled) { transform: translateY(-4px) scale(1.05); border-color: var(--gold); }
.gift.picked { border-color: var(--gold); box-shadow: 0 0 22px rgba(251, 191, 36, 0.45); transform: scale(1.12); }
.gift.faded { opacity: 0.35; }

/* ---------- 가챠 ---------- */
.gacha-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: min(420px, 92%);
}

.gcell {
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--bg-solid);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 6vw, 36px);
}

.gcell.revealed { animation: pop 0.25s ease; }

@keyframes pop {
  from { transform: scale(0.4); }
  to { transform: scale(1); }
}
.gcell.g-n { opacity: 0.55; }
.gcell.g-r { border-color: rgba(52, 211, 153, 0.55); }
.gcell.g-sr { border-color: var(--gold); box-shadow: 0 0 14px rgba(251, 191, 36, 0.4); }
.gcell.g-ssr {
  border-color: var(--purple);
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.65);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05));
}

/* ---------- 강화 ---------- */
.enh-sword {
  font-size: 84px;
  line-height: 1;
  transition: filter 0.3s ease;
}

.enh-sword.enh-hammering { animation: hammering 0.16s infinite; }

@keyframes hammering {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(3px); }
}

.enh-sword.enh-flash { animation: enhflash 0.6s ease; }

@keyframes enhflash {
  0% { transform: scale(1); }
  30% { transform: scale(1.35) rotate(8deg); }
  100% { transform: scale(1); }
}

.enh-sword.enh-shake { animation: shake 0.4s ease; }

.enh-level {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--gold);
}

.enh-log { font-size: 15px; font-weight: 700; min-height: 24px; }

.enh-opts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.enh-btn {
  font-family: inherit;
  background: var(--bg-solid);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 18px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  transition: transform 0.12s ease, border-color 0.12s ease;
  min-width: 118px;
}

.enh-btn:hover:not(:disabled) { transform: translateY(-3px); }
.enh-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.enh-btn .enh-badge {
  font-size: 12.5px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
}

.enh-btn.safe:hover:not(:disabled) { border-color: var(--accent); }
.enh-btn.safe .enh-badge { background: rgba(52, 211, 153, 0.14); color: var(--accent); }

.enh-btn.bold:hover:not(:disabled) { border-color: var(--gold); }
.enh-btn.bold .enh-badge { background: rgba(251, 191, 36, 0.14); color: var(--gold); }

.enh-btn.yolo:hover:not(:disabled) { border-color: var(--danger); }
.enh-btn.yolo .enh-badge { background: rgba(244, 83, 110, 0.14); color: var(--danger); }

/* ---------- 지뢰 ---------- */
.mine-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  width: min(340px, 90%);
}

.mtile {
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--bg-solid);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: clamp(18px, 4.5vw, 26px);
  font-family: inherit;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.mtile:hover:not(.open) { border-color: var(--accent); transform: scale(1.06); }
.mtile.open { cursor: default; }
.mtile.safe { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); }
.mtile.boom { background: rgba(244, 83, 110, 0.15); border-color: var(--danger); animation: shake 0.3s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- 반응형 ---------- */
@media (max-width: 560px) {
  .topbar-tag { display: none; }
  .card-fan { grid-template-columns: repeat(4, 1fr); }
  .lotto-grid { grid-template-columns: repeat(9, 1fr); }
  .rrow { font-size: 13px; }
  .exp-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .summary-card { flex-direction: column; align-items: stretch; text-align: center; }
  .summary-main { justify-content: center; }
  .rps-btn { padding: 10px 14px 8px; font-size: 30px; }
}