/* Bet Pool — Frontend Styles v3.1.0 */

/* ── CSS Variables (overridden inline by appearance settings) ── */
:root{
  --bp-bg:       #0d0d0f;
  --bp-surface:  #17171a;
  --bp-surface2: #1e1e22;
  --bp-border:   rgba(255,255,255,.08);
  --bp-border2:  rgba(255,255,255,.14);
  --bp-text:     #f0f0ec;
  --bp-muted:    #888884;
  --bp-accent:   #c8ff00;
  --bp-win:      #4ade80;
  --bp-lose:     #f87171;
  --bp-radius:   14px;
  --bp-radius-sm:8px;
}

/* ── Base ── */
.bet-pool-app{
  font-family:'DM Mono',ui-monospace,'Cascadia Code','Fira Mono',monospace,sans-serif;
  background:var(--bp-bg);
  color:var(--bp-text);
  max-width:520px;
  margin:0 auto;
  padding:.75rem .75rem 5rem;
  min-height:400px;
  -webkit-font-smoothing:antialiased;
}

/* ── Typography ── */
.bp-hero{
  font-weight:800;
  font-size:clamp(28px,8vw,48px);
  line-height:1.1;
  margin:0;
}
.bp-display{
  font-weight:800;
  font-size:clamp(20px,5vw,32px);
  line-height:1.2;
  margin:0;
}
.bp-accent{color:var(--bp-accent)}
.bp-muted{color:var(--bp-muted)}
.bp-win{color:var(--bp-win)}
.bp-lose{color:var(--bp-lose)}

.bp-label{
  font-size:10px;
  font-weight:600;
  color:var(--bp-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
  display:block;
}
.bp-required{color:var(--bp-lose);font-size:12px;}

.bp-section-heading{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--bp-muted);
  border-bottom:1px solid var(--bp-border);
  padding-bottom:8px;
  margin:0 0 16px;
}

.bp-field-hint{
  font-size:11px;
  color:var(--bp-muted);
  margin-top:4px;
  line-height:1.4;
}

.bp-row-name{
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bp-link{
  font-size:12px;
  color:var(--bp-accent);
  text-decoration:none;
  font-weight:600;
}
.bp-link:hover{opacity:.8}

/* ── Messages ── */
.bp-msg{
  padding:12px 16px;
  border-radius:var(--bp-radius-sm);
  font-size:14px;
  font-weight:600;
  margin-bottom:10px;
  border-width:1px;
  border-style:solid;
}
.bp-msg-ok{
  background:rgba(74,222,128,.1);
  border-color:var(--bp-win);
  color:var(--bp-win);
}
.bp-msg-err{
  background:rgba(248,113,113,.1);
  border-color:var(--bp-lose);
  color:var(--bp-lose);
}

/* ── Top bar (back button + right slot) ── */
.bp-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  padding:2px 0;
}
.bp-topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ── Back button ── */
.bp-btn-back{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  font-weight:600;
  color:var(--bp-muted);
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-sm);
  background:var(--bp-surface);
  transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.bp-btn-back:hover{
  color:var(--bp-text);
  border-color:var(--bp-border2);
}

/* ── Cards ── */
.bp-card{
  background:var(--bp-surface);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius);
  padding:1.25rem;
  margin-bottom:10px;
}
.bp-hero-card{padding:1.5rem;}

.bp-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.bp-cta{cursor:pointer;transition:border-color .2s,transform .15s;}
.bp-cta:hover{border-color:var(--bp-accent);transform:translateY(-2px);}

/* ── Nav tiles (home screen CTA cards) ── */
.bp-nav-tile{
  display:flex;
  align-items:center;
  gap:14px;
}
.bp-nav-icon{font-size:1.6rem;flex-shrink:0;line-height:1;}
.bp-nav-body{flex:1;min-width:0;}
.bp-nav-title{font-weight:700;font-size:15px;color:var(--bp-text);}
.bp-nav-sub{font-size:12px;color:var(--bp-muted);margin-top:2px;}
.bp-nav-arrow{
  font-size:1.5rem;
  color:var(--bp-muted);
  flex-shrink:0;
  transition:transform .15s;
}
.bp-nav-tile:hover .bp-nav-arrow{transform:translateX(3px);}

/* ── Empty state ── */
.bp-empty-state{text-align:center;padding:2rem 1rem;}
.bp-empty-icon{font-size:2.5rem;margin-bottom:10px;}

/* ── Buttons ── */
.bp-btn-primary{
  width:100%;
  padding:14px;
  border-radius:var(--bp-radius-sm);
  border:none;
  background:var(--bp-accent);
  color:#0d0d0f;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  margin-top:10px;
  transition:transform .15s,opacity .15s;
  font-family:inherit;
}
.bp-btn-primary:hover{transform:translateY(-1px);opacity:.9}
.bp-btn-primary:active{transform:scale(.98)}

