/* Crazy Eights: dark teal baize, stock and discard side by side, the suit in play printed large. */
body[data-game="crazy8"] #felt {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(220, 240, 230, .07), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #17393b 0%, #10292b 50%, #071415 100%);
}
body[data-game="crazy8"] #print { display: none; }

#crazy8 { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.c8-stock, .c8-discard { position: absolute; top: 0; display: grid; }
.c8-stock { left: calc(var(--cw) * -1.35); transform: translate(-50%, -50%); }
.c8-discard { left: calc(var(--cw) * .15); transform: translate(-50%, -50%); }
.c8-stock .card, .c8-discard .card { grid-area: 1 / 1; }
.c8-stock::after { content: attr(data-n); position: absolute; left: 50%; bottom: calc(var(--v) * -3.2); transform: translateX(-50%); font-family: var(--ui); font-size: calc(var(--v) * 1.4); font-weight: 700; letter-spacing: .18em; color: var(--gold-ink); }
.c8-discard .card.c8-land { animation: c8Land .4s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes c8Land { from { translate: 0 -14vmin; scale: 1.2; opacity: .3; } }
.c8-suit { position: absolute; left: calc(var(--cw) * 1.6); top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * .3); }
.c8-suit 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; }
.c8-suit b { display: grid; place-items: center; width: calc(var(--v) * 10); height: calc(var(--v) * 10); border-radius: 50%; font-size: calc(var(--v) * 6.4); font-weight: 400; line-height: 1; color: #1c1a1f; background: var(--stock); box-shadow: 0 1.2vmin 3vmin rgba(0, 0, 0, .5), inset 0 0 0 .5vmin var(--stock), inset 0 0 0 .65vmin rgba(170, 140, 90, .6); }
.c8-suit.s-H b, .c8-suit.s-D b { color: var(--card-red); }
.c8-msg { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(var(--cw) * 1.2)); margin: 0; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: calc(var(--v) * 2.1); color: var(--ivory); }
.c8-msg b { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--champagne-hi); }

/* ---------- phone ---------- */
body[data-game="crazy8"] { background: linear-gradient(180deg, #143033, #071415); }
body[data-game="crazy8"] #board { display: flex; justify-content: center; }
.c8-hud { font-size: 32px !important; color: var(--ivory); }
.c8-hud.s-H, .c8-hud.s-D { color: #e0666c !important; }
.c8-top { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
#board .c8-top .card { --cw: min(22vw, 96px); }
.c8-called { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.c8-called.s-H, .c8-called.s-D { color: #f0a0a4; }
.c8-suits .panel-btn.suit { flex: 1; min-width: 0; }