#invasion-records-screen.tg-records-modern{max-width:480px;margin:0 auto;min-height:100dvh}

#invasion-records-screen .tg-r-footer::before,#invasion-records-screen .tg-r-footer::after{content:none;display:none}
/* Canonical content-only styles; shared shell comes solely from menu-ui-system.js / records-modern.css. */
/* Menu frame/header/footer/fonts come from menu-ui-system.js + records-modern.css. */
.tg-invasion-content{--head:var(--tg-menu-heading-font,"Monomakh Unicode",Georgia,serif);--body:var(--tg-menu-body-font,"Old Standard TT",Georgia,serif);--ink:#171512;--gold:var(--tg-menu-deco-color,#c1a06c);--gold-light:var(--tg-menu-title-color,#d2b983);--invasion-ui-gold:var(--tg-menu-title-color,#d2b983);--text:var(--tg-menu-text,#ddc69f);--muted:#aa916b;--line:#6f5638;--trust:#5cbe41;--tone:#a95d58}
.tg-invasion-content button{cursor:pointer}
.tg-invasion-content .stage{position:relative;z-index:1;width:100%;height:clamp(475px,calc(100dvh - 170px),755px);isolation:isolate;margin-top:-3px}
.tg-invasion-content .clock-stack{position:absolute;top:calc(8.2% + 30px);left:50%;transform:translateX(-50%);width:68%;aspect-ratio:897/1486;overflow:visible;z-index:1;pointer-events:none;user-select:none}
.tg-invasion-content .clock-stack img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.tg-invasion-content .clock-stack::before{content:"";position:absolute;inset:16% 10% 14%;background:radial-gradient(ellipse at center,rgba(202,163,112,.09),rgba(173,121,72,.035) 55%,transparent 83%);filter:blur(9px);pointer-events:none}
.tg-invasion-content .clock-stack img:first-child{filter:drop-shadow(0 0 5px rgba(218,180,122,.16)) drop-shadow(0 0 14px rgba(207,159,94,.09))}
.tg-invasion-content .clock-stack .needle{transform-origin:50% 47.11%}
.tg-invasion-content .needle.short{transform:rotate(240deg)}
.tg-invasion-content .clock-stack .needle.long,.tg-invasion-content .clock-stack .needle.tension{transform:rotate(0deg)}
.tg-invasion-content .counter{position:absolute;z-index:4;top:3.0%;left:2%;width:96%;height:18.5%;color:var(--invasion-ui-gold);text-align:center;isolation:isolate}
.tg-invasion-content .counter::before{content:"";position:absolute;inset:8px 3px 7px;background:rgba(15,12,11,.51);z-index:-1;clip-path:polygon(0 14%,4% 0,96% 0,100% 14%,100% 86%,96% 100%,4% 100%,0 86%)}
.tg-invasion-content .counter-border{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tg-invasion-content .counter-inner{height:100%;position:relative;display:flex;align-items:stretch;justify-content:space-between;padding:7px 8px 6px;gap:0}
.tg-invasion-content .time-cell{min-width:0;position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tg-invasion-content .time-separator{position:absolute;z-index:2;top:50%;height:58%;width:1px;transform:translate(-50%,-50%);background:rgba(122,98,61,.65);pointer-events:none}
.tg-invasion-content .time-separator:nth-last-child(2){left:33.333333%}
.tg-invasion-content .time-separator:last-child{left:66.666667%}
.tg-invasion-content .time-separator::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--invasion-ui-gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 1.5px #181310}

.tg-invasion-content .time-label{font:400 clamp(14px,4.05vw,18px)/1.13 var(--head);color:var(--invasion-ui-gold);text-transform:uppercase;white-space:nowrap;letter-spacing:.012em;-webkit-text-stroke:.5px #080706;paint-order:stroke fill;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.tg-invasion-content .time-val{font:400 clamp(39px,11.1vw,52px)/.99 var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--invasion-ui-gold);-webkit-text-stroke:.65px #080706;paint-order:stroke fill;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.tg-invasion-content .notices{position:absolute;z-index:6;left:-1.5%;width:103%;bottom:5px;top:auto;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0}
.tg-invasion-content .intel{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:stretch;justify-content:stretch;min-height:106px}
.tg-invasion-content .intel .plaque-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tg-invasion-content .intel .plaque-body{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;text-align:left;border:0;background:none;width:83%;height:auto;min-height:106px;margin:0 auto 0 11%;padding:15px 0 16px;color:var(--text)}
.tg-invasion-content .intel-title{display:block;margin:0;white-space:nowrap;color:var(--invasion-ui-gold);font:400 clamp(17px,4.7vw,20px)/1.1 var(--head);-webkit-text-stroke:.5px #080706;paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,0,0,.8);background:radial-gradient(ellipse at center,rgba(10,8,7,.29) 0%,rgba(10,8,7,.15) 52%,transparent 82%);padding:0}
.tg-invasion-content .intel-divider{display:block;flex:none;overflow:hidden;width:min(132px,41vw);height:11px;margin:-1px 0 1px -11px;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 32%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 32%,transparent 100%)}
.tg-invasion-content .intel-description{display:block;font:400 clamp(16px,4.2vw,18px)/1.24 var(--body);color:var(--invasion-ui-gold);max-width:100%;text-wrap:pretty;overflow-wrap:break-word;-webkit-text-stroke:.48px #080706;paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,0,0,.74);background:radial-gradient(ellipse at center,rgba(10,8,7,.29) 0%,rgba(10,8,7,.14) 52%,transparent 84%);padding:1px 0}
.tg-invasion-content .intel:active .intel-title{color:var(--invasion-ui-gold)}
.tg-invasion-content .notices .intel{min-height:106px;height:auto;flex:0 0 auto}



.tg-invasion-content .rope-connector{position:relative;z-index:1;left:0;top:auto;width:100%;--tg-chain-overlap:10px;height:calc(24px + var(--tg-chain-overlap) + var(--tg-chain-overlap));flex:0 0 calc(24px + var(--tg-chain-overlap) + var(--tg-chain-overlap));margin-block:calc(0px - var(--tg-chain-overlap));pointer-events:none;overflow:visible}
.tg-invasion-content .scrim{position:fixed;inset:0;z-index:9991;background:rgba(6,5,5,.94);display:grid;place-items:center;padding:12px}
.tg-invasion-content .scrim[hidden]{display:none}
.tg-invasion-content .modal{position:relative;width:100%;max-height:calc(100% - 4px);overflow:auto;overscroll-behavior:contain;background:linear-gradient(#1a1714,#151311);border:1px solid #856943;box-shadow:inset 0 0 0 5px #171411,inset 0 0 0 6px #5b4932,0 14px 22px #000;border-radius:3px;scrollbar-width:thin}

.tg-invasion-content .modal-close{position:absolute;top:8px;right:9px;width:34px;height:34px;border:0;background:none;color:#cbb187;font:400 31px/1 var(--body);z-index:10}
.tg-invasion-content .modal-head{position:relative;padding:26px 17px 0;text-align:center}

.tg-invasion-content .modal[data-kind="now"] .modal-head{padding-top:26px}

.tg-invasion-content .modal h2{margin:0;color:var(--tg-menu-title-color,#d2b983);font:400 clamp(24px,6.1vw,29px)/1.13 var(--head)}


.tg-invasion-content .modal-body{padding:0 24px 25px}
.tg-invasion-content .modal-body[hidden]{display:none}
.tg-invasion-content .seal{display:block;width:125px;height:125px;margin:0 auto 13px;object-fit:cover;border-radius:50%;border:1px solid #c4a06b;outline:1px solid #5b4930;outline-offset:5px;box-shadow:0 0 0 7px #1a1714;overflow:hidden;background:radial-gradient(circle at 50% 42%, rgba(201,176,129,.18), rgba(18,15,13,.92) 72%)}

.tg-invasion-content .dispatch{position:relative;color:#e3d0ac;font:400 18.3px/1.32 var(--body);margin:0;padding:0 2px}
.tg-invasion-content .dispatch p{margin:0 0 9px}
.tg-invasion-content .dispatch p:last-child{margin-bottom:0}
.tg-invasion-content .dispatch .key{font-size:20px;line-height:1.25;color:#f0d6a8;text-align:center;margin-bottom:12px}
.tg-invasion-content .detail-rule{display:flex;align-items:center;gap:10px;margin:21px -4px 10px;color:var(--tg-menu-title-color,#d2b983);font:400 clamp(24px,6.1vw,29px)/1.13 var(--head);white-space:nowrap;text-align:center}
.tg-invasion-content .detail-rule::before,.tg-invasion-content .detail-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#94774b)}
.tg-invasion-content .detail-rule::after{transform:rotate(180deg)}
.tg-invasion-content .consequence{display:grid;grid-template-columns:95px minmax(0,1fr);gap:15px;align-items:center}
.tg-invasion-content .hourglass-icon{position:relative;display:block;width:94px;height:127px}
.tg-invasion-content .hourglass-icon .hourglass-svg{width:100%;height:100%;display:block;color:var(--tone)}
.tg-invasion-content .evidence-label{font:400 clamp(19px,4.85vw,21px)/1.18 var(--body);display:block;color:#dbc6a0;margin:1px 0 6px}
.tg-invasion-content .days-delta{color:var(--tone);font:400 37px/1.02 var(--body);display:block;margin:0 0 10px}
.tg-invasion-content .evidence-text{font:400 clamp(16px,4.15vw,18px)/1.3 var(--body);color:#e0c8a4;margin:0}
.tg-invasion-content .trust-content{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:15px}
.tg-invasion-content .trust-mark{position:relative;display:grid;place-items:center;width:132px;height:145px;border-right:1px solid rgba(210,185,131,.45);padding-right:0}
.tg-invasion-content .trust-mark strong{font:400 32px/1 var(--body);color:var(--trust)}
.tg-invasion-content .trust-description{white-space:normal;color:#dbc6a0;font:400 16px/1.34 var(--body)}
.tg-invasion-content .trust-description .trust-accent{display:block;color:var(--trust);margin:0 0 7px}
.tg-invasion-content .trust-description .trust-muted{display:block;color:#dbc6a0}
@media (max-width:360px){.tg-invasion-content .time-val{font-size:clamp(35px,11vw,42px)}
.tg-invasion-content .time-label{font-size:14px}
.tg-invasion-content .intel-title{font-size:17px}
.tg-invasion-content .intel-description{font-size:16px;line-height:1.2}
.tg-invasion-content .intel-divider{width:min(118px,41vw);height:10px;margin:-1px 0 1px -10px}
.tg-invasion-content .modal-body{padding-left:18px;padding-right:18px}
.tg-invasion-content .seal{width:109px;height:109px}
.tg-invasion-content .dispatch{font-size:16.9px}
.tg-invasion-content .dispatch .key{font-size:18px}
.tg-invasion-content .detail-rule{font-size:19px}
.tg-invasion-content .trust-content{grid-template-columns:120px minmax(0,1fr);gap:10px}
.tg-invasion-content .trust-mark{width:120px;height:132px;padding-right:0}
.tg-invasion-content .trust-mark strong{font-size:29px}}
.tg-invasion-content #nowPanel .report-grid{display:grid;grid-template-columns:minmax(104px,37%) minmax(0,1fr);align-items:stretch;gap:13px;min-height:201px;margin:23px 0 14px}
.tg-invasion-content #nowPanel .report-visual{display:flex;align-items:center;justify-content:center;position:relative;border-right:1px solid rgba(210,185,131,.24);padding:0 12px 0 0}
.tg-invasion-content #nowPanel .seal{width:min(100%,125px);height:auto;aspect-ratio:1;margin:0;object-fit:cover}
.tg-invasion-content #nowPanel .dispatch{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:15px;padding:1px 0;margin:0}
.tg-invasion-content #nowPanel .dispatch .report-paragraph{margin:0;color:var(--tg-menu-text,#d6c39a);font:400 clamp(17px,4.3vw,19px)/1.33 var(--body);text-align:left;overflow-wrap:break-word}
.tg-invasion-content #nowPanel .report-fixed{margin:10px auto 10px;text-align:center;color:var(--tg-menu-text,#d6c39a);font:400 clamp(17px,4.3vw,19px)/1.33 var(--body);max-width:100%;padding:0 2px}
.tg-invasion-content #nowPanel .detail-rule{margin:20px -4px 0;gap:10px}
.tg-invasion-content #nowPanel .consequence{grid-template-columns:minmax(116px,40%) minmax(0,1fr);gap:14px;min-height:198px}
.tg-invasion-content #nowPanel .impact-art{height:100%;border-right:1px solid rgba(210,185,131,.45);display:flex;align-items:center;justify-content:center;padding-right:12px}
.tg-invasion-content #nowPanel .hourglass-icon{width:100%;height:154px;max-width:126px}
.tg-invasion-content #nowPanel .impact-copy{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;padding-top:6px}
@media (max-width:360px){
 .tg-invasion-content #nowPanel .report-grid{grid-template-columns:minmax(88px,36%) minmax(0,1fr);gap:10px;min-height:190px;margin-top:17px}
 .tg-invasion-content #nowPanel .report-visual{padding-right:9px}
 .tg-invasion-content #nowPanel .dispatch{gap:12px}
 .tg-invasion-content #nowPanel .dispatch .report-paragraph{font-size:17px;line-height:1.3}
 .tg-invasion-content #nowPanel .consequence{grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:10px;min-height:182px}
 .tg-invasion-content #nowPanel .report-fixed{font-size:17px}
 .tg-invasion-content #nowPanel .hourglass-icon{height:145px;max-width:118px}
 .tg-invasion-content #nowPanel .impact-copy{padding-top:2px}
 .tg-invasion-content #nowPanel .detail-rule{margin-top:15px;margin-bottom:0}
}
/* Only sizing of this unique content is local; frame and typography belong to the shared shell. */
#invasion-records-screen .tg-invasion-content{position:relative;width:calc(100% - 32px);max-width:480px;margin:0 auto;min-width:0;overflow-x:clip}

.tg-invasion-content .trust-mark .trust-emblem{
  position:absolute;inset:0;width:100%;height:100%;color:var(--trust);display:block;
}
.tg-invasion-content .trust-mark strong{position:relative;z-index:1}

/* The white light follows the existing SVG contour; it never animates the authored plaque. */
.tg-invasion-content .plaque-light{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0;filter:drop-shadow(0 0 1px rgba(247,244,236,.55)) drop-shadow(0 0 16px rgba(255,255,255,.26)) drop-shadow(0 0 28px rgba(255,244,221,.18))}
.tg-invasion-content .intel:has(.plaque-body.tg-ui-discovery-new) .plaque-light{animation:tg-invasion-discovery-glow 2s ease-in-out infinite}
@keyframes tg-invasion-discovery-glow{0%,100%{opacity:.35}50%{opacity:.92}}
@media(prefers-reduced-motion:reduce){.tg-invasion-content .intel:has(.plaque-body.tg-ui-discovery-new) .plaque-light{animation:none;opacity:.92}}

@media(min-width:791px){
  #invasion-records-screen .tg-invasion-content{max-width:690px}
  .tg-invasion-content .stage{height:640px}
  .tg-invasion-content .clock-stack{top:calc(1.2% + 25px);left:0;transform:none;width:44.2%}
  .tg-invasion-content .counter{top:4%;left:1%;width:50%;height:16%}
  .tg-invasion-content .notices{left:52%;top:19%;bottom:auto;width:48%;height:auto;justify-content:flex-start}
}
.tg-invasion-content .modal{max-width:440px}

/* The four modal headings reuse the SAME rule as the main “ДО НАШЕСТВИЯ” heading.
   Only its width and spacing are reduced for these smaller headings. */
#invasion-records-screen .tg-invasion-content .tg-r-rule.popup-rule{
  width:min(60%,185px);max-width:185px;height:1px;
  margin:9px auto 14px;opacity:.78;
}
#invasion-records-screen .tg-invasion-content .modal-head .tg-r-rule.popup-rule{margin-top:9px;margin-bottom:17px}
#invasion-records-screen .tg-invasion-content .detail-rule+.tg-r-rule.popup-rule{margin-top:8px;margin-bottom:15px}
@media (max-width:390px){.tg-invasion-content .modal-body{padding-left:18px;padding-right:18px}}
@media(max-height:720px) and (max-width:790px){.tg-invasion-content .intel,.tg-invasion-content .notices .intel{min-height:96px}.tg-invasion-content .intel .plaque-body{min-height:96px;padding:12px 0}.tg-invasion-content .rope-connector{height:calc(19px + var(--tg-chain-overlap) + var(--tg-chain-overlap));flex-basis:calc(19px + var(--tg-chain-overlap) + var(--tg-chain-overlap))}.tg-invasion-content .notices{bottom:3px}}


/* Mobile V36: use the otherwise wasted side gutters for the two full-width
   dispatch plaques. Do not stretch their height or alter the approved SVGs.
   The shared shell/frame stays untouched. */
@media (max-width:790px){
  #invasion-records-screen .tg-invasion-content{
    overflow-x:visible;
  }
  .tg-invasion-content .counter{
    top:-1.5%;
  }
  .tg-invasion-content .clock-stack{
    top:calc(6% + 0px); /* a further 15px up from V36 */
    width:85.68%; /* 81.6% × 1.05, all four authored clock layers together */
  }
  .tg-invasion-content .notices{
    left:-30px;
    width:calc(100% + 60px);
    transform:translateY(clamp(16px,4.5dvh,42px));
  }
}


/* V37: modal chrome is local to "До нашествия"; never change the menu
   shell's own close button or replace the approved ornamental dividers. */
#invasion-records-screen .tg-invasion-content .modal .modal-close{
  position:absolute;
  top:3px;
  right:3px;
  width:42px;
  height:42px;
  z-index:25;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:#cbb187;
  font-size:0; /* the × glyph had an offset font baseline on mobile */
  line-height:0;
  transform:none;
  cursor:pointer;
}
#invasion-records-screen .tg-invasion-content .modal .modal-close::before,
#invasion-records-screen .tg-invasion-content .modal .modal-close::after{
  content:"";
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:25px;
  height:1.5px;
  background:currentColor;
  transform-origin:center;
  pointer-events:none;
}
#invasion-records-screen .tg-invasion-content .modal .modal-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
#invasion-records-screen .tg-invasion-content .modal .modal-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
#invasion-records-screen .tg-invasion-content .modal .modal-close:focus-visible{
  outline:1px solid var(--invasion-ui-gold);
  outline-offset:0;
}
/* The decorative divider sits directly under its headline. Reduce spacing
   in normal flow rather than translating the SVG (which would leave a gap
   and keep the popups unnecessarily tall). */
#invasion-records-screen .tg-invasion-content .modal-head .tg-r-rule.popup-rule{
  margin-top:0!important;
  margin-bottom:9px!important;
}
#invasion-records-screen .tg-invasion-content .modal-body .detail-rule{
  margin-bottom:2px;
}
#invasion-records-screen .tg-invasion-content .modal-body .detail-rule + .tg-r-rule.popup-rule{
  margin-top:0!important;
  margin-bottom:8px!important;
}
/* Preserve truly identical paragraph typography, irrespective of layout. */
#invasion-records-screen .tg-invasion-content #nowPanel .dispatch .report-paragraph,
#invasion-records-screen .tg-invasion-content #nowPanel .report-fixed{
  font:400 clamp(17px,4.3vw,19px)/1.33 var(--body);
}
@media(max-width:360px){
  #invasion-records-screen .tg-invasion-content #nowPanel .dispatch .report-paragraph,
  #invasion-records-screen .tg-invasion-content #nowPanel .report-fixed{
    font-size:17px;
    line-height:1.3;
  }
}