/* Shop + community screens and the lock stickers on items the player doesn't own (src/core/shop.js, ui/menus.js). */

/* ---- lock badge (loadout weapon cards, lobby weapon drawer, locker squidkids): the price lives in the shop */
.iw-lock { position: absolute; right: 6%; top: 6%; z-index: 3; display: grid; place-items: center; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1);
  border-radius: 50%; background: var(--k); color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 0 rgba(0, 0, 0, .35); pointer-events: none; }
.iw-lock svg { width: 58%; height: 58%; }
.iw-wcard.is-locked .iw-wcard__icon, .iw-ltile.is-locked .iw-ltile__art { filter: grayscale(.85) brightness(.55); }
.iw-wcard.is-locked .iw-wcard__name, .iw-ltile.is-locked .iw-ltile__name { opacity: .6; }
.iw-wcard.is-shake, .iw-ltile.is-shake, .iw-shop__card.is-shake { animation: iw-shake .4s; }

/* ---- main menu SHOP button: gold, it sells */
.iw-btn--shop { --a: #ffc02e; --a-light: #ffe28a; --a-deep: #8a5a00; }

/* ---- SHOP */
.iw-shop__wallet { position: absolute; right: calc(var(--u) * 3.4 + var(--sar, 0px)); top: calc(var(--u) * 2.6 + var(--sat, 0px)); display: flex; align-items: center; gap: calc(var(--u) * .8);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4) calc(var(--u) * .7) calc(var(--u) * .9); border: 0; border-radius: 999px; cursor: pointer;
  background: var(--k); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 calc(var(--u) * .4) 0 rgba(0, 0, 0, .35); text-align: left; transition: scale .2s var(--spring); }
.iw-shop__wallet > i { display: grid; place-items: center; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: 50%; background: #ffc02e; color: var(--k); }
.iw-shop__wallet > i svg { width: 60%; height: 60%; }
.iw-shop__wallet small { display: block; font: 800 var(--fs-xs) / 1.1 'Rubik', sans-serif; letter-spacing: .12em; opacity: .7; text-transform: uppercase; }
.iw-shop__wallet b { display: block; font: 900 var(--fs-m) / 1.15 'Rubik', sans-serif; letter-spacing: .04em; }
.iw-shop__wallet.is-on > i { background: #3ddc84; }
.iw-shop__wallet.is-wrong > i { background: #ff5d73; color: #fff; }
.iw-shop__wallet.is-focus, .iw-shop__wallet:hover { scale: 1.05; }

.iw-shop__body { position: absolute; left: calc(var(--u) * 3.6 + var(--sal, 0px)); top: calc(var(--u) * 10.4); width: min(calc(var(--u) * 60), 60vw); display: flex; flex-direction: column; gap: calc(var(--u) * .9); }
.iw-shop__panel { padding: calc(var(--u) * 1.1); }
.iw-shop__grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: calc(var(--u) * .8); }
.iw-shop__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * .6) calc(var(--u) * .4) calc(var(--u) * .7);
  border: 0; border-radius: calc(var(--u) * 1.2); cursor: pointer; background: rgba(255, 255, 255, .06); color: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); rotate: var(--tilt, 0deg); transition: scale .25s var(--spring), background .2s, box-shadow .2s; }
