* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --wood-dark: #2b1d12;
  --wood: #4a321f;
  --wood-light: #6b4a2b;
  --wood-border: #8a6538;
  --cream: #f0e0c0;
  --gold: #ffd76a;
  --green: #3e6b2b;
  --blue: #2b5a7a;
  --red: #7a3020;
  --purple: #7a4b9a;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #3d2a18 0%, #2b1d12 55%, #1f140b 100%);
  color: var(--cream);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 10px;
}
#app { width: 100%; max-width: 1380px; }

/* ---------- Шапка ---------- */
#hud {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(180deg, #553a22, #4a321f);
  border: 2px solid var(--wood-border); border-radius: 14px;
  padding: 10px 16px; margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.1), 0 4px 14px rgba(0,0,0,.35);
}
#hud-title { font-weight: bold; font-size: 20px; }
.hud-group { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hud-buttons { margin-left: auto; }
.stat {
  font-size: 15px; background: rgba(0,0,0,.25); border-radius: 8px; padding: 5px 10px;
  transition: transform .15s;
}
.stat.pulse { animation: stat-pulse .5s; }
@keyframes stat-pulse { 50% { transform: scale(1.2); } }
#xp-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; }
#xp-bar { width: 90px; height: 10px; background: var(--wood-dark); border-radius: 5px;
  overflow: hidden; border: 1px solid var(--wood-light); }
#xp-fill { height: 100%; background: #7ec84a; width: 0; transition: width .3s; }

/* ---------- Монетка-иконка ---------- */
.coin-ico {
  display: inline-block; width: 20px; height: 20px; vertical-align: -4px;
  background: url("coin.svg") center / contain no-repeat;
}
.coin-ico.big { width: 26px; height: 26px; vertical-align: -6px; }
.row-btn .coin-ico, .order-reward .coin-ico, #btn-new-order .coin-ico {
  width: 14px; height: 14px; vertical-align: -2px;
}
.coin-float {
  display: flex; align-items: center; gap: 4px;
}

/* ---------- Интерактивное обучение ---------- */
#tut-overlay {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
}
#tut-spotlight {
  position: absolute; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 4000px rgba(15, 9, 4, 0.72);
  border: 3px solid var(--gold);
  transition: all .35s ease;
}
#tut-box {
  position: absolute; max-width: 320px; background: linear-gradient(180deg, #553a22, #432c1a);
  border: 2px solid var(--gold); border-radius: 12px; padding: 14px;
  color: var(--cream); font-size: 15px; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); transition: all .35s ease;
}
#tut-box b { color: var(--gold); }
#tut-step { font-size: 12px; color: #d8c090; margin-bottom: 4px; }
#tut-arrow {
  font-size: 30px; color: var(--gold); position: absolute;
  animation: tut-bounce 1s infinite;
}
@keyframes tut-bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }
.tut-pulse { animation: tut-glow 1.2s infinite; }
@keyframes tut-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,215,106,.7); }
  50%     { box-shadow: 0 0 0 10px rgba(255,215,106,0); }
}
.coin-float {
  position: fixed; font-weight: bold; color: var(--gold); font-size: 16px;
  pointer-events: none; animation: coin-up 1.2s ease-out forwards; z-index: 50;
  text-shadow: 0 1px 2px #000;
  display: flex; align-items: center; gap: 4px;
}
@keyframes coin-up {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}

