/* ==========================================================
   page-win-history.css
   Page-only styles for /win-history.
   shared.css + styles.css remain unchanged.
   ========================================================== */

.wh-page{
  --wh-orange:#ff7a1a;
  --wh-orange-2:#ff8a3a;
  --wh-purple:#a15cff;
  --wh-purple-2:#c56bff;
  --wh-green:#3ddc97;
  --wh-blue:#60a5fa;
  --wh-red:#ff6464;
  --wh-yellow:#f1c75b;
  --wh-muted:#9ca3af;
  --wh-line:rgba(255,255,255,.08);
  --wh-panel:rgba(255,255,255,.025);
  --wh-display:var(--cx-display,'Oxanium','Chakra Petch',system-ui,sans-serif);
  --wh-body:var(--cx-body,'Sora','Inter',system-ui,sans-serif);

  min-height:100vh;
  color:#eef0f5;
  font-family:var(--wh-body);
  background:
    radial-gradient(ellipse 850px 520px at 75% 0%,rgba(161,92,255,.13),transparent 62%),
    radial-gradient(ellipse 750px 500px at 0% 30%,rgba(255,122,26,.09),transparent 62%),
    #070810;
}


/* ==========================================================
   HERO
   ========================================================== */

.wh-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:72px 0 46px;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.wh-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 65% 85% at 15% 15%,rgba(255,122,26,.15),transparent 65%),
    radial-gradient(ellipse 55% 90% at 88% 30%,rgba(161,92,255,.18),transparent 70%);
}

.wh-hero-grid{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,#000,transparent);
}

.wh-hero-tag,
.wh-section-tag{
  color:var(--wh-orange);
  font-family:var(--wh-display);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.wh-hero-tag{
  margin-bottom:8px;
}

.wh-hero-title{
  margin:0;
  color:#fff;
  font-family:var(--wh-display);
  font-size:clamp(42px,5vw,78px);
  font-weight:800;
  line-height:.95;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.wh-accent{
  color:var(--wh-orange);
}

.wh-hero-sub{
  max-width:720px;
  margin:16px 0 0;
  color:#a8acb6;
  font-size:14px;
  line-height:1.7;
}


/* ==========================================================
   MAIN PANEL
   ========================================================== */

.wh-main{
  flex:1;
  padding:26px 0 48px;
}

.wh-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--wh-line);
  border-radius:16px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.006)
    );
}

.wh-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,122,26,.65),
      rgba(161,92,255,.65),
      transparent
    );
}

.wh-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}

.wh-section-tag{
  margin-bottom:7px;
}

.wh-section-title{
  margin:0;
  color:#fff;
  font-family:var(--wh-display);
  font-size:clamp(20px,1.8vw,30px);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
}

.wh-section-copy{
  max-width:700px;
  margin:13px 0 0;
  color:#9096a3;
  font-size:12px;
  line-height:1.6;
}

.wh-total-wrap{
  min-width:130px;
  padding:11px 14px;
  border:1px solid rgba(161,92,255,.25);
  border-radius:10px;
  text-align:right;
  background:
    linear-gradient(
      135deg,
      rgba(255,122,26,.055),
      rgba(161,92,255,.075)
    );
}

