/* Doorway Find the Pairs — activity styles.
   1em = 1/50th of activity width (set by doorway.js onResize).
   All sizing in em; no px except borders.
*/

/* --- Welcome screen ---
   Welcome chrome (logo, enter button, copyright) lives in the shared
   <header>/<footer>. The body group below uses the shared flow-mode
   layout; only the activity-specific illustration sizing is here. */

/* Welcome illustration slot: wrap the absolute-positioned card scatter in
   a sized box so the wrapper participates in the centred flex column.
   max-width keeps the scatter from blowing past the body width on wide
   viewports; the inner .ftp-welcome-cards keeps its em-based fixed
   geometry so the rotated cards stay in their carefully tuned positions. */
.welcome_image {
    width: 100%;
    max-width: 34em;
    margin: var(--dw-space-narrow) auto var(--dw-space-tight);
    position: relative;
    display: flex;
    justify-content: center;
}

/* Scattered card display on welcome screen.
   Fixed-em geometry preserves Flash-faithful rotations and offsets. */
.ftp-welcome-cards {
    position: relative;
    width: 34em;
    height: 14em;
    flex-shrink: 0;
}

/* Base card style for welcome cards (picture cards).
   Flash-faithful: thin black outline, rounded corners. Card-back variants
   override these (see .ftp-wc.ftp-wc-has-back below) because the SVG
   already includes its own outline. */
