* { box-sizing: border-box; margin: 0; padding: 0; touch-action: none; -webkit-tap-highlight-color: transparent; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #07111f; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; color: #dff9ff; user-select: none; -webkit-user-select: none; }
    #wrap { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% -10%, #163b5a 0%, #07111f 55%, #030712 100%); }
    canvas { display: block; width: 100%; height: 100%; }
    #hud {
      position: absolute; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top));
      z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none;
      text-shadow: 0 2px 14px rgba(0,0,0,.55);
    }
    #brand { font-weight: 900; letter-spacing: -.8px; font-size: 22px; color: #8ff7ff; }
    #brand small { display: block; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #7dd3fc; opacity: .78; margin-top: 2px; }
    #stats { text-align: right; font-size: 12px; line-height: 1.55; color: #b8e8ff; }
    #stats b { color: #f8fbff; font-size: 16px; }
    #chargeShell { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(340px, calc(100vw - 48px)); z-index: 2; pointer-events: none; }
    #hint { text-align: center; margin-bottom: 10px; font-size: 12px; color: rgba(222, 249, 255, .7); }
    #chargeBar { height: 13px; border-radius: 999px; background: rgba(219, 244, 255, .16); border: 1px solid rgba(142, 247, 255, .25); overflow: hidden; box-shadow: inset 0 0 12px rgba(0,0,0,.28); }
    #chargeFill { width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #34d399, #fde047, #fb7185); box-shadow: 0 0 18px rgba(125, 211, 252, .5); transition: width .035s linear; }
    #timeoutLabel { text-align: center; margin: 0 0 8px; font-size: 11px; color: rgba(222, 249, 255, .72); }
    #timeoutBar { height: 8px; border-radius: 999px; background: rgba(251, 113, 133, .14); border: 1px solid rgba(251, 113, 133, .24); overflow: hidden; margin-bottom: 10px; box-shadow: inset 0 0 10px rgba(0,0,0,.25); }
    #timeoutFill { width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fb7185, #fde047, #34d399); box-shadow: 0 0 14px rgba(251,113,133,.35); transition: width .08s linear; }
    #overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(3, 7, 18, .35); opacity: 0; pointer-events: none; transition: opacity .18s ease; padding: 24px; }
    #overlay.show { opacity: 1; pointer-events: auto; }
    .card { width: min(360px, 92vw); border: 1px solid rgba(142, 247, 255, .25); border-radius: 24px; background: rgba(8, 20, 35, .9); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(16px); padding: 26px 22px 22px; text-align: center; transform: translateY(12px) scale(.98); transition: transform .2s ease; }
    #overlay.show .card { transform: translateY(0) scale(1); }
    .card h1 { font-size: 28px; color: #8ff7ff; margin-bottom: 8px; letter-spacing: -1px; }
    .card h2 { font-size: 20px; color: #f8fbff; margin-bottom: 12px; }
    .card p { font-size: 13px; line-height: 1.5; color: #b8e8ff; margin-bottom: 18px; }
    .card p.credits-copy { text-align: left; white-space: pre-line; }
    .button { width: 100%; border: 0; border-radius: 16px; padding: 15px 16px; font: inherit; font-weight: 900; color: #03111b; background: linear-gradient(135deg, #8ff7ff, #34d399); cursor: pointer; }
    .button:active { transform: scale(.98); }
    .secondary { margin-top: 10px; background: transparent; color: #8ff7ff; border: 1px solid rgba(142, 247, 255, .28); }
    #stealthBtn {
      position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3;
      min-width: 108px; min-height: 48px; padding: 8px 12px; border-radius: 16px; border: 1px solid rgba(142,247,255,.28);
      background: rgba(8,20,35,.62); color: #8ff7ff; font: inherit; font-size: 13px; font-weight: 950; letter-spacing: .3px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(10px);
    }
    #stealthBtn small { display: block; margin-top: 1px; color: rgba(223,249,255,.62); font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
    #stealthBtn.active { background: linear-gradient(135deg, rgba(142,247,255,.9), rgba(52,211,153,.86)); color: #03111b; box-shadow: 0 0 22px rgba(142,247,255,.38); }
    #stealthBtn.active small { color: rgba(3,17,27,.65); }
    .hidden { display: none !important; }

    .ttl-empty { opacity: .25; }
    #stats b.danger { color: #fb7185; }

    .settings-panel { text-align: left; margin: 6px 0 14px; }
    .setting-row { display: block; padding: 11px 0; border-top: 1px solid rgba(142, 247, 255, .16); color: #b8e8ff; font-size: 12px; }
    .setting-row:first-child { border-top: 0; }
    .setting-row span { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
    .setting-row strong { color: #8ff7ff; font-size: 11px; font-weight: 900; white-space: nowrap; }
    .setting-row select,
    .setting-row input[type="range"] { width: 100%; }
    .setting-row select {
      border: 1px solid rgba(142, 247, 255, .28); border-radius: 12px; padding: 10px 12px;
      background: rgba(3, 17, 27, .82); color: #dff9ff; font: inherit; font-size: 12px; outline: none;
    }
    .setting-row input[type="range"] { accent-color: #8ff7ff; }
    .settings-note { margin: 8px 0 0 !important; color: rgba(223,249,255,.64) !important; font-size: 11px !important; line-height: 1.4 !important; }
    .card.settings-open { max-height: min(720px, 92vh); overflow-y: auto; touch-action: pan-y; }
    .card.settings-open * { touch-action: pan-y; }