:root {
  /* Pikachu Volleyball's original width: 432px, original height: 304px */
  --aspect-ratio: calc(432 / 304);
  --inverse-aspect-ratio: calc(304 / 432);
  --canvas-width: 96vmin;
  --canvas-height: calc(96vmin * var(--inverse-aspect-ratio));
  --font-size: 18px;
  --btn-width: min(
    calc(5 * var(--font-size)),
    calc((var(--canvas-width) - 30px) / 4)
  );
  --btn-height: calc(3 * var(--font-size));
  --mobile-control-top: calc(8px + var(--btn-height) + 10px);
  --mobile-joystick-size: clamp(84px, 14vmin, 112px);
  --mobile-joystick-knob-size: clamp(40px, 7vmin, 46px);
  --mobile-action-button-size: clamp(80px, 16vmin, 96px);
}
:root {
  --background-color: #ffffff;
  --background-color-with-alpha: rgba(255, 255, 255, 0.8);
  --color: #232629;
  --link-color: #0074cc;
  --link-hover-color: #0a95ff;
  --btn-color: #ffffff;
  --btn-background-color: rgba(50, 50, 50, 1);
  --btn-in-dropdown-background-color: rgba(100, 100, 100, 0.9);
  --btn-in-dropdown-hover-background-color: rgba(50, 50, 50, 0.9);
  --button-disabled-background-color: #cccccc;
  --update-fade-in-box-background-color: rgba(226, 230, 36, 0.85);
  --amount-to-invert-image: 0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #202124;
    --background-color-with-alpha: rgba(32, 33, 36, 0.9);
    --color: #bdc1c6;
    --link-color: #33a7ff;
    --link-hover-color: #3dc8ff;
    --btn-color: #151515;
    --btn-background-color: rgba(232, 232, 232, 1);
    --btn-in-dropdown-background-color: rgba(200, 200, 200, 0.8);
    --btn-in-dropdown-hover-background-color: rgba(232, 232, 232, 0.8);
    --button-disabled-background-color: #666666;
    --update-fade-in-box-background-color: rgba(195, 197, 48, 0.85);
    --amount-to-invert-image: 0.95;
  }
}
/* Copy of the variables in :root above */
:root[data-color-scheme='light'] {
  --background-color: #ffffff;
  --background-color-with-alpha: rgba(255, 255, 255, 0.8);
  --color: #232629;
  --link-color: #0074cc;
  --link-hover-color: #0a95ff;
  --btn-color: #ffffff;
  --btn-background-color: rgba(50, 50, 50, 1);
  --btn-in-dropdown-background-color: rgba(100, 100, 100, 0.9);
  --btn-in-dropdown-hover-background-color: rgba(50, 50, 50, 0.9);
  --button-disabled-background-color: #cccccc;
  --update-fade-in-box-background-color: rgba(226, 230, 36, 0.85);
  --amount-to-invert-image: 0;
}
/* Copy of the variables in @media (prefers-color-scheme: dark) :root above */
:root[data-color-scheme='dark'] {
  --background-color: #202124;
  --background-color-with-alpha: rgba(32, 33, 36, 0.9);
  --color: #bdc1c6;
  --link-color: #33a7ff;
  --link-hover-color: #3dc8ff;
  --btn-color: #151515;
  --btn-background-color: rgba(232, 232, 232, 1);
  --btn-in-dropdown-background-color: rgba(200, 200, 200, 0.8);
  --btn-in-dropdown-hover-background-color: rgba(232, 232, 232, 0.8);
  --button-disabled-background-color: #666666;
  --update-fade-in-box-background-color: rgba(195, 197, 48, 0.85);
  --amount-to-invert-image: 0.95;
}
/* size of iPad screen is 768px x 1024px in portrait mode */
@media only screen and (min-width: 768px) and (min-height: 768px) {
  :root {
    --font-size: 22px;
    --btn-width: min(
      calc(6 * var(--font-size)),
      calc((var(--canvas-width) - 30px) / 4)
    );
  }
}
@media only screen and (min-aspect-ratio: 432/304) {
  :root {
    --canvas-height: calc(96vh - var(--btn-height) - 10px);
    --canvas-height: calc(96dvh - var(--btn-height) - 10px);
    --canvas-width: calc(var(--canvas-height) * var(--aspect-ratio));
  }
}
@media only screen and (max-aspect-ratio: 432/304) {
  :root {
    --canvas-width: min(
      96vw,
      calc(
        100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
      )
    );
    --canvas-height: calc(96vw * var(--inverse-aspect-ratio));
    --canvas-height: calc(var(--canvas-width) * var(--inverse-aspect-ratio));
  }
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
* {
  font-family: Arial, Helvetica, sans-serif;
}
body {
  background-color: var(--background-color);
  color: var(--color);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
[hidden] {
  display: none !important;
}
.mobile-overlay.hidden,
.mobile-action-group.hidden,
.mobile-hit-target.hidden,
.mobile-joystick-base.hidden,
.mobile-joystick-zone.hidden,
.mobile-jump-button.hidden,
.mobile-power-button.hidden,
.mobile-duo-badge.hidden {
  display: none;
}
a,
a:link,
a:visited {
  color: var(--link-color);
  text-decoration: none;
}
a:hover,
a:active {
  color: var(--link-hover-color);
}
#flex-container,
#update-history-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  width: var(--canvas-width);
  height: 100vh;
  height: 100dvh;
  margin-left: auto;
  margin-right: auto;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}
#update-history-container {
  justify-content: center;
  align-items: stretch;
  height: auto;
  font-size: var(--font-size);
  padding-left: var(--font-size);
  padding-right: var(--font-size);
  overflow: visible;
  text-align: left;
}
#menu-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: var(--canvas-width);
  height: var(--btn-height);
  margin-bottom: 10px;
  z-index: 1000;
}
.btn-container {
  display: flex;
  align-items: center;
}
.btn-container.left {
  justify-content: flex-start;
}
.btn-container.right {
  justify-content: flex-end;
}
.btn {
  display: inline-block;
  width: var(--btn-width);
  height: var(--btn-height);
  border: none;
  border-radius: 10px;
  padding: 0;
  color: var(--btn-color);
  background-color: var(--btn-background-color);
  font-size: var(--font-size);
  text-align: center;
  text-decoration: none;
  margin-left: 5px;
  margin-right: 5px;
}
#game-dropdown-btn {
  margin-left: 0;
}
#about-btn {
  margin-right: 0;
}
#chat-btn {
  margin-right: 0;
}

