/* 1.5 Anniversary Special Design — Teko on display chrome only.
   Keep --font-body on site stacks (Roboto / locale CJK) for readable prose.
   Scoped to html.ggen-15. CSS-only; no GSAP. */

html.ggen-15{
  --g15-cyan:0 217 255;
  --g15-blue:0 140 255;
  --font-teko:"Teko",'RobotoMediumNumbers',-apple-system,BlinkMacSystemFont,'Segoe UI','Yu Gothic UI','Yu Gothic','Meiryo',sans-serif;
  /* EN HUD chrome = Teko; CJK locales override --font-hud to game display faces */
  --font-hud:var(--font-teko),Teko,sans-serif;
  --font-brand:"Teko",var(--font-body);
  --g15-chamfer:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  --g15-chamfer-sm:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  /* Slightly brighter secondary/muted so Teko-era UI stays readable on dark */
  --text-secondary:#c8d2e4;
  --text-muted:#9aa8c0;
}
html.ggen-15[data-ui-lang="JA"],
html.ggen-15[data-ui-lang="JP"]{
  --font-teko:"Teko",'Noto Sans JP','ShinGoPr6DeBold','RobotoMediumNumbers',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* 1.5 CJK chrome: ShinGo first (classic keeps Noto-first --font-body) */
  --font-hud:'ShinGoPr6DeBold','Noto Sans JP','RobotoMediumNumbers',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-brand:"Teko",var(--font-body);
}
html.ggen-15[data-ui-lang="TW"],
html.ggen-15[data-ui-lang="HK"]{
  --font-teko:"Teko",'Noto Sans JP','UDShinGoStdTCMed','RobotoMediumNumbers','ShinGoPr6DeBold',-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei UI','Microsoft JhengHei',sans-serif;
  /* 1.5 CJK chrome: UDShinGo first (classic keeps Noto-first --font-body) */
  --font-hud:'UDShinGoStdTCMed','Noto Sans JP','ShinGoPr6DeBold','RobotoMediumNumbers',-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei UI','Microsoft JhengHei',sans-serif;
  --font-brand:"Teko",var(--font-body);
}

/* Header toggle — sit just after brand / emblem in BOTH Special and Classic
   (same spot when switching modes). */
