:root{
    --bg:#0B0A09;          /* near-black, matches godofprompt.ai #161415 family */
    --panel:#161415;
    --line:#2A2825;
    --white:#FFFFFF;
    --grey:#8E8B85;
    --yellow:#F5C518;      /* GOP accent */
    --yellow-dim:#A8870F;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:var(--white);
    font-family:'Roboto',Arial,Helvetica,sans-serif;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    overscroll-behavior:none;
    -webkit-tap-highlight-color:transparent;
  }
  #stage{
    position:relative;
    width:min(100vw,480px);
    height:min(100vh,860px);
    height:min(100dvh,860px);
    overflow:hidden;
  }
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

  /* ---------- overlay panels ---------- */
  .overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    background:rgba(11,10,9,.82);
    backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
    z-index:5;
  }
  .overlay.show{opacity:1;pointer-events:auto}
  .card{
    width:100%;max-width:380px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px 26px;
    text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,.6);
  }
  .eyebrow{
    font-size:11px;font-weight:700;letter-spacing:.22em;
    color:var(--yellow);text-transform:uppercase;margin-bottom:14px;
  }
  .logo-mark{
    display:flex;justify-content:center;
    margin-bottom:6px;line-height:0;
  }
  .logo-mark svg{
    /* Soft gold glow ties the brand mark into the game's light language
       (falling words + paddle carry the same halo). */
    filter:drop-shadow(0 0 12px rgba(253,195,2,.32));
  }
  h1{
    font-weight:900;font-size:44px;line-height:.95;
    letter-spacing:-.02em;margin-bottom:12px;
  }
  h1 .yel{color:var(--yellow)}
  h2{font-weight:900;font-size:26px;line-height:1.1;margin-bottom:10px}
  .sub{font-size:15px;line-height:1.5;color:var(--grey);margin-bottom:22px}
  .sub b{color:var(--white);font-weight:700}
  .sub .yel{color:var(--yellow);font-weight:700}

  .howto{
    display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:24px;
  }
  .pill{
    font-size:12px;font-weight:700;letter-spacing:.04em;
    padding:7px 12px;border-radius:999px;border:1px solid var(--line);
    color:var(--grey);background:rgba(255,255,255,.03);
  }
  .pill.catch{color:#111;background:var(--yellow);border-color:var(--yellow)}
  .pill.dodge{color:var(--grey);text-decoration:line-through}

  .btn{
    display:block;width:100%;
    font-family:'Roboto',sans-serif;font-weight:900;font-size:16px;
    letter-spacing:.08em;text-transform:uppercase;
    /* GOP brand gold-pill CTA gradient (from gop-web-temp design system) */
    background:linear-gradient(to top, #fdc302 0%, #ffd83a 100%);color:#111;
    border:none;border-radius:12px;
    padding:16px 18px;cursor:pointer;
    transition:transform .08s ease,filter .15s ease;
  }
  .btn:hover{filter:brightness(1.06)}
  .btn:active{transform:scale(.97)}
  .btn.ghost{
    background:transparent;color:var(--grey);
    border:1px solid var(--line);font-weight:700;font-size:13px;
    margin-top:10px;padding:12px;
  }
  .btn.ghost:hover{color:var(--white);border-color:var(--grey)}
  .btn[disabled]{opacity:.55;cursor:wait}

  .foot{
    margin-top:18px;font-size:12px;line-height:1.5;color:var(--grey);
  }
  .foot a{color:var(--yellow);text-decoration:none;font-weight:700}

  /* stats row on game-over */
  .stats{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:8px;margin:18px 0 20px;
  }
  .stat{
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);border-radius:12px;padding:12px 6px;
  }
  .stat .v{font-weight:900;font-size:22px;color:var(--yellow)}
  .stat .k{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--grey);text-transform:uppercase;margin-top:3px}
  .verdict{
    font-size:14px;line-height:1.55;color:var(--white);
    border-left:3px solid var(--yellow);
    padding:10px 14px;margin:0 0 22px;text-align:left;
    background:rgba(245,197,24,.06);border-radius:0 10px 10px 0;
  }
  .verdict i{color:var(--grey);font-style:normal;font-size:12px;display:block;margin-top:6px}

  /* email form */
  .field{position:relative;margin-bottom:12px}
  input[type=email]{
    width:100%;font-family:'Roboto',sans-serif;font-size:15px;font-weight:500;
    background:#0E0D0C;border:1px solid var(--line);border-radius:12px;
    color:var(--white);padding:15px 16px;outline:none;
    transition:border-color .15s ease;
  }
  input[type=email]::placeholder{color:#5d5a54}
  input[type=email]:focus{border-color:var(--yellow)}
  .field.err input{border-color:#d24a3a}
  .err-msg{display:none;font-size:12px;color:#d24a3a;text-align:left;margin:6px 2px 0;font-weight:500}
  .field.err .err-msg{display:block}

  /* offer card */
  .offer-box{
    border:1px dashed var(--yellow-dim);border-radius:14px;
    padding:18px 16px;margin:18px 0 20px;
    background:rgba(245,197,24,.05);
  }
  .offer-name{font-weight:700;font-size:14px;margin-bottom:8px}
  .price{font-weight:900;font-size:30px;color:var(--yellow)}
  .price s{color:var(--grey);font-weight:500;font-size:18px;margin-right:8px}
  .price-note{font-size:12px;color:var(--grey);margin-top:4px}
  .code-row{
    display:flex;gap:8px;margin-top:14px;
  }
  .code{
    flex:1;display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:18px;letter-spacing:.18em;
    border:1px solid var(--yellow);border-radius:10px;color:var(--yellow);
    padding:11px 8px;background:#0E0D0C;user-select:all;
  }
  .copy-btn{
    font-family:'Roboto',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;
    background:transparent;border:1px solid var(--line);border-radius:10px;
    color:var(--grey);padding:0 16px;cursor:pointer;text-transform:uppercase;
  }
  .copy-btn:hover{color:var(--white);border-color:var(--grey)}
  .copy-btn.done{color:#111;background:var(--yellow);border-color:var(--yellow)}

  /* HUD mute */
  #mute{
    position:absolute;top:12px;left:12px;z-index:6;
    width:34px;height:34px;border-radius:9px;
    background:rgba(22,20,21,.7);border:1px solid var(--line);
    color:var(--grey);font-size:15px;cursor:pointer;display:flex;
    align-items:center;justify-content:center;
  }
  #mute:hover{color:var(--white)}
  @media (max-height:700px){
    h1{font-size:36px}.card{padding:22px 20px}
    .stats{margin:12px 0 14px}.sub{margin-bottom:16px}
  }