/* SLP Play Card Engine styles. Used by the app's library AND by every game. */
.slpc-root {
  --slpc-coral: #ff6b6b; --slpc-sky: #4d96ff; --slpc-mint: #20c997; --slpc-grape: #9b5de5;
  --slpc-sun: #ffc93c; --slpc-pink: #ff8fab;
  --slpc-ink: #23264a; --slpc-muted: #6b6f93; --slpc-paper: #ffffff; --slpc-good: #22b573; --slpc-bad: #ff5d5d;
  --slpc-accent: var(--slpc-sky);
  font-family: var(--slpc-font, "Nunito", "Fredoka", "Segoe UI", system-ui, sans-serif);
  color: var(--slpc-ink);
  container-type: inline-size;
  width: 100%;
}
.slpc-root[data-domain="articulation"] { --slpc-accent: var(--slpc-coral); }
.slpc-root[data-domain="language"] { --slpc-accent: var(--slpc-sky); }
.slpc-root[data-domain="fluency"] { --slpc-accent: var(--slpc-mint); }
.slpc-root[data-domain="pragmatics"] { --slpc-accent: var(--slpc-grape); }

.slpc-card {
  position: relative; background: var(--slpc-paper); border-radius: 6cqw; overflow: hidden;
  border: 0.8cqw solid var(--slpc-accent); box-shadow: 0 1.6cqw 0 color-mix(in srgb, var(--slpc-accent) 70%, #000 30%), 0 3cqw 6cqw rgb(0 0 0 / 0.15);
  display: flex; flex-direction: column; animation: slpc-pop .35s cubic-bezier(.3,1.5,.6,1);
}
@keyframes slpc-pop { from { transform: scale(.85) rotate(-2deg); opacity: 0; } }

.slpc-head {
  display: flex; align-items: center; gap: 1.6cqw; padding: 2cqw 3cqw;
  background: var(--slpc-accent); color: #fff; font-weight: 800; font-size: 3.2cqw; letter-spacing: .02em;
}
.slpc-head > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slpc-head .slpc-tag { margin-left: auto; background: rgb(255 255 255 / .25); padding: .4cqw 2cqw; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; flex-shrink: 0; }
.slpc-player { display: flex; align-items: center; gap: 1.5cqw; }
.slpc-player .slpc-avatar { font-size: 4.5cqw; line-height: 1; filter: drop-shadow(0 .3cqw 0 rgb(0 0 0 / .2)); }

.slpc-body { padding: 3cqw 4cqw 4cqw; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; text-align: center; }
.slpc-prompt { font-size: 5cqw; font-weight: 800; line-height: 1.2; }
.slpc-text { font-size: 7cqw; font-weight: 900; line-height: 1.15; word-break: break-word; }
.slpc-text.slpc-long { font-size: 5cqw; font-weight: 800; }
.slpc-hl { color: var(--slpc-accent); text-decoration: underline; text-decoration-thickness: .7cqw; text-underline-offset: 1cqw; }

.slpc-picture { font-size: 22cqw; line-height: 1.05; filter: drop-shadow(0 1cqw 0 rgb(0 0 0 / .12)); animation: slpc-bob 3s ease-in-out infinite; }
.slpc-picture img { width: 38cqw; height: 38cqw; object-fit: contain; }
@keyframes slpc-bob { 50% { transform: translateY(-1cqw) rotate(2deg); } }
.slpc-placeholder {
  width: 34cqw; aspect-ratio: 1; border-radius: 5cqw; display: grid; place-items: center; font-size: 16cqw; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--slpc-accent), color-mix(in srgb, var(--slpc-accent) 50%, var(--slpc-sun)));
}

