/* Tugarin: adaptive Records hub, mobile-only rollout (2026-10).
   No layout rules leak into chapter runtime or other menu sections. */
@font-face{font-family:'Monomakh Unicode';src:url('./fonts/MonomakhUnicode.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Old Standard TT';src:url('./fonts/OldStandardTT-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Old Standard TT';src:url('./fonts/OldStandardTT-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Old Standard TT';src:url('./fonts/OldStandardTT-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}

@media(max-width:540px){
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern{
  --tg-gold:#cdb27f;--tg-text:#d6c39a;--tg-stroke:rgba(175,144,89,.67);

  /* Canonical B13 theme tokens, deliberately pixel-identical to approved UI. */
  --tg-menu-background:radial-gradient(ellipse at 50% 24%,#201c18 0%,#171615 50%,#161514 95%);
  --tg-menu-text:#d6c39a;
  --tg-menu-title-color:#d2b983;
  --tg-menu-subtitle-color:#c1ae88;
  --tg-menu-panel:linear-gradient(109deg,#25211c 0%,#191715 83%);
  --tg-menu-card-title-color:#d2b983;
  --tg-menu-card-desc-color:#c9b590;
  --tg-menu-card-stroke:rgba(175,144,89,.67);
  --tg-menu-frame-strong:rgba(185,153,95,.48);
  --tg-menu-frame-soft:rgba(173,140,82,.19);
  --tg-menu-frame-corner:#a38a60;
  --tg-menu-corner-leaf:#b6a07a;
  --tg-menu-deco-color:#b99760;
  --tg-menu-rule:linear-gradient(90deg,transparent,#806b48 24%,#b49b64 50%,#806b48 76%,transparent);
  --tg-menu-rule-diamond:#a28b65;
  --tg-menu-cross:linear-gradient(90deg,#8c7959,#e0c897,#8c7959);
  --tg-menu-focus:#d8ba78;
  --tg-menu-card-hover:linear-gradient(109deg,#2b251e,#1b1916);
  --tg-menu-card-rule:linear-gradient(90deg,rgba(193,165,109,.60),rgba(193,165,109,.3) 65%,transparent);
  --tg-menu-scroll-track:rgba(176,145,94,.49);
  --tg-menu-scroll-thumb:linear-gradient(180deg,#927a4e,#e7cd94,#927a4e);
  --tg-menu-stamp-filter:saturate(.9);
  --tg-menu-heading-size:clamp(32px,8.3vw,37px);
  --tg-menu-subtitle-size:14px;
  --tg-menu-card-title-size:18px;
  --tg-menu-card-desc-size:14px;
  --tg-menu-card-gap:clamp(10px,1.3vh,13px);
  --tg-menu-grid-column-gap:17px;
  --tg-menu-grid-row-gap:21px;
  --tg-menu-heading-font:'Monomakh Unicode',serif;
  --tg-menu-body-font:'Old Standard TT',serif;

  position:relative!important;display:flex!important;flex-direction:column!important;
  width:100%!important;max-width:none!important;min-width:0!important;
  height:auto!important;min-height:100vh!important;min-height:100dvh!important;
  aspect-ratio:auto!important;box-sizing:border-box!important;
  margin:0!important;padding:0 20px max(15px,env(safe-area-inset-bottom))!important;
  overflow:visible!important;color:var(--tg-menu-text,var(--tg-text));
  background:var(--tg-menu-background)!important;
  font-family:var(--tg-menu-body-font)!important;font-size:16px!important;line-height:1.18!important;
  isolation:isolate;
}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern *,:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern *::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern *::after{box-sizing:border-box}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern button{font-family:'Old Standard TT',serif}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame{position:absolute;inset:0;pointer-events:none;z-index:8}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame::before{content:"";position:absolute;inset:9px;border:1px solid var(--tg-menu-frame-strong);border-radius:5px;box-shadow:inset 0 0 1px rgba(230,204,148,.11)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame::after{content:"";position:absolute;inset:12px;border:1px solid var(--tg-menu-frame-soft);border-radius:3px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame-corner{color:var(--tg-menu-frame-corner);position:absolute;width:37px;height:37px;fill:none;stroke:var(--tg-menu-frame-corner);stroke-width:1.15;opacity:.9;filter:drop-shadow(0 0 2px rgba(204,164,97,.13))}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame-corner>svg{width:100%;height:100%;display:block}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame-corner.tl{left:8px;top:8px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame-corner.tr{right:8px;top:8px;transform:scaleX(-1)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame-corner.bl{left:8px;bottom:8px;transform:scaleY(-1)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-frame-corner.br{right:8px;bottom:8px;transform:scale(-1,-1)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-top-ornament{position:absolute;z-index:2;top:0;left:50%;width:67.2px;height:auto;transform:translateX(-50%);pointer-events:none;opacity:.93}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close{position:absolute;z-index:10;right:17px;top:15px;width:36px;height:36px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close::after{content:"";position:absolute;top:17px;left:7px;width:22px;height:1.3px;background:var(--tg-menu-cross);transform-origin:center;box-shadow:0 0 2px rgba(220,182,114,.15)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close::before{transform:rotate(45deg)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close::after{transform:rotate(-45deg)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close:focus-visible{outline:1px solid var(--tg-menu-focus);outline-offset:2px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-head{flex:0 0 auto;position:relative;z-index:2;text-align:center;padding-top:60px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-head h1{margin:0!important;color:var(--tg-menu-title-color)!important;font-family:var(--tg-menu-heading-font)!important;font-weight:400!important;font-style:normal!important;font-synthesis:none!important;font-size:var(--tg-menu-heading-size)!important;line-height:1.1!important;letter-spacing:0!important;text-transform:uppercase}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-sub{margin:3px 0 0!important;font-family:var(--tg-menu-body-font)!important;font-size:var(--tg-menu-subtitle-size)!important;font-weight:400!important;line-height:1.18!important;color:var(--tg-menu-subtitle-color)!important}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-rule{height:1px;margin:7px auto 0;width:78%;max-width:400px;background:var(--tg-menu-rule);position:relative;opacity:.72}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-rule::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;background:#1b1917;border:1px solid var(--tg-menu-rule-diamond);transform:translateX(-50%) rotate(45deg)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-main{position:relative;z-index:2;width:100%;max-width:690px;margin:0 auto;flex:1 0 auto;padding:20px 0 0;min-width:0}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-cards{display:flex;flex-direction:column;gap:var(--tg-menu-card-gap)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);align-items:stretch;width:100%;min-height:88px;margin:0;padding:0;border:1px solid var(--tg-menu-card-stroke);background:var(--tg-menu-panel);color:var(--tg-menu-card-title-color);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(234,206,145,.04);overflow:visible;-webkit-tap-highlight-color:transparent}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card::after{content:'✥';position:absolute;font-family:'Old Standard TT',serif;font-size:18px;line-height:1;color:var(--tg-menu-deco-color);pointer-events:none;z-index:4}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card::before{left:-8px;top:-7px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card::after{right:-8px;bottom:-7px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card:hover{border-color:#d0b57f;background:var(--tg-menu-card-hover)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card:focus-visible{outline:2px solid #d8bd83;outline-offset:3px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-image{display:block;width:110px;height:100%;min-height:86px;object-fit:cover;object-position:center;border-right:1px solid #77674b;filter:saturate(.86)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-stamps{display:block;position:relative;width:110px;height:100%;min-height:86px;border-right:1px solid #77674b;pointer-events:none}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-stamps img{position:absolute;display:block;z-index:3;max-width:none;width:94.1382px;height:auto;left:1px;bottom:-9px;object-fit:contain;filter:var(--tg-menu-stamp-filter);pointer-events:none}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-copy{min-width:0;display:flex;flex-direction:column;align-self:stretch;justify-content:flex-start;padding:11px 10px 7px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-title{position:relative;display:block;min-height:22px;padding:1px 0;font-family:var(--tg-menu-heading-font)!important;font-size:var(--tg-menu-card-title-size)!important;font-weight:400!important;font-style:normal!important;font-synthesis:none!important;line-height:1!important;white-space:nowrap;color:var(--tg-menu-card-title-color)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-title::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:min(100%,150px);opacity:.46;background:var(--tg-menu-card-rule)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-desc{display:block;margin:1px 0 0!important;font-family:var(--tg-menu-body-font)!important;font-size:var(--tg-menu-card-desc-size)!important;font-weight:400!important;line-height:1.16!important;color:var(--tg-menu-card-desc-color)!important}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer{position:relative;flex:0 0 70px;height:70px;display:flex;align-items:flex-end;justify-content:center;margin-top:4px;padding:0 0 13px;pointer-events:none;z-index:2}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer img{display:block;width:67.2px;height:auto;transform:rotate(180deg);transform-origin:center;opacity:.9}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer::after{content:"";position:absolute;bottom:30px;height:1px;width:min(24%,110px);background:linear-gradient(90deg,transparent,rgba(173,139,87,.65))}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer::before{left:14%}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer::after{right:14%;transform:rotate(180deg)}
}
@media(max-width:350px){
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern{padding-left:17px!important;padding-right:17px!important}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-head{padding-top:56px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-top-ornament{width:59.4px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-main{padding-top:15px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-cards{gap:8px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card{grid-template-columns:82px minmax(0,1fr);min-height:74px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-image,:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-stamps{width:82px;min-height:72px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-stamps img{width:74.6613px;left:0;bottom:-7px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-copy{padding:10px 8px 6px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-title{font-size:16px!important;min-height:20px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-card-desc{font-size:12px!important}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer{flex-basis:55px;height:55px;padding-bottom:9px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer img{width:59.4px}
}
/* Approved compact menu action, based on chapter's real choice button.
   Reusable by subsequent migrated sections; chapter choices stay unchanged. */
.tg-menu-action{--tg-action-gold:#c8aa73;position:relative;display:flex;align-items:center;justify-content:center;min-height:53px;width:100%;padding:9px 33px;border:1px solid var(--tg-action-gold);background:linear-gradient(180deg,rgba(42,35,26,.76),rgba(9,9,9,.86));color:#f5e7c5;font:400 21px/1.2 'Old Standard TT',serif;text-align:center;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);box-shadow:inset 0 0 0 .5px rgba(248,221,151,.18),0 8px 20px #0007;cursor:pointer;}
/* Menu actions use clean edges: no side flourishes, matching approved inventory buttons. */
.tg-menu-action::before,.tg-menu-action::after{content:none;display:none}

.tg-menu-action:hover:not(:disabled){border-color:#efd394;background:linear-gradient(180deg,rgba(52,43,31,.84),rgba(13,12,10,.88))}
.tg-menu-action:disabled{opacity:.5;cursor:default}

/* Records B13: approved symmetrical corner-ornament placement and elegant close icon.
   Mobile hub only. The bottom uses the EXACT same PNG and width as the top,
   mirrored vertically and anchored to the opposite edge.
   Keep all five cards, their borders, text, navigation, and artwork intact. */
@media (max-width:540px) {
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern {
    --tg-records-emblem-size:67.2px;
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-top-ornament {
    top:0!important;
    width:var(--tg-records-emblem-size)!important;
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close {
    top:19px!important;
    right:21px!important;
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close::before,
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-close::after {
    width:23px!important; /* 20px in B12 approved mockup, plus 15% */
    left:6.5px!important;
    top:17px!important;
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-stamps img {
    bottom:-3px!important; /* approved 6px upward offset */
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer {
    position:absolute!important;
    inset:auto 0 0!important;
    height:0!important;
    min-height:0!important;
    flex:none!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
    z-index:2!important;
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer img {
    position:absolute!important;
    left:50%!important;
    bottom:0!important;
    width:var(--tg-records-emblem-size)!important;
    max-width:none!important;
    height:auto!important;
    transform:translateX(-50%) scaleY(-1)!important;
    transform-origin:center!important;
    opacity:.93!important;
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer::before,
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-footer::after {
    display:none!important;
  }
}
@media (max-width:350px) {
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern).tg-records-modern {
    --tg-records-emblem-size:59.4px;
  }
  :is(#records-screen,#heroes-records-screen,#settings-records-screen,.tg-records-modern) .tg-r-stamps img {
    bottom:-1px!important;
  }
}


/* Approved Heroes index B13 — same authored Records shell, mobile RU only.
   The existing hero index owns the portrait sources, unlock order, navigation
   and scroll restoration. Only layout and fading are new. */
@media(max-width:540px){
  #heroes-records-screen.tg-records-modern {
    height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    overflow:hidden!important;
  }
  #heroes-records-screen.tg-records-modern .tg-r-head{z-index:3}
  #heroes-records-screen.tg-records-modern .tg-r-main{
    flex:1 1 auto!important;min-height:0!important;
    display:flex!important;overflow:hidden!important;
    padding:20px 0 48px!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-viewport{
    position:relative!important;inset:auto!important;z-index:3!important;
    display:block!important;flex:1 1 auto!important;min-width:0!important;min-height:0!important;
    width:calc(100% - 12px)!important;height:100%!important;
    margin:0!important;padding:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-viewport::-webkit-scrollbar{display:none!important}
  #heroes-records-screen.tg-records-modern #heroes-records-grid{
    position:relative!important;inset:auto!important;box-sizing:border-box!important;
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;row-gap:var(--tg-menu-grid-row-gap)!important;column-gap:var(--tg-menu-grid-column-gap)!important;
    width:100%!important;min-height:0!important;
    margin:0!important;padding:0 0 20px!important;
    justify-items:center!important;align-items:center!important;align-content:start!important;
    font-size:initial!important;line-height:normal!important;
  }
  #heroes-records-screen.tg-records-modern .tg-h-portrait{
    position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;max-width:118px!important;aspect-ratio:1!important;height:auto!important;
    margin:0!important;padding:0!important;border:0!important;outline:0!important;
    background:transparent!important;box-shadow:none!important;cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  #heroes-records-screen.tg-records-modern .tg-h-portrait:focus-visible{outline:1px solid #d8ba78!important;outline-offset:2px!important}
  #heroes-records-screen.tg-records-modern .tg-h-portrait.unknown{cursor:default!important}
  #heroes-records-screen.tg-records-modern .tg-h-image{
    display:block!important;width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;outline:0!important;
    mix-blend-mode:normal!important;
  }
  #heroes-records-screen.tg-records-modern .tg-h-portrait.unknown .tg-h-image{
    /* Artist's transparent PNG is 320x348; compensate for object-fit
       letterboxing inside 1:1 hero slots. Never add an opaque background. */
    flex:0 0 auto!important;
    width:103.75%!important;
    height:103.75%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    opacity:var(--tg-h-alpha,1)!important;
    filter:brightness(var(--tg-h-light,1)) grayscale(var(--tg-h-gray,0))!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-scroll-track{
    position:absolute!important;top:calc(60px + 86px)!important;right:15px!important;bottom:64px!important;
    left:auto!important;width:5px!important;height:auto!important;
    z-index:5!important;background:transparent!important;
    border-left:1px solid var(--tg-menu-scroll-track)!important;
    touch-action:none!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-scroll-thumb{
    position:absolute!important;left:0!important;width:2px!important;
    min-height:24px!important;border:0!important;border-radius:2px!important;
    background:var(--tg-menu-scroll-thumb)!important;
    box-shadow:0 0 2px rgba(221,191,133,.3)!important;
  }
  #heroes-records-screen.tg-records-modern .tg-r-close{
    right:21px!important;top:19px!important;
  }
  #heroes-records-screen.tg-records-modern .tg-r-close::before,
  #heroes-records-screen.tg-records-modern .tg-r-close::after{
    width:23px!important;left:6.5px!important;top:17px!important;
  }
}
@media(max-width:350px){
  #heroes-records-screen.tg-records-modern #heroes-records-grid{
    row-gap:20px!important;column-gap:10px!important;
  }
  #heroes-records-screen.tg-records-modern .tg-r-main{padding-top:15px!important}
}

/* Approved Records shell shared by Records and Heroes on desktop.
   Only the portrait grid and scrolling behavior are specific to Heroes. */
@media(min-width:541px){

:is(#records-screen,#heroes-records-screen,#settings-records-screen).tg-records-modern{
  --tg-gold:#cdb27f;--tg-text:#d6c39a;--tg-stroke:rgba(175,144,89,.67);

  /* Canonical B13 theme tokens, deliberately pixel-identical to approved UI. */
  --tg-menu-background:radial-gradient(ellipse at 50% 24%,#201c18 0%,#171615 50%,#161514 95%);
  --tg-menu-text:#d6c39a;
  --tg-menu-title-color:#d2b983;
  --tg-menu-subtitle-color:#c1ae88;
  --tg-menu-panel:linear-gradient(109deg,#25211c 0%,#191715 83%);
  --tg-menu-card-title-color:#d2b983;
  --tg-menu-card-desc-color:#c9b590;
  --tg-menu-card-stroke:rgba(175,144,89,.67);
  --tg-menu-frame-strong:rgba(185,153,95,.48);
  --tg-menu-frame-soft:rgba(173,140,82,.19);
  --tg-menu-frame-corner:#a38a60;
  --tg-menu-corner-leaf:#b6a07a;
  --tg-menu-deco-color:#b99760;
  --tg-menu-rule:linear-gradient(90deg,transparent,#806b48 24%,#b49b64 50%,#806b48 76%,transparent);
  --tg-menu-rule-diamond:#a28b65;
  --tg-menu-cross:linear-gradient(90deg,#8c7959,#e0c897,#8c7959);
  --tg-menu-focus:#d8ba78;
  --tg-menu-card-hover:linear-gradient(109deg,#2b251e,#1b1916);
  --tg-menu-card-rule:linear-gradient(90deg,rgba(193,165,109,.60),rgba(193,165,109,.3) 65%,transparent);
  --tg-menu-scroll-track:rgba(176,145,94,.49);
  --tg-menu-scroll-thumb:linear-gradient(180deg,#927a4e,#e7cd94,#927a4e);
  --tg-menu-stamp-filter:saturate(.9);
  --tg-menu-heading-size:clamp(32px,8.3vw,37px);
  --tg-menu-subtitle-size:14px;
  --tg-menu-card-title-size:18px;
  --tg-menu-card-desc-size:14px;
  --tg-menu-card-gap:clamp(10px,1.3vh,13px);
  --tg-menu-grid-column-gap:17px;
  --tg-menu-grid-row-gap:21px;
  --tg-menu-heading-font:'Monomakh Unicode',serif;
  --tg-menu-body-font:'Old Standard TT',serif;

  position:relative!important;display:flex!important;flex-direction:column!important;
  width:100%!important;max-width:none!important;min-width:0!important;
  height:auto!important;min-height:100vh!important;min-height:100dvh!important;
  aspect-ratio:auto!important;box-sizing:border-box!important;
  margin:0!important;padding:0 20px max(15px,env(safe-area-inset-bottom))!important;
  overflow:visible!important;color:var(--tg-menu-text,var(--tg-text));
  background:var(--tg-menu-background)!important;
  font-family:var(--tg-menu-body-font)!important;font-size:16px!important;line-height:1.18!important;
  isolation:isolate;
}
:is(#records-screen,#heroes-records-screen,#settings-records-screen).tg-records-modern *,:is(#records-screen,#heroes-records-screen,#settings-records-screen).tg-records-modern *::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen).tg-records-modern *::after{box-sizing:border-box}
:is(#records-screen,#heroes-records-screen,#settings-records-screen).tg-records-modern button{font-family:'Old Standard TT',serif}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame{position:absolute;inset:0;pointer-events:none;z-index:8}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame::before{content:"";position:absolute;inset:9px;border:1px solid var(--tg-menu-frame-strong);border-radius:5px;box-shadow:inset 0 0 1px rgba(230,204,148,.11)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame::after{content:"";position:absolute;inset:12px;border:1px solid var(--tg-menu-frame-soft);border-radius:3px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame-corner{color:var(--tg-menu-frame-corner);position:absolute;width:37px;height:37px;fill:none;stroke:var(--tg-menu-frame-corner);stroke-width:1.15;opacity:.9;filter:drop-shadow(0 0 2px rgba(204,164,97,.13))}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame-corner>svg{width:100%;height:100%;display:block}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame-corner.tl{left:8px;top:8px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame-corner.tr{right:8px;top:8px;transform:scaleX(-1)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame-corner.bl{left:8px;bottom:8px;transform:scaleY(-1)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-frame-corner.br{right:8px;bottom:8px;transform:scale(-1,-1)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-top-ornament{position:absolute;z-index:2;top:0;left:50%;width:67.2px;height:auto;transform:translateX(-50%);pointer-events:none;opacity:.93}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-close{position:absolute;z-index:10;right:17px;top:15px;width:36px;height:36px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-close::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-close::after{content:"";position:absolute;top:17px;left:7px;width:22px;height:1.3px;background:var(--tg-menu-cross);transform-origin:center;box-shadow:0 0 2px rgba(220,182,114,.15)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-close::before{transform:rotate(45deg)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-close::after{transform:rotate(-45deg)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-close:focus-visible{outline:1px solid var(--tg-menu-focus);outline-offset:2px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-head{flex:0 0 auto;position:relative;z-index:2;text-align:center;padding-top:60px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-head h1{margin:0!important;color:var(--tg-menu-title-color)!important;font-family:var(--tg-menu-heading-font)!important;font-weight:400!important;font-style:normal!important;font-synthesis:none!important;font-size:var(--tg-menu-heading-size)!important;line-height:1.1!important;letter-spacing:0!important;text-transform:uppercase}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-sub{margin:3px 0 0!important;font-family:var(--tg-menu-body-font)!important;font-size:var(--tg-menu-subtitle-size)!important;font-weight:400!important;line-height:1.18!important;color:var(--tg-menu-subtitle-color)!important}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-rule{height:1px;margin:7px auto 0;width:78%;max-width:400px;background:var(--tg-menu-rule);position:relative;opacity:.72}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-rule::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;background:#1b1917;border:1px solid var(--tg-menu-rule-diamond);transform:translateX(-50%) rotate(45deg)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-main{position:relative;z-index:2;width:100%;max-width:690px;margin:0 auto;flex:1 0 auto;padding:20px 0 0;min-width:0}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-cards{display:flex;flex-direction:column;gap:var(--tg-menu-card-gap)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);align-items:stretch;width:100%;min-height:88px;margin:0;padding:0;border:1px solid var(--tg-menu-card-stroke);background:var(--tg-menu-panel);color:var(--tg-menu-card-title-color);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(234,206,145,.04);overflow:visible;-webkit-tap-highlight-color:transparent}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card::after{content:'✥';position:absolute;font-family:'Old Standard TT',serif;font-size:18px;line-height:1;color:var(--tg-menu-deco-color);pointer-events:none;z-index:4}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card::before{left:-8px;top:-7px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card::after{right:-8px;bottom:-7px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card:hover{border-color:#d0b57f;background:var(--tg-menu-card-hover)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card:focus-visible{outline:2px solid #d8bd83;outline-offset:3px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card-image{display:block;width:110px;height:100%;min-height:86px;object-fit:cover;object-position:center;border-right:1px solid #77674b;filter:saturate(.86)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-stamps{display:block;position:relative;width:110px;height:100%;min-height:86px;border-right:1px solid #77674b;pointer-events:none}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-stamps img{position:absolute;display:block;z-index:3;max-width:none;width:94.1382px;height:auto;left:1px;bottom:-9px;object-fit:contain;filter:var(--tg-menu-stamp-filter);pointer-events:none}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card-copy{min-width:0;display:flex;flex-direction:column;align-self:stretch;justify-content:flex-start;padding:11px 10px 7px}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card-title{position:relative;display:block;min-height:22px;padding:1px 0;font-family:var(--tg-menu-heading-font)!important;font-size:var(--tg-menu-card-title-size)!important;font-weight:400!important;font-style:normal!important;font-synthesis:none!important;line-height:1!important;white-space:nowrap;color:var(--tg-menu-card-title-color)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card-title::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:min(100%,150px);opacity:.46;background:var(--tg-menu-card-rule)}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-card-desc{display:block;margin:1px 0 0!important;font-family:var(--tg-menu-body-font)!important;font-size:var(--tg-menu-card-desc-size)!important;font-weight:400!important;line-height:1.16!important;color:var(--tg-menu-card-desc-color)!important}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-footer{position:relative;flex:0 0 70px;height:70px;display:flex;align-items:flex-end;justify-content:center;margin-top:4px;padding:0 0 13px;pointer-events:none;z-index:2}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-footer img{display:block;width:67.2px;height:auto;transform:rotate(180deg);transform-origin:center;opacity:.9}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-footer::before,:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-footer::after{content:"";position:absolute;bottom:30px;height:1px;width:min(24%,110px);background:linear-gradient(90deg,transparent,rgba(173,139,87,.65))}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-footer::before{left:14%}
:is(#records-screen,#heroes-records-screen,#settings-records-screen) .tg-r-footer::after{right:14%;transform:rotate(180deg)}


  /* Records B13: exact existing mobile emblem, close and footer geometry.
     Desktop Heroes keeps its own already-approved desktop overrides. */
  :is(#records-screen,#settings-records-screen).tg-records-modern {
    --tg-records-emblem-size:67.2px;
  }
  :is(#records-screen,#settings-records-screen) .tg-r-top-ornament {
    top:0!important;
    width:var(--tg-records-emblem-size)!important;
  }
  :is(#records-screen,#settings-records-screen) .tg-r-close {
    top:19px!important;
    right:21px!important;
  }
  :is(#records-screen,#settings-records-screen) .tg-r-close::before,
  :is(#records-screen,#settings-records-screen) .tg-r-close::after {
    width:23px!important; /* 20px in B12 approved mockup, plus 15% */
    left:6.5px!important;
    top:17px!important;
  }
  :is(#records-screen,#settings-records-screen) .tg-r-stamps img {
    bottom:-3px!important; /* approved 6px upward offset */
  }
  :is(#records-screen,#settings-records-screen) .tg-r-footer {
    position:absolute!important;
    inset:auto 0 0!important;
    height:0!important;
    min-height:0!important;
    flex:none!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
    z-index:2!important;
  }
  :is(#records-screen,#settings-records-screen) .tg-r-footer img {
    position:absolute!important;
    left:50%!important;
    bottom:0!important;
    width:var(--tg-records-emblem-size)!important;
    max-width:none!important;
    height:auto!important;
    transform:translateX(-50%) scaleY(-1)!important;
    transform-origin:center!important;
    opacity:.93!important;
  }
  :is(#records-screen,#settings-records-screen) .tg-r-footer::before,
  :is(#records-screen,#settings-records-screen) .tg-r-footer::after {
    display:none!important;
  }

  #heroes-records-screen.tg-records-modern {
    height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    overflow:hidden!important;
  }
  #heroes-records-screen.tg-records-modern .tg-r-head{z-index:3}
  #heroes-records-screen.tg-records-modern .tg-r-main{
    flex:1 1 auto!important;min-height:0!important;
    display:flex!important;overflow:hidden!important;
    padding:20px 0 48px!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-viewport{
    position:relative!important;inset:auto!important;z-index:3!important;
    display:block!important;flex:1 1 auto!important;min-width:0!important;min-height:0!important;
    width:calc(100% - 12px)!important;height:100%!important;
    margin:0!important;padding:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-viewport::-webkit-scrollbar{display:none!important}
  #heroes-records-screen.tg-records-modern #heroes-records-grid{
    position:relative!important;inset:auto!important;box-sizing:border-box!important;
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;row-gap:var(--tg-menu-grid-row-gap)!important;column-gap:var(--tg-menu-grid-column-gap)!important;
    width:100%!important;min-height:0!important;
    margin:0!important;padding:0 0 20px!important;
    justify-items:center!important;align-items:center!important;align-content:start!important;
    font-size:initial!important;line-height:normal!important;
  }
  #heroes-records-screen.tg-records-modern .tg-h-portrait{
    position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;max-width:118px!important;aspect-ratio:1!important;height:auto!important;
    margin:0!important;padding:0!important;border:0!important;outline:0!important;
    background:transparent!important;box-shadow:none!important;cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  #heroes-records-screen.tg-records-modern .tg-h-portrait:focus-visible{outline:1px solid #d8ba78!important;outline-offset:2px!important}
  #heroes-records-screen.tg-records-modern .tg-h-portrait.unknown{cursor:default!important}
  #heroes-records-screen.tg-records-modern .tg-h-image{
    display:block!important;width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;outline:0!important;
    mix-blend-mode:normal!important;
  }
  #heroes-records-screen.tg-records-modern .tg-h-portrait.unknown .tg-h-image{
    /* Artist's transparent PNG is 320x348; compensate for object-fit
       letterboxing inside 1:1 hero slots. Never add an opaque background. */
    flex:0 0 auto!important;
    width:103.75%!important;
    height:103.75%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    opacity:var(--tg-h-alpha,1)!important;
    filter:brightness(var(--tg-h-light,1)) grayscale(var(--tg-h-gray,0))!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-scroll-track{
    position:absolute!important;top:calc(60px + 86px)!important;right:15px!important;bottom:64px!important;
    left:auto!important;width:5px!important;height:auto!important;
    z-index:5!important;background:transparent!important;
    border-left:1px solid var(--tg-menu-scroll-track)!important;
    touch-action:none!important;
  }
  #heroes-records-screen.tg-records-modern #heroes-records-scroll-thumb{
    position:absolute!important;left:0!important;width:2px!important;
    min-height:24px!important;border:0!important;border-radius:2px!important;
    background:var(--tg-menu-scroll-thumb)!important;
    box-shadow:0 0 2px rgba(221,191,133,.3)!important;
  }
  #heroes-records-screen.tg-records-modern .tg-r-close{
    right:21px!important;top:19px!important;
  }
  #heroes-records-screen.tg-records-modern .tg-r-close::before,
  #heroes-records-screen.tg-records-modern .tg-r-close::after{
    width:23px!important;left:6.5px!important;top:17px!important;
  }

  #heroes-records-screen.tg-records-modern .tg-r-main{max-width:800px!important}
  #heroes-records-screen.tg-records-modern .tg-h-portrait{max-width:145px!important}
  #heroes-records-screen.tg-records-modern #heroes-records-grid{column-gap:28px!important;row-gap:26px!important}
}


/* Unknown heroes: high-contrast weathered dust, stippling and faint scratches.
   The artist's original 320x348 PNG remains the ONLY artwork.
   Mask this effect with the SAME PNG alpha: no square backing, no matte.
   Geometry matches the image's 103.75% sizing on all viewports. */
#heroes-records-screen.tg-records-modern .tg-h-portrait.unknown::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:103.75%;height:103.75%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background-image:
    radial-gradient(ellipse at 75% 22%,rgba(22,15,11,.77),transparent 59%),
    radial-gradient(ellipse at 22% 74%,rgba(52,35,22,.69),transparent 58%),
    repeating-linear-gradient(116deg,transparent 0 7px,rgba(46,29,14,.18) 7.4px,transparent 8px,transparent 18px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.94' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.20' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='112' height='112' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:100% 100%,100% 100%,100% 100%,48px 48px,112px 112px;
  background-position:center;
  background-blend-mode:multiply,multiply,soft-light,multiply,multiply;
  filter:contrast(1.45) brightness(.87);
  -webkit-mask-image:url("./images/menu/records/heroes/portraits/unknown.png?v=20261012-original-lock-320x348");
  mask-image:url("./images/menu/records/heroes/portraits/unknown.png?v=20261012-original-lock-320x348");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:calc(var(--tg-h-alpha,1) * var(--tg-h-patina,.25));
}

/* Heroes use the exact approved Achievements PNG-light recipe:
   a second, transparent PNG behind the unchanged portrait, with the same
   warm-white rim, 16px/28px halo, and .35-.92 two-second pulse. */
#heroes-records-screen.tg-records-modern .tg-h-portrait.tg-ui-discovery-new:not(.unknown){
  --tg-ui-approved-white-glow: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));
  isolation:isolate;
  filter:var(--tg-ui-approved-white-glow);
}
#heroes-records-screen.tg-records-modern .tg-h-portrait .tg-h-image-light{display:none!important}
#heroes-records-screen.tg-records-modern .tg-h-portrait.tg-ui-discovery-new:not(.unknown) .tg-h-image{
  position:relative!important;z-index:1!important;
}
#heroes-records-screen.tg-records-modern .tg-h-portrait.tg-ui-discovery-new:not(.unknown) .tg-h-image-light{
  display:block!important;position:absolute!important;inset:0!important;z-index:0!important;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;pointer-events:none!important;
  filter:var(--tg-ui-approved-white-glow)!important;
  animation:tg-ui-approved-white-frame 2s ease-in-out infinite!important;
}
@keyframes tg-ui-approved-white-frame{
  0%,100%{opacity:.35}
  50%{opacity:.92}
}
@media(prefers-reduced-motion:reduce){
  #heroes-records-screen.tg-records-modern .tg-h-portrait.tg-ui-discovery-new:not(.unknown) .tg-h-image-light{
    animation:none!important;opacity:.92!important;
  }
}

/* One teaching glow for every non-obvious action, not ornamental gold.
   Same white brightness and two-second pulse on heroes, achievement seals and
   the rewards summary. The first interaction removes tg-ui-discovery-new for
   the WHOLE feature group via TugarinMenuUI.discovery. */
#achievements-screen .ach-rarity-trigger.tg-ui-discovery-new .ach-seal,
#achievements-screen .chronicle-summary.tg-ui-discovery-new{
  animation:tg-ui-discovery-white-pulse 2s ease-in-out infinite!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.30)) drop-shadow(0 0 3px rgba(255,255,255,.20))!important;
  will-change:filter;
}
@keyframes tg-ui-discovery-white-pulse{
  0%,100%{filter:drop-shadow(0 0 1px rgba(255,255,255,.28)) drop-shadow(0 0 3px rgba(255,255,255,.17))}
  50%{filter:drop-shadow(0 0 2px rgba(255,255,255,.66)) drop-shadow(0 0 7px rgba(255,255,255,.35))}
}
@media(prefers-reduced-motion:reduce){
  #achievements-screen .ach-rarity-trigger.tg-ui-discovery-new .ach-seal,
  #achievements-screen .chronicle-summary.tg-ui-discovery-new{animation:none!important}
}

/* Rewards summary heading only: Old Standard TT. */
#achievements-screen .chronicle-ledger-text > .summary-title{font-family:'Old Standard TT',serif}


/* Records: one lightweight, theme-aware informational dialog for sections
   still in development. Independent of the existing approved cards and shell. */
#records-screen.tg-records-modern .tg-r-unavailable{
  width:min(410px,calc(100vw - 36px));
  max-width:calc(100vw - 36px);
  max-height:calc(100dvh - 36px);
  margin:auto;padding:0;
  border:1px solid var(--tg-menu-frame-strong,#b59a68);
  border-radius:4px;
  background:var(--tg-menu-panel,linear-gradient(109deg,#25211c,#191715));
  color:var(--tg-menu-text,#d6c39a);
  font-family:var(--tg-menu-body-font,'Old Standard TT',serif);
  box-shadow:0 16px 65px rgba(0,0,0,.75),inset 0 0 0 1px rgba(234,206,145,.05);
}
#records-screen.tg-records-modern .tg-r-unavailable::backdrop{
  background:rgba(7,6,5,.76);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
#records-screen.tg-records-modern .tg-r-unavailable-panel{
  position:relative;margin:5px;padding:30px 22px 24px;
  border:1px solid var(--tg-menu-frame-soft,rgba(173,140,82,.19));
  text-align:center;
}
#records-screen.tg-records-modern .tg-r-unavailable-heading{
  margin:0;color:var(--tg-menu-title-color,#d2b983);
  font:400 clamp(22px,6vw,27px)/1.12 var(--tg-menu-heading-font,'Monomakh Unicode',serif);
  text-transform:uppercase;
}
#records-screen.tg-records-modern .tg-r-unavailable-rule{
  position:relative;height:1px;width:82%;margin:15px auto 19px;
  background:var(--tg-menu-rule,linear-gradient(90deg,transparent,#b49b64,transparent));
}
#records-screen.tg-records-modern .tg-r-unavailable-rule::after{
  content:"";position:absolute;left:50%;top:-3px;
  width:6px;height:6px;transform:translateX(-50%) rotate(45deg);
  background:#1b1917;border:1px solid var(--tg-menu-rule-diamond,#a28b65);
}
#records-screen.tg-records-modern .tg-r-unavailable-message{
  margin:0 auto 24px;max-width:29ch;
  color:var(--tg-menu-card-desc-color,#c9b590);
  font:400 18px/1.35 var(--tg-menu-body-font,'Old Standard TT',serif);
}
#records-screen.tg-records-modern .tg-r-unavailable-confirm{
  min-width:148px;min-height:42px;padding:8px 22px;
  border:1px solid var(--tg-menu-card-stroke,rgba(175,144,89,.67));
  border-radius:2px;
  background:var(--tg-menu-panel,linear-gradient(109deg,#25211c,#191715));
  color:var(--tg-menu-title-color,#d2b983);
  font:400 16px/1.15 var(--tg-menu-body-font,'Old Standard TT',serif);
  cursor:pointer;
}
#records-screen.tg-records-modern .tg-r-unavailable-confirm:hover{
  background:var(--tg-menu-card-hover,linear-gradient(109deg,#2b251e,#1b1916));
  border-color:var(--tg-menu-focus,#d8ba78);
}
#records-screen.tg-records-modern .tg-r-unavailable-confirm:focus-visible{
  outline:2px solid var(--tg-menu-focus,#d8ba78);outline-offset:3px;
}


/* Settings entry: the real Records shell is displayed above the unchanged
   Settings passage. No alternate frames, fonts or duplicated card CSS. */
#settings-records-screen.tg-records-modern{
  position:fixed!important;
  inset:0!important;
  z-index:2147482000!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
#settings-records-screen.tg-records-modern .tg-r-main{
  padding-bottom:85px;
}
/* Settings home has a long, scrollable page. Frame ornaments track the full
   content height instead of staying at viewport bottom and crossing buttons. */
#settings-records-screen.tg-records-modern[data-tg-settings-mode="main"] .tg-r-frame{
  top:0!important;
  bottom:auto!important;
  height:var(--tg-settings-frame-height,100%)!important;
}
/* Keep the Settings-only bottom emblem in document flow. The shared
   Records shell pins its emblem to the 100dvh viewport, which is wrong for
   the longer scrollable Settings home: it otherwise crosses the cards.
   Other Records/Heroes pages retain their approved pinned emblem. */
#settings-records-screen.tg-records-modern[data-tg-settings-mode="main"] .tg-r-main{
  padding-bottom:18px!important;
}
#settings-records-screen.tg-records-modern[data-tg-settings-mode="main"] .tg-r-footer{
  position:relative!important;
  inset:auto!important;
  flex:0 0 70px!important;
  height:70px!important;
  min-height:70px!important;
  margin:4px 0 0!important;
  padding:0!important;
}

#settings-records-screen.tg-records-modern[data-tg-settings-mode="main"] .tg-game-mode-settings{
  margin:6px 0 19px;
}
#settings-records-screen.tg-records-modern[data-tg-settings-mode="main"] .tg-game-mode-option{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
}

/* Original transparent illustrations keep their proportions inside the
   unchanged Records image slot; do not stretch or crop the artist's logos. */
#settings-records-screen.tg-records-modern .tg-r-card-image.tg-settings-card-icon{
  box-sizing:border-box!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:5px 8px!important;
  background:transparent!important;
  filter:none!important;
}
/* Sound card: lower only the bell illustration by exactly 1px.
   The full-height separator and the rest of the Settings cards stay fixed. */
#settings-records-screen.tg-records-modern .tg-r-card[data-settings-section="sound"] .tg-r-card-image.tg-settings-card-icon{
  object-position:center top!important;
  padding-top:0!important;
  border-right:0!important;
  transform:translateY(0px);
}
#settings-records-screen.tg-records-modern .tg-r-card[data-settings-section="sound"] .tg-r-card-copy{
  box-shadow:-1px 0 0 #77674b;
}


/* Mobile-app viewport: never scroll the black SugarCube document behind a
   Records screen. The approved gold frame stays in its viewport, while its
   content can scroll inside the screen if a smaller phone needs more room.
   This is deliberately limited to Records/Heroes; chapter scrolling remains
   under ChapterRuntime's own control. */
html:has(#records-screen.tg-records-modern),
html:has(#heroes-records-screen.tg-records-modern),
html:has(#settings-records-screen.tg-records-modern),
body:has(#records-screen.tg-records-modern),
body:has(#heroes-records-screen.tg-records-modern),
body:has(#settings-records-screen.tg-records-modern){
  width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
#records-screen.tg-records-modern{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-x:none!important;
  overscroll-behavior-y:none!important;
  -webkit-overflow-scrolling:touch;
}
#heroes-records-screen.tg-records-modern{
  overscroll-behavior:none!important;
}


/* Suppress the browser's elastic page-edge pull on game screens. Do not lock
   document scrolling globally: chapter runtime and long legacy passages may
   still rely on it, unlike the isolated Records viewport above. */
html,body{
  overscroll-behavior-x:none;
  overscroll-behavior-y:none;
}


/* The 1440x2580 painted settings canvases have been retired. The current
   subsection controls sit on the same responsive, unpainted letopis surface
   while their native handlers and saved preferences remain functional. */
#settings-screen.tg-settings-native-modern{
  position:fixed!important;
  inset:0!important;
  z-index:2147481999!important;
  box-sizing:border-box!important;
  display:block!important;
  width:100vw!important;
  min-width:0!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:auto!important;
  background:radial-gradient(ellipse at 50% 24%,#201c18 0%,#171615 50%,#161514 95%)!important;
  color:#d6c39a!important;
  overflow:hidden!important;
}
#settings-screen.tg-settings-native-modern #settings-background,
#settings-screen.tg-settings-native-modern #settings-close{
  display:none!important;
}
#settings-screen.tg-settings-native-modern #settings-content{
  position:absolute!important;
  box-sizing:border-box!important;
  inset:110px 20px 55px!important;
  top:110px!important;bottom:55px!important;
  left:20px!important;right:20px!important;
  width:auto!important;max-width:690px!important;height:auto!important;
  min-width:0!important;min-height:0!important;
  margin:0 auto!important;padding:0 0 8px!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
#settings-screen.tg-settings-native-modern #settings-content.settings-section-content{
  display:flex!important;flex-direction:column!important;
}
#settings-screen.tg-settings-native-modern #settings-content.settings-account-art-content{
  display:block!important;
  pointer-events:auto!important;
}
#settings-screen.tg-settings-native-modern #settings-content .settings-account-scroll-viewport{
  position:absolute!important;
  inset:0!important;
  left:0!important;right:0!important;top:0!important;bottom:0!important;
  width:100%!important;height:100%!important;
  margin:0!important;padding:8px 7px 16px!important;
  overflow-y:auto!important;
}
#settings-records-screen.tg-records-modern[data-tg-settings-mode="section"]{
  background:transparent!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
#settings-records-screen.tg-records-modern[data-tg-settings-mode="section"] .tg-r-head,
#settings-records-screen.tg-records-modern[data-tg-settings-mode="section"] .tg-r-main{
  display:none!important;
}
#settings-records-screen.tg-records-modern[data-tg-settings-mode="section"] .tg-r-close{
  pointer-events:auto!important;
}
@media(max-width:360px){
  #settings-screen.tg-settings-native-modern #settings-content{
    left:17px!important;right:17px!important;
    top:100px!important;bottom:48px!important;
  }
}