:root{
  --bgk-navy:#061a38;
  --bgk-navy-2:#09275a;
  --bgk-panel:#082452;
  --bgk-panel-2:#0b316b;
  --bgk-card:#0a2a5d;
  --bgk-gold:#f4c84d;
  --bgk-gold-light:#ffe680;
  --bgk-gold-dark:#9d6414;
  --bgk-border:#9b7732;
  --bgk-text:#fff0b8;
  --bgk-white:#fff7de;
  --bgk-muted:#bac5d8;
  --bgk-green:#62c960;
  --bgk-blue:#4aa4ff;
  --bgk-purple:#b05cff;
  --bgk-red:#d9665c;
  --bgk-shadow:0 12px 30px rgba(0,0,0,.42);
  --bgk-font:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --nav-height:76px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  font-family:var(--bgk-font);
  color:var(--bgk-text);
  background:#041226;
  overflow-x:hidden;
  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
.bgk-page{
  min-height:100dvh;
  background:
    linear-gradient(180deg,rgba(5,18,42,.05),rgba(4,13,29,.82) 52%,rgba(4,13,29,.96)),
    url('../assets/sliced/hero/hero-bg-top.png') center top/cover no-repeat,
    #041226;
  position:relative;
  overflow-x:hidden;
}
.bgk-page::after{
  content:"";
  position:fixed;
  left:0;right:0;bottom:0;
  height:240px;
  background:url('../assets/sliced/hero/palace-bottom.png') center bottom/cover no-repeat;
  opacity:.52;
  pointer-events:none;
  z-index:0;
}
.bgk-shell{
  position:relative;
  z-index:2;
  width:100%;
  max-width:430px;
  min-height:100dvh;
  margin:0 auto;
  padding:16px 18px 28px;
}
.bgk-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.bgk-player{
  display:flex;
  align-items:center;
  gap:10px;
}
.bgk-avatar{
  width:52px;height:52px;
  border-radius:50%;
  border:2px solid var(--bgk-gold);
  background:
    url('../assets/characters/main/char-pink-girl.png') center/cover no-repeat,
    radial-gradient(circle,#173a7a,#071b3a);
  box-shadow:0 0 0 3px rgba(0,0,0,.2);
}
.bgk-player-name{font-size:15px;font-weight:800;letter-spacing:.04em}
.bgk-level{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  padding:3px 10px;
  border:1px solid rgba(244,200,77,.65);
  border-radius:999px;
  color:var(--bgk-gold-light);
  background:rgba(2,12,28,.65);
  font-size:11px;
  font-weight:800;
}
.bgk-icon-actions{display:flex;gap:8px}
.bgk-circle-btn{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid rgba(244,200,77,.75);
  background:rgba(3,16,36,.72);
  color:var(--bgk-gold-light);
  font-size:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.bgk-page-title{
  text-align:center;
  font-size:24px;
  font-weight:900;
  color:var(--bgk-gold-light);
  letter-spacing:.1em;
  margin:4px 0 16px;
  text-shadow:0 2px 0 #4a2d09,0 0 14px rgba(244,200,77,.22);
}
.bgk-logo-small{
  width:230px;height:118px;
  margin:0 auto 8px;
  background:url('../assets/sliced/hero/logo-full.png') center/contain no-repeat;
}
.bgk-balance{
  position:relative;
  min-height:150px;
  padding:20px 18px;
  border:2px solid rgba(244,200,77,.7);
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(9,35,78,.92),rgba(9,35,78,.72)),
    url('../assets/sliced/hero/coin-scatter.png') right 18px bottom 10px/130px auto no-repeat;
  box-shadow:var(--bgk-shadow), inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
  margin-bottom:12px;
}
.bgk-balance::after{
  content:"";
  position:absolute;right:12px;top:18px;width:96px;height:84px;
  background:linear-gradient(180deg,#ffe377,#c48720);
  opacity:.95;
}
.bgk-label{font-size:14px;color:var(--bgk-text);font-weight:800}
.bgk-amount{
  font-size:43px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--bgk-gold-light);
  text-shadow:0 3px 0 rgba(0,0,0,.28);
  margin:10px 0 8px;
}
.bgk-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;color:#d7e0f1;font-size:13px}
.bgk-subgrid strong{color:var(--bgk-white)}
.bgk-panel{
  border:2px solid rgba(244,200,77,.58);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(8,38,84,.86),rgba(5,25,56,.92));
  box-shadow:var(--bgk-shadow), inset 0 0 0 1px rgba(255,255,255,.06);
  margin-bottom:12px;
  overflow:hidden;
}
.bgk-panel-inner{padding:16px}
.bgk-section-ribbon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:8px 18px;
  margin:0 0 10px;
  color:#fff6bb;
  background:linear-gradient(180deg,#1d7a4d,#0a4a30);
  border:1px solid rgba(244,200,77,.75);
  border-radius:4px 4px 10px 10px;
  font-size:16px;
  font-weight:900;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.bgk-section-ribbon.purple{background:linear-gradient(180deg,#8d2bb5,#4b1a71)}
.bgk-section-ribbon.blue{background:linear-gradient(180deg,#1e72a8,#0c3a68)}
.bgk-task{
  min-height:138px;
  background:
    linear-gradient(90deg,rgba(8,38,84,.92),rgba(8,38,84,.65)),
    url('../assets/ui/props/prop-chest-open.png') right 16px center/112px auto no-repeat;
}
.bgk-task h2{font-size:22px;margin:4px 0 4px}
.bgk-task p{font-size:14px;color:#dce5f5;line-height:1.6;margin-bottom:10px}
.bgk-btn{
  min-height:48px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#ffe377,#e3b234 58%,#9f6415 100%);
  color:#3b2708;
  font-size:18px;
  font-weight:900;
  box-shadow:0 5px 0 #71450c,0 8px 14px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.45);
}
.bgk-btn.full{width:100%}
.bgk-btn.small{min-height:36px;font-size:14px;border-radius:10px;padding:0 16px}
.bgk-progress-line{
  height:8px;border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.bgk-progress-line span{
  display:block;height:100%;
  width:0;
  background:linear-gradient(90deg,#65c85f,#f4c84d);
}
.bgk-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.bgk-quick{
  min-height:76px;
  border:1px solid rgba(244,200,77,.46);
  border-radius:14px;
  background:rgba(6,31,70,.78);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--bgk-text);
  font-size:12px;font-weight:800;
}
.bgk-quick .ico{font-size:28px;margin-bottom:5px}
.bgk-holding{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
}
.bgk-char-img{
  width:82px;height:82px;
  background:url('../assets/characters/main/char-pink-girl.png') center/cover no-repeat;
  border-radius:16px;
}
.bgk-char-img.male{background-image:url('../assets/sliced/hero/logo-full.png');background-size:170%;background-position:center top}
.bgk-holding h3{font-size:20px;margin-bottom:6px}
.bgk-holding p{font-size:13px;color:#d9e4f4;line-height:1.6}
.bgk-tag{
  display:inline-flex;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(244,200,77,.58);
  background:rgba(4,16,35,.75);
  color:var(--bgk-gold-light);
  font-size:12px;font-weight:900;
}
.bgk-bottom-nav{
  position:fixed;
  left:50%;bottom:0;
  transform:translateX(-50%);
  z-index:20;
  width:100%;max-width:430px;
  height:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  border:2px solid rgba(244,200,77,.34);
  border-bottom:0;
  border-radius:24px 24px 0 0;
  background:rgba(5,24,54,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 -10px 24px rgba(0,0,0,.35);
}
.bgk-nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  color:#c4b994;
  font-size:12px;
  font-weight:800;
}
.bgk-nav-item .ico{font-size:25px;line-height:1}
.bgk-nav-item.active{
  color:var(--bgk-gold-light);
  text-shadow:0 0 10px rgba(244,200,77,.5);
}
.bgk-nav-item.active .ico{
  width:48px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(244,200,77,.12);
  border:1px solid rgba(244,200,77,.5);
}
.bgk-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}
.bgk-tab{
  height:44px;border-radius:13px;border:1px solid rgba(244,200,77,.55);
  background:rgba(5,24,54,.78);
  color:#dfd7bd;font-weight:900;font-size:15px;
}
.bgk-tab.active{
  background:linear-gradient(180deg,#ffe377,#d89e23);
  color:#2b1d08;
}
.bgk-talent-card{
  position:relative;
  display:grid;
  grid-template-columns:112px 1fr;
  gap:14px;
  min-height:146px;
  padding:16px 14px;
  margin-bottom:12px;
  border:2px solid #b78932;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,246,207,.98),rgba(236,210,145,.98));
  color:#32220b;
  box-shadow:0 8px 0 rgba(80,48,12,.55),0 12px 22px rgba(0,0,0,.28);
  overflow:hidden;
}
.bgk-talent-card::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 18%,rgba(255,255,255,.35),transparent 14%),
    linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  opacity:.45;
  pointer-events:none;
}
.bgk-talent-ribbon{
  position:absolute;left:18px;top:8px;
  padding:5px 18px;
  background:linear-gradient(180deg,#267542,#0d4527);
  color:#fff6b5;
  border:1px solid rgba(103,75,18,.7);
  font-weight:900;
  border-radius:4px;
  z-index:2;
}
.bgk-talent-ribbon.blue{background:linear-gradient(180deg,#266fa5,#0d3d68)}
.bgk-talent-ribbon.purple{background:linear-gradient(180deg,#8850a8,#4f2673)}
.bgk-talent-art{
  position:relative;
  z-index:1;
  width:110px;height:112px;
  margin-top:16px;
  background:url('../assets/sliced/hero/logo-full.png') center/190% no-repeat;
}
.bgk-talent-art.t1{background-image:url('../assets/sliced/hero/logo-full.png');}
.bgk-talent-art.t2{background-image:url('../assets/characters/main/char-pink-girl.png');background-size:150%}
.bgk-talent-body{position:relative;z-index:1}
.bgk-talent-body h2{font-size:24px;line-height:1.1;margin:10px 0 10px;color:#24451e}
.bgk-talent-body h2.blue{color:#113d68}
.bgk-talent-body h2.purple{color:#5a2973}
.bgk-talent-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(88,58,12,.18);padding:5px 0;font-weight:800}
.bgk-talent-row span:first-child{font-size:13px}
.bgk-talent-row span:last-child{font-size:15px}
.bgk-talent-card .bgk-btn{margin-top:8px;min-height:36px;font-size:14px;width:100%}
.bgk-rank-card{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  align-items:center;
  padding:14px;
  min-height:128px;
  background:
    linear-gradient(90deg,rgba(13,58,67,.9),rgba(9,36,80,.9)),
    url('../assets/sliced/forms/moon-lantern-icons.png') right center/120px auto no-repeat;
}
.bgk-pool{
  background:
    linear-gradient(90deg,rgba(77,29,103,.86),rgba(9,36,80,.84)),
    url('../assets/ui/props/prop-chest-open.png') right 16px center/112px auto no-repeat;
  padding:18px;
}
.bgk-pool .amount{font-size:38px;color:var(--bgk-gold-light);font-weight:900}
.bgk-stat-row{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.16);padding:10px 0;font-size:15px}
.bgk-stat-row strong{color:var(--bgk-green)}
.bgk-match{
  text-align:center;
  padding:22px 18px;
  background:
    linear-gradient(180deg,rgba(8,38,84,.9),rgba(6,25,55,.96)),
    url('../assets/sliced/pre-reg/loading-indicators.png') center 14px/220px auto no-repeat;
}
.bgk-spinner{
  width:64px;height:64px;border-radius:50%;
  border:5px solid rgba(244,200,77,.15);
  border-top-color:var(--bgk-gold);
  margin:10px auto 14px;
  animation:bgkSpin 1s linear infinite;
}
@keyframes bgkSpin{to{transform:rotate(360deg)}}
@media(max-width:360px){
  .bgk-shell{padding-left:14px;padding-right:14px}
  .bgk-amount{font-size:36px}
  .bgk-talent-card{grid-template-columns:94px 1fr}
  .bgk-talent-art{width:94px}
}



/* v3.4 clickability + clean reward chest asset */
.bgk-topbar, .bgk-profile-strip, .bgk-icon-actions{position:relative; z-index:30;}
.bgk-circle, .bgk-circle-btn{position:relative; z-index:35; pointer-events:auto;}
.bgk-icon-actions a{pointer-events:auto; touch-action:manipulation;}
.bgk-filter{position:relative; z-index:20; display:flex; flex-wrap:wrap; gap:8px;}
.bgk-filter .bgk-chip{position:relative; z-index:21; pointer-events:auto; touch-action:manipulation;}
.bgk-history-item[hidden], .history-group[hidden]{display:none !important;}
.bgk-hero-card{
  background:linear-gradient(90deg,rgba(9,35,78,.95),rgba(9,35,78,.72)),
             url('../assets/ui/props/prop-chest-open.png') right 18px center/130px auto no-repeat !important;
}
.bgk-task{
  background:linear-gradient(90deg,rgba(8,38,84,.94),rgba(8,38,84,.70)),
             url('../assets/ui/props/prop-chest-open.png') right 16px center/108px auto no-repeat !important;
}