/* ============================================================
   Beast Mode Coach — design system from the BMG funnel:
   midnight navy, coral accent, serif display, rounded cards.
   Responsive: mobile-first, side-rail navigation ≥900px.
   ============================================================ */

:root{
  --bg:#10162B;
  --bg2:#151C33;
  --card:#1A2240;
  --card2:#202A4D;
  --line:#2A3355;
  --line2:#3A4570;
  --text:#EEF0FA;
  --muted:#9BA3C7;
  --coral:#F0654F;
  --coral-hi:#FF7A62;
  --coral-soft:rgba(240,101,79,.14);
  --red:#E5484D;
  --blue:#3F8CFF;
  --yellow:#EAB308;
  --green:#2FBF71;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --r:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(240,101,79,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(63,140,255,.05), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  line-height:1.55;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}
::selection{background:var(--coral-soft)}

#app{max-width:520px;margin:0 auto;padding:0 16px calc(84px + env(safe-area-inset-bottom));}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 2px 14px;position:sticky;top:0;z-index:30;
  background:linear-gradient(var(--bg) 78%, transparent);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-badge{
  width:42px;height:42px;border-radius:50%;
  background:var(--coral-soft);color:var(--coral);
  display:grid;place-items:center;flex:none;
  border:1px solid rgba(240,101,79,.25);
}
.brand-text h1{font-family:var(--serif);font-size:1.18rem;font-weight:700;letter-spacing:.2px;line-height:1.1}
.brand-text h1 em{color:var(--coral);font-style:normal}
.brand-sub{font-size:.68rem;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}

.chip{
  background:var(--card);border:1px solid var(--line);color:var(--text);
  border-radius:999px;padding:8px 14px;font-size:.8rem;font-weight:600;
}
.chip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-right:7px}

/* ---------- cards & general ---------- */
main{outline:none}
.card{
  background:linear-gradient(180deg,#1C2446,#181F3C);
  border:1px solid var(--line);border-radius:20px;
  padding:20px;margin-bottom:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.16);
}
.card.soft{background:var(--bg2);box-shadow:none}
.card h2{font-family:var(--serif);font-size:1.45rem;line-height:1.25;margin-bottom:6px;letter-spacing:.2px}
.card h3{font-size:.98rem;margin-bottom:8px;letter-spacing:.2px}
.section-title{
  font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  margin:20px 4px 10px;font-weight:700;
}
.p{color:var(--muted);font-size:.92rem}
.small{font-size:.8rem;color:var(--muted)}
.serif{font-family:var(--serif)}
.center{text-align:center}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row{display:flex;align-items:center;gap:10px}
.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mt8{margin-top:8px}.mt14{margin-top:14px}.mb8{margin-bottom:8px}

/* ---------- buttons ---------- */
.btn{
  display:block;width:100%;text-align:center;
  background:linear-gradient(180deg,var(--coral-hi),var(--coral));
  color:#fff;font-weight:700;font-size:1.02rem;
  border-radius:16px;padding:15px 20px;
  box-shadow:0 8px 22px rgba(240,101,79,.28);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn[disabled]{opacity:.35;box-shadow:none;pointer-events:none}
.btn.ghost{
  background:var(--card);border:1px solid var(--line2);color:var(--text);
  box-shadow:none;font-weight:600;
}
.btn.subtle{background:var(--coral-soft);color:var(--coral);box-shadow:none;border:1px solid rgba(240,101,79,.25)}
.btn.sm{padding:10px 14px;font-size:.88rem;border-radius:12px;width:auto;display:inline-block}
a.btn{text-decoration:none}

/* ---------- select cards (funnel style) ---------- */
.pick{position:relative;display:block;width:100%;text-align:left;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px;transition:border-color .15s, background .15s;
}
.pick + .pick{margin-top:10px}
.pick .t{font-weight:700;font-size:1rem}
.pick .d{color:var(--muted);font-size:.83rem;margin-top:3px}
.pick.on{border-color:var(--coral);background:linear-gradient(0deg,var(--coral-soft),var(--coral-soft)),var(--card)}
.pick .check{
  position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;
  background:var(--coral);display:none;place-items:center;color:#fff;font-size:.72rem;font-weight:800;
}
.pick.on .check{display:grid}

/* ---------- stepper ---------- */
.stepper{display:flex;align-items:center;justify-content:center;gap:0;margin:6px 0 22px}
.stepper .s{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);position:relative;flex:none}
.stepper .s.on{border-color:var(--coral)}
.stepper .s.on::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--coral)}
.stepper .s.done{border-color:var(--coral);background:var(--coral)}
.stepper .bar{height:2px;width:56px;background:var(--line2)}
.stepper .bar.done{background:var(--coral)}