.iw-shop__card.is-focus, .iw-shop__card:hover { scale: 1.06; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 3px var(--a); z-index: 2; }
.iw-shop__blob { position: absolute; left: 50%; top: 38%; width: 80%; aspect-ratio: 1; translate: -50% -50%; opacity: .35; pointer-events: none; }
.iw-shop__blob svg { width: 100%; height: 100%; }
.iw-shop__pic { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.iw-shop__pic canvas { width: 100%; height: 100%; object-fit: contain; }
.iw-shop__pic > svg { width: 62%; height: 62%; color: #fff; filter: drop-shadow(0 3px 0 var(--k)); }
.iw-shop__pic .iw-ltile__squid { width: 55%; opacity: .5; }
.iw-shop__name { position: relative; font: 900 var(--fs-s) / 1.1 'Rubik', sans-serif; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.iw-shop__tag { position: relative; display: flex; align-items: center; gap: .25em; padding: .25em .55em; border-radius: 999px; background: var(--k);
  font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.iw-shop__tag i { display: block; width: 1em; height: 1em; color: #ffd23f; }
.iw-shop__tag i svg { width: 100%; height: 100%; }
.iw-shop__card.is-sale .iw-shop__tag { color: #ffd23f; }
.iw-shop__card.is-owned .iw-shop__tag, .iw-shop__card.is-free .iw-shop__tag { color: #3ddc84; }

.iw-shop__detail { position: absolute; right: calc(var(--u) * 3.4 + var(--sar, 0px)); top: calc(var(--u) * 10.4); width: min(calc(var(--u) * 30), 32vw); display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.4); }
.iw-shop__dart { display: grid; place-items: center; height: calc(var(--u) * 15); border-radius: calc(var(--u) * 1.2); background: radial-gradient(circle at 50% 60%, rgba(var(--a-rgb), .35), rgba(255, 255, 255, .04) 70%); overflow: hidden; }
.iw-shop__dart canvas { height: 100%; width: auto; }
.iw-shop__dicon { display: block; width: 48%; color: #fff; filter: drop-shadow(0 4px 0 var(--k)); }
.iw-shop__dicon svg { width: 100%; height: auto; }
.iw-shop__dhead small { display: block; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; color: var(--a-light); text-transform: uppercase; }
.iw-shop__dname { font-size: calc(var(--u) * 2.6); margin-top: .15em; }
.iw-shop__dblurb { margin: 0; font: 600 var(--fs-s) / 1.4 'Rubik', sans-serif; color: rgba(255, 255, 255, .8); min-height: 4.2em; }
.iw-shop__dprice { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.iw-shop__dprice b { font: 900 var(--fs-l) / 1 'Rubik', sans-serif; color: #ffd23f; }
.iw-shop__dprice small { font: 700 var(--fs-xs) / 1.2 'Rubik', sans-serif; opacity: .7; }
.iw-shop__buy { width: 100%; }
.iw-shop__buy.is-owned { --a: #3ddc84; --a-light: #9ff0c4; --a-deep: #127a43; }
.iw-shop__note { margin: 0; min-height: 1.3em; font: 700 var(--fs-xs) / 1.3 'Rubik', sans-serif; opacity: .7; }

/* ---- COMMUNITY */
.iw-comm__card { position: absolute; left: 50%; top: 52%; translate: -50% -50%; display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); width: min(calc(var(--u) * 74), 92vw); }
.iw-comm__qr { flex: none; width: calc(var(--u) * 24); aspect-ratio: 1; padding: calc(var(--u) * .9); border-radius: calc(var(--u) * 1.6); background: #fff;
  box-shadow: 0 0 0 4px var(--a), 0 calc(var(--u) * .5) 0 4px rgba(0, 0, 0, .35); rotate: -2deg; }
.iw-comm__qr img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.iw-comm__info { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1); min-width: 0; }
.iw-comm__info .iw-seclabel i { color: #fff; }
.iw-comm__handle { font-size: calc(var(--u) * 4); word-break: break-all; }
.iw-comm__text { margin: 0; font: 600 var(--fs-m) / 1.4 'Rubik', sans-serif; color: rgba(255, 255, 255, .82); }
.iw-comm__link { font: 800 var(--fs-m) / 1 'Rubik', sans-serif; color: var(--a-light); text-decoration: none; border-bottom: 2px solid currentColor; pointer-events: auto; }
.iw-comm__open .iw-btn__icon svg { width: 70%; height: 70%; }
.iw-comm__credits { position: absolute; left: 50%; bottom: calc(var(--u) * 6.4); translate: -50% 0; width: 90%; text-align: center; }
.iw-comm__credits p { margin: .3em 0; font: 600 var(--fs-xs) / 1.3 'Rubik', sans-serif; color: rgba(255, 255, 255, .55); }
.iw-comm__credits b { color: rgba(255, 255, 255, .8); }

/* ---- shop detail: weapon stats, kit chips, price + compact buy on one row */
.iw-shop__card.is-sel { box-shadow: inset 0 0 0 3px var(--a); background: rgba(255, 255, 255, .12); }
.iw-shop__detail { gap: calc(var(--u) * .65); padding: calc(var(--u) * 1.2); }
.iw-shop__dart { height: calc(var(--u) * 11); }
.iw-shop__dname { font-size: calc(var(--u) * 2.3); }
.iw-shop__dblurb { min-height: 0; font-size: var(--fs-xs); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.iw-shop__stats { display: flex; flex-direction: column; gap: calc(var(--u) * .3); }
.iw-shop__stats:empty, .iw-shop__kits:empty { display: none; }
.iw-shop__stat { display: grid; grid-template-columns: 42% 1fr 2.2em; align-items: center; gap: .6em; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; }
.iw-shop__statl { display: flex; align-items: center; gap: .4em; opacity: .85; white-space: nowrap; overflow: hidden; }
.iw-shop__statl i { display: block; flex: none; width: 1.1em; height: 1.1em; color: var(--a-light); }
.iw-shop__statl i svg { width: 100%; height: 100%; }
.iw-shop__statbar { position: relative; height: .6em; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.iw-shop__statbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--a), var(--a-light)); }
.iw-shop__stat b { text-align: right; }
.iw-shop__kits { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .4); }
.iw-shop__kits .iw-chip { font-size: var(--fs-xs); }
.iw-shop__dfoot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); margin-top: auto; }
.iw-shop__dprice { flex-direction: column; align-items: flex-start; gap: .2em; min-width: 0; }
.iw-shop__dprice b.is-own { color: #3ddc84; }
.iw-shop__buy.iw-btn { width: auto; flex: none; height: calc(var(--u) * 3.4); min-width: calc(var(--u) * 9); max-width: 60%; padding: 0 calc(var(--u) * 1.3); font-size: calc(var(--u) * 1.5); justify-content: center; }
.iw-shop__buy .iw-btn__label { white-space: nowrap; }
.iw-shop__buy .iw-btn__text { align-items: center; }
.iw-shop__buy.is-current { filter: saturate(.4); }

/* ---- wallet chip (main menu corner): the description moves up under the six-entry menu to make room */
.iw-main .iw-main__desc { top: calc(53.5% + var(--u) * 16.2); }
.iw-corner--bl { display: flex; align-items: center; gap: calc(var(--u) * 1); pointer-events: auto; }
.iw-main__ver { opacity: .6; }
.iw-wchip { display: flex; align-items: center; gap: .6em; padding: .45em .9em .45em .6em; border: 0; border-radius: 999px; cursor: pointer; background: rgba(21, 18, 28, .82); color: #fff; text-align: left;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); transition: scale .2s var(--spring), box-shadow .2s; }
.iw-wchip.is-focus, .iw-wchip:hover { scale: 1.05; box-shadow: 0 0 0 2px var(--a); }
.iw-wchip__dot { width: .7em; height: .7em; border-radius: 50%; background: #ff5d73; box-shadow: 0 0 0 3px rgba(255, 93, 115, .25); }
.iw-wchip.is-on .iw-wchip__dot { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25); }
.iw-wchip.is-wrong .iw-wchip__dot { background: #ffc02e; box-shadow: 0 0 0 3px rgba(255, 192, 46, .25); }
.iw-wchip b { display: block; font: 900 var(--fs-s) / 1.1 'Rubik', sans-serif; letter-spacing: .02em; }
.iw-wchip small { display: block; font: 700 var(--fs-xs) / 1.1 'Rubik', sans-serif; opacity: .65; }

/* ---- CONNECT (wallet gate) */
.iw-conn__logo { position: absolute; left: 50%; top: calc(var(--u) * 2.2); translate: -50% 0; }
.iw-conn__card { position: absolute; left: 50%; top: 55%; translate: -50% -50%; width: min(calc(var(--u) * 44), 90vw); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .9);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); text-align: center; }
.iw-conn__icon { display: grid; place-items: center; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #ffc02e; color: var(--k); box-shadow: 0 calc(var(--u) * .4) 0 var(--k); }
.iw-conn__icon svg { width: 55%; height: 55%; }
.iw-conn.is-on .iw-conn__icon { background: #3ddc84; }
.iw-conn__title { font-size: calc(var(--u) * 3.2); }
.iw-conn.is-on .iw-conn__title, .iw-conn.is-on .iw-conn__text { display: none; }
.iw-conn__text { margin: 0; font: 600 var(--fs-m) / 1.4 'Rubik', sans-serif; color: rgba(255, 255, 255, .8); }
.iw-conn__chain { display: flex; align-items: baseline; gap: .6em; padding: .45em 1em; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.iw-conn__chain b { font: 900 var(--fs-s) / 1 'Rubik', sans-serif; }
.iw-conn__chain small { font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; opacity: .6; }
.iw-conn__addr { font-size: calc(var(--u) * 3); }
.iw-conn__addr:empty, .iw-conn__net:empty { display: none; }
.iw-conn__net { font: 800 var(--fs-s) / 1.2 'Rubik', sans-serif; color: #3ddc84; }
.iw-conn__net.is-wrong { color: #ffc02e; }
.iw-conn__cta.iw-btn, .iw-conn__alt.iw-btn { width: 100%; height: calc(var(--u) * 4.8); font-size: calc(var(--u) * 2); justify-content: center; }
.iw-conn__alt.iw-btn { height: calc(var(--u) * 4); font-size: calc(var(--u) * 1.7); }
.iw-conn__status { margin: 0; min-height: 1.3em; font: 700 var(--fs-s) / 1.3 'Rubik', sans-serif; color: rgba(255, 255, 255, .7); }
.iw-conn__status.is-error { color: #ff8193; }
.iw-conn.is-busy .iw-conn__cta { opacity: .6; pointer-events: none; }

/* buttons inside panels (shop buy, wallet screen, nickname): the menu's focus nudge (translateX) would push them over
   the panel edge — they only grow a little */
.iw-shop__buy.iw-btn.is-focus, .iw-conn .iw-btn.is-focus { transform: scale(1.04); }
.iw-shop__buy.iw-btn, .iw-conn .iw-btn { transform: none; }
.iw-shop__dfoot { align-items: center; }

/* ---- wallet list on the CONNECT screen */
.iw-conn__wallets { display: flex; flex-direction: column; gap: calc(var(--u) * .7); width: 100%; }
.iw-conn__wallet.iw-btn { width: 100%; height: calc(var(--u) * 4.4); font-size: calc(var(--u) * 1.9); padding-left: calc(var(--u) * 1.4); }
.iw-conn__wallet .iw-btn__icon svg { width: 100%; height: 100%; }
.iw-conn__wallet--metamask { --a: #f6851b; --a-light: #ffb36b; }
.iw-conn__wallet--coinbase { --a: #0052ff; --a-light: #6f9bff; }
.iw-conn__wallet--trust { --a: #3375bb; --a-light: #7fb0e6; }
.iw-conn__wallet .iw-btn__icon { color: var(--a); }
.iw-conn__wallet.is-focus .iw-btn__icon { color: var(--fill-ink); }
.iw-conn__wallet.is-busy { opacity: .7; }
.iw-conn__found { margin-left: auto; padding: .35em .6em; border-radius: 999px; background: rgba(61, 220, 132, .18); color: #3ddc84; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.iw-conn.is-busy .iw-conn__wallet:not(.is-busy) { opacity: .45; pointer-events: none; }
.iw-conn__card { gap: calc(var(--u) * .75); }

/* ---- NICKNAME */
.iw-nick__wallet { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .04em; opacity: .65; }
.iw-nick__input { width: 100%; box-sizing: border-box; height: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * 1.4); border: 0; border-radius: calc(var(--u) * 1.1); outline: none;
  background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); text-align: center;
  font: 400 calc(var(--u) * 2.2) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .03em; pointer-events: auto; user-select: text; -webkit-user-select: text; }
.iw-nick__input:focus { box-shadow: inset 0 0 0 3px var(--a); background: rgba(255, 255, 255, .14); }
.iw-nick__input::placeholder { color: rgba(255, 255, 255, .35); }
.iw-nick__input.is-shake { animation: iw-shake .4s; }
.iw-nick__hint { margin: 0; font: 700 var(--fs-xs) / 1.3 'Rubik', sans-serif; opacity: .6; }
.iw-nick__hint.is-error { opacity: 1; color: #ff8193; }
.iw-nick__ok.iw-btn { width: 100%; height: calc(var(--u) * 4.6); font-size: calc(var(--u) * 2); justify-content: center; }
.iw-conn__wallet.is-focus .iw-conn__found { background: var(--k); }