:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #c9ad82;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(79,45,16,.08) 0 2px, transparent 2px 18px),
    linear-gradient(90deg, #c9aa7d, #e0c79c 48%, #c3a374);
}

.device {
  position: relative;
  width: min(1115px, calc(100vw - 24px), calc((100vh - 62px) * 1.7984));
  aspect-ratio: 1115 / 620;
  overflow: hidden;
  background: url('assets/case-original.svg') center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 16px rgba(35, 22, 8, .32));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: absolute;
  z-index: 2;
  left: 1.2%;
  top: -3.1%;
  display: block;
  width: 98.1%;
  height: 101.2%;
  pointer-events: none;
}

.lcd-static {
  position: absolute;
  z-index: 1;
  left: 26.4%;
  top: 21.3%;
  width: 48.5%;
  height: 50.9%;
  background: url('assets/lcd-static.png') center / 100% 100% no-repeat;
}

button { font: inherit; }

.hotspot {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.hotspot:focus-visible { outline: 4px solid rgba(255, 220, 0, .9); outline-offset: 2px; }
.hotspot:active { background: rgba(110, 0, 0, .12); }

.game-a { left: 81.7%; top: 11.4%; width: 6.7%; height: 8%; }
.game-b { left: 81.7%; top: 25.6%; width: 6.7%; height: 8%; }
.time   { left: 81.7%; top: 39.8%; width: 6.7%; height: 8%; }
.left-up    { left: 8.1%; top: 53.1%; width: 7.8%; height: 14%; }
.left-down  { left: 8.1%; top: 72.0%; width: 7.8%; height: 14%; }
.right-up   { left: 84.2%; top: 53.1%; width: 7.8%; height: 14%; }
.right-down { left: 84.2%; top: 72.0%; width: 7.8%; height: 14%; }

.overlay {
  position: absolute;
  z-index: 4;
  left: 33%;
  top: 40%;
  width: 34%;
  min-height: 20%;
  display: grid;
  place-items: center;
  gap: .35rem;
  padding: 1rem;
  color: #26332f;
  text-align: center;
  background: rgba(119, 137, 124, .93);
  border: 2px solid #26332f;
}

.overlay.hidden { display: none; }
.overlay strong { font-size: clamp(.8rem, 2.4vw, 1.35rem); }
.overlay span { font-size: clamp(.65rem, 1.8vw, 1rem); }
.overlay button { border: 2px solid #26332f; background: transparent; color: #26332f; font-weight: 700; padding: .3rem .7rem; }

.utility {
  position: absolute;
  z-index: 5;
  bottom: .8%;
  border: 1px solid rgba(20,20,20,.28);
  border-radius: 3px;
  padding: .18rem .4rem;
  color: #222;
  background: rgba(238,238,230,.72);
  font-size: clamp(8px, 1.25vw, 12px);
  opacity: .62;
}
.utility:hover, .utility:focus-visible { opacity: 1; }
.pause { left: 43%; }
.sound { left: 53%; }

.hint {
  margin: 0;
  color: #3b2715;
  text-align: center;
  font-size: clamp(11px, 1.8vw, 14px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  body { padding: 4px; gap: 5px; }
  .device { width: min(calc(100vw - 8px), calc((100vh - 36px) * 1.7984)); }
  .hint { max-width: 95vw; }
}