* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #102437;
  color: #f4f6ee;
  font:
    15px system-ui,
    sans-serif;
}
main {
  max-width: 1120px;
  margin: auto;
  padding: 24px max(20px, env(safe-area-inset-left)) 50px;
}
a {
  color: #b8efd9;
  text-decoration: none;
}
button {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  min-height: 48px;
  padding: 12px 17px;
  background: #d5fa58;
  color: #153638;
  font: 750 14px system-ui;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
button:disabled {
  opacity: 0.48;
  cursor: default;
}
.secondary {
  background: #315569;
  color: #fff;
}
.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ffffff26;
}
.shop-header strong {
  background: #244659;
  padding: 12px 18px;
  border-radius: 30px;
}
.shop-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin: 22px 0 16px;
}
.shop-title small {
  letter-spacing: 0.13em;
  color: #bddd74;
  font-size: 11px;
  font-weight: 800;
}
h1 {
  font-size: clamp(30px, 3.5vw, 42px);
  line-height: 1.04;
  margin: 14px 0;
}
p {
  line-height: 1.6;
  color: #cad8de;
}
#shop-account {
  max-width: 330px;
}
#shop-status {
  min-height: 24px;
  color: #d5fa58;
}
.skin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 18px 0 40px;
}
.skin-card {
  min-width: 0;
  background: #1b3a4a;
  border: 1px solid #426471;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.skin-view {
  position: relative;
  border-radius: 14px;
  background: #274b59;
  overflow: hidden;
}
.skin-card:nth-child(2) .skin-view {
  background: #224e49;
}
.skin-card:nth-child(3) .skin-view {
  background: #303e65;
}
.skin-view img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.turn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #142d3dde;
  color: #fff;
  font-size: 12px;
  min-height: 44px;
}
.skin-card h2 {
  font-size: 20px;
  margin: 20px 0 6px;
}
.skin-card p {
  font-size: 14px;
  margin: 0 0 16px;
}
.skin-card .price {
  font-weight: 850;
  font-size: 22px;
  color: #efffd0;
  margin-top: auto;
  margin-bottom: 0;
}
.skin-card small {
  color: #cbdae1;
  margin: 4px 0 15px;
}
.skin-card > button {
  margin-top: 8px;
}
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pack-grid article {
  background: #1b3a4a;
  border: 1px solid #426471;
  border-radius: 16px;
  padding: 22px;
}
.pack-grid h3 {
  font-size: 26px;
  margin: 0;
}
.pack-grid p {
  color: #d5fa58;
  font-size: 20px;
}
.pack-grid button {
  width: 100%;
}
.shop-note,
footer {
  font-size: 13px;
  line-height: 1.7;
  margin-top: 30px;
  max-width: 840px;
}
footer {
  border-top: 1px solid #ffffff26;
  padding-top: 18px;
}
.account {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.account button {
  display: block;
  width: 100%;
}
.embedded .shop-header > a,
.embedded footer > a {
  display: none;
}
@media (max-width: 700px) {
  .shop-title {
    display: block;
  }
  .shop-title > #shop-account {
    margin-top: 24px;
  }
  .skin-grid {
    grid-template-columns: 1fr;
  }
  .skin-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 16px;
  }
  .skin-view {
    grid-row: 1/5;
  }
  .skin-card h2 {
    margin: 0;
    font-size: 18px;
  }
  .skin-card > p {
    margin: 0;
  }
  .skin-card > small {
    margin: 0;
  }
  .skin-card > button {
    grid-column: 1/-1;
  }
  .skin-view img {
    height: 180px;
    object-fit: contain;
  }
  .pack-grid {
    gap: 10px;
  }
  .pack-grid article {
    padding: 14px 10px;
  }
  .pack-grid h3 {
    font-size: 18px;
  }
  .pack-grid p {
    font-size: 16px;
  }
  .pack-grid button {
    font-size: 12px;
    padding: 9px;
  }
  .turn {
    bottom: 4px;
    right: 4px;
    padding: 8px;
  }
  #shop-account {
    max-width: none;
  }
}

