/* Pig Pin Dashboard — Full style.css (Yodeck-friendly) */
/* Drop this file in /assets/style.css */

:root{
  --bg0:#050607;
  --bg1:#0b0e12;
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --text:#eef2f7;
  --muted:rgba(255,255,255,.72);
  --dim:rgba(255,255,255,.55);

  --ok:#35ff7a;
  --mid:#ffb020;
  --bad:#ff3b3b;
  --neu:rgba(255,255,255,.75);

  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --radius2: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255,70,70,.14), transparent 60%),
              radial-gradient(1200px 700px at 80% 0%, rgba(0,255,140,.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden; /* yodeck */
}

/* Subtle background layer */
.bg{
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(900px 500px at 10% 20%, rgba(255,80,80,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(40,255,140,.09), transparent 60%),
    radial-gradient(700px 520px at 50% 110%, rgba(255,200,70,.06), transparent 62%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
  transform: translateZ(0);
}

/* Top bar */
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 26px 14px;
  gap:18px;
}

.brand .title{
  font-size:34px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.05;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.brand .sub{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  color: var(--muted);
  font-size:12px;
  letter-spacing:.06em;
}
.chip.dim{ color: var(--dim); }
.chip.warn{
  color:#ffd4d4;
  background: rgba(255,60,60,.10);
  border-color: rgba(255,60,60,.25);
}
.chip.pace{
  margin-left:auto;
  padding: 6px 10px;
  border-radius:999px;
  font-size:12px;
  opacity:.95;
}

.clock{
  min-width: 150px;
  text-align:right;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  font-weight:800;
  font-size:22px;
  letter-spacing:.06em;
  box-shadow: var(--shadow);
}

/* Grid */
.grid{
  padding: 10px 26px 26px;
  display:grid;
  grid-template-columns: 1.18fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:18px;
  height: calc(100vh - 96px);
}

@media (max-width: 1100px){
  body{overflow:auto}
  .grid{
    height:auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

/* Cards */
.card{
  position:relative;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(14,18,24,.92), rgba(10,12,16,.82));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  padding:18px 18px 16px;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 260px at 25% 0%, rgba(255,255,255,.05), transparent 58%),
    radial-gradient(600px 260px at 75% 0%, rgba(255,255,255,.03), transparent 58%);
  pointer-events:none;
}

.cardhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.h{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
  color: var(--text);
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Badges */
.badge{
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--neu);
}
.badge.ok{
  color: rgba(70,255,150,1);
  border-color: rgba(70,255,150,.26);
  background: rgba(70,255,150,.10);
}
.badge.mid{
  color: rgba(255,190,60,1);
  border-color: rgba(255,190,60,.26);
  background: rgba(255,190,60,.10);
}
.badge.bad{
  color: rgba(255,90,90,1);
  border-color: rgba(255,90,90,.26);
  background: rgba(255,90,90,.10);
}
.badge.neutral{ color: var(--muted); }

/* Big numbers */
.big{
  font-size:72px;
  font-weight:950;
  letter-spacing:-1px;
  line-height:1.0;
  margin: 4px 0 8px;
  text-shadow: 0 16px 38px rgba(0,0,0,.55);
}
.big.ok{ color: var(--ok); }
.big.mid{ color: var(--mid); }
.big.bad{ color: var(--bad); }

@media (max-width: 1200px){
  .big{ font-size:64px; }
}

/* Meta rows */
.meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  color: var(--muted);
  margin-bottom:10px;
}
.meta span{white-space:nowrap}
.meta.dim{ color: var(--dim); }
.meta .ok{ color: var(--ok); font-weight:900; }
.meta .bad{ color: var(--bad); font-weight:900; }

/* Meter */
.meterrow{
  display:grid;
  grid-template-columns: 140px 1fr 64px;
  gap:12px;
  align-items:center;
  margin: 10px 0 8px;
}
.ml,.mr{
  font-size:12px;
  color: var(--dim);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.mr{ text-align:right; }
.meter{
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  overflow:hidden;
}
.fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--bad), var(--mid), var(--ok));
  box-shadow: 0 0 18px rgba(255,255,255,.10);
}

/* Today: Remaining box */
.todayRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.remainBox{
  min-width: 230px;
  text-align:right;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--stroke);
}
.remainLabel{
  font-size:12px;
  opacity:.70;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.remainMoney{
  font-size:44px;
  font-weight:950;
  line-height:1.0;
}

/* Staff line */
.staffline{
  margin-top:10px;
  font-size:14px;
  opacity:.95;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stafflabel{ opacity:.75; }
.staffnames{ opacity:1; }

/* Top Dawg */
.topdog{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.16);
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap:12px;
  align-items:center;
}
.crown{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  color: var(--muted);
}
.dogname{
  font-size:18px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dogmeta{
  font-size:12px;
  color: var(--dim);
  white-space:nowrap;
}

/* Quotes */
.quote{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px dashed rgba(255,255,255,.16);
  color: var(--dim);
  background: rgba(0,0,0,.12);
  font-size:13px;
}

/* Ticker / lists */
.ticker{
  margin-top: 4px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.14);
  overflow:hidden;
  height: calc(100% - 62px);
}
.list{
  list-style:none;
  margin:0;
  padding:10px 12px;
}
.list li{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:14px;
  padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
  align-items:center;
}
.list li:last-child{ border-bottom:none; }

.nm{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
}
.vl{
  font-variant-numeric: tabular-nums;
  font-weight:950;
  color: var(--muted);
  min-width:90px;
  text-align:right;
}
.qt{
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  min-width:58px;
  text-align:right;
}
.hidden{ display:none; }

.hint{
  margin-top:10px;
  color: var(--dim);
  font-size:12px;
  letter-spacing:.03em;
}

/* Win badge */
.win{
  margin-left:10px;
  font-size:14px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--stroke2);
}

/* Small polish */
a{ color:inherit; }