/* GuitarPath 4.26.0 — Yousician-inspired compact chord ribbons. */
#highwayCard .gp-chord-ribbon{
 position:absolute;z-index:7;pointer-events:none;display:block;
 background:linear-gradient(165deg,var(--chord-banner1),var(--chord-banner2));
 border-radius:9px;box-shadow:0 6px 18px #0009,inset 0 2px 0 #ffffff45;
 border:1px solid var(--chord-border);
 overflow:hidden;
}
#highwayCard .gp-chord-ribbon::after{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:repeating-linear-gradient(162deg,transparent 0px,transparent 14px,#ffffff0d 15px,#ffffff0d 17px,transparent 18px,transparent 32px);
 opacity:.6;
}
/* Keep original indexed chord banners for hit/miss and Guitar Pro aggregation.
   Unlike the old full-size polygon, each banner is only the interval until the next strike. */
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike{
 position:absolute;display:flex;z-index:2;min-width:0;min-height:0;box-sizing:border-box;
 justify-content:flex-start;align-items:center;
 border:0;border-left:2px solid #ffffff80;
 background:transparent;box-shadow:none;
 clip-path:none;border-radius:0;padding:0 6px;
 filter:none;transition:background .13s,filter .13s;
}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike[data-strike="1"]{border-left:0}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike span{
 display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
 font-size:clamp(13px,1.7vw,24px);font-weight:900;letter-spacing:-.02em;
 color:var(--chord-text,#fff);text-shadow:0 2px 4px #000b;
 white-space:nowrap;margin:0;line-height:1.1;
}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.chord-long-name span{font-size:clamp(12px,1.3vw,19px)}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.chord-very-long span{font-size:clamp(11px,1.1vw,16px)}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike .gp-chord-strum-icon{
 font-size:clamp(15px,2vw,24px);font-weight:900;letter-spacing:-.19em;
 color:#fff;opacity:.82;
}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.current{
 background:#ffffff45;box-shadow:inset 0 0 0 2px #ffffffba!important;filter:brightness(1.18);
}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.hit,
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.hit.current{
 background:#15b965d9!important;box-shadow:inset 0 0 0 2px #b7ffda!important;border-color:#d0ffde!important;
 animation:none!important;filter:none!important;
}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.miss,
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.miss.current{
 background:#d83040e6!important;box-shadow:inset 0 0 0 2px #ffd2d2!important;border-color:#ffdae0!important;
 animation:none!important;filter:none!important;
}
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.hit span,
#highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.miss span{color:#fff!important}
@media(max-width:850px){
 #highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike{padding:0 4px}
 #highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike span{font-size:17px}
 #highwayCard .gp-chord-ribbon .chord-banner.chord-name-only.gp-chord-strike.chord-very-long span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#highwayCard .gp-chord-ribbon .gp-chord-strike{transition:none!important}}

/* The chord name belongs to the run, not to one short attack segment. */
#highwayCard .gp-chord-ribbon .gp-chord-ribbon-title{
 position:absolute;z-index:5;top:10px;left:8px;max-width:calc(100% - 12px);
 font-size:clamp(16px,2.2vw,29px);font-weight:950;line-height:1.1;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 color:var(--chord-text,#fff);text-shadow:0 3px 6px #0009;
}
#highwayCard .gp-chord-ribbon .gp-chord-ribbon-title.gp-title-long{font-size:clamp(13px,1.75vw,23px)}
#highwayCard .gp-chord-ribbon .gp-chord-strike[data-strike="1"]>span{visibility:hidden}
#highwayCard .gp-chord-ribbon .gp-chord-strike .gp-chord-strum-icon{align-self:center;margin-top:34px}
@media(max-width:850px){#highwayCard .gp-chord-ribbon .gp-chord-ribbon-title{font-size:19px;top:6px}}

/* Rhythmic strokes are large, diagonal arrowheads, readable at gameplay speed. */
#highwayCard .gp-chord-ribbon .chord-banner.gp-chord-strike:not([data-strike="1"])::after{
 content:'';position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
 width:min(37px,72%);height:42px;opacity:.27;background:#ffffff;
 clip-path:polygon(0 0,50% 52%,100% 0,100% 36%,50% 100%,0 36%);
}
#highwayCard .gp-chord-ribbon .gp-chord-strike .gp-chord-strum-icon{visibility:hidden}
#highwayCard .gp-chord-ribbon{z-index:4}
#highwayCard .note-chip.sustain-note{z-index:11}
#highwayCard .tab-canvas .playhead{z-index:30}