/* «Сегодня» (H1, shared/ui/today.js, README §70) — один блок в хабе и обеих играх. Цвета и шрифты — переменные страницы (tz/STYLE.md); подключается после стилей страницы.
   Карточки — та же форма, что плитки телефонного меню (shared/ui/phmenu.css: .ph-tile): бумага, полоса цвета раздела слева, значок в цветном квадрате.
   Места: .td-float — колонка между меню и панелью сезона (ПК, игры; координаты ставит PHToday.place), .td-in — первым блоком сетки разделов
   (телефон и узкое окно: карточки по две в ряд), .td-hub — хаб (index.html). Анимации — существующие slideUp (rise), slideDown (drop), popIn. */
:root { --td-lip:#1a124633; --td-lip-1:#1a12462e; --td-scroll:#ffffff59; }   /* подложки — как --ph-lip-2 и --ph-lip меню телефона; полоса прокрутки — как у меню PokéSwarm */
/* те же определения, что у игр (arena/index.html): в хабе и PokéSwarm части из них нет */
@keyframes slideUp { from { opacity:0; transform:translateY(24px) } }
@keyframes slideDown { from { opacity:0; transform:translateY(-24px) } }
@keyframes popIn { from { opacity:0; transform:scale(.94) translateY(16px) } }

.td { display:flex; flex-direction:column; gap:10px; min-width:0; color:var(--ink); font:700 14px/1.3 var(--font); text-align:left; }
.td[hidden] { display:none !important; }
.td-head { align-self:flex-start; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px; max-width:100%; padding:7px 18px 8px; border-radius:99px; background:var(--paper);
  box-shadow:0 3px 0 var(--td-lip-1), var(--shadow-sm); }
.td-head b { font:900 18px/1.2 var(--font-title); }
.td-head .td-date { font:900 13px var(--font-title); color:var(--ink-2); }
.td-head .td-left { font:800 12px var(--font); color:var(--ink-2); }
.td-list { display:flex; flex-direction:column; gap:10px; }

/* ---------- карточка ---------- */
.td-card { --c:var(--blue); position:relative; display:grid; grid-template-columns:40px minmax(0, 1fr); grid-template-areas:"ic tx" "ic bd"; align-items:center; column-gap:12px; row-gap:6px;
  width:100%; min-height:64px; margin:0; padding:10px 14px 10px 19px; border:0; border-radius:18px; background:var(--paper); color:var(--ink); font:inherit; text-align:left; cursor:pointer;
  box-shadow:0 4px 0 var(--td-lip), var(--shadow-sm); transition:transform .16s ease-out, box-shadow .16s ease-out; }
.td-card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, var(--c) 7px, transparent 7px); pointer-events:none; }   /* полоса по форме карточки: не торчит на скруглённых углах */
.td-ic { grid-area:ic; align-self:start; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:color-mix(in srgb, var(--c) 18%, var(--paper)); }
.td-ic img { width:32px; height:32px; image-rendering:pixelated; }
.td-tx { grid-area:tx; display:flex; flex-direction:column; min-width:0; }
.td-tx b { display:block; font:900 15px/1.2 var(--font-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-card:has(> .td-badge) .td-tx b { padding-right:58px; }   /* бейдж — над правым краем, имя под ним не прячется */
.td-tx small { display:block; color:var(--ink-2); font:800 12px/1.3 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-card > :nth-child(3):not(.td-badge) { grid-area:bd; min-width:0; }
.td-card:not(:has(> :nth-child(3):not(.td-badge))) { grid-template-areas:"ic tx"; }
@media (hover:hover) { .td-card:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--td-lip), var(--shadow-sm); } }
.td-card:active { transform:translateY(2px); box-shadow:0 2px 0 var(--td-lip), var(--shadow-sm); }

/* бейдж: «новое» — красный, «голос / забрать» — жёлтый, событие — фиолетовый (форма — как .ph-badge и .sx-badge) */
.td-badge { position:absolute; top:-7px; right:10px; min-width:22px; height:22px; padding:0 8px; border-radius:99px; background:var(--red); color:var(--paper);
  font:900 12px/22px var(--font-title); text-align:center; white-space:nowrap; box-shadow:0 2px 0 var(--red-d); }
.td-badge.claim { background:var(--yellow); color:var(--ink); box-shadow:0 2px 0 var(--yellow-d); }
.td-badge.ev { background:var(--purple); box-shadow:0 2px 0 var(--purple-d); }

/* прогноз: шесть регионов — погода 16×16 ×2 и короткое имя; день шторма — жёлтая черта, закрытый регион — приглушён */
.td-wx { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:2px; }
.td-wxi { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; }
.td-wxi img { width:32px; height:32px; image-rendering:pixelated; }
.td-wxi small { max-width:100%; color:var(--ink-2); font:800 10.5px/1.2 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-wxi.storm small { color:var(--ink); font-weight:900; box-shadow:inset 0 -3px 0 var(--yellow); }
.td-wxi.off { opacity:.5; }
/* экспедиция: 9 звёзд — три цели по три (точки, как у заданий PokéSwarm) */
.td-stars { display:flex; gap:9px; }
.td-stars > span { display:flex; gap:3px; }
.td-stars i, .td-dots i { width:11px; height:11px; border-radius:50%; background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--line); }
.td-stars i.on, .td-dots i.on { background:var(--yellow); box-shadow:inset 0 0 0 2px var(--yellow-d); }
/* задания: три точки и полоса следующего задания; узы — полоса до следующего уровня и строка «Обе игры» */
.td-tk { display:flex; align-items:center; gap:10px; }
.td-dots { display:flex; gap:4px; flex:none; }
.td-bar { display:block; flex:1; min-width:30px; height:8px; border-radius:99px; background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.td-bar i { display:block; height:100%; min-width:4px; border-radius:99px; background:var(--c); }
.td-bond { display:flex; flex-direction:column; gap:4px; }
.td-bond small { color:var(--ink-2); font:800 11.5px/1.25 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- появление: шапка — drop, карточки — rise лесенкой (--d: 0.1 + i·0.04 s), бейдж — popIn; «Меньше движения» — без них (класса td-anim нет) ---------- */
.td-anim .td-head { animation:slideDown .35s ease-out backwards; }
.td-anim .td-card, .td-card.td-new { animation:slideUp .35s ease-out var(--d, 0s) backwards; }
.td-anim .td-badge, .td-new .td-badge { animation:popIn .3s ease-out calc(var(--d, 0s) + .25s) backwards; }

/* ---------- ПК, игры: колонка между меню и панелью сезона ---------- */
.td.td-float { position:absolute; z-index:2; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:8px 6px 12px; margin:-8px -6px 0; scrollbar-width:thin; scrollbar-color:var(--td-scroll) transparent; }
.td.td-float::-webkit-scrollbar { width:6px; } .td.td-float::-webkit-scrollbar-thumb { background:var(--td-scroll); border-radius:3px; }
/* не помещается по высоте — плотнее: без подписей регионов и строки уз */
.td.td-tight .td-list { gap:8px; } .td.td-tight .td-card { min-height:56px; padding-top:7px; padding-bottom:7px; row-gap:4px; }
.td.td-tight .td-wxi small, .td.td-tight .td-bond small, .td.td-tight .td-head .td-left { display:none; }

/* ---------- телефон и узкое окно: первым блоком сетки разделов, карточки по две в ряд (непарная и широкие — во всю ширину) ---------- */
.td.td-in { grid-column:1 / -1; order:-1; gap:8px; }
.td.td-in .td-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.td.td-in .td-card.td-wide { grid-column:1 / -1; }
.td.td-in .td-card { grid-template-areas:"ic tx" "bd bd"; }   /* рисунок карточки — во всю ширину: подписи регионов не режутся */
.td.td-in .td-card:not(.td-wide) { grid-template-columns:32px minmax(0, 1fr); column-gap:9px; padding:15px 10px 10px 16px; }   /* сверху место под бейдж: имя под ним не прячется */
.td.td-in .td-card:not(.td-wide) .td-ic { width:32px; height:32px; border-radius:10px; } .td.td-in .td-card:not(.td-wide) .td-ic img { width:32px; height:32px; }
.td.td-in .td-card:not(.td-wide) .td-tx b { font-size:14px; }
.td.td-in .td-card:not(.td-wide) .td-tx small { font-size:11px; }
.td.td-in .td-card:not(.td-wide):has(> .td-badge) .td-tx b { padding-right:0; }
.td.td-in .td-head { padding:5px 14px 6px; } .td.td-in .td-head b { font-size:16px; }
@media (max-width:420px) { .td.td-in .td-head .td-left { flex-basis:100%; } .td.td-in .td-stars { gap:6px; } .td.td-in .td-stars > span { gap:2px; } }