.cluster-pier{height:100dvh;overflow:hidden;display:grid;place-items:center;background:#176378;color:#fff1ce}
.pier-camera{position:relative;width:min(100vw,177.68dvh);aspect-ratio:1672/941;container-type:inline-size;isolation:isolate}
.pier-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pier-back{position:absolute;left:2.4%;top:1.4%;width:20%;height:11%;border:0;background:transparent;cursor:pointer}.pier-back span{display:none}
.pier-heading{position:absolute;left:29%;top:13.4%;width:39.5%;height:8.2%;display:flex;align-items:center;justify-content:center;gap:1cqw;border-radius:.6cqw;background:linear-gradient(100deg,#fff1 0%,transparent 45%,#0003 100%),var(--game-color);box-shadow:inset 0 1px 1px #ffe6a080,inset 0 -2px 2px #211308aa,0 0 0 1px #9c733d;transform:rotate(-.1deg);text-align:center;padding:.25cqw 1cqw}
.pier-heading h1{margin:0;color:#fff1ce;font-size:clamp(20px,2.7cqw,52px);font-weight:900;line-height:1;text-shadow:0 -1px 1px #241709,0 1px #cfa969;letter-spacing:-.04em}
.pier-heading p{margin:.35cqw 0 0;font-size:clamp(13px,1.35cqw,25px);font-weight:700;color:#fff1ce}
.pier-game-speak,.pier-cluster-speak{display:grid;place-items:center;padding:7px;background:radial-gradient(circle at 30% 20%,#4dbeee,#0877ab 65%,#014770);border:2px solid #e6c78b;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px #0008,inset 0 1px 1px #b6eaff;flex-shrink:0}
.pier-game-speak{width:3.6cqw;height:3.6cqw;min-width:36px;min-height:36px}
.pier-game-speak svg,.pier-cluster-speak svg{width:100%;height:100%}
.pier-game-picture{position:absolute;margin:0;left:71.8%;top:1%;width:18.8%;height:20.6%;overflow:hidden;border:4px solid #c6944c;border-radius:48% 48% 10% 10%;box-shadow:inset 0 0 5px #1e140c,0 4px 8px #23170b88;background:var(--game-color);animation:pier-game-arrive .7s ease-out both}
.pier-game-picture svg,.pier-game-picture img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes pier-game-arrive{from{opacity:0;transform:translateY(-8px) scale(.92)}to{opacity:1;transform:none}}
.pier-clusters{position:absolute;inset:0;pointer-events:none}
.pier-cluster{position:absolute;left:var(--cx);top:var(--cy);width:var(--cw);height:var(--ch);pointer-events:none}
.pier-choose{position:absolute;inset:0;width:100%;border:0;padding:0;background:transparent;border-radius:1.2cqw;cursor:pointer;pointer-events:auto}
.pier-choose:hover,.pier-choose:focus-visible{outline:3px solid #ffe49c;outline-offset:2px;box-shadow:0 0 16px #ffecae99;background:#ffeaa10c}
.pier-cluster-speak{position:absolute;left:var(--sx);top:var(--sy);transform:translate(-50%,-50%);width:2.55cqw;height:2.55cqw;min-width:30px;min-height:30px;padding:5px;pointer-events:auto}
.pier-cluster-speak::after{content:'';position:absolute;inset:-5px}
.pier-card-picture{display:none}
.cluster-pier button:focus-visible{outline:3px solid #fff39b;outline-offset:3px}
@media(max-aspect-ratio:1/1){
 .cluster-pier{display:block;overflow:auto;background:linear-gradient(#267c93,#164657)}
 .pier-camera{width:100%;aspect-ratio:auto;min-height:100dvh;padding:225px 12px 24px}
 .pier-background{height:215px;object-fit:cover;object-position:top}
 .pier-back{left:8px;top:8px;width:auto;height:40px;padding:8px 12px;background:#674321;border:2px solid #d5ad6a;border-radius:8px;color:#fff1ce}.pier-back span{display:block}
 .pier-heading{top:112px;left:12px;width:calc(100% - 24px);height:90px;padding:8px 15px;justify-content:space-between;gap:12px}.pier-heading h1{font-size:clamp(23px,4vw,34px);letter-spacing:-.03em}.pier-heading p{font-size:18px;margin-top:8px}
 .pier-game-picture{left:auto;right:12px;top:5px;width:145px;height:100px;border-radius:35px 35px 10px 10px}
 .pier-game-speak{width:44px;height:44px}
 .pier-clusters{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;inset:auto}
 .pier-cluster{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.12}
 .pier-card-picture{display:block;width:100%;height:100%}.pier-choose{overflow:hidden;background:#6e4926;border:2px solid #c9a16a;border-radius:12px}
 .pier-cluster-speak{left:auto;right:5px;top:auto;bottom:4px;transform:none;width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.pier-game-picture{animation:none}}

.pier-heading{background-image:repeating-linear-gradient(1deg,transparent 0px,transparent 5px,#1d170921 6px,transparent 7px,transparent 11px,#fff3ca15 12px),linear-gradient(100deg,#fff1,transparent 45%,#0003);border:1px solid #d9b87680;border-top-color:#f8d39e;box-shadow:inset 0 2px 3px #fff2, inset 0 -3px 3px #160e0b88,0 2px 2px #211308aa}

@media(max-aspect-ratio:1/1){.pier-cluster{aspect-ratio:var(--cr)}.pier-cluster-speak{left:var(--sx);top:var(--sy);right:auto;bottom:auto;transform:translate(-50%,-50%);width:40px;height:40px}}