/* ═══════════════════════════════════════════════════════════════════════
   pp-chrome.css — shared nav chrome for standalone pages, paired with
   media/pp-chrome.js. Ported 1:1 from index.html's #player-ring-group /
   #character-panel visual language (same class names where the DOM matches)
   so a player sees the identical component on every page, not a reskin.

   Requires the host page's own :root tokens (--bg/--surface/--surface2/
   --border/--border-mid/--text/--muted/--cyan/--cyan-dim/--gold/--green) —
   already present on every page this ships to (media/pp-shared.css,
   media/pp-lessons.css, and the bespoke diagnostico/stories :root blocks
   all carry the same values).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Player badge + ring group ── */
#player-ring-group{display:flex;align-items:center;gap:8px;margin-left:10px;flex-shrink:0}
.pcb-wrap{position:relative}
.player-badge{display:flex;align-items:center;gap:5px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28);border-radius:100px;padding:5px 11px;cursor:pointer;color:var(--gold);font-family:'Bebas Neue',sans-serif;font-size:.88rem;letter-spacing:.1em;transition:background .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap;flex-shrink:0}
.player-badge:hover{background:rgba(251,191,36,.18)}
.player-badge.pp-badge-open svg{transform:rotate(180deg)}
.player-badge svg{transition:transform .18s;flex-shrink:0}
.player-badge-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pcb-drop{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border-mid);border-radius:10px;padding:5px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.4);display:none;z-index:200}
.pcb-drop.open{display:block}
.pcb-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:9px 12px;border-radius:6px;font-family:'Bebas Neue',sans-serif;font-size:.82rem;letter-spacing:.08em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pcb-item:hover{background:rgba(255,255,255,.05)}
.pcb-item.current{color:var(--gold)}

#nav-ring-slot{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#daily-pill{order:-1;position:relative;width:34px;height:34px;cursor:pointer;flex-shrink:0;transition:opacity .2s}
#daily-pill.daily-done .daily-ring-fill{stroke:var(--green);stroke-dashoffset:0}
#daily-svg{width:100%;height:100%;transform:rotate(-90deg)}
.daily-ring-bg{fill:none;stroke:var(--surface2);stroke-width:4.2}
.daily-ring-fill{fill:none;stroke:var(--gold);stroke-width:4.2;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .6s ease,stroke .3s;stroke-linecap:round}
#daily-pill-check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.65rem;color:var(--green);display:none;font-weight:700}
.daily-done #daily-pill-check{display:none}

#prog-lvl-badge{order:1;position:static;text-align:right;pointer-events:none;line-height:1.15;white-space:nowrap;flex-shrink:0}
#prog-lvl-num{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;color:var(--gold);letter-spacing:.06em;line-height:1}
#prog-xp-counter{font-family:'DM Mono',monospace;font-size:.53rem;color:var(--muted);letter-spacing:.04em;opacity:.72;white-space:nowrap}

@media(max-width:768px){
  #player-ring-group{margin-left:auto}
}
/* Pages without a bottom-nav (bonus/) rely entirely on the top nav-tabs
   for mobile navigation — badge+ring+level competing with a full tab row
   in that same strip overflows on real phone widths. Drop the LVL/XP text
   (redundant with what the panel itself shows) and keep just the ring,
   which stays the click target either way. Pages with a bottom-nav
   (diagnostico/, stories/) have more headroom and are unaffected in
   practice, but the rule is harmless there too. */
@media(max-width:480px){
  #prog-lvl-badge{display:none}
}

