/* (c) 2026 Spooky Digital Ltd⁠‌​‌​​​​​‌​​​​‌‌‌‌‌‌‌‌‌‌‌​‌​​​​​‌‌​‌​​​​‌​​‌​​​‌​‌​‌​​​‌‌‌​‌​‌​​‌⁠ - spookydigital.io - licensed to Dart Gear Ltd for Dart Gear live draws. Not for reuse in other products. Build a087ff41a122a3a9. */
@font-face { font-family: Anton; src: url(/assets/fonts/anton-400.woff2) format("woff2"); font-display: block; }
@font-face { font-family: Chalk; src: url(/assets/fonts/cabinsketch-700.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: Manrope; src: url(/assets/fonts/manrope-700.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: Manrope; src: url(/assets/fonts/manrope-800.woff2) format("woff2"); font-weight: 800; font-display: block; }
:root { --green: #2fa52f; --green-d: #247424; --red: #e3202a; --gold: #f4c542; --ink: #0d0d0d; --cream: #f3ead2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: Manrope, system-ui, sans-serif; color: #fff; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #0b0806; }
#bg { position: absolute; inset: 0; background: url(/assets/pub.webp) center / cover no-repeat; }
#bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.8) 100%); }

#top { position: absolute; left: 0; top: 0; width: 1920px; height: 128px; display: flex; align-items: center; gap: 28px; padding: 0 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.7)); border-bottom: 3px solid var(--green-d); z-index: 5; }
#logo { height: 88px; width: auto; }
#title { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
#styleName { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; }
#drawTitle { font-size: 32px; font-weight: 800; color: #d8d8d8; max-width: 1000px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#prizeBox { display: flex; flex-direction: column; align-items: flex-end; max-width: 520px; min-width: 260px; }
#prizeBox span { font-size: 32px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; }
#prizeBox b { font-size: 40px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
#prizeBox:empty, #prizeBox.none { visibility: hidden; }

#redraw { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); z-index: 6; background: var(--red); color: #fff; font-weight: 800; font-size: 32px;
  padding: 8px 26px; border-radius: 10px; max-width: 1500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#game { position: absolute; left: 0; top: 128px; width: 1920px; height: 852px; z-index: 2; }

#seal { position: absolute; left: 0; bottom: 0; width: 1920px; height: 100px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 18px;
  background: rgba(0,0,0,.86); border-top: 3px solid var(--green-d); font-size: 32px; font-weight: 700; color: #e9e9e9; padding: 0 40px; white-space: nowrap; }
#seal b { color: var(--gold); }
#seal code { font-family: Consolas, "Courier New", monospace; font-size: 32px; color: #9fe39f; }
#seal .lock { width: 30px; height: 36px; border: 5px solid var(--gold); border-radius: 6px; position: relative; top: 6px; }
#seal .lock::before { content: ""; position: absolute; left: 3px; top: -20px; width: 14px; height: 18px; border: 5px solid var(--gold); border-bottom: 0; border-radius: 10px 10px 0 0; }

#check { position: absolute; left: 160px; top: 740px; width: 1600px; z-index: 30; background: rgba(6,10,6,.94); border: 3px solid var(--green); border-radius: 18px;
  padding: 18px 28px; font-size: 32px; line-height: 1.32; box-shadow: 0 16px 50px rgba(0,0,0,.7); }
#check h3 { margin: 0 0 6px; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 40px; letter-spacing: 1px; text-transform: uppercase; display: flex; gap: 18px; align-items: center; }
#check .ok { color: #7ef07e; } #check .no { color: #ff6a6a; }
#check code { font-family: Consolas, "Courier New", monospace; font-size: 32px; color: #b9f3b9; }
#check p { margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#idle { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.55); }
#idle img { width: 620px; height: auto; }
#idle b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 110px; text-transform: uppercase; letter-spacing: 4px; }
#idle span { font-size: 40px; font-weight: 800; color: #ddd; }
body.on #idle { display: none; }

#sound, #checkLink { position: fixed; z-index: 50; font: 800 18px Manrope, system-ui, sans-serif; border-radius: 999px; padding: 12px 22px; text-decoration: none; }
#sound { right: 16px; bottom: 16px; background: var(--green-d); color: #fff; border: 0; cursor: pointer; }
#checkLink { left: 16px; bottom: 16px; background: rgba(0,0,0,.75); color: #fff; border: 2px solid var(--green-d); }
#sound:focus-visible, #checkLink:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.bob { position: absolute; z-index: 3; pointer-events: none; }
.bob .fig { position: absolute; left: 50%; bottom: 0; transform-origin: 50% 100%; }
.bob img { position: absolute; display: block; }
.bob .bbody { left: 0; top: 0; width: 100%; height: 100%; }
.bob .shadow { position: absolute; left: 10%; right: 10%; bottom: -14px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.6), rgba(0,0,0,0) 70%); }
.dartfly { position: absolute; left: 0; top: 0; width: 150px; height: auto; z-index: 20; pointer-events: none; transform-origin: 100% 50%; }
canvas.fx { position: absolute; left: 0; top: 0; pointer-events: none; }

