/* Additions for the live, server-driven build.
   Kept separate from styles.css so the original design file stays intact. */

/* ---------------------------------------------------------------- auth */
.auth-form{display:grid;gap:12px;text-align:left;margin-top:16px}
.auth-form label span{display:block;font-size:11px;letter-spacing:.6px;color:var(--muted);margin-bottom:5px}
.auth-form input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:11px 13px;border-radius:12px}
.auth-form input:focus{outline:0;border-color:var(--cyan)}
.auth-swap{margin-top:14px;font-size:12px;color:var(--muted)}
.auth-swap .link-btn{font-size:12px}
#authButton{margin-left:6px}

/* ---------------------------------------------------------------- board play affordances */
.point.source .checker:last-of-type{box-shadow:0 0 0 2px var(--cyan),0 2px 4px rgba(0,0,0,.4)}
.point.legal-target::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(20px,2.6vw,30px);height:clamp(20px,2.6vw,30px);border-radius:50%;
  border:2px dashed var(--cyan);background:rgba(88,214,194,.14);z-index:6;
  animation:novaPulse 1.4s ease-in-out infinite;pointer-events:none;
}
@keyframes novaPulse{0%,100%{opacity:.55}50%{opacity:1}}
.checker.selected{outline:3px solid var(--gold);transform:translateY(-4px);z-index:8}
.point{cursor:pointer}
.stack-count{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:800;font-style:normal;color:#f4e3c2;
  background:rgba(10,18,24,.85);border-radius:9px;padding:0 6px;z-index:9}

.center-bar{display:flex;flex-direction:column;justify-content:space-between;padding:14px 0}
.bar-stack{display:flex;flex-direction:column;align-items:center;gap:-2px;position:relative;z-index:6}
.bar-stack.bottom{flex-direction:column-reverse}
.bar-stack .checker{width:26px;height:26px;cursor:pointer}

.bearoff span.filled{background:linear-gradient(180deg,#f0e2c6,#c8ae82);border-color:rgba(0,0,0,.25)}
.bearoff span.filled.theirs{background:linear-gradient(180deg,#41525d,#141f26)}
.bearoff.legal-target{outline:2px dashed var(--cyan);outline-offset:2px;border-radius:6px}
.bearoff.target{cursor:pointer}

.cube.owned-by-me{box-shadow:0 0 0 2px var(--cyan),0 6px 12px rgba(0,0,0,.35)}
.cube.owned-by-them{box-shadow:0 0 0 2px var(--red),0 6px 12px rgba(0,0,0,.35)}

.die.spent{opacity:.35;filter:grayscale(.7)}
.roll-btn:disabled,.match-actions button:disabled{opacity:.4;cursor:not-allowed}
.match-actions.spectating{opacity:.5;pointer-events:none}

/* clocks */
#myClock.low,#oppClock.low{color:var(--red);animation:novaPulse 1s ease-in-out infinite}

/* ---------------------------------------------------------------- misc */
.toast.error{border-color:var(--red)}
.toast.error::before{content:"⚠ ";color:var(--red)}
.muted{color:var(--muted)}
.mono{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace}
.product-preview img{object-fit:contain}
.btn.tiny{padding:5px 11px;font-size:12px;border-radius:9px}
#moveList{max-height:100%;overflow:auto}
.answer-grid button.selected{border-color:var(--cyan);color:var(--cyan)}

/* Screens fetch their data on open; show something sensible while empty. */
.leader-row:empty,.friend-grid:empty{display:none}

/* ---------------------------------------------------------------- USDT wallet */
#walletBtn { margin-left: 8px; }
.pay-tabs { display: flex; gap: 8px; margin: 16px 0 14px; }
.pay-tabs button {
  flex: 1; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; font-weight: 600;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
}
.pay-tabs button.active { border-color: var(--gold); color: var(--gold); }

.chain-picker { display: flex; gap: 8px; margin-bottom: 14px; }
.chain-picker button {
  flex: 1; padding: 11px 10px; border-radius: 12px; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
}
.chain-picker button b { display: block; font-size: 13px; }
.chain-picker button small { color: var(--muted); font-size: 10.5px; }
.chain-picker button.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.deposit-address {
  display: flex; align-items: center; gap: 10px; margin: 12px 0;
  background: #050d13; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.deposit-address code {
  flex: 1; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px;
  word-break: break-all; color: var(--text); line-height: 1.5;
}
.qr-holder { display: grid; place-items: center; margin: 14px 0; }
.qr-holder canvas, .qr-holder svg {
  background: #fff; padding: 10px; border-radius: 12px; width: 176px; height: 176px;
}
.pay-warning {
  background: rgba(240, 120, 120, .1); border: 1px solid rgba(240, 120, 120, .35);
  color: #ffd7d7; border-radius: 12px; padding: 11px 13px; font-size: 12px; line-height: 1.6;
  margin: 12px 0; text-align: left;
}
.pay-note { font-size: 11.5px; color: var(--muted); line-height: 1.65; text-align: left; }
.pay-rows { text-align: left; margin-top: 8px; max-height: 260px; overflow: auto; }
.pay-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid rgba(30, 52, 66, .7); font-size: 12.5px;
}
.pay-row b { flex: 1; }
.pay-row .tag { font-size: 10px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); }
.pay-row .tag.ok { color: var(--green); border-color: rgba(98, 209, 143, .4); }
.pay-row .tag.warn { color: var(--gold); border-color: rgba(231, 187, 87, .4); }
.pay-row .tag.bad { color: var(--red); border-color: rgba(240, 120, 120, .4); }
.pay-summary {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 12px 0; text-align: left; font-size: 12.5px;
}
.pay-summary div { display: flex; justify-content: space-between; padding: 3px 0; }
.pay-summary div b { color: var(--text); }
.pay-summary div span { color: var(--muted); }
.pay-summary .net { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.pay-summary .net b { color: var(--gold); font-size: 14px; }