:root{
    --bg:#0b0714; --panel:#161022; --line:#2c2140;
    --gold:#f0c33c; --ember:#ff5d3a; --jade:#3ddc97; --ice:#6fd3ff; --poison:#b56cff;
    --txt:#efe6d8; --dim:#8d81a8;
  }

  /* ===== 포탈 셸 레이아웃 (space-panic 표준에서 이식) ===== */
.bg-effects {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: float 15s ease-in-out infinite;
}

.bg-orb:nth-child(1) {
    width: 400px; height: 400px;
    background: var(--accent-cyan);
    top: -100px; left: -100px;
}

.bg-orb:nth-child(2) {
    width: 350px; height: 350px;
    background: var(--accent);
    bottom: -50px; right: -100px;
    animation-delay: -7s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 12px 16px;
    position: relative;
    z-index: 1;
}

header {
    text-align: center;
    margin-bottom: 12px;
}

.header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 4px;
}

.back-btn {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    border-radius: var(--fc-r-md, 8px);
    transition: color 0.3s, background 0.3s;
}

.back-btn:hover {
    color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.1);
}

.back-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

h1 {
    font-family: 'Black Han Sans', sans-serif;
    font-size: 2rem;
    color: var(--accent-gold, #ffd700);
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 18px rgba(255, 107, 157, 0.35),
        3px 3px 0 #172c66;
}

.subtitle {
    color: var(--text-secondary);
    font-family: 'Jua', sans-serif;
    font-size: 0.9rem;
}

/* ===== Game area: 960x600 (8:5) Phaser canvas, Scale.FIT ===== */

/* ===== Article / footer ===== */
.game-content {
    max-width: 760px;
    margin: 28px auto 0;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--fc-r-md, 12px);
    line-height: 1.7;
}

.game-content h2 {
    font-family: 'Jua', sans-serif;
    color: var(--accent-cyan);
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.game-content p { color: var(--text-secondary); margin-bottom: 16px; font-size: 0.92rem; }

.tip-box {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--accent-pink);
    border-radius: var(--fc-r-sm, 6px);
    padding: 12px 14px;
}

.tip-box p { margin-bottom: 8px; }
.tip-box p:last-child { margin-bottom: 0; }
.tip-box strong { color: var(--accent-gold); }

