Run Detail

completedseed-2-1-turbo

Unscored

Every model's answer from this round

Recorded for these videos

17:37

Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?

Aug 28, 2026 · YouTube

23:58

Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok

Aug 27, 2026 · YouTube

Provider

openrouter

Challenge Version

v1.0

Turns

Duration

468.0s

Total Tokens

36,978

Input Tokens

3,128

Output Tokens

33,850

Reasoning Tokens

27,878

Reasoning Effort

default

Est. Cost

$0.0862

Started

8/26/2026, 10:11:54 AM

OR Provider

Seed

Finish Reason

content_filter

Generation ID

gen-1787739113-xqowIJ7Yi34SUKUR4ahV

Turns (1)

Turn #1

3,128 in33,850 out27,878 reasoning36,978 total467.9s

user

The Atomic Bandit

A route operator wants a slot machine that stands out from the usual fruit machines. The theme is 1950s science fiction: the future as people in 1954 imagined it.

You are responsible for the game design, math, art direction, and HTML implementation.

What to build

Create a complete slot machine as one self-contained HTML page.

It should be a portrait-oriented machine with:

Five reels
Three rows
A credit meter
A paytable
One Play button

The machine uses credits only. There is no cash, purchasing, accounts, or real-money gambling.

Visual theme

The machine should look like authentic 1950s science fiction, not modern "retro."

Think:

Chrome and bakelite
Rivets and vacuum tubes
Radar dishes
Hand-painted airbrush artwork
Halftone printing
Atomic orange
Vacuum-tube amber
Deep-space blue
Bold lettering drawn with rulers and compasses

The overall feeling should be optimistic, loud, mechanical, and unmistakably from the 1950s.

The sixteen symbols

Choose the 16 objects that appear on the reels.

This is an important design decision. The symbols should:

Be recognizable when displayed small
Have a clear progression from low-value to high-value
Feel like they belong to the same machine
Avoid looking like generic stock science-fiction imagery

There must be:

Exactly 1 wild
Exactly 1 scatter
Exactly 14 regular pay symbols

Artwork

You do not create the symbol artwork yourself.

Instead, provide prompts that will later be used to generate it.

The symbols will be delivered as one PNG:

art/symbols.png

The file will be a 2048×2048 4×4 contact sheet:

16 cells
512×512 pixels per cell
Cells numbered 0–15
Numbering goes left-to-right, top-to-bottom
One symbol centered in each cell
Flat black background
All symbols rendered at the same scale

The grid layout, numbering, background, and other technical details are fixed. Your job is to specify what belongs in each cell.

The path art/symbols.png must appear exactly once in your HTML.

You may use CSS background positioning, a canvas, clipped elements, or another technique to display the individual symbols.

Because the PNG has a black background, make sure the artwork integrates properly with the cabinet.

Missing artwork

The machine must still work before art/symbols.png exists.

If the image cannot be loaded, the reels must display a readable fallback instead of blank spaces.

Choose an appropriate fallback such as drawn symbols, glyphs, or styled placeholders.

Optional cabinet artwork

You may request up to three additional PNG images for things such as:

A backdrop
A topper
Belly-glass artwork

Each file must use the form:

art/<id>.png

These images are optional decoration. The machine must still look finished without them.

The slot machine

The machine has:

5 reels
3 rows
15 visible positions

Use 10–25 paylines.

Each payline is defined by one row index for each reel:

0 = top row
1 = middle row
2 = bottom row

Paylines pay from reel 1 toward reel 5.

Each reel has its own symbol strip containing 20–60 symbols.

Every one of the 16 symbols must appear on at least one reel strip.

Wild

There is exactly one wild symbol.

The wild substitutes for any symbol except the scatter.

Scatter

There is exactly one scatter symbol.

Three or more scatters anywhere on the visible 5×3 grid start a feature.

The feature is up to you. It could be:

