/*
  World of Relics website, in the app's War Band look (approved mockup: tools/hud-art/make_website_real.py).
  The art in img/ is the app's own, copied by tools/hud-art/export_web_assets.py: the Warband sprites (drawn at 3x, so a
  border-image slice of 48 image px is 16 CSS px), the classification backdrops, the relic renders and the logo. The red
  leather is the app's leather recipe as an SVG filter (Art.LeatherDefs). Caudex, the app's font, is SIL OFL 1.1.
*/
@font-face { font-family: Caudex; src: url(../fonts/Caudex-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Caudex; src: url(../fonts/Caudex-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root { --gold: #F2D27A; --body: #F4EAD2; --soft: #D9C39A; --muted: #A8957A; --unlit: #806B4D; }
* { box-sizing: border-box; }
html, body { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  color: var(--body); font: 400 17px/1.55 Caudex, Georgia, serif; -webkit-font-smoothing: antialiased; overflow-x: clip;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), linear-gradient(rgba(18,12,10,.5), rgba(18,12,10,.5)),
    url(../img/wb/wb-menu-tile.png) 0 0/64px 64px, #120C0A;
}
img { display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
.wrap { max-width: 1136px; margin: 0 auto; padding: 0 32px; position: relative; }
.gold {
  background: linear-gradient(180deg, #FFF0BE 0%, #E7BC5E 55%, #A9772A 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.95));
}
.caps { font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); font-size: 13px; text-shadow: 0 1px 1px #000; }
.soft { color: var(--soft); }
.txt { text-shadow: 0 1px 1px rgba(0,0,0,.95); }
.nowrap { white-space: nowrap; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(224,178,90,.85), transparent); }
.leatherfx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The header: the app's title bar (riveted band, red leather, iron foot, spikes) */
.top { position: sticky; top: 0; z-index: 20; }
.band { height: 16px; background: url(../img/wb/wb-band-tile.png) 0 0/26px 16px repeat-x; position: relative; z-index: 2; }
.spike { position: absolute; width: 30px; height: 30px; background-size: 30px 30px; pointer-events: none; }
.band .l { left: -10px; top: -14px; background-image: url(../img/wb/wb-end-spike-left.png); }
.band .r { right: -10px; top: -14px; background-image: url(../img/wb/wb-end-spike-right.png); }
.leather { height: 64px; position: relative; background: #5a120e; box-shadow: inset 0 6px 8px rgba(0,0,0,.55), inset 0 -4px 6px rgba(0,0,0,.45); }
.ifoot { height: 9px; background: url(../img/wb/wb-head-foot-tile.png) 0 0/26px 9px repeat-x; position: relative; z-index: 2; }
.ifoot .l { left: -11px; top: -2px; background-image: url(../img/wb/wb-head-foot-spike-left.png); }
.ifoot .r { right: -11px; top: -2px; background-image: url(../img/wb/wb-head-foot-spike-right.png); }
.shade { position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,0)); pointer-events: none; }
.bar-in { height: 64px; display: flex; align-items: center; gap: 30px; z-index: 1; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand img { width: 88px; height: 88px; margin: -8px -4px -16px -12px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.85)); }
.brand b { font-size: 25px; }
.nav { display: flex; gap: 32px; }
.nav a { font-weight: 700; font-size: 16px; color: var(--soft); text-shadow: 0 1px 1px #000; padding: 4px 0; white-space: nowrap; }
.nav a:hover { color: var(--gold); }
.back, .ttl { display: none; }

/* Panels: wb-panel (iron rim, gold inlay, black well), and wb-plaque's spiked iron round the app's red leather */
.panel { border: 16px solid transparent; border-image: url(../img/wb/wb-panel.png) 48 fill/16px stretch; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.plaque {
  position: relative; border: 12px solid transparent; border-image: url(../img/wb/wb-plaque.png) 36/12px stretch;
  background: #5a120e; background-clip: padding-box; filter: drop-shadow(0 8px 12px rgba(0,0,0,.65));
}
.plaque > .pin { position: relative; z-index: 1; }
/* Gold that stays readable on the leather's bright top */
.plaque .gold, .top .gold { background-image: linear-gradient(180deg, #FFF0BE 0%, #F2D27A 55%, #D9A441 100%); }
.ph {
  font: 700 13px Caudex, Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  padding: 4px 2px 9px; border-bottom: 1px solid rgba(201,153,66,.55); text-shadow: 0 1px 1px #000;
}
.grow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid rgba(0,0,0,.75); box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.grow:last-child { border-bottom: 0; box-shadow: none; }

/* The top: the app's sign-in screen (the logo in its halo and rays, the tagline, the leather plaque) */
.hero { position: relative; padding: 22px 0 10px; text-align: center; }
.logo { position: relative; width: 360px; height: 360px; margin: 0 auto; }
.logo img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.logo .logofx { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; max-width: none; filter: none; pointer-events: none; }
.tagline { font-size: 25px; position: relative; text-shadow: 0 2px 3px #000; }
.pitch { position: relative; max-width: 620px; margin: 8px auto 24px; font-size: 19px; text-shadow: 0 1px 2px #000; }
.hero .plaque { width: 540px; margin: 0 auto; padding: 14px 26px 20px; }
.hero .plaque h2 { font-size: 26px; margin-top: 4px; }
.hero .plaque .rule { width: 70%; margin: 12px auto; }
.hero .plaque p { font-size: 15.5px; color: var(--soft); }
.side { position: absolute; }
.side.l { left: calc(50% - 548px); top: 126px; }
.side.r { right: calc(50% - 548px); top: 176px; }

/* A gallery card: wb-card (display well, gold line, foot), the classification backdrop, the relic floating upright */
.card {
  position: relative; flex: none; width: 196px; height: 272px; border-style: solid; border-color: transparent; border-width: 200px 16px 16px 16px;
  border-image: url(../img/wb/wb-card.png) 600 48 48 48 fill/200px 16px 16px 16px stretch; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); text-align: left;
}
.case { position: absolute; left: -7px; right: -7px; top: -191px; height: 176px; overflow: hidden; border-radius: 3px; background: #0E0A08; }
.case .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case .glow { position: absolute; left: 50%; top: 50%; width: 120px; height: 200px; margin: -100px 0 0 -60px; border-radius: 50%; background: var(--tier); opacity: .32; filter: blur(18px); }
.case .relic { position: absolute; left: 50%; top: 10px; height: 156px; transform: translateX(-50%); filter: drop-shadow(0 8px 6px rgba(0,0,0,.6)); }
/* The item page's hologram: a rainbow band and foil lines over the backdrop, under the relic */
.holo {
  position: absolute; inset: 0; opacity: .24; mix-blend-mode: color-dodge;
  background: linear-gradient(135deg, transparent 28%, rgba(255,77,109,.8) 36%, rgba(255,216,77,.8) 43%, rgba(77,255,166,.8) 50%,
    rgba(77,184,255,.8) 57%, rgba(176,77,255,.8) 64%, transparent 72%);
}
.holo::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background: repeating-linear-gradient(122deg, #fff 0 1.1px, transparent 1.1px 5px); }
.spark {
  position: absolute; width: 16px; height: 16px; margin: -8px; filter: drop-shadow(0 0 3px rgba(255,255,255,.9));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10L1.6-1.6L10 0L1.6 1.6L0 10L-1.6 1.6L-10 0L-1.6-1.6Z' fill='white'/%3E%3Ccircle r='2.2' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cfoot { padding-top: 7px; }
.tierline { display: flex; align-items: center; gap: 6px; font: 700 11px Caudex, Georgia, serif; letter-spacing: .12em; color: var(--tier); text-shadow: 0 1px 1px #000; }
.stars { display: flex; gap: 1px; }
.stars img { width: 11px; height: 11px; }
.cname { font-weight: 700; font-size: 15px; line-height: 1.25; margin-top: 3px; text-shadow: 0 1px 1px #000; }

/* Sections */
.sec { position: relative; padding: 92px 0 0; scroll-margin-top: 84px; }
.head { text-align: center; margin-bottom: 40px; }
.head h2 { font-size: 46px; line-height: 1.12; margin-top: 8px; }
.orn { display: flex; align-items: center; justify-content: center; margin: 14px auto 0; width: 380px; max-width: 100%; }
.orn i { flex: 1; height: 9px; background: url(../img/wb/wb-head-foot-tile.png) 0 0/26px 9px repeat-x; -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%); }
.orn i:last-child { -webkit-mask: linear-gradient(90deg, #000 30%, transparent); mask: linear-gradient(90deg, #000 30%, transparent); }
.orn img { width: 58px; height: 58px; margin: 0 -6px; position: relative; filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.lead { max-width: 660px; margin: 18px auto 0; font-size: 19px; }

/* 3 . How it will work */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { padding: 16px 14px 22px; }
.slot { width: 62px; height: 62px; background: url(../img/wb/wb-menu-slot.png) 0 0/100% 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.slot::before { content: ""; position: absolute; inset: 9px; border-radius: 4px; background: radial-gradient(circle, rgba(242,210,122,0) 35%, rgba(242,210,122,.38) 100%); }
.slot img { width: 28px; height: 28px; position: relative; }
.step .caps { margin: 18px 0 4px; font-size: 12px; }
.step h3 { font-size: 25px; line-height: 1.2; }
.step p { margin-top: 10px; }

/* 4 . Relics */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 18px; }
.facts { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 6px 14px; }
.fact { padding: 6px 18px 4px; border-left: 1px solid rgba(0,0,0,.75); box-shadow: inset 1px 0 0 rgba(255,255,255,.04); }
.fact:first-child { border-left: 0; box-shadow: none; }
.fact .ph { margin-bottom: 10px; }
.fact p { font-size: 15.5px; line-height: 1.5; }

/* 5 . Rarity: the item page's Overview card */
.ladder { max-width: 640px; margin: 0 auto; padding: 10px 14px 8px; }
.ladder .grow { padding: 12px 4px; }
.ladder .tierline { font-size: 14px; gap: 10px; }
.ladder .stars img { width: 14px; height: 14px; }
.odds { font-weight: 700; font-size: 17px; white-space: nowrap; text-shadow: 0 1px 1px #000; }
.note { max-width: 640px; margin: 16px auto 0; font-size: 15px; color: var(--muted); text-align: center; text-shadow: 0 1px 1px #000; }

/* 6 . Share: the app's leather between riveted bands */
.share { margin-top: 110px; position: relative; background: #4a0f0b; scroll-margin-top: 84px; }
.share > .leatherfx { filter: brightness(.74) saturate(.9); }
.share > .band { position: absolute; left: 0; right: 0; }
.share > .band.t { top: -8px; }
.share > .band.b { bottom: -8px; }
.share .wrap { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: center; padding-top: 64px; padding-bottom: 64px; z-index: 1; }
.sharecard { width: 330px; height: auto; margin: 0 auto; border-radius: 6px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.8)); }
.share h2 { font-size: 44px; line-height: 1.12; margin-top: 8px; }
.share .lead { margin: 18px 0 0; max-width: none; }
.brag { margin-top: 22px; font-size: 22px; font-style: italic; color: var(--gold); text-shadow: 0 2px 2px #000; }
.tags { margin-top: 16px; font-weight: 700; font-size: 17px; color: var(--soft); word-spacing: .6em; text-shadow: 0 1px 1px #000; }

/* 7 . The footer: the app's bottom menu (riveted band, crimson trim, tiled iron, the World orb) */
.menu { position: relative; margin-top: 96px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)), url(../img/wb/wb-menu-tile.png) 0 0/64px 64px, #1a1210; }
.menu > .band, .tabs > .band { height: 14px; background-size: 26px 14px; }
.trim { height: 6px; background: url(../img/wb/wb-trim-tile.png) 0 0/26px 6px repeat-x; box-shadow: 0 3px 4px rgba(0,0,0,.6); position: relative; z-index: 1; }
.fcols { display: grid; grid-template-columns: 1fr 300px 1fr; align-items: start; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.fbrand { display: flex; gap: 14px; align-items: flex-start; }
.fbrand img { width: 84px; height: 84px; flex: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.8)); }
.fbrand b { font-size: 22px; display: block; }
.fbrand p { font-size: 14px; color: var(--soft); margin-top: 4px; line-height: 1.45; text-shadow: 0 1px 1px #000; }
.fbrand p a { white-space: nowrap; }
.forb { text-align: center; margin-top: -104px; position: relative; z-index: 3; }
.forb img { width: 132px; height: 132px; margin: 0 auto; filter: drop-shadow(0 0 22px rgba(255,51,15,.45)); }
.forb b { display: block; font-size: 22px; margin-top: 2px; }
.forb span { font-size: 14px; color: var(--soft); }
.flinks { justify-self: end; text-align: right; }
.flinks a { display: block; font: 700 13px Caudex, Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin: 2px 0 13px; text-shadow: 0 1px 1px #000; }
.flinks a:hover { color: var(--gold); }
.copy { text-align: center; font-size: 13px; color: var(--muted); padding: 13px 16px 16px; border-top: 1px solid rgba(0,0,0,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.tabs { display: none; }

/* Legal and other text pages */
.doc { max-width: 800px; margin: 0 auto; padding: 0 32px 10px; }
.dhead { text-align: center; padding: 52px 0 26px; }
.dhead h1 { font-size: 46px; }
.dhead p { color: var(--soft); margin-top: 8px; }
.doc h2 { font-size: 23px; margin: 34px 0 0; scroll-margin-top: 96px; }
.doc h2 + .rule { margin: 8px 0 14px; background: linear-gradient(90deg, rgba(224,178,90,.85), transparent); }
.doc h3 { margin: 18px 0 6px; font-size: 13px; }
.doc p, .doc li { color: #E9DDC3; text-shadow: 0 1px 1px #000; }
.doc p + p { margin-top: 12px; }
.doc .note { text-align: left; margin: 12px 0 0; max-width: none; font-style: italic; color: var(--soft); font-size: inherit; }
.doc ul { margin: 8px 0 0; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--body); }
.doc .plaque { margin-top: 36px; padding: 16px 22px 20px; }
.doc .plaque h2 { margin: 0; }
.doc .plaque p, .doc .plaque li { color: var(--body); }
.doc .other { margin-top: 34px; text-align: center; color: var(--soft); }

/* In the app's web view (?inapp=1): the text only, with its own title */
.inapp .doc { padding-top: 0; }
.inapp .dhead { padding-top: 20px; }

@media (max-width: 960px) {
  .nav, .side { display: none; }
}

/* Phones: the app's own layout (the title bar on top, the bottom menu with the orb always on screen) */
@media (max-width: 640px) {
  html { scroll-padding-bottom: 136px; }
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .top { position: relative; }
  .leather { height: 60px; }
  .bar-in { height: 60px; gap: 10px; }
  .brand img { width: 64px; height: 64px; margin: -6px -6px -10px -8px; }
  .brand b { font-size: 21px; }
  .hero { padding: 12px 0 6px; }
  .logo { width: 250px; height: 250px; }
  .tagline { font-size: 18px; }
  .pitch { font-size: 15.5px; margin: 6px 20px 16px; }
  .hero .plaque { width: auto; margin: 0 12px; padding: 10px 14px 14px; }
  .hero .plaque h2 { font-size: 20px; }
  .hero .plaque .rule { margin: 9px auto; }
  .hero .plaque p { font-size: 14px; }
  .sec { padding-top: 58px; scroll-margin-top: -28px; }
  .share { scroll-margin-top: 0; }
  .head { margin-bottom: 26px; }
  .head h2 { font-size: 31px; }
  .orn { width: 260px; }
  .orn img { width: 48px; height: 48px; }
  .lead { font-size: 16.5px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { display: grid; grid-template-columns: 62px 1fr; column-gap: 14px; padding: 12px 8px 14px; }
  .step .slot { grid-row: span 3; }
  .step .caps { margin: 2px 0 0; }
  .step h3 { font-size: 21px; }
  .step p { margin-top: 6px; font-size: 15.5px; }
  .cards {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none;
    gap: 14px; margin: 0 -18px; padding: 0 18px 16px;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { width: 156px; scroll-snap-align: start; }
  .facts { grid-template-columns: 1fr; margin-top: 12px; padding: 6px 4px 8px; }
  .fact { border-left: 0; box-shadow: none; border-top: 1px solid rgba(0,0,0,.75); padding: 12px 6px 10px; }
  .fact:first-child { border-top: 0; }
  .ladder { padding: 8px 8px 6px; }
  .ladder .tierline { gap: 6px; letter-spacing: .08em; font-size: 13px; }
  .ladder .stars img { width: 12px; height: 12px; }
  .odds { font-size: 15.5px; }
  .share { margin-top: 80px; }
  .share .wrap { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; padding-bottom: 44px; }
  .sharecard { width: 240px; }
  .share h2 { font-size: 31px; }
  .menu { margin-top: 64px; padding-bottom: 104px; }
  .fcols { grid-template-columns: 1fr; gap: 12px; padding-top: 24px; }
  .forb { display: none; }
  .fbrand img { width: 64px; height: 64px; }
  .flinks { justify-self: start; text-align: left; }
  .flinks a { padding: 14px 0; margin: 0; }
  .doc { padding: 0 18px; }
  /* The phone's title bar shows the page's title, so its heading is kept for screen readers only */
  body:not(.inapp) .dhead:not(.shown) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .doc h2 { font-size: 20px; margin-top: 26px; }
  .doc > .intro { margin-top: 20px; }
  /* Text pages on phones: the item page's title bar, with the back plate */
  .top.sub .brand { display: none; }
  .top.sub .back {
    display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center;
    border: 13px solid transparent; border-image: url(../img/wb/wb-panel.png) 48 fill/13px stretch;
  }
  .top.sub .back img { width: 16px; height: 16px; transform: scaleX(-1); }
  .top.sub .ttl { display: block; margin-right: auto; }
  .top.sub .ttl b { font-size: 21px; display: block; line-height: 1.15; }
  .top.sub .ttl span { display: block; font-size: 12.5px; color: var(--soft); text-shadow: 0 1px 1px #000; margin-top: 1px; }
  /* The bottom menu stays on screen, like the app's */
  .tabs {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 94px; box-shadow: 0 -8px 12px rgba(0,0,0,.6);
    background: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.6)), url(../img/wb/wb-menu-tile.png) 0 0/64px 64px, #1a1210;
  }
  .tabs .row { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 74px; padding: 0 4px 8px; }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 12px Caudex, Georgia, serif; color: var(--muted); text-shadow: 0 -1px 0 rgba(0,0,0,.9); }
  .tab:hover { text-decoration: none; }
  .tab .slot { width: 46px; height: 46px; }
  .tab .slot::before { display: none; }
  .tab .slot img { width: 22px; height: 22px; }
  .tab .lit { display: none; }
  .tab.on { color: var(--gold); }
  .tab.on .slot::before { display: block; inset: 6px; }
  .tab.on .lit { display: block; }
  .tab.on .dim { display: none; }
  .tab.orb { position: relative; z-index: 3; font-size: 14px; }
  .tab.orb .o { width: 104px; height: 104px; margin: -60px 0 -10px; filter: drop-shadow(0 0 14px rgba(255,51,15,.5)); }
}