/* V21 parity layer.
   Keeps the current podium and floating Kogane while bringing the rest of the
   FastAPI/Jinja interface back to the reference's manga editorial system. */

:root{
  --v21-black:#030303;
  --v21-surface:#080808;
  --v21-paper:#f1f0e9;
  --v21-muted:#8e8d87;
  --v21-line:rgba(255,255,255,.13);
  --v21-acid:#f1df45;
}

html,body{background:var(--v21-black);color:var(--v21-paper);overflow-x:clip}
body{font-family:'IBM Plex Mono',monospace;letter-spacing:0}

/* The manga city belongs to the cover only. Internal pages use printed ink. */
body:not(:has(.home-dashboard)) .cg-ambient::before{opacity:0;transform:none}
body:not(:has(.home-dashboard)) .cg-ambient::after{
  background:
    radial-gradient(circle at 84% 7%,rgba(255,255,255,.055),transparent 23%),
    linear-gradient(180deg,#101010 0,#050505 48%,#0c0c0b 100%);
}
body:not(:has(.home-dashboard)) #night-weather{opacity:.09}

body::before{
  content:'';position:fixed;inset:0;z-index:24;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

/* Header copied from the scale and rhythm of the V21 reference. */
.nav-shell{
  min-height:72px;height:72px;padding:0 28px;margin:0;border:0;border-bottom:1px solid var(--v21-line);
  background:linear-gradient(180deg,rgba(5,5,5,.97),rgba(5,5,5,.78),rgba(5,5,5,.22));
  backdrop-filter:blur(8px) saturate(.35);box-shadow:none;
}
.brand-logo-image{width:156px;height:62px;object-fit:contain}
.desktop-nav{gap:28px}
.desktop-nav a{padding:28px 0 25px;font-size:9px;font-weight:500;letter-spacing:.12em;color:#777}
.desktop-nav a::before{margin-right:7px;color:#444;font-size:9px}
.desktop-nav a:hover,.desktop-nav a.is-current{color:#fff;text-shadow:none}
.desktop-nav a.is-current::after{height:1px;background:var(--v21-acid)}
.nav-account{font-size:9px;letter-spacing:.1em}
.profile-link,.logout-link{padding:10px 13px;border:1px solid #444;background:#05050580}
.profile-link[aria-current=page]{background:var(--v21-acid);color:#080808;border-color:var(--v21-acid)}
.profile-dot{display:none}

/* Internal page canvas. */
.page-shell:not(:has(.home-dashboard)){
  position:relative;isolation:isolate;width:min(88%,1440px);max-width:1440px;
  padding:78px 0 190px;gap:0;
}
.page-shell:not(:has(.home-dashboard))::before{
  content:'';position:absolute;z-index:-1;width:68vw;height:68vw;right:-31vw;top:-29vw;
  border:1px solid rgba(255,255,255,.055);border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.022) 0 1px,transparent 1px 8px);
}

/* Monumental chapter headers from V21. */
.ranking-hero,.archive-hero,.match-hero,.kogane-hero,.editorial-head{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  min-height:380px;padding:0 0 34px;margin:0 0 58px;border:0;border-bottom:1px solid #ffffff26;
  background:transparent;box-shadow:none;outline:0;overflow:hidden;
}
.ranking-hero>div:first-child{display:contents}
.ranking-hero h1,.archive-hero h1,.match-hero h1,.kogane-hero h1,.editorial-head h1{
  margin:58px 0 0 -1vw;font:clamp(88px,13vw,196px)/.66 'Archivo Black',Impact,sans-serif;
  letter-spacing:-.09em;text-transform:uppercase;color:var(--v21-paper);text-shadow:none;white-space:nowrap;
}
.ranking-hero p,.archive-hero p,.match-hero p,.kogane-hero p,.editorial-head>p{
  position:absolute;right:0;bottom:30px;width:min(320px,34vw);margin:0;
  color:#777;font-size:10px;line-height:1.8;text-align:left;
}
.ranking-rule{position:absolute;right:0;top:36px;padding:9px 0;border:0;border-top:1px solid #555;background:transparent}
.ranking-rule span{color:#696963}.ranking-rule strong{font-size:28px;color:var(--v21-acid)}
.section-index{margin:0;color:#777;font-size:9px;letter-spacing:.16em}
.v21-page-note{display:flex;align-items:flex-end;gap:22px;width:100%}
.v21-page-note h1{flex:none}
.v21-page-number{position:absolute;right:0;top:18px;font:72px/1 'Archivo Black';color:#ffffff08}
.v21-page-note em{padding-bottom:7px;color:#777;font:italic 18px/1.2 'Cormorant Garamond',serif;letter-spacing:.08em}

/* Profile: one identity strip, then two restrained editorial panels. */
.profile-summary{
  display:grid;grid-template-columns:minmax(280px,1.4fr) minmax(230px,.8fr) auto;align-items:center;gap:38px;
  margin:0;padding:42px 0 48px;border:0;border-bottom:1px solid #ffffff24;background:transparent;box-shadow:none;
}
.profile-summary .profile-avatar{width:82px;height:82px;border:1px solid #555;box-shadow:none;border-radius:0;filter:saturate(.65) contrast(1.1)}
.profile-summary .profile-title h1{margin:5px 0 0;font-size:42px;letter-spacing:-.055em;text-transform:none}
.profile-summary .profile-title p{font:italic 19px 'Cormorant Garamond',serif;color:#888}
.profile-soloq-summary{display:flex;align-items:center;gap:14px;min-width:0}
.profile-summary-emblem{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 10px 16px #0008)}
.profile-soloq-summary div{display:grid;gap:4px}.profile-soloq-summary small{font-size:8px;color:#666;letter-spacing:.12em}
.profile-soloq-summary strong{font:18px/1.15 'Archivo Black';text-transform:uppercase;white-space:nowrap}
.profile-soloq-summary em{font-style:normal;font-size:10px;color:#888}
.profile-summary .profile-rating{align-self:stretch;justify-content:center;min-width:175px;padding:0 0 0 28px;border:0;border-left:1px solid #333;background:transparent;text-align:right}
.profile-summary .profile-rating span,.profile-summary .profile-rating small{font-size:8px;color:#777;letter-spacing:.1em}
.profile-summary .profile-rating strong{font-size:70px;line-height:1;color:var(--v21-paper)}
.profile-ledger{display:grid;grid-template-columns:1fr 1.5fr;gap:1px;margin:0 0 1px;background:#282828}
.profile-ledger .profile-card,.sync-panel{
  padding:38px 40px;border:0;background:#050505;box-shadow:none;outline:0;
}
.profile-ledger .profile-card h2,.sync-panel h2{font-size:24px;letter-spacing:-.035em;text-shadow:none}
.profile-ledger .rank-visual{min-height:120px}.profile-ledger .rank-emblem{width:118px;height:130px}
.profile-ledger .metrics-row strong{font-size:30px}.profile-ledger .metrics-row span{color:#777}
.sync-panel{margin-top:0;border-top:1px solid #292929}
.sync-panel .section-head{margin-bottom:28px}
.sync-panel .sync-form{grid-template-columns:minmax(210px,1fr) minmax(300px,1.25fr) auto}
.field input,.position-slot,.position-menu{background:#080808;border:1px solid #353535;color:#eee;border-radius:0}
.field input:focus,.position-slot:focus-visible{border-color:var(--v21-acid);box-shadow:none;outline:1px solid var(--v21-acid)}
.sync-panel .button-primary{border-radius:0;box-shadow:none}

/* Lists read as ruled manga indexes rather than floating cards. */
.ranking-board,.archive-list,.patch-list{margin-top:0}
.ranking-list,.archive-list,.patch-list{border:0;outline:0;background:#050505}
.ranking-board-title{border-top:6px solid var(--v21-paper)}
.archive-match{
  grid-template-columns:90px 1.25fr 1fr 1fr 40px;min-height:96px;padding:0 16px;
  border:0;border-bottom:1px solid #202020;background:transparent;box-shadow:none;outline:0;
  transition:padding-left .22s ease,background .22s ease,color .22s ease;
}
.archive-match:hover{padding-left:26px;background:#0a0a0a;color:#fff}
.archive-id{color:#5e5e59;font-size:34px}.archive-date span{font-size:18px}.archive-date small,.archive-state,.archive-winner{color:#7f7f79}
.patch-entry{
  display:grid;grid-template-columns:180px 1fr 2fr;gap:30px;padding:40px 16px;
  border:0;border-top:1px solid #262626;background:transparent;box-shadow:none;outline:0;
}
.patch-entry .version{font:italic 20px 'Cormorant Garamond',serif;color:#777}
.patch-entry h2{font-size:24px}.patch-entry pre{font:10px/1.8 'IBM Plex Mono';white-space:pre-wrap;color:#888}

/* Other functional surfaces inherit the same black-paper language. */
.team-panel,.replay-panel,.kogane-card,.kogane-rules,.kogane-history,.favor-tile,.player-dossier,.player-card,
.rule-dialogue,.rule-topics button,.colony-count,.live-colony{
  border-color:#ffffff1f;background:#070707;box-shadow:none;outline-color:#ffffff1f;
}
.players-universe{background:radial-gradient(ellipse at center,#131312,#050505 76%)}
.players-universe::before{opacity:.12;filter:grayscale(1) contrast(1.2)}
.player-search,.orbit-player,.record-tabs button,.players-tools button{background:#080808;border-color:#ffffff24;color:#c7c6bf}

/* Keep Kogane floating; place it at the user's requested lower-left corner. */
#kogane-system{left:22px;right:auto;bottom:20px;flex-direction:row-reverse;transform-origin:left center}
#kogane-system .kogane-bubble{width:245px;border-radius:8px 28px 28px 28px}
#kogane-system .kogane-bubble::after{left:-11px;right:auto;transform:rotate(225deg)}
.audio-dock{left:auto;right:22px;bottom:20px}

@media(max-width:1100px){
  .desktop-nav{gap:14px}.desktop-nav a{font-size:8px}.profile-summary{grid-template-columns:1fr auto}.profile-soloq-summary{grid-row:2}
  .profile-summary .profile-rating{grid-row:1 / span 2;grid-column:2}
}
@media(max-width:800px){
  .nav-shell{height:74px;min-height:74px;padding:0 16px}.brand-logo-image{width:145px}
  .page-shell:not(:has(.home-dashboard)){width:90%;padding-top:36px;padding-bottom:230px}
  .ranking-hero,.archive-hero,.match-hero,.kogane-hero,.editorial-head{min-height:250px;margin-bottom:34px;padding-bottom:28px}
  .ranking-hero h1,.archive-hero h1,.match-hero h1,.kogane-hero h1,.editorial-head h1{font-size:clamp(52px,15vw,92px);white-space:normal;margin-top:36px}
  .ranking-hero p,.archive-hero p,.match-hero p,.kogane-hero p,.editorial-head>p{position:static;width:auto;margin-top:22px}
  .ranking-rule{top:10px}.v21-page-note em{display:none}
  .profile-summary{grid-template-columns:1fr;gap:28px}.profile-summary .profile-rating{grid-column:1;grid-row:auto;text-align:left;border-left:0;border-top:1px solid #333;padding:24px 0 0}
  .profile-ledger{grid-template-columns:1fr}.profile-ledger .profile-card,.sync-panel{padding:28px 24px}
  .sync-panel .sync-form{grid-template-columns:1fr}
  .archive-match{grid-template-columns:58px 1fr auto;padding-inline:8px}.archive-state{grid-column:2}.archive-winner{display:none}
  .patch-entry{grid-template-columns:1fr;gap:14px;padding-inline:4px}
  #kogane-system{left:12px;bottom:78px}.audio-dock{right:12px;bottom:78px}
}
@media(max-width:520px){
  #kogane-system .kogane-bubble{display:none}
  #kogane-system:focus-within .kogane-bubble{display:block;position:absolute;left:0;bottom:86px;width:min(220px,calc(100vw - 28px))}
  .profile-summary .profile-identity{align-items:flex-start}.profile-summary .profile-title h1{font-size:30px}
  .profile-soloq-summary{gap:8px}.profile-summary-emblem{width:76px;height:76px}
}
@media(prefers-reduced-motion:reduce){body:not(:has(.home-dashboard)) .cg-ambient::before{transition:none}}