@font-face {
  font-family: "Game Tab Survivant";
  src: url("/assets/site/survivor-chiron/survivant.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mogathe Stamp";
  src: url("/assets/carryover/fonts/MogatheStamp.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Overlapping arched tabs use the same --play-accent as the game cards. */
.personal-game-tabs {
  box-sizing: border-box;
  display: flex;
  justify-content: safe flex-end;
  align-items: flex-end;
  gap: 0;
  position: relative;
  isolation: isolate;
  z-index: 0;
  max-width: calc(100% - 12px);
  margin: 10px auto 0;
  padding: 8px 20px 0 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.personal-game-tabs[hidden] { display: none; }
.has-personal-game-tabs.has-personal-game-tabs { margin-top: 0 !important; }
.personal-game-tabs .personal-game-tab {
  display: inline-flex;
  position: relative;
  z-index: var(--tab-order, 1);
  flex: 0 0 80px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 80px;
  min-width: 80px;
  height: 33px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--play-accent, #c6c4db) 80%, #07133f);
  border-bottom: 0;
  border-radius: 55% 55% 0 0 / 90% 90% 0 0;
  padding: 7px 8px 6px;
  background: var(--play-accent, #c6c4db);
  box-shadow: inset 0 1px 0 #ffffff80, 4px -2px 6px #17233435;
  color: #29354c;
  font: var(--game-tab-weight, 700) var(--game-tab-size, 13px)/1.1 var(--game-tab-font, "Barlow Semi Condensed"), Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(23, 35, 52, 0.14);
  text-decoration: none;
  white-space: nowrap;
}
.personal-game-tab + .personal-game-tab { margin-left: -16px; }
.personal-game-tabs :is(.play-game-jungle, .play-game-gunsmoke, .play-game-robicheaux, .play-game-dead, .play-game-primal, .play-game-ascension) { color: #fff; }
/* Keep these accents consistent even on pages with legacy game styles. */
.personal-game-tabs .play-game-palais { --play-accent: #C77980; color: #FFF5E1; text-shadow: 0 1px 2px rgba(67, 27, 39, 0.55); }
.personal-game-tabs .play-game-magnate { --play-accent: #F2BE9F; color: #624236; }
.personal-game-tabs .play-game-robicheaux { --play-accent: #42164f; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.personal-game-tabs .play-game-ascension { --play-accent: #26376B; color: #e4eaf6; border-color: #8d9fc4; }
.personal-game-tabs :is(.play-game-spilled, .play-game-spilled-lite) { color: #E4EAD3; }
.personal-game-tabs .personal-game-tab:hover,
.personal-game-tabs .personal-game-tab:focus-visible { z-index: 100; filter: brightness(1.08); }
.personal-game-tabs .personal-game-tab[aria-current="page"] { z-index: 99; box-shadow: inset 0 2px 0 #ffffffb3, 4px -2px 7px #17233450; }
.personal-game-tab > span { text-decoration: none; transform: translateY(3px); }
.personal-game-tab:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
@media(max-width: 640px) { .personal-game-tabs { padding-inline: 10px; } }

/* Display fonts retain each game's identity without enlarging the tab row. */
.personal-game-tabs :is(.play-game-spilled, .play-game-spilled-lite) { --game-tab-font: "Kimoru"; --game-tab-size: 15px; --game-tab-weight: 400; }
.personal-game-tabs .play-game-palais { --game-tab-font: "Silvestern"; --game-tab-size: 15px; --game-tab-weight: 400; }
.personal-game-tabs .play-game-jungle { color: #E8C987; --game-tab-font: "Game Tab Survivant"; --game-tab-size: 13px; --game-tab-weight: 400; }
.personal-game-tabs .play-game-robicheaux { --game-tab-font: "Robicheaux"; --game-tab-size: 15px; --game-tab-weight: 400; }
.personal-game-tabs .play-game-gunsmoke { --game-tab-font: "Mogathe Stamp"; --game-tab-size: 18px; --game-tab-weight: 400; }
.personal-game-tabs .play-game-magnate { --game-tab-font: "Decort"; --game-tab-size: 15px; --game-tab-weight: 400; }
.personal-game-tabs .play-game-madhouse { --game-tab-font: "Lakon Rokum"; --game-tab-size: 14px; --game-tab-weight: 400; }
.personal-game-tabs .play-game-dead { --game-tab-font: "Brother In Crime"; --game-tab-size: 18px; --game-tab-weight: 400; }

/* Share the action panel's grid cell so tabs rest on its top border. */
.personal-game-tabs.personal-game-tabs--mafia {
  grid-area: actions;
  align-self: start;
  justify-self: stretch;
  z-index: 2;
  max-width: 100%;
  margin: 0 !important;
  padding: 8px 8px 0;
  transform: translateY(calc(-100% + 1px));
}
/* Leave room above the action panel in the stacked layout. */
@media (max-width: 1050px) {
  body.is-dbd-game-view .game-grid:has(> .personal-game-tabs--mafia) {
    row-gap: 48px;
  }
}

@font-face { font-family:"SH Tab";src:url("/secret-hitler/assets/EskapadeFraktur-Black.ttf") format("truetype");font-weight:900;font-display:swap; }
.personal-game-tabs .play-game-secret-hitler { --play-accent:#f16246;--game-tab-font:"SH Tab";--game-tab-size:16px;--game-tab-weight:900;color:#fff1d2;text-shadow:0 1px 1px #713d2f66; }

.personal-game-tabs :is(.sh-tab-monogram,.gg-tab-monogram){display:inline-flex;align-items:flex-start;line-height:1;letter-spacing:0}
.personal-game-tabs .sh-tab-monogram{-webkit-text-stroke:.35px #87503a;paint-order:stroke fill}
.personal-game-tabs .sh-tab-monogram>span:first-child{transform:translateY(-2px)}
.personal-game-tabs .sh-tab-monogram>span+span{transform:translateY(3px);margin-left:-1px}
.personal-game-tabs .gg-tab-monogram{align-items:baseline;gap:1px}
.personal-game-tabs .gg-tab-monogram>span:nth-child(2){font-size:75%}

/* Anchor Madhouse tabs to the actual game panel, including its page zoom. */
.madhouse-game.has-personal-game-tabs {
  position: relative;
  margin-top: 48px !important;
}
.madhouse-game > .personal-game-tabs--madhouse {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 2;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding-bottom: 0;
}