/* Цофар - Семь фронтов: поверх стилей «Цофара» — только то, что показывает, что тревоги игровые */
#sfgame { border: 1px solid #34e3cf; background: rgba(52, 227, 207, .1); padding: 8px 10px; margin-bottom: 7px; font-size: 12px; line-height: 1.35; }
#sfgame b { display: block; color: #34e3cf; letter-spacing: .12em; font-size: 13px; margin-bottom: 2px; }
#sfgame a { color: #34e3cf; }
#languages[hidden] { display: none !important; }

/* красная панель во время тревоги: подпись «игровые» сверху */
#alerts::before { content: "ИГРОВЫЕ ТРЕВОГИ · SEVEN FRONTS"; display: block; font-size: 11px; font-weight: bold; letter-spacing: .14em;
  color: rgba(255, 255, 255, .85); margin-bottom: 6px; }

/* кнопки внизу меню: вместо пожертвования и сервисов — Telegram-канал и игра */
#info a#donate { background-image: none; display: flex; align-items: center; justify-content: center; font-size: 12px; }

#tzofar_msg { border-color: #a52a2a; color: #a52a2a; }
#tzofar_msg img { height: 24px; margin-right: 8px; }

/* страницы тревоги и инструкции */
.sf-note { width: 95%; max-width: 1500px; margin: 12px auto 0; padding: 7px 12px; border: 1px solid rgba(52, 227, 207, .5);
  background: rgba(52, 227, 207, .08); border-radius: 5px; color: #dcdcdc; font-size: 13px; }
.sf-note a { color: #34e3cf; }
.sf-view .logo { width: auto !important; }
.sf-view .logo h1 { white-space: nowrap; }

/* ---- игроки: у каждого свой цвет (--sf-pc) ---- */
.sf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sf-pc, #34e3cf); flex: none; display: inline-block; }

/* карточка «Игроки за сутки» в меню; клик по игроку — только его тревоги */
#sfplayers { padding: 0; overflow: hidden; margin-bottom: 7px; }
#sfplayers h4 { margin: 0; padding: 8px; font-size: 14px; color: var(--TextColor, #fff); background: rgba(255, 255, 255, .08); display: flex; justify-content: space-between; align-items: center; }
#sfplayers .sfall { font-size: 11px; padding: 2px 8px; border-radius: 7px; background: #555; cursor: pointer; font-weight: bold; }
#sfplayers .sfall.on { background: #dadada; color: #a52a2a; }
#sfplayers .sfp-list { max-height: 168px; overflow-y: auto; }
#sfplayers .sfp { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; cursor: pointer; border-top: 1px solid rgba(255, 255, 255, .06); }
#sfplayers .sfp:hover { background: rgba(255, 255, 255, .06); }
#sfplayers .sfp.on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px var(--sf-pc); }
#sfplayers .sfp .sf-dot { margin-top: 4px; }
#sfplayers .sfp.live .sf-dot { animation: sfPulse 1.4s ease-in-out infinite; }
@keyframes sfPulse { 50% { transform: scale(1.5); opacity: .6; } }
#sfplayers .sfp-t { min-width: 0; line-height: 1.3; }
#sfplayers .sfp-t b { font-size: 13px; margin-right: 6px; }
#sfplayers .sfp-t em { font-style: normal; font-size: 11px; color: #7fd99a; font-weight: bold; }
#sfplayers .sfp-t i { font-style: normal; font-size: 11px; opacity: .65; }
#sfplayers .sfp-t small { display: block; font-size: 11px; opacity: .75; }
#sfplayers .sfnone { margin: 0; padding: 8px; font-size: 12px; opacity: .7; }

/* красная панель: тревоги разделены по игрокам */
.sf-phead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(0, 0, 0, .2); border-radius: 5px; padding: 7px 10px; margin: 2px 0 8px; font-size: 17px; }
.sf-phead .sf-dot { width: 12px; height: 12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.sf-phead span:last-child:not(.sf-dot) { font-size: 12px; opacity: .85; }
.sf-pbox + .sf-pbox { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .45); }

/* история: чей это обстрел */
.sf-pline { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12px; font-weight: bold; opacity: .85; }

/* выбранный игрок офлайн: серая карта, тревог нет, надпись на весь экран */
body.sf-offline #map { filter: grayscale(1) brightness(.85); }
body.sf-offline #alerts, body.sf-offline .leaflet-marker-pane, body.sf-offline .leaflet-overlay-pane { display: none !important; }
#sfoffline { position: fixed; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  pointer-events: none; background: rgba(20, 22, 24, .35); }
#sfoffline div { text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
#sfoffline b { display: block; font-size: 42px; font-weight: 600; }
#sfoffline span { display: block; font-size: 120px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; line-height: 1.05; }
#sfoffline small { display: block; font-size: 18px; opacity: .85; margin-top: 10px; }
@media (max-width: 700px) { #sfoffline span { font-size: 64px; } #sfoffline b { font-size: 28px; } }

/* тех. работы: серая карта (тестовые тревоги админа видны), плашка поверх карты — под панелями */
body.sf-maint #map .leaflet-tile-pane, body.sf-maint #map .leaflet-google-mutant { filter: grayscale(1) brightness(.8); }
#sfmaint { position: fixed; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center;
  pointer-events: none; background: rgba(20, 22, 24, .25); padding: 16px; }
#sfmaint div { text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); max-width: 900px; }
#sfmaint span { display: block; font-size: 84px; font-weight: 600; line-height: 1.05; }
#sfmaint b { display: block; font-size: 28px; font-weight: 600; margin-top: 12px; }
#sfmaint small { display: block; font-size: 18px; opacity: .85; margin-top: 10px; }
@media (max-width: 700px) { #sfmaint span { font-size: 44px; } #sfmaint b { font-size: 20px; } }
#sftest { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 10001; background: #f5a524; color: #1b1b1b;
  font: 600 13px/1 FontX, Arial, sans-serif; padding: 6px 12px; border-radius: 6px; pointer-events: none; }

/* страницы тревоги и инструкции: игровое время рядом с настоящим */
.alert-info-card .time .sf-gt { font-weight: normal; font-size: .82em; opacity: .85; color: inherit; }

/* карточка «Уведомления» (sf-push.js) */
#sfpush { padding: 0; overflow: hidden; margin-bottom: 7px; }
#sfpush h4 { margin: 0; padding: 8px; font-size: 14px; color: var(--TextColor, #fff); background: rgba(255, 255, 255, .08); }
#sfpush .sfpush-b { padding: 8px; font-size: 12px; line-height: 1.4; }
#sfpush .sfpush-b p { margin: 0 0 6px; }
#sfpush .sfpush-btn { width: 100%; border: 0; border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px; font-weight: bold; color: #fff; background: #d81c0a; cursor: pointer; }
#sfpush .sfpush-btn:hover { background: #ee2a17; }
#sfpush .sfpush-b small { display: block; margin-top: 5px; opacity: .7; font-size: 11px; }
#sfpush .sfpush-on { font-weight: bold; color: #7fd99a; }
#sfpush .sfpush-off { border: 1px solid rgba(255, 255, 255, .25); background: none; color: inherit; border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 11px; cursor: pointer; }
#sfpush .sfpush-err { color: #ff7a6a; }
#sfpush .sfpush-apps { display: block; padding: 7px 8px; font-size: 12px; font-weight: bold; text-decoration: none; color: inherit; border-top: 1px solid rgba(255, 255, 255, .06); opacity: .85; }
#sfpush .sfpush-apps:hover { opacity: 1; background: rgba(255, 255, 255, .06); }

/* sf: страница указания тыла — без карты и без цвета (простой список посёлков) */
.sf-plain .map-container, .sf-plain #scroll-to-map { display: none !important; }
.sf-plain .content { justify-content: center; }
.sf-plain .alert-info-container { width: 100%; max-width: 960px; flex: 1 1 auto; }
.sf-plain .alert-info-card .time, .sf-plain .alert-info-card .time i { color: #cfd3d8 !important; }

/* sf: звук — браузер не играет его, пока по странице ни разу не нажали; плашка просит нажать (sf-shim.js soundGate) */
#sfsound { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 10000; background: #d6262b; color: #fff;
  padding: 10px 18px; border-radius: 22px; font: 600 14px/1.25 system-ui, sans-serif; box-shadow: 0 4px 18px rgba(0,0,0,.35);
  cursor: pointer; border: 0; }
#sfsound:hover { background: #e8353a; }

/* sf: тема «Ретро» — сайт «צבע אדום» 2014 года (sf-retro.js): карта слева, колонка справа, булавки падают */
#sfretro { position: fixed; inset: 0; z-index: 1000; display: none; background: #eaeae4; }
#sfretro, #sfretro * { font-family: Arial, "Arial Hebrew", Helvetica, sans-serif !important; }   /* как сайт 2014 года */
/* появление — «всплывает» с пружинкой, колонка выезжает справа; уход (.out) — булавки лопаются, колонка уезжает, окно гаснет */
#sfretro.on { display: flex; animation: sfr-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
#sfretro.on .sfr-panel { animation: sfr-slide .55s cubic-bezier(.22, 1.2, .36, 1) .08s both; }
#sfretro.out { animation: sfr-out .45s ease-in .25s both; pointer-events: none; }
#sfretro.out .sfr-panel { animation: sfr-slide-out .4s ease-in .1s both; }
#sfretro .sfr-map { position: relative; flex: 1 1 70%; background: #eaeae4; overflow: hidden; }
#sfretro .sfr-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }   /* retro-map.html */
#sfretro .sfr-panel { position: relative; flex: 0 0 30%; min-width: 260px; max-width: 420px; box-sizing: border-box;
  padding: 26px 24px 40px; overflow-y: auto; background: #fff; color: #222; transition: background-color .45s ease, color .45s ease; }
#sfretro.alert .sfr-panel { background: #ff0000; color: #fff; }
#sfretro.alert .sfr-idle, #sfretro:not(.alert) .sfr-red { display: none; }
#sfretro .sfr-idle h2 { margin: 48px 0 10px; color: #1f9b1f; font-size: 30px; font-weight: bold; }
#sfretro .sfr-last { margin-top: 22px; padding: 8px 12px; border: 2px solid #c40000; animation: sfr-li .4s ease-out both; }
#sfretro .sfr-last h3 { margin: 0 0 6px; color: #c40000; font-size: 18px; text-decoration: underline; }
#sfretro .sfr-last time { display: block; color: #c40000; font-size: 20px; font-weight: bold; }
#sfretro .sfr-last p { margin: 6px 0 0; font-size: 17px; }
#sfretro .sfr-red h1 { margin: 6px 0 24px; font-size: 44px; font-weight: bold; animation: sfr-flash .5s ease-in-out 4; }
#sfretro .sfr-red ul { margin: 0; padding: 0; list-style: none; }
#sfretro .sfr-red li { margin: 0 0 20px; font-size: 22px; animation: sfr-li .4s ease-out both; }
#sfretro .sfr-red li b { display: block; font-size: 22px; font-weight: normal; line-height: 1.25; }
#sfretro .sfr-red li b::before { content: "• "; }
#sfretro .sfr-red li span { display: block; padding-right: 16px; font-size: 20px; line-height: 1.25; }
#sfretro .sfr-who { position: absolute; left: 12px; right: 12px; bottom: 10px; direction: ltr; text-align: left; font-size: 11px;
  opacity: .7; }
#sfretro .sfr-close { position: absolute; top: 8px; left: 8px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 30px; cursor: pointer; }
@keyframes sfr-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sfr-out { to { opacity: 0; transform: scale(.94); } }
@keyframes sfr-slide { from { transform: translateX(105%); } to { transform: none; } }
@keyframes sfr-slide-out { to { transform: translateX(105%); } }
@keyframes sfr-li { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes sfr-flash { 50% { opacity: .35; } }
@media (max-width: 700px) {
  #sfretro.on { flex-direction: column-reverse; }
  #sfretro .sfr-panel { flex: 0 0 auto; max-width: none; max-height: 44vh; padding: 16px 18px 34px; }
  #sfretro .sfr-red h1 { font-size: 32px; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { #sfretro *, #sfretro.on { animation: none !important; } }