/* Каменный парк: интерфейс. Палитра: джунгли, песок-пергамент, серый камень, янтарь. */
:root {
  --jungle: #17500e; --parch: #ecd68c; --parch-d: #d4b866; --ink: #3a2a12; --ink-soft: #6b5430;
  --stone: #9a9aa4; --stone-d: #5c5c66; --amber: #f0a81c; --good: #5cb53a; --bad: #d9482f;
  --hud: rgba(38, 29, 16, .86); --hud-line: #6b5430; --shadow: #1c1408;
  --font-d: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-b: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { touch-action: manipulation; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; margin: 0; height: 100%; background: var(--jungle); color: var(--parch); font: 14px/1.35 var(--font-b); overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
#app { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; display: block; background: #17500e; }
[hidden] { display: none !important; }
svg.ic { width: 22px; height: 22px; flex: none; }

/* верхняя панель */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 0 calc(10px + env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; gap: 8px; pointer-events: none; flex-wrap: wrap; }
.hud-left, .hud-right { display: flex; gap: 6px; align-items: center; pointer-events: auto; flex-wrap: wrap; }
.pill { display: flex; align-items: center; gap: 6px; background: var(--hud); border: 2px solid var(--hud-line); border-radius: 16px 18px 16px 18px; padding: 4px 10px; box-shadow: 0 3px 0 var(--shadow); color: var(--parch); min-height: 34px; }
.pill b { font: 700 17px var(--font-d); min-width: 2ch; font-variant-numeric: tabular-nums; }
.btn-pill { font: 700 14px var(--font-d); }
.btn-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.pill.day { font: 500 13px var(--font-d); }
.clock { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--parch); position: relative; overflow: hidden; display: block; }
.clock i { position: absolute; left: 0; bottom: 0; width: 100%; background: var(--amber); display: block; }
#hint { position: absolute; left: 50%; transform: translateX(-50%); top: calc(54px + env(safe-area-inset-top, 0px)); max-width: min(92vw, 520px); background: var(--parch); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; text-align: center; box-shadow: 0 3px 0 var(--shadow); font-weight: 500; pointer-events: none; }
@media (max-width: 520px) { #hint { top: calc(96px + env(safe-area-inset-top, 0px)); } }
#toasts { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { background: var(--hud); border: 2px solid var(--amber); border-radius: 12px; padding: 6px 12px; text-align: center; animation: toastIn .2s ease-out; box-shadow: 0 3px 0 var(--shadow); }
.toast.err { border-color: var(--bad); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* кнопки на карте */
#zoomBtns { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.round { width: 42px; height: 42px; border-radius: 50%; background: var(--hud); border: 2px solid var(--hud-line); color: var(--parch); font: 700 22px var(--font-d); box-shadow: 0 3px 0 var(--shadow); }
.round:active { transform: translateY(2px); }
.stone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #2a2a32; font: 700 11px var(--font-d); background: radial-gradient(circle at 35% 28%, #dcdce2 0%, #a9a9b2 45%, #6f6f7a 100%); border: 3px solid var(--amber); box-shadow: 0 4px 0 var(--shadow), inset 0 -4px 6px rgba(0, 0, 0, .25); border-radius: 52% 48% 55% 45% / 48% 54% 46% 52%; }
.stone:nth-child(2n) { border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; }
.stone:nth-child(3n) { border-radius: 55% 45% 48% 52% / 46% 52% 48% 54%; }
.stone:active { transform: translate(-50%, -50%) translateY(2px); }
.stone svg { width: 30px; height: 30px; }
.stone svg * { stroke: #34343c; }
.stone.big { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: 82px; height: 74px; }
.stone.big:active { transform: translateX(-50%) translateY(2px); }

/* круговое меню */
#radial { position: absolute; inset: 0; z-index: 5; }
#radial .back { position: absolute; inset: 0; background: rgba(8, 24, 6, .45); }
#radial .stone { position: absolute; transform: translate(-50%, -50%); width: 76px; height: 70px; animation: pop .16s ease-out backwards; animation-delay: calc(var(--i) * 25ms); }
#radial .stone span { font-size: 10.5px; line-height: 1; margin-top: 1px; }
#radial .stone.dim { opacity: .5; }
#radial .mark { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 22px solid rgba(160, 160, 170, .9); filter: drop-shadow(0 2px 0 var(--shadow)); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* панель режима (тропа, снос, размещение) */
#modeBar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; align-items: center; gap: 8px; background: var(--hud); border: 2px solid var(--hud-line); border-radius: 20px; padding: 8px 10px; box-shadow: 0 4px 0 var(--shadow); max-width: 96vw; flex-wrap: wrap; justify-content: center; }
#modeBar .msg { padding: 0 6px; max-width: 220px; line-height: 1.2; }
#modeBar .msg small { display: block; color: #c9b27a; font-size: 12px; }
.btn { background: var(--parch); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px 14px 12px 14px; padding: 7px 14px; font: 700 14px var(--font-d); box-shadow: 0 3px 0 var(--shadow); min-height: 40px; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.btn.primary { background: var(--amber); }
.btn.danger { background: #e9a08f; }
.btn.small { min-height: 32px; padding: 3px 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ok-green { background: #9bd36f; }

/* листы снизу: карточки, информация */
#sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
#sheet > * { pointer-events: auto; }
.parch { background: var(--parch); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px 22px 18px 22px; box-shadow: 0 5px 0 var(--shadow); }
.carousel { display: flex; align-items: center; gap: 4px; width: min(100%, 560px); }
.carousel .arrow { flex: none; width: 38px; height: 54px; font-size: 26px; color: var(--parch); text-shadow: 0 2px 0 var(--shadow); }
.carousel .arrow:disabled { opacity: .25; }
.card { flex: 1; min-width: 0; padding: 10px 12px 12px; text-align: center; max-height: calc(100dvh - 80px); overflow: auto; }
.card h2 { margin: 0; font: 700 22px var(--font-d); letter-spacing: .04em; text-transform: uppercase; }
.card .line { height: 3px; background: rgba(58, 42, 18, .25); margin: 6px 20px 8px; border-radius: 2px; }
.chips { display: flex; justify-content: space-around; gap: 6px; font: 700 20px var(--font-d); }
.chips span { display: flex; align-items: center; gap: 5px; }
.chips .bad { color: var(--bad); }
.chips small { font: 500 11px var(--font-b); color: var(--ink-soft); display: block; line-height: 1; }
.pv { margin: 8px auto; border: 3px solid var(--ink); border-radius: 6px; background: linear-gradient(#bfe6f5 0 38%, #7fd04a 38%); padding: 4px; display: flex; justify-content: center; align-items: center; height: 168px; }
.pv canvas { image-rendering: pixelated; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.card p { margin: 4px 0; }
.card .req { color: var(--bad); font-weight: 500; }
.card .btns { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(58, 42, 18, .3); display: block; }
.dots i.on { background: var(--ink); }
.info { width: min(100%, 460px); padding: 10px 14px 12px; max-height: 60dvh; overflow: auto; }
.info h2 { margin: 0 0 2px; font: 700 20px var(--font-d); text-transform: uppercase; }
.status { display: inline-block; font-weight: 700; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #b9e08f; }
.status.bad { background: #f1b3a4; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 8px 0; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper b { font: 700 20px var(--font-d); min-width: 2.5ch; text-align: center; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bar { height: 9px; border-radius: 5px; background: rgba(58, 42, 18, .22); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--good); }
.bar.hunger i { background: #e89a2a; } .bar.thirst i { background: #3f9ae0; } .bar.happy i { background: #e8c52a; }
#guestCard { position: absolute; left: 10px; top: calc(100px + env(safe-area-inset-top, 0px)); z-index: 3; width: 214px; max-height: calc(100vh - 130px); overflow-y: auto; padding: 8px 10px; font-size: 13px; }
#guestCard h3 { margin: 0 0 4px; font: 700 15px var(--font-d); display: flex; justify-content: space-between; }
#guestCard .rowb { display: grid; grid-template-columns: 56px 1fr; gap: 6px; align-items: center; margin: 3px 0; }
.x { font: 700 18px var(--font-d); line-height: 1; padding: 0 4px; }

/* экраны: вход, слоты, меню, статистика */
.screen { position: absolute; inset: 0; z-index: 10; background: radial-gradient(ellipse at 50% 30%, #2f8a1c 0%, #17500e 70%); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; align-items: flex-start; }
.screen.glass { background: rgba(8, 24, 6, .72); }
.panel { margin: auto; width: min(100%, 520px); padding: 18px 18px 16px; }
.panel h1 { margin: 0; font: 700 34px var(--font-d); text-transform: uppercase; letter-spacing: .05em; text-align: center; line-height: 1; }
.panel h1 small { display: block; font: 500 14px var(--font-b); text-transform: none; letter-spacing: 0; color: var(--ink-soft); margin-top: 6px; }
.panel h2 { margin: 0 0 8px; font: 700 22px var(--font-d); text-transform: uppercase; }
.tabs { display: flex; gap: 6px; margin: 14px 0 10px; }
.tabs button { flex: 1; padding: 7px; border: 3px solid var(--ink); border-radius: 10px; font: 700 14px var(--font-d); background: var(--parch-d); }
.tabs button.on { background: var(--amber); }
label.f { display: block; margin: 8px 0; font-weight: 500; }
label.f input { display: block; width: 100%; margin-top: 3px; padding: 9px 10px; border: 3px solid var(--ink); border-radius: 10px; background: #fff7d6; font: 500 16px var(--font-b); color: var(--ink); }
.err { color: var(--bad); font-weight: 700; min-height: 1.3em; margin: 4px 0; }
.slot { display: flex; align-items: center; gap: 10px; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 10px; margin: 8px 0; background: #f4e3a6; }
.slot .t { flex: 1; min-width: 0; }
.slot .t b { font: 700 17px var(--font-d); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .t small { color: var(--ink-soft); display: block; }
.slot.empty { border-style: dashed; background: transparent; }
.slot input { width: 100%; padding: 7px 9px; border: 3px solid var(--ink); border-radius: 10px; background: #fff7d6; font: 500 15px var(--font-b); color: var(--ink); }
.hist { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin: 6px 0; }
.hist div { flex: 1; display: flex; gap: 1px; align-items: flex-end; height: 100%; }
.hist i { flex: 1; display: block; min-height: 2px; }
.hist .a { background: var(--good); } .hist .b { background: var(--bad); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.table th, .table td { text-align: left; padding: 3px 4px; border-bottom: 1px solid rgba(58, 42, 18, .25); }
.table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { max-height: calc(100dvh - 140px); overflow: auto; }
.sec { font: 700 13px var(--font-d); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 10px 0 4px; }
.cookrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(58, 42, 18, .25); }
@media (prefers-reduced-motion: reduce) { .toast, #radial .stone { animation: none; } }

/* ---------- телефон: просьба повернуть экран (показ только через класс .on — CSS orientation на iOS/Android залипает) ---------- */
#rotate { display: none; position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 30%, #2f8a1c 0%, #17500e 70%); color: var(--parch); flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; touch-action: manipulation; }
#rotate.on { display: flex; }
#rotate svg { width: 120px; height: 120px; }
#rotate b { font: 700 26px var(--font-d); text-transform: uppercase; letter-spacing: .05em; }
#rotate span { max-width: 280px; color: #d9c98f; }
#rotate .ph { transform-origin: 32px 24px; animation: turn 2.4s ease-in-out infinite; }
#rotate .skip { margin-top: 8px; background: transparent; border: 2px solid rgba(236, 214, 140, .55); color: #ecd68c; border-radius: 12px; padding: 10px 16px; font: 700 14px var(--font-d); min-height: 44px; }
@keyframes turn { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate .ph { animation: none; } }

/* ---------- телефон в горизонтали: низкий экран ---------- */
@media (max-height: 520px) {
  #hud { padding-top: calc(4px + env(safe-area-inset-top, 0px)); gap: 4px; flex-wrap: nowrap; }
  .hud-left, .hud-right { gap: 4px; flex-wrap: nowrap; }
  .pill { min-height: 30px; padding: 2px 8px; gap: 4px; border-width: 2px; }
  .pill b { font-size: 15px; }
  svg.ic { width: 18px; height: 18px; }
  #hint { top: calc(42px + env(safe-area-inset-top, 0px)); padding: 5px 10px; font-size: 13px; }
  #toasts { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  #zoomBtns { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); right: auto; transform: none; gap: 6px; }
  .round { width: 40px; height: 40px; }
  .stone.big { width: 66px; height: 60px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .stone.big svg { width: 24px; height: 24px; }
  #radial .stone { width: 72px; height: 62px; }
  #radial .stone svg { width: 24px; height: 24px; }
  #radial .stone span { font-size: 8px; letter-spacing: -.02em; }
  #modeBar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 5px 8px; border-radius: 16px; flex-wrap: nowrap; }
  #modeBar .msg { max-width: 300px; font-size: 13px; }
  .btn { min-height: 38px; padding: 5px 12px; }
  #sheet { justify-content: flex-end; padding: 0 calc(8px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) 8px; }
  .carousel { width: min(100%, 470px); }
  .carousel .arrow { height: 44px; width: 32px; font-size: 22px; }
  .card { padding: 6px 10px 8px; max-height: calc(100dvh - 12px); }
  .card h2 { font-size: 18px; }
  .card .line { margin: 3px 20px 4px; }
  .chips { font-size: 17px; }
  .pv { height: 96px; margin: 5px auto; padding: 2px; }
  .card p { margin: 2px 0; font-size: 13px; }
  .card .btns { margin-top: 5px; }
  .dots { margin-top: 4px; }
  .info { max-height: calc(100dvh - 12px); padding: 8px 12px 10px; }
  #guestCard { top: calc(46px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); }
  .screen { padding: 8px calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px)); }
  .panel { padding: 10px 14px 12px; }
  .panel h1 { font-size: 26px; }
  .panel h1 small { font-size: 12px; margin-top: 3px; }
  .tabs { margin: 8px 0 4px; }
  label.f { margin: 5px 0; }
  label.f input { padding: 6px 9px; }
  .slot { margin: 5px 0; padding: 5px 8px; }
  .scroll { max-height: calc(100dvh - 90px); }
}

/* мини-карта */
#minimap { position: absolute; right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: 160px; height: 80px; z-index: 2; background: rgba(8, 24, 6, .6); border: 2px solid var(--hud-line); border-radius: 10px; box-shadow: 0 3px 0 var(--shadow); touch-action: none; image-rendering: pixelated; cursor: pointer; }
@media (max-height: 520px) { #minimap { width: 120px; height: 60px; } }
.parkTabs { margin: 6px 0 8px; }
.lvrow { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(58, 42, 18, .25); align-items: start; }
.lvrow.cur { background: rgba(240, 168, 28, .22); border-radius: 8px; padding-left: 4px; }
.lvrow.done { opacity: .6; }
.lvrow .n { font: 700 18px var(--font-d); }
.lvrow small { color: var(--ink-soft); display: block; line-height: 1.25; }
.lvrow .rw { font: 700 14px var(--font-d); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.adrow { padding: 8px 0; border-bottom: 1px solid rgba(58, 42, 18, .25); display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.adrow small { display: block; color: var(--ink-soft); }
/* сложность, характеры, износ */
.seg { display: flex; gap: 4px; margin: 6px 0 2px; }
.seg button { flex: 1; padding: 5px 4px; border: 3px solid var(--ink); border-radius: 10px; font: 700 12px var(--font-d); background: var(--parch-d); }
.seg button.on { background: var(--amber); }
.slot .t small#diffD { margin-top: 2px; }
.bar.wc i { background: #b58a4a; }
.traits { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.traits span { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: rgba(58, 42, 18, .15); }

.parkTabs { flex-wrap: wrap; }
.parkTabs button { flex: 1 1 22%; min-width: 0; font-size: 12px; padding: 5px 3px; white-space: nowrap; }
@media (max-width: 420px) { .parkTabs button { flex-basis: 45%; } }

@media (max-width: 520px) { #minimap { width: 100px; height: 50px; } }

/* статистика парка */
.tabs.sub { margin: 4px 0 6px; } .tabs.sub button { font-size: 13px; padding: 5px 2px; }
.seg { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; font-size: 12px; color: var(--ink-soft); }
.seg button { padding: 2px 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--parch-d); font: 700 12px var(--font-d); color: var(--ink); }
.seg button.on { background: var(--amber); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 4px; }
.kpi { border: 2px solid rgba(58, 42, 18, .35); border-radius: 10px; padding: 6px 9px; background: rgba(255, 247, 214, .35); }
.kpi small { display: block; color: var(--ink-soft); font-size: 11px; }
.kpi b { font: 700 22px var(--font-d); font-variant-numeric: tabular-nums; }
.kpi em { display: block; font-style: normal; font-size: 11px; color: var(--ink-soft); }
.up { color: #2f7a17 !important; } .dn { color: var(--bad) !important; }
.ins > div { display: flex; gap: 8px; padding: 6px 8px; margin: 4px 0; border-radius: 8px; font-size: 13px; line-height: 1.3; background: rgba(58, 42, 18, .08); border-left: 4px solid var(--stone-d); }
.ins .bad { border-color: var(--bad); background: rgba(217, 72, 47, .12); } .ins .warn { border-color: var(--amber); background: rgba(240, 168, 28, .15); } .ins .good { border-color: var(--good); background: rgba(92, 181, 58, .14); }
.ins span { flex: none; }
svg.ch { width: 100%; height: auto; display: block; margin: 2px 0; font: 500 9.5px var(--font-b); }
svg.ch text { fill: var(--ink-soft); } svg.ch .grid { stroke: rgba(58, 42, 18, .45); stroke-width: 1; } svg.ch .grid.d { stroke-dasharray: 2 3; stroke-opacity: .5; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--ink-soft); margin: 2px 0 4px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.hint { margin: 4px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.3; }
.brk, .need { display: grid; grid-template-columns: 38% 1fr auto; gap: 8px; align-items: center; margin: 4px 0; font-size: 13px; }
.brk b, .need b { font-variant-numeric: tabular-nums; text-align: right; min-width: 74px; } .brk small, .need small { color: var(--ink-soft); font-weight: 500; }
.bar { height: 9px; } .need .bar, .brk .bar { height: 11px; }
.table.stat th { font-size: 11px; color: var(--ink-soft); line-height: 1.1; } .table.stat td { vertical-align: top; }
.mini { height: 4px; background: rgba(58, 42, 18, .15); border-radius: 2px; margin-top: 2px; } .mini i { display: block; height: 100%; background: var(--amber); border-radius: 2px; }

/* настроение гостя */
#guestCard .mood { margin-top: 8px; padding-top: 6px; border-top: 2px dashed rgba(58, 42, 18, .35); }
#guestCard .mhead { display: flex; justify-content: space-between; font-size: 12px; } #guestCard .mhead span { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
#guestCard .msp { width: 100%; height: 34px; display: block; background: rgba(255, 247, 214, .35); border-radius: 6px; } #guestCard .msp .g { stroke: rgba(58, 42, 18, .3); stroke-dasharray: 2 3; } #guestCard .msp .g.r { stroke: rgba(217, 72, 47, .5); }
#guestCard .msum { display: flex; gap: 12px; font-size: 12px; font-weight: 700; margin: 3px 0; }
#guestCard .up { color: #3f8f22; } #guestCard .dn { color: #c63a24; }
#guestCard .mr { display: grid; grid-template-columns: 1fr 42px 30px; gap: 5px; align-items: center; font-size: 11px; margin: 2px 0; }
#guestCard .mr b { text-align: right; font-variant-numeric: tabular-nums; }
#guestCard .mb { height: 7px; background: rgba(58, 42, 18, .12); border-radius: 4px; overflow: hidden; } #guestCard .mb i { display: block; height: 100%; border-radius: 4px; } #guestCard .mb i.up { background: #5cb53a; } #guestCard .mb i.dn { background: #d9482f; }
#guestCard .mlog { margin-top: 4px; font-size: 11px; line-height: 1.35; } #guestCard .mlog small, #guestCard .mnone { color: var(--ink-soft); }
#guestCard .mmore { margin-top: 5px; width: 100%; padding: 2px; border: 2px solid var(--ink); border-radius: 8px; background: var(--parch-d); font: 700 11px var(--font-d); color: var(--ink); }