/* ==========================================================================
   Parchment · custom-v5.css  (client theme v3)
   The ONLY file in the client theme permitted to contain a literal colour.
   Load order: fontawesome → jquery.dataTables.min.css (history pages) → custom-v5.css
   Image assets: /assets/img/v5/*
   ========================================================================== */

:root {
  /* --- palette (from the mockups) --- */
  --pv-cream:       #fdf6e6;   /* page ground */
  --pv-cream-2:     #f6ead2;   /* guest card / soft fills */
  --pv-paper:       #ffffff;   /* cards */
  --pv-brown-900:   #3b2314;   /* topbar, tab bar */
  --pv-brown-700:   #5c3a1c;   /* body ink */
  --pv-brown-600:   #7a4a12;   /* labels */
  --pv-brown-300:   #c9b08a;   /* borders on cream */
  --pv-gold-700:    #8a6a1e;   /* script headings */
  --pv-gold-500:    #d9a441;   /* accents, active nav */
  --pv-gold-300:    #f2c96b;
  --pv-red-600:     #c8473d;   /* Log out, Top-up, active ribbon */
  --pv-red-800:     #7a2a1c;   /* balance figure */
  --pv-blue-500:    #2f6fd6;   /* top-up pills */
  --pv-orange-500:  #ff5a00;   /* active pill */
  --pv-green-500:   #6fb34a;
  --pv-ink-muted:   #9a8a70;
  --pv-on-dark:     #fbeed0;
  --pv-danger:      #e03d3d;
  --pv-success:     #2e8b57;

  /* --- type --- */
  /* one family everywhere (it includes Thai glyphs, so Google-translated pages keep the same look);
     --pv-font-script names the heading / label / ribbon role, which now uses Anuphan in heavier weights */
  --pv-font-body:    "Anuphan", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pv-font-script:  "Anuphan", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pv-font-title:   "Anuphan", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- layout --- */
  --pv-col: 640px;
  --pv-gutter: 14px;
  --pv-tabbar-h: 78px;
  --pv-tap: 44px;
  --pv-r-card: 14px;
  --pv-r-btn: 10px;
  --pv-shadow: 0 4px 14px rgba(59, 35, 20, .12);
  --pv-ease: 160ms ease;

  /* --- assets --- */
  --pv-img: url("../img/v5/");
}

/* ==========================================================================
   base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--pv-cream);
  color: var(--pv-brown-700);
  font-family: var(--pv-font-body);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--pv-brown-600); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.notranslate { }
.pv-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Desktop: a phone column centred on a fixed page image (swap the url to change it) */
@media (min-width: 720px) {
  body { background: #fff url("../img/v5/bg3.png") center / cover no-repeat fixed; }
}

/* ==========================================================================
   signed-in shell
   ========================================================================== */
.pv-app {
  max-width: var(--pv-col); margin: 0 auto; min-height: 100vh;
  background: var(--pv-cream);
  padding-bottom: calc(var(--pv-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  position: relative;
}
@media (min-width: 720px) {
  .pv-app { box-shadow: 0 0 40px rgba(59, 35, 20, .25); }
}

/* --- topbar --- */
.pv-topbar {
  background: var(--pv-brown-900); color: var(--pv-on-dark);
  padding: 10px var(--pv-gutter);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 10px;
  min-height: 68px;
}
.pv-topbar__logo { height: 46px; width: auto; flex: 0 0 auto; }
.pv-topbar__title {
  flex: 1; min-width: 0;
  font-family: var(--pv-font-title); font-weight: 700; font-style: normal;
  font-size: clamp(15px, 4.4vw, 26px); line-height: 1.1;
  color: var(--pv-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.btn-logout {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--pv-red-600); color: #fff; text-decoration: none;
  border: 0; border-radius: 8px; padding: 0 11px; min-height: 34px;
  font-size: clamp(13px, 3.6vw, 15px); font-weight: 500; white-space: nowrap;
}
.btn-logout:hover { background: #b03a31; color: #fff; }

/* --- banner carousel (app-v5.js: 5s auto-advance, arrows, dots) --- */
.pv-banner {
  margin: 12px var(--pv-gutter) 0; border-radius: var(--pv-r-card); overflow: hidden;
  position: relative; aspect-ratio: 1141 / 284; background: var(--pv-brown-900);
}
.pv-banner__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.pv-banner__slide.is-active { opacity: 1; }
.pv-banner__arrow {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59, 35, 20, .55); color: #fff; font-size: 15px;
}
.pv-banner__arrow:hover { background: rgba(59, 35, 20, .8); }
.pv-banner__arrow--prev { left: 8px; }
.pv-banner__arrow--next { right: 8px; }
.pv-banner__dots {
  position: absolute; left: 50%; bottom: 6px; z-index: 1; transform: translateX(-50%);
  display: flex; align-items: center; padding: 0 4px; border-radius: 999px; background: rgba(59, 35, 20, .4);
}
/* an 8px dot painted inside a 20px tap target */
.pv-banner__dot {
  box-sizing: content-box; width: 8px; height: 8px; padding: 6px 4px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .55); background-clip: content-box;
  transition: width var(--pv-ease);
}
.pv-banner__dot.is-active { width: 18px; background-color: #fff; }

/* --- main --- */
.pv-main { padding: 14px var(--pv-gutter) 0; display: flex; flex-direction: column; gap: 14px; }
.pv-stack { display: flex; flex-direction: column; gap: 14px; }
.pv-stack--tight { gap: 10px; }

/* --- tab bar --- */
.pv-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  margin: 0 auto; max-width: var(--pv-col);
  background: var(--pv-brown-900); color: var(--pv-on-dark);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: var(--pv-tabbar-h);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.pv-tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--pv-on-dark); text-decoration: none; font-size: clamp(12px, 3.6vw, 17px);
  line-height: 1.1; background: none; border: 0; padding: 4px 2px; border-radius: 8px;
}
.pv-tabbar__item i { font-size: 24px; }
.pv-tabbar__item.is-active { color: var(--pv-gold-300); }
.pv-tabbar__item:hover { color: var(--pv-gold-300); }

/* ==========================================================================
   cards & titles
   ========================================================================== */
.pv-card {
  background: var(--pv-paper); border: 1px solid var(--pv-brown-900);
  border-radius: var(--pv-r-card); padding: 16px;
}
.pv-card--soft { border-color: var(--pv-brown-300); }
.pv-card--tall { min-height: 320px; }

.pv-title {
  margin: 4px 0 0; font-family: var(--pv-font-script); font-weight: 700;
  font-size: clamp(26px, 7vw, 34px); line-height: 1.15; color: var(--pv-gold-700);
  display: flex; align-items: baseline; gap: 8px;
}
.pv-title__prefix { font-family: var(--pv-font-body); font-weight: 600; font-size: .85em; text-decoration: none; color: var(--pv-gold-700); }
a.pv-title__prefix:hover { color: var(--pv-red-600); }
.pv-title--box { font-family: var(--pv-font-body); font-style: italic; font-weight: 500; font-size: clamp(22px, 6vw, 28px); color: var(--pv-gold-700); margin: 0 0 12px; }

.pv-eyebrow { font-style: italic; color: var(--pv-brown-600); font-size: 15px; }
.pv-hint { font-size: 13px; color: var(--pv-ink-muted); margin: 0; }
.pv-hint a { color: var(--pv-brown-600); }
.pv-body { margin: 0; color: var(--pv-brown-700); }
.pv-meta { font-size: 13px; color: var(--pv-ink-muted); margin: 0; }

/* --- balance card --- */
/* balance card: who you are + loyalty ticket, a rule, then the wallet with its top-up action */
.pv-balance {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; padding: 16px 18px;
}
.pv-balance__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-balance__avatar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-cream-2); color: var(--pv-brown-600); font-size: 15px;
}
.pv-balance__user { font-weight: 700; font-size: clamp(18px, 5.4vw, 25px); line-height: 1.2; color: var(--pv-brown-900); overflow-wrap: anywhere; }
.pv-balance__id { display: flex; flex-direction: column; min-width: 0; }
.pv-balance__joined { font-size: 12.5px; line-height: 1.3; color: var(--pv-ink-muted); }.pv-balance__rule { grid-column: 1 / -1; width: 100%; height: 0; margin: 14px 0 12px; border: 0; border-top: 1px solid rgba(201, 176, 138, .55); }
.pv-balance__money { min-width: 0; }
.pv-balance__label { font-size: 13px; line-height: 1.3; color: var(--pv-brown-600); }
.pv-balance__figure { display: flex; align-items: center; gap: 8px; }
.pv-balance__figure img { width: 30px; height: 30px; }
.pv-balance__amount { font-weight: 700; font-size: clamp(24px, 6.6vw, 31px); line-height: 1.1; color: var(--pv-red-800); font-variant-numeric: tabular-nums; }
/* compact next to the balance; .btn-red.pv-balance__topup outranks the base .btn-red, which comes later in this file */
.btn-red.pv-balance__topup { justify-self: end; min-height: 36px; padding: 0 14px; gap: 6px; font-size: 15px; }

