/* =====================================================================
   style.css — Kiai-Arena recreation : homepage (kiai-arena.site style)
   Orange page · white content columns · blue ranking column.
   Game-screen sizes live in game.css :root.
   ===================================================================== */
:root {
  --indigo: #131d4a;   /* Blueprint Indigo (a bit darker) — page background */
  --steel:  #6c91bf;   /* Sky Steel — accents, level-bar track */
  --ice:    #e8f0ff;   /* Cloud Ice — level-bar fill (lightest) */
  --orange: #131d4a;   /* legacy name kept = page background */
  --navy-top: #1f2c6b; /* page background gradient — top (lighter) */
  --navy-bot: #0b1230; /* page background gradient — bottom (deeper) */
  --blue: #faf4e1;     /* legacy name kept = content boxes (now white) */
  --blue-d: #000;
  --blue-ink: #131d4a; /* headers / links on white */
  --red: #e0241c;
  --red-d: #9e1812;
  --green: #4fa02e;
  --tan: #efe6cc;
  --tan-d: #d8c79c;
  --ink: #1a1a1a;
  --line: #cfcfcf;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    linear-gradient(to right,
      transparent 0, transparent calc(50% + 3.5px),
      #faf4e1 calc(50% + 3.5px), #faf4e1 100%),
    linear-gradient(to bottom,
      var(--navy-top) 0%, var(--orange) 55%, var(--navy-bot) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Trebuchet MS", Verdana, Geneva, sans-serif;
  font-size: 12px; line-height: 1.45;
}
a { color: var(--blue-ink); text-decoration: underline; }
a:hover { color: var(--red); }
img { display: block; }
code { background: #eee; padding: 0 3px; }

.season-banner { width: 100%; background: linear-gradient(90deg, #7a1a0a, #c0281a 50%, #7a1a0a);
  color: #fff3d6; text-align: center; padding: 8px 12px; font-weight: bold; font-size: 13px;
  letter-spacing: .3px; box-shadow: 0 2px 8px #0006;
  align-items: center; justify-content: center; gap: 4px; }
.season-banner .season-name { text-transform: uppercase; }
.season-banner .season-sep { opacity: .6; margin: 0 6px; }
.season-banner .season-countdown { font-variant-numeric: tabular-nums; color: #ffe9a8;
  font-size: 14px; margin-left: 4px; }
.season-banner .season-hof-link { color: #fff3d6; text-decoration: underline; margin-left: 14px;
  font-weight: normal; font-size: 12px; }
.hp { width: 795px; margin: 0 auto; padding: 0 0 40px; }

:root {
  /* shared top-strip measurements — used by BOTH the homepage's own grid
     (.hp-mascot/.hp-banner below) and every other page's buildTopStrip()
     in account.js (.acct-top .mascot/.banner). Keeping both readings from
     these same variables is what guarantees they can never drift apart
     again — edit a number here once, both places update together. */
  --ts-nav-col-width: 187px;
  --ts-mascot-col-width: 190px;
  --ts-col-gap: 12px;
  --ts-mascot-width: 281px;
  --ts-mascot-shift: -80px;
  --ts-strip-height: 211px;
}

/* ---- 3 columns. col1 width = button width (187px); blue column aligns with it ---- */
.hp-grid { display: grid; grid-template-columns: var(--ts-nav-col-width) var(--ts-mascot-col-width) 394px;
  grid-template-rows: auto 1fr; column-gap: var(--ts-col-gap); row-gap: 0; align-items: stretch; }
.hp-grid > .hp-col:nth-child(1) { grid-row: 1; grid-column: 1; }
.hp-grid > .hp-col:nth-child(2) { grid-row: 1; grid-column: 2; }
.hp-grid > .hp-col:nth-child(3) { grid-row: 1 / span 2; grid-column: 3; }
.hp-grid > footer.site { grid-row: 2; grid-column: 1 / span 2; }
.hp-col { display: flex; flex-direction: column; gap: 0; }

/* col 1 : 187x27 nav buttons, 7px between each; 7px gap under the last before the blue box.
   stack = 6 x 27 + 5 x 7 = 197px, then +7px gap = 204px to the blue box. */
.hp-nav { position: relative; z-index: 3; margin-top: 7px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.hp-nav a { width: 100%; }
.hp-nav img { width: 100%; height: 27px; display: block; }
.hp-nav a:hover img { filter: brightness(.96); }
.col-left { margin-top: 7px; }   /* 7px above first button AND 7px under last button */

/* col 2 : character tucks left under the buttons and fills the red-box region
   (page x 119 -> 400). image is pre-cropped to this 281x211 ratio in the asset. */
.hp-mascot { position: relative; z-index: 1; height: var(--ts-strip-height); overflow: hidden;
  margin-left: var(--ts-mascot-shift); width: var(--ts-mascot-width); }
.hp-mascot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* col 3 : banner -25% height, screenshot +25%; together still 204px. 1px black borders. */
.hp-banner { display: flex; flex-direction: column; height: var(--ts-strip-height); overflow: hidden; }
.hp-banner img.logo { width: 100%; height: 77px; object-fit: fill; display: block; border: 1px solid #000; }
.hp-banner img.shot { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; border: 1px solid #000; border-top: none; }

/* ---- columns ---- */
.col-left, .col-mid { position: relative; z-index: 2; background: #faf4e1; border: 1px solid #000; padding: 10px; color: var(--ink); border-radius: 2px; font-size: 11px; }
.col-right { flex: 1; display: flex; flex-direction: column; background: #faf4e1; border: none; border-left: 1px solid #000; padding: 10px; border-radius: 0; font-size: 11px; }
.col-right img { max-width: 100%; }

.col-right h3, .col-left h3, .col-mid h3 {
  margin: 14px 0 4px; font-size: 16px; font-style: italic; font-weight: bold;
  text-decoration: underline; color: var(--blue-ink);
}
.col-right h3:first-child, .col-left h3:first-child, .col-mid h3:first-child { margin-top: 0; }
.col-left a, .col-mid a { color: var(--blue-ink); }
.col-left .muted, .col-mid .muted { color: #777; }
.col-left .field input { color: #1a1a1a; }

.online {
  display: inline-flex; align-items: center; gap: 6px; background: #111; color: #faf4e1;
  border: 1px solid #000; border-radius: 12px; padding: 2px 10px 2px 4px; font-weight: bold;
}
.online .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--red); }

.field { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.field input[type=text], .field input[type=password], .field input[type=email] {
  width: 100%; border: 1px solid #888; padding: 3px 5px; font-size: 12px;
}
.acct-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.acct-tabs .t { flex: 1; text-align: center; padding: 3px 0; font-size: 11px; font-weight: bold;
  background: #dfe9ee; color: #333; border: 1px solid #99a; border-radius: 3px; text-decoration: none; }
.acct-tabs .t.active { background: var(--blue-ink); color: #fff; border-color: var(--blue-ink); }
.acct-msg { min-height: 14px; font-size: 10.5px; margin: 4px 0 2px; }
.acct-msg.ok { color: var(--green); }
.acct-msg.err { color: var(--red); }
.btn {
  display: inline-block; cursor: pointer; border: 1px solid var(--red-d);
  background: var(--red); color: #faf4e1; padding: 4px 12px; font-size: 12px; font-weight: bold;
  text-align: center; text-decoration: none; border-radius: 3px;
}
.btn:hover { filter: brightness(1.08); color: #faf4e1; }
.btn.orange { background: var(--indigo); border-color: #2c3052; color: #faf4e1; }
.btn.block { display: block; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.patreon { display: inline-flex; align-items: center; gap: 6px; background: #ff6b4a; color: #faf4e1;
  border-radius: 14px; padding: 3px 12px 3px 4px; font-weight: bold; text-decoration: none; }
.patreon .o { width: 16px; height: 16px; border-radius: 50%; background: #faf4e1; }

ul.plain, ul.rank { list-style: none; margin: 4px 0; padding: 0; }
ul.plain li { padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.bullet { width: 8px; height: 8px; }

/* ranking rows with orange level bars (blue column) */
ul.rank li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: center; padding: 3px 0; }
ul.rank li .nm { font-weight: bold; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.rank li .lvl { display: block; margin-top: 2px; }
ul.rank li .ico { width: 20px; height: 20px; }
.rank-ico { display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin-right: 4px; }
.rankline { display: inline; }
ul.ranktiers { list-style: none; margin: 8px 0; padding: 0; }
ul.ranktiers li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
ul.ranktiers li img { width: 22px; height: 22px; }
ul.ranktiers li .lv { margin-left: auto; color: #777; font-size: 11px; }
ul.rank.numbered li { grid-template-columns: 26px 1fr; }
/* Anime Kings list: position number + badge + player name over the title */
ul.rank.kings li { grid-template-columns: 22px 22px 1fr; }
ul.rank.kings li .ico { width: 20px; height: 20px; }
ul.rank li .ttl { display: block; font-size: 10px; font-weight: bold; color: #b8860b;
  letter-spacing: .3px; }
ul.rank li .pos { color: var(--steel); font-style: italic; font-weight: bold; font-size: 14px; line-height: 1; }
.lvl { position: relative; display: inline-block; vertical-align: middle; width: 82.5px; height: 17.2px; background: #161616; border: 1px solid #000; border-radius: 0; overflow: hidden; }
.lvl .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(to bottom, #03396c 0%, #005b96 100%); }
.lvl .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #faf4e1; font-weight: bold; font-size: 10px; text-shadow: 0 1px 1px #000, 0 0 2px #000; z-index: 2; }
.streakline { padding: 2px 0; }
.streakline b { color: var(--blue-ink); }
.toplist { margin: 4px 0 8px; }
.toplist .streakline a { color: var(--blue-ink); text-decoration: underline; }

/* ">>"-prefixed link lists (Mission/Ladder videos + Latest news) */
ul.linklist { list-style: none; margin: 4px 0 8px; padding: 0; }
ul.linklist li { position: relative; padding: 3px 0 3px 16px; line-height: 1.4; }
ul.linklist li::before { content: "\00BB"; position: absolute; left: 0; top: 3px; color: var(--red); font-weight: bold; }
ul.linklist a { color: var(--blue-ink); text-decoration: underline; }
ul.linklist i { color: var(--steel); font-style: italic; }
.vid-intro { font-style: italic; margin: 4px 0 2px; }
.vid-intro b { font-style: italic; color: var(--blue-ink); }
.vid-sub { font-weight: bold; margin: 2px 0 4px; color: var(--ink); }

/* logged-out login form (Remember Me + Login/Register + Lost password) */
.acct-form .remember { display: flex; align-items: center; gap: 5px; margin: 5px 0 6px; font-size: 11px; }
.acct-form .remember input { margin: 0; }
.acct-form .btnrow { display: flex; gap: 6px; margin: 2px 0 6px; }
.acct-form .btn.mini { padding: 2px 12px; font-size: 11px; }
.acct-form .lost { display: inline-block; font-size: 11px; color: var(--blue-ink); text-decoration: underline; }

/* right column news */
.kiai-h { font-size: 20px; color: var(--blue-ink); font-weight: bold; margin: 0; }
.kiai-sub { color: var(--steel); font-weight: bold; margin: 0 0 8px; }
.news { border-top: 1px solid var(--line); padding: 10px 0; }
.news h4 { margin: 0; font-size: 15px; color: var(--blue-ink); }
.news h4.alt { color: var(--steel); }
.news .meta { color: #888; font-size: 11px; margin: 1px 0 7px; }
.news .meta b { color: var(--red); }
.bal { margin: 8px 0; }
.bal b { color: var(--ink); }
.bal a { color: var(--blue-ink); }
.muted { color: #777; }

/* news box bottom: pagination, archive note, related subjects */
.news-nav { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0; border-top: 1px dotted var(--line); }
.news-nav .pg { font-size: 11px; border: 1px solid var(--steel); border-radius: 3px; padding: 2px 8px; text-decoration: none; color: var(--blue-ink); }
.news-nav .pg:hover { background: var(--ice); }
.news-archive { border-top: 1px dotted var(--line); border-bottom: 1px dotted var(--line); padding: 10px 0; color: #888; font-size: 11px; text-align: center; }
.news-archive .center { text-align: center; }
.news-archive .center a { color: var(--ink); }
.news-archive p { margin: 4px 0; }
.related { margin-top: auto; padding-top: 14px; border-top: 1px dotted var(--line); text-align: center; color: #999; font-size: 11px; }
.related i { color: var(--steel); }
.small { font-size: 11px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }

footer.site { align-self: end; text-align: center; color: #d7e0f2; padding: 14px 8px 8px; font-size: 11px; line-height: 1.5; }

/* chakra squares reused on homepage cost previews */
.ck-sq { display: inline-block; width: 11px; height: 11px; border: 1px solid #333; vertical-align: middle; }
.ck-sq.t { background: #5cb030; } .ck-sq.n { background: #3f7fcf; }
.ck-sq.g { background: #f0f0f0; } .ck-sq.b { background: #d23a32; } .ck-sq.r { background: #8a8a8a; }
.cost { display: inline-flex; gap: 2px; align-items: center; }

/* =====================================================================
   ACCOUNT PAGES — shared sidebar + content chrome
   Reuses the same palette/tokens above ("keep my colors").
   ===================================================================== */
.acct { width: 795px; margin: 0 auto; padding: 0; }
.acct-grid { display: grid; grid-template-columns: 187px 1fr; grid-template-rows: minmax(100vh, auto);
  column-gap: 12px; align-items: stretch; }

/* left column reuses .hp-nav + .col-left (already styled above); on top of the mascot */
.acct-side { position: relative; z-index: 2; display: flex; flex-direction: column; }

/* right column = top strip (mascot + banner) above the content panel */
.acct-rightcol { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; }
.acct-top { position: relative; height: var(--ts-strip-height); margin-top: 0; flex: 0 0 auto; }
/* character fills the same red-box region as the homepage; image pre-cropped to 281x211 */
.acct-top .mascot { position: absolute; left: var(--ts-mascot-shift); top: 0; width: var(--ts-mascot-width); height: var(--ts-strip-height); overflow: hidden; z-index: 1; }
.acct-top .mascot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acct-top .banner { margin-left: calc(var(--ts-mascot-shift) + var(--ts-mascot-width) + 1px); height: var(--ts-strip-height); display: flex; flex-direction: column; overflow: hidden; }
.acct-top .banner img.logo { width: 100%; height: 77px; object-fit: fill; display: block; border: 1px solid #000; }
.acct-top .banner img.shot { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; border: 1px solid #000; border-top: none; }

/* right content panel — grows to fill all remaining height (always reaches the bottom) */
.acct-main {
  margin-top: 0; flex: 1 1 auto; background: #faf4e1; border: 1px solid #000; border-top: none; border-radius: 0 0 2px 2px;
  padding: 14px 18px 22px; color: var(--ink); font-size: 12px; min-height: 360px;
}
.acct-h { color: var(--blue-ink); font-size: 19px; font-weight: bold; margin: 0; }
.crumb { color: #8a8a8a; font-size: 11px; margin: 2px 0 16px; }
.crumb a { color: var(--blue-ink); }
.crumb .here { color: var(--red); font-weight: bold; }

/* section header with a little uchiha-fan marker (matches the pinwheel) */
.sect { display: flex; align-items: center; gap: 6px; color: var(--blue-ink);
  font-weight: bold; font-size: 13px; margin: 18px 0 6px;
  border-bottom: 1px dotted var(--line); padding-bottom: 4px; }
.sect:first-of-type { margin-top: 4px; }
.sect img { width: 14px; height: 14px; }

/* two-column striped info table (Account information etc.) */
table.info { width: 100%; border-collapse: collapse; font-size: 12px; }
.profile-title { font-size: 12px; font-style: italic; color: var(--blue-ink); margin: -4px 0 8px; }
.profile-media { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 14px; }
.profile-avatar { width: 75px; height: 75px; object-fit: cover; background: #cfc4a4; }
.profile-clan-crest { width: 75px; height: 75px; object-fit: cover; background: #cfc4a4; }
.panel-box { max-width: 340px; background: #efe6cc; border: 1px solid #c9b98a; border-radius: 4px;
  padding: 12px 14px; margin-top: 6px; }
.panel-box .field input, .panel-box .field textarea { width: 100%; box-sizing: border-box; font-family: inherit; }
.mission-row { display: flex; gap: 12px; align-items: center; background: #efe6cc; border: 1px solid #c9b98a;
  border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; }
.mission-row.done { background: #e2f0da; border-color: #7bb56a; }
.mission-icon-blank { width: 48px; height: 48px; flex: none; background: #cfc4a4; border-radius: 3px; }
.mission-body { flex: 1; min-width: 0; }
.mission-title { font-weight: bold; color: var(--blue-ink); font-size: 13px; }
.mission-row.done .mission-title { color: #2e8f2e; }
.mission-desc { font-size: 11px; color: #555; margin: 2px 0 6px; }
.mission-bar { height: 8px; background: #d8cba6; border-radius: 4px; overflow: hidden; }
.mission-bar .fill { height: 100%; background: var(--green); }
.mission-progress { font-size: 10px; color: #777; margin-top: 2px; text-align: right; }
.reg-table { margin-top: 4px; }
.reg-table td.k { width: 160px; font-weight: bold; vertical-align: top; padding-top: 8px; }
.reg-table td.v { padding-top: 6px; }
.reg-table td.v input { width: 260px; padding: 4px 6px; font-size: 12px; border: 1px solid #999; }
.reg-note { font-size: 10.5px; color: #888; font-style: italic; padding: 6px 8px 0; }
.reg-btnrow { display: flex; margin-top: 12px; gap: 8px; }
.panel-box .btnrow { margin-top: 8px; }
table.info td { padding: 5px 8px; vertical-align: middle; }
table.info tr:nth-child(odd)  td { background: #efe6cc; }
table.info tr:nth-child(even) td { background: #faf4e1; }
table.info td.k { width: 200px; color: var(--ink); }
table.info td.k u { text-decoration: underline; }
table.info td.v { color: var(--ink); }
table.info td.v .hi { color: var(--red); font-weight: bold; }
table.info td.v .clanname { color: #c8881f; font-weight: bold; }
.statbar { position: relative; display: inline-block; width: 120px; height: 17px;
  background: #161616; border: 1px solid #000; border-radius: 0; overflow: hidden; vertical-align: middle; }
.statbar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(to bottom,#f0a93b,#e07b1a); }
.statbar .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 10px; text-shadow: 0 1px 1px #000; z-index: 2; }
.dot-on { display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--green); margin-right:4px; vertical-align: middle; }
.xpsmall { color:#999; font-size:10px; }
.muted-note { color:#8a8a8a; font-style: italic; }

/* account menu links in the sidebar */
.acct-menu { margin: 4px 0 2px; }
.acct-menu .welcome { margin-bottom: 4px; }
.acct-menu a { display: block; color: var(--blue-ink); text-decoration: underline; padding: 1px 0; font-weight: bold; }
.acct-menu a.neu { color: var(--green); }
.acct-menu a.active { color: var(--red); }
.acct-menu a:hover { color: var(--red); }

/* simple forms shared by avatar / background / title / reset */
.form-help { text-align: center; color: var(--green); font-weight: bold; margin: 10px 0 14px; line-height: 1.6; }
.form-help a { color: var(--blue-ink); }
.form-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 10px;
  padding: 6px 8px; }
.form-row:nth-child(odd) { background: #efe6cc; }
.form-row label { color: var(--ink); }
.form-row input[type=text], .form-row input[type=password], .form-row select {
  width: 100%; max-width: 360px; border: 1px solid #888; padding: 4px 6px; font-size: 12px;
  background: #fff; color: #1a1a1a; }
.form-actions { text-align: center; margin: 16px 0 4px; }
.warn { color: var(--ink); line-height: 1.6; margin: 6px 0 18px; }

/* avatar picker grid */
.avatar-current { display: flex; justify-content: center; margin: 12px 0; }
.avatar-current img { width: 75px; height: 75px; }
.avatar-grid-wrap { border: 1px solid var(--line); border-radius: 3px; padding: 14px; margin-top: 8px; background: #fbf7ea; }
.avatar-grid-wrap .hint { text-align: center; color: #8a8a8a; font-style: italic; margin-bottom: 12px; }
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 10px; justify-items: center; }
.avatar-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.avatar-cell img { width: 75px; height: 75px; }
.avatar-cell.sel img { outline: 3px solid var(--red); }
.avatar-cell input { margin: 0; }
.page-select { text-align: center; margin-top: 14px; }

/* clan panel */
.clan-head { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 6px 0 18px; }
.clan-head img { width: 75px; height: 75px; }
.clan-head .label { color: #6c6c6c; font-size: 11px; }
.clan-head .clanname { color: var(--blue-ink); font-size: 16px; font-weight: bold; }
.clan-head .rank { color: #c8881f; font-weight: bold; }
.clan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin-top: 10px; }
.clan-cell { text-align: center; padding: 10px 6px 16px; }
.clan-cell p { color: #6c6c6c; font-size: 11px; min-height: 44px; margin: 0 0 8px; }
.clan-cell.center { grid-column: 1 / span 2; }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #efe6cc; border: 1px solid #c9b98a; border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; }
.invite-row .btn.mini { padding: 2px 10px; font-size: 11px; }
.btn.plain { background: #faf4e1; color: var(--blue-ink); border: 1px solid #555; font-weight: normal; padding: 4px 14px; }
.btn.plain:hover { background: #efe6cc; color: var(--blue-ink); filter: none; }

/* playercard */
.pc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-toolbar label { display: inline-flex; align-items: center; gap: 5px; }
.playercard { width: 430px; max-width: 100%; border: 2px solid #111; background: #2b2f4d;
  display: grid; grid-template-columns: 64px 1fr 150px; align-items: stretch; color: #fff; font-size: 11px; }
.playercard .pc-av { position: relative; }
.playercard .pc-av img { width: 64px; height: 64px; display: block; }
.playercard .pc-av .lv { position: absolute; left: 2px; bottom: 2px; background: #e07b1a; color:#fff;
  font-weight: bold; font-size: 11px; padding: 0 5px; border: 1px solid #000; }
.playercard .pc-info { padding: 6px 8px; line-height: 1.35; background:#131d4a; }
.playercard .pc-info .nm { font-weight: bold; letter-spacing: .5px; }
.playercard .pc-team { background:#1f2238; display:flex; align-items:center; justify-content:center; }
.playercard .pc-team img { width: 100%; height: 64px; object-fit: cover; opacity: .92; }
.pc-foot { width:430px; max-width:100%; background:#111; color:#e07b1a; font-weight:bold; font-size:10px;
  padding:3px 8px; border:2px solid #111; border-top:none; }
.pc-foot .w { color:#fff; }

/* =====================================================================
   GAME MANUAL pages — reuse the .acct chrome (sidebar + top strip + main).
   Top strip stays fixed; .acct-main grows to fill height even when short.
   ===================================================================== */
.man-intro { margin: 4px 0 16px; line-height: 1.6; color: var(--ink); }
.man-intro.lead { margin-top: 2px; }

/* landing cards: text on the left, thumbnail on the right, "Read more" link */
.man-card { display: grid; grid-template-columns: 1fr 150px; gap: 16px; align-items: start;
  padding: 4px 0 2px; }
.man-card .txt { line-height: 1.55; color: var(--ink); }
.man-card .thumb { width: 150px; height: 96px; border: 1px solid #0a4a6a; display: block; }
.man-more { display: block; text-align: right; color: var(--red); font-weight: bold;
  text-decoration: none; margin: 6px 0 18px; }
.man-more:hover { color: var(--red-d); text-decoration: underline; }

/* figures (selection / battle / skill-queue screenshots) */
.man-fig { display: block; max-width: 100%; border: 1px solid #000; margin: 12px auto 8px; }
.man-fig.shadow { box-shadow: 0 2px 10px #0003; }
.man-cap { color: #8a8a8a; font-size: 11px; text-align: center; margin: 0 0 14px; }

/* the lettered / bulleted definition lists (the original ► items) */
ul.deflist { list-style: none; margin: 8px 0 16px; padding: 0; }
ul.deflist > li { position: relative; padding: 5px 0 5px 22px; line-height: 1.55; }
ul.deflist > li::before { content: "\25B8"; position: absolute; left: 3px; top: 5px; color: var(--steel); }
ul.deflist > li b, ul.deflist > li .key { color: var(--blue-ink); }

/* sub-headed term groups (Distance / Skill Type / Persistence Type ...) */
.man-group { font-weight: bold; color: var(--ink); margin: 16px 0 4px; font-size: 12px; }

/* chakra legend */
ul.chakra-legend { list-style: none; margin: 8px 0 14px; padding: 0; }
ul.chakra-legend li { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
ul.chakra-legend li .ck-sq { width: 15px; height: 15px; border: 1px solid #333; }

/* characters & skills list */
.char-search { margin: 8px 0 18px; display: flex; align-items: center; gap: 10px; }
.char-search label { font-weight: bold; color: var(--ink); }
.char-search input { width: 250px; border: 1px solid #888; padding: 5px 8px; font-size: 12px;
  background: #fff; color: #1a1a1a; }
.char-row { border-top: 1px dotted var(--line); padding: 6px 0 2px; }
.char-row:first-of-type { border-top: none; }
.char-row .head { display: flex; align-items: center; gap: 6px; color: var(--blue-ink);
  font-weight: bold; font-size: 14px; margin: 8px 0 4px; }
.char-row .head img.fan { width: 14px; height: 14px; }
.char-body { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start;
  padding-bottom: 4px; }
.char-body > img.port { width: 80px; height: 80px; border: 1px solid #000; background: #fff; }
.char-body .bio { line-height: 1.5; color: var(--ink); }
.char-more { color: var(--red); font-weight: bold; text-decoration: none; }
.char-more:hover { text-decoration: underline; color: var(--red-d); }
.char-skills { margin: 8px 0 10px; }
.char-skills[hidden] { display: none; }
.skill-line { display: grid; grid-template-columns: 50px 1fr; gap: 12px; padding: 8px 0;
  border-top: 1px dotted var(--line); }
.skill-line img { width: 50px; height: 50px; border: 1px solid #000; background: #fff; }
.skill-line .nm { font-weight: bold; color: var(--blue-ink); }
.skill-line .sk-cost { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.skill-line .meta { color: #777; font-size: 11px; margin-top: 2px; }
.skill-line .meta .tag { display: inline-block; background: #eee; border: 1px solid #ccc;
  border-radius: 3px; padding: 0 5px; font-size: 10px; margin: 1px 2px 1px 0; color: #444; }