/* style.css */
:root{
  --bg:#0d0d0d;
  --card:#1a1a1a;
  --text:#f5f5f5;
  --muted:#b3b3b3;
  --line:#333;
  --primary:#d4af37;
  --green:#0a7d22;
  --red:#b00020;
  --radius:12px;
  --shadow:0 8px 20px rgba(0,0,0,.6);
  --container:1160px;
  --mobile-banner-height:56px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
  padding:24px 16px 48px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Global hidden utility */
.hidden{
  display:none !important;
}

/* Center & constrain main sections */
:is(#logo-container, .switcher, #analytics, .mobile-tabs, .ticker, #dashboard, #sport-toggle){
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
}

.container{
  max-width:var(--container);
  margin:0 auto;
}

/* Accessible helpers */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.muted{color:var(--muted)}

/* =========================
   Top header bar
   ========================= */
   .top-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:12px;
    position:relative;
    min-height:96px;
  }
  
  #summary{
    justify-self:start;
  }
  
  #logo-container{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    pointer-events:none;
  }
  
  #logo-container img{
    pointer-events:auto;
  }

#account-area{
  justify-self:end;
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
}

.top-bar-right{
  justify-self:end;
}

/* Brand-row wrapper: transparent to desktop grid layout
   (display:contents lets children act as direct grid items). */
.top-bar-brand-row{
  display:contents;
}

/* Logo text fallback (mobile only — hidden on desktop) */
#logo-text{
  display:none;
  color:var(--primary);
  font-weight:800;
  font-size:20px;
  letter-spacing:0.5px;
  font-family:'Georgia','Times New Roman',serif;
}

.top-bar-right{
  display:flex;
  align-items:center;
  gap:8px;
}

#logo-container{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  margin:0;
  padding:0;
  text-align:center;
}

#logo{
  height:96px;
  width:auto;
  display:block;
  max-width:100%;
}

/* =========================
   Account Button + Dropdown
   ========================= */

/* Sign In button (when signed out) */
.signin-btn{
  appearance:none;
  border:1px solid var(--primary);
  background:transparent;
  color:var(--primary);
  padding:8px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:background .2s,color .2s;
}

.signin-btn:hover{
  background:var(--primary);
  color:#111;
}

/* Account avatar button (when signed in) */
.account-btn{
  appearance:none;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--primary);
  background:transparent;
  color:var(--primary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .2s,color .2s;
}

.account-btn:hover{
  background:var(--primary);
  color:#111;
}

.account-btn svg{
  display:block;
}

