* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #0d1016;
  color: #ffffff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
}

body {
  min-height: 100vh;
}

button,
input {
  font-family: inherit;
}

button {
  border: 0;
  outline: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.hidden {
  display: none !important;
}

.screen {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;

  margin: 0 auto;
  padding: 16px;
}


/* =========================================================
   START
========================================================= */

#startScreen {
  min-height: 100vh;

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

.start-card {
  width: 100%;

  padding: 32px 20px;

  background: #171c24;

  border:
    1px solid
    #29313d;

  border-radius: 22px;

  text-align: center;
}

.logo {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 1px;
}

.logo-sub {
  margin-top: 5px;

  color: #7f8a9d;

  font-size: 13px;
  letter-spacing: 1px;
}

.player-label {
  display: block;

  margin-top: 30px;
  margin-bottom: 7px;

  color: #9aa4b4;

  font-size: 12px;
  text-align: left;
}

.player-input {
  width: 100%;
  height: 52px;

  padding: 0 15px;

  background: #0f1319;

  border:
    1px solid
    #343d4a;

  border-radius: 12px;

  color: #ffffff;

  font-size: 17px;

  outline: none;
}

.player-input:focus {
  border-color: #267d9f;
}

.rules {
  margin: 22px 0;

  color: #c1c8d2;

  line-height: 1.9;

  font-size: 13px;
}

.start-button {
  width: 100%;
  min-height: 62px;

  border-radius: 16px;

  background: #267d9f;
  color: #ffffff;

  font-size: 21px;
  font-weight: bold;

  box-shadow:
    0 4px 0
    #18546a;
}

.start-button:active {
  transform: translateY(3px);

  box-shadow: none;
}


/* =========================================================
   RANKING
========================================================= */

.ranking-box {
  margin-top: 18px;

  padding: 13px;

  background: #11161d;

  border:
    1px solid
    #29313d;

  border-radius: 15px;

  text-align: left;
}

.ranking-title {
  margin-bottom: 8px;

  color: #62d9ff;

  font-size: 13px;
  font-weight: 900;

  text-align: center;
}

.ranking-row {
  display: grid;

  grid-template-columns:
    32px
    1fr
    78px
    32px;

  align-items: center;

  min-height: 48px;

  border-bottom:
    1px solid
    #252c35;
}

.ranking-row:last-child {
  border-bottom: 0;
}

.ranking-position {
  color: #ffb454;

  font-size: 18px;
  font-weight: 900;
}

.ranking-name {
  overflow: hidden;

  color: #ffffff;

  font-size: 13px;
  font-weight: bold;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-meta {
  color: #7f8999;

  font-size: 9px;
}

.ranking-time {
  color: #67e59b;

  font-family: monospace;

  font-size: 13px;
  font-weight: bold;

  text-align: right;
}

.ranking-download {
  width: 28px;
  height: 28px;

  border-radius: 8px;

  background: #3d4655;
  color: #ffffff;

  font-size: 13px;
}

.ranking-empty {
  padding: 10px 0;

  color: #6f7989;

  font-size: 11px;

  text-align: center;
}


/* =========================================================
   GAME
========================================================= */

#gameScreen {
  display: none;
}

.game-title {
  margin-bottom: 8px;

  text-align: center;

  font-size: 25px;
  font-weight: 900;
}

.top-info {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;

  margin-bottom: 8px;
}

.info-box {
  padding: 7px;

  background: #191e27;

  border-radius: 12px;

  text-align: center;
}

.info-label {
  color: #7e8899;

  font-size: 10px;
}

.info-value {
  margin-top: 2px;

  font-size: 21px;
  font-weight: bold;

  font-variant-numeric:
    tabular-nums;
}

.round-value {
  color: #62d9ff;
}

.timer-value {
  color: #67e59b;
}

.timer-warning {
  color: #ffbd5c;
}

.timer-danger {
  color: #ff6177;
}


/* =========================================================
   INPUT
========================================================= */

.input-display {
  position: relative;

  height: 61px;

  padding: 4px 9px;

  background: #191e27;

  border-radius: 14px;

  margin-bottom: 7px;
}

.current-input {
  height: 43px;

  line-height: 43px;

  color: #62d9ff;

  font-size: 36px;
  font-weight: 900;

  letter-spacing: 9px;

  text-align: center;
}

.input-message {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 1px;

  height: 13px;

  color: #ffbd5c;

  font-size: 10px;

  text-align: center;
}


/* =========================================================
   CANDIDATE
========================================================= */

.candidate-box {
  position: absolute;

  top: 50%;
  right: 18px;

  width: 82px;

  transform: translateY(-50%);

  padding: 0;

  margin: 0;

  background: transparent;

  text-align: center;

  line-height: 1.1;
}

.candidate-label {
  display: block;

  color: #7d8798;

  font-size: 10px;
}

.candidate-value {
  display: block;

  white-space: nowrap;

  color: #ffffff;

  font-size: 10px;
}

.candidate-count {
  color: #ffb454;

  font-size: 20px;
  font-weight: 900;
}

.candidate-unit {
  color: #ffffff;

  font-size: 10px;
}


/* =========================================================
   HISTORY
========================================================= */

.history-box {
  height: 282px;

  margin-bottom: 8px;

  overflow-y: auto;

  background: #151a21;

  border-radius: 14px;

  scrollbar-width: thin;
}

.history {
  padding: 5px 8px;
}

.round-history-header {
  padding:
    6px 2px 4px;

  margin-top: 3px;

  color: #62d9ff;

  font-size: 10px;
  font-weight: bold;

  border-bottom:
    1px solid
    #29303a;
}

.history-row {
  display: grid;

  grid-template-columns:
    62px
    54px
    1fr
    45px;

  align-items: center;

  min-height: 37px;

  border-bottom:
    1px solid
    #252b34;
}

.history-guess {
  color: #ffffff;

  font-family: monospace;

  font-size: 16px;
  font-weight: bold;

  letter-spacing: 1px;
}

.history-result {
  font-size: 11px;
  font-weight: bold;

  white-space: nowrap;
}

.history-hit {
  color: #62d9ff;
}

.history-blow {
  color: #ffb454;
}

.history-time {
  color: #9da6b5;

  text-align: right;

  padding-right: 5px;

  font-family: monospace;

  font-size: 10px;

  white-space: nowrap;
}

.history-remaining {
  color: #ffffff;

  text-align: right;

  font-family: monospace;

  font-size: 11px;
}


/* =========================================================
   KEYPAD
========================================================= */

.keypad {
  display: grid;

  grid-template-columns:
    3fr 1fr;

  gap: 6px;
}

.number-pad {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 6px;
}

.key {
  min-height: 64px;

  border-radius: 11px;

  background: #292f3c;
  color: #ffffff;

  font-size: 22px;
  font-weight: bold;

  /*
   * タップ専用の要素であることをブラウザに伝え、
   * スクロール/ズームのジェスチャー判定による遅延・
   * 素早い連打の取りこぼしを防ぐ。
   */
  touch-action: manipulation;

  box-shadow:
    0 3px 0
    #171b22;
}

.key:active {
  transform: translateY(2px);

  box-shadow: none;
}

.key-delete {
  background: #884152;
}

.key-submit {
  min-height: 100%;

  border-radius: 11px;

  background: #267d9f;
  color: #ffffff;

  font-size: 16px;
  font-weight: bold;

  box-shadow:
    0 3px 0
    #18546a;
}

/* =========================================================
   RESULT
========================================================= */

#resultScreen {
  display: none;
}

