/* JLPT180 P2.5 Shop CSS owner
   Scope: #view-shop only. Do not style Dungeon/Profile/Shell here.
   Rule: no priority hacks, no dark inline fallback. */
body.jlpt180-clean-lobby #view-shop{
  width: 100%;
  min-height: 100dvh;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  box-sizing: border-box;
  color: #0f2f55;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(229,247,255,.50)),
    radial-gradient(circle at 18% 6%, rgba(34,211,238,.30), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(167,139,250,.22), transparent 34%);
}

body.jlpt180-clean-lobby #view-shop > div{
  width: 100%;
  min-height: calc(100dvh - 36px);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: visible;
}

body.jlpt180-clean-lobby #view-shop > div > div:first-child{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(218,244,255,.92));
  border: 1px solid rgba(14,116,144,.22);
  box-shadow: 0 14px 28px rgba(14,116,144,.12), inset 0 0 0 1px rgba(255,255,255,.86);
}

body.jlpt180-clean-lobby #view-shop > div > div:first-child > div:first-child{
  color: #083a89;
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 950;
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.92);
}

body.jlpt180-clean-lobby #view-shop > div > div:first-child > div:last-child{
  color: #053a84;
  background: rgba(240,253,250,.94);
  border: 1px solid rgba(20,184,166,.32);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 16px rgba(20,184,166,.10);
}

body.jlpt180-clean-lobby #view-shop .shop-box{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-radius: 28px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,249,255,.92));
  border: 1px solid rgba(14,116,144,.22);
  box-shadow: 0 16px 34px rgba(4,72,106,.12), inset 0 0 0 1px rgba(255,255,255,.86);
}

body.jlpt180-clean-lobby #view-shop .shop-tabs{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(14,116,144,.20);
  border-radius: 22px;
  
}

body.jlpt180-clean-lobby #view-shop .shop-tabs::-webkit-scrollbar{ display: none; }

body.jlpt180-clean-lobby #view-shop .st-btn{
  scroll-snap-align: start;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #eef8ff);
  border: 1px solid rgba(37,99,235,.24);
  color: #0f2f55;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 8px 16px rgba(14,116,144,.08), inset 0 1px 0 rgba(255,255,255,.94);
  white-space: nowrap;
  cursor: pointer;
}

body.jlpt180-clean-lobby #view-shop .st-btn:hover{
  color: #073763;
  border-color: rgba(14,165,233,.45);
  transform: translateY(-1px);
}

body.jlpt180-clean-lobby #view-shop .st-btn.active{
  background: linear-gradient(135deg, #f8fafc, #e0f2fe 48%, #dcfce7);
  color: #071f3f;
  border-color: rgba(14,116,144,.42);
  box-shadow: 0 12px 22px rgba(59,130,246,.14), 0 0 0 2px rgba(255,255,255,.72) inset;
}

body.jlpt180-clean-lobby #view-shop .shop-grid-responsive,
body.jlpt180-clean-lobby #view-shop .sg{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 2px 4px calc(110px + env(safe-area-inset-bottom)) 0;
  align-content: start;
}

body.jlpt180-clean-lobby #view-shop .s-item,
body.jlpt180-clean-lobby #view-shop .shop-c{
  position: relative;
  overflow: hidden;
  min-height: 268px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(236,246,255,.94));
  border: 1px solid rgba(37,99,235,.20);
  box-shadow: 0 16px 30px rgba(15,23,42,.12), 0 0 0 1px rgba(255,255,255,.86) inset;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 8px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color: #102a43;
}

body.jlpt180-clean-lobby #view-shop .s-item:hover,
body.jlpt180-clean-lobby #view-shop .shop-c:hover{
  transform: translateY(-2px);
  border-color: rgba(14,116,144,.36);
  box-shadow: 0 18px 34px rgba(15,23,42,.16), 0 0 0 1px rgba(255,255,255,.88) inset;
}

body.jlpt180-clean-lobby #view-shop .shop-item-wing{ background: linear-gradient(180deg, #effcff, #f7f1ff); border-color: rgba(34,211,238,.42); }
body.jlpt180-clean-lobby #view-shop .shop-item-outfit{ background: linear-gradient(180deg, #ecfff6, #eff8ff); border-color: rgba(34,197,94,.40); }
body.jlpt180-clean-lobby #view-shop .shop-item-weapon{ background: linear-gradient(180deg, #fff6df, #ffffff); border-color: rgba(217,119,6,.42); }
body.jlpt180-clean-lobby #view-shop .shop-item-thanthu{ background: linear-gradient(180deg, #eaffe9, #f0f8ff); border-color: rgba(16,185,129,.42); }
body.jlpt180-clean-lobby #view-shop .shop-item-phapkhi{ background: linear-gradient(180deg, #fff1f2, #fff8e8); border-color: rgba(225,29,72,.40); }
body.jlpt180-clean-lobby #view-shop .shop-item-ngotinh{ background: linear-gradient(180deg, #eafff3, #efffff); border-color: rgba(13,148,136,.38); }
body.jlpt180-clean-lobby #view-shop .shop-item-title{ background: linear-gradient(180deg, #fff5d6, #ffffff); border-color: rgba(217,119,6,.44); }
body.jlpt180-clean-lobby #view-shop .shop-item-rename{ background: linear-gradient(180deg, #eaf2ff, #ffffff); border-color: rgba(37,99,235,.42); }
body.jlpt180-clean-lobby #view-shop .shop-item-bg{ background: linear-gradient(180deg, #e8fbff, #ffffff); border-color: rgba(8,145,178,.40); }

