:root {
  color-scheme: light;
  --ink: #2d2117;
  --muted: #745f47;
  --paper: #fff3d7;
  --panel: rgba(255, 250, 229, 0.95);
  --panel-strong: #fff7df;
  --line: rgba(96, 61, 27, 0.2);
  --accent: #c96f22;
  --accent-dark: #8d461c;
  --gold: #f2b63f;
  --leaf: #3f8735;
  --ready: #fff4a6;
  --shadow: 0 18px 45px rgba(54, 37, 17, 0.22);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(51, 110, 54, 0.22), rgba(255, 234, 174, 0.46)),
    #d7ad65;
  overscroll-behavior: none;
  user-select: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("assets/farm-map.png") center / cover no-repeat;
  filter: blur(14px) saturate(1.08);
  transform: scale(1.04);
  opacity: 0.45;
}

body.splash-active {
  overflow: hidden;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #5dbfe9 url("assets/opening-screen.png") center / cover no-repeat;
}

.splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.splash-loading {
  position: absolute;
  left: 50%;
  top: min(74%, calc(100% - 122px));
  width: min(460px, 43vw);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  padding: 9px 10px 10px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(112, 59, 18, 0.84), rgba(62, 33, 11, 0.88));
  box-shadow:
    0 16px 28px rgba(43, 24, 8, 0.28),
    inset 0 1px 0 rgba(255, 239, 183, 0.44),
    inset 0 -2px 0 rgba(42, 21, 7, 0.24);
}

.splash-loading::before,
.splash-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 17px;
  height: 10px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #89c540, #367929);
  box-shadow: inset 1px 1px 0 rgba(244, 255, 192, 0.35), 0 3px 5px rgba(39, 45, 16, 0.3);
}

.splash-loading::before {
  left: -8px;
  transform: translateY(-50%) rotate(-38deg);
}

.splash-loading::after {
  right: -8px;
  transform: translateY(-50%) scaleX(-1) rotate(-38deg);
}

.splash-bar {
  position: relative;
  height: clamp(15px, 1.8vw, 21px);
  overflow: hidden;
  border-radius: 999px;
  border: 2px solid rgba(255, 224, 143, 0.52);
  background: linear-gradient(180deg, rgba(37, 23, 10, 0.82), rgba(73, 39, 11, 0.9));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 235, 162, 0.22);
}

.splash-bar span {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4e9c36, #91ce45 38%, #ffe374 76%, #f3ae37);
  box-shadow: inset 0 1px 0 rgba(255, 255, 216, 0.55), 0 0 12px rgba(255, 218, 82, 0.62);
  transition: width 180ms ease;
}

.splash-bar span::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 46px;
  right: -6px;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 225, 0.66), transparent);
  animation: splashGlow 1.55s ease-in-out infinite;
}

.splash-loading strong {
  min-width: clamp(48px, 5vw, 58px);
  min-height: clamp(34px, 3.6vw, 40px);
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 232, 164, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(236, 163, 47, 0.95), rgba(172, 86, 21, 0.96));
  color: #fff8cf;
  font-size: clamp(0.72rem, 1.2vw, 0.88rem);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(82, 43, 10, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 212, 0.46);
}

.splash-start {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 5px;
  min-width: clamp(150px, 18vw, 188px);
  min-height: clamp(44px, 5vw, 52px);
  padding: 0 28px;
  border: 3px solid rgba(255, 241, 186, 0.96);
  border-radius: 999px;
  background: linear-gradient(180deg, #99dc54, #4ca338 45%, #27752c);
  color: #fffbea;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(27, 73, 21, 0.46);
  box-shadow:
    0 10px 19px rgba(26, 48, 14, 0.32),
    inset 0 2px 0 rgba(255, 255, 207, 0.45),
    inset 0 -4px 0 rgba(17, 70, 23, 0.3);
  animation: splashStartPulse 2.4s ease-in-out infinite;
}

.splash-screen.loading-complete .splash-bar,
.splash-screen.loading-complete .splash-loading > strong {
  display: none;
}

.splash-screen.loading-complete .splash-loading {
  width: auto;
  padding: 8px 18px;
  grid-template-columns: 1fr;
}

.splash-screen.loading-complete .splash-start {
  margin-top: 0;
}

.splash-start:is(:hover, :focus-visible) {
  outline: 0;
  filter: brightness(1.06);
  box-shadow:
    0 0 0 4px rgba(255, 235, 135, 0.34),
    0 13px 22px rgba(26, 48, 14, 0.4),
    inset 0 -4px 0 rgba(17, 70, 23, 0.3);
}

.splash-start:active {
  transform: translateY(2px);
  box-shadow:
    0 6px 14px rgba(26, 48, 14, 0.28),
    inset 0 2px 0 rgba(255, 255, 207, 0.35),
    inset 0 -2px 0 rgba(17, 70, 23, 0.3);
}

@keyframes splashGlow {
  0%, 100% { transform: translateX(-18px); opacity: 0.36; }
  50% { transform: translateX(8px); opacity: 0.9; }
}

@keyframes splashStartPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.065); }
}

button {
  font: inherit;
  touch-action: manipulation;
}

.game-shell {
  width: min(1500px, calc(100vw - 24px));
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
}

.topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(55, 95, 48, 0.74);
  color: #fff7d9;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.eyebrow {
  margin: 0 0 4px;
  font-weight: 800;
  color: #ffd36b;
  text-transform: uppercase;
  font-size: 0.78rem;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.6rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  font-size: 1rem;
}

.wallet {
  min-width: 150px;
  padding: 10px 15px;
  border: 2px solid #fff0bf;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7dc, #ffd776);
  color: var(--accent-dark);
  text-align: right;
  box-shadow: inset 0 -4px 0 rgba(144, 83, 28, 0.14), 0 10px 24px rgba(34, 24, 12, 0.22);
}

.resource-hud {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.premium-open {
  position: relative;
  width: clamp(48px, 5.4vw, 66px);
  height: clamp(48px, 5.4vw, 66px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid #e7f9ff;
  border-radius: 999px;
  background: radial-gradient(circle at 36% 28%, #ffffff 0 12%, #8bf1ff 26%, #278de4 66%, #0d559c 100%);
  box-shadow: 0 0 18px rgba(88, 219, 255, 0.68), inset 0 0 0 3px rgba(255, 255, 255, 0.45), 0 8px 18px rgba(19, 45, 71, 0.28);
  cursor: pointer;
  overflow: hidden;
}

.premium-open::before {
  content: "";
  position: absolute;
  width: 42%;
  height: 160%;
  left: -55%;
  top: -35%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
  animation: gemSweep 2.4s ease-in-out infinite;
}

.premium-open img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.9));
}

.premium-open span {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #fff6bc;
  border-radius: 999px;
  background: linear-gradient(180deg, #a7f060, #2f982a);
  color: #fffbe7;
  font-weight: 1000;
  line-height: 1;
}

.profile-open {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  top: max(46px, calc(env(safe-area-inset-top) + 34px));
  z-index: 7;
  width: clamp(58px, 7vw, 86px);
  height: clamp(58px, 7vw, 86px);
  border: 4px solid #ffd76b;
  border-radius: 999px;
  background: #ffeab2 center / cover no-repeat;
  box-shadow: 0 10px 24px rgba(45, 25, 6, 0.35), inset 0 0 0 3px #fff3bf;
  cursor: pointer;
  pointer-events: auto;
}

.profile-open::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 2px solid rgba(255, 225, 90, 0.7);
  animation: tapSignal 2.2s ease-in-out infinite;
}

.achievement-open {
  position: fixed;
  left: max(19px, calc(env(safe-area-inset-left) + 7px));
  top: max(148px, calc(env(safe-area-inset-top) + 139px));
  z-index: 18;
  width: clamp(58px, 6.8vw, 84px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: url("assets/kupa.png") center / contain no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 8px 11px rgba(55, 29, 6, 0.38));
  animation: trophyAttention 2.35s ease-in-out infinite;
}

.achievement-open::before,
.achievement-open::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.achievement-open::before {
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(255, 223, 89, 0.92);
  animation: trophyRing 2.35s ease-out infinite;
}

.achievement-open::after {
  right: 8%;
  top: 7%;
  width: 17%;
  height: 17%;
  border-radius: 999px;
  background: #fff7c4;
  box-shadow: 0 0 9px #fff, 0 0 17px #ffda41;
  animation: trophySpark 2.35s ease-in-out infinite;
}

.quest-open {
  position: fixed;
  left: max(20px, calc(env(safe-area-inset-left) + 8px));
  top: max(232px, calc(env(safe-area-inset-top) + 223px));
  z-index: 17;
  width: clamp(52px, 6.2vw, 76px);
  aspect-ratio: 425 / 546;
  padding: 0;
  border: 0;
  background: url("assets/gorev-hud.png") center / contain no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 8px 12px rgba(55, 29, 6, 0.38));
  animation: questHudFloat 2.7s ease-in-out infinite;
}

.quest-open::after {
  content: "";
  position: absolute;
  right: 15%;
  bottom: 17%;
  width: 16%;
  height: 16%;
  border-radius: 999px;
  background: #fff5b0;
  opacity: 0;
  box-shadow: 0 0 8px #fff, 0 0 16px #ffd33d;
  animation: questHudSpark 2.7s ease-in-out infinite;
}

.quest-open.ready {
  filter: drop-shadow(0 9px 14px rgba(55, 29, 6, 0.38)) drop-shadow(0 0 11px rgba(255, 208, 49, 0.72));
}

.quest-open span {
  position: absolute;
  right: -4px;
  top: 3px;
  min-width: 21px;
  height: 21px;
  display: none;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff1ae;
  border-radius: 999px;
  background: #e8431e;
  color: #fff9dc;
  font-size: 0.72rem;
  font-weight: 900;
}

.quest-open span.show {
  display: grid;
}

@keyframes trophyAttention {
  0%, 100% { transform: scale(1); }
  13% { transform: scale(1.08) rotate(-2deg); }
  25% { transform: scale(1.04) rotate(2deg); }
}

@keyframes trophyRing {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  17% { opacity: 0.95; transform: scale(1.06); }
  42% { opacity: 0; transform: scale(1.19); }
}

@keyframes trophySpark {
  0%, 44%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  14% { opacity: 1; transform: scale(1.2) rotate(32deg); }
}

@keyframes questHudFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1.3deg); }
}

@keyframes questHudSpark {
  0%, 45%, 100% { opacity: 0; transform: scale(0.3); }
  16% { opacity: 1; transform: scale(1.18); }
}

.avatar-upload {
  display: none;
}

.hud-bar {
  position: relative;
  width: clamp(128px, 17vw, 184px);
  aspect-ratio: 263 / 80;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.hud-star {
  background-image: url("assets/hud-star.png");
}

.hud-coin {
  background-image: url("assets/hud-coin.png");
}

.hud-gem {
  background-image: url("assets/hud-gem.png");
}

.hud-bar strong {
  position: absolute;
  left: 37%;
  top: 49%;
  transform: translateY(-50%);
  min-width: 38%;
  color: #fff2bb;
  font-size: clamp(0.9rem, 2vw, 1.35rem);
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 rgba(57, 29, 8, 0.85), 0 0 8px rgba(0, 0, 0, 0.35);
}

.hud-bar button {
  position: absolute;
  right: 2.5%;
  top: 20%;
  width: 23%;
  height: 60%;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
}

.wallet span,
.metric span,
.storage-item span,
.tool-meta {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.wallet strong {
  display: block;
  font-size: 1.9rem;
  color: #7e3d12;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.metric,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.metric {
  padding: 10px 13px;
}

.metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.22rem;
}

.layout {
  display: grid;
  grid-template-columns: minmax(230px, 290px) 1fr minmax(230px, 290px);
  gap: 14px;
  align-items: start;
}

.panel {
  padding: 13px;
  backdrop-filter: blur(8px);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.spacing {
  margin-top: 17px;
}

.tool-list,
.storage-list,
.log {
  display: grid;
  gap: 8px;
}

.tool {
  width: 100%;
  min-height: 62px;
  border: 1px solid rgba(111, 73, 34, 0.24);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf1, #f6e3b7);
  color: var(--ink);
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 -3px 0 rgba(126, 81, 35, 0.1);
}

.tool.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 218, 111, 0.8), inset 0 -3px 0 rgba(126, 81, 35, 0.1);
}

.tool:disabled,
.wide-action:disabled,
.command:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.tool-icon,
.storage-icon {
  width: 38px;
  height: 38px;
  border: 2px solid #fff1bd;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffe49b, #e99833);
  color: #6b3515;
  font-weight: 900;
  font-size: 1.05rem;
}

.tool-name {
  font-weight: 800;
}

.tool-price {
  font-weight: 900;
  color: var(--accent-dark);
}

.command,
.wide-action {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #e78b32, #ad551e);
  color: #fff9dc;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(90, 43, 13, 0.26);
}

.command {
  padding: 8px 10px;
  font-size: 0.86rem;
}

.wide-action {
  width: 100%;
  margin-top: 15px;
  padding: 13px 12px;
}

.farm-wrap {
  min-width: 0;
}

.farm-stage {
  position: relative;
  min-height: 620px;
  aspect-ratio: 16 / 9;
  border: 3px solid rgba(255, 240, 183, 0.92);
  border-radius: 8px;
  overflow: hidden;
  background: url("assets/farm-map.png") center / cover no-repeat;
  box-shadow: var(--shadow);
}

.farm-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 48%, transparent 0 45%, rgba(35, 65, 27, 0.08) 72%, rgba(31, 43, 22, 0.25) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 198, 91, 0.08));
}

.lake-hotspot {
  position: absolute;
  left: 45%;
  top: 87%;
  z-index: 2;
  width: 15.4%;
  height: 13.3%;
  transform: translate(-50%, -50%) rotate(-4deg);
  border: 0;
  border-radius: 48% 52% 50% 44%;
  background:
    repeating-linear-gradient(100deg, rgba(143, 233, 255, 0.16) 0 8px, rgba(255, 255, 255, 0.34) 9px 12px, rgba(25, 147, 202, 0.12) 13px 25px),
    radial-gradient(ellipse at center, rgba(90, 214, 255, 0.18), rgba(24, 110, 176, 0.03) 66%, transparent 72%);
  box-shadow: 0 0 24px rgba(107, 226, 255, 0.22);
  opacity: 0.72;
  cursor: pointer;
  animation: lakeRipple 2.9s ease-in-out infinite;
}

.lake-hotspot::before,
.lake-hotspot::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid rgba(196, 246, 255, 0.46);
  border-radius: 50%;
  animation: lakeRing 2.6s ease-out infinite;
}

.lake-hotspot::after {
  animation-delay: 0.9s;
}

.lake-hotspot:is(:hover, :focus-visible) {
  outline: 0;
  opacity: 0.95;
  box-shadow: 0 0 0 4px rgba(192, 246, 255, 0.42), 0 0 32px rgba(83, 221, 255, 0.48);
}

.farm-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tile {
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(72px, 8.2vw, 116px);
  min-height: clamp(72px, 8.2vw, 116px);
  transform: translate(-50%, -50%);
  border: 3px solid #fff3c5;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 34%, #fffdf2 0 36%, #ffd778 37% 68%, #b95b1f 69% 100%);
  color: #79401d;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 2px;
  padding: 9px;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(71, 41, 17, 0.34), inset 0 -4px 0 rgba(119, 57, 20, 0.2);
}

.tile::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid #b95b1f;
  filter: drop-shadow(0 7px 5px rgba(63, 38, 18, 0.22));
}

.tile.locked {
  filter: grayscale(0.75);
  opacity: 0.68;
  cursor: not-allowed;
}

.tile.building {
  background: radial-gradient(circle at 50% 34%, #fffdf2 0 36%, #bde273 37% 68%, #3d8433 69% 100%);
  color: #25551f;
}

.tile.ready {
  animation: readyPulse 1.2s ease-in-out infinite;
  border-color: var(--ready);
}

.tile-name,
.tile-state {
  display: block;
  min-height: 16px;
  font-size: clamp(0.62rem, 0.8vw, 0.78rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.tile-icon {
  display: grid;
  place-items: center;
  font-size: clamp(1.35rem, 2.4vw, 2.2rem);
  font-weight: 900;
}

.tile-progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(112, 66, 21, 0.2);
  overflow: hidden;
}

.tile-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #68a937, #fff06a);
}

.tile:nth-child(1) { --x: 17%; --y: 76%; }
.tile:nth-child(2) { --x: 24%; --y: 70%; }
.tile:nth-child(3) { --x: 31%; --y: 77%; }
.tile:nth-child(4) { --x: 18%; --y: 61%; }
.tile:nth-child(5) { --x: 25%; --y: 56%; }
.tile:nth-child(6) { --x: 36%; --y: 61%; }
.tile:nth-child(7) { --x: 22%; --y: 27%; }
.tile:nth-child(8) { --x: 50%; --y: 31%; }
.tile:nth-child(9) { --x: 77%; --y: 28%; }
.tile:nth-child(10) { --x: 78%; --y: 68%; }
.tile:nth-child(11) { --x: 88%; --y: 58%; }
.tile:nth-child(12) { --x: 53%; --y: 50%; }

.storage-item {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(111, 73, 34, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf1, #f6e3b7);
}

.storage-icon {
  width: 34px;
  height: 34px;
  font-size: 0.96rem;
}

.storage-item strong {
  font-size: 1.05rem;
}

.log {
  max-height: 260px;
  overflow: auto;
  font-size: 0.9rem;
}

.log p {
  border-left: 4px solid var(--accent);
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 6px;
}

@keyframes readyPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 208, 51, 0);
  }
  12% {
    transform: translate(-50%, -50%) rotate(-0.7deg) scale(1.02);
  }
  24% {
    transform: translate(-50%, -50%) rotate(0.7deg) scale(1.02);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 0 0 4px rgba(255, 217, 68, 0.24), 0 0 18px rgba(255, 194, 37, 0.42);
  }
}

@media (max-width: 1080px) {
  body {
    overflow-x: hidden;
  }

  .game-shell {
    width: 100%;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
  }

  .topbar {
    min-height: 58px;
    padding: 9px 10px;
  }

  .eyebrow {
    font-size: 0.68rem;
  }

  h1 {
    font-size: 1.24rem;
  }

  .wallet {
    min-width: 104px;
    padding: 7px 10px;
  }

  .wallet strong {
    font-size: 1.42rem;
  }

  .status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
  }

  .metric {
    padding: 7px 8px;
  }

  .metric span {
    font-size: 0.68rem;
  }

  .metric strong {
    font-size: 0.95rem;
  }

  .layout {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
  }

  .tools-panel {
    order: 2;
  }

  .farm-wrap {
    order: 1;
    min-height: 0;
  }

  .log-panel {
    order: 3;
  }

  .panel {
    padding: 9px;
  }

  .tools-panel {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 3;
    max-height: 39dvh;
    overflow: auto;
  }

  .panel-head {
    margin-bottom: 7px;
  }

  .tool-list {
    grid-template-columns: repeat(3, minmax(116px, 1fr));
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(116px, 1fr);
    padding-bottom: 2px;
  }

  .tool {
    min-height: 58px;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    gap: 5px 7px;
    padding: 8px;
  }

  .tool-price {
    grid-column: 2;
    font-size: 0.88rem;
  }

  .tool-icon {
    width: 34px;
    height: 34px;
  }

  .tool-name {
    font-size: 0.88rem;
  }

  .tool-meta {
    display: none;
  }

  .wide-action {
    min-height: 48px;
    margin-top: 9px;
  }

  .farm-stage {
    min-height: 0;
    height: min(58dvh, 720px);
    aspect-ratio: auto;
  }

  .log-panel {
    order: 3;
  }

  .log-panel h2.spacing,
  .log-panel .log {
    display: none;
  }

  .storage-list {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(110px, 1fr);
  }
}

