:root {
        -webkit-tap-highlight-color: transparent;
      }

      .calc-game-wrap {
        width: 100%;
        min-height: calc(100vh - 60px);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        color: #0b1a24;
        
      }

      .calc-game {
        width: 100%;
        max-width: 425px;
        min-height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: "Lato", sans-serif;
        /* border: 1px solid lime; */

        position: relative;
      }

      .calc-screen {
        width: 100%;
        min-height: 48vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 16px 28px;
      }

      .game-panel,
      .play-panel {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .is-hidden {
        display: none !important;
      }

      .start-instruction {
        max-width: 340px;
        margin: 0 0 44px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        color: #0b1a24;
      }

      .game-action-btn {
        min-width: 170px;
        height: 42px;
        padding: 0 24px;
        border: none;
        border-radius: 8px;
        background-color: #204d67;
        color: #ffffff;
        font-family: "Lato", sans-serif;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
      }

      .game-action-btn:hover {
        background-color: #153b52;
      }

      .game-action-btn:focus-visible {
        outline: 3px solid rgba(32, 77, 103, 0.3);
        outline-offset: 3px;
      }

      .finish-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        color: #204d67;
      }

      .finish-time {
        margin-bottom: 28px;
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        color: #0b1a24;
      }

      .message {
        min-height: 30px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        color: #204d67;
      }

      .level-name {
        min-height: 28px;
        margin-bottom: 18px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        color: #0b1a24;
      }

      .operation-user-inp {
        width: 90%;
        min-height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #204d67;
        border-radius: 6px;
        background-color: #f0f0f05e;
        overflow: hidden;

        padding: 0 1px;
      }


       /* .operation {
  flex: 0 1 auto;
  width: max-content;
  min-width: 55%;
  max-width: 78%;
  text-align: right;
  font-size: 30px;
  line-height: 1.2;
  color: #0b1a24;
  white-space: nowrap;
  box-sizing: border-box;
}

.user-inp {
  flex: 1 1 0;
  width: auto;
  min-width: 22%;
  height: 56px;
  border: none;
  outline: none;
  background-color: transparent;
  caret-color: transparent;
  font-size: 30px;
  line-height: 1.2;
  color: #0b1a24;
  text-align: left;
} */


.operation {
  flex: 0 1 auto;
  width: max-content;
  min-width: 55%;
  max-width: 78%;

  font-family: "Lato", sans-serif;
  font-size: 30px;
  line-height: 36px;

  text-align: right;
  color: #0b1a24;
  white-space: nowrap;
  box-sizing: border-box;
}

.user-inp {
  flex: 1 1 0;
  width: auto;
  min-width: 22%;
  height: 36px;

  margin: 0;
  padding: 0;

  border: none;
  outline: none;
  background-color: transparent;

  font-family: "Lato", sans-serif;
  font-size: 30px;
  line-height: 36px;
  font-weight: inherit;

  color: #0b1a24;
  caret-color: transparent;
  text-align: left;

  box-sizing: border-box;
  appearance: none;
}

      .user-inp:focus {
        outline: none;
      }

      .keypad-container {
        width: 100%;
        min-height: 34vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }

      .keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
      }

      .key {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #dbdbdb;
        border-radius: 3px;
        cursor: pointer;
        font-size: 20px;
        color: #0b1a24;
      }

      .key.hover,
      .key:hover {
        background-color: #e0e0e04b;
        border-color: #aaaaaa;
      }

      .key.focus,
      .key:focus-visible {
        background-color: #e0e0e0;
        outline: none;
      }

      .key:disabled {
        cursor: default;
        color: #b8b8b8;
        background-color: #ffffff;
        border-color: #dbdbdb;
      }

      .key:disabled:hover {
        color: #b8b8b8;
        background-color: #ffffff;
        border-color: #dbdbdb;
      }

      .key:disabled img {
        opacity: 0.35;
      }

      .backspace-img,
      .enter-img {
        height: 20px;
      }

      @media (max-width: 480px) {
        .operation,
        .user-inp {
          font-size: 26px;
        }
      }

/* -------- sound toggle */
.sound-toggle {
  position: absolute;
  top: 18px;
  right: 18px;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;
  background: transparent;

  cursor: pointer;

  z-index: 10;
}

.sound-toggle img {
  width: 27px;
  height: 27px;

  display: block;

  pointer-events: none;
}
/* -------- */


      .tr-game-info {
        width: min(100%, 1180px);
        padding: 0 10px;
      }

      .tr-game-info-h {
        margin-bottom: 16px;
      }
      .tr-game-info-p {
        margin-bottom: 10px;
      }