[hidden] {
  display: none !important;
}
#shop-status:empty {
  display: none;
}
#shop-availability {
  margin: 12px 0;
}
/* The store is a destination, with the same navigation and wardrobe language as the game. */
body {
  background: #171e35;
  color: #fffaf0;
}
main {
  max-width: 1400px;
  padding-inline: 36px;
}
.shop-header {
  border-bottom: 1px solid #ffffff18;
}
.shop-header nav {
  display: flex;
  gap: 20px;
}
.shop-header nav a {
  font-size: 12px;
  color: #dce6f1;
}
.shop-header strong {
  background: #c8f46a;
  color: #263a26;
  font-size: 12px;
  border-radius: 10px;
}
.shop-title {
  margin: 32px 0 20px;
}
.shop-title h1 {
  letter-spacing: -0.05em;
  max-width: 700px;
  font-size: clamp(30px, 4vw, 48px);
}
.shop-title p {
  font-size: 13px;
  color: #b8c7dd;
}
.shop-title small {
  color: #ceeeaa;
  font-size: 9px;
}
#shop-availability {
  font-size: 11px;
  margin: 10px 0;
  padding: 9px 12px;
  background: #ffffff08;
  border-radius: 8px;
}
#shop-status {
  margin: 8px 0;
  min-height: 0;
  font-size: 12px;
}
#shop-refresh {
  font-size: 11px;
  min-height: 36px;
  padding: 7px 11px;
}
#shop-account .account button {
  font-size: 11px;
  min-height: 42px;
}
.collection-tabs {
  display: flex;
  gap: 7px;
  overflow: auto;
  margin: 24px 0 12px;
  padding-bottom: 6px;
}
.collection-tabs button {
  white-space: nowrap;
  font-size: 12px;
  min-height: 44px;
  padding: 10px 17px;
  background: #28344a;
  color: #d2deee;
  border: 1px solid #7e90a330;
  border-radius: 9px;
}
.collection-tabs button[aria-pressed='true'] {
  background: #c8f46a;
  color: #263a26;
}
.collection-summary {
  color: #b6c7db;
  font-size: 11px;
  margin: 6px 0;
}
.skin-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 17px;
}
.skin-card {
  background: #25314a;
  border: 1px solid #718ca52e;
  border-radius: 17px;
  padding: 15px;
}
.skin-view,
.skin-card:nth-child(2) .skin-view,
.skin-card:nth-child(3) .skin-view {
  background: #cabce0;
  border-radius: 12px;
}
.skin-card:nth-child(3n + 2) .skin-view {
  background: #b4cfc8;
}
.skin-card:nth-child(3n) .skin-view {
  background: #dfc29f;
}
.skin-view img {
  height: 242px;
}
.skin-category {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d0f7a5;
  font-weight: 800;
  margin-top: 18px;
}
.skin-card h2 {
  font-size: 21px;
  letter-spacing: -0.03em;
  margin: 6px 0 9px;
}
.skin-card p {
  font-size: 12px;
  line-height: 1.5;
  color: #bacadd;
}
.skin-card .price {
  font-size: 18px;
  color: #f2fad7;
}
.skin-card small {
  font-size: 10px;
}
.skin-card > button {
  font-size: 12px;
  min-height: 44px;
  border-radius: 9px;
}
.skin-card .secondary {
  background: #35465f;
  border: 1px solid #6e87a14a;
}
.skin-card.owned > button {
  background: #c8f46a;
}
.turn {
  min-height: 36px;
  font-size: 10px;
  padding: 7px 10px;
  background: #26344eea;
}
.pack-grid article {
  background: #27354c;
  border-color: #718ca52e;
}
.pack-grid button {
  font-size: 12px;
}
.shop-note,
footer {
  font-size: 11px;
  color: #bfccdf;
}
.embedded main {
  padding: 12px;
}
.embedded .shop-header nav {
  display: none;
}
.embedded .shop-title {
  margin-top: 18px;
}
.embedded h1 {
  font-size: 32px;
}
.embedded .shop-header {
  justify-content: flex-end;
}
.embedded .shop-title p {
  font-size: 12px;
}
@media (min-width: 1300px) {
  .skin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .skin-view img {
    height: 215px;
  }
}
@media (max-width: 700px) {
  main {
    padding: 18px 16px 35px;
  }
  .shop-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .shop-header nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    padding: 8px 0;
  }
  .shop-header > a {
    font-size: 12px;
  }
  .shop-title {
    margin: 24px 0 16px;
  }
  .shop-title h1 {
    font-size: 33px;
  }
  .shop-title p {
    font-size: 12px;
  }
  #shop-account {
    max-width: none;
  }
  #shop-account .account {
    display: flex;
    gap: 8px;
  }
  .skin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .skin-card {
    padding: 10px;
    border-radius: 13px;
  }
  .skin-view img {
    height: 155px;
  }
  .skin-category {
    font-size: 8px;
    margin-top: 12px;
  }
  .skin-card h2 {
    font-size: 16px;
    margin-top: 5px;
  }
  .skin-card p {
    font-size: 10px;
  }
  .skin-card .price {
    font-size: 15px;
  }
  .skin-card small {
    font-size: 9px;
  }
  .skin-card > button {
    font-size: 10px;
    padding: 9px 7px;
    min-height: 44px;
  }
  .turn {
    font-size: 9px;
    min-height: 34px;
    bottom: 4px;
    right: 4px;
  }
  .collection-tabs button {
    font-size: 11px;
    padding: 9px 12px;
  }
  .pack-grid {
    gap: 9px;
    grid-template-columns: 1fr;
  }
  .pack-grid article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }
  .pack-grid h3 {
    font-size: 18px;
  }
  .pack-grid p {
    margin: 0;
    font-size: 15px;
  }
  .pack-grid button {
    width: auto;
    margin-left: auto;
    font-size: 11px;
    min-height: 44px;
  }
  .shop-title #shop-account {
    margin-top: 18px;
  }
}
.skin-card {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}
.skin-card > * {
  min-width: 0;
}
.skin-card .skin-view {
  width: 100%;
}
.skin-card h2 {
  overflow-wrap: anywhere;
}
#shop-account .account > p {
  display: none;
}
@media (max-width: 700px) {
  .shop-title {
    margin-top: 20px;
  }
  #shop-account {
    margin-top: 12px !important;
  }
  .shop-title h1 {
    font-size: 30px;
  }
  .shop-title p {
    font-size: 11px;
  }
  .skin-card {
    display: flex;
    grid-template-columns: none;
  }
  .skin-view {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .skin-card > button,
  .skin-card > small,
  .skin-card > p {
    grid-column: auto !important;
  }
}

