/* =========================================================
   GAME TABS - FINAL CSS PACK (v1 / v2 / v3 / v4 / v5)
   사용 예)
   <div class="game-tabs v1">...</div>
   <div class="game-tabs v2">...</div>
   <div class="game-tabs v3">...</div>
   <div class="game-tabs v4">...</div>
   <div class="game-tabs v5">...</div>
   ========================================================= */

/* 공통 베이스 */
.game-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   v1 : Metal Plate
   - 기본(비활성) : 실버
   - Hover / 선택(is-active) : 골드
   - 형태 : 플레이트 + 다이아 장식
   ========================================================= */
.game-tabs.v1{ gap:22px; }

.game-tabs.v1 .game-tab{
  position:relative;
  flex:1 1 50%;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:6px;
  overflow:hidden;

  background:
    radial-gradient(120px 60px at 50% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)),
    linear-gradient(90deg, #5c5c5c 0%, #8b8b8b 35%, #cfcfcf 50%, #8b8b8b 65%, #4a4a4a 100%);

  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 10px 18px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);

  transform: translateY(0);
  filter:none;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
  user-select:none;
}

.game-tabs.v1 .game-tab .tab-inner{
  position:relative;
  z-index:2;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  color:#fff;
  letter-spacing:.5px;
  font-size:20px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.game-tabs.v1 .game-tab i{ font-size:20px; opacity:.95; }

/* 플레이트 라인 */
.game-tabs.v1 .game-tab:before{
  content:"";
  position:absolute;
  inset:10px 34px;
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(0,0,0,.35);
  opacity:.9;
}

/* 중앙 가로 라인 */
.game-tabs.v1 .game-tab:after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:1px;
  background:linear-gradient(to right,
    rgba(255,255,255,0),
    rgba(255,255,255,.28),
    rgba(255,255,255,0));
  transform:translateY(-50%);
  opacity:.65;
}

/* 양쪽 다이아 */
.game-tabs.v1 .game-tab .tab-inner:before,
.game-tabs.v1 .game-tab .tab-inner:after{
  content:"";
  position:absolute;
  top:50%;
  width:12px;
  height:12px;
  transform:translateY(-50%) rotate(45deg);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  opacity:.9;
}
.game-tabs.v1 .game-tab .tab-inner:before{ left:-52px; }
.game-tabs.v1 .game-tab .tab-inner:after { right:-52px; }

/* 비활성 다운톤 */
.game-tabs.v1 .game-tab:not(.is-active){ opacity:.92; }
.game-tabs.v1 .game-tab:not(.is-active):hover{ opacity:1; }

/* Hover / Active -> 골드 */
.game-tabs.v1 .game-tab:hover,
.game-tabs.v1 .game-tab.is-active{
  background:
    radial-gradient(120px 60px at 50% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.15)),
    linear-gradient(90deg, #b77711 0%, #d7a62a 35%, #f1d07b 50%, #d7a62a 65%, #a7640f 100%);

  border-color: rgba(255,255,255,.40);
  outline: 1px solid rgba(255,220,120,.55);
  box-shadow:
    0 16px 30px rgba(0,0,0,.55),
    0 0 22px rgba(255,190,60,.22),
    inset 0 0 0 2px rgba(255,255,255,.12),
    inset 0 10px 18px rgba(255,255,255,.06),
    inset 0 -10px 18px rgba(0,0,0,.25);

  transform: translateY(-2px);
  filter: brightness(1.08) contrast(1.05);
}

/* ACTIVE 텍스트 가독성 강화 */
.game-tabs.v1 .game-tab.is-active .tab-inner{
  color:#fff;
  font-weight:800;
  letter-spacing:.6px;
  text-shadow:
    0 2px 0 rgba(0,0,0,.75),
    0 0 10px rgba(0,0,0,.55),
    0 0 14px rgba(255,255,255,.12);
}
.game-tabs.v1 .game-tab.is-active i{
  opacity:1;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.75)) drop-shadow(0 0 10px rgba(0,0,0,.45));
}

/* 눌림 */
.game-tabs.v1 .game-tab:active{
  transform: translateY(0px) scale(.995);
  filter: brightness(.98) contrast(1.02);
  box-shadow:
    0 10px 18px rgba(0,0,0,.40),
    inset 0 2px 6px rgba(0,0,0,.35);
}

/* 키보드 포커스 */
.game-tabs.v1 .game-tab:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}

/* v1 모바일 */
@media (max-width: 576px){
  .game-tabs.v1{ gap:12px; }
  .game-tabs.v1 .game-tab{ min-height:64px; }
  .game-tabs.v1 .game-tab .tab-inner{ font-size:18px; }
  .game-tabs.v1 .game-tab .tab-inner:before{ left:-42px; }
  .game-tabs.v1 .game-tab .tab-inner:after { right:-42px; }
}