.header-15-slot{
  display:inline-flex;
  flex:0 0 auto;
  min-width:0;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  margin:0 12px 0 4px;
  /* Empty flex gutter must not steal clicks from lang / support */
  pointer-events:none;
}
.header-15-slot .header-15-toggle{
  pointer-events:auto;
}
/* Pack brand + toggles left; support/lang right — always (not only ggen-15) */
.app-header .header-inner:has(.header-15-slot){
  justify-content:flex-start;
}
.app-header .header-inner:has(.header-15-slot) .header-controls{
  margin-left:auto;
}
.header-15-toggle{
  appearance:none;border:1px solid rgba(0,217,255,.55);
  background:rgba(0,217,255,.1);color:#7af0ff;
  font-family:var(--font-teko),Teko,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:48px;
  padding:6px 18px;
  cursor:pointer;line-height:1;
  clip-path:var(--g15-chamfer-sm,polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px));
  transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),color .2s cubic-bezier(.2,0,0,1);
}
.header-15-toggle:hover{background:rgba(0,217,255,.2);color:#fff}
.header-15-toggle.is-active{
  background:linear-gradient(95deg,rgba(0,217,255,.35),rgba(0,140,255,.25));
  border-color:#00d9ff;color:#fff;
}
.header-15-toggle--special{
  padding:4px 8px;
  line-height:0;
  /* Contain badge glow so it cannot paint over brand / Classic */
  overflow:hidden;
  isolation:isolate;
  max-width:min(220px,40vw);
}
.header-15-toggle--special img{
  display:block;height:36px;width:auto;max-width:100%;
  object-fit:contain;object-position:center;
  /* screen blend washed the cyan glow across the brand title on mobile */
  mix-blend-mode:normal;
}

/* Soft full-bleed header — blends into page; quiet hex, no chamfer plate. */
html.ggen-15 .app-header{
  background:linear-gradient(180deg,rgba(10,14,23,.92) 0%,rgba(10,14,23,.78) 70%,rgba(10,14,23,.2) 100%);
  border-bottom:none;
  box-shadow:none;
  backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
}
/* header-inner — no plate/chamfer; hex wash only. Stack ABOVE #navTabsShell. */
html.ggen-15 .app-header .header-inner{
  position:relative;
  z-index:5;
  isolation:isolate;
  overflow:visible;
  margin:0 auto;
  max-width:1600px;
  background:transparent;
  border:none;
  box-shadow:none;
}
html.ggen-15 .app-header .header-inner::after{
  display:none;
}
/* Quiet pointy-top hex — dim, blends into background */
html.ggen-15 .app-header .header-inner::before{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.249' height='42' viewBox='0 0 24.249 42'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%2300d9ff' stroke-width='1.5' opacity='.22'%3E%3Cpath d='M12.124 0L24.249 7v14L12.124 28 0 21V7z'/%3E%3Cpath d='M0 21L12.124 28v14L0 49l-12.124-7V28z'/%3E%3Cpath d='M24.249 21L36.373 28v14L24.249 49 12.124 42V28z'/%3E%3C/g%3E%3Cg stroke='%237af0ff' stroke-width='.6' opacity='.4'%3E%3Cpath d='M12.124 0L24.249 7v14L12.124 28 0 21V7z'/%3E%3Cpath d='M0 21L12.124 28v14L0 49l-12.124-7V28z'/%3E%3Cpath d='M24.249 21L36.373 28v14L24.249 49 12.124 42V28z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:36px 62px;
  background-repeat:repeat;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.35) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.35) 100%);
}
html.ggen-15 .app-header .header-inner > *{
  position:relative;z-index:2;
}
html.ggen-15 .app-header .header-controls{
  position:relative;
  z-index:30;
  flex-shrink:0;
}
html.ggen-15 .app-header .lang-selector{
  position:relative;
  z-index:40;
}
html.ggen-15 .app-header .lang-dropdown{
  z-index:300;
  background:var(--bg-card);
  isolation:isolate;
}
html.ggen-15 .app-header .brand-text{
  font-family:var(--font-teko);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(0,217,255,.28);
}
/* Brand emblem behind title — larger under Special Design; Y nudged down for Teko metrics */
html.ggen-15 .app-header .brand-title-row::before{
  width:108px;
  height:58px;
  opacity:.82;
  transform:translate(calc(-50% + var(--brand-emblem-optical-x)),-42%);
}
html.ggen-15 .app-header .brand-sub{
  letter-spacing:.08em;
  color:rgb(122,240,255);
  opacity:.85;
}

/* Nav — prefer wrap on foldable / tablet widths so tabs are not clipped;
   wide desktop keeps single-row scroll with edge cues. */
html.ggen-15 #navTabsShell{
  position:relative;
  z-index:1;
  overflow:visible;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:0;
  background:linear-gradient(180deg,rgba(10,14,23,.25) 0%,transparent 100%);
  border-bottom:1px solid rgba(42,54,84,.45);
}
html.ggen-15 #navTabs{
  flex-wrap:wrap;
  overflow-x:visible;
  overflow-y:visible;
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
@media(min-width:1101px){
  html.ggen-15 #navTabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  html.ggen-15 #navTabs::-webkit-scrollbar{display:none;width:0;height:0}
}
html.ggen-15 #navTabs .nav-tab,
html.ggen-15 .nav-tab{
  font-family:var(--font-teko);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  flex-shrink:0;
}
html.ggen-15 #navTabsShell .nav-tabs-edge-hint{
  position:absolute;top:0;bottom:0;z-index:3;
  display:flex;align-items:center;width:56px;border:none;cursor:pointer;
  color:var(--text-secondary);opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