@media (max-width: 620px) {
  .game-shell {
    width: 100%;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    display: grid;
  }

  .wallet {
    text-align: right;
    border-radius: 999px;
  }

  .resource-hud {
    gap: 4px;
  }

  .hud-bar {
    width: clamp(92px, 30vw, 132px);
  }

  .hud-bar strong {
    font-size: clamp(0.72rem, 3.2vw, 1rem);
  }

  .farm-stage {
    background-size: cover;
    background-position: center;
    height: 50dvh;
  }

  .tile {
    width: clamp(58px, 17vw, 72px);
    min-height: clamp(58px, 17vw, 72px);
    padding: 6px;
    border-width: 2px;
  }

  .tile::after {
    bottom: -14px;
    border-left-width: 8px;
    border-right-width: 8px;
    border-top-width: 16px;
  }

  .tile-name,
  .tile-state {
    min-height: 12px;
    font-size: 0.56rem;
  }

  .tile-icon {
    font-size: 1.22rem;
  }

  .tile-progress {
    height: 5px;
  }

  .tools-panel {
    max-height: 41dvh;
  }

  .tool-list {
    grid-auto-columns: 110px;
    grid-template-columns: repeat(3, 110px);
  }

  .command {
    min-height: 40px;
  }

  .tile:nth-child(1) { --x: 20%; --y: 78%; }
  .tile:nth-child(2) { --x: 35%; --y: 75%; }
  .tile:nth-child(3) { --x: 25%; --y: 64%; }
  .tile:nth-child(4) { --x: 42%; --y: 63%; }
  .tile:nth-child(5) { --x: 18%; --y: 52%; }
  .tile:nth-child(6) { --x: 38%; --y: 48%; }
  .tile:nth-child(7) { --x: 22%; --y: 26%; }
  .tile:nth-child(8) { --x: 50%; --y: 28%; }
  .tile:nth-child(9) { --x: 76%; --y: 26%; }
  .tile:nth-child(10) { --x: 74%; --y: 66%; }
  .tile:nth-child(11) { --x: 83%; --y: 50%; }
  .tile:nth-child(12) { --x: 52%; --y: 43%; }
}

/* Full-screen mobile game surface */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body::before {
  display: none;
}

.game-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #3f8735;
}

@media (orientation: portrait) and (max-width: 900px) {
  .game-shell {
    left: auto;
    top: auto;
    width: 100vw;
    height: 100dvh;
    transform: none;
    transform-origin: initial;
  }

  .splash-screen {
    background-size: auto 100%;
  }

  .splash-loading {
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(82vw, 420px);
  }
}

@media (orientation: portrait) and (max-width: 620px) {
  .topbar {
    left: max(72px, calc(env(safe-area-inset-left) + 72px));
    right: max(8px, env(safe-area-inset-right));
    top: max(8px, env(safe-area-inset-top));
  }

  .profile-open {
    left: max(10px, env(safe-area-inset-left));
    top: max(10px, env(safe-area-inset-top));
    width: clamp(50px, 14vw, 58px);
    height: clamp(50px, 14vw, 58px);
    z-index: 19;
  }

  .resource-hud {
    width: 100%;
    margin-left: auto;
    justify-content: flex-end;
  }

  .hud-bar {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }
}

.layout {
  display: block;
  width: 100%;
  height: 100%;
}

.farm-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.farm-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background-image: url("assets/farm-map.png");
  background-size: cover;
  background-position: center;
  box-shadow: none;
}

.farm-stage::after {
  background:
    linear-gradient(180deg, rgba(22, 45, 20, 0.18), transparent 16%, transparent 74%, rgba(32, 22, 8, 0.42)),
    radial-gradient(circle at 50% 46%, transparent 0 52%, rgba(31, 43, 22, 0.18) 100%);
}

.topbar {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  top: max(8px, env(safe-area-inset-top));
  z-index: 5;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.topbar > div:not(.resource-hud) {
  display: none;
}

.wallet {
  margin-left: auto;
  min-width: 112px;
  padding: 8px 12px;
  border: 3px solid #fff2c5;
  border-radius: 999px;
  pointer-events: auto;
}

.resource-hud {
  margin-left: auto;
}

.wallet span {
  font-size: 0.68rem;
}

.wallet strong {
  font-size: 1.45rem;
  line-height: 1;
}

.status-grid {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  top: max(8px, env(safe-area-inset-top));
  z-index: 5;
  width: min(52vw, 260px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.metric {
  padding: 6px 6px;
  border: 2px solid rgba(255, 242, 197, 0.88);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 249, 225, 0.96), rgba(255, 218, 122, 0.94));
  text-align: center;
  box-shadow: 0 8px 18px rgba(52, 32, 13, 0.25);
}

.metric span {
  display: none;
}

.metric strong {
  margin: 0;
  font-size: 0.78rem;
  color: #764016;
  white-space: nowrap;
}

.panel {
  box-shadow: 0 10px 24px rgba(47, 29, 11, 0.28);
}

.tools-panel {
  display: none;
}

.log-panel {
  display: none;
}

.panel-head {
  margin-bottom: 6px;
}

.tools-panel .spacing {
  margin-top: 8px;
}

.tool-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 116px;
  grid-template-columns: repeat(3, 116px);
  overflow-x: auto;
  gap: 7px;
}

.tool {
  min-height: 56px;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 6px;
  padding: 7px;
}

.tool-icon {
  width: 30px;
  height: 30px;
  font-size: 0.92rem;
}

.tool-name {
  font-size: 0.84rem;
}

.tool-meta {
  display: none;
}

.tool-price {
  grid-column: 2;
  font-size: 0.82rem;
}

.command {
  min-height: 38px;
  padding: 8px 10px;
}

.wide-action {
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 12px;
}

.tile {
  width: clamp(52px, 7vw, 92px);
  min-height: clamp(52px, 7vw, 92px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  box-shadow: none;
  opacity: 1;
}

.tile::after {
  display: none;
}

.tile-name,
.tile-icon,
.tile-state,
.tile-progress {
  display: none;
}

.growth-badge {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 70px;
  height: 10px;
  transform: translateX(-50%);
  display: none;
  border: 2px solid #fff4c8;
  border-radius: 999px;
  background: rgba(77, 43, 16, 0.42);
  box-shadow: 0 5px 12px rgba(41, 26, 9, 0.3);
  overflow: hidden;
}

.growth-badge span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #63b93d, #f7e76c);
}

.tile:not(.locked):not([data-role="menu"]) {
  width: clamp(78px, 10vw, 132px);
  min-height: clamp(58px, 7vw, 92px);
}

.tile[data-role="menu"] {
  width: clamp(86px, 8vw, 124px);
  min-height: clamp(86px, 8vw, 124px);
}

.tile[data-role="menu"]::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 999px;
  background: rgba(255, 243, 196, 0.01);
}

.tile[data-role="menu"]:active::before {
  background: rgba(255, 243, 196, 0.22);
  box-shadow: 0 0 0 14px rgba(255, 213, 82, 0.2);
}

.tile.growing:not([data-role="menu"]) .growth-badge,
.tile.ready:not([data-role="menu"]) .growth-badge {
  display: block;
}

.tile.growing:not([data-role="menu"]):not(.ready) .growth-badge span {
  min-width: 8%;
}

.tile:not(.locked)::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 999px;
  background: rgba(255, 230, 104, 0.08);
  box-shadow: 0 0 0 0 rgba(255, 230, 104, 0.18);
  animation: tapSignal 2.2s ease-in-out infinite;
}

.tile:not(.locked):active::before {
  background: rgba(255, 235, 128, 0.32);
  box-shadow: 0 0 0 14px rgba(255, 225, 92, 0.24);
}

.tile.ready {
  animation: none;
  outline: 0;
  background: rgba(255, 231, 104, 0.16);
  box-shadow: 0 0 22px rgba(255, 226, 83, 0.75);
}

.tile.locked {
  display: none;
}

@keyframes tapSignal {
  0%, 100% {
    opacity: 0.28;
    transform: scale(0.82);
    box-shadow: 0 0 0 0 rgba(255, 230, 104, 0.2);
  }
  50% {
    opacity: 0.72;
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(255, 230, 104, 0.08);
  }
}

.quest-card {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 6;
  width: min(320px, 54vw);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 3px solid #fff2c5;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 250, 224, 0.96), rgba(248, 214, 132, 0.94));
  box-shadow: 0 12px 28px rgba(52, 32, 13, 0.3);
}

.quest-card span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 800;
}

.quest-card strong {
  display: block;
  font-size: 0.95rem;
  color: #743f17;
}

.quest-action,
.play-level,
.round-command {
  border: 0;
  cursor: pointer;
  font-weight: 900;
  color: #fffbe8;
  background: linear-gradient(180deg, #ffb744, #b95b1f);
  box-shadow: inset 0 -4px 0 rgba(96, 43, 10, 0.28), 0 8px 18px rgba(52, 32, 13, 0.28);
}

.quest-action {
  min-width: 82px;
  min-height: 42px;
  border-radius: 999px;
}

.quest-action:disabled {
  opacity: 0.6;
}

.play-level {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 7;
  width: clamp(82px, 10vw, 120px);
  height: clamp(82px, 10vw, 120px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: transparent;
  background: transparent;
  box-shadow: none;
  animation: wordHudFloat 3s ease-in-out infinite;
}

.play-level img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(58, 31, 9, 0.36));
  transition: transform 160ms ease, filter 160ms ease;
}

.play-level:is(:hover, :focus-visible) img {
  transform: scale(1.06);
  filter: drop-shadow(0 12px 16px rgba(58, 31, 9, 0.4)) drop-shadow(0 0 10px rgba(255, 207, 71, 0.46));
}

@keyframes wordHudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.quick-menu {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.quick-menu-button {
  --shine-delay: 0s;
  position: absolute;
  left: var(--hud-x);
  top: var(--hud-y);
  width: clamp(54px, 5.8vw, 83px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 18px rgba(45, 25, 6, 0.36));
  animation: menuButtonFloat 3s ease-in-out infinite;
  animation-delay: var(--shine-delay);
}

.quick-menu-button:nth-child(1) { --hud-x: 50%; --hud-y: 47%; --shine-delay: 0s; }
.quick-menu-button:nth-child(2) { --hud-x: 22%; --hud-y: 73%; --shine-delay: 0.42s; }
.quick-menu-button:nth-child(3) { --hud-x: 22%; --hud-y: 33%; --shine-delay: 0.84s; }
.quick-menu-button:nth-child(4) { --hud-x: 74%; --hud-y: 34%; --shine-delay: 1.26s; }
.quick-menu-button:nth-child(5) { --hud-x: 76%; --hud-y: 73%; --shine-delay: 1.68s; }

.quick-menu-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  pointer-events: none;
}

.quick-menu-button::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 235, 128, 0);
  animation: menuButtonShine 3s ease-in-out infinite;
  animation-delay: var(--shine-delay);
}

.quick-menu-button:is(:hover, :focus-visible, .active) {
  animation: none;
  outline: 0;
  transform: translate(-50%, -50%) scale(1.05);
  filter: drop-shadow(0 14px 24px rgba(45, 25, 6, 0.42));
}

.quick-menu-button:is(:hover, :focus-visible, .active)::after {
  box-shadow: 0 0 0 5px rgba(255, 244, 166, 0.9), 0 0 24px rgba(255, 210, 82, 0.95);
}

@keyframes menuButtonFloat {
  0%, 72%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  12% {
    transform: translate(-50%, calc(-50% - 2px)) scale(1.055);
  }
}

@keyframes menuButtonShine {
  0%, 72%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 235, 128, 0);
  }
  12% {
    box-shadow: 0 0 0 5px rgba(255, 244, 166, 0.86), 0 0 24px rgba(255, 210, 82, 0.95);
  }
}

.puzzle-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(24, 44, 22, 0.56);
  backdrop-filter: blur(5px);
}

.puzzle-modal.open {
  display: grid;
}

.game-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(26, 35, 18, 0.48);
  backdrop-filter: blur(3px);
  isolation: isolate;
  overflow: hidden;
}

.game-menu.open {
  display: grid;
}

.game-alert-stack {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px));
  z-index: 190;
  width: min(428px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  padding: 7px;
  overflow-y: auto;
  pointer-events: none;
}

.supply-notice,
.activity-notice {
  position: relative;
  display: none;
  width: 100%;
  transform: translateX(calc(-100% - 22px));
  opacity: 0;
  pointer-events: none;
}

.supply-notice.show,
.activity-notice.show {
  display: block;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  animation: alertStackArrival 0.22s ease both;
}

