/*
 * Flashcard widget styles — shared by page-flashcards.php and
 * page-category-based-vocs.php so the list <-> flashcard toggle renders
 * identically on both pages.
 */
.dw-title { font-size: 28px; font-weight: bold; color: #0f3a8b; line-height: 1.05; }
.dw-more  { font-size: 13px; color: #1a1a1a; text-decoration: none; }
.dw-more:hover { text-decoration: underline; }

/* Flashcard sits in a flex row with the color picker beside it (picker is a sibling, not inside the card) */
.voc-flash-card-wrap { display: flex; align-items: stretch; gap: 12px; margin-top: 16px;}
/* Column stack of [card | controls] so the card div can carry transitions
   independently of the controls (which now sit BELOW it as a sibling). */
.voc-flash-card-main { flex: 1; display: flex; flex-direction: column; }
/* .voc-flash-card is now just a layout container — the visual card
   (background, shadow, radius) moved to .dw-card so each card looks
   like its own discrete floating card, matching the sample design. */
.voc-flash-card { display: flex; flex-direction: column; min-height: 350px; }

/* Background color picker — a separate vertical column next to the card, transparent so it sits on the page bg */
.dw-colors {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 0 8px;
    background: transparent;
    margin-bottom: 48px;
}
.dw-color {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dw-color:hover { transform: scale(1.15); }
.dw-color:focus { outline: none; }
.dw-color.is-active { box-shadow: 0 0 0 2px #1a73e8, 0 0 0 3px #fff; }
.dw-stage { position: relative; flex: 1; min-height: 350px; overflow: hidden; border-radius: 8px; }
/* Variant C — "slide + scale". Each .dw-card is now THE visual card
   (background, shadow, radius) — matches the sample design where each
   slide is its own floating card. Layout is a centred column so the
   Chinese character, pinyin and English meaning stack vertically.
   Off-stage cards are translated edge-to-edge AND scaled to 0.94 so the
   transition reads as a soft depth shift. .is-active sets transform:none
   so the resting card doesn't create a containing block (lets the
   breakdown popup's position:fixed layout work over the full viewport). */
.dw-card  {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    box-sizing: border-box;
    background: #ececec;
    border-radius: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
    min-height: 350px;
    transform: translate3d(100%, 0, 0) scale(0.94);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease;
    /* NO will-change: transform — it creates a containing block for
       position:fixed descendants (the calligraphy + breakdown popups
       live inside the card and use position:fixed to span the viewport).
       Browsers auto-promote transformed elements during the transition
       anyway, so we don't need the hint. */
    pointer-events: none;
}
.dw-card.is-active {
    transform: none;
    pointer-events: auto;
}
.dw-card.is-left {
    transform: translate3d(-100%, 0, 0) scale(0.94);
}
/* Shuffle uses this to snap into the new state without an animation flash */
.dw-stage.no-anim .dw-card { transition: none; }
.dw-card-text { text-align: center; }
.dw-cnchar { font-size: 64px; font-weight: 600; line-height: 1.1; }
.dw-pinyin { font-size: 18px; color: #666; margin-top: 12px; }
.dw-eng    { font-size: 16px; color: #333; margin-top: 8px; }

/* Action icons float in the top-right corner of each card so the
   centred text/pinyin/meaning stays the visual anchor. */
.dw-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.dw-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dw-shuffle, .dw-prev, .dw-next, .dw-playpause { border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 4px; }
.dw-shuffle:hover, .dw-prev:hover, .dw-next:hover, .dw-playpause:hover,
.dw-shuffle:focus, .dw-prev:focus, .dw-next:focus, .dw-playpause:focus { background: #ececec; outline: none; }
.dw-prev img, .dw-next img { height: 22px; }
.dw-dots { flex: 1; display: flex; justify-content: center; align-items: center; gap: 6px; }
.dw-dot  { width: 20px; height: 3px; background: #888; border-radius: 2px; cursor: pointer; }
.dw-dot.is-active { background: #1a73e8; }

.dw-playpause { width: 36px; height: 36px; border-radius: 50%; background: #d9d9d9; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.dw-playpause img { fill: #333; }
.dw-playpause .play-icon { display: none; }
.dw-playpause[data-state="paused"] .pause-icon { display: none; }
.dw-playpause[data-state="paused"] .play-icon  { display: block; }

@media (max-width: 735px) {
    .daily-words-flash-card { flex-direction: column; width: 90%; }
    .dw-left { width: auto; }
}