.wh-total-label{
  display:block;
  color:#8e94a0;
  font-family:var(--wh-display);
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.wh-total-value{
  display:block;
  margin-top:3px;
  color:#fff;
  font-family:var(--wh-display);
  font-size:23px;
  font-weight:800;
  line-height:1;
}


/* ==========================================================
   FILTERS
   ========================================================== */

.wh-filters{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
}

.wh-filter{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:105px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:#c7cad2;
  font-family:var(--wh-display);
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );
  cursor:pointer;
  transition:
    transform .18s ease,
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.wh-filter:hover{
  color:#fff;
  border-color:rgba(255,122,26,.4);
  transform:translateY(-2px);
}

.wh-filter.active{
  color:#fff;
  border-color:rgba(255,122,26,.5);
  background:
    linear-gradient(
      135deg,
      #ff7a1a 0%,
      #ff6a3d 45%,
      #a15cff 100%
    );
  box-shadow:
    0 5px 16px rgba(255,122,26,.22),
    0 4px 16px rgba(161,92,255,.18);
}

.wh-filter:active{
  transform:translateY(0);
}


/* ==========================================================
   MESSAGES / STATES
   ========================================================== */

.wh-message{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:11px;
  color:#959ba7;
  background:rgba(255,255,255,.02);
}

.wh-message[hidden]{
  display:none !important;
}

.wh-message > div:last-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.wh-message strong{
  color:#fff;
  font-family:var(--wh-display);
  font-size:12px;
  letter-spacing:.04em;
}

.wh-message span{
  font-size:11px;
  line-height:1.5;
}

.wh-message-icon{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1px solid rgba(255,122,26,.30);
  border-radius:10px;
  color:var(--wh-orange);
  font-family:var(--wh-display);
  font-size:9px;
  font-weight:900;
  background:rgba(255,122,26,.08);
}

.wh-message-auth{
  border-color:rgba(161,92,255,.22);
}

.wh-message-auth .wh-message-icon{
  border-color:rgba(161,92,255,.32);
  color:#c795ff;
  background:rgba(161,92,255,.10);
}

.wh-message-error{
  border-color:rgba(255,100,100,.25);
}

.wh-message-error .wh-message-icon{
  border-color:rgba(255,100,100,.35);
  color:#ff8b8b;
  background:rgba(255,100,100,.08);
}

.wh-loader{
  flex:0 0 25px;
  width:25px;
  height:25px;
  border:2px solid rgba(255,255,255,.12);
  border-top-color:var(--wh-orange);
  border-radius:50%;
  animation:wh-spin .7s linear infinite;
}

@keyframes wh-spin{
  to{transform:rotate(360deg)}
}


/* ==========================================================
   REWARD GRID
   ========================================================== */

.wh-history-grid{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(250px,1fr)
    );
  gap:16px;
  margin-top:18px;
}

.wh-history-grid:empty{
  display:none;
}

.wh-reward-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-width:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.008)
    );
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.wh-reward-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse 80% 50% at 50% 0%,
      rgba(255,122,26,.06),
      transparent 70%
    );
}

.wh-reward-card:hover{
  border-color:rgba(255,122,26,.32);
  box-shadow:0 12px 28px rgba(0,0,0,.34);
  filter:brightness(1.03);
}

.wh-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.wh-card-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.wh-draw-type{
  color:var(--wh-orange);
  font-family:var(--wh-display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.wh-draw-type--daily{
  color:#f1c75b;
}

.wh-draw-type--weekly{
  color:#ff8a3a;
}

.wh-draw-type--monthly{
  color:#61e4aa;
}

.wh-win-date{
  color:#737987;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
}


/* ==========================================================
   STATUS PILLS
   ========================================================== */

.wh-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  max-width:150px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:#cfd3db;
  font-family:var(--wh-display);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  background:rgba(255,255,255,.04);
}

.wh-status-icon{
  font-size:10px;
}

.wh-status--ready,
.wh-status--retry{
  color:#64e6a9;
  border-color:rgba(61,220,151,.30);
  background:rgba(61,220,151,.08);
}

.wh-status--pending,
.wh-status--processing{
  color:#7eb7ff;
  border-color:rgba(96,165,250,.30);
  background:rgba(96,165,250,.08);
}

.wh-status--hold{
  color:#f3ca65;
  border-color:rgba(241,199,91,.30);
  background:rgba(241,199,91,.08);
}

.wh-status--declined,
.wh-status--failed,
.wh-status--expired{
  color:#ff8181;
  border-color:rgba(255,100,100,.30);
  background:rgba(255,100,100,.08);
}

.wh-status--accepted{
  color:#c28aff;
  border-color:rgba(161,92,255,.30);
  background:rgba(161,92,255,.09);
}


/* ==========================================================
   ITEM VISUAL
   ========================================================== */

.wh-reward-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:170px;
  margin-top:14px;
  padding:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      rgba(5,8,14,.60),
      rgba(12,15,22,.32)
    );
}

.wh-reward-visual::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,.025);
  border-radius:8px;
  pointer-events:none;
}

.wh-reward-visual img{
  position:relative;
  z-index:1;
  width:auto;
  max-width:95%;
  height:auto;
  max-height:135px;
  object-fit:contain;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.36));
  transform:translateY(0);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    filter .28s ease;
}

