/* Human explorer crew: in-play actors, field equipment and readable puzzle pieces. */
/* Keep the fit observer based on available modal height, not its own shrinking rows. */
.game-modal:has(.wb-game) .game-body{flex:1!important}
.game-modal .eco-explorer-actor{display:block;width:86px;height:100px;max-width:100%;object-fit:contain;pointer-events:none;flex-shrink:0}
.game-modal .eco-explorer-station{position:relative;display:flex;align-items:center;gap:12px;min-height:78px;height:78px;flex-shrink:0;overflow:hidden;margin:0 0 8px;padding:2px 12px 0 4px;border:1px solid #81b8a566;border-radius:14px;background:radial-gradient(ellipse at 5% 100%,#8cb99742,transparent 65%),linear-gradient(115deg,#163e47,#132d3d);color:#ecfff3;box-sizing:border-box;isolation:isolate}
.game-modal .eco-explorer-station .eco-explorer-actor{align-self:flex-end;height:86px;width:76px;margin-bottom:-3px}
.game-modal .eco-explorer-station-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px;line-height:1.35}
.game-modal .eco-explorer-station-copy>b{font-size:14px;line-height:1.3;color:#ffe4a0;white-space:nowrap}
.game-modal .eco-explorer-station-copy>span{font-size:12px;line-height:1.35;color:#e2f6ef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-modal .eco-explorer-station-copy>i{display:block;height:4px;max-width:190px;background:#8bada333;border-radius:5px;overflow:hidden}
.game-modal .eco-explorer-station-copy>i>i{display:block;height:100%;background:linear-gradient(90deg,#9be5c8,#ffe597);transition:width .25s}
.game-modal .eco-explorer-tool{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border:2px solid #c5d4ae80;border-radius:10px;transform:rotate(8deg);background:#2c594a;color:#ffe2a0;font-size:26px;box-shadow:0 3px #061d2c66}
.game-modal .eco-explorer-station[data-reaction^=success],.game-modal .eco-explorer-station[data-reaction=complete]{border-color:#ffe29b;background:radial-gradient(ellipse at 20% 100%,#f2d87944,transparent 75%),#21493e}
.game-modal .safari-study-board{padding:9px;border:1px solid #adc89a66;border-radius:17px;background:repeating-linear-gradient(15deg,transparent 0 35px,#acc8a606 36px 37px),linear-gradient(130deg,#173d3b,#142837)}
.game-modal .safari-study-board .safari-study-card{box-shadow:inset 0 0 0 3px #f9e9bb18,0 3px 0 #031f2877;border-width:2px;border-color:#a4c1a077}
.game-modal .safari-study-board .safari-card-back:after{content:'';position:absolute;inset:6px;border:1px dashed #d4edb950;border-radius:8px;pointer-events:none}
.game-modal .safari-study-board .safari-card-back{background:radial-gradient(circle at 50% 15%,#8cd8a92b,transparent 85%),linear-gradient(145deg,#254f47,#172e3d);color:#dff7cb}
.game-modal .safari-study-board .safari-study-card.number .safari-card-back{background:linear-gradient(145deg,#285d65,#18323f);color:#cff6f2}
.game-modal .safari-study-board .safari-study-card.word .safari-card-back{background:linear-gradient(145deg,#5a536c,#28364a);color:#f2e5ff}
.game-modal .safari-study-card.matched{border-color:#efcd80;box-shadow:inset 0 0 0 2px #efcd8077,0 3px 0 #5b553c}
.game-modal .sentence-workspace{padding:8px;border:1px solid #9acdbb60;border-radius:16px;background:radial-gradient(ellipse at 40% 0,#397b6355,transparent 75%),#122c3b;box-sizing:border-box}
.game-modal .sentence-festival .sentence-board{border-color:#b4caa188;box-shadow:inset 0 -4px #061c2866,inset 0 2px #f2e9c32b;background:linear-gradient(145deg,#315149,#203946)}
.game-modal .sentence-festival .token-pool button{border:1px solid #e3c88699;border-bottom-width:4px;border-radius:10px;background:linear-gradient(150deg,#f8e6b8,#d2bd91);color:#173d3d;font-weight:800;box-shadow:0 2px 5px #0003;text-shadow:none}
.game-modal .sentence-festival .token-pool button:disabled{opacity:.4}
.game-modal .wb-play-area>.eco-explorer-station{height:52px;min-height:52px;margin:0 0 7px}
.game-modal .wb-play-area>.eco-explorer-station .eco-explorer-actor{height:60px;width:52px}
.game-modal .wb-game .wb-cell.filled,.game-modal .wb-game .wb-cell.falling{border-radius:5px;box-shadow:inset 2px 2px #ffffff5c,inset -3px -4px #0b243f66,0 2px 0 #03172d55;border-color:#d8eddf99}
.game-modal .wb-game .wb-cell.target{outline-color:#e1d694;box-shadow:inset 0 -3px #c8cc8244}
.game-modal .wb-game .wb-cell.ghost{outline:1px dashed #f6e5aa9e;outline-offset:-3px}
.game-modal .energy-mole .em-arena.eco-city{background:radial-gradient(ellipse at 50% 0,#e5f6a588,transparent 75%),linear-gradient(#abcfc8 0%,#7cafa0 60%,#355f52 60%)!important;border-color:#aed4aa;box-shadow:inset 0 0 0 4px #f4eac333}
.game-modal .energy-mole .em-hole-shadow{height:22%;border:3px solid #abc1a0;background:linear-gradient(#153b38,#0b252e);box-shadow:0 4px #203e32,inset 0 4px 7px #051b21}
.game-modal .energy-mole .em-hole>small{color:#143d35;background:#eff2c9;border:1px solid #738d6c}
.game-modal .energy-mole .em-crew{position:absolute;inset:0 5% 12%;display:block;animation:eco-crew-arrive .19s ease-out;transform-origin:center bottom;pointer-events:none}
.game-modal .energy-mole .em-crew .eco-explorer-actor{position:absolute;bottom:2%;left:33%;width:auto;max-width:none;height:104%;transform:translateX(-50%)}
.game-modal .energy-mole .em-crew .em-letter-sign{position:absolute;left:50%;right:3%;bottom:16%;height:48%;display:flex;align-items:center;justify-content:center;border:2px solid #ffe8a9;border-bottom:4px solid #ac8d53;border-radius:10px;background:linear-gradient(135deg,#fff3c6,#efd28b);color:#183b38;font:900 clamp(22px,3.5vh,34px)/1 system-ui;text-shadow:0 1px #fff;box-shadow:0 3px 8px #0b283955;z-index:1}
.game-modal .energy-mole .em-bonus .em-letter-sign{background:linear-gradient(135deg,#e8d7ff,#c8a5e6);color:#3a285a;border-color:#f8e9ff;border-bottom-color:#886aa7}
.game-modal .energy-mole .em-crew:after{content:'';position:absolute;left:47%;bottom:30%;width:7%;height:11%;border-radius:50%;background:#edb984;border:1px solid #ac7d59;z-index:2}
.game-modal .energy-mole .em-overlay .eco-explorer-actor{height:102px;width:90px;margin:-8px auto -7px}
.game-modal .energy-mole .em-cityline>i{border-color:#739c8d;background:repeating-linear-gradient(90deg,#f6e8b5 0 4px,transparent 4px 12px),#739c8d;border-radius:8px 8px 0 0;box-shadow:inset 0 5px #d5e8ce55}
@keyframes eco-crew-arrive{from{transform:translateY(45%);opacity:.2}to{transform:translateY(0);opacity:1}}
html[data-eco-theme=white] .game-modal .eco-explorer-station{background:linear-gradient(115deg,#ddeccd,#dcece5);border-color:#729d88;color:#163e35}
html[data-eco-theme=white] .game-modal .eco-explorer-station-copy>b{color:#35533b}html[data-eco-theme=white] .game-modal .eco-explorer-station-copy>span{color:#284e43}
html[data-eco-theme=white] .game-modal .safari-study-board,html[data-eco-theme=white] .game-modal .sentence-workspace{background:linear-gradient(135deg,#e8f0db,#d6e8df);border-color:#779986}
@media(max-width:680px),(max-height:600px){.game-modal .eco-explorer-station{height:57px;min-height:57px;gap:7px;padding-right:8px;margin-bottom:5px;border-radius:10px}.game-modal .eco-explorer-station .eco-explorer-actor{height:64px;width:55px}.game-modal .eco-explorer-station-copy>b{font-size:12px}.game-modal .eco-explorer-station-copy>span{font-size:11px}.game-modal .eco-explorer-tool{width:28px;height:28px;font-size:20px}.game-modal .wb-play-area>.eco-explorer-station{height:52px;min-height:52px;margin:0 0 4px}.game-modal .wb-play-area>.eco-explorer-station .eco-explorer-actor{height:60px;width:50px}.game-modal .safari-study-board{padding:5px}.game-modal .energy-mole .em-crew .em-letter-sign{font-size:clamp(24px,7vw,39px);border-radius:7px;border-bottom-width:3px}.game-modal .energy-mole .em-overlay .eco-explorer-actor{height:60px;width:52px}.game-modal .sentence-workspace{padding:5px}}
@media(max-height:450px){.game-modal .eco-explorer-station{height:44px;min-height:44px}.game-modal .eco-explorer-station .eco-explorer-actor{height:50px;width:44px}.game-modal .eco-explorer-station-copy>span{font-size:10px}.game-modal .eco-explorer-station-copy>i{display:none}.game-modal .wb-play-area>.eco-explorer-station{height:40px;min-height:40px}.game-modal .wb-play-area>.eco-explorer-station .eco-explorer-actor{height:46px;width:40px}.game-modal .energy-mole .em-overlay .eco-explorer-actor{display:none}}
@media(prefers-reduced-motion:reduce){.game-modal .eco-explorer-station-copy>i>i{transition:none}.game-modal .energy-mole .em-crew{animation:none}}

.english-family-grid .english-family-card .english-family-art.eco-key-art{aspect-ratio:3/2}

.eco-character-picker{min-width:0;margin:12px 0;padding:12px;border:1px solid #7abaaa66;border-radius:16px;color:inherit}
.eco-character-picker legend{font-size:18px;font-weight:800;padding:0 6px}
.eco-character-help,.eco-character-note{font-size:14px!important;line-height:1.5!important;margin:8px 0!important;color:inherit!important}
.eco-character-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:330px;overflow-y:auto;overscroll-behavior:contain;padding:4px;scrollbar-width:thin}
.eco-character-choices button{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:125px;width:100%!important;margin:0!important;padding:7px!important;border:2px solid #86a9a75c!important;border-radius:14px!important;background:#123543!important;color:#e9fff5!important;font-size:16px!important;line-height:1.3!important;box-shadow:none;cursor:pointer;touch-action:manipulation}
.eco-character-choices button[aria-pressed=true]{border-color:#fff0a8!important;background:#265d55!important;box-shadow:0 0 0 2px #ffe39a30}
.eco-character-choices button[aria-pressed=true]>span:after{content:' ✓';color:#fff0a8}
.eco-character-choices button:focus-visible{outline:3px solid #8cf3ff;outline-offset:1px}
.eco-character-preview{display:block;width:76px;height:76px;object-fit:contain;transition:transform .18s ease}
.eco-character-choices small{font-size:12px;opacity:.85;margin-top:3px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){html:not([data-eco-quality=low]) .eco-character-choices button:hover img{transform:translateY(-3px) rotate(-4deg) scale(1.06)}}
[data-eco-theme=white] .eco-character-choices button{background:#edf5ef!important;color:#173934!important}
[data-eco-theme=white] .eco-character-choices button[aria-pressed=true]{background:#d6eedb!important;border-color:#397763!important}
[data-eco-theme=white] .eco-character-choices button[aria-pressed=true]>span:after{color:#205944}
@media(max-width:350px){.eco-character-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eco-character-picker [data-eco-character-auto]{display:block;width:100%;min-height:44px;padding:10px;border:1px solid #71a99b;border-radius:10px;background:#193f47;color:#edfff5;cursor:pointer;font:700 15px/1.4 system-ui}
.eco-character-picker [data-eco-character-auto][aria-pressed=true]{border-color:#ffe7a1;box-shadow:inset 0 0 0 1px #ffe7a1}
[data-eco-theme=white] .eco-character-picker [data-eco-character-auto]{background:#dfede1;color:#193f37}
.eco-game-first .english-family-grid .english-family-card .english-family-art.eco-friend-card-art{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3/2;background:radial-gradient(ellipse at 70% 35%,#51878f80,transparent 60%),linear-gradient(145deg,#102e48,#21565c)!important;color:#f4fff7}
.eco-friend-card-art:after{content:'';position:absolute;inset:auto 8% 6%;height:18%;border-radius:50%;background:#052b3b66;box-shadow:0 -15px 50px #71e4c327;z-index:-1}
.eco-game-first .english-family-grid .english-family-card .eco-friend-card-art[data-world=match],.eco-game-first .english-family-grid .english-family-card .eco-friend-card-art[data-world=energy]{background:radial-gradient(ellipse at 70% 20%,#7cc98180,transparent 70%),linear-gradient(140deg,#153e40,#377154)!important}
.eco-game-first .english-family-grid .english-family-card .eco-friend-card-art[data-world=sentences],.eco-game-first .english-family-grid .english-family-card .eco-friend-card-art[data-world=word-bricks]{background:radial-gradient(ellipse at 80% 20%,#ab92e380,transparent 70%),linear-gradient(140deg,#243a61,#635683)!important}
.eco-game-first .english-family-grid .english-family-card .eco-friend-card-art[data-world=eco-drop],.eco-game-first .english-family-grid .english-family-card .eco-friend-card-art[data-world=eco-stack]{background:radial-gradient(ellipse at 70% 20%,#e6cf8b60,transparent 70%),linear-gradient(140deg,#2c5050,#557b55)!important}
.eco-game-first .english-family-grid .english-family-card .eco-friend-card-art[data-world=save-ocean]{background:radial-gradient(ellipse at 70% 0%,#8adcec80,transparent 80%),linear-gradient(140deg,#113c62,#157387)!important}
.eco-friend-card-sprite{position:absolute;height:83%;top:7%;left:50%;transform:translateX(-50%);overflow:hidden;filter:drop-shadow(0 9px 6px #061c3850);pointer-events:none}
.eco-friend-card-sprite img{position:absolute!important;max-width:none!important;object-fit:fill!important;transform:none!important;transition:none!important}
.eco-game-first .english-family-grid .eco-friend-card-art>.eco-friend-card-genre,.eco-game-first .english-family-grid .eco-friend-card-art>.eco-friend-card-name{position:absolute;z-index:2;font:800 14px/1.4 system-ui!important;filter:none;transition:none;background:#092b3bd9;color:#f2fff8;padding:6px 10px;border:1px solid #bce8d34a;border-radius:9px;max-width:90%;box-sizing:border-box}
.eco-game-first .english-family-grid .eco-friend-card-art>.eco-friend-card-genre{transform:none;top:12px;left:12px}.eco-game-first .english-family-grid .eco-friend-card-art>.eco-friend-card-name{bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap}
.eco-friend-card-orbit{position:absolute;inset:0;pointer-events:none}
.eco-game-first .english-family-card .eco-friend-card-art>.eco-friend-card-scenery{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;z-index:0;pointer-events:none;border:0;border-radius:0;transform:none;opacity:1;filter:none}
.eco-game-first .eco-friend-card-art .eco-friend-card-sprite{z-index:2}
.eco-game-first .eco-friend-card-art .eco-friend-card-orbit{z-index:1}
.eco-game-first .english-family-grid .eco-friend-card-art>.eco-friend-card-genre,.eco-game-first .english-family-grid .eco-friend-card-art>.eco-friend-card-name{z-index:3;background:#123f46ed;border-color:#dcf8dc7a}
.eco-game-first .eco-friend-card-art .eco-friend-card-orbit i{background:#205557b8;border-color:#ecfff2aa;text-shadow:none;font-size:17px;box-shadow:0 3px 0 #214b4922}
.eco-friend-card-orbit i{position:absolute;display:grid;place-items:center;left:calc(7% + var(--piece)*35%);top:calc(35% + var(--piece)*13%);min-width:34px;min-height:34px;padding:3px;border:1px solid #d1f2e575;border-radius:10px;background:#d2fff11a;color:#f7ffe2;font:900 19px/1 system-ui;transform:rotate(calc(-12deg + var(--piece)*12deg));text-shadow:0 2px 4px #123}
.eco-friend-card-orbit i:nth-child(2){top:12%;left:76%}
.rights-friend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.rights-friend-grid article{padding:14px;border:1px solid #789b8b66;border-radius:16px}.rights-friend-grid img{width:110px;height:110px;object-fit:contain;display:block;margin:auto}.rights-friend-grid h3{font-size:20px}

/* Front idle is an independent, cached WebP: game running sprites stay intact. */
.eco-game-first .english-family-card .eco-friend-card-art>.eco-friend-card-front{position:absolute;z-index:2;height:86%;width:86%;left:7%;top:4%;object-fit:contain;pointer-events:none;transform:none;filter:drop-shadow(0 5px 3px #22214444);opacity:1;transition:opacity .10s ease}
.eco-game-first .eco-friend-card-art .eco-friend-card-sprite{opacity:0;animation:none;transition:opacity .10s ease;filter:drop-shadow(0 5px 3px #22214444)}
@keyframes eco-friend-right-medium{0%{transform:translateX(-50%)}35%{transform:translateX(-34%) translateY(-4px)}70%{transform:translateX(-22%) translateY(0)}100%{transform:translateX(-14%) translateY(-3px)}}
@keyframes eco-friend-right-high{0%{transform:translateX(-50%)}20%{transform:translateX(-40%) translateY(-7px) rotate(2deg)}40%{transform:translateX(-30%) translateY(0) rotate(-2deg)}60%{transform:translateX(-20%) translateY(-6px) rotate(2deg)}80%{transform:translateX(-10%) translateY(0)}100%{transform:translateX(0%) translateY(-3px)}}
@keyframes eco-friend-depart{from{transform:translateX(-24%);opacity:1}to{transform:translateX(50%);opacity:.6}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html:not([data-eco-quality=low]) body:not(:has(.game-modal)) .eco-game-first[data-hidden=false] .english-family-card[data-in-view=true]:hover .eco-friend-card-front{opacity:0}
 html:not([data-eco-quality=low]) body:not(:has(.game-modal)) .eco-game-first[data-hidden=false] .english-family-card[data-in-view=true]:hover .eco-friend-card-sprite{opacity:1;animation:eco-friend-right-medium .7s ease-out forwards}
 html[data-eco-quality=high] body:not(:has(.game-modal)) .eco-game-first[data-hidden=false] .english-family-card[data-in-view=true]:hover .eco-friend-card-sprite{animation-name:eco-friend-right-high}
}
@media(prefers-reduced-motion:no-preference){
 html:not([data-eco-quality=low]) .eco-game-first .english-family-card[data-departing=true] .eco-friend-card-front{opacity:0}
 html:not([data-eco-quality=low]) .eco-game-first .english-family-card[data-departing=true] .eco-friend-card-sprite{opacity:1;animation:eco-friend-depart .18s ease-in forwards!important}
}
@media(prefers-reduced-motion:reduce){.eco-friend-card-front,.eco-friend-card-sprite,.eco-friend-card-orbit i{animation:none!important;transition:none!important}}
/* While two friends visit each other, suppress their in-card duplicates. */
html[data-eco-quality] .eco-game-first .english-family-card[data-friend-away=true] :is(.eco-friend-card-front,.eco-friend-card-sprite){opacity:0!important;animation:none!important;transition:none!important}
.eco-friend-play-layer{pointer-events:none!important}