:root{
    --bg1:#fff3f8;
    --bg2:#f2fbff;
    --bg3:#f8fff5;
  
    --card:#ffffffcc;
    --stroke:#ffffff;
    --shadow: 0 20px 60px rgba(19, 18, 25, 0.10);
  
    --text:#1f2430;
    --muted:#6b7280;
  
    --yes:#bfe9d0;
    --yes2:#a8d8ff;
  
    --no:#ffd6e8;
    --no2:#ffe9c7;
  
    --btnText:#1f2430;
  
    --radius:24px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    overflow:hidden;
  
    /* Important for layered background */
    position: relative;
    isolation: isolate;
  
    /* Base */
    background: #ffffff;
  }

  /* Soft pastel blobs */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(900px 600px at 18% 14%, rgba(207,239,255,0.75), transparent 60%),
      radial-gradient(900px 600px at 82% 18%, rgba(255,214,232,0.75), transparent 60%),
      radial-gradient(900px 650px at 50% 95%, rgba(200,247,216,0.75), transparent 62%),
      radial-gradient(650px 450px at 15% 85%, rgba(231,221,255,0.55), transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #fff 100%);
  }
  
  /* Pixel pattern + pixel stars overlay */
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0.55;
    mix-blend-mode: multiply;
    animation: twinkle 7s ease-in-out infinite;
  
    /* repeating pixel tile */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' shape-rendering='crispEdges'><rect x='6' y='6' width='6' height='6' fill='%23ffd6e8' opacity='0.55'/><rect x='22' y='10' width='4' height='4' fill='%23cfefff' opacity='0.55'/><rect x='48' y='8' width='6' height='6' fill='%23c8f7d8' opacity='0.55'/><rect x='12' y='34' width='5' height='5' fill='%23e7ddff' opacity='0.55'/><rect x='40' y='30' width='4' height='4' fill='%23ffe9c7' opacity='0.55'/><rect x='52' y='46' width='5' height='5' fill='%23cfefff' opacity='0.55'/><rect x='8' y='50' width='6' height='6' fill='%23c8f7d8' opacity='0.55'/><g fill='%23fff7c2' opacity='0.95'><rect x='16' y='18' width='2' height='2'/><rect x='14' y='18' width='2' height='2'/><rect x='18' y='18' width='2' height='2'/><rect x='16' y='16' width='2' height='2'/><rect x='16' y='20' width='2' height='2'/></g><g fill='%23ffffff' opacity='0.95'><rect x='46' y='16' width='2' height='2'/><rect x='44' y='16' width='2' height='2'/><rect x='48' y='16' width='2' height='2'/><rect x='46' y='14' width='2' height='2'/><rect x='46' y='18' width='2' height='2'/></g><g fill='%23fff7c2' opacity='0.95'><rect x='30' y='44' width='2' height='2'/><rect x='28' y='44' width='2' height='2'/><rect x='32' y='44' width='2' height='2'/><rect x='30' y='42' width='2' height='2'/><rect x='30' y='46' width='2' height='2'/></g><g fill='%23ffffff' opacity='0.95'><rect x='56' y='34' width='2' height='2'/><rect x='54' y='34' width='2' height='2'/><rect x='58' y='34' width='2' height='2'/><rect x='56' y='32' width='2' height='2'/><rect x='56' y='36' width='2' height='2'/></g></svg>");
    background-repeat: repeat;
    background-size: 220px 220px; /* bigger = chunkier pixels */
  }
  
  @keyframes twinkle{
    0%,100%{ opacity:0.48; filter: saturate(1.05); }
    50%{ opacity:0.70; filter: saturate(1.25); }
  }
  
  #confetti{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
  }
  
  .wrap{
    position:relative;
    min-height:100%;
    display:grid;
    place-items:center;
    padding:24px;
    z-index:2;
  }
  
  .card{
    width:min(520px, 92vw);
    padding:28px 26px 22px;
    border-radius:var(--radius);
    background:var(--card);
    border:1px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
  }
  
  .top{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
  }
  
  .sticker{
    width:84px;
    height:84px;
    border-radius:22px;
    background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.35));
    border:1px solid rgba(255,255,255,0.8);
    box-shadow: 0 10px 30px rgba(31, 36, 48, 0.08);
    display:grid;
    place-items:center;
    position:relative;
  }
  
  .bear{ font-size:38px; transform: translateY(2px); }
  .heart{
    position:absolute;
    right:-10px;
    bottom:-10px;
    font-size:22px;
    background:#fff;
    border-radius:999px;
    padding:6px 8px;
    border:1px solid rgba(255,255,255,0.9);
    box-shadow: 0 10px 20px rgba(31,36,48,0.08);
  }
  
  .title{
    margin:0;
    font-size: clamp(22px, 3.2vw, 30px);
    letter-spacing:-0.02em;
  }
  
  .subtitle{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.35;
  }
  
  .buttons{
    margin-top:20px;
    position:relative;
    width:100%;
    height:160px;
    --spread: 140px;
    --drop: 0px;
  }
  
  .btn:hover{ filter: brightness(1.03); } /* IMPORTANT: remove transform hover */
  
  #yesBtn, #noBtn{
    position:absolute;
    left:50%;
    top:50%;
  }
  
  #yesBtn{
    transform: translate(calc(-50% - var(--spread)/2), calc(-50% + var(--drop))) scale(var(--scale));
    transform-origin:center;
  }
  
  #noBtn{
    transform: translate(calc(-50% + var(--spread)/2), calc(-50% + var(--drop)));
  }
  
  .btn{
    border:none;
    border-radius:18px;
    padding:12px 18px;
    min-width:120px;
    cursor:pointer;
    font-weight:700;
    color:var(--btnText);
    box-shadow: 0 10px 25px rgba(31,36,48,0.08);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    position:relative;
    user-select:none;
  }
  
  .btn:focus{
    outline: 3px solid rgba(168,216,255,0.9);
    outline-offset: 3px;
  }
  
  .btn:hover{ transform: translateY(-1px); }
  
  .btn.yes{
    --scale: 1;
    background: linear-gradient(135deg, var(--yes), var(--yes2));
    transform: translateY(0) scale(var(--scale));
  }
  
  .btn.no{
    background: linear-gradient(135deg, var(--no), var(--no2));
  }
  
  .btn.ghost{
    background: #ffffff;
    border: 1px solid rgba(31,36,48,0.12);
    box-shadow:none;
  }
  
  .btn.smallText .btnLabel{
    font-size: 12px;
    line-height: 1.1;
  }
  
  .btnLabel{
    display:block;
    white-space:normal;
    max-width: 180px;
  }
  
  .hint{
    margin:18px 0 0;
    text-align:center;
    color:rgba(31,36,48,0.55);
    font-size:12px;
  }
  
  .result{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(10px);
    z-index:3;
  }
  
  .hidden{ display:none; }
  
  .resultCard{
    width:min(520px, 92vw);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.92);
    border:1px solid rgba(255,255,255,0.9);
    box-shadow: var(--shadow);
    padding:26px;
    text-align:center;
  }
  
  .resultEmoji{ font-size: 40px; }
  .resultTitle{ margin:10px 0 6px; letter-spacing:-0.02em; }
  .resultText{ margin:0 0 16px; color:var(--muted); }
  
  @media (prefers-reduced-motion: reduce){
    .btn{ transition:none; }
  }

  .gif{
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 18px;
  }
  
  #noBtn.teleport{
    position: fixed !important;
    z-index: 10;
    will-change: left, top, transform;
    transition: left .12s ease, top .12s ease, transform .12s ease;
  }

