/* Source module: tabs.css */
.component-stack { display: flex; flex-direction: column; gap: 12px; }
.sample-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.sample-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sample-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sample-cell { min-width: 0; padding: 12px; border: 1px solid #202321; background: rgba(0,0,0,.22); }

.tabs-showcase { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.game-tabs {
  position:relative;
  width:100%;
  height:40px;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  padding:5px 7px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:#090709;
  box-shadow:none;
}
.game-tabs::after {
  content:"";
  position:absolute;
  z-index:3;
  left:7px;
  right:7px;
  top:35px;
  height:1px;
  background:#584840;
  pointer-events:none;
}
.game-tab {
  --tab-126-glow:linear-gradient(90deg,
    transparent 0%,
    rgba(48,24,8,.18) 10%,
    rgba(48,24,8,.72) 28%,
    #301808 50%,
    rgba(48,24,8,.72) 72%,
    rgba(48,24,8,.18) 90%,
    transparent 100%);
  --tab-667-glow:radial-gradient(ellipse 58% 46% at 50% 100%,
    rgba(114,97,30,.94) 0%,
    rgba(88,74,23,.74) 34%,
    rgba(52,44,14,.38) 66%,
    transparent 100%);
  appearance:none;
  position:relative;
  min-width:0;
  width:var(--tab-item-width,auto);
  flex:0 0 var(--tab-item-width,auto);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:auto;
  height:30px;
  padding:0 12px;
  border:0;
  background:#080808;
  color:#9c815a;
  font:16px/1 "DCalc",SimSun,sans-serif;
  text-shadow:1px 1px 0 #000,0 0 2px #000;
  white-space:nowrap;
  cursor:pointer;
}
.game-tab:not(:last-of-type)::after {
  content:"";
  position:absolute;
  top:5px;
  right:0;
  width:1px;
  height:19px;
  background:linear-gradient(180deg,
    rgba(52,47,42,.153) 0%,
    rgba(52,47,42,.376) 5.56%,
    rgba(52,47,42,.624) 11.11%,
    rgba(52,47,42,.847) 16.67%,
    #342f2a 22.22%,
    #342f2a 77.78%,
    rgba(52,47,42,.847) 83.33%,
    rgba(52,47,42,.624) 88.89%,
    rgba(52,47,42,.376) 94.44%,
    rgba(52,47,42,.153) 100%);
  pointer-events:none;
}
.game-tab:hover {
  color:#e4ca90;
  background-image:var(--tab-126-glow);
}
.game-tab.selected,
.game-tab.selected:hover {
  color:#e4ca90;
  background-image:var(--tab-667-glow),var(--tab-126-glow);
}
.game-tab .tab-label { position:relative;z-index:1;display:inline-block; }
.game-tab:active { transform:none; }
.game-tab:active .tab-label,
.game-tab.is-pressed .tab-label { transform:translateY(1px); }
.game-tabs > .tab-marker { position:absolute;z-index:4;left:0;bottom:0;width:39px;height:5px;opacity:0;transform:translateX(-50%);pointer-events:none; }
.game-tabs > .tab-marker::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,
    rgba(208,165,106,.024) 0%,
    rgba(208,165,106,.22) 10%,
    rgba(208,165,106,.49) 23%,
    rgba(208,165,106,.82) 36%,
    #9d7a35 44%,
    #9d7a35 56%,
    rgba(208,165,106,.82) 64%,
    rgba(208,165,106,.49) 77%,
    rgba(208,165,106,.22) 90%,
    rgba(208,165,106,.024) 100%);
}
.game-tabs > .tab-marker::after {
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  width:9px;
  height:4px;
  background:linear-gradient(180deg,#9d7a35 0%,#a7823f 46%,#d0a56a 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform:translateX(-50%);
  filter:drop-shadow(0 0 1px rgba(157,122,53,.22));
}
.game-tabs > .tab-marker.is-ready { opacity:1;transition:left 300ms cubic-bezier(.22,.61,.36,1); }
.game-tabs > .tab-marker-line::before {
  background:linear-gradient(90deg,
    rgba(208,165,106,.024) 0%,
    rgba(208,165,106,.286) 15%,
    rgba(208,165,106,.631) 28%,
    rgba(208,165,106,.875) 38%,
    #d0a56a 50%,
    rgba(208,165,106,.875) 62%,
    rgba(208,165,106,.631) 72%,
    rgba(208,165,106,.286) 85%,
    rgba(208,165,106,.024) 100%);
}
.game-tabs > .tab-marker-line::after { display:none; }
@media (prefers-reduced-motion:reduce) { .game-tabs > .tab-marker.is-ready { transition:none; } }
.tabs-pager-row { display:flex;align-items:center;justify-content:space-between;margin-top:10px; }

.pager { height: 34px; display: flex; align-items: center; gap: 8px; color: var(--gold); }
.pager-btn { width: 27px; height: 25px; display:flex;align-items:center;justify-content:center;border:1px solid #514125;background:#101211;color:#8b8778; }
.pager-btn.active { background: #1b315c; color: #e3c977; }