@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:#1a0c04;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  font-family:'Nunito',sans-serif;
}
#wrap{ position:relative; width:320px; }
#frame{
  width:320px; border-radius:28px;
  background:linear-gradient(170deg,#e8a96a,#d07838);
  box-shadow:0 0 0 6px #b86020,0 0 0 11px #7a3808,0 0 0 16px #3c1804,0 14px 50px rgba(0,0,0,.8);
  overflow:hidden; position:relative;
}
.knob{
  position:absolute;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f8d888,#cc8030 55%,#7a3808);
  border:3px solid #7a3808;
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 3px rgba(255,255,255,.3);
  z-index:10;
}
.knob-tl{top:10px;left:10px;} .knob-tr{top:10px;right:10px;}
.knob-bl{bottom:36px;left:10px;} .knob-br{bottom:36px;right:10px;}
#hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 8px;z-index:5;position:relative;
}
.ibtn{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 38% 35%,#f8d888,#cc8030 60%,#a05018);
  border:3px solid #7a3808;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 #7a3808,0 6px 12px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;
  transition:transform .1s,box-shadow .1s;position:relative;z-index:15;
}
.ibtn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a3808;}
#lvbadge{
  font-family:'Fredoka One',cursive;font-size:22px;color:#fff5e0;
  background:linear-gradient(180deg,#7a3208,#4a1804);
  border:3px solid #f0c060;border-radius:22px;padding:6px 26px;
  box-shadow:0 4px 0 #4a1804,0 6px 16px rgba(0,0,0,.4);
  text-shadow:0 2px 4px rgba(0,0,0,.5);letter-spacing:1px;
}
#vp{position:relative;width:100%;overflow:hidden;}
canvas{display:block;width:100%;height:100%;}
#tl,#tr{
  position:absolute;top:0;bottom:0;width:50%;
  z-index:6;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
#tl{left:0;} #tr{right:0;}
#fl,#fr{
  position:absolute;top:0;bottom:0;width:50%;pointer-events:none;z-index:5;
  transition:background .07s;
}
#fl{left:0;} #fr{right:0;}
#fl.on,#fr.on{background:rgba(255,255,255,.06);}
.arr{
  position:absolute;bottom:14px;font-size:28px;font-weight:900;
  opacity:.20;color:#5c1804;pointer-events:none;z-index:4;
}
#al{left:14px;} #ar{right:14px;}
#foot{
  width:100%;height:30px;
  background:linear-gradient(180deg,#f8d860,#dda010);
  border-radius:0 0 22px 22px;
  box-shadow:inset 0 5px 10px rgba(0,0,0,.18);
}

/* difficulty tag shown inside game */
#diff-tag{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',cursive;font-size:12px;letter-spacing:2px;
  padding:3px 12px;border-radius:20px;pointer-events:none;z-index:4;
  text-transform:uppercase;
}
#diff-tag.easy  {background:rgba(68,220,100,.22);color:#44dc64;border:1px solid rgba(68,220,100,.4);}
#diff-tag.medium{background:rgba(248,200,60,.22);color:#f8c83c;border:1px solid rgba(248,200,60,.4);}
#diff-tag.hard  {background:rgba(255,80,80,.22);color:#ff6060;border:1px solid rgba(255,80,80,.4);}

.ov{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px 20px;text-align:center;
  background:rgba(40,10,0,.88);backdrop-filter:blur(4px);
}
.ov.hidden{display:none;}
.ot{font-family:'Fredoka One',cursive;font-size:48px;color:#f8d060;
    letter-spacing:3px;line-height:1;text-shadow:0 3px 0 #883000,0 6px 20px rgba(0,0,0,.6);}
.os{font-size:11px;letter-spacing:3px;color:rgba(248,208,96,.6);text-transform:uppercase;margin-top:-6px;}
.box{background:rgba(255,255,255,.07);border:1.5px solid rgba(248,208,96,.2);
     border-radius:14px;padding:14px 18px;color:#f0ddc0;font-size:13px;line-height:2.1;}
.box b{color:#f8d060;}
.btn{
  font-family:'Fredoka One',cursive;font-size:23px;color:#5c1e04;letter-spacing:2px;
  background:linear-gradient(180deg,#f8d060,#df9010);
  border:3px solid #7a3208;border-bottom-width:4px;border-radius:40px;
  padding:13px 50px;cursor:pointer;
  box-shadow:0 5px 0 #7a3208,0 8px 20px rgba(0,0,0,.4);
  transition:transform .1s,box-shadow .1s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #7a3208;}
.sc{background:rgba(0,0,0,.2);border:2px solid rgba(248,208,96,.28);
    border-radius:16px;padding:16px 34px;
    display:flex;flex-direction:column;align-items:center;gap:3px;}
.sl{font-size:9px;letter-spacing:4px;color:rgba(248,208,96,.55);text-transform:uppercase;}
.sv{font-family:'Fredoka One',cursive;font-size:50px;color:#f8d060;line-height:1.1;}
.sb{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.32);}
.we{font-size:40px;letter-spacing:6px;}