/* Animated pixel star overlay (separate from the tile) */
.bgStars{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
  
  /* crisp pixel stars */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240' shape-rendering='crispEdges'><rect width='360' height='240' fill='none'/>\
    <g opacity='0.95' fill='%23fff7c2'>\
      <rect x='34' y='28' width='3' height='3'/><rect x='31' y='28' width='3' height='3'/><rect x='37' y='28' width='3' height='3'/><rect x='34' y='25' width='3' height='3'/><rect x='34' y='31' width='3' height='3'/>\
      <rect x='210' y='42' width='3' height='3'/><rect x='207' y='42' width='3' height='3'/><rect x='213' y='42' width='3' height='3'/><rect x='210' y='39' width='3' height='3'/><rect x='210' y='45' width='3' height='3'/>\
      <rect x='302' y='98' width='3' height='3'/><rect x='299' y='98' width='3' height='3'/><rect x='305' y='98' width='3' height='3'/><rect x='302' y='95' width='3' height='3'/><rect x='302' y='101' width='3' height='3'/>\
      <rect x='120' y='162' width='3' height='3'/><rect x='117' y='162' width='3' height='3'/><rect x='123' y='162' width='3' height='3'/><rect x='120' y='159' width='3' height='3'/><rect x='120' y='165' width='3' height='3'/>\
    </g>\
    <g opacity='0.95' fill='%23ffffff'>\
      <rect x='80' y='70' width='2' height='2'/><rect x='78' y='70' width='2' height='2'/><rect x='82' y='70' width='2' height='2'/><rect x='80' y='68' width='2' height='2'/><rect x='80' y='72' width='2' height='2'/>\
      <rect x='260' y='150' width='2' height='2'/><rect x='258' y='150' width='2' height='2'/><rect x='262' y='150' width='2' height='2'/><rect x='260' y='148' width='2' height='2'/><rect x='260' y='152' width='2' height='2'/>\
      <rect x='18' y='190' width='2' height='2'/><rect x='16' y='190' width='2' height='2'/><rect x='20' y='190' width='2' height='2'/><rect x='18' y='188' width='2' height='2'/><rect x='18' y='192' width='2' height='2'/>\
    </g></svg>");
    background-repeat: repeat;
    background-size: 520px 360px;
  
    /* twinkle + slight drift */
    animation: starsTwinkle 3.6s ease-in-out infinite,
               starsDrift 18s linear infinite;
    mix-blend-mode: screen;
    filter: saturate(1.1);
  }
  
  @keyframes starsTwinkle{
    0%,100%{ opacity: 0.55; filter: saturate(1.05) brightness(1); }
    50%    { opacity: 0.95; filter: saturate(1.25) brightness(1.15); }
  }
  
  @keyframes starsDrift{
    from { background-position: 0 0; }
    to   { background-position: 160px 90px; }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .bgStars{ animation: none; }
  }