/* =========================================================
   v2 : Tech Neon / Notch Box
   - 기본 : graphite + teal
   - hover/active : purple + pink glow
   - 형태 : cut corners (노치)
   ========================================================= */
.game-tabs.v2{ gap:16px; }

.game-tabs.v2 .game-tab{
  position:relative;
  flex:1 1 50%;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  color:#eaf6ff;
  font-weight:800;
  letter-spacing:.6px;
  font-size:20px;

  border-radius:10px;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px
  );

  background:
    radial-gradient(220px 80px at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.38)),
    linear-gradient(90deg, #0b1220 0%, #0b1626 55%, #08101c 100%);

  border:1px solid rgba(120, 220, 255, .22);
  box-shadow:
    0 14px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45);

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease;
  user-select:none;

  text-shadow:
    0 2px 0 rgba(0,0,0,.75),
    0 0 10px rgba(0,0,0,.55);
}

.game-tabs.v2 .game-tab::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(120, 220, 255, .18);
  clip-path: inherit;
  opacity:.85;
  pointer-events:none;
}

.game-tabs.v2 .game-tab::after{
  content:"";
  position:absolute;
  left:-30%;
  top:-60%;
  width:60%;
  height:220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(140,255,255,.08),
    rgba(255,255,255,0)
  );
  opacity:.65;
  transition: left .18s ease, opacity .18s ease;
  pointer-events:none;
}

.game-tabs.v2 .game-tab:not(.is-active){ opacity:.93; }
.game-tabs.v2 .game-tab:not(.is-active):hover{ opacity:1; }

