/* ===========================================================
   WALLET — player side
   Loaded after ducky.css, so it inherits the same palette.
   =========================================================== */
.wbody{padding-top:66px}
.wmain{max-width:640px;margin:0 auto;padding:26px 16px 60px}

.wload{text-align:center;padding:70px 0;color:var(--ink-mute)}
.wspin{
  width:34px;height:34px;margin:0 auto 16px;border-radius:50%;
  border:3px solid var(--ocean-600);border-top-color:var(--teal);
  animation:wspin .8s linear infinite;
}
@keyframes wspin{to{transform:rotate(360deg)}}

.wcard{
  background:var(--ocean-700);border:1px solid var(--ocean-600);
  border-radius:var(--radius);padding:22px 20px;margin-bottom:16px;
}
.wcard h2{margin:0 0 6px;font-size:19px;font-weight:700}
.wnote{color:var(--ink-mute);font-size:13.5px;margin:0 0 16px;line-height:1.6}
.wsmall{color:var(--ink-mute);font-size:12px;text-align:center;margin:14px 0 0}
.wsmall a{color:var(--teal)}
.wempty{text-align:center;padding:40px 20px}
.wempty p{margin:0 0 6px}

/* ---- Sign in ---- */
.wauth{text-align:center;max-width:400px;margin:20px auto}
.wauth-logo{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;display:block}
.wauth h1{font-size:23px;font-weight:800;margin:0 0 8px}
.wauth p{color:var(--ink-mute);font-size:14.5px;margin:0 0 20px}
.wauth .wfield{text-align:left}

/* form primitives moved to ducky.css - shared with the admin panel */

