*{box-sizing:border-box}html,body,#stage{margin:0;width:100%;height:100%;overflow:hidden;background:#24405b}body{font:15px system-ui,"Malgun Gothic",sans-serif;color:#fff7e7}canvas{width:100%;height:100%;display:block;touch-action:none}header,#place,#help,#actions,#toast,#stick{position:fixed;z-index:2}header{inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(16px,3vw,48px) 45px;background:linear-gradient(#101e30b5,transparent);pointer-events:none}.tools,button{pointer-events:auto}.brand{font:bold clamp(18px,2.3vw,34px) Georgia,serif;letter-spacing:.025em;text-shadow:0 2px 8px #1a2236}.brand em{font:italic 15px Georgia;color:#ffde9f;margin-left:8px}.tools{display:flex;gap:6px}button{font:inherit;cursor:pointer;border:1px solid #fff6;background:#233b45e0;color:#fff8e8;border-radius:24px;padding:9px 16px}button:hover,button:focus-visible{background:#486452}#place{left:clamp(16px,3vw,48px);top:81px;pointer-events:none;display:grid;gap:2px;text-shadow:0 2px 5px #14293a,0 0 12px #163542}#place strong{font-size:21px}#presence{font-size:13px}#help{bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;background:#192c36bd;border-radius:20px;padding:6px 12px;font-size:12px;pointer-events:none}#actions{bottom:61px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}#action{background:#ffdaa2;color:#41352b;border-color:#f2c994;font-weight:700}#toast{top:24%;left:50%;transform:translateX(-50%);background:#132836e6;border-radius:14px;padding:8px 13px;text-align:center;pointer-events:none}#toast:empty{display:none}dialog{padding:23px;background:#fff9ef;color:#263f42;border:0;border-radius:18px;max-width:90vw;box-shadow:0 12px 80px #0007}dialog::backdrop{background:#101c2899}dialog h2{margin:0 0 16px;font-size:22px}dialog label{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:12px 0}select,input{font:inherit;padding:5px;border:1px solid #adb6a8;border-radius:8px;background:#fff}#shareUrl{width:100%}#shareHint{font-size:13px;max-width:320px}video{display:block;margin-top:8px;max-width:75vw;max-height:70vh}#stick{display:none;bottom:55px;left:18px;width:85px;height:85px;background:#17253755;border:1px solid #fff8;border-radius:50%;touch-action:none}#stick i{display:block;position:absolute;left:26px;top:26px;width:31px;height:31px;background:#fffa;border-radius:50%}@media(pointer:coarse){#stick{display:block}#help span{display:none}#actions{left:auto;right:16px;transform:none;flex-direction:column}}@media(max-width:650px){header{padding:13px 12px 30px}.brand em{display:none}.tools button{font-size:12px;padding:8px 10px}#place{top:62px}#help{font-size:11px}#help span{display:none}}

#startup{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#233b45;color:#fff4d9;padding:28px;text-align:center}#startup[hidden]{display:none}

.tools button {background:#24474ded;border:1px solid #f2f4e27d;box-shadow:0 2px 5px #153e4424}
.tools button:hover,.tools button:focus-visible {background:#355f64}
#place {background:#1e434bd9;border:1px solid #e8f4ed52;border-radius:12px;padding:9px 13px;text-shadow:none}
#place strong {font-size:17px;letter-spacing:-.02em}
#presence,#visitors {font-variant-numeric:tabular-nums}
#visitors {font-size:11px;color:#dbebe4}
@media(max-width:650px){#place{padding:7px 10px}#place strong{font-size:15px}}

header{align-items:flex-start}.beach-heading{color:#fff7eb;text-shadow:0 1px 6px #222e3b}.beach-heading h1{font:700 clamp(21px,2.35vw,34px)/1.2 system-ui,sans-serif;letter-spacing:-.045em;margin:4px 0}.beach-heading p{margin:0;font-size:13px}.home-link{pointer-events:auto;color:inherit;font-size:13px;text-underline-offset:3px;display:inline-block;padding:5px 0}.home-link:focus-visible{outline:2px solid white}#place{top:136px}
@media(max-width:650px){header{column-gap:5px}.beach-heading p{font-size:11px}.home-link{font-size:12px}.tools{flex-wrap:wrap;justify-content:flex-end;max-width:45%}#place{top:106px}}

.beach-heading{word-break:keep-all}.beach-heading p{line-height:1.35}
@media(max-width:650px){.beach-heading p{max-width:24ch}.tools{max-width:42%}}