@keyframes alertStackArrival {
  from {
    transform: translateX(calc(-100% - 22px));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.supply-notice-card {
  position: relative;
  min-height: 97px;
  display: grid;
  grid-template-columns: clamp(58px, 12.6vw, 74px) minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 11px 10px;
  border: 4px solid #ae601a;
  border-radius: 16px;
  background: radial-gradient(circle at 17% 55%, rgba(255, 225, 116, 0.34), transparent 24%), linear-gradient(180deg, #fff2c0, #f1bd63);
  box-shadow: 0 20px 42px rgba(50, 28, 8, 0.44), inset 0 0 0 3px rgba(255, 248, 212, 0.72);
  color: #6b3713;
  font-weight: 900;
}

.supply-notice-card img {
  grid-row: 1 / 3;
  width: 100%;
  height: clamp(56px, 11.7vw, 70px);
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(79, 43, 9, 0.24));
}

.supply-notice-badge {
  grid-column: 2 / 4;
  justify-self: start;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f55f2b, #bd3218);
  color: #fff7db;
  font-size: clamp(0.52rem, 1.35vw, 0.68rem);
  line-height: 1.2;
  text-shadow: 0 1px rgba(90, 28, 7, 0.5);
}

.supply-notice-copy strong,
.supply-notice-copy span {
  display: block;
  min-width: 0;
}

.supply-notice-copy strong {
  font-size: clamp(0.92rem, 2.2vw, 1.14rem);
  line-height: 1;
}

.supply-notice-copy span {
  color: #7c4b1d;
  font-size: clamp(0.62rem, 1.5vw, 0.82rem);
  line-height: 1.12;
}

.supply-notice-buy {
  min-width: 70px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #78d44d, #2f8a26);
  color: #fffbea;
  font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(18, 77, 14, 0.32), 0 5px 10px rgba(59, 35, 9, 0.18);
  cursor: pointer;
  touch-action: manipulation;
}

.supply-notice-close {
  position: absolute;
  right: -7px;
  top: -9px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 2px solid #ffdc82;
  border-radius: 999px;
  background: linear-gradient(180deg, #f45e30, #bb3016);
  color: #fff7dd;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.activity-notice-card {
  position: relative;
  min-height: 83px;
  display: grid;
  grid-template-columns: 61px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 10px 10px 8px;
  border: 3px solid #ba711f;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff2c3, #ecbd70);
  box-shadow: 0 16px 35px rgba(49, 29, 9, 0.38), inset 0 0 0 2px rgba(255, 249, 220, 0.74);
  color: #66330e;
  font-weight: 900;
}

.activity-notice-card.harvest {
  border-color: #57952d;
  background: linear-gradient(180deg, #eff7bf, #d5aa58);
}

.activity-notice-card.friend {
  border-color: #cf7b27;
  background: linear-gradient(180deg, #ffe7ac, #efbd70);
}

.activity-notice-card img {
  width: 61px;
  height: 61px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(69, 38, 9, 0.2));
}

.activity-notice-card div {
  min-width: 0;
}

.activity-notice-card small,
.activity-notice-card strong,
.activity-notice-card span {
  display: block;
}

.activity-notice-card small {
  color: #b84e1c;
  font-size: clamp(0.5rem, 1.05vw, 0.65rem);
}

.activity-notice-card strong {
  margin: 2px 0;
  font-size: clamp(0.8rem, 1.6vw, 1.02rem);
}

.activity-notice-card span {
  color: #86511c;
  font-size: clamp(0.58rem, 1.14vw, 0.76rem);
  line-height: 1.12;
}

.activity-notice-open {
  min-width: 70px;
  min-height: 35px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #77cc42, #328827);
  color: #fffbe9;
  font-size: clamp(0.58rem, 1.1vw, 0.76rem);
  font-weight: 900;
  cursor: pointer;
}

.activity-notice-close {
  position: absolute;
  right: -8px;
  top: -9px;
  z-index: 2;
  width: 27px;
  height: 27px;
  border: 2px solid #ffdd86;
  border-radius: 999px;
  background: linear-gradient(180deg, #f45e30, #bb3016);
  color: #fff8df;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
}

.game-menu-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 92vw);
  max-height: 92dvh;
  overflow: auto;
  padding: 12px;
  border: 4px solid #fff2c5;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8df, #f2bd5d);
  box-shadow: 0 22px 56px rgba(21, 22, 10, 0.42);
  transform: scale(var(--menu-fit-scale, 1));
  transform-origin: center center;
  will-change: transform;
}

.game-menu-head {
  position: relative;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  pointer-events: none;
}

.game-menu-head .round-command {
  pointer-events: auto;
}

.game-menu-head span,
.menu-copy {
  color: var(--muted);
  font-weight: 800;
}

.game-menu-head strong {
  display: block;
  color: #743f17;
  font-size: 1.25rem;
}

.game-menu-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
}

.menu-grid,
.menu-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.menu-stats div {
  min-height: 58px;
  padding: 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  display: grid;
  align-content: center;
}

.menu-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.menu-stats strong {
  display: block;
  color: #743f17;
  font-size: 1.35rem;
}

.menu-copy {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
}

.menu-action {
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffb744, #b95b1f);
  color: #fffbe8;
  font-weight: 900;
  box-shadow: inset 0 -4px 0 rgba(96, 43, 10, 0.28);
}

.menu-action.secondary {
  background: linear-gradient(180deg, #6ec95a, #358235);
}

.menu-action.compact {
  min-height: 46px;
  padding: 8px;
  font-size: 0.86rem;
}

.menu-action.sell {
  background: linear-gradient(180deg, #77b8ff, #2f73b8);
}

.menu-barn .game-menu-panel {
  position: relative;
  width: min(920px, 96vw, calc(92dvh * 1212 / 827));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.menu-coop .game-menu-panel {
  position: relative;
  width: min(920px, 96vw, calc(92dvh * 1251 / 989));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.menu-home .game-menu-panel {
  position: relative;
  width: min(920px, 96vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.menu-field .game-menu-panel {
  position: relative;
  width: min(920px, 96vw, calc(92dvh * 1177 / 1019));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.menu-market .game-menu-panel {
  position: relative;
  width: min(900px, 96vw, calc(92dvh * 1114 / 1086));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.menu-lake .game-menu-panel {
  position: relative;
  width: min(1100px, 96vw, calc(92dvh * 1512 / 1190));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.menu-premium .game-menu-panel {
  width: min(900px, 96vw);
}

.menu-player .game-menu-panel {
  position: relative;
  width: min(1080px, 96vw, calc(92dvh * 1582 / 936));
  aspect-ratio: 1582 / 936;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.menu-achievements .game-menu-panel {
  position: relative;
  width: min(76vw, calc(96dvh * 1094 / 1410), 720px);
  aspect-ratio: 1094 / 1410;
  max-height: calc(100dvh - 10px);
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.menu-quests .game-menu-panel {
  position: relative;
  width: min(76vw, calc(96dvh * 1088 / 1445), 720px);
  aspect-ratio: 1088 / 1445;
  max-height: calc(100dvh - 10px);
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.menu-achievements .game-menu-head {
  position: absolute;
  right: 1.6%;
  top: 6.4%;
  z-index: 5;
  margin: 0;
  pointer-events: none;
}

.menu-quests .game-menu-head {
  position: absolute;
  right: 1.75%;
  top: 6%;
  z-index: 5;
  margin: 0;
  pointer-events: none;
}

.menu-achievements .game-menu-head div,
.menu-achievements .game-menu-head span,
.menu-achievements .game-menu-head strong {
  display: none;
}

.menu-quests .game-menu-head div,
.menu-quests .game-menu-head span,
.menu-quests .game-menu-head strong {
  display: none;
}

.menu-achievements .round-command {
  width: clamp(39px, 5.2dvh, 67px);
  height: clamp(39px, 5.2dvh, 67px);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

.menu-quests .round-command {
  width: clamp(39px, 5.2dvh, 67px);
  height: clamp(39px, 5.2dvh, 67px);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

.menu-achievements .round-command:active,
.menu-achievements .round-command:focus-visible {
  background: rgba(255, 245, 205, 0.26);
  box-shadow: 0 0 0 5px rgba(255, 224, 92, 0.22);
}

.menu-quests .round-command:active,
.menu-quests .round-command:focus-visible {
  background: rgba(255, 245, 205, 0.26);
  box-shadow: 0 0 0 5px rgba(255, 224, 92, 0.22);
}

.menu-achievements .game-menu-body {
  height: 100%;
  padding: 0;
}

.menu-quests .game-menu-body {
  height: 100%;
  padding: 0;
}

.achievements-menu {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("assets/basari-menu.png") center / contain no-repeat;
  color: #6a3310;
}

.quests-menu {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("assets/gorevler_menu.png") center / contain no-repeat;
  color: #69350f;
}

.quest-bonus {
  position: absolute;
  left: 7.2%;
  right: 7.2%;
  top: 19.2%;
  height: 5.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1dvh, 10px);
  color: #7b4011;
  font-size: clamp(0.5rem, 1.48dvh, 0.8rem);
  font-weight: 900;
}

.quest-bonus img {
  height: clamp(23px, 4.4dvh, 37px);
  object-fit: contain;
}

.quest-bonus span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #e96528;
  color: #fff4cc;
}

.daily-quest-rows {
  position: absolute;
  left: 6.9%;
  right: 6.9%;
  top: 25.4%;
  bottom: 6.2%;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 2.2%;
  overflow: auto;
  scrollbar-width: none;
}

.daily-quest-rows::-webkit-scrollbar {
  display: none;
}

.daily-quest-row {
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(43px, 10.5dvh, 82px) minmax(0, 1fr) clamp(46px, 9dvh, 72px) clamp(72px, 13dvh, 110px);
  align-items: center;
  gap: clamp(5px, 1.2dvh, 11px);
  padding: clamp(5px, 1dvh, 10px) clamp(6px, 1.3dvh, 12px);
  border: 2px solid rgba(189, 121, 40, 0.42);
  border-radius: clamp(9px, 1.7dvh, 15px);
  background: rgba(255, 242, 198, 0.94);
  box-shadow: inset 0 2px 1px rgba(255, 254, 231, 0.82), 0 3px 6px rgba(120, 72, 20, 0.13);
}

.daily-quest-row > img {
  width: 100%;
  height: 100%;
  max-height: clamp(43px, 10.3dvh, 82px);
  object-fit: contain;
}

.daily-quest-copy {
  min-width: 0;
}

.daily-quest-copy strong,
.daily-quest-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-quest-copy strong {
  font-size: clamp(0.6rem, 2.05dvh, 1rem);
}

.daily-quest-copy span {
  margin: 2px 0 4px;
  color: #7c4b1d;
  font-size: clamp(0.47rem, 1.4dvh, 0.76rem);
}

.daily-quest-copy i {
  position: relative;
  display: block;
  height: clamp(9px, 1.8dvh, 15px);
  overflow: hidden;
  border-radius: 999px;
  background: #e7c98f;
  box-shadow: inset 0 1px 3px rgba(90, 47, 8, 0.24);
}

.daily-quest-copy b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #a3e63b, #52ab16);
}

.daily-quest-copy small {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fffbe0;
  font-style: normal;
  font-size: clamp(0.42rem, 1.15dvh, 0.62rem);
  font-weight: 900;
}

.daily-quest-reward {
  display: grid;
  justify-items: center;
}

.daily-quest-reward img {
  width: clamp(25px, 5dvh, 42px);
}

.daily-quest-reward strong {
  font-size: clamp(0.65rem, 1.8dvh, 0.98rem);
}

.daily-quest-row button {
  min-width: 0;
  height: clamp(34px, 6.6dvh, 52px);
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #91dc26, #43a20e);
  color: #fffbe4;
  font-size: clamp(0.52rem, 1.5dvh, 0.8rem);
  font-weight: 900;
  box-shadow: inset 0 -3px rgba(38, 98, 10, 0.26), 0 4px 8px rgba(73, 42, 6, 0.2);
  cursor: pointer;
}

.daily-quest-row button:disabled {
  background: linear-gradient(180deg, #54a9e8, #2377bb);
  opacity: 0.92;
}

.daily-quest-row.claimed button:disabled {
  background: linear-gradient(180deg, #91dc26, #43a20e);
}

.achievement-score {
  position: absolute;
  left: 9.2%;
  top: 18.2%;
  width: 24%;
  height: 20.3%;
  display: grid;
  justify-items: center;
  align-content: end;
  padding-bottom: 3.5%;
}

.achievement-score strong {
  margin-top: 0;
  font-size: clamp(1rem, 3.2dvh, 1.9rem);
  line-height: 1;
}

.achievement-road {
  position: absolute;
  left: 36.8%;
  right: 8%;
  top: 20%;
  height: 16.3%;
  display: grid;
  grid-template-rows: 1fr 11% auto;
  align-items: end;
  gap: 3%;
}

.achievement-chests {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  text-align: center;
}

.achievement-chests strong {
  display: block;
  margin-bottom: 1%;
  font-size: clamp(0.52rem, 1.75dvh, 0.94rem);
}

.achievement-chests img {
  width: clamp(32px, 7.4dvh, 58px);
  object-fit: contain;
  filter: grayscale(0.16) brightness(0.9);
}

.achievement-chests .earned img {
  filter: drop-shadow(0 3px 5px rgba(86, 51, 15, 0.26));
}

.achievement-track {
  position: relative;
  height: clamp(7px, 1.15dvh, 12px);
  border-radius: 999px;
  background: #c59a61;
  box-shadow: inset 0 2px 4px rgba(82, 43, 8, 0.26);
}

.achievement-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fa71e, #9bdd26);
}

.achievement-next {
  justify-self: center;
  font-size: clamp(0.52rem, 1.55dvh, 0.82rem);
}

.achievement-tabs {
  position: absolute;
  left: 6.8%;
  right: 6.8%;
  top: 39.3%;
  height: 6.5%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1%;
}

.achievement-tabs button {
  min-width: 0;
  border: 2px solid rgba(161, 100, 33, 0.47);
  border-radius: 9px 9px 0 0;
  background: #f5d68f;
  color: #6b3510;
  font-size: clamp(0.45rem, 1.45dvh, 0.76rem);
  font-weight: 900;
  white-space: nowrap;
}

.achievement-tabs button span {
  margin-right: 4px;
  color: #c18315;
}

.achievement-tabs button.active {
  border-color: #459210;
  background: linear-gradient(180deg, #9add20, #57ac14);
  color: #fff8d8;
}

.achievement-rows {
  position: absolute;
  left: 6.9%;
  right: 6.9%;
  top: 46.5%;
  bottom: 5.3%;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 1.15%;
  overflow: auto;
  scrollbar-width: none;
}

.achievement-rows::-webkit-scrollbar {
  display: none;
}

.achievement-row {
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(42px, 8.8dvh, 68px) minmax(0, 1fr) clamp(43px, 8.8dvh, 70px) clamp(78px, 15dvh, 122px);
  align-items: center;
  gap: clamp(4px, 1dvh, 10px);
  padding: clamp(3px, 0.7dvh, 8px) clamp(5px, 1dvh, 11px);
  border: 2px solid rgba(178, 112, 38, 0.4);
  border-radius: 10px;
  background: rgba(255, 238, 185, 0.92);
}

.achievement-row > img {
  width: 100%;
  height: 100%;
  max-height: clamp(42px, 8.8dvh, 68px);
  object-fit: contain;
}

.achievement-copy {
  min-width: 0;
}

.achievement-copy strong,
.achievement-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-copy strong {
  font-size: clamp(0.58rem, 1.65dvh, 0.88rem);
}

.achievement-copy span {
  font-size: clamp(0.47rem, 1.3dvh, 0.72rem);
}

.achievement-copy i {
  position: relative;
  display: block;
  height: clamp(8px, 1.5dvh, 13px);
  margin-top: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: #7f430c;
}

.achievement-copy b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #8fdf29, #4bac0f);
}

.achievement-copy small {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff9e3;
  font-size: clamp(0.42rem, 1.1dvh, 0.62rem);
  font-style: normal;
  font-weight: 900;
}

.achievement-value {
  display: grid;
  justify-items: center;
}

.achievement-value img {
  width: clamp(24px, 4.6dvh, 38px);
}

.achievement-value strong {
  font-size: clamp(0.62rem, 1.75dvh, 0.95rem);
}

.achievement-row button {
  height: clamp(32px, 6.4dvh, 48px);
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #88d82d, #43a110);
  color: #fffce0;
  font-size: clamp(0.52rem, 1.45dvh, 0.78rem);
  font-weight: 900;
  cursor: pointer;
}

.achievement-row button:disabled {
  background: linear-gradient(180deg, #c3b69a, #978974);
}

.achievement-row.claimed button:disabled {
  background: linear-gradient(180deg, #8bdc2f, #42a20f);
}

.menu-market .game-menu-head {
  position: absolute;
  right: 5.4%;
  top: 4.4%;
  z-index: 150;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}

.menu-lake .game-menu-head {
  position: absolute;
  right: 2.8%;
  top: 4.1%;
  z-index: 150;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}

.menu-lake .game-menu-head div,
.menu-lake .game-menu-head span,
.menu-lake .game-menu-head strong {
  display: none;
}

.menu-lake .round-command {
  width: clamp(54px, 6vw, 78px);
  height: clamp(54px, 6vw, 78px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  color: #fff7dd;
  font-size: 0;
  box-shadow: none;
}

.menu-lake .round-command:active {
  background: rgba(255, 244, 205, 0.22);
}

.menu-lake .game-menu-body {
  padding: 0;
}

.menu-market .game-menu-head div,
.menu-market .game-menu-head span,
.menu-market .game-menu-head strong {
  display: none;
}

.menu-market .round-command {
  width: clamp(54px, 6.5vw, 76px);
  height: clamp(54px, 6.5vw, 76px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  color: #fff7dd;
  font-size: 0;
  box-shadow: none;
}

.menu-market .round-command:active {
  background: rgba(255, 244, 205, 0.22);
}

.menu-market .game-menu-body {
  padding: 0;
  overflow: hidden;
}

.menu-field .game-menu-body,
.menu-coop .game-menu-body,
.menu-barn .game-menu-body,
.menu-home .game-menu-body,
.menu-lake .game-menu-body {
  overflow: hidden;
}

.menu-player .game-menu-head {
  position: absolute;
  right: 2.3%;
  top: 3.2%;
  z-index: 150;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}

.menu-player .game-menu-head div,
.menu-player .game-menu-head span,
.menu-player .game-menu-head strong {
  display: none;
}

.menu-player .round-command {
  width: clamp(52px, 6.1vw, 76px);
  height: clamp(52px, 6.1vw, 76px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  color: transparent;
  font-size: 0;
  box-shadow: none;
}

.menu-player .round-command:active,
.menu-player .round-command:focus-visible {
  background: rgba(255, 244, 205, 0.24);
  box-shadow: 0 0 0 7px rgba(255, 225, 92, 0.18);
}

.menu-player .game-menu-body {
  padding: 0;
}

.player-profile {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1582 / 936;
  padding: 6.8% 5.1% 4.4%;
  display: grid;
  grid-template-columns: 31% 1fr;
  gap: 2.6%;
  background: url("assets/profil-puan.png") center / contain no-repeat;
}

.player-side,
.player-main {
  min-height: 0;
}

.player-side {
  display: grid;
  grid-template-columns: 34% 1fr;
  grid-auto-rows: min-content;
  gap: 1% 3%;
  align-content: start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(178, 112, 38, 0.46) transparent;
}

.player-avatar {
  grid-row: 1 / 3;
  align-self: start;
  justify-self: center;
  width: min(9vw, 94px);
  aspect-ratio: 1;
  border: 5px solid #ffd365;
  border-radius: 999px;
  padding: 0;
  background: #ffeab0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(80, 43, 10, 0.28), inset 0 0 0 4px #fff0b0;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.player-identity {
  display: grid;
  gap: 1px;
  align-content: center;
  color: #6f3915;
  font-weight: 900;
}

.player-identity strong {
  font-size: clamp(0.9rem, 1.65vw, 1.18rem);
}

.player-identity span,
.player-identity small {
  color: #8b4f19;
  font-size: clamp(0.58rem, 1.05vw, 0.78rem);
}

.player-bio {
  grid-column: 1 / -1;
  width: 100%;
  min-height: clamp(30px, 3.3vw, 38px);
  padding: 6px 10px;
  border: 2px solid rgba(217, 158, 64, 0.7);
  border-radius: 10px;
  background: rgba(255, 246, 218, 0.9);
  color: #7b4819;
  font-weight: 900;
  font-size: clamp(0.66rem, 1.15vw, 0.86rem);
}

.player-stat {
  grid-column: 1 / -1;
  width: 100%;
  min-height: clamp(38px, 4vw, 48px);
  display: grid;
  grid-template-columns: clamp(28px, 3.2vw, 38px) 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border: 2px solid rgba(217, 158, 64, 0.62);
  border-radius: 12px;
  background: rgba(255, 243, 204, 0.9);
  color: #6f3915;
  box-shadow: 0 6px 14px rgba(80, 43, 10, 0.12);
}

.player-stat img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.player-stat span {
  color: #8b4f19;
  font-weight: 900;
  font-size: clamp(0.66rem, 1.15vw, 0.84rem);
}

.player-stat strong {
  font-size: clamp(0.9rem, 1.85vw, 1.32rem);
}

.player-side-menu {
  grid-column: 1 / -1;
  display: grid;
  overflow: hidden;
  border: 2px solid rgba(217, 158, 64, 0.62);
  border-radius: 12px;
}

.player-side-menu button {
  min-height: clamp(28px, 3.15vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid rgba(180, 112, 37, 0.32);
  padding: 0 10px;
  background: rgba(255, 246, 218, 0.82);
  color: #7b4819;
  font-weight: 900;
  font-size: clamp(0.62rem, 1.15vw, 0.84rem);
  cursor: pointer;
}

.player-side-menu button.active {
  background: linear-gradient(180deg, #fff2bd, #f2be62);
}

.player-main {
  display: grid;
  grid-template-rows: min-content 1fr;
}

.player-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: clamp(34px, 4vw, 48px);
}

.player-tabs button {
  border: 2px solid rgba(179, 105, 28, 0.5);
  border-radius: 10px 10px 0 0;
  background: rgba(255, 236, 184, 0.82);
  color: #8b4f19;
  font-weight: 900;
  font-size: clamp(0.66rem, 1.25vw, 0.9rem);
  cursor: pointer;
}

.player-tabs button.active {
  color: #fff7df;
  background: linear-gradient(180deg, #b97830, #754010);
}

.player-content {
  min-height: 0;
  padding: 9px;
  border: 2px solid rgba(179, 105, 28, 0.45);
  border-radius: 0 0 12px 12px;
  background: rgba(255, 244, 214, 0.74);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(178, 112, 38, 0.46) transparent;
}

.chat-panel,
.private-chat {
  height: 100%;
  display: grid;
  grid-template-rows: min-content repeat(5, 1fr) min-content;
  gap: 6px;
}

.chat-room,
.private-chat-head,
.chat-message,
.chat-send,
.friend-list > div,
.gift-grid > div,
.history-list p,
.settings-list > div,
.achievement-list > div,
.profile-form {
  border: 1px solid rgba(196, 126, 43, 0.45);
  border-radius: 10px;
  background: rgba(255, 250, 231, 0.86);
}

.chat-room,
.private-chat-head,
.chat-message,
.chat-send {
  display: grid;
  align-items: center;
}

.chat-room {
  grid-template-columns: 1fr auto;
  padding: 6px 10px;
  color: #6f3915;
  font-weight: 900;
}

.private-chat {
  grid-template-rows: min-content 1fr min-content;
}

.private-chat-head {
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 6px 10px;
  color: #6f3915;
  font-weight: 900;
}

.private-chat-head button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #f5a24a, #c95c14);
  color: #fffbea;
  font-weight: 900;
  cursor: pointer;
}

.private-chat-head span {
  color: #4f8a24;
}

.private-chat-list {
  min-height: 0;
  display: grid;
  align-content: end;
  gap: 7px;
  overflow: auto;
}

.private-chat-list p {
  width: min(82%, 420px);
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(196, 126, 43, 0.45);
  border-radius: 10px;
  background: rgba(255, 250, 231, 0.9);
  color: #6f3915;
  font-weight: 900;
}

.private-chat-list p.mine {
  justify-self: end;
  background: rgba(220, 247, 195, 0.92);
}

.private-chat-list strong,
.private-chat-list span {
  display: block;
}

.private-chat-list span {
  margin-top: 3px;
  color: #4e321b;
  font-size: clamp(0.68rem, 1.15vw, 0.88rem);
}

.chat-room span {
  color: #4f8a24;
}

.chat-message {
  grid-template-columns: clamp(30px, 3.4vw, 40px) 1fr auto;
  gap: 8px;
  padding: 5px 8px;
}

.chat-message img,
.friend-list img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  object-fit: cover;
}

.chat-message strong {
  color: #237a35;
}

.chat-message p {
  color: #4e321b;
  font-weight: 700;
  font-size: clamp(0.62rem, 1.15vw, 0.86rem);
}

.chat-message span {
  color: #8b765f;
  font-size: clamp(0.56rem, 1vw, 0.74rem);
}

.chat-send {
  grid-template-columns: 1fr minmax(80px, 14%);
  gap: 8px;
  padding: 6px;
}

.chat-send input,
.profile-form input {
  min-height: clamp(30px, 3.3vw, 38px);
  border: 2px solid #d89b3b;
  border-radius: 8px;
  padding: 0 12px;
  background: #fff8dd;
  color: #6f3915;
  font-weight: 900;
}

.chat-send button,
.profile-form button,
.friend-list button,
.gift-question button,
.gift-friend-list button,
.gift-grid button,
.settings-list button {
  min-height: clamp(30px, 3.3vw, 38px);
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #75c84a, #318927);
  color: #fffbea;
  font-weight: 900;
  cursor: pointer;
}

.gift-grid button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(180deg, #c9a96a, #8e6431);
}

.gift-friend-panel,
.gift-send-panel {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: min-content 1fr;
  gap: 9px;
}

.gift-question {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(196, 126, 43, 0.45);
  border-radius: 10px;
  background: rgba(255, 250, 231, 0.9);
  color: #6f3915;
  font-weight: 900;
}

.gift-question strong,
.gift-question span {
  min-width: 0;
}

.gift-question span {
  grid-column: 2;
  color: #8b4f19;
  font-size: clamp(0.62rem, 1.1vw, 0.84rem);
}

.gift-question button {
  grid-row: 1 / span 2;
  padding: 0 10px;
  background: linear-gradient(180deg, #f5a24a, #c95c14);
}

.gift-friend-list {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  overflow: auto;
}

.gift-friend-list button {
  display: grid;
  grid-template-columns: clamp(36px, 4.5vw, 52px) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(196, 126, 43, 0.45);
  background: rgba(255, 250, 231, 0.88);
  color: #6f3915;
  text-align: left;
}

.gift-friend-list img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  object-fit: cover;
}

.gift-friend-list span {
  color: #2f7f39;
}

.friend-list,
.history-list,
.settings-list,
.achievement-list {
  display: grid;
  gap: 9px;
}

.friend-list > div {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  color: #6f3915;
  font-weight: 900;
}

.friend-list span {
  color: #4f8a24;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  overflow: auto;
}

.gift-grid > div {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px;
  color: #6f3915;
  font-weight: 900;
}

.gift-grid img {
  width: min(58px, 7vw);
  aspect-ratio: 1;
  object-fit: contain;
}

.gift-empty {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid rgba(196, 126, 43, 0.45);
  border-radius: 10px;
  background: rgba(255, 250, 231, 0.86);
  color: #6f3915;
  font-weight: 900;
}

.history-list p {
  padding: 10px 12px;
  color: #6f3915;
  font-weight: 900;
}

.settings-list > div,
.achievement-list > div {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: #6f3915;
  font-weight: 900;
}

.settings-list > .settings-audio {
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 9px;
}

.settings-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-volume {
  display: grid;
  grid-template-columns: minmax(68px, auto) 1fr 48px;
  align-items: center;
  gap: 9px;
  color: #886139;
  font-size: clamp(0.7rem, 1.12vw, 0.86rem);
}

.settings-volume input[type="range"] {
  width: 100%;
  height: 24px;
  accent-color: #4b982f;
  cursor: pointer;
}

.settings-volume output {
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f2d594;
  color: #704014;
  font-size: 0.76rem;
}

.badge-panel {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 9px;
}

.badge-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(196, 126, 43, 0.45);
  border-radius: 10px;
  background: rgba(255, 250, 231, 0.9);
  color: #6f3915;
  font-weight: 900;
}

.badge-summary strong {
  color: #c05a18;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
}

.badge-summary small {
  color: #8b4f19;
}

.badge-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: auto;
}

.badge-card {
  min-height: 68px;
  display: grid;
  grid-template-columns: 45px 1fr;
  align-content: center;
  gap: 2px 8px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(196, 126, 43, 0.42);
  background: rgba(255, 250, 231, 0.88);
  color: #6f3915;
}

.badge-medal {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd958, #d9871e);
  color: #fff7dc;
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255,255,220,.52), 0 4px 8px rgba(92,54,12,.2);
}

.badge-card strong,
.badge-card small {
  min-width: 0;
  font-weight: 900;
}

.badge-card small {
  color: #8a5a21;
  font-size: clamp(0.56rem, 1vw, 0.72rem);
}

.badge-card.locked {
  opacity: 0.56;
  filter: grayscale(0.55);
}

.achievement-list strong {
  font-size: clamp(1.2rem, 3vw, 2rem);
}

.profile-form {
  display: grid;
  gap: 9px;
  padding: 14px;
  color: #6f3915;
  font-weight: 900;
}

.profile-save-status {
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(107, 159, 55, 0.16);
  color: #4f7020;
  font-size: clamp(0.64rem, 1.12vw, 0.84rem);
  line-height: 1.2;
}

.market-visual {
  position: relative;
  width: 100%;
  max-width: min(900px, 96vw);
  margin-inline: auto;
  aspect-ratio: 1114 / 1086;
  background: url("assets/market-menu.png") center / contain no-repeat;
}

.market-board {
  position: absolute;
  left: 6.6%;
  right: 6.6%;
  top: 22.4%;
  bottom: 5.8%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 1.35%;
  padding: clamp(4px, 0.7vw, 7px);
  border-radius: 14px;
  background: rgba(255, 239, 184, 0.28);
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(177, 105, 19, 0.58) rgba(255, 239, 186, 0.35);
}

.market-wallet {
  width: max-content;
  min-height: clamp(42px, 5.5vw, 58px);
  display: grid;
  grid-template-columns: clamp(30px, 4.8vw, 48px) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 8px;
  padding: 5px clamp(10px, 1.6vw, 16px) 5px 8px;
  border: 2px solid rgba(194, 123, 38, 0.42);
  border-radius: 999px;
  background: rgba(255, 245, 203, 0.9);
  color: #713813;
}

.market-wallet img {
  grid-row: 1 / 3;
  width: 100%;
  height: clamp(30px, 4.7vw, 48px);
  object-fit: contain;
}

.market-wallet strong {
  align-self: end;
  font-size: clamp(0.85rem, 1.65vw, 1.2rem);
  line-height: 1;
}

.market-wallet span {
  color: #996021;
  font-size: clamp(0.52rem, 0.95vw, 0.7rem);
  font-weight: 900;
}

.market-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 0.7vw, 8px);
}

.market-tabs button {
  min-width: 0;
  min-height: clamp(34px, 4.6vw, 48px);
  padding: 3px 6px;
  border: 2px solid rgba(181, 103, 27, 0.52);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffd17a, #e59127);
  color: #6d3611;
  font-size: clamp(0.56rem, 1.1vw, 0.8rem);
  font-weight: 900;
  cursor: pointer;
}

.market-tabs button.active {
  border-color: #397b22;
  background: linear-gradient(180deg, #89d94a, #389025);
  color: #fffbe5;
  text-shadow: 0 1px rgba(32, 84, 15, 0.48);
}

.market-shelf {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(5px, 0.8vw, 8px);
  padding: clamp(7px, 1vw, 11px);
  border: 2px solid rgba(218, 151, 42, 0.52);
  border-radius: 12px;
  background: rgba(255, 245, 202, 0.67);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.market-shelf.buy-supplies {
  background: linear-gradient(180deg, rgba(232, 255, 194, 0.73), rgba(255, 239, 184, 0.55));
  border-color: rgba(93, 147, 43, 0.45);
}

.market-shelf header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.market-shelf header strong {
  color: #7a3f12;
  font-size: clamp(0.72rem, 1.5vw, 1.04rem);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 246, 210, 0.82);
}

.market-shelf header span {
  color: #43812b;
  font-size: clamp(0.54rem, 0.96vw, 0.72rem);
  font-weight: 900;
}

.market-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: clamp(4px, 0.7vw, 7px);
  padding-right: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(177, 105, 19, 0.58) rgba(255, 239, 186, 0.35);
}

.market-card {
  min-width: 0;
  min-height: clamp(42px, 5.4vw, 58px);
  display: grid;
  grid-template-columns: clamp(30px, 4.2vw, 48px) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 6px;
  padding: 5px 7px;
  border: 0;
  border-radius: 10px;
  color: #fff8df;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -4px 0 rgba(80, 42, 8, 0.18),
    0 3px 7px rgba(100, 55, 10, 0.2);
}

.market-card.buy {
  background: linear-gradient(180deg, #f6a92a, #df7204);
}

.market-shelf.buy-supplies .market-card.seed {
  background: linear-gradient(180deg, #82c944, #378828);
}

.market-card.sell {
  background: linear-gradient(180deg, #2ba6ea, #0968bd);
}

.market-card:active {
  transform: translateY(1px);
  filter: brightness(1.04);
}

.market-icon {
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  max-height: clamp(34px, 4.9vw, 52px);
  object-fit: contain;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 2px 1px rgba(83, 42, 7, 0.22));
}

.market-icon.text {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 247, 214, 0.22);
  color: #fff8df;
  font-size: clamp(0.95rem, 2vw, 1.4rem);
  font-weight: 900;
}

.market-card span:not(.market-icon) {
  min-width: 0;
  overflow: hidden;
  color: #fff8df;
  font-size: clamp(0.6rem, 1.28vw, 0.92rem);
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(77, 39, 8, 0.28);
  white-space: nowrap;
}

.market-card small {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 249, 222, 0.92);
  font-size: clamp(0.46rem, 0.96vw, 0.68rem);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(77, 39, 8, 0.2);
  white-space: nowrap;
}

.market-wide-actions {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35%;
  min-height: clamp(44px, 5.6vw, 60px);
}

.market-card.wide {
  min-height: 100%;
}

.menu-orders .game-menu-panel,
.menu-storage .game-menu-panel,
.menu-workshop .game-menu-panel {
  width: min(880px, 94vw);
  max-height: min(88dvh, 700px);
  overflow: hidden;
}

.utility-menu,
.workshop-menu {
  min-height: min(70dvh, 570px);
  max-height: min(78dvh, 620px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  overflow: hidden;
}

.utility-summary {
  padding: 11px 14px;
  border: 2px solid rgba(194, 123, 38, 0.38);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 251, 230, 0.96), rgba(255, 227, 166, 0.94));
  color: #683712;
}

.utility-summary strong {
  display: block;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.utility-summary span {
  color: #88521d;
  font-size: clamp(0.66rem, 1.16vw, 0.86rem);
  font-weight: 900;
}

.orders-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: auto;
}

.order-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 9px;
  padding: 10px;
  border: 2px solid rgba(197, 126, 42, 0.42);
  border-radius: 8px;
  background: rgba(255, 249, 220, 0.92);
  color: #673610;
}

.order-image-placeholder,
.machine-image-placeholder {
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 2px dashed rgba(172, 105, 31, 0.46);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 246, 209, 0.82), rgba(239, 194, 111, 0.66));
  color: #8b511b;
}

.order-image-placeholder span,
.machine-image-placeholder span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f3a83e, #b85d19);
  color: #fff9df;
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: inset 0 -4px rgba(91, 43, 11, 0.22), 0 5px 10px rgba(82, 47, 13, 0.18);
}

.order-image-placeholder small,
.machine-image-placeholder small {
  font-size: 0.58rem;
  font-weight: 900;
}

.order-card.completed {
  background: rgba(222, 244, 192, 0.9);
}

.order-head strong,
.order-head span {
  display: block;
  font-weight: 900;
}

.order-head span {
  margin-top: 3px;
  color: #2d7a34;
  font-size: clamp(0.62rem, 1.08vw, 0.8rem);
}

.order-needs {
  display: grid;
  align-content: start;
  gap: 6px;
}

.order-needs div {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(245, 215, 150, 0.48);
  color: #b14c18;
  font-size: clamp(0.58rem, 1.08vw, 0.76rem);
  font-weight: 900;
}

.order-needs div.ready {
  color: #34752b;
}

.order-needs img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.order-card button,
.utility-actions button,
.shelf-item button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #73c94b, #318a27);
  color: #fffbea;
  font-weight: 900;
  cursor: pointer;
}

.order-card button:disabled {
  background: linear-gradient(180deg, #c7a76b, #94704a);
  opacity: 0.8;
}

.utility-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.utility-actions button:last-child {
  background: linear-gradient(180deg, #f4a344, #c55d12);
}

.storage-menu {
  grid-template-rows: auto auto auto 1fr auto;
}

.storage-shelf {
  min-height: 0;
  display: grid;
  gap: 6px;
}

.storage-shelf > strong {
  color: #713b14;
}

.storage-shelf > div {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  overflow: auto;
}

.storage-shelf.products > div {
  grid-template-columns: repeat(4, minmax(116px, 1fr));
}

.shelf-item {
  min-width: 88px;
  min-height: 76px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(197, 126, 42, 0.4);
  border-radius: 8px;
  background: rgba(255, 249, 220, 0.92);
  color: #6d3912;
  font-size: clamp(0.55rem, 1vw, 0.72rem);
  font-weight: 900;
}

.shelf-item img {
  width: clamp(34px, 4.5vw, 50px);
  height: clamp(34px, 4.5vw, 50px);
  object-fit: contain;
}

.shelf-item.product {
  min-height: 108px;
}

.shelf-item button {
  width: 100%;
  min-height: 28px;
  font-size: 0.66rem;
}

.storage-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  color: #88521d;
  font-weight: 900;
}

.menu-field .game-menu-head {
  position: absolute;
  right: 3.2%;
  top: 5%;
  z-index: 150;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}

.menu-field .game-menu-head div,
.menu-field .game-menu-head span,
.menu-field .game-menu-head strong {
  display: none;
}

.menu-field .round-command {
  width: clamp(48px, 6vw, 68px);
  height: clamp(48px, 6vw, 68px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  color: #fff7dd;
  font-size: 0;
  box-shadow: none;
}

.menu-field .round-command:active {
  background: rgba(255, 244, 205, 0.22);
}

.menu-field .game-menu-body {
  padding: 0;
}

.field-visual {
  position: relative;
  width: 100%;
  max-width: min(920px, 96vw, calc(96dvh * 1177 / 1019));
  margin-inline: auto;
  aspect-ratio: 1177 / 1019;
  background: url("assets/tarla-menu.png") center / contain no-repeat;
}

.field-board {
  position: absolute;
  left: 4.2%;
  right: 4.2%;
  top: 13.4%;
  bottom: 4.8%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  gap: 1.6%;
  overflow: hidden;
}

.field-crop-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1%;
}

.field-crop-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  place-items: center;
  gap: 2px;
  padding: clamp(4px, 0.62vw, 8px);
  border: 2px solid rgba(221, 151, 36, 0.62);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 248, 225, 0.92), rgba(255, 232, 173, 0.9));
  color: #6f3915;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.52), 0 7px 14px rgba(93, 54, 13, 0.16);
}

.field-crop-card:active {
  transform: translateY(1px);
  filter: brightness(1.04);
}

.field-crop-card img {
  width: 100%;
  height: 100%;
  max-height: clamp(42px, 7.5vw, 82px);
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(84, 49, 13, 0.2));
}

.field-crop-card strong,
.field-crop-card span,
.field-crop-card small {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-crop-card strong {
  color: #5f3213;
  font-size: clamp(0.54rem, 0.94vw, 0.76rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 240, 203, 0.8);
}

.field-crop-card span {
  color: #c24b16;
  font-size: clamp(0.42rem, 0.74vw, 0.58rem);
  font-weight: 900;
}

.field-crop-card small {
  color: #8f561d;
  font-size: clamp(0.36rem, 0.66vw, 0.5rem);
  font-weight: 900;
}

.field-crop-card.ready-product,
.barn-slot.ready-product {
  border-color: rgba(239, 174, 29, 0.82);
  animation: readyProductAttention 1.9s ease-in-out infinite;
}

.field-crop-card.ready-product img,
.barn-slot.ready-product img {
  animation: readyProductGlow 1.9s ease-in-out infinite;
}

.field-crop-card.ready-product span,
.barn-slot.ready-product small {
  color: #3b7a1d;
}

@keyframes readyProductAttention {
  0%, 100% {
    transform: translateY(0) rotate(0);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.52), 0 7px 14px rgba(93, 54, 13, 0.16);
  }
  12% { transform: translateY(-1px) rotate(-0.55deg); }
  24% { transform: translateY(-1px) rotate(0.55deg); }
  48% {
    transform: translateY(-2px) rotate(0);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.58), 0 0 0 3px rgba(255, 221, 83, 0.25), 0 0 18px rgba(255, 187, 28, 0.48);
  }
}

@keyframes readyProductGlow {
  0%, 100% { filter: drop-shadow(0 7px 8px rgba(84, 49, 13, 0.2)); }
  48% { filter: drop-shadow(0 5px 12px rgba(255, 193, 31, 0.72)); }
}

.field-supply-strip {
  min-height: clamp(56px, 7.4vw, 82px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4%;
}

.field-supply-strip div {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(42px, 6vw, 66px) 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 8px;
  padding: 7px 10px;
  border: 2px solid rgba(221, 151, 36, 0.55);
  border-radius: 12px;
  background: rgba(255, 246, 213, 0.76);
  color: #6f3915;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.field-supply-strip img {
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  max-height: 62px;
  object-fit: contain;
}

.field-supply-strip strong {
  color: #c24b16;
  font-size: clamp(1rem, 2.1vw, 1.6rem);
  line-height: 1;
}

.field-supply-strip span {
  min-width: 0;
  overflow: hidden;
  color: #7b4518;
  font-size: clamp(0.56rem, 1.12vw, 0.78rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-board-tip {
  min-height: clamp(42px, 5.6vw, 62px);
  display: flex;
  align-items: center;
  padding: 0 4%;
  border: 2px dashed rgba(208, 140, 32, 0.56);
  border-radius: 12px;
  background: rgba(255, 246, 213, 0.7);
  color: #6f3915;
  font-size: clamp(0.7rem, 1.45vw, 1rem);
  font-weight: 900;
  line-height: 1.15;
}

.field-quick-actions {
  min-height: clamp(42px, 5.3vw, 58px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4%;
}

.field-quick-actions button {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(30px, 4.2vw, 46px) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #9bdc43, #4ba329);
  color: #fffbea;
  font-size: clamp(0.58rem, 1.1vw, 0.8rem);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(61, 61, 9, 0.24);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -4px 0 rgba(45, 98, 18, 0.24), 0 5px 10px rgba(82, 49, 11, 0.16);
  cursor: pointer;
}

.field-quick-actions button:first-child {
  background: linear-gradient(180deg, #ffc14a, #e27a06);
}

.field-quick-actions img {
  width: 100%;
  height: clamp(28px, 4vw, 44px);
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(83, 42, 7, 0.2));
}

.field-quick-actions span {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-crop-detail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  min-height: 58%;
  z-index: 5;
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 3%;
  padding: 4.2%;
  border: 3px solid rgba(205, 125, 17, 0.86);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 247, 221, 0.98), rgba(255, 225, 158, 0.98));
  box-shadow: 0 18px 40px rgba(76, 45, 12, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  color: #6f3915;
  transform: translate(-50%, -50%);
  max-height: 88%;
  overflow-y: auto;
}

.field-detail-close {
  position: absolute;
  right: 2.2%;
  top: 2.4%;
  width: clamp(34px, 4.8vw, 52px);
  height: clamp(34px, 4.8vw, 52px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f07831, #c92d13);
  color: #fff7dc;
  font-weight: 900;
  box-shadow: inset 0 -4px 0 rgba(87, 27, 8, 0.22), 0 5px 10px rgba(86, 42, 11, 0.24);
  cursor: pointer;
}

.field-detail-crop {
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  max-height: clamp(170px, 30vw, 270px);
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 10px 12px rgba(84, 49, 13, 0.24));
}

.field-detail-info {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding-right: 9%;
  font-weight: 900;
}

.field-detail-info strong {
  color: #5f3213;
  font-size: clamp(1.25rem, 3.2vw, 2.4rem);
  line-height: 1;
}

.field-detail-info span {
  color: #c24b16;
  font-size: clamp(0.82rem, 1.7vw, 1.18rem);
}

.field-detail-info small {
  color: #7b4518;
  font-size: clamp(0.66rem, 1.3vw, 0.92rem);
  line-height: 1.15;
}

.field-detail-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.field-action-card {
  min-width: 0;
  min-height: clamp(62px, 8vw, 86px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(26px, 1fr) auto auto;
  justify-items: center;
  align-items: center;
  gap: 2px;
  padding: 6px 5px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #70c848, #2f8e27);
  color: #fffbea;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.24), inset 0 -4px 0 rgba(43, 87, 10, 0.26), 0 5px 10px rgba(82, 49, 11, 0.18);
}

.field-action-card.plant,
.field-action-card.plantmax,
.field-action-card.harvest {
  background: linear-gradient(180deg, #f6a62d, #db7005);
}

.field-action-card img {
  width: clamp(30px, 4.6vw, 50px);
  height: clamp(30px, 4.6vw, 50px);
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(83, 42, 7, 0.24));
}

.field-action-card span,
.field-action-card small {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(77, 39, 8, 0.28);
  white-space: nowrap;
}

.field-action-card span {
  font-size: clamp(0.62rem, 1.24vw, 0.9rem);
  font-weight: 900;
}

.field-action-card small {
  color: rgba(255, 249, 222, 0.92);
  font-size: clamp(0.52rem, 1vw, 0.72rem);
  font-weight: 900;
}

.menu-home .game-menu-head {
  position: absolute;
  right: 3%;
  top: 3.2%;
  z-index: 150;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}

.menu-home .game-menu-head div,
.menu-home .game-menu-head span,
.menu-home .game-menu-head strong {
  display: none;
}

.menu-home .round-command {
  width: clamp(48px, 6vw, 68px);
  height: clamp(48px, 6vw, 68px);
  border: 3px solid #fff2c5;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb744, #b95b1f);
  color: #fff7dd;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  box-shadow: inset 0 -4px 0 rgba(96, 43, 10, 0.28), 0 8px 18px rgba(52, 32, 13, 0.28);
}

.menu-home .round-command:active {
  background: rgba(255, 244, 205, 0.22);
}

.menu-home .game-menu-body {
  padding: 0;
}

.profile-visual {
  position: relative;
  width: min(920px, 96vw);
  aspect-ratio: 1164 / 950;
  background: url("assets/profil-menu.png") center / contain no-repeat;
}

.home-menu {
  width: min(920px, 96vw);
  max-height: 88dvh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 1.7vw, 18px);
  padding: clamp(16px, 2.8vw, 28px);
  border: 4px solid #fff2c5;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 247, 221, 0.92), rgba(246, 197, 104, 0.92)),
    url("assets/profil-menu.png") center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(21, 22, 10, 0.42), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.home-card,
.home-stats > div,
.home-recipe,
.home-actions button {
  border: 2px solid rgba(135, 79, 24, 0.24);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 252, 235, 0.96), rgba(255, 227, 159, 0.95));
  box-shadow: inset 0 -4px 0 rgba(126, 81, 35, 0.12), 0 8px 18px rgba(70, 42, 13, 0.2);
}

.home-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: clamp(88px, 11vw, 130px) 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(10px, 1.5vw, 16px);
  color: #6f3915;
}

.home-summary img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(70, 42, 13, 0.2));
}

.home-summary span,
.home-stats span,
.home-recipe small {
  color: #8a5a21;
  font-weight: 900;
}

.home-summary strong {
  display: block;
  margin: 3px 0;
  color: #5f3213;
  font-size: clamp(1.45rem, 3.4vw, 2.8rem);
  line-height: 1;
}

.home-summary small {
  display: block;
  color: #744018;
  font-size: clamp(0.86rem, 1.7vw, 1.18rem);
  font-weight: 900;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 14px);
}

.home-stats > div {
  min-height: clamp(108px, 13vw, 150px);
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 10px;
  text-align: center;
}

.home-stats img {
  width: clamp(42px, 6vw, 68px);
  aspect-ratio: 1;
  object-fit: contain;
}

.home-stats strong {
  color: #c24b16;
  font-size: clamp(1.35rem, 3vw, 2.3rem);
  line-height: 1;
}

.home-recipes {
  display: grid;
  align-content: stretch;
  gap: clamp(10px, 1.5vw, 16px);
}

.home-recipe {
  min-height: clamp(122px, 16vw, 172px);
  display: grid;
  grid-template-columns: clamp(66px, 9vw, 104px) 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(10px, 1.7vw, 18px);
  color: #6f3915;
  text-align: left;
  cursor: pointer;
}

.home-recipe img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.home-recipe strong {
  display: block;
  color: #5f3213;
  font-size: clamp(1.05rem, 2.2vw, 1.65rem);
}

.home-recipe em,
.home-actions button {
  min-width: clamp(64px, 8vw, 96px);
  min-height: clamp(42px, 5vw, 56px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #72cf4a, #2f8e27);
  color: #fffbea;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(34, 91, 18, 0.55);
  box-shadow: inset 0 -4px 0 rgba(22, 87, 18, 0.32), 0 4px 8px rgba(54, 38, 12, 0.18);
}

.home-recipe.disabled {
  opacity: 0.72;
}

.home-recipe.disabled em {
  background: linear-gradient(180deg, #c9a96a, #8e6431);
}

.home-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 14px);
}

.workshop-menu {
  min-height: min(70dvh, 570px);
  max-height: min(78dvh, 620px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  overflow: hidden;
}

.workshop-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: auto;
}

.machine-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 7px 10px;
  padding: 10px;
  border: 2px solid rgba(197, 126, 42, 0.42);
  border-radius: 8px;
  background: rgba(255, 249, 220, 0.94);
  color: #673610;
}

.machine-card.working {
  background: rgba(222, 244, 192, 0.94);
}

.machine-image-placeholder {
  grid-row: 1 / 4;
  min-height: 100%;
}

.machine-copy strong,
.machine-copy span,
.machine-copy small {
  display: block;
}

.machine-copy strong {
  font-size: clamp(0.9rem, 1.7vw, 1.15rem);
}

.machine-copy span,
.machine-copy small {
  color: #8a571f;
  font-size: clamp(0.58rem, 1vw, 0.76rem);
  font-weight: 900;
}

.machine-stock {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.machine-stock span {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(235, 195, 116, 0.48);
  font-size: 0.62rem;
  font-weight: 900;
}

.machine-card button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #73c94b, #318a27);
  color: #fffbea;
  font-weight: 900;
  box-shadow: inset 0 -3px rgba(47, 112, 25, 0.28);
}

.machine-card button:disabled {
  background: linear-gradient(180deg, #c9a96a, #8e6431);
  opacity: 0.8;
}

.home-actions button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f5a24a, #c95c14);
  cursor: pointer;
  font-size: clamp(0.88rem, 1.7vw, 1.12rem);
}

.home-menu {
  position: relative;
  width: min(920px, 96vw, calc(92dvh * 1164 / 950));
  max-height: none;
  aspect-ratio: 1164 / 950;
  display: block;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("assets/profil-menu.png") center / contain no-repeat;
  box-shadow: none;
}

.home-dashboard {
  position: absolute;
  left: 6.2%;
  right: 6.2%;
  top: 14.4%;
  bottom: 4.9%;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  grid-template-rows: auto 1fr auto;
  gap: clamp(7px, 1vw, 12px);
  min-height: 0;
}

.home-card,
.home-status-pill,
.home-stock-note,
.home-recipe,
.home-actions button {
  border: 2px solid rgba(135, 79, 24, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 252, 235, 0.92), rgba(255, 226, 157, 0.9));
  box-shadow: inset 0 -3px 0 rgba(126, 81, 35, 0.1), 0 5px 12px rgba(70, 42, 13, 0.14);
}