body.jlpt180-clean-lobby #view-shop .s-item::before,
body.jlpt180-clean-lobby #view-shop .shop-c::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100px;
  background: linear-gradient(180deg, rgba(56,189,248,.18), rgba(255,255,255,0));
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-shop .shop-item-media,
body.jlpt180-clean-lobby #view-shop .s-item > div:first-child,
body.jlpt180-clean-lobby #view-shop .shop-c > img:first-child{
  width: 100%;
  min-height: 156px;
  height: 156px;
  margin-bottom: 4px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.98), rgba(191,219,254,.50), rgba(167,243,208,.22));
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.12), 0 10px 20px rgba(15,23,42,.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}

body.jlpt180-clean-lobby #view-shop .shop-item-media img,
body.jlpt180-clean-lobby #view-shop .s-item > div:first-child img,
body.jlpt180-clean-lobby #view-shop .shop-c > img:first-child{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: none;
}

body.jlpt180-clean-lobby #view-shop .shop-virtual-icon{
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #073763;
  text-shadow: 0 0 16px rgba(14,165,233,.22);
}

body.jlpt180-clean-lobby #view-shop .shop-item-ngotinh .shop-virtual-icon{ text-shadow: 0 0 16px rgba(13,148,136,.24); }
body.jlpt180-clean-lobby #view-shop .shop-item-title .shop-virtual-icon{ text-shadow: 0 0 16px rgba(217,119,6,.24); }
body.jlpt180-clean-lobby #view-shop .shop-item-rename .shop-virtual-icon{ text-shadow: 0 0 16px rgba(37,99,235,.24); }

body.jlpt180-clean-lobby #view-shop .s-item .sn,
body.jlpt180-clean-lobby #view-shop .shop-c .sn{
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #102a43;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

body.jlpt180-clean-lobby #view-shop .sp,
body.jlpt180-clean-lobby #view-shop .s-item > div:nth-child(3),
body.jlpt180-clean-lobby #view-shop .shop-c > div:nth-child(3){
  color: #083a89;
  font-size: 16px;
  font-weight: 950;
  margin-bottom: 2px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

body.jlpt180-clean-lobby #view-shop .shop-owned-note{
  color: #047857;
  font-size: 11px;
  font-weight: 900;
  margin-top: -4px;
}

body.jlpt180-clean-lobby #view-shop .shop-action-row{
  display: flex;
  gap: 6px;
  margin-top: auto;
  width: 100%;
}

body.jlpt180-clean-lobby #view-shop .s-item button,
body.jlpt180-clean-lobby #view-shop .btn-try,
body.jlpt180-clean-lobby #view-shop .shop-buy-btn,
body.jlpt180-clean-lobby #view-shop .shop-vip-btn,
body.jlpt180-clean-lobby #view-shop .shop-equip-btn,
body.jlpt180-clean-lobby #view-shop .shop-equipped-btn,
body.jlpt180-clean-lobby #view-shop .shop-owned-btn,
body.jlpt180-clean-lobby #view-shop .shop-preview-btn{
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  cursor: pointer;
  color: #071f3f;
  background: #e5f3ff;
  box-shadow: 0 10px 16px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.55);
}

body.jlpt180-clean-lobby #view-shop .shop-preview-btn{
  background: linear-gradient(135deg, #dbeafe, #60a5fa);
  color: #082f49;
}

body.jlpt180-clean-lobby #view-shop button.shop-buy-btn,
body.jlpt180-clean-lobby #view-shop button[data-shop-state="buy"],
body.jlpt180-clean-lobby #view-shop button.jlpt180-shop-buy-manifest{
  background: linear-gradient(135deg, #fff3bf 0%, #f59e0b 100%);
  color: #3b2300;
  border-color: rgba(180,83,9,.30);
}

body.jlpt180-clean-lobby #view-shop button.shop-vip-btn,
body.jlpt180-clean-lobby #view-shop button[data-shop-state="vip"]{
  background: linear-gradient(135deg, #f3e8ff 0%, #7c3aed 100%);
  color: #ffffff;
  border-color: rgba(109,40,217,.34);
}

