:root{--bg:#f5ecd8;--ink:#3b2a1a;--muted:#8a7560;--card:#fffaf0;--line:#e2d3b5;--accent:#c0643f;--error:#b3261e;--top-bar-h:calc(2.75rem + env(safe-area-inset-top));color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;font-family:system-ui,Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}h1,h2,h3{margin:0 0 .5rem}button{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;border-radius:8px;padding:.5rem 1rem}button:disabled{opacity:.5;cursor:default}input{font:inherit;border:1px solid var(--line);border-radius:8px;width:100%;padding:.5rem .75rem}.muted{color:var(--muted)}.error{color:var(--error)}.link-button{color:var(--muted);background:0 0;border:none;padding:.25rem .5rem;text-decoration:underline}.center-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100%;padding:1.5rem 16px;display:flex}.card{background:var(--card);border:1px solid var(--line);text-align:left;border-radius:12px;flex-direction:column;gap:.75rem;width:min(420px,100%);padding:1.25rem;display:flex}.card ul{margin:0;padding-left:1.25rem}.dev-box{border-top:1px dashed var(--line);width:min(480px,100%);margin-top:1.5rem;padding-top:1rem}.dev-box h2{color:var(--muted);font-size:.9rem}.dev-buttons{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.town-page{position:fixed;inset:0;overflow:hidden}.game-canvas{touch-action:none;position:absolute;inset:0}.top-bar{z-index:15;height:var(--top-bar-h);padding:env(safe-area-inset-top) 16px 0;color:#fff;pointer-events:none;background:linear-gradient(#3b2a1a8c,#0000);align-items:center;gap:.75rem;display:flex;position:absolute;top:0;left:0;right:0}.top-bar>*{pointer-events:auto;white-space:nowrap}.top-bar>strong{text-overflow:ellipsis;min-width:0;overflow:hidden}@media (width<=480px){.top-bar{gap:.25rem}.top-bar .link-button{padding:.25rem .35rem}.top-bar .top-bar-credits{display:none}}.top-bar-user{margin-left:auto}.top-bar .top-bar-user{font-weight:600;text-decoration:none}.top-bar .top-bar-user:after{content:" ✎";opacity:.8;font-weight:400}.top-bar .link-button{color:#fff}.panel{z-index:10;top:var(--top-bar-h);background:var(--card);border-left:1px solid var(--line);flex-direction:column;width:min(360px,100%);animation:.2s ease-out slide-in-right;display:flex;position:absolute;bottom:0;right:0;box-shadow:-4px 0 16px #00000026}.panel-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:1rem 16px .5rem;display:flex}.panel-header h2{margin:0;font-size:1.15rem}.icon-button{padding:.25rem .6rem;font-size:1.4rem;line-height:1}.panel-body{flex-direction:column;gap:1rem;padding:1rem 16px;display:flex;overflow-y:auto}.panel-body h3{color:var(--muted);font-size:.85rem}.panel-body p{margin:0}.sign-text{font-size:1.1rem}.light-dot{vertical-align:middle;border-radius:50%;width:.7rem;height:.7rem;margin-right:.4rem;display:inline-block}.light-lit{background:#ffd84a;box-shadow:0 0 6px #ffd84a}.light-glow{background:#d9a35a}.light-dark{background:#3d4a5c}.light-grass{background:#5f9e3a}@keyframes slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (width<=600px){.panel{border-left:none;border-top:1px solid var(--line);width:100%;max-height:60%;padding-bottom:env(safe-area-inset-bottom);border-radius:16px 16px 0 0;animation-name:slide-in-up;top:auto;box-shadow:0 -4px 16px #00000026}}.small{font-size:.85rem}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}textarea{font:inherit;border:1px solid var(--line);resize:vertical;border-radius:8px;width:100%;padding:.5rem .75rem}.modal-backdrop{z-index:20;background:#3b2a1a73;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.modal{background:var(--card);border:1px solid var(--line);border-radius:16px;width:min(460px,100%);max-height:100%;padding:1.25rem;overflow-y:auto;box-shadow:0 8px 32px #0003}.step{flex-direction:column;gap:.75rem;display:flex}.step p{margin:0}.step-count{margin:0 0 .25rem}.step-actions{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:.5rem;display:flex}.avatar-editor{align-items:flex-start;gap:1rem;display:flex}.avatar-preview{image-rendering:pixelated;box-sizing:content-box;background:#cfe8b5;border-radius:12px;flex-shrink:0;padding:8px}.avatar-options{flex-direction:column;gap:.5rem;min-width:0;display:flex}.option-row{border:none;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;display:flex}.option-row legend{color:var(--muted);margin-bottom:.25rem;font-size:.85rem}.swatch{border:2px solid #00000026;border-radius:50%;width:30px;height:30px;padding:0}.swatch.selected{outline:3px solid var(--accent);outline-offset:2px}.chip{border-radius:999px;padding:.3rem .7rem}.chip.selected{background:var(--accent);border-color:var(--accent);color:#fff}.pick-banner{z-index:20;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));background:var(--card);border:1px solid var(--line);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:.5rem;width:min(420px,100% - 32px);padding:.75rem 1rem;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 4px 16px #0003}.pick-banner p{margin:0}@media (width<=480px){.avatar-editor{flex-direction:column;align-items:center}}.sign-row{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.comment-list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.comment{border-bottom:1px dashed var(--line);padding-bottom:.5rem}.comment-reply{border-bottom:none;border-left:3px solid var(--line);margin-left:1rem;padding:.25rem 0 0 .75rem}.comment .comment-list{margin-top:.5rem}.comment-hidden>.comment-content{color:var(--muted);font-style:italic}.comment-meta{flex-wrap:wrap;align-items:baseline;gap:.5rem;display:flex}.panel-body .comment-content{white-space:pre-wrap;overflow-wrap:anywhere;margin:.25rem 0}.comment-actions{gap:.25rem;margin-left:-.5rem;display:flex}.comment-actions:empty{display:none}.tag{background:var(--line);color:var(--ink);border-radius:4px;padding:0 .4rem}.comment-form{flex-direction:column;gap:.4rem;margin-top:.5rem;display:flex}.comment-form-actions{justify-content:flex-end;align-items:center;gap:.5rem;display:flex}.comment-form-actions>span{margin-right:auto}.board{background:#fdf3df;border:2px solid #b08a5a;border-radius:8px;margin-bottom:.75rem;padding:.75rem 1rem;box-shadow:0 2px #d8c09a}.board-question{overflow-wrap:anywhere;margin:0 0 .35rem;font-size:1.1rem;font-weight:700}.board>p:last-child{margin:0}.bench-tabs{flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;display:flex}.bench-tabs>button{white-space:nowrap;flex:1 1 0;min-width:0;padding-left:.3rem;padding-right:.3rem}.bench-tabs>button.active{border-color:var(--accent);background:#fbe6d9;font-weight:700}.bench-latest{border:1px solid var(--line);background:var(--card);border-left:4px solid #8a6a3f;border-radius:8px;padding:.6rem .8rem}.photo-thumb{border:1px solid var(--line);background:var(--bg);cursor:zoom-in;border-radius:8px;max-width:100%;margin:.35rem 0;padding:0;display:block;overflow:hidden}.photo-thumb:disabled{cursor:default}.photo-thumb>img{width:100%;height:100%;display:block}.photo-thumb>span{place-items:center;height:100%;min-height:4rem;display:grid}.photo-picked{align-items:flex-end;gap:.5rem;margin-top:.5rem;display:flex}.photo-picked>img{border:1px solid var(--line);border-radius:6px;max-width:120px;max-height:90px}.photo-viewer{z-index:100;cursor:zoom-out;background:#140e08d9;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.photo-viewer>img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:6px;max-width:100%;max-height:100%}.photo-viewer-close{width:2.5rem;height:2.5rem;color:var(--ink);background:#fffaf0e6;border:none;border-radius:999px;font-size:1.1rem;position:absolute;top:.75rem;right:.75rem}.badge{background:var(--accent);color:#fff;text-align:center;border-radius:999px;min-width:1.25rem;margin-left:.25rem;padding:0 .35rem;font-size:.75rem;line-height:1.25rem;text-decoration:none;display:inline-block}.top-bar .top-bar-mail{text-decoration:none}.mail-back{margin:0 0 .5rem -.5rem}.mail-threads{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.mail-thread{border:1px solid var(--line);background:var(--card);width:100%;color:var(--ink);text-align:left;cursor:pointer;border-radius:8px;flex-direction:column;gap:.2rem;padding:.5rem .75rem;display:flex}.mail-thread-head{align-items:center;gap:.25rem;display:flex}.mail-thread-head .muted{margin-left:auto}.mail-thread-preview{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mail-messages{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.mail-message{flex-direction:column;align-items:flex-start;display:flex}.mail-message.mine{align-items:flex-end}.panel-body .mail-bubble{background:var(--line);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:12px 12px 12px 4px;max-width:85%;margin:0 0 .15rem;padding:.4rem .7rem}.panel-body .mail-message.mine .mail-bubble{background:#f3d9c9;border-radius:12px 12px 4px}.panel-body .mail-message.deleted .mail-bubble{border:1px dashed var(--line);color:var(--muted);background:0 0;font-style:italic}.teahouse-head{margin-bottom:.6rem}.panel-body .teahouse-presence{flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:0;display:flex}.teahouse-presence .link-button{margin-left:auto}.teahouse-messages{margin-bottom:.75rem}.teahouse-author{margin-bottom:.1rem;font-weight:700}@media (width<=600px){.panel.teahouse{height:45%;max-height:45%}.panel.teahouse .panel-header{padding-top:.6rem}.panel.teahouse .panel-body{gap:.6rem;padding-top:.6rem}}.panel.teahouse .panel-body{overflow:hidden}.panel.teahouse .teahouse-log{flex:auto;min-height:0;overflow-y:auto}.panel.teahouse .teahouse-messages{margin-bottom:0}.top-bar .bell-button,.top-bar .top-bar-admin{text-decoration:none}.bell{position:relative}.bell-menu{z-index:20;background:var(--card);width:min(320px,100vw - 32px);max-height:min(60vh,420px);color:var(--ink);border:1px solid var(--line);border-radius:12px;position:absolute;top:calc(100% + .4rem);right:0;overflow-y:auto;box-shadow:0 6px 20px #0003}.bell-menu-header{background:var(--card);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:.6rem .75rem;display:flex;position:sticky;top:0}.top-bar .bell-menu .link-button{color:var(--muted)}.bell-menu .error,.bell-empty{margin:0;padding:.75rem}.bell-list{margin:0;padding:0;list-style:none}.bell-item{border:none;border-bottom:1px solid var(--line);width:100%;color:var(--ink);text-align:left;background:0 0;border-radius:0;flex-direction:column;gap:.15rem;padding:.6rem .75rem;display:flex}.bell-item.unread{background:#fbead9;font-weight:600}.bell-item.unread time{font-weight:400}.bell-digest{background:var(--card);border-top:1px solid var(--line);cursor:pointer;align-items:flex-start;gap:.5rem;padding:.6rem .75rem;display:flex;position:sticky;bottom:0}.bell-digest input{flex:none;width:auto;margin:.2rem 0 0;padding:0}.bell-digest>span{text-align:left;flex-direction:column;flex:1;gap:.1rem;display:flex}@media (width<=600px){.bell{position:static}.bell-menu{top:var(--top-bar-h);width:auto;left:16px;right:16px}}.admin-list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.admin-item{border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem .75rem;display:flex}.admin-actions{gap:.5rem;display:flex}.report-done{padding:.25rem .5rem}.tag-moderated{color:var(--error);background:#f3d9d2}.report-item{align-items:flex-start}.report-body{flex-direction:column;flex:200px;gap:.35rem;min-width:0;display:flex}.report-body .tag{margin-left:.4rem}.report-reasons{color:var(--muted);margin:0;padding-left:1.2rem}.credits-link{font-size:.85rem}.top-bar .top-bar-credits{opacity:.85;font-size:.85rem}.credits-page{max-width:720px;margin:0 auto;padding:1.5rem 16px 3rem}.credits-list{gap:.75rem;padding:0;list-style:none;display:grid}.credits-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.75rem 1rem}.credits-list h2{margin:0 0 .25rem;font-size:1rem}.credits-list p{overflow-wrap:anywhere;margin:.2rem 0;font-size:.9rem}.credits-urls{flex-direction:column;gap:.15rem;display:flex}.profile-name{text-align:left;flex-direction:column;gap:.25rem;display:flex}.profile-name>span{color:var(--muted);font-size:.9rem}