/* I Doubt It: deep plum baize, a messy face-down pile, the claim on a card, a countdown ring. */
body[data-game="doubt"] #felt {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(240, 210, 220, .08), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #3a1c33 0%, #2a1326 50%, #12070f 100%);
}
body[data-game="doubt"] #print { display: none; }

#doubt { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.db-pile { position: absolute; left: 0; top: 0; }
.db-pile .card { position: absolute; left: 0; top: 0; }
.db-pile::after { content: attr(data-n); position: absolute; left: 0; top: calc(var(--v) * 8.5); transform: translateX(-50%); white-space: nowrap; font-family: var(--ui); font-size: calc(var(--v) * 1.3); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.db-ring { position: absolute; left: 0; top: 0; width: calc(var(--v) * 22); height: calc(var(--v) * 22); transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.db-ring.on { opacity: 1; }
.db-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.db-ring circle { fill: none; stroke-width: 1.4; }
.db-ring .bg { stroke: rgba(205, 180, 135, .15); }
.db-ring .fg { stroke: var(--champagne); stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.db-up { position: absolute; left: 0; top: 0; transform: translate(calc(var(--v) * -30), -50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * .4); }
.db-up small { font-family: var(--ui); font-size: calc(var(--v) * 1.3); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.db-up b { font-family: var(--display); font-weight: 600; font-size: calc(var(--v) * 5.2); color: var(--ivory); line-height: 1; }
.db-claim { position: absolute; left: 0; top: 0; transform: translate(calc(var(--v) * 30), -50%) translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * .5); text-align: center; }
.db-claim:empty { display: none; }
.db-claim span { font-family: var(--serif); font-style: italic; font-size: calc(var(--v) * 2); color: var(--gold-ink); }
.db-claim span b { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--ivory); }
.db-claim strong {
  font-family: var(--display); font-weight: 600; font-size: calc(var(--v) * 3.6); color: var(--paper-ink); white-space: nowrap;
  background: var(--stock); padding: .1em .7em .2em; border-radius: calc(var(--v) * .6); box-shadow: 0 1vmin 2.4vmin rgba(0, 0, 0, .5); transform: rotate(-2deg);
}
.db-claim em { font-family: var(--ui); font-style: normal; font-size: calc(var(--v) * 1.3); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.db-reveal { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * 1.4); z-index: 4; }
.db-reveal:empty { display: none; }
#doubt.revealing .db-pile, #doubt.revealing .db-claim, #doubt.revealing .db-up { opacity: .15; }
.db-reveal .who { margin: 0; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: calc(var(--v) * 2.2); color: var(--ivory); }
.db-reveal .who b { font-style: normal; font-family: var(--display); font-weight: 600; }
.db-reveal .cards { display: flex; gap: calc(var(--v) * 1.2); }
.db-reveal .card.flipin { animation: dbFlip .5s cubic-bezier(.2, .8, .3, 1.1) both; }
@keyframes dbFlip { from { transform: rotateY(90deg) translateY(-2vmin); opacity: .3; } }
.db-reveal .card.ok { box-shadow: 0 0 0 .35vmin #9fc49a, 0 1vmin 2vmin rgba(0, 0, 0, .5); }
.db-reveal .card.bad { box-shadow: 0 0 0 .35vmin #d4796f, 0 1vmin 2vmin rgba(0, 0, 0, .5); }
.db-reveal .verdict { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .2em; font-family: var(--display); font-weight: 600; font-size: calc(var(--v) * 3.8); }
.db-reveal .verdict.true { color: #b9d6b0; }
.db-reveal .verdict.lie { color: #e6a198; }
.db-reveal .verdict span { font-family: var(--ui); font-size: calc(var(--v) * 1.5); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); }

/* ---------- phone ---------- */
body[data-game="doubt"] { background: linear-gradient(180deg, #2c1528, #10060d); }
.db-hud { font-family: var(--display) !important; font-size: 26px !important; }
body[data-game="doubt"] #hand .card.picked { bottom: 28px !important; box-shadow: 0 0 0 3px var(--champagne), 0 10px 22px rgba(0, 0, 0, .5); }
.db-doubt {
  --left: 1;
  position: relative; width: 100%; padding: 20px; border: 0; border-radius: 16px; cursor: pointer; overflow: hidden;
  color: #fff4ee; background: linear-gradient(180deg, #a5363d, #6e1b23);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.db-doubt::before { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--left) * 100%); background: var(--champagne); transition: width .1s linear; }
.db-doubt span { font-family: var(--display); font-weight: 600; font-size: 30px; }
.db-doubt small { font-family: var(--num); font-size: 22px; opacity: .8; }
.db-doubt:active { transform: scale(.98); }