/* CPU-friendly: item moves only while user is interacting with card. */
.wh-reward-card:hover .wh-reward-visual img,
.wh-reward-card:focus-within .wh-reward-visual img{
  transform:translateY(-5px) scale(1.02);
  filter:drop-shadow(0 11px 15px rgba(0,0,0,.42));
}

.wh-reward-info{
  min-height:64px;
  padding:13px 2px 10px;
  text-align:center;
}

.wh-reward-name{
  margin:0;
  color:#f8fafc;
  font-family:var(--wh-display);
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.wh-reward-price{
  margin-top:5px;
  color:#ffd166;
  font-family:var(--wh-display);
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
}


/* ==========================================================
   DETAILS
   ========================================================== */

.wh-reward-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.055);
}

.wh-detail{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.wh-detail:last-child{
  text-align:right;
}

.wh-detail span{
  color:#6f7582;
  font-family:var(--wh-display);
  font-size:7px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.wh-detail strong{
  overflow:hidden;
  color:#d6d9e0;
  font-family:var(--wh-display);
  font-size:9px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ==========================================================
   STATE FOOTER
   ========================================================== */

.wh-state-line{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  margin-top:11px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}

.wh-state-line-icon{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:8px;
  color:var(--wh-orange);
  font-family:var(--wh-display);
  font-size:14px;
  font-weight:900;
  background:rgba(255,122,26,.08);
}

.wh-state-line > div{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
}

.wh-state-line strong{
  color:#fff;
  font-family:var(--wh-display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.wh-state-line span:last-child{
  color:#7f8592;
  font-size:9px;
  line-height:1.35;
}

.wh-state-line--ready .wh-state-line-icon,
.wh-state-line--retry .wh-state-line-icon{
  color:#61e4aa;
  background:rgba(61,228,170,.08);
}

.wh-state-line--pending .wh-state-line-icon,
.wh-state-line--processing .wh-state-line-icon{
  color:#79b3ff;
  background:rgba(96,165,250,.08);
}

.wh-state-line--hold .wh-state-line-icon{
  color:#f1c75b;
  background:rgba(241,199,91,.08);
}

.wh-state-line--declined .wh-state-line-icon,
.wh-state-line--failed .wh-state-line-icon,
.wh-state-line--expired .wh-state-line-icon{
  color:#ff7777;
  background:rgba(255,100,100,.08);
}

.wh-state-line--accepted .wh-state-line-icon{
  color:#c28aff;
  background:rgba(161,92,255,.09);
}


/* ==========================================================
   LOAD MORE
   ========================================================== */

.wh-load-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:24px;
}

.wh-load-more{
  min-width:190px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 24px;
  border:0;
  border-radius:8px;
  color:#fff;
  font-family:var(--wh-display);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:
    linear-gradient(
      135deg,
      #ff7a1a 0%,
      #ff6a3d 45%,
      #a15cff 100%
    );
  box-shadow:0 4px 14px rgba(161,92,255,.28);
  cursor:pointer;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.wh-load-more:hover:not(:disabled){
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 8px 20px rgba(255,122,26,.30);
}

.wh-load-more:disabled{
  color:#d5d8df;
  background:
    linear-gradient(
      180deg,
      #5d626c,
      #444850
    );
  box-shadow:none;
  cursor:not-allowed;
  filter:grayscale(1);
}

.wh-load-more[hidden]{
  display:none !important;
}

.wh-loaded-summary{
  margin-top:11px;
  color:#646b78;
  font-family:var(--wh-display);
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
  text-align:center;
  text-transform:uppercase;
}

.wh-loaded-summary[hidden]{
  display:none !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){
  .wh-hero{
    padding-top:92px;
  }

  .wh-history-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}

@media (max-width:650px){
  .wh-section-head{
    flex-direction:column;
  }

  .wh-total-wrap{
    width:100%;
    text-align:left;
  }

  .wh-filters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .wh-filter{
    width:100%;
    min-width:0;
  }

  .wh-filter:first-child{
    grid-column:1 / -1;
  }

  .wh-history-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:420px){
  .wh-hero-title{
    font-size:38px;
  }

  .wh-filters{
    grid-template-columns:1fr;
  }

  .wh-filter:first-child{
    grid-column:auto;
  }

  .wh-reward-details{
    grid-template-columns:1fr;
  }

  .wh-detail:last-child{
    text-align:left;
  }
}

@media (prefers-reduced-motion:reduce){
  .wh-filter,
  .wh-load-more,
  .wh-reward-card,
  .wh-reward-visual img{
    transition:none;
  }

  .wh-loader{
    animation:none;
  }
}


/* ==========================================================
   INDEX-MATCHED REWARD STATES
   Mirrors the reward-state visual language used on index.html.
   ========================================================== */

/* Smaller inline TOTAL WINS badge: "TOTAL WINS  X" */
.wh-total-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  width:auto;
  padding:7px 10px;
  border:1px solid rgba(161,92,255,.22);
  border-radius:8px;
  text-align:left;
  background:rgba(255,255,255,.025);
}

.wh-total-label{
  display:inline;
  margin:0;
  color:#8e94a0;
  font-family:var(--wh-display);
  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
}

.wh-total-value{
  display:inline;
  margin:0;
  color:#fff;
  font-family:var(--wh-display);
  font-size:13px;
  font-weight:900;
  line-height:1;
}


/* ── Top status pills: same colors as index ── */

.wh-status{
  flex:0 0 auto;
  max-width:50%;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  font-family:var(--wh-display);
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
  color:#d7dae2;
  background:rgba(255,255,255,.04);
}

.wh-status-icon{
  font-size:10px;
  font-weight:900;
}

/* Ready */
.wh-status--ready{
  color:#ffbf72;
  border-color:rgba(255,122,26,.24);
  background:rgba(255,122,26,.08);
}

/* Pending / processing */
.wh-status--pending,
.wh-status--processing{
  color:#7dbbff;
  border-color:rgba(59,130,246,.24);
  background:rgba(59,130,246,.08);
}

/* Accepted */
.wh-status--accepted{
  color:#79ee85;
  border-color:rgba(38,226,31,.24);
  background:rgba(38,226,31,.08);
}

/* Expired */
.wh-status--expired{
  color:#ff8b8b;
  border-color:rgba(239,68,68,.24);
  background:rgba(239,68,68,.08);
}

/* Retry */
.wh-status--retry{
  color:#ffc46b;
  border-color:rgba(245,158,11,.24);
  background:rgba(245,158,11,.08);
}

/* Hold */
.wh-status--hold{
  color:#d7b8ff;
  border-color:rgba(161,92,255,.28);
  background:rgba(161,92,255,.10);
}

/* Declined / failed */
.wh-status--declined,
.wh-status--failed{
  color:#ff8b8b;
  border-color:rgba(239,68,68,.24);
  background:rgba(239,68,68,.08);
}


/* ── Bottom state panel: same structure/feel as index ── */

.wh-state-line{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:48px;
  margin-top:14px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.wh-state-line-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  font-size:15px;
  font-weight:900;
  background:none;
}

.wh-state-line > div{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:0;
  text-align:left;
}

.wh-state-line strong{
  font-family:var(--wh-display);
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wh-state-line span:last-child{
  margin-top:2px;
  color:#9ca3af;
  font-size:9px;
  line-height:1.25;
}


/* Accepted — GREEN */
.wh-state-line--accepted{
  border-color:rgba(38,226,31,.20);
  background:rgba(38,226,31,.055);
}

.wh-state-line--accepted .wh-state-line-icon{
  color:#071007;
  background:#67f36d;
  box-shadow:0 0 12px rgba(38,226,31,.22);
}

.wh-state-line--accepted strong{
  color:#79ee85;
}


/* Expired — RED */
.wh-state-line--expired{
  border-color:rgba(239,68,68,.20);
  background:rgba(239,68,68,.055);
}

.wh-state-line--expired .wh-state-line-icon{
  color:#fff;
  background:#dc3f3f;
}

.wh-state-line--expired strong{
  color:#ff8b8b;
}


/* Pending / Processing — BLUE */
.wh-state-line--pending,
.wh-state-line--processing{
  border-color:rgba(59,130,246,.20);
  background:rgba(59,130,246,.055);
}

.wh-state-line--pending .wh-state-line-icon,
.wh-state-line--processing .wh-state-line-icon{
  color:#07111f;
  background:#65aefb;
}

.wh-state-line--pending strong,
.wh-state-line--processing strong{
  color:#86c3ff;
}


/* On Hold — PURPLE */
.wh-state-line--hold{
  border-color:rgba(161,92,255,.24);
  background:rgba(161,92,255,.07);
}

.wh-state-line--hold .wh-state-line-icon{
  color:#fff;
  background:#7a3fd6;
  box-shadow:0 0 12px rgba(161,92,255,.24);
}

.wh-state-line--hold strong{
  color:#d7b8ff;
}


/* Declined / Failed — RED */
.wh-state-line--declined,
.wh-state-line--failed{
  border-color:rgba(239,68,68,.20);
  background:rgba(239,68,68,.055);
}

.wh-state-line--declined .wh-state-line-icon,
.wh-state-line--failed .wh-state-line-icon{
  color:#fff;
  background:#dc3f3f;
}

.wh-state-line--declined strong,
.wh-state-line--failed strong{
  color:#ff8b8b;
}


/* Ready — orange/purple action-style treatment */
.wh-state-line--ready{
  border-color:rgba(255,122,26,.34);
  background:
    linear-gradient(
      135deg,
      rgba(255,122,26,.16),
      rgba(197,107,255,.10)
    );
  box-shadow:
    inset 0 0 18px rgba(255,122,26,.025),
    0 7px 18px rgba(0,0,0,.16);
}

.wh-state-line--ready .wh-state-line-icon{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #ff7a1a,
      #c56bff
    );
  box-shadow:
    0 0 13px rgba(255,122,26,.24),
    0 0 12px rgba(161,92,255,.18);
}

.wh-state-line--ready strong{
  color:#ffb56f;
}


/* Retry — amber action-style treatment */
.wh-state-line--retry{
  border-color:rgba(245,158,11,.30);
  background:
    linear-gradient(
      135deg,
      rgba(245,158,11,.15),
      rgba(255,122,26,.08)
    );
}

.wh-state-line--retry .wh-state-line-icon{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #ff7a1a
    );
  box-shadow:0 0 13px rgba(245,158,11,.24);
}

.wh-state-line--retry strong{
  color:#ffc46b;
}


/* Match index card tinting for important final states */
.wh-reward-card--accepted{
  border-color:rgba(38,226,31,.16);
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(38,226,31,.075),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
}

.wh-reward-card--expired,
.wh-reward-card--declined,
.wh-reward-card--failed{
  border-color:rgba(239,68,68,.14);
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(239,68,68,.055),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.028),
      rgba(255,255,255,.009)
    );
}

.wh-reward-card--hold{
  border-color:rgba(161,92,255,.18);
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(161,92,255,.085),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
}


@media (max-width:650px){
  .wh-total-wrap{
    width:auto;
    align-self:flex-start;
    text-align:left;
  }
}


/* ==========================================================
   READY / RETRY LINK TO HOME CLAIM AREA
   Keeps the index-matched reward-state styling above.
   ========================================================== */

.wh-state-line--action{
  position:relative;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.wh-state-line--action > div{
  flex:1;
}

.wh-state-line-arrow{
  flex:0 0 auto;
  margin-left:auto !important;
  color:#fff !important;
  font-family:var(--wh-display);
  font-size:21px !important;
  font-weight:900;
  line-height:1 !important;
  opacity:.72;
  transition:
    transform .16s ease,
    opacity .16s ease;
}

.wh-state-line--action:hover,
.wh-state-line--action:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.08);
  outline:none;
}