/* ── Character panel (verbatim from index.html) ── */
#character-panel{position:fixed;z-index:301;background:var(--surface);border:1px solid var(--border-mid);border-radius:14px;width:min(calc(100vw - 32px),420px);box-shadow:0 8px 32px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);transition:opacity .18s,transform .18s;overflow:hidden}
#character-panel.open{opacity:1;pointer-events:all;transform:none}
#cp-drag-handle{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:default;background:var(--surface2);user-select:none}
.cp-grip{font-size:.7rem;color:var(--border-mid);letter-spacing:1px;cursor:grab;display:none}
.cp-brand{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:1;font-family:'DM Mono',monospace}
.cp-close{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--muted);border-radius:50%;transition:background .15s,color .15s;padding:0}
.cp-close:hover{background:var(--surface);color:var(--text)}
.cp-section{padding:12px 14px;border-bottom:1px solid var(--border)}
.cp-section:last-of-type{border-bottom:none}
.cp-label{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-family:'DM Mono',monospace}
.cp-daily-bar-wrap{display:flex;align-items:center;gap:8px}
.cp-daily-bar{flex:1;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
#cp-daily-fill{height:100%;background:var(--green);border-radius:3px;width:0%;transition:width .6s cubic-bezier(.4,0,.2,1)}
#cp-daily-label{font-size:.62rem;color:var(--muted);white-space:nowrap;letter-spacing:.04em;font-family:'DM Mono',monospace}
.cp-week-dots{display:flex;gap:5px;margin-bottom:6px}
.cp-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface2);font-size:.48rem;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'DM Mono',monospace}
.cp-dot.done{background:var(--green);border-color:var(--green);color:var(--bg)}
.cp-boost{font-size:.62rem;letter-spacing:.06em;color:var(--gold);line-height:1.4;font-family:'DM Mono',monospace}
.cp-multiplier{font-size:1.8rem;color:var(--gold);letter-spacing:.06em}
.cp-footer{padding:6px 14px 10px;display:flex;justify-content:flex-end}
.cp-reset{background:none;border:none;cursor:pointer;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.6;padding:4px 0;transition:opacity .15s,color .15s;font-family:'DM Mono',monospace}
.cp-reset:hover{opacity:1;color:var(--text)}
.cp-skin-row{display:flex;gap:6px}
.cp-skin-btn{flex:1;background:none;border:1px solid var(--border);border-radius:100px;padding:7px 10px;font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .18s;-webkit-tap-highlight-color:transparent}
.cp-skin-btn:hover{color:var(--text);border-color:var(--border-mid)}
.cp-skin-btn.active{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim)}

/* ── MODO row (dark/light — see PPChromeMode in pp-chrome.js) ── */
.cp-mode-row{display:flex;gap:6px;margin-top:6px}
.cp-mode-btn{flex:1;background:none;border:1px solid var(--border);border-radius:100px;padding:7px 10px;font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .18s;-webkit-tap-highlight-color:transparent}
.cp-mode-btn:hover:not(:disabled){color:var(--text);border-color:var(--border-mid)}
.cp-mode-btn.active{color:var(--gold);border-color:var(--gold);background:rgba(251,191,36,.08)}
.cp-mode-btn:disabled{opacity:.4;cursor:not-allowed}

@media(min-width:768px){#character-panel{width:320px}.cp-grip{display:block}#cp-drag-handle{cursor:grab}#cp-drag-handle:active{cursor:grabbing}}

/* ── Tier map (verbatim from index.html) ── */
.tier-map{margin:18px 0 4px}
.tm-track{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.tm-track::-webkit-scrollbar{display:none}
.tm-node{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface2);color:var(--muted);font-family:'DM Mono',monospace;font-size:.46rem;letter-spacing:.04em;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;position:relative}
.tm-node::after{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:4px;height:1px;background:var(--border)}
.tm-node:last-child::after{display:none}
.tm-node.tm-done{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08);color:var(--gold)}
.tm-node.tm-current{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan);box-shadow:0 0 0 2px rgba(34,211,238,.15)}
.tm-node.tm-future{border-color:var(--border);background:transparent;color:var(--muted);opacity:.4}
.tm-node.tm-selected{transform:scale(1.15);box-shadow:0 0 0 2px rgba(34,211,238,.25)}
.tier-desc{font-size:.76rem;color:var(--muted);line-height:1.6;min-height:0;margin-top:10px;transition:all .15s}
.tier-desc strong{color:var(--text);display:block;margin-bottom:2px}