.home-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: clamp(46px, 6.4vw, 68px) 1fr;
  align-items: center;
  gap: clamp(8px, 1.2vw, 13px);
  padding: clamp(6px, 0.9vw, 10px) clamp(8px, 1.2vw, 14px);
  color: #6f3915;
}

.home-summary img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(70, 42, 13, 0.18));
}

.home-summary strong {
  display: block;
  margin: 1px 0;
  color: #5f3213;
  font-size: clamp(1.05rem, 2.3vw, 1.9rem);
  line-height: 1;
}

.home-summary small {
  display: block;
  color: #744018;
  font-size: clamp(0.58rem, 1.05vw, 0.84rem);
  font-weight: 900;
  line-height: 1.15;
}

.home-status-board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: clamp(6px, 0.9vw, 10px);
}

.home-status-pill {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(26px, 4.2vw, 42px) 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 clamp(5px, 0.8vw, 8px);
  padding: clamp(5px, 0.8vw, 8px);
  color: #6f3915;
}

.home-status-pill img {
  grid-row: 1 / 3;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(70, 42, 13, 0.18));
}

.home-status-pill span,
.home-stock-note span,
.home-recipe small {
  min-width: 0;
  overflow: hidden;
  color: #8a5a21;
  font-size: clamp(0.52rem, 0.96vw, 0.72rem);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-status-pill strong,
.home-stock-note strong {
  min-width: 0;
  overflow: hidden;
  color: #c24b16;
  font-size: clamp(0.92rem, 2vw, 1.52rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recipes {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: clamp(6px, 0.9vw, 10px);
}

.home-stock-note {
  display: grid;
  grid-template-columns: clamp(30px, 4.2vw, 44px) 1fr auto;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(5px, 0.8vw, 8px) clamp(7px, 1vw, 11px);
  color: #6f3915;
  font-weight: 900;
}

.home-stock-note img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.home-recipe {
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(44px, 6.2vw, 64px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(7px, 1vw, 11px);
  padding: clamp(7px, 1vw, 11px);
  color: #6f3915;
  text-align: left;
  cursor: pointer;
}

.home-recipe img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.home-recipe strong {
  display: block;
  color: #5f3213;
  font-size: clamp(0.86rem, 1.45vw, 1.14rem);
  line-height: 1.05;
}

.home-recipe em,
.home-actions button {
  min-width: clamp(48px, 6.5vw, 70px);
  min-height: clamp(32px, 4.2vw, 44px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #72cf4a, #2f8e27);
  color: #fffbea;
  font-size: clamp(0.72rem, 1.15vw, 0.9rem);
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(34, 91, 18, 0.55);
  box-shadow: inset 0 -3px 0 rgba(22, 87, 18, 0.32), 0 3px 7px rgba(54, 38, 12, 0.16);
}

.home-recipe.disabled {
  opacity: 0.72;
}

.home-recipe.disabled em {
  background: linear-gradient(180deg, #c9a96a, #8e6431);
}

.home-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 12px);
}

.home-actions button {
  min-width: 0;
  width: 100%;
  padding: 0 clamp(4px, 0.8vw, 9px);
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f5a24a, #c95c14);
  cursor: pointer;
  font-size: clamp(0.58rem, 1vw, 0.82rem);
}

.menu-coop .game-menu-head {
  position: absolute;
  right: 1.8%;
  top: 1.8%;
  z-index: 150;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}

.menu-coop .game-menu-head div,
.menu-coop .game-menu-head span,
.menu-coop .game-menu-head strong {
  display: none;
}

.menu-coop .round-command {
  width: clamp(58px, 7.4vw, 84px);
  height: clamp(58px, 7.4vw, 84px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  color: #fff7dd;
  font-size: 0;
  box-shadow: none;
}

.menu-coop .round-command:active {
  background: rgba(255, 244, 205, 0.22);
}

.menu-coop .game-menu-body {
  padding: 0;
}

.coop-visual {
  position: relative;
  width: 100%;
  max-width: min(920px, 96vw, calc(94dvh * 1251 / 989));
  margin-inline: auto;
  aspect-ratio: 1251 / 989;
  background: url("assets/kumes-menu.png") center / contain no-repeat;
}

.coop-slot {
  position: absolute;
  width: 40.2%;
  height: 11.9%;
  display: grid;
  grid-template-columns: 26% 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 2.4%;
  padding: 0.75% 2.6%;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 248, 224, 0.9), rgba(255, 232, 172, 0.9));
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.46), 0 6px 12px rgba(88, 50, 12, 0.12);
  cursor: pointer;
}

.coop-slot img {
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(80, 44, 12, 0.22));
}

.coop-slot div {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 1px;
}

.coop-slot strong {
  min-width: 36%;
  padding: 2px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 247, 221, 0.96), rgba(255, 234, 176, 0.96));
  color: #5d3213;
  font-size: clamp(0.78rem, 1.75vw, 1.22rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 240, 205, 0.82);
}

