*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 2px,transparent 2px 7px),
    radial-gradient(circle at 30% 20%,#e0b54a,#b98a22 60%,#8a6414);
  font-family:'Oswald',sans-serif;color:#3a2412;
  display:flex;justify-content:center;padding:18px 8px 40px;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.table{width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:22px}
.device{
  position:relative;width:100%;border-radius:34px 34px 44px 44px;
  background:
    radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.2px) 0 0/5px 5px,
    linear-gradient(#f2e7cc,#e3d5b3);
  padding:22px 26px 18px;
  box-shadow:inset 0 3px 0 #fff8e6,inset 0 -9px 0 #c9b88f,inset 0 0 0 2px #cdbd96,
    0 26px 40px rgba(60,30,0,.55),0 6px 10px rgba(0,0,0,.3);
}
.screw{position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#eee,#999 60%,#666);
  box-shadow:inset 0 0 0 1px #555}
.screw::before,.screw::after{content:"";position:absolute;background:#444;left:6px;top:2px;width:2px;height:10px;border-radius:1px}
.screw::after{transform:rotate(90deg)}
.s1{top:12px;left:14px}.s2{top:12px;right:14px;transform:rotate(30deg)}.s3{bottom:14px;left:16px;transform:rotate(70deg)}.s4{bottom:14px;right:16px}
.seal{position:absolute;right:34px;bottom:8px;font:7px 'Oswald';background:#c9c3b2;color:#555;padding:2px 4px;border:1px dashed #888;transform:rotate(-4deg);line-height:1.1;text-align:center}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:0 14px}
.brand{font-size:11px;letter-spacing:3px;color:#6b3a1f;font-weight:700}
.power,.sound{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:1px;color:#6b3a1f}
.slide{width:44px;height:18px;background:#2a1a10;border-radius:4px;position:relative;cursor:pointer;box-shadow:inset 0 2px 3px #000}
.slide .knob{position:absolute;top:2px;left:2px;width:18px;height:14px;background:linear-gradient(#e8e0cc,#a89d82);border-radius:3px;transition:left .12s;box-shadow:0 1px 1px #000}
.slide.on .knob{left:24px}
.slide.small{width:34px;height:14px}.slide.small .knob{width:14px;height:10px}.slide.small.on .knob{left:18px}
.titlerow{text-align:center;margin:6px 0 4px}
h1{font-family:'Bungee',cursive;font-size:clamp(30px,7vw,52px);color:#c8551b;font-style:italic;letter-spacing:2px;
  text-shadow:2px 2px 0 #6b3a1f,4px 4px 0 rgba(107,58,31,.25);transform:skew(-8deg)}
.tag{font-family:'Righteous';font-size:12px;color:#6b3a1f;letter-spacing:1px}
.stripe{height:10px;margin:8px -26px 14px;background:linear-gradient(#c8551b 0 50%,#6b3a1f 50%)}
.window{position:relative;border-radius:14px;padding:8px;background:#1b120c;
  box-shadow:inset 0 4px 8px #000,0 1px 0 #fff8e6,0 -2px 0 #a8976f}
#canvas{display:block;width:100%;height:auto;border-radius:8px;background:#140404}
.gloss{position:absolute;inset:8px;border-radius:8px;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 28%,transparent 29%,transparent 70%,rgba(255,255,255,.04) 71%,transparent 85%)}
.panel{display:flex;gap:14px;align-items:center;margin-top:18px}
.grille{width:54px;height:54px;flex:none;border-radius:50%;
  background:radial-gradient(#2a1a10 2.2px,transparent 2.6px) 0 0/9px 9px;opacity:.85}
.btns{flex:1;display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.b{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit}
.b i{display:block;width:100%;max-width:74px;height:32px;border-radius:6px;transition:transform .05s,box-shadow .05s}
.orange i{background:linear-gradient(#f07a36,#c8551b);box-shadow:0 5px 0 #7a2e0b,0 7px 6px rgba(0,0,0,.35),inset 0 2px 0 #ffae7a}
.brown i{background:linear-gradient(#9a5a36,#6b3a1f);box-shadow:0 5px 0 #3a1c0a,0 7px 6px rgba(0,0,0,.35),inset 0 2px 0 #c28a66}
.b.down i,.start.down i{transform:translateY(4px);filter:brightness(.88)}
.orange.down i{box-shadow:0 1px 0 #7a2e0b,0 2px 2px rgba(0,0,0,.3),inset 0 2px 0 #ffae7a}
.brown.down i{box-shadow:0 1px 0 #3a1c0a,0 2px 2px rgba(0,0,0,.3),inset 0 2px 0 #c28a66}
.b span{font-size:clamp(8px,2vw,11px);letter-spacing:1px;font-weight:700;color:#3a2412}
.startwrap{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:1px}
.start{background:none;border:0;cursor:pointer}
.start i{display:block;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e4413a,#9b1410);
  box-shadow:0 5px 0 #5a0a06,0 8px 8px rgba(0,0,0,.35);transition:transform .05s}
.start.down i{box-shadow:0 1px 0 #5a0a06}
.sound{margin-top:8px;flex-direction:column;gap:3px}
.backnote{margin-top:14px;text-align:center;font-size:9px;letter-spacing:.5px;color:#8a7650;font-style:italic}
.card{width:92%;background:#fbf6e6;padding:16px 18px;font-family:'Special Elite',monospace;font-size:13px;line-height:1.5;color:#2d241a;
  box-shadow:0 8px 14px rgba(0,0,0,.3);transform:rotate(-.6deg);
  background-image:repeating-linear-gradient(#fbf6e6 0 22px,#e6dfca 22px 23px)}
.ticket{border:2px dashed #c8551b;padding:6px 10px;margin-bottom:10px;color:#9b1410;font-size:15px;text-align:center;min-height:38px}
.rules b{color:#6b3a1f}
.backup{display:block;margin:10px 0;font-size:11px;cursor:pointer}
.card a{color:#c8551b;font-weight:bold}
@media (max-width:520px){
  .device{padding:18px 12px 16px}.stripe{margin:8px -12px 12px}
  .grille{display:none}.panel{gap:8px}.row{gap:6px}.b i{height:36px}
  .start i{width:46px;height:46px}
}