:root{
  --screen-w: 560px;
  --screen-h: 720px;
  --bezel: 20px;
  --marquee-h: 88px;
  --panel-h: 44px;
  --logo-size: 52px;
  --ghost-size: 26px;
  --panel-font: 12px;
  --cream: #F3D27A;
  --orange: #D9601E;
  --brown: #7A3A12;
  --ink: #3A1A08;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  background:
    radial-gradient(120% 90% at 50% 0%, #2b1b10 0%, #1A120C 46%, #0e0805 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

#cabinet{
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(var(--screen-w) + var(--bezel) * 2);
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.62));
}

.marquee{
  height: var(--marquee-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0 0.4em;
}

.logo{
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", "Trebuchet MS", Verdana, sans-serif;
  font-weight: 900;
  font-size: var(--logo-size);
  line-height: 0.92;
  letter-spacing: 0.015em;
  color: #FFE600;
  transform: scaleY(1.06);
  white-space: nowrap;
  text-shadow:
    0.045em 0 0 #3A1A08, -0.045em 0 0 #3A1A08,
    0 0.045em 0 #3A1A08, 0 -0.045em 0 #3A1A08,
    0.032em 0.032em 0 #3A1A08, -0.032em 0.032em 0 #3A1A08,
    0.032em -0.032em 0 #3A1A08, -0.032em -0.032em 0 #3A1A08,
    0.10em 0.115em 0 #D9601E,
    0.13em 0.145em 0 #7A3A12;
}

.ghostlist{
  display: flex;
  align-items: center;
  gap: 0.28em;
  padding-left: 0.2em;
}

.ghost{
  display: block;
  width: var(--ghost-size);
  height: calc(var(--ghost-size) * 0.92);
  opacity: 0.97;
}

.ghost svg{
  display: block;
  width: 100%;
  height: 100%;
}

.bezel{
  padding: var(--bezel);
  background: linear-gradient(180deg, #F7DA8C 0%, #F3D27A 55%, #E9C468 100%);
  border-radius: calc(var(--bezel) * 1.35 + 8px);
  box-shadow:
    inset 0 0 0 3px var(--orange),
    inset 0 0 0 6px rgba(122, 58, 18, 0.22),
    0 0 0 2px #2a1608,
    0 10px 26px rgba(0, 0, 0, 0.5);
}

.screen{
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  background: #000;
  border-radius: 5px;
  overflow: hidden;
  box-shadow:
    0 0 0 3px #7A3A12,
    inset 0 0 22px rgba(0, 0, 0, 0.85);
}

canvas{
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

.vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(115% 95% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%);
}

.panel{
  height: var(--panel-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 calc(var(--bezel) * 0.55);
}

.hint{
  font-size: var(--panel-font);
  letter-spacing: 0.2em;
  color: #E7C787;
  opacity: 0.82;
  white-space: nowrap;
}

.coin{
  font-size: var(--panel-font);
  letter-spacing: 0.16em;
  color: #F6D98C;
  border: 2px solid #6f3510;
  border-radius: 4px;
  padding: 0.28em 0.6em;
  background: rgba(58, 26, 8, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 0, 0.13);
  white-space: nowrap;
}