:root{--sea: #3a7ca5;--sand: #e8d3a2;--leaf: #5c9e4b;--wood: #8b5a3c;--chalk: #f5f1e6;--ink: #2b2a33;--font: "Pixelify Sans", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--ink);font-family:var(--font)}#game canvas{display:block;image-rendering:pixelated}.dialog{position:fixed;left:50%;bottom:10vh;transform:translate(-50%);width:min(420px,calc(100vw - 32px));background:var(--chalk);border:4px solid var(--ink);border-radius:6px;box-shadow:inset 0 0 0 3px var(--chalk),inset 0 0 0 5px var(--sea);padding:18px 20px;font-size:20px;line-height:1.35}.dialog[hidden]{display:none}.dialog-text{margin:0 0 12px}.dialog-text b{overflow-wrap:anywhere}.field{display:block;margin:0 0 10px}.field span{display:block;font-size:16px;margin-bottom:2px}.actions{display:flex;justify-content:flex-end}.links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:12px}.dialog button.link{background:none;border:none;padding:0;color:var(--sea);font-weight:400;font-size:16px;text-decoration:underline;text-underline-offset:3px}.dialog button.link:disabled{color:#8a8a90;text-decoration:none;cursor:default}.dialog input.code{font-size:28px;letter-spacing:.4em;text-align:center}.dialog.creator{inset:16px 16px 16px auto;transform:none;width:min(360px,calc(100vw - 32px));overflow-y:auto;font-size:17px}@media(orientation:portrait){.dialog.creator{left:16px;right:16px;top:34vh;width:auto}}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.row-label{flex:0 0 auto}.stepper{display:flex;align-items:center;gap:6px}.stepper output{min-width:7.5em;text-align:center}.dialog .stepper button{padding:2px 10px}.swatches{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.dialog .swatches button{width:26px;height:26px;padding:0;border:3px solid var(--chalk);box-shadow:0 0 0 2px var(--ink)}.dialog .swatches button[aria-checked=true]{border-color:#eec448}.dialog input,.chat input{width:100%;font:inherit;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:3px;padding:6px 8px}.dialog-error{min-height:1.3em;margin:4px 0;color:#b04a3e;font-size:16px}.dialog button{font:inherit;font-weight:600;background:var(--sea);color:var(--chalk);border:3px solid var(--ink);border-radius:3px;padding:4px 16px;cursor:pointer}:focus-visible{outline:3px solid #eec448;outline-offset:2px}.chat{position:fixed;right:16px;bottom:16px;width:min(320px,calc(100vw - 32px));background:#f5f1e6eb;border:3px solid var(--ink);border-radius:4px;padding:8px;font-size:16px}.chat-log{list-style:none;margin:0 0 6px;padding:0;max-height:9.5em;overflow-y:auto}.chat-log li{overflow-wrap:anywhere}.chat-log b{color:var(--sea);font-weight:600}.touch{position:fixed;inset:auto 0 16px;pointer-events:none}.dpad{position:absolute;left:16px;bottom:0;width:132px;height:132px;pointer-events:auto;display:grid;grid-template:repeat(3,44px) / repeat(3,44px)}.dpad button,.chat-toggle,.action-btn{font:inherit;font-size:18px;color:var(--chalk);background:#2b2a33bf;border:2px solid var(--chalk);border-radius:6px;touch-action:none;-webkit-user-select:none;user-select:none}.dpad [data-dir=up]{grid-area:1 / 2}.dpad [data-dir=left]{grid-area:2 / 1}.dpad [data-dir=right]{grid-area:2 / 3}.dpad [data-dir=down]{grid-area:3 / 2}.chat-toggle{position:absolute;right:16px;bottom:0;padding:10px 16px;pointer-events:auto}body.is-touch .chat{bottom:164px}body.is-touch .chat.collapsed{display:none}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.action-btn{position:absolute;right:16px;bottom:56px;width:56px;height:56px;border-radius:50%;font-size:22px;font-weight:600;pointer-events:auto}.hint{position:fixed;left:50%;top:16px;transform:translate(-50%);margin:0;background:var(--chalk);border:3px solid var(--ink);border-radius:4px;padding:4px 12px;font-size:16px}.hint[hidden]{display:none}.dialog.warkop{max-height:calc(100vh - 32px);overflow-y:auto}.rooms{list-style:none;margin:0 0 12px;padding:0;max-height:12.5em;overflow-y:auto}.rooms li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:2px dashed #d8cfb8}.rooms li:last-child{border-bottom:none}.rooms .muted{color:#6b6a72;font-size:16px}.room-info{display:flex;flex-direction:column;min-width:0}.room-info b{overflow-wrap:anywhere}.room-info small{font-size:15px;color:#6b6a72}.actions{gap:8px}.dialog button.secondary{background:var(--chalk);color:var(--ink)}.dialog button:disabled{opacity:.6;cursor:default}body:has(#panel:not([hidden])) .touch{display:none}.voice{position:fixed;left:16px;top:16px;width:min(240px,calc(100vw - 32px));background:#f5f1e6f0;border:3px solid var(--ink);border-radius:4px;padding:8px;font-size:16px}.voice[hidden]{display:none}.voice-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.voice button{font:inherit;font-weight:600;background:var(--chalk);color:var(--ink);border:3px solid var(--ink);border-radius:3px;padding:2px 10px;cursor:pointer}.voice button.on{background:var(--leaf);color:var(--chalk)}.voice button.link{border:none;padding:0;background:none;color:var(--sea);font-weight:400;text-decoration:underline}.voice-status{margin:4px 0 0;color:#b04a3e}.voice-status:empty{display:none}.voice-members{list-style:none;margin:6px 0 0;padding:0;max-height:8em;overflow-y:auto}.voice-members li{display:flex;justify-content:space-between;gap:8px}.voice-members span{overflow-wrap:anywhere}body.is-touch .voice{top:56px}.hint.urgent{background:#eec448;font-weight:600}.toast{position:fixed;left:50%;top:56px;transform:translate(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);background:var(--chalk);border:3px solid var(--ink);border-radius:4px;box-shadow:inset 0 0 0 2px var(--chalk),inset 0 0 0 4px var(--sea);padding:8px 14px;font-size:18px}.toast[hidden]{display:none}.toast-text{display:flex;flex-direction:column}.toast-text small{font-size:15px;color:var(--leaf);font-weight:600}.fish-icon{display:inline-block;flex:0 0 auto;background-image:url(/sprites/fish.png);background-repeat:no-repeat;image-rendering:pixelated}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hud{position:fixed;right:16px;top:16px;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;max-width:calc(100vw - 32px)}.hud[hidden]{display:none}.hud .coins,.hud button{font:inherit;font-size:16px;font-weight:600;color:var(--ink);background:var(--chalk);border:3px solid var(--ink);border-radius:4px;padding:3px 10px}.hud .coins{display:inline-flex;align-items:center;gap:6px;min-width:4.5em}.hud button{cursor:pointer}.coin{width:12px;height:12px;border-radius:50%;background:#eec448;box-shadow:inset -2px -2px #c99a2e,0 0 0 2px var(--ink)}body.is-touch .hint,body.is-touch .toast{top:60px}body.is-touch .toast{top:104px}.dialog.bag,.dialog.stall,.dialog.book{max-height:calc(100vh - 32px);overflow-y:auto;bottom:auto;top:50%;transform:translate(-50%,-50%)}.catch-list{list-style:none;margin:0 0 10px;padding:0;max-height:11em;overflow-y:auto;font-size:17px}.catch-list li{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:2px dashed #d8cfb8}.catch-list li:last-child{border-bottom:none}.catch-list li span:not(.fish-icon){flex:1;min-width:0}.catch-list small,.catch-list .muted{color:#6b6a72}.dialog button.small{font-size:15px;padding:1px 8px}.baits{border:2px solid var(--ink);border-radius:3px;margin:0 0 10px;padding:4px 10px 8px;font-size:17px}.baits legend{padding:0 4px}.bait{display:flex;align-items:center;gap:8px}.dialog .bait input{width:auto}.fod{display:flex;align-items:center;gap:6px;font-size:16px;margin:0 0 8px}.wallet{font-size:16px;margin:0}.actions.wrap{flex-wrap:wrap}.dialog.stall .actions button{font-size:16px}.book-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}.dialog .book-slot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;font-size:13px;font-weight:400;background:#fff;color:var(--ink);border:2px solid var(--ink);min-height:76px}.dialog .book-slot.empty{background:#ece6d6;color:#8a8a90;cursor:default}.book-slot small{align-self:flex-start;font-size:11px;color:#8a8a90}.book-slot span:last-child{text-align:center;line-height:1.1}.fish-icon.unknown{filter:brightness(0);opacity:.35}.book-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}.book-head div{display:flex;flex-direction:column}.book-head small{font-size:15px;color:var(--sea)}.book-desc{margin:0 0 8px;font-size:17px}.book-page dl{margin:0 0 10px;font-size:16px}.book-row{display:flex;gap:8px}.book-row dt{min-width:6.5em;color:#6b6a72}.book-row dd{margin:0}.dialog.shop{max-height:calc(100vh - 32px);overflow-y:auto;bottom:auto;top:50%;transform:translate(-50%,-50%)}.shop-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.shop-head h2{margin:0;font-size:22px;overflow-wrap:anywhere}.shop-real{font-size:14px;color:#6b6a72}.shop-greeting{font-style:italic;overflow-wrap:anywhere}.shop-gallery{display:flex;align-items:center;justify-content:center;gap:8px}.shop-photo{width:192px;height:192px;image-rendering:pixelated;border:3px solid var(--ink);background:var(--chalk)}.dialog .shop-nav{padding:4px 10px}.shop-count{display:block;text-align:center;font-size:14px;color:#6b6a72;min-height:1em;margin:4px 0}.shop-desc{margin:0 0 12px;font-size:17px;overflow-wrap:anywhere}@media(max-width:420px){.shop-photo{width:144px;height:144px}}.dialog.player-menu,.dialog.emote-picker{max-height:calc(100vh - 32px);overflow-y:auto}.dialog.player-menu .muted{color:#6b6a72;font-size:16px;margin:0 0 8px}.menu-list{display:grid;gap:8px}.dialog .menu-list button{width:100%;text-align:left}.dialog textarea{width:100%;box-sizing:border-box;font:inherit;font-size:17px;padding:6px 8px;margin:0 0 6px;border:3px solid var(--ink);border-radius:3px;background:#fff;color:var(--ink);resize:vertical}.people-list{list-style:none;margin:0 0 10px;padding:0;max-height:12em;overflow-y:auto;font-size:17px}.people-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:2px dashed #d8cfb8}.people-list li:last-child{border-bottom:none}.people-list .muted{color:#6b6a72}.emote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.dialog button.emote{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:var(--chalk);color:var(--ink);font-size:15px}.emote-icon{display:inline-block;flex:0 0 auto;background-image:url(/sprites/emotes.png);image-rendering:pixelated;background-repeat:no-repeat}.sound-row{display:grid;grid-template-columns:5.5em 1fr 3.2em;align-items:center;gap:8px;margin-bottom:10px;font-size:17px}.dialog .sound-row input[type=range]{width:100%;padding:0;border:none;background:transparent;accent-color:var(--sea);min-height:32px}.sound-row output{text-align:right}