.chat-panel {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + var(--btn-height) + 12px);
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 2100;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  width: min(380px, calc(100vw - 24px));
  min-height: 260px;
  overflow: hidden;
  border: 2px solid rgba(255, 220, 82, 0.9);
  border-radius: 14px;
  color: #f7f8fc;
  background: rgba(10, 21, 43, 0.97);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.46);
}
.chat-panel.hidden,
.chat-readonly-note.hidden,
.nickname-error.hidden,
.nickname-actions .hidden {
  display: none;
}
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
}
.chat-panel-header h2 {
  margin: 0;
  color: #ffdf67;
  font-size: 20px;
}
.chat-close-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 28px;
  line-height: 1;
}
.chat-status,
.chat-readonly-note {
  margin: 0;
  padding: 4px 12px 8px;
  color: #cfe0ff;
  font-size: 13px;
}
.chat-message-list {
  min-height: 0;
  margin: 0;
  padding: 6px 12px 10px;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}
.chat-message-list li {
  display: grid;
  grid-template-columns: 42px minmax(64px, 30%) minmax(0, 1fr);
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 1.35;
}
.chat-message-time {
  color: #9fb1d0;
  font-size: 11px;
  line-height: 19px;
  white-space: nowrap;
}
.chat-message-sender {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}
.chat-message-list strong {
  overflow: hidden;
  color: #ffdf67;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-message-body {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-admin-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border: 1px solid #ffdf67;
  border-radius: 999px;
  padding: 1px 6px;
  color: #241126;
  background: #ffdf67;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}
.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 8px 10px 10px;
}
.chat-form input,
.nickname-form input {
  min-width: 0;
  border: 2px solid rgba(207, 224, 255, 0.7);
  border-radius: 8px;
  color: #111827;
  background: #ffffff;
  font-size: 16px;
}
.chat-form input {
  height: 42px;
  padding: 0 10px;
}
.chat-form button {
  min-width: 62px;
  border: 0;
  border-radius: 8px;
  color: #201129;
  background: #ffdf67;
  font-size: 15px;
  font-weight: 800;
}
.chat-form input:disabled,
.chat-form button:disabled {
  opacity: 0.48;
}

