/* The gallery focuses on the person and this user's time together. */
body:has(#lobby:not([hidden])){background:#faf9f7;color:#28242c}
.lobby{width:min(1120px,calc(100% - 64px));padding-bottom:40px}
.intro{padding:54px 0 32px}.intro .eyebrow{font-size:12px;color:#857a87;letter-spacing:.02em;margin-bottom:12px}.intro h1{font-size:38px;line-height:1.25;letter-spacing:-1.5px;color:#28242c}.intro p{font-size:14px;color:#867f89;margin-top:14px}
.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.character-card{background:#fff;border:1px solid #ece8e9;border-radius:18px;overflow:hidden;box-shadow:none;transition:transform .18s,border-color .18s}.character-card:hover{transform:translateY(-3px);border-color:#c6b5c8}
.character-card .card-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;padding:0;border:0;border-radius:0;overflow:hidden;background:#eee7e5;cursor:pointer}.card-photo:after{display:none}.card-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
#character-grid .card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;opacity:0;transition:opacity .2s;pointer-events:none}
#character-grid .card-preview.is-playing{opacity:1}
/* Gallery-only 4:5 crops align headroom and face size with Yuna. Keep the
   approved 9:16 call/detail viewports separate; poster and Idle share this crop. */
#character-grid .card-photo[data-detail="harin-closeup"]{--gallery-width:155%;--gallery-left:-30%;--gallery-top:-19%}
#character-grid .card-photo[data-detail="sera-closeup"]{--gallery-width:183.304805%;--gallery-left:-46.337863%;--gallery-top:-38%}
#character-grid .card-photo[data-detail="nari-closeup"]{--gallery-width:142%;--gallery-left:-20.5%;--gallery-top:-15%}
#character-grid .card-photo[data-detail="ria-closeup"]{--gallery-width:147%;--gallery-left:-26%;--gallery-top:-14%}
#character-grid .closeup-card :is(img,video){position:absolute;inset:auto;left:var(--gallery-left,var(--scene-left));top:var(--gallery-top,var(--scene-top));width:var(--gallery-width,var(--scene-width));height:auto;max-width:none;aspect-ratio:9/16;object-fit:fill;transform:none}
/* The approved gallery crop is identical for the poster and existing Idle. */
#character-grid .card-photo[data-detail="harin"]{--portrait-scale:1.4;--portrait-x:52%;--portrait-y:24.9%}
#character-grid .card-photo[data-detail="sera"]{--portrait-scale:1.65;--portrait-x:53%;--portrait-y:28.4%}
#character-grid .card-photo[data-detail="nari"]{--portrait-scale:1.3;--portrait-x:50%;--portrait-y:26.9%}
#character-grid .card-photo[data-detail="ria"]{--portrait-scale:1.33;--portrait-x:52.6%;--portrait-y:24.5%}
#character-grid .card-photo:is([data-detail="harin"],[data-detail="sera"],[data-detail="nari"],[data-detail="ria"]) :is(img,video){position:absolute;inset:auto;width:calc(100% * var(--portrait-scale));height:auto;max-width:none;aspect-ratio:9/16;left:50%;top:37.4%;transform:translate(calc(-1 * var(--portrait-x)),calc(-1 * var(--portrait-y)));object-fit:fill}
.card-body{padding:19px 20px 20px}.card-name-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.card-name-row h2{font-size:23px;font-weight:700;letter-spacing:-.8px;margin:0;color:#29232d}.together-time{font-size:11px;color:#98748f;white-space:nowrap;font-variant-numeric:tabular-nums}.card-description{font-size:13px;color:#87808b;line-height:1.7;min-height:0;margin:8px 0 18px}.card-actions .button{width:100%;border-radius:10px;background:#f7f2f6;border:1px solid #f0e8ed;color:#6e4962;font-size:13px;min-height:43px;justify-content:space-between;box-shadow:none}.card-actions .button:hover{background:#eee3eb}.together-detail{font-size:13px!important;color:#98748f!important;margin:0 0 20px!important}
.card-photo:focus-visible,.card-actions .button:focus-visible{outline:3px solid #98748f;outline-offset:-4px}
@media(min-width:1500px){.lobby{width:1200px}.character-grid{gap:30px}}
@media(max-width:700px){.lobby{width:calc(100% - 32px)}.intro{padding:28px 4px 26px}.intro h1{font-size:31px}.intro p{font-size:13px}.intro .eyebrow{font-size:11px}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.character-card{border-radius:14px}.card-body{padding:13px 12px}.card-name-row{gap:5px}.card-name-row h2{font-size:21px}.together-time{font-size:10px}.card-description{font-size:11px;line-height:1.55;min-height:34px;margin:7px 0 13px}.card-actions .button{font-size:12px;min-height:42px;padding:10px 12px}.card-actions .button svg{width:15px;height:15px}.intro .mobile-break{display:none}}
@media(max-width:380px){.card-name-row{align-items:flex-start;flex-direction:column}.intro h1{font-size:28px}}