:root{color-scheme:dark}*{box-sizing:border-box}body{background:#0d0f18;color:#a8926c;font:12px/1.7 monospace;margin:0;-webkit-text-size-adjust:100%}
#hamabe{display:flex;flex-direction:column;align-items:center;padding:0 8px}.hamabe-title{color:#fff5d1;font-size:14px;text-align:center;margin:10px 0 8px}
#hamabe-scene{width:960px;max-width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated;display:block;margin:0 auto;touch-action:manipulation}
.hamabe-caption{color:#f0dc9a;text-align:center;min-height:1.7em;margin:6px 10px}.hamabe-hud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
.hamabe-btn,.pixel-button{font-family:monospace;font-size:12px;padding:7px 12px;border:2px solid #101936;background:#f2e3c0;color:#101936;text-decoration:none;cursor:pointer}
.hamabe-panel{position:fixed;inset:0;z-index:50;background:rgba(13,15,24,.88);display:flex;align-items:center;justify-content:center;padding:16px}.hamabe-panel[hidden]{display:none}
.hamabe-panel-card{background:#101936;border:3px solid #f2e3c0;padding:14px;width:min(420px,100%);max-height:80vh;overflow:auto;display:flex;flex-direction:column;gap:8px}.hamabe-panel-card h2{margin:0;font-size:13px;color:#ffd166}.hamabe-panel-card p{margin:0;font-size:12px;line-height:1.7}.hamabe-panel-card .pixel-button{display:inline-block;margin:8px 6px 0 0}@media(max-width:480px){.hamabe-caption{font-size:11px}.hamabe-title{font-size:12px}}
.hamabe-w-lab{color:#f0dc9a;font-size:11px}
.hamabe-w-in{width:100%;font:12px/1.6 monospace;background:#0d0f18;color:#fff5d1;border:2px solid #a8926c;padding:6px;resize:none}
.hamabe-w-in:focus{outline:2px solid #ffd166}
.hamabe-w-count{color:#a8926c;font-size:11px;text-align:right;margin:0}
.hamabe-err{color:#e0526a;font-size:11px;margin:0}
.hamabe-err[hidden]{display:none}
.hamabe-note{color:#a8926c;font-size:11px;margin:0}
.hamabe-tegami-body{color:#fff5d1;font-size:13px}
.hamabe-from{color:#5fe8d8;font-size:11px;text-align:right;margin:0}
.hamabe-list{margin:0;padding-left:18px;font-size:11px;color:#f0dc9a;line-height:1.8}
.hamabe-hr{border:0;border-top:1px solid #3d3a74;width:100%;margin:4px 0}
.hamabe-henji-to{color:#a8926c;font-size:11px;margin:0}
.hamabe-tegami-body{overflow-wrap:anywhere}
.hamabe-soto-list{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.hamabe-soto-list li{border-left:2px solid #3d3a74;padding-left:8px}
.hamabe-w-in[type=text],input.hamabe-w-in{padding:6px}