body {
        font-family: AppleColorEmoji;
        font-size: 15px;
        text-align: center;
        padding: 20px 0;
      }

      span, input, a, div, button {
        box-sizing: border-box;
      }

      .btn, .input {
        padding: 12px 15px;
        font-size: 0.65em;
        border-radius: 3px;
        font-family: 'Exo 2', sans-serif;
        color: #666;
        font-weight: bold;
        display: inline-block;
      }

      .btn {
        background: #f7f7f7;
        text-decoration: none;
        text-transform: uppercase;
        border: 0;
        cursor: pointer;
        margin-bottom: 10px;
        letter-spacing: 1px;
      }

      .flex {
        display: flex;
      }

      .flex-cell {
        flex: 1 1 auto;
      }

      .action-btn {
        margin-bottom: 10px;
        background-color: transparent;
        width: 100%;
        display: block;
        font-size: 1.2em;
        padding: 10px;
        border: 1px solid #eee;
        text-decoration: none;
        border-radius: 5px;
      }

      .action-btn:hover {
        background-color: #f4f4f4;
      }

      .action-btn .emoji {
        width: 20px;
        height: 20px;
      }

      input[type=radio] {
        margin: 0 5px 0 0;
      }

      input[type=number] {
        padding-right: 5px;
      }

      .input {
        border: 1px solid #e0e0e0;
      }

      .input-select {
        width: 100%;
        height: 40px;
        padding: 12px;
        font-size: 1em;
        margin-bottom: 10px;
        background: transparent;
      }

      .divider {
        align-self: center;
        flex: 0;
        padding: 0 10px;
        color: #999;
        font-size: 0.65em;
      }

      .prepend-input {
        padding: 7px 8px 6px 10px;
        margin: 5px 0;
        border-right: 1px solid #e0e0e0;
        line-height: 1;
        position: absolute;
      }

      .prepend-input + input {
        width: 100%;
        padding-left: 45px;
        margin-bottom: 10px;
      }

      code {
        display: none;
        margin-top: 10px;
        text-transform: none;
        background-color: #fff;
        padding: 2px 4px;
        max-width: 400px;
        text-align: left;
      }

      .cell .emoji {
        width: 100%;
      }

      .cell {
        /* disable hold to save image in iOS */
        -webkit-touch-callout: none;
        width: 25px;
        height: 25px;
        font-size: 20px;
        background-color: transparent;
        border: 0;
        display: inline-block;
        position: relative;
        padding: 2px 3px;
        vertical-align: middle;
        cursor: pointer;
      }

      .unmasked {
        cursor: default;
      }

      #map {
        white-space: nowrap;
      }

      .wrapper {
        padding: 10px;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
        border-radius: 10px;
        margin-top: 10px;
        border: 5px solid #f4f4f4;
        display: inline-block;
        min-width: 250px;
      }

      .won .default-emoji,
      .lost .default-emoji {
        display: none;
      }

      .won #map,
      .lost #map {
        pointer-events: none;
      }

      .lost {
        box-shadow: 0 0 1px #f00;
      }

      .won {
        box-shadow: 0 0 1px #1a1;
      }

      .bar {
        margin: 10px -10px -10px;
        background-color: #f4f4f4;
      }

      .stat {
        width: 33.3%;
        font-size: 0.85em;
        padding: 8px 10px 5px;
        text-align: center;
      }

      .small-text {
        display: block;
        color: #999;
        margin-top: 5px;
        font-size: 0.7em;
        letter-spacing: 1px;
      }

      .settings {
        position: absolute;
        width: 40px;
        height: 40px;
        top: -20px;
        right: -20px;
        background-color: #f4f4f4;
        text-align: center;
        border-radius: 25px;
        padding: 2px 8px;
        border: 5px solid #fff;
        cursor: pointer;
        z-index: 1;
      }

      .settings .emoji {
        width: 15px;
        margin: 6px 0;
      }

      .settings-popup {
        margin-right: 10px;
        display: none;
        position: absolute;
      }

      .settings-popup button {
        width: 100%;
        margin: 0;
      }

      .settings-popup .flex {
        margin-bottom: 10px;
      }

      .show {
        display: block;
      }

      .settings-popup.show ~ * {
        visibility: hidden;
      }

      .stat,
      .link-to-github {
        font-family: "Exo 2", sans-serif;
      }

      .link-to-github {
        margin: 40px auto;
        display: block;
        font-size: 12px;
        color: #08c;
        text-decoration: none;
      }

      .feedback {
        font-size: 1px;
        width: 1px;
        height: 1;
        overflow: hidden;
        position: absolute;
        left: -1px;
        top: -1px;
      }