/* High Level Meta: counter cycles */
.cc-split { display: grid; grid-template-columns: 700px 1fr; gap: 40px; align-items: center; height: 100%; }
.slide.cc { padding: 40px 80px 40px 60px; }
.cc-side h2 { font-size: 44px; margin-bottom: 8px; }
.cc-side .kicker { font-size: 24px; margin-bottom: 4px; }
.cc-legend { font-size: 20px; color: var(--muted); margin: 6px 0 18px; }
.cc-legend b { color: var(--good); }
.cc-legend i { font-style: normal; color: var(--bad); }

/* ---------- wheel ---------- */
svg.cc-wheel { width: 700px; height: 700px; display: block; overflow: visible; font-family: var(--font); }
.cc-ring { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 10; }
.cc-edge { cursor: help; transition: opacity .25s; }
.cc-edge.hide { display: none; }
.cc-hit { fill: none; stroke: transparent; stroke-width: 26; }
.cc-line { fill: none; stroke: var(--accent-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 10; animation: cc-flow 1.1s linear infinite; opacity: .8; transition: stroke .2s, stroke-width .2s, opacity .2s; }
.cc-edge.s2 .cc-line { stroke-width: 4; opacity: .55; }
.cc-head { fill: var(--accent-2); transition: fill .2s; }
@keyframes cc-flow { to { stroke-dashoffset: -24; } }
.focus .cc-edge { opacity: .12; }
.focus .cc-edge.win, .focus .cc-edge.lose, .focus .cc-edge.hot { opacity: 1; }
.cc-edge.win .cc-line { stroke: var(--good); stroke-width: 7; opacity: 1; }
.cc-edge.win .cc-head { fill: var(--good); }
.cc-edge.lose .cc-line { stroke: var(--bad); stroke-width: 7; opacity: 1; }
.cc-edge.lose .cc-head { fill: var(--bad); }
.cc-edge.hot .cc-line { stroke: var(--accent-3); stroke-width: 8; opacity: 1; }
.cc-edge.hot .cc-head { fill: var(--accent-3); }

.cc-node { cursor: pointer; outline: none; }
.cc-disc { transition: transform .2s; }
.cc-node:hover .cc-disc, .cc-node:focus-visible .cc-disc, .cc-node.sel .cc-disc { transform: scale(1.06); }
.cc-rim { fill: none; stroke-width: 5; }
.cc-band { fill: rgba(9, 16, 40, .8); }
.cc-cream { fill: #fffaf0; }
.cc-shape > * { stroke: rgba(0,0,0,.2); stroke-width: 2; }
.cc-badge { fill: #152044; stroke: #ffb951; stroke-width: 2; }
.cc-halo { fill: none; stroke: transparent; stroke-width: 7; transition: stroke .2s; }
.cc-node:hover .cc-halo, .cc-node:focus-visible .cc-halo { stroke: rgba(251,251,253,.45); }
.cc-node.sel .cc-halo { stroke: var(--paper); }
.cc-node.beaten .cc-halo { stroke: var(--good); }
.cc-node.counter .cc-halo { stroke: var(--bad); }
.cc-node.pop .cc-halo { stroke: var(--accent-3); }
.cc-node.next .cc-halo { stroke: var(--good); }
.focus .cc-node:not(.sel):not(.beaten):not(.counter):not(.pop):not(.next) { opacity: .35; }
.cc-nm { text-anchor: middle; dominant-baseline: middle; fill: #fff; font-weight: 700; pointer-events: none; text-transform: uppercase; letter-spacing: .04em; }
.cc-pill { opacity: 0; transition: opacity .2s; pointer-events: none; }
.cc-pill rect { fill: #061636; stroke-width: 2; }
.cc-pill text { text-anchor: middle; font-size: 19px; font-weight: 600; }
.beaten .cc-pill, .counter .cc-pill, .pop .cc-pill, .next .cc-pill { opacity: 1; }
.beaten .cc-pill rect, .next .cc-pill rect { stroke: var(--good); } .beaten .cc-pill text, .next .cc-pill text { fill: var(--good); }
.counter .cc-pill rect { stroke: var(--bad); } .counter .cc-pill text { fill: var(--bad); }
.pop .cc-pill rect { stroke: var(--accent-3); } .pop .cc-pill text { fill: var(--accent-3); }

/* ---------- side panel ---------- */
.cc-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 28px; height: 330px; overflow: hidden;   /* fixed, so hovering never moves the slide */ font-size: 22px; line-height: 1.4; }
.cc-panel .cc-idle { color: var(--muted); font-size: 24px; margin: 0; }
.cc-name { font-family: var(--display); font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cc-name b { font-weight: 700; }
.cc-verb { color: var(--accent-3); font-size: .8em; margin: 0 6px; }
.slide .cc-tag, .slide .cc-why { font-size: 22px; color: var(--muted); margin: 6px 0 12px; }
.slide .cc-why { color: var(--text); }
.cc-kick { font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-3); }
.cc-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cc-row > b { font-family: var(--display); font-size: 18px; text-transform: uppercase; padding-top: 3px; }
.cc-row.win > b { color: var(--good); } .cc-row.lose > b { color: var(--bad); }
.cc-row ul { list-style: none; margin: 0; padding: 0; }
.slide .cc-row li { font-size: 21px; line-height: 1.35; margin-bottom: 6px; }
.cc-row li span { color: var(--muted); margin-left: 8px; }

/* the slide's original notation */
.cc-notation { margin-top: 18px; font-size: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cc-notation::before { content: "on the slide:"; font-size: 17px; color: var(--muted); margin-right: 8px; text-transform: uppercase; letter-spacing: .08em; }
.cc-tok { font-weight: 600; }
.cc-lt { background: var(--navy-2); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; margin: 0 4px; font-size: 24px; cursor: help; color: var(--accent-3); }
.cc-lt:hover, .cc-lt:focus-visible { border-color: var(--accent-3); }
.cc-tools { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.cc-tools .btn { font-size: 20px; padding: 10px 18px; }

/* ---------- MOBA grid ---------- */
.cc-grid table { border-collapse: separate; border-spacing: 4px; font-size: 18px; }
.cc-grid th { font-weight: 500; color: var(--muted); padding: 2px 6px; text-align: left; white-space: nowrap; }
.cc-grid tr:first-child th { text-align: center; font-size: 22px; }
.cc-grid th small { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.cc-grid .cc-corner { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; vertical-align: bottom; }
.cc-grid td { width: 92px; height: 44px; text-align: center; border-radius: 8px; font-weight: 600; font-size: 16px; letter-spacing: .06em; cursor: help; }
.cc-grid td.w { background: rgba(95,224,160,.18); color: var(--good); }
.cc-grid td.l { background: rgba(255,107,107,.16); color: var(--bad); }
.cc-grid td.n { background: rgba(169,183,214,.08); color: var(--muted); font-weight: 400; }
.cc-grid td.self { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(169,183,214,.08) 6px 12px); cursor: default; }
.cc-grid td:not(.self):hover { outline: 2px solid var(--accent-3); }
.slide .cc-count { font-size: 21px; margin: 12px 0 0; height: 60px; color: var(--muted); }
.cc-count .good { color: var(--good); } .cc-count .bad { color: var(--bad); }
.cc-grid-wrap .cc-panel { height: 128px; padding: 14px 20px; margin-top: 12px; }
.cc-grid-wrap .cc-name { font-size: 24px; }
.cc-grid-wrap .cc-why, .cc-grid-wrap .cc-tag { font-size: 19px; margin: 4px 0 0; }

/* ---------- drill ---------- */
.slide .cc-q-prompt { font-size: 34px; line-height: 1.35; margin: 0 0 18px; }
.cc-q-opts { display: flex; gap: 12px; flex-wrap: wrap; }
.cc-q-opts .btn { font-size: 24px; }
.cc-q-opts .btn.good { background: rgba(95,224,160,.2); border-color: var(--good); }
.cc-q-opts .btn.bad { background: rgba(255,107,107,.18); border-color: var(--bad); }
.slide .cc-q-out { font-size: 24px; height: 110px; margin: 18px 0; }
.cc-q-score { font-family: var(--display); color: var(--accent-3); font-size: 28px; margin-left: 16px; }
.quiz .cc-node { cursor: default; }

/* ---------- summary ---------- */
.cc-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 10px; }
.cc-three svg.cc-wheel { width: 100%; height: auto; aspect-ratio: 1; }
.cc-three h3 { font-size: 26px; text-align: center; margin-bottom: 0; }
.slide .cc-three p { font-size: 22px; color: var(--muted); text-align: center; margin: 4px 0 0; }
[data-demo="cc-moba"] .cc-panel { height: 410px; }

/* inline option pictures in text: game art or the deck shape */
.cc-mi { width: 1.15em; height: 1.15em; border-radius: 50%; object-fit: cover; vertical-align: -.2em; margin-right: .3em; }
svg.cc-mi { border-radius: 0; }
.cc-grid tr:first-child .cc-mi { display: block; width: 34px; height: 34px; margin: 0 auto 2px; }