/* ============================================================
   굴려굴려 — golf.css (v20260518_1)
   네온 미니골프 — DUO 다크 톤 + 네온 글로우
   비주얼 폴리시: 시그니처 트레일, 글로우 벽, 시네마틱 인트로/홀인
============================================================ */

:root{
  --gf-bg-0: #050814;
  --gf-bg-1: #0a0e1a;
  --gf-bg-2: #11142b;
  --gf-bg-grad: radial-gradient(ellipse at 50% -20%, #182040 0%, #0a0e1a 55%, #050814 100%);
  --gf-fg: #e8ecff;
  --gf-fg-muted: #8a90b8;
  --gf-line: rgba(140, 160, 220, 0.12);

  --gf-cyan:    #00e5ff;
  --gf-magenta: #ff3df0;
  --gf-lime:    #b6ff3d;
  --gf-yellow:  #ffe24d;
  --gf-pink:    #ff6aa8;
  --gf-violet:  #9d6dff;
  --gf-green:   #3dffa0;

  --gf-glow-cyan:    0 0 12px rgba(0, 229, 255, 0.55), 0 0 30px rgba(0, 229, 255, 0.28);
  --gf-glow-magenta: 0 0 12px rgba(255, 61, 240, 0.55), 0 0 30px rgba(255, 61, 240, 0.28);
  --gf-glow-lime:    0 0 12px rgba(182, 255, 61, 0.55), 0 0 30px rgba(182, 255, 61, 0.28);

  --gf-r-card: 18px;
  --gf-r-btn:  14px;
}

body { background: var(--gf-bg-grad); color: var(--gf-fg); }

/* ============== Page shell ============== */
.gf-page-shell{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr) minmax(0, 160px);
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
  min-height: calc(100vh - 56px);
}
.gf-side-ad{ min-height: 600px; }
@media (max-width: 1100px){
  .gf-page-shell{ grid-template-columns: 1fr; padding: 8px; }
  .gf-side-ad{ display:none; }
}

