@import url(https://fonts.bunny.net/css?family=azeret-mono:400,700,900);

    :root {
      --col-bg: #8A8C92;
      --col-bg-light: #FFDCAE;
      --col-bg-lighter: #FFEEDB;
      --col-primary: #FF5300;
      --col-primary-dark: #FF2700;
      --col-primary-light: #FF8800;
      --col-shadow: rgba(0, 0, 0, 0.25);
      --col-white: #fff;
    }

    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      line-height: 1;
    }

    body {
      background-color: var(--col-bg);
      font-family: 'Azeret Mono', sans-serif;
    }

    .container {
      width: 100%;
      max-width: 1344px;
      margin: 0 auto;
      height: 100vh;
    }

    #game-canvas {
      position: relative;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    #game-ui {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      user-select: none;
      font-weight: 700;
      transform-origin: top left;
    }

    #btn-start-css {
      position: absolute;
      left: 50%;
      top: 64%;
      transform: translateX(-50%);
      width: 512px;
      height: 96px;
      background-color: #538EC3;
      border-radius: 32px;
      box-shadow: 4px 4px 0 #00000040;
      color: white;
      font-family: 'Azeret Mono', sans-serif;
      font-size: 48px;
      font-weight: 900;
      text-align: center;
      line-height: 96px;
      cursor: pointer;
      pointer-events: auto;
    }

    #btn-start-css:hover {
      background-color: #6C9BC5;
    }

    #credit-text {
      position: absolute;
      right: 24px;
      bottom: 16px;
      color: rgba(0, 0, 0, 0.6);
      font-family: 'Azeret Mono', sans-serif;
      font-size: 16px;
      pointer-events: none;
    }

    #game-score {
      position: absolute;
      right: 52px;
      height: 95px;
      font-family: 'Microsoft JhengHei', sans-serif;
      font-size: 36px;
      line-height: 95px;
      font-weight: 900;
      padding-right: 16px;
      color: #000;
      box-sizing: border-box;
      text-align: right;
    }

    #game-end-container {
      position: absolute;
      width: 100%;
      height: 100%;
      display: none;
      align-items: center;
      justify-items: center;
      background-color: var(--col-shadow);
    }

    #game-end {
      text-align: center;
      padding: 32px 48px;
      background-color: var(--col-bg-lighter);
      border: 5px solid #6C9BC5;
      box-shadow: 0 4px 32px var(--col-shadow);
      border-radius: 32px;
      margin: 0 auto;
      pointer-events: initial;
      user-select: initial;
    }

    #game-end-title {
      font-weight: 700;
      font-size: 48px;
      color: #3981C1;
    }

    #game-end-link {
      display: inline-block;
      color: var(--col-white);
      font-size: 24px;
      text-decoration: none;
      background-color: #8FB8DE;
      margin-top: 16px;
      padding: 16px;
      border-radius: 16px;
      box-shadow: 4px 4px 0 var(--col-shadow);
    }

    #game-end-link:hover {
      background-color: #6C9BC5;
      box-shadow: 6px 6px 0 var(--col-shadow);
    }

    #btn-mute {
      cursor: pointer;
      padding: 0 24px;
      margin-left: auto;
      border-left: 2px solid #ddd;
    }

    #btn-mute:hover {
      background-color: #eee;
    }

    #game-status {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 48px;
      background-color: var(--col-bg-lighter);
      display: none;
      pointer-events: auto;
    }

    .game-status-item {
      display: flex;
      line-height: 1;
      align-items: center;
      margin-right: 32px;
    }

    .game-status-label {
      color: #666;
      font-size: 16px;
      margin-left: 24px;
      margin-right: 8px;
    }

    #game-highscore-value {
      color: #333;
      font-weight: 700;
      font-size: 24px;
    }

    #game-next-fruit {
      width: 24px;
      height: 24px;
    }