/* Help button (?) */
.help-btn{
  position:relative;
  appearance:none;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s,color .15s;
  flex-shrink:0;
  margin-right:6px;
  padding:0;
}
.help-btn:hover,.help-btn:focus{
  border-color:var(--primary);
  color:var(--primary);
  outline:none;
}
.help-tooltip{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:-8px;
  width:270px;
  background:var(--card-bg,#1a1a1a);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  z-index:300;
  text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  pointer-events:none;
}
.help-tooltip strong{
  display:block;
  margin-bottom:8px;
  color:var(--primary);
}
.help-tooltip p{
  margin:0 0 8px;
  color:var(--muted);
}
.help-tooltip p:last-child{
  margin-bottom:0;
  color:var(--text);
}
.help-btn:hover .help-tooltip,
.help-btn.help-open .help-tooltip{
  display:block;
}

/* Green quick-deposit (+) button */
.deposit-quick-btn{
  appearance:none;
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;
  background:#4caf50;
  color:#fff;
  font-size:22px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .15s,transform .1s;
  flex-shrink:0;
  margin-right:6px;
  padding:0;
}
.deposit-quick-btn:hover{
  opacity:0.85;
  transform:scale(1.07);
  background:#4caf50;
  color:#fff;
}

/* ── Top Movers time filter ─────────────────────────────────────── */
.movers-time-filter-row{
  display:flex;
  gap:6px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.movers-tf-btn{
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.movers-tf-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.movers-tf-btn--active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
/* ── Tournament Leaderboard ─────────────────────────────────────── */
.tournament-header{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.3px;
  text-transform:uppercase;
  color:var(--primary);
  padding:4px 0 10px;
}
.tournament-pos{
  font-size:13px;
  font-weight:700;
  min-width:32px;
  text-align:center;
  color:var(--primary);
  flex-shrink:0;
}
.tournament-score{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  min-width:36px;
  text-align:right;
}

/* ── Transaction History ledger ─────────────────────────────────── */
.ledger-list{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.ledger-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 2px;
  border-bottom:1px solid var(--border);
}
.ledger-row:last-child{ border-bottom:none; }
.ledger-row-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ledger-type-badge{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.ledger-desc{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ledger-meta{
  font-size:11px;
  color:var(--muted);
}
.ledger-amount{
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  flex-shrink:0;
}

.movers-section-hdr{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.3px;
  padding:10px 2px 4px;
  color:var(--muted);
}

/* ── Site Footer ─────────────────────────────────────────────────── */
#site-footer{
  margin-top:48px;
  border-top:1px solid var(--border,#2a2a2a);
  background:var(--card,#1a1a1a);
  padding:20px 24px;
}
.footer-inner{
  max-width:var(--container,1100px);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.footer-brand{
  font-size:15px;
  font-weight:800;
  letter-spacing:0.5px;
  color:var(--primary,#c9a84c);
  margin-bottom:2px;
}
.footer-copy{
  font-size:11px;
  color:var(--muted,#777);
}
.footer-links{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.footer-link-btn{
  background:none;
  border:none;
  padding:0;
  font-size:12px;
  color:var(--muted,#999);
  cursor:pointer;
  text-decoration:none;
  transition:color 0.15s;
}
.footer-link-btn:hover{
  color:var(--text,#f5f5f5);
}
@media(max-width:600px){
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

/* Guest sign-in CTA inside market cards */
.guest-trade-cta{
  margin-top:8px;
}
.guest-cta-btn{
  padding:6px 14px;
  border-radius:7px;
  border:1px solid var(--primary,#4ade80);
  background:transparent;
  color:var(--primary,#4ade80);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s,color 0.15s;
}
.guest-cta-btn:hover{
  background:var(--primary,#4ade80);
  color:#0a0e14;
}

/* Green icon in account menu deposit item */
.deposit-menu-icon{
  color:#4caf50 !important;
  font-weight:700;
  font-size:18px;
}

/* Dropdown menu panel */
.account-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:260px;
  background:var(--card);
  border:1px solid var(--primary);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.7);
  z-index:500;
  padding:12px;
  animation:menuFadeIn .15s ease-out;
}

@keyframes menuFadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

.account-menu-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.account-menu-header{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:2px;
}

.account-menu #auth-user-line{
  font-size:14px;
  color:var(--text);
  font-weight:600;
  word-break:break-all;
  line-height:1.3;
  margin-bottom:0;
}

.account-menu input{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#0f0f0f;
  color:#f5f5f5;
  font-size:13px;
}

.account-menu .auth-actions{
  display:flex;
  gap:6px;
}

.account-menu .auth-actions button{
  flex:1;
  padding:8px 10px;
  font-size:13px;
}

.account-menu #google-signin-btn{
  width:100%;
  padding:8px 10px;
  font-size:13px;
}

.account-menu-divider{
  height:1px;
  background:var(--line);
  margin:6px -4px;
}

/* Items inside the signed-in menu (Settings, Sign Out, etc.) */
.account-menu-item{
  appearance:none;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 8px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--text);
  font-size:14px;
  text-align:left;
  cursor:pointer;
  transition:background .15s;
}

.account-menu-item:hover{
  background:rgba(212,175,55,0.10);
  color:var(--text);
}

.account-menu-item.disabled,
.account-menu-item[disabled]{
  cursor:not-allowed;
  opacity:0.55;
}

.account-menu-item.disabled:hover,
.account-menu-item[disabled]:hover{
  background:transparent;
}

.account-menu-item .menu-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  color:var(--primary);
  font-size:16px;
  flex-shrink:0;
}

.account-menu-item .menu-label{
  flex:1;
}

.account-menu-item .menu-tag{
  font-size:11px;
  color:var(--muted);
  background:#101010;
  border:1px solid var(--line);
  padding:2px 6px;
  border-radius:6px;
}

/* =========================
   Headings / controls
   ========================= */
h2{
  margin:18px auto 10px;
  font-weight:700;
  color:var(--primary);
}

.switcher{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:0;
}

#view-select{
  background:#0f0f0f;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 32px 8px 10px;
  min-width:170px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f5f5f5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.market-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.market-filters{
  display:flex;
  align-items:center;
  gap:8px;
}

#team-filter,
#player-search{
  background:#0f0f0f;
  color:#f5f5f5;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}

#team-filter{
  appearance:none;
  -webkit-appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f5f5f5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

#player-search{width:200px}

/* =========================
   Summary card
   ========================= */
   .summary-inline{
    margin:0;
    padding:8px 12px;
    min-width:0;
    font-size:15px;
  }
  
  .summary-inline .row{
    margin-top:3px;
    gap:8px;
  }
  
  .summary-inline .row:first-child{
    margin-top:0;
  }
  
  .summary-inline strong{
    font-size:14px;
    color:var(--muted);
    font-weight:600;
  }

.summary-inline .summary-grid{
  display:grid;
  grid-template-columns:auto auto;
  gap:1px 10px;
  align-items:center;
}

.summary-inline .metric{
  display:contents;
}

.summary-inline .label{
  font-size:0.66rem;
  line-height:1.1;
  opacity:0.85;
  text-align:left;
}

.summary-inline .value{
  font-size:0.78rem;
  line-height:1.1;
  text-align:right;
  white-space:nowrap;
}

/* =========================
   Ticker
   ========================= */
.ticker{
  border:1px solid var(--line);
  border-radius:999px;
  background:linear-gradient(180deg,#121212,#0f0f0f);
  overflow:hidden;
  margin:8px auto 16px;
}

.ticker-track{
  display:flex;
  width:max-content;
  user-select:none;
  white-space:nowrap;
}

.ticker-segment{
  display:flex;
  align-items:center;
  gap:24px;
  padding:6px 16px;
}

.ticker-item{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-size:14px;
  color:var(--text);
  cursor:pointer;
}

.ticker-item .name{font-weight:700}
.ticker-item .price{color:#ddd}
.ticker-item.up .pct,
.ticker-item.up .arrow{color:var(--green)}
.ticker-item.down .pct,
.ticker-item.down .arrow{color:var(--red)}

.sep{
  opacity:.35;
  padding:0 4px;
}

.ticker-chip{
  padding:2px 6px;
  border-radius:6px;
}

.flash-up .ticker-chip{animation:flashUp 900ms ease-out 1}
.flash-down.ticker-item .ticker-chip{animation:flashDown 900ms ease-out 1}

@keyframes flashUp{
  0%{background:rgba(10,125,34,.22)}
  100%{background:transparent}
}
@keyframes flashDown{
  0%{background:rgba(176,0,32,.22)}
  100%{background:transparent}
}

/* =========================
   Sport toggle
   ========================= */
#sport-toggle{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:8px auto;
}

.sport-btn{
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  font-size:26px;
  line-height:1;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0.5;
  transition:opacity .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.sport-btn:hover{
  background:transparent;
  color:inherit;
}

.sport-btn--active{
  opacity:1;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(212,175,55,0.2);
}

@media(hover:hover){
  .sport-btn:hover{
    transform:scale(1.05);
  }
}

/* =========================
   Mobile tabs
   ========================= */
.mobile-tabs{
  display:none;
  gap:8px;
  margin:12px auto 12px;
  width:100%;
  max-width:var(--container);
}

.mobile-tabs .tab{
  appearance:none;
  flex:1;
  border:1px solid var(--primary);
  background:transparent;
  color:var(--primary);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  text-align:center;
}

.mobile-tabs .tab.active{
  background:var(--primary);
  color:#111;
}

/* =========================
   Dashboard layout
   ========================= */
#dashboard{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

#col-portfolio,
#col-market{
  min-width:0;
}

@media (min-width:900px){
  .mobile-tabs{display:none}
  #dashboard{grid-template-columns:1fr 1fr}
}

@media (max-width:899px){
  .mobile-tabs{
    display:flex;
  }

  #dashboard{
    grid-template-columns:1fr;
  }

  #col-portfolio,
  #col-market{
    width:100%;
  }
}

/* =========================
   Sections populated by JS
   ========================= */
   #summary{
    margin:0;
    margin-right:auto;
  }
  
  #analytics{
    margin:12px auto;
  }

#market,
#portfolio{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* =========================
   Cards
   ========================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 14px;
  box-shadow:var(--shadow);
}

#market.compact .card{padding:8px 12px}
#market.compact .row{margin-top:4px}
#market.compact .qty-row{gap:6px}

/* =========================
   Rows
   ========================= */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
  flex-wrap:wrap;
}

/* =========================
   Buttons / Inputs
   ========================= */
button{
  appearance:none;
  border:1px solid var(--primary);
  background:transparent;
  color:var(--primary);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .05s;
}

button:hover{
  background:var(--primary);
  color:#111;
}

button:active{
  transform:translateY(1px);
}

button.danger{
  border-color:#ff8ea0;
  color:#ff8ea0;
}

button.danger:hover{
  background:#ff8ea0;
  color:#111;
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"]{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0f0f0f;
  color:#f5f5f5;
}

input[type="number"],
input[type="text"]{
  width:90px;
}

input[type="number"]{
  text-align:right;
}

/* =========================
   Steppers
   ========================= */
.qty-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.stepper{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#0f0f0f;
}

.stepper button{
  border:none;
  padding:6px 8px;
  min-width:34px;
  border-radius:0;
  color:#ddd;
}

.stepper button:hover{
  background:#1b1b1b;
  color:#fff;
}

.stepper input{
  width:74px;
  border:none;
  background:transparent;
  color:#f5f5f5;
  text-align:center;
  padding:6px 4px;
  outline:none;
}

.max-btn{
  border-color:#555;
  color:#ccc;
}

.max-btn:hover{
  background:#1b1b1b;
  color:#fff;
}

/* =========================
   Badges / Meta
   ========================= */
.qty{
  font-size:13px;
  padding:2px 8px;
  border-radius:999px;
  background:#111;
  border:1px solid #2a2a2a;
  margin-left:8px;
  color:var(--muted);
}

/* =========================
   Dividend badge + tooltip
   ========================= */
.dividend-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:4px;
  color:var(--primary);
  font-weight:700;
  font-size:12px;
  line-height:1;
  cursor:default;
  position:relative;
}

.dividend-badge::before{
  content:"D";
}

.div-tooltip{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:130%;
  min-width:220px;
  max-width:280px;
  z-index:5;
  background:#111;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  color:#ddd;
  font-size:12px;
  box-shadow:var(--shadow);
  display:none;
}

.div-tooltip .hdr{
  color:var(--primary);
  font-weight:700;
  margin-bottom:6px;
}

.div-tooltip .rowline{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:3px 0;
}

.divtooltip-total{
  margin-top:6px;
  color:#bbb;
}

.dividend-badge:hover .div-tooltip{
  display:block;
}

/* =========================
   Messages
   ========================= */
.purchase-msg{
  margin-top:6px;
  font-size:.9em;
  color:var(--green);
  font-style:italic;
}

.error-msg{
  margin-top:6px;
  font-size:.9em;
  color:var(--red);
  font-style:italic;
}

/* =========================
   Gains / Losses
   ========================= */
.gain{color:var(--green)}
.loss{color:var(--red)}
.delta{font-size:.92em}

/* =========================
   Leaderboard
   ========================= */
.current-user-row{
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 6px 8px;
  transition: background 0.2s ease;
}

.current-user-row:hover{
  background: rgba(255,255,255,0.10);
}

.current-user-row .gain{
  margin-left: 6px;
  font-size: 12px;
}

.current-user-row .loss{
  margin-left: 6px;
  font-size: 12px;
}

/* =========================
   Rules
   ========================= */
.rules-card{
  text-align:left;
}

.rules-list{
  margin-top:10px;
  padding-left:18px;
  line-height:1.6;
}

.rules-list li{
  margin-bottom:6px;
  color:#ddd;
}

/* =========================
   Highlight
   ========================= */
.pulse-highlight{
  animation:pulse 1.2s ease-out 1;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,0.6)}
  100%{box-shadow:0 0 0 14px rgba(212,175,55,0)}
}

/* =========================
   Analytics grid
   ========================= */
.analytics-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr 1fr 1fr 1fr .8fr;
  gap:8px;
  text-align:left;
}

.analytics-grid .hdr{
  font-weight:700;
  color:#fff;
  padding:4px 2px;
}

.analytics-grid .cell{
  padding:6px 2px;
  border-bottom:1px dashed #2a2a2a;
  color:var(--muted);
}

/* =========================
   Confirm modal
   ========================= */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  animation:fadeIn .18s ease-out;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.modal{
  width:min(520px, 92vw);
  background:var(--card);
  border:1px solid var(--primary);
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  padding:18px 18px 14px;
}

.modal h3{
  margin:0 0 8px 0;
  padding:0;
  color:var(--primary);
  font-size:20px;
  font-weight:800;
}

.modal .sub{
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
}

.modal .details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 4px;
}

