/* ============================================================
   HM5 game layer — the Discipline Rating, the daily slate, the
   season board and the replay challenge. One look on every page.
   Colors: green is progress, gold is "your move", the surface
   is deep navy (not black) so numbers sit calm on the eye.
   ============================================================ */
:root{
  --gm-bg:#0b1017; --gm-surface:#111823; --gm-line:rgba(255,255,255,.1); --gm-line-2:rgba(255,255,255,.18);
  --gm-text:#f2f5fa; --gm-dim:#b3bcc8; --gm-faint:#98a0ad;
  --gm-green:#00e28f; --gm-gold:#ffd166; --gm-cyan:#22c3ff; --gm-red:#ff4d5e; --gm-magenta:#dc5ae6;
  --gm-font:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.gm{font-family:var(--gm-font);color:var(--gm-text);font-variant-numeric:tabular-nums}
.gm *{box-sizing:border-box}
.gm-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--gm-line);border-radius:16px;padding:18px 20px;position:relative;overflow:hidden}
.gm-card.glow{box-shadow:0 0 0 1px rgba(0,226,143,.18),0 18px 50px rgba(0,0,0,.45)}
.gm-k{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gm-faint)}
.gm-h{font-size:18px;font-weight:900;letter-spacing:-.01em;margin:0}
.gm-p{font-size:15px;line-height:1.6;color:var(--gm-dim);margin:0}
.gm-p b{color:var(--gm-text)}

/* ---------- rating card ---------- */
.gm-rating{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;align-items:center}
.gm-rating .num{font-size:56px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--gm-text)}
.gm-rating .num small{font-size:16px;font-weight:800;color:var(--gm-faint);letter-spacing:.06em;margin-left:6px}
.gm-rating .tier{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#06110b;background:var(--gm-green);padding:5px 11px;border-radius:99px}
.gm-rating .tier.rookie{background:#b3bcc8} .gm-rating .tier.apprentice{background:#7ddcff} .gm-rating .tier.pro{background:var(--gm-gold)} .gm-rating .tier.master{background:var(--gm-magenta);color:var(--white)}
.gm-rating .delta{font-size:14px;font-weight:800;margin-left:10px}
.gm-rating .delta.up{color:var(--gm-green)} .gm-rating .delta.dn{color:var(--gm-red)} .gm-rating .delta.flat{color:var(--gm-faint)}
.gm-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0 4px}
.gm-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gm-green),#7ddcff);width:0;transition:width .6s cubic-bezier(.2,.8,.3,1)}
.gm-sub{font-size:13.5px;color:var(--gm-faint)}
.gm-fix{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.3);font-size:14.5px;line-height:1.5;color:var(--gm-text)}
.gm-fix b{color:var(--gm-gold)}
.gm-empty{font-size:15px;line-height:1.6;color:var(--gm-dim)}
.gm-empty a,.gm-link{color:var(--gm-cyan);font-weight:700;text-decoration:none} .gm-link:hover{text-decoration:underline}

/* ---------- six checks ---------- */
.gm-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px}
.gm-check{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--gm-line);font-size:13.5px;line-height:1.4;color:var(--gm-dim)}
.gm-check i{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:12px}
.gm-check.ok i{background:rgba(0,226,143,.18);color:var(--gm-green)} .gm-check.no i{background:rgba(255,92,122,.16);color:var(--gm-red)}
.gm-check.ok{color:var(--gm-text)}
.gm-check .t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--gm-faint);display:block}

/* ---------- trade history rows ---------- */
.gm-rows{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.gm-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--gm-line);cursor:pointer}
.gm-row:hover{border-color:var(--gm-line-2)}
.gm-row .sym{font-weight:900;font-size:15px} .gm-row .when{font-size:13px;color:var(--gm-faint);margin-left:8px}
.gm-row .dots{display:flex;gap:4px} .gm-row .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12)} .gm-row .dots i.on{background:var(--gm-green)}
.gm-row .d{font-weight:900;font-size:15px;min-width:44px;text-align:right}
.gm-row .d.up{color:var(--gm-green)} .gm-row .d.dn{color:var(--gm-red)} .gm-row .d.flat{color:var(--gm-faint)}
.gm-row .detail{grid-column:1/-1;display:none} .gm-row.open .detail{display:block}

