:root{ --brand:#16a085; --ink:#1b1b1b; }
html,body{margin:0;padding:0;height:100%;background:#05261b;font-family:"Noto Sans KR",system-ui,sans-serif; min-height: 100svh;}
@font-face {
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

#game-root{
  position: relative;          /* ★ HUD absolute 기준 */
  /*max-width: 410px;*/
  margin: 0 auto;
  height: auto;
}
#gameCanvas{ width:100%; height:100%; display:block; background:#fbead6; box-shadow:0 8px 24px rgba(0,0,0,.08); cursor: pointer; }
#introPanel{
  background: url('/game/assets/bg_intro.jpg') center/cover no-repeat, rgba(0,0,0,.45);
}
/* HUD: 캔버스 위에 절대 배치 */
.hud{
  position: absolute;          
  inset: 0;                    
  z-index: 12;                 
  pointer-events: none;
}
.hud-left,.hud-right{
  position: absolute; top: 28px;
  display: flex; gap: 8px; align-items: center;
}
.hud-left{ left:8px; }
.hud-right{right: 8px;
  flex-direction: column;      /* ★ 시간 아래에 방패 버튼 세로정렬 */
  align-items: flex-end;}
.score,.time{
  pointer-events:none;
  padding:8px 12px;
  font-family: 'YeogiOttaeJalnan';
  color:#fff;
  text-align: center;
  font-size: 25px;
  line-height: 1.2;
}
b#score,span#time {font-size: 40px;}
.btn{ border:0; border-radius:12px; padding:15px 12px; background:#222; color:#fff; cursor:pointer; pointer-events:auto; font-family: 'YeogiOttaeJalnan'; font-size: 20px;}
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn.shield{ display:flex; align-items:center; gap:6px; background:none; color:#053; font-weight:700; }
button#shieldBtn {display:flex; position: relative; top:-80px; width: 100%; height: 100%; justify-content: center; align-items: center;}
.btn.primary{ background:#0c9279; border:4px solid #000; padding:10px 70px; border-radius:50px; font-size:30px; font-weight:bold; margin-top:610px; font-family: 'YeogiOttaeJalnan';}
.btn.primary2{ background:var(--brand); }

/* 오버레이(인트로/결과) */
.overlay{
  position:absolute;      /* 핵심 */
  inset:0;                /* 상하좌우 0 */
  z-index: 10;            /* 캔버스/ HUD 보다 위 */
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.45); /* 반투명 배경 */
}
.card{ background:#fff; width:min(92vw,420px); border-radius:16px; padding:18px; text-align:center; box-shadow:0 12px 36px rgba(0,0,0,.2); }
.card2{border-radius:16px; padding:18px; text-align:center;}
.card h2{ margin:4px 0 8px; font-family: 'YeogiOttaeJalnan';}
.card .big{ font-size:20px; margin:4px 0 10px; }
.badge img{ width:120px; height:auto; }
.actions{ display:flex; gap:8px; justify-content:center; margin:12px 30px 4px; flex-direction: column;}
.join-hint{ font-size:12px; color:#666; }
.coupon-msg{ margin-top:8px; color:#333; }
p#tierMent {font-family: 'YeogiOttaeJalnan'; font-size: 20px; margin:0 50px 0; word-break: keep-all; padding:20px 0;}
/* hidden 속성 강제 적용 */
[hidden] { display: none !important; }

/* 오버레이 z-index 정리: 인트로가 제일 위 */
.is-hidden{ display:none !important; }
#introPanel { z-index: 20; }
#resultPanel { z-index: 15; }

/* 방패 이펙트 PNG: 캔버스 위 중앙에 고정 */
#shieldFx{
  position:absolute; inset:0; margin:auto; z-index:13; /* HUD 위에 */
  width:90%; height:auto; max-width:520px; pointer-events:none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

/* ====== 임베드 모드(iframe 내부) 오버라이드 ====== */
html.embed, html.embed body { height: 100%; }
html.embed body {
  margin: 0;
  display: block;          /* 부모에서 중앙정렬 안 함 */
}
html.embed #game-root{
  position: relative;
  width: 100%;
  height: 100%;            /* 부모 iframe 영역을 가득 채움 */
  aspect-ratio: auto;      /* 자식은 비율 강제 해제 */
}
html.embed #gameCanvas{
  width: 100%;
  height: 100%;            /* 캔버스를 래퍼에 딱 맞추기 */
  display: block;
}
html.embed .hud,
html.embed .overlay{
  position: absolute;
  inset: 0;                /* HUD/오버레이도 전체 영역 기준 */
}

/* ===============================
   COUPON BOX (쿠폰 발급 완료 영역)
   =============================== */
.coupon-box {
  background: #fff;
  border-radius: 16px;
  padding: 25px 12px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  width: min(92vw, 420px);
  margin: 0 auto;
  animation: fadeIn .4s ease;
  font-family: 'YeogiOttaeJalnan';
}

.coupon-box h3 {
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--ink);
  margin-top:100px;
}

.serial-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f7f7f7;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 30px;
  box-shadow: inset 0 0 4px rgba(0,0,0,.08);
  width: 70%;
  justify-content: space-between;
}

.serial {
  font-family: 'YeogiOttaeJalnan', monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 1px;
}

.btn.small {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-family: 'YeogiOttaeJalnan';
  cursor: pointer;
  border: none;
}

.btn.small:hover {
  background: #12846d;
}

.coupon-box .btn.primary {
  background: var(--brand);
  color: #fff;
  font-size: 25px;
  padding: 12px 40px;
  border-radius: 40px;
  margin-top: 10px;
  font-family: 'YeogiOttaeJalnan';
  border: none;
}

.coupon-box .btn.primary:hover {
  background: #12846d;
}

.coupon-box .notice {
  margin-top: 18px;
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  word-break: keep-all;
  font-family: 'sans-serif';
  font-weight: 400;
  margin-bottom: 92px;
}

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


@media (max-width: 768px){
  
}