/* Word cards */
.wc-stage { display: grid; gap: 1rem; justify-items: center; width: 100%; }
.wc-card { width: min(88vw, 26.25rem); aspect-ratio: 3 / 2; perspective: 56.25rem; border: 0; background: transparent; padding: 0; cursor: pointer; }
.wc-in { position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.3, .7, .3, 1.2); transform-style: preserve-3d; }
.wc-card.flip .wc-in { transform: rotateY(180deg); }
.wc-f, .wc-k { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 1.125rem; background: #fff; display: grid; place-items: center; align-content: center; gap: .375rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: .25rem .25rem 0 var(--sky); padding: .75rem; }
.wc-k { transform: rotateY(180deg); background: #F3FAFF; }
.wc-word { font: 800 clamp(1.875rem, 8vw, 3.25rem)/1.1 var(--f-d), var(--cjk); text-align: center; overflow-wrap: anywhere; }
.wc-mean { font: 700 clamp(1.625rem, 7vw, 2.75rem)/1.2 var(--f-b), var(--cjk); text-align: center; }
.wc-small { font: 600 1rem/1 var(--f-b), var(--cjk); color: var(--ink2); }
.wc-emoji { font-size: clamp(4rem, 18vw, 6.875rem); line-height: 1; }
.wc-emoji.sm { font-size: 2.5rem; }
.wc-judge { display: flex; gap: 1.125rem; justify-content: center; }
.big-o { min-width: 6rem; min-height: 4.5rem; font-size: 2.125rem !important; }
.wc-prompt { display: flex; gap: .75rem; align-items: center; }
.wc-listen { min-width: 6.875rem; min-height: 5rem; font-size: 2.5rem; }
.wc-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: min(92vw, 32.5rem); }
.wc-choice { position: relative; min-height: 6rem; border: 2px solid var(--edge); background: #fff; border-radius: 1rem; display: grid; place-items: center; gap: .25rem; padding: .625rem; font: 700 1.25rem/1.2 var(--f-b), var(--cjk); color: var(--ink); cursor: pointer; }
.wc-choice[disabled] { opacity: .45; }
.wc-list { columns: 2; font-size: 1rem; }
@media print {
  .pcards { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); height: 100%; border: .3mm dashed #999; }
  .pc { border: .3mm dashed #999; display: grid; place-items: center; align-content: center; gap: 2mm; padding: 3mm; text-align: center; }
  .pc .pw { font: 700 17pt/1.2 "Lexend", system-ui, var(--cjk), sans-serif; overflow-wrap: anywhere; }
  .pc .pe { font-size: 16pt; }
  .pc .pe.big { font-size: 40pt; }
}