/* Shared launcher-inspired shell for the isolated /new site. */
:root{
  --game-ink: #031018;
  --game-navy: #061d29;
  --game-navy-2: #0a2a38;
  --game-navy-3: #0d3544;
  --game-gold-dark: #4b2b09;
  --game-gold: #a56c1d;
  --game-gold-mid: #d49a35;
  --game-gold-light: #f0ce76;
  --game-ivory: #f4e7c2;
  --game-line: rgba(181,121,32,.72);
  --game-line-soft: rgba(205,151,58,.25);
  --game-inset: inset 0 0 0 1px rgba(255,211,117,.07), inset 0 18px 40px rgba(28,91,111,.08);
}

body{
  color: var(--game-ivory);
  background-color: #020a0f;
}
body::before{
  opacity: .7;
  filter: saturate(.86) contrast(1.08) brightness(.72);
}
body::after{
  background:
    radial-gradient(900px 520px at 50% 0, rgba(22,83,106,.22), transparent 68%),
    linear-gradient(180deg, rgba(1,10,15,.22), rgba(1,7,11,.72) 76%, rgba(0,4,7,.92));
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  border-color: #8f682d !important;
  -webkit-text-fill-color: #281e13 !important;
  caret-color: #281e13;
  -webkit-box-shadow: 0 0 0 1000px #b8aa88 inset !important;
  box-shadow: 0 0 0 1000px #b8aa88 inset !important;
  transition: background-color 9999s ease-out 0s;
}
input:autofill{
  border-color: #8f682d !important;
  color: #281e13 !important;
  background-color: #b8aa88 !important;
  box-shadow: 0 0 0 1000px #b8aa88 inset !important;
}
input:-webkit-autofill:focus,
input:autofill:focus{
  border-color: var(--game-gold-mid) !important;
  box-shadow: 0 0 0 1000px #b8aa88 inset, 0 0 0 3px rgba(181,128,43,.12) !important;
}

.gamebar{
  position: relative;
  top: auto;
  margin: 10px auto 0;
  width: min(1540px, calc(100% - 24px));
  border: 1px solid var(--game-line);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(14,52,67,.98), rgba(4,22,31,.98)),
    var(--game-navy);
  box-shadow:
    0 0 0 3px rgba(39,22,5,.88),
    0 0 0 4px rgba(205,148,45,.28),
    0 14px 38px rgba(0,0,0,.52),
    var(--game-inset);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.gamebar::before,
