*{box-sizing:border-box}body{margin:0;background:#faf8f4;color:#4d423a;font:15px system-ui}canvas{width:calc(100vw - 260px);height:100vh;display:block;touch-action:none;outline:none}header{position:fixed;top:20px;left:24px;pointer-events:none}h1{font:600 25px Georgia;margin:0 0 8px}header p{margin:0;color:#786b60}aside{position:fixed;right:20px;top:20px;width:230px;background:#fffaf3ed;border:1px solid #decdb8;border-radius:18px;padding:18px;box-shadow:0 8px 30px #5b453818}h2{font:600 18px Georgia;margin:0 0 12px}label{display:block;margin:10px 0}select,button{font:inherit;border:1px solid #d6c1aa;border-radius:8px;background:#fff;padding:7px}select{width:100%;margin-top:4px}button{cursor:pointer}button:hover{background:#f5ebde}footer{position:fixed;bottom:20px;left:24px;right:270px;background:#fffaf3e8;border-radius:14px;padding:14px 18px}#status{font-weight:600;margin-bottom:5px}small{color:#786b60}#count{margin-bottom:12px;color:#79654e}@media(max-width:700px){canvas{width:100vw}aside{width:165px;right:8px;padding:12px}header{left:12px;top:12px}h1{font-size:20px}header p{max-width:160px}footer{left:8px;right:8px;bottom:8px}label{font-size:12px}}
aside{max-height:calc(100vh - 40px);overflow-y:auto}#feedback{border-top:1px solid #decdb8;margin-top:18px;padding-top:15px}#feedback h2{font-size:17px}.reactions{display:flex;gap:8px}.reactions [aria-pressed=true]{background:#e5d8eb;border-color:#9b7daa}textarea{font:inherit;width:100%;resize:vertical;border:1px solid #d6c1aa;border-radius:8px;padding:8px;background:#fff}#send-feedback{margin-top:8px}#feedback [role=status]{font-size:13px;margin:8px 0}

#board-toggle,#touch-controls{display:none}@media(max-width:700px),(pointer:coarse){body{overflow:hidden}canvas{width:100vw;height:calc(100svh - 150px);margin-top:55px}header{left:14px;top:12px;right:160px}header h1{font-size:20px}header p{display:none}#board-toggle{display:block;position:fixed;right:12px;top:12px;min-height:44px;font-size:13px;background:#fffaf3;z-index:4}aside{display:none;top:auto;bottom:132px;left:12px;right:12px;width:auto;max-height:calc(100svh - 210px);z-index:3;padding:18px}.board-open aside{display:block}footer{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:10px 12px}#touch-controls{display:flex;gap:10px;margin-bottom:8px}#touch-controls button{flex:1;min-height:48px;background:#f0e0c9;font-weight:600;touch-action:none;user-select:none}#touch-controls button:disabled{opacity:.5}#status{font-size:13px}footer small{font-size:11px;display:block}label{font-size:15px}button,select{min-height:44px}textarea{font-size:16px}#prizes{font-size:13px}}

html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;margin:0}#game-viewport{position:fixed;left:var(--viewport-left,0px);top:var(--viewport-top,0px);width:var(--viewport-width,100vw);height:var(--viewport-height,100dvh);overflow:hidden;isolation:isolate}#game-viewport>header,#game-viewport>aside,#game-viewport>footer,#game-viewport>#board-toggle{position:absolute}canvas{height:100%;width:calc(100% - 260px);-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}aside{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;max-height:calc(var(--viewport-height,100dvh) - 40px)}#touch-controls,footer,#board-toggle{touch-action:none;-webkit-touch-callout:none;user-select:none}aside textarea,aside select{font-size:16px}aside textarea{touch-action:auto;user-select:text;-webkit-user-select:text}@media(max-width:700px),(pointer:coarse){canvas{width:100%;height:calc(100% - 175px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin-top:calc(60px + env(safe-area-inset-top))}header{top:calc(12px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left))}#board-toggle{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}footer{left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom))}aside{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));bottom:calc(140px + env(safe-area-inset-bottom));max-height:calc(var(--viewport-height,100dvh) - 215px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.input-active footer{display:none}.input-active aside{bottom:12px;max-height:calc(var(--viewport-height,100dvh) - 80px - env(safe-area-inset-top))}}

#feedback-subject{font:inherit;font-size:16px;display:block;width:100%;margin-top:6px;border:1px solid #d6c1aa;border-radius:8px;padding:8px}#mail-link{display:block;color:#705389;margin:10px 0}