.ll-frame { position: absolute; left: 380px; top: 26px; width: 1160px; height: 700px; border-radius: 16px; padding: 22px;
  background: url(/assets/oak.webp) center / cover; box-shadow: 0 24px 60px rgba(0,0,0,.75), inset 0 0 0 3px rgba(0,0,0,.4); }
.ll-board { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: url(/assets/chalk.webp) center / cover #1d1f1d; box-shadow: inset 0 0 40px rgba(0,0,0,.8); }
.ll-name { position: absolute; font-family: Chalk, "Comic Sans MS", cursive; font-weight: 700; color: #f2f2ea; text-shadow: 0 0 2px rgba(255,255,255,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: left var(--t6, .6s) ease, top var(--t6, .6s) ease, font-size var(--t6, .6s) ease, width var(--t6, .6s) ease, opacity var(--t5, .5s) ease; }
.ll-name.gone { opacity: 0; }
.ll-name.win { color: var(--gold); text-shadow: 0 0 18px rgba(244,197,66,.8); }
.ll-count { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: Chalk, cursive; font-weight: 700; font-size: 48px; color: #fff; text-shadow: 0 2px 6px #000; z-index: 2; }
.ll-big { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: Chalk, cursive; font-weight: 700; font-size: 96px; color: #fff; z-index: 2; text-shadow: 0 4px 12px #000; transform: translateY(-50%); }
.slowmo .ll-frame { box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.75); }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; width: 1920px; height: 90px; background: #000; z-index: 25; }
.bars::before { top: 0; } .bars::after { bottom: 0; }
.tag { position: absolute; z-index: 26; left: 50%; transform: translateX(-50%); top: 110px; font-family: Anton, Impact, sans-serif; font-size: 64px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); text-shadow: 0 4px 16px #000; white-space: nowrap; }

.tb-bar { position: absolute; left: 0; top: 650px; width: 1920px; height: 202px; background: url(/assets/oak.webp) center / cover; box-shadow: 0 -10px 30px rgba(0,0,0,.6); }
.tb-board { position: absolute; left: 1090px; top: 30px; width: 790px; height: 600px; border-radius: 16px; padding: 18px; background: url(/assets/oak.webp) center / cover; box-shadow: 0 20px 50px rgba(0,0,0,.7); }
.tb-list { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; background: url(/assets/chalk.webp) center / cover #1d1f1d; }
.tb-scroll { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.tb-row { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; font-family: Chalk, cursive; font-weight: 700; font-size: 38px; color: #f2f2ea; white-space: nowrap; }
.tb-row i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 128px; height: 46px; padding: 0 10px; border-radius: 23px; background: var(--cream); color: #111; font-family: Anton, Impact, sans-serif; font-size: 32px; }
.tb-row span { overflow: hidden; text-overflow: ellipsis; }
.tb-row.win { background: rgba(244,197,66,.22); color: var(--gold); }
.tb-cols { display: grid; grid-template-columns: 1fr 1fr; }
.tb-note { position: absolute; left: 1090px; top: 640px; width: 790px; text-align: center; font-size: 32px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px #000; z-index: 2; }
.tb-pop { position: absolute; z-index: 22; width: 360px; height: 360px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff, #f3ead2 45%, #c9b98e 100%); color: #111; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.tb-pop b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 150px; line-height: 1; }
.tb-pop span { font-size: 32px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
.tb-winline { position: absolute; left: 50%; transform: translateX(-50%); top: 690px; max-width: 1700px; z-index: 23; font-family: Anton, Impact, sans-serif; font-size: 80px; line-height: 1.2; color: var(--gold); background: rgba(0,0,0,.82); border: 3px solid var(--gold); border-radius: 20px; padding: 6px 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-plate { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); width: 520px; height: 150px; border-radius: 75px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.88); border: 4px solid var(--gold); font-family: Anton, Impact, sans-serif; font-size: 72px; color: #fff; white-space: nowrap; overflow: hidden; padding: 0 30px; box-shadow: 0 10px 40px rgba(0,0,0,.8); }
.sp-plate.win { color: var(--gold); box-shadow: 0 0 60px rgba(244,197,66,.7); }
.sp-pointer { position: absolute; left: 50%; top: 4px; z-index: 5; width: 0; height: 0; transform: translateX(-50%); border-left: 34px solid transparent; border-right: 34px solid transparent; border-top: 60px solid var(--gold); filter: drop-shadow(0 6px 6px rgba(0,0,0,.6)); }
.sp-count { position: absolute; right: 40px; top: 24px; text-align: right; z-index: 4; font-size: 36px; font-weight: 800; text-shadow: 0 2px 8px #000; }

#walk { position: absolute; inset: 0; z-index: 28; background: #000; overflow: hidden; }
#walk .smoke { position: absolute; width: 1400px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse, rgba(200,200,210,.30), rgba(200,200,210,0) 65%); }
#walk .beam { position: absolute; top: -120px; width: 420px; height: 1500px; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255,250,220,.55), rgba(255,250,220,0) 85%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); }
#walk .glow { position: absolute; left: 460px; top: 160px; width: 1000px; height: 760px; border-radius: 50%; background: radial-gradient(ellipse, rgba(47,165,47,.45), rgba(47,165,47,0) 70%); opacity: 0; }
#walk .intro { position: absolute; left: 0; right: 0; top: 230px; text-align: center; font-family: Anton, Impact, sans-serif; font-size: 72px; letter-spacing: 3px; text-transform: uppercase; color: #e8e8e8; opacity: 0; }
#walk .from { position: absolute; left: 0; right: 0; top: 330px; text-align: center; font-size: 48px; font-weight: 800; color: var(--gold); opacity: 0; text-transform: uppercase; letter-spacing: 2px; }
#walk .badge { position: absolute; left: 50%; top: 90px; width: 170px; height: 170px; margin-left: -85px; object-fit: contain; opacity: 0; }
#walk .name { position: absolute; left: 80px; right: 80px; top: 430px; text-align: center; font-family: Anton, Impact, sans-serif; font-size: 190px; line-height: 1.05; color: #fff;
  text-shadow: 0 0 40px rgba(47,165,47,.9), 0 8px 30px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
#walk .wins { position: absolute; left: 80px; right: 80px; top: 650px; text-align: center; font-size: 54px; font-weight: 800; color: #fff; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#walk .wins b { color: var(--gold); }
#walk .wlogo { position: absolute; left: 40px; top: 30px; height: 88px; width: auto; }