:root{
  --cream:#F3E6CE;
  --cream-2:#E7D2A8;
  --sand:#E3C88C;
  --sand-deep:#C89149;
  --saffron:#E9A62B;
  --ochre:#C89149;
  --oxblood:#A8232A;
  --maroon:#6B2B22;
  --ink:#2E211B;
  --ink-deep:#1D1410;
  --gold:#D8A13C;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:var(--ink-deep);
  overflow:hidden;
  font-family:'Barlow Semi Condensed',Arial,sans-serif;
  color:var(--cream);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
button{font-family:inherit;border:0;background:none;padding:0;margin:0;color:inherit;cursor:pointer;}
img{display:block;}

#backdrop{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:var(--ink-deep);
  pointer-events:none;
}
#backdrop img{
  position:absolute;
  top:var(--frameTop,0px);
  left:50%;
  width:calc(var(--frameW,1600px) * 1.5);
  height:auto;
  max-width:none;
  transform:translateX(-50%);
}

#frame{
  position:fixed;
  left:50%;top:50%;
  width:min(100vw,177.7778vh);
  aspect-ratio:16/9;
  transform:translate(-50%,-50%);
  overflow:hidden;
  z-index:1;
  background:transparent;
}
#game{position:absolute;inset:0;z-index:0;}
#game canvas{display:block;}

#fxLayer{
  position:fixed;inset:0;z-index:2;pointer-events:none;
}
#fxLayer::after{
  content:"";
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

#vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 52%,rgba(168,35,42,0) 38%,rgba(168,35,42,.2) 62%,rgba(107,43,34,.72) 100%);
}
#vignette.hit{animation:hitFlash .6s ease-out both;}
@keyframes hitFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

#sweep{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background-image:url("../assets/dust_set_03_dust_trail.webp");
  background-size:100% 62%;
  background-position:center 62%;
  background-repeat:no-repeat;
  transform:translateX(-70%);
}
#sweep.run{animation:dustSweep .46s ease-out both;}
@keyframes dustSweep{
  0%{opacity:0;transform:translateX(-78%) scaleX(.9);}
  18%{opacity:.95;}
  100%{opacity:0;transform:translateX(78%) scaleX(1.1);}
}

#uiLayer{
  position:fixed;left:0;top:var(--frameTop,0px);
  width:var(--dw,1600px);height:900px;
  transform-origin:0 0;
  transform:scale(var(--uiScale,1));
  z-index:3;
  pointer-events:none;
}

/* ---------------- HUD ---------------- */
.hud{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .2s linear,visibility .2s linear;
}
.hud.on{opacity:1;visibility:visible;}

.plate{position:absolute;background-repeat:no-repeat;background-size:100% 100%;}
.plateLabel{position:absolute;left:0;right:0;text-align:center;letter-spacing:2.6px;font-weight:700;}
.plateValue{position:absolute;left:0;right:0;text-align:center;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;}

.scorePlate{left:26px;top:16px;width:300px;height:160px;background-image:url("../assets/hud_plates_01_score_plate.webp");}
.scorePlate .plateLabel{top:37px;font-size:18px;color:var(--ink);}
.scorePlate .plateValue{top:73px;font-size:58px;color:var(--cream);}

.timerPlate{left:50%;margin-left:-105px;top:16px;width:210px;height:132px;background-image:url("../assets/hud_plates_02_timer_plate.webp");}
.timerPlate .plateLabel{top:47px;font-size:13px;letter-spacing:3.2px;color:var(--cream-2);}
.timerPlate .plateValue{top:64px;font-size:37px;color:var(--cream);}

.bestPlate{left:calc(var(--dw) - 276px);top:16px;width:250px;height:138px;background-image:url("../assets/hud_plates_03_best_plate.webp");}
.bestPlate .plateLabel{top:34px;font-size:16px;color:var(--ink);}
.bestPlate .plateValue{top:59px;font-size:42px;color:var(--cream);}

.scoreValue.tick{animation:scoreTick .26s cubic-bezier(.2,1.7,.5,1);}
@keyframes scoreTick{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}

.pauseBtn{
  position:absolute;left:calc(var(--dw) - 92px);top:166px;width:66px;height:66px;
  pointer-events:auto;
}
.pauseBtn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(3px 4px 0 rgba(29,20,16,.35));}
.pauseBtn:active{transform:scale(.94);}

