:root {
  color-scheme: dark;
  font-family:
    Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #080a07;
  color: #fff5db;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #080a07;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgb(238 185 73 / 0.46);
  outline-offset: 3px;
}

#app {
  --arena-gap: 18px;
  --score-band-height: 134px;
  --score-panel-left: 14px;
  --score-panel-width: 260px;
  --score-rail-width: calc(var(--score-panel-left) + var(--score-panel-width));
  --drawer-width: min(430px, 100vw);
  --drawer-live-width: min(340px, calc(100vw - 48px));
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(8 10 7 / 0.18), rgb(3 5 4 / 0.84)),
    #080a07;
}

#app.match-live {
  --drawer-width: var(--drawer-live-width);
}

.arena-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #090b08;
}

.arena-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 211 122 / 0.06), transparent 42%),
    linear-gradient(90deg, rgb(3 5 4 / 0.48), rgb(3 5 4 / 0.08) 45%, rgb(3 5 4 / 0.48)),
    linear-gradient(180deg, rgb(3 5 4 / 0.08), rgb(3 5 4 / 0.5));
  pointer-events: none;
  transition:
    background 520ms ease,
    opacity 520ms ease;
}

#app.match-live .arena-shell::before {
  opacity: 0.24;
}

#app.match-live .arena-shell {
  place-items: center;
}

#game {
  position: relative;
  z-index: 0;
  width: max(100vw, 100vh);
  height: max(100vw, 100vh);
  overflow: hidden;
  opacity: 0.68;
  filter: saturate(1) contrast(1.08) brightness(1.08);
  transform: scale(1.04);
  transform-origin: center;
  transition:
    width 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 520ms ease,
    filter 520ms ease,
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#app.match-live #game {
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  margin-left: 0;
  opacity: 1;
  filter: none;
  transform: scale(1);
}

#game canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
}