* { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#05060f; font-family:"Segoe UI",-apple-system,system-ui,sans-serif; color:#e8f0ff; user-select:none; }
  canvas { display:block; position:absolute; inset:0; }

  /* ---------- HUD ---------- */
  #hud { position:absolute; inset:0; pointer-events:none; }

  #top {
    position:absolute; top:0; left:0; right:0; padding:10px 16px;
    display:flex; align-items:center; gap:18px;
    /* padding-right는 resize()에서 실제 패널 폭(PANEL_W)으로 설정한다 */
    background:linear-gradient(180deg, rgba(5,8,22,.92), rgba(5,8,22,0));
  }
  #money { font-size:30px; font-weight:800; letter-spacing:.5px; color:#ffe27a;
           text-shadow:0 0 14px rgba(255,200,60,.55); font-variant-numeric:tabular-nums; }
  #money small { font-size:16px; opacity:.65; font-weight:600; }
  #rate { font-size:14px; color:#7fe7c4; font-weight:700; }
  #rate span { opacity:.55; font-weight:500; color:#9fb3d0; }

  #zoneName { margin-left:auto; font-size:13px; letter-spacing:3px; color:#8aa4c8; font-weight:700; }

  #progWrap { position:absolute; top:56px; left:16px; width:280px; }
  #progLabel { font-size:11px; color:#93a9c9; margin-bottom:4px; letter-spacing:.3px; }
  #progBar { height:6px; border-radius:4px; background:rgba(255,255,255,.09); overflow:hidden; }
  #progFill { height:100%; width:0%; border-radius:4px;
              background:linear-gradient(90deg,#3ad1ff,#7a6bff); transition:width .25s; box-shadow:0 0 10px rgba(90,160,255,.7); }

  #comboWrap { position:absolute; top:56px; left:50%; transform:translateX(-50%); width:240px; text-align:center; opacity:0; transition:opacity .2s; }
  #comboWrap.on { opacity:1; }
  #comboTxt { font-size:20px; font-weight:900; color:#ff9de2; text-shadow:0 0 12px rgba(255,90,200,.7); }
  #comboBar { height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:3px; }
  #comboFill { height:100%; width:100%; background:linear-gradient(90deg,#ff5fd2,#ffb86b); }

  /* ---------- upgrade panel ---------- */
  #panel {
    position:absolute; right:0; top:0; bottom:0; width:290px; pointer-events:auto;
    background:linear-gradient(270deg, rgba(9,13,30,.94), rgba(9,13,30,.72));
    border-left:1px solid rgba(120,160,255,.16);
    padding:12px 12px 14px; overflow-y:auto;
    display:flex; flex-direction:column; gap:8px;
  }
  #panel::-webkit-scrollbar { width:6px; }
  #panel::-webkit-scrollbar-thumb { background:rgba(120,160,255,.28); border-radius:3px; }
  .ptitle { font-size:11px; letter-spacing:2.5px; color:#7f96bb; font-weight:700; margin:2px 0 2px; }

  .up {
    display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:10px; cursor:pointer;
    background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06);
    transition:transform .08s, background .15s, border-color .15s;
  }
  .up:hover { background:rgba(255,255,255,.075); }
  .up:active { transform:scale(.97); }
  .up .ic { font-size:21px; width:26px; text-align:center; flex:0 0 26px; }
  .up .bd { flex:1; min-width:0; }
  .up .nm { font-size:13px; font-weight:700; display:flex; justify-content:space-between; gap:6px; }
  .up .lv { font-size:11px; color:#6ee7ff; font-weight:700; }
  .up .ds { font-size:10.5px; color:#8fa3c2; margin-top:1px; line-height:1.35; }
  .up .cs { font-size:12px; font-weight:800; color:#ffd469; margin-top:3px; font-variant-numeric:tabular-nums; }
  .up .key { font-size:9px; color:#5d6f8e; border:1px solid rgba(255,255,255,.13); border-radius:4px; padding:0 4px; }

  .up.afford { border-color:rgba(120,230,180,.5); background:rgba(60,200,140,.11); animation:pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(80,230,170,.28);} 50%{box-shadow:0 0 0 6px rgba(80,230,170,0);} }
  .up.poor { opacity:.5; }
  .up.poor .cs { color:#c98a8a; }
  .up.locked { opacity:.38; cursor:not-allowed; }
  .up.maxed { opacity:.55; }
  .up.maxed .cs { color:#7fe7c4; }

  #prestigeBtn {
    display:none; padding:11px; border-radius:10px; text-align:center; cursor:pointer;
    background:linear-gradient(135deg,#5b2ea8,#a3327d); border:1px solid rgba(255,180,255,.35);
    font-weight:800; font-size:13px; box-shadow:0 0 18px rgba(190,80,220,.3);
  }
  #prestigeBtn small { display:block; font-weight:600; font-size:10.5px; opacity:.85; margin-top:3px; }
  #prestigeBtn:active { transform:scale(.97); }

  /* ---------- bottom prompt ---------- */
  #prompt {
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    padding:11px 20px; border-radius:12px; text-align:center; opacity:0; transition:opacity .15s;
    background:rgba(8,12,28,.9); border:1px solid rgba(120,180,255,.3); backdrop-filter:blur(6px);
    box-shadow:0 6px 26px rgba(0,0,0,.5); white-space:nowrap;
  }
  #prompt.on { opacity:1; }
  #prompt .pn { font-size:15px; font-weight:800; }
  #prompt .pi { font-size:11.5px; color:#93a9c9; margin-top:3px; }
  #prompt .pc { font-size:14px; font-weight:800; color:#ffd469; margin-top:4px; }
  #prompt .pc.no { color:#e08a8a; }
  kbd { background:rgba(255,255,255,.14); border-radius:4px; padding:1px 6px; font-size:11px; font-weight:800; }

  /* ---------- banner ---------- */
  #banner {
    position:absolute; top:34%; left:50%; transform:translate(-50%,-50%) scale(.6);
    font-size:46px; font-weight:900; letter-spacing:2px; opacity:0; text-align:center;
    text-shadow:0 0 30px currentColor; white-space:nowrap;
  }
  #banner.show { animation:bannerPop 1.9s cubic-bezier(.2,1.4,.4,1) forwards; }
  @keyframes bannerPop {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.4); }
    18% { opacity:1; transform:translate(-50%,-50%) scale(1.12); }
    30% { transform:translate(-50%,-50%) scale(1); }
    75% { opacity:1; }
    100% { opacity:0; transform:translate(-50%,-58%) scale(1.02); }
  }
  #flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }

  #rush {
    position:absolute; top:96px; left:50%; transform:translateX(-50%);
    font-size:22px; font-weight:900; color:#ffca4a; text-shadow:0 0 18px rgba(255,170,40,.8);
    display:none; letter-spacing:2px;
  }
  #rush.on { display:block; animation:rushBeat .5s infinite alternate; }
  @keyframes rushBeat { from{transform:translateX(-50%) scale(1);} to{transform:translateX(-50%) scale(1.09);} }

  /* ---------- 긴급 계약 ---------- */
  #contract {
    position:absolute; top:132px; left:50%; transform:translateX(-50%);
    width:300px; text-align:center; display:none;
    background:rgba(8,14,32,.82); border:1px solid rgba(110,231,255,.35);
    border-radius:11px; padding:8px 12px 9px; backdrop-filter:blur(4px);
    box-shadow:0 4px 20px rgba(0,0,0,.45);
  }
  #contract.on { display:block; animation:ctIn .35s cubic-bezier(.2,1.5,.4,1); }
  @keyframes ctIn { from{opacity:0; transform:translateX(-50%) translateY(-12px) scale(.9);} }
  #contract .ct { font-size:14px; font-weight:800; color:#6ee7ff; }
  #contract .cbar { height:7px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; margin:5px 0 4px; }
  #contract .cfill { height:100%; width:0%; border-radius:4px; background:linear-gradient(90deg,#6ee7ff,#7fe7c4); }
  #contract.urgent { border-color:rgba(255,120,90,.6); }
  #contract.urgent .ct { color:#ff9a6b; }
  #contract.urgent .cfill { background:linear-gradient(90deg,#ff7a5c,#ffb86b); }
  #contract .cgoal { font-size:11px; color:#9fb3d0; font-variant-numeric:tabular-nums; }

  /* ---------- overlays ---------- */
  .ov {
    position:absolute; inset:0; background:rgba(3,5,14,.93); pointer-events:auto;
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:24px;
  }
  .ov.on { display:flex; }
  .ov h1 { font-size:40px; font-weight:900; letter-spacing:1px; }
  .ov h2 { font-size:22px; color:#9fd8ff; }
  .ov p { color:#93a9c9; font-size:14px; line-height:1.7; max-width:520px; }
  .btn { padding:11px 26px; border-radius:10px; cursor:pointer; font-weight:800; font-size:14px;
         background:linear-gradient(135deg,#2b6cff,#6a3cff); border:1px solid rgba(160,190,255,.4);
         color:#e8f0ff; font-family:inherit; line-height:1.2; }
  .btn:focus-visible { outline:2px solid #9fd8ff; outline-offset:2px; }
  .btn:active { transform:scale(.97); }
  .btn.ghost { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
  #statTbl { font-size:14px; line-height:2; color:#c8d8ef; }
  #statTbl b { color:#ffe27a; margin-left:14px; font-variant-numeric:tabular-nums; }
  #grade { font-size:80px; font-weight:900; text-shadow:0 0 40px currentColor; line-height:1; }

  /* ---------- 엔딩 크레딧 크롤 ---------- */
  #ovCredits {
    position:absolute; inset:0; display:none; overflow:hidden;
    background:transparent;   /* 별 배경(캔버스)이 계속 흐르도록 투명 */
    pointer-events:auto;
  }
  #ovCredits.on { display:block; }
  #crawlStage {
    position:absolute; inset:0;
    perspective:400px; perspective-origin:50% 0%;
    -webkit-perspective:400px;
  }
  #crawlText {
    position:absolute; left:50%; top:100%; width:min(760px, 86vw);
    transform-origin:50% 0%;
    transform:translateX(-50%) rotateX(58deg);
    color:#ffd86b; text-shadow:0 0 18px rgba(255,180,50,.45);
    font-size:clamp(17px, 2.3vw, 27px); font-weight:800; line-height:1.85;
    text-align:center; letter-spacing:.5px;
  }
  #crawlText.run { animation:crawl 45s linear forwards; }
  @keyframes crawl {
    from { top:100%; }
    to   { top:-260%; }
  }
  #crawlText h2 { font-size:1.5em; margin:0 0 .7em; color:#fff0b8; letter-spacing:6px; }
  #crawlText p  { margin:0 0 1.5em; }
  #crawlText .rec { color:#8fd6ff; text-shadow:0 0 14px rgba(90,180,255,.4); }
  #crawlText .small { font-size:.72em; color:#c8b98a; letter-spacing:3px; line-height:2.4; }
  #crawlFade {
    position:absolute; left:0; right:0; top:0; height:45%;
    background:linear-gradient(180deg, #05060f 8%, rgba(5,6,15,.75) 42%, rgba(5,6,15,0) 100%);
    pointer-events:none;
  }
  #crawlSkip {
    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
    font-size:12px; color:#7f96bb; letter-spacing:1.5px; opacity:.75;
  }

  /* ---------- 튜토리얼 팁 ---------- */
  #ovTip { background:rgba(3,6,18,.72); backdrop-filter:blur(3px); }
  #tipCard {
    max-width:520px; padding:26px 30px 22px; border-radius:18px; text-align:center;
    background:linear-gradient(160deg, rgba(20,30,58,.98), rgba(11,16,36,.98));
    border:1px solid rgba(120,190,255,.34);
    box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 46px rgba(70,150,255,.14);
    animation:tipPop .42s cubic-bezier(.2,1.5,.4,1);
  }
  @keyframes tipPop {
    0% { opacity:0; transform:scale(.72) translateY(24px); }
    60% { opacity:1; transform:scale(1.04) translateY(0); }
    100% { transform:scale(1); }
  }
  #tipIcon { font-size:52px; line-height:1; margin-bottom:8px; }
  #tipTitle { font-size:23px; font-weight:900; color:#ffe27a; margin-bottom:12px; letter-spacing:.3px; }
  #tipBody { font-size:14.5px; line-height:1.85; color:#cbdcf2; }
  #tipBody b { color:#7fe7c4; }
  #tipKey {
    margin-top:18px; font-size:12px; color:#7f96bb; letter-spacing:1px;
    animation:tipBlink 1.5s ease-in-out infinite;
  }
  @keyframes tipBlink { 0%,100%{opacity:.4;} 50%{opacity:1;} }

  #startCard { max-width:560px; }
  #startCard .keys { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
  #startCard .keys div { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
                         border-radius:8px; padding:7px 13px; font-size:12.5px; }
  .logo { font-size:13px; letter-spacing:9px; color:#6ee7ff; font-weight:700; }

  /* 좁은 창에서 패널이 화면을 잡아먹지 않도록 */
  @media (max-width: 900px) {
    #panel { width:212px; padding:9px 8px 12px; }
    #money { font-size:24px; }
    .up { padding:7px 8px; gap:7px; }
    .up .ic { font-size:18px; width:21px; flex-basis:21px; }
    .up .nm { font-size:11.5px; }
    .up .ds { font-size:9.5px; }
    .up .cs { font-size:11px; }
    .up .key { display:none; }
    #progWrap { width:212px; }
  }