.fade-in-box.nickname {
  z-index: 980;
  justify-content: center;
  background: rgba(10, 21, 43, 0.96);
}
.nickname-form {
  display: flex;
  flex-direction: column;
  width: min(88%, 340px);
  padding: clamp(14px, 4vmin, 24px);
  border: 2px solid #ffdf67;
  border-radius: 14px;
  color: #ffffff;
  background: rgba(18, 35, 69, 0.98);
  text-align: left;
}
.nickname-form h2 {
  margin: 0 0 8px;
  color: #ffdf67;
  font-size: clamp(20px, 5vmin, 28px);
  text-align: center;
}
.nickname-form p {
  margin: 4px 0 12px;
  font-size: clamp(12px, 3vmin, 15px);
}
.nickname-form label {
  margin-bottom: 5px;
  font-size: clamp(13px, 3vmin, 16px);
  font-weight: 700;
}
.nickname-form input {
  height: 42px;
  padding: 0 10px;
}
.nickname-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.nickname-actions button.btn-in-box {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 42px;
  border-radius: 8px;
  font-size: 14px;
}
.nickname-error {
  color: #ffb4ab;
}
.nickname-cancel-hint {
  margin-bottom: 0 !important;
  color: #cfe0ff;
  text-align: center;
}
.relative-container {
  position: relative;
}
.dropdown,
.submenu {
  position: absolute;
  display: none;
  z-index: 1;
}
.dropdown.show {
  display: block;
}
.submenu.show {
  display: inline-block;
}
.submenu-direction::before {
  content: '\25B6\FE0E';
}
.submenu-direction {
  pointer-events: none;
}
.dropdown .btn {
  margin-right: 0;
  background-color: var(--btn-in-dropdown-background-color);
}
.submenu > .btn {
  width: calc(1.4 * var(--btn-width));
  margin-left: 0;
}
.dropdown .btn:hover,
.submenu-btn.open {
  background-color: var(--btn-in-dropdown-hover-background-color);
}
span.check {
  display: none;
}
.selected > span.check {
  display: inline;
}
#game-canvas-container {
  position: relative;
}
#game-canvas {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: var(--canvas-width);
  height: var(--canvas-height);
  image-rendering: pixelated;
}
#game-canvas.graphic-soft {
  image-rendering: auto;
}
.fade-in-box {
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  top: 0;
  left: 0;
  width: var(--canvas-width);
  height: var(--canvas-height);
  font-size: var(--font-size);
  padding-left: var(--font-size);
  padding-right: var(--font-size);
  text-align: center;
  z-index: 950;
  visibility: visible;
  opacity: 1;
  background-color: var(--background-color-with-alpha);
  animation-name: fade-in;
  animation-duration: 1s;
}
.fade-in-box.about {
  justify-content: flex-start;
  height: auto;
  overflow: visible;
  text-align: left;
}
.fade-in-box.loading {
  background-color: transparent;
  color: #eeeeee;
  animation-duration: 0.5s;
}
.fade-in-box.update {
  background-color: var(--update-fade-in-box-background-color);
  color: #232629;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in-box.hidden,
.if-embedded-in-other-website.hidden,
#menu-bar.hidden,
span.hidden {
  display: none;
}
#about-box-head {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  font-size: var(--font-size);
  text-align: center;
  visibility: visible;
  overflow: visible;
}
button.btn-in-box {
  display: block;
  height: calc(2 * var(--font-size));
  width: calc(5 * var(--font-size));
  border: none;
  margin: 0 auto;
  padding: 0;
  background-color: var(--btn-background-color);
  color: var(--btn-color);
  font-size: var(--font-size);
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}
h1 {
  font-size: calc(1.5 * var(--font-size));
}
p.languages,
p.small,
p.p2p-online-version,
p.super-ai-edition,
p.original-by,
p.reverse-engineered-by,
p.source-code-on,
p.release-date,
p.update-history-on {
  font-size: 0.8em;
  line-height: 150%;
}
p.p2p-online-version {
  margin-bottom: 0.1em;
}
p.super-ai-edition {
  margin-top: 0.1em;
}
p.release-date {
  margin-block-end: 0;
}
p.update-history-on {
  margin-block-start: 0;
  margin-block-end: 0;
}
span.no-wrap {
  white-space: nowrap;
}
span.bold {
  font-weight: bold;
}
span.thick {
  font-weight: 900;
}
div.align-center-horizontally {
  display: flex;
  flex-direction: column;
  align-items: center;
}
img.screenshot,
img.controls {
  height: auto;
  width: 100%;
}
img.screenshot {
  max-width: 864px;
}
img.controls {
  max-width: 960px;
  filter: invert(var(--amount-to-invert-image));
}
#progress-bar-border {
  position: relative;
  border: solid;
  border-color: #eeeeee;
  height: var(--btn-height);
  width: calc(var(--canvas-width) / 2);
}
#progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  /*width: width is set on style property of progress-bar element;*/
  height: 100%;
  background-color: #eeeeee;
}
button.update {
  display: inline-block;
  height: calc(3 * var(--font-size));
  width: 100%;
  border: none;
  margin: 2px;
  padding: 0;
  background-color: #eeeeee;
  color: #232629;
  font-size: var(--font-size);
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}
@media (hover: hover) {
  button.update {
    opacity: 0.9;
  }
  button.update:hover {
    opacity: 1;
  }
}
button:disabled {
  background-color: var(--button-disabled-background-color);
}
div.for-margin {
  display: block;
  height: 50vh;
}
div.margin-top,
p.margin-top {
  margin-top: calc(2.25 * var(--font-size));
}
div.limit-width {
  max-width: 864px;
  margin-left: auto;
  margin-right: auto;
}
#update-history-container h1 {
  font-size: calc(1.5 * var(--font-size));
}
div.indent-minus {
  text-indent: calc(-5.4 * var(--font-size));
  margin-left: calc(5.4 * var(--font-size));
}
#flex-container.embedded-in-other-website {
  justify-content: flex-start;
}
.if-embedded-in-other-website {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: calc(var(--font-size) - 10px);
  font-size: calc(0.8 * var(--font-size));
  margin-bottom: var(--font-size);
  padding: var(--font-size);
  border: 3px solid;
  border-radius: 10px;
}
.if-embedded-in-other-website .limit-width {
  max-width: calc(23 * var(--font-size));
}
.if-embedded-in-other-website button {
  margin-top: var(--font-size);
  background-color: var(--background-color);
  color: var(--color);
  font-size: calc(0.8 * var(--font-size));
  border: 3px solid;
  height: calc(1.6 * var(--font-size));
  width: calc(4 * var(--font-size));
}
.original-address {
  margin-top: var(--font-size);
}
button.glow {
  box-shadow: 0 0 5px calc(var(--font-size) / 6) #52aaff;
  animation-name: blinking-glow;
  animation-duration: 0.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes blinking-glow {
  0% {
    box-shadow: 0 0 5px calc(var(--font-size) / 6) #52aaff;
  }
  100% {
    box-shadow: 0 0 5px calc(1.5 * var(--font-size) / 6) #52aaff;
  }
}
div.color-scheme-toggle-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--btn-width);
  height: var(--btn-height);
  --toggle-switch-height: calc(1.6 * var(--font-size));
  --toggle-ball-diameter: calc(1.2 * var(--font-size));
  --toggle-switch-width: calc(2 * var(--toggle-switch-height));
  --toggle-ball-top: calc(
    (var(--toggle-switch-height) - var(--toggle-ball-diameter)) / 2
  );
  --toggle-ball-left: calc(
    (var(--toggle-switch-height) - var(--toggle-ball-diameter)) / 2
  );
  --toggle-ball-left-toggled: calc(
    var(--toggle-switch-width) - var(--toggle-ball-diameter) -
      var(--toggle-ball-left)
  );
}
/*
 * Toggle switch using CSS
 * Reference: https://dev.to/karankmr/how-to-create-a-custom-toggle-switch-using-css-4pmi
 */