body.jlpt180-clean-lobby #view-shop button.shop-equip-btn,
body.jlpt180-clean-lobby #view-shop button[data-shop-state="equip"]{
  background: linear-gradient(135deg, #e0f2fe 0%, #0284c7 100%);
  color: #ffffff;
  border-color: rgba(2,132,199,.38);
}

body.jlpt180-clean-lobby #view-shop button.shop-equipped-btn,
body.jlpt180-clean-lobby #view-shop button[data-shop-state="equipped"]{
  background: linear-gradient(135deg, #bbf7d0 0%, #16a34a 100%);
  color: #052e16;
  border-color: rgba(22,163,74,.42);
  cursor: default;
}

body.jlpt180-clean-lobby #view-shop button.shop-owned-btn,
body.jlpt180-clean-lobby #view-shop button[data-shop-state="owned"]{
  background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
  color: #0f172a;
  border-color: rgba(100,116,139,.36);
  cursor: default;
}

body.jlpt180-clean-lobby #view-shop .s-item.owned,
body.jlpt180-clean-lobby #view-shop .shop-c.owned{
  border-color: rgba(34,197,94,.58);
  box-shadow: 0 14px 26px rgba(34,197,94,.12), inset 0 0 0 1px rgba(255,255,255,.84);
}

body.jlpt180-clean-lobby #view-shop .shop-loading{
  grid-column: 1/-1;
  color: #0b3f93;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(125,211,252,.6);
  border-radius: 18px;
  padding: 24px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 12px 22px rgba(59,130,246,.08);
}

@media (min-width: 900px){
  body.jlpt180-clean-lobby #view-shop .shop-grid-responsive,
  body.jlpt180-clean-lobby #view-shop .sg{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  body.jlpt180-clean-lobby #view-shop .s-item,
  body.jlpt180-clean-lobby #view-shop .shop-c{
    min-height: 308px;
    padding: 10px;
    border-radius: 20px;
  }

  body.jlpt180-clean-lobby #view-shop .shop-item-media,
  body.jlpt180-clean-lobby #view-shop .s-item > div:first-child,
  body.jlpt180-clean-lobby #view-shop .shop-c > img:first-child{
    min-height: 154px;
    height: 154px;
    border-radius: 16px;
  }

  body.jlpt180-clean-lobby #view-shop .s-item .sn,
  body.jlpt180-clean-lobby #view-shop .shop-c .sn{
    min-height: 34px;
    font-size: 13px;
  }

  body.jlpt180-clean-lobby #view-shop .sp,
  body.jlpt180-clean-lobby #view-shop .s-item > div:nth-child(3),
  body.jlpt180-clean-lobby #view-shop .shop-c > div:nth-child(3){
    font-size: 15px;
  }

  body.jlpt180-clean-lobby #view-shop .s-item button,
  body.jlpt180-clean-lobby #view-shop .btn-try,
  body.jlpt180-clean-lobby #view-shop .shop-buy-btn,
  body.jlpt180-clean-lobby #view-shop .shop-vip-btn,
  body.jlpt180-clean-lobby #view-shop .shop-equip-btn,
  body.jlpt180-clean-lobby #view-shop .shop-equipped-btn,
  body.jlpt180-clean-lobby #view-shop .shop-owned-btn,
  body.jlpt180-clean-lobby #view-shop .shop-preview-btn{
    min-height: 36px;
    font-size: 12px;
    border-radius: 12px;
  }
}

@media (max-width: 520px){
  body.jlpt180-clean-lobby #view-shop{
    padding: 10px 10px calc(88px + env(safe-area-inset-bottom));
  }

  body.jlpt180-clean-lobby #view-shop > div > div:first-child{
    padding: 12px;
    border-radius: 20px;
  }

  body.jlpt180-clean-lobby #view-shop .shop-box{
    padding: 10px;
    border-radius: 22px;
  }

  body.jlpt180-clean-lobby #view-shop .shop-tabs{
    justify-content: flex-start;
    padding: 8px;
    gap: 8px;
  }

  body.jlpt180-clean-lobby #view-shop .st-btn{
    min-height: 38px;
    padding: 0 13px;
    font-size: 13px;
  }

  body.jlpt180-clean-lobby #view-shop .s-item,
  body.jlpt180-clean-lobby #view-shop .shop-c{
    min-height: 286px;
    border-radius: 18px;
    padding: 8px;
  }

  body.jlpt180-clean-lobby #view-shop .shop-item-media,
  body.jlpt180-clean-lobby #view-shop .s-item > div:first-child,
  body.jlpt180-clean-lobby #view-shop .shop-c > img:first-child{
    min-height: 130px;
    height: 130px;
    border-radius: 14px;
  }
}