/* ---------- slate ---------- */
.gm-slate .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.gm-streak{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--gm-gold)}
.gm-streak .fl{font-size:18px}
.gm-quests{display:flex;flex-direction:column;gap:8px}
.gm-quest{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--gm-line);text-decoration:none;color:inherit}
.gm-quest:hover{border-color:var(--gm-line-2)}
.gm-quest .box{width:26px;height:26px;border-radius:8px;border:2px solid var(--gm-line-2);display:flex;align-items:center;justify-content:center;font-weight:900;color:#06110b}
.gm-quest.done .box{background:var(--gm-green);border-color:var(--gm-green)}
.gm-quest .l,.gm-quest .h,.gm-quest .why{display:block}
.gm-quest .l{font-size:15.5px;font-weight:800} .gm-quest.done .l{text-decoration:line-through;color:var(--gm-dim)}
.gm-quest .h{font-size:13.5px;color:var(--gm-faint);line-height:1.45;margin-top:2px}
.gm-quest .why{font-size:13px;color:var(--gm-green);margin-top:2px}
.gm-slate-done{margin-top:10px;font-size:14.5px;font-weight:800;color:var(--gm-green)}

/* ---------- compact chip (desk bar / monitor strip) ---------- */
.gm-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:99px;border:1px solid var(--gm-line-2);background:rgba(255,255,255,.04);font:800 13px/1 var(--gm-font);color:var(--gm-text);text-decoration:none;white-space:nowrap}
.gm-chip .r{color:var(--gm-green)} .gm-chip .s{color:var(--gm-gold)} .gm-chip .q{color:var(--gm-faint);font-weight:700}
.gm-chip:hover{border-color:var(--gm-green)}

/* ---------- season board ---------- */
.gm-board{width:100%;border-collapse:collapse;margin-top:8px}
.gm-board th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gm-faint);text-align:left;padding:6px 8px;border-bottom:1px solid var(--gm-line)}
.gm-board td{padding:9px 8px;border-bottom:1px solid var(--gm-line);font-size:15px}
.gm-board tr.me td{background:rgba(0,226,143,.08)}
.gm-board td.n{text-align:right;font-weight:800}
.gm-board .rk{font-weight:900;color:var(--gm-faint);width:40px}

/* ---------- tier ladder ---------- */
.gm-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.gm-ladder div{padding:9px 6px;border-radius:10px;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gm-faint);border:1px solid var(--gm-line)}
.gm-ladder div b{display:block;font-size:13px;color:var(--gm-text);letter-spacing:0;margin-top:2px;text-transform:none}
.gm-ladder div.on{border-color:var(--gm-green);color:var(--gm-green);background:rgba(0,226,143,.08)}

/* ---------- phone tab bar ---------- */
.hm5-tabbar{display:none}
@media(max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .hm5-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:950;display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(9,13,19,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.1);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));font-family:var(--gm-font)}
  .hm5-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--text-2);font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:4px 0}
  .hm5-tabbar a i{width:24px;height:24px;display:block}
  .hm5-tabbar a i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .hm5-tabbar a.on{color:var(--gm-green)}
  .hm5-footer{margin-bottom:0}
}

/* ---------- the roadmap: a wide progress bar with the steps written out, then one plain line ---------- */
/* the roadmap: one small card under the running tape. Five dots, the step you
   are on, one button. Hover a dot for what that step is and how to do it. */
.gm-road{position:relative;z-index:890;font-family:var(--gm-font);padding:8px 20px 6px}
.gm-road-in{max-width:1440px;margin:0 auto}
.gm-road .rm{display:inline-flex;align-items:center;gap:14px;padding:6px 8px 6px 14px;border-radius:999px;border:1px solid rgba(255,209,102,.3);background:rgba(255,209,102,.06);max-width:100%}
.gm-road .segs{display:inline-flex;gap:5px;flex:none}
.gm-road .seg{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:inline-block;transition:transform .12s}
.gm-road .seg:hover{transform:scale(1.35)}
.gm-road .seg.done{background:var(--gm-green)}
.gm-road .seg.now{background:var(--gm-gold);box-shadow:0 0 0 3px rgba(255,209,102,.22)}
.gm-road .st{font-size:14px;color:var(--gm-dim);white-space:nowrap}.gm-road .st b{color:var(--gm-text);font-weight:800}
.gm-road .gm-next a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;color:#1a1200;font-size:13.5px;font-weight:700;letter-spacing:0;text-decoration:none;white-space:nowrap;
  background:#ffd166;border:0;box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.gm-road .gm-next a:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 4px 12px -4px rgba(255,209,102,.7)}
