/* vintage-panel.css — боковая панель «Autres millésimes» (vintage-panel.js).
   Палитра и типографика из авторских таблиц Vintages*.svg: ячейки #747172 с белой сеткой,
   дисплейный шрифт. Фон листа — #5e0c23, тот же, что у игрового экрана под ним (2026-08-31):
   свой #5d1519 читался как чужая панель, наложенная на игру. Тёмно-бордовые ЧЕРНИЛА
   (#5d1519 на золотой вкладке и на выбранной ячейке) остаются прежними — это не фон.
   Выезжает слева, поверх навбара (z 324). */
#vintagePanel{position:fixed;inset:0;z-index:340;pointer-events:none;}
#vintagePanel .vint-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .25s;}
#vintagePanel .vint-sheet{
  position:absolute;top:0;bottom:0;left:0;width:min(320px,86vw);
  background:#5e0c23;box-shadow:4px 0 24px rgba(0,0,0,.5);
  transform:translateX(-105%);transition:transform .28s cubic-bezier(.3,1,.4,1);
  display:flex;flex-direction:column;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
}
#vintagePanel.open{pointer-events:auto;}
#vintagePanel.open .vint-backdrop{opacity:1;}
#vintagePanel.open .vint-sheet{transform:translateX(0);}

.vint-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex:0 0 auto;}
.vint-title{font-family:var(--font-display,'Britannic Bold','Britannic',serif);color:#f4e9c8;font-size:17px;letter-spacing:.06em;text-transform:uppercase;}
.vint-close{background:none;border:1px solid rgba(244,233,200,.5);color:#f4e9c8;border-radius:8px;width:32px;height:32px;font-size:14px;line-height:1;cursor:pointer;flex:0 0 auto;}

.vint-tabs{display:flex;gap:6px;margin-bottom:12px;flex:0 0 auto;}
.vint-tab{
  flex:1;padding:8px 2px;font-family:var(--font-display,'Britannic Bold','Britannic',serif);
  font-size:12.5px;letter-spacing:.02em;color:#f4e9c8;background:transparent;
  border:1.5px solid rgba(244,233,200,.55);border-radius:8px;cursor:pointer;
}
.vint-tab.on{background:#f4e9c8;color:#5d1519;border-color:#f4e9c8;font-weight:700;}

.vint-grid-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Диапазон-подсказка миллезима (vint.rangeHint) — над таблицей, в ставочном режиме. */
.vint-range{margin:0 auto 8px;color:#f4e9c8;font-size:12.5px;line-height:1.4;text-align:center;}
.vint-block{display:grid;grid-template-columns:1fr 1fr;border:3px solid #fff;position:relative;width:90%;margin:0 auto;}
.vint-cell{
  position:relative;
  background:#747172;border:1.5px solid #fff;color:#fff;
  font-family:var(--font-display,'Britannic Bold','Britannic',serif);
  font-size:19px;letter-spacing:.03em;padding:12px 0;text-align:center;cursor:pointer;
  transition:background .12s;
}
@media (hover: hover){.vint-cell:hover{background:#8d8a8b;}}
.vint-cell:active{background:#c9a550;color:#5d1519;}
/* Выбранная ставка-год — стойкая золотая подсветка (панель остаётся открытой). */
.vint-cell.sel{background:#c9a550;color:#5d1519;box-shadow:inset 0 0 0 2px #fff;font-weight:700;}
/* Год вне 10-летней подсказки-декады — серый и некликабельный (только ставочный режим).
   pointer-events:none гасит hover/active-вспышку; клик проходит «сквозь» на пустую сетку. */
.vint-cell.off{background:#3c3536;color:rgba(255,255,255,.30);cursor:not-allowed;pointer-events:none;}
/* Шеваль, задевающий год вне подсказки, — не реагирует (клик проходит на ячейку под ним). */
.vint-ch.off{pointer-events:none;cursor:default;}
/* …и его золотая точка-подсказка ×4 не показывается — иначе намекала бы на активную ставку. */
.vint-ch-c.off::after{display:none;}

/* Зоны шеваля — прозрачные хитбоксы на линиях сетки (×2) и перекрёстках (×4).
   Координаты в % считает vintage-panel.js из самой сетки. */
.vint-ch{position:absolute;cursor:pointer;z-index:2;}
.vint-ch:active{background:rgba(201,165,80,.55);}
/* Выбранный шеваль подсвечивает сами ячейки-годы (×2 → 2, ×4 → 4) через .vint-cell.sel;
   на линии/перекрёстке остаётся одна фишка — так видно, какие годы охватывает ставка. */
.vint-ch-v{left:50%;width:22px;transform:translateX(-50%);}
.vint-ch-h{height:20px;width:50%;transform:translateY(-50%);}
.vint-ch-c{left:50%;width:28px;height:28px;transform:translate(-50%,-50%);z-index:3;}
/* золотая точка на перекрёстке — подсказка, что угол ставится (×4) */
.vint-ch-c::after{
  content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  background:#c9a550;border:1.5px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
}
/* Подсказка про шеваль — ФУТЕР листа, а не последний ребёнок скроллера (2026-08-31): внутри
   .vint-grid-wrap её нижние строки срезались краем экрана, и увидеть их можно было только
   домотав таблицу до конца. flex:0 0 auto резервирует ей место, а нижний safe-area-паддинг
   листа держит её над домашним индикатором. */
.vint-foot{flex:0 0 auto;}
.vint-hint{
  margin-top:10px;color:rgba(244,233,200,.75);font-size:11.5px;line-height:1.45;text-align:center;
}
/* Фишка на выбранной ячейке/шевале — как жетон на основном поле (тот же drop-эффект). */
.vint-tok{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;pointer-events:none;z-index:4;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));animation:vintDrop .2s ease-out;
}
@keyframes vintDrop{
  from{transform:translate(-50%,-50%) scale(1.7);opacity:.15;}
  to{transform:translate(-50%,-50%) scale(1);opacity:1;}
}