/* monthly points: a one-line ticket — points, then the month's dates past a dashed perforation */
.pv-ticket {
  justify-self: end; display: flex; align-items: stretch;
  background: #fbefcf; border: 1px dashed #c99a3e; border-radius: 8px; color: var(--pv-brown-700);
}
.pv-ticket__main { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 12px; }
.pv-ticket__main i { font-size: 14px; color: #b8862b; }
.pv-ticket__label { font-size: 13px; font-weight: 500; color: var(--pv-brown-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-ticket__value { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--pv-brown-900); font-variant-numeric: tabular-nums; }
.pv-ticket__period {
  flex: 0 0 auto; display: flex; align-items: center; padding: 7px 12px; border-left: 1px dashed #c99a3e;
  font-size: 12.5px; color: var(--pv-brown-600); white-space: nowrap;
}
/* phones: no room side by side, so the name and the ticket each take a full-width line */
@media (max-width: 559px) {
  .pv-balance__who { grid-column: 1 / -1; }
  .pv-ticket { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; margin-top: 12px; }
}
/* keep the dates on one line inside the ticket on narrow phones */
@media (max-width: 440px) {
  .pv-ticket__main { gap: 6px; padding: 6px 10px; }
  .pv-ticket__period { padding: 6px 10px; font-size: 12px; }
  .pv-ticket__label { font-size: 12px; }
  .pv-ticket__value { font-size: 16px; }
}
@media (max-width: 380px) {
  .pv-ticket__main i { display: none; }
}
.btn-red {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pv-red-600); color: #fff; text-decoration: none; border: 0;
  border-radius: var(--pv-r-btn); padding: 0 18px; min-height: 46px; font-size: 18px;
}
.btn-red:hover { background: #b03a31; color: #fff; }

/* --- quick tiles (account) --- */
.pv-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px 10px; }
/* form panel (add email / phone, change password): heading with back arrow and the form in one card */
.pv-panel { display: flex; flex-direction: column; gap: 16px; padding: 18px 16px 20px; }
.pv-panel .pv-auth-head__title { font-size: clamp(24px, 6.6vw, 32px); }
/* balance card, quick tiles, account details, form panels: the login card's shadow instead of the .pv-card outline */
.pv-balance, .pv-quick, .pv-details, .pv-panel { border: 0; box-shadow: 0 2px 6px rgba(59, 35, 20, .14), 0 16px 32px rgba(59, 35, 20, .24); }
/* tiles sit a little inside their cells; they lift on hover and sink when pressed, so every tap is acknowledged */
.pv-quick__item {
  position: relative; display: block; justify-self: center; width: 86%; max-width: 116px;
  aspect-ratio: 1; border-radius: 8px; overflow: hidden; text-decoration: none;
  box-shadow: 0 2px 4px rgba(59, 35, 20, .2);
  transition: transform var(--pv-ease), box-shadow var(--pv-ease), filter var(--pv-ease);
  -webkit-tap-highlight-color: transparent;
}
.pv-quick__item img { width: 100%; height: 100%; object-fit: cover; }
.pv-quick__label {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-style: italic; font-weight: 500; font-size: clamp(11px, 3.2vw, 16px);
}
@media (hover: hover) {
  .pv-quick__item:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 8px 16px rgba(59, 35, 20, .3); }
}
.pv-quick__item:active, .pv-quick__item.is-pressed { transform: translateY(1px) scale(.95); filter: brightness(.94); box-shadow: 0 1px 2px rgba(59, 35, 20, .25); }
.pv-quick__item:focus-visible { outline: 3px solid var(--pv-gold-500); outline-offset: 3px; }

