/* Each back is a complete vector drawing, legible at both thumbnail and table size. */
.card-back { --back-art: url('/assets/backs/signature-v2.svg'); --back-edge: #89799e; --back-base: #272337; }
:is(.app-shell[data-back=orbit] .card-back:not([data-back]), .card-back[data-back=orbit]) { --back-art: url('/assets/backs/orbit-v2.svg'); --back-edge: #6b929e; --back-base: #152b38; }
:is(.app-shell[data-back=argyle] .card-back:not([data-back]), .card-back[data-back=argyle]) { --back-art: url('/assets/backs/argyle-v2.svg'); --back-edge: #b89495; --back-base: #352a3c; }
:is(.app-shell[data-back=royal-chaos] .card-back:not([data-back]), .card-back[data-back=royal-chaos]) { --back-art: url('/assets/backs/royal-chaos-v2.svg'); --back-edge: #c2a06e; --back-base: #1f3448; }
:is(.app-shell[data-back=little-mischief] .card-back:not([data-back]), .card-back[data-back=little-mischief]) { --back-art: url('/assets/backs/little-mischief-v2.svg'); --back-edge: #dfc3a4; --back-base: #3c5c6c; }
:is(.app-shell[data-back=syntax] .card-back:not([data-back]), .card-back[data-back=syntax]) { --back-art: url('/assets/backs/syntax-v2.svg'); --back-edge: #719e87; --back-base: #163535; }
.app-shell[data-back] .playing-card.card-back { padding: 0; border: 1px solid var(--back-edge); background: var(--back-base); box-shadow: 0 3px 0 color-mix(in srgb, var(--back-base) 85%, #000), 0 5px 12px #0002; }
.back-art { position: absolute; inset: 0; border-radius: inherit; background-image: var(--back-art); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }

.theme-grid { gap: 20px; }
.theme-choice { display: block; border-radius: 22px; transition: border-color .15s; }
.theme-scene { --scene-bg: #141619; --scene-panel: #202329; --scene-ink: #f5f4fa; --scene-muted: #b1afb9; --scene-accent: #bea8fa; --scene-contrast: #231b37; position: relative; isolation: isolate; overflow: hidden; height: 244px; margin: 9px; border-radius: 16px; padding: 17px; color: var(--scene-ink); background: var(--scene-bg); border: 1px solid #ffffff0c; }
.scene-daylight { --scene-bg: #f3f4f8; --scene-panel: #ffffff; --scene-ink: #232638; --scene-muted: #68697d; --scene-accent: #7652d6; --scene-contrast: #fff; border-color: #25213808; }
.scene-arcade { --scene-bg: #171125; --scene-panel: #2b203c; --scene-ink: #fff5ff; --scene-muted: #c4b3ce; --scene-accent: #dcfa79; --scene-contrast: #20280b; }
.scene-atmosphere { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 60%, #ad94e924, transparent 67%), repeating-linear-gradient(120deg, #ffffff02 0 1px, transparent 1px 5px); }
.scene-midnight .scene-atmosphere::after { content: ''; position: absolute; width: 220px; height: 220px; top: 25px; left: calc(50% - 110px); border: 1px solid #c3adee14; border-radius: 50%; box-shadow: 0 0 0 20px #c3adee04, 0 0 0 40px #c3adee03; }
.scene-daylight .scene-atmosphere { background: radial-gradient(ellipse at 10% 0, #eee3cd99, transparent 65%), linear-gradient(145deg, #fff, #e8e8f2); }
.scene-daylight .scene-atmosphere::after { content: ''; position: absolute; inset: -50%; transform: rotate(-32deg); background: repeating-linear-gradient(90deg, transparent 0 48px, #ffffff6b 48px 72px, transparent 72px 104px); }
.scene-arcade .scene-atmosphere { background: radial-gradient(ellipse at 60% 35%, #b074de40, transparent 65%); }
.scene-arcade .scene-atmosphere::after { content: ''; position: absolute; inset: 40% -25% -55%; transform: perspective(160px) rotateX(42deg); background: repeating-linear-gradient(0deg, transparent 0 23px, #cda8ed12 23px 24px), repeating-linear-gradient(90deg, transparent 0 29px, #cda8ed16 29px 30px); border-top: 1px solid #b892d42b; }
.scene-top, .scene-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scene-turn { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 650; padding: 6px 9px; background: var(--scene-panel); border: 1px solid color-mix(in srgb, var(--scene-accent) 15%, transparent); border-radius: 9px; }
.scene-turn i { width: 5px; height: 5px; border-radius: 50%; background: var(--scene-accent); }
.scene-light { color: var(--scene-accent); }
.scene-hand { position: absolute; inset: 54px 0 auto; display: flex; justify-content: center; align-items: center; }
.theme-scene .scene-hand .playing-card { flex: 0 0 70px; width: 70px; height: 105px; border-radius: 7px; container-type: inline-size; margin-inline: -8px; box-shadow: 0 3px 0 #d6d5df, 0 12px 18px #0002; }
.scene-hand .playing-card:first-child { transform: translate(-7px, 13px) rotate(-17deg); }
.scene-hand .playing-card:nth-child(2) { transform: translateY(0); z-index: 1; }
.scene-hand .playing-card:last-child { transform: translate(7px, 13px) rotate(17deg); }
.theme-scene .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.theme-scene .card-corner b { font-size: 22cqw; }
.theme-scene .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.theme-scene .classic-court b { font-size: 35cqw; }
.theme-scene .classic-court > span { font-size: 25cqw; }
.scene-bottom { position: absolute; left: 17px; right: 17px; bottom: 15px; }
.scene-you { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; }
.scene-you img { width: 30px; height: 30px; border-radius: 10px; }
.scene-you small { display: block; color: var(--scene-muted); font-size: 10px; font-weight: 450; }
.scene-action { display: grid; place-items: center; width: 37px; height: 32px; border-radius: 10px; color: var(--scene-contrast); background: var(--scene-accent); box-shadow: 0 3px 8px #0001; }
.theme-choice .theme-label { padding: 13px 20px 20px; }
.theme-choice .theme-label strong { font-size: 20px; letter-spacing: -.6px; }
.theme-choice .theme-label small { font-size: 12px; }
.theme-choice .choice-dot { flex-shrink: 0; }

.backs-grid { gap: 18px; }
.back-choice { isolation: isolate; overflow: hidden; padding: 26px 18px 21px; gap: 22px; border-radius: 22px; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--back-display-color, #b39bd9) 12%, transparent), transparent 72%), var(--surface); }
.back-choice[data-back=orbit] { --back-display-color: #8cbfca; }
.back-choice[data-back=argyle] { --back-display-color: #d9a69c; }
.back-choice[data-back=royal-chaos] { --back-display-color: #ddb779; }
.back-choice[data-back=little-mischief] { --back-display-color: #b9ccd7; }
.back-choice[data-back=syntax] { --back-display-color: #a4d4b1; }
.back-choice > .playing-card { width: 108px; height: 162px; border-radius: 10px; transform: rotate(-5deg); transition: transform .2s ease; }
.back-choice:nth-child(even) > .playing-card { transform: rotate(5deg); }
.back-caption { text-align: center; padding: 0 22px; }
.back-caption strong { display: block; font-size: 15px; }
.back-caption small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.4; }
.back-choice > .choice-dot { right: 15px; bottom: 25px; }
@media (hover:hover) { .back-choice:hover > .playing-card { transform: translateY(-4px) rotate(0); } .theme-choice:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } }
@media (max-width: 760px) {
  .theme-grid { gap: 12px; }
  .theme-choice { display: grid; grid-template-columns: minmax(125px, 43%) minmax(0, 1fr); align-items: center; border-radius: 19px; }
  .theme-scene { height: 166px; padding: 9px; margin: 7px; border-radius: 13px; }
  .scene-top { gap: 4px; }.scene-turn { font-size: 10px; padding: 4px 6px; gap: 4px; }.scene-light svg { width: 17px; height: 17px; }
  .scene-hand { top: 39px; }
  .theme-scene .scene-hand .playing-card { flex-basis: 45px; width: 45px; height: 67.5px; margin-inline: -9px; border-radius: 4px; }
  .scene-hand .playing-card:first-child { transform: translate(-3px, 8px) rotate(-17deg); }.scene-hand .playing-card:last-child { transform: translate(3px, 8px) rotate(17deg); }
  .scene-bottom { bottom: 10px; left: 10px; right: 10px; }.scene-you { gap: 5px; font-size: 10px; }.scene-you small { display: none; }.scene-you img { width: 23px; height: 23px; border-radius: 8px; }.scene-action { width: 25px; height: 24px; border-radius: 7px; }.scene-action svg { width: 15px; height: 15px; }
  .theme-choice .theme-label { padding: 12px 13px 12px 7px; gap: 7px; }
  .theme-choice .theme-label strong { font-size: 18px; }.theme-choice .theme-label small { font-size: 11px; line-height: 1.5; }
  .backs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .back-choice { padding: 21px 10px 15px; gap: 19px; border-radius: 18px; }
  .back-choice > .playing-card { width: 88px; height: 132px; border-radius: 9px; }
  .back-caption { padding: 0; }.back-caption strong { font-size: 13px; }.back-caption small { font-size: 10px; }
  .back-choice > .choice-dot { position: absolute; right: 9px; top: 9px; bottom: auto; width: 20px; height: 20px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .theme-choice, .back-choice > .playing-card { transition: none; } }