@font-face{font-family:Body;src:url('assets/body.otf') format('opentype');font-display:block}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#eae8df}
body{display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font-family:Body,'Noto Sans CJK SC',sans-serif}
#game{position:relative;width:720px;height:1080px;flex:none;overflow:hidden;background:#f6efdc;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%;touch-action:none}
#controls{position:absolute;inset:0;width:720px;height:1080px;transform-origin:top left;pointer-events:none}
button{position:absolute;pointer-events:auto;touch-action:manipulation;font:27px Body,sans-serif;color:#103f40;border:0;border-radius:0;background:#f6f1e5;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:2px 3px 0 #d9d0b8;transition:filter .16s,background .16s}
button:hover{background:#fae3e5;color:#103f40}button:active{filter:brightness(.92)}button:focus-visible{outline:3px solid #008efa;outline-offset:4px}button.filled{color:#f6f1e5;background:#103f40;clip-path:polygon(1% 2%,97% 0,97% 6%,100% 8%,99% 87%,100% 94%,97% 95%,97% 100%,0 98%,1% 82%,0 77%)}button.filled:hover{color:white;background:#20595a}
button[hidden]{display:none}button:disabled{cursor:default;opacity:.6}
#primary{left:178px;top:901px;width:364px;height:67px;font-size:32px}
#secondary{left:190px;top:986px;width:340px;height:45px;font-size:26px}
#home{left:30px;top:30px;width:48px;height:48px;font-size:40px}
#mute{left:642px;top:30px;width:48px;height:48px;font-size:28px}
#utility{left:55px;top:960px;width:215px;height:51px}
#coupon{left:178px;top:795px;width:364px;height:65px;font-size:31px;font-weight:700;background:#c74732;color:#fffaf0}
#coupon:hover{background:#ad3725;color:#fffaf0}
#coupon:active{background:#963020}
#utility::before{content:'';position:absolute;left:12px;top:-7px;width:45px;height:14px;background:#149ff0b8;transform:rotate(-9deg)}
#hint-panel{position:absolute;left:38px;top:887px;width:644px;height:68px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f6f1e5;color:#103f40;font:25px/30px Body,sans-serif;box-shadow:0 2px 0 #d9d0b8;pointer-events:none}
#hint-panel[hidden]{display:none}
#hint-panel::before{content:'';position:absolute;left:7px;top:-6px;width:48px;height:12px;background:#ec819b;transform:rotate(-9deg)}
/* The supplied cover already contains its lettering. Real, accessible buttons sit
   exactly over the printed entrances, without duplicating any text or artwork. */
#game[data-layout="cover"] #primary{left:191px;top:1085px;width:343px;height:83px}
#game[data-layout="cover"] #secondary{left:246px;top:1184px;width:229px;height:43px}
#game[data-layout="cover"] #primary,#game[data-layout="cover"] #secondary{color:transparent;background:transparent;box-shadow:none;clip-path:none}
#game[data-layout="cover"] #primary:hover,#game[data-layout="cover"] #secondary:hover{background:#ffffff10}
#game[data-layout="cover"] #primary:active,#game[data-layout="cover"] #secondary:active{background:#103f401a}
#game[data-layout="cover"] #mute{top:28px;left:647px;background:#f6f1e5cc;box-shadow:none;font-size:24px;width:40px;height:40px}
#loading{position:absolute;inset:40% 8% auto;text-align:center;color:#254947;font-size:24px;line-height:1.8}
.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}

/* Readable live lettering over the printed cover entrances. */
#game[data-layout="cover"] #primary{color:#f6f1e5;background:#103f40;font-size:34px}
#game[data-layout="cover"] #secondary{left:210px;top:1182px;width:300px;height:48px;color:#103f40;background:#f6f1e5;font-size:26px}
#game[data-layout="cover"] #primary:hover{background:#20595a}
#game[data-layout="cover"] #secondary:hover{background:#fae3e5}
