*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;height:100dvh;overscroll-behavior:none;background:#1b1b1f;color:#fff;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{position:fixed;left:0;top:0;width:100%;height:100%;width:var(--app-w,100vw);height:var(--app-h,100dvh);display:flex;flex-direction:column;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);background:radial-gradient(circle at 50% 30%,#3a2a1a,#121214 70%)}
#wrap{position:relative;flex:none;width:960px;height:600px;box-shadow:0 10px 40px rgba(0,0,0,.6);border-radius:10px;overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none}
#topbtns{position:absolute;right:7%;top:1.3%;display:flex;gap:6px;z-index:5}
.ib{width:38px;height:38px;border-radius:10px;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font-size:18px;cursor:pointer;line-height:1}
.ib:hover{background:rgba(0,0,0,.7)}
.screen{position:fixed;left:0;top:0;width:var(--app-w,100vw);height:var(--app-h,100dvh);display:none;align-items:center;justify-content:center;background:rgba(15,10,5,.72);z-index:10;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));backdrop-filter:blur(2px)}
.screen.show{display:flex}
.panel{background:linear-gradient(#fff8e1,#ffe9b3);color:#2b1a0b;border:5px solid #2b1a0b;border-radius:18px;padding:22px 28px;max-width:min(600px,92vw);width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;text-align:center;box-shadow:0 8px 0 #2b1a0b}
.logo{font-size:84px;font-weight:900;letter-spacing:2px;line-height:1;text-shadow:4px 4px 0 #2b1a0b}
.logo .l1{color:#ffcc00;-webkit-text-stroke:3px #2b1a0b}
.logo .l2{color:#ff7a1a;-webkit-text-stroke:3px #2b1a0b}
.sub{font-weight:900;font-size:22px;margin:6px 0 10px;letter-spacing:3px}
.blurb{font-size:17px;margin:8px 0 14px;line-height:1.4}
.g{color:#178a2c}.b{color:#7a4413}
h2{font-size:30px;margin-bottom:10px}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
button{font:inherit;font-weight:800;font-size:17px;padding:10px 18px;border-radius:12px;border:3px solid #2b1a0b;background:#fff;color:#2b1a0b;cursor:pointer;box-shadow:0 4px 0 #2b1a0b}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #2b1a0b}
button.big{background:#ffcc00;font-size:22px;padding:12px 26px}
button:disabled{opacity:.45;cursor:not-allowed}
.ib{box-shadow:none;padding:0;border-width:2px}
.tiny{font-size:13px;opacity:.75;margin-top:12px}
ul.how{text-align:left;list-style:none;font-size:16px;line-height:1.5;margin:6px 0 10px}
ul.how li{margin:4px 0}
.levels{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.lvcard{width:220px;padding:14px;border:4px solid #2b1a0b;border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 4px 0 #2b1a0b;text-align:center}
.lvcard.locked{opacity:.5;cursor:not-allowed}
.lvcard .em{font-size:44px}
.lvcard .nm{font-weight:900;font-size:19px;margin:4px 0}
.lvcard .ds{font-size:13px}
.lvcard .bt{font-size:13px;margin-top:6px;font-weight:700}
.lvnum{font-weight:900;letter-spacing:4px;opacity:.7}
.banner{font-size:58px;font-weight:900;line-height:1;margin:4px 0 8px;-webkit-text-stroke:2px #2b1a0b;text-shadow:3px 3px 0 #2b1a0b}
.banner.win{color:#3fd35a}
.banner.lose{color:#8b5a2b;animation:shake .4s infinite}
.stats{font-size:18px;font-weight:700;margin-bottom:8px}
@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-3px,1px) rotate(-1deg)}75%{transform:translate(3px,-1px) rotate(1deg)}}
.titleface{display:block;margin:-6px auto 4px;height:128px;width:auto;filter:drop-shadow(3px 4px 0 #2b1a0b);animation:faceBob 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes faceBob{0%,100%{transform:rotate(-4deg) scaleX(1)}50%{transform:rotate(4deg) scaleX(1.12) translateY(-3px)}}
@media (max-width:700px),(max-height:500px){
  .titleface{height:70px;margin:-4px auto 2px}
  .logo{font-size:52px}.sub{font-size:16px}h2{font-size:22px}.blurb{font-size:14px}
  ul.how{font-size:13px}.panel{padding:12px 14px}.banner{font-size:40px}
  button{font-size:14px;padding:8px 12px}button.big{font-size:17px;padding:9px 18px}
  .lvcard{width:160px;padding:8px}.lvcard .em{font-size:30px}
  #topbtns{top:2px}.ib{width:30px;height:30px;font-size:14px}
}
@media (max-width:480px){#topbtns{gap:3px;top:1px}.ib{width:22px;height:22px;font-size:10px;border-radius:6px;border-width:1px}}
/* the main action button never scrolls out of view inside a tall panel */
.panel>.btns{position:sticky;bottom:0;padding:8px 0 4px;background:linear-gradient(rgba(255,233,179,0),#ffe9b3 35%);z-index:2}
#pad{display:none}
/* ---------- phone portrait ---------- */
html.port #app{justify-content:flex-start}
html.port #wrap{border-radius:0 0 12px 12px}
html.port #topbtns{right:6px;top:3.32%;transform:translateY(-50%);gap:5px}
html.port .ib{width:32px;height:32px;font-size:15px;border-radius:9px;border-width:2px}
html.port #pad{display:block;position:relative;flex:none;width:100%;min-height:120px;touch-action:none;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(255,204,0,.10),rgba(0,0,0,0) 60%)}
#pad .padhint{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:800;font-size:15px;color:rgba(255,255,255,.45);pointer-events:none;letter-spacing:1px}
#pad .padhint::before{content:"";display:block;width:110px;height:110px;margin:0 auto 8px;border-radius:50%;border:3px dashed rgba(255,255,255,.25)}
#padBase,#padKnob{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;display:none}
#padBase{width:110px;height:110px;border:3px solid rgba(255,255,255,.6);background:rgba(0,0,0,.35)}
#padKnob{width:52px;height:52px;background:rgba(255,204,0,.85);border:3px solid #2b1a0b}
#pad.on #padBase,#pad.on #padKnob{display:block}
#pad.on .padhint{opacity:0}
html.port .panel{padding:14px 14px 12px}
html.port .titleface{height:96px}
html.port .logo{font-size:60px}
html.port .lvcard{width:100%;max-width:330px;display:grid;grid-template-columns:52px 1fr;column-gap:10px;text-align:left;align-items:center}
html.port .lvcard .em{grid-row:span 3;font-size:40px;text-align:center}
html.port .levels{flex-direction:column;align-items:center;gap:10px}
@media (max-height:700px){html.port .titleface{height:72px}html.port .logo{font-size:48px}html.port ul.how{font-size:13px}}