*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#fff7df;color:#31453e;font-family:ui-rounded,"Hiragino Maru Gothic ProN","PingFang SC",sans-serif}body{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}header{max-width:1000px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 14px}h1{font-size:clamp(17px,3vw,23px);margin:0}button,a{font:inherit;color:inherit}a{text-decoration:none}button,nav a{min-height:44px;border:1px solid #d9d6bf;border-radius:16px;padding:9px 16px;background:#fffdf5;cursor:pointer}button:active{background:#ffe296}main{max-width:1000px;margin:auto}#stage{position:relative;width:100%;aspect-ratio:760/420;background:white;overflow:hidden;border-radius:18px;box-shadow:0 8px 24px #63552b19}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}canvas.play{cursor:none}#roles{position:absolute;inset:0;background:#fff3;display:grid;place-items:center}#roles[hidden]{display:none}.role-card{background:#fffaf0;border:2px solid #d8b95f;border-radius:24px;box-shadow:0 10px 40px #30362830;padding:clamp(12px,4vw,28px);text-align:center}.role-card h2{margin:0 0 8px}.role-card p{font-size:14px}.role-card button{min-width:90px;margin:0 8px;background:#ffe3a0}#touch-controls{display:none;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}#touch-controls button{min-width:64px;font-size:22px;touch-action:none;user-select:none}#touch-controls span{font-size:13px;text-align:center}#status{text-align:center;min-height:1.5em;font-size:14px;margin:14px 0 8px}nav{display:flex;justify-content:center;gap:12px;align-items:center}nav a{background:transparent} @media (pointer:coarse){#touch-controls{display:flex}}@media (max-width:600px){body{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}header{gap:6px}header a,header button{font-size:13px}#stage{border-radius:10px}}@media (max-height:450px) and (orientation:landscape){body{padding-top:4px;padding-bottom:4px}header{margin-bottom:4px}header button,header a{min-height:32px;padding:5px 10px}main{max-width:min(100%,calc((100dvh - 105px)*760/420))}#touch-controls{margin-top:4px}#touch-controls button{min-height:38px;padding:3px 18px}#status{margin:4px 0}nav{display:none}}