.wh-state-line--action:hover .wh-state-line-arrow,
.wh-state-line--action:focus-visible .wh-state-line-arrow{
  transform:translateX(3px);
  opacity:1;
}

.wh-state-line--ready.wh-state-line--action:hover,
.wh-state-line--ready.wh-state-line--action:focus-visible{
  border-color:rgba(255,122,26,.58);
  background:
    linear-gradient(
      135deg,
      rgba(255,122,26,.24),
      rgba(197,107,255,.16)
    );
  box-shadow:
    0 10px 22px rgba(255,122,26,.12),
    0 9px 22px rgba(161,92,255,.10);
}

.wh-state-line--retry.wh-state-line--action:hover,
.wh-state-line--retry.wh-state-line--action:focus-visible{
  border-color:rgba(245,158,11,.48);
  background:
    linear-gradient(
      135deg,
      rgba(245,158,11,.22),
      rgba(255,122,26,.13)
    );
  box-shadow:
    0 9px 20px rgba(245,158,11,.10);
}


/* ==========================================================
   COMPACT ONE-LINE ITEM NAMES
   Wear suffixes are shortened in win-history.html:
   FN / MW / FT / WW / BS.
   ========================================================== */

.wh-reward-name{
  display:block;
  width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.3;
}

.wh-reward-info{
  min-width:0;
}

