@font-face {
      font-family: 'PokemonFont';
      src: url("./PKMN%20RBYGSC.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #1f7a42;
      font-family: system-ui, sans-serif;
    }

    #game {
      display: block;
      width: 100vw;
      height: 100vh;
      image-rendering: pixelated;
      background:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        #2f9b55;
      background-size: 32px 32px;
    }

    #panel {
      position: fixed;
      left: 12px;
      top: 12px;
      padding: 10px 12px;
      color: white;
      background: rgba(0, 0, 0, .45);
      border-radius: 10px;
      font-size: 14px;
      line-height: 1.4;
      user-select: none;
    }

    #panel input {
      width: 180px;
      margin-right: 6px;
    }

    #panel button {
      cursor: pointer;
    }

    #panel.panel-hidden {
      display: none;
    }

    #panelToggle,
    #panelBattleButton {
      position: fixed;
      left: 12px;
      top: 12px;
      z-index: 20;
      display: none;
      padding: 6px 9px;
      color: white;
      background: rgba(0, 0, 0, .55);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
    }

    #panelBattleButton {
      left: 54px;
      font-size: 13px;
    }

    #panelToggle.visible,
    #panelBattleButton.visible {
      display: block;
    }


    #chatDialogHint {
      position: fixed;
      left: 18px;
      bottom: 14px;
      z-index: 5;
      color: rgba(255,255,255,.7);
      font-size: 12px;
      pointer-events: none;
      display: none;
    }