/* 关于我们 (about.js): the ladder home's 关于 page and the in-game menu's sheet. The panels are ladder.css .ld-panel. */
.ab-head { display: flex; align-items: center; gap: 10px; }
.ab-logo { flex: none; width: 56px; height: 56px; box-sizing: border-box; border-radius: 14px; border: 3px solid var(--ink); display: grid; place-items: center;
  background: var(--gold); box-shadow: 0 3px 0 var(--ink); }
.ab-logo .ic { width: 38px; height: 38px; }
.ab-head b { display: block; font: 900 18px/1.2 var(--display); color: var(--ink); }
.ab-head small { display: block; margin-top: 2px; font: 800 12px/1.3 var(--font); color: var(--ink2); }

.ab-s, .ab-dc { appearance: none; font: inherit; cursor: pointer; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.ab-s:active, .ab-dc:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }
.ab-s i, .ab-dc i { flex: none; width: 30px; height: 30px; box-sizing: border-box; border-radius: 9px; border: 2px solid var(--ink); background: var(--c);
  color: #fff; display: grid; place-items: center; font: 900 13px/1 var(--display); font-style: normal; }

.ab-soc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ab-s { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 8px 5px 5px; box-sizing: border-box; border: 2.5px solid var(--ink);
  border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--ink); font: 900 14px/1.15 var(--display); text-align: start; }
.ab-s span { min-width: 0; overflow-wrap: anywhere; }
.ab-s:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd one out takes the whole row */

.ab-dc { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; box-sizing: border-box; border: 2.5px solid var(--ink);
  border-radius: 14px; background: #5865f2; color: #fff; box-shadow: 0 4px 0 var(--ink), var(--cel); text-align: start; }
.ab-dc i { width: 42px; height: 42px; border-radius: 12px; --c: #fff; color: #5865f2; font-size: 16px; }
.ab-dc b { display: block; font: 900 17px/1.2 var(--display); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ab-dc small { display: block; margin-top: 2px; font: 800 12px/1.35 var(--font); color: rgba(255, 255, 255, .9); }

.ab-foot { margin: 2px 0 6px; text-align: center; font: 800 11px/1.6 var(--font); color: rgba(255, 255, 255, .8); text-shadow: 0 1px 0 var(--ink); }
#sheetBody .ab-foot { color: var(--muted); text-shadow: none; }