html.ggen-15 #navTabsShell .nav-tabs-edge-hint--right{
  right:0;justify-content:flex-end;padding:0 max(10px,env(safe-area-inset-right,0px)) 0 24px;
  background:linear-gradient(90deg,transparent 0%,rgba(8,12,24,.78) 38%,rgba(8,12,24,.96) 100%);
}
html.ggen-15 #navTabsShell .nav-tabs-edge-hint--left{
  left:0;justify-content:flex-start;padding:0 24px 0 max(10px,env(safe-area-inset-left,0px));
  background:linear-gradient(270deg,transparent 0%,rgba(8,12,24,.78) 38%,rgba(8,12,24,.96) 100%);
}
html.ggen-15 #navTabsShell.nav-tabs-shell--scroll-right .nav-tabs-edge-hint--right:not([hidden]){
  opacity:1;pointer-events:auto;
}
html.ggen-15 #navTabsShell.nav-tabs-shell--scroll-left .nav-tabs-edge-hint--left:not([hidden]){
  opacity:1;pointer-events:auto;
}
html.ggen-15 #navTabsShell.nav-tabs-shell--scroll-right .nav-tabs-edge-chevron,
html.ggen-15 #navTabsShell.nav-tabs-shell--scroll-left .nav-tabs-edge-chevron{
  color:#7af0ff;opacity:1;font-size:22px;
}

html.ggen-15 .lang-btn,
html.ggen-15 .kofi-header-link,
html.ggen-15 .alipayhk-header-btn,
html.ggen-15 .header-controls{
  font-family:var(--font-teko);
}
/* Prose / lists / modals stay on readable --font-body (not Teko) */

/* Browse panels — filters / cards / tables (all tabs) */
html.ggen-15 .main-content .rarity-filter-btn,
html.ggen-15 .main-content .role-filter-dd-btn,
html.ggen-15 .main-content .browse-filters-clear-btn,
html.ggen-15 .main-content .list-view-toggle,
html.ggen-15 .tm-browse-shortcut{
  border-radius:0;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
html.ggen-15 .tm-browse-shortcut{
  font-family:var(--font-teko),Teko,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.1em;
  border-color:rgba(0,217,255,.35);
  background:linear-gradient(95deg,rgba(0,217,255,.12),rgba(0,140,255,.06));
  color:#7af0ff;
  box-shadow:none;
}
html.ggen-15 .tm-browse-shortcut:hover,
html.ggen-15 .tm-browse-shortcut:focus-visible{
  border-color:#00d9ff;color:#fff;
  background:linear-gradient(95deg,rgba(0,217,255,.28),rgba(0,140,255,.16));
}
html.ggen-15[data-ui-lang="JA"] .tm-browse-shortcut-label,
html.ggen-15[data-ui-lang="TW"] .tm-browse-shortcut-label,
html.ggen-15[data-ui-lang="HK"] .tm-browse-shortcut-label,
html.ggen-15[data-ui-lang="JP"] .tm-browse-shortcut-label{
  font-family:var(--font-hud);
  text-transform:none;
  letter-spacing:.02em;
  font-weight:700;
  font-size:12px;
}
html.ggen-15 .main-content .page-btn,
html.ggen-15 .main-content .role-filter-btn,
html.ggen-15 .main-content .source-filter-btn{
  border-radius:0 !important;
  font-family:var(--font-teko);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  clip-path:var(--g15-chamfer-sm);
  border-color:rgba(0,217,255,.4);
}
html.ggen-15 .main-content .rarity-filter-btn,
html.ggen-15 .main-content .role-filter-dd-btn{
  font-size:15px;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.08),transparent 55%),
    var(--bg-input);
}
html.ggen-15 .main-content .rarity-filter-btn:hover,
html.ggen-15 .main-content .role-filter-dd-btn:hover,
html.ggen-15 .main-content .browse-filters-clear-btn:hover{
  border-color:#00d9ff;
  color:#fff;
}
html.ggen-15 .main-content .filter-input,
html.ggen-15 .main-content input[type=search],
html.ggen-15 .main-content select{
  border-radius:0 !important;
  font-family:var(--font-teko);
  letter-spacing:.04em;
  clip-path:var(--g15-chamfer-sm);
  border-color:rgba(0,217,255,.35);
}
html.ggen-15 .main-content .list-toolbar-count,
html.ggen-15 .main-content .browse-toolbar-label,
html.ggen-15 .main-content .section-title,
html.ggen-15 .main-content label,
html.ggen-15 .main-content .pager-info{
  font-family:var(--font-teko);
  letter-spacing:.06em;
  text-transform:uppercase;
}