.modal .details .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:8px 10px;
  background:#101010;
  border:1px solid #232323;
  border-radius:10px;
}

.modal .total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 0;
  padding:10px 12px;
  border-top:1px dashed #2a2a2a;
  font-weight:700;
}

.modal .controls{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

.modal button{
  min-width:140px;
}

.modal .btn-cancel{
  border-color:#555;
  color:#ccc;
}

.modal .btn-cancel:hover{
  background:#1b1b1b;
  color:#fff;
}

/* =========================================================
   ===== MOBILE OVERRIDES (max-width: 900px) ===============
   ========================================================= */
@media (max-width:900px){

  /* Make room at the top of the page for the FIXED banner */
  body{
    padding-top:calc(var(--mobile-banner-height) + 12px);
  }

  .top-bar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin-bottom:0;
    min-height:0;
  }

  /* ===== FIXED MOBILE BANNER =====
     position:fixed pins it to the viewport top — it stays
     in place no matter how far you scroll. */
  .top-bar-brand-row{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:1000 !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:var(--bg);
    padding:8px 16px;
    border-bottom:1px solid var(--line);
    height:var(--mobile-banner-height);
    box-shadow:0 2px 8px rgba(0,0,0,.4);
    margin:0 !important;
    max-width:none !important;
  }

  /* ===== HARD HIDE LOGO IMAGE ON MOBILE ===== */
  #logo{
    display:none !important;
  }

  /* ===== FORCE LOGO TEXT GOLD + BOLD ===== */
  #logo-text{
    display:inline-block !important;
    color:var(--primary) !important;
    font-weight:800 !important;
    font-size:20px !important;
    letter-spacing:0.5px !important;
    font-family:'Georgia','Times New Roman',serif !important;
    line-height:1 !important;
  }

  #logo-container{
    flex:0 0 auto !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
  }

  /* ===== BALANCE: bold gold, top-left of banner ===== */
  #summary{
    padding:0 !important;
    min-width:0 !important;
    max-width:none !important;
    width:auto !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  #summary .row{
    display:none !important;
  }

  #summary .summary-balance{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }

  #summary .summary-balance strong{
    display:none !important;
  }

  #summary .summary-balance span{
    color:var(--primary) !important;
    font-weight:700 !important;
    font-size:20px !important;
    letter-spacing:0.3px !important;
  }

  /* ===== Account area sits at the right of the banner ===== */
  #account-area{
    flex:0 0 auto;
    margin:0;
    position:static;
    display:flex;
    align-items:center;
    gap:4px;
  }

  /* On mobile, anchor the dropdown to the viewport (not the button)
     so it doesn't get clipped at the edge */
  .account-menu{
    position:fixed;
    top:calc(var(--mobile-banner-height) + 4px);
    right:8px;
    left:auto;
    min-width:280px;
    max-width:calc(100vw - 16px);
  }

  /* Smaller sign-in button on mobile */
  .signin-btn{
    padding:6px 12px;
    font-size:13px;
  }

  /* ===== View selector (below the fixed banner) ===== */
  .top-bar-right{
    width:100%;
    align-items:stretch;
    min-width:0;
    gap:0;
    margin:0;
    padding:0;
  }

  .ticker{
    margin-top:6px;
  }

  .switcher{
    justify-content:center;
    width:100%;
  }

  .switcher #view-select{
    width:100%;
    min-width:0;
  }

  .market-title-row{
    flex-direction:column;
    align-items:stretch;
  }

  .market-filters{
    flex-direction:column;
    align-items:stretch;
  }

  #team-filter,
  #player-search{
    width:100%;
  }

  /* Larger touch targets for dropdowns on mobile */
  #view-select,
  #team-filter,
  #player-search{
    min-height:44px;
    padding:10px 12px;
    font-size:15px;
  }

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