/* board-road.css: owned by one lane of the 2026-10-07 learning-and-balance pass (tftsolid); since 2026-10-17 road-build's */
/* The old Road (src/road.js drawOld, ?oldroad), the clear card (showEnd) and the menu's rank (2026-10-07, Eric: "same
   with the way the ladder looks"): the rank badge and the climb's dots under ROAD, leagues as bands of their colour, what
   each section's clear gives on its banner, the scouted rival's roles and boss move, your army beside it. The new Road
   (src/road.js drawNew, 2026-10-17) is the last part of this file. */

/* ---- the leagues' colours: --lg-a/--lg-b a badge or banner's gradient, --lg-band the strip's band ---- */
.bd-r-l0 { --lg-a: #8d7bd6; --lg-b: #5e4fa8; --lg-band: rgba(141, 123, 214, 0.13); }   /* the arenas */
.bd-r-l1 { --lg-a: #e2a06a; --lg-b: #a35f2c; --lg-band: rgba(205, 138, 78, 0.17); }    /* Bronze */
.bd-r-l2 { --lg-a: #d3dae6; --lg-b: #8792a8; --lg-band: rgba(200, 208, 222, 0.14); }   /* Silver */
.bd-r-l3 { --lg-a: #ffd76a; --lg-b: #d7981d; --lg-band: rgba(255, 207, 74, 0.15); }    /* Gold */
.bd-r-l4 { --lg-a: #86e3ff; --lg-b: #2f98c9; --lg-band: rgba(95, 208, 242, 0.15); }    /* Diamond */
.bd-r-l5 { --lg-a: #ff98e0; --lg-b: #c0409a; --lg-band: rgba(255, 122, 217, 0.15); }   /* Champion, and the leagues past it */

/* ---- the rank badge: under ROAD, on the menu ---- */
.bd-r-rank { display: inline-block; align-self: flex-start; max-width: 100%; padding: 1px 12px 2px; border: 3px solid var(--ol); border-radius: 13px;
  background: linear-gradient(180deg, var(--lg-a), var(--lg-b)); box-shadow: 0 3px 0 rgba(47, 36, 55, 0.35);
  font-size: 15px; font-weight: 800; line-height: 19px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; }
.bd-menucard .bd-r-rank { align-self: center; }

/* ---- the climb: a pill for the arenas and each league, a dot a section ---- */
.bd-r-climb { flex: none; width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 13px; }
.bd-r-grp { position: relative; display: flex; align-items: center; gap: 3px; height: 21px; padding: 0 5px; border: 2px solid var(--ol); border-radius: 11px;
  background: linear-gradient(180deg, var(--lg-a), var(--lg-b)); }
.bd-r-grpname { position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); font-size: 11px; font-weight: 800; line-height: 12px;
  letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; color: var(--lg-a); -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; }
.bd-r-dot { display: block; flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--ol); border-radius: 50%; background: #2f2737; }
.bd-r-dot.done { background: #b4ef7d; }
.bd-r-dot.flag { border-radius: 2px; transform: rotate(45deg); background: #fff; }
.bd-r-dot.you { width: 15px; height: 15px; background: #ffe36b; box-shadow: 0 0 0 2px #fff; animation: bdRYou 1.2s ease-in-out infinite; }
.bd-r-dot.past { margin-left: 2px; }
@keyframes bdRYou { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); } }

/* ---- the strip and the foot: one column on the phone, side by side on a wide frame ---- */
.bd-r-body { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bd.wide .bd-r-body { flex-direction: row; justify-content: center; align-items: stretch; gap: 24px; max-width: 1120px; }
.bd.wide .bd-r-body > .bd-strip { flex: 1 1 540px; max-width: 560px; min-width: 0; }
.bd.wide .bd-r-body > .bd-rt-foot { flex: 0 1 500px; width: auto; min-width: 0; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 12px; }

/* ---- the strip: each league a band of its colour, its sections joined; banners and far rows in the league's colour ---- */
.bd-route .bd-strip .bd-sec { padding-bottom: 8px; border-radius: 22px; background: var(--lg-band); }
.bd-route .bd-strip .bd-sec.bd-r-up { border-top-left-radius: 0; border-top-right-radius: 0; }
.bd-route .bd-strip .bd-sec.bd-r-down { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 6px 0 var(--lg-band); }
.bd-route .bd-strip .bd-sec .bd-banner { background: linear-gradient(180deg, var(--lg-a), var(--lg-b)); }
.bd-route .bd-strip .bd-sec.locked .bd-banner { opacity: 0.85; filter: saturate(0.6); }
.bd-route .bd-strip .bd-banner .army { color: #fff; -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; }
.bd-route .bd-strip .bd-far { background: linear-gradient(180deg, var(--lg-a), var(--lg-b)); }
.bd-route .bd-strip .bd-far .arenas { color: #fff; -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; }

/* what clearing a section gives: the pack, the faces of the units it unlocks, a league's gold; or Cleared */
.bd-r-prize { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 30px; margin-top: 5px; padding: 2px 10px;
  border: 2px solid var(--ol); border-radius: 12px; background: rgba(35, 29, 51, 0.6); }
.bd-r-prize.done { min-height: 0; background: rgba(35, 29, 51, 0.35); }
.bd-r-prize .k { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #d8d0ef; }
.bd-r-pk { display: flex; align-items: center; font-size: 13px; font-weight: 800; }
.bd-r-packimg { display: block; width: auto; height: 34px; margin: -6px 0 -4px; filter: drop-shadow(0 2px 0 rgba(20, 14, 34, 0.5)); }
.bd-r-faces { display: flex; align-items: center; padding-left: 5px; }
.bd-r-faces canvas { display: block; margin-left: -5px; border: 2px solid var(--ol); border-radius: 50%; background: linear-gradient(180deg, #8d82a3, #6b6083); }
.bd-r-gold { font-size: 14px; font-weight: 800; white-space: nowrap; color: #ffe36b; -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; }
.bd-r-cleared { font-size: 14px; font-weight: 800; color: #b4ef7d; -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; }

/* ---- the foot: the scouted rival (CPU, roles, boss move) and your army ---- */
.bd-r-pv .bd-pv-body { gap: 5px; }
.bd-r-chip { padding-right: 4px; }
.bd-r-tag { margin-left: 5px; padding: 0 6px; font-style: normal; font-size: 11px; font-weight: 800; line-height: 17px; letter-spacing: 0.3px; white-space: nowrap;
  color: #3b3350; background: rgba(255, 255, 255, 0.9); border-radius: 8px; -webkit-text-stroke: 0; }
.bd-r-cpu { background: #d8d0ef; }
.bd-r-boss { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; line-height: 1.2; color: #7a2430; }
.bd-r-boss > b { flex: none; padding: 1px 7px; border: 2px solid var(--ol); border-radius: 8px; background: #e8606b; color: #fff; font-size: 11px; line-height: 15px;
  letter-spacing: 0.6px; -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; }
.bd-r-info { flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 2px solid var(--ol); border-radius: 50%;
  background: #eceaf6; color: #3b3350 !important; font-size: 14px; font-weight: 800; line-height: 1; }
.bd-r-more { font-size: 13px; font-weight: 700; line-height: 1.25; color: #5a4f72; }
.bd-r-yours { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; padding-top: 6px; border-top: 2px dashed rgba(59, 51, 80, 0.3); }
.bd-r-yours > .k { margin-right: 4px; font-size: 13px; font-weight: 800; color: #4a5bd0; }

/* ---- the Road's tools: Duel, beside Upgrades (shown once board-duel.js is ready) ---- */
.bd-r-duel { height: 38px; padding: 0 14px; border: 3px solid var(--ol); border-radius: 19px; background: linear-gradient(180deg, #ffb36b, #e0782f);
  font-size: 16px; font-weight: 800; letter-spacing: 0.5px; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; }

/* ---- the clear card: the cleared section's rank, and the faces the pack unlocks above OPEN PACK ---- */
.bd-card.end .bd-emblem { max-width: 100%; font-size: 17px; }
.bd-card.end .bd-emblem .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-r-packrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bd-r-unlocks { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; }
.bd-r-unlocks .k { margin-right: 4px; font-size: 14px; font-weight: 800; color: #5a4f72; }
.bd-r-unlocks canvas { display: block; border: 2px solid var(--ol); border-radius: 50%; background: linear-gradient(180deg, #8d82a3, #6b6083); }

@media (prefers-reduced-motion: reduce) { .bd-r-dot.you { animation: none; } }
/* 2026-10-07 lead's integration: the one-time training migration note on the Road */
.bd .bd-r-note { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(20, 14, 34, 0.55); padding: 16px; }
.bd .bd-r-notecard { max-width: 420px; width: 100%; background: #fff8ec; border: 4px solid var(--ol, #1d1530); border-radius: 22px; padding: 16px 18px 14px; box-shadow: 0 8px 0 rgba(20, 14, 34, 0.35); color: #2a2140; }
.bd .bd-r-notecard h2 { margin: 0 0 6px; font-size: 24px; }
.bd .bd-r-notecard p { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.bd .bd-r-notecard ul { margin: 0 0 12px; padding-left: 18px; font-size: 15px; display: grid; gap: 4px; }
.bd .bd-r-noterow { display: flex; gap: 12px; align-items: center; justify-content: center; }

/* ==== the new Road (src/road.js drawNew; road-build 2026-10-17, dev/design/road/design/DESIGN.md). Frame px. Depth as
   dev/captures/ART_DIRECTION.md sets it; no glows, no rings or discs on the floor (contact shadows are soft pools). */
/* road4 (2026-10-18): the dioramas cast a soft shadow down and right on the quilt (the bake's light comes from the top
   left); locked steps are frosted (no colour, lighter, flatter) instead of darkened, and their rivals frosted with them */
.bd-route > .rd { --rd-sh: drop-shadow(0 9px 0 rgba(10, 8, 30, 0.45)); --rd-sh2: drop-shadow(10px 18px 14px rgba(8, 6, 26, 0.55));
  --rd-frost: grayscale(1) sepia(0.3) hue-rotate(170deg) brightness(0.84) contrast(0.82); position: absolute; inset: 0; overflow: hidden; background: #1d3570; color: #fff; }
.rd, .rd * { paint-order: stroke fill; }
.rd-road { position: absolute; left: 0; right: 0; top: 124px; bottom: 150px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.rd-road::-webkit-scrollbar { display: none; }
.rd-col { position: relative; width: 100%; }
.rd-col.rd-rise { animation: rdRise 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes rdRise { from { transform: translateY(240px); } }
.rd-vign { position: absolute; left: 0; right: 0; top: 124px; bottom: 150px; pointer-events: none;
  background: radial-gradient(120% 78% at 50% 50%, rgba(8, 6, 26, 0) 56%, rgba(8, 6, 26, 0.55) 100%); }

.rd-band { position: absolute; left: 0; right: 0; background-size: 124px 124px; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%); }
.rd-band.t-sandbox { background-color: #2f6045; }
.rd-band.t-stadium { background-color: #26458f; }
.rd-band.t-colosseum { background-color: #6e3b30; }
.rd-band.t-far { background-color: #2c2a4a; }

.rd-rail { position: absolute; left: 15px; width: 15px; box-sizing: border-box; border: 4px solid var(--ol); border-radius: 8px; background: #4a4268;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.18); z-index: 1; }
.rd-rail.done { background: linear-gradient(90deg, #d4f7a8, #8fd65a); }
.rd-pin { position: absolute; left: 4px; z-index: 7; height: 46px; box-sizing: border-box; padding: 0 9px 0 5px; display: flex; align-items: center;
  border: 4px solid var(--ol); border-radius: 13px; background: linear-gradient(180deg, #fffaf0, #e5ddf0);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.15), 0 5px 0 rgba(20, 14, 34, 0.45); animation: rdBob 1.6s ease-in-out infinite; }
.rd-pin .f { display: block; height: 34px; }
.rd-pin::after { content: ""; position: absolute; right: -12px; top: 50%; width: 15px; height: 15px; margin-top: -8px; transform: rotate(45deg); background: #efe9f5;
  border-right: 4px solid var(--ol); border-top: 4px solid var(--ol); }
@keyframes rdBob { 50% { transform: translateY(-3px); } }

.rd-slab { position: absolute; left: 0; width: 100%; pointer-events: none; transition: transform 0.09s ease-out; }
.rd-slab .rd-blk { position: absolute; display: block; filter: var(--rd-sh); }
.rd-slab .rd-blk.base { filter: brightness(0.74) var(--rd-sh); }
.rd-hit { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 22px; z-index: 6; }
.kbd .rd-slab:focus .rd-hit { outline: 5px solid #fff; outline-offset: 2px; }
.rd-slab:focus { outline: none; }
.rd-slab.cur { transform: translateY(-5px); }
.rd-slab.down { transform: translateY(4px); }
.rd-slab.cur.down { transform: translateY(-1px); }
.rd-slab.cur .rd-blk:not(.base) { filter: brightness(1.06) var(--rd-sh); }
.rd-slab.ahead .rd-blk { filter: saturate(0.75) brightness(0.9) var(--rd-sh); }
.rd-slab.ahead .rd-blk.base { filter: saturate(0.75) brightness(0.68) var(--rd-sh); }
.rd-slab.done .rd-blk { filter: grayscale(0.5) brightness(0.86) var(--rd-sh); }
.rd-slab.done .rd-blk.base { filter: grayscale(0.5) brightness(0.66) var(--rd-sh); }
.rd-slab.done .rd-fig, .rd-slab.done .rd-fan, .rd-slab.done .rd-pack { filter: grayscale(0.65) brightness(0.86); }
.rd-slab.locked .rd-blk { filter: var(--rd-frost) var(--rd-sh); }
.rd-slab.locked .rd-blk.base { filter: var(--rd-frost) brightness(0.8) var(--rd-sh); }
.rd-slab.locked .rd-pack { filter: var(--rd-frost); }
.rd-fig { position: absolute; z-index: 2; pointer-events: none; }
.rd-fig > canvas, .rd-figcv { display: block; position: relative; }
.rd-figcv.rd-frost { filter: grayscale(1) brightness(1.2) contrast(0.6); }
.rd-slab.cur .rd-fig { transform-origin: 50% 100%; animation: rdBreathe 1.8s ease-in-out infinite; }
@keyframes rdBreathe { 50% { transform: scale(1.015, 1.035); } }
.rd-cs { position: absolute; z-index: 1; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20, 14, 34, 0.42), rgba(20, 14, 34, 0)); }
.rd-won { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(20, 14, 34, 0.35)); }
.rd-pack { position: absolute; z-index: 2; pointer-events: none; transform: rotate(-6deg); }
.rd-pack .rd-packimg { display: block; height: 118px; filter: drop-shadow(0 5px 0 rgba(10, 8, 30, 0.45)); }
.rd-fan { position: absolute; z-index: 3; display: flex; pointer-events: none; }
.rd-fan .rd-card + .rd-card { margin-left: -16px; }
.rd-fan .rd-card:nth-child(1) { transform: rotate(-7deg) translateY(3px); }
.rd-fan .rd-card:nth-child(2) { transform: rotate(2deg); z-index: 1; }
.rd-fan .rd-card:nth-child(3) { transform: rotate(9deg) translateY(4px); z-index: 2; }
.rd-take { position: absolute; z-index: 5; height: 30px; box-sizing: border-box; padding: 0 9px; border: 3px solid var(--ol); border-radius: 15px;
  background: linear-gradient(180deg, #b4ef7d, #6cc93f); font-size: 19px; font-weight: 800; line-height: 23px; color: #fff;
  -webkit-text-stroke: 5px var(--ol); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 4px 0 rgba(20, 14, 34, 0.45); pointer-events: none; }
.rd-new { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 3; padding: 0 6px; border: 3px solid var(--ol); border-radius: 8px;
  background: linear-gradient(180deg, #ff8fb1, #e0457a); font-style: normal; font-size: 13px; font-weight: 800; line-height: 17px; letter-spacing: 0.6px; color: #fff;
  -webkit-text-stroke: 3px var(--ol); }
.rd-plaque { position: absolute; z-index: 4; transform: translate(-50%, -50%); height: 36px; box-sizing: border-box; padding: 0 16px; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; border: 4px solid var(--ol); border-radius: 11px; background: linear-gradient(180deg, #4b4266, #2f2845);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22), 0 4px 0 rgba(20, 14, 34, 0.5); font-size: 20px; font-weight: 800; line-height: 1; color: #fff;
  -webkit-text-stroke: 5px var(--ol); pointer-events: none; }
.rd-plaque .rd-hex { margin-left: -34px; width: 44px; height: 41px; font-size: 19px; }
.rd-slab.cur .rd-plaque { background: linear-gradient(180deg, #ffe08a, #f0a93e); }
.rd-slab.done .rd-plaque { background: linear-gradient(180deg, #5f8c52, #3d6136); }
.rd-slab.locked .rd-plaque { background: linear-gradient(180deg, #4a4560, #2d2a3d); color: #bfb8d3; }
.rd-slab.sel:not(.cur) .rd-plaque { box-shadow: 0 0 0 4px #fff, 0 4px 0 rgba(20, 14, 34, 0.5); }

.rd-card { position: relative; display: inline-block; flex: none; box-sizing: border-box; border: 4px solid var(--ol); border-radius: 11px;
  background: linear-gradient(180deg, #ffffff, #d9d6ea); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 5px 0 rgba(20, 14, 34, 0.45); }
.rd-card .in { position: absolute; inset: 3px; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #6a7ee6, #34408f); }
.rd-card.red .in { background: linear-gradient(180deg, #e46a74, #8f2d3b); }
.rd-card .in canvas { position: absolute; display: block; }
.rd-card .rd-n { position: absolute; top: -12px; left: -11px; z-index: 2; min-width: 29px; height: 26px; box-sizing: border-box; padding: 0 5px; border: 3px solid var(--ol);
  border-radius: 9px; background: linear-gradient(180deg, #fff3a8, #ffcf3f); color: #4a3a18; font-size: 16px; font-weight: 800; line-height: 20px; text-align: center; }
.rd-card.big { border-radius: 15px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12), 0 6px 0 rgba(10, 8, 24, 0.5); }
.rd-card.big .in { border-radius: 9px; }
.rd-card.big .rd-n { top: -13px; left: -12px; min-width: 46px; height: 34px; border-radius: 11px; font-size: 22px; line-height: 28px; }
.rd-role { position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 1; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #3b3350;
  font-style: normal; font-size: 15px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; overflow: hidden; color: #fff;
  -webkit-text-stroke: 4px var(--ol); }
.rd-card.blue .rd-role { background: #2f3a86; }

.rd-hex { position: relative; isolation: isolate; flex: none; display: inline-grid; place-items: center; width: 46px; height: 43px; box-sizing: border-box;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--ol); font-size: 21px; font-weight: 800; line-height: 1; color: #fff;
  -webkit-text-stroke: 5px var(--ol); }
.rd-hex::before { content: ""; position: absolute; inset: 4px; z-index: -1; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(180deg, var(--lg-a, #ffe08a), var(--lg-b, #f0a93e)); }
.rd-hex::after { content: ""; position: absolute; left: 22%; right: 22%; top: 4px; height: 5px; z-index: -1; background: rgba(255, 255, 255, 0.35); }
.rd-hex b { position: relative; }
.rd-hex.pos { --lg-a: #ffe08a; --lg-b: #f0a93e; }

.rd-dio { position: absolute; display: block; pointer-events: none; filter: var(--rd-sh2); }
.rd-dio.done { filter: grayscale(0.3) brightness(0.92) var(--rd-sh2); }
.rd-dio.locked { filter: var(--rd-frost) var(--rd-sh2); }
.rd-dio.far { filter: var(--rd-frost) brightness(0.9) drop-shadow(6px 10px 9px rgba(8, 6, 26, 0.5)); }
.rd-army { position: absolute; z-index: 4; transform: rotate(-6deg); pointer-events: none; }
.rd-army.locked { filter: var(--rd-frost); }
.rd-aname { position: absolute; left: 16px; right: 0; z-index: 5; text-align: center; font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: 0.4px;
  color: #fff; -webkit-text-stroke: 8px var(--ol); text-shadow: 0 4px 0 rgba(20, 14, 34, 0.7); pointer-events: none; white-space: nowrap; }
.rd-aname.locked { color: #cfc8de; }
.rd-aname.far { font-size: 27px; -webkit-text-stroke-width: 6px; }
.rd-ribbon { position: absolute; left: 50%; width: 427px; margin-left: -205px; height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 0 40px 0 34px; z-index: 5; pointer-events: none; }
.rd-ribbon::before { content: ""; position: absolute; inset: 0; background: var(--ol);
  clip-path: polygon(0 50%, 30px 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 30px 100%); }
.rd-ribbon::after { content: ""; position: absolute; inset: 4px 5px; background: linear-gradient(180deg, var(--lg-a), var(--lg-b));
  clip-path: polygon(0 50%, 27px 0, calc(100% - 27px) 0, 100% 50%, calc(100% - 27px) 100%, 27px 100%); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35); }
.rd-ribbon > * { position: relative; z-index: 1; }
.rd-ribbon .lg { flex: 1; min-width: 0; font-size: 21px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; -webkit-text-stroke: 5px var(--ol); }
.rd-ribbon.bd-r-l0 .lg { text-align: center; }
.rd-ribbon .gold { display: flex; align-items: center; gap: 4px; font-size: 24px; font-weight: 800; color: #ffe36b; -webkit-text-stroke: 5px var(--ol); }
.rd .rd-ribbon .bd-coin, .rd .rd-top .bd-coin { width: 26px; height: 26px; border-width: 3px; }
.rd-ribbon .rd-hex { width: 42px; height: 39px; font-size: 19px; }
.rd-ribbon.small { width: 310px; height: 44px; margin-left: -147px; padding: 0 30px 0 26px; }
.rd-ribbon.small .lg { font-size: 17px; }
.rd-ribbon.small .gold { font-size: 19px; }
.rd-ribbon.small .rd-hex { width: 36px; height: 33px; font-size: 16px; }
.rd-ribbon.small .bd-coin { width: 21px; height: 21px; }
.rd-ribbon.small.cap { width: 400px; margin-left: -192px; }
.rd-ribbon.locked::after { filter: grayscale(0.7) brightness(0.75); }
.rd-ribbon.locked .lg { color: #ddd6ec; }
.rd-ribbon.done::after { filter: grayscale(0.25) brightness(0.92); }

.rd-top { position: absolute; left: 0; right: 0; top: 0; height: 124px; z-index: 20; background: linear-gradient(180deg, #16112e, #221a40);
  border-bottom: 4px solid var(--ol); box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.08), 0 4px 0 rgba(10, 8, 24, 0.45); }
.rd-tools { position: absolute; left: 14px; right: 14px; top: 10px; height: 52px; display: flex; align-items: center; gap: 10px; }
.rd-tools .sp { flex: 1; }
.rd .bd-rt-gold { height: 46px; padding: 0 12px 0 10px; border: 4px solid var(--ol); border-radius: 23px; background: #3b3350; font-size: 25px; box-sizing: border-box; }
.rd .bd-rt-gold.bd-shopbtn { padding-right: 32px; }
.rd .rd-btn { position: relative; height: 51px; box-sizing: border-box; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 4px solid var(--ol); border-radius: 16px; font: inherit; font-size: 21px; font-weight: 800; letter-spacing: 0.5px; color: #fff !important;
  -webkit-text-stroke: 5px var(--ol); cursor: pointer;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 0 rgba(0, 0, 0, 0.22), 0 5px 0 rgba(10, 8, 24, 0.5); }
.rd .rd-btn:active { transform: translateY(4px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), 0 1px 0 rgba(10, 8, 24, 0.5); }
.rd .rd-btn.green { background: linear-gradient(180deg, #a6ec72, #4fae38); }
.rd .rd-btn.orange { background: linear-gradient(180deg, #ffbf7a, #e0782f); }
.rd .rd-btn.slate { background: linear-gradient(180deg, #7d7896, #4f4a66); }
.rd .rd-btn.sq { width: 51px; padding: 0; }
.rd .rd-btn.sq svg { display: block; }
.rd .bd-upmark { right: -11px; top: -14px; width: 30px; height: 30px; box-sizing: border-box; border: 3px solid var(--ol); border-radius: 15px; font-size: 18px; line-height: 24px; }
.rd .bd-unsaved.pill { font-size: 16px; }
.rd-track { position: absolute; left: 14px; right: 14px; top: 68px; height: 50px; display: flex; align-items: center; justify-content: center; }
.rd-track .rd-hex { width: 40px; height: 37px; font-size: 18px; }
.rd-track .rd-hex.cur { width: 54px; height: 50px; font-size: 22px; }
.rd-track .rd-hex.cur img.flag { position: relative; display: block; height: 30px; margin-left: 4px; }
.rd-track .rd-hex.ahead::before { filter: saturate(0.4) brightness(0.55); }
.rd-track .rd-hex.ahead { color: #cfc8de; }
.rd-tlink { flex: 0 1 18px; min-width: 6px; height: 11px; box-sizing: border-box; border-top: 3px solid var(--ol); border-bottom: 3px solid var(--ol); background: #2a2340; }
.rd-tlink.done { background: #b4ef7d; }

.rd-dock { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 20; box-sizing: border-box; padding: 14px 14px 18px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #4a4166, #2c2542); border-top: 5px solid var(--ol); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2), 0 -5px 0 rgba(10, 8, 24, 0.35); }
.rd-plate { flex: 1; min-width: 0; height: 112px; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: #fff; font: inherit;
  text-align: left; cursor: pointer; }
.rd-card.rd-face { border-radius: 16px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 5px 0 rgba(10, 8, 24, 0.5); }
.rd-card.rd-face .in { border-radius: 10px; }
.rd-pips { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 5px; z-index: 1; }
.rd-pips i { width: 14px; height: 14px; box-sizing: border-box; border: 3px solid var(--ol); border-radius: 4px; background: #2a2340; transform: rotate(45deg); }
.rd-pips i.on { background: #ffe36b; }
.rd-pips i.done { background: #b4ef7d; }
.rd-pips.big { position: static; transform: none; gap: 9px; }
.rd-pips.big i { width: 19px; height: 19px; }
.rd-dmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.rd-dname { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 24px; font-weight: 800; line-height: 1; white-space: nowrap; color: #fff;
  -webkit-text-stroke: 6px var(--ol); }
.rd-dname b { overflow: hidden; text-overflow: ellipsis; padding: 3px 0; }
.rd-dname .rd-hex { width: 40px; height: 37px; font-size: 18px; }
.rd-crews { display: flex; gap: 8px; }
.rd-crews .rd-card .rd-n { top: -10px; left: auto; right: -10px; min-width: 26px; height: 23px; font-size: 14px; line-height: 17px; }
.rd-battle { flex: none; position: relative; width: 172px; height: 89px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 5px solid var(--ol); border-radius: 21px; background: linear-gradient(180deg, #ffe680 0 48%, #ffc634 52% 100%); font: inherit; font-size: 36px; font-weight: 800;
  letter-spacing: 0.6px; color: #fff !important; -webkit-text-stroke: 8px var(--ol); cursor: pointer;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -9px 0 #d58a12, 0 7px 0 rgba(10, 8, 24, 0.55); }
.rd-battle.down, .rd-battle:active { transform: translateY(5px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(10, 8, 24, 0.55); }
.kbd .rd-battle:focus, .kbd .rd-plate:focus, .kbd .rd .rd-btn:focus { outline: 5px solid #fff; outline-offset: 3px; }
.rd-bface { position: relative; flex: none; width: 52px; height: 52px; box-sizing: border-box; border: 3px solid var(--ol); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #e46a74, #8f2d3b); }
.rd-bface > canvas { position: absolute; left: 50%; top: 4px; transform: translateX(-50%) scale(1.5); transform-origin: 50% 0; }

.rd-bubble { position: absolute; z-index: 8; padding: 9px 14px 10px; border: 4px solid var(--ol); border-radius: 18px; background: #fffdf6; color: #2f2437;
  font-size: 18px; font-weight: 700; line-height: 1.18; white-space: nowrap; box-shadow: 0 5px 0 rgba(20, 14, 34, 0.4); pointer-events: none;
  transform-origin: 30px 100%; animation: rdPop 0.26s ease-out both; transition: opacity 0.2s; }
.rd-bubble::after { content: ""; position: absolute; left: 22px; bottom: -14px; width: 20px; height: 20px; background: #fffdf6;
  border-right: 4px solid var(--ol); border-bottom: 4px solid var(--ol); transform: rotate(45deg) skew(8deg, 8deg); }
.rd-bubble.out { opacity: 0; }
.rd-bubble.rd-say { box-sizing: border-box; max-width: 156px; white-space: normal; font-size: 16px; padding: 8px 12px 9px; transform-origin: 0 70%; }
.rd-bubble.rd-say::after { left: -13px; bottom: auto; top: 22px; width: 16px; height: 16px; transform: rotate(135deg) skew(8deg, 8deg); }
@keyframes rdPop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; } }

.rd-sheetwrap { position: absolute; inset: 0; z-index: 30; }
.rd-scrim { position: absolute; inset: 0; background: rgba(10, 8, 26, 0.6); animation: rdFade 0.22s ease-out both; }
.rd-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 908px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  border-top: 5px solid var(--ol); border-radius: 35px 35px 0 0; background: linear-gradient(180deg, #4a4166, #2c2542 60%);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.2), 0 -8px 0 rgba(10, 8, 24, 0.4); animation: rdUp 0.22s ease-out both; }
.rd-sheetwrap.still .rd-sheet, .rd-sheetwrap.still .rd-scrim { animation: none; }
.rd-sheetwrap.out .rd-sheet { transform: translateY(100%); transition: transform 0.2s ease-in; }
.rd-sheetwrap.out .rd-scrim { opacity: 0; transition: opacity 0.2s; }
@keyframes rdUp { from { transform: translateY(100%); } }
@keyframes rdFade { from { opacity: 0; } }
.rd-shead { position: absolute; left: 0; right: 0; top: -36px; display: flex; justify-content: center; pointer-events: none; }
.rd-ribbon.name { position: relative; left: auto; margin: 0; width: 443px; height: 68px; justify-content: center; padding: 0 46px; gap: 12px; }
.rd-ribbon.name .nm { font-size: 33px; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff;
  -webkit-text-stroke: 7px var(--ol); }
.rd .rd-btn.rd-x { position: absolute; right: 14px; top: 44px; font-size: 24px; }
.rd-ssub { display: flex; justify-content: center; align-items: center; gap: 13px; margin-top: 50px; }
.rd-tag { height: 30px; box-sizing: border-box; padding: 0 11px; display: inline-flex; align-items: center; border: 3px solid var(--ol); border-radius: 11px; background: #d8d0ef;
  color: #3b3350; font-size: 17px; font-weight: 800; letter-spacing: 0.8px; }
.rd-tag.final { background: linear-gradient(180deg, #ff8a8a, #d9475a); color: #fff; -webkit-text-stroke: 4px var(--ol); }
.rd-stage { position: relative; flex: none; width: 520px; height: 238px; margin-top: 6px; }
.rd-stage .rd-blk { position: absolute; display: block; filter: var(--rd-sh); }
.rd-stage .rd-bubble.side { left: 252px; top: 18px; max-width: 262px; white-space: normal; font-size: 20px; transform-origin: 0 60%; }
.rd-stage .rd-bubble.side::after { left: -14px; bottom: auto; top: 46px; transform: rotate(135deg) skew(8deg, 8deg); }
.rd-boss { width: 490px; box-sizing: border-box; margin-top: 6px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 4px solid var(--ol); border-radius: 15px;
  background: linear-gradient(180deg, #7a3550, #4a1f33); font-size: 18px; font-weight: 700; line-height: 1.2; color: #ffe9ee; }
.rd-boss > b { flex: none; padding: 1px 8px; border: 3px solid var(--ol); border-radius: 9px; background: #e8606b; color: #fff; font-size: 15px; line-height: 20px; letter-spacing: 0.7px;
  -webkit-text-stroke: 4px var(--ol); }
.rd-boss > span { flex: 1; }
.rd-sbody > .bd-r-more { width: 470px; margin-top: 6px; font-size: 16px; color: #e8e2ff; }
.rd-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 8px; margin-top: 22px; padding: 0 8px; }
.rd-vs { margin-top: 16px; font-size: 38px; font-style: italic; font-weight: 800; line-height: 1; color: #ffe36b; -webkit-text-stroke: 8px var(--ol); }
.rd-sbody { flex: 1; min-height: 0; width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column;
  align-items: center; padding-bottom: 14px; }
.rd-sbody::-webkit-scrollbar { display: none; }
.rd-sfoot { flex: none; width: 100%; box-sizing: border-box; padding: 14px 18px 24px; display: flex; align-items: center; justify-content: center; gap: 16px;
  border-top: 4px solid rgba(10, 8, 24, 0.35); }
.rd-sfoot .rd-battle { width: 317px; height: 99px; font-size: 43px; }
.rd .rd-btn.sq.big { width: 74px; height: 74px; border-radius: 19px; font-size: 34px; }
.rd-ask { flex-direction: column; }
.rd-ask .q { font-size: 21px; text-align: center; -webkit-text-stroke: 5px var(--ol); }

.rd.wide .rd-road, .rd.wide .rd-vign { left: max(10px, calc(50% - 560px)); right: auto; width: 560px; bottom: 0; }
.rd.wide .rd-dock { display: none; }
.rd.wide .rd-sheetwrap.side { left: auto; right: max(16px, calc(50% - 560px)); top: 140px; bottom: 14px; width: 540px; inset-inline-start: auto; }
.rd.wide .rd-sheetwrap.side .rd-sheet { height: auto; top: 0; border: 5px solid var(--ol); border-radius: 30px; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .rd-col.rd-rise, .rd-pin, .rd-bubble, .rd-sheet, .rd-scrim, .rd-slab.cur .rd-fig { animation: none; }
  .rd-slab { transition: none; }
}
.rd-take.more { background: linear-gradient(180deg, #ff8fb1, #e0457a); }
.rd.wide .rd-stage { height: 192px; transform: scale(0.8); transform-origin: 50% 0; }
/* stakes (2026-10-20): the league's hearts on the climb's ribbon */
.rd-ribbon .bd-hearts { gap: 2px; flex: none; }
.rd-ribbon .bd-hearts .heart { width: 20px; height: 18px; }
.rd-ribbon.hearts .lg { font-size: 19px; }
/* guest bosses (2026-10-20): the tag on a guest's final */
.rd-tag.guest { background: linear-gradient(180deg, #ffe36b, #e8a93a); color: #fff; -webkit-text-stroke: 4px var(--ol); }
/* side modes (2026-10-20): the MODES sheet, a plate a mode */
.rd-mbody { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin-top: 108px; padding-bottom: 24px; overflow-y: auto; }
.rd-mplate { position: relative; width: 494px; box-sizing: border-box; display: grid; grid-template-columns: 156px 1fr; gap: 8px 14px; align-items: center; padding: 12px 14px;
  border: 4px solid var(--ol); border-radius: 20px; background: linear-gradient(180deg, #5d5480, #3d3558); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.18), 0 6px 0 rgba(10, 8, 24, 0.4); }
.rd-mdio, .rd-mfaces { grid-row: 1 / span 2; width: 156px; }
.rd-mdio { height: auto; display: block; filter: var(--rd-sh); }
.rd-mfaces { display: flex; justify-content: center; gap: 2px; }
.rd-mfaces canvas, .rd-mfaces img { height: 64px; width: auto; }
.rd-mtxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-mname { font-size: 30px; font-weight: 800; line-height: 1.05; color: #fff; -webkit-text-stroke: 6px var(--ol); paint-order: stroke fill; }
.rd-mrule { font-size: 18px; font-weight: 700; line-height: 1.2; color: #efe9ff; }
.rd-mwhere { font-size: 15px; font-weight: 800; color: #ffe36b; }
.rd .rd-mplate .rd-mgo { grid-column: 2; justify-self: start; width: 210px; min-height: 58px; font-size: 24px; }
.rd-mlock { grid-column: 2; font-size: 16px; font-weight: 800; color: #c9c0e6; }
.rd-mplate.locked .rd-mdio { filter: grayscale(1) brightness(0.7); }
.rd-mplate .rd-ask { grid-column: 2; }