.comboBadge{
  position:absolute;left:26px;top:188px;width:268px;height:120px;
  background-image:url("../assets/hud_plates_04_combo_flash.webp");
  background-repeat:no-repeat;background-size:100% 100%;
  opacity:0;visibility:hidden;
  transform:rotate(-3deg);
}
.comboBadge.on{
  visibility:visible;
  animation:comboStamp .34s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes comboStamp{
  0%{opacity:0;transform:rotate(-3deg) scale(.42);}
  62%{opacity:1;transform:rotate(-3deg) scale(1.08);}
  100%{opacity:1;transform:rotate(-3deg) scale(1);}
}
.comboBadge span{
  position:absolute;left:8%;right:8%;top:35%;height:34%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Staatliches',sans-serif;
  font-size:30px;letter-spacing:1.5px;color:var(--ink);
  transform:rotate(2.4deg);
}

.dodgePlate{
  left:26px;top:314px;width:168px;height:93px;
  background-image:url("../assets/hud_plates_03_best_plate.webp");
}
.dodgePlate .plateLabel{top:21px;font-size:12px;letter-spacing:2px;color:var(--ink);}
.dodgePlate .plateValue{top:42px;font-size:29px;color:var(--cream);}

.dial{
  position:absolute;left:calc(var(--dw) - 160px);top:602px;width:96px;height:93px;
  pointer-events:none;
  filter:drop-shadow(3px 4px 0 rgba(29,20,16,.28));
}
.dial img{position:absolute;inset:0;width:100%;height:100%;}
.dialShade{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(rgba(29,20,16,.76) var(--p,0%),rgba(29,20,16,0) 0);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 53%,#000 54%);
  mask:radial-gradient(circle at 50% 50%,transparent 53%,#000 54%);
}

.keyHint{
  position:absolute;left:0;right:0;top:866px;
  text-align:center;
  font-weight:600;font-size:15px;letter-spacing:2px;
  color:rgba(243,230,206,.88);
  text-shadow:1px 2px 0 rgba(29,20,16,.55);
  transition:opacity .8s linear;
}
.keyHint.dim{opacity:.32;}

/* ---------------- thumb controls ---------------- */
.controls{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .2s linear,visibility .2s linear;
}
.controls.on{opacity:1;visibility:visible;}
.controls.idle{opacity:.55;}

.joyZone{
  position:absolute;left:0;bottom:0;width:330px;height:270px;
  pointer-events:auto;touch-action:none;
}
.joyBase{
  position:absolute;left:28px;top:60px;width:250px;height:188px;
  pointer-events:none;
  filter:drop-shadow(4px 5px 0 rgba(29,20,16,.3));
}
.joyKnob{
  position:absolute;left:153px;top:154px;width:120px;height:106px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(3px 4px 0 rgba(29,20,16,.35));
}

.dodgeWrap{
  position:absolute;left:calc(var(--dw) - 248px);top:674px;width:240px;height:218px;
  pointer-events:none;
}
.dodgeRing{
  position:absolute;left:12px;top:8px;width:214px;height:160px;
  opacity:.85;pointer-events:none;
}
.dodgeBtn{
  position:absolute;left:32px;top:30px;width:172px;height:170px;
  pointer-events:auto;touch-action:none;
  filter:drop-shadow(5px 6px 0 rgba(29,20,16,.32));
  transition:transform .08s linear,filter .08s linear;
}
.dodgeBtn img{width:100%;height:100%;object-fit:contain;}
.dodgeBtn:active{transform:scale(.95);}
.dodgeBtn.cooling{filter:grayscale(.35) brightness(.8) drop-shadow(4px 5px 0 rgba(29,20,16,.3));}
.dodgeWord{
  position:absolute;left:0;right:0;bottom:23px;text-align:center;
  font-family:'Staatliches',sans-serif;font-size:22px;letter-spacing:2px;
  color:var(--cream);text-shadow:2px 2px 0 rgba(29,20,16,.85);
}

/* ---------------- screens ---------------- */
.screen{
  position:absolute;inset:0;z-index:10;
  display:none;
  align-items:center;justify-content:center;
  flex-direction:column;
  background:rgba(29,21,17,.62);
  pointer-events:auto;
}
.screen.show{display:flex;}
#howScreen{z-index:20;}
#pauseScreen{z-index:22;}
#gameoverScreen{z-index:24;}

/* menu */
.menuCard{
  position:relative;
  width:660px;
  padding:20px 34px 30px;
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:12px 14px 0 rgba(20,14,10,.38);
  text-align:center;
}
.menuCard::before{
  content:"";
  position:absolute;inset:9px;
  border:1px solid rgba(200,145,73,.7);
  pointer-events:none;
}
.menuCrest{width:128px;height:127px;margin:0 auto 4px;object-fit:contain;}
.titleBlock{display:flex;flex-direction:column;line-height:.9;margin-top:-6px;}
.titleInk{
  font-family:'Staatliches',sans-serif;font-size:88px;letter-spacing:1px;
  color:var(--ink);
}
.titleGold{
  font-family:'Staatliches',sans-serif;font-size:39px;letter-spacing:2.4px;
  color:#D9941F;margin-top:6px;
}
.menuBest{
  margin:12px 0 10px;
  font-size:17px;font-weight:700;letter-spacing:3.4px;color:var(--ink);
}
.menuBest b{font-weight:900;font-size:19px;}

.plaque{
  position:relative;
  background-repeat:no-repeat;
  background-size:100% 100%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s linear,filter .08s linear;
}
.plaque span{
  display:block;
  font-family:'Staatliches',sans-serif;
  color:var(--ink);
  text-align:center;
  transform:translateY(-1px);
}
.plaque:active{transform:scale(.97);filter:brightness(.96);}
.playPlaque{background-image:url("../assets/menu_buttons_01_play_plaque.webp");}
.secondPlaque{background-image:url("../assets/menu_buttons_02_secondary_plaque.webp");}

.playPlaque{width:350px;height:176px;margin:0 auto;}
.playPlaque span{font-size:58px;letter-spacing:3px;color:var(--ink);}
.howBtn{width:266px;height:146px;margin:10px auto 0;}
.howBtn span{font-size:25px;letter-spacing:1.6px;color:var(--ink);}

.menuSound{
  position:absolute;right:26px;top:20px;
  width:92px;padding:0;text-align:center;
  pointer-events:auto;
}
.menuSound img{width:70px;height:70px;margin:0 auto;object-fit:contain;filter:drop-shadow(3px 4px 0 rgba(20,14,10,.5));}
.menuSound span{
  display:block;margin-top:2px;
  font-size:13px;font-weight:700;letter-spacing:2px;color:var(--cream);
  text-shadow:1px 2px 0 rgba(20,14,10,.7);
}
.soundDot{display:none !important;}

/* how to play */
.howCard{
  position:relative;width:930px;padding:26px 44px 28px;
  background:var(--cream);border:3px solid var(--ink);
  box-shadow:12px 14px 0 rgba(20,14,10,.38);
}
.howCard::before{content:"";position:absolute;inset:9px;border:1px solid rgba(200,145,73,.7);pointer-events:none;}
.howKicker{display:block;text-align:center;font-size:14px;font-weight:700;letter-spacing:4px;color:var(--maroon);}
.howCard h2{
  margin:2px 0 14px;text-align:center;
  font-family:'Staatliches',sans-serif;font-size:56px;letter-spacing:1px;color:var(--ink);
  line-height:1;
}
.howGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;}
.howItem h3{
  margin:0 0 2px;font-size:18px;letter-spacing:2.4px;color:var(--oxblood);font-weight:800;
}
.howItem p{margin:0;font-size:21px;line-height:1.22;color:var(--ink);font-weight:400;}
.howMarks{display:flex;gap:26px;justify-content:center;align-items:flex-end;margin:14px 0 8px;}
.howMark{width:250px;text-align:center;}
.howMark img{width:250px;height:82px;object-fit:contain;margin:0 auto 2px;}
.howMark span{font-size:13px;font-weight:800;letter-spacing:3px;color:var(--maroon);}
.closeHow{width:230px;height:126px;margin:4px auto 0;}
.closeHow span{font-size:24px;color:var(--ink);}

/* pause */
.pauseCard{
  position:relative;width:590px;padding:20px 42px 26px;
  background:var(--cream);border:3px solid var(--ink);
  box-shadow:12px 14px 0 rgba(20,14,10,.38);
  text-align:center;
}
.pauseCard::before{content:"";position:absolute;inset:9px;border:1px solid rgba(200,145,73,.7);pointer-events:none;}
.smallCrest{width:86px;height:85px;object-fit:contain;margin:0 auto 0;}
.pauseCard h2{
  margin:0 0 12px;font-family:'Staatliches',sans-serif;font-size:62px;line-height:1;
  letter-spacing:2px;color:var(--ink);
}
.resumePlaque{width:322px;height:162px;margin:0 auto;}
.resumePlaque span{font-size:44px;}
.twoRow{display:flex;gap:16px;justify-content:center;margin-top:10px;}
.twoRow .secondPlaque{width:220px;height:124px;}
.twoRow .secondPlaque span{font-size:21px;color:var(--ink);}
.soundPlaque{width:270px;height:124px;margin:12px auto 0;}
.soundPlaque span{font-size:21px;color:var(--ink);}
.pauseHint{margin:12px 0 0;font-size:14px;letter-spacing:2px;font-weight:600;color:var(--maroon);}

/* game over */
.gameoverTitle{
  margin:0 0 14px;
  font-family:'Staatliches',sans-serif;
  font-size:124px;line-height:.9;letter-spacing:3px;
  color:var(--cream);
  text-shadow:4px 5px 0 rgba(29,20,16,.9);
}
.overCrest{width:92px;height:91px;margin-bottom:-6px;}
.overCartel{
  position:relative;
  width:640px;padding:22px 30px;
  display:grid;grid-template-columns:1.25fr 1fr;gap:10px 26px;
  background:var(--cream);border:3px solid var(--ink);
  box-shadow:12px 14px 0 rgba(20,14,10,.38);
}
.overCartel::before{content:"";position:absolute;inset:8px;border:1px solid rgba(200,145,73,.65);pointer-events:none;}
.overStat{position:relative;z-index:1;padding-left:4px;}
.overStat span{display:block;font-size:13px;font-weight:800;letter-spacing:2.6px;color:var(--maroon);}
.overStat b{display:block;font-size:40px;line-height:1;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}
.overStat.big b{font-size:70px;color:var(--oxblood);}
.newBest{
  position:absolute;right:-20px;top:-22px;z-index:2;
  padding:5px 16px;
  background:var(--saffron);border:3px solid var(--ink);
  font-family:'Staatliches',sans-serif;font-size:24px;letter-spacing:2px;color:var(--ink);
  transform:rotate(4deg);
  display:none;
}
.newBest.show{display:block;}
.overButtons{display:flex;gap:18px;align-items:center;margin-top:18px;}
.retryPlaque{width:300px;height:152px;}
.retryPlaque span{font-size:44px;}
.overButtons .secondPlaque{width:236px;height:132px;}
.overButtons .secondPlaque span{font-size:21px;color:var(--ink);}

/* toast */
.toast{
  position:absolute;left:86px;top:352px;z-index:30;
  font-family:'Staatliches',sans-serif;font-size:66px;letter-spacing:2px;
  color:var(--saffron);
  text-shadow:3px 3px 0 rgba(29,20,16,.95);
  opacity:0;visibility:hidden;pointer-events:none;
  white-space:nowrap;
}
.toast.show{visibility:visible;animation:nearMiss .75s cubic-bezier(.2,.9,.3,1) both;}
@keyframes nearMiss{
  0%{opacity:0;transform:translateX(-170px) rotate(-4deg) scale(.94);}
  12%{opacity:1;transform:translateX(12px) rotate(1.6deg) scale(1.03);}
  22%{opacity:1;transform:translateX(0) rotate(-.8deg) scale(1);}
  70%{opacity:1;transform:translateX(4px) rotate(-.4deg) scale(1);}
  100%{opacity:0;transform:translateX(18px) rotate(0) scale(1);}
}

/* loading */
.loading{
  position:absolute;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:var(--cream);
  transition:opacity .35s linear;
  pointer-events:auto;
}
.loading.done{opacity:0;pointer-events:none;}
.loadCrest{width:116px;height:115px;object-fit:contain;margin-bottom:6px;}
.loadTitle{font-family:'Staatliches',sans-serif;font-size:68px;line-height:.9;color:var(--ink);letter-spacing:1px;}
.loadSub{font-family:'Staatliches',sans-serif;font-size:27px;letter-spacing:3px;color:#D9941F;margin-top:4px;}
.loadRule{width:280px;height:4px;background:rgba(46,33,27,.18);margin:18px 0 8px;position:relative;overflow:hidden;}
.loadRule i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--oxblood);transition:width .2s linear;}
.loadText{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--maroon);}

