:root{
    --bg:#0a0e1a;
    --surface:#141b2e;
    --surface-2:#1c2540;
    --mustard:#f5b700;
    --mustard-dim:#8a670a;
    --blue:#4c8dff;
    --pink:#ff5c8a;
    --good:#34d399;
    --bad:#f87171;
    --ink:#edeff7;
    --muted:#8791ad;
  }
  *{box-sizing:border-box;}
  html,body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;}
  .font-display{font-family:'Space Grotesk', sans-serif;}
  body{
    background-image:
      radial-gradient(circle at 15% 8%, rgba(76,141,255,0.10), transparent 40%),
      radial-gradient(circle at 85% 92%, rgba(255,92,138,0.10), transparent 40%);
    min-height:100vh;
  }
  ::selection{background:var(--mustard);color:#1a1200;}

  /* --- Bread-slice shaped slots --- */
  .bread-top{ border-radius: 30px 30px 8px 8px; }
  .bread-bottom{ border-radius: 8px 8px 30px 30px; }
  .anchor-slice{ border-radius: 14px; }
  .slot-filled{
    background: var(--surface);
    border: 2px solid rgba(255,255,255,0.1);
  }
  .slot-filled:hover{ border-color: rgba(255,255,255,0.22); }
  .slot-empty{
    border:2px dashed rgba(135,145,173,0.35);
    transition: border-color .2s ease, background .2s ease;
  }
  .slot-empty.armed{
    border-color: var(--mustard);
    background: rgba(245,183,0,0.06);
    cursor:pointer;
  }

  /* --- Flip card mechanics: grid-stack technique so the box always
     grows to fit whichever face is tallest (no clipped / leaking text) --- */
  .flip-scene{ perspective: 1400px; width:100%; }
  .flip-card{
    display:grid;
    width:100%;
    transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
    transform-style: preserve-3d;
  }
  .flip-card.flipped{ transform: rotateY(180deg); }
  .flip-face{
    grid-area: 1 / 1;
    min-width:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:inherit;
    padding: 0.9rem 1rem;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .flip-back{ transform: rotateY(180deg); }

  /* option card selection */
  .opt-card{
    position:relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .25s ease;
    min-width:0;
  }
  .opt-card:hover{ transform: translateY(-3px); }
  .opt-card.selected{
    border-color: var(--mustard) !important;
    box-shadow: 0 0 0 3px rgba(245,183,0,0.25), 0 10px 20px -8px rgba(245,183,0,0.4);
    transform: translateY(-4px) scale(1.02);
  }
  .opt-card.used{ opacity:0; pointer-events:none; transform: scale(.7); }
  .opt-card.best-pick{
    border-color: var(--mustard) !important;
    box-shadow: 0 0 0 2px rgba(245,183,0,0.3);
  }
  .best-pick-badge{
    position:absolute;
    top:-9px; right:-6px;
    background: var(--mustard);
    color:#1a1200;
    font-size:9px;
    font-weight:800;
    letter-spacing:.02em;
    padding:2px 7px;
    border-radius:999px;
    box-shadow:0 2px 6px rgba(0,0,0,0.35);
    white-space:nowrap;
  }
  .opt-card .opt-title{
    overflow-wrap:break-word;
    word-break:break-word;
    hyphens:auto;
  }
  .opt-card .opt-top-row{ flex-wrap: wrap; row-gap: .25rem; }

  @keyframes pulseOnce{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.05); }
    100%{ transform:scale(1); }
  }
  .pulse-once{ animation: pulseOnce .4s ease; }

  @keyframes heartBreak{
    0%{ transform:scale(1) rotate(0deg); opacity:1; }
    60%{ transform:scale(1.3) rotate(-8deg); }
    100%{ transform:scale(0.4) rotate(10deg); opacity:0.25; }
  }
  .heart-lost{ animation: heartBreak .5s ease forwards; }

  @keyframes slideFade{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .slide-fade{ animation: slideFade .35s ease both; }

  @keyframes toastIn{
    from{ opacity:0; transform:translate(-50%, 10px); }
    to{ opacity:1; transform:translate(-50%, 0); }
  }
  .toast-in{ animation: toastIn .25s ease both; }

  .banner-good{ background: linear-gradient(135deg, rgba(52,211,153,0.18), rgba(52,211,153,0.05)); border-color: var(--good); }
  .banner-bad{ background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(248,113,113,0.05)); border-color: var(--bad); }

  .badge-history{ background: rgba(76,141,255,0.15); color:#a8c6ff; border:1px solid rgba(76,141,255,0.4); }
  .badge-pop{ background: rgba(255,92,138,0.15); color:#ffb9ce; border:1px solid rgba(255,92,138,0.4); }
  .badge-century{ background: rgba(245,183,0,0.12); color: var(--mustard); border:1px solid rgba(245,183,0,0.4); }

  .mode-tab{
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:0.82rem;
    border:1px solid rgba(255,255,255,0.12);
    color:var(--muted);
    transition: all .18s ease;
    background: transparent;
  }
  .mode-tab:hover{ border-color: rgba(255,255,255,0.28); color: var(--ink); }
  .mode-tab.active{
    background: var(--mustard);
    color:#1a1200;
    border-color: var(--mustard);
  }

  button:focus-visible, .opt-card:focus-visible, .slot-empty:focus-visible, .mode-tab:focus-visible{
    outline: 2px solid var(--mustard);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }