/* The boards, a post and the ranking (board.html, post.html, ranking.html), and the live parts of the home page.
   The site's own colours and pieces (index.html :root, .card, .strip, .row); board m16. */

/* ---- the home page's live parts */
.bd-none { padding: 14px 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.card .bd-none:only-child, .ch-h + .bd-none { padding-top: 10px; }
.bd-all { margin-left: 8px; font-family: Nunito, system-ui, sans-serif; font-size: 12px; font-weight: 900; color: var(--blue); }
.bd-all:hover { text-decoration: underline; }
.bd-block { display: block; margin: 8px 4px 2px; }
.bd-dot { color: #16a34a; }
.rk img.g, .bud .av img.g, .rkt img.g { width: 15px; height: 25px; object-fit: contain; image-rendering: pixelated; }
.rk img.g { justify-self: center; }
.sv .st.full { color: #dc2626; }
.sv .st.off { color: var(--faint); }
.strip .tabsm a { font-size: 12px; font-weight: 800; color: var(--muted); padding: 4px 9px; border-radius: 8px; }
.strip .tabsm a:hover { background: #eef3ff; color: var(--blue); }
a.row { color: var(--ink2); }
a.row.imp { color: #e0322b; } a.row.grn { color: #1d9b3c; } a.row.blu { color: #2453e6; }
.bd-pi { flex-shrink: 0; font-size: 10.5px; font-weight: 900; letter-spacing: .4px; color: #a0620a; background: #fff1d9; border-radius: 6px; padding: 2px 6px; }
.bd-rep { flex-shrink: 0; font-size: 10.5px; font-weight: 900; color: #b42318; background: #ffe9e7; border-radius: 6px; padding: 2px 6px; }

/* The player page's Write button (me.css), for these pages too */
.write { margin: 10px 2px 2px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0 14px; font-weight: 900;
  font-size: 13px; color: #fff; background: linear-gradient(#8fa9f5, var(--board)); box-shadow: 0 3px 0 #5b77d0; cursor: pointer; }
button.write { border: 0; font-family: inherit; }

.ch-h .bd-right { display: inline-flex; align-items: baseline; gap: 2px; }
.bd > main { order: 0; }   /* responsive.css puts .feed second on phones, for the home page */
.bd > aside { order: 1; }

/* ---- the board colours */
.strip .lab.b-notice, .bd-tabs a[data-b="notice"] { --c: var(--notice); }
.strip .lab.b-event, .bd-tabs a[data-b="event"] { --c: var(--event); }
.strip .lab.b-free, .bd-tabs a[data-b="free"] { --c: var(--board); }
.strip .lab.b-guild, .bd-tabs a[data-b="guild"] { --c: #2a9d8f; }
.strip .lab.b-fanart, .bd-tabs a[data-b="fanart"] { --c: var(--shot); }
.strip .lab.b-rank, .bd-tabs a[data-by] { --c: #f0a500; }

/* ---- the page */
.bd-head { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.bd-h1 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 30px; letter-spacing: .3px; color: var(--ink); }
.bd-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: #fff;
  border: 1px solid rgba(29, 39, 66, .08); box-shadow: var(--shadow); font-family: var(--disp); font-size: 17px; letter-spacing: .2px; color: var(--ink2);
  transition: transform .15s var(--spring), background .15s; }
.bd-tabs a::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.bd-tabs a:hover { transform: translateY(-1px); }
.bd-tabs a.on { background: var(--c); color: #fff; border-color: transparent; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.bd-tabs a.on::before { background: #fff; }
.bd { display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 28px; margin-top: 22px; align-items: start; }
.bd aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bd .strip .lab { min-width: 0; }
.bd-count { margin-left: auto; padding-bottom: 10px; font-size: 12.5px; font-weight: 800; color: var(--faint); }
.bd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 2px 4px; }
.bd-foot .write, .bd-acts .write { margin: 0; border: 0; cursor: pointer; font-family: inherit; }
.write:disabled { opacity: .6; cursor: default; }
.bd-login { font-size: 13.5px; font-weight: 900; color: var(--blue); }
.bd-login:hover { text-decoration: underline; }
.bd-team { font-size: 13px; font-weight: 700; color: var(--muted); }
.side { padding: 16px 18px 14px; }
.side p { margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--ink2); }
.side ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--ink2); }

/* ---- pages of a list */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 0 6px; }
.pager:empty { display: none; }
.pager a { min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 8px; border-radius: 10px; font-weight: 900; font-size: 13.5px;
  color: var(--ink2); background: #f3f6fb; font-variant-numeric: tabular-nums; }
.pager a:hover { background: #e8eefb; }
.pager a[aria-current] { background: var(--blue); color: #fff; }

/* ---- writing */
.bd-write { margin: 12px 0 8px; padding: 16px; border-radius: 16px; background: #f6f9ff; border: 1px solid #e3eaf7; }
.bd-form { display: grid; gap: 12px; }
.bd-form label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 900; color: var(--ink2); letter-spacing: .2px; }
.bd-form input[type="text"], .bd-form textarea, .rk-tools input { width: 100%; font: 600 15px/1.45 Nunito, system-ui, sans-serif; color: var(--ink);
  background: #fff; border: 1.5px solid #d7dfeb; border-radius: 12px; padding: 10px 12px; }
.bd-form textarea { resize: vertical; min-height: 120px; }
.bd-form input:focus, .bd-form textarea:focus, .rk-tools input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 102, 245, .15); }
.bd-form small { justify-self: end; font-size: 11.5px; font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; }
.bd-pic { display: grid; gap: 8px; }
.bd-pic input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bd-picrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bd-pic label.bd-picbtn { display: inline-grid; place-items: center; height: 36px; padding: 0 14px; border-radius: 11px; cursor: pointer; font-size: 13px;
  color: var(--ink2); background: #fff; border: 1.5px dashed #b9c6db; }
.bd-pic input[type="file"]:focus-visible + label.bd-picbtn { border-color: var(--blue); }
.bd-pic .hint { font-size: 12px; font-weight: 700; color: var(--muted); }
.bd-pic .fname { font-size: 12.5px; font-weight: 800; color: var(--ink2); overflow-wrap: anywhere; }
.bd-pic img { max-width: 220px; max-height: 160px; border-radius: 12px; border: 1px solid #e3eaf7; object-fit: contain; background: #fff; }
.bd-form label.bd-imp { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bd-err { padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #b42318; background: #fff0ee; border: 1px solid #fbd0ca; }
.bd-err[hidden] { display: none; }
.bd-acts { display: flex; align-items: center; gap: 12px; }
.bd-cancel { border: 0; background: none; font: 800 13px Nunito, system-ui, sans-serif; color: var(--muted); cursor: pointer; padding: 6px 4px; }
.bd-cancel:hover { color: var(--ink2); }

/* ---- Fan Art */
.fa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 14px 0 6px; }
.fa { display: grid; gap: 6px; min-width: 0; padding: 8px; border-radius: 16px; transition: background .15s; }
.fa:hover { background: #f5f8ff; }
.fa-im { height: 150px; border-radius: 12px; overflow: hidden; background: #eef3fa; }
.fa-im img { width: 100%; height: 100%; object-fit: cover; }
.fa b { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa small { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- one post */
.pt { padding: 6px 24px 18px; }
.pt h1 { margin: 16px 0 6px; font-family: var(--disp); font-weight: 400; font-size: 27px; line-height: 1.2; letter-spacing: .2px; color: var(--ink); overflow-wrap: anywhere; }
.pt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pt-who { display: inline-flex; align-items: center; gap: 7px; color: var(--ink2); }
.pt-who img, .rp-h img { width: 24px; height: 24px; object-fit: contain; background: #eef4fc; border-radius: 8px; }
.pt-pic { display: block; margin: 16px 0 4px; }
.pt-pic[hidden] { display: none; }
.pt-pic img { max-width: 100%; max-height: 640px; border-radius: 14px; border: 1px solid #e6ecf3; background: #f3f6fb; }
.pt-body { margin-top: 14px; font-size: 15.5px; font-weight: 600; line-height: 1.65; color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-body:empty { display: none; }
.pt-note { margin: 0; font-style: italic; color: var(--muted); white-space: normal; }
.pt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e8edf4; }
.pt-acts[hidden] { display: none; }
.pt-act { height: 32px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #d7dfeb; background: #fff; cursor: pointer;
  font: 800 12.5px Nunito, system-ui, sans-serif; color: var(--ink2); }
.pt-act:hover { border-color: #b9c6db; }
.pt-act.del { color: #b42318; }
.pt-act.pin { color: var(--blue); }
.pt-act:disabled { opacity: .55; cursor: default; }
.rp-box { padding: 16px 20px 14px; }
.rp { padding: 12px 2px; border-top: 1px solid #eef2f7; }
.rp:first-child { border-top: 0; }
.rp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.rp-h b { font-weight: 800; color: var(--ink); }
.rp-h .d { font-size: 12px; font-weight: 700; color: var(--faint); }
.rp-acts { margin-left: auto; display: flex; gap: 6px; }
.rp-acts .pt-act { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 8px; }
.rp-b { margin: 6px 0 0 32px; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-form { margin-top: 10px; padding-top: 12px; border-top: 1px dashed #e8edf4; }
.rp-form[hidden], .bd-login[hidden], .bd-team[hidden], .rp-box[hidden], .bd-write[hidden], .write[hidden] { display: none; }
.rp-form textarea { min-height: 84px; }
.rp-form .bd-acts { justify-content: space-between; }

/* ---- the ranking */
.rk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0 6px; }
.rk-tools form { display: flex; gap: 8px; flex: 1 1 260px; max-width: 380px; }
.rk-tools input { height: 38px; padding: 6px 12px; }
.rk-tools .write { margin: 0; border: 0; cursor: pointer; font-family: inherit; height: 38px; }
.rk-clear { font-size: 12.5px; font-weight: 900; color: var(--muted); }
.rk-clear[hidden], .rk-you[hidden] { display: none; }
.rk-you { margin-left: auto; font-size: 13px; font-weight: 800; color: #8a5a00; background: #fff6d8; border-radius: 10px; padding: 8px 12px; }
.rk-you b { font-family: var(--disp); font-weight: 400; font-size: 15px; }
.rkt { display: grid; grid-template-columns: 56px 26px minmax(0, 1fr) minmax(0, 170px) 110px; gap: 10px; align-items: center; padding: 9px 6px;
  border-top: 1px solid #eef2f7; font-size: 14px; font-weight: 700; color: var(--ink2); }
.rkt-h { border-top: 0; padding-top: 4px; padding-bottom: 6px; font-size: 11px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; color: var(--faint); }
.rkt .n { font-family: var(--disp); font-weight: 400; font-size: 16px; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
.rkt .nm { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkt .gd { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkt .gp, .rkt-h span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rkt .gp { color: var(--muted); font-size: 13px; }
.rkt.you { background: #fff6d8; border-radius: 10px; border-top-color: transparent; }
.rkt.you .nm { color: #8a5a00; }
#rkList > .rkt:nth-child(1) .n { color: #f0a500; } #rkList > .rkt:nth-child(2) .n { color: #9aa7ba; } #rkList > .rkt:nth-child(3) .n { color: #cd7f32; }

/* ---- tablets and phones */
@media (max-width: 1100px) {
  .bd { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .bd-head { margin-top: 18px; gap: 10px; }
  .bd-h1 { font-size: 25px; }
  .bd-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; width: calc(100% + 32px); }
  .bd-tabs::-webkit-scrollbar { display: none; }
  .bd-tabs a { flex-shrink: 0; height: 36px; padding: 0 13px; font-size: 15px; }
  .bd { margin-top: 14px; gap: 18px; }
  .pt { padding: 6px 16px 16px; }
  .pt h1 { font-size: 23px; }
  .rp-box { padding: 14px 14px 12px; }
  .rp-b { margin-left: 0; }
  .fa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fa { padding: 4px; }
  .fa-im { height: 120px; }
  .rkt { grid-template-columns: 44px 20px minmax(0, 1fr) 84px; gap: 8px; }
  .rkt .gd, .rkt-h span:nth-child(4) { display: none; }
  .rk-you { margin-left: 0; }
  .bd-count { display: none; }
  /* A long title and its tags on one line, the writer under them: nothing runs into anything */
  .row.brow { grid-template-columns: 12px minmax(0, 1fr); row-gap: 3px; }
  .row.brow .t { flex-wrap: wrap; row-gap: 4px; }
  .row.brow .who { grid-column: 2; }
  .row .t .new, .row .t .cm, .row .t .arch, .row .t .bd-pi, .row .t .bd-rep { white-space: nowrap; }
}