/* ---------------------------------------------------------------------------------------------------------------
 * Виджет футбольного поля 3 × 5 зон (docs/match/field-widget.md): разбор травмы в отчёте о матче (PHP — FieldWidget,
 * tpl/field) и комбинации в тренировочном центре (JS — js/field_widget.js). Поле — img_interface/review/field.png
 * (Figma «OT-Fenix» 469:3, чистое, без цифр). Chakra Petch — только цифры и латиница, кириллицы в нём нет.
 * Геометрия: блок 270 × 349, отступ 12, клетка ≈ 82 × 65; центр клетки x = 12 + 82·(колонка + 0,5),
 * y = 12 + 65·(ряд + 0,5). Рисунки поверх — SVG с viewBox="0 0 270 349".
 * ------------------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'Chakra Petch';
    src: url('fonts/ChakraPetch-Bold-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

.fwWrap { width: 270px; }
.fwGoal { font-size: 11px; color: #6b6b6b; text-align: center; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwField {
    position: relative; width: 270px; height: 349px; box-sizing: border-box; padding: 12px;
    background: url('../img_interface/review/field.png') no-repeat center / 100% 100%;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr);
}
.fwArrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .9;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.fwZone { position: relative; display: flex; align-items: center; justify-content: center; }
.fwZoneN {
    font-family: 'Chakra Petch', 'Inter', sans-serif; font-weight: 700; font-size: 22px; line-height: 1; color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .55); opacity: .4;
}
.fwZone.is-on { background: rgba(255, 235, 150, .18); border-radius: 3px; }
.fwZone.is-on .fwZoneN { opacity: .25; }
/* Плашки игроков — имя целиком, может выходить за зону: у крайних колонок прижаты к своему краю поля. */
.fwChips { position: absolute; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 3px; transform: translateY(-50%); }
.fwChips.col-0 { left: 0; align-items: flex-start; }
.fwChips.col-1 { left: 50%; align-items: center; transform: translate(-50%, -50%); }
.fwChips.col-2 { right: 0; align-items: flex-end; }
.fwChip {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 4px; font-size: 12px;
    line-height: 16px; white-space: nowrap; color: #fff; background: rgba(28, 36, 40, .88); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.fwChip b { font-family: 'Chakra Petch', 'Inter', sans-serif; font-weight: 700; }
.fwChip img { width: 16px; height: 16px; }

/* Выбор зоны кликом (форма комбинации) */
.fwField.is-pick .fwZone { cursor: pointer; }
.fwField.is-pick .fwZone:hover { background: rgba(255, 255, 255, .12); border-radius: 3px; }
/* Номер шага комбинации на стрелке */
.fwStepN { font: 700 10px/1 Verdana, sans-serif; fill: #fff; }
/* Схема маршрута (комбинация): стрелки идут из центров зон, поэтому плашки опущены в низ зоны и компактнее */
.fwField.is-route .fwChips { top: 78%; }
.fwField.is-route .fwChip { font-size: 12px; padding: 1px 4px; line-height: 14px; }
/* Зона, куда действию шага нельзя (дальность паса, дриблинга) — приглушена, клик не принимается */
.fwField.is-pick .fwZone.is-blocked { cursor: not-allowed; background: rgba(0, 0, 0, .28); border-radius: 3px; }
.fwField.is-pick .fwZone.is-blocked:hover { background: rgba(0, 0, 0, .28); }
/* исходы матча на схеме (отчёт): бейджи крупнее номеров шагов — схема там в 60%; подсказка по наведению */
.fwBadge { pointer-events: auto; cursor: help; }
.fwBadgeT { font-size: 14px; }
.fwBadgeN { fill: #333; font: 700 14px/1 Verdana, sans-serif; }