.gf-app{
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* ============== Screen switching ============== */
.gf-screen{ display:none; }
.gf-screen.active{ display:flex; flex-direction:column; gap:12px; }

/* ============== SETUP ============== */
.gf-setup{
  margin-top: 24px;
  padding: 28px 22px 32px;
  background: linear-gradient(180deg, rgba(20, 24, 50, 0.6), rgba(10, 14, 26, 0.4));
  border: 1px solid rgba(140, 160, 220, 0.12);
  border-radius: var(--gf-r-card);
  backdrop-filter: blur(8px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gf-setup::before{
  content:""; position:absolute; inset:-1px;
  border-radius: var(--gf-r-card);
  background: linear-gradient(120deg, rgba(0,229,255,0.18), transparent 35%, rgba(182,255,61,0.18) 75%, transparent);
  z-index:-1; filter: blur(20px); opacity:0.6;
}
.gf-setup-emoji{
  font-size: 56px; line-height:1; margin-bottom: 8px;
  filter: drop-shadow(0 0 16px rgba(0,229,255,0.45));
  animation: gf-emoji-bob 2.5s ease-in-out infinite;
}
@keyframes gf-emoji-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.gf-setup-title{
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #00e5ff, #b6ff3d 60%, #ffe24d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(0,229,255,0.25);
}
.gf-setup-sub{ color: var(--gf-fg-muted); margin-top: 6px; font-size: 14px; }

.gf-stage-preview{
  margin: 18px auto 4px;
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 20px; color: var(--gf-fg);
  opacity: 0.85;
}
.gf-stage-preview span:nth-child(2n){ color: var(--gf-fg-muted); font-size: 14px; }

.gf-setup-input{
  display: block; margin: 18px auto 0; width: min(280px, 90%);
  padding: 12px 14px; background: rgba(10, 14, 26, 0.7);
  border: 1px solid rgba(140, 160, 220, 0.2);
  border-radius: var(--gf-r-btn); color: var(--gf-fg); font-size: 15px;
  text-align: center; outline: none; transition: border-color .15s, box-shadow .15s;
}
.gf-setup-input:focus{ border-color: var(--gf-cyan); box-shadow: 0 0 0 3px rgba(0,229,255,0.18); }

.gf-setup-btn{
  display: block; margin: 18px auto 0;
  padding: 16px 28px; min-width: 240px;
  background: linear-gradient(90deg, #00e5ff 0%, #b6ff3d 100%);
  border: none; border-radius: var(--gf-r-btn);
  color: #050814; font-size: 17px; font-weight: 800; letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.4), 0 8px 24px rgba(182, 255, 61, 0.25);
  transition: transform .12s, box-shadow .15s;
}
.gf-setup-btn:hover{ transform: translateY(-1px); box-shadow: 0 0 36px rgba(0,229,255,0.55), 0 10px 30px rgba(182,255,61,0.35); }
.gf-setup-btn:active{ transform: translateY(0); }
.gf-setup-btn-multi{
  margin-top: 10px !important;
  /* 솔로 시작과 동일한 시안→라임 톤으로 통일 (사용자 요청) */
  background: linear-gradient(90deg, #00e5ff 0%, #b6ff3d 100%) !important;
  color: #050814 !important;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.4), 0 8px 24px rgba(182, 255, 61, 0.25) !important;
}
.gf-setup-btn-multi:hover{
  box-shadow: 0 0 36px rgba(0, 229, 255, 0.55), 0 10px 30px rgba(182, 255, 61, 0.35) !important;
  color: #050814 !important;
}
.gf-setup-btn-multi-secondary{
  margin-top: 8px !important;
  background: rgba(20, 24, 50, 0.75) !important;
  color: var(--gf-fg) !important;
  border: 1px solid rgba(0, 229, 255, 0.4) !important;
  box-shadow: none !important;
}
.gf-setup-btn-multi-secondary:hover{
  background: rgba(30, 34, 70, 0.85) !important;
  border-color: var(--gf-cyan, #00e5ff) !important;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.3) !important;
  color: var(--gf-fg) !important;
}

/* ============== Mode tabs (setup) ============== */
.gf-mode-tabs{
  display: flex; gap: 8px; justify-content: center;
  margin: 14px 0 6px;
  flex-wrap: wrap;
}
.gf-mode-tab{
  padding: 10px 18px;
  background: rgba(20,24,50,0.55);
  border: 1px solid rgba(140,160,220,0.18);
  color: var(--gf-fg-muted);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.gf-mode-tab:hover{ color: var(--gf-fg); border-color: rgba(0,229,255,0.45); }
.gf-mode-tab.active{
  color: #0a0e1a;
  background: linear-gradient(90deg, #00e5ff, #b6ff3d);
  border-color: transparent;
  box-shadow: 0 0 18px rgba(0,229,255,0.45);
}
/* 어려움 모드 활성 시 — 위험 톤 (빨강·주황) + 미세 펄스 */
.gf-mode-tab[data-mode="hard"].active{
  background: linear-gradient(90deg, #ff3d3d, #ffa53d);
  color: #1a0a0a;
  animation: gf-hard-pulse 2.4s ease-in-out infinite;
}
@keyframes gf-hard-pulse{
  0%, 100%{ box-shadow: 0 0 16px rgba(255,61,61,0.45), 0 0 28px rgba(255,165,61,0.22); }
  50%    { box-shadow: 0 0 28px rgba(255,61,61,0.75), 0 0 48px rgba(255,165,61,0.45); }
}

/* 모드 설명 — 탭 아래 한 줄 */
.gf-mode-desc{
  margin: 6px auto 2px;
  font-size: 12px;
  color: var(--gf-fg-muted);
  letter-spacing: 0.02em;
  text-align: center;
  min-height: 16px;
  transition: color .2s;
}
.gf-mode-desc.hard{
  color: #ff8a5e;
  font-weight: 600;
}
/* 좁은 화면 — 모드 탭 wrap 방지 */
@media (max-width: 380px){
  .gf-mode-tab{ padding: 9px 12px; font-size: 13px; }
}

/* ============== Best Record (setup screen) ============== */
.gf-best-record{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 14px auto 0;
  padding: 8px 16px;
  background: rgba(255, 226, 77, 0.08);
  border: 1px solid rgba(255, 226, 77, 0.32);
  border-radius: 999px;
  font-size: 13px;
}
.gf-best-record.hidden{ display: none; }
.gf-best-label{ font-size: 11px; color: var(--gf-fg-muted); letter-spacing: 0.1em; font-weight: 700; }
.gf-best-grade{
  font-size: 18px; font-weight: 900;
  background: linear-gradient(135deg, #ff3df0, #ffe24d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(255, 226, 77, 0.35);
}
.gf-best-meta{ color: var(--gf-fg); font-variant-numeric: tabular-nums; }

/* New-best 배지 (result screen) */
.gf-new-best{
  display: inline-block;
  margin: 8px auto 4px;
  padding: 6px 14px;
  background: linear-gradient(90deg, #ff3df0, #ffe24d);
  color: #050814;
  font-size: 13px; font-weight: 900; letter-spacing: 0.1em;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255, 226, 77, 0.5);
  animation: gf-newbest-pop 0.8s cubic-bezier(.18,.89,.44,1.18);
}
.gf-new-best.hidden{ display: none; }
@keyframes gf-newbest-pop{
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.gf-rules{
  margin: 24px auto 0; max-width: 360px; text-align: left;
  font-size: 13px; color: var(--gf-fg-muted);
  background: rgba(10,14,26,0.4);
  border: 1px solid rgba(140,160,220,0.1);
  border-radius: 12px;
  padding: 12px 16px;
}
.gf-rules-title{ color: var(--gf-cyan); font-size: 12px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.05em; }
.gf-rules ul{ margin: 0; padding-left: 18px; }
.gf-rules li{ margin: 4px 0; line-height: 1.5; }

/* ============== PLAY HUD ============== */
.gf-hud{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(20,24,50,0.65), rgba(10,14,26,0.4));
  border: 1px solid rgba(140,160,220,0.12);
  border-radius: 14px;
}
.gf-hud-left{ justify-self: start; display:flex; gap: 18px; }
.gf-hud-right{ justify-self: end; display: flex; gap: 6px; }
.gf-hud-center{ justify-self: center; }

.gf-hud-block{ display:flex; flex-direction:column; align-items:flex-start; }
.gf-hud-label{ font-size: 10px; color: var(--gf-fg-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.gf-hud-value{ font-size: 20px; font-weight: 800; color: var(--gf-fg); font-variant-numeric: tabular-nums; }
.gf-hud-value.gf-pulse{
  display: inline-block;
  transform-origin: left center;
  animation: gf-stroke-pulse 0.42s cubic-bezier(.18,.89,.44,1.18);
}
@keyframes gf-stroke-pulse{
  0%   { transform: scale(1);    color: var(--gf-fg);     text-shadow: none; }
  35%  { transform: scale(1.32); color: var(--gf-yellow); text-shadow: 0 0 14px rgba(255,226,77,0.75); }
  100% { transform: scale(1);    color: var(--gf-fg);     text-shadow: none; }
}

.gf-hud-timer{ text-align: center; }
.gf-hud-time{
  font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--gf-cyan);
  text-shadow: 0 0 12px rgba(0,229,255,0.55);
}
.gf-hud-time.warning{ color: var(--gf-yellow); text-shadow: 0 0 12px rgba(255,226,77,0.6); }

.gf-icon-btn{
  width: 36px; height: 36px; padding: 0;
  background: rgba(20,24,50,0.6);
  border: 1px solid rgba(140,160,220,0.18);
  color: var(--gf-fg);
  border-radius: 10px;
  font-size: 18px; cursor: pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: all .12s;
}
.gf-icon-btn:hover{ border-color: var(--gf-cyan); color: var(--gf-cyan); box-shadow: 0 0 14px rgba(0,229,255,0.35); }

/* ============== Hole progress ============== */
.gf-progress{ padding: 0 4px; }
.gf-progress-track{
  position: relative;
  height: 6px;
  background: rgba(140,160,220,0.1);
  border-radius: 999px;
  overflow: visible;
}
.gf-progress-fill{
  position: absolute; top: 0; left: 0; height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00e5ff, #b6ff3d);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0,229,255,0.6);
  transition: width .5s cubic-bezier(.16,.84,.44,1);
}
.gf-progress-dots{
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
}
.gf-dot{
  width: 12px; height: 12px;
  background: var(--gf-bg-1);
  border: 2px solid rgba(140,160,220,0.3);
  border-radius: 50%;
  transition: all .2s;
}
.gf-dot.done{
  background: var(--gf-cyan);
  border-color: var(--gf-cyan);
  box-shadow: 0 0 10px rgba(0,229,255,0.7);
}
.gf-dot.current{
  background: var(--gf-magenta);
  border-color: var(--gf-magenta);
  box-shadow: 0 0 14px rgba(255,61,240,0.7);
  transform: scale(1.25);
}

/* ============== Stage / Canvas ============== */
.gf-stage{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4px 0 8px;
  min-height: 100px;
}

.gf-canvas{
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(0,229,255,0.08), 0 8px 24px rgba(0,0,0,0.4);
}

/* ============== Hole intro 시네마틱 ============== */
.gf-hole-intro{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
}
.gf-hole-intro.hidden{ display: none; }
.gf-hole-intro-bg{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,14,26,0.55), rgba(5,8,20,0.85));
  backdrop-filter: blur(2px);
  animation: gf-intro-bg 1.4s ease-out forwards;
}
@keyframes gf-intro-bg{
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
.gf-hole-intro-content{
  position: relative;
  text-align: center;
  animation: gf-intro-pop 1.4s cubic-bezier(.18,.89,.44,1.18) forwards;
}
@keyframes gf-intro-pop{
  0%   { transform: scale(0.7) translateY(20px); opacity: 0; }
  18%  { transform: scale(1.05) translateY(0); opacity: 1; }
  28%  { transform: scale(1); }
  78%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15) translateY(-10px); opacity: 0; }
}
.gf-hole-intro-num{
  font-size: 14px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--gf-cyan);
  text-shadow: 0 0 14px rgba(0,229,255,0.7);
}
.gf-hole-intro-num span{ font-size: 18px; }
.gf-hole-intro-name{
  margin: 8px 0 6px;
  font-size: 44px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #00e5ff, #ff3df0 60%, #b6ff3d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(0,229,255,0.35);
}
.gf-hole-intro-par{
  font-size: 12px; font-weight: 700; letter-spacing: 0.25em;
  color: var(--gf-fg-muted);
}
.gf-hole-intro-par span{ color: var(--gf-yellow); font-size: 14px; text-shadow: 0 0 10px rgba(255,226,77,0.55); }

/* ============== Hole-in 오버레이 ============== */
.gf-round-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(10,14,26,0.45), rgba(5,8,20,0.78));
  animation: gf-roundbg 1.6s ease-out forwards;
}
.gf-round-overlay.hidden{ display: none; }
@keyframes gf-roundbg{
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
.gf-round-card{
  text-align: center;
  padding: 28px 36px;
  background: linear-gradient(180deg, rgba(20,24,50,0.92), rgba(10,14,26,0.88));
  border: 1px solid rgba(0,229,255,0.45);
  border-radius: 18px;
  box-shadow: 0 0 50px rgba(0,229,255,0.35), 0 0 90px rgba(182,255,61,0.18);
  animation: gf-roundcard 1.6s cubic-bezier(.18,.89,.44,1.18) forwards;
}
@keyframes gf-roundcard{
  0%   { transform: scale(0.6) translateY(20px); opacity: 0; }
  18%  { transform: scale(1.08); opacity: 1; }
  28%  { transform: scale(1); }
  82%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1) translateY(-12px); opacity: 0; }
}
.gf-round-badge{
  font-size: 14px; font-weight: 800; letter-spacing: 0.35em;
  color: var(--gf-lime);
  text-shadow: 0 0 18px rgba(182,255,61,0.7);
}
.gf-round-strokes{
  margin: 12px 0 4px;
  font-size: 56px; font-weight: 800;
  background: linear-gradient(90deg, #00e5ff, #b6ff3d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 32px rgba(0,229,255,0.5);
}
.gf-round-strokes-unit{ font-size: 24px; -webkit-text-fill-color: var(--gf-fg-muted); }
.gf-round-rank{
  font-size: 18px; font-weight: 800; letter-spacing: 0.15em;
  color: var(--gf-yellow);
  text-shadow: 0 0 12px rgba(255,226,77,0.6);
  margin-bottom: 10px;
}
.gf-round-rank.eagle{ color: var(--gf-magenta); text-shadow: 0 0 16px rgba(255,61,240,0.7); }
.gf-round-rank.birdie{ color: var(--gf-lime); text-shadow: 0 0 14px rgba(182,255,61,0.65); }
.gf-round-rank.par{ color: var(--gf-cyan); text-shadow: 0 0 12px rgba(0,229,255,0.6); }
.gf-round-rank.bogey{ color: var(--gf-yellow); }
.gf-round-rank.over{ color: var(--gf-fg-muted); text-shadow: none; }
.gf-round-next{ font-size: 13px; color: var(--gf-fg-muted); letter-spacing: 0.05em; }

/* ============== Tip strip ============== */
.gf-tip{
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  color: var(--gf-fg-muted);
  font-size: 12px; letter-spacing: 0.02em;
}
.gf-tip-icon{ filter: drop-shadow(0 0 8px rgba(0,229,255,0.45)); }
.gf-tip kbd{
  display: inline-block;
  padding: 2px 7px;
  background: rgba(10,14,26,0.8);
  border: 1px solid rgba(0,229,255,0.4);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--gf-cyan);
  font-size: 11px; font-weight: 800;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  line-height: 1;
  text-shadow: 0 0 6px rgba(0,229,255,0.4);
}
.gf-tip-sep{ opacity: 0.4; }

@media (max-width: 520px){
  .gf-tip-pc, .gf-tip-sep{ display: none; }
}

/* ============== Help overlay ============== */
.gf-help-overlay{
  position: fixed; inset: 0;
  background: rgba(5, 8, 20, 0.78);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2100;
  padding: 20px;
}
.gf-help-overlay.hidden{ display: none; }
.gf-help-card{
  max-width: 360px; width: 100%;
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, rgba(20,24,50,0.95), rgba(10,14,26,0.9));
  border: 1px solid rgba(0,229,255,0.4);
  border-radius: 18px;
  box-shadow: 0 0 50px rgba(0,229,255,0.3);
  text-align: center;
  animation: gf-card-in .25s cubic-bezier(.18,.89,.44,1.18);
}
@keyframes gf-card-in{
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.gf-help-title{
  font-size: 20px; font-weight: 800;
  background: linear-gradient(90deg, #00e5ff, #b6ff3d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.gf-help-list{ margin: 0 0 16px; padding: 0; list-style: none; text-align: left; }
.gf-help-list li{
  padding: 8px 12px; margin: 4px 0;
  background: rgba(10,14,26,0.6);
  border: 1px solid rgba(140,160,220,0.12);
  border-radius: 10px;
  font-size: 14px; color: var(--gf-fg);
}
.gf-help-list b{ color: var(--gf-cyan); }
.gf-help-tip{
  padding: 10px;
  background: rgba(0,229,255,0.08);
  border-radius: 10px;
  font-size: 12px; color: var(--gf-fg-muted);
  margin-bottom: 14px;
}
.gf-help-close{
  width: 100%; padding: 12px;
  background: linear-gradient(90deg, #00e5ff, #b6ff3d);
  border: none; border-radius: 12px;
  color: #050814; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 0 20px rgba(0,229,255,0.4);
}

/* ============== RESULT ============== */
.gf-result{
  margin-top: 18px;
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(20,24,50,0.6), rgba(10,14,26,0.4));
  border: 1px solid rgba(140,160,220,0.12);
  border-radius: var(--gf-r-card);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gf-result-grade-wrap{
  position: relative; display: inline-block; margin: 0 auto 8px;
}
.gf-result-grade{
  width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  font-size: 78px; font-weight: 900;
  background: linear-gradient(135deg, #00e5ff, #b6ff3d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 36px rgba(0,229,255,0.45);
  position: relative; z-index: 1;
  animation: gf-grade-in 0.6s cubic-bezier(.18,.89,.44,1.18) both;
}
@keyframes gf-grade-in{
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.gf-result-grade.s-grade{ background: linear-gradient(135deg, #ff3df0, #ffe24d); -webkit-background-clip: text; background-clip: text; }
.gf-result-grade.a-grade{ background: linear-gradient(135deg, #00e5ff, #b6ff3d); -webkit-background-clip: text; background-clip: text; }
.gf-result-grade.b-grade{ background: linear-gradient(135deg, #9d6dff, #00e5ff); -webkit-background-clip: text; background-clip: text; }
.gf-result-grade.c-grade{ background: linear-gradient(135deg, #8a90b8, #b6ff3d); -webkit-background-clip: text; background-clip: text; }

.gf-result-grade-glow{
  position: absolute; inset: -20px;
  background: radial-gradient(circle, rgba(0,229,255,0.35) 0%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
  animation: gf-glow-pulse 2s ease-in-out infinite;
}
@keyframes gf-glow-pulse{
  0%, 100%{ opacity: 0.7; }
  50%{ opacity: 1; }
}
.gf-result-title{
  font-size: 22px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--gf-fg);
  margin-bottom: 16px;
}
.gf-result-totals{
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.gf-result-total{ display: flex; flex-direction: column; align-items: center; }
.gf-result-total-label{ font-size: 11px; letter-spacing: 0.15em; color: var(--gf-fg-muted); text-transform: uppercase; }
.gf-result-total-value{
  font-size: 28px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gf-cyan);
  text-shadow: 0 0 14px rgba(0,229,255,0.5);
}

.gf-result-holes{
  display: flex; flex-direction: column; gap: 6px;
  max-width: 360px; margin: 0 auto 20px;
  /* 10홀 모드에서 너무 길어지면 스크롤 — viewport 비례 */
  max-height: min(40vh, 380px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 스크롤 시 페이드 마스킹 */
  mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
  padding-right: 4px;
}
/* 스크롤바 슬림하게 */
.gf-result-holes::-webkit-scrollbar{ width: 4px; }
.gf-result-holes::-webkit-scrollbar-thumb{ background: rgba(0,229,255,0.35); border-radius: 2px; }
.gf-result-holes::-webkit-scrollbar-track{ background: transparent; }
.gf-result-hole-row{
  display: grid; grid-template-columns: 50px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  /* 좌측 = 그 홀의 어센트 색 그라데이션 — 10홀 리스트에서 시각 변별성 */
  background: linear-gradient(90deg, var(--gf-row-tint, rgba(140,160,220,0.05)) 0%, rgba(10,14,26,0.55) 22%);
  border: 1px solid rgba(140,160,220,0.1);
  border-radius: 10px;
  font-size: 13px;
  text-align: left;
  transition: transform .12s, border-color .12s;
}
.gf-result-hole-row:hover{
  transform: translateX(2px);
  border-color: rgba(140,160,220,0.22);
}
.gf-result-hole-num{ color: var(--gf-fg-muted); font-weight: 700; letter-spacing: 0.1em; }
.gf-result-hole-name{
  color: var(--gf-fg); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gf-result-hole-strokes{ color: var(--gf-cyan); font-weight: 800; font-variant-numeric: tabular-nums; }
.gf-result-hole-rank{
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.1em;
}
.gf-result-hole-rank.eagle{ background: rgba(255,61,240,0.18); color: var(--gf-magenta); }
.gf-result-hole-rank.birdie{ background: rgba(182,255,61,0.18); color: var(--gf-lime); }
.gf-result-hole-rank.par{ background: rgba(0,229,255,0.18); color: var(--gf-cyan); }
.gf-result-hole-rank.bogey{ background: rgba(255,226,77,0.16); color: var(--gf-yellow); }
.gf-result-hole-rank.over{ background: rgba(140,160,220,0.14); color: var(--gf-fg-muted); }

.gf-result-actions{
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.gf-result-btn{
  padding: 12px 22px;
  background: rgba(20,24,50,0.7);
  border: 1px solid rgba(140,160,220,0.18);
  color: var(--gf-fg);
  border-radius: var(--gf-r-btn);
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
}
.gf-result-btn:hover{ border-color: var(--gf-cyan); color: var(--gf-cyan); box-shadow: 0 0 18px rgba(0,229,255,0.3); }
.gf-result-btn-primary{
  background: linear-gradient(90deg, #00e5ff, #b6ff3d);
  border: none; color: #050814;
  box-shadow: 0 0 24px rgba(0,229,255,0.4);
}
.gf-result-btn-primary:hover{ color: #050814; box-shadow: 0 0 32px rgba(0,229,255,0.55); }
.gf-result-btn-ghost{ background: rgba(10,14,26,0.4); }

/* ============== Mobile tweaks ============== */
@media (max-width: 520px){
  .gf-app{ padding: 0 4px; }
  .gf-setup{ margin-top: 12px; padding: 20px 16px; }
  .gf-setup-emoji{ font-size: 44px; }
  .gf-setup-title{ font-size: 24px; }
  .gf-hud-time{ font-size: 26px; }
  .gf-hud-value{ font-size: 18px; }
  .gf-hud-label{ font-size: 9px; }
  .gf-hole-intro-name{ font-size: 32px; }
  .gf-round-card{ padding: 22px 28px; }
  .gf-round-strokes{ font-size: 44px; }
  .gf-result-grade{ width: 100px; height: 100px; font-size: 60px; }
  .gf-result-total-value{ font-size: 22px; }
}

/* ============== Short viewport compact mode ============== */
/* 짧은 화면(작은 모바일 / 노트북 / 가로모드)에서 HUD를 컴팩트하게 */
@media (max-height: 760px){
  .gf-tip{ display: none; }
  .gf-app{ gap: 8px; }
  .gf-screen.active{ gap: 8px; }
}
@media (max-height: 640px){
  .gf-hud{ padding: 6px 12px; }
  .gf-hud-left{ gap: 14px; }
  .gf-hud-time{ font-size: 22px; }
  .gf-hud-value{ font-size: 16px; }
  .gf-hud-label{ font-size: 9px; letter-spacing: 0.08em; }
  .gf-icon-btn{ width: 32px; height: 32px; font-size: 16px; }
  .gf-progress{ padding: 0 2px; }
  .gf-progress-track{ height: 4px; }
  .gf-dot{ width: 10px; height: 10px; border-width: 1.5px; }
  .gf-stage{ padding: 2px 0 4px; }
  .gf-hole-intro-name{ font-size: 28px; }
  .gf-hole-intro-num{ font-size: 12px; }
}
@media (max-height: 540px){
  .gf-hud{ padding: 4px 10px; border-radius: 10px; }
  .gf-hud-time{ font-size: 18px; }
  .gf-hud-value{ font-size: 14px; }
  .gf-hud-label{ display: none; }
  .gf-icon-btn{ width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
  .gf-progress{ display: none; }
  .gf-hole-intro-name{ font-size: 22px; }
  .gf-round-card{ padding: 16px 22px; }
  .gf-round-strokes{ font-size: 32px; margin: 8px 0 2px; }
  .gf-round-rank{ font-size: 14px; margin-bottom: 6px; }
}

/* SETUP 화면도 짧은 viewport에서 fit */
@media (max-height: 720px){
  .gf-setup{ margin-top: 8px; padding: 18px 20px 20px; }
  .gf-setup-emoji{ font-size: 38px; margin-bottom: 4px; }
  .gf-setup-title{ font-size: 22px; }
  .gf-setup-sub{ font-size: 12px; }
  .gf-stage-preview{ margin: 10px auto 0; font-size: 16px; }
  .gf-setup-input{ margin-top: 12px; padding: 10px 12px; font-size: 14px; }
  .gf-setup-btn{ margin-top: 12px; padding: 12px 22px; min-width: 200px; font-size: 15px; }
  .gf-rules{ margin-top: 14px; padding: 10px 14px; font-size: 12px; }
  .gf-mode-tabs{ margin: 10px 0 4px; }
  .gf-best-record{ margin-top: 10px; padding: 6px 14px; font-size: 12px; }
  .gf-best-grade{ font-size: 16px; }
}
/* 매우 짧은 viewport — rules 숨김으로 모드 탭/베스트 기록 확보 */
@media (max-height: 600px){
  .gf-rules{ display: none; }
  .gf-stage-preview{ display: none; }
}

/* RESULT 화면도 짧은 viewport에서 fit */
@media (max-height: 720px){
  .gf-result{ margin-top: 6px; padding: 16px 18px; }
  .gf-result-grade{ width: 88px; height: 88px; font-size: 52px; }
  .gf-result-title{ font-size: 18px; margin-bottom: 10px; }
  .gf-result-totals{ gap: 18px; margin-bottom: 12px; }
  .gf-result-total-value{ font-size: 20px; }
  .gf-result-holes{ margin-bottom: 12px; }
  .gf-result-hole-row{ padding: 6px 10px; font-size: 12px; }
  .gf-result-btn{ padding: 9px 16px; font-size: 13px; }
}