:root { color: #2e2922; background:#e9dfc8; font-family: Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { user-select:none; touch-action:none; background:radial-gradient(circle at 28% 18%,#fbf2db 0 22%,transparent 46%),#ded1b8; }
#game { width:100%; height:100%; position:relative; min-height:360px; }
#cloth { display:block; width:100%; height:100%; cursor:grab; }
#cloth:active { cursor:grabbing; }
.caption { position:absolute; top:max(16px,env(safe-area-inset-top)); left:clamp(18px,5vw,64px); pointer-events:none; max-width:420px; }
h1 { margin:0 0 7px; font-size:clamp(14px,2vw,20px); font-weight:normal; letter-spacing:.16em; color:#6f3f2e; }
p { margin:0; font-size:clamp(14px,2vw,18px); line-height:1.35; color:#40382e; text-wrap:balance; }
#replay { position:absolute; right:clamp(16px,4vw,54px); bottom:max(16px,env(safe-area-inset-bottom)); border:1px solid #91765a; background:#efe2c6; color:#6b4934; padding:10px 14px; border-radius:2px; font:14px Georgia,serif; letter-spacing:.04em; box-shadow:2px 3px 0 #bca98d; }
#replay:focus-visible { outline:3px solid #4c7b73; outline-offset:3px; }
@media (max-width:580px) and (orientation:portrait) { .caption { max-width:285px; } #replay { padding:9px 11px; } }
@media (prefers-reduced-motion:reduce) { #cloth { image-rendering:auto; } }