input.toggle-switch {
  display: none;
}
input.toggle-switch + label {
  display: inline-block;
  position: relative;
  margin: auto;
  background-color: var(--btn-background-color);
  height: var(--toggle-switch-height);
  width: var(--toggle-switch-width);
  border-radius: calc(var(--toggle-switch-height) / 2);
  cursor: pointer;
  transition: background-color 1s;
}
input.toggle-switch + label::after {
  content: '';
  position: absolute;
  left: var(--toggle-ball-left);
  top: var(--toggle-ball-top);
  height: var(--toggle-ball-diameter);
  width: var(--toggle-ball-diameter);
  border-radius: 50%;
  background-color: var(--btn-color);
  transition: left 0.5s, background-color 1s;
}
input.toggle-switch:checked + label::after {
  left: var(--toggle-ball-left-toggled);
}
/*
 * The following supplement is for displaying the Sun and Moon unicode characters
 * inside toggle switch label.
 */
input.toggle-switch + label::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: var(--btn-color);
  left: var(--toggle-ball-left-toggled);
  top: var(--toggle-ball-top);
  height: var(--toggle-ball-diameter);
  width: var(--toggle-ball-diameter);
  font-size: var(--toggle-ball-diameter);
  content: '\2600';
}
input.toggle-switch:checked + label::before {
  left: var(--toggle-ball-left);
  content: '\263E';
}

