/* ══════════════════════════════════════════════════════════════════════════
   Noor — экспериментальная тема «Амбара» (ТОЛЬКО внешний вид).
   Функционал не трогаем: страница barn-experimental.html грузит тот же cabinet.js,
   этот файл лишь переопределяет оформление (цвета/шрифты/скругления/кнопки/секции)
   в стиле референса Noor. Всё под body.noor — не влияет на прочие страницы.
   Палитра совпадает с брендом: лес.зелёный + пшеничное золото + крем.
   ══════════════════════════════════════════════════════════════════════════ */
body.noor{
  --n-cream:#f4ecdb; --n-cream2:#eadfc7;
  --n-surface:#fffdf7; --n-surface2:#fbf5e8;
  --n-green:#274e39; --n-green-d:#1d3c2c; --n-green-soft:#356048;
  --n-gold:#b28a3c; --n-gold-l:#d6ba7e; --n-gold-d:#946f30;   /* приглушённое «антик»-золото */
  --n-ink:#233127; --n-muted:#8b9184;
  --n-line:rgba(178,138,60,.22); --n-line-soft:rgba(120,95,40,.09);
  --n-serif:'Alegreya', Georgia, 'Times New Roman', serif;
  --n-shadow:0 9px 22px rgba(45,60,40,.09);      /* мягче/легче */
  --n-shadow-sm:0 5px 13px rgba(45,60,40,.06);
  background:
    radial-gradient(1100px 460px at 50% -8%, rgba(39,78,57,.10), transparent 60%),
    radial-gradient(760px 380px at 108% 4%, rgba(198,154,76,.14), transparent 55%),
    linear-gradient(180deg,#f7f0e1 0%, #f2e9d6 100%) fixed;
  color:var(--n-ink);
}

/* ── контейнер: мобильный, по центру ── */
body.noor .wrap{ max-width:1080px; padding:24px 24px 70px; }

/* ── шапка ── */
body.noor .topbar{
  background:linear-gradient(180deg,#fffdf7,#f5ecda);
  border-bottom:1px solid var(--n-line);
  box-shadow:0 2px 14px rgba(60,45,15,.05);
}
body.noor .topbar .brand{ font-family:var(--n-serif); font-weight:800; letter-spacing:.3px; color:var(--n-green); }
body.noor .topbar .brand span{ color:var(--n-gold-d); }
body.noor .topbar .badge{
  background:linear-gradient(135deg,var(--n-green),var(--n-green-soft)); color:var(--n-gold-l);
  border:0; border-radius:999px; padding:5px 14px; font-family:var(--n-serif); font-weight:700; letter-spacing:.4px;
  box-shadow:0 4px 12px rgba(39,78,57,.22);
}
body.noor .topbar .logout,
body.noor .topbar .farm-quick{ border-radius:999px !important; }
body.noor .user-menu{ border-radius:18px; border:1px solid var(--n-line); box-shadow:var(--n-shadow); }

/* ── секция = ТЁМНО-ЗЕЛЁНАЯ карточка-hero (как «Streak»/«Ayah» на референсе) ── */
body.noor .wrap > .section{
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(226,197,132,.10), transparent 55%),
    linear-gradient(160deg, var(--n-green-soft) 0%, var(--n-green) 46%, var(--n-green-d) 100%);
  border:1px solid rgba(214,186,126,.24);
  border-radius:20px;
  box-shadow:0 11px 24px rgba(24,48,34,.16);
  padding:18px 18px 20px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
  color:#f3e9d0;                       /* дефолтный текст прямо на зелёном — светлый */
}
/* тонкая золотая «нить» сверху карточки-секции */
body.noor .wrap > .section::before{
  content:''; position:absolute; left:22px; right:22px; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--n-gold-l), transparent); opacity:.4;
}
body.noor .sec-head{ gap:12px; margin-bottom:16px; }
/* ДЕФОЛТ (светлые/вложенные секции): зелёный медальон + зелёный серифный заголовок */
body.noor .sec-head .ic{
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg,var(--n-green),var(--n-green-soft));
  color:#f0dfae; box-shadow:0 5px 12px rgba(39,78,57,.20), inset 0 0 0 1px rgba(214,186,126,.32);
  font-size:20px;
}
body.noor .sec-title{ font-family:var(--n-serif); color:var(--n-green); font-weight:800; font-size:23px; letter-spacing:.2px; }
body.noor .sec-sub{ color:var(--n-muted); font-size:13px; }
/* ВНУТРИ зелёной секции-hero — кремовый заголовок и светлый медальон ТОЛЬКО у ЕЁ СОБСТВЕННОЙ шапки
   (не у вложенных под-секций, у них своя светлая подложка → там остаётся зелёный заголовок) */