.coop-slot span {
  display: block;
  color: #c64b16;
  font-size: clamp(0.84rem, 1.95vw, 1.42rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 236, 188, 0.86), 0 3px 4px rgba(82, 37, 8, 0.22);
}

.coop-slot small,
.coop-slot em {
  color: #9a6122;
  font-size: clamp(0.44rem, 0.92vw, 0.64rem);
  line-height: 1.1;
  font-style: normal;
  max-width: 100%;
}

.coop-slot em {
  grid-column: 2;
}

.coop-slot.chicken {
  left: 8.6%;
  top: 26.3%;
}

.coop-slot.goose {
  left: 51.2%;
  top: 26.3%;
}

.coop-slot.duck {
  left: 8.6%;
  top: 40.7%;
}

.coop-slot.turkey {
  left: 51.2%;
  top: 40.7%;
}

.coop-slot.partridge {
  left: 8.6%;
  top: 55.1%;
}

.coop-slot.ostrich {
  left: 51.2%;
  top: 55.1%;
}

.coop-animal-detail {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 43%;
  padding: 1.2%;
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 6px;
  border: 3px solid #d58c2b;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 249, 224, 0.985), rgba(255, 224, 151, 0.985));
  box-shadow: 0 18px 38px rgba(70, 38, 9, 0.34), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  transform: translate(-50%, -50%);
  max-height: 86%;
  overflow-y: auto;
}

.coop-detail-animal {
  width: 100%;
  height: 100%;
  max-height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(80, 44, 12, 0.2));
}

.coop-animal-detail > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.coop-animal-detail strong {
  font-size: clamp(0.86rem, 1.85vw, 1.24rem);
}

.coop-animal-detail span {
  color: #c64b16;
  font-size: clamp(0.82rem, 1.7vw, 1.18rem);
}

.coop-animal-detail small,
.coop-animal-detail p {
  color: #8a5a21;
  font-size: clamp(0.5rem, 1.02vw, 0.72rem);
  line-height: 1.15;
}

.coop-egg-counter {
  grid-column: 1 / -1;
  grid-template-columns: 24% 1fr;
  border: 2px solid rgba(214, 145, 43, 0.52);
  border-radius: 12px;
  padding: 4px;
  background: rgba(255, 248, 224, 0.72);
}

.coop-egg-counter img {
  width: 100%;
  height: clamp(30px, 5vw, 46px);
  object-fit: contain;
}

.coop-animal-detail p {
  grid-column: 1 / -1;
  margin: 0;
}

.coop-animal-detail button {
  min-height: clamp(30px, 3.9vw, 42px);
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #84d94a, #328b25);
  color: #fffbea;
  font-size: clamp(0.62rem, 1.25vw, 0.84rem);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(34, 91, 18, 0.55);
  box-shadow: inset 0 -4px 0 rgba(22, 87, 18, 0.32), 0 4px 8px rgba(54, 38, 12, 0.18);
  cursor: pointer;
}

.coop-animal-detail button img,
.barn-animal-detail button img {
  width: clamp(20px, 2.8vw, 30px);
  height: clamp(20px, 2.8vw, 30px);
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(36, 61, 13, 0.22));
}

.coop-animal-detail .ghost {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  background: linear-gradient(180deg, #f5a24a, #c95c14);
  text-shadow: 0 2px 0 rgba(105, 48, 6, 0.45);
}

.animal-happiness {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center;
  gap: 7px !important;
  color: #38772c !important;
  font-size: clamp(0.55rem, 1vw, 0.76rem) !important;
}

.animal-happiness i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfc282;
}

.animal-happiness b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f4ae35, #62bd3b);
}

.coop-animal-detail .animal-pet-action,
.barn-animal-detail .animal-pet-action {
  grid-template-columns: 1fr;
  background: linear-gradient(180deg, #ffb84a, #df6f13);
}

.menu-barn .game-menu-head {
  position: absolute;
  right: 1.8%;
  top: 1.8%;
  z-index: 150;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
}

.menu-barn .game-menu-head div,
.menu-barn .game-menu-head span {
  display: none;
}

.menu-barn .game-menu-head strong {
  display: none;
}

.menu-barn .round-command {
  width: clamp(58px, 7.4vw, 84px);
  height: clamp(58px, 7.4vw, 84px);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  color: #fff7dd;
  font-size: 0;
  box-shadow: none;
}

.menu-barn .round-command:active {
  background: rgba(255, 244, 205, 0.22);
}

.menu-barn .game-menu-body {
  padding: 0;
}

.barn-visual {
  position: relative;
  width: min(920px, 96vw, calc(94dvh * 1212 / 827));
  margin-inline: auto;
  aspect-ratio: 1212 / 827;
  background: url("assets/ahir-menu.png") center / contain no-repeat;
}

.barn-slot {
  position: absolute;
  width: 42%;
  height: 15%;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 16px;
  background: rgba(255, 246, 218, 0.12);
  border: 0;
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  cursor: pointer;
}

.barn-slot.has-image {
  grid-template-columns: 31% 1fr;
  padding: 1.05% 3%;
  background: linear-gradient(180deg, rgba(255, 248, 224, 0.9), rgba(255, 232, 172, 0.9));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.46), 0 6px 12px rgba(88, 50, 12, 0.12);
}

.barn-slot.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(80, 44, 12, 0.22));
}

.barn-slot div {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 2px;
}

.barn-slot strong {
  font-size: clamp(1.05rem, 2.5vw, 1.9rem);
  line-height: 1;
  color: #5d3213;
  text-shadow: 0 2px 0 rgba(255, 240, 205, 0.82);
}

.barn-slot span {
  display: block;
  font-size: clamp(1.15rem, 2.8vw, 2.15rem);
  line-height: 1;
  color: #c64b16;
  text-shadow: 0 2px 0 rgba(255, 236, 188, 0.86), 0 3px 4px rgba(82, 37, 8, 0.22);
}

.barn-slot small {
  color: #9a6122;
  font-size: clamp(0.52rem, 1.1vw, 0.78rem);
  line-height: 1.1;
}

.barn-slot.cow {
  left: 7.2%;
  top: 38.2%;
}

.barn-slot.lamb {
  left: 51.8%;
  top: 38.2%;
}

.barn-slot.goat {
  left: 7.2%;
  top: 58.7%;
}

.barn-slot.horse {
  left: 51.8%;
  top: 58.7%;
}

.barn-slot.has-image strong {
  min-width: 36%;
  padding: 3px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 247, 221, 0.96), rgba(255, 234, 176, 0.96));
}

.barn-feed-label {
  position: absolute;
  width: 14%;
  height: 6.1%;
  display: grid;
  place-items: center;
  color: #fffbea;
  font-weight: 900;
  font-size: clamp(0.82rem, 1.9vw, 1.35rem);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(41, 93, 20, 0.7);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(127, 207, 55, 0.98), rgba(47, 133, 30, 0.98));
  box-shadow: inset 0 -4px 0 rgba(22, 87, 18, 0.4), 0 4px 8px rgba(54, 38, 12, 0.2);
}

.barn-feed-label.cow {
  left: 33.1%;
  top: 43.2%;
}

.barn-feed-label.lamb {
  left: 77.5%;
  top: 43.2%;
}

.barn-feed-label.grass {
  left: 34.2%;
  top: 67.4%;
}

.barn-hit {
  position: absolute;
  width: 14%;
  height: 6.1%;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
}

.barn-hit.cow {
  left: 33.1%;
  top: 43.2%;
}

.barn-hit.lamb {
  left: 77.5%;
  top: 43.2%;
}

.barn-hit.grass {
  left: 34.2%;
  top: 67.4%;
}

.barn-hit:active {
  background: rgba(255, 255, 255, 0.14);
}

.barn-feed-picker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 38%;
  padding: 1.4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 3px solid #d58c2b;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 249, 224, 0.98), rgba(255, 224, 151, 0.98));
  box-shadow: 0 16px 34px rgba(70, 38, 9, 0.34), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  max-height: 82%;
  overflow-y: auto;
}

.barn-feed-picker strong {
  grid-column: 1 / -1;
  color: #6f3915;
  font-size: clamp(0.76rem, 1.6vw, 1.04rem);
  text-align: center;
}

.barn-feed-picker button {
  min-height: clamp(34px, 4.4vw, 48px);
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #84d94a, #328b25);
  color: #fffbea;
  font-size: clamp(0.68rem, 1.4vw, 0.94rem);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(34, 91, 18, 0.55);
  box-shadow: inset 0 -4px 0 rgba(22, 87, 18, 0.32), 0 4px 8px rgba(54, 38, 12, 0.18);
  cursor: pointer;
}

.barn-feed-picker .ghost {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #f5a24a, #c95c14);
  text-shadow: 0 2px 0 rgba(105, 48, 6, 0.45);
}

.barn-animal-detail {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 40%;
  padding: 1.5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 3px solid #d58c2b;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 249, 224, 0.985), rgba(255, 224, 151, 0.985));
  box-shadow: 0 18px 38px rgba(70, 38, 9, 0.34), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  transform: translate(-50%, -50%);
  max-height: 86%;
  overflow-y: auto;
}

.barn-animal-detail strong,
.barn-animal-detail span,
.barn-animal-detail small,
.barn-animal-detail div {
  grid-column: 1 / -1;
}

.barn-animal-detail strong {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
}

.barn-animal-detail span {
  color: #c64b16;
  font-size: clamp(1.05rem, 2.4vw, 1.8rem);
}

.barn-animal-detail small,
.barn-animal-detail div {
  color: #8a5a21;
  font-size: clamp(0.58rem, 1.2vw, 0.86rem);
  line-height: 1.15;
}

.barn-animal-detail button {
  min-height: clamp(34px, 4.4vw, 48px);
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #84d94a, #328b25);
  color: #fffbea;
  font-size: clamp(0.68rem, 1.4vw, 0.94rem);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(34, 91, 18, 0.55);
  box-shadow: inset 0 -4px 0 rgba(22, 87, 18, 0.32), 0 4px 8px rgba(54, 38, 12, 0.18);
  cursor: pointer;
}

.barn-animal-detail .ghost {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  background: linear-gradient(180deg, #f5a24a, #c95c14);
  text-shadow: 0 2px 0 rgba(105, 48, 6, 0.45);
}

.barn-production {
  position: absolute;
  width: 22%;
  color: #8a5a21;
  font-size: clamp(0.52rem, 1.05vw, 0.76rem);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

.barn-production.cow {
  left: 27.6%;
  top: 51.2%;
}

.barn-production.lamb {
  left: 72%;
  top: 51.2%;
}

.barn-overlay-tip {
  position: absolute;
  left: 21%;
  right: 8%;
  bottom: 8.2%;
  color: #8a5a21;
  font-size: clamp(0.78rem, 1.7vw, 1.05rem);
  font-weight: 900;
  line-height: 1.2;
}

.coop-overlay-value {
  position: absolute;
  width: 8%;
  height: 7%;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #c64b16;
  text-align: center;
  font-weight: 900;
}

.coop-overlay-value span {
  display: block;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 236, 188, 0.86), 0 3px 4px rgba(82, 37, 8, 0.22);
}

.coop-overlay-value small {
  display: none;
  color: #9a6122;
  font-size: clamp(0.46rem, 1vw, 0.68rem);
  line-height: 1;
}

.coop-overlay-value.chicken {
  left: 19.1%;
  top: 32.2%;
}

.coop-overlay-value.goose {
  left: 62%;
  top: 32.2%;
}

.coop-overlay-value.duck {
  left: 19.1%;
  top: 48.1%;
}

.coop-overlay-value.feed {
  left: 62.2%;
  top: 48.1%;
}

.coop-overlay-value.chicken-egg {
  left: 19.8%;
  top: 62.5%;
}

.coop-overlay-value.goose-egg {
  left: 62.2%;
  top: 62.5%;
}

.coop-overlay-value.duck-egg {
  left: 19.8%;
  top: 77.7%;
}

.coop-feed-label {
  position: absolute;
  width: 14%;
  height: 5.3%;
  display: grid;
  place-items: center;
  color: #fffbea;
  font-weight: 900;
  font-size: clamp(0.86rem, 2vw, 1.4rem);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(41, 93, 20, 0.7);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(127, 207, 55, 0.98), rgba(47, 133, 30, 0.98));
  box-shadow: inset 0 -4px 0 rgba(22, 87, 18, 0.4), 0 4px 8px rgba(54, 38, 12, 0.2);
}

.coop-feed-label.chicken {
  left: 29.3%;
  top: 33.3%;
}

.coop-feed-label.goose {
  left: 72.2%;
  top: 33.3%;
}

.coop-feed-label.duck {
  left: 29.3%;
  top: 49%;
}

.coop-hit {
  position: absolute;
  width: 14%;
  height: 5.3%;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
}

