/* Eco dioramas: existing images, bounded CSS layers. Enabled only by medium/high. */
html[data-eco-depth]{--depth-edge:#98bab1;--depth-shadow:#153c4030;--depth-glow:#ffffffb8;--depth-sky:#d1eee866;--depth-earth:#c6dbf044}
html[data-eco-depth][data-eco-theme=dark]{--depth-edge:#427472;--depth-shadow:#00000070;--depth-glow:#b7fff235;--depth-sky:#22595166;--depth-earth:#30426766}
html[data-eco-depth] body:has(.eco-game-first):not(:has(.game-modal,.game-shell)){
 background-image:radial-gradient(ellipse at 5% 260px,var(--depth-sky),transparent 48%),radial-gradient(ellipse at 98% 750px,var(--depth-earth),transparent 45%),var(--earth-art)!important;
 background-size:100% 1400px,100% 1600px,max(100%,1600px) auto!important;
 background-position:0 0,0 0,center 40px!important;
 background-repeat:no-repeat,no-repeat,repeat-y!important;
}
html[data-eco-depth] .eco-game-first .english-family-grid{gap:20px 16px}
html[data-eco-depth] .eco-game-first .english-family-card{
 position:relative;isolation:isolate;
 border-color:var(--depth-edge)!important;
 box-shadow:0 3px 0 var(--depth-edge),0 7px 0 -2px var(--ct-panel),0 16px 22px -11px var(--depth-shadow),inset 0 1px 0 var(--depth-glow);
 transform:none;transition:transform .2s ease-out;
}
html[data-eco-depth=high] .eco-game-first .english-family-card{
 box-shadow:0 4px 0 var(--depth-edge),0 8px 0 -2px var(--ct-panel),0 20px 27px -12px var(--depth-shadow),inset 0 1px 0 var(--depth-glow);
}
/* Shallow stage projects a rounded rim and contact shadow underneath the friend. */
html[data-eco-depth] .eco-game-first .english-family-grid .english-family-card .eco-friend-card-art:before{
 content:'';display:block!important;position:absolute;z-index:1;inset:auto 9% 9%;width:auto;height:19%;border-radius:50%;pointer-events:none;
 background:radial-gradient(ellipse at 50% 38%,#143d4659 0,transparent 54%),linear-gradient(160deg,#fcffeecf,#b5d7d5d9);
 border:1px solid #ffffffad;box-shadow:0 5px 0 #68938ce0,0 8px 0 -1px #416d6999,0 15px 12px -4px #183e4666;
 transform:none;
}
/* A light upper rim + shaded inner sides, with no blur/backdrop/GPU canvas. */
html[data-eco-depth] .eco-game-first .english-family-grid .english-family-card .eco-friend-card-art:after{
 content:'';display:block!important;position:absolute;inset:0;width:auto;height:auto;z-index:4;border-radius:0;pointer-events:none;
 background:linear-gradient(125deg,#ffffff33,transparent 38%,#062e3d13 85%);
 box-shadow:inset 0 2px 0 #ffffffa3,inset 1px 0 0 #ffffff63,inset 0 -12px 18px -15px #0c364bd9;transform:none;
}
html[data-eco-depth] .eco-game-first .english-family-card .eco-friend-card-art>.eco-friend-card-scenery{
 transform:scale(1.045) translate(var(--depth-back-x,0px),var(--depth-back-y,0px));transition:transform .2s ease-out;
}
html[data-eco-depth] .eco-game-first .english-family-card .eco-friend-card-art>.eco-friend-card-front{
 filter:drop-shadow(0 9px 4px #16344259);transform:translate(var(--depth-front-x,0px),var(--depth-front-y,0px));transition:opacity .1s ease,transform .2s ease-out;
}
html[data-eco-depth] .eco-game-first .eco-friend-card-art>.eco-friend-card-orbit{
 transform:translate(var(--depth-front-x,0px),var(--depth-front-y,0px));transition:transform .2s ease-out;
}
html[data-eco-depth] .eco-game-first .eco-friend-card-art .eco-friend-card-orbit i{
 background:linear-gradient(145deg,#326f72,#1b494e);border-color:#d4f7ed;
 box-shadow:0 3px 0 #16464b,0 6px 8px #183b4540,inset 0 1px 0 #ffffff66;
}
html[data-eco-depth] .eco-game-first .english-family-grid .eco-friend-card-art>.eco-friend-card-name{
 box-shadow:0 3px 0 #0d3339,inset 0 1px 0 #eaffee4d;
}
html[data-eco-depth] .eco-game-first .english-family-copy{
 position:relative;border-top:1px solid var(--depth-edge);
 background:linear-gradient(150deg,var(--depth-glow),transparent 44%);box-shadow:inset 0 2px 0 var(--depth-glow);
}
html[data-eco-depth] .eco-game-first .english-spotlight,
html[data-eco-depth] .eco-game-first .eco-discover{
 border:1px solid var(--depth-edge);box-shadow:inset 0 2px 0 var(--depth-glow),0 5px 0 -1px var(--depth-edge),0 22px 30px -18px var(--depth-shadow);
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html[data-eco-depth] .eco-game-first .english-family-card[data-depth-active]{
  transform:perspective(950px) translateY(-4px) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg));z-index:2;
 }
 html[data-eco-depth] .eco-game-first .english-family-card:focus-visible{transform:translateY(-3px)}
}
@media(max-width:680px){html[data-eco-depth] .eco-game-first .english-family-grid{gap:17px 12px}}
@media(prefers-reduced-motion:reduce){
 html[data-eco-depth] .eco-game-first .english-family-card,
 html[data-eco-depth] .eco-game-first .english-family-card .eco-friend-card-art>.eco-friend-card-scenery,
 html[data-eco-depth] .eco-game-first .english-family-card .eco-friend-card-art>.eco-friend-card-front,
 html[data-eco-depth] .eco-game-first .eco-friend-card-art>.eco-friend-card-orbit{transition:none!important}
}
@media(forced-colors:active),print{
 html[data-eco-depth] .eco-game-first .english-family-card{box-shadow:none;transform:none!important}
 html[data-eco-depth] .eco-game-first .english-family-grid .english-family-card .eco-friend-card-art:before,
 html[data-eco-depth] .eco-game-first .english-family-grid .english-family-card .eco-friend-card-art:after{display:none!important}
}