/* ---------- Кнопки ---------- */
button {
  font-family: inherit; cursor: pointer; border: none; border-radius: 10px;
  padding: 10px 14px; font-size: 14px; color: #fff;
  transition: transform .1s, filter .15s;
}
button:hover { filter: brightness(1.15); }
button:active { transform: scale(.96); }
button:disabled { filter: grayscale(.7) brightness(.6); cursor: default; }
.big-green { background: linear-gradient(180deg, #4d8a37, var(--green)); }
.big-blue  { background: linear-gradient(180deg, #3a7aa3, var(--blue)); }
.big-red   { background: linear-gradient(180deg, #9a4230, var(--red)); }
.big-gold  { background: linear-gradient(180deg, #e6b84a, #c9942a); color: #3a2410; font-weight: bold; }
.ad-btn    {
  background: linear-gradient(180deg, #4a4a6b, #35354d); width: 100%;
  border: 1px solid #6b6b9a;
}
.ad-hint { font-size: 12px; color: #d8c090; margin-top: 10px; text-align: center; }

/* ---------- Раскладка ---------- */
#layout { display: grid; grid-template-columns: 320px 1fr 270px; gap: 10px; align-items: start; }

.panel {
  background: linear-gradient(180deg, #503722, #4a321f);
  border: 2px solid var(--wood-border); border-radius: 14px; padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.08), 0 4px 14px rgba(0,0,0,.35);
}
.panel-title { font-size: 16px; margin-bottom: 8px; color: var(--gold); }

/* ---------- Котёл ---------- */
#cauldron-wrap { display: flex; justify-content: center; }
#cauldron {
  font-size: 64px; cursor: pointer; user-select: none; position: relative;
  animation: cauldron-breeze 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(230,162,60,.25));
}
#cauldron:active { transform: scale(.92); }
@keyframes cauldron-breeze {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1.5deg); }
}
#cauldron::before, #cauldron::after {
  content: ""; position: absolute; left: 50%; bottom: 72%;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.35); filter: blur(3px);
  animation: steam 2.6s ease-out infinite;
}
#cauldron::after { animation-delay: 1.3s; left: 38%; }
@keyframes steam {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: .8; }
  100% { transform: translateY(-46px) scale(2.2); opacity: 0; }
}
#energy-bar { height: 16px; background: var(--wood-dark); border-radius: 8px;
  overflow: hidden; margin-top: 8px; border: 1px solid var(--wood-light); }
#energy-fill { height: 100%; background: linear-gradient(90deg, #e6a23c, #ffd76a); width: 100%;
  transition: width .3s; }
#energy-text { text-align: center; font-size: 13px; margin: 4px 0; color: #d8c090; }
#btn-tap { width: 100%; font-size: 15px; padding: 12px; }
#gen-info { margin-top: 8px; font-size: 13px; color: #d8c090; text-align: center; }
#booster-info { margin: 6px 0; font-size: 13px; color: var(--gold); text-align: center; min-height: 18px; }
#btn-ad { margin: 6px 0; }
#btn-daily { width: 100%; }

/* ---------- Вкладки ---------- */
#tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tab { flex: 1; background: var(--wood-dark); color: #d8c090;
  border: 1px solid var(--wood-light); border-radius: 8px 8px 0 0; padding: 8px 4px; font-size: 13px; }