footer {
    text-align: center;
    padding: 24px 0 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

footer a { color: var(--accent-cyan); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ===== Fullscreen mode ===== */
body.fullscreen-active #gameWrapper {
    width: min(100vw, calc(100vh * 0.62));
    width: min(100vw, calc(100dvh * 0.62));
    height: 100dvh;
    max-width: none;
    border-radius: 0;
}

body.fullscreen-active header,
body.fullscreen-active .game-content,
body.fullscreen-active footer,
body.fullscreen-active .ad-display {
    display: none;
}

/* ===== Mobile ===== */

  /* 게임 리셋은 포탈 셸을 건드리지 않도록 #wrap 하위로 스코프 */
  #wrap, #wrap *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  /* 오버레이 숨김 시 브라우저 스크롤 앵커링이 게임을 밀어내는 것 방지 */
  html{overflow-anchor:none}
  /* 포탈 셸 안에서 세로형 게임 영역 크기 확보 (헤더+부제 고려해 게임이 첫 화면에 들어오게) */
  .game-container{width:100%;display:flex;justify-content:center;position:relative}
  /* 드래그 중 페이지 스크롤/당겨서 새로고침 방지 */
  html{overscroll-behavior:none}
  /* 게임 영역 경계를 명확히 — 웹 UI(헤더/푸터)와 시각적으로 구분해 오터치 방지 */
  #gameWrapper{position:relative;width:min(100%, calc((100dvh - 10.5rem) * 0.62));
    height:min(calc(100dvh - 10.5rem), 760px);max-width:560px;margin:0 auto;
    border:2px solid rgba(240,195,60,.55);border-radius:16px;
    box-shadow:0 0 0 1px rgba(240,195,60,.15), 0 0 18px rgba(240,195,60,.12), 0 10px 34px rgba(0,0,0,.5)}
  #wrap{display:flex;flex-direction:column;height:100%;width:100%;margin:0 auto;position:relative;
    background:var(--bg);color:var(--txt);border-radius:14px;overflow:hidden;
    font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    user-select:none;-webkit-user-select:none;touch-action:manipulation}
  /* 게임 스테이지: 터치를 게임이 전유 — 드래그가 페이지 스크롤로 새지 않게 */
  #stage{position:relative;flex:1;min-height:0;touch-action:none}
  #cv{position:absolute;inset:0;width:100%;height:100%;display:block}
  /* HUD */
  #hud{position:absolute;top:0;left:0;right:0;padding:10px 12px 0;pointer-events:none;z-index:5}
  #hudTop{display:flex;justify-content:space-between;align-items:center;gap:10px}
  /* 인-게임 홈 접근은 공용 고정 홈 버튼(fullscreen.js 의 .home-btn-fixed)이 담당 */
  .chip{background:rgba(22,16,34,.82);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:6px;backdrop-filter:blur(3px)}
  #scaleChip{color:var(--gold)}
  #segChip{color:var(--jade)}
  #hpWrap{margin-top:8px;background:rgba(22,16,34,.82);border:1px solid var(--line);border-radius:10px;padding:6px 10px;backdrop-filter:blur(3px)}
  #hpLabel{font-size:11px;color:var(--dim);display:flex;justify-content:space-between;margin-bottom:4px}
  #hpBar{height:8px;border-radius:4px;background:#241a38;overflow:hidden}
  #hpFill{height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,#ff5d3a,#ffb14a);transition:width .18s}
  #banner{position:absolute;left:0;right:0;top:34%;text-align:center;pointer-events:none;z-index:6;
    font-weight:900;font-size:22px;letter-spacing:.06em;color:var(--gold);text-shadow:0 0 18px rgba(240,195,60,.55),0 2px 0 #000;
    opacity:0;transition:opacity .3s}
  /* Shop */
  #shop{background:linear-gradient(180deg,#120c1e,#0b0714);border-top:1px solid var(--line);padding:8px 8px calc(10px + env(safe-area-inset-bottom));z-index:5}
  #shopHead{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 6px}
  #shopHead b{font-size:12px;letter-spacing:.14em;color:var(--dim)}
  #shopHead span{font-size:11px;color:var(--dim)}
  /* 광고 아이템 버튼(비늘 2배 · 방어막) */
  #adShop{display:flex;gap:8px;padding:0 4px 8px}
  #adShop button{flex:1;font-size:12px;font-weight:800;padding:9px 6px;border-radius:10px;cursor:pointer;
    color:#7fe0a0;background:linear-gradient(180deg,#1c2b22,#12201a);border:1px solid rgba(61,220,151,.45)}
  #adShop button:disabled{opacity:.55;cursor:default}
  #adShop button:not(:disabled):active{transform:translateY(1px)}
  #cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .card{position:relative;border:1px solid var(--line);border-radius:12px;background:#1a1229;padding:9px 8px 8px;text-align:center;cursor:pointer;
    transition:transform .08s, border-color .15s, box-shadow .15s;overflow:hidden}
  .card:active{transform:scale(.96)}
  .card .ic{font-size:24px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
  .card .nm{font-size:12.5px;font-weight:800;margin-top:5px}
  .card .ds{font-size:10.5px;color:var(--dim);margin-top:2px;min-height:26px;line-height:1.25}
  .card .ct{margin-top:5px;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--gold);
    background:rgba(240,195,60,.1);border:1px solid rgba(240,195,60,.35);border-radius:999px;padding:2px 9px}
  .card.ok{border-color:rgba(240,195,60,.55);box-shadow:0 0 14px rgba(240,195,60,.12) inset}
  .card.no{opacity:.45;cursor:default}
  .card.new::after{content:"NEW";position:absolute;top:5px;right:6px;font-size:8px;font-weight:900;color:#0b0714;background:var(--jade);border-radius:4px;padding:1px 4px;letter-spacing:.08em}
  /* Overlays */
  .ovl{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:rgba(6,3,12,.86);backdrop-filter:blur(4px);text-align:center;padding:24px}
  .ovl h1{font-size:34px;font-weight:900;letter-spacing:.05em}
  .ovl h1 .g{color:var(--gold)} .ovl h1 .e{color:var(--ember)}
  .ovl p{color:var(--dim);font-size:13.5px;line-height:1.7;max-width:340px}
  .ovl .stat{font-size:14px;color:var(--txt)}
  .ovl button{margin-top:6px;font-size:16px;font-weight:900;color:#1a0f00;background:linear-gradient(180deg,#ffd76a,#f0a13c);
    border:none;border-radius:12px;padding:13px 34px;cursor:pointer;letter-spacing:.05em;box-shadow:0 4px 0 #8a5a12,0 8px 24px rgba(240,161,60,.35)}
  .ovl button:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5a12}
  /* 광고 보고 부활 버튼 — 광고임을 구분 */
  #reviveBtn{color:#04170c;background:linear-gradient(180deg,#7fe0a0,#3ba86a);box-shadow:0 4px 0 #1f6b3f,0 8px 24px rgba(59,168,106,.35)}
  #reviveBtn:active{box-shadow:0 1px 0 #1f6b3f}
  /* 시작 화면: 한 줄 안내 + 접이식 상세 설명(? 버튼) */
  .ovl .lead{color:var(--txt);font-size:15px;line-height:1.6;word-break:keep-all}
  .ovl .btnRow{display:flex;align-items:center;gap:10px}
  .ovl button.ghost{margin-top:6px;font-size:16px;padding:13px 0;width:48px;
    color:var(--gold);background:transparent;border:2px solid rgba(255,215,106,.45);box-shadow:none}
  .ovl button.ghost:active{transform:translateY(3px);box-shadow:none}
  .ovl button.ghost[aria-expanded="true"]{background:rgba(255,215,106,.14);border-color:var(--gold)}
  #howto{max-width:340px;text-align:left;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
  #howto p{font-size:12.5px;line-height:1.65;max-width:none;word-break:keep-all}
  #howto p + p{margin-top:8px}
  .hidden{display:none!important}