/* ==========================================================
   MOBILE COMPACT WIN HISTORY
   ========================================================== */

.wh-history-summary-row{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

@media (max-width:650px){
  .wh-section-head{
    flex-direction:row;
  }

  .wh-history-summary-row{
    justify-content:flex-start;
    margin-top:10px;
  }

  .wh-total-wrap{
    padding:5px 8px;
    gap:6px;
  }

  .wh-total-label{
    font-size:7px;
  }

  .wh-total-value{
    font-size:12px;
  }

  .wh-filters{
    margin-top:16px;
    padding-top:14px;
  }

  /* Keep two reward cards per row on phones. */
  .wh-history-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
  }

  .wh-reward-card{
    padding:8px;
    border-radius:10px;
  }

  .wh-card-top{
    gap:5px;
  }

  .wh-card-meta{
    gap:2px;
  }

  .wh-draw-type{
    font-size:7px;
    letter-spacing:.08em;
  }

  .wh-win-date{
    font-size:7px;
  }

  .wh-status{
    max-width:56%;
    padding:3px 5px;
    gap:3px;
    font-size:6px;
    letter-spacing:.04em;
  }

  .wh-status-icon{
    font-size:8px;
  }

  .wh-reward-visual{
    height:92px;
    margin-top:8px;
    padding:5px;
    border-radius:8px;
  }

  .wh-reward-visual::before{
    inset:4px;
  }

  .wh-reward-visual img{
    max-width:94%;
    max-height:72px;
  }

  .wh-reward-info{
    min-height:42px;
    padding:7px 1px 5px;
  }

  .wh-reward-name{
    font-size:9px;
    line-height:1.15;
  }

  .wh-reward-price{
    margin-top:3px;
    font-size:10px;
  }

  .wh-reward-details{
    gap:4px;
    padding-top:6px;
    grid-template-columns:1fr 1fr;
  }

  .wh-detail{
    gap:1px;
  }

  .wh-detail:last-child{
    text-align:right;
  }

  .wh-detail span{
    font-size:5.5px;
    letter-spacing:.06em;
  }

  .wh-detail strong{
    font-size:7px;
  }

  .wh-state-line{
    gap:5px;
    min-height:38px;
    margin-top:7px;
    padding:6px;
    border-radius:8px;
  }

  .wh-state-line-icon{
    width:21px;
    height:21px;
    flex-basis:21px;
    font-size:10px;
  }

  .wh-state-line strong{
    font-size:7px;
    letter-spacing:.04em;
  }

  .wh-state-line span:last-child{
    margin-top:1px;
    font-size:6.5px;
    line-height:1.15;
  }

  .wh-state-line-arrow{
    font-size:15px !important;
  }
}

@media (max-width:420px){
  .wh-history-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .wh-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .wh-filter:first-child{
    grid-column:1 / -1;
  }

  .wh-reward-card{
    padding:7px;
  }

  .wh-reward-visual{
    height:84px;
  }

  .wh-reward-visual img{
    max-height:65px;
  }

  .wh-reward-name{
    font-size:8.5px;
  }

  .wh-reward-details{
    grid-template-columns:1fr 1fr;
  }

  .wh-detail:last-child{
    text-align:right;
  }
}

/* Mobile-only: center TOTAL WINS summary */
@media (max-width:650px){
  .wh-history-summary-row{
    justify-content:center;
  }
}