:root {
      --navy: #07172b;
      --cyan: #45e6ff;
      --gold: #ffd76a;
      --glass: rgba(6, 24, 45, 0.72);
      --line: rgba(123, 226, 255, 0.34);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #020b17; color: white; font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; }
    canvas { display: block; }
    #game { position: fixed; inset: 0; }
    .hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
    .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px; }
    .panel { background: var(--glass); border: 1px solid var(--line); box-shadow: 0 10px 32px rgba(0,0,0,.24); backdrop-filter: blur(12px); border-radius: 16px; }
    .brand { padding: 12px 15px; min-width: 230px; }
    .brand strong { font-size: 18px; letter-spacing: -.3px; }
    .brand small { display: block; margin-top: 3px; color: #a9dbe8; font-size: 11px; }
    .stats { display: grid; grid-template-columns: repeat(3, minmax(75px, 1fr)); gap: 8px; padding: 9px; }
    .stat { min-width: 82px; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.06); }
    .stat span { display: block; color: #9fc5d0; font-size: 10px; }
    .stat b { display: block; font-size: 17px; margin-top: 2px; }
    .progress-wrap { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: min(440px, 44vw); padding: 10px 12px; }
    .progress-label { display:flex; justify-content:space-between; font-size:11px; color:#ccecf5; margin-bottom:7px; }
    .progress { height: 8px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
    .progress > div { width: 0%; height:100%; border-radius:999px; background: linear-gradient(90deg, #43e2ff, #ffe279); box-shadow: 0 0 14px rgba(69,230,255,.65); transition: width .25s ease; }
    .mission { position: absolute; left: 16px; bottom: 16px; width: min(350px, calc(100vw - 32px)); padding: 14px 16px; }
    .mission h3 { margin: 0 0 7px; font-size: 14px; color: var(--gold); }
    .mission p { margin: 0; font-size: 12px; line-height: 1.6; color: #d6edf4; }
    .key { display: inline-flex; align-items:center; justify-content:center; min-width: 22px; height: 20px; margin: 0 2px; padding: 0 6px; border-radius: 5px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1); color:white; font-size:10px; }
    #message { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%) scale(.9); opacity: 0; padding: 12px 18px; border-radius: 14px; background: rgba(4, 19, 35, .82); border: 1px solid rgba(91,225,255,.5); color: #eaffff; font-weight: 800; text-align:center; transition: opacity .2s, transform .2s; text-shadow: 0 2px 16px rgba(0,0,0,.8); }
    #message.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .overlay { position: fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; background: radial-gradient(circle at 50% 38%, rgba(15,88,119,.4), rgba(2,9,20,.93) 60%); }
    .card { width:min(760px, 96vw); padding: 34px; text-align:center; background: linear-gradient(180deg, rgba(6,31,55,.94), rgba(3,16,31,.96)); border:1px solid rgba(99,226,255,.42); border-radius:26px; box-shadow: 0 30px 100px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.1); }
    .eyebrow { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(69,230,255,.11); border:1px solid rgba(69,230,255,.3); color:#8beeff; font-size:11px; letter-spacing:1.3px; }
    h1 { margin: 17px 0 10px; font-size: clamp(32px, 6vw, 64px); line-height:1.05; letter-spacing:-2.5px; }
    h1 em { display:block; font-style:normal; color:var(--gold); font-size:.48em; letter-spacing:-.6px; margin-top:10px; }
    .intro { max-width:590px; margin:0 auto; color:#c3dce5; font-size:14px; line-height:1.7; }
    .feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }
    .feature { padding:13px 10px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); }
    .feature b { display:block; font-size:13px; margin-bottom:4px; }
    .feature span { color:#99bdc9; font-size:11px; }
    button { pointer-events:auto; border:0; cursor:pointer; color:#06202a; font-weight:900; border-radius:14px; padding:14px 25px; font-size:15px; background: linear-gradient(135deg, #63edff, #ffe079); box-shadow: 0 10px 35px rgba(77,226,255,.24); transition: transform .16s, filter .16s; }
    button:hover { transform: translateY(-2px); filter:brightness(1.05); }
    .credit { margin-top:13px; color:#668c9a; font-size:10px; }
    #gameover { display:none; }
    #gameover .card { max-width:540px; }
    #gameover h2 { font-size:38px; margin:10px 0; }
    .touch { display:none; position:fixed; inset:0; pointer-events:none; z-index:7; }
    .stick, .boost { pointer-events:auto; position:absolute; bottom:22px; }
    .stick { left:22px; width:142px; height:142px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(3,20,35,.35); backdrop-filter:blur(7px); }
    .stick button { position:absolute; width:46px; height:46px; min-width:0; padding:0; border-radius:50%; color:white; background:rgba(255,255,255,.12); box-shadow:none; border:1px solid rgba(255,255,255,.18); }
    .stick .up { top:5px; left:48px; }.stick .down { bottom:5px; left:48px; }.stick .left { left:5px; top:48px; }.stick .right { right:5px; top:48px; }
    .boost { right:24px; width:82px; height:82px; border-radius:50%; padding:0; color:white; background:rgba(255,208,82,.2); border:1px solid rgba(255,223,119,.55); box-shadow:0 0 28px rgba(255,214,105,.16); }
    #mute { position:fixed; right:16px; bottom:16px; z-index:8; width:42px; height:42px; padding:0; border-radius:12px; color:#d7f6ff; font-size:18px; background:rgba(5,24,42,.66); border:1px solid rgba(112,220,255,.24); box-shadow:none; }
    #damageFlash { position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; background:radial-gradient(circle, transparent 30%, rgba(255,54,64,.48)); transition:opacity .2s; }
    @media (max-width: 780px) {
      .topbar { padding:10px; }
      .brand { min-width:0; padding:10px 11px; }
      .brand strong { font-size:14px; }
      .stats { grid-template-columns:repeat(3,1fr); padding:6px; }
      .stat { min-width:0; padding:7px; }
      .stat b { font-size:14px; }
      .progress-wrap { top:82px; width:calc(100vw - 20px); }
      .mission { bottom:176px; left:10px; width:calc(100vw - 20px); }
      .feature-row { grid-template-columns:1fr; }
      .card { padding:25px 18px; }
      .touch { display:block; }
      #mute { bottom:118px; }
    }