/* Mobile app showcases pair official screen captures with each app's identity. */
.app-showcase{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 85% 70%,color-mix(in srgb,var(--project-color) 15%,transparent),transparent 65%),var(--app-bg);isolation:isolate;text-align:left}
.app-showcase:after{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:35px 35px;pointer-events:none;z-index:-1}
.app-stage-orbit{position:absolute;border:1px solid #ffffff15;border-radius:50%;width:76%;aspect-ratio:1;right:-13%;top:-10%;transform:rotate(-20deg) scaleY(.7);z-index:-1}
.app-stage-copy{position:absolute;left:6%;top:13%;width:42%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;z-index:3}
.app-showcase .app-icon{width:43px;height:43px;object-fit:cover;border-radius:11px;box-shadow:0 4px 12px #0003;transform:none;filter:none}
.app-stage-type{font-size:7px;letter-spacing:.1em;color:var(--project-color)}
.app-stage-copy>strong{font-family:var(--display);font-size:clamp(22px,2.3vw,35px);font-weight:650;letter-spacing:-.04em;line-height:1.15;color:#f2f3ed;overflow-wrap:normal}
.app-stage-tagline{font-size:10px;line-height:1.7;color:#c8d1d4;max-width:165px}
.app-screen-stack{position:absolute;inset:0}
.app-showcase .app-screen{position:absolute;width:auto;max-width:32%;object-fit:contain;border-radius:6px;box-shadow:0 18px 24px #0005;filter:none;transition:transform .7s var(--ease)}
.app-showcase .app-screen-front{height:84%;right:5%;top:12%;transform:rotate(7deg);z-index:2;border:1px solid #ffffff35}
.app-showcase .app-screen-back{height:80%;right:27%;top:8%;transform:rotate(-9deg);opacity:.8;z-index:1;border:1px solid #ffffff25}
.app-visual:hover .app-screen-front{transform:translateY(-5px) rotate(5deg)}
.app-visual:hover .app-screen-back{transform:translateY(4px) rotate(-6deg)}
.app-visual:hover .app-icon{transform:none;filter:none}
.hero-game-app .app-showcase{height:175px;border-radius:3px}
.hero-game-app .app-stage-copy{gap:6px;top:13%}
.hero-game-app .app-showcase .app-icon{width:27px;height:27px;border-radius:7px}
.hero-game-app .app-stage-copy>strong{font-size:20px}
.hero-game-app .app-stage-type{font-size:5px}
.hero-game-app .app-stage-tagline{font-size:7px;max-width:110px}
.hero-game-app .app-screen{border-radius:3px}
.dialog-app-cover{height:370px}
.dialog-app-cover[hidden],.dialog-cover[hidden]{display:none}
.dialog-app-cover .app-stage-copy{gap:14px;top:17%}
.dialog-app-cover .app-stage-copy>strong{font-size:48px}
.dialog-app-cover .app-icon{width:57px;height:57px;border-radius:13px}
.dialog-app-cover .app-stage-type{font-size:9px}
.dialog-app-cover .app-stage-tagline{font-size:13px;max-width:230px}

/* Explicit sizing keeps every screenshot contained and every icon small. */
.app-showcase .app-icon{flex:none;max-width:43px;max-height:43px;aspect-ratio:1}
.app-showcase .app-screen{display:block;min-width:0;object-fit:contain;object-position:center}
.dialog-app-cover .app-icon{max-width:57px;max-height:57px}
@media(max-width:1100px){
 .hero-game-app .app-showcase{height:144px}.hero-game-app .app-stage-copy>strong{font-size:17px}.hero-game-app .app-stage-copy{gap:5px}.hero-game-app .app-showcase .app-icon{width:23px;height:23px}
 .app-stage-copy>strong{font-size:25px}.app-stage-tagline{font-size:9px;max-width:135px}.app-stage-copy{gap:8px}.app-showcase .app-icon{width:35px;height:35px}.dialog-app-cover .app-icon{width:57px;height:57px;max-width:57px;max-height:57px}
}
@media(max-width:800px){
 .hero-game-app .app-showcase{height:115px}.hero-game-app .app-stage-copy>strong{font-size:14px}.hero-game-app .app-stage-copy{gap:4px;top:12%}.hero-game-app .app-showcase .app-icon{width:19px;height:19px;border-radius:5px}.hero-game-app .app-stage-tagline{font-size:6px;max-width:90px}.hero-game-app .app-stage-type{font-size:4px}
 .app-stage-copy>strong{font-size:20px}.app-stage-copy{gap:5px}.app-showcase .app-icon{width:27px;height:27px;border-radius:7px}.app-stage-type{font-size:5px}.app-stage-tagline{font-size:8px;max-width:115px}
 .dialog-app-cover{height:300px}.dialog-app-cover .app-stage-copy>strong{font-size:35px}.dialog-app-cover .app-icon{width:45px;height:45px;max-width:45px;max-height:45px}.dialog-app-cover .app-stage-copy{gap:11px}
}
@media(max-width:560px){
 .hero-game-app .app-showcase{height:130px}.hero-game-app .app-stage-copy>strong{font-size:16px}.hero-game-app .app-showcase .app-icon{width:22px;height:22px}.hero-game-app .app-stage-copy{gap:5px}
 .app-stage-copy>strong{font-size:clamp(21px,6vw,28px)}.app-showcase .app-icon{width:32px;height:32px;border-radius:8px}.app-stage-type{font-size:6px}.app-stage-copy{gap:7px;top:12%}.app-stage-tagline{font-size:8px;max-width:135px}
 .dialog-app-cover{height:220px}.dialog-app-cover .app-stage-copy{gap:8px;top:13%}.dialog-app-cover .app-stage-copy>strong{font-size:25px}.dialog-app-cover .app-icon{width:35px;height:35px;max-width:35px;max-height:35px}.dialog-app-cover .app-stage-type{font-size:6px}.dialog-app-cover .app-stage-tagline{font-size:9px;max-width:130px}
}
@media(max-width:360px){.app-stage-copy>strong{font-size:20px}.app-stage-tagline{font-size:7px;max-width:110px}.app-stage-copy{gap:5px}.app-showcase .app-icon{width:25px;height:25px}.hero-game-app .app-stage-copy>strong{font-size:16px}.hero-game-app .app-showcase .app-icon{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.app-showcase *{transition:none!important;animation:none!important}}