/* Phone-first suitcase world: large artwork, compact native controls. */
.suitcase-art,.suitcase-title,.suitcase-brand{display:none}
.suitcase #home{background:#f7edda url('/cloud/assets/suitcase-menu.png') center/cover no-repeat}
.suitcase #intro{background:#fcf2df}
.suitcase #intro::before{content:'';position:absolute;inset:-20px;background:url('/cloud/assets/suitcase-wide.png') center/cover;filter:blur(14px);pointer-events:none}
.suitcase .suitcase-art{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.suitcase #intro .friends,.suitcase #intro .hero-logo,.suitcase #intro .tagline,.suitcase #intro .sound-hint{display:none}
.suitcase #intro .intro-copy{inset:0;width:100%;height:100%;transform:none;pointer-events:none}
.suitcase #intro h1{position:absolute;top:1.3%;left:33%;width:34%;line-height:.98}
.suitcase .suitcase-title{display:flex;flex-direction:column;font-size:9.6cqh;font-weight:1000;letter-spacing:-.055em;color:#f87859;text-shadow:0 2px 0 #ffe0bf,0 4px 0 #c9503c,0 7px 9px #80523333}
.suitcase .suitcase-title>span+span{color:#168d86;text-shadow:0 2px 0 #8ad0bc,0 4px 0 #096b67,0 7px 9px #80523333}
.suitcase #continue{position:absolute;bottom:4.7%;left:35%;width:30%;min-width:0;min-height:44px;height:12%;margin:0;padding:0 .5em;gap:.3em;font-size:5.8cqh;white-space:nowrap;pointer-events:auto;background:linear-gradient(#94e3c0,#3bae8d);border:3px solid #dcffe9;color:#fffdf2;box-shadow:inset 0 3px 2px #e1fff477,0 5px 0 #23846b,0 0 18px #baf9d9,0 9px 15px #694b3233;text-shadow:0 2px 2px #186e5a;animation:suitcase-welcome .65s ease-out both;isolation:isolate}
.suitcase #continue::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#fff9 49%,transparent 68%) -150% 0/65% 100% no-repeat;pointer-events:none;opacity:0}
.suitcase .intro.ready #continue::after{animation:suitcase-shine 2.5s .2s 2}
.suitcase .intro.ready #continue.entry-pulse::after{animation:suitcase-shine .8s 2}
.suitcase.parent-open #continue::after,.suitcase.page-hidden #continue::after{animation:none!important}
.suitcase #continue img{display:none}
.suitcase #intro .intro-copy h1{animation:suitcase-welcome .65s ease-out both}
.suitcase #sound{background:#fff7e6;border-color:#fffdf5;box-shadow:0 4px 0 #c7aa7d,0 6px 12px #765f3022}
.suitcase #sound img{filter:invert(43%) sepia(44%) saturate(790%) hue-rotate(121deg)}
.suitcase .catalog{padding:1.5cqh max(3cqw,env(safe-area-inset-left)) 1cqh}
.suitcase .catalog-header{height:11cqh;gap:2cqw;padding-right:7cqw}
.suitcase .catalog h2{font-size:clamp(16px,4.5cqh,32px);color:#287f78;text-shadow:0 2px #fffcf1}
.suitcase .brand-button{width:15cqw;text-align:left}
.suitcase .brand-button>img{display:none}
.suitcase .suitcase-brand{display:block;color:#208b81;font-weight:1000;font-size:3.7cqh;line-height:.95;text-shadow:0 2px #fff8d7}
.suitcase .suitcase-brand::first-line{color:#f17a57}
.suitcase .hub-carousel{height:85cqh;gap:0}
.suitcase .cards.carousel-track .game-card{height:98%;max-height:calc(31.33cqw + clamp(46px,11cqh,64px) + 6px);border:3px solid #70bca5;border-radius:20px;background:#fff8e8;box-shadow:0 5px 0 #328c76,0 9px 14px #416c552c;transform:scale(.92)}
.suitcase .cards.carousel-track .game-card.is-active{transform:scale(.99)}
.suitcase .cards.carousel-track .game-card .cover-wrap{flex:1 1 0;width:100%;min-height:0;border-radius:17px 17px 0 0}
.suitcase .cards.carousel-track .game-card .card-cover{object-fit:contain;background:#fff8e8}
.suitcase .cards.carousel-track .game-card .card-body{flex:0 0 auto;min-height:0;height:clamp(46px,11cqh,64px);padding:2px 8px;display:flex;flex-direction:row;justify-content:space-between;gap:4px;border-radius:0 0 17px 17px;background:#fff8e8}
.suitcase .cards.carousel-track .game-card .card-body h3{font-size:clamp(15px,4cqh,27px);color:#307a70;line-height:1.05}
.suitcase .cards.carousel-track .game-card .play{width:44px;min-width:44px;min-height:44px;height:44px;padding:8px;border-radius:50%;font-size:0;gap:0;box-shadow:0 3px 0 #328c76;border-width:2px}
.suitcase .cards.carousel-track .game-card .play img{width:23px;height:23px}
.suitcase .cards.carousel-track .game-card .lock-button{top:8px;right:8px;bottom:auto;width:44px;height:44px;transform:none;border-width:2px;box-shadow:0 3px 0 #b88235}
.suitcase .carousel-controls{min-height:48px;height:12cqh;max-height:62px;padding:4px 0;gap:22px}
.suitcase .carousel-controls>button{width:48px;height:44px;border-radius:16px;font-size:30px}
.suitcase .catalog-status{position:absolute;bottom:0;left:20%;right:20%;height:auto;margin:0;font-size:12px}
@container(max-aspect-ratio:16/10){.suitcase .suitcase-art{object-fit:contain}.suitcase #intro h1{top:8%;font-size:8cqh}.suitcase .suitcase-title{font-size:7cqh}.suitcase #continue{bottom:8%;font-size:4.5cqh}.suitcase .cards.carousel-track .game-card{height:100%;max-height:calc(29cqw + 64px)}}
@keyframes suitcase-welcome{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes suitcase-shine{0%{opacity:0;background-position:-150% 0}12%{opacity:1}65%{opacity:1;background-position:250% 0}100%{opacity:0;background-position:250% 0}}
@media(prefers-reduced-motion:reduce){.suitcase #continue,.suitcase #intro .intro-copy h1,.suitcase .intro.ready #continue::after{animation:none!important}}