.slpc-scene {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4cqw; overflow: hidden;
  background: linear-gradient(#e8f4ff, #fff7e0);
  container-type: inline-size;
}
.slpc-scene > span { position: absolute; transform: translate(-50%, -50%); line-height: 1; }

.slpc-choices { display: grid; gap: 2.4cqw; width: 100%; grid-template-columns: repeat(auto-fit, minmax(22cqw, 1fr)); }
.slpc-choice {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw;
  padding: 2.4cqw 1.6cqw; min-height: 14cqw; border-radius: 4cqw; background: #f4f6ff;
  border: .6cqw solid #dfe4ff; box-shadow: 0 1cqw 0 #dfe4ff; font-weight: 800; font-size: 4cqw; color: var(--slpc-ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.slpc-choice:hover:not([disabled]) { transform: translateY(-.6cqw); background: #fff; border-color: var(--slpc-accent); }
.slpc-choice:focus-visible { outline: .8cqw solid var(--slpc-sun); outline-offset: .6cqw; }
.slpc-choice .slpc-ce { font-size: 11cqw; line-height: 1; }
.slpc-choice[aria-pressed="true"] { border-color: var(--slpc-accent); background: color-mix(in srgb, var(--slpc-accent) 15%, #fff); }
.slpc-choice .slpc-badge {
  position: absolute; top: -2cqw; right: -2cqw; width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center;
  background: var(--slpc-accent); color: #fff; font-size: 4cqw; font-weight: 900; box-shadow: 0 .6cqw 0 rgb(0 0 0 / .2);
}
.slpc-choice.slpc-right { background: #e3f9ee; border-color: var(--slpc-good); box-shadow: 0 1cqw 0 var(--slpc-good); animation: slpc-yay .5s; }
.slpc-choice.slpc-wrong { background: #ffe9e9; border-color: var(--slpc-bad); box-shadow: 0 1cqw 0 var(--slpc-bad); animation: slpc-no .4s; }
.slpc-choice.slpc-reveal { border-color: var(--slpc-good); border-style: dashed; }
@keyframes slpc-yay { 40% { transform: scale(1.08) rotate(-3deg); } }
@keyframes slpc-no { 25% { transform: translateX(-2cqw); } 75% { transform: translateX(2cqw); } }
.slpc-choices[data-locked="true"] .slpc-choice { cursor: default; }

.slpc-done { all: unset; cursor: pointer; padding: 2cqw 6cqw; border-radius: 99px; background: var(--slpc-accent); color: #fff; font-weight: 900; font-size: 4cqw; box-shadow: 0 1cqw 0 rgb(0 0 0 / .2); }

.slpc-foot { display: flex; align-items: center; gap: 2cqw; width: 100%; }
.slpc-speak { all: unset; cursor: pointer; font-size: 6cqw; width: 10cqw; height: 10cqw; display: grid; place-items: center; border-radius: 50%; background: var(--slpc-sun); box-shadow: 0 .8cqw 0 #e0a800; }
.slpc-speak:focus-visible { outline: .8cqw solid var(--slpc-accent); }
.slpc-answer {
  flex: 1; text-align: left; font-size: 3.6cqw; background: #fff8e1; border: .4cqw dashed var(--slpc-sun); border-radius: 3cqw; padding: 1.6cqw 2.4cqw;
}
.slpc-answer[hidden] { display: none; }
.slpc-answer b { color: var(--slpc-accent); }

/* Cue supports */
.slpc-cuetag { background: #fff; color: var(--slpc-ink); padding: .4cqw 2cqw; border-radius: 99px; font-size: 2.8cqw; white-space: nowrap; flex-shrink: 0; }
.slpc-cuetag[data-level="0"] { background: #e3f9ee; color: #128a68; }
.slpc-cuetag[data-level="1"] { background: #fff4d1; color: #8a6000; }
.slpc-cuetag[data-level="2"] { background: #ffe8cc; color: #a24a00; }
.slpc-cuetag[data-level="3"] { background: #ffe3e3; color: #b83030; }
.slpc-cuebox { width: 100%; background: #fff8e1; border: .4cqw solid var(--slpc-sun); border-radius: 3cqw; padding: 1.6cqw 2.4cqw; font-size: 3.8cqw; font-weight: 700; text-align: left; }
.slpc-model-box { width: 100%; background: #ffe9f0; border: .5cqw solid var(--slpc-pink); border-radius: 3cqw; padding: 1.8cqw 2.4cqw; font-size: 4.6cqw; font-weight: 900; }
.slpc-tellme { font-size: 4.6cqw; font-weight: 900; color: var(--slpc-accent); background: color-mix(in srgb, var(--slpc-accent) 12%, #fff); padding: 1.6cqw 4cqw; border-radius: 99px; animation: slpc-bob 2.4s ease-in-out infinite; }
.slpc-iso { width: 100%; display: flex; align-items: center; justify-content: center; gap: 4cqw; background: #f4f6ff; border-radius: 4cqw; padding: 2cqw; }
.slpc-iso-sound { font-size: 11cqw; font-weight: 900; color: var(--slpc-accent); letter-spacing: .5cqw; }
.slpc-iso-word { font-size: 6cqw; font-weight: 900; }
.slpc-choice.slpc-model { border-color: var(--slpc-good); animation: slpc-glow 1.2s ease-in-out infinite; }
@keyframes slpc-glow { 50% { box-shadow: 0 0 0 1.4cqw rgb(34 181 115 / .35), 0 1cqw 0 var(--slpc-good); transform: scale(1.04); } }
.slpc-hintbadge { background: var(--slpc-good) !important; }

/* Compact (library thumbnails) */
.slpc-compact .slpc-card { border-width: 1.2cqw; border-radius: 8cqw; box-shadow: 0 2cqw 0 color-mix(in srgb, var(--slpc-accent) 70%, #000 30%); animation: none; }
.slpc-compact .slpc-head { font-size: 6cqw; padding: 3cqw 5cqw; }
.slpc-compact .slpc-body { padding: 4cqw 5cqw 6cqw; gap: 3cqw; }
.slpc-compact .slpc-prompt { font-size: 7cqw; }
.slpc-compact .slpc-text { font-size: 10cqw; }
.slpc-compact .slpc-text.slpc-long { font-size: 7.5cqw; }
.slpc-compact .slpc-picture { font-size: 32cqw; animation: none; }
.slpc-compact .slpc-placeholder { width: 46cqw; font-size: 24cqw; }
.slpc-compact .slpc-choices { grid-template-columns: repeat(auto-fit, minmax(26cqw, 1fr)); gap: 3cqw; }
.slpc-compact .slpc-choice { font-size: 5.5cqw; min-height: 0; padding: 2cqw; border-width: 1cqw; box-shadow: none; }
.slpc-compact .slpc-choice .slpc-ce { font-size: 12cqw; }
.slpc-compact .slpc-foot { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slpc-card, .slpc-picture, .slpc-choice { animation: none !important; transition: none !important; }
}

/* Overlay used by SLPGame.showCardOverlay() — works over any game engine's canvas. */
.slpc-overlay {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 3vmin;
  background: rgb(20 24 60 / .35); backdrop-filter: blur(2px);
}
.slpc-overlay > .slpc-root { width: min(92vw, 78vh, 640px); }
/* Stage cards fill most of the screen (landscape), leaving a strip at the bottom for the therapist bar. */
.slpc-overlay { padding: 2.5vh 2.5vw 88px; }
.slpc-overlay > .slpc-root.slpc-stage { width: min(95vw, calc((100vh - 100px) * 1.75)); height: min(calc(100vh - 100px), 56vw); container-type: size; }

/* Demo control bar shown when a game is opened on its own. */
.slpc-demo-bar {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2147483600; display: flex; gap: 6px;
  padding: 6px; border-radius: 99px; background: #23264a; box-shadow: 0 6px 20px rgb(0 0 0 / .3); font: 600 14px system-ui, sans-serif;
}
.slpc-demo-bar button { border: 0; border-radius: 99px; padding: 8px 14px; font: inherit; cursor: pointer; }
.slpc-demo-bar span { color: #fff; padding: 8px 10px; }

/* ---------- dynamic cards ---------- */
.slpc-root[data-reveal] .slpc-card { animation-duration: .6s; animation-fill-mode: both; }
.slpc-root[data-reveal="flip"] { perspective: 1200px; }
.slpc-root[data-reveal="flip"] .slpc-card { animation-name: slpc-flip; transform-origin: center; }
.slpc-root[data-reveal="pop"] .slpc-card { animation-name: slpc-pop; animation-timing-function: cubic-bezier(.3,1.6,.6,1); }
.slpc-root[data-reveal="spin"] .slpc-card { animation-name: slpc-spin; }
.slpc-root[data-reveal="zoom"] .slpc-card { animation-name: slpc-zoom; animation-timing-function: cubic-bezier(.2,1.4,.5,1); }
.slpc-root[data-reveal="drop"] .slpc-card { animation-name: slpc-drop; animation-timing-function: cubic-bezier(.3,1.5,.6,1); }
@keyframes slpc-flip { 0% { transform: rotateY(90deg) scale(.9); filter: brightness(1.4); } 60% { transform: rotateY(-12deg); } 100% { transform: none; } }
@keyframes slpc-spin { 0% { transform: rotate(-200deg) scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes slpc-zoom { 0% { transform: scale(.05); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes slpc-drop { 0% { transform: translateY(-80cqw) rotate(-8deg); } 70% { transform: translateY(2cqw) rotate(2deg); } 100% { transform: none; } }

.slpc-choice.slpc-in { animation: slpc-choice-in .45s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes slpc-choice-in { from { transform: scale(.3) translateY(4cqw); opacity: 0; } }
.slpc-choice.slpc-in.slpc-right { animation: slpc-yay .5s; }
.slpc-choice.slpc-in.slpc-wrong { animation: slpc-no .4s; }
.slpc-choice.slpc-in.slpc-model { animation: slpc-glow 1.2s ease-in-out infinite; }

.slpc-tappable { cursor: pointer; }
.slpc-wiggle { animation: slpc-wiggle .7s !important; }
@keyframes slpc-wiggle { 20% { transform: rotate(-12deg) scale(1.1); } 40% { transform: rotate(10deg) scale(1.15); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }

.slpc-media { animation: none; }
.slpc-media img, .slpc-media video { width: 46cqw; height: 34cqw; object-fit: contain; border-radius: 3cqw; display: block; }
.slpc-compact .slpc-media img, .slpc-compact .slpc-media video { width: 60cqw; height: 44cqw; }

.slpc-card { position: relative; }
.slpc-star { position: absolute; left: 50%; top: 40%; font-size: 7cqw; pointer-events: none; z-index: 5; animation: slpc-burst .9s ease-out forwards; }
@keyframes slpc-burst { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(200deg); opacity: 0; } }

/* Explore mode: the card button a player taps to draw their card. */
.slpc-deck {
  position: fixed; z-index: 2147482000; right: 3vmin; bottom: 14vmin; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .6vmin; padding: 1.6vmin 2vmin; border-radius: 3vmin;
  background: #fff; color: #23264a; font: 900 2.4vmin "Nunito", system-ui, sans-serif;
  box-shadow: 0 1vmin 0 var(--deck-color, #4d96ff), 0 2vmin 4vmin rgb(0 0 0 / .25);
  animation: slpc-deck-bob 1.6s ease-in-out infinite;
}
.slpc-deck .slpc-deck-cards { font-size: 8vmin; line-height: 1; position: relative; }
.slpc-deck .slpc-deck-av { position: absolute; right: -2vmin; bottom: -1vmin; font-size: 4.5vmin; }
.slpc-deck:focus-visible { outline: .6vmin solid #ffc93c; outline-offset: .6vmin; }
@keyframes slpc-deck-bob { 50% { transform: translateY(-1.2vmin) rotate(-3deg); } }
.slpc-overlay .slpc-close {
  position: absolute; top: 2vmin; right: 2vmin; width: 6vmin; height: 6vmin; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; font-size: 3vmin; box-shadow: 0 .6vmin 0 rgb(0 0 0 / .2);
}

.slpc-overlay[hidden] { display: none; }

/* ---------- playing-card look (all sizes) ---------- */
.slpc-body { position: relative; }
.slpc-body::before {
  content: ""; position: absolute; inset: 1.4cqw; border: .35cqw solid color-mix(in srgb, var(--slpc-accent) 28%, #fff);
  border-radius: 3.4cqw; pointer-events: none;
}
.slpc-card { background: radial-gradient(circle at 50% 40%, #fff 0 60%, color-mix(in srgb, var(--slpc-accent) 7%, #fff) 100%); }
.slpc-pip { position: absolute; font-size: 4cqw; opacity: .55; pointer-events: none; line-height: 1; }
.slpc-pip-tl { left: 2.6cqw; top: 2.2cqw; }
.slpc-pip-br { right: 2.6cqw; bottom: 2.2cqw; transform: rotate(180deg); }

/* ---------- STAGE size: the big card over the game (sized by container height) ---------- */
.slpc-stage .slpc-card { height: 100%; border-width: .9cqh; border-radius: 3.6cqh; box-shadow: 0 1.4cqh 0 color-mix(in srgb, var(--slpc-accent) 70%, #000 30%), 0 3cqh 8cqh rgb(0 0 0 / .3); }
.slpc-stage .slpc-head { font-size: 3.4cqh; padding: 1.5cqh 3cqh; gap: 1.5cqh; }
.slpc-stage .slpc-head .slpc-tag, .slpc-stage .slpc-cuetag { font-size: 2.6cqh; padding: .4cqh 1.6cqh; }
.slpc-stage .slpc-player .slpc-avatar { font-size: 4.4cqh; }
.slpc-stage .slpc-body { flex: 1; min-height: 0; padding: 2.4cqh 5cqh 3cqh; gap: 1.6cqh; justify-content: center; overflow: hidden; }
.slpc-stage .slpc-body::before { inset: 1.6cqh; border-width: .35cqh; border-radius: 2.6cqh; }
.slpc-stage .slpc-pip { font-size: 4.4cqh; }
.slpc-stage .slpc-pip-tl { left: 3cqh; top: 2.6cqh; }
.slpc-stage .slpc-pip-br { right: 3cqh; bottom: 2.6cqh; }
.slpc-stage .slpc-prompt { font-size: 5cqh; }
.slpc-stage .slpc-text { font-size: 8cqh; }
.slpc-stage .slpc-text.slpc-long { font-size: 5.4cqh; max-width: 88cqw; }
.slpc-stage .slpc-hl { text-decoration-thickness: .6cqh; text-underline-offset: 1cqh; }
.slpc-stage .slpc-picture { font-size: 30cqh; flex: 0 1 auto; min-height: 0; }
.slpc-stage .slpc-media img, .slpc-stage .slpc-media video { width: auto; height: 46cqh; max-width: 80cqw; border-radius: 2cqh; box-shadow: 0 0 0 .6cqh #23264a; }
.slpc-stage .slpc-placeholder { width: 28cqh; font-size: 15cqh; border-radius: 4cqh; }
.slpc-stage .slpc-scene { width: auto; height: 42cqh; aspect-ratio: 16 / 9; border-radius: 2.4cqh; }
.slpc-stage.slpc-has-choices .slpc-picture { font-size: 18cqh; }
.slpc-stage.slpc-has-choices .slpc-media img, .slpc-stage.slpc-has-choices .slpc-media video { height: 28cqh; }
.slpc-stage.slpc-has-choices .slpc-scene { height: 28cqh; }
.slpc-stage .slpc-choices { grid-template-columns: repeat(auto-fit, minmax(17cqw, 1fr)); gap: 2cqh; width: auto; max-width: 92cqw; min-width: 60cqw; }
.slpc-stage .slpc-choice { font-size: 3.6cqh; min-height: 13cqh; padding: 1.4cqh 1.6cqh; border-width: .5cqh; border-radius: 2.6cqh; box-shadow: 0 .8cqh 0 #dfe4ff; gap: .6cqh; }
.slpc-stage .slpc-choice .slpc-ce { font-size: 11cqh; }
.slpc-stage .slpc-choice.slpc-right { box-shadow: 0 .8cqh 0 var(--slpc-good); }
.slpc-stage .slpc-choice.slpc-wrong { box-shadow: 0 .8cqh 0 var(--slpc-bad); }
.slpc-stage .slpc-badge { width: 5cqh; height: 5cqh; font-size: 3cqh; top: -1.6cqh; right: -1.6cqh; }
.slpc-stage .slpc-done { font-size: 3.4cqh; padding: 1.2cqh 4cqh; }
.slpc-stage .slpc-cuebox, .slpc-stage .slpc-model-box, .slpc-stage .slpc-tellme { width: auto; max-width: 88cqw; font-size: 3.4cqh; padding: 1.2cqh 2.4cqh; border-width: .4cqh; border-radius: 2cqh; }
.slpc-stage .slpc-model-box { font-size: 4cqh; }
.slpc-stage .slpc-iso { width: auto; gap: 4cqh; padding: 1cqh 4cqh; border-radius: 2.4cqh; }
.slpc-stage .slpc-iso-sound { font-size: 9cqh; }
.slpc-stage .slpc-iso-word { font-size: 5.4cqh; }
.slpc-stage .slpc-foot { position: absolute; left: 3cqh; bottom: 3cqh; width: auto; gap: 1.6cqh; z-index: 2; }
.slpc-stage .slpc-speak { width: 8cqh; height: 8cqh; font-size: 4.4cqh; box-shadow: 0 .8cqh 0 #e0a800; }
.slpc-stage .slpc-answer { font-size: 2.8cqh; padding: 1cqh 1.6cqh; border-width: .3cqh; border-radius: 1.6cqh; max-width: 50cqw; }
.slpc-stage .slpc-star { font-size: 7cqh; }
.slpc-stage[data-reveal="drop"] .slpc-card { animation-name: slpc-drop-stage; }
@keyframes slpc-drop-stage { 0% { transform: translateY(-110cqh) rotate(-6deg); } 70% { transform: translateY(2cqh) rotate(1deg); } 100% { transform: none; } }

/* ---------- the deck: a stack of face-down cards ---------- */
.slpc-deck {
  background: none; box-shadow: none; padding: 0; gap: 1vmin; animation: slpc-deck-bob 1.8s ease-in-out infinite;
}
.slpc-deck .slpc-deck-cards {
  position: relative; display: grid; place-items: center; width: 13vmin; aspect-ratio: 5 / 7; border-radius: 1.6vmin; font-size: 0;
  background:
    radial-gradient(circle, rgb(255 255 255 / .35) 0 18%, transparent 19%) 0 0 / 2.6vmin 2.6vmin,
    linear-gradient(135deg, var(--deck-color, #4d96ff), color-mix(in srgb, var(--deck-color, #4d96ff) 55%, #23264a));
  border: .9vmin solid #ffd54a;
  box-shadow:
    .9vmin .9vmin 0 -.2vmin #fff, .9vmin .9vmin 0 .3vmin #ffd54a,
    1.8vmin 1.8vmin 0 -.2vmin #fff, 1.8vmin 1.8vmin 0 .3vmin #ffd54a,
    0 2.6vmin 3.6vmin rgb(0 0 0 / .35);
}
.slpc-deck .slpc-deck-cards::before {
  content: ""; position: absolute; inset: 1vmin; border-radius: 1vmin; border: .35vmin solid rgb(255 255 255 / .7);
}
.slpc-deck .slpc-deck-av {
  position: static; display: grid; place-items: center; width: 8vmin; height: 8vmin; border-radius: 50%; font-size: 5vmin;
  background: #fff; box-shadow: 0 0 0 .6vmin #ffd54a; z-index: 1;
}
.slpc-deck > span:last-child {
  background: #fff; color: #23264a; padding: .5vmin 1.6vmin; border-radius: 99px; font-size: 2.2vmin;
  box-shadow: 0 .5vmin 0 var(--deck-color, #4d96ff); white-space: nowrap;
}
.slpc-deck:hover .slpc-deck-cards { transform: translateY(-.8vmin) rotate(-3deg); transition: transform .2s; }
/* Stage: big choices when the card has no main picture; tighter when it does. */
.slpc-stage .slpc-choice { min-height: 24cqh; font-size: 4.4cqh; }
.slpc-stage .slpc-choice .slpc-ce { font-size: 17cqh; }
.slpc-stage .slpc-choices { gap: 3cqh; }
.slpc-stage .slpc-body:has(> .slpc-picture, > .slpc-scene) .slpc-choice { min-height: 14cqh; font-size: 3.6cqh; }
.slpc-stage .slpc-body:has(> .slpc-picture, > .slpc-scene) .slpc-choice .slpc-ce { font-size: 10cqh; }
.slpc-stage .slpc-choices { width: 84cqw; max-width: 84cqw; grid-template-columns: repeat(auto-fit, minmax(16cqw, 34cqw)); justify-content: center; }
.slpc-stage .slpc-prompt { font-size: 6cqh; }
.slpc-credit { position: absolute; right: 7cqw; bottom: 1.6cqw; font-size: 1.8cqw; color: var(--slpc-muted); opacity: .8; pointer-events: none; }
.slpc-stage .slpc-credit { right: 9cqh; bottom: 2.2cqh; font-size: 1.8cqh; }
/* One row of choices: let labels wrap instead of pushing a choice to the next line. */
.slpc-choice { min-width: 0; word-break: break-word; text-align: center; }
.slpc-stage .slpc-choices { width: min(92cqw, calc(var(--n, 3) * 34cqw)); }
.slpc-stage .slpc-choices[data-count="2"] { width: 62cqw; }
.slpc-stage .slpc-choices[data-count="3"] { width: 84cqw; }
.slpc-stage .slpc-choices[data-count="4"] { width: 92cqw; }
.slpc-deck .slpc-deck-theme { position: absolute; top: 1.2vmin; left: 1.2vmin; font-size: 3.4vmin; line-height: 1; }
.slpc-deck > span:last-child { box-shadow: 0 .5vmin 0 var(--player-color, var(--deck-color, #4d96ff)); }

/* Built-in "choose your character" screen (SLPGame.chooseCharacters). */
.slpc-chooser { position: fixed; inset: 0; z-index: 2147482500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; background: rgb(35 38 74 / .55); backdrop-filter: blur(3px); padding: 4vmin; }
.slpc-chooser-title { background: #fff; color: #23264a; font: 900 4.4vmin "Nunito", system-ui, sans-serif; padding: 1.4vmin 4vmin; border-radius: 99px; box-shadow: 0 1vmin 0 var(--c); }
.slpc-chooser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16vmin, 1fr)); gap: 2vmin; width: min(92vw, 130vmin); }
.slpc-chooser-opt { border: 0; cursor: pointer; background: #fff; border-radius: 3vmin; padding: 1.6vmin; display: flex; flex-direction: column; align-items: center; gap: .6vmin; box-shadow: 0 1vmin 0 #dfe4ff; transition: transform .15s; }
.slpc-chooser-opt span { font-size: 11vmin; line-height: 1; }
.slpc-chooser-opt small { font: 800 2.2vmin "Nunito", system-ui, sans-serif; color: #23264a; }
.slpc-chooser-opt:hover:not(:disabled) { transform: translateY(-1vmin) scale(1.05); }
.slpc-chooser-opt:disabled { opacity: .3; cursor: default; }
/* 4 choices = 2 × 2 */
.slpc-stage .slpc-choices[data-count="4"] { width: 64cqw; }
.slpc-stage .slpc-choices[data-count="4"] .slpc-choice { min-height: 15cqh; }
.slpc-stage .slpc-choices[data-count="4"] .slpc-choice .slpc-ce { font-size: 10cqh; }
.slpc-stage .slpc-body:has(> .slpc-picture, > .slpc-scene) .slpc-choices[data-count="4"] .slpc-choice { min-height: 10cqh; flex-direction: row; gap: 2cqh; }
.slpc-stage .slpc-body:has(> .slpc-picture, > .slpc-scene) .slpc-choices[data-count="4"] .slpc-choice .slpc-ce { font-size: 7cqh; }

/* A real picture on a choice (a shared concept with an uploaded image) */
.slpc-choice .slpc-cimg { width: 100%; max-height: 22cqw; object-fit: contain; border-radius: 2cqw; display: block; }

/* ---- Tap to hear: prompts, written cues, hints, answers and every choice can be touched to be read aloud ---- */
.slpc-say { cursor: pointer; border-radius: 2cqw; -webkit-tap-highlight-color: transparent; }
.slpc-say:hover { background: color-mix(in srgb, var(--slpc-accent) 10%, transparent); }
.slpc-say:focus-visible { outline: .8cqw solid var(--slpc-sun); outline-offset: .6cqw; }
.slpc-say::after { content: " 🔊"; font-size: .55em; opacity: .55; font-weight: 400; }
.slpc-said { animation: slpc-said .5s ease; }
@keyframes slpc-said { 30% { transform: scale(1.06); } }
.slpc-cwrap { position: relative; display: flex; min-width: 0; }
.slpc-cwrap > .slpc-choice { flex: 1; min-width: 0; padding-top: 4.5cqw; }
.slpc-stage .slpc-cwrap > .slpc-choice { padding-top: 2.4cqh; }
.slpc-hear {
  all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: -1.4cqw; right: -1.4cqw; z-index: 2;
  width: 7.5cqw; height: 7.5cqw; min-width: 34px; min-height: 34px; display: grid; place-items: center; font-size: 3.8cqw;
  border-radius: 50%; background: var(--slpc-sun); box-shadow: 0 .5cqw 0 #e0a800; border: .5cqw solid #fff;
}
.slpc-hear:active { transform: translateY(.4cqw); box-shadow: none; }
.slpc-hear:focus-visible { outline: .8cqw solid var(--slpc-accent); }
.slpc-stage .slpc-hear { width: 5.6cqh; height: 5.6cqh; min-width: 40px; min-height: 40px; font-size: 3cqh; top: -1cqh; right: -1cqh; box-shadow: 0 .4cqh 0 #e0a800; border-width: .35cqh; }
@media (hover: none), (pointer: coarse) { .slpc-hear { min-width: 48px; min-height: 48px; font-size: 22px; } }
.slpc-choices[data-locked="true"] .slpc-hear { opacity: .6; }