/* Styles for the pieces drawn in code by the games (see js/games/_kit.js). */

.target-sign { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: .2cqw 2.4cqw; min-width: 8cqw; display: grid; justify-items: center; z-index: 3; }
.target-sign .big, .number-board .big { font-size: 6.4cqw; line-height: 1.05; }
.target-sign .sub { font-size: 1.2cqw; margin-top: -.4cqw; padding-bottom: .4cqw; }

.supply { position: absolute; }
.snowball { position: absolute; width: 5.4cqw; aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 30%, #fff 0%, #f1f5fd 50%, #cfdaee 100%); box-shadow: 0 .3cqw .5cqw rgba(80, 100, 150, .35), inset -.3cqw -.3cqw .6cqw rgba(150, 170, 215, .35); }
.snowball.fixed { cursor: default; }
.pile-label { position: absolute; left: 4%; bottom: 0; font-weight: 800; font-size: 1.3cqw; color: #fff; text-shadow: 0 .15cqw .4cqw rgba(60, 40, 90, .7); }

.basket { position: absolute; aspect-ratio: 1.95; }
.basket-back { position: absolute; left: 3%; right: 3%; top: 4%; bottom: 8%; border-radius: 1.6cqw 1.6cqw 3cqw 3cqw; background: linear-gradient(#8a5630, #a36a3f); box-shadow: inset 0 .6cqw 1.2cqw rgba(40, 20, 10, .5); pointer-events: none; }
.basket-contents { position: absolute; left: 6%; right: 6%; top: -6%; bottom: 0; }
.basket-front { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; border-radius: .6cqw .6cqw 2.6cqw 2.6cqw; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(90deg, #c98a55 0 1.6cqw, #b9784a 1.6cqw 1.8cqw), #c98a55; border: .28cqw solid #7d4c2a; box-shadow: inset 0 .25cqw 0 #e6b383, 0 .5cqw 1cqw rgba(60, 35, 20, .35); }
.basket-front::before { content: ""; position: absolute; left: -1%; right: -1%; top: -.7cqw; height: 1.4cqw; border-radius: 1cqw; background: linear-gradient(#e0a678, #b9784a); border: .22cqw solid #7d4c2a; }
.count-badge { position: absolute; right: -1.2cqw; top: -2.2cqw; z-index: 5; min-width: 5cqw; height: 5cqw; display: grid; place-items: center; font-weight: 800; font-size: 3cqw; color: #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9b8e8, #9d86cf); border: .25cqw solid #fff; box-shadow: 0 .3cqw .6cqw rgba(60, 40, 90, .4); pointer-events: none; }

.answer-choices { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; gap: 1.8cqw; z-index: 6; }
.choices .choice { width: 11cqw; height: 11cqw; }
.word-choices .choice { width: 17cqw; font-size: 3.4cqw; }
.zero-reveal { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: 10cqw; height: 10cqw; display: grid; place-items: center; font-weight: 800; font-size: 7cqw; color: #fff; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9b8e8, #9d86cf); border: .3cqw solid #fff; box-shadow: 0 .4cqw .8cqw rgba(60, 40, 90, .4); z-index: 5; }
.zero-reveal[hidden] { display: none; }

/* Christmas lights */
.light-string { position: absolute; left: 0; right: 0; top: 24%; height: 60%; }
.light-string svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bulb { position: absolute; width: 6.4cqw; min-height: 9cqw; transform: translate(-50%, 0); background: none; border: 0; padding: 0; display: grid; justify-items: center; align-content: start; }
.bulb-cap { display: block; width: 1.6cqw; height: 1.3cqw; background: #7d6a5c; border-radius: .3cqw; }
.bulb-glass { display: block; width: 4.6cqw; height: 6cqw; margin-top: -.1cqw; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #f6f3ee, #cfc8c0 70%); box-shadow: inset -.3cqw -.3cqw .6cqw rgba(0, 0, 0, .12); transition: background .3s, box-shadow .3s; }
.bulb.lit .bulb-glass { background: radial-gradient(circle at 35% 30%, #fff, var(--c) 62%, color-mix(in srgb, var(--c) 70%, #7a5a40)); box-shadow: 0 0 2cqw .8cqw color-mix(in srgb, var(--c) 70%, #fff7c0), inset -.3cqw -.3cqw .6cqw rgba(0, 0, 0, .1); }

/* Number match */
.number-board { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 24cqw; height: 24cqw; display: grid; justify-items: center; align-content: start; padding-top: 1.2cqw; z-index: 2; }
.group-row { position: absolute; left: 0; right: 0; bottom: 2%; display: flex; justify-content: space-evenly; align-items: flex-end; }
.snow-group { position: relative; width: 22cqw; height: 13cqw; background: rgba(255, 255, 255, .55); border: .3cqw dashed #9ab4de; border-radius: 2cqw; }
.flake-mini { position: absolute; width: 3.6cqw; margin: -1.8cqw 0 0 -1.8cqw; pointer-events: none; }
.number-board .snow-group { background: transparent; border: 0; }

/* Biscuits */
.tray { position: absolute; left: 31%; width: 38%; bottom: 2%; height: 36%; border-radius: 2cqw; background: linear-gradient(#e7c79a, #d2a874); border: .3cqw solid #a9794a; box-shadow: inset 0 .4cqw .8cqw rgba(255, 255, 255, .4), 0 .5cqw 1cqw rgba(60, 35, 20, .3); }
.friend { position: absolute; bottom: 0; width: 26%; height: 100%; }
.friend-img { position: absolute; bottom: 24%; left: 50%; transform: translateX(-50%); height: 54%; width: auto; }
.friend-img.penguin { height: 40%; }
.plate { position: absolute; bottom: 2%; left: 0; right: 0; height: 34%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #fff, #e9eefb 70%); border: .3cqw solid #b8c6e6; box-shadow: 0 .5cqw .9cqw rgba(60, 35, 20, .3); }
.biscuit { position: absolute; cursor: grab; object-fit: contain; filter: drop-shadow(0 .2cqw .3cqw rgba(60, 35, 20, .35)); }

/* Train */
.rail { position: absolute; left: 3%; top: 8%; display: flex; align-items: flex-end; gap: .6cqw; transition: transform 1.3s ease-in; }
.rail.go { transform: translateX(110cqw); }
.loco { position: relative; width: 11cqw; height: 9cqw; border-radius: 1.4cqw 3cqw .8cqw .8cqw; background: linear-gradient(#a9c6ea, #7fa4d6); border: .25cqw solid #5f84b8; }
.loco i { position: absolute; left: 12%; top: -2cqw; width: 2.6cqw; height: 2.6cqw; background: #c9b8e8; border-radius: .6cqw .6cqw 0 0; }
.loco b { position: absolute; right: 14%; top: 22%; width: 3cqw; height: 3cqw; border-radius: 50%; background: #fff6df; border: .25cqw solid #5f84b8; }
.track { display: flex; gap: .6cqw; }
.slot { height: 9.5cqw; border: .3cqw dashed #9ab4de; border-radius: 1.4cqw; background: rgba(255, 255, 255, .5); display: grid; }
.slot:has(.carriage) { border-style: solid; border-color: transparent; background: transparent; }
.carriage { position: relative; width: 100%; height: 8.2cqw; border-radius: 1.2cqw; background: var(--c); border: .25cqw solid rgba(70, 50, 90, .35); box-shadow: inset 0 .3cqw 0 rgba(255, 255, 255, .5), 0 .3cqw .5cqw rgba(60, 40, 90, .25); display: grid; place-items: center; }
.carriage .num { font-weight: 800; font-size: 4cqw; color: #fff; text-shadow: 0 .2cqw 0 rgba(60, 40, 90, .55); }
.carriage .wheel { position: absolute; bottom: -1cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: #6d5a8f; border: .2cqw solid #fff; }
.carriage .w1 { left: 14%; } .carriage .w2 { right: 14%; }
.pile { position: absolute; left: 0; right: 0; bottom: 4%; height: 26%; }
.pile .carriage.loose { position: absolute; cursor: grab; }
.slot .carriage { height: 100%; }
.slot .carriage.fixed, .slot .carriage.locked { cursor: default; }

/* Letter catch */
.sky { position: absolute; inset: 0 0 16% 0; overflow: hidden; border-radius: 2cqw; }
.flake { position: absolute; top: 0; width: 9cqw; aspect-ratio: 1; background: none; border: 0; padding: 0; animation: drift var(--dur, 20s) linear var(--delay, 0s) infinite; }
.flake-img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .3cqw .4cqw rgba(80, 110, 170, .4)); pointer-events: none; }
.flake-letter { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.2cqw; font-weight: 800; color: #5d4a95; text-shadow: 0 0 .5cqw #fff, 0 0 .5cqw #fff; pointer-events: none; }
@keyframes drift { 0% { transform: translate(0, -14cqw); } 25% { transform: translate(var(--sway), 8cqw); } 50% { transform: translate(calc(var(--sway) * -1), 22cqw); } 75% { transform: translate(var(--sway), 34cqw); } 100% { transform: translate(0, 48cqw); } }
.catch-basket { position: absolute; right: 2%; bottom: 0; width: 24cqw; height: 9cqw; border-radius: 1.4cqw 1.4cqw 3cqw 3cqw; background: linear-gradient(#c98a55, #94592f); border: .28cqw solid #7d4c2a; z-index: 4; }
.catch-basket .tally { position: absolute; right: 4%; bottom: 8%; font-weight: 800; font-size: 2cqw; color: #fff; text-shadow: 0 .15cqw 0 rgba(90, 52, 26, .8); }
.catch-basket .flake { animation: none; position: absolute; width: 6cqw; }

/* Memory */
.memory-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), auto); grid-template-rows: repeat(var(--rows), auto); gap: 1.2cqw; justify-content: center; align-content: center; }
.card { position: relative; width: calc(min(14cqw, 78cqw / var(--cols)) ); aspect-ratio: .86; background: none; border: 0; padding: 0; perspective: 90cqw; }
.memory-grid[style*="--rows: 4"] .card { width: 9.4cqw; }
.card .face { position: absolute; inset: 0; border-radius: 1.4cqw; display: grid; place-items: center; backface-visibility: hidden; transition: transform .45s ease; box-shadow: 0 .4cqw .8cqw rgba(60, 35, 20, .3); }
.card .back { background: linear-gradient(160deg, #c9b8e8, #a591d4); border: .28cqw solid #fff; transform: rotateY(0); }
.card .back i { width: 40%; aspect-ratio: 1; background: url(../assets/objects/snowflake.png) center / contain no-repeat; opacity: .9; }
.card .front { background: linear-gradient(#fffaf0, #f4e6cc); border: .28cqw solid #d9b886; transform: rotateY(180deg); }
.card.flipped .back, .card.matched .back { transform: rotateY(-180deg); }
.card.flipped .front, .card.matched .front { transform: rotateY(0); }
.card.matched .front { background: linear-gradient(#e7f6dc, #c9e8b6); border-color: #8fbf7a; }
.card-pic { width: 78%; height: 78%; object-fit: contain; }

/* Snowflake matching */
.flake-model { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 21cqw; height: 21cqw; display: grid; place-items: center; background: linear-gradient(#e9f1ff, #cfdcf5); border-color: #9ab4de; }
.flake-model::before { display: none; }
.flake-options { position: absolute; left: 0; right: 0; bottom: 2%; display: flex; justify-content: space-evenly; }
.flake-option { width: 17cqw; aspect-ratio: 1; padding: .6cqw; background: linear-gradient(#fffaf0, #eef3fc); border: .3cqw solid #b8c6e6; border-radius: 2cqw; box-shadow: 0 .5cqw .9cqw rgba(60, 35, 20, .25); }
.flake-option.right { background: linear-gradient(#e7f6dc, #c9e8b6); border-color: #8fbf7a; }
.flake-option.spin svg { animation: spin 1s ease-in-out; }
@keyframes spin { to { transform: rotate(360deg); } }
.flake-model svg, .flake-option svg { width: 100%; height: 100%; display: block; }
svg .ink line { stroke: #7fa7da; stroke-width: 3; stroke-linecap: round; }
svg .halo line { stroke: #fff; stroke-width: 7; stroke-linecap: round; }
svg .dot { fill: #7fa7da; }
svg .core { fill: #fff; stroke: #7fa7da; stroke-width: 2.5; }

/* ---------- picture library ---------- */
.art { display: inline-block; width: 100%; height: 100%; line-height: 0; }
.art svg, .art img { width: 100%; height: 100%; display: block; overflow: visible; object-fit: contain; filter: drop-shadow(0 .35cqw .3cqw rgba(60, 35, 70, .28)); }

/* =====================================================================
   Template games (js/games/templates.js)
   ===================================================================== */
.tpl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 1cqw; }
.vis { display: inline-grid; place-items: center; width: var(--s, 10cqw); height: var(--s, 10cqw); position: relative; }
.vis > .art { width: 100%; height: 100%; }
.vis .letter { font-size: calc(var(--s, 10cqw) * .86); font-weight: 800; line-height: 1; color: #5b3fa0; text-shadow: 0 .25cqw 0 rgba(255, 255, 255, .9), 0 .5cqw .8cqw rgba(60, 40, 110, .3); }
.vis .vtext { font-weight: 800; font-size: calc(var(--s, 10cqw) * .5); color: #fff; text-shadow: 0 .2cqw 0 rgba(90, 52, 26, .8); white-space: nowrap; }

/* stimulus */
.stim { position: relative; display: flex; align-items: center; justify-content: center; gap: 2cqw; min-height: 13cqw; }
.stim .caption { font-size: 2.6cqw; font-weight: 800; color: #5b3fa0; background: rgba(255, 255, 255, .9); padding: .3cqw 1.6cqw; border-radius: 2cqw; box-shadow: 0 .3cqw .6cqw rgba(60, 40, 110, .2); }
.speaker { width: 6.4cqw; height: 6.4cqw; padding: 0; border: .35cqw solid #fff; border-radius: 50%; background: linear-gradient(#ffb347, #ff8a1f); box-shadow: 0 .4cqw .8cqw rgba(60, 35, 20, .3); display: grid; place-items: center; }
.speaker img { width: 74%; height: 74%; }
.stim.word .vis { width: auto; height: auto; padding: .5cqw 3cqw; border-radius: 2cqw; background: linear-gradient(#ff9bc4, #ff6fae); border: .35cqw solid #fff; box-shadow: 0 .5cqw 0 #d94b8b, 0 .9cqw 1.2cqw rgba(60, 40, 110, .3); }
.stim.word .vtext { font-size: 4.2cqw; }
.stim.envelope .vis { width: 19cqw; height: 12cqw; border-radius: 1.2cqw; background: linear-gradient(#fff, #fdeff3); border: .4cqw solid #ee90a8; box-shadow: 0 .6cqw 1cqw rgba(60, 40, 110, .25); overflow: hidden; }
.stim.envelope .vis::before { content: ""; position: absolute; inset: 0 0 38% 0; background: linear-gradient(160deg, #ffd3df, #ffb6c9); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.stim.envelope .letter { position: relative; z-index: 1; margin-top: 3cqw; }
.stim.frozen .vis { width: 15cqw; height: 15cqw; border-radius: 2.4cqw; background: linear-gradient(145deg, #f2fbff, #a9d7fb 55%, #82bff0); border: .45cqw solid #fff; box-shadow: inset 0 0 2cqw rgba(255, 255, 255, .9), 0 .6cqw 1.2cqw rgba(40, 90, 160, .35); }
.stim.listen .vis { background: none; }
.stim.listen .vtext { color: #8a62d6; font-size: 8cqw; text-shadow: none; }
.stim.window .vis { width: 20cqw; height: 15cqw; border: 1cqw solid #b97a43; border-radius: 1.2cqw; background: linear-gradient(#bfe3ff, #eaf5ff); box-shadow: 0 .6cqw 1.2cqw rgba(60, 35, 20, .35), inset 0 0 1cqw rgba(255, 255, 255, .7); overflow: hidden; }
.stim.window .vis > .art { width: 70%; height: 80%; }
.stim.window .vis::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: .7cqw; margin-left: -.35cqw; background: #b97a43; }
.stim.snowtile .vis { width: 19cqw; height: 14cqw; border-radius: 2cqw; background: linear-gradient(#ffffff, #dce9fb); border: .4cqw solid #fff; box-shadow: inset 0 0 1.4cqw rgba(120, 160, 220, .4), 0 .6cqw 1.2cqw rgba(60, 40, 110, .25); }
.stim.snowtile .vis > .art { width: 62%; height: 80%; }
.stim.storyrow { min-height: 0; }
.story-row { display: flex; gap: 1.4cqw; align-items: center; }

/* answer buttons */
.opts { display: flex; gap: 2.2cqw; justify-content: center; align-items: center; flex-wrap: wrap; }
.opt { position: relative; width: 15.5cqw; height: 15.5cqw; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(#ffffff, #f3efff); border: .6cqw solid var(--b, #9b5de5); border-radius: 2.8cqw;
  box-shadow: 0 .6cqw 0 color-mix(in srgb, var(--b, #9b5de5) 70%, #2a1a3a), 0 1.1cqw 1.4cqw rgba(60, 40, 110, .28); transition: transform .12s; }
.opt:active { transform: translateY(.35cqw); box-shadow: 0 .25cqw 0 color-mix(in srgb, var(--b, #9b5de5) 70%, #2a1a3a), 0 .5cqw .8cqw rgba(60, 40, 110, .28); }
.opt .vis { width: var(--s, 9.8cqw); height: var(--s, 9.8cqw); }
.opt:has(.lab) .vis:not([style*="--s"]) { width: 8.6cqw; height: 8.6cqw; margin-top: -1.6cqw; }
.opt .lab { position: absolute; left: 0; right: 0; bottom: .6cqw; text-align: center; font-size: 1.7cqw; font-weight: 800; color: #4b3a6a; }
.opt .vis .letter { font-size: 8.6cqw; }
.opt .pos-scene, .opt .story-card { width: 100%; height: 100%; }
.opt:has(.story-card) { width: 13cqw; height: auto; padding: .4cqw; }
.opt.right { background: linear-gradient(#e9fbdc, #bdeea6); border-color: #52b84a; transform: scale(1.06); }
.opt.nudge { animation: nudge .38s; }
.opts.locked { opacity: .4; pointer-events: none; }
.opts.n6 .opt { width: 12.4cqw; height: 12.4cqw; }
.opts.n6 .opt .vis { --s: 8cqw; width: 8cqw; height: 8cqw; }
.opts.n3 .opt { width: 17cqw; height: 17cqw; }
.opts.n3 .opt .vis { width: var(--s, 10.8cqw); height: var(--s, 10.8cqw); }

/* drop games */
.pieces { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2cqw; max-width: 92cqw; min-height: 9cqw; }
.piece { width: var(--s, 10cqw); height: var(--s, 10cqw); display: grid; place-items: center; transform: rotate(var(--r, 0deg)); transition: filter .15s; }
.piece .vis { width: 100%; height: 100%; }
.piece.dragging { transform: none; }
.piece:has(.story-card) { width: 12.4cqw; height: auto; }
.holder { position: relative; display: flex; gap: 2cqw; justify-content: center; align-items: center; flex-wrap: wrap; }
.bin { position: relative; display: grid; grid-template-columns: auto minmax(16cqw, 1fr); grid-template-areas: "art nest" "label nest"; align-items: center; column-gap: .8cqw; padding: 1cqw 1.2cqw;
  border-radius: 2.2cqw; background: rgba(255, 255, 255, .72); border: .45cqw dashed #8e7bd6; box-shadow: 0 .5cqw 1cqw rgba(60, 40, 110, .18); transition: background .2s, border-color .2s; }
.bin:not(.abs) .bin-art { grid-area: art; width: 8.4cqw; height: 8.4cqw; --s: 8.4cqw; }
.bin .bin-label { grid-area: label; text-align: center; font-weight: 800; font-size: 2.2cqw; color: #5b3fa0; text-transform: capitalize; }
.bin.letter-bin .bin-label { font-size: 3.8cqw; text-transform: none; }
.nest { grid-area: nest; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .3cqw; min-height: 7cqw; min-width: 16cqw; }
.nest .piece { --s: var(--ps, 6cqw); transform: none; }
.bin.full { border-style: solid; border-color: #52b84a; background: rgba(233, 251, 220, .85); }
.cells { display: flex; gap: 1.2cqw; align-items: center; justify-content: center; position: relative; z-index: 1; }
.fixed { width: var(--s, 11cqw); height: var(--s, 11cqw); }
.fixed .vis { width: 100%; height: 100%; }
.tpl.drop.row .holder { flex-direction: column; gap: .6cqw; }
.cells .bin { display: grid; grid-template-columns: 1fr; grid-template-areas: "nest"; width: var(--s, 11cqw); height: var(--s, 11cqw); padding: 0; border-radius: 1.6cqw; place-items: center; background: rgba(255, 255, 255, .6); }
.cells .bin .nest { min-width: 0; min-height: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.cells .bin .piece { --s: 100%; width: 100%; height: 100%; }
.cells .bin.gap { width: 11cqw; height: 11cqw; border-color: #ff8a1f; background: rgba(255, 244, 224, .8); animation: breathe 1.6s ease-in-out infinite; }
.cells .bin.full { animation: none; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.line-decor { position: absolute; left: 0; right: 0; top: 46%; height: .55cqw; background: #7a5a46; border-radius: 1cqw; box-shadow: 0 .4cqw .6cqw rgba(60, 40, 30, .25); z-index: 0; }
.tpl.drop.washing .bin { background: rgba(255, 255, 255, .8); }
.seqrow .cells .bin { width: 15cqw; height: 17.5cqw; border-style: dashed; }
.seq-slot .bin-label { position: absolute; top: -1.6cqw; left: -1.2cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: #9b5de5; color: #fff; display: grid; place-items: center; font-size: 2.2cqw; z-index: 3; border: .3cqw solid #fff; }
.seqrow .cells .bin .piece { height: auto; }
.cvc-pic { width: 13cqw; height: 13cqw; }
.letter-slot { width: 10.5cqw !important; height: 12cqw !important; }
.cells .bin .piece .letter { font-size: 8cqw; }

/* scene boxes: absolute outlines placed on a drawing */
.tpl.drop.scenebox { flex-direction: row; gap: 4cqw; justify-content: center; }
.tpl.drop.scenebox .pieces { width: 36cqw; align-content: center; }
.tpl.drop.scenebox .holder { display: block; width: 31cqw; height: 31cqw; }
.bin.abs { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; grid-template-columns: 1fr; grid-template-areas: "nest"; }
.bin.abs .nest { position: absolute; inset: 0; min-width: 0; min-height: 0; display: grid; place-items: center; z-index: 2; }
.bin.abs .piece { --s: 100%; width: 100%; height: 100%; }
.bin.abs .bin-art { position: absolute; inset: 8%; width: 84% !important; height: 84% !important; opacity: .4; filter: grayscale(1) contrast(.8); }
.bin.abs.ghost { border: .4cqw dashed #7d8fc4; background: rgba(255, 255, 255, .35); border-radius: 1.2cqw; }
.bin.abs.ghost.full { border-color: transparent; background: transparent; box-shadow: none; }
.bin.abs:has(.piece) .bin-art { display: none; }
.snowman-body { position: absolute; inset: 0; }
.snowman-body .ball { position: absolute; left: 50%; transform: translateX(-50%); }
.snowman-body .b0 { width: 56%; height: 56%; top: 48%; } .snowman-body .b1 { width: 42%; height: 42%; top: 27%; } .snowman-body .b2 { width: 32%; height: 32%; top: 4%; }
.cottage-ground { position: absolute; left: -6%; right: -6%; bottom: 0; height: 22%; background: linear-gradient(#ffffff, #dbe8fa); border-radius: 50% 50% 2cqw 2cqw / 30% 30% 2cqw 2cqw; box-shadow: 0 .5cqw 1cqw rgba(60, 40, 110, .2); }
.tpl.drop.room { flex-direction: column; }
.tpl.drop.room .holder { width: 72cqw; height: 22cqw; display: block; }
.room-bg { position: absolute; inset: 0; border-radius: 2cqw; background: linear-gradient(#ffe9c9 0 62%, #c08a55 62% 100%); border: .6cqw solid #8a5a34; box-shadow: 0 .8cqw 1.4cqw rgba(60, 35, 20, .35); }
.furn { border: .35cqw solid #8a5a34 !important; border-style: solid !important; background: rgba(255, 244, 226, .75) !important; border-radius: 1cqw !important; }
.furn .bin-label { position: absolute; bottom: -2.6cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 1.6cqw; background: rgba(255,255,255,.9); border-radius: 1cqw; padding: 0 1cqw; text-transform: none; z-index: 3; }
.furn.table { background: rgba(194, 130, 76, .55) !important; }
.furn.window { background: rgba(191, 227, 255, .8) !important; }
.furn.shelf { background: rgba(194, 130, 76, .45) !important; }

/* collect games */
.tpl.collect { flex-direction: row; justify-content: space-around; gap: 2cqw; }
.tpl.collect.penguins { flex-direction: column; justify-content: space-between; }
.pool { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 1cqw; max-width: 56cqw; min-height: 18cqw; padding: 1cqw; border-radius: 2.4cqw; }
.tpl.collect.penguins .pool { max-width: 90cqw; min-height: 9cqw; }
.pool.water { background: linear-gradient(#c6ecff, #62b7f2); border: .5cqw solid #fff; box-shadow: inset 0 .8cqw 1.6cqw rgba(20, 90, 170, .35); }
.dests { display: flex; gap: 2.4cqw; align-items: flex-end; justify-content: center; }
.dest { position: relative; width: var(--ds, 16cqw); min-height: 16cqw; display: grid; justify-items: center; align-content: end; }
.dest > .dest-art { width: var(--s, 14cqw); height: var(--s, 14cqw); }
.dest > .nest { grid-area: auto; min-height: 5cqw; min-width: 0; }
.dest .bin-label { font-weight: 800; font-size: 2.2cqw; color: #5b3fa0; background: rgba(255, 255, 255, .85); border-radius: 1.4cqw; padding: .1cqw 1.4cqw; margin-top: .4cqw; }
.dest .count-badge { right: -1cqw; top: -1.6cqw; background: linear-gradient(#b7a2ee, #8c6fd8); border: .3cqw solid #fff; }
.dest.full .count-badge { background: linear-gradient(#7fdc6e, #3fae3a); }
.tpl.collect.penguins .dests { width: 92cqw; justify-content: space-evenly; }
.tpl.collect.penguins .dest { width: 16cqw; min-height: 17cqw; }
.dest.tray-dest { width: 32cqw; min-height: 17cqw; border-radius: 2cqw; background: linear-gradient(#e7c79a, #cf9f68); border: .5cqw solid #9a6a3a; box-shadow: inset 0 .5cqw 1cqw rgba(255, 255, 255, .45), 0 .8cqw 1.4cqw rgba(60, 35, 20, .3); align-content: center; }
.dest.snowman-base { width: 18cqw; }
.dest.deco { width: 22cqw; min-height: 12cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .6); border: .45cqw dashed #8e7bd6; align-content: center; }
.nest.stack { flex-direction: column-reverse; flex-wrap: nowrap; align-items: center; }
.nest.stack .piece:nth-child(1) { --s: 11cqw; } .nest.stack .piece:nth-child(2) { --s: 8.4cqw; margin-bottom: -2cqw; } .nest.stack .piece:nth-child(3) { --s: 6.4cqw; margin-bottom: -1.6cqw; }
.nest.bucket-slot { position: absolute; left: 4%; right: 4%; top: 2%; z-index: 2; pointer-events: none; min-height: 0; align-content: flex-start; gap: 0; }
.nest.bucket-slot .piece { --s: 4.6cqw; margin: -.6cqw -.3cqw; }
.nest.hat-slot { position: absolute; left: 50%; top: -4.2cqw; transform: translateX(-50%); width: 8cqw; min-height: 0; min-width: 0; z-index: 3; pointer-events: none; }
.nest.hat-slot .piece { --s: 7.6cqw; }
.nest.feed-slot { min-height: 5cqw; gap: 0; }
.nest.tree-slot { position: absolute; left: 14%; right: 14%; top: 26%; bottom: 8%; z-index: 2; pointer-events: none; align-content: center; gap: .2cqw; min-height: 0; }
.nest.sledge-slot { position: absolute; left: 14%; right: 14%; top: -10%; z-index: 2; pointer-events: none; align-content: flex-end; min-height: 0; gap: 0; }
.nest.basket-slot { position: absolute; left: 12%; right: 12%; top: 6%; z-index: 0; pointer-events: none; align-content: flex-end; min-height: 0; gap: 0; }
.dest.basket-dest::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 1; pointer-events: none; }
.nest.dress-slot { position: absolute; inset: 0; min-height: 0; min-width: 0; display: block; z-index: 2; pointer-events: none; }
.nest.dress-slot .piece { position: absolute; --s: 6.4cqw; }
.dress-slot .piece[data-key="hat"], .dress-slot .piece[data-key="sunhat"] { left: 50%; top: -1%; transform: translateX(-50%); }
.dress-slot .piece[data-key="sunglasses"] { left: 50%; top: 15%; transform: translateX(-50%); --s: 5cqw; }
.dress-slot .piece[data-key="scarf"] { left: 50%; top: 31%; transform: translateX(-50%); --s: 6cqw; }
.dress-slot .piece[data-key="coat"] { left: 50%; top: 44%; transform: translateX(-50%); --s: 8cqw; }
.dress-slot .piece[data-key="mitten"] { left: 4%; top: 48%; --s: 4.4cqw; }
.dress-slot .piece[data-key="boot"], .dress-slot .piece[data-key="flipflop"] { left: 50%; bottom: -2%; transform: translateX(-50%); --s: 6cqw; }
.count-badge.big { position: absolute; right: 1cqw; top: 1cqw; font-size: 2cqw; padding: 0 1.4cqw; border-radius: 3cqw; height: 4cqw; }

/* remember / reveal / scene */
.look { display: flex; gap: 2.4cqw; justify-content: center; transition: opacity .35s; }
.look.away { opacity: 0; }
.look-card { width: 16cqw; height: 16cqw; background: #fff; border: .7cqw solid #ffc928; border-radius: 2.4cqw; display: grid; place-items: center; box-shadow: 0 .8cqw 1.4cqw rgba(60, 40, 110, .3); animation: roundIn .5s ease both; }
.ice-row { display: flex; gap: 2.4cqw; justify-content: center; }
.ice { position: relative; width: 13cqw; height: 15cqw; padding: 0; border-radius: 2.2cqw; background: linear-gradient(145deg, #f2fbff, #a9d7fb 60%, #82bff0); border: .45cqw solid #fff; box-shadow: inset 0 0 1.6cqw rgba(255, 255, 255, .9), 0 .6cqw 1.2cqw rgba(40, 90, 160, .35); overflow: hidden; display: grid; place-items: center; }
.ice .letter { font-size: 9cqw; font-weight: 800; color: #3d3d9e; opacity: .15; transition: opacity .5s; }
.ice .frost { position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .95), rgba(214, 236, 255, .85) 55%, rgba(170, 214, 250, .9)); transition: opacity .6s; }
.ice.melted .frost { opacity: 0; }
.ice.melted .letter { opacity: 1; }
.story-stage { position: relative; width: 86cqw; height: 20cqw; border-radius: 2.4cqw; background: linear-gradient(#a9d8ff, #f3f9ff 62%); border: .6cqw solid #fff; box-shadow: 0 .8cqw 1.4cqw rgba(60, 40, 110, .3); overflow: hidden; }
.story-stage .hills { position: absolute; left: -5%; right: -5%; bottom: -4cqw; height: 9cqw; background: #fff; border-radius: 50%; box-shadow: 0 -.4cqw 1cqw rgba(120, 160, 220, .35); }
.story-stage .piece.free { --s: 10cqw; z-index: 2; }
.tpl.scene .pieces .piece { --s: 6.6cqw; }

/* story pictures + trains + order strips + positions */
.story-card { display: grid; justify-items: center; gap: .2cqw; padding: .6cqw; background: #fff; border: .4cqw solid #ffc928; border-radius: 1.4cqw; width: 11.5cqw; box-shadow: 0 .4cqw .8cqw rgba(60, 40, 110, .22); }
.story-pic { display: block; width: 7.4cqw; height: 7.4cqw; }
.story-pic.q { display: grid; place-items: center; font-size: 6cqw; font-weight: 800; color: #ff8a1f; }
.story-cap { font-size: 1.55cqw; font-weight: 800; color: #5b3fa0; }
.story-card.gap { border-style: dashed; border-color: #ff8a1f; background: #fff7e8; }
.train-row { display: flex; gap: .8cqw; }
.train-row .carriage { position: relative; width: 9.4cqw; height: 9.4cqw; display: grid; place-items: center; font-size: 6cqw; line-height: 1; border-radius: 1.4cqw; color: #fff; background: #2f8bf2; text-shadow: 0 .25cqw 0 rgba(40, 30, 90, .5); }
.train-row .carriage:nth-child(2) { background: #ff6fae; } .train-row .carriage:nth-child(3) { background: #2fbf5b; }
.order-strip { display: flex; gap: 1.2cqw; align-items: center; }
.order-card { position: relative; width: 7cqw; height: 7cqw; background: #fff; border: .4cqw solid #9b5de5; border-radius: 1.4cqw; padding: .5cqw; }
.order-card b { position: absolute; left: -1cqw; top: -1.2cqw; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #9b5de5; color: #fff; display: grid; place-items: center; font-size: 1.7cqw; }
.pos-scene { position: relative; display: block; }
.pos-scene .p-box, .pos-scene .p-peng { position: absolute; display: block; }
.pos-scene .p-box { left: 22%; bottom: 8%; width: 56%; height: 56%; z-index: 2; }
.pos-scene .p-peng { width: 38%; height: 44%; }
.pos-scene.on .p-peng { left: 31%; bottom: 52%; z-index: 3; }
.pos-scene.next .p-peng { left: 62%; bottom: 8%; z-index: 3; } .pos-scene.next .p-box { left: 6%; }
.pos-scene.behind .p-peng { left: 31%; bottom: 20%; z-index: 1; }
.pos-scene.front .p-peng { left: 31%; bottom: -2%; z-index: 4; }
.art-penguin img { object-fit: contain; }
.sock-tile { width: 100%; }

/* ---------------------------------------------------------------------
   Vibrant restyle of the original games
   --------------------------------------------------------------------- */
.bulb { width: 7.4cqw; min-height: 10cqw; transition: transform .15s; }
.bulb:active { transform: translate(-50%, 0) scale(.94); }
.bulb .art { width: 6.6cqw; height: 9cqw; }
.bulb:not(.lit) .art svg { filter: saturate(.95) brightness(.92) drop-shadow(0 .35cqw .3cqw rgba(60, 35, 70, .3)); }
.bulb.lit .art svg { filter: saturate(1.25) brightness(1.12) drop-shadow(0 0 1.1cqw var(--c)) drop-shadow(0 0 2.2cqw var(--c)); animation: glowPulse 1.6s ease-in-out infinite; }
@keyframes glowPulse { 50% { filter: saturate(1.3) brightness(1.2) drop-shadow(0 0 1.6cqw var(--c)) drop-shadow(0 0 3cqw var(--c)); } }
.snowball { border: .28cqw solid #6f93c8; background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e9f3ff 45%, #b7d2f2 100%); box-shadow: 0 .45cqw .7cqw rgba(60, 80, 140, .4), inset -.4cqw -.4cqw .7cqw rgba(110, 150, 215, .45); }
.basket-back { background: linear-gradient(#5a3418, #85542a); }
.basket-front { background: repeating-linear-gradient(90deg, #d99a58 0 1.3cqw, #b9773a 1.3cqw 1.5cqw), repeating-linear-gradient(0deg, transparent 0 1.8cqw, rgba(110, 60, 20, .35) 1.8cqw 2.1cqw); background-color: #d99a58; }
.basket-front::before { background: linear-gradient(#f0bd7c, #c58a4a); }

/* calmer backdrop for games: the busy house is softened so play pieces pop */
.game-screen .backdrop-img.soft { filter: blur(1.4cqw) saturate(.85) brightness(1.1); transform: scale(1.08); }
.game-screen .backdrop-veil { background: linear-gradient(180deg, rgba(238, 246, 255, .78), rgba(255, 252, 244, .66) 55%, rgba(231, 242, 255, .84)); }

/* ---- polish pass ---- */
.tpl.drop.scenebox .holder { flex: none; width: 33cqw; height: 33cqw; }
.tpl.drop.scenebox .pieces { flex: none; width: 36cqw; }
.tpl.drop.room .holder { flex: none; }
.dest.snowman-base { width: 18cqw; min-height: 22cqw; }
.dest.snowman-base .dest-art { opacity: .2; filter: grayscale(1); }
.dest.snowman-base .nest.stack { position: absolute; left: 0; right: 0; bottom: 0; }
.piece .vis:has(.letter) { background: linear-gradient(#fff, #f1ebff); border: .5cqw solid #9b5de5; border-radius: 1.8cqw; box-shadow: 0 .45cqw 0 #6f42b8, 0 .9cqw 1.2cqw rgba(60, 40, 110, .3); }
.piece .vis .letter { font-size: calc(var(--s, 9cqw) * .8); }
.basket-back { background: linear-gradient(#8a5a32, #b98650) !important; }
.number-board { width: 15cqw; height: 15cqw; }
.number-board .big { font-size: 6cqw; }
.snowman-body .b0 { width: 80%; height: 80%; top: 36%; } .snowman-body .b1 { width: 60%; height: 60%; top: 18%; } .snowman-body .b2 { width: 46%; height: 46%; top: -2%; }