Free games
A pick bonus
A wheel
A second screen
Something else appropriate to the machine

The feature is an important part of the machine's personality.

Slot math

Provide a math sheet containing:

Reel strips
Paytable
Paylines
Claimed base-game RTP
Claimed hit frequency
Claimed feature RTP
Volatility

The base game should target:

94% RTP
Acceptable range: 92.5%–95.5%
Hit frequency: 20%–35%

These values must come from the actual reel strips, paylines, and paytable.

Do not simply claim a target percentage. Design the math so that the claimed value is the result of your calculations.

How the base-game audit works

The checker runs 200,000 spins using a fixed seed.

For each reel:

A uniformly random position on the reel strip is selected.
That position and the next two positions are displayed.
The strip wraps around at the end.

The total bet for a spin is:

lines × betPerLine

For each payline:

Start at reel 1.
Find the longest consecutive run of the same symbol.
The wild can substitute for any symbol except the scatter.
If multiple symbols could win on the line, use the higher-paying result.
A line win is:

pays[count] × betPerLine

The scatter is different:

It pays based on the total number of scatters anywhere in the 15 visible cells.
It ignores paylines.
Its payout is multiplied by the total bet.

The feature itself is not included in the audited base-game RTP.

Controls

The machine has exactly one control for playing.

Do not add:

A bet selector
A line selector
Autoplay
Settings
Extra game controls

You may add exactly one additional affordance, and it must be a mute control.

Despite this restriction, players still need to be able to:

Find out what the symbols pay
Understand the feature
Understand the result of a spin

Solve those problems within the one-control limitation.

Sound

All sound must be generated with the Web Audio API.

Do not use:

MP3 files
WAV files
Other audio files
data: audio

The machine should have appropriate sounds for:

Reel spinning
Reel stops
Coins / credits
Wins
Near misses
Features

The sound should make larger wins feel more significant.

Make sure the audio works when the player presses the Play button. Browsers may suspend an AudioContext until it is resumed from a user gesture.

URL test modes

The page must support two URL modes.

`#demo`

The next spin must produce a real winning outcome worth at least 20× the total bet.

This must not be a fake animation.

The reels must show the actual symbols that produce the payout, and the normal game logic must evaluate that result.

`#audit=50000`

When this parameter is present:

Do not animate the spins.
Run 50,000 spins internally.
Display the results.

Show:

Number of spins
Total amount wagered
Total amount won
RTP
Hit frequency
Biggest single win
Number of spins with 3 or more scatters

The audit must use the same game math as normal play.

Technical restrictions

The machine must be a single HTML file.

It must:

Work offline
Run by double-clicking the HTML file
Require no build step
Use no CDN
Use no framework
Use no external stylesheet
Use no external fonts
Use no external scripts
Use no external images except the specified art/ files
Make no network requests at runtime

Do not use:

localStorage
sessionStorage
Cookies
indexedDB

The page must have no scrollbars at any window size.

The portrait cabinet should scale to fit its available space, whether it is displayed on:

A phone
A browser preview
A 4K monitor rotated vertically

Things to avoid

Do not use emoji anywhere.

Do not use:

Cherries
Lemons
Watermelons
BAR symbols
Bells
Lucky sevens

This is a science-fiction machine, not a conventional fruit machine.

Also avoid:

Green monospace text on black
Matrix-style visuals
Glowing red camera eyes
1980s neon-grid synthwave

The visual language should remain firmly rooted in 1950s science fiction.

Required response

Your response must contain exactly these four sections.

The pitch

One line describing:

The machine's name
What it feels like to stand in front of it

The cabinet

Provide exactly one fenced html code block containing the complete HTML page and nothing else.

The math sheet

Provide exactly one fenced json code block using this structure:

