*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#efe6d2;color:#1b1714;font-family:Georgia,"Times New Roman",serif;touch-action:none;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud{position:fixed;top:0;left:0;right:0;display:flex;gap:8px;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;font-weight:bold;font-size:17px;z-index:5}
#hud span{background:#1b1714;color:#efe6d2;padding:5px 10px;border-radius:2px;letter-spacing:.5px}
#h-mv{margin-right:auto}
.ib{width:42px;height:42px;border:3px solid #1b1714;background:#efe6d2;color:#1b1714;font-size:20px;font-weight:bold;border-radius:3px;cursor:pointer;box-shadow:3px 3px 0 #1b1714}
.ib:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1b1714}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);max-height:92vh;overflow:auto;background:#efe6d2;border:4px solid #1b1714;box-shadow:8px 8px 0 #d2452b;padding:20px;text-align:center;z-index:10}
h1{font-size:clamp(34px,9vw,54px);line-height:.95;letter-spacing:2px;color:#1b1714;text-shadow:3px 3px 0 #d2452b;margin-bottom:6px}
h2{font-size:28px;margin-bottom:8px;color:#d2452b}
.ver{font-size:12px;opacity:.6}
.small{font-size:14px;margin:8px 0;line-height:1.35}
.panel button:not(.lv){display:block;width:100%;margin:8px 0;padding:12px;font:bold 18px Georgia,serif;background:#1b1714;color:#efe6d2;border:none;border-radius:2px;cursor:pointer;box-shadow:4px 4px 0 #d2452b}
.panel button:active{transform:translate(2px,2px)}
.row{display:flex;gap:8px}.row button{flex:1}
.lang.on{background:#d2452b!important}
#levels{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0}
.lv{aspect-ratio:1;border:3px solid #1b1714;background:#efe6d2;font:bold 16px Georgia,serif;color:#1b1714;cursor:pointer;line-height:1;padding:2px;border-radius:2px}
.lv small{display:block;font-size:10px;color:#d2452b;margin-top:2px}
.lv:disabled{opacity:.3;cursor:default}
.lv.cur{background:#d2452b;color:#efe6d2}.lv.cur small{color:#efe6d2}
.stars{font-size:40px;color:#d2452b;letter-spacing:6px}
.quip{font-style:italic;margin:10px 0;font-size:15px}
#quip{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:88vw;background:#1b1714;color:#efe6d2;padding:8px 14px;font-style:italic;font-size:15px;z-index:6;text-align:center;border-left:6px solid #d2452b}
#coach{position:fixed;left:50%;top:70px;transform:translateX(-50%);max-width:90vw;background:#d2452b;color:#efe6d2;padding:8px 14px;font-weight:bold;font-size:15px;z-index:6;text-align:center}
#pad{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:150px;height:150px;z-index:5}
.pb{position:absolute;width:50px;height:50px;border:3px solid #1b1714;background:rgba(239,230,210,.9);font-size:20px;color:#1b1714;border-radius:3px;box-shadow:3px 3px 0 #1b1714}
.pb.u{left:50px;top:0}.pb.d{left:50px;top:100px}.pb.l{left:0;top:50px}.pb.r{left:100px;top:50px}
@media (pointer:fine) and (min-width:800px){#pad{display:none}#quip{bottom:30px}}