.purchase-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:90dvh;overflow:auto;border:1px solid #50707d;border-radius:24px;padding:24px;background:#132d3b;color:#f4fbff;text-align:center;box-shadow:0 24px 100px #0008}.purchase-dialog::backdrop{background:#071520cc}.purchase-dialog>img{width:160px;height:160px;object-fit:contain;border-radius:18px}.purchase-dialog h2{font-size:26px;margin:12px 0}.purchase-dialog p{line-height:1.6;color:#dae8ee}.purchase-dialog>button{position:relative;z-index:1;display:block;width:100%;min-height:48px;margin-top:12px;border:0;border-radius:14px;padding:12px;background:#d4fa58;color:#16312d;font:700 15px system-ui;cursor:pointer}.purchase-dialog>button.secondary{background:#284754;color:white}.purchase-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.purchase-confetti i{position:absolute;left:var(--x);top:-12px;width:8px;height:14px;border-radius:2px;animation:purchase-fall 1.6s var(--delay) ease-in forwards}@keyframes purchase-fall{to{transform:translateY(600px) rotate(400deg);opacity:0}}@media(prefers-reduced-motion:reduce){.purchase-confetti{display:none}}

/* Recovery actions fit inside the phone's usable area without losing context. */
.purchase-dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:min(440px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
@media(max-width:480px){.purchase-dialog:is([data-state=error],[data-state=pending]){padding:16px}.purchase-dialog:is([data-state=error],[data-state=pending])>img{width:88px;height:88px}.purchase-dialog:is([data-state=error],[data-state=pending]) h2{font-size:22px;margin:8px 0}.purchase-dialog:is([data-state=error],[data-state=pending]) p{margin:8px 0;line-height:1.4}}
.purchase-dialog p:focus{outline:2px solid #d4fa58;outline-offset:3px}

@media(max-height:500px){.purchase-dialog:is([data-state=error],[data-state=pending]){padding:12px 16px}.purchase-dialog:is([data-state=error],[data-state=pending])>img{display:none}.purchase-dialog:is([data-state=error],[data-state=pending]) h2{font-size:20px;margin:4px 0}.purchase-dialog:is([data-state=error],[data-state=pending]) p{font-size:14px;line-height:1.35;margin:8px 0}.purchase-dialog:is([data-state=error],[data-state=pending])>button{margin-top:8px;min-height:44px;padding:10px}}
.skin-card:focus,.pack-grid>article:focus{outline:2px solid #d4fa58;outline-offset:3px}

/* Shop v3: one primary action per card, details retain purchasing controls. */
.shop-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:0;margin:0}
.shop-header>a,.shop-navigation summary,.shop-service summary{min-height:44px;display:flex;align-items:center;font-size:13px;cursor:pointer}
.shop-header #shop-balance{background:none;color:#e3edf1;padding:0;border:0;border-radius:0;box-shadow:none;font-size:13px;margin-left:auto}
.shop-navigation{position:relative}.shop-header .shop-navigation nav{display:flex;flex-wrap:wrap;gap:12px}.shop-navigation:not([open]) nav{display:none}
.shop-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0!important}.shop-title h1{font-size:30px;margin:0}.shop-title p{font-size:12px;margin:3px 0}
.shop-title #shop-account{max-width:140px;margin:0!important}#shop-account .account{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;border:0;background:none;box-shadow:none}#shop-account .account button{background:none;color:#d9e8ee;box-shadow:none;border:0;padding:6px;min-height:44px;font-size:13px;text-decoration:underline}
#shop-status{font-size:13px;min-height:0;margin:0}#shop-status:empty{display:none}.shop-service{font-size:12px}.shop-service p{margin:0 0 8px}.shop-service summary{min-height:44px;color:#bacbd5}
.collection-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:4px 0!important;padding:0 0 4px}.collection-tabs button{flex-shrink:0;min-height:44px;font-size:13px;padding:8px 12px}.collection-summary{font-size:12px;margin:4px 0 10px;color:#bdcbd6}
.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}.skin-card{display:flex;flex-direction:column;padding:12px;gap:0;text-align:left;border-radius:16px}
.skin-card .skin-view{position:relative;grid-column:auto;grid-row:auto;background:radial-gradient(ellipse at center,#406878,#152f40);border-radius:12px}
.skin-card .try-image{width:100%;height:220px;min-height:0;padding:0;margin:0;border:0;background:transparent;box-shadow:none;cursor:pointer}.skin-card .try-image img{width:100%;height:100%;object-fit:contain}
.skin-card h2{font-size:20px;line-height:1.2;min-height:48px;margin:10px 0 4px}.skin-card .price{font-size:18px;margin:0 0 8px}.skin-card>.try-set{background:#d4fa58;color:#17372e;width:100%;font-size:15px;min-height:46px;padding:8px;margin:0}
.skin-card .set-details{margin-top:4px}.skin-card .set-details summary{display:flex;align-items:center;min-height:44px;font-size:13px;cursor:pointer;color:#d5e1e8}.skin-card .set-details p,.skin-card .set-details small{font-size:13px;line-height:1.45}.skin-card .set-details button,.skin-card .direct-payment summary{position:static;display:block;width:100%;min-height:44px;margin:6px 0;padding:8px;font-size:13px}.skin-card .skin-category{font-size:12px}.skin-card .set-slots{font-weight:700}
.skin-card :focus-visible,.shop-navigation :focus-visible,.shop-service :focus-visible{outline:3px solid #d4fa58;outline-offset:3px}
@media(max-width:700px){main{padding:8px 12px 24px}.shop-header{gap:4px 12px}.shop-header>a{font-size:12px}.shop-title h1{font-size:28px}.shop-title #shop-account{max-width:100px}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skin-card{padding:8px}.skin-card .try-image{height:154px}.skin-card h2{font-size:16px;min-height:40px;margin-top:8px}.skin-card .price{font-size:15px}.skin-card>.try-set{font-size:13px}.skin-card .set-details summary{font-size:12px}.shop-header .shop-navigation nav{width:auto;order:initial}}