:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --grass: #a8ff67;
  --grass-dark: #5eb91c;
  --ink: #193309;
  --tile-w: clamp(48px, 13.2vw, 62px);
  --tile-h: calc(var(--tile-w) * 1.09);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; background: #6fca35; }

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.game {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100vw, 480px);
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: linear-gradient(#aaff70, var(--grass));
  box-shadow: 0 0 40px rgba(31,82,5,.35);
  isolation: isolate;
}

.game::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='190' viewBox='0 0 160 190'%3E%3Cpath d='M24 150c-3-15 2-24 5-29m0 29c1-17 10-20 13-25m-13 25c-2-11-8-14-11-17M124 44c-2-13 1-20 5-27m0 27c0-13 8-17 12-21m-12 21c-2-9-7-13-12-15' fill='none' stroke='%232f930b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.topbar {
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: 58px 1fr 82px;
  align-items: start;
  gap: 8px;
  padding: max(16px, env(safe-area-inset-top)) 14px 4px;
  min-height: 92px;
}

.square-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 7px;
  color: white;
  background: linear-gradient(#20c9ff, #0799e9);
  border: 4px solid #0b1905;
  border-radius: 9px;
  box-shadow: inset 0 -5px rgba(0,67,163,.45), 0 5px rgba(48,111,13,.35);
  cursor: pointer;
}

.square-button svg { width: 100%; fill: currentColor; }

.date-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.date-pill {
  min-width: 164px;
  padding: 7px 16px 8px;
  border-radius: 12px;
  background: #080b07;
  color: white;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  letter-spacing: 1px;
  box-shadow: 0 3px rgba(68,130,26,.25);
}

.progress-pill {
  display: flex;
  align-items: center;
  width: 72px;
  height: 24px;
  padding: 5px 8px;
  border-radius: 20px;
  background: #080b07;
}

.progress-dot { width: 12px; height: 12px; border-radius: 50%; background: white; }
.progress-line { flex: 1; height: 3px; background: rgba(255,255,255,.35); }
.progress-line i { display: block; width: 0; height: 100%; background: white; transition: width .25s; }
.progress-ring { width: 14px; height: 14px; border: 3px solid white; border-radius: 50%; }

.score-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  padding: 5px 4px;
  border-radius: 16px;
  color: white;
  background: rgba(81,154,33,.38);
  text-shadow: 0 1px 2px rgba(0,67,0,.45);
}

.score-chip span { font-size: 11px; }
.score-chip strong { font-size: 13px; }

.top-actions {
  display: grid;
  grid-template-columns: 43px 36px;
  align-items: start;
  gap: 4px;
  margin-top: 4px;
}

.top-actions .score-chip { margin-top: 0; }

.music-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  border: 3px solid #152308;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#20c9ff, #087ed1);
  box-shadow: inset 0 -4px rgba(0,61,145,.38), 0 4px rgba(48,111,13,.28);
  cursor: pointer;
}

