/* What is Zeshonderd paprika's own (taaltaal-exercise-plural.js); the rest is the shared look of taaltaal-scene.css. No
   room: a market stall, its awning on top of the paper card with Ans's photo pinned to it, and on the counter Bo beside the
   cards. The cards of Uitleg turn over (from één boom to zeven bomen) by a transform, on the compositor; the signs of the
   market are little chalkboards in a wooden frame */
taaltaal-exercise-plural .tts-card { padding-top: 0; overflow: hidden; }
/* the awning: stripes in TaalTaal's magenta and white, scalloped at the bottom; its shadow falls straight down on the outer
   box, as the mask of the stripes would cut a shadow of their own away */
taaltaal-exercise-plural .tpl-awning { height: 40px; margin: 0 -20px 6px; filter: drop-shadow(0 4px 3px rgba(90, 20, 50, .35)); }
taaltaal-exercise-plural .tpl-awning i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #d81b6a 0 28px, #fff 28px 56px);
        -webkit-mask: linear-gradient(#000 0 0) top / 100% 26px no-repeat, radial-gradient(circle 14px at 14px 0, #000 98%, transparent) 0 26px / 28px 14px repeat-x;
        mask: linear-gradient(#000 0 0) top / 100% 26px no-repeat, radial-gradient(circle 14px at 14px 0, #000 98%, transparent) 0 26px / 28px 14px repeat-x; }
taaltaal-exercise-plural .tpl-ans { position: absolute; top: 4px; right: 14px; z-index: 2; width: 92px; height: auto; cursor: pointer; }

/* the counter: Bo on the left, what is done in the middle, room for Ans's photo on the right */
taaltaal-exercise-plural .tpl-counter { display: grid; grid-template-columns: 104px minmax(0, 1fr) 84px; gap: 12px; align-items: start; }
taaltaal-exercise-plural .tpl-bo { position: relative; margin-top: 44px; }
taaltaal-exercise-plural .tpl-bo svg { display: block; width: 104px; height: auto; cursor: pointer; }
/* what Bo says himself, in a balloon beside him: it can be a whole sentence */
taaltaal-exercise-plural .tpl-says { position: absolute; left: 62px; top: -40px; z-index: 3; width: max-content; max-width: 230px; margin: 0; padding: 8px 13px 9px;
        border: 2.5px solid #73d2f7; border-radius: 14px; background: #fff; font-size: 14.5px; font-weight: bold; line-height: 1.3; color: #2b3f93;
        box-shadow: 0 4px 12px rgba(43, 63, 147, .2); animation: tpl-says .25s ease-out; }
taaltaal-exercise-plural .tpl-says::before { content: ""; position: absolute; left: 10px; bottom: -9px; width: 12px; height: 12px; background: #fff;
        border: solid #73d2f7; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes tpl-says { from { opacity: 0; transform: translateY(6px) scale(.9); } }
taaltaal-exercise-plural .tpl-main { padding-top: 8px; min-height: 230px; }

/* Uitleg: the ways as pills, why, and the cards that turn over */
taaltaal-exercise-plural .tpl-rules { display: flex; flex-wrap: wrap; gap: 6px; }
taaltaal-exercise-plural .tpl-rules button { padding: 6px 13px; border: 1px solid #dcd6c8; border-radius: 16px; background: #fff; font: inherit; font-weight: bold;
        color: #2b3f93; cursor: pointer; box-shadow: 0 1px 2px rgba(60, 45, 20, .1); }
taaltaal-exercise-plural .tpl-rules button:hover { background: #f3f6fb; }
taaltaal-exercise-plural .tpl-rules button[aria-pressed="true"] { background: linear-gradient(#ee3399, #cd1269); border-color: #cd1269; color: #fff; }
taaltaal-exercise-plural .tpl-why { margin: 12px 0; font-size: 15px; color: #5b4a30; }
taaltaal-exercise-plural .tpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
/* four cards as two by two, not three and one alone: the same size, in the middle */
taaltaal-exercise-plural .tpl-cards[data-n="4"] { grid-template-columns: repeat(2, minmax(132px, 160px)); justify-content: center; }
taaltaal-exercise-plural .tpl-flip { position: relative; height: 150px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; perspective: 700px; }
taaltaal-exercise-plural .tpl-side { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        padding: 8px; border: 1px solid #e6dcc8; border-radius: 10px; background: #fff; box-shadow: 0 2px 5px rgba(60, 45, 20, .14);
        backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .55s cubic-bezier(.4, 1.3, .5, 1); }
taaltaal-exercise-plural .tpl-back { transform: rotateY(180deg); background: #fffdf4; }
taaltaal-exercise-plural .tpl-flip[aria-pressed="true"] .tpl-front { transform: rotateY(-180deg); }
taaltaal-exercise-plural .tpl-flip[aria-pressed="true"] .tpl-back { transform: none; }
taaltaal-exercise-plural .tpl-flip .tpl-pic { width: 100%; height: 96px; }
taaltaal-exercise-plural .tpl-word { font-size: 16px; font-weight: bold; color: #2b3f93; }
taaltaal-exercise-plural .tpl-word b, taaltaal-exercise-plural .tpl-good b b { color: #c70765; }
taaltaal-exercise-plural .tpl-flip:hover .tpl-side { box-shadow: 0 4px 10px rgba(60, 45, 20, .2); }

/* Invullen: a card from Bo's list, how many, and where the plural is typed */
taaltaal-exercise-plural .tpl-card { position: relative; max-width: 440px; margin: 0 auto; padding: 10px 16px 16px; border: 1px solid #e6dcc8; border-radius: 12px;
        background: #fff; box-shadow: 0 2px 6px rgba(60, 45, 20, .14); }
taaltaal-exercise-plural .tpl-list { margin: 0 0 4px; font-size: 14px; color: #8a7a5a; }
taaltaal-exercise-plural .tpl-list b { font-size: 16px; color: #2b3f93; }
taaltaal-exercise-plural .tpl-card .tpl-pic { display: block; width: 100%; height: auto; max-height: 180px; cursor: pointer; }
taaltaal-exercise-plural .tts-play.tpl-check::before { display: none; }
taaltaal-exercise-plural .tpl-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 8px 0 0; }
taaltaal-exercise-plural .tpl-form label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; font-size: 14px; color: #5b4a30; }
/* the number as a word right before the box, so it reads as what you write: vijftig [brieven] */
taaltaal-exercise-plural .tpl-need { margin: 8px 0 0; font-size: 14px; color: #5b4a30; text-align: center; }
taaltaal-exercise-plural .tpl-form label { flex-wrap: nowrap; }
/* on a wide card the number, the box and Klaar on one line, also for zeshonderd: the box gives way, the button does not wrap */
@media (min-width: 561px) { taaltaal-exercise-plural .tpl-form { flex-wrap: nowrap; } }
taaltaal-exercise-plural .tpl-count { font-size: 20px; color: #c70765; white-space: nowrap; }
taaltaal-exercise-plural .tpl-form input { width: 10em; min-width: 7em; flex: 0 1 10em; padding: 6px 10px; border: 2px solid #d9cdb4; border-radius: 8px; background: #fffdf7; font: inherit; font-size: 20px;
        font-weight: bold; color: #2b3f93; }
taaltaal-exercise-plural .tpl-form input:focus { outline: none; border-color: #73d2f7; box-shadow: 0 0 0 3px rgba(115, 210, 247, .35); }
taaltaal-exercise-plural .tpl-form input.right { border-color: #393; background: #ecf8ea; color: #1f6b1f; }
taaltaal-exercise-plural .tpl-form input.wrong { border-color: #c70765; background: #fdeef4; color: #a0054f; }
taaltaal-exercise-plural .tpl-form input::placeholder { font-size: 14px; font-weight: normal; color: #b0a58c; }
taaltaal-exercise-plural .tpl-fill .tts-feedback { max-width: 440px; margin: 0 auto; }
taaltaal-exercise-plural .tpl-answer { white-space: nowrap; }     /* Het is: drie bomen, after the why, kept on one line */
taaltaal-exercise-plural .tpl-score { text-align: center; }     /* the score and Nog een keer in the middle, under the end */
/* the end of the round with the score in the middle of the room the card had (display wins from the flow-root of TaalTaalScene.fit) */
taaltaal-exercise-plural .tpl-main:has(.tts-end) { display: flex !important; flex-direction: column; justify-content: center; }
taaltaal-exercise-plural .tpl-good { font-size: 17px; }
taaltaal-exercise-plural .tpl-good > b:first-child { color: #2f9a2f; }

/* Op de markt: the signs, chalkboards in a wooden frame; a mistake found is crossed out and chalked over in yellow */
/* the market with room to breathe: the name, what to do, the tally on a line of its own, then the signs and what is said */
taaltaal-exercise-plural .tpl-where { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: #5b4a30; }
taaltaal-exercise-plural .tpl-where b { display: block; margin-bottom: 8px; font-size: 18px; color: #2b3f93; }
taaltaal-exercise-plural .tpl-where .tpl-hunt { color: #c70765; }     /* zoek de fout! */
taaltaal-exercise-plural .tpl-tally { display: table; margin-top: 8px; padding: 1px 9px; border-radius: 10px; background: #2b3f93; color: #fff;
        font-size: 12.5px; font-weight: bold; white-space: nowrap; }
/* every row of signs as tall as the others: the box keeps the height of the tallest market (TaalTaalScene.fit), and its rows
   share it, so a sign is as tall on every market */
taaltaal-exercise-plural .tpl-signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
taaltaal-exercise-plural .tpl-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px 10px; border: 6px solid #b97a40;
        border-radius: 6px; background: #2f3a33; box-shadow: inset 0 0 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(60, 45, 20, .3); font: inherit; cursor: pointer; }
taaltaal-exercise-plural .tpl-sign:hover { border-color: #c8894d; }
taaltaal-exercise-plural .tpl-sign .tpl-pic { width: 76%; height: 62px; }
taaltaal-exercise-plural .tpl-chalk { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 15px; line-height: 1.3; color: #f4f1e8; }
taaltaal-exercise-plural .tpl-sign.fixed { border-color: #5bae4a; cursor: default; }
taaltaal-exercise-plural .tpl-sign.fixed .tpl-plural { text-decoration: line-through; text-decoration-color: #ff6b8a; text-decoration-thickness: 2px; opacity: .65; }
taaltaal-exercise-plural .tpl-fix { margin-left: 5px; font-weight: bold; color: #ffd84d; }
taaltaal-exercise-plural .tpl-fine { color: #5b4a30; }
taaltaal-exercise-plural .tpl-fine b { color: #2f9a2f; }

@media (max-width: 560px)
{
    taaltaal-exercise-plural .tpl-awning { margin: 0 -12px 4px; }
    taaltaal-exercise-plural .tpl-ans { width: 66px; right: 8px; }
    taaltaal-exercise-plural .tpl-counter { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
    /* on a phone Bo stands above the cards, and what he says goes beside him, where there is room */
    taaltaal-exercise-plural .tpl-bo { margin-top: 8px; }
    taaltaal-exercise-plural .tpl-bo svg { width: 64px; }
    taaltaal-exercise-plural .tpl-main { grid-column: 1 / -1; min-height: 0; padding-top: 0; }
    taaltaal-exercise-plural .tpl-says { left: 76px; top: 8px; max-width: 180px; font-size: 13.5px; }
    taaltaal-exercise-plural .tpl-says::before { left: -9px; top: 16px; bottom: auto; border-width: 0 0 2.5px 2.5px; }
    taaltaal-exercise-plural .tpl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    taaltaal-exercise-plural .tpl-cards[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    taaltaal-exercise-plural .tpl-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    taaltaal-exercise-plural .tpl-form input { width: 9em; flex-basis: 9em; }
}
@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-plural .tpl-side { transition: none; }
    taaltaal-exercise-plural .tpl-says { animation: none; }
}
taaltaal-exercise-plural .tpl-signs + .tts-feedback { margin-top: 16px; }
taaltaal-exercise-plural .tpl-onward { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
taaltaal-exercise-plural .tpl-onward .tts-score, taaltaal-exercise-plural .tpl-onward .tts-next { margin: 0; }
/* the last market done: where the signs were, the end at the top of the field */
taaltaal-exercise-plural .tpl-signs.tpl-done { display: flex; flex-direction: column; justify-content: flex-start; }
taaltaal-exercise-plural .tpl-signs.tpl-done .tts-end { padding-top: 14px; }
taaltaal-exercise-plural .tpl-signs.tpl-done .tpl-score { margin-top: 18px; }
taaltaal-exercise-plural .tpl-where[hidden] { display: none; }
taaltaal-exercise-plural .tts-card.tpl-market { padding-bottom: 10px; }     /* the market ends a little closer to its feedback */