:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --ink: #26452d;
  --cream: #fff7dc;
  --green: #55a94b;
  --deep-green: #307a3e;
  --gold: #f7c649;
  --card-width: clamp(54px, 15.5vw, 66px);
  --card-height: clamp(62px, 17.8vw, 76px);
  --step-x: clamp(48px, 13.6vw, 58px);
  --step-y: clamp(55px, 15.8vw, 67px);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.9) 0 5%, transparent 5.3%),
    linear-gradient(180deg, #8ed7ef 0 34%, #b8df7c 34% 58%, #6caf49 58% 100%);
  overscroll-behavior: none;
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

.game-shell {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse at 25% 43%, #9bca66 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 78% 46%, #8bc15e 0 17%, transparent 17.5%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0 37%, #9bd36c 37% 62%, #70b44f 62%);
  box-shadow: 0 0 60px rgba(26, 74, 40, .26);
}

.game-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 55% -12% -20%;
  background: repeating-linear-gradient(104deg, transparent 0 28px, rgba(44,118,48,.18) 29px 34px);
  transform: perspective(280px) rotateX(48deg);
  transform-origin: top;
  pointer-events: none;
}

.game-shell.is-hard-mode {
  background:
    radial-gradient(ellipse at 25% 43%, #a4c85f 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 78% 46%, #8db755 0 17%, transparent 17.5%),
    linear-gradient(180deg, rgba(255,214,112,.12) 0 37%, #a8cb60 37% 62%, #609d46 62%);
}

.topbar, .status-panel, .board-wrap, .tray-section, .tools { position: relative; z-index: 2; }

.topbar { display: flex; align-items: center; justify-content: space-between; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.brand-kicker { display: block; color: rgba(38,69,45,.62); font-size: 9px; font-weight: 900; letter-spacing: .22em; }
h1 { margin: 2px 0 0; color: #fffdf1; font-size: clamp(25px, 7vw, 31px); line-height: 1; text-shadow: 0 3px 0 rgba(48,122,62,.48), 0 5px 12px rgba(34,81,42,.25); }

.timer-pill {
  min-width: 68px; padding: 5px 10px 6px; border: 2px solid rgba(255,255,255,.75); border-radius: 15px;
  color: #fff; text-align: center; background: linear-gradient(180deg, #f49a4d, #dc623e); box-shadow: 0 4px 0 rgba(128,59,38,.28);
}
.timer-pill[hidden] { display: none; }
.timer-pill span { display: block; font-size: 8px; font-weight: 800; opacity: .86; }
.timer-pill strong { display: block; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }
.timer-pill.is-urgent { animation: timer-alert .7s ease infinite alternate; }

.round-button {
  width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%;
  color: #3c7d42; background: rgba(255,255,255,.78); box-shadow: 0 5px 0 rgba(55,122,60,.28);
  font-size: 21px; font-weight: 900; cursor: pointer;
}
.round-button.is-muted { opacity: .5; }

.status-panel {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  margin-top: 16px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.58); border-radius: 18px;
  background: rgba(255,250,224,.78); box-shadow: 0 7px 18px rgba(53,100,49,.16); backdrop-filter: blur(8px);
}
.status-item { min-width: 58px; }
.status-item span { display: block; color: #6b805f; font-size: 10px; font-weight: 700; }
.status-item strong { display: block; color: var(--deep-green); font-size: 20px; line-height: 1.15; }
.status-item-right { text-align: right; }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #d7e5b7; box-shadow: inset 0 2px 3px rgba(49,98,39,.15); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1b739, #f67f45); transition: width .25s ease; }

.board-wrap { height: clamp(340px, 88vw, 378px); margin-top: 4px; }
.board { position: absolute; left: 50%; top: 23px; width: calc(var(--step-x) * 4 + var(--card-width)); height: calc(var(--step-y) * 4 + var(--card-height)); transform: translateX(-50%); }
.board.is-level-2 {
  --card-width: clamp(46px, 13.5vw, 58px);
  --card-height: clamp(54px, 15.5vw, 67px);
  --step-x: clamp(41px, 11.6vw, 50px);
  --step-y: clamp(47px, 13.4vw, 58px);
  width: calc(var(--step-x) * 5 + var(--card-width));
  height: calc(var(--step-y) * 5 + var(--card-height));
}
.board-tip { position: absolute; left: 0; right: 0; bottom: 2px; margin: 0; color: rgba(39,79,43,.75); font-size: 11px; font-weight: 700; text-align: center; }

.cloud { position: absolute; width: 74px; height: 20px; border-radius: 99px; background: rgba(255,255,255,.45); filter: blur(.2px); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 28px; height: 28px; left: 12px; top: -10px; }
.cloud::after { width: 38px; height: 38px; right: 8px; top: -18px; }
.cloud-a { top: 12px; left: -22px; transform: scale(.65); }
.cloud-b { top: 54px; right: -36px; transform: scale(.8); }

.tile {
  position: absolute; z-index: calc(10 + var(--layer));
  left: calc(var(--x) * var(--step-x)); top: calc(var(--y) * var(--step-y));
  width: var(--card-width); height: var(--card-height); padding: 4px;
  border: 3px solid #fff6c9; border-radius: 13px; background: #fff8da;
  box-shadow: 0 5px 0 #b9853d, 0 8px 11px rgba(57,91,42,.26);
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.tile.is-free { cursor: pointer; }
.tile.is-free:active { transform: translateY(4px); box-shadow: 0 1px 0 #b9853d, 0 3px 5px rgba(57,91,42,.24); }
.tile.is-free:hover { filter: brightness(1.07); }
.tile.is-blocked { opacity: .72; filter: saturate(.7) brightness(.78); }
.tile.is-hinting { animation: hint-pulse .75s ease 2; }

.tile-art, .tray-art {
  display: block; width: 100%; height: 100%; border-radius: 8px;
  background-image: url("../assets/countryside-icons-v2.webp"); background-size: 400% 300%; background-repeat: no-repeat;
}

.tray-section { margin-top: 2px; }
.tray-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 7px; color: #fffbea; text-shadow: 0 2px 4px rgba(39,91,40,.35); }
.tray-heading span { font-size: 15px; font-weight: 900; }
.tray-heading small { font-size: 10px; font-weight: 700; }
.tray {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; min-height: 60px; padding: 7px;
  border: 3px solid rgba(255,246,205,.88); border-radius: 17px; background: rgba(69,117,49,.5);
  box-shadow: inset 0 4px 8px rgba(37,83,36,.25), 0 6px 0 rgba(47,105,43,.45);
}
.tray-slot { aspect-ratio: .88; padding: 3px; border: 1px dashed rgba(255,255,255,.3); border-radius: 9px; background: rgba(255,255,255,.09); }
.tray-slot.is-filled { border-style: solid; border-color: #fff5c3; background: #fff8da; box-shadow: 0 2px 0 #b9853d; animation: slot-pop .2s ease; }
.tray-art { border-radius: 6px; }

.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.tool-button {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px;
  border: 1px solid rgba(255,255,255,.64); border-radius: 15px; color: #426a3d; background: rgba(255,250,229,.85);
  box-shadow: 0 4px 0 rgba(49,105,48,.35); font-size: 12px; font-weight: 900; cursor: pointer;
}
.tool-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(49,105,48,.35); }
.tool-button:disabled { cursor: default; opacity: .48; }
.tool-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: #f1b83f; font-size: 15px; font-weight: 900; }
.undo-icon { background: #69aee8; }
.restart-icon { background: #71b75c; }

.modal-backdrop {
  position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px;
  visibility: hidden; opacity: 0; background: rgba(27,66,37,.53); backdrop-filter: blur(7px); transition: .22s ease;
}
.modal-backdrop.is-visible { visibility: visible; opacity: 1; }
.modal-card {
  width: min(100%, 340px); padding: 30px 26px 25px; border: 3px solid #fff6ca; border-radius: 28px;
  color: var(--ink); text-align: center; background: linear-gradient(180deg, #fffef2, #fff2c7);
  box-shadow: 0 12px 0 #4d8d45, 0 24px 55px rgba(16,51,27,.35); transform: translateY(12px) scale(.97); transition: .22s ease;
}
.modal-backdrop.is-visible .modal-card { transform: none; }
.modal-badge { display: grid; width: 68px; height: 68px; margin: -64px auto 15px; place-items: center; border: 5px solid #fff8d6; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #ffcf4f, #f18740); box-shadow: 0 6px 0 #c86f34; font-size: 34px; font-weight: 900; }
.modal-kicker { margin: 0 0 3px; color: #78a550; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.modal-card h2 { margin: 0; color: #337a3e; font-size: 30px; }
.modal-card p:not(.modal-kicker) { margin: 13px 0 21px; color: #68765e; font-size: 14px; line-height: 1.7; }
.primary-button { width: 100%; min-height: 52px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(180deg, #73c95c, #4da447); box-shadow: 0 5px 0 #337f3b; font-size: 17px; font-weight: 900; cursor: pointer; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #337f3b; }
.primary-button:disabled { cursor: wait; opacity: .62; transform: none; box-shadow: 0 3px 0 #337f3b; }

.toast { position: fixed; z-index: 120; left: 50%; bottom: 118px; padding: 9px 16px; border-radius: 99px; color: #fff; background: rgba(36,71,39,.88); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: .18s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes hint-pulse { 50% { transform: translateY(-7px) scale(1.08); filter: brightness(1.18); box-shadow: 0 6px 0 #e68b36, 0 0 0 6px rgba(255,237,118,.55); } }
@keyframes slot-pop { from { transform: scale(.7); opacity: .4; } }
@keyframes timer-alert { to { transform: scale(1.05); filter: brightness(1.15); } }

@media (max-height: 760px) {
  .game-shell { padding-top: 12px; }
  .status-panel { margin-top: 10px; padding-block: 7px; }
  .board-wrap { height: 330px; }
  .board { transform: translateX(-50%) scale(.92); transform-origin: top center; }
  .tools { margin-top: 12px; }
}

@media (min-width: 700px) {
  body { display: grid; place-items: center; padding: 20px; }
  .game-shell { min-height: min(900px, calc(100dvh - 40px)); border-radius: 32px; }
  .modal-backdrop { position: absolute; }
}

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