.music-button svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.music-button .music-off-icon { display: none; fill: none; }
.music-button[aria-pressed="false"] { background: linear-gradient(#8d9c83, #5e7153); }
.music-button[aria-pressed="false"] .music-on-icon { display: none; }
.music-button[aria-pressed="false"] .music-off-icon { display: block; }

.board-wrap { position: relative; flex: 1 1 auto; min-height: 326px; }
.board { position: absolute; inset: 0; }

.tile {
  position: absolute;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 4px;
  transform: translate(-50%, -50%);
  border: 3px solid #283313;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffe6, #f3ffd1);
  box-shadow: 0 5px 0 #579f16, 0 7px 5px rgba(42,96,8,.3), inset 0 0 0 2px rgba(255,255,255,.75);
  cursor: pointer;
  transition: filter .18s, transform .18s, box-shadow .18s;
}

.tile img, .tray-card img, .reserve-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tile.blocked {
  filter: grayscale(.72) brightness(.68) sepia(.15);
  box-shadow: 0 4px 0 #63704c, 0 6px 4px rgba(28,49,17,.25);
  cursor: not-allowed;
}

.tile.blocked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: rgba(50,57,42,.22);
}

.tile.available:hover { transform: translate(-50%, -53%); }
.tile.available:active { transform: translate(-50%, -46%) scale(.96); }
.tile.shake { animation: shake .28s; }

@keyframes shake {
  25% { transform: translate(-56%, -50%) rotate(-2deg); }
  75% { transform: translate(-44%, -50%) rotate(2deg); }
}

.toast {
  position: absolute;
  z-index: 200;
  left: 50%;
  bottom: 8px;
  min-width: 130px;
  max-width: 80%;
  padding: 8px 14px;
  border-radius: 18px;
  color: white;
  background: rgba(9,20,5,.84);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: .2s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reserve {
  min-height: 42px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  padding: 0 14px 4px;
}

.reserve:empty::before {
  content: "移出的牌会暂存在这里";
  color: rgba(34,99,9,.35);
  font-size: 12px;
}

.reserve-card, .tray-card {
  border: 2px solid #3c471c;
  border-radius: 6px;
  background: #fbffdd;
  box-shadow: 0 3px #5b9e1a;
}

.reserve-card { width: 38px; height: 42px; padding: 2px; cursor: pointer; animation: pop .22s; }

.tray-frame {
  position: relative;
  flex: 0 0 auto;
  margin: 0 10px 8px;
  height: 86px;
  padding: 11px 10px 15px;
  border: 5px solid #6d3900;
  border-radius: 13px;
  background: linear-gradient(#bd6a06 0 10%, #9b4d00 11% 80%, #c97709 81%);
  box-shadow: inset 0 5px rgba(255,171,31,.65), inset 0 -6px #673600, 0 4px rgba(48,108,12,.33);
}

.tray-frame::before, .tray-frame::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 9px;
  border: 3px solid #6d3900;
  border-radius: 8px;
  background: #e89214;
}

.tray-frame::before { left: -8px; }
.tray-frame::after { right: -8px; }

.tray {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: 3px;
  height: 100%;
  padding: 2px 4px;
  border-radius: 8px;
  background: rgba(99,43,0,.35);
}

.tray-slot {
  position: relative;
  min-width: 0;
  height: 54px;
  border: 2px dashed rgba(255,205,95,.22);
  border-radius: 7px;
}

.tray-card {
  position: absolute;
  inset: 1px;
  padding: 2px;
  animation: pop .22s ease-out;
}

.tray-card.match { animation: match .34s ease-in forwards; }

@keyframes pop { from { transform: scale(.2) translateY(-20px); opacity: .2; } }
@keyframes match { 45% { transform: scale(1.15); filter: brightness(1.35); } to { transform: scale(0); opacity: 0; } }

.tools {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 22px max(12px, env(safe-area-inset-bottom));
}

.tool-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  min-width: 0;
  height: 82px;
  padding: 5px 5px 7px;
  color: white;
  border: 3px solid #37410d;
  border-radius: 10px;
  background: linear-gradient(#22c8ff, #079de6);
  box-shadow: inset 0 -7px rgba(1,88,177,.55), 0 6px rgba(51,112,14,.35);
  text-shadow: -2px 0 #101700, 0 2px #101700, 2px 0 #101700, 0 -2px #101700;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
}

.tool-button svg { width: 52px; height: 40px; fill: #ffd21c; stroke: #563800; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tool-button:active { transform: translateY(3px); box-shadow: inset 0 -4px rgba(1,88,177,.55), 0 3px rgba(51,112,14,.35); }
.tool-button.used { filter: grayscale(.8) brightness(.78); cursor: not-allowed; }
.tool-count {
  position: absolute;
  top: -10px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  background: #050805;
  text-shadow: none;
  font-size: 17px;
}

.modal-layer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12,36,4,.58);
  backdrop-filter: blur(3px);
}

.modal-layer[hidden] { display: none; }

.modal-layer.loss-mode {
  place-items: stretch center;
  padding: clamp(128px, 17vh, 170px) 18px max(64px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: rgba(8, 25, 5, .8);
  backdrop-filter: none;
}

.result-card, .settings-card {
  position: relative;
  width: min(100%, 350px);
  padding: 34px 24px 24px;
  border: 5px solid #533000;
  border-radius: 22px;
  background: linear-gradient(#fffbd2, #eaffbb);
  box-shadow: 0 12px 0 rgba(67,107,18,.65), 0 22px 42px rgba(19,51,3,.3);
  color: #2c4f0d;
  text-align: center;
}

.result-badge {
  width: 84px;
  height: 84px;
  margin: -76px auto 8px;
  border: 5px solid #533000;
  border-radius: 50%;
  background: #ffd32b center/72% no-repeat;
  box-shadow: 0 5px #a86000;
}

.result-card h1, .settings-card h2 { margin: 8px 0; font-size: 28px; }
.result-card p { min-height: 44px; margin: 8px 0 18px; line-height: 1.6; }
.result-card[hidden], .failure-panel[hidden] { display: none; }

.primary-button, .setting-row {
  width: 100%;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.primary-button {
  padding: 13px;
  color: white;
  background: linear-gradient(#28c95b, #14983c);
  box-shadow: 0 5px #0b6728;
  font-weight: 800;
  font-size: 18px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: white;
  background: #47671d;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 13px 15px;
  color: #2a4a10;
  background: #dfffae;
  font-size: 16px;
}
.setting-row.danger { color: #713315; background: #ffe3a4; }

.failure-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 420px);
  min-height: 600px;
  color: white;
  text-align: center;
}

.failure-title {
  position: relative;
  z-index: 2;
  width: min(86%, 340px);
  margin: 0;
  padding: 17px 8px 20px;
  border-radius: 8px;
  color: #ff1d19;
  background: #020302;
  box-shadow: 0 4px 0 rgba(0,0,0,.75);
  font-size: clamp(42px, 12vw, 58px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 3px #660000;
}

.challenge-count {
  position: relative;
  z-index: 3;
  margin: -2px 0 10px;
  padding: 5px 24px 7px;
  border-radius: 0 0 8px 8px;
  color: white;
  background: #050605;
  font-size: 18px;
}

.speech-bubble {
  position: relative;
  width: min(82%, 310px);
  margin: 2px 0 12px;
  padding: 17px 18px 20px;
  border-radius: 52% 48% 48% 46% / 42% 42% 58% 58%;
  color: #111;
  background: white;
  font-size: 18px;
  line-height: 1.65;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 52%;
  bottom: -20px;
  border: 12px solid transparent;
  border-top: 24px solid white;
  transform: rotate(-5deg);
}

.clover {
  position: relative;
  width: 66px;
  height: 74px;
  margin: 3px 0 4px;
}

.clover i {
  position: absolute;
  left: 27px;
  top: 22px;
  width: 25px;
  height: 30px;
  border: 3px solid #1a5100;
  border-radius: 55% 55% 48% 48%;
  background: linear-gradient(135deg, #b8ff00, #56c600);
  transform-origin: 6px 12px;
}

.clover i:nth-child(1) { transform: rotate(0deg) translateY(-17px); }
.clover i:nth-child(2) { transform: rotate(90deg) translateY(-17px); }
.clover i:nth-child(3) { transform: rotate(180deg) translateY(-17px); }
.clover i:nth-child(4) { transform: rotate(270deg) translateY(-17px); }
.clover b { position: absolute; left: 31px; top: 43px; width: 5px; height: 29px; border-radius: 5px; background: #54bd08; box-shadow: 0 0 0 2px #1a5100; }

.season-progress {
  position: relative;
  width: 100%;
  margin: 0 0 15px;
  padding-top: 22px;
}

.reward-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 2px 4px;
  color: white;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 2px 2px black;
}

.season-track {
  position: relative;
  height: 28px;
  overflow: visible;
  border: 3px solid #fff0dc;
  background: rgba(255,255,255,.2);
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}

.season-track::after {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(90deg, transparent 49.5%, white 50% 50.8%, transparent 51%, transparent 69.5%, white 70% 70.8%, transparent 71%);
  opacity: .8;
}

.season-track > i {
  display: block;
  width: 39%;
  height: 100%;
  background: linear-gradient(#ff9767, #ef6d35);
  transition: width .4s ease;
}

.sheep-marker {
  position: absolute;
  z-index: 3;
  left: 39%;
  top: 50%;
  width: 40px;
  height: 36px;
  border: 3px solid #191919;
  border-radius: 50%;
  background: white;
  transform: translate(-50%, -75%);
  transition: left .4s ease;
}

.sheep-marker::before, .sheep-marker::after { content: ""; position: absolute; top: 10px; width: 13px; height: 10px; border: 3px solid #191919; background: #eee; }
.sheep-marker::before { left: -9px; border-radius: 70% 20% 60% 20%; transform: rotate(20deg); }
.sheep-marker::after { right: -9px; border-radius: 20% 70% 20% 60%; transform: rotate(-20deg); }
.sheep-marker b { position: absolute; left: 9px; bottom: -9px; width: 20px; height: 21px; border: 3px solid #191919; border-radius: 45%; background: #555; }

.season-percent {
  display: inline-block;
  margin-top: 7px;
  color: #baff00;
  font-size: 19px;
  text-shadow: -2px 0 #111, 0 2px #111, 2px 0 #111, 0 -2px #111;
}

.season-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  font-size: 17px;
}

.season-time svg { width: 24px; height: 24px; fill: white; stroke: #111; stroke-width: 2.5; }

.failure-actions { width: min(82%, 320px); margin-top: auto; }
.loss-button-row { display: grid; grid-template-columns: 1fr 62px; gap: 9px; margin-top: 12px; }

.loss-button {
  width: 100%;
  min-height: 58px;
  padding: 8px 14px;
  border: 4px solid #090909;
  border-radius: 10px;
  color: #111;
  background: white;
  box-shadow: 0 5px 0 rgba(0,0,0,.72);
  font-size: 25px;
  font-weight: 800;
  cursor: pointer;
}

.loss-button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.72); }
.share-button { display: grid; place-items: center; padding: 11px; }
.share-button svg { width: 34px; height: 34px; fill: #090909; stroke: #090909; stroke-width: 5; stroke-linecap: round; }

@media (max-height: 700px) {
  .topbar { min-height: 76px; padding-top: max(8px, env(safe-area-inset-top)); }
  .square-button { width: 42px; height: 42px; }
  .date-pill { font-size: 18px; }
  .board-wrap { min-height: 285px; }
  .reserve { min-height: 32px; }
  .tray-frame { height: 72px; margin-bottom: 5px; padding-top: 7px; padding-bottom: 10px; }
  .tray-slot { height: 45px; }
  .tool-button { height: 66px; font-size: 16px; }
  .tool-button svg { width: 42px; height: 30px; }
  .modal-layer.loss-mode { padding-top: 84px; }
  .failure-panel { min-height: 540px; }
  .failure-title { padding: 12px 8px 15px; font-size: 40px; }
  .speech-bubble { padding: 11px 16px 14px; line-height: 1.45; }
  .clover { transform: scale(.82); margin: -3px 0 -5px; }
  .season-progress { padding-top: 8px; margin-bottom: 8px; }
  .loss-button { min-height: 48px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}