/* ---- Balance header ---- */
.wtop{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.wbal-card{
  flex:1;background:linear-gradient(135deg,rgba(45,212,191,.16),rgba(255,107,74,.12));
  border:1px solid var(--ocean-600);border-radius:var(--radius);padding:20px;
}
.wbal-lab{display:block;font-size:12.5px;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.wbal{display:block;font-size:34px;font-weight:800;line-height:1.2;margin:4px 0}
.wbal-who{display:block;font-size:13px;color:var(--ink-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wout{
  background:var(--ocean-700);border:1px solid var(--ocean-600);border-radius:11px;
  padding:9px 14px;font-size:13px;color:var(--ink-mute);flex:0 0 auto;
}
.wout:hover{border-color:var(--coral);color:var(--coral)}

/* The game a top-up belongs to, carried over from a game card. */
.wgame{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.34);
  border-radius:12px;padding:11px 15px;margin-bottom:16px;font-size:14px;
}
.wgame b{color:var(--gold)}
.wgame button{font-size:13px;color:var(--teal);font-weight:600;text-decoration:underline}

/* ---- Tabs ---- */
.wtabs{display:flex;gap:7px;margin-bottom:16px}
.wtabs button{
  flex:1;padding:11px 0;border-radius:11px;background:var(--ocean-700);
  border:1px solid var(--ocean-600);font-size:14px;font-weight:600;color:var(--ink-mute);
}
.wtabs button.on{background:var(--sea-grad);color:#042224;border-color:transparent}

/* ---- Payment methods ---- */
.wmethods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wmeth{
  padding:12px 10px;border-radius:11px;background:var(--ocean-600);
  border:1.5px solid transparent;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:8px;justify-content:center;
}
.wmeth.on{border-color:var(--teal);background:rgba(45,212,191,.14);color:var(--teal)}
.wfile{
  display:block;padding:13px;border-radius:11px;background:var(--ocean-600);
  border:1.5px dashed var(--ocean-600);text-align:center;cursor:pointer;
  font-size:14px;color:var(--ink-mute);
}
.wfile:hover{border-color:var(--teal);color:var(--teal)}
@media(min-width:520px){.wmethods{grid-template-columns:repeat(4,1fr)}}

/* ---- History rows ---- */
.wlist{display:flex;flex-direction:column;gap:2px}
.wrow{
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--ocean-600);
}
.wrow:last-child{border-bottom:0}
.wrow-ico{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;font-weight:800;flex:0 0 auto;
}
.wrow-ico.in{background:rgba(34,197,94,.16);color:var(--palm)}
.wrow-ico.out{background:rgba(255,107,74,.16);color:var(--coral)}
.wrow-mid{flex:1;min-width:0}
.wrow-mid b{display:block;font-size:14.5px;font-weight:700}
.wrow-mid small{display:block;font-size:12.5px;color:var(--ink-mute)}
.wrow-note{color:var(--gold) !important;margin-top:2px}
.wrow-game{color:var(--teal)}
.wrow-end{text-align:right;flex:0 0 auto}
.wrow-end b{display:block;font-size:15px;font-weight:800}
.wrow-end b.in{color:var(--palm)}
.wrow-end b.out{color:var(--coral)}

.wchip{
  display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;
  padding:2px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;
}
.wchip-pending{background:rgba(251,191,36,.18);color:var(--gold)}
.wchip-approved{background:rgba(34,197,94,.18);color:var(--palm)}
.wchip-rejected{background:rgba(255,107,74,.18);color:var(--coral)}


/* ── Google sign-in ─────────────────────────────────────────────────────
   Google's brand rules ask for their mark on white with readable grey
   text, so this button deliberately ignores the tropical palette. A
   sign-in button that looks invented is a sign-in button people distrust. */
.wgoogle{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px 16px; margin:2px 0 4px;
  background:#fff; color:#3c4043;
  border:1px solid #dadce0; border-radius:12px;
  font:600 15px/1 'Outfit',system-ui,sans-serif; cursor:pointer;
  transition:background .15s, box-shadow .15s, border-color .15s;
}
.wgoogle:hover{ background:#f8f9fa; box-shadow:0 1px 3px rgba(60,64,67,.24); }
.wgoogle:active{ background:#f1f3f4; }
.wgoogle:disabled{ opacity:.6; cursor:default; box-shadow:none; }
.wgoogle svg{ flex:0 0 18px; }
.wgoogle.busy span::after{ content:'…'; }

/* "or use your email" with a rule either side */
.wor{
  display:flex; align-items:center; gap:12px;
  margin:14px 0 10px; color:var(--muted,#6b7280); font-size:13px;
}
.wor::before, .wor::after{
  content:''; flex:1; height:1px; background:rgba(0,0,0,.12);
}

.wforgot{
  display:block; width:100%; margin-top:10px; padding:6px;
  background:none; border:0; cursor:pointer;
  color:var(--muted,#6b7280); font:500 13px/1 'Outfit',system-ui,sans-serif;
  text-decoration:underline; text-underline-offset:3px;
}
.wforgot:hover{ color:var(--ink,#111); }


/* ── "Send your payment here" panel ────────────────────────────────────
   Deliberately loud. This is the one thing on the page a player must not
   mistype, so it gets a tinted box, a monospace tag and a copy button
   rather than being another line of body text. */
.wpayto{
  margin:12px 0 4px; padding:14px;
  background:rgba(16,185,129,.07);
  border:1px solid rgba(16,185,129,.28);
  border-radius:14px;
}
.wpayto-none{
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.30);
  font-size:13.5px; line-height:1.55; color:var(--muted,#6b7280);
}
.wpayto-h{
  font:700 12px/1 'Outfit',system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  color:#047857; margin-bottom:9px;
}
.wtag{ display:flex; align-items:stretch; gap:8px; }
.wtag code{
  flex:1; min-width:0; padding:11px 13px;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:10px;
  font:700 16px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#0f172a; word-break:break-all;
}
.wtag-btn{
  flex:0 0 auto; padding:0 15px;
  background:#047857; color:#fff;
  border:0; border-radius:10px; cursor:pointer;
  font:600 14px/1 'Outfit',system-ui,sans-serif;
  transition:background .15s;
}
.wtag-btn:hover{ background:#065f46; }
.wtag-btn.ok{ background:#0f766e; }
.wpayto-note{
  margin:10px 0 0; font-size:13.5px; line-height:1.55; color:#334155;
}
.wqr{
  margin-top:12px; display:flex; flex-direction:column;
  align-items:flex-start; gap:9px;
}
.wqr img{
  max-width:200px; width:100%; height:auto;
  border:1px solid rgba(0,0,0,.12); border-radius:12px; background:#fff;
}
@media (max-width:420px){
  .wtag{ flex-direction:column; }
  .wtag-btn{ padding:11px 15px; }
}


/* ── My Games ──────────────────────────────────────────────────────── */
.wgame-card{
  border:1px solid rgba(0,0,0,.10); border-radius:14px;
  padding:14px; margin-bottom:12px; background:#fff;
}
.wgame-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font:700 16px/1.2 'Outfit',system-ui,sans-serif; color:#0f172a;
  margin-bottom:10px;
}
.wgame-h span{ font:500 12px/1 'Outfit',system-ui,sans-serif; color:#94a3b8; }
.wgame-kv{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.wgame-kv label{
  flex:0 0 74px; font:600 12px/1 'Outfit',system-ui,sans-serif;
  color:#64748b; text-transform:uppercase; letter-spacing:.04em;
}
.wgame-kv code{
  flex:1; min-width:0; padding:8px 10px;
  background:#f8fafc; border:1px solid rgba(0,0,0,.09); border-radius:8px;
  font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#0f172a; word-break:break-all;
}
.wgame-kv .wtag-btn{ padding:0 12px; height:34px; font-size:13px; }
.wgame-act{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.wempty-sm{
  padding:18px 4px; text-align:center; line-height:1.6;
  color:var(--muted,#6b7280); font-size:14px;
}
@media (max-width:420px){
  .wgame-kv{ flex-wrap:wrap; }
  .wgame-kv label{ flex:0 0 100%; }
}


/* ── Guest way out ─────────────────────────────────────────────────── */
.wguest{
  display:block; width:100%; margin-top:6px; padding:8px;
  background:none; border:0; cursor:pointer;
  color:var(--muted,#6b7280); font:500 13px/1.4 'Outfit',system-ui,sans-serif;
}
.wguest:hover{ color:var(--ink,#111); text-decoration:underline; }

/* ── VIP ───────────────────────────────────────────────────────────── */
.wvip{
  padding:14px; margin-bottom:16px; border-radius:14px;
  background:linear-gradient(140deg,rgba(251,191,36,.14),rgba(249,115,22,.09));
  border:1px solid rgba(249,115,22,.26);
}
.wvip-h{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:9px;
}
.wvip-h b{ font:800 18px/1 'Outfit',system-ui,sans-serif; color:#9a3412; }
.wvip-h span{ font-size:12.5px; font-weight:600; color:#b45309; }
.wvip-bar{
  height:7px; border-radius:99px; overflow:hidden;
  background:rgba(120,53,15,.14);
}
.wvip-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#f59e0b,#f97316);
  transition:width .4s ease;
}
.wvip-foot{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-top:8px; font-size:12.5px; color:#78716c;
}
.wvip-foot span{ font-weight:700; color:#57534e; }

/* ── Profile ───────────────────────────────────────────────────────── */
.wpf{ display:flex; gap:16px; align-items:flex-start; margin-bottom:6px; }
.wpf-av{
  position:relative; flex:0 0 76px; width:76px; height:76px; cursor:pointer;
  border-radius:50%; overflow:hidden; background:#f1f5f9;
  border:1px solid rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
}
.wpf-av img{ width:100%; height:100%; object-fit:cover; }
.wpf-av > span{
  font:800 30px/1 'Outfit',system-ui,sans-serif; color:#64748b;
}
.wpf-av i{
  position:absolute; right:0; bottom:0;
  width:26px; height:26px; border-radius:50%;
  background:#0f172a; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-style:normal;
}
.wpf-side{ flex:1; min-width:0; }
.wpf-side .wlab{ margin-top:0; }
@media (max-width:420px){
  .wpf{ flex-direction:column; align-items:center; text-align:center; }
  .wpf-side{ width:100%; }
}

/* ── The account that has just been handed over ───────────────────────
   An ID claimed from stock brings the player straight to this page. On a
   list of several accounts the new one has to announce itself, or the
   landing reads as "nothing happened". */
.wgame-card.wgame-new{
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.14);
  animation:wgnew 1.2s ease-out;
}
.wgame-flag{
  display:inline-block; margin-bottom:9px; padding:4px 10px; border-radius:999px;
  background:#dcfce7; color:#166534;
  font:800 11.5px/1 'Outfit',system-ui,sans-serif; letter-spacing:.02em;
}
@keyframes wgnew{
  0%{ box-shadow:0 0 0 0 rgba(22,163,74,.45) }
  100%{ box-shadow:0 0 0 3px rgba(22,163,74,.14) }
}
@media (prefers-reduced-motion:reduce){ .wgame-card.wgame-new{ animation:none } }