html {
  font-family: YuGothic, sans-serif;
  --rpx: 0px;
  --impact: impact, Anton, sans-serif;
  font-size: 16px;
  touch-action: none;
}

a {
  text-decoration: inherit;
  color: inherit;
}

body {
  margin: 0;
  overflow: hidden;
}

.safe {
  position: absolute;
  width: calc(1920 * var(--rpx));
  height: calc(1080 * var(--rpx));
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.overflow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.sp-logo {
  transition: opacity 0.3s;
  width: calc(24 * var(--spx));
  height: calc(30 * var(--spx));
  position: absolute;
  right: calc(30 * var(--spx));
  top: calc(20 * var(--spx));
}

.sp-menu {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  --spx: calc(var(--rpx) * 1080 / 375);
}

.sp-drawer {
  position: absolute;
  top: calc(20 * var(--spx));
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateX(100%);
  transition: transform 0.3s;
}

.sp-menu.open .sp-logo {
  opacity: 0;
}

.sp-menu.open .sp-drawer {
  transform: none;
}

.sp-drawer .header {
  background: white;
  height: calc(60 * var(--spx));
  width: calc(180 * var(--spx));
  border-radius: calc(30 * var(--spx)) 0 0 calc(30 * var(--spx));
  display: flex;
  align-items: center;
  padding: 0 calc(30 * var(--spx));
  box-sizing: border-box;
  justify-content: space-between;
}

.sp-drawer .close {
  width: calc(24 * var(--spx));
  height: calc(24 * var(--spx));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: calc(-12 * var(--spx));
}

.sp-drawer .close svg {
  width: calc(12 * var(--spx));
  height: auto;
}

.sp-drawer .label {
  width: calc(83 * var(--spx));
  height: calc(34 * var(--spx));
}

.sp-drawer .menu {
  width: calc(156 * var(--spx));
  height: calc(100 * var(--spx));
  background: white;
  margin-top: calc(2 * var(--spx));
  display: flex;
  flex-direction: column;
  border-radius: 0 0 0 calc(30 * var(--spx));
  padding: calc(20 * var(--spx));
  box-sizing: border-box;
  justify-content: space-between;
  font-size: calc(12 * var(--spx));
  font-weight: bold;
}

.cover {
  display: flex;
}

body.enter .cover {
  display: none;
}

body.enter #enter {
  display: none;
}

body.stop #vote-u,
body.stop #vote-t,
body.result #vote-u,
body.result #vote-t {
  display: none;
}

#publish {
  display: none;
}

body.result #publish {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: auto;
  height: calc(200 * var(--rpx));
}

body.publish #publish {
  display: none;
}

#result {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(cover.svg) center/cover;
  overflow: hidden;
}

#result {
  display: none;
}

.dragon {
  position: absolute;
  right: calc(-232 * var(--rpx));
  bottom: calc(-222 * var(--rpx));
  width: auto;
  height: calc(889 * var(--rpx));
}

body.result.u .dragon.t {
  display: none;
}

body.result.t .dragon.u {
  display: none;
}

#victory .text-victory {
  position: absolute;
  top: calc(358 * var(--rpx));
  left: calc(328 * var(--rpx));
  width: calc(1260 * var(--rpx));
  height: calc(300 * var(--rpx));
}

#result .label-u {
  position: absolute;
  width: calc(193 * var(--rpx));
  height: calc(75 * var(--rpx));
  top: calc(105 * var(--rpx));
  left: calc(511 * var(--rpx));
}

#result .label-t {
  position: absolute;
  width: calc(265 * var(--rpx));
  height: calc(74 * var(--rpx));
  top: calc(106 * var(--rpx));
  left: calc(1180 * var(--rpx));
}

#result .number {
  position: absolute;
  color: yellow;
  top: calc(211.71 * var(--rpx));
}

#result .number .digits {
  font-family: var(--impact);
  font-size: calc(113 * var(--rpx));
}

#result .number .unit {
  font-size: calc(52 * var(--rpx));
}

#result .number-u {
  left: calc(345.39 * var(--rpx));
}

#result .number-t {
  left: calc(1050 * var(--rpx));
}

body.done #result {
  display: block;
}

@keyframes rotate-result-radial {
  to {
    transform: scale(2) rotate(360deg);
  }
}

#share {
  display: none;
}

#share .text-victory {
  position: absolute;
  top: calc(267 * var(--rpx));
  left: calc(330 * var(--rpx));
  width: calc(1260 * var(--rpx));
  height: calc(300 * var(--rpx));
}

#share .text-thank {
  position: absolute;
  width: calc(996 * var(--rpx));
  height: calc(84.5 * var(--rpx));
  top: calc(181.5 * var(--rpx));
  left: calc(462 * var(--rpx));
}

#share .button-share img {
  position: absolute;
  width: calc(684 * var(--rpx));
  height: calc(130 * var(--rpx));
  top: calc(578 * var(--rpx));
  left: calc(618 * var(--rpx));
}

#share .hashtag {
  position: absolute;
  width: calc(733.5 * var(--rpx));
  height: calc(84 * var(--rpx));
  top: calc(733 * var(--rpx));
  left: calc(593.25 * var(--rpx));
}

#result .text-victory {
  display: none;
}

body.result.u #result .text-victory.u {
  display: block;
}

body.result.t #result .text-victory.t {
  display: block;
}

#share .button-share {
  display: none;
}

body.result.u #share .button-share.u {
  display: inline;
}

body.result.t #share .button-share.t {
  display: inline;
}

body.done.share #victory {
  display: none;
}

body.done.share #share {
  display: block;
}

#to-landscape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.25);
}

#to-landscape .text {
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
}

#to-landscape {
  display: none;
}

@media (hover: none) and (orientation: portrait) {
  #to-landscape {
    display: flex;
  }
}