{
  "machine": { "name": "ATOMIC BANDIT", "credits": 500, "betPerLine": 1, "lines": 20 },
  "sheet": {
    "style": "One paragraph, appended to every cell prompt below: medium, palette, lighting, line quality, era. This is what makes sixteen separate objects look like one set.",
    "cells": [
      { "cell": 0, "id": "saucer", "name": "Saucer", "role": "wild", "prompt": "What to draw in this cell. One object.", "pays": { "3": 25, "4": 100, "5": 500 } },
      { "cell": 1, "id": "beacon", "name": "Beacon", "role": "scatter", "prompt": "...", "pays": { "3": 2, "4": 10, "5": 50 } },
      { "cell": 2, "id": "helmet", "name": "Bubble helmet", "role": "pay", "prompt": "...", "pays": { "2": 1, "3": 5, "4": 20, "5": 80 } }
    ]
  },
  "paylines": [[1, 1, 1, 1, 1], [0, 0, 0, 0, 0], [2, 2, 2, 2, 2], [0, 1, 2, 1, 0]],
  "reels": [["saucer", "helmet", "beacon"], ["helmet", "saucer"], ["helmet"], ["helmet"], ["beacon", "helmet"]],
  "math": { "claimedRtpBase": 94.1, "claimedHitFrequency": 27.4, "claimedFeatureRtp": 2.0, "volatility": "medium" },
  "cabinet": [{ "id": "backdrop", "aspect": "9:16", "prompt": "..." }]
}

The actual response must satisfy these rules:

cells contains exactly 16 entries.
cell values are 0–15 with no gaps or duplicates.
id is a single lowercase token.
There is exactly one wild, one scatter, and fourteen pay symbols.
pays contains credit values for each matching count.
"2" is optional.
"3" is required.
Scatter payouts use the total bet.
paylines contain one row index per reel.
Do not duplicate paylines.
reels contains five strips.
Each strip contains 20–60 symbols.
cabinet may contain up to three entries.
aspect must be one of:

16:9, 9:16, 1:1, 3:2, 2:3, 4:3, 3:4

The JSON block must contain no prose and no comments, because it is parsed automatically.

The ledger

Provide:

Base RTP: the claimed percentage.
Hit frequency: the claimed percentage.
How you got them: one line explaining the actual calculation.
Celebration tiers: payout thresholds in multiples of the total bet and what happens at each level.
At zero credits: what happens when the player runs out of credits.
Before the art arrives: what the reels display while art/symbols.png is unavailable.

The hook

Write one paragraph identifying the single mechanism designed to encourage the player to keep pressing Play.

Name it plainly and explain how it works.

Do not use euphemisms such as "player engagement." Explain the actual mechanism.

Final requirement

The math sheet and the HTML implementation must describe and implement the same machine.

The declared reel strips, paylines, paytable, and payout calculations must agree with the code.

The #demo result must be a real game outcome.

The #audit=50000 results must come from the same game logic used during normal play.

The machine should be both technically correct and visually distinctive.

assistant

The pitch

ATOMIC BANDIT — A chrome-and-bakelite portal to 1954's atomic-age dreams, where flying saucers hum, radar screens glow amber, and every spin promises a ticket to the stars.

The cabinet

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>ATOMIC BANDIT</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0604; }

