/* Shared start-screen art and profile controls. */
:where(.startscreen-scene) .plane{position:absolute;inset:0;will-change:transform;pointer-events:none}
:where(.startscreen-scene) .plane>.layer{position:absolute;width:1672px;height:941px;inset:0}
:where(.startscreen-scene) .sprite{position:absolute;overflow:hidden;pointer-events:none}
:where(.startscreen-scene) .sprite>img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
:where(.startscreen-scene) .prop{position:absolute;transform-origin:50% 100%}
:where(.startscreen-scene) .ring{animation:bob 6s ease-in-out infinite}
:where(.startscreen-scene) .ring.far{animation-delay:-2.5s}
:where(.startscreen-scene) .buoy{animation:bob 5s ease-in-out infinite}
:where(.startscreen-scene) .fish{opacity:.68;filter:saturate(.8)}
:where(.startscreen-scene) .shark{opacity:.32;filter:saturate(.55)}
:where(.startscreen-scene) .player-slot{position:absolute;width:190px;height:225px;transform:translate(-50%,-100%)}
:where(.startscreen-scene) .player-slot .nest{bottom:0;left:0}
:where(.startscreen-scene) .player-slot .figure{bottom:29px;left:25px;width:140px;height:166px;object-fit:contain;position:absolute;filter:drop-shadow(1px 5px 2px #55321533)}
:where(.startscreen-scene) .player-slot .figure.egg{width:101px;height:137px;left:44px;bottom:31px}
:where(.startscreen-scene) .nest-front{clip-path:inset(64% 0 0 0)}
:where(.startscreen-scene) .nameplate{position:absolute;transform:translate(-50%,0) scale(var(--seat-scale,1));transform-origin:50% 0;min-width:114px;max-width:182px;text-align:center;padding:7px 15px 9px;background:linear-gradient(#382a20d9,#282823c7);border:1px solid #d3bd892e;border-radius:9px;box-shadow:0 3px 8px #181a2138;font-size:20px;font-weight:750}
:where(.startscreen-scene) .nameplate span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.startscreen-scene) .nameplate small{display:block;font-size:14px;color:#a9e1ae;margin-top:2px;font-weight:650}
:where(.startscreen-scene) .nameplate.empty{color:#e6d9c0ab;background:#33291e77}
:where(.startscreen-scene) .nameplate.empty small{color:#e6d9c099}
:where(.startscreen-scene) .logo{position:absolute;left:44px;top:38px;width:536px;height:184px;filter:drop-shadow(0 9px 7px #23445022)}
:where(.startscreen-scene) .tagline{position:absolute;left:83px;top:217px;font-size:18px;font-weight:800;letter-spacing:3px;color:#fff8de;text-shadow:0 2px 4px #3c668980}
:where(.startscreen-scene) .top-actions{position:absolute;right:42px;top:36px;display:flex;align-items:center;gap:15px;pointer-events:auto}
:where(.startscreen-scene) .status{display:flex;align-items:center;gap:18px;padding:13px 20px;border-radius:16px;background:#193d56aa;box-shadow:inset 0 1px 0 #ffffff29;font-size:17px}
:where(.startscreen-scene) .status strong{font-size:18px}
:where(.startscreen-scene) .status b{font-size:16px;padding:6px 11px;background:#88bd9480;border-radius:8px}
:where(.startscreen-scene) .icon-button{position:relative;background:none;border:0;padding:0;width:62px;height:62px;border-radius:14px;transition:transform .18s}
:where(.startscreen-scene) .icon-button:hover{transform:translateY(-3px)}
:where(.startscreen-scene) .icon-button .sprite{inset:0}
:where(.startscreen-scene) .adventure{position:absolute;right:62px;bottom:59px;width:360px;height:94px;background:none;border:0;pointer-events:auto;color:#4b2b12;filter:drop-shadow(0 5px 6px #2c201e4d);transition:transform .2s,filter .2s}
:where(.startscreen-scene) .adventure .sprite{inset:0;width:100%;height:100%}
:where(.startscreen-scene) .adventure span{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;font-size:29px;font-weight:850;text-shadow:0 1px #fff5c1}
:where(.startscreen-scene) .adventure:hover{transform:translateY(-4px);filter:drop-shadow(0 9px 8px #2c201e55) brightness(1.06)}
:where(.startscreen-scene) .adventure:active{transform:translateY(1px)}
:where(.startscreen-scene) .adventure i{font-style:normal;font-size:25px}
body.still :where(.startscreen-scene) .prop{animation:none}
@keyframes bob{50%{translate:0 -5px;rotate:.6deg}}
@media(prefers-reduced-motion:reduce){:where(.startscreen-scene) .prop{animation:none}}
@media(max-aspect-ratio:1/1){:where(.startscreen-scene) .tagline{display:none}
:where(.startscreen-scene) .top-actions{right:36px;top:28px}
:where(.startscreen-scene) .status{font-size:22px}
:where(.startscreen-scene) .status strong{font-size:24px}
:where(.startscreen-scene) .status b{font-size:23px}
:where(.startscreen-scene) .icon-button{width:90px;height:90px}
:where(.startscreen-scene) .logo{top:45px;width:480px}
:where(.startscreen-scene) .adventure{bottom:-195px;right:390px;width:892px;height:200px}
:where(.startscreen-scene) .adventure span{font-size:64px;gap:28px}
:where(.startscreen-scene) .adventure i{font-size:50px}
:where(.startscreen-scene) .nameplate{font-size:29px;min-width:146px;padding:7px 9px}
:where(.startscreen-scene) .nameplate small{font-size:21px}}
:where(.startscreen-scene) .scenery-motion{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;pointer-events:none}
:where(.startscreen-scene) .plane[data-layer="06-foreground"]{transform-origin:50% 44%}
:where(.startscreen-scene) .scene-object .ring{animation:none;will-change:transform}
:where(.startscreen-scene) .ring>.ring-muted{filter:saturate(.72) brightness(.88);clip-path:inset(40.6% 0 0)}
:where(.startscreen-scene) .ring>.balloon-colors{clip-path:inset(0 0 59.4% 0)}
:where(.startscreen-scene) .scene-object .shark{opacity:.76;filter:saturate(.65) contrast(1.03);mask-image:linear-gradient(#000 32%,#000c 65%,#0006 100%);transform-origin:50% 50%;will-change:transform}
:where(.startscreen-scene) .nest-inner-shadow{position:absolute;left:28px;bottom:29px;width:134px;height:29px;border-radius:50%;background:#39241057;filter:blur(5px);pointer-events:none}
:where(.startscreen-scene) .icon-button>.sprite,:where(.startscreen-scene) .adventure>.sprite{width:100%!important;height:100%!important}
:where(.startscreen-scene) .player-slot .figure{bottom:-1px}
:where(.startscreen-scene) .player-slot .figure.egg{bottom:2px}
:where(.startscreen-scene) .arrival-egg{transform-origin:50% 95%;animation:lobby-egg-wiggle 3s ease-in-out both}
:where(.startscreen-scene) .hatch-shells{position:absolute;left:44px;bottom:2px;width:101px;height:137px;pointer-events:none}
:where(.startscreen-scene) .hatch-shells canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
:where(.startscreen-scene) .shell-top{clip-path:polygon(0 0,100% 0,100% 48%,85% 54%,70% 45%,55% 55%,40% 46%,25% 55%,10% 46%,0 52%);animation:lobby-shell-top .8s ease-out both}
:where(.startscreen-scene) .shell-bottom{clip-path:polygon(0 52%,10% 46%,25% 55%,40% 46%,55% 55%,70% 45%,85% 54%,100% 48%,100% 100%,0 100%);animation:lobby-shell-bottom .8s ease-out both}
:where(.startscreen-scene) .hatch-reveal{transform-origin:50% 100%;animation:lobby-chicken-reveal .65s cubic-bezier(.2,.7,.3,1) both}
:where(.startscreen-scene) .scene-paused :is(.arrival-egg,.hatch-reveal,.hatch-shells canvas){animation-play-state:paused}
@keyframes lobby-egg-wiggle{0%,50%,100%{transform:rotate(0)}60%,80%{transform:rotate(-5deg)}70%,90%{transform:rotate(5deg)}}
@keyframes lobby-shell-top{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(-24px,-28px) rotate(-24deg);opacity:0}}
@keyframes lobby-shell-bottom{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(22px,24px) rotate(18deg);opacity:0}}
@keyframes lobby-chicken-reveal{0%{transform:translateY(24px) scale(.85);opacity:0}45%{opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){:where(.startscreen-scene) :is(.arrival-egg,.hatch-reveal){animation:none}:where(.startscreen-scene) .hatch-shells{display:none}}
:where(.startscreen-scene) .nest-front{clip-path:polygon(0 42%,15%47%,30%54%,45%58%,60%57%,80%49%,100%40%,100%100%,0 100%)}
:where(.startscreen-scene) .accessory-overlay{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 1px #38201255)}
:where(.startscreen-scene) .accessory-overlay[hidden]{display:none}
:where(.startscreen-scene) .accessory-overlay.goggles{left:52px;top:113px;width:92px;height:44px}
:where(.startscreen-scene) .accessory-overlay.scarf{left:48px;top:155px;width:95px;height:45px}
:where(.startscreen-scene) .accessory-overlay svg{display:block;width:100%;height:100%}
:where(.startscreen-scene) .local-player{z-index:2;pointer-events:auto}
:where(.startscreen-scene) .player-slot:before{content:'';position:absolute;left:5px;bottom:-5px;width:180px;height:43px;border-radius:50%;background:#291d1c47;filter:blur(8px)}
:where(.startscreen-scene) .player-slot.local-player-slot{transform:translate(-50%,-100%) scale(1.13);transform-origin:50% 100%;z-index:1}
:where(.startscreen-scene) .nameplate.local-player{width:272px;min-width:272px;max-width:272px;padding:7px 12px 9px;background:linear-gradient(#304138f2,#202d29ed);border-color:#bfd5b680;box-shadow:0 4px 12px #18221d40,inset 0 1px 0 #e1e7c728}
:where(.startscreen-scene) .local-player-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px;padding-top:5px;border-top:1px solid #f5dfb51a}
:where(.startscreen-scene) .local-player-meta{display:flex;justify-content:center;align-items:center;gap:7px;min-height:22px}
:where(.startscreen-scene) .local-player-meta small{margin:0;font-size:15px}
:where(.startscreen-scene) .local-player-badge{padding:2px 7px;border-radius:5px;background:#a8cfba26;color:#dfefe3;font-size:14px;line-height:18px;font-weight:650}
:where(.startscreen-scene) .player-name-control{position:relative;height:44px}
:where(.startscreen-scene) .name-trigger,:where(.startscreen-scene) .name-edit-form{display:flex;align-items:center;width:100%;height:44px;gap:7px;margin:0}
:where(.startscreen-scene) .name-trigger{background:transparent;color:#fff3d9;border:1px solid transparent;border-radius:7px;padding:0 2px;font-size:28px;font-weight:750;text-align:center}
:where(.startscreen-scene) .name-trigger:hover{background:#d9f4de12;border-color:#abc9b736}
:where(.startscreen-scene) .name-trigger.unnamed{font-size:25px;font-weight:550;color:#e2ecdf}
:where(.startscreen-scene) .name-trigger .name-value{flex:1;min-width:0;line-height:1.3}
:where(.startscreen-scene) .name-trigger svg{width:22px;height:22px;flex-shrink:0;color:#c7dcc9}
:where(.startscreen-scene) .name-edit-form{gap:6px}
:where(.startscreen-scene) .player-name-input{width:0;min-width:0;flex:1;height:44px;padding:3px 7px;border-radius:7px;border:1px solid #b3dbc4;background:#17271ecc;color:#fff4dc;font-size:28px;font-weight:650;outline-offset:2px}
:where(.startscreen-scene) .name-confirm{height:44px;width:40px;padding:0;flex-shrink:0;border:1px solid #c6e7cd55;background:#a4d8b429;color:#d5f1d9;border-radius:7px;font-size:25px}
:where(.startscreen-scene) .name-error{position:absolute;z-index:3;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:7px 10px;width:220px;border-radius:7px;background:#fff0cb;color:#674831;font-size:12px;font-weight:550;box-shadow:0 3px 12px #19271d33;white-space:normal!important}
:where(.startscreen-scene) .local-player>[hidden],:where(.startscreen-scene) .player-name-control[hidden],:where(.startscreen-scene) .name-trigger[hidden],:where(.startscreen-scene) .name-edit-form[hidden],:where(.startscreen-scene) .name-error[hidden],:where(.startscreen-scene) .local-player-badge[hidden]{display:none}
:where(.startscreen-scene) .appearance-controls{position:relative;display:flex;justify-content:center;gap:5px;margin:7px -6px -3px;padding-top:5px;border-top:1px solid #f5dfb51a}
:where(.startscreen-scene) .appearance-controls[hidden]{display:none}
:where(.startscreen-scene) .appearance-trigger{position:relative;display:grid;place-items:center;width:38px;height:34px;border:1px solid #d6c7a638;border-radius:9px;background:#160f0952;color:#f0dcb7;padding:5px;transition:background .15s,border-color .15s}
:where(.startscreen-scene) .appearance-trigger:hover,:where(.startscreen-scene) .appearance-trigger[aria-expanded=true]{background:#d6be7940;border-color:#e5cf94a8}
:where(.startscreen-scene) .appearance-trigger.has-accessory{color:#ffe49a;border-color:#d9b364}
:where(.startscreen-scene) .local-player-footer .appearance-controls{gap:7px;margin:0;padding:0;border:0}
:where(.startscreen-scene) .local-player-footer .appearance-trigger{width:46px;height:42px;padding:7px}
:where(.startscreen-scene) .local-player-footer .appearance-trigger svg{width:25px;height:25px}
:where(.startscreen-scene) .local-player-footer .color-dot{width:24px;height:24px}
:where(.startscreen-scene) .contact-shadow{position:absolute;height:8px;border-radius:50%;pointer-events:none;filter:blur(3px)}
:where(.startscreen-scene) .water-shadow{background:#124b6f;opacity:.16;transform:scaleY(.65)}
:where(.startscreen-scene) .water-shadow.distant{opacity:.11}
:where(.startscreen-scene) .grass-shadow{background:#283012;opacity:.3;filter:blur(2px)}
:where(.startscreen-scene) .plane{transform-style:preserve-3d}
:where(.startscreen-scene) .appearance-trigger svg{width:23px;height:23px}
:where(.startscreen-scene) .color-dot{width:19px;height:19px;border-radius:50%;background:var(--player-color,#fff6dc);box-shadow:inset 0 1px 2px #ffffffa6,0 0 0 2px #e8d8ae66,0 2px 3px #0004}
:where(.startscreen-scene) .appearance-popover{position:absolute;bottom:calc(100% + 83px);left:50%;transform:translateX(-50%);width:266px;padding:14px;background:linear-gradient(145deg,#3e3328,#292823);border:1px solid #d9bf8882;border-radius:15px;box-shadow:0 9px 30px #12222d55;text-align:left;white-space:normal;color:#f8e7c6;z-index:20;font-size:14px}
:where(.startscreen-scene) .appearance-popover[hidden]{display:none}
:where(.startscreen-scene) .appearance-popover:after{content:"";position:absolute;top:100%;left:calc(50% - 6px);border:7px solid transparent;border-top-color:#65553d}
:where(.startscreen-scene) .appearance-popover header{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
:where(.startscreen-scene) .appearance-popover strong{font-size:14px;font-weight:700;letter-spacing:.2px}
:where(.startscreen-scene) .appearance-close{width:28px;height:28px;border:0;border-radius:7px;background:#fff1ca14;color:#ecd8b4;font-size:20px;line-height:1;padding:0}
:where(.startscreen-scene) .swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;justify-items:center}
:where(.startscreen-scene) .swatch{width:34px;height:34px;border-radius:50%;background:var(--swatch);border:3px solid #fff2cf4a;box-shadow:inset 0 1px 2px #ffffff77,0 2px 3px #0003;position:relative}
:where(.startscreen-scene) .swatch[aria-pressed=true]{outline:2px solid #f6e6bd;outline-offset:3px}
:where(.startscreen-scene) .custom-color{display:flex;align-items:center;justify-content:space-between;margin-top:16px;border-top:1px solid #ddc8a321;padding-top:10px;color:#d0bfa1;font-size:12px;font-weight:500}
:where(.startscreen-scene) .custom-color input{width:40px;height:28px;border:0;padding:0;background:transparent;cursor:pointer}
:where(.startscreen-scene) .accessory-options{display:flex;gap:6px}
:where(.startscreen-scene) .accessory-option{display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px 4px;background:#100d0959;border:1px solid #e3d4b42b;border-radius:10px;color:#deccb0;font-size:11px}
:where(.startscreen-scene) .accessory-option svg{width:29px;height:29px}
:where(.startscreen-scene) .accessory-option span{display:block;max-width:100%;white-space:normal}
:where(.startscreen-scene) .accessory-option:hover,:where(.startscreen-scene) .accessory-option[aria-pressed=true]{background:#9677473b;border-color:#e8c483;color:#fff2ce}
@media(max-aspect-ratio:1/1){:where(.startscreen-scene) .appearance-trigger{width:64px;height:58px}
:where(.startscreen-scene) .appearance-trigger svg{width:36px;height:36px}
:where(.startscreen-scene) .color-dot{width:30px;height:30px}
:where(.startscreen-scene) .appearance-popover{width:520px;padding:24px;bottom:calc(100% + 116px)}
:where(.startscreen-scene) .appearance-popover strong{font-size:25px}
:where(.startscreen-scene) .appearance-close{width:48px;height:48px;font-size:32px}
:where(.startscreen-scene) .swatch{width:65px;height:65px}
:where(.startscreen-scene) .swatches{gap:20px}
:where(.startscreen-scene) .custom-color{font-size:23px}
:where(.startscreen-scene) .custom-color input{width:70px;height:48px}
:where(.startscreen-scene) .accessory-option{font-size:20px;padding:20px 8px}
:where(.startscreen-scene) .accessory-option svg{width:46px;height:46px}}
@media(max-aspect-ratio:1/1){:where(.startscreen-scene) .nameplate.local-player{width:300px;min-width:300px;max-width:300px}
:where(.startscreen-scene) .name-trigger{font-size:32px}
:where(.startscreen-scene) .name-trigger.unnamed{font-size:27px}
:where(.startscreen-scene) .name-trigger svg{width:24px;height:24px}
:where(.startscreen-scene) .local-player-meta{gap:6px}
:where(.startscreen-scene) .local-player-meta small{font-size:19px}
:where(.startscreen-scene) .local-player-badge{font-size:17px;line-height:23px}
:where(.startscreen-scene) .local-player-footer .appearance-trigger{width:64px;height:58px}
:where(.startscreen-scene) .local-player-footer .appearance-trigger svg{width:36px;height:36px}
:where(.startscreen-scene) .local-player-footer .color-dot{width:30px;height:30px}
:where(.startscreen-scene) .name-edit-form{position:absolute;left:50%;top:0;transform:translateX(-50%);width:680px;height:150px;padding:15px;background:#24392ff7;border:2px solid #b3dbc4;border-radius:14px;box-shadow:0 12px 30px #12211f55;z-index:5}
:where(.startscreen-scene) .player-name-input{height:112px;font-size:68px;padding:8px 15px}
:where(.startscreen-scene) .name-confirm{width:112px;height:112px;font-size:65px;margin-left:8px}
:where(.startscreen-scene) .name-error{width:620px;font-size:40px;padding:12px 20px}}

/* Appearance dialogs live outside the scaled scene so they stay beside the bird. */
.appearance-portal{position:fixed;inset:0;z-index:10020;pointer-events:none;font-family:Segoe UI,system-ui,sans-serif}
.appearance-portal .appearance-popover{position:absolute;inset:auto;transform:none;width:264px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);box-sizing:border-box;padding:14px;overflow:auto;pointer-events:auto;font-size:14px}
.appearance-portal .appearance-popover:after{display:none}
.appearance-portal .appearance-popover header{margin-bottom:12px;min-height:30px}
.appearance-portal .appearance-popover strong{font-size:14px;letter-spacing:.2px}
.appearance-portal .appearance-close{width:30px;height:30px;min-height:30px;padding:0;font-size:22px;cursor:pointer}
.appearance-portal .swatches{grid-template-columns:repeat(4,1fr);gap:9px}
.appearance-portal .swatch{width:44px;height:44px;min-height:0;padding:0;cursor:pointer;transition:box-shadow .12s,transform .12s}
.appearance-portal .swatch:hover,.appearance-portal .swatch:focus-visible{box-shadow:inset 0 1px 2px #ffffff77,0 0 0 3px #ffffff30;transform:scale(1.07)}
.appearance-portal .color-preview-hint{display:block;margin-top:12px;color:#dcccae;font-size:10px;line-height:1.4}
.appearance-portal .custom-color{margin-top:11px;padding-top:9px;font-size:12px}
.appearance-portal .custom-color input{width:38px;height:26px}
.appearance-portal .accessory-option{min-height:74px;padding:8px 3px;font-size:11px;cursor:pointer}
.appearance-portal .accessory-option svg{width:28px;height:28px}
@media(max-height:340px){
 .appearance-portal .appearance-popover{width:240px;padding:10px}
 .appearance-portal .appearance-popover header{margin-bottom:8px;min-height:26px}
 .appearance-portal .appearance-close{width:26px;height:26px;min-height:26px}
 .appearance-portal .swatch{width:34px;height:34px}
 .appearance-portal .swatches{gap:7px}
 .appearance-portal .color-preview-hint{display:none}
 .appearance-portal .custom-color{margin-top:8px;padding-top:7px}
 .appearance-portal .custom-color input{height:22px}
}