/* The plan panel is the only place money is discussed, so it reads like the
   rest of the world rather than like a checkout page. */
.store-panel{width:min(430px,94vw);max-height:88vh;padding:0;border:1px solid #6e303a;border-radius:22px;
  background:#140c11;color:#f5edf0;overflow:hidden}
.store-panel::backdrop{background:#05040699;backdrop-filter:blur(10px)}
.store-frame{position:relative;display:grid;gap:16px;padding:26px 22px 24px;max-height:88vh;overflow-y:auto}
.store-close{position:absolute;top:14px;right:14px;padding:6px 10px;border:1px solid #4a2028;border-radius:8px;
  background:transparent;color:#b7a7aa;font-size:12px}
.store-head small{color:#e04a57;letter-spacing:.28em;font-size:11px}
.store-head h2{margin:8px 0 6px;font-size:25px;font-weight:500}
.store-head p{margin:0;color:#b7a7aa;font-size:14px;line-height:1.7}
.store-error{margin:0;color:#ef8a94;font-size:13px;line-height:1.6}
.store-foot{margin:0;color:#8d7d82;font-size:12px;line-height:1.7}
.store-primary{padding:13px;border:0;border-radius:11px;background:#e04a57;color:#16090d;font-weight:700}

/* Plans scroll sideways and snap, so one card is always the one being read. */
.plan-rail{display:flex;gap:12px;margin:0 -22px;padding:4px 22px 10px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.plan-rail::-webkit-scrollbar{display:none}
.plan-card{position:relative;flex:0 0 63%;scroll-snap-align:center;display:grid;gap:5px;justify-items:start;
  padding:20px 18px;border:1px solid #4a2028;border-radius:18px;background:#1b1017;color:#f5edf0;text-align:left}
.plan-card.selected{border-color:#e04a57;background:linear-gradient(#24121a,#1b1017);
  box-shadow:0 0 34px #e04a5722;transform:scale(1.02)}
.plan-card:not(.selected){transform:scale(.95);opacity:.72}
.plan-card{transition:transform .18s ease,opacity .18s ease,border-color .18s ease}
.plan-card:focus-visible{outline:2px solid #ffd9e0;outline-offset:3px}
.plan-badge{position:absolute;top:-1px;right:14px;padding:3px 9px;border-radius:0 0 8px 8px;
  background:#e04a57;color:#16090d;font-size:11px;font-weight:700}
.plan-label{color:#e04a57;letter-spacing:.16em;font-size:12px}
.plan-price{font-size:30px;font-weight:600;line-height:1.2}
.plan-turns{color:#cfc3c7;font-size:13px}
.plan-blurb{margin-top:4px;color:#8d7d82;font-size:12.5px;line-height:1.6}

.pay-tabs{display:flex;gap:8px}
.pay-tab{flex:1;padding:10px;border:1px solid #4a2028;border-radius:10px;background:#1b1017;color:#b7a7aa;font-size:14px}
.pay-tab.on{border-color:#e04a57;background:#2a1119;color:#fff}
.pay-qr{display:grid;justify-items:center;gap:10px;padding:18px;border:1px solid #33191f;border-radius:16px;background:#0d090c}
/* The payment page is the last step before money moves, and the code will be
   scanned off a phone, screenshotted, zoomed, or opened inside WeChat. It gets
   the width it needs, a white surround for the scanner to find its edges, and
   no smoothing that could soften the modules. */
.pay-qr img{width:min(72vw,320px);aspect-ratio:1;object-fit:contain;image-rendering:auto;
  border-radius:10px;background:#fff;padding:10px;box-sizing:border-box}
.pay-amount{margin:0;font-size:26px;font-variant-numeric:tabular-nums}
.pay-missing{margin:0;padding:28px 6px;color:#ef8a94;font-size:13px;text-align:center;line-height:1.7}

.order-id{display:flex;align-items:center;gap:8px;margin:0;color:#8d7d82;font-size:12px}
.order-id b{font-weight:500;color:#f5edf0;font-size:14px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.order-copy{margin-left:auto;padding:5px 10px;border:1px solid #4a2028;border-radius:8px;background:transparent;color:#b7a7aa;font-size:12px}

.proof-upload{display:grid;place-items:center;padding:15px;border:1px dashed #6e303a;border-radius:12px;
  background:#1b1017;color:#f5edf0;font-size:14px;cursor:pointer}
.proof-upload input{display:none}
.proof-upload.busy{opacity:.6;pointer-events:none}

.granted-line{margin:0;color:#cfc3c7;font-size:15px;line-height:1.9}
.granted-go{margin:6px 0 0;font-size:19px;color:#ffd9e0}

/* Signing up and signing in are the same door, so they share one card. */
.gate-tabs{display:flex;gap:8px;margin:0 0 4px}
.gate-tab{flex:1;padding:9px;border:1px solid #6e303a;border-radius:9px;background:transparent;color:#b7a7aa;font-size:14px}
.gate-tab.on{border-color:#e04a57;background:#2a1119;color:#fff}
.gate-warning{margin:14px 0 0;padding:11px 13px;border:1px solid #6e303a;border-radius:10px;
  background:#1b1017;color:#cfc3c7;font-size:12.5px;line-height:1.7}
.player-notice .notice-buy{margin:12px auto 0;padding:10px 22px;border:0;border-radius:10px;
  background:#e04a57;color:#16090d;font-weight:700;font-size:14px}
.player-profile .open-store{background:#e04a57}

.pay-method{margin:0;color:#b7a7aa;font-size:13px}

/* The one screen someone has to read before they start talking. */
.player-gate.keepsake .player-login h2{font-size:22px;line-height:1.5}
.player-gate.keepsake .player-login p{margin:0 0 14px}
.keepsake-name{padding:11px 13px;border:1px solid #6e303a;border-radius:10px;background:#0d090c;
  color:#f5edf0;font-size:15px;letter-spacing:.04em}