/* rotate */
#rotate{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  background:var(--cream);
  padding:6vw;
}
body.is-portrait #rotate{display:flex;}
body.is-portrait #frame{visibility:hidden;}
.rotateInner{width:min(92vw,560px);text-align:center;color:var(--ink);}
.rotateCrest{width:88px;height:87px;object-fit:contain;margin:0 auto 10px;}
.rotateInner h1{
  margin:0 0 10px;
  font-family:'Staatliches',sans-serif;
  font-size:clamp(25px,7vw,44px);line-height:1;letter-spacing:1px;color:var(--ink);
}
.rotateInner h1::after{
  content:"";display:block;width:64%;height:1px;margin:14px auto 0;background:rgba(200,145,73,.8);
}
.rotatePic{width:min(52vw,240px);height:auto;margin:20px auto 16px;object-fit:contain;}
.rotateInner p{
  margin:0;font-size:clamp(15px,4.2vw,23px);font-weight:800;letter-spacing:1.6px;color:var(--ink);
  line-height:1.25;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}


/* ---------------- compact (small landscape screens) ---------------- */
body.compact .menuCard{width:760px;padding:24px 40px 34px;}
body.compact .menuCrest{width:150px;height:149px;}
body.compact .titleInk{font-size:102px;}
body.compact .titleGold{font-size:46px;letter-spacing:2.8px;}
body.compact .menuBest{font-size:20px;}
body.compact .playPlaque{width:400px;height:200px;}
body.compact .playPlaque span{font-size:66px;}
body.compact .howBtn{width:306px;height:168px;margin-top:12px;}
body.compact .howBtn span{font-size:30px;}
body.compact .menuSound{right:22px;top:16px;width:104px;}
body.compact .menuSound img{width:84px;height:84px;}
body.compact .menuSound span{font-size:20px;letter-spacing:1.4px;}

