.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.header-actions #connection{margin-left:0}
.wallet-chip,.shop-button{
  min-height:38px;
  box-shadow:none;
  padding:8px 12px;
  border-radius:14px;
  font-size:12px;
}
.wallet-chip{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff4cf;
  color:#745d24;
  border:1px solid #f2dda0;
}
.wallet-chip:hover:enabled{background:#ffefb5;color:#745d24}
.wallet-chip strong{font-size:13px}
.shop-button{background:#f1edff;color:#6250d0}
.shop-button:hover:enabled{background:#e7e0ff;color:#5541c7}
.economy-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:-12px 0 24px;
}
.economy-strip span{
  border:1px solid #e8e4db;
  background:#fff;
  border-radius:14px;
  padding:11px 12px;
  text-align:center;
  color:#827e94;
  font-size:11px;
}
.economy-strip b{color:#7160df;font-size:13px}

.shop-dialog{
  width:min(880px,calc(100vw - 28px));
  max-height:min(820px,calc(100vh - 28px));
  border:0;
  border-radius:24px;
  padding:0;
  color:#39354e;
  background:#faf8f1;
  box-shadow:0 25px 80px #2d29484a;
}
.shop-dialog::backdrop{background:#2d29486e;backdrop-filter:blur(3px)}
.shop-head{
  padding:24px 26px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #e8e4db;
  background:#fff;
  position:sticky;
  top:0;
  z-index:2;
}
.shop-head h2{font-size:28px;margin:8px 0 4px;letter-spacing:-1px}
.shop-head p{margin:0;color:#827e94;font-size:12px}
.icon-button{
  min-width:42px;
  min-height:42px;
  padding:0;
  font-size:24px;
  box-shadow:none;
  background:#f1edff;
  color:#6250d0;
}
.shop-wallet{
  margin:18px 24px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:#fff4cf;
  border:1px solid #f0d98c;
  color:#745d24;
  font-size:12px;
}
.shop-wallet strong{font-size:16px}
.starter-note{
  margin:0 24px 12px;
  padding:11px 14px;
  border-radius:12px;
  background:#eef8f2;
  color:#39795b;
  font-size:12px;
}
.shop-items{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:0 24px 18px;
}
.shop-item{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px 12px;
  align-items:start;
  padding:15px;
  border:1px solid #e8e4db;
  border-radius:18px;
  background:#fff;
  box-shadow:0 3px 0 #eeeae2;
}
.shop-item.rarity-rare{border-top:3px solid #edb543}
.shop-item.rarity-epic{border-top:3px solid #8b7ce2}
.shop-item-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#f1edff;
  font-size:24px;
}
.shop-item-info{min-width:0}
.shop-item-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.shop-item-title strong{font-size:14px}
.shop-item-title span{
  padding:3px 6px;
  border-radius:7px;
  background:#f5f2fb;
  color:#827e94;
  font-size:9px;
}
.shop-item-info p{margin:5px 0;color:#827e94;font-size:11px;line-height:1.5}
.shop-item-info small{color:#7160df;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.shop-item-actions{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:4px;
}
.shop-item-actions button{min-height:38px;padding:9px 12px;font-size:11px;box-shadow:none}
.shop-price{font-size:12px;font-weight:800;white-space:nowrap;color:#745d24}
.shop-empty{grid-column:1/-1;text-align:center;color:#827e94;padding:25px}
.vip-card{
  margin:0 24px 18px;
  padding:17px;
  border-radius:18px;
  background:linear-gradient(135deg,#39354e,#6250d0);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.vip-card strong{font-size:16px;margin-left:7px}
.vip-card p{margin:7px 0 0;color:#e9e4ff;font-size:11px;line-height:1.5}
.vip-card button{box-shadow:none;background:#ffffff25;white-space:nowrap}
.vip-badge{font-size:9px;font-weight:900;letter-spacing:1px;background:#edb543;color:#39354e;border-radius:7px;padding:5px 7px}
.shop-footnote{padding:0 24px 22px;margin:0;color:#827e94;font-size:10px;text-align:center}

.coin-toast{
  position:fixed;
  left:50%;
  top:74px;
  transform:translate(-50%,-18px);
  opacity:0;
  pointer-events:none;
  z-index:10000;
  padding:11px 17px;
  border-radius:999px;
  background:#39354e;
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 30px #2d294838;
  transition:opacity .18s,transform .18s;
}
.coin-toast.show{opacity:1;transform:translate(-50%,0)}
.coin-toast.reward{background:#745d24}
.coin-toast.success{background:#39795b}
.coin-toast.error{background:#a84334}

.name-gold{color:#a97b13;font-weight:900;text-shadow:0 0 9px #f0cf6b5e}
.avatar.avatar-neon{box-shadow:0 0 0 2px #fff,0 0 0 4px #816df0,0 0 13px #7160df88}
.board-wrap{position:relative}
.celebration-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:12px}
.celebration{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  z-index:4;
  animation:celebrationBox 2.1s ease both;
}
.celebration>strong{
  position:relative;
  z-index:3;
  display:block;
  min-width:210px;
  padding:12px 20px 4px;
  border-radius:18px 18px 0 0;
  background:#39354ee8;
  color:#fff;
  font-size:24px;
  letter-spacing:-.7px;
  box-shadow:0 12px 35px #39354e3d;
}
.celebration>span{
  position:relative;
  z-index:3;
  display:block;
  padding:0 20px 11px;
  border-radius:0 0 18px 18px;
  background:#39354ee8;
  color:#f6cf69;
  font-size:13px;
  font-weight:800;
}
.celebration-particle{
  --tx:0px;
  --ty:-100px;
  position:absolute;
  left:50%;
  top:50%;
  font-style:normal;
  color:#8b7ce2;
  font-size:18px;
  opacity:0;
  animation:particleBurst 1.5s ease-out .12s both;
}
.celebration.fx_firework_gold .celebration-particle{color:#edb543;text-shadow:0 0 7px #f6cf69}
.celebration.fx_rainbow .celebration-particle:nth-of-type(4n+1){color:#e26b5f}
.celebration.fx_rainbow .celebration-particle:nth-of-type(4n+2){color:#edb543}
.celebration.fx_rainbow .celebration-particle:nth-of-type(4n+3){color:#4da980}
.celebration.fx_rainbow .celebration-particle:nth-of-type(4n){color:#7160df}
.p1{--tx:-190px;--ty:-120px}.p2{--tx:-120px;--ty:-170px}.p3{--tx:-35px;--ty:-190px}.p4{--tx:65px;--ty:-180px}.p5{--tx:155px;--ty:-125px}.p6{--tx:195px;--ty:-35px}.p7{--tx:175px;--ty:80px}.p8{--tx:85px;--ty:145px}.p9{--tx:-15px;--ty:165px}.p10{--tx:-115px;--ty:140px}.p11{--tx:-185px;--ty:70px}.p12{--tx:-205px;--ty:-25px}
@keyframes celebrationBox{0%{opacity:0;transform:scale(.75)}12%{opacity:1;transform:scale(1.05)}22%{transform:scale(1)}78%{opacity:1}100%{opacity:0}}
@keyframes particleBurst{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}10%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1.15) rotate(220deg)}}

@media(max-width:760px){
  .site-header{gap:10px}
  .header-actions{gap:5px}
  .wallet-chip{padding:7px 9px;min-height:34px}
  .shop-button{padding:7px 9px;min-height:34px}
  .header-actions #connection{padding:7px 8px}
  .economy-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin:-8px 0 18px}
  .economy-strip span{padding:9px 7px;font-size:10px}
  .shop-dialog{width:calc(100vw - 14px);max-height:calc(100vh - 14px);border-radius:18px}
  .shop-head{padding:18px}
  .shop-head h2{font-size:23px}
  .shop-wallet,.starter-note,.vip-card{margin-left:14px;margin-right:14px}
  .shop-items{grid-template-columns:1fr;padding:0 14px 15px}
  .shop-footnote{padding:0 14px 18px}
  .vip-card{align-items:flex-start;flex-direction:column}
  .vip-card button{width:100%}
  .celebration>strong{font-size:19px;min-width:180px}
  .celebration-particle{font-size:15px}
  .p1{--tx:-125px;--ty:-85px}.p2{--tx:-80px;--ty:-120px}.p3{--tx:-20px;--ty:-135px}.p4{--tx:45px;--ty:-125px}.p5{--tx:105px;--ty:-90px}.p6{--tx:125px;--ty:-20px}.p7{--tx:110px;--ty:65px}.p8{--tx:55px;--ty:95px}.p9{--tx:-10px;--ty:105px}.p10{--tx:-75px;--ty:95px}.p11{--tx:-120px;--ty:50px}.p12{--tx:-135px;--ty:-20px}
}

@media(max-width:520px){
  .site-header .logo{font-size:23px}
  .site-header .logo-mark{width:31px;height:31px;font-size:23px;margin-right:7px}
  .header-actions #connection{display:none}
  .shop-button{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .coin-toast,.celebration,.celebration-particle{animation:none;transition:none}
}