/* Dial It In: midnight-teal lacquer, a cream dial face in a brass rim, scoring bands in muted
   coral, saffron and teal, and a black needle. */
body[data-game="dialitin"] #felt {
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(200, 240, 240, .06), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #173338 0%, #102428 55%, #060f11 100%);
}
body[data-game="dialitin"] #print, body[data-game="dialitin"] .fan, body[data-game="dialitin"] .sizer { display: none; }

.di-svg { display: block; width: 100%; overflow: visible; }
.di-rim { fill: #8a6a2a; stroke: #e3c88c; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.di-face { stroke: rgba(0, 0, 0, .25); stroke-width: .4; }
.di-band { stroke: rgba(0, 0, 0, .25); stroke-width: .3; }
.di-band.b2 { fill: #d98a5f; } .di-band.b3 { fill: #e6c25a; } .di-band.b4 { fill: #3f8a8a; }
.di-pt { font-family: var(--display); font-size: 7px; fill: #2a1f14; text-anchor: middle; dominant-baseline: middle; }
.di-pt.c4 { fill: #fff; }
.di-tick { stroke: rgba(60, 40, 20, .45); stroke-width: .6; }
.di-needle { stroke: #1a1512; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5)); }
.di-hub { fill: #c9a35a; stroke: #3a2a10; stroke-width: 1.2; }
.di-end { font-family: var(--ui); font-weight: 800; font-size: 5.6px; letter-spacing: .06em; text-transform: uppercase; fill: #f3e7c8; }
.di-end.r { text-anchor: end; }

#dialitin { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.di-dial { position: absolute; left: 0; top: 0; width: calc(var(--v) * 62); transform: translate(-50%, -48%); }
.di-clue { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--v) * -27)); margin: 0; white-space: nowrap; font-family: var(--display); font-size: calc(var(--v) * 4.4); color: #fff3d6; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.di-clue em { font-family: var(--serif); font-size: calc(var(--v) * 2.6); color: var(--mute); }
.di-score { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--v) * 19)); display: flex; align-items: baseline; gap: calc(var(--v) * 3); white-space: nowrap; font-family: var(--ui); font-weight: 700; font-size: calc(var(--v) * 1.8); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.di-score b { font-family: var(--display); font-size: calc(var(--v) * 3.4); color: #fff3d6; margin-left: .3em; }
.di-score .up { color: var(--champagne-hi); text-shadow: 0 0 1.4vmin rgba(240, 210, 140, .5); }
.di-score small { font-size: calc(var(--v) * 1.2); opacity: .7; }
.di-msg { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--v) * 25)); margin: 0; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: calc(var(--v) * 2.2); color: var(--ivory); }
.di-msg b { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--champagne-hi); }
.di-team { font-weight: 700; } .di-team.t0 { color: #e6c25a; } .di-team.t1 { color: #9ec3d8; }

/* ---------- phone ---------- */
body[data-game="dialitin"] { background: linear-gradient(180deg, #173338, #060f11); }
body[data-game="dialitin"] #handWrap, body[data-game="dialitin"] #handHint { display: none; }
#diPhone { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.di-wrap { padding: 6px 10px 2px; }
.di-live { touch-action: none; cursor: grab; }
.di-offer { display: flex; flex-direction: column; gap: 6px; }
.di-offer button { padding: 10px; border-radius: 10px; border: 1px solid var(--gold-faint); background: rgba(0, 0, 0, .25); color: var(--ivory); font-family: var(--ui); font-weight: 700; font-size: 14px; cursor: pointer; }
.di-offer button.on { border-color: var(--champagne); box-shadow: 0 0 0 1px var(--champagne); color: var(--champagne-hi); }
.di-input { display: flex; gap: 8px; }
.di-input input { flex: 1; min-width: 0; padding: 12px; border-radius: 10px; border: 1px solid var(--gold-faint); background: rgba(0, 0, 0, .35); color: var(--ivory); font-size: 17px; font-family: var(--ui); }
.di-tip { margin: 0; font-family: var(--serif); font-style: italic; color: var(--mute); text-align: center; }