.tab.active { background: var(--wood-light); color: #fff; }
.tab-body { display: none; max-height: 430px; overflow-y: auto; }
.tab-body.active { display: block; }

.upg-row, .shop-row, .quest-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px;
  border-bottom: 1px solid #5d3f24; font-size: 13px;
}
.upg-icon { font-size: 26px; width: 34px; text-align: center; }
.upg-body { flex: 1; }
.upg-name { font-weight: bold; }
.upg-desc { color: #d8c090; font-size: 12px; }
.upg-lvl { color: var(--gold); font-size: 12px; }
.row-btn { background: var(--green); padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.row-btn.gem { background: var(--purple); }
.quest-row.done .upg-desc { color: #7ec84a; }
.quest-bar { height: 6px; background: var(--wood-dark); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.quest-bar div { height: 100%; background: #7ec84a; }

/* ---------- Кухня ---------- */
#board-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.board-title { margin: 0; }
#board {
  background: #4a321f; border: 2px solid var(--wood-border); border-radius: 14px;
  touch-action: none; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* ---------- Перетаскивание: HTML-призрак блюда ---------- */
#drag-ghost {
  position: fixed; z-index: 500; pointer-events: none;
  display: none; transform: translate(-50%, -62%);
  background: rgba(43, 29, 18, .92); border: 3px solid var(--gold);
  border-radius: 14px; padding: 6px 10px 4px;
  font-size: 42px; line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
#drag-ghost.show { display: block; animation: ghost-pick .15s ease-out; }
#drag-ghost .dg-tier {
  position: absolute; right: -6px; bottom: -6px;
  background: var(--wood-dark); color: var(--gold);
  border: 1px solid var(--gold); border-radius: 8px;
  font-size: 12px; font-weight: bold; padding: 1px 5px;
}
@keyframes ghost-pick { from { transform: translate(-50%, -62%) scale(1.25); } }

/* ---------- Дуэль кухонь ---------- */
#duel-banner {
  width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; padding: 8px 12px; margin-bottom: 6px;
  background: linear-gradient(180deg, #7a3020, #5d2418);
  border: 2px solid #c96a3a; border-radius: 12px; font-size: 14px;
  box-shadow: 0 0 14px rgba(230,100,50,.35), inset 0 1px 0 rgba(255,255,255,.08);
  animation: duel-pulse 1.6s ease-in-out infinite;
}
@keyframes duel-pulse { 0%,100% { box-shadow: 0 0 10px rgba(230,100,50,.3); } 50% { box-shadow: 0 0 20px rgba(230,100,50,.55); } }
#duel-vs { font-weight: bold; color: #ffd7a8; }
#duel-timer { font-weight: bold; color: #fff; min-width: 58px; text-align: center;
  background: rgba(0,0,0,.3); border-radius: 8px; padding: 3px 8px; }
#duel-timer.low { color: #ff9a8a; animation: stat-pulse 1s infinite; }
#duel-score { font-weight: bold; color: var(--gold); }
#duel-combo { color: #ffb84a; font-weight: bold; }
#btn-duel-fold { background: var(--wood-light); font-size: 12px; padding: 6px 10px; }
.order-card.duel {
  border-color: #e05a4a; background: linear-gradient(180deg, #6b3024, #5d2418);
  box-shadow: 0 0 10px rgba(224,90,74,.3);
}
.order-card.duel .order-want b { color: #ffd7a8; }
.duel-points-pop { position: fixed; font-weight: bold; color: #ff9a5a; font-size: 15px;
  pointer-events: none; animation: coin-up 1s ease-out forwards; z-index: 60;
  text-shadow: 0 1px 2px #000; }

/* режимы дуэли и комнаты */
.duel-modes { display: flex; flex-direction: column; gap: 10px; }
.duel-modes button { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  font-size: 16px; text-align: left; }
.duel-modes button span { font-size: 12px; font-weight: normal; opacity: .85; }
.duel-room { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.duel-room .dr-join { display: flex; gap: 8px; }
.duel-room input, #cloud-row input {
  flex: 1; padding: 10px 12px; font-size: 16px; border-radius: 10px;
  border: 2px solid var(--wood-border); background: var(--wood-dark); color: var(--cream);
  text-transform: uppercase; letter-spacing: 2px;
}
#duel-status { margin-top: 10px; color: var(--gold); font-size: 14px; min-height: 20px; text-align: center; }
#cloud-row { display: flex; gap: 8px; margin-top: 10px; }
#cloud-row button { white-space: nowrap; }

/* ---------- Лидерборд ---------- */
.lb-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.lb-table th { text-align: left; color: #d8c090; font-size: 12px; padding: 4px 6px;
  border-bottom: 1px solid #5d3f24; }
.lb-table td { padding: 4px 6px; border-bottom: 1px solid #4a3220; }
.lb-table tr[data-pid] { cursor: pointer; }
.lb-table tr[data-pid]:hover td { background: rgba(255,215,106,.08); }
.lb-table tr.me td { background: rgba(255,215,106,.14); color: var(--gold); font-weight: bold; }
.lb-table td.num { text-align: right; }
#lb-search {
  width: 100%; margin-top: 10px; padding: 9px 12px; font-size: 14px; border-radius: 10px;
  border: 2px solid var(--wood-border); background: var(--wood-dark); color: var(--cream);
  text-transform: none; letter-spacing: normal;
}
.lb-global { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lb-global div { flex: 1; min-width: 100px; background: rgba(0,0,0,.25); border-radius: 8px;
  padding: 6px; text-align: center; font-size: 12px; color: #d8c090; }
.lb-global b { display: block; font-size: 16px; color: var(--gold); }
.duel-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.duel-pick button {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--wood-dark); border: 1px solid var(--wood-light);
  border-radius: 10px; padding: 8px 10px; font-size: 14px; color: var(--cream);
}
.duel-pick button:hover { border-color: var(--gold); }
.duel-pick .dp-ava { font-size: 24px; }
.duel-pick .dp-body { flex: 1; }
.duel-pick .dp-name { font-weight: bold; }
.duel-pick .dp-sub { font-size: 12px; color: #d8c090; }
.duel-pick .dp-rating { color: var(--gold); font-weight: bold; }

/* ---------- Гости ---------- */
#orders-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.order-card {
  background: #5d3f24; border: 2px solid var(--wood-border); border-radius: 10px;
  padding: 8px; display: flex; align-items: center; gap: 8px;
  transition: box-shadow .15s, border-color .15s, opacity .3s, transform .15s;
}
.order-card:hover { transform: translateY(-2px); }
.order-card.droppable { border-color: var(--gold); box-shadow: 0 0 14px #ffd76a88; }
.order-card.done { opacity: .35; }
.order-card.special {
  border-color: var(--gold); background: linear-gradient(180deg, #6b5224, #5d3f24);
  box-shadow: 0 0 10px rgba(255,215,106,.25);
}
.order-avatar { font-size: 30px; animation: guest-bob 2.8s ease-in-out infinite; }
.order-card:nth-child(2) .order-avatar { animation-delay: .5s; }
.order-card:nth-child(3) .order-avatar { animation-delay: 1s; }
@keyframes guest-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.order-body { flex: 1; }
.order-want { font-size: 13px; }
.order-reward { font-size: 12px; color: var(--gold); }
.order-buff { font-size: 11px; color: #a8d8ff; }
.patience { height: 6px; background: var(--wood-dark); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.patience div { height: 100%; background: #e05a4a; }
#btn-new-order { width: 100%; background: var(--wood-light); margin-bottom: 6px; }
.hint { font-size: 12px; color: #d8c090; text-align: center; }

/* ---------- Тосты ---------- */
#toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: var(--gold); color: #3a2410; font-weight: bold;
  padding: 10px 20px; border-radius: 10px; opacity: 0;
  pointer-events: none; transition: opacity .3s; z-index: 100; max-width: 90vw;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
#toast.show { opacity: 1; }

/* ---------- Модалка ---------- */
#modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
#modal-box {
  background: linear-gradient(180deg, #503722, #432c1a);
  border: 2px solid var(--wood-border); border-radius: 16px;
  padding: 24px; max-width: 580px; width: 92%; max-height: 82vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
#modal-title { margin-bottom: 12px; font-size: 20px; color: var(--gold); }
#modal-text { line-height: 1.6; font-size: 15px; white-space: pre-wrap; }
#modal-input-row { margin-top: 14px; }
#modal-input {
  width: 100%; padding: 12px; font-size: 16px; border-radius: 10px;
  border: 2px solid var(--wood-border); background: var(--wood-dark); color: var(--cream);
}
#modal-buttons { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
#modal-buttons button { flex: 1; min-width: 140px; padding: 12px; font-size: 15px; }

/* тема «Статистика» — синяя доска объявлений */
#modal-box.theme-stats {
  background: linear-gradient(180deg, #243b52, #1a2c3f);
  border-color: #3a7aa3;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(58,122,163,.15);
}
#modal-box.theme-stats #modal-title { color: #7ec8ff; }
#modal-box.theme-stats .stat-card { background: rgba(0,0,0,.35); }
#modal-box.theme-stats .stat-card .num { color: #9fd8ff; }

/* тема «История» — старый пергамент */
#modal-box.theme-chronicle {
  background: linear-gradient(180deg, #efe0ba, #dcc48f);
  border-color: #a8894a; color: #4a321f;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 0 50px rgba(160,120,50,.25);
}
#modal-box.theme-chronicle #modal-title { color: #7a5a20; }
#modal-box.theme-chronicle #modal-text { color: #4a321f; font-style: italic; }
#modal-box.theme-chronicle #modal-buttons button { color: #fff; }

/* ---------- Пауза ---------- */
#pause-overlay {
  position: fixed; inset: 0; background: rgba(20,12,6,.85); z-index: 150;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
#pause-box {
  background: linear-gradient(180deg, #503722, #432c1a);
  border: 2px solid var(--wood-border); border-radius: 16px; padding: 28px;
  width: 380px; max-width: 94vw; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
#pause-box h2 { text-align: center; color: var(--gold); margin-bottom: 4px; }
.pause-sub { text-align: center; color: #d8c090; font-size: 13px; margin-bottom: 8px; }
#pause-box button { padding: 13px; font-size: 15px; }
#save-indicator { text-align: center; font-size: 12px; color: #d8c090; margin-top: 6px; }

/* ---------- Статистика ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.stat-card { background: rgba(0,0,0,.25); border-radius: 10px; padding: 10px; text-align: center; }
.stat-card .num { font-size: 22px; font-weight: bold; color: var(--gold); }
.stat-card .lbl { font-size: 12px; color: #d8c090; margin-top: 2px; }

.hidden { display: none !important; }

/* ---------- Разделы: кнопки и модальные окна ---------- */
#sections-panel { display: flex; flex-direction: column; gap: 8px; }
#sections-panel button { width: 100%; padding: 13px; font-size: 15px; position: relative; }
#badge-quests {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: var(--gold); color: #3a2410; font-weight: bold; font-size: 12px;
  min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; padding: 0 5px;
}
#modal-box.wide { max-width: 760px; }

/* список раздела: построчно, одна колонка */
.sec-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sec-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.28); border: 1px solid var(--wood-light); border-radius: 12px;
  padding: 10px; min-height: 64px;
}
.sec-card.locked { opacity: .55; }
.sec-card .sc-icon { font-size: 30px; width: 40px; text-align: center; flex-shrink: 0; }
.sec-card .sc-body { flex: 1; min-width: 0; }
.sec-card .sc-name { font-weight: bold; font-size: 14px; }
.sec-card .sc-sub { font-size: 12px; color: #d8c090; line-height: 1.35; }
.sec-card .sc-bar { height: 6px; background: var(--wood-dark); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.sec-card .sc-bar div { height: 100%; background: #7ec84a; }
.sec-card .sc-btn { padding: 9px 12px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.sec-card.done { border-color: #7ec84a; }
.sec-card.done .sc-sub { color: #7ec84a; }
/* цветные кнопки покупки вместо системных */
.sc-btn.coins { background: linear-gradient(180deg, #3a7aa3, #2b5a7a); }   /* за монеты */
.sc-btn.gem { background: linear-gradient(180deg, #9a6bc3, #7a4b9a); }     /* за самоцветы/рекламу */
.sc-btn.claim { background: linear-gradient(180deg, #4d8a37, #3e6b2b); }   /* забрать награду */
.sc-btn.cnt-ico .coin-ico { width: 13px; height: 13px; vertical-align: -2px; }
.sec-hint { font-size: 12px; color: #d8c090; margin-top: 10px; text-align: center; }
.sec-sub-title { margin: 14px 0 2px; color: var(--gold); font-size: 14px; font-weight: bold; }
.sec-sub-title:first-child { margin-top: 0; }

/* темы разделов */
#modal-box.theme-upg { border-color: #8a6538; }
#modal-box.theme-shop { border-color: #7a4b9a; }
#modal-box.theme-shop #modal-title { color: #c9a0ff; }
#modal-box.theme-quest { border-color: #3e6b2b; }
#modal-box.theme-quest #modal-title { color: #9fe07a; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 1100px) {
  #layout { grid-template-columns: 1fr; }
  #board-wrap { order: -1; }
  .hud-buttons { margin-left: 0; }
}