:root {
  color-scheme: dark;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --navy-0: #030b19;
  --navy-1: #07172e;
  --navy-2: #102b50;
  --blue: #58c7ff;
  --green: #39df7d;
  --red: #ff5364;
  --gold: #ffd44e;
  --ink: #f7fbff;
  --muted: #a8bdd6;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, #1a4d7d 0, #091a33 34%, #020712 78%),
    #020712;
  color: var(--ink);
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
}

.game-shell {
  width: min(100%, 450px);
}

.game-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto 10px;
  padding: 0 2px;
}

.game-title h1 {
  margin: 1px 0 0;
  font-size: clamp(17px, 4.7vw, 22px);
  line-height: 1.25;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px #000;
}

.creator-link {
  display: inline-block;
  margin-top: 3px;
  color: #99dfff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.creator-link:hover,
.creator-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

.eyebrow,
.mini-title {
  margin: 0;
  color: #7ed7ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}

.sound-button {
  flex: 0 0 auto;
  min-width: 67px;
  padding: 9px 10px;
  border: 1px solid #4b6d93;
  border-radius: 12px;
  background: linear-gradient(#19395d, #0b1b32);
  box-shadow: inset 0 1px 0 #ffffff32, 0 4px 12px #0008;
  font-size: 12px;
  font-weight: 900;
}

.sound-button:active {
  transform: translateY(1px);
}

.screen-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 560;
  overflow: hidden;
  border: 3px solid #52739a;
  border-radius: 25px;
  background: #07172e;
  box-shadow:
    0 22px 55px #000b,
    0 0 0 1px #a9ddff44,
    inset 0 0 0 2px #0008;
  touch-action: none;
  user-select: none;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  background: linear-gradient(#04102199, #020813e8);
  backdrop-filter: blur(3px);
  transition: opacity .2s ease, visibility .2s ease;
}

.overlay.visible {
  opacity: 1;
  visibility: visible;
}

.card {
  width: min(100%, 314px);
  padding: 22px 18px 18px;
  text-align: center;
  border: 1px solid #7ea5cc;
  border-radius: 23px;
  background:
    linear-gradient(145deg, #163b64ee, #08182dee 68%),
    #0a1c34;
  box-shadow:
    inset 0 1px 0 #fff4,
    inset 0 0 30px #2a7fc833,
    0 16px 40px #000b;
}

.card h2 {
  margin: 7px 0 15px;
  font-size: 25px;
  line-height: 1.25;
}

.rule-grid {
  display: grid;
  gap: 8px;
  text-align: left;
}

.rule {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid #ffffff1c;
  border-radius: 13px;
  background: #0208146b;
}

.rule > span:last-child {
  display: grid;
}

.rule b {
  font-size: 14px;
}

.rule small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.rule-icon {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 1000;
}

.coin-mini {
  border: 3px solid #ffe891;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff477, #e99b00);
  color: #754300;
  box-shadow: 0 0 13px #ffc40077;
}

.wick-mini {
  position: relative;
  background: linear-gradient(145deg, #4bf993, #18a84e);
  box-shadow: 0 0 13px #31e87966;
}

.wick-mini::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 7px;
  width: 4px;
  height: 28px;
  border-radius: 4px;
  background: #d8ffe9;
}

.wick-mini::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 20px;
  height: 11px;
  border-radius: 3px;
  background: #066f36;
  box-shadow: inset 0 0 0 2px #baffd5;
}

.m-mini {
  background: linear-gradient(145deg, #ff7180, #c51d36);
  color: #fff;
  font-size: 25px;
  box-shadow: 0 0 13px #ff3e5c66;
}

.coin-rule b {
  color: var(--gold);
}

.good-rule b {
  color: #65f5a1;
}

.bad-rule b {
  color: #ff8490;
}

.hint {
  margin: 12px 0;
  color: #b8cbe0;
  font-size: 10px;
  font-weight: 700;
}

.primary-button {
  width: 100%;
  padding: 13px 16px;
  border-radius: 15px;
  background: linear-gradient(#ffdf5a, #e8a916);
  color: #3b2500;
  box-shadow:
    inset 0 2px 0 #fff8a5,
    0 6px 0 #8e5a08,
    0 10px 20px #0008;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .05em;
}

.primary-button:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 0 #fff8a5, 0 2px 0 #8e5a08, 0 5px 10px #0008;
}

.share-button {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  width: 100%;
  min-height: 47px;
  place-items: center;
  margin-bottom: 10px;
  border: 2px solid #ffffff;
  border-radius: 15px;
  background: #050505;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 #ffffff35,
    0 5px 0 #5f748c,
    0 9px 18px #0008;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-decoration: none;
}

.share-button::before {
  content: "𝕏";
  margin-right: 7px;
  font-size: 18px;
}

.share-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 #ffffff35, 0 2px 0 #5f748c, 0 4px 9px #0008;
}

.controls {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
  gap: 12px;
  padding: 12px 7px 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.controls p {
  margin: 0;
  color: #8fa9c5;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
}

kbd {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  padding: 0 4px;
  border: 1px solid #5f7894;
  border-radius: 4px;
  background: #10243e;
  box-shadow: 0 2px 0 #000;
  color: #d9eaff;
  font: inherit;
}

.move-button {
  display: grid;
  place-items: center;
  height: 72px;
  border: 2px solid #6887ac;
  border-radius: 22px;
  background: linear-gradient(145deg, #29496f, #101d36);
  box-shadow:
    inset 0 2px 2px #ffffff43,
    0 7px 0 #050a14,
    0 10px 20px #0009;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.move-button > * {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.move-button span {
  margin-bottom: -4px;
  color: #fff5e8;
  font-size: 37px;
  font-weight: 1000;
  text-shadow: 0 2px 0 #412f35, 0 0 10px #fff5;
}

.move-button small {
  color: #9eb6d1;
  font-size: 9px;
  font-weight: 800;
}

.move-button.pressed,
.move-button:active {
  transform: translateY(5px);
  border-color: #8de1ff;
  background: linear-gradient(145deg, #38648f, #152641);
  box-shadow: inset 0 2px 2px #ffffff43, 0 2px 0 #050a14;
}

.score-result {
  display: grid;
  place-items: center;
  margin: 0 0 13px;
  padding: 11px;
  border: 1px solid #ffffff21;
  border-radius: 15px;
  background: #02081387;
}

.score-result > span {
  color: #81d9ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
}

.score-result > strong {
  color: #ffe25f;
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-shadow: 0 0 18px #ffc40077;
}

.score-result small {
  color: #96abc3;
  font-size: 9px;
}

.pattern-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.pattern-result {
  padding: 8px 6px;
  border: 1px solid #ffffff1e;
  border-radius: 11px;
  background: #030b1775;
}

.pattern-result span {
  display: block;
  margin-bottom: 3px;
  color: #b8cce2;
  font-size: 9px;
  font-weight: 800;
}

.pattern-result b {
  color: #fff;
  font-size: 18px;
}

.pattern-result.good b {
  color: #62f29e;
}

.pattern-result.bad b {
  color: #ff8893;
}

@media (max-height: 760px) {
  body {
    place-items: start center;
  }

  .game-shell {
    width: min(100%, 365px);
  }

  .game-title {
    margin-bottom: 6px;
  }

  .controls {
    grid-template-columns: 70px 1fr 70px;
    padding-top: 7px;
  }

  .move-button {
    height: 56px;
    border-radius: 18px;
  }

  .move-button span {
    font-size: 29px;
  }
}

@media (max-width: 360px) {
  .game-title h1 {
    font-size: 15px;
  }

  .screen-wrap {
    border-radius: 20px;
  }

  .controls {
    grid-template-columns: 72px 1fr 72px;
    gap: 7px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover {
    filter: brightness(1.08);
  }

  .share-button:hover {
    background: #17202b;
    filter: brightness(1.08);
  }

  .sound-button:hover,
  .move-button:hover {
    filter: brightness(1.12);
  }
}