/* Shared home/lobby character stage. Names and controls remain real accessible HTML. */
.hero-showcase{position:relative;isolation:isolate;width:100%;min-width:0;aspect-ratio:3/2;overflow:hidden;background:#102a31;color:#ebddb2;border:1px solid #496158;box-shadow:inset 0 0 0 1px #102a31;font-family:monospace}
.showcase-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;display:block}
.showcase-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#071c2866 0%,transparent 30%,transparent 58%,#071c2866 76%,#071c28ed 100%),linear-gradient(90deg,#071c2844,transparent 18%,transparent 82%,#071c2844)}
.showcase-heading{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:15px;font:8px Pixel,monospace;line-height:1.8;letter-spacing:1px;color:#c4d1b1;text-shadow:1px 2px #10262e}
.showcase-heading>span{display:flex;align-items:center;gap:9px}.showcase-heading i{display:inline-block;width:5px;height:5px;background:#afc49c;box-shadow:0 0 0 3px #acbf9526}.showcase-heading>small{font:14px monospace;color:#e5c38c;white-space:nowrap}.showcase-heading b{font-weight:normal;color:#92aaa0;font-size:10px}
.showcase-roster{position:absolute;left:2%;right:2%;bottom:29px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:10px}
.hero-showcase .showcase-seat{min-width:0;max-width:100%;margin:0;text-align:center;border:0;box-sizing:border-box;font-family:monospace}
.showcase-member{padding:10px 4px 9px;position:relative;background:linear-gradient(90deg,transparent,#0b222a99,transparent)}
.showcase-member:before{content:'';position:absolute;left:22%;right:22%;top:0;height:1px;background:#80978988}.showcase-member.is-self:before{background:#d5bc7b;left:15%;right:15%}
.showcase-player-title{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;color:#f0e4bb;line-height:1.7}.showcase-player-title strong{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px monospace;font-weight:700;line-height:1.7;letter-spacing:.2px}.showcase-player-marker{color:#c4ae7a;flex-shrink:0;font:13px monospace}.showcase-you{flex-shrink:0;font:6px monospace;color:#cbb881;border:1px solid #a48e5c77;padding:2px 3px;letter-spacing:.5px}
.showcase-player-status{display:flex;align-items:center;justify-content:center;gap:4px;font:7px monospace;letter-spacing:.6px;color:#a7b4a1;line-height:1.8;margin-top:3px}.showcase-player-status i{width:4px;height:4px;background:#839587;flex-shrink:0}.is-ready .showcase-player-status{color:#bed4a4}.is-ready .showcase-player-status i{background:#b6d59b;box-shadow:0 0 0 2px #b6d59b14}.has-left .showcase-player-title,.has-left .showcase-player-status{color:#8b9b92}.has-left .showcase-player-status i{background:#a98b7e}
.hero-showcase .showcase-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:68px;padding:6px 3px;background:#0a22285c;color:#b4c5ac;border:1px dashed #718b725c;cursor:pointer;transition:background .15s,border-color .15s}.showcase-plus{font:21px monospace;line-height:1;color:#aec2a8}.showcase-empty>span:not(.showcase-plus){font:7px monospace;letter-spacing:.8px;line-height:1.8}.showcase-empty>small{font:6px monospace;letter-spacing:.8px;color:#6f9188;line-height:1.5}.hero-showcase .showcase-empty:hover{background:#294b46a6;border-color:#adb990}.hero-showcase .showcase-empty:focus-visible{outline:2px solid #e0c58e;outline-offset:-4px;background:#294b46a6}
.showcase-location{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:6px monospace;letter-spacing:2px;color:#708d83;pointer-events:none}.showcase-location i{font-style:normal;color:#ac9665;padding:0 10px}
.hero-showcase.is-solo .showcase-roster{left:17%;right:17%;bottom:29px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.is-solo .showcase-member{grid-column:1/-1;position:absolute;bottom:calc(100% + 14px);left:0;right:0;padding:10px 4px 8px;background:linear-gradient(90deg,transparent,#0a232c77,transparent)}.is-solo .showcase-member:before{left:32%;right:32%}.is-solo .showcase-player-title strong{font-size:15px;letter-spacing:.5px}.is-solo .showcase-player-marker{font-size:17px}.is-solo .showcase-player-status{font-size:8px;margin-top:4px}.is-solo .showcase-you{font-size:7px;padding:2px 4px}.is-solo .showcase-empty{min-height:54px;flex-direction:row;flex-wrap:wrap;column-gap:7px;row-gap:1px;padding:9px 5px}.is-solo .showcase-empty>small{width:100%;padding-left:14px}.is-solo .showcase-plus{font-size:19px}
.hero-showcase.is-compact{aspect-ratio:96/43}.is-compact .showcase-heading{top:16px}.is-compact .showcase-roster{bottom:25px}.is-compact .showcase-location{bottom:9px}.is-compact.is-solo .showcase-roster{left:20%;right:20%;bottom:24px}.is-compact.is-solo .showcase-member{bottom:calc(100% + 4px)}.is-compact.is-solo .showcase-empty{min-height:43px;padding:5px}.is-compact .showcase-empty{min-height:56px}
.hero-showcase.is-duo .showcase-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-showcase.is-duo.is-solo .showcase-roster{grid-template-columns:1fr;left:35%;right:35%}.hero-showcase.is-duo.is-solo .showcase-member{left:-80%;right:-80%}
@media(max-width:760px){.showcase-heading{top:17px;left:18px;right:18px;font-size:7px;letter-spacing:.7px}.showcase-player-title strong{font-size:10px}.showcase-you{font-size:5px;padding:2px}.showcase-player-marker{font-size:11px}.showcase-roster{gap:5px}.showcase-host{display:none}.showcase-player-status{font-size:6px;letter-spacing:.25px}.hero-showcase.is-solo .showcase-roster{left:12%;right:12%}.is-solo .showcase-player-title strong{font-size:14px}.hero-showcase.is-compact{min-height:290px}.is-compact .showcase-canvas{object-fit:cover}.is-compact.is-solo .showcase-roster{left:17%;right:17%}.is-compact.is-solo .showcase-member{bottom:calc(100% + 8px)}}
@media(max-width:480px){.hero-showcase{min-height:330px;aspect-ratio:6/5}.showcase-heading{top:15px;left:15px;right:15px;font-size:6px}.showcase-heading>small{font-size:12px}.showcase-player-title{gap:3px;flex-wrap:wrap}.showcase-player-title strong{font-size:9px;max-width:calc(100% - 17px)}.showcase-you{display:none}.showcase-player-status{font-size:6px;letter-spacing:0}.showcase-roster{left:2%;right:2%;bottom:27px;gap:3px}.showcase-member{padding:8px 1px}.hero-showcase .showcase-empty{min-height:58px}.showcase-empty>span:not(.showcase-plus){font-size:6px;letter-spacing:.2px}.showcase-empty>small{font-size:5px;letter-spacing:.3px}.showcase-location{font-size:5px;letter-spacing:1.6px}.hero-showcase.is-solo .showcase-roster{left:10%;right:10%;gap:6px}.is-solo .showcase-member{bottom:calc(100% + 10px)}.is-solo .showcase-player-title{flex-wrap:nowrap;gap:7px}.is-solo .showcase-player-title strong{font-size:14px}.is-solo .showcase-you{display:inline}.is-solo .showcase-player-marker{font-size:15px}.is-solo .showcase-player-status{font-size:7px}.is-solo .showcase-empty{min-height:50px!important;padding:7px 4px;column-gap:4px}.is-solo .showcase-empty>small{font-size:5px}.hero-showcase.is-compact{min-height:270px;aspect-ratio:3/2}.is-compact .showcase-canvas{object-fit:fill}.is-compact.is-solo .showcase-roster{left:11%;right:11%}.is-compact.is-solo .showcase-member{bottom:calc(100% + 5px)}}
@media(max-height:600px) and (orientation:landscape){.hero-showcase{min-height:0;aspect-ratio:3/2}.showcase-heading{top:13px;font-size:6px}.showcase-roster{bottom:24px}.hero-showcase.is-solo .showcase-roster{left:13%;right:13%;gap:7px;bottom:25px}.is-solo .showcase-member{bottom:calc(100% + 3px)}.is-solo .showcase-player-title strong{font-size:12px}.is-solo .showcase-player-status{font-size:6px}.is-solo .showcase-empty{min-height:40px;padding:4px}.showcase-empty>small{display:none}.hero-showcase.is-compact{min-height:0;aspect-ratio:96/43}.is-compact .showcase-roster{bottom:20px}.showcase-location{bottom:7px;font-size:5px}}
@media(prefers-reduced-motion:reduce){.hero-showcase .showcase-empty{transition:none}}
/* Lobby text is interface text: readable at a glance, even on a phone. */
.showcase-heading{justify-content:flex-end;top:16px;left:18px;right:18px}.showcase-heading>small{font:600 15px Arial,sans-serif;color:#e5d3a2}.showcase-heading b{font:400 13px Arial,sans-serif;color:#9eb4a4}
.hero-showcase .showcase-roster{bottom:16px}.hero-showcase .showcase-member{padding:8px 3px}.hero-showcase .showcase-player-title{gap:6px;flex-wrap:nowrap}.hero-showcase .showcase-player-title strong{font:700 17px/1.4 Arial,sans-serif;letter-spacing:0}.hero-showcase .showcase-player-marker{font-size:17px}.hero-showcase .showcase-you{font:700 9px Arial,sans-serif;padding:3px 4px}.hero-showcase .showcase-player-status{font:600 13px/1.45 Arial,sans-serif;letter-spacing:0;margin-top:4px;gap:5px}.hero-showcase .showcase-player-status i{width:5px;height:5px}.hero-showcase .showcase-host{font:600 11px Arial,sans-serif}
.hero-showcase .showcase-empty{flex-direction:row;flex-wrap:nowrap;gap:8px;min-height:48px;padding:9px 6px}.hero-showcase .showcase-empty>span:not(.showcase-plus){font:700 13px/1.4 Arial,sans-serif;letter-spacing:.5px}.hero-showcase .showcase-plus{font:22px/1 Arial,sans-serif}.hero-showcase.is-solo .showcase-roster{bottom:16px}.hero-showcase.is-solo .showcase-member{bottom:calc(100% + 11px);padding:8px 4px}.hero-showcase.is-solo .showcase-player-title strong{font-size:18px}.hero-showcase.is-solo .showcase-empty{min-height:46px!important}.hero-showcase.is-solo .showcase-player-status{font-size:13px}
@media(max-width:480px){.hero-showcase .showcase-roster{gap:4px;bottom:13px}.hero-showcase .showcase-player-title{gap:3px}.hero-showcase .showcase-player-title strong{font-size:16px;max-width:calc(100% - 17px)}.hero-showcase .showcase-player-marker{font-size:14px}.hero-showcase .showcase-player-status{font-size:13px;gap:3px}.hero-showcase .showcase-player-status i{width:4px;height:4px}.hero-showcase .showcase-host{display:none}.hero-showcase .showcase-empty{gap:5px;padding:9px 4px}.hero-showcase .showcase-empty>span:not(.showcase-plus){font-size:13px;letter-spacing:0}.hero-showcase.is-solo .showcase-roster{left:7%;right:7%;gap:5px;bottom:13px}.hero-showcase.is-solo .showcase-member{bottom:calc(100% + 10px)}.hero-showcase.is-solo .showcase-player-title strong{font-size:18px}.hero-showcase.is-duo.is-solo .showcase-roster{left:32%;right:32%}}
/* Two-line callsigns keep real party names readable in the narrow four-seat view. */
.hero-showcase.is-party .showcase-player-title{align-items:flex-start}.hero-showcase.is-party .showcase-player-title strong{flex:1;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-overflow:clip;line-height:1.3;min-height:2.6em;max-height:2.6em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.hero-showcase.is-party .showcase-player-marker{line-height:1.3}.hero-showcase.is-party .showcase-player-marker[aria-hidden="true"]{display:none}.hero-showcase.is-party.is-compact .showcase-you{display:none}.hero-showcase.is-party .showcase-member.is-self .showcase-player-title strong{color:#f0d497}