/* ---------- stage: fixed 1600x900, scaled to the window ---------- */
body.bomb-page { overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #2a2f37 0%, #121418 55%, #07080a 100%); }
#stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: 50% 50%; overflow: clip; user-select: none; -webkit-user-select: none; }
#stage.shake { animation: shake 380ms; }
#stage.shake.big { animation: shake 900ms; }
@keyframes shake {
  0%, 100% { translate: 0 0; } 15% { translate: -12px 6px; } 30% { translate: 10px -8px; } 45% { translate: -8px -4px; }
  60% { translate: 6px 8px; } 75% { translate: -4px 2px; } 90% { translate: 2px -2px; }
}

/* ---------- 3D scene ---------- */
#scene { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 50% 32%; }
#cam { position: absolute; left: 50%; top: 478px; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-13deg); }
#spin { position: absolute; transform-style: preserve-3d; }
#spin.attract { animation: attract 18s linear infinite; }
@keyframes attract { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
#bomb { position: absolute; transform-style: preserve-3d; }
.face.side { transform: rotateY(var(--a, 0deg)) translateZ(var(--dist)); transition: transform 700ms cubic-bezier(.3,.9,.3,1); }
.face.top { transform: rotateY(var(--a, 0deg)) rotateX(90deg) translateZ(calc(var(--h) / 2)); transition: transform 700ms cubic-bezier(.3,.9,.3,1); }
.face.bottom { transform: rotateY(var(--a, 0deg)) rotateX(-90deg) translateZ(calc(var(--h) / 2)); transition: transform 700ms cubic-bezier(.3,.9,.3,1); }
.slot { position: absolute; top: 0; width: 470px; height: 100%; }

.face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; }
.face-metal { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px),
  linear-gradient(160deg, var(--metal-hi) 0%, var(--metal) 45%, var(--metal-lo) 100%);
  box-shadow: inset 0 0 0 3px #1c1f24, inset 0 0 0 5px #59616b, inset 0 0 40px rgba(0,0,0,.55); }
.face.top .face-metal { background: linear-gradient(180deg, #4a515a, #30353c); }
.face.bottom .face-metal { background: #191c20; }
.face .shade { position: absolute; inset: 0; background: #000; opacity: .5; pointer-events: none; transition: opacity 700ms; }
.face.side:not(.front) { pointer-events: none; }

.screw { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9ced4, #6c737b 60%, #3a3f45); box-shadow: 0 1px 2px #000; }
.screw::after { content: ''; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: #2a2e33; transform: rotate(35deg); }
.screw.tl { left: 14px; top: 14px; } .screw.tr { right: 14px; top: 14px; } .screw.bl { left: 14px; bottom: 14px; } .screw.br { right: 14px; bottom: 14px; }

.slot .plate { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 3px 18px; border-radius: 4px; font: 900 16px var(--sans); letter-spacing: 3px; color: #1b1d20; background: linear-gradient(#d9dde2, #9aa1a9); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.5); white-space: nowrap; }
.slot.empty .plate { opacity: .5; }
.led { position: absolute; right: 26px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #555, #222); box-shadow: inset 0 0 3px #000, 0 0 0 3px #22262b; }
.led.green { background: radial-gradient(circle at 35% 35%, #b4ffd9, #22c55e 60%, #0f6b33); box-shadow: 0 0 14px #22c55e, 0 0 0 3px #22262b; }
.led.red { animation: ledred 900ms; }
@keyframes ledred { 0%, 60% { background: radial-gradient(circle at 35% 35%, #ffb4b0, #ff3b30 60%, #7a1410); box-shadow: 0 0 16px #ff3b30, 0 0 0 3px #22262b; } }

.mod-well { position: absolute; left: 50%; top: 52px; width: 430px; height: 430px; transform: translateX(-50%); border-radius: 10px; background: #2b3036; box-shadow: inset 0 3px 10px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.08); }
.mod { position: absolute; left: 15px; top: 15px; width: 400px; height: 400px; }
.slot.empty .mod-well { background: repeating-linear-gradient(45deg, #2b3036 0 18px, #262a30 18px 36px); }

.seal, .dark-cover { position: absolute; left: 20px; right: 20px; top: 52px; height: 430px; display: none; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: repeating-linear-gradient(-45deg, rgba(245,197,24,.92) 0 26px, rgba(20,20,20,.92) 26px 52px); font-family: 'Future'; font-size: 44px; color: #fff; text-shadow: 0 2px 6px #000; }
.seal small { font-family: var(--sans); font-size: 16px; background: rgba(0,0,0,.8); padding: 4px 10px; border-radius: 4px; margin-top: 10px; }
.slot.sealed .seal { display: flex; }
.dark-cover { display: none; z-index: 2; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: rgba(8,9,11,.9); color: #8b929b; font-family: 'FutureNarrow'; font-size: 22px; letter-spacing: 2px; text-align: center; padding: 30px; }
.slot.darkened .dark-cover { display: flex; }
.stamp { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-14deg) scale(1.6); opacity: 0; padding: 6px 22px; border: 6px solid var(--green); border-radius: 8px; color: var(--green); font-family: 'Future'; font-size: 46px; letter-spacing: 4px; background: rgba(10, 30, 20, .55); pointer-events: none; transition: all 260ms cubic-bezier(.2,1.6,.4,1); }
.slot.solved .stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
.slot.solved .mod { filter: saturate(.4) brightness(.75); pointer-events: none; }

/* top face (the lid never turns, so the timer always reads from the front) */
.top-inner { position: absolute; inset: 0; }
.top-brand { position: absolute; left: 30px; top: 22px; font-family: 'Future'; font-size: 22px; color: #1a1c1f; background: var(--hazard); padding: 2px 12px; border-radius: 3px; }
.top-timer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px 24px; background: #0b0b0b; border-radius: 10px; box-shadow: inset 0 0 0 4px #333, 0 4px 0 #111; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.top-timer .lcd { width: 300px; }
.top-strikes { display: flex; gap: 14px; }
.sled { width: 24px; height: 24px; border-radius: 50%; background: #3a1210; box-shadow: inset 0 0 4px #000; }
.sled.on { background: var(--red); box-shadow: 0 0 12px var(--red); }
.serial-tag { position: absolute; right: 28px; bottom: 26px; background: #f3f0e6; color: #111; padding: 6px 14px; border-radius: 3px; transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); text-align: center; }
.serial-tag small { display: block; font-size: 12px; letter-spacing: 2px; }
.serial-tag .serial { font-family: var(--mono); font-size: 58px; font-weight: 800; letter-spacing: 4px; }
.serial-tag { right: 40px !important; bottom: 30px !important; padding: 8px 22px !important; }
.hazard { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(45deg, var(--hazard) 0 14px, #111 14px 28px); opacity: .9; }

/* explosion: panels fly off */
#bomb.boom .face { transition: transform 1.2s cubic-bezier(.1,.8,.3,1), opacity 1.2s; opacity: 0; }
#bomb.boom .face.side { transform: rotateY(var(--a, 0deg)) translateZ(900px) rotateX(var(--rx, 30deg)); }
#bomb.boom .face.top { transform: rotateY(var(--a, 0deg)) rotateX(90deg) translateZ(900px) rotateZ(40deg) !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms; }
#hud.show { opacity: 1; }
#hud button { pointer-events: auto; }
.hud-top { position: absolute; left: 0; right: 0; top: 0; height: 128px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 34px; background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,0)); }
.banner { justify-self: start; }
.b-name { font-family: 'Future'; font-size: 40px; color: var(--hazard); letter-spacing: 2px; }
.b-goal { font-size: 24px; color: var(--ink); margin-top: 4px; }
.hud-timer { display: flex; align-items: center; gap: 22px; background: #0a0a0a; padding: 12px 22px; border-radius: 12px; box-shadow: inset 0 0 0 3px #2b2b2b; }
.hud-lcd { width: 210px; }
.hud-lcd.low { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
.strikes { display: flex; gap: 10px; }
.sbox { width: 44px; height: 44px; border-radius: 8px; border: 3px solid #4a1714; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #fff; }
.sbox.on { background: var(--red); border-color: var(--red); box-shadow: 0 0 16px var(--red); }
.progress { justify-self: end; display: flex; gap: 10px; }
.pdot { padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.15); font: 800 14px var(--sans); letter-spacing: 1px; color: var(--dim); }
.pdot.here { border-color: var(--hazard); color: var(--ink); }
.pdot.done { background: rgba(52,211,153,.18); border-color: var(--green); color: var(--green); }
.pdot.done span::before { content: '✓ '; }
.turn-btn { position: absolute; top: 420px; width: 110px; height: 150px; border-radius: 20px; border: 3px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--ink); font-size: 56px; transition: background 120ms, transform 120ms; }
.turn-btn:hover { background: rgba(245,197,24,.25); border-color: var(--hazard); }
.turn-btn:active { transform: scale(.94); }
.turn-btn.left { left: 120px; } .turn-btn.right { right: 120px; }
.role-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 22px; color: var(--dim); }

/* ---------- flash ---------- */
#flash { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 30; }
#flash.show { display: flex; animation: flashin 1.3s ease-out forwards; }
#flash.strike { background: radial-gradient(ellipse at center, rgba(255,59,48,.15), rgba(255,59,48,.65)); }
#flash.win { background: radial-gradient(ellipse at center, rgba(52,211,153,.2), rgba(20,120,70,.7)); animation-duration: 2.2s; }
#flash.boom { background: radial-gradient(ellipse at center, rgba(255,200,80,.6), rgba(160,20,0,.85)); animation-duration: 2.6s; }
.f-big { font-family: 'Future'; font-size: 150px; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.6); letter-spacing: 6px; }
.f-small { font-family: 'Future'; font-size: 54px; color: #fff; opacity: .9; }
@keyframes flashin { 0% { opacity: 0; transform: scale(1.15); } 10% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- effects ---------- */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.whiteout { position: absolute; inset: 0; background: #fff; animation: whiteout 900ms forwards; }
@keyframes whiteout { 0% { opacity: 1; } 100% { opacity: 0; } }
.blast { position: absolute; left: 800px; top: 470px; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; animation: blast 2.2s ease-out forwards; opacity: 0; }
.blast.fire { background: radial-gradient(circle, #fff6c2 0%, #ffb02e 30%, #ff4d00 55%, rgba(120,20,0,0) 72%); }
.blast.smoke { background: radial-gradient(circle, rgba(90,90,90,.9) 0%, rgba(50,50,50,.7) 45%, rgba(20,20,20,0) 70%); }
@keyframes blast { 0% { opacity: 1; transform: translate(0,0) scale(.2); } 60% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--s)); } }
.confetti { position: absolute; top: -20px; width: 14px; height: 22px; border-radius: 3px; animation: fall 3.2s ease-in forwards; }
@keyframes fall { to { transform: translate(var(--x), 960px) rotate(var(--r)); } }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: none; z-index: 20; }
.screen.show { display: flex; }
#title { align-items: center; justify-content: space-between; padding: 0 90px; background: linear-gradient(90deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.55) 55%, rgba(8,9,11,.9) 100%); }
.t-left { max-width: 760px; }
#title h1 { font-family: 'Future'; font-size: 92px; line-height: 1; margin: 0; color: var(--hazard); text-shadow: 0 4px 0 #6d5600, 0 10px 30px rgba(0,0,0,.6); }
#title .tag { font-size: 28px; color: var(--ink); margin: 14px 0 34px; }
.roles { display: grid; gap: 12px; margin-bottom: 36px; }
.role { display: grid; grid-template-columns: 230px 1fr; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; background: rgba(255,255,255,.06); border-left: 6px solid var(--blue); font-size: 22px; }
.role b { font: 900 18px var(--sans); letter-spacing: 2px; }
.role.warn { border-left-color: var(--red); }
.start-row { display: flex; gap: 16px; }
.start-row input { flex: 1; font-size: 28px; padding: 18px 20px; border-radius: 12px; border: 3px solid #3b4048; background: #111317; color: var(--ink); outline: none; }
.start-row input:focus { border-color: var(--hazard); }
.start { font-family: 'Future'; font-size: 40px; padding: 14px 44px; border: none; border-radius: 12px; background: var(--hazard); color: #1a1a1a; box-shadow: 0 6px 0 #8a6d00; }
.start:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a6d00; }
.t-meta { margin-top: 18px; font-size: 18px; color: var(--dim); }
/* the team picks the difficulty here */
.diff-row { margin: -14px 0 22px; }
.diff-row small { display: block; font: 800 13px var(--mono); letter-spacing: 3px; color: var(--dim); margin-bottom: 8px; }
.diff-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.diff { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px 9px; border-radius: 10px; border: 2px solid #3b4048; background: #111317; color: var(--ink); cursor: pointer; text-align: left; max-width: 240px;
  box-shadow: 0 4px 0 #050607; transition: transform 70ms, box-shadow 70ms, border-color 120ms; }
.diff:active { transform: translateY(4px); box-shadow: 0 0 0 #050607; }
.diff b { font: 800 20px var(--sans); letter-spacing: 1px; }
.diff span { font-size: 13px; color: var(--dim); line-height: 1.3; }
.diff.on { border-color: var(--hazard); background: #1c1a10; }
.diff.on b { color: var(--hazard); }
.lb-sub { margin: -8px 0 12px; font-size: 16px; color: var(--dim); }
.t-right { width: 420px; padding: 28px; border-radius: 16px; background: rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.1); }
.t-right h2, .r-board h2 { font-family: 'Future'; font-size: 28px; margin: 0 0 14px; color: var(--hazard); }
.lb { list-style: none; counter-reset: lb; margin: 0; padding: 0; }
.lb li { counter-increment: lb; display: flex; justify-content: space-between; align-items: center; padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 24px; }
.lb li::before { content: counter(lb); width: 34px; font-family: 'Future'; color: var(--dim); }
.lb li.empty::before { content: ''; }
.lb li.empty { color: var(--dim); }
.lb li.me { color: var(--hazard); }
.lb-team { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-time { font-family: var(--mono); font-weight: 700; }
.tally { margin-top: 18px; font-size: 22px; color: var(--dim); }
.tally b { color: var(--ink); font-size: 28px; }

#paused { align-items: center; justify-content: center; background: rgba(0,0,0,.82); z-index: 35; }
#paused .count { font-size: 160px; }
#brief { align-items: center; justify-content: center; background: rgba(0,0,0,.72); }
.b-wrap { text-align: center; }
.b-line { font-size: 40px; margin-bottom: 20px; }
#brief .count { font-family: 'Future'; font-size: 260px; color: var(--hazard); line-height: 1; }

#result { align-items: center; justify-content: center; gap: 40px; background: rgba(5,6,8,.86); }
.r-card { width: 820px; padding: 34px 40px; border-radius: 20px; background: #15181d; border: 4px solid var(--green); }
.r-card.lose { border-color: var(--red); }
.r-head { font-family: 'Future'; font-size: 84px; color: var(--green); line-height: 1; }
.r-card.lose .r-head { color: var(--red); }
.r-team { font-size: 30px; margin: 10px 0 22px; color: var(--ink); }
.r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.r-stats > div { background: rgba(255,255,255,.06); border-radius: 12px; padding: 14px 18px; }
.r-stats small { display: block; font-size: 15px; letter-spacing: 2px; color: var(--dim); }
.r-stats b { font-family: var(--mono); font-size: 44px; }
.r-rank { margin-top: 16px; font-family: 'Future'; font-size: 30px; color: var(--hazard); }
.notes { margin-top: 22px; }
.notes h3 { margin: 0 0 10px; font-size: 22px; color: var(--dim); text-transform: uppercase; letter-spacing: 2px; }
.notes h3.clean { color: var(--green); }
.note { font-size: 21px; line-height: 1.35; padding: 10px 14px; margin-bottom: 8px; border-radius: 8px; background: rgba(255,59,48,.1); border-left: 4px solid var(--red); }
.note b { color: var(--hazard); margin-right: 6px; }
.note-html { margin-top: 8px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.note-html svg { color: var(--ink); }
.next { margin-top: 24px; font: 900 30px var(--sans); letter-spacing: 2px; padding: 14px 36px; border: none; border-radius: 12px; background: var(--hazard); color: #1a1a1a; box-shadow: 0 6px 0 #8a6d00; }
.r-board { width: 420px; padding: 28px; border-radius: 16px; background: rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.1); }

/* ---------- operator ---------- */
.gear { position: absolute; left: 14px; bottom: 12px; z-index: 40; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.06); color: rgba(255,255,255,.35); font-size: 22px; }
.net-dot { position: absolute; right: 16px; bottom: 14px; z-index: 40; font-size: 14px; color: var(--dim); padding: 4px 10px; border-radius: 20px; background: rgba(0,0,0,.4); }
.net-dot::before { content: '●'; margin-right: 6px; color: #888; }
.net-dot.online::before { color: var(--green); }
.net-dot.offline::before { color: var(--red); }
.net-dot.connecting::before { color: var(--hazard); }
#op { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; width: 640px; padding: 28px 32px; border-radius: 16px; background: #15181d; border: 2px solid var(--hazard); box-shadow: 0 20px 60px #000; font-size: 18px; }
#op h2 { margin: 0 0 16px; font-family: 'Future'; color: var(--hazard); }
#op label { display: block; margin-bottom: 14px; color: var(--dim); }
#op label.row { display: flex; align-items: center; gap: 8px; color: var(--ink); }
#op select, #op input[type=text], #op input[type=number] { display: block; width: 100%; margin-top: 6px; font-size: 18px; padding: 8px 10px; border-radius: 8px; border: 2px solid #3b4048; background: #0e1013; color: var(--ink); }
.op-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.op-btns button { padding: 10px 14px; border-radius: 8px; border: 2px solid #3b4048; background: #22262c; color: var(--ink); }
.op-btns button:first-child { background: var(--hazard); color: #111; border-color: var(--hazard); }
.op-note { color: var(--dim); font-size: 14px; margin-bottom: 0; }

.sound-hint { position: absolute; right: 16px; top: 140px; z-index: 45; font-size: 16px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--hazard); background: rgba(0,0,0,.7); color: var(--hazard); }