@font-face { font-family: "Noto JP"; src: url("/jp-107.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0023, U+003C, U+003E, U+00A0, U+2192, U+4E45, U+4EFB, U+4F50, U+4F8B, U+4FC2, U+5024, U+5150, U+5272, U+5370, U+53BB, U+542B, U+56DB, U+56E3, U+57CE, U+5BC4, U+5BCC, U+5F71, U+60AA, U+6238, U+6280, U+629C, U+6539, U+66FF, U+670D, U+677E-677F, U+6839, U+69CB, U+6B4C, U+6BB5, U+6E96, U+6F14, U+72EC, U+7389, U+7814, U+79CB, U+79D1, U+79FB, U+7A0E, U+7D0D, U+85E4, U+8D64, U+9632, U+96E2, U+9805, U+99AC, U+FF1C, U+FF1E; }
@font-face { font-family: "Noto JP"; src: url("/jp-110.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+0040, U+00A0, U+4E86, U+4E95, U+4F01, U+4F1D, U+4FBF, U+5099, U+5171, U+5177, U+53CB, U+53CE, U+53F0, U+5668, U+5712, U+5BA4, U+5CA1, U+5F85, U+60F3, U+653E, U+65AD, U+65E9, U+6620, U+6750, U+6761, U+6B62, U+6B74, U+6E08, U+6E80, U+7248, U+7531, U+7533, U+753A, U+77F3, U+798F, U+7F6E, U+8449, U+88FD, U+89B3, U+8A55, U+8AC7, U+8B77, U+8DB3, U+8EFD, U+8FD4, U+9031-9032, U+9580, U+9589, U+96D1, U+985E; }
@font-face { font-family: "Noto JP"; src: url("/jp-111.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+002B, U+00A0, U+00D7, U+300E-300F, U+4E07, U+4E8C, U+512A, U+5149, U+518D, U+5236, U+52B9, U+52D9, U+5468, U+578B, U+57FA, U+5B8C, U+5BA2, U+5C02, U+5DE5, U+5F37, U+5F62, U+623B, U+63D0, U+652F, U+672A, U+6848, U+6D41, U+7136, U+7537, U+754C, U+76F4, U+79C1, U+7BA1, U+7D44, U+7D4C, U+7DCF, U+7DDA, U+7DE8, U+82B1, U+897F, U+8CA9, U+8CFC, U+904E, U+9664, U+982D, U+9858, U+98A8, U+9A13, U+FF13, U+FF5C; }
@font-face { font-family: "Noto JP"; src: url("/jp-112.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+00A0, U+4E16, U+4E3B, U+4EA4, U+4EE4, U+4F4D, U+4F4F, U+4F55, U+4F9B, U+5317, U+5358, U+53C2, U+53E4, U+548C, U+571F, U+59CB, U+5CF6, U+5E38, U+63A2, U+63B2, U+6559, U+662D, U+679C, U+6C7A, U+72B6, U+7523, U+767D, U+770C, U+7A2E, U+7A3F, U+7A7A, U+7B2C, U+7B49, U+7D20, U+7D42, U+8003, U+8272, U+8A08, U+8AAC, U+8CB7, U+8EAB, U+8EE2, U+9054-9055, U+90FD, U+914D, U+91CD, U+969B, U+97F3, U+984C, U+FF06; }
@font-face { font-family: "Noto JP"; src: url("/jp-114.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+003C, U+003E, U+00A0, U+3005, U+4E0D, U+4E88, U+4ECB, U+4EE3, U+4EF6, U+4FDD, U+4FE1, U+500B, U+50CF, U+5186, U+5316, U+53D7, U+540C, U+544A, U+54E1, U+5728, U+58F2, U+5973, U+5B89, U+5C71, U+5E02, U+5E97, U+5F15, U+5FC3, U+5FDC, U+601D, U+611B, U+611F, U+671F, U+6728, U+6765, U+683C, U+6B21, U+6CE8, U+6D3B, U+6D77, U+7530, U+7740, U+7ACB, U+7D50, U+826F, U+8F09, U+8FBC, U+9001, U+9053, U+91CE, U+9762, U+98DF; }
@font-face { font-family: "Noto JP"; src: url("/jp-115.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+007C, U+00A0, U+3080, U+4EE5, U+5148, U+516C, U+521D, U+5225, U+529B, U+52A0, U+53EF, U+56DE, U+56FD, U+5909, U+591A, U+5B66, U+5B9F, U+5BB6, U+5BFE, U+5E73, U+5E83, U+5EA6, U+5F53, U+6027, U+610F, U+6210, U+6240, U+660E, U+66F4, U+66F8, U+6709, U+6771, U+697D, U+69D8, U+6A5F, U+6C34, U+6CBB, U+73FE, U+756A, U+7684, U+771F, U+793A, U+7F8E, U+898F, U+8A2D, U+8A71, U+8FD1, U+9078, U+9577, U+96FB, U+FF5E; }
@font-face { font-family: "Noto JP"; src: url("/jp-116.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+00A0, U+00A9, U+3010-3011, U+30E2, U+4E0B, U+4ECA, U+4ED6, U+4ED8, U+4F53, U+4F5C, U+4F7F, U+53D6, U+540D, U+54C1, U+5730, U+5916, U+5B50, U+5C0F, U+5F8C, U+624B, U+6570, U+6587, U+6599, U+691C, U+696D, U+6CD5, U+7269, U+7279, U+7406, U+767A-767B, U+77E5, U+7D04, U+7D22, U+8005, U+80FD, U+81EA, U+8868, U+8981, U+89A7, U+901A, U+9023, U+90E8, U+91D1, U+9332, U+958B, U+96C6, U+9AD8, U+FF1A, U+FF1F; }
@font-face { font-family: "Noto JP"; src: url("/jp-117.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+004E, U+00A0, U+3000, U+300C-300D, U+4E00, U+4E0A, U+4E2D, U+4E8B, U+4EBA, U+4F1A, U+5165, U+5168, U+5185, U+51FA, U+5206, U+5229, U+524D, U+52D5, U+5408, U+554F, U+5831, U+5834, U+5927, U+5B9A, U+5E74, U+5F0F, U+60C5, U+65B0, U+65B9, U+6642, U+6700, U+672C, U+682A, U+6B63, U+6C17, U+7121, U+751F, U+7528, U+753B, U+76EE, U+793E, U+884C, U+898B, U+8A18, U+9593, U+95A2, U+FF01, U+FF08-FF09; }
@font-face { font-family: "Noto JP"; src: url("/jp-118.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+0027-002A, U+002C-003B, U+003F, U+0041-004D, U+004F-005D, U+0061-007B, U+007D, U+00A0, U+00AB, U+00AE, U+00B2-00B3, U+00B7, U+00BB, U+00C9, U+00CD, U+00D6, U+00D8, U+00DC, U+00E0-00E5, U+00E7-00ED, U+00EF, U+00F1-00F4, U+00F6, U+00F8, U+00FA, U+00FC-00FD, U+0103, U+014D, U+01B0, U+0300-0301, U+1EBF, U+1EC7, U+2013-2014, U+201C-201D, U+2039-203A, U+203C, U+2048-2049, U+2113, U+2122, U+65E5, U+6708, U+70B9; }
@font-face { font-family: "Noto JP"; src: url("/jp-119.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+00A0, U+2027, U+3001-3002, U+3041-307F, U+3081-308F, U+3091-3093, U+3099-309A, U+309D-309E, U+30A1-30E1, U+30E3-30ED, U+30EF-30F0, U+30F2-30F4, U+30FB-30FE, U+FF0C, U+FF0E; }
@font-face { font-family: "Noto JP"; src: url("/jp-65.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-0022, U+00A0, U+00B1, U+309B, U+4E5E, U+51F1, U+5506, U+55C5, U+58CC, U+59D1, U+5C51, U+5EF7, U+6284, U+62D7, U+6689, U+673D, U+6A2B, U+6A8E, U+6A9C, U+6D63, U+6DD1, U+70B8, U+7235, U+72DB, U+72F8, U+7560, U+7C9B, U+7CE7, U+7E1E, U+80AF, U+82EB, U+8463, U+8499, U+85DD, U+86EE, U+8A60, U+8A6E, U+8C79, U+8E87, U+8E8A, U+8F5F, U+9010, U+918D, U+9190, U+965B, U+97FB, U+9AB8, U+9BAD, U+9D3B, U+9D5C, U+9DFA, U+9E93; }
@font-face { font-family: "Noto JP"; src: url("/cyr.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04E8-04E9; }

@font-face { font-family: "Inter"; src: url("/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #07060b;
  --ink: #f4f1ea;
  --muted: #9a9388;
  --line: rgba(244, 241, 234, 0.16);
  --well: #000;
  --silver: #d9d6cf;
  --mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto JP", Inter, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
html[lang="sv"] .t-en { display: none !important; }
html[lang="en"] .t-sv { display: none !important; }

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 18px;
  padding: 18px 16px 12px;
}
.cabinet {
  width: min(920px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand { display: flex; justify-content: space-between; align-items: baseline; }
.logo {
  margin: 0;
  width: 7.5rem;
  font-family: "Noto JP", Inter, sans-serif;
  font-weight: 650;
  letter-spacing: 0.14em;
  font-size: 22px;
}
.en-name {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
}
.about {
  margin: 0;
  width: min(40rem, 100%);
  min-height: 2.6em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}
.guide {
  width: min(40rem, 100%);
  margin: 0 auto;
  padding: 8px 20px 48px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.guide h2, .guide h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}
.guide h2 { margin: 32px 0 8px; font-size: 22px; }
.guide h3 { margin: 18px 0 4px; font-size: 17px; }
.guide p, .guide li { margin: 0 0 10px; }
.guide ul { margin: 0 0 10px; padding-left: 1.2em; }
.guide a { color: var(--ink); }
.play {
  --tilt: 0deg;
  --spread: 0px;
  display: grid;
  grid-template-columns: 152px auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  justify-content: center;
}
.menus, .side, #well {
  transition: transform 2s cubic-bezier(0.37, 0, 0.63, 1);
}
.menus { transform: translate3d(calc(var(--spread) * -1), 0, 0); }
.side { transform: translate3d(var(--spread), 0, 0); }
.menus {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 152px;
  padding-top: 8px;
}
.modes, .tracks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.source {
  margin: 0;
  width: 100%;
  height: 48px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.source[hidden] {
  display: block !important;
  visibility: hidden;
}
.modes button, .tracks button, .autist, .tilt {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  width: 100%;
  height: 40px;
  padding: 0 12px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autist, .tilt { font-size: 13px; }
.modes button[aria-pressed="true"],
.tracks button[aria-pressed="true"],
.autist[aria-pressed="true"],
.tilt[aria-pressed="true"] {
  background: var(--ink);
  color: #07060b;
  border-color: var(--ink);
}
#well {
  display: block;
  position: relative;
  z-index: 1;
  background: var(--well);
  border: 6px solid var(--silver);
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, 0.45);
  touch-action: none;
  image-rendering: pixelated;
  transform: rotate(var(--tilt));
}
#well.glide { image-rendering: auto; }
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 4px; }
.stat span {
  display: block;
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
}
.stat b {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.meter-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.04em;
}
.meter-row b {
  flex: none;
  min-width: 6.5ch;
  text-align: right;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row2 b { font-size: 24px; }
.queue { display: flex; gap: 12px; }
.queue canvas {
  display: block;
  margin-top: 8px;
  background: #000;
  border: 3px solid var(--silver);
  image-rendering: pixelated;
}
.sound {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 38px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--muted);
}
.sound[aria-pressed="false"] { color: var(--ink); border-color: var(--ink); }
.keys { margin: 0; height: 2.9em; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; max-width: 22rem; }

.pad {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pad button {
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #14131a;
  font-family: var(--mono);
  font-size: 20px;
}

.veil {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 6, 11, 0.72);
  padding: 20px;
}
.veil[data-open="0"] { display: none; }
.card { text-align: center; }
.card h1 {
  margin: 8px 0 16px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.pieces { display: flex; gap: 3px; justify-content: center; margin: 14px 0 0; }
.pieces i { width: 14px; height: 14px; display: block; }
.pieces .c { background: #00e6e6; }
.pieces .o { background: #f0c000; }
.go {
  min-width: 160px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #07060b;
  font-family: "Noto JP", Inter, sans-serif;
  letter-spacing: 0.08em;
}
.name-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
}
.name-form label {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.name-form input {
  width: 8.5rem;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #14131a;
  color: var(--ink);
  text-align: center;
  font: 26px "Noto JP", Inter, "Hiragino Sans", "Yu Gothic", sans-serif;
  letter-spacing: 0.08em;
}
.name-go { min-width: 120px; height: 42px; }
.veil-top {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 16rem;
}
.hall {
  width: min(920px, 100%);
  margin: 8px 0 0;
}
.hall h2 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.hall-list {
  max-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
}
.hall-group { margin: 0 0 12px; }
.hall-group h3 {
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 650;
}
.hall-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.6fr);
  gap: 8px;
  align-items: center;
  padding: 3px 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.hall-row.on { color: var(--ink); background: rgba(244, 241, 234, 0.06); }
.hall-variant {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.hall-slot {
  display: flex;
  gap: 4px;
  min-width: 0;
  align-items: baseline;
}
.hall-slot .rank { flex: none; }
.hall-slot .who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.hall-slot b {
  flex: none;
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.legal {
  margin: 0;
  width: min(40rem, 100%);
  min-height: 2.9em;
  text-align: center;
  color: #6f6a62;
  font-size: 12px;
  line-height: 1.45;
}
.legal a { color: #c8c2b8; }

html.tilted { overflow-x: clip; }
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  pointer-events: none;
  image-rendering: pixelated;
}
html.jackpot-on #sky { display: block; }
html.jackpot-on .screen { position: relative; z-index: 1; }
html.jackpot-on #well { background: transparent; }
html.jackpot-on .modes button,
html.jackpot-on .tracks button,
html.jackpot-on .autist,
html.jackpot-on .tilt,
html.jackpot-on .sound {
  background: rgba(20, 8, 24, 0.78);
  color: #f4f1ea;
}
html.jackpot-on .modes button[aria-pressed="true"],
html.jackpot-on .tracks button[aria-pressed="true"],
html.jackpot-on .autist[aria-pressed="true"],
html.jackpot-on .tilt[aria-pressed="true"] {
  background: var(--ink);
  color: #07060b;
}
html.jackpot-on .about,
html.jackpot-on .legal,
html.jackpot-on .guide,
html.jackpot-on .keys,
html.jackpot-on .stat,
html.jackpot-on .meter,
html.jackpot-on .logo,
html.jackpot-on .source,
html.jackpot-on .hall {
  text-shadow: 0 1px 2px rgba(20, 0, 20, 0.9);
}
html.karelia-on { background: #008100; }
html.karelia-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #008100;
  background-image:
    linear-gradient(to bottom, transparent 41.189%, #000 41.189% 58.811%, transparent 58.811%),
    linear-gradient(to right, transparent 31.975%, #000 31.975% 41.852%, transparent 41.852%),
    linear-gradient(to bottom, transparent 35.132%, #ff0000 35.132% 64.868%, transparent 64.868%),
    linear-gradient(to right, transparent 28.580%, #ff0000 28.580% 45.247%, transparent 45.247%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: max(100vw, calc(100vh * 810 / 454)) max(100vh, calc(100vw * 454 / 810));
}
html.karelia-on body { background: transparent; }
html.karelia-on .screen { position: relative; z-index: 1; }
html.karelia-on .modes button,
html.karelia-on .tracks button,
html.karelia-on .autist,
html.karelia-on .tilt,
html.karelia-on .sound {
  background: rgba(6, 24, 12, 0.72);
  color: #f4f1ea;
}
html.karelia-on .modes button[aria-pressed="true"],
html.karelia-on .tracks button[aria-pressed="true"],
html.karelia-on .autist[aria-pressed="true"],
html.karelia-on .tilt[aria-pressed="true"] {
  background: var(--ink);
  color: #07060b;
}
html.karelia-on .about,
html.karelia-on .legal,
html.karelia-on .guide,
html.karelia-on .keys,
html.karelia-on .stat,
html.karelia-on .meter,
html.karelia-on .logo,
html.karelia-on .source,
html.karelia-on .hall {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
html.karelia-on .pad {
  background: transparent;
  box-shadow: none;
}
#jackpot {
  position: fixed;
  top: 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 16px);
  z-index: 4;
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 4.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fffaf3;
  text-shadow: 0 2px 0 #2a1020, 0 0 10px #2a1020;
  pointer-events: none;
  white-space: nowrap;
}
.veil { z-index: 3; }
.miss { max-width: 36rem; margin: 18vh auto; padding: 0 20px; }
.miss a { color: var(--ink); }

@media (max-width: 720px) {
  .screen {
    justify-content: flex-start;
    gap: 12px;
    padding:
      12px
      calc(14px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      calc(14px + env(safe-area-inset-left));
  }
  html.jackpot-on .screen { padding-top: 46px; }
  .cabinet { gap: 8px; }
  .logo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: auto;
    font-size: 18px;
  }
  .en-name { margin-top: 0; }
  .play {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "side"
      "well"
      "pad"
      "menus";
    justify-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .menus {
    display: grid;
    grid-area: menus;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px;
    padding-top: 0;
    transform: translate3d(0, calc(var(--spread) * -1), 0);
  }
  .modes, .tracks {
    display: flex;
    grid-column: 1 / -1;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .modes::-webkit-scrollbar,
  .tracks::-webkit-scrollbar { display: none; }
  .modes button, .tracks button, .autist, .tilt {
    width: auto;
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
    text-align: center;
  }
  .modes button { flex: 1 1 0; }
  .tracks button { flex: 1 0 auto; }
  .source { height: auto; grid-column: 1 / -1; text-align: center; }
  .source[hidden] { display: none !important; }
  #well {
    grid-area: well;
    justify-self: center;
    border-width: 4px;
  }
  .side {
    grid-area: side;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "score best next"
      "row2 row2 next"
      "meter meter sound";
    gap: 4px 12px;
    align-items: center;
    padding-top: 0;
    transform: translate3d(0, var(--spread), 0);
  }
  .side > .stat:nth-child(1) { grid-area: score; align-self: end; }
  .side > .stat:nth-child(2) { grid-area: best; align-self: end; }
  .side > .row2 { grid-area: row2; align-self: end; gap: 12px; }
  .side > .meter { grid-area: meter; }
  .side > .queue {
    grid-area: next;
    justify-self: end;
    align-self: center;
    gap: 8px;
  }
  .queue span { height: auto; font-size: 10px; }
  .queue canvas { margin-top: 0; }
  .meter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
  }
  .meter-row b { min-width: 0; font-size: 13px; }
  .meter-row span { font-size: 10px; letter-spacing: 0; }
  .stat b, .row2 b { margin-top: 0; font-size: 20px; }
  .keys { display: none; }
  .sound {
    grid-area: sound;
    justify-self: end;
    align-self: center;
    width: auto;
    min-width: 4.5rem;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }
  .pad {
    grid-area: pad;
    display: grid;
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    background: var(--bg);
    box-shadow: 0 -18px 16px var(--bg);
  }
  .pad button { height: 56px; touch-action: manipulation; }
  .about, .legal { min-height: 0; }
  .hall-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .hall-slots { gap: 4px; }
  .guide {
    padding:
      4px
      calc(14px + env(safe-area-inset-right))
      calc(96px + env(safe-area-inset-bottom))
      calc(14px + env(safe-area-inset-left));
    font-size: 15px;
  }
  .guide h2 { margin-top: 22px; font-size: 20px; }
}
@media (max-height: 760px) and (min-width: 721px) {
  .logo { font-size: 16px; }
  .stat b { font-size: 22px; }
}