.game-tabs.v2 .game-tab:hover{
  transform: translateY(-2px);
  filter: brightness(1.08) contrast(1.05);
  border-color: rgba(170, 120, 255, .50);
  box-shadow:
    0 18px 34px rgba(0,0,0,.55),
    0 0 18px rgba(140, 120, 255, .25),
    inset 0 0 0 2px rgba(190, 160, 255, .10),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.game-tabs.v2 .game-tab:hover::after{ left:10%; opacity:.85; }

.game-tabs.v2 .game-tab.is-active{
  transform: translateY(-2px);
  background:
    radial-gradient(240px 90px at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.35)),
    linear-gradient(90deg, #3b0a6b 0%, #2a0a55 45%, #140a2b 100%);

  border-color: rgba(255, 120, 210, .55);
  box-shadow:
    0 20px 40px rgba(0,0,0,.60),
    0 0 22px rgba(255, 90, 200, .22),
    0 0 28px rgba(120, 120, 255, .18),
    inset 0 0 0 2px rgba(255, 200, 240, .10),
    inset 0 1px 0 rgba(255,255,255,.12);

  color:#ffffff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.78),
    0 0 12px rgba(0,0,0,.55),
    0 0 18px rgba(255,160,220,.18);
}

.game-tabs.v2 .game-tab.is-active::before{
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}

.game-tabs.v2 .game-tab:active{
  transform: translateY(0px) scale(.995);
  filter: brightness(.98);
  box-shadow:
    0 12px 22px rgba(0,0,0,.50),
    inset 0 2px 10px rgba(0,0,0,.40);
}

.game-tabs.v2 .game-tab:focus-visible{
  outline:2px solid rgba(160, 240, 255, .35);
  outline-offset:3px;
}

@media (max-width: 576px){
  .game-tabs.v2{ gap:12px; }
  .game-tabs.v2 .game-tab{ min-height:62px; font-size:18px; }
}


/* =========================================================
   v3 : Glass Capsule
   - 기본 : blue/mint glass
   - hover/active : red/orange premium glow
   - 형태 : capsule(알약) + 베벨 + 상단 하이라이트
   ========================================================= */
.game-tabs.v3{ gap:14px; }

.game-tabs.v3 .game-tab{
  position:relative;
  flex:1 1 50%;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  user-select:none;

  border-radius:999px;
  padding:0 18px;

  color:#eafcff;
  font-weight:900;
  letter-spacing:.6px;
  font-size:20px;
  text-shadow:
    0 2px 0 rgba(0,0,0,.70),
    0 0 10px rgba(0,0,0,.55);

  background:
    radial-gradient(120px 60px at 30% 20%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
    radial-gradient(140px 70px at 70% 10%, rgba(110,255,220,.14), rgba(110,255,220,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25)),
    linear-gradient(90deg, #0b1f33 0%, #0a2b3c 45%, #071827 100%);

  border:1px solid rgba(140, 240, 255, .22);
  box-shadow:
    0 14px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.45);

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.game-tabs.v3 .game-tab::before{
  content:"";
  position:absolute;
  inset:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
  opacity:.95;
  pointer-events:none;
}

.game-tabs.v3 .game-tab::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:9px;
  height:14px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}

.game-tabs.v3 .game-tab:not(.is-active){ opacity:.93; }
.game-tabs.v3 .game-tab:not(.is-active):hover{ opacity:1; }

.game-tabs.v3 .game-tab:hover{
  transform: translateY(-2px);
  filter: brightness(1.07) contrast(1.05);
  border-color: rgba(255, 190, 120, .45);
  box-shadow:
    0 18px 34px rgba(0,0,0,.55),
    0 0 18px rgba(255, 180, 90, .16),
    inset 0 0 0 2px rgba(255, 220, 160, .08),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.game-tabs.v3 .game-tab.is-active{
  transform: translateY(-2px);
  background:
    radial-gradient(140px 70px at 30% 20%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
    radial-gradient(160px 80px at 70% 10%, rgba(255,180,110,.18), rgba(255,180,110,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)),
    linear-gradient(90deg, #7a0b14 0%, #b31a10 40%, #ff7a18 100%);

  border-color: rgba(255, 210, 140, .62);
  box-shadow:
    0 20px 40px rgba(0,0,0,.60),
    0 0 24px rgba(255, 140, 60, .22),
    0 0 18px rgba(255, 80, 80, .16),
    inset 0 0 0 2px rgba(255, 235, 190, .10),
    inset 0 1px 0 rgba(255,255,255,.18);

  color:#ffffff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.78),
    0 0 12px rgba(0,0,0,.55),
    0 0 18px rgba(255, 210, 160, .14);
}

.game-tabs.v3 .game-tab.is-active::before{
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}

.game-tabs.v3 .game-tab:active{
  transform: translateY(0px) scale(.996);
  filter: brightness(.98);
  box-shadow:
    0 12px 22px rgba(0,0,0,.50),
    inset 0 2px 10px rgba(0,0,0,.40);
}

.game-tabs.v3 .game-tab:focus-visible{
  outline:2px solid rgba(160, 240, 255, .35);
  outline-offset:3px;
}

@media (max-width: 576px){
  .game-tabs.v3{ gap:10px; }
  .game-tabs.v3 .game-tab{ min-height:62px; font-size:18px; padding:0 14px; }
  .game-tabs.v3 .game-tab::after{ top:8px; height:12px; }
}


/* =========================================================
   v4 : Premium Card Tabs + Underline Indicator
   - 기본 : 다크 카드 + 은은한 블루 포인트
   - hover : 더 밝고 살짝 부상
   - active : 하단 그라데이션 바(인디케이터) + 카드 강조
   - 형태 : 사각 카드(라운드) + 하단 바
   ========================================================= */
.game-tabs.v4{
  gap:14px;
}

.game-tabs.v4 .game-tab{
  position:relative;
  flex:1 1 50%;
  min-height:70px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  user-select:none;

  border-radius:14px;

  color:#eaf2ff;
  font-weight:900;
  letter-spacing:.5px;
  font-size:20px;

  background:
    radial-gradient(120px 70px at 30% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35)),
    linear-gradient(90deg, #0b1220 0%, #0a1526 55%, #07101d 100%);

  border:1px solid rgba(130, 170, 255, .18);
  box-shadow:
    0 14px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);

  text-shadow:
    0 2px 0 rgba(0,0,0,.70),
    0 0 10px rgba(0,0,0,.55);

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease;
  overflow:hidden;
}

/* 카드 내부 라인 */
.game-tabs.v4 .game-tab::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  opacity:.9;
  pointer-events:none;
}

/* 하단 인디케이터 바(기본 숨김) */
.game-tabs.v4 .game-tab::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:10px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(120,200,255,0), rgba(120,200,255,.55), rgba(120,200,255,0));
  opacity:0;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, filter .14s ease;
  pointer-events:none;
}

.game-tabs.v4 .game-tab:hover{
  transform: translateY(-2px);
  filter: brightness(1.07) contrast(1.04);
  border-color: rgba(160, 200, 255, .30);
  box-shadow:
    0 18px 34px rgba(0,0,0,.55),
    0 0 16px rgba(120, 200, 255, .10),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.game-tabs.v4 .game-tab.is-active{
  transform: translateY(-2px);
  border-color: rgba(255, 210, 140, .35);
  background:
    radial-gradient(140px 80px at 30% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.32)),
    linear-gradient(90deg, #2a1a08 0%, #3a230a 40%, #0b1220 100%);
  box-shadow:
    0 20px 40px rgba(0,0,0,.60),
    0 0 22px rgba(255, 190, 60, .12),
    inset 0 0 0 2px rgba(255, 220, 160, .06),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.game-tabs.v4 .game-tab.is-active::after{
  opacity:1;
  transform: translateY(0);
  filter: brightness(1.15);
  background: linear-gradient(90deg, rgba(255,180,70,0), rgba(255,190,60,.70), rgba(255,180,70,0));
}

.game-tabs.v4 .game-tab:active{
  transform: translateY(0px) scale(.995);
  filter: brightness(.98);
}

.game-tabs.v4 .game-tab:focus-visible{
  outline:2px solid rgba(160, 220, 255, .35);
  outline-offset:3px;
}

@media (max-width: 576px){
  .game-tabs.v4{ gap:10px; }
  .game-tabs.v4 .game-tab{ min-height:62px; font-size:18px; }
}


/* =========================================================
   v5 : Ribbon / Ticket Tabs (Different shape & color)
   - 기본 : 다크 틸 + 티켓 펀칭 느낌
   - hover/active : 골드/레드 포인트 + 스윕 광
   - 형태 : 리본/티켓(우측 사선 컷) + 펀칭(원형) 장식
   ========================================================= */
.game-tabs.v5{
  gap:14px;
}

.game-tabs.v5 .game-tab{
  position:relative;
  flex:1 1 50%;
  min-height:70px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  user-select:none;

  /* ✅ 티켓/리본 모양 (우측 사선 컷) */
  border-radius:14px;
  clip-path: polygon(
    0 0, calc(100% - 18px) 0, 100% 50%,
    calc(100% - 18px) 100%, 0 100%, 0 0
  );

  color:#eaffff;
  font-weight:900;
  letter-spacing:.5px;
  font-size:20px;

  background:
    radial-gradient(140px 70px at 20% 10%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.36)),
    linear-gradient(90deg, #062126 0%, #0b2d2f 45%, #061a20 100%);

  border:1px solid rgba(110, 240, 220, .20);
  box-shadow:
    0 14px 26px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);

  text-shadow:
    0 2px 0 rgba(0,0,0,.72),
    0 0 10px rgba(0,0,0,.55);

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease;
  overflow:hidden;
}

/* 티켓 펀칭(좌측 작은 원 2개) */
.game-tabs.v5 .game-tab::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:10px;
  height:10px;
  transform: translateY(-50%);
  border-radius:50%;
  box-shadow:
    0 -16px 0 rgba(255,255,255,.12),
    0  16px 0 rgba(255,255,255,.12);
  opacity:.85;
  pointer-events:none;
}

/* 스윕 광택 */
.game-tabs.v5 .game-tab::after{
  content:"";
  position:absolute;
  left:-40%;
  top:-60%;
  width:70%;
  height:220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.10),
    rgba(255,255,255,0)
  );
  opacity:.55;
  transition: left .18s ease, opacity .18s ease;
  pointer-events:none;
}