/* ---------- muscle colors ---------- */
.m-chest{--mc:var(--red)}
.m-shoulders{--mc:var(--blue)}
.m-triceps{--mc:var(--yellow)}
.m-back{--mc:var(--green)}
.m-mixed{--mc:var(--coral)}
.m-rest{--mc:var(--muted)}
.mdot{width:10px;height:10px;border-radius:50%;background:var(--mc,var(--muted));display:inline-block;flex:none}
.mtag{
  display:inline-flex;align-items:center;gap:7px;
  background:color-mix(in srgb, var(--mc) 14%, transparent);
  color:var(--mc);border:1px solid color-mix(in srgb, var(--mc) 35%, transparent);
  border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:700;
}

/* ---------- today hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .daynum{
  font-family:var(--serif);font-size:3.6rem;font-weight:700;line-height:1;
  color:var(--mc,var(--coral));
}
.hero .glow{
  position:absolute;right:-40px;top:-40px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--mc,var(--coral)) 22%, transparent), transparent 70%);
  pointer-events:none;
}
.hero .sr{font-family:var(--serif);font-size:1.5rem}
.streak{display:inline-flex;align-items:center;gap:6px;color:var(--yellow);font-weight:700;font-size:.85rem}

/* exercise block — what to actually DO */
.exblock{
  margin-top:14px;background:var(--bg2);
  border:1px solid var(--line);border-left:3px solid var(--mc,var(--coral));
  border-radius:14px;padding:13px 15px;
}
.exhead{font-size:.68rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:5px}
.exname{font-family:var(--serif);font-size:1.22rem;font-weight:700}
.exrow{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.88rem}
.exrow .small{margin-left:auto;flex:none}
.exrow .mdot{width:9px;height:9px}

.quote{
  border-left:3px solid var(--coral);padding:4px 0 4px 14px;margin-top:4px;
  font-family:var(--serif);font-style:italic;color:var(--text);font-size:.98rem;
}
.quote .by{display:block;font-style:normal;font-family:var(--sans);font-size:.72rem;color:var(--muted);margin-top:4px;letter-spacing:1px}

/* ---------- 30-day map ---------- */
.map{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.day{
  aspect-ratio:1;border-radius:14px;border:1.5px solid var(--line);
  background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-weight:700;font-size:.95rem;position:relative;transition:transform .1s;
}
.day:active{transform:scale(.96)}
.day .md{width:7px;height:7px;border-radius:50%;background:var(--mc,var(--line2))}
.day.rest{color:var(--muted);background:var(--bg2)}
.day.done{border-color:var(--mc,var(--green));background:color-mix(in srgb, var(--mc,var(--green)) 13%, var(--card))}
.day.done::after{content:'✓';position:absolute;top:4px;right:7px;font-size:.62rem;color:var(--mc,var(--green))}
.day.today{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)}
.day.locked{opacity:.38}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- board diagram ---------- */
.board-svg{width:100%;height:auto;display:block}
.slotbtn{cursor:pointer}
.muscle-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.mtab{
  border:1.5px solid var(--line);border-radius:12px;padding:9px 4px;text-align:center;
  font-size:.78rem;font-weight:700;color:var(--muted);
}
.mtab.on{border-color:var(--mc);color:var(--mc);background:color-mix(in srgb, var(--mc) 12%, transparent)}
.steps{list-style:none}
.steps li{display:flex;gap:10px;padding:7px 0;color:var(--muted);font-size:.9rem;align-items:flex-start}
.steps li::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--mc,var(--coral));
  flex:none;margin-top:7px;
}
.steps.check li::before{content:'✓';background:none;color:var(--green);font-weight:800;margin-top:0;width:auto;height:auto}

/* ---------- workout player ---------- */
.overlay{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  overflow-y:auto;padding:18px 16px calc(24px + env(safe-area-inset-bottom));
}
.overlay .inner{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.player-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.xbtn{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;font-size:1rem;color:var(--muted)}
.bignum{font-family:var(--serif);font-size:5.2rem;font-weight:700;line-height:1;text-align:center}
.player-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px 0}
.counter{display:flex;align-items:center;justify-content:center;gap:22px;margin:10px 0}
.cbtn{width:56px;height:56px;border-radius:50%;background:var(--card);border:1.5px solid var(--line2);
  font-size:1.5rem;font-weight:700;display:grid;place-items:center}
.ring-wrap{position:relative;width:210px;height:210px;margin:0 auto}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-wrap .rc{fill:none;stroke:var(--line);stroke-width:10}
.ring-wrap .rv{fill:none;stroke:var(--coral);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .95s linear}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-txt .n{font-family:var(--serif);font-size:3rem;font-weight:700}
.setdots{display:flex;gap:7px;justify-content:center;margin:8px 0 2px}
.setdots i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.setdots i.done{background:var(--mc,var(--coral))}
.setdots i.on{background:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)}