html.ggen-15 .main-content .list-grid-card{
  border-radius:0 !important;
  clip-path:var(--g15-chamfer);
  border:1px solid rgba(0,217,255,.42) !important;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.07),transparent 55%),
    rgba(9,20,39,.94) !important;
  box-shadow:none !important;
}
html.ggen-15 .main-content .list-grid-card:hover{
  border-color:#00d9ff !important;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.12),transparent 55%),
    rgba(12,24,44,.96) !important;
  box-shadow:none !important;
}
html.ggen-15 .main-content .list-grid-card.list-detail-active,
html.ggen-15 .main-content .list-grid-card.list-detail-active:hover{
  border-color:#00d9ff !important;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.14),transparent 55%),
    rgba(12,24,44,.98) !important;
}
html.ggen-15 .main-content .list-grid-card:focus-visible{
  outline:2px solid rgba(0,217,255,.7);
  outline-offset:3px;
}
html.ggen-15 .main-content .list-grid-card-name,
html.ggen-15 .main-content .list-grid-card-stats,
html.ggen-15 .main-content .list-grid-stat-l{
  font-family:var(--font-teko);
  font-weight:600;
  letter-spacing:.04em;
}
html.ggen-15 .main-content .list-grid-card-name{text-transform:uppercase}
html.ggen-15 .main-content .data-table,
html.ggen-15 .main-content .data-table th,
html.ggen-15 .main-content .data-table td{
  font-family:var(--font-teko);
  letter-spacing:.03em;
}
html.ggen-15 .main-content .data-table th{
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.06em;
}

/* Detail modals (all entity types) */
html.ggen-15 #detailModal .modal-content{
  position:relative;
  font-family:var(--font-body);
  border-radius:0 !important;
  border:1px solid rgba(0,217,255,.45);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 40px rgba(0,217,255,.08);
  background:
    radial-gradient(80% 50% at 8% 0%,rgba(0,217,255,.08),transparent 50%),
    var(--bg-modal,var(--bg-card,#0a1422));
}
html.ggen-15 #detailModal .modal-content .detail-title,
html.ggen-15 #detailModal .modal-content .section-title,
html.ggen-15 #detailModal .modal-content .modal-top-label,
html.ggen-15 #detailModal .modal-content .modal-entity-id,
html.ggen-15 #detailModal .modal-content .stat-label,
html.ggen-15 #detailModal .modal-content .lb-label,
html.ggen-15 #detailModal .modal-content .detail-role-label,
html.ggen-15 #detailModal .modal-content .toggle-map-btn,
html.ggen-15 #detailModal .modal-content .detail-tab,
html.ggen-15 #detailModal .modal-content .lb-icon-btn,
html.ggen-15 #detailModal .modal-content .page-btn,
html.ggen-15 #detailModal .modal-content button:not(.close-btn){
  font-family:var(--font-teko);
  letter-spacing:.05em;
}
html.ggen-15 #detailModal .modal-content .detail-title,
html.ggen-15 #detailModal .modal-content .section-title,
html.ggen-15 #detailModal .modal-content .modal-top-label{
  text-transform:uppercase;
  font-weight:600;
}
html.ggen-15 #detailModal .modal-content .section-title{
  color:rgb(0,140,255);
  text-shadow:0 0 16px rgba(0,217,255,.2);
}
html.ggen-15 #detailModal .modal-content .detail-section,
html.ggen-15 #detailModal .modal-content .stat-block,
html.ggen-15 #detailModal .modal-content .weapon-card,
html.ggen-15 #detailModal .modal-content .ability-card,
html.ggen-15 #detailModal .modal-content .skill-card{
  border-radius:0 !important;
  clip-path:var(--g15-chamfer-sm);
  border-color:rgba(0,217,255,.28);
}