.gamebar::after{
  content: "";
  position: absolute;
  z-index: 2;
  top: -5px;
  width: 34px;
  height: 34px;
  pointer-events: none;
  border-top: 2px solid var(--game-gold-mid);
}
.gamebar::before{
  left: -5px;
  border-left: 2px solid var(--game-gold-mid);
}
.gamebar::after{
  right: -5px;
  border-right: 2px solid var(--game-gold-mid);
}
.gamebar .container{
  width: min(1500px, calc(100% - 26px));
}
.gamebar .topbar__inner{
  min-height: 72px;
  padding: 7px 0;
}
.gamebar .brand{
  min-width: 184px;
  margin-right: 22px;
}
.gamebar .brand__mark{
  width: 52px;
  height: 52px;
  min-width: 52px;
  flex-basis: 52px;
  border: 1px solid var(--game-gold-mid);
  border-radius: 50%;
  background: #071923;
  box-shadow: inset 0 0 0 2px #3b240a, 0 3px 12px rgba(0,0,0,.48);
}
.gamebar .brand__name,
.game-footer .footer__brand{
  color: var(--game-gold-light);
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 1px #211000, 0 0 12px rgba(220,155,46,.18);
}
.gamebar .brand__name{ font-size: 21px; }
.gamebar .brand__tagline{ color: #94aab0; }

.gamebar .nav{
  gap: 1px;
  padding: 3px;
  border: 1px solid rgba(181,121,32,.25);
  border-radius: 4px;
  background: rgba(0,7,11,.32);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.34);
}
.gamebar .nav__link{
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #b8c2c1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
}
.gamebar .nav__link:hover{
  color: var(--game-ivory);
  background: linear-gradient(180deg, rgba(33,76,88,.72), rgba(9,37,48,.72));
}
.gamebar .nav__link.is-active{
  color: var(--game-gold-light);
  border-color: rgba(214,154,53,.54);
  background: linear-gradient(180deg, rgba(85,55,15,.72), rgba(28,25,18,.8));
  box-shadow: inset 0 1px rgba(255,217,122,.13), 0 0 10px rgba(213,147,38,.08);
}
.gamebar .btn,
.gamebar .topbar-login__submit,
.gamebar .topbar-auth__logout{
  border-color: rgba(181,121,32,.45);
  border-radius: 3px;
  color: #e5d3a8;
  background: linear-gradient(180deg, rgba(33,62,70,.92), rgba(8,27,36,.96));
}
.gamebar .topbar-login,
.gamebar .topbar-auth{
  border-radius: 4px;
  border-color: rgba(181,121,32,.38);
}
.gamebar .topbar-auth{
  height: 42px;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10,39,50,.96), rgba(4,22,30,.98));
  box-shadow: inset 0 1px rgba(239,200,111,.06);
}
.gamebar .topbar-auth__name{
  height: 40px;
  padding: 0 13px;
  color: #e9edf0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
}
.gamebar .topbar-auth__name:hover{
  color: var(--game-gold-light);
}
.gamebar .topbar-auth__logout-form{
  align-self: stretch;
  border-left: 1px solid rgba(212,148,45,.72);
}
.gamebar .topbar-auth__logout{
  width: 76px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  color: #f3d88f;
  background: linear-gradient(180deg, #76501a, #3c260c 58%, #2b1c0a);
  box-shadow: inset 0 1px rgba(255,225,148,.18), inset 0 -1px rgba(0,0,0,.34);
  text-shadow: 0 1px #1b0d02;
}
.gamebar .topbar-auth__logout:hover{
  color: #fff1bc;
  background: linear-gradient(180deg, #97671f, #53330e 58%, #382309);
}
.gamebar .burger{ border-radius: 3px; }

.game-main{
  width: min(1540px, calc(100% - 24px));
  min-height: 520px;
  margin: 10px auto 0;
  padding: 28px 0 68px;
  border-right: 1px solid rgba(181,121,32,.22);
  border-left: 1px solid rgba(181,121,32,.22);
  background:
    linear-gradient(90deg, rgba(3,14,20,.74), rgba(4,22,30,.88) 16%, rgba(4,22,30,.88) 84%, rgba(3,14,20,.74));
  box-shadow: 0 18px 70px rgba(0,0,0,.28);
}

.game-footer{
  width: min(1540px, calc(100% - 24px));
  margin: 0 auto 12px;
  padding: 22px 0 24px;
  border: 1px solid rgba(181,121,32,.42);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(6,29,40,.97), rgba(2,14,20,.98));
  box-shadow: 0 0 0 3px rgba(34,20,6,.68), inset 0 1px rgba(241,202,111,.06);
}
.game-footer .footer__grid{
  grid-template-columns: 1fr 1.4fr .7fr;
  align-items: start;
}
.game-footer .footer__links{
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 7px 22px;
}
.game-footer .footer__links:last-child{
  grid-template-columns: 1fr;
}
.game-footer .footer__links a{
  color: #92a6aa;
  font-family: Georgia, "Times New Roman", serif;
}
.game-footer .footer__links a:hover{ color: var(--game-gold-light); }

.game-main .card,
.game-main .hero,
.game-main .tablewrap,
.game-main .callout{
  border-color: rgba(181,121,32,.48);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(10,40,52,.96), rgba(3,19,27,.98));
  box-shadow: 0 0 0 3px rgba(32,20,8,.58), var(--game-inset), 0 14px 32px rgba(0,0,0,.28);
}
.page-ratings .section{
  padding-top: 36px;
}
.page-ratings .ratings-intro{
  position: relative;
  padding: 48px 22px 16px;
  border: 1px solid rgba(190,130,35,.72);
  border-radius: 4px;
  background:
    radial-gradient(760px 180px at 50% 0, rgba(178,116,27,.13), transparent 72%),
    linear-gradient(180deg, rgba(26,22,15,.98), rgba(8,17,20,.98));
  box-shadow: 0 0 0 3px rgba(35,21,6,.72), var(--game-inset), 0 16px 36px rgba(0,0,0,.32);
}
.ratings-intro__plaque{
  position: absolute;
  top: -19px;
  left: 50%;
  width: min(330px, calc(100% - 40px));
  margin: 0;
  padding: 7px 24px 8px;
  transform: translateX(-50%);
  border: 1px solid #bc791d;
  border-radius: 4px;
  color: #f2d584;
  background: linear-gradient(180deg, #70440e, #3d2208 55%, #241406);
  box-shadow: 0 0 0 3px rgba(38,22,6,.76), inset 0 1px rgba(255,220,128,.20), inset 0 -3px rgba(0,0,0,.28);
  font: 700 25px/1.1 Georgia, "Times New Roman", serif;
  text-align: center;
  text-shadow: 0 1px #160a01, 0 0 10px rgba(242,190,72,.14);
}
.ratings-intro__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.ratings-intro__heading{
  color: var(--game-ivory);
  font: 700 clamp(20px, 2vw, 27px)/1.2 Georgia, "Times New Roman", serif;
}
.ratings-intro__copy .lead{
  max-width: 760px;
  margin: 6px 0 0;
  color: #9eadae;
  font-size: 14px;
  line-height: 1.5;
}
.ratings-intro .ratings-toolbar{
  flex: 0 0 auto;
  margin: 0;
}
.ratings-intro .ratings-filter-form{
  flex-wrap: nowrap;
}
.ratings-intro .ratings-filter-select{
  border-color: rgba(181,121,32,.48);
  color: #eadcb8;
  background-color: #171713;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.34);
}
.ratings-intro__note{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(197,142,45,.24);
  color: #95a8ac;
  font-size: 12px;
}
.ratings-intro__note-icon{
  display: grid;
  width: 23px;
  height: 23px;
  min-width: 23px;
  place-items: center;
  border: 1px solid rgba(213,156,54,.68);
  border-radius: 50%;
  color: #efca70;
  background: rgba(65,39,7,.44);
  font: 700 12px Georgia, "Times New Roman", serif;
}
.leaderboard-groups{
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
  margin-top: 42px;
}
.leaderboard-group{
  position: relative;
  padding: 42px 12px 12px;
  border: 1px solid rgba(188,128,34,.68);
  border-radius: 4px;
  background:
    radial-gradient(620px 150px at 50% 0, rgba(166,106,24,.12), transparent 72%),
    linear-gradient(180deg, #1a1710, #0e100f 30%, #080c0e);
  box-shadow: 0 0 0 3px rgba(34,20,6,.62), inset 0 1px rgba(244,205,119,.07), 0 16px 36px rgba(0,0,0,.32);
}
.leaderboard-group--recent{
  background:
    radial-gradient(520px 150px at 50% 0, rgba(166,106,24,.12), transparent 72%),
    linear-gradient(180deg, #1a1710, #0e100f 30%, #080c0e);
}
.leaderboard-group__head{
  position: absolute;
  top: -18px;
  left: 50%;
  width: min(310px, calc(100% - 28px));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: translateX(-50%);
}
.leaderboard-group__title{
  width: 100%;
  margin: 0;
  padding: 7px 22px 8px;
  border: 1px solid #b7761c;
  border-radius: 4px;
  color: #f0d17d;
  background: linear-gradient(180deg, #68400e, #392107 58%, #211306);
  box-shadow: 0 0 0 3px rgba(35,20,5,.72), inset 0 1px rgba(255,219,128,.16), inset 0 -2px rgba(0,0,0,.28);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px #1c0d01;
}
.page-ratings .leaderboard-grid{
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(194,140,43,.28);
  border-radius: 3px;
  background: linear-gradient(180deg, #07181d, #040d10);
  box-shadow: inset 0 8px 28px rgba(0,0,0,.32);
}
.page-ratings .leaderboard-grid--alltime{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-ratings .leaderboard-grid--recent{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-ratings .game-main .leaderboard-zone{
  padding: 14px 12px 12px;
  overflow: visible;
  border: 0;
  border-right: 1px solid rgba(190,137,43,.24);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(17,48,55,.34), rgba(5,18,22,.08));
  box-shadow: none;
}
.page-ratings .game-main .leaderboard-zone:last-child{
  border-right: 0;
}
.page-ratings .leaderboard-zone__head{
  min-height: 62px;
  border-bottom-color: rgba(214,160,57,.30);
}
.page-ratings .leaderboard-zone__head .card__title{
  color: #f0d691;
  font-size: 16px;
}
.page-ratings .leaderboard-row{
  position: relative;
  border-color: rgba(110,139,142,.25);
  border-radius: 3px;
  background: linear-gradient(180deg, #111b1d, #091214);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 2px 5px rgba(0,0,0,.16);
}
.page-ratings .leaderboard-row:hover{
  border-color: rgba(190,137,43,.46);
  background: linear-gradient(180deg, #17292d, #0b191c);
}
.page-ratings .leaderboard-row--place-1{
  border-color: rgba(224,176,75,.50);
  border-left: 3px solid #d5a83e;
  background: linear-gradient(90deg, rgba(155,103,20,.24), #0b1517 58%);
}
.page-ratings .leaderboard-row--place-1 .leaderboard-row__place{
  color: #f0c75f;
}
.page-ratings .leaderboard-row--place-2{
  border-color: rgba(171,185,190,.38);
  border-left: 3px solid #aab8bb;
  background: linear-gradient(90deg, rgba(132,150,155,.15), #0b1517 58%);
}
.page-ratings .leaderboard-row--place-2 .leaderboard-row__place{
  color: #c8d1d3;
}
.page-ratings .leaderboard-row--place-3{
  border-color: rgba(177,113,64,.42);
  border-left: 3px solid #b87545;
  background: linear-gradient(90deg, rgba(143,79,38,.18), #0b1517 58%);
}
.page-ratings .leaderboard-row--place-3 .leaderboard-row__place{
  color: #cf9669;
}
.page-ratings .leaderboard-row.is-mine{
  border-color: rgba(43,228,167,.45);
  background: linear-gradient(180deg, rgba(43,228,167,.17), rgba(43,228,167,.09));
  box-shadow: inset 0 0 0 1px rgba(43,228,167,.20);
}
.game-main .h1,
.game-main .h2,
.game-main .card__title{
  color: var(--game-ivory);
  font-family: Georgia, "Times New Roman", serif;
}
.game-main .kicker{ color: var(--game-gold-mid); }
.game-main .btn{
  border-color: rgba(181,121,32,.52);
  border-radius: 3px;
  color: #eadbb7;
  background: linear-gradient(180deg, #173c49, #08222d);
  font-family: Georgia, "Times New Roman", serif;
}
.game-main .btn:hover{
  border-color: var(--game-gold-mid);
  color: #fff0c4;
  background: linear-gradient(180deg, #215164, #0a2b38);
}
.game-main .btn--primary{
  color: #fff0c2;
  border-color: #da9e32;
  background: linear-gradient(180deg, #17658b, #0a3e62 54%, #082c4b);
  box-shadow: inset 0 1px rgba(255,255,255,.22), inset 0 -4px rgba(0,0,0,.22), 0 0 0 3px #382208, 0 0 20px rgba(216,146,32,.19);
  text-shadow: 0 1px 2px #00121d;
}
.game-main .btn--primary:hover{
  color: #fff6d9;
  background: linear-gradient(180deg, #217aa0, #0d5076 54%, #093655);
}
.worldchat__panel{
  display: flex;
  flex-direction: column;
  height: min(84vh, 820px);
  max-height: none;
  border: 1px solid #9f6819;
  border-radius: 4px;
  background: #061923;
  box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 18px rgba(185,124,30,.08);
}
.worldchat__panel[hidden]{
  display: none;
}
.worldchat__header{
  flex: 0 0 auto;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #0b2b38, #071e29);
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
}
.worldchat__title{
  color: #f0d99c;
  font-family: Georgia, "Times New Roman", serif;
}
.worldchat__feed{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 18px 18px;
  scroll-padding-block: 16px;
  scrollbar-width: thin;
  scrollbar-color: #8f682d #04131a;
  background: linear-gradient(180deg, #081f2a, #061923);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.worldchat__feed::-webkit-scrollbar{
  width: 9px;
}
.worldchat__feed::-webkit-scrollbar-track{
  background: #04131a;
}
.worldchat__feed::-webkit-scrollbar-thumb{
  border: 2px solid #04131a;
  border-radius: 8px;
  background: #8f682d;
}
.worldchat__message{
  border-color: rgba(86,130,142,.30);
  background: linear-gradient(180deg, #102f3b, #0c2732);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 3px 10px rgba(0,0,0,.10);
}
.worldchat__form{
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #061923, #04141c);
}
.worldchat__toggle{
  border: 1px solid #9f6819;
  border-radius: 4px;
  color: var(--game-gold-light);
  background: linear-gradient(180deg, #10384a, #051e2a);
  box-shadow: 0 8px 24px rgba(0,0,0,.38), 0 0 12px rgba(185,124,30,.06);
  font-family: Georgia, "Times New Roman", serif;
}
.worldchat.is-open .worldchat__toggle{
  border-color: #9f6819;
  background: linear-gradient(180deg, #10384a, #051e2a);
  box-shadow: 0 8px 24px rgba(0,0,0,.38), 0 0 12px rgba(185,124,30,.06);
}

@media (max-width: 860px){
  .worldchat__panel{
    height: min(72vh, 700px);
    max-height: none;
  }
}

@media (max-width: 1580px){
  .gamebar .brand{ min-width: auto; margin-right: 10px; }
  .gamebar .brand__text{ display: none; }
}

@media (max-width: 1400px){
  .gamebar .nav__link{ padding-inline: 8px; }
  .game-footer .footer__grid{ grid-template-columns: 1fr 1.8fr .6fr; }
}

@media (max-width: 1350px){
  .leaderboard-groups{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  .gamebar{
    width: calc(100% - 16px);
    margin-top: 8px;
  }
  .gamebar .brand__text{ display: flex; }
  .game-main,
  .game-footer{ width: calc(100% - 16px); }
  .game-footer .footer__grid{ grid-template-columns: 1fr; }
  .game-footer .footer__links{ grid-template-columns: repeat(2, max-content); }
  .ratings-intro__top{
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
  .ratings-intro .ratings-toolbar,
  .ratings-filter-select{
    width: 100%;
  }
}

@media (max-width: 820px){
  .page-ratings .leaderboard-grid{
    gap: 8px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .page-ratings .leaderboard-grid--alltime,
  .page-ratings .leaderboard-grid--recent{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-ratings .game-main .leaderboard-zone,
  .page-ratings .game-main .leaderboard-zone:last-child{
    border: 1px solid rgba(194,140,43,.26);
    background: linear-gradient(180deg, #0b252c, #061419);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
  }
}

@media (max-width: 620px){
  .gamebar .container{ width: calc(100% - 16px); }
  .gamebar .topbar__inner{ min-height: 62px; }
  .gamebar .brand__mark{
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }
  .gamebar .brand__name{ font-size: 18px; }
  .game-main{
    margin-top: 8px;
    padding-top: 16px;
  }
  .game-footer .footer__links{ grid-template-columns: 1fr 1fr; }
  .page-ratings .ratings-intro{
    padding: 46px 15px 15px;
  }
  .ratings-intro__plaque{
    font-size: 22px;
  }
  .leaderboard-group{
    padding: 44px 10px 10px;
  }
  .leaderboard-group__head{
    top: -17px;
    left: 50%;
    width: min(260px, calc(100% - 20px));
  }
  .page-ratings .leaderboard-grid--alltime,
  .page-ratings .leaderboard-grid--recent{
    grid-template-columns: 1fr;
  }
  .page-ratings .leaderboard-zone__head{
    min-height: 0;
  }
}

/* Account character registry. */
.page-account .game-main{
  width: min(1540px, calc(100% - 24px));
}
.page-account .game-main > .section > .grid{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.account-characters{
  padding: 22px;
}
.account-characters__toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}
.account-characters__filter{
  display: grid;
  grid-template-columns: auto minmax(190px, 260px);
  align-items: center;
  gap: 10px;
  color: #9bafb4;
  font-size: 12px;
  font-weight: 700;
}
.account-characters__filter .input{
  width: 100%;
}
.account-characters__notice{
  max-width: 430px;
  margin: 0;
  padding: 10px 12px;
}
.account-character-list{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.account-character{
  overflow: hidden;
  border: 1px solid rgba(181,121,32,.38);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(9,35,45,.96), rgba(3,17,23,.98));
  box-shadow:
    inset 0 1px rgba(255,225,154,.035),
    0 8px 20px rgba(0,0,0,.18);
}
.account-character__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(181,121,32,.26);
  background:
    linear-gradient(90deg, rgba(108,65,12,.16), transparent 48%),
    rgba(0,0,0,.12);
}
.account-character__identity{
  min-width: 0;
}
.account-character__name{
  overflow: hidden;
  color: var(--game-ivory);
  font: 700 20px/1.15 Georgia, "Times New Roman", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-character__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 6px;
  color: #96a9ad;
  font-size: 12px;
}
.account-character__meta span{
  position: relative;
}
.account-character__meta span + span::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(215,169,73,.68);
  transform: translateY(-50%);
}
.account-character__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.account-character__actions form{
  margin: 0;
}
.account-character__actions .small{
  max-width: 210px;
  text-align: right;
}
.account-character__details{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.account-character__fact{
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  border-right: 1px solid rgba(181,121,32,.16);
  border-bottom: 1px solid rgba(181,121,32,.16);
  background: rgba(4,23,30,.44);
}
.account-character__fact:nth-child(8n){
  border-right: 0;
}
.account-character__fact:nth-child(n+9){
  border-bottom: 0;
}
.account-character__fact--wide{
  grid-column: span 3;
  border-right: 0;
}
.account-character__fact--ranking{
  background: rgba(65,41,10,.13);
}
.account-character__fact span{
  display: block;
  color: #82979c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
}
.account-character__fact strong{
  display: block;
  margin-top: 5px;
  color: #eadfbe;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 1200px){
  .account-character__details{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .account-character__fact:nth-child(8n){
    border-right: 1px solid rgba(181,121,32,.16);
  }
  .account-character__fact:nth-child(4n){
    border-right: 0;
  }
  .account-character__fact:nth-child(n+9){
    border-bottom: 1px solid rgba(181,121,32,.16);
  }
  .account-character__fact:nth-child(n+13){
    border-bottom: 0;
  }
}

@media (max-width: 700px){
  .account-characters{
    padding: 15px;
  }
  .account-characters__toolbar,
  .account-character__header{
    align-items: stretch;
    flex-direction: column;
  }
  .account-characters__filter{
    grid-template-columns: 1fr;
  }
  .account-characters__notice{
    max-width: none;
  }
  .account-character__actions{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .account-character__actions .small{
    max-width: none;
    text-align: left;
  }
  .account-character__details{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-character__fact--wide{
    grid-column: span 1;
  }
  .account-character__fact:nth-child(4n){
    border-right: 1px solid rgba(181,121,32,.16);
  }
  .account-character__fact:nth-child(2n){
    border-right: 0;
  }
  .account-character__fact:nth-child(n+13){
    border-bottom: 0;
  }
}

@media (max-width: 420px){
  .account-character__details{
    grid-template-columns: 1fr;
  }
  .account-character__fact,
  .account-character__fact:nth-child(2n),
  .account-character__fact:nth-child(4n),
  .account-character__fact:nth-child(8n){
    border-right: 0;
  }
  .account-character__fact:nth-child(n+13){
    border-bottom: 1px solid rgba(181,121,32,.16);
  }
  .account-character__fact:last-child{
    border-bottom: 0;
  }
}