/* ---------- progress ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;text-align:center}
.stat .v{font-family:var(--serif);font-size:1.55rem;font-weight:700;color:var(--coral)}
.stat .l{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;opacity:.35}
.badge.got{opacity:1;border-color:color-mix(in srgb, var(--yellow) 45%, transparent)}
.badge .e{font-size:1.5rem}
.badge .t{font-size:.68rem;color:var(--muted);margin-top:4px;line-height:1.3}
.chart{width:100%;height:auto}

/* ---------- fuel ---------- */
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px}
.seg button{flex:1;padding:9px 14px;border-radius:9px;font-weight:700;font-size:.85rem;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.seg button.on{background:var(--coral);color:#fff}
.seg.small{padding:3px;margin-bottom:0}
.seg.small button{padding:6px 12px;font-size:.76rem}
.foods{display:flex;flex-wrap:wrap;gap:8px}
.food{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.8rem;color:var(--text)}

.macro3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.macro{
  background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  border-top:3px solid var(--fc,var(--coral));
  padding:14px 10px;text-align:center;
}
.macro .mi{font-size:1.6rem}
.macro .mn{font-weight:800;font-size:.9rem;margin-top:6px}
.macro .md2{font-size:.72rem;color:var(--muted);margin-top:4px;line-height:1.4}

.foodhead{
  display:flex;align-items:baseline;gap:8px;
  margin:18px 0 9px;font-size:.8rem;font-weight:800;
  color:var(--fc,var(--text));text-transform:uppercase;letter-spacing:1.1px;
}
.foodhead::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--fc,var(--coral));align-self:center}
.foodhead span{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;font-size:.78rem}

.mealtl{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);align-items:flex-start}
.mealtl:last-child{border-bottom:0}
.mealtl .ic{font-size:1.25rem;flex:none;margin-top:1px}
.mealtl b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.7px;color:var(--coral)}
.mealtl div span{font-size:.88rem;color:var(--muted)}

.rules{list-style:none;counter-reset:rn}
.rules li{
  display:flex;gap:12px;align-items:flex-start;
  padding:8px 0;color:var(--muted);font-size:.9rem;
}
.rules li::before{
  counter-increment:rn;content:counter(rn);
  width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--coral-soft);color:var(--coral);
  border:1px solid rgba(240,101,79,.3);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
}
.warn{
  background:color-mix(in srgb, var(--red) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius:var(--r);padding:14px 16px;font-size:.85rem;color:var(--text);
}
.warn b{color:var(--red)}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input[type=number],.field input[type=text],.field textarea{
  width:100%;background:var(--bg2);border:1.5px solid var(--line2);border-radius:13px;
  color:var(--text);padding:13px 14px;outline:none;
}
.field input:focus,.field textarea:focus{border-color:var(--coral)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .c{border:1.5px solid var(--line2);border-radius:999px;padding:9px 16px;font-size:.85rem;font-weight:600;color:var(--muted)}
.chips .c.on{border-color:var(--coral);color:var(--coral);background:var(--coral-soft)}

/* ---------- tab bar (mobile) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;
  background:color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);
  font-size:.64rem;font-weight:600;letter-spacing:.3px;padding:4px 10px;border-radius:12px;flex:1;max-width:88px}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--coral)}

/* ---------- finale ---------- */
#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:120}
.finale-hero{font-family:var(--serif);font-size:2rem;line-height:1.2;text-align:center;margin:24px 0 8px}

.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- hover polish (pointer devices) ---------- */
@media (hover:hover){
  .btn:hover{filter:brightness(1.06)}
  .btn.ghost:hover,.btn.subtle:hover{filter:none;border-color:var(--line2);background:var(--card2)}
  .pick:hover{border-color:var(--line2)}
  .pick.on:hover{border-color:var(--coral)}
  .day:not(.locked):hover{transform:translateY(-2px);border-color:var(--line2)}
  .day{transition:transform .15s ease, border-color .15s ease}
  .tab:hover{color:var(--text)}
  .tab.on:hover{color:var(--coral)}
  .mtab:hover{border-color:var(--line2)}
  .food:hover{border-color:var(--line2)}
  .cbtn:hover{border-color:var(--coral);color:var(--coral)}
}

/* ============================================================
   DESKTOP / WEB-APP LAYOUT  (≥900px): side rail + wide grids
   ============================================================ */
@media (min-width:900px){
  #app{max-width:1120px;padding:0 32px 40px 122px}
  .topbar{padding-top:26px}
  .brand-text h1{font-size:1.45rem}

  .tabbar{
    top:0;bottom:0;left:0;right:auto;width:92px;
    flex-direction:column;justify-content:center;gap:10px;
    border-top:0;border-right:1px solid var(--line);
    padding:20px 10px;
  }
  .tab{max-width:none;flex:0 0 auto;padding:12px 8px}
  .tab svg{width:24px;height:24px}
  .tab span{font-size:.68rem}

  .l-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .l-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
  .map{grid-template-columns:repeat(10,1fr)}
  .stats{grid-template-columns:repeat(6,1fr)}
  .badges{grid-template-columns:repeat(6,1fr)}
  .overlay .inner{max-width:560px}
  .hero .daynum{font-size:4.4rem}
}
@media (min-width:900px) and (max-width:1119px){
  .l-cols3{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
}