.game-tabs.v5 .game-tab:hover{
  transform: translateY(-2px);
  filter: brightness(1.08) contrast(1.05);
  border-color: rgba(255, 200, 140, .35);
  box-shadow:
    0 18px 34px rgba(0,0,0,.55),
    0 0 18px rgba(255, 190, 60, .10),
    inset 0 0 0 2px rgba(255, 220, 160, .06),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.game-tabs.v5 .game-tab:hover::after{ left:12%; opacity:.85; }

.game-tabs.v5 .game-tab.is-active{
  transform: translateY(-2px);
  background:
    radial-gradient(160px 80px at 20% 10%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.30)),
    linear-gradient(90deg, #6b0b10 0%, #b0160e 45%, #ff8a18 100%);

  border-color: rgba(255, 210, 140, .55);
  box-shadow:
    0 20px 40px rgba(0,0,0,.60),
    0 0 22px rgba(255, 140, 60, .18),
    inset 0 0 0 2px rgba(255, 235, 190, .10),
    inset 0 1px 0 rgba(255,255,255,.14);

  color:#fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.78),
    0 0 12px rgba(0,0,0,.55),
    0 0 18px rgba(255, 210, 160, .12);
}

.game-tabs.v5 .game-tab:active{
  transform: translateY(0px) scale(.995);
  filter: brightness(.98);
  box-shadow:
    0 12px 22px rgba(0,0,0,.50),
    inset 0 2px 10px rgba(0,0,0,.40);
}

.game-tabs.v5 .game-tab:focus-visible{
  outline:2px solid rgba(180, 255, 240, .30);
  outline-offset:3px;
}

@media (max-width: 576px){
  .game-tabs.v5{ gap:10px; }
  .game-tabs.v5 .game-tab{ min-height:62px; font-size:18px; }
}