body.noor .wrap > .section > .sec-head .ic{
  background:linear-gradient(135deg,#f6ecd1,#e7d3a2); color:var(--n-green);
  box-shadow:0 5px 12px rgba(24,48,34,.20), inset 0 0 0 1px rgba(214,186,126,.5);
}
body.noor .wrap > .section > .sec-head .sec-title{ color:#f6ecd0; }
body.noor .wrap > .section > .sec-head .sec-sub{ color:rgba(243,233,208,.72); }
/* вложенные под-секции/панели (светлая подложка) — тёмный текст, не наследуют светлый от зелёной секции */
body.noor .wrap > .section .section,
body.noor .wrap > .section .subpanel,
body.noor .wrap > .section .animal-panel{ color:var(--n-ink); }

/* текст, лежащий ПРЯМО на зелёном (не внутри светлой карточки) — светлый */
body.noor .wrap > .section > .muted{ color:rgba(243,233,208,.78); }
/* блок «Начать партию»/старта — светлая под-карточка (чипы читаются, а не зелёный-на-зелёном) */
body.noor .rye-start-block{
  background:var(--n-surface); border:1px solid rgba(214,186,126,.26); border-radius:15px;
  padding:12px 14px; box-shadow:0 6px 15px rgba(24,48,34,.13); color:var(--n-ink); margin-top:12px;
}
body.noor .rye-start-block .muted{ color:var(--n-muted); }

/* светлые вложенные карточки на зелёном фоне — тёмный текст ВНУТРИ них (перебивает светлый по порядку) */
body.noor .ware-card, body.noor .rye-batch, body.noor .card,
body.noor .grass-card{ color:var(--n-ink); }
body.noor .ware-card .muted, body.noor .rye-batch .muted,
body.noor .card .muted, body.noor .grass-card .muted{ color:var(--n-muted); }
/* приподнять светлые карточки над зелёным */
body.noor .wrap > .section .ware-card,
body.noor .wrap > .section .rye-batch,
body.noor .wrap > .section .card{ box-shadow:0 6px 15px rgba(24,48,34,.14); border-color:rgba(214,186,126,.20); }

/* карточка животного: без белой подложки — инфо сразу на светло-зелёной панели
   (убирает двойные отступы по периметру, экономит место, особенно на мобиле) */
body.noor .animal-panel .animal-card{
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
body.noor .animal-panel .animal-card > .info{ padding:0 !important; }

/* ── обычные карточки/варекарды → мягкие «пилюли»-плитки ── */
body.noor .card,
body.noor .ware-card{
  background:var(--n-surface);
  border:1px solid var(--n-line-soft);
  border-radius:16px;
  box-shadow:var(--n-shadow-sm);
  transition:transform .18s var(--ease-out,ease), box-shadow .18s;
}
body.noor .ware-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(60,45,15,.12); border-color:var(--n-line); }
body.noor .ware-name{ font-family:var(--n-serif); font-weight:700; color:var(--n-green); font-size:16px; }
body.noor .ware-img, body.noor .ware-clickable{ border-radius:16px; }

/* ── кнопки: пилюли, зелёный градиент / золотой контур / тёплый красный ── */
body.noor .btn{ border-radius:999px !important; font-weight:700; letter-spacing:.2px; }
body.noor .btn-primary,
body.noor .btn-play{
  background:linear-gradient(135deg,var(--n-green) 0%, var(--n-green-d) 100%) !important;
  color:#f6eccf !important; border:0 !important;
  box-shadow:0 8px 18px rgba(24,48,34,.30), inset 0 1px 0 rgba(226,197,132,.30), 0 0 0 1.4px rgba(247,237,211,.28) !important;
}
body.noor .btn-primary:hover,
body.noor .btn-play:hover{ filter:brightness(1.06); transform:translateY(-1px); }
body.noor .btn-outline{
  background:var(--n-surface) !important; color:var(--n-green) !important;
  box-shadow:inset 0 0 0 1.5px var(--n-gold) !important;
}
body.noor .btn-outline:hover{ background:#fff7e6 !important; }
body.noor .btn-warn{ background:linear-gradient(135deg,#c8402f,#a5301f) !important; color:#fff !important; }
body.noor .btn-xs{ padding:7px 14px; font-size:12.5px; border-radius:999px !important; }

/* ── проращивание ржи / черви ── */
body.noor .rye-batch{
  border:1px solid var(--n-line); border-radius:18px;
  background:linear-gradient(180deg,#fffdf7,#f8f1e2);
  box-shadow:var(--n-shadow-sm); padding:16px 18px;
}
/* большие серифные «счётчики»: цифра прогресса/биомассы — крупно над баром */
body.noor .rye-batch .rye-progress{ flex-direction:column; align-items:stretch; gap:9px; margin:6px 0 4px; }
body.noor .rye-batch .rye-progress .bar{ order:2; height:11px; }
body.noor .rye-batch .rye-progress .rye-pct{
  order:1; min-width:0; text-align:center;
  font-family:var(--n-serif); font-weight:800; font-size:32px; line-height:1;
  color:var(--n-green); letter-spacing:.4px;
}
/* значения-метрики (собранная биомасса/итоги) — серифом */
body.noor .ware-row .ware-v{ font-family:var(--n-serif); font-weight:800; font-size:18px; color:var(--n-green); }
body.noor .rye-node-dot{ border-color:var(--n-gold); }
body.noor .rye-node.done .rye-node-dot{ background:linear-gradient(135deg,var(--n-green),var(--n-green-soft)); color:var(--n-gold-l); border-color:transparent; }
body.noor .rye-node.current .rye-node-dot{ background:var(--n-gold); color:#fff; border-color:var(--n-gold-l); box-shadow:0 0 0 4px rgba(198,154,76,.22); }
body.noor .rye-node.ready .rye-node-dot{ background:var(--n-green-soft); color:var(--n-gold-l); border-color:var(--n-green); }
body.noor .rye-stage-ic{
  border-radius:13px; background:linear-gradient(135deg,rgba(39,78,57,.10),rgba(178,138,60,.15));
  color:var(--n-green); box-shadow:inset 0 0 0 1px var(--n-line);
}
body.noor .rye-pct{ font-family:var(--n-serif); font-weight:800; color:var(--n-green); font-size:14px; }
body.noor .bar{ height:10px; background:#ece1c8; box-shadow:inset 0 1px 2px rgba(120,95,40,.12); }
body.noor .bar > i{ background:linear-gradient(90deg,var(--n-green-soft),var(--n-green)); }
body.noor .bar.ripe > i{ background:linear-gradient(90deg,var(--n-gold-l),var(--n-gold)); }
body.noor .statebadge{ font-family:var(--n-serif); font-weight:700; }
body.noor .statebadge.st-active{ background:rgba(39,78,57,.12); color:var(--n-green); }

/* ── кнопка «Вход» на гейте — ярче и заметнее ── */
body.noor #gate .btn-primary{
  background:linear-gradient(135deg,#3aa564 0%, #2b8049 60%, #256b41 100%) !important;
  color:#fff !important; border:0 !important;
  font-size:17px; padding:15px 18px; letter-spacing:.4px;
  box-shadow:0 12px 28px rgba(46,140,84,.42), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.noor #gate .btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
body.noor #gate .btn-primary .btn-label i{ font-size:18px; }

/* ── чипы выбора лотка/ящика ── */
body.noor .rye-tray-chip{ border-radius:13px; }
body.noor .rye-tray-chip .rtc-size{ font-family:var(--n-serif); color:var(--n-green); }
body.noor .rye-tray-chip.free{ background:rgba(39,78,57,.06); border-color:var(--n-gold); }
body.noor .rye-tray-chip.free .rtc-free{ color:var(--n-green-soft); }
body.noor .rye-tray-chip.on{ background:linear-gradient(135deg,var(--n-green),var(--n-green-soft)); border-color:transparent; box-shadow:0 0 0 4px rgba(198,154,76,.20); }
body.noor .rye-tray-chip.on .rtc-size,
body.noor .rye-tray-chip.on .rtc-free{ color:var(--n-gold-l); }

/* мелочи */
body.noor .muted{ color:var(--n-muted); }
body.noor .worm-compost-row{ gap:8px; }
body.noor .worm-compost-row select{ border-radius:12px; border:1px solid var(--n-line); background:var(--n-surface); }

/* ── плавающая нижняя таб-панель (как на референсе Noor) ── */
body.noor .noor-tabbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom, 0px)); z-index:50;
  width:min(560px, calc(100% - 24px));
  display:flex; gap:2px; padding:8px;
  background:linear-gradient(180deg,#fffdf7,#f4ebd8);
  border:1px solid rgba(214,186,126,.35);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(24,48,34,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
body.noor .ntab{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px; border-radius:14px; text-decoration:none;
  color:var(--n-muted); font-size:11px; font-weight:600; letter-spacing:.1px;
  transition:background .15s, color .15s, transform .1s;
}
body.noor .ntab i{ font-size:21px; line-height:1; }
body.noor .ntab span{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.noor .ntab:hover{ color:var(--n-green); background:rgba(39,78,57,.06); }
body.noor .ntab:active{ transform:scale(.94); }
body.noor .ntab.is-active{
  color:var(--n-green);
  background:linear-gradient(135deg,rgba(39,78,57,.13),rgba(178,138,60,.15));
  box-shadow:inset 0 0 0 1px rgba(214,186,126,.4);
}
body.noor .ntab.is-active i{ color:var(--n-green); }
body.noor .ntab.is-active span{ font-family:var(--n-serif); font-weight:800; }
/* запас снизу, чтобы контент не прятался под плавающей панелью */
body.noor .wrap{ padding-bottom:104px; }

/* тёмная тема — Noor остаётся светлым «пергаментным» (переопределяем возможный dt) */
body.noor .section, body.noor .card, body.noor .ware-card, body.noor .rye-batch{ color:var(--n-ink); }

/* ══ Огород (garden.html): панели «Построить»/«Хранилище» в стиле Noor-секций ══
   garden.js рисует свою разметку (.garden-panel/.gb-card/…) со светлыми цветами;
   здесь переопределяем гамму под Noor (тёмно-зелёная секция + кремовые карточки + золото).
   Специфичность body.noor .garden-* бьёт инжектируемые garden.js правила .garden-*. */
body.noor .garden-panel,
body.noor .garden-storage{
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(226,197,132,.10), transparent 55%),
    linear-gradient(160deg, var(--n-green-soft) 0%, var(--n-green) 46%, var(--n-green-d) 100%);
  border:1px solid rgba(214,186,126,.24);
  border-radius:20px; box-shadow:0 11px 24px rgba(24,48,34,.16);
  padding:18px; color:#f3e9d0; position:relative; overflow:hidden;
}
body.noor .garden-storage{ margin-top:16px; }
body.noor .garden-panel::before,
body.noor .garden-storage::before{
  content:''; position:absolute; left:22px; right:22px; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--n-gold-l), transparent); opacity:.4;
}
/* заголовки блоков → кремовый сериф, иконка золотом */
body.noor .gb-title, body.noor .gs-title{
  font-family:var(--n-serif); color:#f6ecd0; font-weight:800; font-size:20px; letter-spacing:.2px;
}
body.noor .gb-title i, body.noor .gs-title i{ color:var(--n-gold-l); }
/* текст прямо на зелёном — светлый */
body.noor .garden-panel .gp-empty,
body.noor .garden-panel .gp-grow,
body.noor .garden-panel .g-edithint,
body.noor .garden-storage .gs-empty{ color:rgba(243,233,208,.82); }
/* карточки/дровер → кремовые (как ware-card) с тёмным текстом */
body.noor .gb-card, body.noor .gs-card, body.noor .g-drawer{
  background:var(--n-surface); border:1px solid rgba(214,186,126,.20);
  border-radius:16px; box-shadow:0 6px 15px rgba(24,48,34,.14); color:var(--n-ink);
}
body.noor .gb-card.on{ border-color:var(--n-gold); box-shadow:0 0 0 2px var(--n-gold) inset, 0 6px 15px rgba(24,48,34,.14); }
body.noor .gb-name, body.noor .gs-name{ font-family:var(--n-serif); color:var(--n-green); font-weight:700; }
body.noor .gb-name i{ color:var(--n-gold-d); }
body.noor .gb-meta, body.noor .gs-kg{ color:var(--n-muted); }
body.noor .gb-prev{ background:var(--n-surface2); border-color:rgba(214,186,126,.30); }
body.noor .gb-prev-ph{ color:var(--n-gold-l); }
/* кнопки → пилюли Noor (зелёный градиент, «Собрать урожая»/«прополоть» — тёплый красный, «Скормить» — золото) */
body.noor .gb-btn, body.noor .gp-btn, body.noor .gs-feed{
  border-radius:999px !important; border:0 !important; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(135deg,var(--n-green) 0%, var(--n-green-d) 100%) !important; color:#f6eccf !important;
  box-shadow:0 6px 14px rgba(24,48,34,.28), inset 0 1px 0 rgba(226,197,132,.28) !important;
}
body.noor .gb-btn:hover, body.noor .gp-btn:hover, body.noor .gs-feed:hover{ filter:brightness(1.06); transform:translateY(-1px); }
body.noor .gb-btn:disabled{ opacity:.5; }
body.noor .gp-btn.gp-harvest, body.noor .gp-btn.gp-weed{ background:linear-gradient(135deg,#c8402f,#a5301f) !important; color:#fff !important; }
body.noor .gs-feed{ background:linear-gradient(135deg,var(--n-gold),var(--n-gold-d)) !important; color:#2a2013 !important; }
/* «Изменить/Готово», mini-кнопки → светлые пилюли с золотым контуром */
body.noor .g-editbtn, body.noor .g-mini{
  border-radius:999px !important; background:var(--n-surface) !important; color:var(--n-green) !important;
  border:0 !important; box-shadow:inset 0 0 0 1.4px var(--n-gold) !important;
}
body.noor .g-mini-danger{ color:var(--c-action-warm,#c8402f) !important; box-shadow:inset 0 0 0 1.4px #c8402f !important; }
body.noor .g-yard-bottom{ border-top-color:rgba(214,186,126,.30); }
/* чипы культур для посадки — кремовые, цена золотом */
body.noor .gp-crop{ background:var(--n-surface) !important; border-color:rgba(214,186,126,.28) !important; color:var(--n-ink) !important; }
body.noor .gp-seed{ color:var(--n-gold-d) !important; }
body.noor .gp-title{ font-family:var(--n-serif); color:var(--n-green); }