@import url('/assets/shared/fonts.css?v=8035127e7ac5');

:root {
  color-scheme: dark;
  font-family: 'Press Start 2P', monospace;
  color: #fff5d7;
  background: #221724;
  --waffle: #ffda58;
  --ink: #302034;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible {
  outline: 3px solid #fff5cc;
  outline-offset: 5px;
}
[hidden] { display: none; }

.waffle-world {
  width: 100%;
  height: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 72%, #a8756529 72% 73%, #342432 73% 75%, #211724 75%),
    repeating-linear-gradient(90deg, #402d3b 0 3px, transparent 3px 86px),
    linear-gradient(180deg, #332633 0 59%, #66404b 59% 60%, #4b303e 60% 72%, #302331 72%);
  container-type: size;
}

.waffle-world::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 12%;
  width: 76%;
  height: 48%;
  pointer-events: none;
  border: 8px solid #73545a;
  box-shadow: 0 5px #211923, inset 0 0 0 4px #181e29;
  background:
    linear-gradient(90deg, transparent 32%, #73545a 32% 33%, transparent 33% 67%, #73545a 67% 68%, transparent 68%),
    linear-gradient(180deg, transparent 75%, #73545a 75% 78%, transparent 78%),
    linear-gradient(155deg, transparent 16%, #b4c6b608 16% 29%, transparent 29% 34%, #b4c6b60b 34% 42%, transparent 42%),
    linear-gradient(180deg, #1d2b38, #34434a);
  opacity: 0.8;
}

.waffle-world::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 65px #150d1b75;
  border: 2px solid #dfaf5720;
}

.game-canvas { position: relative; display: block; width: 100%; height: 100%; touch-action: none; }
.attract { position: absolute; inset: 0; pointer-events: none; }
.waffle-title {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  line-height: 1.26;
  font-size: min(8.9cqw, 11.5cqh);
  letter-spacing: -0.045em;
  user-select: none;
  pointer-events: auto;
}
.title-toy { border: 0; background: none; padding: 0; color: inherit; font: inherit; line-height: inherit; }
.title-line {
  display: block;
  position: relative;
  color: var(--waffle);
  text-shadow: 0 0.045em #fff1a3, 0 0.09em #b97927, 0 0.15em #8c501e, 0 0.21em #180f1c;
  transform-origin: 50% 100%;
}
.title-line + .title-line { margin-top: 0.12em; color: #ffcb42; }
.title-active .title-line { animation: title-balance 3.8s ease-in-out infinite; }
.title-active .title-line + .title-line { animation-delay: -1.5s; }
@keyframes title-balance {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  45% { transform: rotate(2deg) translateY(-0.045em); }
  70% { transform: rotate(0deg) translateY(0.018em); }
}
.pixel-button {
  min-height: 48px;
  border: 2px solid #fff2b4;
  padding: 16px 24px;
  background: #ffda58;
  color: #38252d;
  box-shadow: 0 5px #ae7029, 0 8px #170f1b;
  font-size: clamp(10px, 1.5cqw, 14px);
  line-height: 1.4;
  transition: translate 120ms, box-shadow 120ms, background 120ms;
}
.pixel-button:active { translate: 0 4px; box-shadow: 0 1px #ae7029, 0 4px #170f1b; }
.pixel-button:disabled { opacity: 0.5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pixel-button:hover:not(:disabled) { background: #ffeb8c; translate: 0 -2px; }
}
.start-button { position: absolute; top: 83%; left: 50%; transform: translateX(-50%); pointer-events: auto; white-space: nowrap; }
.attract-best { position: absolute; top: 5.5%; width: 100%; text-align: center; font-size: clamp(8px, 1.3cqw, 11px); color: #cfb49c; }
.cabinet-preview .waffle-title { top: 9%; font-size: min(10.5cqw, 11cqh); }
.cabinet-preview .waffle-world { pointer-events: none; }
.cabinet-preview .waffle-world::after { box-shadow: inset 0 0 25px #150d1b60; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .title-active .title-line { animation: none; }
  .pixel-button { transition: none; }
}