/* 화면은 항상 1280x720 논리 좌표. #stage 전체를 transform:scale 로 창 크기에 맞춘다. */
:root{--teal:#13a7c9;--deep:#0b4f73;--coral:#ff6b4a;--sun:#ffc94a;}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#06202f;overflow:hidden;color:#fff;
  font-family:'Jua','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;overflow:hidden;
  transform:translate(-50%,-50%);transform-origin:center center;background:#0b2a3d}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
#game.aiming{cursor:none}
.hidden{display:none!important}
button{font-family:inherit;color:inherit;cursor:pointer;border:0}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#hud .pill{position:absolute;display:flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;
  background:rgba(8,40,62,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);
  text-shadow:0 1px 3px rgba(0,0,0,.4);font-size:20px}
#hud .lbl{font-size:13px;opacity:.8;letter-spacing:.12em}
#hud b{font-size:26px;font-weight:400;color:var(--sun)}
#hud .sub{font-size:15px;opacity:.85;margin-left:4px}
/* top/bottom 18~20px 대신 85px 안전 여백을 둔다: 화면을 꽉 채울 때(game.js resize(), SAFE_CROP=150) 위아래를
   최대 75px씩 잘라내도 이 안전 여백 안쪽에 있는 HUD는 잘리지 않는다. */
#hudLevel{left:22px;top:85px}
#hudProg{left:50%;top:85px;transform:translateX(-50%);min-width:260px;justify-content:center}
#hudProg .bar{width:150px;height:10px;border-radius:6px;background:rgba(255,255,255,.25);overflow:hidden}
#hudProg .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe07a,#ff9e4a);border-radius:6px;transition:width .3s}
#hudScore{right:22px;top:85px}
#shots{left:22px;bottom:85px;padding:10px 16px;gap:6px}
#shots .pebble{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6e2da,#8a8580 70%);box-shadow:0 1px 3px rgba(0,0,0,.4)}
#shots .pebble.off{opacity:.22;filter:grayscale(1)}
.combo{position:absolute;right:26px;top:141px;font-size:30px;color:#fff;text-shadow:0 2px 0 #c2410c,0 0 14px rgba(255,120,40,.9);
  transform:rotate(-4deg);animation:pop .3s ease}
