*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0b1a3d;font-family:Fredoka,ui-rounded,SF Pro Rounded,Hiragino Maru Gothic ProN,Arial Rounded MT Bold,sans-serif}#app,#app canvas{position:fixed;inset:0;display:block}#hud{position:fixed;inset:0;pointer-events:none;-webkit-user-select:none;user-select:none}#clock-pill{position:absolute;top:18px;left:18px;display:flex;gap:8px;align-items:baseline;background:#fff8e1;border:2px solid rgba(122,91,58,.14);color:#7a5b3a;padding:10px 18px;border-radius:999px;font-weight:600;font-size:18px;box-shadow:0 3px #5a3c1438,0 8px 20px #00000029}#clock-leaf{animation:leaf-sway 3.2s ease-in-out infinite;display:inline-block}@keyframes leaf-sway{0%,to{transform:rotate(-8deg)}50%{transform:rotate(10deg) translateY(-1px)}}#clock-sep{opacity:.45}#clock-day{font-size:14px;opacity:.75}#hint-pill{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#fff8e1eb;color:#7a5b3a;padding:8px 16px;border-radius:999px;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 2px #5a3c1433,0 6px 16px #00000026}@media(max-width:1100px){#hint-pill{display:none}}#emote-bar{position:absolute;right:18px;bottom:18px;display:flex;gap:8px;pointer-events:auto}.emote-btn{width:46px;height:46px;border-radius:50%;border:2px solid rgba(122,91,58,.16);background:#fff8e1;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 3px #5a3c1438;transition:transform .12s}.emote-btn:hover{transform:scale(1.14) rotate(-6deg)}.emote-btn:active{transform:scale(.95);box-shadow:0 1px #5a3c1438}#join-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#263c2259;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto}#join-overlay.open{display:flex}#join-overlay.styling{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}#join-overlay.styling #join-card{display:none}#join-card{width:min(360px,calc(100vw - 40px));background:#fff8e1;border:3px solid rgba(122,91,58,.15);border-radius:28px;padding:26px 28px 24px;text-align:center;color:#7a5b3a;box-shadow:0 6px #5a3c1440,0 24px 60px #0000004d;animation:card-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes card-pop{0%{opacity:0;transform:scale(.85) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}#join-emoji{font-size:44px;animation:leaf-sway 3.2s ease-in-out infinite}#join-card h1{font-size:24px;font-weight:600;margin:6px 0 2px}.join-sub{font-size:13.5px;opacity:.65;font-weight:500;margin-bottom:18px}.join-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;opacity:.6;margin-bottom:7px}#join-name{width:100%;border:2.5px solid rgba(122,91,58,.2);background:#fff;color:#6e5233;border-radius:999px;padding:11px 16px;font-family:inherit;font-size:17px;font-weight:600;text-align:center;outline:none;transition:border-color .15s,box-shadow .15s}#join-name:focus{border-color:#3ec6a8;box-shadow:0 0 0 3px #3ec6a840}#join-status{min-height:22px;font-size:12.5px;font-weight:600;padding:4px 0 8px;opacity:.75}#join-status.ok{color:#219b7f}#join-status.bad{color:#d25445}#join-style,#join-go{width:100%;border:none;border-radius:999px;padding:12px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:transform .1s}#join-style{background:#7a5b3a1f;color:#7a5b3a;margin-bottom:9px}#join-style:hover,#join-go:hover{transform:scale(1.03)}#join-go{background:#3ec6a8;color:#fff;font-size:17px;box-shadow:0 4px #1e6e5a73}#join-go:active{transform:translateY(2px);box-shadow:0 1px #1e6e5a73}#title-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-shadow:0 3px 0 rgba(60,40,10,.35),0 10px 30px rgba(0,0,0,.35);animation:title-out 4.5s ease forwards}#title-card h1{font-size:clamp(38px,7vw,72px);letter-spacing:1px}#title-card p{font-size:clamp(14px,2vw,20px);opacity:.9;font-weight:700}@keyframes title-out{0%{opacity:0;transform:scale(.96)}12%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0;visibility:hidden}}#chat{position:absolute;left:14px;bottom:14px;width:272px;display:flex;flex-direction:column;gap:6px;pointer-events:auto}#chat-header{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff8e1e6;color:#7a5b3a;border-radius:999px;padding:5px 8px 5px 14px;font-size:12px;font-weight:800;box-shadow:0 2px #5a3c142e}#chat-name{width:110px;border:none;background:#7a5b3a1f;color:#7a5b3a;border-radius:999px;padding:4px 10px;font-family:inherit;font-size:12px;font-weight:800;text-align:center;outline:none}#chat-name:focus{background:#fff;box-shadow:0 0 0 2px #3ec6a8}#chat-log{max-height:168px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin}#chat-log:empty{display:none}.chat-msg{background:#fff8e1e0;color:#5f4630;border-radius:12px;padding:5px 10px;font-size:12.5px;font-weight:600;line-height:1.35;overflow-wrap:break-word}.chat-msg b{color:#a3632c;margin-right:2px}.chat-msg.self b{color:#2a9d84}.chat-msg.sys{background:#3a2c1a80;color:#fff3d9;font-style:italic;font-weight:600}#chat-input{border:none;background:#fff8e1eb;color:#5f4630;border-radius:999px;padding:9px 14px;font-family:inherit;font-size:13px;font-weight:700;outline:none;box-shadow:0 2px #5a3c142e}#chat-input::placeholder{color:#7a5b3a8c}#chat-input:focus{background:#fff;box-shadow:0 0 0 2px #3ec6a8}#context-pill{position:absolute;bottom:58px;left:50%;transform:translate(-50%);background:#7a5b3a;color:#fff8e1;padding:7px 16px;border-radius:999px;font-weight:800;font-size:13px;white-space:nowrap;display:none;box-shadow:0 4px 14px #00000040}#bite-alert{position:absolute;display:none;font-size:36px;transform:translate(-50%,-100%);animation:bite-bounce .4s ease-in-out infinite alternate;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}@keyframes bite-bounce{0%{margin-top:0}to{margin-top:-14px}}#toast{position:absolute;bottom:100px;left:50%;transform:translate(-50%) translateY(12px);background:#fff8e1;color:#7a5b3a;padding:12px 22px;border-radius:999px;font-weight:800;font-size:16px;white-space:nowrap;opacity:0;transition:opacity .25s ease,transform .25s ease;box-shadow:0 3px #5a3c1440,0 10px 26px #00000040}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}.panel{position:absolute;background:#fff8e1;color:#7a5b3a;border-radius:18px;padding:14px 16px;box-shadow:0 3px #5a3c1440,0 12px 30px #00000038;pointer-events:auto;display:none}.panel.open{display:block}.panel h3{font-size:15px;margin-bottom:6px}#panel-customize{top:50%;right:16px;transform:translateY(-50%);width:304px;max-height:88vh;overflow-y:auto}#panel-inventory{top:18px;right:18px;width:224px;max-height:70vh;overflow-y:auto}.tab-bar{display:flex;gap:3px;justify-content:center;background:#7a5b3a17;padding:6px;border-radius:999px;margin-bottom:6px}.tab-btn{width:33px;height:33px;border-radius:50%;border:none;background:transparent;font-size:16px;line-height:1;cursor:pointer;transition:background .12s,transform .12s}.tab-btn:hover{transform:scale(1.12)}.tab-btn.sel{background:#7a5b3a;box-shadow:0 2px #5a3c144d}.tab-title{text-align:center;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.6px;opacity:.7;margin:4px 0 8px}.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.thumb{position:relative;aspect-ratio:1;border-radius:14px;border:3px solid rgba(122,91,58,.16);background:#fdf3da;padding:0;cursor:pointer;overflow:hidden;transition:transform .12s,border-color .12s}.thumb img{width:100%;height:100%;display:block}.thumb:hover{transform:scale(1.05)}.thumb.sel{border-color:#3ec6a8}.thumb .check{position:absolute;top:4px;right:4px;width:20px;height:20px;background:#3ec6a8;color:#fff;border-radius:50%;font-size:12px;font-weight:900;display:none;align-items:center;justify-content:center;box-shadow:0 1px 3px #00000040}.thumb.sel .check{display:flex}.color-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}.confirm-btn{width:100%;margin-top:12px;background:#3ec6a8;color:#fff;border:none;border-radius:999px;padding:11px;font-family:inherit;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 3px #1e6e5a73;transition:transform .08s}.confirm-btn:active{transform:translateY(2px)}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid rgba(90,60,20,.15);cursor:pointer;padding:0}.swatch.sel{border-color:#7a5b3a;box-shadow:0 0 0 2px #fff8e1,0 0 0 4px #7a5b3a33;transform:scale(1.08)}.inv-row{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:14px;font-weight:700;border-bottom:1px dashed rgba(122,91,58,.15)}.inv-row:last-child{border-bottom:none}.inv-count{margin-left:auto;opacity:.6}.inv-empty{font-size:13px;font-weight:700;opacity:.7;padding:6px 0}:root{--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px)}html{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body{position:fixed;inset:0;overscroll-behavior:none}#app canvas{touch-action:none}[data-scroll]{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}#clock-pill{top:max(18px,var(--sat));left:max(18px,var(--sal))}#emote-bar{right:max(18px,var(--sar));bottom:max(18px,calc(var(--sab) + 6px))}#chat{left:max(14px,var(--sal));bottom:max(14px,calc(var(--sab) + 4px))}#hud-buttons,#touch-controls{display:none}.touch #hud-buttons{display:flex;gap:10px;position:absolute;top:max(14px,var(--sat));right:max(14px,var(--sar));pointer-events:auto}.hud-btn{position:relative;width:48px;height:48px;border-radius:50%;border:2px solid rgba(122,91,58,.16);background:#fff8e1f0;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 3px #5a3c1438;touch-action:manipulation}.hud-btn.pressed,.hud-btn:active{transform:scale(.92)}#chat-badge{position:absolute;top:-4px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ff6f61;color:#fff;font-size:11px;font-weight:800;line-height:20px;display:none}#chat-badge.show,.touch #touch-controls{display:block}#stick-zone{position:absolute;left:0;bottom:0;width:min(46vw,300px);height:min(44vh,320px);pointer-events:auto;touch-action:none}#stick-base{position:fixed;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;background:#fff8e133;border:2px solid rgba(255,248,225,.55);display:none;pointer-events:none}#stick-base.live{display:block}#stick-nub{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff8e1eb;box-shadow:0 3px 8px #00000047}#btn-cluster{position:absolute;right:max(16px,var(--sar));bottom:max(18px,calc(var(--sab) + 8px));display:flex;align-items:flex-end;gap:14px;pointer-events:auto}.action-btn{border-radius:50%;border:2.5px solid rgba(122,91,58,.18);background:#fff8e1f2;box-shadow:0 4px #5a3c1440,0 8px 20px #0000002e;cursor:pointer;touch-action:manipulation;display:grid;place-items:center;line-height:1}.action-btn.pressed{transform:scale(.9);box-shadow:0 1px #5a3c1440}#btn-jump{width:78px;height:78px;font-size:34px}#btn-fish{width:64px;height:64px;font-size:28px;display:none;margin-bottom:10px}#btn-fish.waiting{opacity:.75}#btn-fish.reel{background:#ffd54d;animation:reel-pulse .5s ease-in-out infinite alternate}@keyframes reel-pulse{0%{transform:scale(1)}to{transform:scale(1.14)}}.touch #hint-pill,.touch #context-pill{display:none!important}.touch #emote-bar{right:max(16px,var(--sar));bottom:calc(max(18px,calc(var(--sab) + 8px)) + 104px)}.touch .emote-btn{width:52px;height:52px;font-size:24px}.touch #toast{bottom:auto;top:calc(max(18px,var(--sat)) + 62px);max-width:calc(100vw - 24px);white-space:normal;text-align:center}.touch #chat{display:none;bottom:auto;top:calc(var(--vvt, 0px) + max(72px,calc(var(--sat) + 58px)));width:min(300px,calc(100vw - 24px))}.touch #chat.open{display:flex}.touch #chat-name{width:130px}.touch #chat-log{max-height:min(220px,30vh)}.touch input{font-size:16px!important}.touch #panel-inventory{top:calc(max(14px,var(--sat)) + 58px);right:max(14px,var(--sar))}.touch #join-overlay{inset:auto 0;top:var(--vvt, 0px);height:var(--vvh, 100%);overflow-y:auto;align-items:flex-start;padding:max(12px,var(--sat)) 0 16px}.touch #join-card{margin:auto}@media(max-width:700px){#clock-pill{padding:7px 14px;font-size:15px;gap:6px}}@media(max-width:700px)and (orientation:portrait){.touch #panel-customize{inset:auto 0 0;width:100%;transform:none;max-height:52vh;border-radius:24px 24px 0 0;padding-bottom:calc(14px + var(--sab))}}@media(max-height:500px){.touch #panel-customize{width:276px;max-height:96vh;padding:10px 12px}}