/* Карта «Как вы спели» после круга «Пой!» (singmap.js) */
.sing-map {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 45;
  width: min(980px, calc(100% - 32px)); padding: 10px 14px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  animation: sm-in .18s ease-out;
}
@keyframes sm-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .sing-map { animation: none; } }
.sm-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sm-head .grow { flex: 1; }
.sm-what { color: var(--muted); }
.sm-canvas { display: block; width: 100%; margin-top: 6px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.sm-legend { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.sm-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-left: 6px; }
.sm-legend i:first-child { margin-left: 0; }
.sm-legend .hit { background: var(--hit); }
.sm-legend .close { background: var(--close); }
.sm-legend .miss { background: var(--miss); }
.sm-report .sm-canvas { margin-top: 8px; }
/* отсчёт перед «Пой!» — крупнее, чтобы его заметили */
.phase.count { font-size: 15px; font-weight: 700; animation: sm-count .5s ease-in-out infinite alternate; }
@keyframes sm-count { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .phase.count { animation: none; } }
/* подсказки поднимаются над картой, чтобы её не закрывать */
body.has-singmap .toast { bottom: var(--sm-toast, 340px); }
/* карту можно растянуть: верх тянет высоту, бока — ширину, верхние углы — и то и другое; шрифт растёт вместе с ней */
.sing-map { max-width: calc(100% - 32px); }
.sm-grip { position: absolute; z-index: 1; display: block; touch-action: none; }
.sm-grip[data-g="n"] { top: -8px; left: 18px; right: 18px; height: 16px; cursor: ns-resize; }
.sm-grip[data-g="w"] { top: 18px; bottom: 18px; left: -8px; width: 16px; cursor: ew-resize; }
.sm-grip[data-g="e"] { top: 18px; bottom: 18px; right: -8px; width: 16px; cursor: ew-resize; }
.sm-grip[data-g="nw"] { top: -8px; left: -8px; width: 26px; height: 26px; cursor: nwse-resize; }
.sm-grip[data-g="ne"] { top: -8px; right: -8px; width: 26px; height: 26px; cursor: nesw-resize; }
/* «ручка» по центру верха — видно, что за неё можно тянуть */
.sm-grip[data-g="n"]::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px;
  background: var(--faint, rgba(255, 255, 255, .25)); transition: background-color .15s ease, width .15s ease, margin .15s ease;
}
.sing-map:hover .sm-grip[data-g="n"]::after, .sing-map.sm-resizing .sm-grip[data-g="n"]::after { background: var(--muted); width: 64px; margin-left: -32px; }
.sing-map.sm-resizing { animation: none; user-select: none; -webkit-user-select: none; }
.sm-legend .grow { flex: 1; }
.sm-tip { color: var(--faint, var(--muted)); font-size: 12px; }
.sing-map.sm-sized .sm-tip { display: none; }
@media (hover: none) { .sm-tip { display: none; } }