:root {
  color: #bfd3d7;
  background: #003238;
  font-family: "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background: #003238;
}

button {
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.game-shell {
  position: relative;
  --shell-width: min(100vw, 880px, max(320px, calc(100svh * 0.64)));
  --shell-pad-x: clamp(12px, 2vw, 22px);
  --board-gap: clamp(8px, 1.3vw, 14px);
  --board-pad: clamp(12px, 1.7vw, 18px);
  --random-tile-size: clamp(
    48px,
    calc(
      (
          var(--shell-width) - var(--shell-pad-x) - var(--shell-pad-x) - var(--board-pad) -
            var(--board-pad) - var(--board-gap) - var(--board-gap) - var(--board-gap) -
            var(--board-gap) - var(--board-gap)
        ) / 6
    ),
    112px
  );
  --reserve-tile-size: calc(var(--random-tile-size) / 2);
  --panel-radius: 18px;
  --tile-radius: 14px;
  --small-tile-radius: 7px;
  --current-radius: 14px;
  --modal-button-radius: 12px;
  --top-gap: clamp(8px, 1.35vw, 14px);
  --score-card-height: clamp(58px, calc(var(--random-tile-size) * 0.78), 86px);
  --tool-height: clamp(54px, calc(var(--random-tile-size) * 0.68), 74px);
  --top-bottom-gap: 12px;
  width: var(--shell-width);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(10px, 2vh, 28px) var(--shell-pad-x) clamp(12px, 2vh, 24px);
  background: #003238;
}

h1 {
  margin: 0 0 6px;
  text-align: center;
  color: #c5d7db;
  font-size: clamp(32px, calc(var(--shell-width) * 0.073), 58px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

h1 span {
  color: #6dc8e3;
}

.record-line {
  margin: 0 0 clamp(14px, 2.5vh, 26px);
  text-align: center;
  color: #c1d4d7;
  font-size: clamp(15px, calc(var(--shell-width) * 0.032), 24px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}

.top-layout {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  grid-template-rows: var(--score-card-height) var(--tool-height);
  gap: var(--top-gap);
  align-items: stretch;
  margin-bottom: var(--top-bottom-gap);
}

.number-switch,
.score-card,
.tool,
.board-wrap,
.restart-button {
  background: #29434a;
}

.number-switch {
  position: relative;
  container-type: inline-size;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: var(--reserve-tile-size) var(--random-tile-size);
  grid-template-rows: auto 1fr;
  column-gap: clamp(8px, 1.4vw, 14px);
  row-gap: 6px;
  align-items: end;
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding: 12px 14px 14px;
  border: clamp(3px, 0.55vw, 5px) solid #168fff;
  border-radius: var(--panel-radius);
  box-shadow: inset 0 0 0 2px rgba(127, 216, 255, 0.15);
}

.number-switch-title {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  max-width: 100%;
  color: #c8d7d9;
  font-size: min(24px, 15cqw);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.preview,
.current,
.cell {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--tile-radius);
  color: rgba(38, 56, 57, 0.74);
  background: var(--tile-color, #dde4e7);
  font-weight: 900;
  line-height: 1;
}

.preview {
  container-type: inline-size;
  --number-size: 58cqw;
  grid-row: 2;
  width: var(--reserve-tile-size);
  height: var(--reserve-tile-size);
  aspect-ratio: 1;
  flex: 0 0 var(--reserve-tile-size);
  justify-self: end;
  align-self: end;
  border-radius: var(--small-tile-radius);
  color: rgba(34, 51, 52, 0.72);
  background: var(--tile-color, #dde4e7);
  font-size: clamp(12px, 4.4vw, 48px);
}

.current {
  container-type: inline-size;
  --number-size: 72cqw;
  grid-row: 2;
  width: var(--random-tile-size);
  height: var(--random-tile-size);
  aspect-ratio: 1;
  flex: 0 0 var(--random-tile-size);
  align-self: end;
  border-radius: var(--current-radius);
  color: rgba(34, 51, 52, 0.72);
  background: var(--tile-color, #dde4e7);
  font-size: clamp(26px, 9vw, 104px);
}

.score-card {
  container-type: inline-size;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 0;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0 8px;
  border-radius: var(--panel-radius);
}

.score-current {
  grid-column: 2;
  grid-row: 1;
}

.score-high {
  grid-column: 3;
  grid-row: 1;
}

.score-card span,
.number-switch-title {
  max-width: 100%;
  font-size: min(24px, 15cqw);
  font-weight: 800;
  white-space: nowrap;
}

.score-card strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #c8d7d9;
  font-size: min(44px, 25cqw);
  line-height: 0.96;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}

.tools {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--top-gap);
  min-height: 0;
  margin: 0;
}

.tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  height: 100%;
  border-radius: var(--panel-radius);
}

.tool:disabled {
  cursor: default;
  opacity: 0.42;
}

.tool.active {
  outline: 4px solid #7fd8ff;
}

.tool.used {
  cursor: default;
}

.tool.effect .tool-icon {
  animation: tool-pop 0.48s ease-out;
  filter: drop-shadow(0 0 14px rgba(127, 216, 255, 0.9));
}

.badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: #68c5df;
  font-size: 18px;
  font-weight: 900;
}

.tool-icon {
  display: grid;
  place-items: center;
  width: clamp(30px, 4.4vw, 48px);
  height: clamp(30px, 4.4vw, 48px);
  color: #fff;
  line-height: 1;
}

.tool-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.board-wrap {
  position: relative;
  padding: var(--board-pad);
  border-radius: var(--panel-radius);
}

.restart-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(66px, 7vh, 92px);
  margin-top: 12px;
  border-radius: var(--panel-radius);
  color: #c5d7db;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
}

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

.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--board-gap);
}