/* Pointer-event overlays for mouse and touch game navigation. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#mobile-canvas-actions {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  touch-action: none;
}
.mobile-action-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mobile-hit-target {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: transparent;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-hit-target:focus-visible,
.mobile-online-action:focus-visible,
.mobile-jump-button:focus-visible,
.mobile-power-button:focus-visible {
  outline: 4px solid #ffdc52;
  outline-offset: 2px;
}
.mobile-intro-action {
  inset: 0;
  width: 100%;
  height: 100%;
}
.mobile-menu-hit-target {
  left: 23%;
  width: 54%;
  height: 12%;
}
#mobile-menu-solo {
  top: 55%;
}
#mobile-menu-duo {
  top: 69.5%;
}
#mobile-menu-multi {
  top: 84%;
}
.mobile-duo-badge {
  display: none;
  position: absolute;
  top: 50%;
  right: clamp(4px, 2vw, 12px);
  transform: translateY(-50%);
  padding: 0.25em 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(20, 24, 32, 0.88);
  font-size: clamp(10px, 2.8vmin, 13px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.mobile-character-hit-target {
  top: 18%;
  width: 36.2%;
  height: 57.5%;
}
#mobile-character-0 {
  left: 10.1%;
}
#mobile-character-1 {
  left: 53.7%;
}
.mobile-online-actions {
  inset: auto auto 6% 50%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 14px);
  width: min(86%, 360px);
  transform: translateX(-50%);
}
.mobile-online-action {
  position: static;
  min-height: clamp(42px, 12vmin, 54px);
  padding: 0.4em 0.6em;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  color: #ffffff;
  background: rgba(13, 24, 48, 0.92);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  font-size: clamp(15px, 4vmin, 20px);
  font-weight: 700;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Gameplay controls are siblings of the canvas. Touch layouts place these
 * controls in dedicated gutters or a deck, so fingers never cover play.
 */
