/* Bravefall web pages - the shared "field manual" style (owner 22-23/10, first used by the Guide,
   PvP Daily Duels and Featured Battles, then the raid event hub 1001; later event pages link this
   file and reuse the same classes).

   Rules: parchment ground; ONE accent colour (crimson) for section heads, numbers and the active
   state; hairlines instead of boxes; no gradients, glows or repeated ornaments; Cinzel (mixed case)
   for titles and labels, EB Garamond for reading; buttons are the game's own standard button
   (bt_base_red 56L copied from the client atlas) with live text, never text baked into images.

   Link it from a page at /en/... with a path relative to this file's folder, e.g.
   <link rel="stylesheet" href="<baseUrl>en/common/css/bravefall_page.css">
   Fonts are the game's own OFL subsets (../fonts/FONT-LICENSES.txt). */

@font-face { font-family:'BvCinzel'; font-display:swap; src:url(../fonts/bv-cinzel.woff2) format('woff2'); }
@font-face { font-family:'BvGaramond'; font-display:swap; src:url(../fonts/bv-garamond.woff2) format('woff2'); }

:root {
  --ink:#2b1e15; --ink-soft:#5e4630; --ink-faint:#8a7152; --crimson:#8c2318;
  --rule:rgba(94,70,48,.32); --rule-strong:rgba(94,70,48,.7);
  --title:'BvCinzel','Cinzel',Georgia,serif; --body:'BvGaramond','EB Garamond',Georgia,serif;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); }
html { min-height:100%; background:#d9c7a1 url(../i/bg_parchment.jpg) repeat; background-size:256px 256px; }
body.bf { max-width:360px; margin:0 auto; font-family:var(--body); color:var(--ink); line-height:1.42;
          -webkit-text-size-adjust:100%; background:transparent; padding-bottom:24px; }
/* element defaults at element specificity, so a page's own one-class rules (.chip, .totop...)
   still win over them; images stay inline unless a component below says otherwise */
a { color:inherit; text-decoration:none; }

/* banner art, shown whole; the title goes on the paper under it (.bf-mast) unless the art carries it */
.bf-hero img { display:block; width:100%; height:auto; }
.bf-hero { border-bottom:3px double var(--rule-strong); }
.bf-mast { padding:10px 16px 9px; border-bottom:3px double var(--rule-strong); }
.bf-mast .ttl { font:600 22px/1.1 var(--title); color:var(--ink); }
.bf-mast .sub { font:500 15px/1.25 var(--body); font-style:italic; color:var(--ink-soft); }
.bf-wrap { padding:10px 16px 0; }

/* section heads: small caps on a hairline */
.bf h3.bf-h { display:flex; align-items:center; font:600 11.5px/1.4 var(--title); letter-spacing:.14em; text-transform:uppercase;
              color:var(--crimson); margin:20px 0 8px; }
.bf h3.bf-h::after { content:''; flex:1; height:1px; margin-left:10px; background:var(--rule); }
h4 { font:600 16px/1.25 var(--body); font-style:italic; color:var(--ink); margin:12px 0 2px; }
p { font-size:16px; margin:0 0 7px; }
.bf-dim { color:var(--ink-faint); font-size:15px; }
.bf-center { text-align:center; }
.bf-lead { margin:12px 0 10px; font-size:16px; font-style:italic; text-align:center; color:var(--ink-soft); }

/* countdown line + figures in a row */
.bf-clock { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:7px; border-bottom:1px solid var(--rule); }
.bf-clock .lbl { font:500 15px/1 var(--body); font-style:italic; color:var(--ink-soft); }
.bf-clock .val { font:600 18px/1 var(--title); color:var(--crimson); font-variant-numeric:tabular-nums; }
.bf-stats { display:flex; padding:8px 0 9px; border-bottom:1px solid var(--rule); }
.bf-stats .tile { flex:1; display:flex; flex-direction:column-reverse; justify-content:flex-end; text-align:center; padding:0 2px; }
.bf-stats .tile + .tile { border-left:1px solid var(--rule); }
.bf-stats .val { font:500 28px/1.05 var(--body); color:var(--ink); }
.bf-stats .lbl { font:600 10px/1.25 var(--title); letter-spacing:.05em; color:var(--ink-faint); margin-top:2px; }
.bf-stats .fig { flex:0 0 auto; margin-right:6px; }
.bf-stats .fig img { display:block; }

/* the game's own button (.bf .bf-btn: must beat `.bf a { color:inherit }`) */
.bf-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px 6px; margin:10px 0 6px; }
.bf-actions.one { grid-template-columns:1fr; justify-items:center; }
.bf .bf-btn { display:flex; align-items:center; justify-content:center; height:34px; padding:0 2px 1px; white-space:nowrap;
          font:600 13.5px/1 var(--title); letter-spacing:.03em; color:#f6e4bd; text-shadow:0 1px 0 rgba(40,4,2,.85);
          border-style:solid; border-width:0 15px; border-image:url(../i/game_btn_n.png) 0 30 0 30 fill stretch; }