.cell {
  container-type: inline-size;
  --number-size: 60cqw;
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  background: #435a5f;
  color: transparent;
  font-size: clamp(14px, 5.4vw, 70px);
  overflow: hidden;
}

.tile-number {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--number-size);
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
}

.preview.rank-4,
.preview.rank-5 {
  --number-size: 52cqw;
}

.preview.rank-6,
.preview.rank-7 {
  --number-size: 43cqw;
}

.preview.rank-8,
.preview.rank-9 {
  --number-size: 34cqw;
}

.preview.rank-10,
.preview.rank-11 {
  --number-size: 28cqw;
}

.current.rank-4,
.current.rank-5 {
  --number-size: 55cqw;
}

.current.rank-6,
.current.rank-7 {
  --number-size: 43cqw;
}

.current.rank-8,
.current.rank-9 {
  --number-size: 34cqw;
}

.current.rank-10,
.current.rank-11 {
  --number-size: 28cqw;
}

.cell.rank-4,
.cell.rank-5 {
  --number-size: 50cqw;
}

.cell.rank-6,
.cell.rank-7 {
  --number-size: 40cqw;
}

.cell.rank-8,
.cell.rank-9 {
  --number-size: 33cqw;
}

.cell.rank-10,
.cell.rank-11 {
  --number-size: 27cqw;
}

.cell.tile {
  color: rgba(34, 51, 52, 0.72);
  background: var(--tile-color, #dde4e7);
  text-shadow: none;
}

.cell.empty:hover {
  background: #50676c;
}

.cell.effect {
  z-index: 1;
  animation: cell-flash 0.52s ease-out;
  outline: 4px solid rgba(127, 216, 255, 0.95);
  outline-offset: -4px;
}

.cell.empty.effect {
  background: #5f7b82;
}

.rank-2,
.rank-3 {
  color: #f6fdff;
}

.rank-6.glow,
.rank-7.glow,
.rank-8.glow,
.rank-10.glow,
.rank-11.glow {
  box-shadow: 0 0 24px color-mix(in srgb, var(--tile-color, #fff), transparent 30%);
}

.rank-9 {
  color: #12383c;
}

.rank-10 {
  color: #ffffff;
  background: linear-gradient(135deg, #a55bff 0%, #ff5ab8 100%);
}

.rank-11 {
  color: #3f3000;
  background: linear-gradient(135deg, #fff7b0 0%, #ffd95a 45%, #ffb33f 100%);
  animation: pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 28px rgba(255, 217, 90, 0.72);
}

.stream::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.5), transparent 80%);
  transform: translateX(-120%);
  animation: stream 1.9s linear infinite;
}

.particle::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  box-shadow:
    10px 8px 0 -7px rgba(255, 255, 255, 0.9),
    42px 34px 0 -8px rgba(255, 255, 255, 0.65),
    22px 58px 0 -8px rgba(255, 255, 255, 0.8);
}

.crown-mark {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #9a6b00;
  font-size: 26%;
  pointer-events: none;
}

.combo {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  background: rgba(127, 216, 255, 0.95);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: clamp(20px, 3.4vw, 32px);
  font-weight: 900;
  animation: pop 0.4s ease-out;
}

footer {
  display: grid;
  justify-items: center;
  margin-top: clamp(20px, 3.2vh, 42px);
  text-align: center;
  color: #c1d4d7;
  font-weight: 900;
}

footer strong {
  font-size: clamp(22px, 3.2vw, 34px);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 32, 36, 0.72);
}