#mobile-game-controls {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  touch-action: none;
}
.mobile-joystick-zone {
  position: relative;
  min-width: 0;
  min-height: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-joystick-base {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mobile-joystick-size);
  height: var(--mobile-joystick-size);
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(25, 33, 48, 0.38);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.28), 0 2px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.mobile-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mobile-joystick-knob-size);
  height: var(--mobile-joystick-knob-size);
  transform: translate(
    calc(-50% + var(--joystick-offset-x, 0px)),
    calc(-50% + var(--joystick-offset-y, 0px))
  );
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}
.mobile-action-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vmin, 12px);
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
.mobile-action-button {
  position: relative;
  flex: 0 0 auto;
  width: var(--mobile-action-button-size);
  height: var(--mobile-action-button-size);
  margin: 0;
  padding: 0.5em;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
  font-size: clamp(13px, 3.7vmin, 18px);
  font-weight: 800;
  line-height: 1.15;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-jump-button {
  background: rgba(42, 105, 210, 0.88);
}
.mobile-power-button {
  background: rgba(202, 47, 47, 0.86);
}
.mobile-jump-button:active,
.mobile-jump-button.pressed,
.mobile-power-button:active,
.mobile-power-button.pressed {
  transform: scale(0.94);
}
.mobile-jump-button:active,
.mobile-jump-button.pressed {
  background: rgba(53, 125, 239, 0.98);
}
.mobile-power-button:active,
.mobile-power-button.pressed {
  background: rgba(230, 58, 58, 0.94);
}

@media (any-pointer: coarse) {
  #mobile-menu-duo[data-touch-disabled='true'] {
    background: rgba(8, 15, 29, 0.48);
    cursor: not-allowed;
  }
  .mobile-duo-badge {
    display: block;
  }

  html.mobile-game-active,
  html.mobile-game-active body.game-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/*
 * In landscape, gameplay occupies four independent columns:
 * joystick | canvas | jump and power | persistent menu rail.
 */
@media (any-pointer: coarse) and (orientation: landscape) {
  body.game-page {
    --mobile-landscape-rail-width: clamp(58px, 10vw, 68px);
    --mobile-landscape-gap: clamp(4px, 1vw, 8px);
    --mobile-landscape-joystick-width: clamp(80px, 13vw, 112px);
    --mobile-landscape-actions-width: clamp(134px, 20vw, 176px);
    --mobile-landscape-padding-top: max(8px, env(safe-area-inset-top, 0px));
    --mobile-landscape-padding-right: max(8px, env(safe-area-inset-right, 0px));
    --mobile-landscape-padding-bottom: max(
      8px,
      env(safe-area-inset-bottom, 0px)
    );
    --mobile-landscape-padding-left: max(8px, env(safe-area-inset-left, 0px));
    --mobile-landscape-available-height: calc(
      100vh - var(--mobile-landscape-padding-top) -
        var(--mobile-landscape-padding-bottom)
    );
    --mobile-landscape-available-height: calc(
      100dvh - var(--mobile-landscape-padding-top) -
        var(--mobile-landscape-padding-bottom)
    );
    --mobile-landscape-available-width: calc(
      100vw - var(--mobile-landscape-padding-left) -
        var(--mobile-landscape-padding-right) -
        var(--mobile-landscape-rail-width) - var(--mobile-landscape-gap)
    );
    --canvas-height: min(
      var(--mobile-landscape-available-height),
      calc(
        var(--mobile-landscape-available-width) * var(--inverse-aspect-ratio)
      )
    );
    --canvas-width: calc(var(--canvas-height) * var(--aspect-ratio));
    --font-size: clamp(12px, 3.4vh, 16px);
    --btn-width: var(--mobile-landscape-rail-width);
    --btn-height: clamp(44px, 11.5vh, 46px);
    --mobile-joystick-size: clamp(64px, 20vmin, 88px);
    --mobile-joystick-knob-size: clamp(32px, 10vmin, 42px);
    --mobile-action-button-size: clamp(64px, 9vw, 88px);
    overflow: hidden;
  }

  html.mobile-game-active body.game-page {
    --mobile-landscape-available-width: calc(
      100vw - var(--mobile-landscape-padding-left) -
        var(--mobile-landscape-padding-right) -
        var(--mobile-landscape-joystick-width) -
        var(--mobile-landscape-actions-width) -
        var(--mobile-landscape-rail-width) - var(--mobile-landscape-gap) -
        var(--mobile-landscape-gap) - var(--mobile-landscape-gap)
    );
  }

  #flex-container {
    display: grid;
    grid-template-columns: var(--canvas-width) var(
        --mobile-landscape-rail-width
      );
    grid-template-rows: var(--canvas-height);
    column-gap: var(--mobile-landscape-gap);
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: var(--mobile-landscape-padding-top)
      var(--mobile-landscape-padding-right)
      var(--mobile-landscape-padding-bottom)
      var(--mobile-landscape-padding-left);
  }

  #game-canvas-container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: var(--canvas-width);
    height: var(--canvas-height);
  }

  #menu-bar {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: var(--mobile-landscape-rail-width);
    height: var(--canvas-height);
    margin: 0;
  }

  #menu-bar.hidden {
    display: flex;
  }

  #menu-bar .btn-container {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: clamp(4px, 1.5vh, 7px);
  }

  #menu-bar .btn-container.left,
  #menu-bar .btn-container.right {
    justify-content: flex-start;
  }

  #menu-bar .relative-container,
  #menu-bar .color-scheme-toggle-switch-container {
    width: 100%;
  }

  #menu-bar .color-scheme-toggle-switch-container {
    --toggle-switch-height: var(--btn-height);
    --toggle-switch-width: 100%;
    --toggle-ball-diameter: calc(var(--btn-height) - 10px);
  }

  #menu-bar .btn,
  #menu-bar .color-scheme-toggle-switch-container {
    height: var(--btn-height);
    margin: 0;
  }

  #menu-bar .btn {
    width: 100%;
    border-radius: 8px;
    padding: 0 3px;
    font-size: var(--font-size);
    line-height: 1.1;
    white-space: normal;
  }

  #menu-bar .dropdown,
  #menu-bar .submenu {
    top: 0;
    right: calc(100% + var(--mobile-landscape-gap));
    left: auto;
  }

  #menu-bar .dropdown {
    width: clamp(132px, 28vw, 176px);
  }

  #menu-bar .submenu {
    width: clamp(118px, 26vw, 164px);
    margin-right: 4px;
  }

  #menu-bar .submenu-direction::before {
    content: '\25C0\FE0E';
  }

  #menu-bar .dropdown .btn,
  #menu-bar .submenu .btn {
    width: 100%;
    height: clamp(32px, 9.6vh, 38px);
    border-radius: 7px;
    padding: 0 5px;
    font-size: clamp(12px, 3.3vh, 15px);
    white-space: nowrap;
  }

  html.mobile-game-active #flex-container {
    grid-template-columns:
      minmax(var(--mobile-landscape-joystick-width), 1fr)
      var(--canvas-width)
      var(--mobile-landscape-actions-width)
      var(--mobile-landscape-rail-width);
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--mobile-landscape-gap);
    justify-content: stretch;
  }

  html.mobile-game-active #game-canvas-container {
    grid-column: 2;
  }

  html.mobile-game-active #menu-bar {
    grid-column: 4;
    height: 100%;
  }

  html.mobile-game-active #mobile-game-controls {
    position: relative;
    inset: auto;
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    display: grid;
    grid-template-columns:
      minmax(var(--mobile-landscape-joystick-width), 1fr)
      var(--canvas-width)
      var(--mobile-landscape-actions-width);
    column-gap: var(--mobile-landscape-gap);
    width: 100%;
    height: 100%;
  }

  html.mobile-game-active #mobile-game-controls.hidden {
    display: none;
  }

  html.mobile-game-active .mobile-joystick-zone {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
  }

  html.mobile-game-active .mobile-action-zone {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    height: 100%;
  }

  .chat-panel {
    top: var(--mobile-landscape-padding-top);
    right: calc(
      var(--mobile-landscape-padding-right) + var(--mobile-landscape-rail-width) +
        var(--mobile-landscape-gap) +
        max(
          0px,
          (var(--mobile-landscape-available-width) - var(--canvas-width)) / 2
        )
    );
    bottom: var(--mobile-landscape-padding-bottom);
    width: min(360px, 58vw);
    min-height: 0;
  }

  html.mobile-game-active .chat-panel {
    right: calc(
      var(--mobile-landscape-padding-right) + var(--mobile-landscape-rail-width) +
        var(--mobile-landscape-gap)
    );
  }

  .chat-panel-header {
    padding-top: 6px;
  }

  .chat-message-list li {
    padding: 3px 0;
    font-size: 12px;
  }
}

