*{box-sizing:border-box}html{background:#101f2c;color:#fff0cf;font-family:Georgia,'Noto Serif',serif}body{margin:0;padding:12px;min-width:300px}button,input{font:inherit}button{color:#fff0cf;cursor:pointer;border:12px solid transparent;border-image:url('../secondary.png') 64 fill /12px/0 stretch;background:transparent;min-height:48px;min-width:48px;padding:1px 10px;font-weight:700;font-size:16px;line-height:1.3;touch-action:manipulation;overflow-wrap:anywhere}button.primary,button:hover,button[aria-pressed=true]{border-image-source:url('../primary.png');color:#123b41}button:hover{border-image-source:url('../hover.png')}button:active{border-image-source:url('../pressed.png');color:#fdf1cc}button:disabled{filter:saturate(.25);opacity:.5;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #ffe2a0;outline-offset:3px}button[hidden]{display:none}.frame,.panel{border:16px solid transparent;border-image:url('../panel.png') 64 fill /16px/0 stretch}.frame{border-width:12px;border-image-width:12px}.panel{padding:14px 24px}#game{max-width:780px;position:relative;margin:auto;padding:0 4px 10px;outline:none}header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:85px;padding:0 10px}.logo{width:240px;max-width:55%;height:60px;object-fit:contain}.tools{display:flex;gap:8px}.tools button{font-family:system-ui,sans-serif;font-size:23px;padding:0 6px}#room-name{text-align:center;font-size:14px;letter-spacing:1px;padding:8px;color:#d9c597}#hud{display:flex;justify-content:space-around;gap:6px;padding:0 7px;margin-bottom:8px;min-height:54px;align-items:center}#hud>div{display:flex;align-items:center;gap:5px;white-space:nowrap;font-family:system-ui,sans-serif;font-size:15px}#hud img{height:29px;width:25px;object-fit:contain}#hud span{font-size:12px;color:#c9d9cc}#hud bdi{font-weight:700}.board-frame{padding:0;overflow:hidden}#arena{width:100%;aspect-ratio:4/3;position:relative;touch-action:none;cursor:crosshair;border-radius:4px;overflow:hidden}#arena canvas{display:block!important;width:100%!important;height:100%!important}#hint{min-height:33px;margin:9px 0 5px;text-align:center;font-size:14px;line-height:1.5;color:#f3dfb2}.control-row{display:flex;gap:14px;align-items:center;padding:0 8px;justify-content:center}.actions{display:flex;gap:9px;flex:1}.actions button{flex:1;min-width:0;min-height:55px}#dpad{display:grid;grid-template-columns:48px 48px 48px;grid-template-rows:48px 48px;gap:3px;flex-shrink:0}#dpad button{padding:0;touch-action:none;user-select:none;font-family:system-ui,sans-serif;font-size:23px}#dpad button:first-child{grid-column:2}#dpad button:nth-child(2){grid-row:2;grid-column:1}#dpad button:nth-child(3){grid-row:2;grid-column:2}#dpad button:nth-child(4){grid-row:2;grid-column:3}.state-line{display:flex;justify-content:center;gap:24px;font-family:system-ui,sans-serif;font-size:12px;color:#b7c9bd;min-height:25px;align-items:center}#overlay{position:absolute;inset:0;z-index:10;display:flex;justify-content:center;align-items:center;background:#081923ba;backdrop-filter:blur(4px);padding:18px;min-height:100%;border-radius:18px}#overlay[hidden]{display:none}#sheet{width:100%;max-width:520px;max-height:min(90dvh,850px);overflow-y:auto;overscroll-behavior:contain;text-align:center;scrollbar-width:thin;scrollbar-color:#b99b65 #153b40}#sheet h1,#sheet h2{font-size:28px;line-height:1.3;margin:8px 0 15px;color:#ffe2a5}#sheet p{font-family:system-ui,sans-serif;font-size:14px;line-height:1.7;margin:12px 0 20px}.sheet-logo{display:block;width:80%;max-width:330px;height:90px;object-fit:contain;margin:0 auto 10px}.key-art{width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:8px}.menu-buttons{display:grid;gap:10px}#sheet .menu-buttons button{width:100%}.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.room-grid button{min-height:92px;font-size:16px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}.room-grid small{font-family:system-ui,sans-serif;font-size:12px;color:inherit}.loading-track{border:8px solid transparent;border-image:url('../track.png') 48 fill /8px/0 stretch;height:26px;width:100%}.loading-fill{background:url('../fill.png') center/100% 100%;height:100%;width:0;transition:width .1s}.volume{display:grid;grid-template-columns:auto 1fr 42px;gap:12px;align-items:center;margin:20px 0;font-family:system-ui,sans-serif}.volume input{width:100%;height:25px;appearance:none;border:6px solid transparent;border-image:url('../track.png') 48 fill/6px/0 stretch;background:transparent}.volume input::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border:0;border-radius:50%;background:url('../spark.png') center/contain no-repeat}.volume input::-moz-range-thumb{width:26px;height:26px;border:0;background:url('../spark.png') center/contain no-repeat}.result-badge{height:80px;width:80px;object-fit:contain}.result-stars{font-size:30px;color:#f6d585;letter-spacing:6px;margin:14px}.stats{font-family:system-ui,sans-serif;color:#b8dacd}html[dir=rtl] .control-row{direction:ltr}html[dir=rtl] .actions{direction:rtl}@media(max-width:520px){body{padding:5px}#game{padding:0}header{padding:0 3px;min-height:74px}.logo{height:52px}.tools{gap:3px}.tools button{min-width:43px}#hud{gap:3px;padding:0 2px}#hud span{display:none}#hud>div{font-size:14px;gap:3px}#hud img{width:22px;height:26px}.control-row{gap:8px;padding:0 4px;align-items:center}.actions{display:grid;gap:4px}.actions button{min-height:48px;font-size:14px;padding:0 7px}#hint{min-height:45px;padding:0 8px}#overlay{padding:9px}.panel{padding:10px 12px}#sheet h2{font-size:24px}.key-art{height:130px}.room-grid{gap:6px}.room-grid button{font-size:14px}.volume{gap:7px;grid-template-columns:64px 1fr 36px}}
#game{max-width:min(780px,max(340px,calc((100dvh - 340px)*1.3333)))}
#sheet .room-grid button span{width:100%;overflow-wrap:normal;word-break:normal;hyphens:auto}.key-art{height:auto;aspect-ratio:3/2;max-height:250px;object-position:50% 78%}@media(max-width:520px){.key-art{height:auto;max-height:180px}}@media(max-width:360px){.room-grid{grid-template-columns:1fr}.room-grid button{min-height:64px}}
#hud{border-image-source:url("../hud.png")}.loading-fill{background:transparent;border:4px solid transparent;border-image:url("../fill.png") 48 fill/4px/0 stretch;min-width:8px}