.coop-hit:active {
  background: rgba(255, 255, 255, 0.14);
}

.coop-hit.chicken {
  left: 29.3%;
  top: 33.3%;
}

.coop-hit.goose {
  left: 72.2%;
  top: 33.3%;
}

.coop-hit.duck {
  left: 29.3%;
  top: 49%;
}

.coop-overlay-tip {
  position: absolute;
  left: 20%;
  right: 8%;
  bottom: 5.2%;
  min-height: 9%;
  display: flex;
  align-items: center;
  color: #5d3614;
  font-size: clamp(0.78rem, 1.8vw, 1.25rem);
  font-weight: 900;
  line-height: 1.16;
  background: linear-gradient(180deg, rgba(255, 246, 220, 0.96), rgba(255, 236, 183, 0.96));
  border-radius: 12px;
  padding-left: 2%;
}

.profile-overlay-value {
  position: absolute;
  width: 14%;
  height: 5.6%;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  pointer-events: none;
}

.profile-overlay-value span {
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  line-height: 1;
}

.profile-overlay-value.coop-count {
  left: 23.5%;
  top: 18.7%;
}

.profile-overlay-value.barn-count {
  left: 68.6%;
  top: 18.7%;
}

.profile-overlay-value.milk-count {
  left: 23.5%;
  top: 32.8%;
}

.profile-overlay-value.coin-count {
  left: 15.5%;
  top: 88.8%;
  width: 14%;
  height: 4.8%;
}

.profile-price {
  position: absolute;
  right: 9.8%;
  width: 12%;
  height: 4.8%;
  display: grid;
  place-items: center;
  color: #fff1b8;
  font-weight: 900;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(92, 54, 12, 0.45);
}

.profile-price.cheese-price {
  top: 70.7%;
}

.profile-price.butter-price {
  top: 79.5%;
}

.profile-quest-title {
  position: absolute;
  left: 15.4%;
  top: 43.3%;
  width: 62%;
  color: #6f3915;
  font-weight: 900;
  font-size: clamp(0.78rem, 1.8vw, 1.22rem);
  pointer-events: none;
}

.profile-hit {
  position: absolute;
  left: 3.4%;
  width: 93.2%;
  height: 8.2%;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
}

.profile-hit:active {
  background: rgba(255, 255, 255, 0.16);
}

.profile-hit.quest {
  top: 51.7%;
}

.profile-hit.puzzle {
  top: 60.4%;
}

.profile-hit.cheese {
  top: 69%;
}

.profile-hit.butter {
  top: 77.8%;
}

.field-overlay-value {
  position: absolute;
  width: 11.8%;
  height: 5.2%;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  pointer-events: none;
}

.field-overlay-value span {
  font-size: clamp(1rem, 2.3vw, 1.9rem);
  line-height: 1;
}

.field-overlay-value.tomato {
  left: 10.3%;
  top: 37.1%;
}

.field-overlay-value.wheat {
  left: 33.8%;
  top: 37.1%;
}

.field-overlay-value.lettuce {
  left: 57.4%;
  top: 37.1%;
}

.field-overlay-value.cucumber {
  left: 81%;
  top: 37.1%;
}

.field-overlay-value.water {
  left: 26%;
  top: 52.1%;
}

.field-overlay-value.fertilizer {
  left: 71.5%;
  top: 52.1%;
}

.field-status {
  position: absolute;
  left: 18.6%;
  top: 64%;
  width: 66%;
  min-height: 7.2%;
  display: flex;
  align-items: center;
  padding: 0 1.6%;
  border-radius: 10px;
  background: rgba(255, 245, 214, 0.88);
  color: #6f3915;
  font-weight: 900;
  font-size: clamp(0.76rem, 1.65vw, 1.1rem);
  line-height: 1.2;
  pointer-events: none;
}

.field-action-price {
  position: absolute;
  top: 89.4%;
  width: 15.2%;
  height: 4.3%;
  display: grid;
  place-items: center;
  color: #fff0b0;
  font-size: clamp(0.64rem, 1.55vw, 0.96rem);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(86, 49, 12, 0.58);
  pointer-events: none;
}

.field-action-price.water {
  left: 6.2%;
}

.field-action-price.fertilizer {
  left: 29.4%;
}

.field-action-price.plant {
  left: 52.9%;
}

.field-action-price.harvest {
  left: 76.4%;
}

.field-hit {
  position: absolute;
  top: 74.5%;
  width: 20.5%;
  height: 19.3%;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
}

.field-hit:active {
  background: rgba(255, 255, 255, 0.16);
}

.field-hit.water {
  left: 3.4%;
}

.field-hit.fertilizer {
  left: 26.7%;
}

.field-hit.plant {
  left: 50.2%;
}

.field-hit.harvest {
  left: 73.6%;
}

.field-picker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  min-height: 36%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2%;
  padding: 4.8% 4.2% 4%;
  border: 3px solid rgba(211, 137, 26, 0.86);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 247, 221, 0.96), rgba(255, 225, 158, 0.96));
  box-shadow: 0 16px 35px rgba(76, 45, 12, 0.32), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  z-index: 4;
  transform: translate(-50%, -50%);
  max-height: 86%;
  overflow-y: auto;
}

.field-picker-title {
  grid-column: 1 / -1;
  color: #6f3915;
  font-size: clamp(0.9rem, 2vw, 1.35rem);
  font-weight: 900;
  text-align: center;
}

.field-picker-note {
  grid-column: 1 / -1;
  color: #8b4f19;
  font-size: clamp(0.68rem, 1.35vw, 0.9rem);
  font-weight: 900;
  text-align: center;
}

.field-picker-choice,
.field-picker-close {
  min-height: clamp(42px, 6vw, 58px);
  border: 2px solid rgba(166, 93, 17, 0.55);
  border-radius: 12px;
  color: #fffbea;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(82, 50, 9, 0.52);
  box-shadow: inset 0 -4px 0 rgba(83, 42, 7, 0.22), 0 5px 10px rgba(82, 49, 11, 0.18);
}

.field-picker-choice {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f7a83a, #d96c05);
}

.field-picker-choice span {
  font-size: clamp(0.76rem, 1.7vw, 1.08rem);
}

.field-picker-choice strong {
  font-size: clamp(0.6rem, 1.3vw, 0.82rem);
}

.field-picker-close {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #75c84a, #318927);
  font-size: clamp(0.74rem, 1.6vw, 1rem);
}

.market-hit {
  position: absolute;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
}

.market-hit:active {
  background: rgba(255, 255, 255, 0.16);
}

.market-hit.buy-chicken { left: 5.8%; top: 23.6%; width: 44.6%; height: 6%; }
.market-hit.buy-goose { left: 51.5%; top: 23.6%; width: 43.9%; height: 6%; }
.market-hit.buy-duck { left: 5.8%; top: 30.2%; width: 44.6%; height: 6%; }
.market-hit.buy-cow { left: 51.5%; top: 30.2%; width: 43.9%; height: 6%; }
.market-hit.buy-lamb { left: 5.8%; top: 36.8%; width: 44.6%; height: 6%; }
.market-hit.buy-feed { left: 51.5%; top: 36.8%; width: 43.9%; height: 6%; }
.market-hit.buy-grass { left: 5.8%; top: 43.4%; width: 44.6%; height: 6%; }

.market-hit.sell-chicken-egg { left: 5.8%; top: 50.2%; width: 44.6%; height: 5.6%; }
.market-hit.sell-goose-egg { left: 51.5%; top: 50.2%; width: 43.9%; height: 5.6%; }
.market-hit.sell-duck-egg { left: 5.8%; top: 56.1%; width: 44.6%; height: 5.6%; }
.market-hit.sell-milk { left: 51.5%; top: 56.1%; width: 43.9%; height: 5.6%; }
.market-hit.sell-cheese { left: 5.8%; top: 62%; width: 44.6%; height: 5.6%; }
.market-hit.sell-butter { left: 51.5%; top: 62%; width: 43.9%; height: 5.6%; }
.market-hit.sell-chicken { left: 5.8%; top: 67.9%; width: 44.6%; height: 5.6%; }
.market-hit.sell-goose { left: 51.5%; top: 67.9%; width: 43.9%; height: 5.6%; }
.market-hit.sell-duck { left: 5.8%; top: 73.8%; width: 44.6%; height: 5.6%; }
.market-hit.sell-cow { left: 51.5%; top: 73.8%; width: 43.9%; height: 5.6%; }
.market-hit.sell-lamb { left: 5.8%; top: 79.7%; width: 44.6%; height: 5.6%; }
.market-hit.sell-crops { left: 5.8%; top: 86.1%; width: 89.6%; height: 6.4%; }
.market-hit.expand-land { left: 5.8%; top: 93.2%; width: 89.6%; height: 5.5%; }

.market-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  min-height: 34%;
  z-index: 5;
  display: grid;
  gap: 10px;
  padding: 3.2% 4.2% 3.8%;
  border: 3px solid rgba(204, 126, 22, 0.86);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 247, 221, 0.98), rgba(255, 225, 158, 0.98));
  box-shadow: 0 18px 38px rgba(76, 45, 12, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  transform: translate(-50%, -50%);
  max-height: 86%;
  overflow-y: auto;
}

.market-dialog-title {
  display: grid;
  grid-template-columns: clamp(42px, 6vw, 62px) 1fr;
  align-items: center;
  gap: clamp(7px, 1.2vw, 12px);
  text-align: left;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
}

.market-dialog-title img {
  width: 100%;
  height: clamp(42px, 6vw, 62px);
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(86, 44, 9, 0.22));
}

.market-dialog label {
  font-size: clamp(0.78rem, 1.7vw, 1.02rem);
}

.market-quantity-input {
  min-height: clamp(40px, 5vw, 58px);
  width: 100%;
  border: 2px solid #d89b3b;
  border-radius: 10px;
  background: #fff8dd;
  color: #6f3915;
  text-align: center;
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-weight: 900;
}

.market-dialog-price {
  color: #9a5b19;
}

.market-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.market-dialog-actions button {
  min-height: clamp(38px, 5vw, 54px);
  border: 0;
  border-radius: 10px;
  color: #fffbea;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(83, 42, 7, 0.22), 0 5px 10px rgba(82, 49, 11, 0.18);
}

.market-dialog-actions button:first-child {
  background: linear-gradient(180deg, #f0a046, #c65b10);
}

.market-dialog-actions button:last-child {
  background: linear-gradient(180deg, #75c84a, #318927);
}

.convert-menu {
  position: relative;
  display: grid;
  gap: 12px;
  padding: clamp(10px, 2vw, 16px);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 16%, rgba(112, 219, 255, 0.34), transparent 24%),
    radial-gradient(circle at 18% 8%, rgba(255, 223, 93, 0.32), transparent 22%),
    linear-gradient(180deg, rgba(103, 61, 18, 0.12), rgba(255, 244, 206, 0.72));
}

.convert-rate,
.convert-menu button {
  border: 1px solid rgba(196, 126, 43, 0.45);
  border-radius: 10px;
  background: rgba(255, 250, 231, 0.9);
  color: #6f3915;
}

.convert-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.convert-showcase.buy-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.convert-wallet {
  position: relative;
  min-height: clamp(118px, 18vw, 170px);
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  overflow: hidden;
  padding: 12px 8px 10px;
  border: 2px solid rgba(153, 92, 22, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 252, 228, 0.96), rgba(255, 219, 139, 0.86));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.48), 0 10px 22px rgba(96, 57, 13, 0.14);
  color: #6f3915;
  text-align: center;
  cursor: default;
}

button.convert-wallet {
  min-height: clamp(118px, 18vw, 170px);
  border: 2px solid rgba(153, 92, 22, 0.22);
  border-radius: 8px;
  color: #6f3915;
  cursor: pointer;
}

.convert-wallet::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.56), transparent 62%);
  opacity: 0.66;
  pointer-events: none;
}

.convert-wallet img {
  position: relative;
  z-index: 1;
  width: min(78%, 100px);
  height: clamp(64px, 12vw, 105px);
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(74, 42, 8, 0.25));
}

.convert-wallet strong,
.convert-wallet span {
  position: relative;
  z-index: 2;
}

.convert-wallet strong {
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  line-height: 1;
}

.convert-wallet span {
  color: #8a5a21;
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  font-weight: 900;
}

.coin-wallet {
  background: linear-gradient(180deg, #fff4ad, #f5b946 58%, #d78220);
}

.star-wallet,
.convert-menu button.star-wallet {
  background: linear-gradient(180deg, #fff8b8, #ffd653 55%, #f0a52b);
}

.gem-wallet,
.convert-menu button.gem-wallet {
  background: radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.94), transparent 23%), linear-gradient(180deg, #c9fbff, #52c8ff 55%, #1571d5);
  box-shadow: 0 0 22px rgba(44, 190, 255, 0.52), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.gem-wallet::after {
  content: "";
  position: absolute;
  width: 44%;
  height: 160%;
  left: -58%;
  top: -28%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
  animation: gemSweep 2.7s ease-in-out infinite;
  pointer-events: none;
}

.gem-wallet img {
  animation: gemPulse 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.82)) drop-shadow(0 10px 12px rgba(7, 61, 139, 0.32));
}

.gem-spark {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  box-shadow: 0 0 12px #fff, 0 0 20px #74efff;
  animation: gemSpark 1.9s ease-in-out infinite;
}

.spark-one { left: 19%; top: 23%; }
.spark-two { right: 17%; top: 34%; animation-delay: 0.45s; }
.spark-three { left: 50%; bottom: 31%; animation-delay: 0.9s; }

.convert-rate-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.convert-rate {
  padding: 12px;
  font-weight: 900;
}

.convert-rate span {
  display: block;
  margin-top: 4px;
  color: #8a5a21;
}

.convert-hint {
  padding: 10px 12px;
  border: 1px solid rgba(196, 126, 43, 0.38);
  border-radius: 8px;
  background: rgba(255, 250, 231, 0.78);
  color: #6f3915;
  text-align: center;
  font-weight: 900;
}

.convert-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.convert-menu button {
  min-height: 48px;
  border: 0;
  background: linear-gradient(180deg, #ffb744, #b95b1f);
  color: #fffbea;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(83, 42, 7, 0.18), 0 6px 12px rgba(82, 49, 11, 0.14);
}

.convert-menu button.convert-wallet {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.48), 0 10px 22px rgba(96, 57, 13, 0.14);
}

.convert-menu button.convert-wallet:is(:hover, :focus-visible) {
  outline: 0;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(255, 246, 174, 0.82), 0 16px 28px rgba(96, 57, 13, 0.22);
}

.convert-buy-button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.convert-buy-button img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(83, 42, 7, 0.24));
}

.gem-buy-button {
  background: linear-gradient(180deg, #4bdcff, #1473d6) !important;
  box-shadow: 0 0 16px rgba(67, 213, 255, 0.38), inset 0 -4px 0 rgba(7, 60, 130, 0.2) !important;
}

.convert-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(92%, 420px);
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 2px solid rgba(204, 126, 22, 0.75);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 247, 221, 0.98), rgba(255, 226, 163, 0.98));
  box-shadow: 0 10px 22px rgba(91, 55, 14, 0.16), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
  color: #6f3915;
  text-align: center;
  font-weight: 900;
  transform: translate(-50%, -50%);
  max-height: 90%;
  overflow-y: auto;
}

.convert-dialog-icon {
  width: clamp(58px, 13vw, 86px);
  height: clamp(48px, 10vw, 74px);
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 8px 10px rgba(83, 42, 7, 0.24));
}

.convert-dialog-gem {
  animation: gemPulse 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(56, 211, 255, 0.64)) drop-shadow(0 8px 10px rgba(7, 61, 139, 0.24));
}

.convert-dialog-title {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.convert-dialog label {
  display: grid;
  gap: 6px;
}

.convert-quantity-input {
  min-height: 46px;
  width: 100%;
  border: 2px solid #d89b3b;
  border-radius: 10px;
  background: #fff8dd;
  color: #6f3915;
  text-align: center;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  font-weight: 900;
}

.convert-dialog-price {
  color: #9a5b19;
}

.convert-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.convert-dialog-actions button:first-child {
  background: linear-gradient(180deg, #f0a046, #c65b10);
}

.convert-dialog-actions button:last-child {
  background: linear-gradient(180deg, #75c84a, #318927);
}

.premium-menu {
  display: grid;
  gap: 12px;
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  padding: 4px;
  color: #65320f;
}

.premium-hero {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(86px, 14vw, 132px);
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 3px solid rgba(116, 206, 255, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, 0.82), transparent 18%),
    linear-gradient(135deg, #dffbff, #5ad0ff 42%, #1975d1);
  box-shadow: 0 14px 32px rgba(29, 90, 144, 0.26), inset 0 0 0 3px rgba(255, 255, 255, 0.38);
}

.premium-hero::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 180%;
  left: -45%;
  top: -40%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  animation: gemSweep 3s ease-in-out infinite;
}

.premium-hero span,
.premium-hero strong,
.premium-hero small {
  position: relative;
  z-index: 1;
  display: block;
}

.premium-hero span {
  color: #ecfbff;
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.premium-hero strong {
  max-width: 520px;
  color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 2.35rem);
  line-height: 1.02;
  text-shadow: 0 3px 0 rgba(16, 86, 144, 0.35);
}

.premium-hero small {
  margin-top: 8px;
  color: #e8fbff;
  font-weight: 900;
}

.premium-hero img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(78px, 13vw, 124px);
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.88)) drop-shadow(0 12px 12px rgba(14, 72, 133, 0.32));
  animation: gemPulse 2.2s ease-in-out infinite;
}

.premium-wallets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.premium-wallets div {
  min-height: 60px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid rgba(188, 117, 36, 0.36);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 250, 226, 0.96), rgba(255, 220, 145, 0.88));
  font-weight: 1000;
}

.premium-wallets img {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.premium-wallets strong {
  font-size: 1.15rem;
  line-height: 1;
}

.premium-wallets span {
  color: #8a541b;
  font-size: 0.72rem;
}

.premium-section {
  display: grid;
  gap: 8px;
}

.premium-section header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 4px;
  color: #6a3712;
  font-weight: 1000;
}

.premium-section header span {
  color: #9a6425;
  font-size: 0.76rem;
  text-align: right;
}

.premium-grid,
.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.premium-card,
.reward-card {
  min-width: 0;
  min-height: 106px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 10px;
  border: 2px solid rgba(172, 103, 30, 0.38);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff7da, #f5c66e);
  color: #67330f;
  text-align: left;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38), 0 8px 18px rgba(83, 48, 12, 0.12);
}

.premium-card img,
.reward-card img {
  grid-row: 1 / 4;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(78, 43, 9, 0.22));
}

.premium-card span,
.reward-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.premium-card strong,
.reward-card strong {
  color: #b94816;
  font-size: 1.05rem;
}

.premium-card small,
.reward-card small {
  color: #8a541b;
  font-size: 0.72rem;
  line-height: 1.1;
}

.premium-card em,
.reward-card em {
  grid-row: 1 / 4;
  grid-column: 3;
  align-self: stretch;
  min-width: 86px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #92df2c, #43a50e);
  color: #fffbe4;
  font-style: normal;
  text-align: center;
  box-shadow: inset 0 -3px rgba(39, 95, 9, 0.28);
}

.premium-card.owned,
.reward-card.done {
  opacity: 0.82;
  cursor: default;
}

.premium-card.owned em,
.reward-card.done em {
  background: linear-gradient(180deg, #bdb3a2, #8e8170);
}

.premium-note {
  padding: 10px 12px;
  border: 1px dashed rgba(134, 83, 27, 0.45);
  border-radius: 8px;
  background: rgba(255, 247, 218, 0.76);
  color: #81501b;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.lake-menu {
  position: relative;
  display: grid;
  grid-template-columns: 38.5% 1fr;
  gap: 2%;
  aspect-ratio: 1512 / 1190;
  padding: 13.4% 5.2% 13.6% 6.3%;
  background: url("assets/gol-menu.png") center / 100% 100% no-repeat;
}

.lake-scene {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  align-self: stretch;
}

.lake-scene > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.lake-water-shine {
  position: absolute;
  left: 6%;
  top: 7%;
  width: 88%;
  height: 58%;
  border-radius: 16px;
  background:
    repeating-linear-gradient(100deg, rgba(214, 255, 255, 0.03) 0 11px, rgba(255, 255, 255, 0.28) 12px 16px, rgba(42, 171, 213, 0.08) 17px 31px),
    radial-gradient(ellipse at 50% 56%, rgba(93, 219, 255, 0.18), transparent 63%);
  mix-blend-mode: screen;
  animation: lakeMenuRipple 3.4s ease-in-out infinite;
  pointer-events: none;
}

.lake-basket {
  position: absolute;
  left: 28%;
  bottom: 11.5%;
  width: 42%;
  min-height: 10%;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 7px 12px;
  border: 2px solid rgba(197, 126, 42, 0.34);
  border-radius: 12px;
  background: rgba(255, 221, 142, 0.68);
  color: #743f17;
  font-weight: 900;
}

.lake-basket strong {
  font-size: clamp(0.92rem, 1.55vw, 1.32rem);
  line-height: 1;
}

.lake-basket small {
  color: #9a611f;
  font-size: clamp(0.58rem, 0.9vw, 0.76rem);
}

.lake-fish-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 0.9vw, 10px);
  padding: 0.8%;
}