.ftp-wc {
    position: absolute;
    width: 5.8em;
    height: 7.5em;
    border: 0.1em solid #000;
    border-radius: 0.8em;
    background: #fff;
    box-shadow: 0.15em 0.15em 0.5em var(--dw-color-shadow-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.ftp-wc img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

/* Card-back welcome variants: the SVG already has its own dark outline, so
   strip the wrapper border (and the white background that would peek through
   at the rounded corners) to avoid a double outline. */
.ftp-wc.ftp-wc-has-back {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* Welcome and activity-screen card backs both use the extracted Flash sprite
   (svgs/sprite_39 → ./card-back.svg). Sized 100% of the card so the lavender
   field meets the card border; the SVG already includes its own dark outline. */
.ftp-wc-back {
    width: 100%;
    height: 100%;
    background: url(./card-back.svg) no-repeat center / 100% 100%;
    border-radius: 0.3em;
    filter: drop-shadow(0.15em 0.15em 0.4em var(--dw-color-shadow-modal));
}

/* 15 cards: 4 pairs (hen, orange, fish, cat) + 1 apple + 6 face-down.
   Row 1 (back, z=1): 8 cards at top ≈ 0–0.8em, left step 4em.
   Row 2 (front, z=2): 7 cards at top ≈ 6–6.5em, left step 4em, offset 2em. */
.ftp-wc-1  { left:  0em;   top: 0.5em;  transform: rotate(-12deg); z-index: 1; }
.ftp-wc-2  { left:  4em;   top: 0em;    transform: rotate(5deg);   z-index: 1; }
.ftp-wc-3  { left:  8em;   top: 0.8em;  transform: rotate(-7deg);  z-index: 1; }
.ftp-wc-4  { left: 12em;   top: 0.2em;  transform: rotate(3deg);   z-index: 1; }
.ftp-wc-5  { left: 16em;   top: 0.6em;  transform: rotate(11deg);  z-index: 1; }
.ftp-wc-6  { left: 20em;   top: 0.1em;  transform: rotate(-5deg);  z-index: 1; }
.ftp-wc-7  { left: 24em;   top: 0.4em;  transform: rotate(8deg);   z-index: 1; }
.ftp-wc-8  { left: 28em;   top: 0.3em;  transform: rotate(-4deg);  z-index: 1; }
.ftp-wc-9  { left:  2em;   top: 6.5em;  transform: rotate(7deg);   z-index: 2; }
.ftp-wc-10 { left:  6em;   top: 6em;    transform: rotate(-4deg);  z-index: 2; }
.ftp-wc-11 { left: 10em;   top: 6.5em;  transform: rotate(9deg);   z-index: 2; }
.ftp-wc-12 { left: 14em;   top: 6.2em;  transform: rotate(-6deg);  z-index: 2; }
.ftp-wc-13 { left: 18em;   top: 6.5em;  transform: rotate(5deg);   z-index: 2; }
.ftp-wc-14 { left: 22em;   top: 6em;    transform: rotate(-8deg);  z-index: 2; }
.ftp-wc-15 { left: 26em;   top: 6.4em;  transform: rotate(4deg);   z-index: 2; }

/* --- Options form layout ---
   Use flex so the groups fill the available screen height.
*/

/* Inner column: flex column with gaps between option groups.
   Shared flow-mode CSS overrides height/overflow so the page can scroll. */
#dwUserOptions .user_options {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: var(--dw-space-snug) var(--dw-space-default) var(--dw-space-default);
    gap: var(--dw-space-narrow);
}

fieldset.options_group {
    margin: 0;
    padding: 0 var(--dw-space-loose) var(--dw-space-default);
    flex: 1;
    min-height: 0;
    text-align: left;
    box-sizing: border-box;
}

/* Wrapper div: push content down from the legend */
.options_group_body {
    padding-top: 0.8em;
}

/* Inner control fieldsets (radio pairs) have no visual border */
.options_group fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* --- Screen layout --- */

/* Flex-column skeleton comes from .dw-activity-screen in shared/doorway.css. */
.ftp-screen {
    overflow: hidden;
    padding: 2em var(--dw-space-loose) var(--dw-space-loose); /* top clears navigation header (~1.2em) */
    gap: var(--dw-space-default);
}

/* --- Card grid --- */

.ftp-card-grid {
    display: flex;
    flex-direction: column;
    gap: var(--dw-space-default);
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    padding: var(--dw-space-default) 0;
}

.ftp-card-row {
    display: flex;
    gap: var(--dw-space-default);
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
    min-height: 0;
}

/* Flip card system. Cards keep their target size (7.15em × 9.75em) when the
   row count is small, but shrink to fit when 3-row configs (12/14/16/18 cards)
   would otherwise overflow the viewport. `flex: 1` on rows shares the grid
   height evenly; `aspect-ratio` + `max-*` on cards lets them shrink while
   preserving proportion and never exceeding the original size. */
.ftp-card {
    aspect-ratio: 7.15 / 9.75;
    height: 100%;
    width: auto;
    max-height: 9.75em;
    max-width: 7.15em;
    cursor: pointer;
    perspective: 37.5em;
    border-radius: 0.5em;
    flex-shrink: 0;
}

.ftp-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.ftp-card.ftp-flipped .ftp-card-inner,
.ftp-card.ftp-matched .ftp-card-inner {
    transform: rotateY(180deg);
}

.ftp-card-down,
.ftp-card-up {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.5em;
    border: 2px solid var(--dw-color-border-muted);
    box-sizing: border-box;
    overflow: hidden;
}

.ftp-card-down {
    background: url(./card-back.svg) no-repeat center / 100% 100%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ftp-card-up {
    transform: rotateY(180deg);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ftp-card-up img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.ftp-card.ftp-matched .ftp-card-up {
    border-color: var(--dw-color-feedback-correct);
    border-width: 0.2em;
}

.ftp-card:focus-visible {
    outline: 0.3em solid #ffaa00;
    outline-offset: 0.1em;
    border-radius: 0.5em;
}

/* Cards paint no ring while the most recent input was pointer — mouse
   and touch users get no hover / focus outline. Keyboard nav removes
   .dw-pointer-mode from <body> so the :focus-visible ring above returns. */
.dw-pointer-mode .ftp-card:hover,
.dw-pointer-mode .ftp-card:focus,
.dw-pointer-mode .ftp-card:focus-visible {
    outline: none;
}

/* --- Well done overlay --- */

.ftp-welldone-overlay {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #ffffcc;
    border: 2px solid #ccaa00;
    border-radius: 0.8em;
    padding: var(--dw-space-loose) 2em;
    text-align: center;
    z-index: 10;
    opacity: 0;
}

/* Fade-in + gentle pop when the overlay is revealed. Triggered by the
   .ftp-welldone-visible class added after the final pair is matched. */
.ftp-welldone-overlay.ftp-welldone-visible {
    animation: ftp-welldone-reveal 0.6s ease-out forwards;
}

@keyframes ftp-welldone-reveal {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.7); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1.05); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.00); }
}

.ftp-welldone-text {
    font-size: 2em;
    font-weight: bold;
    margin: 0;
}

/* --- Results screen ---
   Layout mirrors same-or-different: heading, praise, stats, action button,
   stacked and centred. */

.ftp-results-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--dw-space-default);
    text-align: center;
}

.ftp-results-heading {
    font-size: var(--dw-font-size-large);
    font-weight: bold;
    margin: 0 0 0.8em;
}

.ftp-congrat-text {
    font-size: 2.1em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    color: var(--dw-color-feedback-correct);
}

.ftp-stat-text {
    font-size: 1.3em;
    margin: 0;
}

.ftp-results-nav {
    display: flex;
    gap: var(--dw-space-loose);
    justify-content: center;
    padding-top: var(--dw-space-default);
}

/* --- Navigation --- */

/* Reserve space for the Results button so the grid doesn't reflow when it
   appears after the final pair is matched. min-height covers the rendered
   main_button (font-size 1.2em, browser default line-height + padding +
   0.1em margin ≈ 2.3em) with a small buffer. */
.ftp-activity-nav {
    display: flex;
    gap: var(--dw-space-loose);
    justify-content: center;
    padding-top: var(--dw-space-default);
    min-height: 2.4em;
    box-sizing: content-box;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}