.gm-road .gm-next a.calm{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--gm-text);box-shadow:none}
.gm-road .x{background:none;border:0;color:var(--gm-faint);font-size:17px;cursor:pointer;padding:0 4px 0 0;line-height:1;margin-left:-4px}
.gm-road .here{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--gm-dim)}.gm-road .here b{color:var(--gm-text)}
.gm-road .hk{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gm-gold);margin-right:7px;vertical-align:1px}
.gm-road.min .segs,.gm-road.min .gm-next,.gm-road.min .here{display:none}
@media(max-width:760px){
  .gm-road{padding:8px 12px 6px}
  .gm-road .rm{display:flex;flex-wrap:wrap;gap:8px 12px;padding:8px 10px}
  .gm-road .st{flex:1 1 auto;white-space:normal}
  .gm-road .gm-next{flex:1 1 100%;order:3} .gm-road .gm-next a{width:100%;justify-content:center}
  /* the close button sits in the corner instead of dropping onto a line of its own */
  .gm-road .rm{position:relative;padding-right:36px;border-radius:18px}
  .gm-road .x{position:absolute;right:8px;top:6px;margin:0;padding:6px;font-size:18px}
}
/* the page line under the section bar (Tape, Home) */
.db-page{max-width:1780px;margin:0 auto;padding:0 20px 8px;font-size:13px;line-height:1.4;color:var(--gm-dim);font-family:var(--gm-font)}
.db-page b{color:var(--gm-text)}
.db-page .pk{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gm-gold);margin-right:8px;vertical-align:1px}
@media(max-width:900px){ .db-page{padding:0 12px 8px;font-size:12.5px} }
/* ---------- the welcome cards ---------- */
.gm-welcome{position:fixed;inset:0;z-index:9600;background:rgba(3,6,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .25s;font-family:var(--gm-font)}
.gm-welcome.on{opacity:1}
.gm-wcard{width:min(560px,100%);background:var(--surface);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:22px 24px 20px;box-shadow:0 30px 90px rgba(0,0,0,.65);transform:translateY(8px);transition:transform .25s}
.gm-welcome.on .gm-wcard{transform:none}
.gm-wtop{display:flex;align-items:center;gap:10px;margin-bottom:12px} .gm-wtop img{height:26px} .gm-wtop .gm-k{flex:1}
.gm-wx{background:none;border:0;color:var(--gm-faint);font-size:24px;line-height:1;cursor:pointer}
.gm-wcard h3{font-size:26px;font-weight:900;letter-spacing:-.02em;margin:0 0 8px;color:var(--gm-text)}
.gm-wcard p{font-size:16px;line-height:1.65;color:var(--gm-dim);margin:0 0 14px}
.gm-wcard{max-height:88vh;overflow:auto}
.gm-wcard .gm-wlead{margin-bottom:10px}
.gm-wcard .gm-wlead b,.gm-wcard .gm-wlist b{color:var(--gm-text)}
.gm-wcard .gm-wlist{margin:0 0 14px;padding:0;list-style:none}
.gm-wcard .gm-wlist li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:1.55;color:var(--gm-dim);border-top:1px solid rgba(255,255,255,.08)}
.gm-wcard .gm-wlist li::before{content:'';position:absolute;left:4px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--accent,#00e28f)}
@media(max-width:560px){.gm-wcard h3{font-size:22px}.gm-wcard .gm-wlist li{font-size:14.5px}} .gm-wcard p b{color:var(--gm-text)}
.gm-wdots{display:flex;gap:6px;margin-bottom:14px} .gm-wdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .gm-wdots i.on{background:var(--gm-green);width:22px;border-radius:99px} .gm-wdots i.done{background:rgba(0,226,143,.5)}
.gm-wbtns{display:flex;gap:10px;flex-wrap:wrap}
.gm-wgo{font:inherit;font-size:15.5px;font-weight:900;padding:12px 18px;border-radius:12px;border:0;background:var(--gm-green);color:#06110b;cursor:pointer}
.gm-wcalm{font:inherit;font-size:14.5px;font-weight:700;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--gm-dim);cursor:pointer}
.gm-hl{position:relative;z-index:9601;box-shadow:0 0 0 3px var(--gm-gold),0 0 0 9px rgba(255,209,102,.25)!important;border-radius:6px}

/* ---------- the mark inside the game pieces ---------- */
.gm-mark{width:18px;height:18px;vertical-align:-4px;margin-right:6px}
.ls-stamp-mark{width:44px;height:44px;display:block;margin:0 auto 6px}

/* ---------- Learn mode ---------- */
.hm5-term{text-decoration:underline dotted rgba(34,195,255,.55);text-underline-offset:3px;text-decoration-thickness:1px;cursor:help}
button.hm5-term:not([data-term="door"]),a.hm5-term:not([data-term="door"]){text-decoration:none;box-shadow:inset 0 -2px 0 rgba(34,195,255,.35)}
html.hm5-learn-off .hm5-term{text-decoration:none;box-shadow:none;cursor:inherit}
/* the page icons and tools in the top bar explain themselves on hover, but keep their own look */
.hm5-topnav .hm5-term{text-decoration:none!important;cursor:pointer}
.hm5-learntip{position:fixed;z-index:2147483002;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s;
  background:var(--surface);border:1px solid rgba(34,195,255,.45);border-radius:12px;padding:12px 14px 10px;color:var(--white);font:400 15px/1.55 'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;max-width:380px;
  box-shadow:0 18px 44px rgba(0,0,0,.7),0 0 0 4px var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.hm5-learntip.on{opacity:1!important;transform:none}
.hm5-learntip b{display:block;color:var(--accent,#00e28f);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.hm5-learntip .lm{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
html.hm5-learn-off .hm5-learntip{display:none}
.hm5-learnbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;margin-left:auto;border-radius:9px;border:1px solid rgba(34,195,255,.5);background:rgba(34,195,255,.08);color:#7ddcff;font:800 14px/1 'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;cursor:pointer;white-space:nowrap}
.hm5-learnbtn i{font-style:normal;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.hm5-learnbtn.off{opacity:.6;border-color:rgba(255,255,255,.2);color:var(--text-2);background:transparent}
.hm5-learnbtn+.hm5-nav-coach{margin-left:8px}
@media(max-width:760px){.hm5-learnbtn{height:30px;padding:0 8px;font-size:13px} .hm5-learnbtn span{display:none}}

.gm-post{font:800 12px/1 var(--gm-font);padding:5px 9px;border-radius:99px;border:1px solid rgba(34,195,255,.5);background:rgba(34,195,255,.08);color:#7ddcff;cursor:pointer;margin-left:8px;vertical-align:middle}
.gm-post:hover{background:rgba(34,195,255,.18)}

.gm-road .stage{font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#d4a017;white-space:nowrap;padding-right:6px;border-right:1px solid rgba(212,160,23,.35);cursor:help}
@media(max-width:700px){ .gm-road .stage{display:none} }

/* iPad widths: the roadmap strip wraps inside the page instead of running off the right edge */
@media(min-width:761px) and (max-width:1100px){
  .gm-road .rm{display:flex;flex-wrap:wrap;gap:6px 12px;border-radius:18px}
  .gm-road .st{white-space:normal;flex:1 1 auto;min-width:0}
}
/* THE DESK LEADER STRIP (owner only, 2026-10-09): the leading rule book's tally in the roadmap strip */
.gm-road .st.lead{white-space:nowrap;line-height:1.5;color:var(--gm-dim);font-size:13.5px;min-width:0}.gm-road .rm:has(.st.lead){flex-wrap:nowrap}.gm-road .rm:has(.st.lead) .stage{white-space:nowrap;flex:none}.gm-road .rm:has(.st.lead) .gm-next{flex:none}@media (max-width:1380px){.gm-road .rm:has(.st.lead){flex-wrap:wrap}.gm-road .st.lead{white-space:normal}}.gm-road .st.lead b{font-weight:800;color:var(--gm-text);font-variant-numeric:tabular-nums}.gm-road .st.lead b.up{color:var(--green,#00C805)}.gm-road .st.lead b.dn{color:var(--red,#FF5A36)}.gm-road .st.lead small{font-size:12px;color:var(--gm-dim)}.gm-road .st.lead .sep{opacity:.45;margin:0 2px}
.gm-road .gm-live{appearance:none;border:1px solid var(--line,#292C32);background:var(--surface-3,#1B1E23);color:var(--gm-text);font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:6px;cursor:pointer;margin-right:8px}.gm-road .gm-live.on{background:var(--green,#00C805);color:#0B0D10;border-color:transparent}
.hm5-app-btn.is-live .hm5-tile{background:var(--green,#00C805)!important;color:#0B0D10}.hm5-app-btn.is-live .hm5-app-l{color:var(--green,#00C805);font-weight:800}