body.compact .scorePlate .plateLabel{top:34px;font-size:23px;}
body.compact .scorePlate .plateValue{top:70px;font-size:68px;}
body.compact .timerPlate .plateLabel{top:45px;font-size:18px;}
body.compact .timerPlate .plateValue{top:63px;font-size:44px;}
body.compact .bestPlate .plateLabel{top:32px;font-size:21px;}
body.compact .bestPlate .plateValue{top:62px;font-size:46px;}
body.compact .pauseBtn{left:calc(var(--dw) - 114px);top:160px;width:88px;height:88px;}
body.compact .comboBadge span{font-size:36px;}
body.compact .dodgePlate{left:26px;top:310px;width:196px;height:109px;}
body.compact .dodgePlate .plateLabel{top:22px;font-size:15px;}
body.compact .dodgePlate .plateValue{top:47px;font-size:34px;}
body.compact .keyHint{font-size:22px;letter-spacing:1.4px;}
body.compact .dodgeWord{font-size:27px;}
body.compact .toast{font-size:88px;left:60px;top:330px;}

body.compact .howCard{width:1110px;padding:30px 50px 32px;}
body.compact .howKicker{font-size:17px;}
body.compact .howCard h2{font-size:66px;margin-bottom:16px;}
body.compact .howItem h3{font-size:21px;}
body.compact .howItem p{font-size:27px;line-height:1.2;}
body.compact .howMark{width:280px;}
body.compact .howMark img{width:280px;height:92px;}
body.compact .howMark span{font-size:16px;}
body.compact .closeHow{width:260px;height:142px;}
body.compact .closeHow span{font-size:28px;}

