:root {
  color-scheme: light;
  --paper: #f6f1e1;
  --ink: #332622;
  --stroke: #c5bcb3;
  --pick: #3d2924;
  --hint: #67b932;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --game-height: max(540px, calc(100dvh - var(--safe-top) - var(--safe-bottom)));
  --u: min(calc(100vw / 1080), calc(var(--game-height) / 2077));
  --content-top: calc(244 * var(--u));
  --board-size-base: min(calc(1040 * var(--u)), calc(1080 * var(--u) - clamp(18px, 5vw, 32px)));
  --board-size: var(--board-size-base);
  --board-growth: calc(var(--board-size) - var(--board-size-base));
  --action-lift: calc(55 * var(--u));
  --secondary-action-lift: calc(20 * var(--u));
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body {
  position: fixed;
  inset: 0;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  background: var(--paper) url('resources/ui/background.webp') center fixed;
  background-size: calc(1080 * var(--u)) calc(2337.231 * var(--u));
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC',
    'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
::selection {
  background: transparent;
  color: inherit;
}
button,
select {
  font: inherit;
}
button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button:focus-visible,
select:focus-visible {
  outline: 2px solid #88703c;
  outline-offset: 4px;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
.app {
  position: relative;
  width: calc(1080 * var(--u));
  height: var(--game-height);
  margin: 0 auto;
  touch-action: none;
}
.bar {
  position: absolute;
  inset: 0 0 auto;
}
.image-button {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.image-button > img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.image-button::before {
  position: absolute;
  content: '';
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.image-button:not(:disabled):active {
  filter: brightness(0.9);
}
.home,
.share {
  top: calc(94.573 * var(--u));
  width: calc(105 * var(--u));
  height: calc(133 * var(--u));
}
.home {
  left: calc(64.978 * var(--u));
}
.share {
  left: calc(203.053 * var(--u));
}
.heading {
  position: absolute;
  left: calc(552.061 * var(--u));
  top: 0;
  width: calc(480 * var(--u));
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.heading h1 {
  position: absolute;
  top: calc(60.49 * var(--u));
  width: 100%;
  margin: 0;
  font-size: calc(75 * var(--u));
  line-height: calc(117.1 * var(--u));
  font-weight: 800;
  color: #fff;
  letter-spacing: calc(3 * var(--u));
  -webkit-text-stroke: calc(9 * var(--u)) #171717;
  paint-order: stroke fill;
  stroke-linejoin: round;
}
.heading p {
  position: absolute;
  top: calc(163.9 * var(--u));
  width: 100%;
  margin: 0;
  font-size: calc(42 * var(--u));
  line-height: calc(63 * var(--u));
  font-weight: 700;
  color: #332622;
}
.slots {
  --slot-scale: 1;
  position: absolute;
  top: max(
    calc(50% - var(--slots-y, 670) * var(--u) - 190 * var(--u)),
    calc(var(--content-top) + 47 * var(--u) * var(--slot-scale))
  );
  left: calc(65 * var(--u));
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(101 * var(--u) * var(--slot-scale)));
  align-content: start;
  justify-content: center;
  gap: calc(52 * var(--u) * var(--slot-scale)) calc(16 * var(--u) * var(--slot-scale));
  width: calc(950 * var(--u));
}
.slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(101 * var(--u) * var(--slot-scale));
  height: calc(101 * var(--u) * var(--slot-scale));
  background: url('resources/ui/grid.webp') center / 100% 100% no-repeat;
  color: #000;
  box-sizing: border-box;
}
.slot-word {
  display: block;
  font-size: calc(60 * var(--u) * var(--slot-scale));
  line-height: 1;
  color: #000;
  text-align: center;
  user-select: none;
}
.slot-pinyin {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 2 * var(--u) * var(--slot-scale));
  font-size: calc(45 * var(--u) * var(--slot-scale));
  line-height: 1;
  color: #000;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.slot.new {
  animation: slot-pop 0.4s ease-out;
}
.board {
  position: absolute;
  left: calc(50% + var(--board-x, 3) * var(--u));
  top: calc(50% - var(--board-y, -85.314) * var(--u) - 160 * var(--u) + var(--board-growth) * 0.5);
  width: var(--board-size);
  height: var(--board-size);
  transform: translate(-50%, -50%);
  background: url('resources/ui/board.webp') center / 100% 100% no-repeat;
}
.board::before {
  position: absolute;
  content: '';
  inset: 6.5%;
  background: url('resources/ui/mizige.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
#char {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
#char[aria-disabled='true'] {
  pointer-events: none;
}
.hit {
  cursor: pointer;
}
.ink {
  filter: url('#stroke-default-fill');
  pointer-events: none;
}
.paint {
  filter: url('#stroke-pick-fill');
  opacity: 0;
  pointer-events: none;
}
g.on .paint {
  opacity: 1;
}
g.on .ink,
g.hint .ink {
  visibility: hidden;
}
g.hint:not(.on) .paint {
  filter: url('#stroke-hint-fill');
  opacity: 1;
}
.default-color {
  flood-color: var(--stroke);
}
.pick-color {
  flood-color: var(--pick);
}
.hint-color {
  flood-color: var(--hint);
}
.hit.poly {
  fill: transparent;
}
.empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
}
.submit {
  left: calc(50% - 0.505 * var(--u));
  top: calc(50% + 675 * var(--u) - var(--action-lift));
  width: calc(350 * var(--u));
  height: calc(143 * var(--u));
  transform: translate(-50%, -50%);
}
.more {
  left: calc(50% + var(--board-x, 3) * var(--u) - var(--board-size) * 0.5);
  bottom: calc(257.041 * var(--u) + var(--action-lift));
  width: calc(205 * var(--u));
  height: calc(246 * var(--u));
}
.actions {
  position: absolute;
  inset: auto 0 0;
}
.skip,
.hint,
.reset {
  width: calc(159 * var(--u));
  height: calc(186 * var(--u));
}
.skip {
  left: calc(129.646 * var(--u));
  bottom: calc(36.096 * var(--u) + var(--secondary-action-lift));
}
.hint {
  left: calc(461.614 * var(--u));
  bottom: calc(35.008 * var(--u) + var(--secondary-action-lift));
  height: calc(187 * var(--u));
}
.reset {
  left: calc(790.757 * var(--u));
  bottom: calc(35.52 * var(--u) + var(--secondary-action-lift));
}

@media (max-width: 600px) and (max-height: 720px) {
  :root {
    --board-size: min(calc(1040 * 100vw / 1080), calc(100vw - clamp(18px, 5vw, 32px)));
    --compact-board-bottom: calc(
      var(--game-height) * 0.5 - 74.686 * var(--u) + var(--board-size-base) * 0.5 +
        var(--board-growth)
    );
  }
  .submit {
    top: calc(var(--compact-board-bottom) + 79.5 * var(--u));
  }
  .more {
    top: calc(var(--compact-board-bottom) + 4 * var(--u));
    bottom: auto;
  }
  .skip,
  .hint,
  .reset {
    top: calc(var(--compact-board-bottom) + 260 * var(--u) - var(--game-height));
    bottom: auto;
  }
}

.menu-dialog {
  width: min(94vw, 680px);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  padding: 38px 34px 30px;
  border: 3px solid #ded3b5;
  border-radius: 18px;
  background: #fffcf2;
  color: var(--ink);
  box-shadow: 0 12px 45px #382b2440;
}
.menu-dialog::backdrop,
.celebration {
  background: #33291d66;
}
.menu-dialog h2 {
  margin: 0 0 14px;
  text-align: center;
}
.menu-dialog p {
  line-height: 1.7;
}
.close-button {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
}
.close-button img {
  width: 100%;
  height: 100%;
}
.back-button,
.menu-primary,
.continue {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid #c6ad6b;
  border-radius: 8px;
  background: #fff2b9;
  color: #4a381b;
  font-weight: 700;
}
.menu-primary {
  width: 100%;
  margin: 18px 0;
  background: #8bd63b;
  border-color: #66a731;
}
.back-button {
  margin-bottom: 16px;
  padding: 5px 12px;
  background: #fffdf5;
}
.progress {
  text-align: center;
  font-size: 14px;
}
.menu-intro {
  max-width: 560px;
  margin: 0 auto 10px;
  color: #716450;
  font-size: 14px;
  text-align: center;
}
.publisher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.publisher-card {
  display: grid;
  gap: 9px;
  min-height: 126px;
  padding: 18px 14px;
  border: 2px solid #d8c9a8;
  border-radius: 13px;
  background: #fffdf5;
  color: var(--ink);
  text-align: left;
}
.publisher-card:hover,
.publisher-card:active {
  border-color: #b6964c;
  background: #fff6d7;
}
.publisher-card.current {
  border-color: #72a931;
  background: #f6ffe7;
}
.publisher-card strong {
  color: #526f1d;
  font-size: 20px;
}
.publisher-card span:not(.volume-track) {
  color: #766a54;
  font-size: 13px;
}
.volume-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.volume-card {
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 14px;
  border: 2px solid #d8c9a8;
  border-radius: 13px;
  background: #fffdf5;
  color: var(--ink);
  text-align: left;
}
.volume-card:hover,
.volume-card:active {
  border-color: #b6964c;
  background: #fff6d7;
}
.volume-card.current {
  border-color: #72a931;
  background: #f6ffe7;
}
.volume-heading {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.volume-heading strong {
  color: #6d8f24;
  font-size: 20px;
}
.volume-heading span {
  font-size: 14px;
  font-weight: 700;
}
.volume-count {
  color: #766a54;
  font-size: 13px;
}
.volume-track {
  align-self: end;
  height: 5px;
  overflow: hidden;
  border-radius: 6px;
  background: #ece3cc;
}
.volume-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #85bb3b;
}
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 9px;
}
.level-pick {
  position: relative;
  display: grid;
  min-height: 86px;
  place-items: center;
  padding: 15px 6px 14px;
  border: 2px solid #ded3b5;
  border-radius: 11px;
  background: #fffdf5;
  color: var(--ink);
}
.level-pick:hover,
.level-pick:active {
  border-color: #b6964c;
  background: #fff6d7;
}
.level-pick.current {
  border-color: #7aa934;
  background: #f4ffdf;
}
.level-pick.done {
  border-color: #93be54;
  background: #f5ffe9;
}
.level-order {
  position: absolute;
  top: 5px;
  left: 7px;
  color: #8b806d;
  font-size: 11px;
}
.level-char {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}
.level-status {
  position: absolute;
  right: 6px;
  bottom: 4px;
  color: #6f9428;
  font-size: 10px;
}
.celebration {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.celebration-card {
  position: relative;
  width: min(92vw, 380px);
  padding: 32px 24px;
  border: 3px solid #ded3b5;
  border-radius: 20px;
  background: #fffcf2;
  text-align: center;
}
.celebration-art {
  width: 90%;
  height: auto;
}
.celebration-card h2 {
  font-size: 25px;
}
.celebration-card p {
  line-height: 1.5;
}
.celebration-track {
  height: 7px;
  background: #ebe1c4;
  border-radius: 8px;
  overflow: hidden;
}
.celebration-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: #89d53b;
  transform-origin: left;
  animation: countdown 2.8s linear both;
}
.continue {
  width: 100%;
  background: #8bd63b;
  border-color: #66a731;
}
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 18px;
  background: var(--piece-color);
  opacity: 0;
  animation: confetti-burst 1.7s ease-out var(--delay) both;
}
.confetti-piece.round {
  border-radius: 50%;
}
@keyframes slot-pop {
  from {
    transform: scale(0.6);
  }
  to {
    transform: scale(1);
  }
}
@keyframes countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes confetti-burst {
  0% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y)))
      rotate(var(--spin));
    opacity: 0;
  }
}
@media (max-width: 600px) {
  .menu-dialog {
    width: 94vw;
    max-height: 90dvh;
    padding: 38px 18px 22px;
  }
  .volume-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .publisher-grid {
    grid-template-columns: 1fr;
  }
  .publisher-card {
    min-height: 90px;
    padding: 14px;
  }
  .volume-card {
    min-height: 96px;
    padding: 11px;
  }
  .volume-heading {
    display: grid;
    gap: 0;
  }
  .volume-heading strong {
    font-size: 18px;
  }
  .level-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .slot.new,
  .confetti-piece {
    animation: none;
  }
}