/* The animated username field and visible controls lead into the rank offers. */
.storefront{--measure:1120px; padding-top:46px; padding-bottom:20px}
.storeintro{margin-bottom:26px; max-width:850px}
.storeeyebrow{font-size:var(--fs-note); font-weight:600; color:#dfaec9; margin:0 0 14px}
.storeintro h1{font-size:clamp(23px,3vw,34px); line-height:1.7; margin:0 0 14px; color:#f4f2ee}
.storeintro h1 span{color:#f49dc6}
.storeintro > p:not(.storeeyebrow){color:#d4c9d0; font-size:var(--fs-lede); margin:0 0 14px; max-width:62ch}
.billinglink{color:#e2c1d3; font-size:var(--fs-note); text-underline-offset:5px}
.tiergrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch}
.storefront > .tiergrid{margin-top:0}
.chest.tier{margin:0; padding:28px; min-width:0; display:flex; flex-direction:column; align-items:stretch;
  border-top:4px solid #74a98b; background:#d0d2cd}
.chest.tier.donator_plus{border-top-color:#cf69a1; background:#d6d0d5}
.tierhead{display:flex; align-items:center; gap:20px}
.tierhead > .slot{flex-shrink:0}
.tierhead h2{font-family:var(--pixel); font-size:var(--fs-md); line-height:1.6; margin:0 0 8px; color:#232824}
.tierhead p{font-size:var(--fs-note); color:#4b514d; margin:0; line-height:1.5}
.buyprice{font-family:var(--sans); font-size:36px; font-weight:800; color:#503809; margin:20px 0}
.buyprice span{font-size:var(--fs-note); font-weight:400; color:#4b514d}
.rankperks{display:flex; flex-direction:column; gap:12px; list-style:none; padding:0; margin:0 0 26px}
.rankperks li{display:flex; align-items:center; gap:14px; color:#252c27; font-size:var(--fs-body); line-height:1.5}
.bigbuyrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.tier .bigbuyrow{margin-top:auto}
.buybtn{display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  font-family:var(--pixel); font-size:var(--fs-2xs); text-align:center; line-height:1.7;
  color:#092713; background:#6bdf83; padding:16px 20px; text-decoration:none;
  box-shadow:inset 3px 3px 0 #b0f9bf, inset -3px -3px 0 #2b9148}
.buybtn:hover{background:#8eed9f}
.buybtn:active{box-shadow:inset 3px 3px 0 #2b9148, inset -3px -3px 0 #b0f9bf}
.tier .buybtn{width:100%}
.buybtn.disabled{color:#474e48; background:#b4b9b2; cursor:pointer;
  box-shadow:inset 2px 2px 0 #edf0e9, inset -2px -2px 0 #81887e}
.buybtn.disabled:hover{background:#c0c6be}
.store-setup{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin:0 0 30px; align-items:start}
.store-setup > .chesttitle{grid-column:1/-1; margin:0; line-height:1.8}
.rankheading{font-size:var(--fs-sm); line-height:1.8; margin:0 0 20px; color:#f1e9ef}
.accountsetup,.namecustom{min-width:0}
.store-setup .chesttitle{font-size:var(--fs-sm)}
.store-setup .chesttitle::after{display:none}
.setupnote,.customnote{font-size:var(--fs-note); color:#434c46; margin:0 0 18px; line-height:1.6}
.ignlabel{display:block; font-size:var(--fs-note); font-weight:600; color:#28372d; margin:0 0 8px}
.ignbox{position:relative; background:#101b15; border:1px solid #607f68}
.igninput,.namepreview{font-family:var(--pixel); font-size:clamp(12px,2.4vw,24px);
  letter-spacing:0; line-height:1.5; text-align:center; padding:24px 16px; height:96px}
.igninput{position:relative; z-index:1; display:block; width:100%; min-width:0;
  background:transparent; color:#f1f5ec; border:0; border-radius:0; caret-color:#fff}
.has-preview .igninput{color:transparent; -webkit-text-fill-color:transparent}
.igninput::selection{background:#85c79755}
.igninput::placeholder{color:#aab8ad}
.igninput:focus-visible{outline:3px solid #237949; outline-offset:2px}
.igninput[aria-invalid="true"]{box-shadow:inset 0 -3px #9a281e}
.ignstatus{font-size:var(--fs-note); color:#434c46; margin:12px 0 0; line-height:1.6}
.ignstatus.good{color:#0b5825}.ignstatus.bad{color:#84291e}
.store-setup .chestnote{font-size:14px; margin-top:12px; color:#434c46}
.namepreview{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  color:#b9eccc; overflow:hidden; margin:0; white-space:nowrap; pointer-events:none}
.has-preview .namepreview{display:flex}
.namepreview .nch{display:inline-block; white-space:pre}
.customnote[hidden]{display:none}
.customnote{margin:12px 0 0}
.nameoptions{min-width:0; border-top:1px solid #a0a69f; padding-top:20px}
.customheading{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-bottom:20px}
.customheading h3{margin:0; font-size:18px; color:#283d31}
.customheading p{margin:0; font-size:14px; color:#434c46}
.customgrid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 32px; align-items:center}
.namepresets{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px}
.namepreset{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px;
  font:600 14px var(--sans); color:#283d31; background:#dce3d8; border:1px solid #8b9d89; cursor:pointer}
.namepreset:hover{background:#edf2e9}
.namepreset[aria-pressed="true"]{background:#263f30; border-color:#263f30; color:#f1faef; box-shadow:inset 0 -2px #85c79a}
.preset-swatch{display:block; width:28px; height:14px; border:1px solid #ffffff66}
.customgrid .namectl{margin:0}
.customgrid .fxseg{justify-content:flex-end}
.namectl{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:16px}
.fld{display:flex; flex-direction:column; gap:6px}
.fldlab{font-family:var(--sans); font-size:14px; font-weight:600; color:#374239}
.fld input[type="color"]{width:56px; height:40px; padding:2px; background:#adb7ad; border:1px solid #687a6a; cursor:pointer}
.mcrange{width:140px; height:40px; accent-color:#286e46; cursor:pointer}
.fxseg,.namefoot{display:flex; flex-wrap:wrap; gap:8px}
.mcbtn,.fxseg button{font-family:var(--sans); font-size:14px; font-weight:600; line-height:1.5; min-height:44px;
  border:0; border-radius:0; cursor:pointer; padding:10px 14px; color:#27352b; background:#b7bfb6;
  box-shadow:inset 2px 2px 0 #edf1e9, inset -2px -2px 0 #788474}
.mcbtn:hover,.fxseg button:hover{background:#ccd5c9}
.fxseg button{text-transform:capitalize}
.mcbtn[aria-pressed="true"],.fxseg button[aria-pressed="true"]{color:#f1f6ee; background:#34533c;
  box-shadow:inset 2px 2px 0 #213625, inset -2px -2px 0 #6e8d71}
.fxdesc,.namenote{display:block; color:#434c46; font-size:14px; line-height:1.6; margin:12px 0}
.namefoot{margin-top:16px}
.codebar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px}
.codebar .fldlab{width:100%}
.mcinput.code{flex:1 1 180px; width:0; min-width:0; padding:12px 8px; border:1px solid #7e8a7b;
  font-family:ui-monospace,monospace; font-size:16px; color:#202820; background:#e3e9df}
.billingpanel{margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px}
.billingpanel .chesttitle{font-size:var(--fs-sm); width:100%; margin:0}
.billingpanel .chesttitle::after{display:none}
.billingpanel .chestnote{margin:0; flex:1 1 260px; max-width:none}
.billingpanel .lnkbtn{font-family:var(--sans); font-size:var(--fs-note); font-weight:600}
.tip .planerows{display:flex; flex-direction:column; gap:5px; margin:8px 0 6px}
.tip .prow{display:flex; justify-content:space-between; gap:18px; font-size:var(--fs-2xs)}
.tip .prow b{color:#9fd1ff; font-weight:400}
.tip .prow span{color:#fff}
.tip .planenote{display:block; color:#b9aebe; font-size:var(--fs-2xs); max-width:28ch; white-space:normal; line-height:1.6}
#orbshop[hidden]{display:none}
.orbshop{text-align:center}
.orbshop .chesttitle{font-size:var(--fs-md); line-height:1.8}
.orbshop .chesttitle::after{margin-left:auto; margin-right:auto}
.orbshop .chestnote{margin:12px auto; max-width:68ch}
.orbexpiry{font-size:15px; color:#513913; margin:16px 0 24px}
.orbgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:820px; margin:0 auto 20px}
.orbcard{display:flex; flex-direction:column; align-items:center; padding:26px 20px;
  border:1px solid #9da99d; background:#d9ded5; border-top:3px solid #70a487}
.orbcard.donator_plus{background:#ddd5dc; border-top-color:#cf69a1}
.orbcard h3{font-family:var(--pixel); font-size:14px; color:#29362e; line-height:1.8; margin:18px 0 8px}
.orbprice{font-size:28px; font-weight:800; color:#513913; margin:0 0 22px}
.orbprice span{display:block; font-size:14px; font-weight:400; color:#4b514d}
.orbcard .buybtn{width:100%; max-width:280px; margin-top:auto; font-family:var(--sans); font-size:16px; font-weight:600}
.orbshop .moreinfo{max-width:68ch; margin:0 auto}
.orbshop .moreinfo > summary{color:#34483a}
@media(max-width:900px){
  .storefront{padding-top:30px}
  .storeintro h1{font-size:clamp(22px,5.8vw,30px)}
  .storeintro > p:not(.storeeyebrow){font-size:18px}
  .tiergrid{grid-template-columns:1fr; gap:20px}
  .chest.tier{padding:24px}
  .tierhead{gap:16px}
  .tierhead h2{font-size:16px}
  .store-setup{grid-template-columns:1fr; gap:20px}
  .customgrid{grid-template-columns:1fr; gap:18px}
  .customgrid .fxseg{justify-content:flex-start}
}
@media(max-width:620px){
  .orbgrid{grid-template-columns:1fr}.igninput,.namepreview{height:80px}
  .namepresets{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .namepreset{flex-direction:column; gap:8px; padding:10px 6px; font-size:13px}
}
@media(forced-colors:active){.has-preview .igninput{color:CanvasText; -webkit-text-fill-color:CanvasText}.has-preview .namepreview{display:none}}
@media(max-width:360px){.tierhead{gap:12px}.tierhead h2{font-size:14px}.chest.tier{padding:20px}}