body.compact .pauseCard{width:700px;padding:24px 48px 30px;}
body.compact .pauseCard h2{font-size:76px;}
body.compact .resumePlaque{width:372px;height:186px;}
body.compact .resumePlaque span{font-size:50px;}
body.compact .twoRow .secondPlaque{width:256px;height:146px;}
body.compact .twoRow .secondPlaque span{font-size:25px;}
body.compact .soundPlaque{width:310px;height:146px;}
body.compact .soundPlaque span{font-size:25px;}
body.compact .pauseHint{font-size:18px;letter-spacing:1.4px;}
body.compact .smallCrest{width:100px;height:99px;}

body.compact .gameoverTitle{font-size:152px;letter-spacing:3px;}
body.compact .overCrest{width:108px;height:107px;}
body.compact .overCartel{width:770px;padding:26px 36px;gap:12px 30px;}
body.compact .overStat span{font-size:16px;letter-spacing:2.2px;}
body.compact .overStat b{font-size:48px;}
body.compact .overStat.big b{font-size:86px;}
body.compact .newBest{font-size:28px;}
body.compact .retryPlaque{width:346px;height:174px;}
body.compact .retryPlaque span{font-size:50px;}
body.compact .overButtons .secondPlaque{width:276px;height:154px;}
body.compact .overButtons .secondPlaque span{font-size:25px;}