/* Тема интерфейса: цвета панелей и фонов страниц — под стиль мира.
   Закат (как в роликах): тёплый тёмно-коричневый войлок. Жайлау (по умолчанию): тёмно-зелёное «стекло» над лугом.
   Страницы пишут rgb(var(--pan) / α) вместо rgba(36,24,16,α); класс html.jailau ставит скрипт в <head>. */
:root { --pan: 36 24 16; --pan2: 20 13 8; --bg0: #1b120b; --bg1: #6a3b2a; --muted2: #bfae92; }
html.jailau { --pan: 18 42 31; --pan2: 10 27 20; --bg0: #0d2117; --bg1: #2f6b4a; --muted2: #b8d2bf; }
html.jailau .panel, html.jailau .sheet .panel, html.jailau .card, html.jailau .t, html.jailau .bal div, html.jailau .list .c, html.jailau .g {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html.jailau .note { color: var(--muted2); }
html.light-mode .panel, html.light-mode .card, html.light-mode .nav, html.light-mode .sheet .panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #ffe27a; outline-offset: 3px; }
.sheet:has(> .goodvibes-notice) { display: flex; flex-direction: column; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 160px); }
.sheet:has(> .goodvibes-notice) > .panel { width: min(100%, 520px); min-height: 0; flex: 0 1 auto; overflow-y: auto; }
.sheet:has(> .goodvibes-notice) > .foldw { width: min(100%, 520px); flex: none; }
.sheet:has(> .goodvibes-notice) > .care-fold { flex: none; }
.goodvibes-notice { box-sizing: border-box; pointer-events: auto; display: flex; flex: none; flex-direction: column; gap: 8px; width: min(100%, 520px); max-height: min(32dvh, 310px); margin: 0 auto 8px; padding: 12px; border: 1px solid #bba16b; border-radius: 16px; background: rgb(var(--pan2) / .98); color: #f4ecdc; font: 500 14px/1.45 Inter, system-ui, sans-serif; text-align: left; overflow-wrap: anywhere; }
.goodvibes-notice > b { flex: none; color: #ffe27a; }
.goodvibes-copy { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.goodvibes-copy:focus-visible { outline: 2px solid #ffe27a; outline-offset: -2px; }
.goodvibes-copy p { margin: 0 0 8px; }
.goodvibes-copy p:last-child { margin-bottom: 0; }
.goodvibes-notice button { flex: none; min-height: 44px; border: 0; border-radius: 10px; padding: 8px 12px; background: #f2c440; color: #2a1a0c; font: 700 14px/1.4 Inter, system-ui, sans-serif; cursor: pointer; }
.goodvibes-notice button:disabled { opacity: .6; cursor: default; }
body:has(#shop:not([hidden])) .goodvibes-notice { display: none; }
.village-dialog { width: min(420px,calc(100% - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; border: 1px solid #a88b39; border-radius: 20px; padding: 18px; background: rgb(var(--pan2) / .98); color: #f4ecdc; font: 500 15px/1.5 Inter,system-ui,sans-serif; }
.village-dialog::backdrop { background: rgba(0,0,0,.6); }
.dialog-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dialog-head h2 { flex: 1; margin: 0; font: 700 21px Lora,serif; }
.dialog-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; color: #f4ecdc; background: rgba(244,236,220,.12); font-size: 20px; cursor: pointer; }
.dialog-note { font-size: 13px; color: #c8d5c0; }
.dialog-note a { color: #ffe27a; }
.dialog-action { width: 100%; min-height: 46px; padding: 12px; margin-top: 10px; border: 0; border-radius: 12px; background: linear-gradient(#f2c440,#d9a520); color: #2a1a0c; font: 800 15px Inter,system-ui,sans-serif; cursor: pointer; }
.dialog-action.secondary { background: rgba(244,236,220,.12); color: #f4ecdc; }
.setting-label { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-top: 18px; }
.village-dialog input[type=range] { width: 100%; min-height: 44px; accent-color: #f2c440; }
.setting-check { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 12px; font-weight: 700; }
.setting-check input { width: 22px; height: 22px; accent-color: #f2c440; }
.walk-tools button:disabled, .home-menu button:disabled, .walk-compass:disabled { opacity: .5; cursor: wait; }

/* Күш: общий запас сил, компактная шапка на телефоне раскрывается по нажатию. */
.energy { margin: 10px 0; padding: 10px 12px; border: 1px solid #bba16b70; border-radius: 14px; background: rgb(var(--pan2) / .96); color: #f4ecdc; font: 500 14px/1.5 Inter, system-ui, sans-serif; text-align: left; }
.energy-heading { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 800; color: #ffe27a; list-style: none; }
.energy-heading::-webkit-details-marker { display: none; }
.energy-heading:focus-visible { outline: 3px solid #ffe27a; outline-offset: 3px; border-radius: 4px; }
.energy-compact { display: none; }
.energy-meter { display: block; width: 100%; height: 12px; accent-color: #c8d980; margin: 2px 0 8px; }
.energy-note { color: #cfdbc4; font-size: 12px; }
.energy-cost, .energy-warning { margin-top: 8px; }
.energy-warning { color: #ffe27a; }
.energy .energy-refill { display: block; width: 100%; min-height: 44px; margin: 10px 0 6px; padding: 8px; border: 0; border-radius: 10px; background: #f2c440; color: #2a1a0c; box-shadow: none; font: 800 14px/1.4 Inter, system-ui, sans-serif; cursor: pointer; }
.energy .energy-refill:disabled { opacity: .6; cursor: default; }
.energy-error:not(:empty) { margin-top: 8px; color: #ffcebd; }
.energy-result { color: #f4e2b0; font-size: 14px; line-height: 1.5; }
.energy-header { position: relative; flex: none; width: 230px; pointer-events: auto; z-index: 6; }
.top:has(.energy-header:not([hidden])) { flex-wrap: wrap; }
.energy-header .energy { margin: 0; padding: 0 10px; }
.energy-header .energy-body { padding-bottom: 10px; }
.energy-header[hidden], .energy [hidden] { display: none !important; }
@media (max-width: 760px) {
  .energy-header { width: auto; }
  .energy-header .energy-long { display: none; }
  .energy-header .energy-compact { display: inline; white-space: nowrap; }
  .energy-header .energy-body { position: fixed; right: 12px; top: calc(env(safe-area-inset-top) + 64px); width: min(280px, calc(100vw - 24px)); padding: 12px; border: 1px solid #bba16b70; border-radius: 14px; background: rgb(var(--pan2) / .98); box-shadow: 0 8px 24px #0006; }
  .top:has(.energy-header:not([hidden])) .acct { min-width: 0; padding: 5px 8px; }
  .top:has(.energy-header:not([hidden])) .acct .av { display: none; }
  .top:has(.energy-header:not([hidden])) .acct .hn { min-width: 0; }
  .top:has(.energy-header:not([hidden])) .acct .hn b { max-width: 100%; }
  .top:has(.energy-header:not([hidden])) .acct .hn small { font-size: 12px; white-space: normal; }
  .top:has(.energy-header:not([hidden])) .brand { min-width: 100px; flex: 1; }
  .top:has(.energy-header:not([hidden])) .brand small { overflow: hidden; text-overflow: ellipsis; }
  .top:has(.energy-header:not([hidden])) .home { flex: none; }
}

/* Опционный значок главной; старые energy-header и карточки игр сохраняют свой вид. */
#energyHeader:has(> .energy-chip) { position: relative; top: auto; right: auto; width: auto; flex: none; }
.energy-chip { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 8px; border: 1px solid #bba16b70; border-radius: 12px; background: rgb(var(--pan2) / .96); color: #ffe27a; font: 800 14px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.energy-chip:hover, .energy-chip[aria-expanded="true"] { background: rgb(var(--pan) / .98); border-color: #ffe27a; }
.energy-chip:focus-visible { outline: 3px solid #ffe27a; outline-offset: 3px; }
#energyHeader .energy-popover { position: fixed; margin: 0; padding: 10px 12px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 8px 24px #0006; }
#energyHeader .energy-popover .energy-heading { cursor: default; }
#energyHeader .energy-popover .energy-long { display: inline; }
#energyHeader .energy-popover .energy-compact { display: none; }
#energyHeader .energy-popover .energy-body { position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
@media (max-width: 760px) {
  .top:has(#energyHeader > .energy-chip) .brand { min-width: max-content; }
  .top:has(#energyHeader > .energy-chip) .brand small { contain: inline-size; }
  .top:has(#energyHeader > .energy-chip) .acct { order: 1; }
  #energyHeader > .energy-chip { padding: 0 6px; font-size: 13px; }
}

/* Felt, warm timber and brass accompany the meadow without hiding the map. */
html.jailau { --pan: 29 48 34; --pan2: 21 35 26; --muted2: #cfdbc4; }
html.jailau .brand { background: #f2e6cd; border: 1px solid #d9bf86; box-shadow: 0 5px 20px #263d2526; }
html.jailau .brand b { color: #45301e; }
html.jailau .brand small { color: #755a31; }
html.jailau .panel, html.jailau .village-dialog { border: 1px solid #bba16b70; box-shadow: 0 12px 36px #20332438; }
html.jailau .tag { background: rgba(246,236,216,.72); color: #43321f; border-bottom-color: #aa7544; box-shadow: 0 2px 8px #26422b26; }
html.jailau .tag.me { background: #efce79; color: #382918; }
html.jailau .tag.fr { background: #3e7451; color: #fff; }
html.jailau .tag.clan { background: #314c37; color: #ffe6a3; }
#labels .tag { opacity: 0; transition: opacity 150ms ease; }
#labels .tag.fr { background: rgba(46,125,79,.72); }
html.jailau #labels .tag.fr { background: rgba(62,116,81,.72); }
#labels .tag.me[data-badge=""] { background: var(--gold); color: var(--ink); }
html.jailau #labels .tag.me[data-badge=""] { background: #efce79; color: #382918; }
html #labels .tag.quiet[data-badge], html.jailau #labels .tag.quiet[data-badge] {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  font: 600 11px Inter, sans-serif; color: #f4ecdc; text-shadow: 0 1px 2px rgba(0,0,0,.85);
  opacity: .75; animation: none; filter: none; z-index: auto; transition: opacity 180ms ease;
}
html #labels .tag.quiet::before, html #labels .tag.quiet::after { content: none; }
html #labels .tag.quiet.fr, html.jailau #labels .tag.quiet.fr { color: #bfe7c6; }
html #labels .tag.quiet.me, html.jailau #labels .tag.quiet.me { color: #ffd96a; opacity: .95; }
html #labels .tag.quiet.landmark, html.jailau #labels .tag.quiet.landmark { font-style: italic; opacity: .6; }
html #labels .tag.quiet.clan-banner, html.jailau #labels .tag.quiet.clan-banner { color: #ffe6a3; opacity: .8; }
html #labels .tag.cup[data-badge], html.jailau #labels .tag.cup[data-badge] {
  border: 1px solid #f3c64a; border-radius: 8px; padding: 4px 8px;
  background: rgba(55, 36, 10, .9); color: #ffe6a3; opacity: 1;
  text-shadow: none; box-shadow: 0 0 8px #f3c64a40;
}
html #labels .tag.cup::before, html #labels .tag.cup::after { content: none; }
html.jailau .nav { border: 1px solid #bba16b70; box-shadow: 0 6px 25px #20332438; }
html.jailau .field { background: #f5ecd9; }
.cozy-giveaway summary { cursor: pointer; min-height: 36px; align-items: center; }
.cozy-giveaway:not([open]) { padding-top: 4px; padding-bottom: 4px; }
.cozy-giveaway:not([open]) .gw-h { margin: 0; }
.cozy-giveaway summary:focus-visible { outline: 3px solid #ffe27a; outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .brand, .tag, .panel { scroll-behavior: auto; } }

/* Currency icons; keep in sync with COIN_CSS in coins.js. */
/* role scopes the icons away from the existing .pill.coin game HUD. */
.coin[role="img"] { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; border-radius: 50%; flex-shrink: 0; background: center / contain no-repeat; }
.coin-b[role="img"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'rim'%20x2%3D'100%25'%20y2%3D'100%25'%3E%3Cstop%20stop-color%3D'%23c7793a'%2F%3E%3Cstop%20offset%3D'.45'%20stop-color%3D'%23c7793a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238a4f1e'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'face'%20cx%3D'.35'%20cy%3D'.25'%20r%3D'.8'%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'.7'%2F%3E%3Cstop%20offset%3D'.35'%20stop-color%3D'%23c7793a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238a4f1e'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'15'%20fill%3D'url(%23rim)'%20stroke%3D'%233b291d'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'11.7'%20fill%3D'url(%23face)'%20stroke%3D'%238a4f1e'%20stroke-width%3D'1.5'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'10.5'%20fill%3D'none'%20stroke%3D'white'%20stroke-opacity%3D'.3'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M16%208.5%2021.5%2016%2016%2023.5%2010.5%2016Z%20M16%2012V20'%20fill%3D'none'%20stroke%3D'%238a4f1e'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E"); }
.coin-s[role="img"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'rim'%20x2%3D'100%25'%20y2%3D'100%25'%3E%3Cstop%20stop-color%3D'%23d9dde3'%2F%3E%3Cstop%20offset%3D'.45'%20stop-color%3D'%23d9dde3'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238b929c'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'face'%20cx%3D'.35'%20cy%3D'.25'%20r%3D'.8'%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'.7'%2F%3E%3Cstop%20offset%3D'.35'%20stop-color%3D'%23d9dde3'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238b929c'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'15'%20fill%3D'url(%23rim)'%20stroke%3D'%233b291d'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'11.7'%20fill%3D'url(%23face)'%20stroke%3D'%238b929c'%20stroke-width%3D'1.5'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'10.5'%20fill%3D'none'%20stroke%3D'white'%20stroke-opacity%3D'.3'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M16%208.5%2021.5%2016%2016%2023.5%2010.5%2016Z%20M16%2012V20'%20fill%3D'none'%20stroke%3D'%238b929c'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E"); }
.coin-g[role="img"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'rim'%20x2%3D'100%25'%20y2%3D'100%25'%3E%3Cstop%20stop-color%3D'%23f2c440'%2F%3E%3Cstop%20offset%3D'.45'%20stop-color%3D'%23f2c440'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23b07d12'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'face'%20cx%3D'.35'%20cy%3D'.25'%20r%3D'.8'%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'.7'%2F%3E%3Cstop%20offset%3D'.35'%20stop-color%3D'%23f2c440'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23b07d12'%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'15'%20fill%3D'url(%23rim)'%20stroke%3D'%233b291d'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'11.7'%20fill%3D'url(%23face)'%20stroke%3D'%23b07d12'%20stroke-width%3D'1.5'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'10.5'%20fill%3D'none'%20stroke%3D'white'%20stroke-opacity%3D'.3'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M16%208.5%2021.5%2016%2016%2023.5%2010.5%2016Z%20M16%2012V20'%20fill%3D'none'%20stroke%3D'%23b07d12'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E"); }