.combo b{font-size:44px;color:#ffe07a;font-weight:400}
@keyframes pop{0%{transform:scale(1.6) rotate(-4deg)}100%{transform:scale(1) rotate(-4deg)}}
.round{position:absolute;right:22px;bottom:85px;width:46px;height:46px;border-radius:50%;pointer-events:auto;
  background:rgba(8,40,62,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);font-size:20px}
.round:hover{background:rgba(8,40,62,.65)}
.fsBtn{left:auto;right:22px;top:85px;bottom:auto;z-index:5}
.fsBtn.on{background:rgba(255,180,60,.55)}
.banner{position:absolute;left:0;right:0;top:120px;text-align:center;pointer-events:none;opacity:0;transform:translateY(-14px);
  transition:opacity .4s,transform .4s;text-shadow:0 3px 14px rgba(0,30,60,.6)}
.banner.show{opacity:1;transform:none}
.banner .m{font-size:64px;letter-spacing:.04em;color:#fff;-webkit-text-stroke:2px rgba(0,60,90,.45)}
.banner .s{font-size:26px;color:#ffe9a8;margin-top:2px}
.hint{position:absolute;left:50%;top:76px;transform:translateX(-50%);padding:10px 22px;border-radius:999px;font-size:22px;
  background:rgba(8,40,62,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);pointer-events:none;
  animation:float 2s ease-in-out infinite}
@keyframes float{50%{transform:translateX(-50%) translateY(-5px)}}

/* ---------- 화면 / 카드 ---------- */
.screen{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:34px;
  opacity:0;pointer-events:none;transition:opacity .45s}
.screen.show{opacity:1;pointer-events:auto}
.screen.modal{align-items:center;padding:0;background:rgba(3,20,32,.5)}
.card{width:700px;padding:30px 40px 30px;text-align:center;border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.4);
  box-shadow:0 24px 70px rgba(0,30,60,.5),inset 0 1px 0 rgba(255,255,255,.4);text-shadow:0 1px 4px rgba(0,40,70,.45)}
.eyebrow{font-size:17px;letter-spacing:.24em;color:#ffe9a8;margin-bottom:6px}
h1{font-size:66px;line-height:1.02;font-weight:400;color:#fff;-webkit-text-stroke:2px rgba(0,70,105,.35);text-shadow:0 4px 18px rgba(0,50,90,.55)}
h1 span{display:block;font-size:52px;color:var(--sun);-webkit-text-stroke:2px rgba(120,60,0,.35)}
h2{font-size:46px;font-weight:400;color:#fff;-webkit-text-stroke:1.5px rgba(0,70,105,.35)}
.lead{font-size:20px;line-height:1.5;margin:14px 0 4px;color:#eaf8ff}
.lead.small{font-size:16px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.btn{padding:10px 26px;border-radius:999px;font-size:20px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);
  transition:transform .12s,background .2s,box-shadow .2s;text-shadow:0 1px 3px rgba(0,40,70,.5)}
.btn:hover{background:rgba(255,255,255,.34);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.big{font-size:24px;padding:13px 36px}
.btn.small{position:absolute;left:22px;top:18px;font-size:16px;padding:8px 18px;background:rgba(8,40,62,.55)}
.btn.primary{background:linear-gradient(180deg,#ff9a5a,#ff5a3a);border-color:rgba(255,255,255,.7);box-shadow:0 8px 22px rgba(255,90,58,.45)}
.btn.primary:hover{background:linear-gradient(180deg,#ffaa70,#ff6a4a)}
.btn.coupon{background:linear-gradient(180deg,#ffe07a,#ffb02e);color:#5b3300;text-shadow:none;border-color:#fff2b8;box-shadow:0 8px 24px rgba(255,180,40,.55);animation:glow 1.6s ease-in-out infinite}
.btn:disabled{opacity:.55;cursor:default;animation:none;transform:none}
@keyframes glow{50%{box-shadow:0 8px 34px rgba(255,200,60,.95)}}
.howto{list-style:none;display:flex;gap:10px;justify-content:center;margin-top:22px}
.howto li{flex:1;padding:10px 8px;border-radius:16px;background:rgba(6,40,62,.32);font-size:15px;line-height:1.35}
.howto b{display:block;font-size:17px;color:#ffe9a8;font-weight:400}
.stats{display:flex;gap:10px;justify-content:center;margin-top:16px}
.stats div{flex:1;padding:10px 6px;border-radius:16px;background:rgba(6,40,62,.32);font-size:15px}
.stats b{display:block;font-size:30px;color:var(--sun);font-weight:400}
.couponBox{margin-top:16px;padding:14px;border-radius:20px;background:rgba(255,224,122,.16);border:1px dashed rgba(255,224,122,.7)}
.couponMsg{font-size:19px;margin-bottom:10px;color:#fff3c4}
.levelsCard{width:760px}
.levelGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.lv{position:relative;padding:14px 6px 10px;border-radius:18px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);font-size:15px;line-height:1.25}
.lv b{display:block;font-size:34px;color:var(--sun);font-weight:400}
.lv:hover:not(:disabled){background:rgba(255,255,255,.36);transform:translateY(-3px)}
.lv:disabled{opacity:.4;cursor:not-allowed}
.lv .tag{position:absolute;right:8px;top:6px;font-size:16px}
.couponCard{width:560px}
.couponCode{margin:18px auto 4px;padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.92);color:#0b4f73;text-shadow:none;
  font-size:34px;letter-spacing:.14em;border:3px dashed #ff8a3d}
.couponCard{background:linear-gradient(160deg,rgba(38,92,128,.96),rgba(18,58,92,.96))}
.couponCard h2{font-size:36px;word-break:keep-all}

/* ---------- 명소 간판 (관광 안내 갈색 표지판 느낌) ---------- */
.sign{position:absolute;left:22px;top:139px;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:8px;
  background:linear-gradient(180deg,#7a4a26,#5e3517);border:2px solid #f3e3c8;box-shadow:0 4px 12px rgba(0,0,0,.35);
  pointer-events:none;opacity:0;transform:translateX(-24px);transition:opacity .5s,transform .5s;text-shadow:none}
.sign.show{opacity:.95;transform:none}
.sign .pin{font-size:15px}
.sign .txt{display:flex;flex-direction:column;line-height:1.15}
.sign b{font-size:15px;font-weight:400;color:#fff}
.sign i{font-size:10px;font-style:normal;letter-spacing:.06em;color:#e9d3ae}
/* 화면 중앙을 가리지 않도록: 튜토리얼 문구와 레벨 배너를 작게 */
.hint{top:133px;padding:6px 16px;font-size:16px}
.banner{top:137px}
.banner .m{font-size:44px}
.banner .s{font-size:20px}

/* ---------- 모바일 세로 화면 안내 ---------- */
#rotateHint{display:none;position:fixed;inset:0;z-index:99;align-items:center;justify-content:center;text-align:center;
  background:rgba(6,32,47,.94);color:#fff;font-size:22px;line-height:1.6;padding:24px}
#rotateHint div{font-size:20px}
@media (orientation:portrait) and (pointer:coarse){#rotateHint{display:flex}}