.result-title {
  text-align: center;

  font-size: 25px;
  font-weight: 900;
}

.final-card {
  margin-top: 10px;

  padding: 18px;

  background:
    linear-gradient(
      135deg,
      #183b2b,
      #172c25
    );

  border:
    1px solid
    #347352;

  border-radius: 18px;

  text-align: center;
}

.timeout-card {
  background:
    linear-gradient(
      135deg,
      #40272b,
      #2b2025
    );

  border-color:
    #74404a;
}

.complete {
  color: #67e59b;

  font-size: 18px;
  font-weight: bold;
}

.timeout-title {
  color: #ff6177;
}

.result-player {
  margin-top: 7px;

  color: #dce3ec;

  font-size: 14px;
}

.total-label {
  margin-top: 12px;

  color: #8791a3;

  font-size: 11px;
}

.total-time {
  margin-top: 2px;

  color: #67e59b;

  font-family: monospace;

  font-size: 38px;
  font-weight: 900;
}

.result-meta {
  margin-top: 9px;

  color: #8993a3;

  font-size: 10px;

  line-height: 1.7;
}

.result-id {
  color: #62d9ff;

  font-family: monospace;

  font-size: 11px;
  font-weight: bold;

  letter-spacing: 1px;
}


/* =========================================================
   SUMMARY
========================================================= */

.summary {
  padding: 9px;

  margin-top: 10px;

  background: #171c23;

  border-radius: 14px;
}

.summary-title {
  margin-bottom: 4px;

  color: #62d9ff;

  font-size: 12px;
  font-weight: bold;
}

.summary-row {
  display: grid;

  grid-template-columns:
    45px
    1fr
    80px;

  align-items: center;

  min-height: 33px;

  border-bottom:
    1px solid
    #272d36;

  font-size: 12px;
}

.summary-round {
  color: #7f899a;
}

.summary-attempts {
  color: #d4d9e1;
}

.summary-time {
  color: #67e59b;

  text-align: right;

  font-family: monospace;
}


/* =========================================================
   RESULT IMAGE
========================================================= */

.preview {
  width: 100%;

  display: none;

  margin-top: 10px;

  border-radius: 12px;
}


/* =========================================================
   RESULT BUTTONS
========================================================= */

.result-button {
  width: 100%;

  min-height: 51px;

  margin-top: 9px;

  border-radius: 12px;

  color: #ffffff;

  font-size: 15px;
  font-weight: bold;
}

.share {
  background: #267d9f;
}

.result-button.is-loading {
  position: relative;

  color: transparent;

  opacity: 0.85;

  pointer-events: none;
}