.cabinet {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 9/16;
  height: 100%;
  max-height: 100vh;
  max-width: 100vw;
  background: linear-gradient(180deg, #2a1a0a 0%, #1a0f05 30%, #1a0f05 70%, #2a1a0a 100%);
  border: 6px solid #8B6914;
  border-radius: 8px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.8), 0 20px 60px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rivet {
  position: absolute;
  width: 10px; height: 10px;
  background: radial-gradient(circle at 30% 30%, #d4a574, #8B6914 60%, #5c4a20);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  z-index: 10;
}

.topper {
  flex: 0 0 auto;
  padding: 3% 2% 2%;
  text-align: center;
  background: linear-gradient(180deg, #0d0703 0%, #1a0f05 100%);
  border-bottom: 3px solid #d4a574;
  position: relative;
}
.title {
  font-family: 'Courier New', monospace;
  font-size: clamp(12px, 4.2vw, 32px);
  font-weight: 900;
  color: #ff6b00;
  text-shadow: 0 0 8px #ff6b00, 0 0 16px #ff4500, 2px 2px 0 #660000;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.subtitle {
  font-family: 'Courier New', monospace;
  font-size: clamp(7px, 1.6vw, 11px);
  color: #ffcc00;
  letter-spacing: 5px;
  margin-top: 1%;
  text-shadow: 0 0 4px #ff9900;
}

.credit-panel {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  padding: 1.5% 2%;
  background: #050308;
  border-bottom: 2px solid #8B6914;
}
.meter {
  background: #1a0a00;
  border: 2px solid #8B6914;
  border-radius: 3px;
  padding: 1% 2%;
  min-width: 28%;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}
.meter-label {
  font-family: 'Courier New', monospace;
  font-size: clamp(6px, 1.5vw, 9px);
  color: #ff6b00;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.meter-value {
  font-family: 'Courier New', monospace;
  font-size: clamp(11px, 3vw, 20px);
  font-weight: bold;
  color: #ffcc00;
  text-shadow: 0 0 6px #ff9900;
  letter-spacing: 1px;
}

.reel-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2% 1.5%;
  background: radial-gradient(ellipse at center, #0a1525 0%, #030710 100%);
  position: relative;
  border-bottom: 2px solid #8B6914;
}
.reel-frame {
  width: 94%;
  height: 92%;
  background: #000;
  border: 3px solid #8B6914;
  border-radius: 4px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 0 10px rgba(255,107,0,0.15);
  display: flex;
  overflow: hidden;
  position: relative;
}
.reel {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-right: 1px solid #111;
}
.reel:last-child { border-right: none; }
.reel-strip {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
}
.symbol {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.symbol-img {
  width: 92%;
  height: 92%;
  background-image: url('art/symbols.png');
  background-size: 400% 400%;
  background-repeat: no-repeat;
}
.symbol-fallback {
  width: 88%;
  height: 88%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: clamp(6px, 2vw, 12px);
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  border: 2px solid rgba(255,255,255,0.3);
}

.win-display {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: clamp(12px, 3.5vw, 24px);
  font-weight: bold;
  color: #ffcc00;
  text-shadow: 0 0 8px #ff6b00, 0 0 16px #ff4500;
  z-index: 20;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}
.win-display.show { animation: winPulse 0.4s ease-in-out infinite alternate; }
@keyframes winPulse {
  from { transform: translateX(-50%) scale(1); opacity: 0.8; }
  to { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

.paytable-area {
  flex: 0 0 auto;
  padding: 1.5% 2%;
  background: #050308;
  border-bottom: 2px solid #8B6914;
  max-height: 22%;
  overflow-y: auto;
}
.paytable-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1% 3%;
}
.pt-row {
  display: flex;
  align-items: center;
  padding: 1px 0;
}
.pt-sym {
  width: 14px; height: 14px;
  border-radius: 3px;
  margin-right: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
}
.pt-name {
  font-family: 'Courier New', monospace;
  font-size: clamp(6px, 1.4vw, 9px);
  color: #aaa;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-pays {
  font-family: 'Courier New', monospace;
  font-size: clamp(6px, 1.3vw, 8px);
  color: #ffcc00;
  white-space: nowrap;
}
.pt-section-label {
  grid-column: 1 / -1;
  font-family: 'Courier New', monospace;
  font-size: clamp(7px, 1.5vw, 10px);
  color: #ff6b00;
  letter-spacing: 1px;
  padding: 2px 0;
  border-bottom: 1px solid #8B6914;
  margin-top: 2px;
}

.control-panel {
  flex: 0 0 auto;
  padding: 2.5% 4%;
  background: linear-gradient(180deg, #1a0f05 0%, #0d0703 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.play-btn {
  flex: 1;
  max-width: 65%;
  padding: 2.5% 4%;
  font-family: 'Courier New', monospace;
  font-size: clamp(13px, 3.8vw, 26px);
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #ff6b00 0%, #cc4400 50%, #882200 100%);
  border: 3px solid #ffcc00;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.1s;
}
.play-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.play-btn:disabled {
  background: linear-gradient(180deg, #555 0%, #333 50%, #222 100%);
  border-color: #666;
  cursor: not-allowed;
  color: #888;
}
.mute-btn {
  width: 11%;
  aspect-ratio: 1;
  background: linear-gradient(180deg, #3a3a4a 0%, #1a1a2a 100%);
  border: 2px solid #8B6914;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9px, 2.5vw, 16px);
  color: #ffcc00;
}
.info-btn {
  width: 11%;
  aspect-ratio: 1;
  background: linear-gradient(180deg, #3a3a4a 0%, #1a1a2a 100%);
  border: 2px solid #8B6914;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: clamp(10px, 2.8vw, 16px);
  font-weight: bold;
  color: #ffcc00;
}

.feature-screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, #0a1525 0%, #030710 100%);
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5%;
}
.feature-screen.show { display: flex; }
.feature-title {
  font-family: 'Courier New', monospace;
  font-size: clamp(14px, 4.5vw, 30px);
  color: #ff6b00;
  text-shadow: 0 0 12px #ff6b00, 0 0 24px #ff4500;
  margin-bottom: 5%;
  text-align: center;
  letter-spacing: 3px;
}
.radar-screen {
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #051a0e 0%, #031008 70%, #010604 100%);
  border: 4px solid #1a6a3a;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0,255,100,0.15), 0 0 20px rgba(0,255,100,0.2);
}
.radar-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,255,100,0.8));
  transform-origin: left center;
  animation: radarSweep 2.5s linear infinite;
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.radar-grid::before, .radar-grid::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(0,255,100,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.radar-grid::before { width: 66%; height: 66%; }
.radar-grid::after { width: 33%; height: 33%; }
.radar-blip {
  position: absolute;
  width: 11%;
  height: 11%;
  background: #ff6b00;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px #ff6b00;
  transform: translate(-50%, -50%);
  animation: blipPulse 0.8s ease-in-out infinite alternate;
}
@keyframes blipPulse {
  from { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  to { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
.radar-blip.picked { animation: none; }
.radar-blip.revealed { cursor: default; animation: none; }
.feature-win {
  font-family: 'Courier New', monospace;
  font-size: clamp(12px, 3.5vw, 22px);
  color: #ffcc00;
  text-shadow: 0 0 8px #ff6b00;
  margin-top: 5%;
}
.feature-instr {
  font-family: 'Courier New', monospace;
  font-size: clamp(8px, 2vw, 12px);
  color: #66cc99;
  margin-top: 3%;
  text-align: center;
}

.audit-screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  z-index: 200;
  display: none;
  flex-direction: column;
  padding: 5%;
  color: #ffcc00;
  font-family: 'Courier New', monospace;
  overflow-y: auto;
}
.audit-screen.show { display: flex; }
.audit-title {
  font-size: clamp(14px, 4.5vw, 26px);
  color: #ff6b00;
  text-align: center;
  margin-bottom: 5%;
  letter-spacing: 3px;
}
.audit-row {
  display: flex;
  justify-content: space-between;
  padding: 2% 0;
  border-bottom: 1px solid #222;
  font-size: clamp(9px, 2.5vw, 14px);
}
.audit-label { color: #888; }
.audit-value { color: #ffcc00; font-weight: bold; }

.info-modal {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.97);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 5%;
  overflow-y: auto;
}
.info-modal.show { display: flex; }
.info-title {
  font-family: 'Courier New', monospace;
  font-size: clamp(14px, 4vw, 24px);
  color: #ff6b00;
  text-align: center;
  margin-bottom: 4%;
  text-shadow: 0 0 8px #ff6b00;
  letter-spacing: 3px;
}
.info-section {
  margin-bottom: 4%;
}
.info-section-title {
  font-family: 'Courier New', monospace;
  font-size: clamp(9px, 2.3vw, 13px);
  color: #ffcc00;
  margin-bottom: 2%;
  letter-spacing: 1px;
  border-bottom: 1px solid #8B6914;
  padding-bottom: 1%;
}
.info-text {
  font-family: 'Courier New', monospace;
  font-size: clamp(8px, 2vw, 11px);
  color: #aaa;
  line-height: 1.6;
}
.close-btn {
  margin-top: auto;
  padding: 2.5%;
  font-family: 'Courier New', monospace;
  font-size: clamp(11px, 2.8vw, 16px);
  background: #ff6b00;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.starfield {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.4;
}
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
</style>
</head>
<body>
<div class="cabinet" id="cabinet">
  <div class="topper">
    <div class="title">ATOMIC BANDIT</div>
    <div class="subtitle">★ COSMIC PAYOUTS ★</div>
  </div>

  <div class="credit-panel">
    <div class="meter">
      <div class="meter-label">Credits</div>
      <div class="meter-value" id="credits">500</div>
    </div>
    <div class="meter">
      <div class="meter-label">Bet</div>
      <div class="meter-value" id="bet">20</div>
    </div>
    <div class="meter">
      <div class="meter-label">Win</div>
      <div class="meter-value" id="win">0</div>
    </div>
  </div>

  <div class="reel-area">
    <div class="starfield" id="starfield"></div>
    <div class="reel-frame" id="reelFrame">
      <div class="reel" id="reel0"><div class="reel-strip" id="strip0"></div></div>
      <div class="reel" id="reel1"><div class="reel-strip" id="strip1"></div></div>
      <div class="reel" id="reel2"><div class="reel-strip" id="strip2"></div></div>
      <div class="reel" id="reel3"><div class="reel-strip" id="strip3"></div></div>
      <div class="reel" id="reel4"><div class="reel-strip" id="strip4"></div></div>
    </div>
    <div class="win-display" id="winDisplay"></div>

    <div class="feature-screen" id="featureScreen">
      <div class="feature-title">RADAR BONUS</div>
      <div class="radar-screen" id="radarScreen">
        <div class="radar-grid"></div>
        <div class="radar-sweep"></div>
      </div>
      <div class="feature-win" id="featureWin"></div>
      <div class="feature-instr" id="featureInstr">Pick blips. Find 3 DUDs and it's over.</div>
    </div>
  </div>

  <div class="paytable-area" id="paytableArea">
    <div class="paytable-grid" id="paytableGrid"></div>
  </div>

  <div class="control-panel">
    <button class="mute-btn" id="muteBtn" title="Mute">🔊</button>
    <button class="play-btn" id="playBtn">SPIN</button>
    <button class="info-btn" id="infoBtn" title="Info">i</button>
  </div>

  <div class="info-modal" id="infoModal">
    <div class="info-title">HOW TO PLAY</div>
    <div class="info-section">
      <div class="info-section-title">THE GAME</div>
      <div class="info-text">
        5 reels, 3 rows, 20 paylines. Bet is 20 credits per spin (1 credit per line).
        Match symbols from left to right on any payline to win.
      </div>
    </div>
    <div class="info-section">
      <div class="info-section-title">FLYING SAUCER (WILD)</div>
      <div class="info-text">
        Substitutes for any symbol except Radar Beacon. Pays highest of all symbols.
      </div>
    </div>
    <div class="info-section">
      <div class="info-section-title">RADAR BEACON (SCATTER)</div>
      <div class="info-text">
        Pays anywhere on the reels. 3 or more trigger the RADAR BONUS

Attachments

bytedance-seed/seed-2-1-turbo — page