.card { display: flex; flex-direction: column; }
    
    .pill, .pill-bar {
      display: flex; align-items: center; gap: .5rem;
      background: color-mix(in srgb, var(--sc-sea3, #1f8fa0) 22%, transparent);
      border: 1px solid color-mix(in srgb,
                var(--sc-shimmer, #f8d492) 30%, rgba(250, 243, 232, .26));
      border-radius: 999px; padding: .42rem .5rem .42rem .85rem;
    }
    .pill-form { display: block; margin-top: .55rem; }
    
    
    .pill-do {
      margin-left: auto; padding-right: .15rem; font-weight: 600;
      font-size: .74rem; opacity: .8; white-space: nowrap;
      font-family: var(--font-body); flex: 0 0 auto;
    }
    
    .pill-title { flex-wrap: wrap; row-gap: .1rem; }
    .pill-name { white-space: nowrap; }        
    .pill-act { display: flex; align-items: center; gap: .45rem;
                margin-left: auto; }
    @media (max-width: 400px) { .pill-do { display: none; } }
    .pill-title {
      width: 100%; margin: 0 0 .1rem; justify-content: space-between;
      font-family: var(--font-brand); font-weight: 700; font-size: 1.16rem;
      line-height: 1.25; color: var(--white); text-align: left;
    }
    button.pill-title { cursor: pointer; font: inherit; font-family: var(--font-brand);
                        font-weight: 700;
                        font-size: clamp(1rem, 2.4cqi + .55rem, 1.16rem); }
    .card:hover .pill-title, .pill-title:hover {
      background: color-mix(in srgb, var(--sc-sea3, #1f8fa0) 34%, transparent);
      border-color: color-mix(in srgb,
                var(--sc-shimmer, #f8d492) 55%, rgba(250, 243, 232, .3));
    }
    
    .pill-title--quiet { cursor: default; }
    .card:hover .pill-title--quiet, .pill-title--quiet:hover {
      background: rgba(250, 243, 232, .10);
      border-color: rgba(250, 243, 232, .28);
    }
    .pill { justify-content: space-between; }
    .pill b { font-family: var(--font-brand); font-weight: 700;
              font-size: .95rem; letter-spacing: .01em; }
    .pill svg, .pill-form button svg { width: 20px; height: 20px; flex: none; }
    
    .pill-bar { padding-right: .3rem; }
    .pill-form input {
      flex: 1 1 auto; min-width: 0; background: none; border: 0;
      color: var(--white); font: inherit; font-size: .92rem; padding: .1rem 0;
    }
    .pill-form input::placeholder { color: rgba(250, 243, 232, .62); }
    .pill-form input:focus { outline: none; }
    .pill-form:focus-within .pill-bar {
      border-color: rgba(250, 243, 232, .75);
      background: rgba(250, 243, 232, .18);
    }
    .pill-form button {
      flex: none; display: grid; place-items: center;
      width: 34px; height: 34px; border-radius: 50%; border: 0;
      background: var(--sand-light, #f3e6cd); color: #10323c; cursor: pointer;
    }
    .pill-form button:disabled { opacity: .45; cursor: default; }
    .pill-said:empty { display: none; }
    
    .pill-fine { margin: .38rem .2rem 0; font-size: .7rem; line-height: 1.3;
                 text-align: center; color: rgba(250, 243, 232, .62); }
    .pill-fine a { color: inherit; }
    .pill-said { margin: .45rem 0 0; font-size: .78rem; line-height: 1.35;
                 color: var(--sand-light, #f3e6cd); }
    .pill-said.bad { color: #ffd9cf; }
    
    .qtile {
      margin-top: .6rem; perspective: 700px;
    }
    .qtile > span {
      
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
      overflow: hidden;
      min-height: calc(3 * 1.32em); align-content: center;
      background: var(--white); color: var(--palm);
      border: 2px solid #C8DFE0; border-radius: 7px;
      box-shadow: 0 3px 10px rgba(6, 26, 31, .3);
      padding: .5rem .6rem; font-family: 'Outfit', var(--font-body);
      font-weight: 600; font-size: .84rem; line-height: 1.32;
      text-align: center; text-wrap: balance;
      transition: transform .34s ease;
      transform-style: preserve-3d;
    }
    @media (prefers-reduced-motion: reduce) {
      .qtile > span { transition: none; }
    }

    
    .card--trivia p.rotating { transition: opacity .5s ease;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card--trivia p.rotating.out { opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      .card--trivia p.rotating { transition: none; }
    }
    .tc-veil {
      position: fixed; inset: 0; z-index: 40;
      background: rgba(4, 20, 25, .35);
      opacity: 0; transition: opacity .3s ease;
    }
    .tc-veil.on { opacity: 1; }
    .tc-card {
      position: fixed; z-index: 41;
      
      left: 50%; top: 17svh; transform: translateX(-50%);
      width: min(92vw, 34rem);
      
      background: linear-gradient(165deg, rgba(16, 50, 60, .40), rgba(16, 50, 60, .24));
      color: var(--white);
      border-radius: 1.1rem; padding: 1.3rem 1.35rem 1.15rem;
      border: 1px solid rgba(250, 243, 232, .30);
      border-top-color: rgba(250, 243, 232, .50);
      box-shadow: 0 24px 60px rgba(4, 20, 25, .5);
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
      transition: transform .45s cubic-bezier(.3, .9, .3, 1.03), opacity .3s ease;
    }
    .tc-card.lifting { transition: none; }
    .tc-card.down { transform: translateX(-50%) translateY(26svh); opacity: 0; }
    @media (max-width: 640px) {
      
      .tc-card { left: 0; right: 0; top: auto; bottom: 0; width: auto;
                 transform: none; border-radius: 1.1rem 1.1rem 0 0; }
      .tc-card.down { transform: translateY(105%); }
    }
    .tc-edge { position: absolute; inset: 0; width: 100%; height: 100%;
               pointer-events: none; }
    .tc-edge rect {
      fill: none; stroke: var(--sand-light, #f3e6cd); stroke-width: 2.5;
      vector-effect: non-scaling-stroke;
      stroke-dasharray: 100 100; stroke-dashoffset: 0; opacity: .85;
    }
    .tc-card.asking .tc-edge rect {
      transition: stroke-dashoffset var(--tc-secs, 20s) linear;
      stroke-dashoffset: 100;
    }
    .tc-x {
      position: absolute; top: .45rem; right: .55rem; z-index: 2;
      background: none; border: 0; color: var(--white); opacity: .7;
      font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .3rem;
    }
    .tc-x:hover { opacity: 1; }
    .tc-q { font-family: var(--font-brand); font-size: 1.18rem;
            line-height: 1.35; text-wrap: balance; margin: 0 1.2rem .85rem 0; }
    .tc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
    @media (max-width: 480px) { .tc-opts { grid-template-columns: 1fr; } }
    .tc-opt {
      display: flex; align-items: center; gap: .5rem; text-align: left;
      background: rgba(250, 243, 232, .10); color: var(--white);
      border: 1px solid rgba(250, 243, 232, .28); border-radius: .7rem;
      padding: .6rem .7rem; font-size: .95rem; line-height: 1.3;
      cursor: pointer; transition: background .15s ease, border-color .15s ease,
                                   transform .15s ease, opacity .3s ease;
    }
    .tc-opt b { font-family: var(--font-brand); opacity: .75; }
    .tc-opt.picked { background: rgba(250, 243, 232, .22);
                     border-color: rgba(250, 243, 232, .75);
                     transform: translateY(-1px); }
    .tc-card.revealed .tc-opt { cursor: default; }
    .tc-card.revealed .tc-opt:not(.win):not(.lose) { opacity: .38; }
    .tc-opt.win { background: rgba(46, 125, 90, .45);
                  border-color: rgba(140, 220, 170, .9);
                  animation: tc-win .8s ease; }
    .tc-opt.lose { background: rgba(150, 55, 45, .40);
                   border-color: rgba(240, 150, 130, .8);
                   animation: tc-lose .5s ease; }
    @keyframes tc-win {
      0% { box-shadow: 0 0 0 0 rgba(140, 220, 170, .7); }
      70% { box-shadow: 0 0 0 14px rgba(140, 220, 170, 0); }
      100% { box-shadow: 0 0 0 0 rgba(140, 220, 170, 0); }
    }
    @keyframes tc-lose {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); } 65% { transform: translateX(4px); }
    }
    .tc-confirm {
      margin-top: .8rem; width: 100%;
      background: var(--sand-light, #f3e6cd); color: #10323c;
      font-family: var(--font-brand); font-weight: 700; font-size: .98rem;
      border: 0; border-radius: .7rem; padding: .62rem; cursor: pointer;
      transition: opacity .2s ease;
    }
    .tc-confirm:disabled { opacity: .35; cursor: default; }
    .tc-card.revealed .tc-confirm { display: none; }
    
    .tc-story { display: none; }
    .tc-story.in { display: block; margin-top: .3rem;
                   animation: tc-storyin .55s ease; }
    .tc-card.storied .tc-opts, .tc-card.storied .tc-confirm { display: none; }
    @keyframes tc-storyin {
      from { transform: translateY(16px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .tc-story p { margin: 0; font-size: .92rem; line-height: 1.55;
                  max-height: 48svh; overflow-y: auto;
                  color: var(--sand-light, #f3e6cd); }
    .tc-after { margin-top: .8rem; text-align: center;
                position: relative; z-index: 2; }
    .tc-again {
      background: none; color: var(--white);
      border: 1px solid rgba(250, 243, 232, .45); border-radius: .7rem;
      font-family: var(--font-brand); font-size: .95rem;
      padding: .5rem 1.1rem; cursor: pointer;
    }
    .tc-again:hover { border-color: rgba(250, 243, 232, .9); }
    .tc-count { margin: .2rem 0 0; font-size: .85rem; opacity: .8; }
    .tc-count b { font-variant-numeric: tabular-nums; }