/* --- account details: one card, hairline-separated rows; a missing detail is tinted and explains itself --- */
.pv-details { padding: 14px 16px 8px; }
.pv-details__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(201, 176, 138, .55);
}
.pv-details__title { margin: 0; font-family: var(--pv-font-script); font-weight: 700; font-size: clamp(22px, 6vw, 27px); line-height: 1.2; color: var(--pv-gold-700); }
.pv-details__alert {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; background: #fde3dc;
  font-size: 12.5px; font-weight: 600; color: var(--pv-red-600); white-space: nowrap;
}
.pv-details__list { list-style: none; margin: 0; padding: 0; }
.pv-detail { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.pv-detail + .pv-detail { border-top: 1px solid rgba(201, 176, 138, .35); }
.pv-detail__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-cream-2); color: var(--pv-brown-600); font-size: 16px;
}
.pv-detail__body { flex: 1; min-width: 0; }
.pv-detail__label { font-size: 13px; line-height: 1.3; color: var(--pv-brown-600); }
.pv-detail__value { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--pv-brown-900); overflow-wrap: anywhere; }
.pv-detail__warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #b73a2e; }
.pv-detail__warn i { margin-top: 3px; font-size: 12px; }
.pv-detail .btn-ticket { min-width: 92px; }
.pv-detail.is-missing { margin: 6px -8px; padding: 12px 8px; border-radius: 10px; background: #fdf0eb; }
.pv-detail.is-missing, .pv-detail.is-missing + .pv-detail { border-top-color: transparent; }
.pv-detail.is-missing .pv-detail__icon { background: #fbd6cc; color: var(--pv-red-600); }

/* --- row action buttons: flat like Top-up / Log out. Add = orange, Change = blue; both keep 4.5:1+ with white --- */
.btn-ticket {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 108px; min-height: 40px; padding: 0 16px;
  font-family: var(--pv-font-body); font-size: 15px; font-weight: 600; line-height: 1;
  color: #fff; text-decoration: none; border: 0; border-radius: var(--pv-r-btn);
  transition: background-color var(--pv-ease), transform var(--pv-ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-ticket--blue { background: var(--pv-blue-500); }
.btn-ticket--blue:hover { background: #2560bd; color: #fff; }
.btn-ticket--orange { background: #c2520e; }
.btn-ticket--orange:hover { background: #a8440a; color: #fff; }
.btn-ticket:active, .btn-ticket.is-pressed { transform: translateY(1px); }
.btn-ticket:focus-visible { outline: 3px solid var(--pv-gold-500); outline-offset: 2px; }
.btn-ticket i { font-size: 13px; }

/* ==========================================================================
   forms
   ========================================================================== */
.pv-form { display: flex; flex-direction: column; gap: 14px; }
.pv-field { display: flex; flex-direction: column; gap: 6px; }
.pv-label {
  font-family: var(--pv-font-script); font-size: 17px; font-weight: 600; color: var(--pv-brown-600); line-height: 1.2;
  display: flex; align-items: center; gap: 4px;
}
.pv-label i { font-size: 15px; }
.pv-input, .pv-select {
  position: relative; width: 100%; min-height: 52px; padding: 10px 16px;
  border: 0; outline: 0; border-radius: 0; background: transparent;
  color: var(--pv-brown-700); font-size: 18px; font-style: italic;
  -webkit-appearance: none; appearance: none;
}
.pv-select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%237a4a12' stroke-width='2'/></svg>") no-repeat right 16px center / 14px 9px;
  padding-right: 40px;
}
.pv-input::placeholder { color: #8f7d62; opacity: 1; }
/* frame.png on the wrapper: it survives Chrome autofill, and a drop-shadow glow follows the frame's real outline */
.pv-input-wrap { position: relative; }
.pv-input-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/v5/frame.png") center / 100% 100% no-repeat;
  transition: filter var(--pv-ease);
}
.pv-input-wrap:focus-within::before { filter: drop-shadow(0 0 1px #d9a441) drop-shadow(0 0 5px rgba(217, 164, 65, .8)); }
.pv-input-wrap.is-invalid::before { filter: drop-shadow(0 0 1px var(--pv-danger)) drop-shadow(0 0 4px rgba(224, 61, 61, .6)); }
/* autofill: the huge transition keeps Chrome's fill colour from ever painting over the frame */
.pv-input:-webkit-autofill, .pv-input:-webkit-autofill:hover, .pv-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pv-brown-700);
  transition: background-color 600000s 0s;
}
/* password reveal (eye) button; Edge's own reveal icon is hidden so there is only one */
.pv-input-wrap--reveal .pv-input { padding-right: 52px; }
.pv-input::-ms-reveal, .pv-input::-ms-clear { display: none; }
.pv-reveal {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: var(--pv-tap); height: var(--pv-tap); padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--pv-brown-600); font-size: 18px;
}
.pv-reveal:hover { color: var(--pv-brown-900); }
.invalid-feedback { color: var(--pv-danger); font-size: 14px; font-style: italic; display: flex; align-items: center; gap: 6px; }
.pv-form__error { color: var(--pv-danger); font-style: italic; font-size: 17px; text-align: center; margin: 0; }

/* captcha */
.pv-captcha-row { display: flex; align-items: center; gap: 10px; }
.pv-captcha-row .pv-input-wrap { flex: 1; min-width: 0; }
.pv-captcha-reload { flex: 0 0 auto; color: var(--pv-blue-500); font-size: 28px; line-height: 1; text-decoration: none; padding: 4px; }
.pv-captcha { flex: 0 0 auto; display: block; border-radius: 4px; overflow: hidden; background: #fff; line-height: 0; cursor: pointer; }
.pv-captcha img { height: 46px; width: auto; max-width: 124px; }

/* ribbon submit (button3.png) */
.btn-ribbon {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 60px; padding: 0 24px; border: 0; background: url("../img/v5/button3.png") center / 100% 100% no-repeat;
  font-family: var(--pv-font-script); font-size: clamp(20px, 5.6vw, 25px); font-weight: 700; color: #6b3d0c; text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-ribbon:hover { filter: brightness(1.04); color: #6b3d0c; }
.btn-ribbon.is-loading, .btn-ticket.is-loading, .btn-red.is-loading { opacity: .7; pointer-events: none; }

/* plain secondary button (SEAGM link) */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 2px solid var(--pv-gold-500); border-radius: var(--pv-r-btn);
  background: var(--pv-cream); color: var(--pv-brown-600); text-decoration: none; font-weight: 500;
}
.btn-outline:hover { background: var(--pv-cream-2); }

/* Fanpage: all player support runs through it, so its button is the one Facebook-blue element on the warm pages.
   #0866ff keeps white text at 4.8:1 (the older #1877f2 falls short of 4.5:1). */
.btn-fanpage {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--pv-r-btn);
  background: #0866ff; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(8, 102, 255, .28);
}
.btn-fanpage i { font-size: 18px; }
.btn-fanpage:hover { background: #0558e0; color: #fff; }
.btn-fanpage:active { transform: translateY(1px); }
.btn-fanpage:focus-visible { outline: 3px solid var(--pv-brown-900); outline-offset: 2px; }
/* support note: [headset] text [Contact Fanpage]; on phones the button takes its own full-width row */
.pv-help {
  display: flex; align-items: center; gap: 10px 12px; padding: 12px 14px;
  border: 1px solid #c4d8fb; border-radius: 12px; background: #edf3ff;
}
.pv-help__icon { flex: 0 0 auto; font-size: 20px; color: #0866ff; }
.pv-help__text { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: #1f3a66; }
.pv-topup__guide .pv-help { margin-top: 14px; }
@media (max-width: 440px) {
  .pv-help { flex-wrap: wrap; }
  .pv-help__text { flex-basis: calc(100% - 32px); }
  .pv-help .btn-fanpage { flex: 1 0 100%; }
}

/* ==========================================================================
   guest shell
   ========================================================================== */
/* Same column as the signed-in shell; bg1 covers the column only, never the full desktop width.
   No background-attachment: fixed — that sizes `cover` against the viewport instead of the column. */
.pv-guest {
  max-width: var(--pv-col); margin: 0 auto;
  min-height: 100vh; background: #e9d9b5 url("../img/v5/bg1.png") center top / cover no-repeat;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: calc(var(--pv-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
}
.pv-guest > .pv-topbar { width: 100%; }
/* event banner matches the card width (as a flex child with only absolute images it would collapse) */
.pv-guest > .pv-banner {
  width: calc(100% - 24px); max-width: 600px; margin: 16px 0 20px;
  box-shadow: 0 2px 6px rgba(59, 35, 20, .14), 0 16px 32px rgba(59, 35, 20, .24);
}
.pv-auth-head { position: relative; text-align: center; }
/* back arrow in the card's top-left corner; side padding keeps the centred title clear of it */
.pv-auth-head--back { padding: 0 44px; }
.pv-auth-back {
  position: absolute; top: 2px; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-cream-2); border: 1px solid var(--pv-brown-300);
  color: var(--pv-brown-600); font-size: 16px; text-decoration: none;
}
.pv-auth-back:hover { color: var(--pv-red-600); border-color: var(--pv-gold-500); }
.pv-auth-head__icon { margin-right: 10px; font-size: .6em; vertical-align: .15em; color: var(--pv-gold-500); }
/* topbar Sign In: bronze-gold like the ticket buttons (overrides the red .btn-logout it builds on) */
.btn-signin {
  background: linear-gradient(180deg, #f6cf7a 0%, #d9a441 100%); color: #5a3208;
  border: 1px solid #b07a2a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #7a4f16;
  font-weight: 600;
}
.btn-signin:hover { background: linear-gradient(180deg, #fbd98c 0%, #e2ad4c 100%); color: #5a3208; }
.pv-auth-head__title { margin: 0; font-family: var(--pv-font-script); font-weight: 700; font-size: clamp(26px, 7vw, 33px); line-height: 1.15; color: var(--pv-gold-700); }
.pv-auth-head__sub { margin: 2px 0 0; font-style: italic; font-size: clamp(15px, 4.2vw, 17px); color: var(--pv-brown-600); }
.pv-guest-hero { padding: 40px 16px 20px; display: flex; justify-content: center; }
.pv-guest-hero img { width: min(60%, 300px); height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.pv-guest-card {
  width: calc(100% - 24px); max-width: 600px; background: var(--pv-cream);
  padding: 18px var(--pv-gutter) 28px; display: flex; flex-direction: column; gap: 16px;
  flex: 0 0 auto; margin-bottom: 24px;
  border-radius: var(--pv-r-card);
  box-shadow: 0 2px 6px rgba(59, 35, 20, .14), 0 16px 32px rgba(59, 35, 20, .24);
}
@media (min-width: 720px) {
  .pv-guest { justify-content: flex-start; }
  .pv-guest-card { margin-bottom: 48px; }
}

/* secondary auth action under the submit button (forgot password · back to sign in) */
.pv-auth-alt { align-self: center; color: var(--pv-brown-600); font-style: italic; font-size: clamp(15px, 4.4vw, 18px); }
.pv-auth-alt:hover { color: var(--pv-red-600); }
/* forgot password: right-aligned, tucked under the password field; only the text is underlined */
.pv-auth-forgot {
  align-self: flex-end; margin-top: -6px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: clamp(14px, 4vw, 16px); text-decoration: none;
}
.pv-auth-forgot span { text-decoration: underline; }
.pv-auth-note { margin: 0; text-align: center; font-size: clamp(14px, 4vw, 16px); color: var(--pv-brown-700); }
.pv-auth-note a { color: var(--pv-red-600); font-weight: 600; }

/* --- language picker: topbar flag button + dropdown --- */
.pv-lang { position: relative; }
.pv-lang__flag-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 9px;
  background: rgba(251, 238, 208, .08); border: 1px solid rgba(251, 238, 208, .35); border-radius: 8px;
  color: var(--pv-on-dark);
}
.pv-lang__flag-btn:hover { background: rgba(251, 238, 208, .16); }
.pv-lang__flag-btn .pv-lang__flag { width: 26px; height: 19px; }
.pv-lang__flag-btn i { font-size: 12px; transition: transform var(--pv-ease); }
.pv-lang.show .pv-lang__flag-btn i { transform: rotate(180deg); }
.pv-lang__list {
  display: none; position: absolute; z-index: 50; min-width: 200px;
  background: var(--pv-paper); border: 1px solid var(--pv-brown-900); border-radius: 10px; padding: 6px;
  box-shadow: var(--pv-shadow);
}
.pv-lang__list { right: 0; top: calc(100% + 8px); }
.pv-lang__list.show { display: block; }
.pv-lang__option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--pv-brown-700); font-style: normal; font-size: 16px; }
.pv-lang__option:hover, .pv-lang__option.active { background: var(--pv-cream); color: var(--pv-brown-900); }
.pv-lang__option.active { font-weight: 600; }
.pv-lang__flag { flex: 0 0 auto; width: 24px; height: 18px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.pv-lang__note { padding: 6px 12px 4px; }
#google_translate_element { display: none; }
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }

/* ==========================================================================
   top-up
   ========================================================================== */
/* top-up type tabs: a compact, centred cream track with three 5:3 image tabs (600×360 artwork),
   72px wide on small phones up to 96px; smaller than that the Viettel / Limited lettering stops being legible.
   The chosen tab is a white chip with a gold ring and full-colour art; the others are muted until hovered. */
.pv-segment {
  align-self: center; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(72px, 20vw, 96px); gap: 4px; padding: 4px;
  background: var(--pv-cream-2); border: 1px solid rgba(201, 176, 138, .6); border-radius: 12px;
}
.pv-segment__btn {
  display: block; min-width: 0; aspect-ratio: 5 / 3; padding: 3px; border: 0; border-radius: 10px;
  background: transparent; overflow: hidden;
  transition: background-color var(--pv-ease), box-shadow var(--pv-ease), transform var(--pv-ease);
  -webkit-tap-highlight-color: transparent;
}
.pv-segment__img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(.6) opacity(.55); transition: filter var(--pv-ease);
}
.pv-segment__btn:hover { background: rgba(255, 255, 255, .6); }
.pv-segment__btn:hover .pv-segment__img { filter: grayscale(.15) opacity(.9); }
.pv-segment__btn[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 2px var(--pv-gold-500), 0 3px 8px rgba(59, 35, 20, .22); }
.pv-segment__btn[aria-selected="true"] .pv-segment__img { filter: none; }
.pv-segment__btn:active { transform: translateY(1px); }
.pv-segment__btn:focus-visible { outline: 3px solid var(--pv-brown-900); outline-offset: 2px; }
.pv-segment__btn.is-gone { display: none; } /* tab gated off for the region (selectiontopup: pvHideBankTabIfEmpty) */

.pv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px; }

/* top-up amount tile: artwork (its old bottom price band, the last ~22%, is cropped off), COIN received, price */
.pv-offer {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0;
  background: #fff; border: 1px solid rgba(201, 176, 138, .6); border-radius: 12px; overflow: hidden;
  font: inherit; color: var(--pv-brown-900); text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 3px rgba(59, 35, 20, .12);
  transition: transform var(--pv-ease), box-shadow var(--pv-ease), border-color var(--pv-ease);
  -webkit-tap-highlight-color: transparent;
}
.pv-offer__art { position: relative; display: block; aspect-ratio: 271 / 211; overflow: hidden; background: #2b1f5c; }
.pv-offer__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pv-offer__badge {
  position: absolute; top: 5px; right: 5px; padding: 2px 7px; border-radius: 999px;
  background: rgba(59, 35, 20, .82); color: var(--pv-gold-300);
  font-size: clamp(10.5px, 2.9vw, 13px); font-weight: 700; line-height: 1.3;
}
/* coin and price rows: icon pinned left, the number centred on the tile. The empty ::after column mirrors the
   icon's width so the middle column is symmetric about the tile's centre. */
.pv-offer__coins, .pv-offer__price {
  display: grid; grid-template-columns: var(--offer-icon) minmax(0, 1fr) var(--offer-icon);
  align-items: center; column-gap: 4px; white-space: nowrap;
}
.pv-offer__coins::after, .pv-offer__price::after { content: ""; }
.pv-offer__coins > span, .pv-offer__price > span { text-align: center; }
.pv-offer__coins {
  --offer-icon: 1.45em; padding: 7px 8px 6px;
  font-size: clamp(13px, 3.7vw, 17px); font-weight: 700; line-height: 1.2;
}
/* coin_1.png's coin fills only ~59% of its canvas: scale the picture up inside the same box, so the coin reads
   bigger without taking width from the number */
.pv-offer__coin { width: 1.45em; height: 1.45em; transform: scale(1.6); }
.pv-offer__price {
  --offer-icon: 1em; margin: 0 8px; padding: 6px 0 7px; border-top: 1px solid rgba(201, 176, 138, .45);
  font-size: clamp(12.5px, 3.5vw, 15px); font-weight: 600; color: var(--pv-brown-700);
}
.pv-offer__price i { font-size: .85em; color: var(--pv-ink-muted); }
@media (hover: hover) {
  .pv-offer:hover { transform: translateY(-2px); border-color: var(--pv-gold-500); box-shadow: 0 6px 14px rgba(59, 35, 20, .18); }
}
.pv-offer:active, .pv-offer.is-pressed { transform: translateY(1px); box-shadow: 0 1px 2px rgba(59, 35, 20, .15); }
.pv-offer:focus-visible { outline: 3px solid var(--pv-gold-500); outline-offset: 2px; }
/* narrow phones: tighter gaps, and the coin row drops its mirror column so "500 + 150" still fits beside the
   bigger coin (the number then centres in the space right of the icon) */
@media (max-width: 440px) {
  .pv-topup .pv-tiles { gap: 8px; }
  .pv-offer__coins { padding: 6px 6px 5px; grid-template-columns: var(--offer-icon) minmax(0, 1fr); }
  .pv-offer__coins::after { display: none; }
  .pv-offer__price { margin: 0 6px; }
}
/* Limited pack tile: the pack name where the other tabs show the COIN received, and the price in COIN
   (a coin where the cart sits), bolder since COIN leaves the balance straight away */
.pv-offer__name {
  display: block; padding: 7px 8px 6px; text-align: center;
  font-size: clamp(13px, 3.7vw, 16px); font-weight: 700; line-height: 1.2; color: var(--pv-brown-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-offer__price--coin { --offer-icon: 1.2em; font-weight: 700; color: var(--pv-red-800); }
.pv-offer__price--coin .pv-offer__coin { width: 1.2em; height: 1.2em; }

/* Limited: what the packs are paid with, and how much of it the player holds */
.pv-wallet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding: 8px 14px; border-radius: 10px; background: var(--pv-cream); border: 1px solid rgba(201, 176, 138, .6);
}
.pv-wallet__label { font-size: 13.5px; font-weight: 500; color: var(--pv-brown-600); }
.pv-wallet__value { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--pv-red-800); font-variant-numeric: tabular-nums; }
.pv-wallet__coin { width: 20px; height: 20px; transform: scale(1.5); }

/* Limited buy sheet: the pack, then price / balance / balance after as a small receipt */
.pv-pack { display: flex; align-items: center; gap: 12px; }
.pv-pack__art { flex: 0 0 auto; width: 88px; aspect-ratio: 271 / 211; border-radius: 10px; object-fit: cover; object-position: top; }
.pv-pack__info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pv-pack__name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--pv-brown-900); }
.pv-cost { margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--pv-cream); }
.pv-cost__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.pv-cost__row dt { font-size: 14px; color: var(--pv-brown-600); }
.pv-cost__row dd { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--pv-brown-900); font-variant-numeric: tabular-nums; }
.pv-cost__row img { width: 18px; height: 18px; transform: scale(1.5); }
.pv-cost__row--after { margin-top: 3px; padding-top: 8px; border-top: 1px solid rgba(201, 176, 138, .55); }
.pv-cost__row--after dd { font-size: 18px; color: var(--pv-red-800); }
.pv-pack__topup { width: 100%; }

.pv-textbox { min-height: 320px; padding: 18px 20px; }
.pv-textbox ol, .pv-textbox ul { margin: 0; padding-left: 20px; }
.pv-textbox li { margin-bottom: 6px; }

/* top-up: heading, type tabs and amount tiles share one panel; each tab's guide opens in a sheet from the pinned reminder */
.pv-topup__panel { display: flex; flex-direction: column; gap: 18px; }
.pv-topup .pv-tiles { padding: 0; }
.pv-topup__guide { color: var(--pv-brown-700); }
.pv-topup__guide ol { margin: 0 0 10px; padding-left: 20px; }
.pv-topup__guide li { margin-bottom: 6px; }
.pv-topup__guide p { margin: 0; }

/* top-up: reminder pinned above the tab bar with the open tab's key rule; tapping it opens the full guide sheet.
   The panel keeps a bottom margin so the reminder never sits over the last of the page. */
.pv-pinned {
  position: fixed; left: 0; right: 0; bottom: calc(var(--pv-tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 39;
  width: 100%; max-width: var(--pv-col); margin: 0 auto;
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 14px;
  /* soft gold with dark ink stays calm under long viewing; the red warning icon and the gold top rule carry
     the "pay attention" signal instead of a full red field */
  border: 0; border-top: 2px solid var(--pv-gold-500); background: #fbe7b4; color: var(--pv-brown-900);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: left;
  box-shadow: 0 -4px 12px rgba(59, 35, 20, .16); -webkit-tap-highlight-color: transparent;
}
.pv-pinned__icon { flex: 0 0 auto; font-size: 16px; color: var(--pv-red-600); }
.pv-pinned__text { flex: 1; min-width: 0; }
.pv-pinned__more {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: var(--pv-brown-900); color: var(--pv-on-dark); font-size: 12.5px; font-weight: 700;
}
.pv-pinned__more i { font-size: 10px; }
.pv-pinned:hover { background: #f8dfa2; }
.pv-pinned:hover .pv-pinned__more { background: #5a3a24; }
.pv-pinned:active .pv-pinned__more { transform: translateY(1px); }
.pv-pinned:focus-visible { outline: 3px solid var(--pv-brown-900); outline-offset: -3px; }
/* the same reminder as a sheet footer: in the flow, full sheet width */
.pv-pinned--inline { position: static; max-width: none; margin: 0; box-shadow: none; }
.pv-topup { margin-bottom: 64px; }
/* the "Copied" / "coming soon" toast rises above the pinned reminder instead of covering it */
html:has(.pv-pinned) .pv-toast { bottom: calc(var(--pv-tabbar-h) + 64px); }

/* payment method grid */
.pv-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; }
.pv-method {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 1; border: 2px solid transparent; border-radius: 12px; background: var(--pv-paper); padding: 10px;
}
.pv-method img, .pv-method .pv-method__icon { width: 72%; height: 60%; object-fit: contain; }
.pv-method .pv-method__icon { display: flex; align-items: center; justify-content: center; font-size: 56px; color: #635bff; }
.pv-method__name { font-size: 13px; color: var(--pv-brown-600); text-align: center; line-height: 1.2; }
.pv-method:hover, .pv-method.is-active { border-color: var(--pv-gold-500); background: var(--pv-cream); }
.pv-methods__note { grid-column: 1 / -1; text-align: center; }
.pv-methods__payssion { display: contents; }

/* payment detail panel */
.method-detail { display: flex; flex-direction: column; gap: 14px; }
.pv-pay-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pv-pay-amount__label { font-style: italic; color: var(--pv-brown-600); font-size: 18px; }
.pv-pay-amount__value { font-style: italic; color: var(--pv-red-800); font-size: 30px; line-height: 1; }

.pv-copy { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--pv-cream); border: 1px solid var(--pv-brown-300); border-radius: 10px; }
.pv-copy__body { flex: 1; min-width: 0; }
.pv-copy__value { font-size: 16px; color: var(--pv-brown-900); word-break: break-all; }
.pv-copy__value a { color: var(--pv-blue-500); }
.pv-copy__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border: 1px solid var(--pv-gold-500); border-radius: 8px;
  background: var(--pv-paper); color: var(--pv-brown-600); font-size: 14px;
}
.pv-copy__btn.is-copied { background: var(--pv-green-500); color: #fff; border-color: var(--pv-green-500); }

.pv-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.pv-alert__icon { margin-top: 2px; }
.pv-alert--info { background: #eef4fd; border: 1px solid #c9dbf5; color: #2c4d80; }
.pv-alert--warn { background: #fff5dd; border: 1px solid #f0d89a; color: #7a5c11; }
.pv-alert--error { background: #fdeeee; border: 1px solid #f3c9c9; color: #a22b2b; }
.pv-alert--success { background: #eef7f2; border: 1px solid #cfe6da; color: var(--pv-success); }

.pv-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pv-qr img { width: min(280px, 78vw); height: auto; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--pv-brown-300); background: #fff; object-fit: contain; }
.pv-qr__save { align-self: stretch; }
.pv-divider { height: 1px; background: var(--pv-brown-300); }
.pv-upload {
  width: 100%; min-height: 92px; border: 1.5px dashed var(--pv-gold-500); border-radius: 12px;
  background: var(--pv-cream); color: var(--pv-brown-600); font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px; text-align: center;
}
.pv-upload > span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pv-upload__hint { font-size: 12px; color: var(--pv-ink-muted); font-weight: 400; }
.pv-upload img { max-width: 100%; max-height: 160px; border-radius: 6px; }
.pv-upload input[type="file"] { display: none; }
.pv-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.pv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- bottom sheet (x-sheet): slides up over the page; its body scrolls while the page behind stays put.
       Above the tab bar (40), below the copy toast (60) so "Copied" still shows over it. --- */
.pv-sheet { position: fixed; inset: 0; z-index: 55; }
.pv-sheet__backdrop { position: absolute; inset: 0; background: rgba(35, 20, 10, .5); opacity: 0; transition: opacity .28s ease; }
.pv-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: var(--pv-col);
  display: flex; flex-direction: column; max-height: 90vh; max-height: 90dvh;
  background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(59, 35, 20, .25);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); outline: 0;
}
.pv-sheet.is-open .pv-sheet__backdrop { opacity: 1; }
.pv-sheet.is-open .pv-sheet__panel { transform: translateY(0); }
/* head: centred heading between an empty 38px column and the 38px close button, so it sits on the sheet's centre */
.pv-sheet__head {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: start; column-gap: 8px;
  padding: 20px 16px 14px; border-bottom: 1px solid rgba(201, 176, 138, .5);
}
.pv-sheet__handle { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: rgba(122, 74, 18, .25); }
.pv-sheet__heading { grid-column: 2; min-width: 0; text-align: center; }
.pv-sheet__close { grid-column: 3; }
.pv-sheet__title { margin: 0; font-family: var(--pv-font-script); font-weight: 700; font-size: clamp(18px, 4.9vw, 24px); line-height: 1.2; color: var(--pv-gold-700); }
/* summary: the whole "COIN for $price" line as one gold chip. Its two phrases never break inside, but
   "for $price" may drop to a second line within the chip when a long package meets a narrow phone. */
.pv-sheet__summary { display: flex; justify-content: center; margin: 8px 0 0; }
.pv-sheet__summary:empty { display: none; }
.pv-sheet__coins {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 7px; max-width: 100%;
  padding: 4px 14px 4px 8px; background: #fbefcf; border: 1px solid rgba(201, 154, 62, .65); border-radius: 18px;
  font-size: clamp(16px, 4.6vw, 19px); font-weight: 700; line-height: 1.25; color: var(--pv-red-800);
}
.pv-sheet__coins > span { white-space: nowrap; }
.pv-sheet__lead { display: inline-flex; align-items: center; gap: 7px; }
.pv-sheet__plus { font-size: 1.1em; font-weight: 800; line-height: 1; }
.pv-sheet__bonus { font-size: .82em; font-weight: 600; }
/* coin_1.png's coin fills ~59% of its canvas, so scale the picture up inside its box */
.pv-sheet__coin { width: 22px; height: 22px; transform: scale(1.5); }
.pv-sheet__close {
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-cream-2); color: var(--pv-brown-600); font-size: 17px;
}
.pv-sheet__close:hover { background: #efdcbc; color: var(--pv-brown-900); }
.pv-sheet__close:focus-visible { outline: 3px solid var(--pv-gold-500); outline-offset: 2px; }
.pv-sheet__body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 16px calc(22px + env(safe-area-inset-bottom, 0px));
}
html.pv-sheet-lock, html.pv-sheet-lock body { overflow: hidden; }
/* optional footer (x-slot footer): stays put under the scrolling body */
.pv-sheet__foot { flex: 0 0 auto; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fbe7b4; }
.pv-sheet__panel:has(.pv-sheet__foot) .pv-sheet__body { padding-bottom: 16px; }
/* the payment content keeps its own cards on the standalone pages; inside the sheet it sits flat */
.pv-sheet .pv-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pv-sheet .method-detail { padding-top: 14px; border-top: 1px solid rgba(201, 176, 138, .5); }

/* ==========================================================================
   history (DataTables collapsed to one card column)
   ========================================================================== */
/* both lists sit in one shadowed panel (.pv-panel), the second past a hairline */
.pv-history { min-height: 160px; }
.pv-history + .pv-history { padding-top: 16px; border-top: 1px solid rgba(201, 176, 138, .55); }
.pv-history__title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--pv-font-script); font-weight: 700; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.2; color: var(--pv-gold-700);
}
.pv-history__title i { font-size: .85em; color: var(--pv-gold-500); }
.pv-history table.dataTable { width: 100% !important; border-collapse: collapse; margin: 0; background: transparent; }
.pv-history table.dataTable, .pv-history table.dataTable.no-footer { border: 0; }
.pv-history table.dataTable thead { display: none; }
.pv-history table.dataTable tbody td { padding: 0 0 8px 0; border: 0; background: transparent; }
.pv-history table.dataTable tbody tr { background: transparent; }
.pv-history table.dataTable tbody td.dataTables_empty { padding: 32px 0; text-align: center; color: var(--pv-ink-muted); font-style: italic; }
.pv-history .dataTables_wrapper { position: relative; }
.pv-history .dataTables_processing {
  position: absolute; top: 0; left: 0; right: 0; height: auto; margin: 0; padding: 12px;
  background: rgba(255, 255, 255, .92); color: var(--pv-ink-muted); font-size: 13px; text-align: center; z-index: 1; border: 0; box-shadow: none;
}
/* nav row: [‹ Newer]  1–5 of 12  [Older ›] — the paginate wrapper dissolves so its two buttons and the info share one flex row */
.pv-history__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.pv-history__nav .dataTables_paginate { display: contents; }
.pv-history .dataTables_info { order: 2; flex: 1; min-width: 0; float: none; padding: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--pv-brown-600); }
.pv-history .dataTables_paginate .paginate_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; min-width: 92px; padding: 0 14px !important; margin: 0 !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--pv-brown-900) !important; color: var(--pv-on-dark) !important;
  font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(59, 35, 20, .22) !important;
  transition: background-color var(--pv-ease), transform var(--pv-ease);
}
.pv-history .dataTables_paginate .paginate_button.previous { order: 1; }
.pv-history .dataTables_paginate .paginate_button.next { order: 3; }
.pv-history .dataTables_paginate .paginate_button i { font-size: 11px; }
.pv-history .dataTables_paginate .paginate_button:hover { background: #5a3a24 !important; color: #fff !important; }
.pv-history .dataTables_paginate .paginate_button:active { transform: translateY(1px); }
.pv-history .dataTables_paginate .paginate_button.disabled,
.pv-history .dataTables_paginate .paginate_button.disabled:hover,
.pv-history .dataTables_paginate .paginate_button.disabled:active {
  background: var(--pv-cream-2) !important; color: var(--pv-brown-300) !important; box-shadow: none !important; cursor: default; transform: none;
}
.history-row { display: flex; align-items: center; gap: 12px; background: var(--pv-cream); border-radius: 10px; padding: 12px 13px; }
.history-row__body { flex: 1; min-width: 0; }
.history-row__title { font-size: 15px; font-weight: 600; color: var(--pv-brown-900); }
.history-row__meta { font-size: 12px; color: var(--pv-ink-muted); margin-top: 3px; }
.history-row__end { flex: 0 0 auto; text-align: right; }
.history-row__amount { font-size: 15px; font-weight: 600; color: var(--pv-red-800); }
.history-row__status { font-size: 12px; margin-top: 3px; color: var(--pv-success); }
.history-row__content { font-size: 15px; color: var(--pv-brown-900); line-height: 1.45; }

/* ==========================================================================
   event (accumulat)
   ========================================================================== */
/* one shadowed panel (.pv-panel): heading, a cream progress block, then the claim form, with no outlines inside */
.pv-event__progress { padding: 14px 16px; border-radius: 12px; background: var(--pv-cream); }
.pv-event__preview { min-height: 0; }
/* before a milestone is picked the table is not a DataTable yet: hide its raw header, show the hint instead */
.pv-event__preview table:not(.dataTable) thead { display: none; }
.pv-event__preview-hint { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--pv-cream); font-size: 14px; }
.pv-event__preview:has(table.dataTable) .pv-event__preview-hint { display: none; }
.pv-progress { height: 10px; border-radius: 5px; background: rgba(201, 176, 138, .35); margin-top: 10px; overflow: hidden; }
.pv-progress__bar { height: 100%; background: linear-gradient(90deg, var(--pv-gold-500), var(--pv-gold-300)); }
.pv-milestone {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; border-radius: 12px; padding: 12px 14px; background: var(--pv-cream);
  transition: box-shadow var(--pv-ease), background-color var(--pv-ease);
}
.pv-milestone.is-dim { opacity: .65; }
/* inset ring instead of a thicker border, so selecting a milestone does not shift the layout */
.pv-milestone.is-active { box-shadow: inset 0 0 0 2px var(--pv-gold-500); background: #fff5dd; }
.pv-milestone__coin { width: 40px; height: 40px; flex: 0 0 auto; background: url("../img/v5/coin_1.png") center / contain no-repeat; }
.pv-milestone__body { flex: 1; min-width: 0; }
.pv-milestone__title { display: block; font-size: 16px; font-weight: 600; color: var(--pv-brown-900); }
.pv-milestone__meta { display: block; font-size: 13px; color: var(--pv-ink-muted); margin-top: 2px; }
.pv-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: var(--pv-cream-2); color: var(--pv-brown-600); border: 1px solid var(--pv-brown-300); }
.pv-badge--gold { background: var(--pv-gold-300); color: #6b3d0c; border-color: var(--pv-gold-500); }
.pv-reward-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pv-brown-300); }
.pv-reward-item:last-child { border-bottom: 0; }
.pv-reward-item img { width: 40px; height: 40px; border-radius: 6px; background: var(--pv-cream-2); object-fit: contain; flex: 0 0 auto; }
.pv-reward-item__name { flex: 1; min-width: 0; font-size: 15px; color: var(--pv-brown-900); }
.pv-reward-item__qty { font-size: 13px; color: var(--pv-brown-600); }
.pv-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.pv-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--pv-cream-2); color: var(--pv-brown-600); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.pv-empty__title { font-size: 18px; font-weight: 600; color: var(--pv-brown-900); }
.pv-empty__body { font-size: 14px; color: var(--pv-ink-muted); max-width: 30ch; }

/* ==========================================================================
   feedback
   ========================================================================== */
.pv-toast {
  position: fixed; left: var(--pv-gutter); right: var(--pv-gutter); bottom: calc(var(--pv-tabbar-h) + 16px); z-index: 60;
  max-width: 600px; margin-inline: auto;
  background: var(--pv-brown-900); color: var(--pv-on-dark);
  border-radius: 10px; padding: 12px; font-size: 15px; text-align: center;
}
.swal2-popup { border-radius: 14px !important; font-family: var(--pv-font-body) !important; background: var(--pv-cream) !important; color: var(--pv-brown-900) !important; }
.swal2-title { font-size: 18px; color: var(--pv-brown-900); }
.swal2-html-container { font-size: 15px; color: var(--pv-brown-700); }
.swal2-confirm { background: var(--pv-red-600) !important; border-radius: 10px !important; min-height: var(--pv-tap); }
.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(200, 71, 61, .35) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}