:root {
  --ink:#1b2a5c;
  --bus:#ffbf1f;
  --soft:#fff6d6;
  --white:#ffffff;
  --good:#0f7d40;
  --good-bg:#d9f8e5;
  --bad:#c2253f;
  --bad-bg:#ffe0e5;
  --wall:#dfe6f3;
  --wall2:#c4cee4;
  --seat:#2fa56e;
  --city:#ffbf1f;
  --font-display:"Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --font-body:"Nunito","Fredoka",system-ui,sans-serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
  color: var(--ink);
  background: #7fd0ff;
}
body.inside {
  background: var(--wall);
}
input {
  -webkit-user-select: text;
  user-select: text;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
p {
  margin: 0;
}
h1,
h2 {
  font-family: var(--font-display);
  line-height: 1.08;
  text-wrap: balance;
}
#fit {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.3;
  --t-h1:64px;
  --t-h2:54px;
  --t-text:42px;
  --t-kick:26px;
  --t-btn:36px;
  --t-choice:52px;
  --t-q:58px;
  --t-fb:38px;
}
#stage.port {
  --t-h1:60px;
  --t-h2:54px;
  --t-text:50px;
  --t-kick:28px;
  --t-btn:38px;
  --t-choice:56px;
  --t-q:64px;
  --t-fb:42px;
}
:is(.btn, .choice, .cbtn, .tab, input):focus-visible {
  outline: 5px solid #ff4f87;
  outline-offset: 3px;
}