* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, sans-serif;
      transition: background 0.3s, color 0.3s;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      color: var(--text);
      gap: 15px;
    }

    /* LIGHT THEME (light red) */
    :root {
      --bg: linear-gradient(135deg, #ffcccc, #ff9999);
      --text: #3b0a0a;
      --card: rgba(255, 228, 228, 0.8);
      --border: rgba(255, 0, 0, 0.3);
    }

    /* DARK THEME */
    .dark {
      --bg: radial-gradient(circle at top, #0f172a, #000);
      --text: #e5e7eb;
      --card: rgba(15, 23, 42, 0.95);
      --border: rgba(148, 163, 184, 0.35);
    }

    .title {
      font-size: 2.2rem;
      font-weight: 800;
      text-shadow: 0 3px 6px rgba(0,0,0,0.35);
      letter-spacing: 1px;
    }

   .card {
     background: var(--card);
     border-radius: 26px;
     padding: 32px 28px 26px;
     width: 360px;
     height: 400px;
     text-align: center;
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
     border: 1px solid var(--border);
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;      /* center horizontally */
    }


    /* Toggle button */
    .toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.3);
      z-index: 10;
    }


    .coin-wrapper {    
      perspective: 1000px;
      height: 230px;            /* gives center spacing */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;         /* moves coin downward slightly */
    }

    

    .coin {
      width: 200px;
      height: 200px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 1s linear;
      transform: rotateY(0deg);
    }

    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.7);
      backface-visibility: hidden;
    }

    .heads { background-image: url("assets/coin-head.png"); }
    .tails { background-image: url("assets/coin-tail.png"); transform: rotateY(180deg); }

   .btn {
     border: none;
     cursor: pointer;
     padding: 14px 30px;
     font-size: 1.1rem;
     font-weight: 700;
     border-radius: 999px;
     background: linear-gradient(135deg, #ef4444, #b91c1c);
     color: white;
     box-shadow: 0 12px 30px rgba(239, 68, 68, 0.35);
     transition: 0.15s;
     margin-top: auto;     /* moves button to bottom */
     margin-bottom: 10px;  /* space from bottom edge */
    }

    #message {
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     color: #b91c1c;
     font-size: 1.5rem;
     font-weight: 600;
     text-shadow: 0 2px 6px rgba(0,0,0,0.4);
     margin-top: 15px;
     text-align: center;
    }

    #tagline {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  margin-top: 6px;
  opacity: 0.8;
  text-align: center;
}

    

    .btn:hover:not(:disabled) { transform: scale(1.05); }
    .btn:disabled { opacity: 0.6; }