:root{
    --bg-core:#2b0000;
    --bg-edge:#070000;
    --flame:#ff1a1a;
    --gold:#ffd700;
    --card:rgba(35,0,0,0.85);

    --t0:#ffd700;
    --t1:#4ade80;
    --t2:#38bdf8;
    --t3:#c084fc;
    --t4:#ff3b3b;
    --tgod:#ffe36e;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0; padding:0; height:100%;
    background: radial-gradient(circle at center, var(--bg-core) 0%, var(--bg-edge) 75%);
    font-family:'Segoe UI', sans-serif;
    color:#f5f5f5;
    overflow-x:hidden;
    min-height:100vh;
  }

  #particles{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
  .particle{
    position:absolute; bottom:-60px; font-size:1.8rem; opacity:0.55;
    animation-name: floatUp; animation-timing-function: linear; animation-iteration-count: infinite;
  }
  @keyframes floatUp{
    0%   { transform: translateY(0) rotate(0deg); opacity:0; }
    10%  { opacity:0.6; }
    100% { transform: translateY(-110vh) rotate(25deg); opacity:0; }
  }

  #app{
    position:relative; z-index:1;
    max-width:640px; margin:0 auto;
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px 18px;
  }

  .page{ display:none; width:100%; text-align:center; }
  .page.active{ display:block; animation: fadeIn 0.5s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- comic-panel look: thick black outline + halftone dots ---------- */
  .card, .meme-card{
    position:relative;
    overflow:hidden;
    background:var(--card);
    border:4px solid #000;
    border-radius:18px;
    padding:28px 22px;
    box-shadow:0 0 0 3px var(--flame), 0 0 30px rgba(255,0,0,0.25);
  }
  .card::before, .meme-card::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.09) 12%, transparent 13%);
    background-size:14px 14px;
    opacity:0.55;
    z-index:0;
    pointer-events:none;
  }
  /* keep real content above the dot overlay */
  .card > *, .meme-card > *{ position:relative; z-index:1; }

  h1.title{
    font-family:'Arial Black', Impact, sans-serif;
    font-size:2.4rem;
    letter-spacing:1px;
    color:#fff;
    text-shadow:0 0 10px #ff0000, 0 0 22px #ff0000;
    margin:10px 0 6px;
  }

  h2.subhead{
    font-family:'Arial Black', Impact, sans-serif;
    color:var(--flame);
    font-size:1.5rem;
    margin:6px 0;
    text-shadow:0 0 8px rgba(255,26,26,0.6);
  }

  p.subtext{ color:#e6b8b8; margin:4px 0 18px; font-size:0.95rem; }

  .emoji-row{ font-size:2.2rem; margin-bottom:8px; }
  .emoji-row .fire{ animation: glow 1.4s ease-in-out infinite alternate; }
  .emoji-row .alarm{ display:inline-block; animation: shake 0.5s infinite; }
  @keyframes glow{ from{ filter:drop-shadow(0 0 4px #ff5500);} to{ filter:drop-shadow(0 0 18px #ff0000);} }
  @keyframes shake{ 0%,100%{ transform:rotate(-8deg);} 50%{ transform:rotate(8deg);} }

  .disclaimer{ font-size:0.78rem; color:#9a9a9a; max-width:420px; margin:18px auto 26px; line-height:1.4; }

  .btn{
    font-family:'Arial Black', Impact, sans-serif;
    background: linear-gradient(135deg, var(--flame), #a30000);
    color:#fff; border:none; border-radius:999px;
    padding:14px 30px; font-size:1.05rem; cursor:pointer;
    box-shadow:0 0 14px rgba(255,26,26,0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 0 24px rgba(255,60,60,0.9); }
  .btn:active{ transform:translateY(0) scale(0.98); }
  .btn.secondary{ background: transparent; border:2px solid var(--gold); color:var(--gold); box-shadow:none; }
  .btn.secondary:hover{ box-shadow:0 0 14px rgba(255,215,0,0.6); }
  .btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

  #rankInput{
    width:100%; max-width:220px;
    padding:12px 14px; font-size:1.2rem; text-align:center;
    background:#1a0000; color:var(--gold);
    border:2px solid var(--gold); border-radius:10px;
    outline:none; margin:10px 0 18px;
  }
  #rankInput::placeholder{ color:#9c7f00; }

  .roast-box{
    margin-top:20px; padding:18px; border-radius:14px;
    background:rgba(0,0,0,0.35); border-left:5px solid var(--flame);
    font-size:1rem; line-height:1.5; display:none;
  }
  .roast-box.show{ display:block; animation: fadeIn 0.4s ease; }

  .slide-counter{ color:#e6b8b8; font-size:0.85rem; margin-bottom:6px; }

  .sticker-wrap{
    position:relative; width:180px; height:180px; margin:14px auto 6px;
    display:flex; align-items:center; justify-content:center;
  }

  .sticker-halftone{
    position:absolute; inset:0; border-radius:50%;
    background-image: radial-gradient(rgba(0,0,0,0.35) 14%, transparent 15%);
    background-size:10px 10px;
    opacity:0.5;
  }

  .sticker-burst{
    position:absolute; width:158px; height:158px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
    transition: background 0.3s ease;
  }

  .sticker-circle{
    position:relative; z-index:2;
    width:130px; height:130px; border-radius:50%;
    background:#160000;
    border:5px solid #000;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
  }
  .sticker-circle svg{ width:100%; height:100%; display:block; }

  /* character part animations (applied inside injected SVG markup) */
  svg .anim-wave, svg .anim-stick, svg .anim-shake, svg .anim-float, svg .anim-spin{
    transform-box: fill-box; transform-origin:center;
  }
  @keyframes waveArm{ 0%,100%{ transform:rotate(0deg);} 50%{ transform:rotate(18deg);} }
  svg .anim-wave{ animation: waveArm 1.1s ease-in-out infinite; }

  @keyframes swingStick{ 0%,100%{ transform:rotate(-22deg);} 50%{ transform:rotate(18deg);} }
  svg .anim-stick{ animation: swingStick 0.5s ease-in-out infinite; }

  @keyframes shakeHands{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
  svg .anim-shake{ animation: shakeHands 0.35s ease-in-out infinite; }

  @keyframes floatApple{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
  svg .anim-float{ animation: floatApple 1.3s ease-in-out infinite; }

  @keyframes spinStars{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  svg .anim-spin{ animation: spinStars 1.8s linear infinite; }

  @keyframes bounceGood{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
  .bucket-good .sticker-circle{ animation: bounceGood 1.5s ease-in-out infinite; }

  @keyframes shakePoor{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-3px);} 75%{ transform:translateX(3px);} }
  .bucket-poor .sticker-circle{ animation: shakePoor 0.28s ease-in-out infinite; }

  .char-name{ font-family:'Arial Black', Impact, sans-serif; font-size:1.2rem; color:#fff; margin:10px 0 2px; }

  .speech-bubble{
    position:relative; background:#fff; color:#1a0000;
    border-radius:16px; padding:14px 16px; margin:14px auto 4px;
    max-width:340px; font-size:0.95rem; line-height:1.4;
    box-shadow:0 4px 14px rgba(0,0,0,0.4);
  }
  .speech-bubble::after{
    content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    border-width:0 10px 10px 10px; border-style:solid;
    border-color:transparent transparent #fff transparent;
  }

  .tier-tag{ display:inline-block; margin-top:10px; padding:4px 12px; border-radius:999px; font-size:0.75rem; font-weight:bold; color:#160000; }

  .meme-card{
    background:rgba(20,0,0,0.6);
    box-shadow:0 0 0 3px var(--gold), 0 0 30px rgba(255,215,0,0.25);
  }
  .meme-rank{ color:var(--gold); font-size:1.1rem; margin-top:2px; }

  .trophy-collage{
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:10px; max-width:300px; margin:22px auto; align-items:center; justify-items:center;
  }
  .trophy-collage .mini-sticker{
    width:64px; height:64px; border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    border:3px solid #000;
  }
  .trophy-collage .mini-sticker svg{ width:100%; height:100%; }
  .trophy-center{
    grid-column:2; grid-row:1 / span 2;
    font-size:4.5rem; filter:drop-shadow(0 0 14px var(--gold));
    animation: glow 1.5s ease-in-out infinite alternate;
  }

  .award-tagline{ font-family:'Arial Black', Impact, sans-serif; color:var(--flame); font-size:1.15rem; margin:16px 0 8px; text-shadow:0 0 8px rgba(255,26,26,0.5); }
  .motivation{ font-size:0.9rem; color:#e6b8b8; margin-bottom:14px; }
  .thankyou{ font-family:'Arial Black', Impact, sans-serif; font-size:1.4rem; color:#fff; text-shadow:0 0 12px var(--gold); margin:14px 0; }

  /* ---------- mute toggle ---------- */
  .mute-btn{
    position:fixed; top:14px; right:14px; z-index:50;
    width:42px; height:42px; border-radius:50%;
    background:rgba(0,0,0,0.55); border:2px solid var(--gold);
    color:var(--gold); font-size:1.2rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .mute-btn:hover{ box-shadow:0 0 12px rgba(255,215,0,0.6); }

  /* ---------- confetti ---------- */
  #confettiContainer{
    position:fixed; inset:0; overflow:hidden; z-index:40; pointer-events:none;
  }
  .confetti-piece{
    position:absolute; top:-20px; width:8px; height:14px;
    opacity:0.9; animation-name: confettiFall; animation-timing-function: linear;
  }
  @keyframes confettiFall{
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(540deg); }
  }

  /* ---------- GOD TIER rainbow tag ---------- */
  .god-tag{
    background: linear-gradient(90deg,#ffd700,#ff8a00,#ff1a1a,#a742f5,#38bdf8,#4ade80,#ffd700) !important;
    background-size:400% 100% !important;
    animation: rainbowMove 2.5s linear infinite;
    color:#160000 !important;
  }
  @keyframes rainbowMove{ 0%{ background-position:0% 50%; } 100%{ background-position:400% 50%; } }

  @media (max-width:420px){
    h1.title{ font-size:1.9rem; }
    .sticker-wrap{ width:160px; height:160px; }
  }