@import "tailwindcss";

:root {
  --bg: #14171c; /* 차콜 다크 */
  --bg2: #1b1f26;
  --mint: #85fca8; /* CTA 버튼 */
  --mint-ink: #0a2417; /* 민트 버튼 위 텍스트 */
  --green: #4affa0; /* 글로우/액센트 (포인트 컬러) */

  --sheet: #f2f3ef; /* 레이어드 화이트 시트 */
  --sheet-card: #ffffff;
  --ink: #14171c; /* 화이트 위 텍스트 */
  --ink-muted: #79808c;
  --line-d: #2b313c; /* 다크 보더 */
  --line-l: #e3e5df; /* 라이트 보더 */

  /* 상금 카드 — 골드 대신 민트/틸그린 쿨 톤 */
  --gold-border: #5ef0b4; /* 민트 액센트 */
  --gold-bg: #0e1f1b; /* 딥 틸그린 */
  --gold-btn-1: #85fca8; /* 민트 */
  --gold-btn-2: #15a99b; /* 틸그린 */

  --gpt: #15a99b; /* 틸그린 (teal green) */
  --claude: #e8814a;
  --gemini: #5b8cff;

  --share: #a65eff; /* 공유/바이럴 액션 (ADO2 브랜드 포인트 퍼플) */
}

* {
  box-sizing: border-box;
}

html,
body {
  background:
    radial-gradient(120% 50% at 50% -5%, #20302a 0%, var(--bg) 48%) no-repeat,
    var(--bg);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family:
    "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  margin: 0;
}

.shell {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

/* Triple Pick 2026 타이틀용 Impact */
.font-impact {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui,
    sans-serif;
  letter-spacing: 0.5px;
}

.flag-img {
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-d);
}

/* 레이어드 화이트 시트 */
.sheet {
  background: var(--sheet);
  border-radius: 22px;
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.5);
}

/* 코너 브래킷 (HUD) */
.bracket {
  position: relative;
}
.bracket > .bk {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--green);
}
.bracket > .bk-tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}
.bracket > .bk-tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 6px;
}
.bracket > .bk-br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}
.bracket > .bk-bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 6px;
}

.vs-glow {
  background: radial-gradient(
    closest-side,
    rgba(74, 255, 160, 0.5),
    rgba(74, 255, 160, 0) 70%
  );
}

.btn-mint {
  background: var(--mint);
  color: var(--mint-ink);
  box-shadow:
    0 0 0 1px rgba(133, 252, 168, 0.55),
    0 10px 28px rgba(133, 252, 168, 0.28);
}

.gold-card {
  background:
    linear-gradient(180deg, rgba(94, 240, 180, 0.08), rgba(21, 169, 155, 0.03)),
    var(--gold-bg);
  border: 1px solid rgba(94, 240, 180, 0.45);
  box-shadow: inset 0 0 24px rgba(94, 240, 180, 0.06);
}
.gold-btn {
  background: linear-gradient(180deg, var(--gold-btn-1), var(--gold-btn-2));
  color: #06231a;
  box-shadow: 0 6px 18px rgba(21, 169, 155, 0.3);
}

@keyframes barfill {
  from {
    width: 0;
  }
}
.bar-anim {
  animation: barfill 0.8s ease-out;
}