:root{
  --plum:#221527;
  --plum-deep:#170e1b;
  --custard:#ffd166;
  --splat:#e63946;
  --cream:#fff6e5;
  --mint:#7be0c0;
  --leather:#5a3a22;
  --leather-hi:#7d5330;
  --ink:#14101a;
  --display:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;
  --body:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--body);
  color:var(--cream);
  background:var(--plum-deep);
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 26px,rgba(0,0,0,0) 26px 52px),
    radial-gradient(120% 90% at 50% -10%, #3a2140 0%, var(--plum) 45%, var(--plum-deep) 100%);
  display:flex;flex-direction:column;
  min-height:100dvh;
  overflow-x:hidden;
}
header{position:relative;padding:0 0 14px;text-align:center;flex:0 0 auto}
.awning{height:22px;background:repeating-linear-gradient(90deg,var(--splat) 0 34px,var(--cream) 34px 68px);
  box-shadow:0 3px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.45)}
.awning::after{content:"";display:block;height:12px;
  background:repeating-linear-gradient(90deg,var(--splat) 0 34px,var(--cream) 34px 68px);
  -webkit-mask:radial-gradient(circle 12px at 17px 0,transparent 0 12px,#000 12.5px) repeat-x 0 0/34px 12px;
          mask:radial-gradient(circle 12px at 17px 0,transparent 0 12px,#000 12.5px) repeat-x 0 0/34px 12px}
h1{
  font-family:var(--display);font-size:clamp(34px,7.5vw,62px);letter-spacing:.02em;line-height:.92;
  margin:14px 0 2px;color:var(--custard);text-transform:uppercase;
  text-shadow:3px 3px 0 var(--splat), 6px 6px 0 rgba(0,0,0,.45)
}
h1 em{font-style:normal;color:var(--cream);display:inline-block;transform:rotate(-3deg)}
.tag{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,246,229,.62)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px 14px 0}
button{font-family:var(--body);cursor:pointer;border:0;background:none;color:inherit}
.btn{
  font-size:13px;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;background:rgba(255,246,229,.08);
  border:2px solid rgba(255,246,229,.22);color:var(--cream);transition:transform .12s,background .12s,border-color .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px
}
.btn:hover{background:rgba(255,246,229,.16);border-color:var(--custard);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--custard);color:var(--ink);border-color:var(--custard)}
.btn.primary:hover{background:#ffdd8b}
.btn[aria-pressed="false"]{opacity:.55}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn:disabled:hover{transform:none;background:rgba(255,246,229,.08);border-color:rgba(255,246,229,.22)}
.btn[aria-pressed="true"]{border-color:var(--mint)}
.btn:focus-visible,.pouch:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.btn.iconOnly{width:46px;min-width:46px;padding:0;border-radius:999px}
.btn.iconOnly .iconSvg{width:22px;height:22px;display:block}
.btn.iconOnly .label{display:none}
.btn.iconPair{min-width:72px;padding:0 12px;border-radius:999px;gap:8px}
.btn.iconPair .iconSvg{width:21px;height:21px;display:block}
.btn.iconPair .iconDivider{width:1px;height:20px;background:currentColor;opacity:.25}
main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 14px 8px;gap:10px}
.frame{
  position:relative;padding:12px;border-radius:6px;
  background:linear-gradient(160deg,#f0e0c0,#c9a874 40%,#8d6a3f);
  box-shadow:0 24px 50px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.25);
  max-width:100%
}
.frame.hit{animation:shake .22s ease-out}
@keyframes shake{
  0%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-7px,4px) rotate(-.7deg)}
  55%{transform:translate(6px,-3px) rotate(.6deg)}
  100%{transform:translate(0,0) rotate(0)}
}
canvas#stage{
  display:block;max-width:100%;max-height:58dvh;width:auto;height:auto;
  background:#111;cursor:crosshair;touch-action:none;border-radius:2px
}
.frame.dragover{outline:4px dashed var(--mint);outline-offset:6px}
.statusBubble{
  display:none;
}
.statusBubble.good{color:var(--mint)}
.statusBubble.bad{color:#ff9a9a}
.gameOverlay{
  position:absolute;inset:12px;z-index:8;
  display:none;align-items:center;justify-content:center;
  background:rgba(20,16,26,.74);backdrop-filter:blur(2px);
  border-radius:2px;text-align:center;padding:22px
}
.gameOverlay.show{display:flex}
.gameOverlay .panel{
  max-width:min(84vw,540px);
  padding:22px 24px 20px;
  border-radius:18px;
  background:rgba(29,19,33,.92);
  border:2px solid rgba(255,246,229,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.45)
}
.gameOverlay .eyebrow{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,246,229,.6)
}
.gameOverlay .title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(32px,7vw,64px);
  line-height:.9;
  color:var(--custard);
  text-transform:uppercase;
  text-shadow:3px 3px 0 var(--splat),5px 5px 0 rgba(0,0,0,.35)
}
.gameOverlay .sub{
  margin:10px auto 0;
  max-width:34ch;
  font-size:15px;
  line-height:1.4;
  color:var(--cream)
}
.gameOverlay .metrics{
  margin-top:14px;
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap
}
.gameOverlay .metric{
  min-width:110px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,246,229,.06);
  border:1px solid rgba(255,246,229,.14)
}
.gameOverlay .metric b{
  display:block;
  font-size:28px;
  line-height:1;
  color:var(--custard)
}
.gameOverlay .metric span{
  display:block;
  margin-top:4px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,246,229,.62)
}
.gameOverlay .actions{
  margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap
}
.readout{
  display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:rgba(255,246,229,.75)
}
.readout b{color:var(--custard)}
.readout .faceText b.good{color:var(--mint)}
.readout .faceText b.bad{color:#ff9a9a}
.meter{
  width:150px;height:9px;border-radius:9px;background:rgba(0,0,0,.45);
  border:1px solid rgba(255,246,229,.2);overflow:hidden
}
.meter i{
  display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--custard),var(--splat));transition:width .25s
}
.belt{
  flex:0 0 auto;position:relative;margin-top:6px;
  background:linear-gradient(180deg,var(--leather-hi),var(--leather) 30%,#3d2616);
  border-top:3px solid #2a1a0f;border-bottom:3px solid #1a0f08;
  box-shadow:0 -10px 30px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.12)
}
.belt::before,.belt::after{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,220,170,.35) 0 9px,transparent 9px 18px)
}
.belt::before{top:7px}.belt::after{bottom:7px}
.pouches{
  display:flex;gap:10px;overflow-x:auto;padding:16px 14px;justify-content:center;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.4) transparent
}
.pouch{
  flex:0 0 auto;width:92px;padding:8px 6px 7px;border-radius:10px 10px 14px 14px;
  background:linear-gradient(180deg,#8a5c34,#5c3a20);
  border:2px solid #3a2413;box-shadow:0 4px 0 #2b1a0d, inset 0 1px 0 rgba(255,255,255,.18);
  color:var(--cream);text-align:center;transition:transform .12s,box-shadow .12s,border-color .12s
}
.pouch:hover{transform:translateY(-3px);box-shadow:0 7px 0 #2b1a0d}
.pouch[aria-pressed="true"]{
  border-color:var(--custard);background:linear-gradient(180deg,#a97243,#6d4526);
  box-shadow:0 4px 0 #2b1a0d, 0 0 0 3px rgba(255,209,102,.35)
}
.pouch.action{
  width:116px;
  border-color:#8e2d36;
  background:linear-gradient(180deg,#8f2e3c,#652129);
}
.pouch.action:hover{box-shadow:0 7px 0 #2b1a0d, 0 0 0 2px rgba(255,209,102,.18)}
.pouch.action .nm{font-size:10px}
.pouch.action .ct{color:rgba(255,246,229,.8)}
.pouch canvas{display:block;margin:0 auto;width:44px;height:44px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.pouch .nm{display:block;font-size:10.5px;font-weight:bold;letter-spacing:.05em;text-transform:uppercase;margin-top:5px;line-height:1.15}
.pouch .ct{display:block;font-family:var(--mono);font-size:10px;color:rgba(255,246,229,.55)}
.hint{text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,246,229,.42);padding:0 14px 12px;margin:0}
.resultsPanel{
  width:min(920px,calc(100% - 28px));
  margin:8px auto 2px;
  display:none;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:16px 18px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(58,33,64,.96),rgba(24,14,28,.98));
  border:2px solid rgba(255,209,102,.42);
  box-shadow:0 12px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
.resultsPanel.show{display:grid}
.resultsLead{min-width:0}
.resultsKicker{
  margin:0 0 3px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mint)
}
.resultsTitle{
  margin:0;
  font-family:var(--display);
  font-size:clamp(25px,4.4vw,40px);
  line-height:.95;
  text-transform:uppercase;
  color:var(--custard);
  text-shadow:2px 2px 0 var(--splat),4px 4px 0 rgba(0,0,0,.3)
}
.resultsStats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px
}
.resultStat{
  min-width:88px;
  padding:8px 10px;
  border-radius:11px;
  background:rgba(255,246,229,.055);
  border:1px solid rgba(255,246,229,.13)
}
.resultStat.primary{
  background:rgba(255,209,102,.12);
  border-color:rgba(255,209,102,.36)
}
.resultStat b{
  display:block;
  font-size:25px;
  line-height:1;
  color:var(--cream)
}
.resultStat.primary b{color:var(--custard)}
.resultStat span{
  display:block;
  margin-top:3px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,246,229,.55)
}
.resultsActions{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:174px
}
.resultsActions .btn{width:100%}
.resultsActions .btn.saveResult{
  background:var(--custard);
  border-color:var(--custard);
  color:var(--ink)
}
@media(max-width:700px){
  .resultsPanel{grid-template-columns:1fr}
  .resultsActions{display:grid;grid-template-columns:1fr 1fr;min-width:0}
  .resultsActions .saveResult{grid-column:1/-1}
}
.burst{
  position:fixed;pointer-events:none;z-index:60;font-family:var(--display);font-size:44px;
  color:var(--custard);text-transform:uppercase;letter-spacing:.02em;
  text-shadow:3px 3px 0 var(--splat),5px 5px 0 rgba(0,0,0,.5);
  transform:translate(-50%,-50%) rotate(var(--r,-8deg));animation:pop .7s ease-out forwards
}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(.4)}
  25%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-160%) rotate(var(--r)) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .burst{animation-duration:.35s}
  .frame.hit{animation:none}
  .pouch:hover,.btn:hover{transform:none}
}
@media (max-width:560px){
  .pouches{justify-content:flex-start}
  .pouch{width:80px}
  .pouch.action{width:100px}
  canvas#stage{max-height:44dvh}
}