.lake-fish-card {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(58px, 1fr) auto auto auto;
  justify-items: center;
  align-items: end;
  gap: 3px;
  padding: 6px;
  border: 2px solid rgba(188, 117, 36, 0.38);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 250, 231, 0.88), rgba(255, 220, 143, 0.84));
  color: #743f17;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38), 0 8px 18px rgba(86, 54, 16, 0.12);
}

.lake-fish-card img {
  width: 100%;
  height: clamp(46px, 6.4vw, 86px);
  object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(60, 37, 14, 0.22));
  animation: fishFloat 2.8s ease-in-out infinite;
}

.lake-fish-card:nth-child(2n) img {
  animation-delay: 0.45s;
}

.lake-fish-card strong {
  font-size: clamp(0.72rem, 1.08vw, 0.86rem);
}

.lake-fish-card span,
.lake-fish-card small {
  font-size: clamp(0.54rem, 0.82vw, 0.66rem);
  line-height: 1.05;
}

.lake-fish-card span {
  color: #7a4718;
}

.lake-fish-card small {
  color: #2f7f39;
}

.lake-fish-card:is(:hover, :focus-visible) {
  outline: 0;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(255, 244, 178, 0.72), 0 14px 22px rgba(86, 54, 16, 0.2);
}

.lake-fish-card.disabled {
  opacity: 0.58;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

@keyframes gemPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.06); }
}

@keyframes gemSweep {
  0% { left: -58%; opacity: 0; }
  22% { opacity: 0.88; }
  50% { left: 112%; opacity: 0; }
  100% { left: 112%; opacity: 0; }
}

@keyframes gemSpark {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.35; }
  50% { transform: scale(1.35) rotate(45deg); opacity: 1; }
}

