#screen {

  z-index: 100;
  background-color: black;
  box-shadow: 0px 0px 10px 0px black;

}

.canvas-wrapper {
  min-width: 480px;
  min-height: 352px;
  max-width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.secure-mode-toggle {
  position: absolute;
  top: clamp(6px, 1.4%, 10px);
  right: clamp(6px, 1.4%, 10px);
  z-index: 9200;
  display: none;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 2.2vw, 36px);
  height: clamp(30px, 2.2vw, 36px);
  min-width: 30px;
  min-height: 30px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #71df89;
  border-radius: 6px;
  color: #caffd5;
  background: rgba(12, 22, 17, 0.9);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.75),
    0 0 7px rgba(67, 235, 105, 0.48);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

body.game-active .secure-mode-toggle {
  display: flex;
}

.secure-mode-toggle:hover {
  color: #effff2;
  background: rgba(21, 43, 29, 0.96);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(82, 255, 122, 0.72);
}

.secure-mode-toggle:focus-visible {
  outline: 2px solid #fff5a8;
  outline-offset: 2px;
}

.secure-mode-toggle:active {
  transform: scale(0.92);
}

.secure-mode-icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  pointer-events: none;
}

.secure-mode-icon-swords {
  display: none;
}

.secure-mode-toggle:not(.is-enabled) {
  color: #ffdddd;
  border-color: #e26464;
  background: rgba(38, 14, 14, 0.9);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.75),
    0 0 7px rgba(232, 74, 74, 0.48);
}

.secure-mode-toggle:not(.is-enabled) .secure-mode-icon-shield {
  display: none;
}

.secure-mode-toggle:not(.is-enabled) .secure-mode-icon-swords {
  display: block;
}

@media screen and (max-height: 500px),
screen and (max-width: 768px) {
  .secure-mode-toggle {
    top: clamp(4px, 1.2vmin, 8px);
    right: clamp(4px, 1.2vmin, 8px);
    width: clamp(29px, 5vmin, 35px);
    height: clamp(29px, 5vmin, 35px);
    min-width: 29px;
    min-height: 29px;
    padding: clamp(4px, 0.8vmin, 5px);
    border-radius: 6px;
  }
}