/* Portrait gameplay keeps the top menu, then canvas, then a separate deck. */
@media (any-pointer: coarse) and (orientation: portrait) {
  #menu-bar {
    --btn-width: calc((var(--canvas-width) - 16px) / 5);
  }

  #menu-bar .btn {
    margin-left: 2px;
    margin-right: 2px;
    font-size: clamp(11px, 3.5vw, 15px);
  }

  #game-dropdown-btn {
    margin-left: 0;
  }

  #about-btn {
    margin-right: 0;
  }

  html.mobile-game-active body.game-page {
    --mobile-portrait-padding-top: max(8px, env(safe-area-inset-top, 0px));
    --mobile-portrait-padding-right: max(8px, env(safe-area-inset-right, 0px));
    --mobile-portrait-padding-bottom: max(
      8px,
      env(safe-area-inset-bottom, 0px)
    );
    --mobile-portrait-padding-left: max(8px, env(safe-area-inset-left, 0px));
    --mobile-portrait-gap: clamp(6px, 1.6dvh, 10px);
    --mobile-portrait-deck-height: clamp(144px, 28dvh, 224px);
    --mobile-portrait-inner-width: calc(
      100vw - var(--mobile-portrait-padding-left) -
        var(--mobile-portrait-padding-right)
    );
    --mobile-portrait-canvas-height: calc(
      100dvh - var(--mobile-portrait-padding-top) -
        var(--mobile-portrait-padding-bottom) - var(--btn-height) -
        var(--mobile-portrait-deck-height) - var(--mobile-portrait-gap) -
        var(--mobile-portrait-gap)
    );
    --canvas-width: min(
      var(--mobile-portrait-inner-width),
      calc(var(--mobile-portrait-canvas-height) * var(--aspect-ratio))
    );
    --canvas-height: calc(var(--canvas-width) * var(--inverse-aspect-ratio));
    --mobile-joystick-size: clamp(76px, 24vw, 104px);
    --mobile-joystick-knob-size: clamp(36px, 11vw, 44px);
    --mobile-action-button-size: clamp(64px, 18vw, 84px);
    overflow: hidden;
  }

  html.mobile-game-active #flex-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      var(--btn-height)
      var(--canvas-height)
      minmax(var(--mobile-portrait-deck-height), 1fr);
    row-gap: var(--mobile-portrait-gap);
    align-items: stretch;
    justify-items: center;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: var(--mobile-portrait-padding-top)
      var(--mobile-portrait-padding-right) var(--mobile-portrait-padding-bottom)
      var(--mobile-portrait-padding-left);
  }

  html.mobile-game-active #menu-bar {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: min(100%, 520px);
    height: var(--btn-height);
    margin: 0;
  }

  html.mobile-game-active #menu-bar.hidden {
    display: flex;
  }

  html.mobile-game-active #game-canvas-container {
    grid-column: 1;
    grid-row: 2;
    width: var(--canvas-width);
    height: var(--canvas-height);
  }

  html.mobile-game-active #mobile-game-controls {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 3;
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(136px, 42%);
    width: min(100%, 560px);
    height: 100%;
  }

  html.mobile-game-active #mobile-game-controls.hidden {
    display: none;
  }

  html.mobile-game-active .mobile-joystick-zone {
    grid-column: 1;
    width: 100%;
    height: 100%;
  }

  html.mobile-game-active .mobile-action-zone {
    grid-column: 2;
    width: 100%;
    height: 100%;
  }

  .chat-panel {
    top: calc(
      max(8px, env(safe-area-inset-top, 0px)) + var(--btn-height) + 8px
    );
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    width: auto;
  }
}

