.registration-canvas { --design-height:1206; position:relative; z-index:1; width:min(100%,750px,calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*750/var(--design-height))); aspect-ratio:750/var(--design-height); container-type:inline-size; margin-block:auto; }
.registration-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hotspot,.text-entry { position:absolute; display:block; border:0; padding:0; background:transparent; border-radius:1.5cqw; -webkit-tap-highlight-color:transparent; }
.hotspot { cursor:pointer; }
.hotspot:focus-visible,.text-entry:focus { outline:none; box-shadow:inset 0 0 0 2px #406958,inset 0 0 0 100vmax #40695818; }
.hotspot:active { background:#40695818; }
.text-entry { resize:none; padding:1.5cqw; color:#315849; font:3.2cqw/1.4 "Songti SC",serif; }
.upload { overflow:hidden; }
.upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; }
.upload:focus-within { box-shadow:inset 0 0 0 2px #406958; }
#photo-preview { width:100%;height:100%;object-fit:contain;background:#e6e7df; }
#photo-preview[hidden] { display:none; }
.team-options { border:0;padding:0;margin:0; }
.team-choice input { appearance:none;-webkit-appearance:none;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:max(44px,100%);margin:0;border:0;padding:0;background:transparent;border-radius:0;cursor:pointer; }
.team-choice input:checked { box-shadow:none;background:transparent; }
.team-choice:active { background:transparent; }
.team-choice input:focus-visible { outline:none; }
.team-choice input:focus-visible + .team-mark { outline:2px solid #a98748;outline-offset:3px;border-radius:50%; }
.team-choice input:disabled { cursor:default; }
.form-message { position:absolute;top:95.8%;left:5%;width:90%;margin:0;text-align:center;font:max(11px,2.4cqw)/1.4 sans-serif;color:#183e31;background:#ffffffd9;border-radius:4px; }
.form-message:empty { display:none; }
button:disabled { cursor:wait; }

/* PSD radio sprites keep the original gold dot in sync with the real input. */
.team-mark { position:absolute; left:0; top:20.454545%; width:11.068702%; height:65.909091%; background:url("https://1500065981.vod-qcloud.com/968a96ddvodbj1500065981/5325bc1b5001834825254157415/7eQ170iia3YA.webp") center/100% 100% no-repeat; pointer-events:none; }
.team-choice input:checked + .team-mark { background-image:url("https://1500065981.vod-qcloud.com/968a96ddvodbj1500065981/bea81fc15001834827744544361/ymM2HlmxnGwA.webp"); }

/* Detail forms retain their design proportions and scroll on shorter screens. */
:is(body[data-page="non-bamboo"],body[data-page="bamboo-1-5"],body[data-page="bamboo-6-8"]) .registration-canvas { width:min(100%,750px); }
:is(body[data-page="non-bamboo"],body[data-page="bamboo-1-5"],body[data-page="bamboo-6-8"]) .page-controls { left:50%;top:calc(95.78% + 56px); }
:is(body[data-page="non-bamboo"],body[data-page="bamboo-1-5"],body[data-page="bamboo-6-8"]) .scene-root { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }