:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f4f1ea;--fg:#2e2a24;--dim:#8b8578;--line:#ddd7ca;--bubble:#fffdf7;--toss-bg:#f4f1eaf2;--toss-h:92px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#1c1a17;--fg:#e8e3d8;--dim:#7d766a;--line:#322e28;--bubble:#262320;--toss-bg:#1c1a17f2}}*{box-sizing:border-box}body{padding-bottom:var(--toss-h);background:var(--bg);color:var(--fg);margin:0;font:15px/1.7 system-ui,-apple-system,Hiragino Sans,sans-serif}.village{gap:12px;max-width:640px;margin:0 auto;padding:16px;display:grid}.stage{aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px;position:relative;overflow:hidden}@media (width<=520px){.stage{aspect-ratio:3/4}}.stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.who{color:#fff;text-shadow:0 1px 2px #0009;white-space:nowrap;pointer-events:none;font-size:12px;position:absolute;transform:translate(-50%,-100%)}.who:not([data-placed]){visibility:hidden}.bubble{width:max-content;max-width:180px;max-height:var(--room,160px);border:1px solid var(--line);background:var(--bubble);color:var(--fg);text-align:left;white-space:normal;transform:translateX(var(--dx,-50%));animation:bubble var(--life) ease-out forwards;border-radius:12px;margin-bottom:10px;padding:7px 11px;font-size:13px;line-height:1.5;position:absolute;bottom:100%;left:50%;overflow:hidden}@keyframes bubble{0%{opacity:0;transform:translate(var(--dx,-50%), 6px)}6%{opacity:1;transform:translate(var(--dx,-50%), 0)}86%{opacity:1;transform:translate(var(--dx,-50%), 0)}to{opacity:0;transform:translate(var(--dx,-50%), -6px)}}.stage .asleep{text-align:center;color:var(--dim);font-size:12px;position:absolute;inset:auto 0 4%}.log-panel summary{color:var(--dim);cursor:pointer;padding:4px 0;font-size:13px}.log-panel summary:hover{color:var(--fg)}.log{max-height:50vh;margin:4px 0 0;padding:0;list-style:none;overflow-y:auto}.log li{padding:3px 0}.log .name{color:var(--dim);margin-right:8px;font-size:13px}.log .note{color:var(--dim);font-size:13px;font-style:italic}.toss{background:var(--toss-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);gap:6px;max-width:640px;margin:0 auto;padding:8px 16px 12px;display:grid;position:fixed;inset:auto 0 0}.toss-row{gap:8px;display:flex}.toss-hint{color:var(--dim);margin:0;font-size:12px;transition:color .2s}.toss-hint.warn{color:var(--fg)}.tossed{z-index:10;color:var(--fg);white-space:nowrap;pointer-events:none;font-size:15px;animation:2.4s ease-out forwards tossed;position:fixed}@keyframes tossed{0%{opacity:.9;filter:blur();transform:translateY(-50%)}to{opacity:0;transform:translate(var(--drift), calc(-50% - 140px)) scale(1.15);filter:blur(3px)}}.toss input{border:1px solid var(--line);min-width:0;color:inherit;font:inherit;background:0 0;border-radius:8px;flex:1;padding:10px 12px}.toss button{border:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:8px;padding:10px 16px}.toss button:hover{border-color:var(--dim)}.toss.ok input{animation:.7s ease-out ripple}.toss.no input{animation:.3s ease-out shake}@keyframes ripple{0%{border-color:var(--dim)}}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}