/* Chat administration is a protected, standalone surface. */
body.admin-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: #f7f8fc;
  background: radial-gradient(
      circle at 12% 0%,
      rgba(97, 68, 157, 0.28),
      transparent 34rem
    ),
    #0a152b;
  font-family: Arial, 'Malgun Gothic', sans-serif;
}
.admin-shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top, 0px))
    max(0px, env(safe-area-inset-right, 0px))
    max(36px, env(safe-area-inset-bottom, 0px))
    max(0px, env(safe-area-inset-left, 0px));
}
.admin-header,
.admin-chat-toolbar,
.admin-compose-heading,
.admin-message-meta,
.admin-nav,
.admin-tabs {
  display: flex;
  align-items: center;
}
.admin-header,
.admin-chat-toolbar {
  justify-content: space-between;
  gap: 18px;
}
.admin-eyebrow {
  margin: 0 0 4px;
  color: #9dbdf4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.admin-header h1,
.admin-compose h2,
.admin-chat-card h2 {
  margin: 0;
  color: #ffdf67;
}
.admin-header h1 {
  font-size: clamp(28px, 5vw, 44px);
}
.admin-nav {
  gap: 8px;
}
.admin-nav a,
.admin-tabs button,
.admin-chat-form button,
.admin-message-list button {
  border: 1px solid rgba(207, 224, 255, 0.32);
  border-radius: 9px;
  color: #f7f8fc;
  background: rgba(255, 255, 255, 0.09);
  font-weight: 800;
  text-decoration: none;
}
.admin-nav a {
  padding: 10px 12px;
}
.admin-status {
  min-height: 22px;
  margin: 18px 0;
  color: #cfe0ff;
}
.admin-status[data-tone='success'] {
  color: #9ce6b4;
}
.admin-status[data-tone='error'] {
  color: #ffadad;
}
.admin-compose,
.admin-chat-card {
  border: 1px solid rgba(207, 224, 255, 0.2);
  border-radius: 16px;
  background: rgba(18, 35, 69, 0.94);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
}
.admin-compose {
  margin-bottom: 18px;
  padding: 18px;
}
.admin-compose-heading {
  gap: 8px;
  margin-bottom: 12px;
}
.admin-compose h2,
.admin-chat-card h2 {
  font-size: 20px;
}
.admin-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.admin-chat-form input {
  min-width: 0;
  height: 46px;
  box-sizing: border-box;
  border: 2px solid rgba(207, 224, 255, 0.7);
  border-radius: 9px;
  padding: 0 12px;
  color: #111827;
  background: #ffffff;
  font-size: 16px;
}
.admin-chat-form button {
  min-width: 76px;
  border-color: #ffdf67;
  color: #241126;
  background: #ffdf67;
}
.admin-chat-form button:disabled {
  opacity: 0.5;
}
.admin-chat-card {
  overflow: hidden;
}
.admin-chat-toolbar {
  padding: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.admin-chat-toolbar p {
  margin: 4px 0 0;
  color: #9db2d4;
  font-size: 13px;
}
.admin-tabs {
  gap: 6px;
}
.admin-tabs button {
  padding: 9px 11px;
}
.admin-tabs button[aria-selected='true'] {
  border-color: #ffdf67;
  color: #241126;
  background: #ffdf67;
}
.admin-message-list {
  margin: 0;
  padding: 0 18px;
  list-style: none;
}
.admin-message-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-message-list li.deleted {
  opacity: 0.7;
}
.admin-message-meta {
  min-width: 0;
  gap: 12px;
}
.admin-message-sender {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.admin-message-sender strong {
  overflow: hidden;
  color: #ffdf67;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-message-meta time {
  flex: 0 0 auto;
  color: #92a6c6;
  font-size: 12px;
}
.admin-message-body {
  grid-column: 1;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
  white-space: pre-wrap;
}
.admin-message-list button {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  min-width: 64px;
  padding: 9px;
}
.admin-message-list .admin-delete-btn {
  border-color: rgba(255, 133, 133, 0.7);
  color: #ffc2c2;
}
.admin-message-list .admin-restore-btn {
  border-color: rgba(109, 226, 151, 0.7);
  color: #9ce6b4;
}
.admin-empty {
  margin: 0;
  padding: 44px 18px;
  color: #9db2d4;
  text-align: center;
}
.admin-empty.hidden {
  display: none;
}

@media (max-width: 640px) {
  .admin-shell {
    width: min(100% - 20px, 1040px);
  }
  .admin-header,
  .admin-chat-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-nav a,
  .admin-tabs button {
    flex: 1 1 0;
    text-align: center;
  }
  .admin-message-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .admin-message-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}