:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#302b24;background:#faf8f3;--green:#315944;--paper:#fffefb}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;background:#fffefb;border:1px solid #d6d1c8;border-radius:5px;padding:9px 14px;cursor:pointer;touch-action:manipulation;white-space:nowrap}button:hover{background:#f0ece4}button:focus-visible,input:focus-visible,summary:focus-visible,#room:focus-visible{outline:3px solid #527c60;outline-offset:3px}button[aria-pressed=true]{background:#e4eee6;color:#23452e;border-color:#547360}.primary{background:var(--green);color:#fff;border-color:var(--green)}.primary:hover{background:#254535}button:disabled{opacity:.55;cursor:wait}
main{max-width:1410px;margin:0 auto;padding:28px 36px 24px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.eyebrow{font-size:12px;letter-spacing:.04em;margin:0 0 6px;color:#70685b}h1{font-size:30px;font-weight:650;margin:0}.header-actions{display:flex;gap:8px}.room-panel{background:var(--paper)}#room{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;isolation:isolate;touch-action:none;user-select:none;cursor:crosshair}.room-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}#actors{position:absolute;inset:0;pointer-events:none}.actor{position:absolute;width:0;height:0;will-change:left,top;pointer-events:none}.paper{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}.sprite{position:absolute;left:0;top:0;width:var(--image-size);height:var(--image-size);max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(1px 1px 1px #573b2125)}.ground-shadow{position:absolute;left:0;top:0;width:var(--shadow-width);height:var(--shadow-height);transform:translate(-50%,-40%);border-radius:50%;background:#54382036;filter:blur(3px)}.character-hit{position:absolute;left:0;top:0;transform:translate(-50%,-100%);width:var(--hit-width);height:var(--hit-height);padding:0;border:0;background:transparent!important;border-radius:0;pointer-events:auto;cursor:pointer}.selection{position:absolute;left:0;top:0;width:var(--ring-width);height:var(--ring-height);transform:translate(-50%,-45%);border-radius:50%;border:2px solid #4c7859;display:none;opacity:.7}.actor[data-selected=true] .selection{display:block}.actor[data-moving=true] .paper{animation:walk .38s ease-in-out infinite}.actor[data-moving=false] .paper{animation:rest 5.2s ease-in-out infinite}.actor[data-talking=true] .paper{animation:talk .6s ease-in-out infinite}.bubble{position:absolute;left:var(--bubble-offset,0px);bottom:var(--bubble-height);width:max-content;max-width:var(--bubble-max);transform:translateX(-50%);background:#fffefc;color:#332c24;border:1.5px solid #6f604c;border-radius:18px;padding:10px 15px;font-size:var(--bubble-font);font-weight:550;line-height:1.55;white-space:normal;word-break:normal;overflow-wrap:anywhere;box-shadow:0 2px 4px #4c341a13;pointer-events:none;z-index:1000}.bubble::after{content:"";position:absolute;width:10px;height:10px;bottom:-6px;left:clamp(9px,calc(50% - 5px - var(--bubble-offset,0px)),calc(100% - 19px));background:#fffefc;border-right:1.5px solid #6f604c;border-bottom:1.5px solid #6f604c;transform:rotate(45deg)}.bubble[hidden]{display:none}#destination{position:absolute;width:15px;height:9px;border:2px solid #628768;border-radius:50%;transform:translate(-50%,-50%);display:none;pointer-events:none;z-index:1}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#fffdf6e8;color:#4d5e4a;z-index:3000}#loading[hidden]{display:none}.room-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 20px 19px}.cast,.play-controls{display:flex;flex-wrap:wrap;gap:7px}.below-room{display:flex;justify-content:space-between;gap:20px;padding:16px 5px 10px}.instructions p{margin:0 0 7px;font-size:13px;line-height:1.65}.instructions strong{font-weight:600}#status{color:#61705c}.touch-pad{display:none;text-align:center;flex-shrink:0}.touch-pad button{min-width:40px;min-height:36px;padding:4px 10px;font-size:20px;touch-action:none}.touch-pad>div{display:flex;gap:4px;margin-top:4px}.say-editor{margin:10px 5px 0;font-size:13px}.say-editor summary{cursor:pointer;width:fit-content}.say-editor form{margin-top:12px;max-width:620px}.say-editor label{display:block;margin-bottom:6px}.say-editor form>div{display:flex;gap:8px}.say-editor input{min-width:0;flex:1;border:1px solid #c9c6bd;padding:10px;border-radius:4px;background:#fff}.say-editor p,.footnote{font-size:12px;color:#776e61;line-height:1.7}.footnote{margin:18px 5px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.room-panel.is-expanded{background:#faf8f3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:8px}.room-panel.is-expanded #room{width:min(100%,calc((100vh - 90px)*1.5));flex-shrink:0}.room-panel.is-expanded .room-controls{width:min(100%,calc((100vh - 90px)*1.5))}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-1.8deg)}50%{transform:translateY(-3px) rotate(1.8deg)}}@keyframes rest{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes talk{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@media(max-width:760px){main{padding:18px 12px}.page-header{gap:10px}h1{font-size:26px}.eyebrow{font-size:10px}.header-actions button{font-size:12px;padding:8px 9px}.room-controls{padding:12px;align-items:flex-start;flex-direction:column;gap:10px}.room-controls button{font-size:12px;padding:8px 10px}.touch-pad{display:block}.instructions p{font-size:12px}.below-room{gap:10px}.bubble{padding:6px 9px;border-radius:12px}.room-panel.is-expanded .room-controls{flex-direction:row;flex-wrap:wrap}.room-panel.is-expanded #room{width:min(100%,calc((100vh - 125px)*1.5))}}@media(prefers-reduced-motion:reduce){.actor .paper{animation:none!important}*{scroll-behavior:auto}}

@media(min-width:761px){.room-panel{display:flex;flex-direction:column;align-items:center}#room{width:min(100%,max(720px,calc((100svh - 240px)*1.5)))}.room-controls{width:100%;max-width:1100px}.room-panel.is-expanded #room{width:min(100%,calc((100vh - 90px)*1.5))}}

body.room-expanded{overflow:hidden}.room-panel.is-expanded{position:fixed;inset:0;z-index:5000;overflow:auto}#close-expanded[hidden]{display:none}
h1{word-break:keep-all;line-height:1.35}
.facing{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;transform:scaleX(var(--facing,1));transition:transform .14s ease-out}
@media(prefers-reduced-motion:reduce){.facing{transition:none}}
.actor[data-moving=false][data-talking=false][data-idle=look] .paper{animation:look-around 1.8s ease-in-out}
.actor[data-moving=false][data-talking=false][data-idle=bounce] .paper{animation:little-bounce 1.8s ease-in-out}
.actor[data-moving=false][data-talking=false][data-idle=sway] .paper{animation:gentle-sway 1.8s ease-in-out}
@keyframes look-around{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
@keyframes little-bounce{0%,35%,75%,100%{transform:translateY(0)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes gentle-sway{0%,100%{transform:rotate(0)}35%{transform:rotate(3deg)}70%{transform:rotate(-2deg)}}
@media(max-width:760px){.page-header{flex-wrap:wrap;align-items:flex-start}.page-header>div:first-child{flex-basis:100%}.header-actions{margin-left:auto}}
/* 座り姿は一枚絵のまま。足や腕を切り分けず、家具の手前を重ねる。 */
.table-foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:655;clip-path:polygon(57.8% 47.8%,57.8% 46.4%,58.8% 45.1%,60.7% 44.1%,63.3% 44.1%,65.5% 45.1%,67.4% 46.0%,69.4% 47.4%,69.8% 49.2%,69.1% 50.6%,68.0% 51.5%,68.8% 57.5%,68.5% 58.1%,67.8% 57.8%,67.0% 52.4%,65.5% 52.8%,65.8% 61.9%,65.3% 63.2%,64.5% 62.7%,64.0% 53.0%,62.4% 52.8%,62.3% 55.5%,61.9% 55.8%,61.6% 53.0%,60.0% 51.8%,59.1% 58.5%,58.4% 58.7%,58.3% 57.8%,58.8% 51.0%,57.8% 49.0%)}
.actor[data-pose=seated] .paper{animation:seated-breath 5s ease-in-out infinite}
.actor[data-pose=seated][data-talking=true] .paper{animation:seated-talk .8s ease-in-out infinite}
.actor[data-pose=seated] .facing{transition:none}
.actor[data-pose=seated] .ground-shadow{opacity:.35}
@keyframes seated-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-.7px)}}
@keyframes seated-talk{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.4deg)}}