@keyframes lakeRipple {
  0%, 100% { background-position: 0 0, center; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  50% { background-position: 28px 12px, center; transform: translate(-50%, -50%) rotate(-4deg) scale(1.035); }
}

@keyframes lakeRing {
  0% { transform: scale(0.62); opacity: 0.78; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes lakeMenuRipple {
  0%, 100% { background-position: 0 0, center; opacity: 0.5; }
  50% { background-position: 36px 14px, center; opacity: 0.9; }
}

@keyframes fishFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 560px) {
  .convert-showcase {
    grid-template-columns: 1fr;
  }

  .convert-showcase.buy-mode {
    grid-template-columns: 1fr;
  }

  .convert-wallet {
    min-height: 96px;
    grid-template-columns: 92px 1fr;
    grid-template-rows: auto auto;
    justify-items: start;
    text-align: left;
  }

  .convert-wallet img {
    grid-row: 1 / span 2;
    width: 78px;
    height: 72px;
  }

  .convert-rate-board,
  .convert-action-grid {
    grid-template-columns: 1fr;
  }

  .lake-menu {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    min-height: min(92dvh, 760px);
    padding: 76px 28px 34px;
    background-size: cover;
  }

  .lake-scene {
    min-height: 230px;
  }

  .lake-fish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (orientation: portrait) and (max-width: 620px) {
  .topbar {
    left: max(72px, calc(env(safe-area-inset-left) + 72px));
    right: max(8px, env(safe-area-inset-right));
  }

  .resource-hud {
    width: 100%;
    margin-left: 0;
  }

  .hud-bar {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }
}

.market-overlay-value {
  position: absolute;
  width: 11.2%;
  height: 4.2%;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  color: #fff1c4;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(30, 75, 120, 0.46);
}

.market-overlay-value span {
  font-size: clamp(0.76rem, 1.8vw, 1.28rem);
  line-height: 0.9;
}

.market-clean-mask {
  position: absolute;
  z-index: 1;
  height: 3.6%;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(45, 159, 232, 0.98), rgba(19, 110, 191, 0.98));
  box-shadow: inset 0 2px 0 rgba(126, 211, 255, 0.22), inset 0 -3px 0 rgba(7, 60, 130, 0.16);
  pointer-events: none;
}

.market-clean-mask.duck {
  left: 32.3%;
  top: 73.88%;
  width: 8.4%;
}

.market-clean-mask.lamb {
  left: 31.7%;
  top: 79.82%;
  width: 17.8%;
}

.market-overlay-value small {
  color: #fff6d3;
  font-size: clamp(0.42rem, 0.9vw, 0.62rem);
  line-height: 1;
}

.market-overlay-value.chicken-egg { left: 34.2%; top: 51.25%; }
.market-overlay-value.goose-egg { left: 80.4%; top: 51.25%; }
.market-overlay-value.duck-egg { left: 34.2%; top: 57.15%; }
.market-overlay-value.milk { left: 80.4%; top: 57.15%; }
.market-overlay-value.cheese { left: 34.2%; top: 63.05%; }
.market-overlay-value.butter { left: 80.4%; top: 63.05%; }
.market-overlay-value.chicken { left: 34.2%; top: 68.95%; }
.market-overlay-value.goose { left: 80.4%; top: 68.95%; }
.market-overlay-value.duck { left: 34.2%; top: 74.85%; }
.market-overlay-value.cow { left: 80.4%; top: 74.85%; }
.market-overlay-value.lamb { left: 34.2%; top: 80.75%; }
.market-overlay-value.land {
  left: 62.8%;
  top: 94.1%;
  width: 13%;
  text-shadow: 0 2px 0 rgba(45, 90, 25, 0.46);
}

.puzzle-panel {
  width: min(560px, 96vw);
  max-height: 96dvh;
  padding: 12px;
  border: 4px solid #fff2c5;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff6d7, #f1b95a);
  box-shadow: 0 24px 60px rgba(21, 22, 10, 0.42);
}

.puzzle-head {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.puzzle-head div,
.puzzle-goal {
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #743f17;
  font-weight: 900;
  text-align: center;
}

.puzzle-head span {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
}

.round-command {
  position: relative;
  z-index: 160;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  pointer-events: auto;
  touch-action: manipulation;
}

.puzzle-goal {
  margin-bottom: 10px;
}

.match-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(111, 69, 28, 0.22);
}

.word-game {
  display: grid;
  gap: 12px;
}

.word-mask {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(111, 69, 28, 0.2);
  color: #6f3915;
  font-size: clamp(1.05rem, 3.6vw, 2.05rem);
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
}

.word-slots,
.word-letter-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border-radius: 8px;
  background: rgba(111, 69, 28, 0.16);
}

.word-slot {
  width: clamp(31px, 8vw, 45px);
  height: clamp(38px, 8.8vw, 52px);
  display: grid;
  place-items: center;
  border: 3px solid #eaa344;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8dd, #ffd77a);
  color: #6f3915;
  font-size: clamp(1rem, 3.2vw, 1.45rem);
  font-weight: 900;
  box-shadow: inset 0 -4px rgba(122, 68, 15, 0.13), 0 4px 8px rgba(64, 38, 12, 0.13);
}

.word-slot.locked {
  border-color: #75b82a;
  background: linear-gradient(180deg, #eaffc8, #a9df45);
}

.word-slot.filled {
  border-color: #4aa0df;
  background: linear-gradient(180deg, #e4f8ff, #7dcdf2);
}

.word-slot.space {
  width: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #9a6224;
}

.word-letter-pool {
  gap: 8px;
  background: rgba(78, 47, 21, 0.2);
}

.word-letter {
  width: clamp(38px, 8.8vw, 54px);
  height: clamp(38px, 8.8vw, 54px);
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf0, #ffc85a);
  color: #714015;
  font-size: clamp(1rem, 3.3vw, 1.48rem);
  font-weight: 900;
  box-shadow: inset 0 -4px rgba(120, 68, 19, 0.2), 0 5px 10px rgba(63, 38, 18, 0.2);
  cursor: pointer;
  touch-action: manipulation;
}

.word-letter.used {
  opacity: 0.36;
  transform: scale(0.94);
}

.word-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.word-submit,
.word-buy-letter,
.word-clear {
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  color: #fffbe8;
  font-weight: 900;
  font-size: clamp(0.72rem, 2.3vw, 1rem);
  box-shadow: inset 0 -4px 0 rgba(31, 84, 24, 0.28), 0 8px 18px rgba(52, 32, 13, 0.22);
  cursor: pointer;
  touch-action: manipulation;
}

.word-submit {
  background: linear-gradient(180deg, #6ec95a, #358235);
}

.word-buy-letter {
  background: linear-gradient(180deg, #ffb438, #df7405);
}

.word-clear {
  background: linear-gradient(180deg, #72b8f2, #2876b4);
}

.match-piece {
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf0, #ffd066);
  color: #734018;
  font-weight: 900;
  font-size: clamp(0.9rem, 4vw, 1.45rem);
  box-shadow: inset 0 -4px 0 rgba(120, 68, 19, 0.18), 0 4px 8px rgba(63, 38, 18, 0.18);
}

.match-piece.selected {
  outline: 4px solid #53a5ff;
  outline-offset: -3px;
  transform: scale(1.05);
}

@media (orientation: portrait) {
  .farm-stage {
    background-size: auto 100%;
  }

  .tile:nth-child(1) { --x: 17%; --y: 78%; }
  .tile:nth-child(2) { --x: 24%; --y: 73%; }
  .tile:nth-child(3) { --x: 31%; --y: 78%; }
  .tile:nth-child(4) { --x: 18%; --y: 63%; }
  .tile:nth-child(5) { --x: 25%; --y: 58%; }
  .tile:nth-child(6) { --x: 36%; --y: 63%; }
  .tile:nth-child(7) { --x: 24%; --y: 30%; }
  .tile:nth-child(8) { --x: 51%; --y: 34%; }
  .tile:nth-child(9) { --x: 77%; --y: 31%; }
  .tile:nth-child(10) { --x: 78%; --y: 68%; }
  .tile:nth-child(11) { --x: 89%; --y: 57%; }
  .tile:nth-child(12) { --x: 53%; --y: 52%; }
}

@media (orientation: landscape) and (max-height: 720px) {
  .game-menu {
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .game-menu-panel {
    max-height: calc(100dvh - 12px);
  }

  .menu-barn .game-menu-panel,
  .menu-coop .game-menu-panel,
  .menu-field .game-menu-panel,
  .menu-market .game-menu-panel,
  .menu-lake .game-menu-panel {
    max-height: calc(100dvh - 12px);
    overflow: hidden;
  }

  .menu-field .game-menu-panel {
    width: min(96vw, calc((100dvh - 16px) * 1177 / 1019), 920px);
  }

  .menu-coop .game-menu-panel {
    width: min(96vw, calc((100dvh - 16px) * 1251 / 989), 920px);
  }

  .menu-barn .game-menu-panel {
    width: min(96vw, calc((100dvh - 16px) * 1212 / 827), 980px);
  }

  .menu-market .game-menu-panel {
    width: min(96vw, calc((100dvh - 16px) * 1114 / 1086), 900px);
  }

  .menu-lake .game-menu-panel {
    width: min(96vw, calc((100dvh - 16px) * 1512 / 1190), 980px);
  }

  .menu-home .game-menu-panel {
    width: min(96vw, calc((100dvh - 16px) * 1164 / 950), 860px);
    max-height: calc(100dvh - 12px);
    overflow: hidden;
  }

  .menu-player .game-menu-panel {
    width: min(92vw, calc((100dvh - 16px) * 1582 / 936));
    max-height: calc(100dvh - 12px);
  }

  .player-profile {
    padding: 4.9% 4.2% 3.4%;
    grid-template-columns: 29% 1fr;
    gap: 1.8%;
  }

  .player-avatar {
    width: clamp(38px, 10vh, 58px);
    border-width: 3px;
  }

  .player-bio {
    min-height: clamp(22px, 6vh, 28px);
    padding: 3px 7px;
  }

  .player-stat {
    min-height: clamp(25px, 7vh, 34px);
    grid-template-columns: clamp(21px, 5.2vh, 28px) 1fr auto;
    gap: 6px;
    padding: 3px 7px;
  }

  .player-side-menu button {
    min-height: clamp(22px, 6vh, 28px);
    padding-inline: 7px;
  }

  .player-content {
    padding: 5px;
  }

  .player-tabs {
    min-height: clamp(28px, 6.2vh, 38px);
  }

  .player-tabs button {
    padding: 0 4px;
    font-size: clamp(0.48rem, 2.4vh, 0.74rem);
    line-height: 1.05;
  }

  .friend-list {
    gap: 5px;
  }

  .friend-list > div {
    grid-template-columns: clamp(30px, 7.2vh, 42px) minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 0;
    padding: 5px 7px;
  }

  .friend-list > div strong,
  .friend-list > div span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .friend-list > div button {
    min-width: clamp(58px, 14vh, 86px);
    min-height: clamp(28px, 6.6vh, 38px);
    padding: 0 7px;
    font-size: clamp(0.5rem, 2.2vh, 0.7rem);
    line-height: 1.05;
  }

  .menu-achievements .game-menu-panel {
    width: min(56vw, calc((100dvh - 10px) * 1094 / 1410), 520px);
    max-height: calc(100dvh - 10px);
  }

  .menu-quests .game-menu-panel {
    width: min(76vw, calc((100dvh - 10px) * 1088 / 1445), 720px);
    max-height: calc(100dvh - 10px);
  }

  .menu-orders .game-menu-panel,
  .menu-storage .game-menu-panel,
  .menu-workshop .game-menu-panel {
    width: min(96vw, 780px);
    max-height: calc(100dvh - 12px);
    overflow: auto;
  }

  .utility-menu,
  .workshop-menu {
    min-height: 0;
    max-height: calc(100dvh - 86px);
  }

  .menu-home .game-menu-head {
    right: 2.2%;
    top: 2.2%;
  }

  .menu-home .round-command {
    width: clamp(38px, 7.4vh, 48px);
    height: clamp(38px, 7.4vh, 48px);
    border-width: 2px;
    font-size: clamp(1.05rem, 3.2vh, 1.35rem);
  }

  .market-visual {
    width: min(96vw, calc((100dvh - 16px) * 1114 / 1086), 900px);
    margin-inline: auto;
  }

  .lake-menu {
    width: min(96vw, calc((100dvh - 16px) * 1512 / 1190), 980px);
    margin-inline: auto;
  }

  .home-menu {
    width: min(96vw, calc((100dvh - 16px) * 1164 / 950), 860px);
    height: auto;
    max-height: calc(100dvh - 12px);
    aspect-ratio: 1164 / 950;
    display: block;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .home-dashboard {
    gap: clamp(5px, 1vh, 8px);
  }

  .home-summary {
    grid-template-columns: clamp(48px, 10vh, 66px) 1fr;
    gap: clamp(7px, 1.5vh, 11px);
    padding: clamp(6px, 1.4vh, 9px);
  }

  .home-summary strong {
    margin: 1px 0;
    font-size: clamp(1rem, 4.2vh, 1.45rem);
  }

  .home-summary small {
    font-size: clamp(0.62rem, 2.2vh, 0.82rem);
    line-height: 1.15;
  }

  .home-summary span,
  .home-status-pill span,
  .home-stock-note span,
  .home-recipe small {
    font-size: clamp(0.55rem, 1.8vh, 0.72rem);
    line-height: 1.12;
  }

  .home-status-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(5px, 1.1vh, 8px);
  }

  .home-status-pill {
    grid-template-columns: clamp(24px, 5.2vh, 34px) 1fr;
    padding: clamp(5px, 1.2vh, 8px);
  }

  .home-status-pill strong,
  .home-stock-note strong {
    font-size: clamp(0.92rem, 3.4vh, 1.24rem);
  }

  .home-recipes {
    min-height: 0;
    gap: clamp(6px, 1.2vh, 9px);
  }

  .home-recipe {
    min-height: 0;
    grid-template-columns: clamp(42px, 9vh, 56px) 1fr auto;
    gap: clamp(6px, 1.2vh, 9px);
    padding: clamp(6px, 1.3vh, 9px);
  }

  .home-recipe strong {
    font-size: clamp(0.82rem, 2.8vh, 1.05rem);
    line-height: 1.06;
  }

  .home-recipe em,
  .home-actions button {
    min-width: clamp(48px, 9.5vh, 62px);
    min-height: clamp(32px, 6.5vh, 40px);
    font-size: clamp(0.72rem, 2.2vh, 0.9rem);
  }

  .home-actions {
    gap: clamp(6px, 1.2vh, 9px);
  }

  .home-actions button {
    border-radius: 10px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .game-menu {
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .menu-barn .game-menu-panel {
    width: min(70vw, calc((100dvh - 10px) * 1212 / 827));
  }

  .barn-visual {
    width: min(70vw, calc((100dvh - 10px) * 1212 / 827));
  }

  .barn-slot.has-image {
    grid-template-columns: 28% 1fr;
    padding: 0.7% 2.2%;
  }

  .barn-slot strong {
    padding: 1px 7px;
    font-size: clamp(0.76rem, 3.1vh, 1.25rem);
  }

  .barn-slot span {
    font-size: clamp(0.82rem, 3.45vh, 1.42rem);
  }

  .barn-slot small {
    font-size: clamp(0.38rem, 1.55vh, 0.55rem);
    line-height: 1.03;
  }

  .barn-feed-label {
    font-size: clamp(0.5rem, 2.1vh, 0.78rem);
    border-radius: 8px;
  }

  .barn-production {
    font-size: clamp(0.38rem, 1.45vh, 0.54rem);
    line-height: 1.02;
  }

  .barn-overlay-tip {
    left: 20.5%;
    right: 8.5%;
    bottom: 8.1%;
    font-size: clamp(0.44rem, 2vh, 0.72rem);
    line-height: 1.08;
  }

  .menu-field .game-menu-panel {
    width: min(58vw, calc((100dvh - 10px) * 1177 / 1019));
  }

  .field-visual {
    width: min(58vw, calc((100dvh - 10px) * 1177 / 1019));
  }

  .field-board {
    top: 13.1%;
    bottom: 4.5%;
    gap: 1.25%;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
  }

  .field-crop-grid {
    gap: 1.05%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .field-crop-card {
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
  }

  .field-crop-card img {
    max-height: clamp(38px, 15vh, 72px);
  }

  .field-crop-card strong {
    font-size: clamp(0.46rem, 1.95vh, 0.66rem);
  }

  .field-crop-card span,
  .field-crop-card small {
    font-size: clamp(0.34rem, 1.55vh, 0.48rem);
    line-height: 1.02;
  }

  .field-supply-strip {
    min-height: clamp(40px, 13vh, 58px);
  }

  .field-quick-actions {
    min-height: clamp(32px, 8vh, 42px);
    gap: 1%;
  }

  .field-quick-actions button {
    grid-template-columns: clamp(24px, 6vh, 34px) minmax(0, 1fr);
    gap: 4px;
    padding: 3px 7px;
    border-radius: 9px;
    font-size: clamp(0.42rem, 1.8vh, 0.6rem);
  }

  .field-quick-actions img {
    height: clamp(22px, 5.6vh, 32px);
  }

  .field-supply-strip div {
    grid-template-columns: clamp(26px, 7.6vh, 38px) 1fr;
    gap: 0 4px;
    padding: 4px 6px;
    border-radius: 9px;
  }

  .field-supply-strip img {
    max-height: 38px;
  }

  .field-supply-strip strong {
    font-size: clamp(0.62rem, 2.8vh, 0.94rem);
  }

  .field-supply-strip span {
    font-size: clamp(0.36rem, 1.55vh, 0.5rem);
  }

  .field-board-tip {
    min-height: clamp(31px, 9vh, 43px);
    padding-inline: 3.2%;
    font-size: clamp(0.48rem, 2.05vh, 0.68rem);
    line-height: 1.06;
  }

  .menu-player .game-menu-panel {
    width: min(72vw, calc((100dvh - 10px) * 1582 / 936));
  }

  .player-profile {
    padding: 4.5% 4% 3.2%;
    grid-template-columns: 27.5% 1fr;
    gap: 1.6%;
  }

  .player-side {
    gap: 0.7% 2.4%;
  }

  .player-avatar {
    width: clamp(30px, 9vh, 44px);
    border-width: 2px;
  }

  .player-identity strong {
    font-size: clamp(0.54rem, 2.55vh, 0.78rem);
  }

  .player-identity span,
  .player-identity small,
  .player-bio,
  .player-stat span,
  .player-side-menu button {
    font-size: clamp(0.38rem, 1.8vh, 0.54rem);
    line-height: 1.02;
  }

  .player-bio {
    min-height: clamp(17px, 4.5vh, 24px);
    padding: 2px 5px;
    border-radius: 7px;
  }

  .player-stat {
    min-height: clamp(20px, 5.4vh, 29px);
    grid-template-columns: clamp(17px, 4.3vh, 24px) 1fr auto;
    gap: 4px;
    padding: 2px 5px;
    border-radius: 8px;
  }

  .player-stat strong {
    font-size: clamp(0.58rem, 2.6vh, 0.82rem);
  }

  .player-side-menu {
    border-radius: 8px;
  }

  .player-side-menu button {
    min-height: clamp(17px, 4.5vh, 24px);
    padding-inline: 5px;
  }

  .player-tabs {
    min-height: clamp(23px, 5.9vh, 31px);
  }

  .player-tabs button {
    border-radius: 7px 7px 0 0;
    font-size: clamp(0.42rem, 2.05vh, 0.62rem);
  }

  .player-content {
    padding: 4px;
    border-radius: 0 0 8px 8px;
  }

  .friend-list > div {
    grid-template-columns: clamp(24px, 6.4vh, 34px) minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px 5px;
    border-radius: 7px;
  }

  .friend-list > div button {
    min-width: clamp(52px, 13vh, 72px);
    min-height: clamp(24px, 6vh, 32px);
    padding: 0 5px;
    font-size: clamp(0.42rem, 1.9vh, 0.58rem);
  }

  .menu-achievements .game-menu-panel {
    width: min(36vw, calc((100dvh - 8px) * 1094 / 1410));
    max-height: calc(100dvh - 8px);
  }

  .menu-achievements .round-command {
    width: clamp(24px, 7.2vh, 34px);
    height: clamp(24px, 7.2vh, 34px);
  }

  .achievement-score strong {
    font-size: clamp(0.58rem, 2.8vh, 0.88rem);
  }

  .achievement-chests strong {
    font-size: clamp(0.34rem, 1.65vh, 0.48rem);
  }

  .achievement-chests img {
    width: clamp(20px, 6.5vh, 32px);
  }

  .achievement-next {
    font-size: clamp(0.34rem, 1.55vh, 0.48rem);
  }

  .achievement-tabs button {
    border-width: 1px;
    border-radius: 6px 6px 0 0;
    font-size: clamp(0.3rem, 1.55vh, 0.46rem);
    line-height: 1;
  }

  .achievement-tabs button span {
    margin-right: 1px;
  }

  .achievement-row {
    grid-template-columns: clamp(24px, 7.4vh, 36px) minmax(0, 1fr) clamp(28px, 7.8vh, 40px) clamp(45px, 12vh, 64px);
    gap: 3px;
    padding: 2px 4px;
    border-width: 1px;
    border-radius: 7px;
  }

  .achievement-row > img {
    max-height: clamp(24px, 7.4vh, 36px);
  }

  .achievement-copy strong {
    font-size: clamp(0.34rem, 1.8vh, 0.52rem);
  }

  .achievement-copy span {
    font-size: clamp(0.3rem, 1.45vh, 0.42rem);
  }

  .achievement-copy i {
    height: clamp(5px, 1.35vh, 8px);
    margin-top: 1px;
  }

  .achievement-copy small {
    font-size: clamp(0.28rem, 1.2vh, 0.36rem);
  }

  .achievement-value img {
    width: clamp(16px, 5vh, 24px);
  }

  .achievement-value strong {
    font-size: clamp(0.34rem, 1.7vh, 0.5rem);
  }

  .achievement-row button {
    height: clamp(21px, 6vh, 30px);
    border-radius: 6px;
    font-size: clamp(0.31rem, 1.55vh, 0.46rem);
    line-height: 1;
  }
}

@media (max-width: 620px) {
  .workshop-grid {
    grid-template-columns: 1fr;
  }

  .machine-card {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .machine-image-placeholder {
    min-height: 92px;
  }

  .farm-stage {
    height: 100%;
    background-size: auto 100%;
    background-position: center;
  }

  .status-grid {
    width: min(55vw, 210px);
  }

  .metric strong {
    font-size: 0.7rem;
  }

  .tool-list {
    grid-auto-columns: 104px;
    grid-template-columns: repeat(3, 104px);
  }

  .tile {
    width: 56px;
    min-height: 56px;
  }

  .tile:not(.locked):not([data-role="menu"]) {
    width: 78px;
    min-height: 58px;
  }

  .tile[data-role="menu"] {
    width: 70px;
    min-height: 70px;
  }

  .growth-badge {
    width: 62px;
    height: 9px;
  }

  .tools-panel {
    max-height: 28dvh;
  }

  .quest-card {
    width: min(290px, 62vw);
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 8px;
  }

  .quest-card strong {
    font-size: 0.82rem;
  }

  .play-level {
    width: clamp(68px, 14vw, 82px);
    height: clamp(68px, 14vw, 82px);
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .quick-menu {
    inset: 0;
  }

  .quick-menu-button {
    width: clamp(42px, 11vw, 51px);
  }

  .puzzle-panel {
    width: min(94vw, 520px);
  }

  .game-menu-panel {
    width: min(94vw, 560px);
  }

  .menu-orders .game-menu-panel,
  .menu-storage .game-menu-panel,
  .menu-workshop .game-menu-panel {
    width: min(94vw, 560px);
    max-height: calc(100dvh - 12px);
    overflow: auto;
  }

  .utility-menu,
  .workshop-menu {
    min-height: min(72dvh, 470px);
    max-height: calc(100dvh - 82px);
  }

  .orders-grid {
    grid-template-columns: 1fr;
  }

  .storage-shelf > div {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
  }

  .storage-shelf.products > div {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  .menu-barn .game-menu-panel {
    width: min(96vw, 760px, calc(92dvh * 1212 / 827));
  }

  .menu-coop .game-menu-panel {
    width: min(96vw, 760px, calc(92dvh * 1251 / 989));
  }

  .menu-home .game-menu-panel {
    width: min(96vw, 760px);
  }

  .menu-field .game-menu-panel {
    width: min(96vw, 760px, calc(92dvh * 1177 / 1019));
  }

  .menu-market .game-menu-panel {
    width: min(96vw, 760px, calc(92dvh * 1114 / 1086));
  }

  .menu-lake .game-menu-panel {
    width: min(96vw, 820px, calc(92dvh * 1512 / 1190));
  }

  .menu-player .game-menu-panel {
    width: min(96vw, 820px, calc(92dvh * 1582 / 936));
  }

  .menu-achievements .game-menu-panel {
    width: min(88vw, calc(98dvh * 1094 / 1410), 620px);
    max-height: calc(100dvh - 6px);
  }

  .menu-quests .game-menu-panel {
    width: min(88vw, calc(98dvh * 1088 / 1445), 620px);
    max-height: calc(100dvh - 6px);
  }

  .menu-barn .game-menu-head {
    right: 1.8%;
    top: 1.8%;
  }

  .menu-coop .game-menu-head {
    right: 1.8%;
    top: 1.8%;
  }

  .menu-home .game-menu-head {
    right: 3%;
    top: 3.2%;
  }

  .menu-field .game-menu-head {
    right: 3.2%;
    top: 5%;
  }

  .menu-market .game-menu-head {
    right: 5.4%;
    top: 4.4%;
  }

  .barn-visual {
    width: min(96vw, 760px);
  }

  .coop-visual {
    width: min(96vw, 760px);
  }

  .profile-visual {
    width: min(96vw, 760px);
  }

  .home-menu {
    width: min(96vw, 760px, calc(92dvh * 1164 / 950));
    min-height: 0;
    max-height: none;
    aspect-ratio: 1164 / 950;
    display: block;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .home-dashboard {
    left: 6.4%;
    right: 6.4%;
    top: 14.6%;
    bottom: 5.1%;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 6px;
  }

  .home-summary {
    grid-template-columns: 46px 1fr;
  }

  .home-status-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .home-status-pill {
    grid-template-columns: 26px 1fr;
    padding: 5px;
  }

  .home-status-pill span,
  .home-stock-note span,
  .home-recipe small {
    font-size: 0.54rem;
  }

  .home-status-pill strong,
  .home-stock-note strong {
    font-size: 0.92rem;
  }

  .home-recipe {
    min-height: 0;
    grid-template-columns: 42px 1fr auto;
    padding: 6px;
  }

  .field-visual {
    width: min(96vw, 760px);
  }

  .market-visual {
    width: min(96vw, 760px);
  }

  .player-profile {
    width: 100%;
  }

  .player-avatar {
    width: min(9vw, 86px);
  }

  .barn-overlay-value {
    border-width: 2px;
  }

  .barn-overlay-value span {
    font-size: clamp(0.95rem, 3vw, 1.8rem);
  }

  .barn-overlay-value small {
    font-size: clamp(0.46rem, 1.3vw, 0.68rem);
  }

  .coop-overlay-value {
    border-width: 2px;
  }

  .coop-overlay-value span {
    font-size: clamp(0.86rem, 2.7vw, 1.55rem);
  }

  .coop-overlay-value small {
    font-size: clamp(0.42rem, 1.1vw, 0.62rem);
  }

  .profile-overlay-value span {
    font-size: clamp(0.92rem, 2.6vw, 1.6rem);
  }

  .profile-quest-title {
    font-size: clamp(0.66rem, 1.8vw, 1rem);
  }

  .field-overlay-value span {
    font-size: clamp(0.86rem, 2.3vw, 1.55rem);
  }

  .field-status {
    font-size: clamp(0.62rem, 1.6vw, 0.92rem);
  }

  .market-overlay-value span {
    font-size: clamp(0.58rem, 1.5vw, 0.92rem);
  }

  .menu-grid,
  .menu-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .menu-action.compact {
    min-height: 42px;
    font-size: 0.78rem;
  }

  .match-board {
    gap: 4px;
  }
}

@media (orientation: landscape) and (max-height: 720px) {
  .market-board {
    gap: clamp(3px, 0.9vh, 6px);
    padding: clamp(3px, 0.8vh, 5px);
  }

  .market-wallet {
    min-height: clamp(32px, 7.5vh, 43px);
    padding-block: 3px;
  }

  .market-wallet img {
    height: clamp(27px, 7vh, 38px);
  }

  .market-tabs button {
    min-height: clamp(29px, 6.4vh, 37px);
    line-height: 1.06;
  }

  .market-shelf {
    padding: clamp(4px, 1vh, 7px);
    gap: 4px;
  }

  .market-grid {
    gap: 4px;
  }

  .market-card {
    min-height: clamp(35px, 8vh, 48px);
    padding: 3px 5px;
  }

  .market-wide-actions {
    min-height: clamp(34px, 8vh, 46px);
  }

  .market-dialog {
    top: 50%;
    min-height: 0;
    max-height: 86%;
    gap: clamp(4px, 1vh, 8px);
    overflow-y: auto;
  }

  .game-alert-stack {
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, calc(env(safe-area-inset-bottom) + 4px));
    width: min(385px, calc(100vw - 16px));
    gap: 6px;
    padding: 4px;
  }

  .supply-notice-card {
    min-height: 79px;
    grid-template-columns: clamp(47px, 10.8vh, 61px) minmax(0, 1fr) auto;
    gap: 3px 8px;
    padding: 6px 9px 7px;
  }

  .supply-notice-card img {
    height: clamp(45px, 10.8vh, 58px);
  }

  .activity-notice-card {
    min-height: 67px;
    grid-template-columns: 49px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px;
  }

  .activity-notice-card img {
    width: 48px;
    height: 48px;
  }

  .activity-notice-open {
    min-height: 31px;
    min-width: 61px;
  }
}

@media (max-width: 560px) {
  .market-tabs button {
    font-size: 0.54rem;
  }

  .market-shelf header span {
    display: none;
  }

  .market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supply-notice-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .supply-notice-badge {
    grid-column: 2;
  }

  .supply-notice-buy {
    grid-column: 1 / -1;
    width: 100%;
  }

  .activity-notice-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .activity-notice-open {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.game-menu.open.menu-barn .game-menu-panel,
.game-menu.open.menu-coop .game-menu-panel,
.game-menu.open.menu-field .game-menu-panel,
.game-menu.open.menu-home .game-menu-panel,
.game-menu.open.menu-market .game-menu-panel,
.game-menu.open.menu-lake .game-menu-panel,
.game-menu.open.menu-player .game-menu-panel,
.game-menu.open.menu-premium .game-menu-panel {
  max-height: none !important;
}

.game-menu.open.menu-barn .game-menu-panel,
.game-menu.open.menu-barn .barn-visual {
  width: 920px !important;
}

.game-menu.open.menu-coop .game-menu-panel,
.game-menu.open.menu-coop .coop-visual {
  width: 920px !important;
}

.game-menu.open.menu-field .game-menu-panel,
.game-menu.open.menu-field .field-visual {
  width: 920px !important;
}

.game-menu.open.menu-home .game-menu-panel,
.game-menu.open.menu-home .home-menu {
  width: 900px !important;
}

.game-menu.open.menu-market .game-menu-panel,
.game-menu.open.menu-market .market-visual {
  width: 900px !important;
}

.game-menu.open.menu-premium .game-menu-panel {
  width: 900px !important;
}

.game-menu.open.menu-lake .game-menu-panel,
.game-menu.open.menu-lake .lake-menu {
  width: 1100px !important;
}

.game-menu.open.menu-player .game-menu-panel {
  width: 1080px !important;
}

@media (orientation: landscape) and (max-height: 560px) {
  .game-menu {
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  }

  .game-menu.open.menu-achievements .game-menu-panel,
  .game-menu.open.menu-quests .game-menu-panel {
    width: min(96vw, 980px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border: 4px solid #a76521 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffe9b2, #f2bf63) !important;
    box-shadow: 0 18px 42px rgba(45, 25, 8, 0.38), inset 0 0 0 3px rgba(255, 250, 218, 0.7) !important;
    overflow: hidden !important;
  }

  .game-menu.open.menu-achievements .game-menu-head,
  .game-menu.open.menu-quests .game-menu-head {
    right: 8px !important;
    top: 8px !important;
    z-index: 220 !important;
  }

  .game-menu.open.menu-achievements .round-command,
  .game-menu.open.menu-quests .round-command {
    width: 42px !important;
    height: 42px !important;
  }

  .achievements-menu,
  .quests-menu {
    height: 100% !important;
    background: none !important;
    overflow: hidden !important;
  }

  .achievements-menu::before,
  .quests-menu::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(172, 103, 30, 0.34);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 248, 220, 0.72), rgba(255, 217, 139, 0.44));
    pointer-events: none;
  }

  .achievement-score {
    left: 18px !important;
    top: 18px !important;
    width: 130px !important;
    height: 72px !important;
    padding: 0 !important;
    place-content: center !important;
    border-radius: 12px;
    background: rgba(255, 234, 167, 0.82);
  }

  .achievement-score strong {
    font-size: 1.55rem !important;
  }

  .achievement-road {
    left: 168px !important;
    right: 62px !important;
    top: 14px !important;
    height: 80px !important;
    gap: 4px !important;
  }

  .achievement-chests img {
    width: 44px !important;
  }

  .achievement-chests strong,
  .achievement-next {
    font-size: 0.68rem !important;
  }

  .achievement-tabs {
    left: 18px !important;
    right: 18px !important;
    top: 104px !important;
    height: 42px !important;
    gap: 6px !important;
  }

  .achievement-tabs button {
    border-radius: 9px !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
  }

  .achievement-rows {
    left: 18px !important;
    right: 18px !important;
    top: 156px !important;
    bottom: 14px !important;
    grid-auto-rows: 64px !important;
    gap: 7px !important;
  }

  .achievement-row {
    grid-template-columns: 54px minmax(0, 1fr) 58px 112px !important;
    gap: 8px !important;
    padding: 6px 9px !important;
    border-radius: 12px !important;
  }

  .achievement-row > img {
    max-height: 52px !important;
  }

  .achievement-copy strong {
    font-size: 0.9rem !important;
  }

  .achievement-copy span {
    font-size: 0.68rem !important;
  }

  .achievement-copy i {
    height: 10px !important;
    margin-top: 4px !important;
  }

  .achievement-value img {
    width: 30px !important;
  }

  .achievement-value strong {
    font-size: 0.8rem !important;
  }

  .achievement-row button {
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  .quest-bonus {
    left: 20px !important;
    right: 64px !important;
    top: 16px !important;
    height: 48px !important;
    justify-content: flex-start !important;
    font-size: 0.82rem !important;
  }

  .quest-bonus img {
    height: 34px !important;
  }

  .daily-quest-rows {
    left: 18px !important;
    right: 18px !important;
    top: 76px !important;
    bottom: 16px !important;
    grid-auto-rows: 64px !important;
    gap: 7px !important;
  }

  .daily-quest-row {
    grid-template-columns: 54px minmax(0, 1fr) 58px 110px !important;
    gap: 8px !important;
    padding: 6px 9px !important;
    border-radius: 12px !important;
  }

  .daily-quest-row > img {
    max-height: 52px !important;
  }

  .daily-quest-copy strong {
    font-size: 0.9rem !important;
  }

  .daily-quest-copy span {
    font-size: 0.68rem !important;
  }

  .daily-quest-copy i {
    height: 10px !important;
  }

  .daily-quest-reward img {
    width: 30px !important;
  }

  .daily-quest-reward strong {
    font-size: 0.8rem !important;
  }

  .daily-quest-row button {
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  .player-profile {
    padding: 4.8% 4.4% 3.6% !important;
    grid-template-columns: 31% 1fr !important;
    gap: 2% !important;
  }

  .player-tabs button {
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }

  .friend-list > div {
    grid-template-columns: 58px minmax(0, 1fr) 140px !important;
    gap: 10px !important;
  }

  .friend-list > div button {
    min-width: 128px !important;
    font-size: 0.95rem !important;
    line-height: 1.05 !important;
  }

  .premium-menu {
    max-height: none;
    gap: 8px;
  }

  .premium-hero {
    min-height: 92px;
    padding: 12px 14px;
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  .premium-hero strong {
    font-size: 1.42rem;
  }

  .premium-hero img {
    height: 78px;
  }

  .premium-wallets div {
    min-height: 48px;
    grid-template-columns: 34px 1fr;
    padding: 6px 9px;
  }

  .premium-wallets img {
    width: 32px;
    height: 32px;
  }

  .premium-card,
  .reward-card {
    min-height: 80px;
    grid-template-columns: 48px minmax(0, 1fr) 78px;
    gap: 1px 7px;
    padding: 7px;
  }

  .premium-card img,
  .reward-card img {
    width: 46px;
    height: 46px;
  }

  .premium-card span,
  .reward-card span {
    font-size: 0.76rem;
  }

  .premium-card strong,
  .reward-card strong {
    font-size: 0.84rem;
  }

  .premium-card small,
  .reward-card small {
    font-size: 0.58rem;
  }

  .premium-card em,
  .reward-card em {
    min-width: 72px;
    padding: 0 6px;
    font-size: 0.68rem;
  }
}

/* Mobile orientation guidance when the browser cannot turn the display. */
.orientation-help[hidden] {
  display: none !important;
}

.orientation-help {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  background: rgba(25, 49, 22, 0.92);
  color: #fff3d7;
}

.orientation-card {
  width: min(100%, 390px);
  padding: 26px 22px;
  border: 2px solid #e1b666;
  border-radius: 24px;
  background: #365d2d;
  text-align: center;
}

.orientation-phone {
  display: block;
  font-size: 72px;
  line-height: 1;
  color: #ffd876;
}

.orientation-card h2 {
  margin: 18px 0 10px;
  font-size: 1.5rem;
}

.orientation-card p {
  margin: 0 0 20px;
  line-height: 1.55;
}

.orientation-card button {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: bold;
  color: #432911;
  background: #ffd876;
  cursor: pointer;
}

.orientation-card .orientation-continue {
  margin-top: 10px;
  color: #fff3d7;
  background: transparent;
  border: 1px solid #b8caa4;
}