:root {
  color: #20370f;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #bdf78a;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100dvh; background: #bdf78a; }
button { font: inherit; }
#app { min-height: 100dvh; display: grid; place-items: center; }

.game-shell {
  position: relative;
  width: min(100vw, 432px);
  min-height: 100dvh;
  overflow: hidden;
  padding: max(env(safe-area-inset-top), 12px) 13px max(env(safe-area-inset-bottom), 16px);
  background:
    radial-gradient(circle at 12% 22%, #8ecc4f 0 2px, transparent 2.8px),
    radial-gradient(circle at 79% 40%, #8ecc4f 0 2px, transparent 2.8px),
    radial-gradient(circle at 28% 76%, #a7e668 0 3px, transparent 3.8px),
    linear-gradient(180deg, #d9ffad 0%, #bdf78a 44%, #abec75 100%);
  isolation: isolate;
}

.game-shell::before, .game-shell::after {
  position: absolute; z-index: -1; color: #75b948; content: "⌁";
  font-family: cursive; font-size: 34px; opacity: .65;
}
.game-shell::before { top: 146px; left: 34px; transform: rotate(-20deg); }
.game-shell::after { right: 26px; bottom: 218px; transform: rotate(24deg); }

.topbar { height: 82px; display: grid; grid-template-columns: 62px 1fr 72px; align-items: center; gap: 8px; }
.settings, .level-badge, .utility, .overlay__button { border: 3px solid #31550f; box-shadow: 0 3px 0 #31550f; }
.settings { min-height: 38px; border-radius: 11px; background: #58c8f6; color: #fff; font-weight: 900; cursor: pointer; }
.level-badge { justify-self: center; display: grid; min-width: 120px; padding: 4px 14px 5px; border-radius: 12px; color: #f4fee2; background: #1d2b12; line-height: 1.1; text-align: center; }
.level-badge span { font-size: 11px; color: #bff083; }.level-badge strong { font-size: 16px; }
.host { width: 69px; height: 69px; border: 3px solid #31550f; border-radius: 50%; object-fit: cover; background: #dff9b0; box-shadow: 0 3px 0 rgba(48, 83, 12, .55); }
.message { min-height: 30px; margin: 3px 12px 4px; color: #3e681f; font-size: 13px; font-weight: 700; text-align: center; }

.board { position: relative; width: 100%; height: min(56dvh, 520px); min-height: 448px; }
.tile {
  position: absolute; z-index: calc(10 + var(--layer)); left: var(--x); top: var(--y);
  display: grid; width: var(--size, 62px); height: var(--size, 62px); padding: 4px; place-items: center;
  border: 2px solid #31550f; border-radius: 8px; background: linear-gradient(135deg, #fffef0, #e8f0ca);
  box-shadow: 0 4px 0 rgba(48, 83, 12, .7), 0 7px 8px rgba(56, 89, 13, .2);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.tile--available { cursor: pointer; animation: tile-enter .26s ease-out both; }
.tile--available:hover, .tile--available:focus-visible { z-index: 20; outline: none; transform: translateY(-5px) scale(1.05); filter: saturate(1.1); }
.tile--available:active { transform: translateY(1px) scale(.94); }
.tile--blocked { filter: brightness(.72) saturate(.55); cursor: not-allowed; }
.tile__icon { display: block; width: 100%; height: 100%; background-image: url("../assets/farm-tile-sheet-1024.webp?v=20260817-3"); background-repeat: no-repeat; background-size: 500% 200%; }
.tile__icon--carrot { background-position: 0 0; }.tile__icon--corn { background-position: 25% 0; }.tile__icon--leaf { background-position: 50% 0; }.tile__icon--cabbage { background-position: 75% 0; }.tile__icon--stump { background-position: 100% 0; }
.tile__icon--glove { background-position: 0 100%; }.tile__icon--milk { background-position: 25% 100%; }.tile__icon--fire { background-position: 50% 100%; }.tile__icon--yarn { background-position: 75% 100%; }.tile__icon--bucket { background-position: 100% 100%; }

.move-out { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 3px 10px; color: #87642c; font-size: 12px; font-weight: 800; }.move-out .tile__icon { width: 26px; height: 26px; }
.tray { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; min-height: 76px; margin: 0; padding: 7px 10px 10px; list-style: none; border: 5px solid #8a511c; border-radius: 12px; background: linear-gradient(#d5a249 0 8px, #804719 8px 100%); box-shadow: inset 0 0 0 2px #e8c16b, 0 4px 0 #6b3b18; }
.tray__slot { display: grid; min-width: 0; min-height: 52px; padding: 3px; place-items: center; border: 2px solid rgba(63, 40, 15, .6); border-radius: 5px; background: rgba(93, 47, 13, .52); }
.tray__slot--filled { background: #fffdef; box-shadow: inset 0 -3px #d2daac; animation: tray-pop .25s cubic-bezier(.34, 1.56, .64, 1); }

.utilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 10px 0; }
.utility { display: grid; min-height: 64px; place-items: center; border-radius: 13px; background: linear-gradient(#66d7ff, #1789dd); color: #fff; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.utility strong { font-size: 18px; line-height: 1; }.utility small { margin-top: 2px; color: #e8f8ff; font-size: 10px; }
.utility:hover:not(:disabled), .utility:focus-visible:not(:disabled) { outline: none; transform: translateY(-3px); filter: brightness(1.1); }
.utility:disabled { border-color: #64716a; background: #9ba7a3; box-shadow: 0 3px 0 #64716a; cursor: default; opacity: .75; }

.overlay { position: absolute; z-index: 100; inset: 0; display: grid; padding: 32px; place-items: center; background: rgba(18, 40, 12, .72); }
.overlay__card { width: min(100%, 330px); padding: 24px 25px 27px; border: 5px solid #31550f; border-radius: 24px; background: #fff7d8; box-shadow: 0 9px 0 #1d360d; text-align: center; }
.overlay__card img { width: 106px; height: 106px; margin-top: -69px; border: 4px solid #31550f; border-radius: 50%; background: #dff9b0; object-fit: cover; }
.overlay__eyebrow { margin: 9px 0 1px; color: #8c6e26; font-size: 13px; font-weight: 800; }.overlay h2 { margin: 8px 0; color: #375e14; font-size: 26px; }.overlay p:not(.overlay__eyebrow) { margin: 0 0 18px; color: #665c37; font-size: 14px; }
.overlay__button { min-width: 162px; min-height: 50px; border-radius: 14px; background: #58c8f6; color: #fff; font-weight: 900; cursor: pointer; }

@keyframes tile-enter { from { opacity: 0; transform: scale(.8) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes tray-pop { 0% { transform: scale(.74); } 100% { transform: scale(1); } }
@media (max-height: 760px) { .topbar { height: 68px; }.host { width: 58px; height: 58px; }.board { min-height: 390px; height: 49dvh; }.utilities { margin-top: 10px; }.utility { min-height: 54px; } }