.bp-btn-secondary{
  width:100%;
  padding:12px;
  border-radius:var(--bp-radius-sm);
  border:1px solid var(--bp-border2);
  background:transparent;
  color:var(--bp-text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  margin-top:8px;
  transition:border-color .15s,background .15s;
  text-decoration:none;
  display:block;
  text-align:center;
  font-family:inherit;
}
.bp-btn-secondary:hover{border-color:rgba(255,255,255,.3);background:var(--bp-surface2)}

.bp-btn-sm{
  padding:5px 10px;
  border-radius:6px;
  border:1px solid var(--bp-border2);
  background:transparent;
  color:var(--bp-text);
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
  transition:background .15s;
}
.bp-btn-sm:hover{background:var(--bp-surface2)}

.bp-btn-danger{
  border-color:rgba(248,113,113,.3);
  color:var(--bp-lose);
}
.bp-btn-danger:hover{
  background:rgba(248,113,113,.1);
  border-color:var(--bp-lose);
}

/* ── Inputs ── */
.bet-pool-app input[type=text],
.bet-pool-app input[type=number],
.bet-pool-app input[type=password],
.bet-pool-app input[type=datetime-local],
.bet-pool-app select,
.bet-pool-app textarea{
  background:var(--bp-surface2);
  border:1px solid var(--bp-border2);
  border-radius:var(--bp-radius-sm);
  padding:11px 14px;
  font-size:14px;
  color:var(--bp-text);
  outline:none;
  width:100%;
  box-sizing:border-box;
  font-family:inherit;
  transition:border-color .15s;
  -webkit-appearance:none;
}
.bet-pool-app input:focus,
.bet-pool-app select:focus{border-color:var(--bp-accent)}
.bet-pool-app input::placeholder{color:var(--bp-muted)}
.bet-pool-app select option{background:#1e1e22}

/* PIN input */
.bp-pin-inp{
  width:100%;
  padding:16px;
  font-size:32px;
  letter-spacing:14px;
  text-align:center;
  border-radius:var(--bp-radius-sm);
  border:1px solid var(--bp-border2);
  background:var(--bp-surface2);
  color:var(--bp-text);
  box-sizing:border-box;
}
.bp-pin-inp:focus{border-color:var(--bp-accent)}

/* ── Grid helpers ── */
.bp-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* ── Badges ── */
.bp-badge{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:600;
  padding:3px 10px;
  border-radius:20px;
  white-space:nowrap;
  letter-spacing:.03em;
}
.bp-badge-open    {background:rgba(200,255,0,.15);color:var(--bp-accent);border:1px solid rgba(200,255,0,.3)}
.bp-badge-closed  {background:rgba(255,107,53,.12);color:#ff8c5a;border:1px solid rgba(255,107,53,.2)}
.bp-badge-revealed{background:rgba(124,108,250,.15);color:#a89cfc;border:1px solid rgba(124,108,250,.25)}
.bp-badge-win     {background:rgba(74,222,128,.15);color:var(--bp-win);border:1px solid rgba(74,222,128,.25)}
.bp-badge-lose    {background:rgba(248,113,113,.12);color:var(--bp-lose);border:1px solid rgba(248,113,113,.2)}

/* ── Outcome buttons ── */
.bp-obtn{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--bp-border2);
  border-radius:var(--bp-radius-sm);
  background:var(--bp-surface2);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  transition:border-color .2s,transform .15s;
  color:var(--bp-text);
  font-size:14px;
  font-family:inherit;
  text-align:left;
}
.bp-obtn:hover{border-color:rgba(255,255,255,.25);transform:translateX(3px)}
.bp-obtn.sel{
  border-color:var(--bp-accent);
  background:rgba(200,255,0,.07);
}

/* ── Momentum bar ── */
.bp-mb{height:4px;background:var(--bp-surface);border-radius:2px;overflow:hidden;width:100%;}
.bp-mf{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1);}

/* ── Metrics grid ── */
.bp-mgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.bp-metric{
  background:var(--bp-surface2);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-sm);
  padding:14px 10px;
  text-align:center;
}
.bp-mval{font-weight:800;font-size:clamp(16px,4vw,22px);line-height:1;}
.bp-mlabel{font-size:10px;color:var(--bp-muted);margin-top:4px;letter-spacing:.04em}

/* ── Avatar ── */
.bp-av{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}

/* ── Row ── */
.bp-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--bp-border);
}
.bp-row:last-child{border-bottom:none}

/* ── Pool code ── */
.bp-pool-code{
  font-weight:800;
  font-size:clamp(28px,8vw,38px);
  letter-spacing:8px;
  color:var(--bp-accent);
  text-align:center;
  margin:10px 0;
}

/* ── Info rows ── */
.bp-inforow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 13px;
  background:var(--bp-surface2);
  border-radius:var(--bp-radius-sm);
  font-size:13px;
  margin-bottom:8px;
  border:1px solid var(--bp-border);
}

/* ── Leaderboard rank ── */
.bp-lb-rank{
  font-weight:800;
  font-size:18px;
  color:var(--bp-muted);
  width:26px;
  text-align:center;
  flex-shrink:0;
}
.bp-lb-rank.top{color:var(--bp-accent)}

/* ── Toast (from app.js) ── */
@keyframes bp-toast-in{
  from{opacity:0;transform:translateX(-50%) translateY(20px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}
}
@keyframes bp-toast-out{
  from{opacity:1;transform:translateX(-50%) translateY(0)}
  to  {opacity:0;transform:translateX(-50%) translateY(20px)}
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width:480px){
  .bet-pool-app{padding:.5rem .5rem 4rem;}
  .bp-card{padding:1rem;}
  .bp-hero-card{padding:1.25rem 1rem;}
  .bp-grid-2{grid-template-columns:1fr;}   /* stack on very small screens */
  .bp-pool-code{letter-spacing:4px;}
  .bp-btn-primary{font-size:14px;}
  .bp-topbar{flex-wrap:wrap;gap:6px;}
}

@media (min-width:600px){
  .bet-pool-app{padding:1rem 1.5rem 5rem;}
}