/* Investment Priority + Banner Timeline / Latest Release cards */
html.ggen-15 .spi-card,
html.ggen-15 .lr-card,
html.ggen-15 .bt-lr-tile,
html.ggen-15 .bt-vote-extra-thumb,
html.ggen-15 .main-content .spi-card,
html.ggen-15 .main-content .lr-card,
html.ggen-15 .main-content .bt-lr-tile,
html.ggen-15 .main-content .bt-vote-extra-thumb{
  border-radius:0 !important;
  clip-path:var(--g15-chamfer);
}
html.ggen-15 .spi-card,
html.ggen-15 .main-content .spi-card{
  border:1px solid rgba(0,217,255,.4);
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.07),transparent 55%),
    var(--bg-card);
  box-shadow:none;
}
html.ggen-15 .spi-card:hover,
html.ggen-15 .spi-card.is-db-selected,
html.ggen-15 .main-content .spi-card:hover,
html.ggen-15 .main-content .spi-card.is-db-selected{
  border-color:#00d9ff;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.12),transparent 55%),
    var(--bg-card-hover);
}
html.ggen-15 .spi-card-name,
html.ggen-15 .lr-card-name,
html.ggen-15 .main-content .spi-card-name,
html.ggen-15 .main-content .lr-card-name{
  font-family:var(--font-teko);
  letter-spacing:.04em;
  text-transform:uppercase;
}
html.ggen-15 .lr-card:not(.bt-lr-tile--limited),
html.ggen-15 .main-content .lr-card:not(.bt-lr-tile--limited){
  border:1px solid rgba(0,217,255,.4);
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.07),transparent 55%),
    var(--bg-card);
  box-shadow:none;
}
html.ggen-15 .lr-card:not(.bt-lr-tile--limited):hover,
html.ggen-15 .main-content .lr-card:not(.bt-lr-tile--limited):hover{
  border-color:#00d9ff;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(0,217,255,.12),transparent 55%),
    var(--bg-card-hover);
}
/* Limited tiles keep gradient border chrome; chamfer clip only */
html.ggen-15 .lr-card.bt-lr-tile--limited,
html.ggen-15 .main-content .lr-card.bt-lr-tile--limited{
  border-radius:0 !important;
}
html.ggen-15 .spi-bucket-head h3,
html.ggen-15 .spi-role-label,
html.ggen-15 .bt-feat-label,
html.ggen-15 .main-content .spi-bucket-head h3,
html.ggen-15 .main-content .spi-role-label,
html.ggen-15 .main-content .bt-feat-label{
  font-family:var(--font-teko);
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:768px){
  /* Brand + support on row 1; Special/Classic on full-width row 2 — stops badge covering title */
  .app-header .header-inner:has(.header-15-slot){
    flex-wrap:wrap;
    align-items:center;
    row-gap:6px;
  }
  .app-header .header-inner:has(.header-15-slot) .header-brand{
    position:relative;
    z-index:3;
    flex:1 1 0;
    min-width:0;
    max-width:calc(100% - 8px);
  }
  .app-header .header-inner:has(.header-15-slot) .header-controls{
    order:2;
    margin-left:auto;
    flex:0 1 auto;
  }
  .header-15-slot{
    order:3;
    flex:1 1 100%;
    width:100%;
    max-width:100%;
    margin:0;
    gap:8px;
    justify-content:flex-start;
  }
  .header-15-toggle--special{
    padding:3px 6px;
    min-height:36px;
    max-width:min(200px,62vw);
    overflow:hidden;
    isolation:isolate;
  }
  .header-15-toggle--special img{
    height:26px !important;
    width:auto !important;
    max-width:100% !important;
    mix-blend-mode:normal !important;
  }
  .header-15-toggle{
    font-size:12px;
    padding:4px 12px;
    min-height:36px;
  }
  html.ggen-15 .app-header .brand-title-row::before{
    width:92px;
    height:50px;
  }
  html.ggen-15 .main-content .rarity-filter-btn,
  html.ggen-15 .main-content .role-filter-dd-btn{
    font-size:13px;
  }
}

@media(max-width:420px){
  /* Prefer compact text mark — badge art glow is too wide for phones */
  .header-15-toggle--special{
    max-width:none;
    min-width:72px;
    padding:4px 12px;
    line-height:1;
  }
  .header-15-toggle--special img{display:none !important}
  .header-15-toggle--special .header-15-special-fallback{
    display:inline !important;
    font-family:var(--font-teko),Teko,sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:inherit;
  }
  .header-15-toggle{font-size:11px;padding:3px 10px;min-height:32px;letter-spacing:.04em}
}

/* Desktop/tablet: fallback text hidden when img shows */
.header-15-special-fallback{display:none}

@media(prefers-reduced-motion:reduce){
  .header-15-toggle{transition:none}
}