.account-button{min-height:40px;padding:0 13px;border:1px solid #5b7788;border-radius:9px;background:#183a4d;color:#fff3bf;font:800 12px var(--head);letter-spacing:.7px;white-space:nowrap}
.collection-banner{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0;border:1px solid #a8883655;border-radius:11px;background:linear-gradient(110deg,#66552338,#0c283c);min-width:0}
.collection-symbol{font-size:27px;color:var(--yellow);flex-shrink:0}.collection-banner>div{min-width:0;flex:1}.collection-banner b{display:block;font:800 14px var(--head);letter-spacing:.4px;color:#fff0b8}.collection-banner small{display:block;font-size:10px;color:#b4c7d0;margin-top:3px}.collection-banner button{min-width:52px;min-height:38px;padding:8px 10px;border-radius:7px;color:#132e3d;background:var(--yellow);font:800 12px var(--head)}
.equipment-locked{position:relative;isolation:isolate}.equipment-locked>img{filter:grayscale(.8);opacity:.38}.equipment-locked>b,.equipment-locked>span:not(.equipment-lock){opacity:.55}.equipment-locked .new-skin{display:none}.equipment-lock{position:absolute;top:5px;right:5px;background:#071c2eee;border:1px solid #8ba9b170;border-radius:5px;width:21px;height:23px;display:grid;place-items:center;color:#d1dee4;z-index:2}.equipment-lock svg{width:12px;height:14px}.skin-option.equipment-locked .equipment-lock{right:2px;top:2px;width:16px;height:18px}.skin-option.equipment-locked>i{opacity:.35}.inspector-roster .equipment-locked{padding-right:26px}
.account-summary{display:grid;grid-template-columns:1fr auto;gap:10px;border-block:1px solid #3c5a6b;padding:16px 0;margin:18px 0}.account-summary span{color:#b1c7d2;font-size:12px}.account-summary b{color:var(--yellow)}.wallet-address{overflow-wrap:anywhere;font-size:12px!important;color:#96b6ca!important}
#modal:has(.welcome-drop),#modal:has(.welcome-rewards){width:min(650px,calc(100vw - 24px));background:radial-gradient(ellipse at 50% 30%,#254759,#0a2335 75%);border-color:#eec34f80;box-shadow:0 0 0 5px #ffda4a0b,0 24px 100px #0009}
.welcome-drop,.welcome-rewards{position:relative;text-align:center}.welcome-drop h2,.welcome-rewards h2{font:900 clamp(27px,5vw,36px)/1.05 var(--head);letter-spacing:-.5px;margin:14px 24px 0}.welcome-drop .loot-details{color:#9ebac9;font-size:12px;line-height:1.6;margin:13px 0 0}.loot-stage{position:relative;display:grid;place-items:center;height:190px;overflow:hidden;isolation:isolate}.loot-aura{position:absolute;inset:0;background:radial-gradient(ellipse,#ffda4a40,transparent 65%)}.loot-chest{position:relative;width:142px;height:115px;transform:rotate(-7deg);filter:drop-shadow(0 18px 12px #0006);animation:chest-hover 3s ease-in-out infinite}.chest-body{position:absolute;inset:34px 0 0;border-radius:5px 5px 19px 19px;background:linear-gradient(120deg,#ffd93f,#e78b1c);border:3px solid #ffe595;border-bottom:10px solid #bd6715;box-shadow:inset 0 -3px 0 #ffa028,inset 14px 0 0 #ffe77750}.chest-body::before,.chest-body::after{content:'';position:absolute;top:0;bottom:0;width:9px;background:#143e54;border-inline:2px solid #3c6b7c}.chest-body::before{left:19px}.chest-body::after{right:19px}.chest-body span{position:absolute;left:calc(50% - 19px);top:8px;background:#102e43;color:#72eddf;border:3px solid #699689;width:38px;height:43px;border-radius:9px;font:900 41px/.95 var(--head);z-index:2}.chest-top{position:absolute;inset:0 -7px auto;height:40px;background:linear-gradient(130deg,#fff0a0,#ffd039);border:3px solid #fff2c1;border-radius:16px 16px 5px 5px;box-shadow:0 5px 0 #b96819;z-index:2;transform-origin:bottom left;transition:transform .5s}.chest-spark{position:absolute;color:#fff2a6;font-style:normal;font-size:30px;text-shadow:0 0 20px #ffda4a}.chest-spark.s1{left:-45px;top:0}.chest-spark.s2{right:-42px;top:54px;font-size:22px}.chest-spark.s3{right:0;top:-35px;font-size:17px}.loot-contents{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:20px;color:var(--yellow);font:800 20px var(--head)}.loot-contents i{font-style:normal;color:#afc7d0}.loot-error{color:#ffc0b4!important}.loot-error:empty{display:none}.is-opening .loot-chest{animation:chest-shake .16s infinite}.is-opening .chest-top{transform:translateY(-22px) rotate(-15deg)}.is-opening .loot-aura{background:radial-gradient(ellipse,#fff9b0bb,transparent 70%)}
.reward-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:25px 0 18px}.reward-card{display:flex;flex-direction:column;align-items:center;background:linear-gradient(160deg,#345467,#0f293d);border:1px solid #60818c;border-bottom:3px solid #61d9cd;border-radius:13px;padding:12px 8px;animation:reward-reveal .55s both;animation-delay:var(--reveal)}.reward-card:first-child{background:linear-gradient(145deg,#655723,#223b43);border-color:#e8c251}.reward-card>span{font:700 11px var(--head);letter-spacing:1px;color:#acd5df}.reward-card:first-child>span{color:#ffe384}.reward-card>div{height:130px;display:grid;place-items:center;width:100%;background:radial-gradient(ellipse,#ffffff16,transparent 70%)}.reward-card img{width:100%;height:120px;object-fit:contain;filter:drop-shadow(0 12px 8px #0004)}.reward-card>b{font:800 19px/1 var(--head);min-height:38px;display:grid;place-items:center}
@keyframes chest-hover{50%{transform:translateY(-8px) rotate(-3deg)}}@keyframes chest-shake{50%{transform:translateX(3px) rotate(4deg)}}@keyframes reward-reveal{from{opacity:0;transform:translateY(25px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
#app[data-phase="playing"] .account-button,#app[data-phase="paused"] .account-button,#app[data-phase="results"] .account-button{display:none}
@media(max-width:600px){.account-button{font-size:11px;min-height:36px;padding-inline:9px}.top-actions{gap:8px}.topbar .demo-badge{display:none}.collection-banner{padding:10px}.collection-banner b{font-size:13px}.welcome-drop h2,.welcome-rewards h2{font-size:28px}.loot-stage{height:175px}.reward-cards{gap:7px}.reward-card{padding:10px 5px}.reward-card>div{height:100px}.reward-card img{height:95px}.reward-card>b{font-size:16px}.reward-card>span{font-size:9px;letter-spacing:.5px}}
@media(max-width:380px){.topbar .wallet small,.topbar .wallet i{display:none}.account-button{font-size:10px;padding-inline:7px}}
@media(prefers-reduced-motion:reduce){.loot-chest,.is-opening .loot-chest,.reward-card{animation:none}.chest-top{transition:none}}

/* A single item, with the portrait and useful equipment information in focus. */
#modal:has(.item-detail){width:min(800px,calc(100vw - 28px));padding:0;border:1px solid #8cb3c45c;border-radius:24px;background:#102b40;max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;box-shadow:0 26px 100px #0009}
#modal:has(.item-detail)::backdrop{background:#03121bd9;backdrop-filter:blur(9px)}
.item-detail{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:430px;isolation:isolate;background:radial-gradient(ellipse at 24% 48%,color-mix(in srgb,var(--item-color) 18%,transparent),transparent 62%),linear-gradient(140deg,#18374b,#0b1d30)}
#modal .item-detail .item-close{position:absolute;top:14px;right:14px;float:none;z-index:3;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid #c8deee35;border-radius:50%;background:#092131b8;color:#eaf4fa;font:400 30px/1 var(--body)}
.item-art{position:relative;display:grid;place-items:center;min-width:0;padding:28px 10px 20px;overflow:hidden;isolation:isolate}
.item-art::before{content:'';position:absolute;width:85%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--item-color) 28%,transparent);border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--item-color) 25%,transparent),transparent 67%);box-shadow:0 0 0 20px color-mix(in srgb,var(--item-color) 3%,transparent),0 0 70px color-mix(in srgb,var(--item-color) 11%,transparent);z-index:-1}
.item-art::after{content:'';position:absolute;left:18%;right:18%;bottom:30px;height:18px;border-radius:50%;background:#030e23a3;filter:blur(10px);z-index:-1}
.item-art img{display:block;max-width:100%;width:100%;height:360px;object-fit:contain;filter:drop-shadow(0 15px 18px #020d2580);animation:item-arrive .45s cubic-bezier(.18,.7,.26,1) both;user-select:none;-webkit-user-drag:none}
.item-detail--weapon .item-art img{height:300px;transform:rotate(-7deg)}
.item-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:68px 30px 30px 10px}
.item-status{display:inline-flex;align-items:center;gap:6px;min-height:25px;font-size:10px;font-weight:800;letter-spacing:1px;color:#b3c7d8}
.item-status svg{width:15px;height:16px;flex-shrink:0}.item-status.is-owned{color:#88e8c7}
#modal .item-detail h2{font:900 clamp(32px,4.3vw,48px)/.98 var(--head);letter-spacing:-.5px;text-transform:uppercase;color:#f4f6ed;margin:10px 0 16px;overflow-wrap:anywhere}
#modal .item-mechanic{font-size:13px;line-height:1.45;color:#b8cede;margin:0 0 19px}
.item-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%;margin:1px 0 24px}
.item-stats>div{min-width:0;padding:12px 5px;background:#06182969;border:1px solid #7d9daf2e;border-radius:9px;text-align:center}
.item-stats dt{font-size:10px;font-weight:600;color:#a5bed0;margin:0 0 6px}
.item-stats dd{font:800 22px/1 var(--head);color:#f0f5eb;margin:0;white-space:nowrap}
.item-style{display:flex;align-items:center;gap:10px;padding:4px 0 22px}
.item-style>i{width:36px;height:36px;border-radius:10px;background:var(--item-color);box-shadow:inset 0 0 0 2px #fff2;flex-shrink:0}
.item-style>div{display:flex;flex-direction:column;gap:4px}.item-style span{font-size:9px;letter-spacing:1px;color:#a5bdcd}.item-style b{font:700 18px/1.1 var(--head);color:#dbe7ef}
.item-actions{width:100%;margin-top:auto}
#modal .item-actions .primary-button{min-height:52px;width:100%;margin:0;justify-content:center;font-size:20px;border-radius:10px}
#modal .item-actions .primary-button:disabled{cursor:default;filter:none;opacity:1;background:#264457;color:#b6ccdc;box-shadow:none;border:1px solid #506d825c}
#modal .item-note{font-size:12px;line-height:1.4;text-align:center;color:#9cb6c8;margin:11px 0 0}
#modal .item-error{font-size:12px;line-height:1.45;color:#ffc4b9;margin:10px 0 0}
.item-error:empty{display:none}
.item-swatch{width:165px;height:190px;display:grid;place-items:center;background:linear-gradient(150deg,#ffffff3b,transparent),var(--item-color);border:3px solid #fff6;border-radius:35px;box-shadow:0 18px 35px #00122666;transform:rotate(-9deg)}
.item-swatch span{font:900 130px/1 var(--head);color:#fff9d6;filter:drop-shadow(0 5px 0 #031c3f26)}
@keyframes item-arrive{from{opacity:0;translate:0 12px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:600px){
  #modal:has(.item-detail){width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:20px}
  .item-detail{grid-template-columns:1fr;min-height:0;background:radial-gradient(ellipse at 50% 23%,color-mix(in srgb,var(--item-color) 20%,transparent),transparent 62%),linear-gradient(140deg,#18374b,#0b1d30)}
  #modal .item-detail .item-close{top:10px;right:10px}
  .item-art{height:230px;padding:22px 32px 0}.item-art::before{width:205px}.item-art::after{bottom:10px;left:25%;right:25%}
  .item-art img{height:210px;width:100%}.item-detail--weapon .item-art img{height:190px}
  .item-body{padding:8px 22px 22px}.item-status{font-size:9px}
  #modal .item-detail h2{font-size:34px;line-height:1.01;margin:7px 0 11px}
  #modal .item-mechanic{font-size:12px;margin:0 0 13px}
  .item-stats{margin:0 0 17px;gap:8px}.item-stats>div{padding:10px 5px}.item-stats dd{font-size:23px}
  .item-style{padding-bottom:17px}.item-style>i{width:30px;height:30px;border-radius:8px}
  #modal .item-actions .primary-button{min-height:48px;font-size:19px}
  #modal .item-note{font-size:11px}
}
@media(max-height:560px) and (min-width:601px){
  .item-detail{min-height:310px}.item-body{padding:50px 24px 22px 8px}.item-art img{height:280px}.item-detail--weapon .item-art img{height:230px}
  #modal .item-detail h2{font-size:34px}.item-stats{margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){.item-art img{animation:none}}