.result-button.is-loading::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;

  margin: -9px 0 0 -9px;

  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;

  animation: resultButtonSpin 0.7s linear infinite;
}

@keyframes resultButtonSpin {

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   SHARE FALLBACK MODAL
========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;

  z-index: 100;

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

  padding: 20px;

  background: rgba(13, 16, 22, 0.82);
}

.modal-box {
  width: 100%;
  max-width: 360px;

  padding: 20px;

  background:
    linear-gradient(
      135deg,
      #1b2028,
      #141821
    );

  border: 1px solid #2f3644;

  border-radius: 18px;

  text-align: center;
}

.modal-title {
  color: #ffffff;

  font-size: 16px;
  font-weight: bold;
}

.modal-text {
  margin-top: 10px;

  color: #9aa3b2;

  font-size: 13px;
  line-height: 1.6;
}

.modal-box .result-button {
  margin-top: 12px;
}


/* =========================================================
   GOOGLE ADSENSE スロット
========================================================= */

.ad-slot {
  margin: 24px auto 0;

  min-height: 50px;

  text-align: center;
}

/*
 * サイドレール広告(160x600)。
 * 画面の左右端に表示する。
 *
 * position: fixed(スクロールに追従して浮き続ける)は
 * AdSenseプログラムポリシーで禁止されている
 * 「フローティングボックス」に該当するおそれがあるため、
 * position: absolute(ページと一緒にスクロールされる)にしている。
 *
 * 480px(コンテンツ幅) + 160px(広告幅)*2 + 16px(端の余白)*2 = 832px
 * が最低限必要なため、スクロールバー等の余裕を見て
 * 900px以上のビューポート幅からのみ表示する。
 */
.ad-rail {
  display: none;

  position: absolute;
  top: 24px;

  z-index: 10;
}

.ad-rail-left {
  left: 16px;
}

.ad-rail-right {
  right: 16px;
}

@media (min-width: 900px) {

  .ad-rail {
    display: block;
  }

}

.save {
  background: #3d4655;
}

.restart {
  background: #454c59;
}


@media (max-width: 360px) {

  .screen {
    padding: 11px;
  }

  .history-row {
    grid-template-columns:
      58px
      50px
      1fr
      42px;
  }

  .history-guess {
    font-size: 14px;
  }

  .history-time {
    font-size: 9px;
  }

  .key {
    min-height: 60px;
  }

}

/* =========================================================
   3H HISTORY FLASH
========================================================= */

.history-row.history-clear-flash {
  position: relative;

  animation:
    historyClearFlash 0.5s ease-out forwards;
}

.history-row.history-clear-flash::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 8px;
  pointer-events: none;

  background: #ffffff;

  opacity: 0;

  animation:
    historyWhiteFlash 0.12s ease-out forwards;
}

@keyframes historyClearFlash {

  0% {
    background: rgba(255, 255, 255, 0.95);

    box-shadow:
      0 0 4px #ffffff,
      0 0 12px #ffffff,
      0 0 28px #62d9ff,
      0 0 50px rgba(98, 217, 255, 0.8);
  }

  12% {
    background: rgba(255, 255, 255, 0.55);

    box-shadow:
      0 0 8px #ffffff,
      0 0 20px #62d9ff,
      0 0 40px rgba(98, 217, 255, 0.7);
  }

  35% {
    background: rgba(98, 217, 255, 0.20);

    box-shadow:
      0 0 12px rgba(98, 217, 255, 0.6);
  }

  60% {
    background: rgba(98, 217, 255, 0.07);

    box-shadow:
      0 0 5px rgba(98, 217, 255, 0.25);
  }

  100% {
    background: transparent;

    box-shadow:
      0 0 0 transparent,
      inset 0 0 0 transparent;
  }
}

@keyframes historyWhiteFlash {

  0% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}

.history-row.history-clear-flash .history-hit {
  animation:
    hitThreeFlash 0.5s ease-out forwards;
}

@keyframes hitThreeFlash {

  0% {
    color: #ffffff;

    text-shadow:
      0 0 3px #ffffff,
      0 0 10px #ffffff,
      0 0 25px #62d9ff,
      0 0 40px #62d9ff;
  }

  15% {
    color: #ffffff;

    text-shadow:
      0 0 5px #ffffff,
      0 0 15px #ffffff,
      0 0 30px #62d9ff;
  }

  40% {
    color: #62d9ff;

    text-shadow:
      0 0 8px rgba(98, 217, 255, 0.7);
  }

  70% {
    color: #62d9ff;

    text-shadow:
      0 0 3px rgba(98, 217, 255, 0.3);
  }

  100% {
    color: #62d9ff;

    text-shadow:
      0 0 0 transparent;
  }
}

/* =========================================================
   FOOTER
========================================================= */

.footer-links {
  margin-top: 20px;

  text-align: center;

  font-size: 12px;
}

.footer-links a {
  color: #7f8a9d;

  text-decoration: underline;
}

.footer-links a:hover {
  color: #62d9ff;
}