.modal {
  width: min(420px, 100%);
  border-radius: var(--panel-radius);
  padding: 30px;
  text-align: center;
  color: #d7e8eb;
  background: #29434a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.modal h2 {
  margin: 0 0 18px;
  font-size: 34px;
}

.modal p {
  margin: 10px 0;
  font-size: 22px;
  font-weight: 800;
}

.modal button {
  margin-top: 18px;
  width: 100%;
  min-height: 54px;
  border-radius: var(--modal-button-radius);
  color: #003238;
  background: #7fd8ff;
  font-size: 22px;
  font-weight: 900;
}

.rules-modal {
  width: min(460px, 100%);
  max-height: calc(100svh - 48px);
  overflow: auto;
  text-align: left;
}

.rules-modal h2,
.confirm-modal h2 {
  text-align: center;
}

.rule-copy {
  display: grid;
  gap: 10px;
  color: #d8e9ec;
  font-size: clamp(14px, 3.4vw, 17px);
  font-weight: 850;
  line-height: 1.24;
}

.rule-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #1f3940;
}

.rule-copy p {
  margin: 0;
}

.rule-tool {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 30px;
}

.rule-tool-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.rule-tool-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal .secondary-button {
  color: #d7e8eb;
  background: #435a5f;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.82);
  }
}

@keyframes stream {
  to {
    transform: translateX(120%);
  }
}

@keyframes pulse {
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 34px rgba(255, 255, 255, 0.72);
  }
}

@keyframes tool-pop {
  40% {
    transform: scale(1.18) rotate(-5deg);
  }
}

@keyframes cell-flash {
  0% {
    filter: brightness(1.45);
    transform: scale(0.94);
  }

  70% {
    transform: scale(1.04);
  }
}

@media (max-width: 760px) {
  .game-shell {
    --shell-width: min(100vw, max(320px, calc(100svh * 0.64)));
    --shell-pad-x: 14px;
    --board-gap: 10px;
    --board-pad: 12px;
    --top-gap: 10px;
    --score-card-height: clamp(54px, calc(var(--random-tile-size) * 0.76), 74px);
    --tool-height: clamp(50px, calc(var(--random-tile-size) * 0.66), 64px);
    --top-bottom-gap: 10px;
  }

  .number-switch {
    padding: 10px;
    gap: 8px;
    border-width: 3px;
  }

  .tool-icon {
    width: clamp(28px, 8vw, 40px);
    height: clamp(28px, 8vw, 40px);
  }

  .badge {
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  .restart-button {
    min-height: 58px;
    margin-top: 10px;
  }

  .preview {
    width: var(--reserve-tile-size);
  }
}

@media (max-width: 430px) {
  .game-shell {
    --shell-pad-x: 10px;
    --board-gap: 8px;
    --board-pad: 10px;
    --top-gap: 8px;
  }

  h1 {
    font-size: clamp(29px, calc(var(--shell-width) * 0.078), 34px);
  }

  .record-line {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .top-layout,
  .tools,
  .board {
    gap: 8px;
  }

}