.bf .bf-btn:active, .bf .bf-btn.mbgaui-active { border-image-source:url(../i/game_btn_p.png); color:#e6cf9e; }
.bf .bf-actions.one .bf-btn { width:62%; }

/* a picture beside text */
.bf-side { display:flex; align-items:flex-start; gap:12px; }
.bf-side .txt { flex:1; }
.bf-float-r { display:block; float:right; margin:2px 0 6px 10px; }
.bf-clear::after { content:''; display:table; clear:both; }

/* numbered steps */
.bf ol.bf-steps { list-style:none; counter-reset:r; }
.bf ol.bf-steps li { position:relative; padding:0 0 7px 26px; font-size:16px; counter-increment:r; }
.bf ol.bf-steps li::before { content:counter(r, decimal-leading-zero); position:absolute; left:0; top:1px;
                             font:500 14px/1.42 var(--body); font-style:italic; color:var(--crimson); }
/* plain dashes list (rules) */
.bf ul.bf-list { list-style:none; }
.bf ul.bf-list li { position:relative; padding:0 0 5px 13px; font-size:16px; }
.bf ul.bf-list li::before { content:''; position:absolute; left:1px; top:.66em; width:4px; height:4px; border-radius:2px; background:var(--ink-soft); }

.bf-note { margin:4px 0 10px; padding-left:11px; border-left:2px solid var(--crimson); font-size:15px; font-style:italic; color:var(--ink-soft); }

/* rank tiers / two-column ledgers */
.bf table.bf-tiers { width:100%; border-collapse:collapse; margin:2px 0 4px; }
.bf table.bf-tiers td { padding:6px 0; font-size:15px; border-top:1px solid var(--rule); vertical-align:top; }
.bf table.bf-tiers tr:first-child td { border-top:0; }
.bf table.bf-tiers td:first-child { font:600 12.5px/1.6 var(--title); color:var(--crimson); width:27%; white-space:nowrap; padding-right:6px; }

/* items: picture + name + line */
.bf-item { display:flex; align-items:center; padding:7px 0; border-top:1px solid var(--rule); }
.bf-item:first-of-type { border-top:0; }
.bf-item img { display:block; width:52px; height:52px; margin-right:12px; flex:0 0 52px; }
.bf-item b { display:block; font:600 15px/1.25 var(--title); color:var(--ink); }
.bf-item span { font-size:15px; color:var(--ink-soft); }
.bf-price { display:inline-flex; align-items:center; gap:4px; margin-top:2px; font:600 13px/1 var(--title); color:var(--crimson); }
.bf-price img { width:16px; height:16px; margin:0; flex:none; }

/* rewards: pictures side by side with their rank and name */
.bf-rewards { display:flex; justify-content:space-around; text-align:center; }
.bf-rewards .r { width:47%; }
.bf-rewards .rank { font:600 12px/1.4 var(--title); letter-spacing:.06em; color:var(--crimson); }
.bf-rewards img { display:block; margin:2px auto 4px; width:100%; max-width:114px; height:auto; }
.bf-rewards .nm { font:600 13.5px/1.25 var(--title); color:var(--ink); }

.bf-totop { display:block; margin-top:18px; padding:10px 0 4px; text-align:center; font-size:15px; font-style:italic; color:var(--crimson); border-top:3px double var(--rule-strong); }
.bf-totop::before { content:''; display:inline-block; margin-right:6px; vertical-align:2px; border:4px solid transparent; border-bottom:5px solid var(--crimson); border-top:0; }
.bf-up { display:block; margin:6px 0 0; text-align:right; font-size:14px; font-style:italic; color:var(--ink-faint); }