:root{
  --gd-bg:#0b0c14;
  --gd-panel:#12141f;
  --gd-line:#242840;
  --gd-accent:#ff6a3d;
  --gd-accent2:#3dd6ff;
  --gd-ink:#f4f5fb;
  --gd-muted:#9297b3;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--gd-bg)}
body{margin:0;min-height:100vh;background:var(--gd-bg);color:var(--gd-ink);font-family:"Noto Sans KR",Pretendard,system-ui,sans-serif}

.gd-toolbar{width:min(960px,calc(100% - 28px));margin:18px auto 6px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.gd-toolbar a{color:var(--gd-ink);font-weight:750;text-decoration:none}
.gd-toolbar-actions{display:flex;align-items:center;gap:12px}
.gd-best{color:var(--gd-muted)}
.gd-best strong{color:var(--gd-accent2)}
.gd-toolbar button{padding:8px 12px;border:1px solid var(--gd-line);border-radius:8px;background:var(--gd-panel);color:var(--gd-ink);cursor:pointer}

.gd-shell{width:min(960px,calc(100% - 28px));margin:0 auto 48px;text-align:center}
.gd-shell h1{margin:6px 0 4px;font-size:clamp(28px,4vw,40px)}
.gd-lead{margin:0 0 20px;color:var(--gd-muted)}

.gd-stage-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:900/340;border:1px solid var(--gd-line);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px #00000055}
.gd-stage-wrap{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* 누른 채 손가락을 움직여도 브라우저가 스크롤로 가로채지 않게 한다(비행 구간 누르기 유지). */
#gdCanvas{display:block;width:100%;height:100%;touch-action:none}

.gd-hud{pointer-events:none;position:absolute;top:14px;left:16px;display:flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:#00000066;backdrop-filter:blur(3px);font-variant-numeric:tabular-nums}
.gd-score-label{font-size:12px;color:var(--gd-muted)}
.gd-hud strong{font-size:20px;color:var(--gd-ink)}

.gd-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#080911cc;padding:20px}
.gd-overlay[hidden]{display:none}
.gd-overlay-card{width:min(420px,100%);text-align:center}
.gd-overlay-card h2{margin:0 0 10px;font-size:clamp(24px,4vw,32px)}
.gd-overlay-card p{margin:0 0 18px;color:var(--gd-muted);line-height:1.6}
.gd-name-label{display:block;margin:0 0 8px;font-size:13px;color:var(--gd-muted);text-align:left}
.gd-name-input{width:100%;min-height:46px;margin-bottom:18px;padding:0 14px;border:1px solid var(--gd-line);border-radius:10px;background:#191c2c;color:var(--gd-ink);font:inherit;font-size:15px}
.gd-name-input:focus{outline:2px solid var(--gd-accent2)}
.gd-primary-btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.gd-rank-text{color:var(--gd-accent)!important;font-weight:800}
.gd-primary-btn{min-height:52px;padding:0 32px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--gd-accent),#ff9a3d);color:#1a0e06;font-weight:900;font-size:17px;cursor:pointer}
.gd-primary-btn:hover{filter:brightness(1.06)}

.gd-leaderboard{width:min(560px,100%);margin:28px auto 0;padding:20px 22px;border:1px solid var(--gd-line);border-radius:14px;background:var(--gd-panel);text-align:left}
.gd-leaderboard-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gd-leaderboard-head h2{margin:0;font-size:18px}
.gd-leaderboard-note{margin:6px 0 0;color:var(--gd-muted);font-size:13px}
.gd-text-btn{border:0;background:transparent;color:var(--gd-muted);font-size:13px;cursor:pointer;text-decoration:underline}
.gd-leaderboard-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.gd-leaderboard-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;background:#191c2c;font-variant-numeric:tabular-nums}
.gd-rank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.gd-leaderboard-list li.gd-rank-1{background:linear-gradient(135deg,#3a2a10,#191c2c);color:#ffd27a}
.gd-leaderboard-list li.gd-rank-2{color:#d8dbe8}
.gd-leaderboard-list li.gd-rank-3{color:#e0b28c}
.gd-leaderboard-empty{color:var(--gd-muted);background:transparent!important;justify-content:center!important}
.gd-rank-badge{font-weight:800;color:var(--gd-muted);min-width:34px;white-space:nowrap;flex-shrink:0}
.gd-rank-1 .gd-rank-badge{color:#ffd27a}
.gd-my-rank{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--gd-line);color:var(--gd-accent2);font-weight:700;font-size:14px}
.gd-my-rank:empty{display:none}

/* 일시정지 뒤 이어하기 카운트다운 숫자 */
.gd-countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:#08091155;font-size:clamp(56px,14vw,120px);font-weight:900;color:var(--gd-ink);text-shadow:0 6px 24px #000a;animation:gd-pop .9s ease-out}
.gd-countdown[hidden]{display:none}
@keyframes gd-pop{from{transform:scale(1.5);opacity:0}30%{transform:scale(1);opacity:1}}

.gd-rotate-hint{display:none;margin:-10px 0 14px;color:var(--gd-accent2);font-size:13px}

@media (max-width:640px){
  .gd-toolbar{width:calc(100% - 32px);flex-direction:column;align-items:flex-start}
  .gd-shell{width:calc(100% - 32px)}
  .gd-stage-wrap{border-radius:12px}
  .gd-hud{top:8px;left:8px;padding:4px 10px}
  .gd-hud strong{font-size:16px}
}

/* 휴대폰: 게임 화면이 납작해서 안내 카드가 잘리므로, 카드는 휴대폰 화면 전체에 띄운다. */
@media (max-width:640px),(max-height:500px){
  .gd-overlay{position:fixed;z-index:20;padding:16px;overflow-y:auto;background:#080911ee}
  .gd-overlay-card p{margin-bottom:14px}
}

/* 세로로 든 휴대폰에는 가로로 돌리라는 안내를 보여 준다. */
@media (orientation:portrait) and (max-width:640px){
  .gd-rotate-hint{display:block}
}

/* 가로로 든 휴대폰: 제목을 숨기고, 게임 중에는 메뉴·순위도 숨겨 화면을 게임으로 꽉 채운다. */
@media (orientation:landscape) and (max-height:500px){
  .gd-toolbar{margin-top:8px}
  .gd-shell h1,.gd-lead{display:none}
  .gd-stage-wrap{width:min(100%,calc((100dvh - 60px) * 900 / 340))}
  body.gd-playing .gd-toolbar,body.gd-playing .gd-leaderboard{display:none}
  body.gd-playing .gd-shell{width:100%;min-height:100dvh;margin:0;display:grid;place-items:center;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  body.gd-playing .gd-stage-wrap{width:min(100%,calc(100dvh * 900 / 340));border:0;border-radius:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}