.ss-intro { background:linear-gradient(155deg,#dff4ff 0%,#ece4ff 52%,#ffe8bd 100%); }
.ss-hero { position:absolute; left:7%; top:18%; font-size:clamp(7rem,25vw,13rem); filter:drop-shadow(0 14px 18px rgba(30,42,74,.18)); transform:rotate(-5deg); }
.ss-panel { width:min(430px,58vw); max-height:calc(100% - 24px); overflow:auto; }
.ss-adult-box { display:grid; gap:7px; margin:12px 0; padding:12px; border:2px solid rgba(30,42,74,.13); border-radius:16px; background:rgba(255,255,255,.72); text-align:left; }
.ss-adult-box > b { color:var(--navy); }
.ss-adult-box label,.ss-mode-label { color:var(--body); font-size:.8rem; font-weight:800; }
.ss-adult-box select { width:100%; min-height:44px; padding:8px 10px; border:2px solid var(--border); border-radius:12px; background:#fff; color:var(--navy); font:inherit; font-weight:700; }
.ss-mode { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.ss-mode button { min-height:44px; padding:8px; border:2px solid var(--border); border-radius:12px; background:#fff; color:var(--navy); font-weight:800; }
.ss-mode button[aria-pressed="true"] { border-color:var(--sage); background:#e6f5ed; box-shadow:inset 0 0 0 1px var(--sage); }
.ss-play { background:linear-gradient(180deg,#c9edff 0%,#e8f8ff 52%,#f7dba6 53%,#efc778 100%); }
.ss-instruction { position:absolute; z-index:6; left:50%; top:3%; transform:translateX(-50%); width:min(520px,calc(100% - 24px)); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:10px 14px; box-sizing:border-box; border:2px solid rgba(30,42,74,.14); border-radius:18px; background:rgba(255,255,255,.94); color:var(--navy); text-align:center; box-shadow:0 5px 16px rgba(30,42,74,.14); }
.ss-instruction b { flex:1 1 220px; font-size:clamp(.95rem,3.8vw,1.15rem); }
.ss-cards { position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-56%); display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,3vw,18px); width:min(600px,calc(100% - 22px)); }
.mp-card { min-width:0; min-height:44px; padding:0; overflow:hidden; border:3px solid #fff; border-radius:20px; background:#fff; box-shadow:0 8px 22px rgba(30,42,74,.22); color:var(--navy); transition:transform .15s,border-color .15s,opacity .2s; }
.mp-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--cream); }
.mp-card span { display:block; padding:8px 4px 10px; font-size:clamp(.9rem,4vw,1.12rem); font-weight:850; }
.mp-card:active { transform:scale(.96); }
.mp-card.retry { animation:ss-wobble .28s ease-in-out 2; border-color:#e8b84f; }
.mp-card.packing { opacity:.25; transform:translateY(90px) scale(.45) rotate(7deg); transition:all .55s cubic-bezier(.5,.05,.4,1); }
@keyframes ss-wobble { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-8px)} 70%{transform:translateX(8px)} }
.ss-suitcase { position:absolute; z-index:6; left:50%; bottom:max(10px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(620px,calc(100% - 20px)); min-height:104px; padding:10px 12px; box-sizing:border-box; border:4px solid #8c542d; border-radius:20px; background:#d9894f; box-shadow:0 8px 0 #6c3f25,0 12px 24px rgba(30,42,74,.2); color:#fff; }
.ss-case-top { display:flex; justify-content:space-between; align-items:center; font-weight:900; font-size:.85rem; }
.ss-packed { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-top:6px; }
.ss-slot { aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.26); }
.ss-slot img { width:100%; height:100%; object-fit:cover; }
.ss-slot.empty::before { content:'○'; opacity:.7; }
.ss-recap { margin:8px 0; padding:10px; border-radius:14px; background:#f0f6f3; color:var(--body); font-size:.84rem; text-align:left; }
@media(max-width:620px){.ss-hero{left:50%;top:7%;transform:translateX(-50%) rotate(-5deg);font-size:6.3rem}.ss-panel{left:50%;width:calc(100% - 24px);max-height:72%;}.ss-cards{top:48%}.ss-instruction{top:2%}}
@media(max-height:660px){.ss-instruction{padding:6px 10px}.ss-cards{top:48%;width:min(470px,calc(100% - 20px))}.ss-suitcase{min-height:82px;padding:7px 10px}.mp-card span{padding:4px;font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.mp-card.retry{animation:none}.mp-card,.mp-card.packing{transition:none}}