.ci-aprofile * { box-sizing: border-box; }
.ci-aprofile { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 40px); padding: 20px; width: 100%; }
@media (max-width: 1199.98px) { .ci-aprofile { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-aprofile { padding-left: 20px; padding-right: 20px; } }
/* v5 authors frames (0498): a 1px #d9d9d9 frame inside the 20px pad; the byline row keeps its own 16 (avatar 36 in). */
.ci-aprofile-card { background: #f3f3f3; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; flex-direction: column; gap: 20px; padding: 19px; }
.ci-aprofile-top { align-items: center; display: flex; gap: 20px; padding: 16px; }
.ci-aprofile-avatar { background: #d9d9d9; border-radius: 50%; display: flex; flex: none; overflow: hidden; }
.ci-aprofile-photo { display: block; height: 96px; object-fit: cover; width: 96px; }
.ci-aprofile-photo[src=""], .ci-aprofile-photo:not([src]) { opacity: 0; }
.ci-aprofile-body { display: flex; flex: 1; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; overflow-wrap: break-word; }
.ci-aprofile-nameblock { align-self: flex-start; display: flex; flex-direction: column; gap: 8px; max-width: 100%; min-width: 0; }
.ci-aprofile-name { color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.98px 0 -5.74px; }
.ci-aprofile-underline { background: #0c866a; display: block; height: 1.5px; }
/* The socials' own row: under the byline on a desktop, last below it (v5 icon-row, 30px discs 8 apart); a wrapped row
   sits 14 under, so no two 44px-high hit areas share a pixel (PR #590 R1.4). */
.ci-aprofile-socials { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 8px; }
/* NL link/social: a 44px-high hit area (4px across, half the gap), the 16px glyph disc (::after) darkens, a double ring. */
.ci-aprofile-soc { align-items: center; background: #aaa1ff; border-radius: 50%; display: inline-flex; flex: none; height: 30px; justify-content: center; position: relative; width: 30px; }
.ci-aprofile-soc::before { content: ''; inset: -7px -4px; position: absolute; }
.ci-aprofile-soc::after { border-radius: 50%; content: ''; height: 16px; left: 7px; position: absolute; top: 7px; width: 16px; }
.ci-aprofile-soc:hover::after { background: #4955dd; }
.ci-aprofile-soc:active::after { background: #3d31b8; }
.ci-aprofile-soc:focus-visible { box-shadow: 0 0 0 1px #f3f3f3, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-aprofile-soc-img { display: block; height: 16px; object-fit: contain; position: relative; width: 16px; z-index: 1; }
.ci-aprofile-soc-img[src=''], .ci-aprofile-soc-img:not([src]) { display: none; }
.ci-aprofile-role, .ci-aprofile-bio { font-size: 14px; line-height: 20px; margin: -4.73px 0 -5.4px; }
.ci-aprofile-role { color: #545658; }
.ci-aprofile-bio { color: #202224; }
.ci-aprofile-bio > * { margin: 0; }
.ci-aprofile-bio > * + * { margin-top: 15px; }
.ci-aprofile-stats { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A 48px tile: label and count inside the 1px frame, with no category icon. */
.ci-aprofile-stat { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 8px; display: flex; gap: 8px; justify-content: space-between; padding: 11px 19px; }
.ci-aprofile-stat-label { color: #202224; flex: 1; font-size: 16px; line-height: 24px; min-width: 0; overflow-wrap: anywhere; }
.ci-aprofile-stat-count { color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; }
/* Under the desktop (authors-tablet and -mobile): the avatar beside the name in two 30/36 lines without a separator,
   role and bio full width, stats in one column, socials last. The body dissolves into the top row's grid. */
@media (max-width: 1199.98px) {
  .ci-aprofile-top { display: grid; gap: 20px; grid-template-columns: 96px minmax(0, 1fr); padding: 0; }
  .ci-aprofile-body { display: contents; }
  .ci-aprofile-avatar { grid-column: 1; grid-row: 1; }
  .ci-aprofile-nameblock { align-self: center; grid-column: 2; grid-row: 1; }
  .ci-aprofile-name { display: flex; flex-direction: column; font-size: 30px; gap: 8px; hyphens: auto; line-height: 36px; margin: 0; }
  .ci-aprofile-firstname, .ci-aprofile-surname { display: block; margin: -6px 0 -9px; }
  html:not([data-editor-canvas]) .ci-aprofile-surname:empty { display: none; }
  .ci-aprofile-underline { display: none; }
  .ci-aprofile-role, .ci-aprofile-bio { grid-column: 1 / -1; line-height: 18px; margin: -3px 0 -5px; }
  .ci-aprofile-stats { grid-template-columns: minmax(0, 1fr); }
  .ci-aprofile-stat-label { font-size: 14px; line-height: 22px; }
  .ci-aprofile-stat-count { font-size: 14px; }
  .ci-aprofile-socials { order: 1; }
}
.ci-text * { box-sizing: border-box; }
.ci-text { box-sizing: border-box; color: #202224; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px 0; }
@media (max-width: 1199.98px) { .ci-text { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-text { padding-left: 20px; padding-right: 20px; } }
.ci-text p { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
/* The body itself, for a value that arrives as bare text (a plain TEXT field
   mapped onto this rich leaf): the same type as a paragraph, not the browser's. */
.ci-text-body { font-size: 16px; line-height: 1.5; }
.ci-text-body > :first-child { margin-top: 0; }
.ci-text-body > :last-child { margin-bottom: 0; }
.ci-text a { color: #5749dd; text-decoration: none; }
.ci-text a:hover { text-decoration: underline; }
.ci-text ul, .ci-text ol { margin: 0 0 20px; padding-left: 24px; }
.ci-text li { margin-bottom: 6px; }
.ci-text strong { font-weight: 700; }
/* Rich-text subheadings (e.g. the about-page mission copy). */
.ci-text h3 { font-size: 22px; letter-spacing: -.02em; margin: 26px 0 14px; }
.ci-text h4 { font-size: 18px; margin: 22px 0 12px; }
/* link/inline Focus: the 2px ring 3px out, r8 round the ring. */
.ci-text a:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
/* text-row: the decor/dot-6 at the column edge on the first line's caps, the words 18px in, rows 44 apart. The
   native marker stays, unpainted, so WebKit keeps the list a list (the callout's way). */
.ci-text-body ul { padding-left: 18px; }
.ci-text-body ul > li { position: relative; }
.ci-text-body ul > li::marker { color: transparent; }
.ci-text-body ul > li::before { -webkit-print-color-adjust: exact; background: linear-gradient(217.12deg, #ffbe04 42.21%, #e03327 230.55%); border-radius: 50%; content: ''; height: 6px; left: -18px; position: absolute; print-color-adjust: exact; top: 8px; width: 6px; }
/* Forced colours repaint the marker whatever its colour: there it is the bullet and the dot goes. */
@media (forced-colors: active) { .ci-text-body ul > li::before { content: none; } }
.ci-text-body li { margin-bottom: 20px; }
.ci-text-body li:last-child { margin-bottom: 0; }
/* Rich-text subheadings: v5's Section Title, 700 24/28. */
.ci-text-body h3 { font-size: 24px; letter-spacing: normal; line-height: 28px; }
/* The format bar's Quote is the NL content/quote: the inside frame takes no room, both
   21px marks sit 20px in from the top corners, the closing one turned round. */
.ci-text blockquote { font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.5; margin: 0 0 20px; overflow-wrap: anywhere; }
/* One frame: a quote nested in it (imported, pasted) reads as quote text in its column. */
.ci-text-body > blockquote { background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #0c866a; padding: 20px 49px; position: relative; }
.ci-text-body > blockquote::before, .ci-text-body > blockquote::after { -webkit-print-color-adjust: exact; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Cpath%20d%3D%22M11.812%2010.4995L15.7495%2010.4995C16.4714%2010.4995%2017.062%2011.0901%2017.062%2011.812L17.062%2015.7495C17.062%2016.4714%2016.4714%2017.062%2015.7495%2017.062L11.812%2017.062C11.0901%2017.062%2010.4995%2016.4714%2010.4995%2015.7495L10.4995%2011.812C10.4995%2011.0901%2011.0901%2010.4995%2011.812%2010.4995ZM3.937%2010.4995L7.8745%2010.4995C8.5964%2010.4995%209.187%2011.0901%209.187%2011.812L9.187%2015.7495C9.187%2016.4714%208.5964%2017.062%207.8745%2017.062L3.937%2017.062C3.2151%2017.062%202.6245%2016.4714%202.6245%2015.7495L2.6245%2011.812C2.6245%2011.0901%203.2151%2010.4995%203.937%2010.4995Z%20M13.1256%2010.4995L13.1256%2013.1245C13.1256%2013.8494%2012.538%2014.437%2011.8131%2014.437C11.0882%2014.437%2010.5006%2013.8494%2010.5006%2013.1245L10.5006%2010.4995C10.5006%208.2703%2011.2395%205.9359%2012.8539%204.3215C13.3664%203.809%2014.1973%203.809%2014.7098%204.3215C15.2224%204.8341%2015.2224%205.6649%2014.7098%206.1775C13.6992%207.1882%2013.1256%208.7913%2013.1256%2010.4995ZM5.2506%2010.4995L5.2506%2013.1245C5.2506%2013.8494%204.663%2014.437%203.9381%2014.437C3.2132%2014.437%202.6256%2013.8494%202.6256%2013.1245L2.6256%2010.4995C2.6256%208.2703%203.3645%205.9359%204.9789%204.3215C5.4914%203.809%206.3223%203.809%206.8348%204.3215C7.3474%204.8341%207.3474%205.6649%206.8348%206.1775C5.8242%207.1882%205.2506%208.7913%205.2506%2010.4995Z%22%20fill%3D%22%230C866A%22%2F%3E%3C%2Fsvg%3E") center / 21px 21px no-repeat; content: ''; height: 21px; position: absolute; print-color-adjust: exact; top: 20px; width: 21px; }
.ci-text-body > blockquote::before { left: 20px; }
.ci-text-body > blockquote::after { right: 20px; transform: rotate(180deg); }
/* Its blocks keep the 20px rhythm; the last one, at any depth, leaves the padding alone. */
.ci-text blockquote > * { margin: 0 0 20px; }
.ci-text blockquote :last-child { margin-bottom: 0; }
/* Forced colours and print drop box-shadows: an inset outline keeps the frame in place. */
@media print, (forced-colors: active) { .ci-text-body > blockquote { box-shadow: none; outline: 1px solid #0c866a; outline-offset: -1px; } }
.ci-gpq * { box-sizing: border-box; }
.ci-gpq { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; width: 100%; }
@media (max-width: 1199.98px) { .ci-gpq { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gpq { padding-left: 20px; padding-right: 20px; } }
/* The frame is an inset shadow: Figma's inside stroke takes no room (COMPONENT_GENERATION.md). */
.ci-gpq-panel { align-items: flex-start; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #0c866a; display: flex; gap: 8px; padding: 20px; }
.ci-gpq-mark { display: block; flex: none; height: 21px; object-fit: contain; width: 21px; }
/* One uploaded glyph serves both ends: the closing mark IS the opening one
   turned around, top-aligned like it, exactly as content/quote draws it. */
.ci-gpq-mark-close { transform: rotate(180deg); }
.ci-gpq-text { flex: 1; font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
/* Every rich-text block, nested ones too (p in a blockquote or li), keeps the 20px rhythm and the marks' top line. */
.ci-gpq-text > * { margin: 0 0 20px; }
.ci-gpq-text p { margin: 0 0 20px; }
.ci-gpq-text :last-child { margin-bottom: 0; }
/* Forced colours and print drop box-shadows: a real border (inside the same 20px) keeps the frame. */
@media print, (forced-colors: active) { .ci-gpq-panel { border: 1px solid #0c866a; box-shadow: none; padding: 19px; } }
/* v5 tablet and phone frames: 500 italic 14/24 (DREAM-831). */
@media (max-width: 1199.98px) { .ci-gpq-text { font-size: 14px; line-height: 24px; } }
.ci-gpq a[href] { color: #5749dd; text-decoration: none; }
.ci-gpq a[href]:hover { text-decoration: underline; }
.ci-gpq a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
/* One rule per selector per context (COMPONENT_GENERATION.md §1). */
.ci-games-carousel * { box-sizing: border-box; }
.ci-games-carousel { box-sizing: border-box; color: #202224; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-games-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-games-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-games-carousel-viewport { position: relative; }
/* 5px of padding round the slides, so the card's focus ring is not clipped. */
.ci-games-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-games-carousel-track::-webkit-scrollbar { display: none; }
.ci-games-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-games-carousel-track.is-dragging a { pointer-events: none; }
.ci-slide { flex: 0 0 220px; list-style: none; scroll-snap-align: start; }
/* Tablets: v5's 208px cards 24 apart, the next one peeking 24px into the 720 column (DREAM-746). */
@media (max-width: 1199.98px) { .ci-games-carousel-track { gap: 24px; } .ci-slide { flex-basis: 208px; } }

/* The art keeps the design's 220x300 at every column width; the caption hangs
   27px below it, which the link's padding counts (the caption is absolute). */
.ci-game-card { container: gcard / inline-size; position: relative; width: 100%; }
.ci-game-link { color: inherit; display: block; padding-bottom: 27px; position: relative; text-decoration: none; }
.ci-game-link:focus-visible { outline: none; }
/* An outline, not a box-shadow: forced-colors mode paints no shadow. */
.ci-game-link:focus-visible::after { border-radius: 12px; content: ''; inset: -3px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
.ci-game-art { aspect-ratio: 220 / 300; background: linear-gradient(160deg, #2b2b33, #17171c); border-radius: 12px; overflow: hidden; position: relative; }
.ci-game-image { display: block; height: 100%; object-fit: cover; width: 100%; }
.ci-game-image[src=""], .ci-game-image:not([src]) { opacity: 0; }
.ci-game-art::after { background: linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); content: ''; inset: 0; pointer-events: none; position: absolute; }
.ci-game-link:active .ci-game-art::after { background: linear-gradient(180deg, rgba(6, 9, 38, .18), rgba(4, 7, 38, .71)), linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
/* Decorative: a click on it is the link's, and the canvas selects the art. */
.ci-game-play { align-items: center; background: #0c866a; border-radius: 8px; color: #fff; display: none; left: calc(50% - 34px); padding: 12px 24px; pointer-events: none; position: absolute; top: 38.67%; z-index: 1; }
.ci-game-link:active .ci-game-play { background: #1b5547; color: #b2b2b2; display: flex; }
.ci-game-play-icon { display: block; flex: none; height: 20px; width: 20px; }
/* 6px above the 80px caption (v4 card/game: y213 / Mobile y142). */
.ci-game-badges { bottom: 59px; display: flex; gap: 8px; justify-content: space-between; left: 20px; position: absolute; right: 20px; z-index: 1; }
/* RTP keeps the right edge by its own margin (a game with no score has no
   rating badge) and is the badge that gives way on a narrow card. */
.ci-game-rtp { margin-left: auto; min-width: 0; }
.ci-game-badge { align-items: center; background: #202224; border: 1px solid #fff; border-radius: 8px; color: #fff; display: inline-flex; font-size: 14px; font-weight: 500; gap: 4px; height: 28px; line-height: 22px; padding: 0 7px; white-space: nowrap; }
.ci-game-star { display: block; flex: none; height: 12px; width: 12px; }
.ci-game-star-fill { fill: #ffb310; }
.ci-game-score { display: block; margin: -5px 0 -7px; }
.ci-game-rtp-value { display: block; margin: -5px 0 -7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* content/game-caption: a fixed 80px box, its text centred, so a one- or two-line name never moves the card (v4/v5). */
.ci-game-info { background: #f3f3f3; border-radius: 8px; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; height: 80px; justify-content: center; left: 20px; padding: 8px; position: absolute; right: 20px; text-align: center; }
.ci-game-name { border-radius: 4px; display: block; padding: 4px; }
/* Two lines, then "…" (v5 maxLines 2: "Gates of Olympus 1000 Dice"). */
.ci-game-name-text { font-size: 16px; font-weight: 700; line-height: 22px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -6px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); overflow-wrap: anywhere; }
.ci-game-link:active .ci-game-name-text { text-decoration: underline; }
.ci-game-provider { color: #545658; font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hover only where a pointer hovers: a tap must open the game, not reveal it. */
@media (hover: hover) {
  .ci-game-link:hover .ci-game-art::after { background: linear-gradient(180deg, rgba(6, 9, 38, .18), rgba(4, 7, 38, .71)), linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
  .ci-game-link:hover .ci-game-play { display: flex; }
  .ci-game-link:hover .ci-game-name-text { text-decoration: underline; }
}
/* The card's own width picks Mobile too (DREAM-746): a 154-190px tablet card, and the home strip's six at 183 (0496). */
@container gcard (max-width: 189.98px) {
  .ci-game-link { padding-bottom: 26px; }
  .ci-game-art { aspect-ratio: 169 / 230; }
  .ci-game-badges { bottom: 60px; left: 8px; right: 8px; }
  .ci-game-info { left: 8px; padding: 8px 4px; right: 8px; }
  /* card/game Layout=Mobile: the title fills the caption's inner width (145px of a 169px card, 0421). */
  .ci-game-name { padding: 4px 0; }
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
}
/* content/game-caption in every v5 tablet and phone frame: the title 700 14/22, a Desktop card too (DREAM-827). */
@media (max-width: 1199.98px) {
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
}
/* The phone frames' provider line 400 14/18 (DREAM-827). */
@media (max-width: 560px) {
  .ci-game-link { padding-bottom: 26px; }
  .ci-game-art { aspect-ratio: 169 / 230; }
  .ci-game-badges { bottom: 60px; left: 8px; right: 8px; }
  .ci-game-info { left: 8px; padding: 8px 4px; right: 8px; }
  /* card/game Layout=Mobile: the title fills the caption's inner width (145px of a 169px card, 0421). */
  .ci-game-name { padding: 4px 0; }
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
  .ci-game-provider { line-height: 18px; margin: -3px 0 -5px; }
}

/* A drag is no press: the card it started on keeps its rest look (0385's scope).
   One class more than the card's :active rules, which a grid on the page repeats later. */
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-art::after { background: linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-play { display: none; }
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-name-text { text-decoration: none; }
.ci-games-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-games-carousel-next { right: 12px; }
.ci-games-carousel-prev { left: 12px; }
.ci-games-carousel-prev .ci-games-carousel-icon { transform: scaleX(-1); }
.ci-games-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-games-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-games-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-games-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-games-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-games-carousel-btn:focus-visible { outline: none; }
.ci-games-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-games-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-games-carousel-btn { display: none; }
}
@media (max-width: 560px) {
  .ci-games-carousel-track { gap: 12px; }
  .ci-slide { flex-basis: 169px; }
}
.ci-guides-carousel * { box-sizing: border-box; }
.ci-guides-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-guides-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-guides-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-guides-carousel-viewport { position: relative; }
.ci-guides-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-guides-carousel-track::-webkit-scrollbar { display: none; }
.ci-guides-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-guides-carousel-track.is-dragging a { pointer-events: none; }
/* v5 (change document request 3): four 285px cards across the 1200 column (4 x 285 + 3 x 20). */
.ci-gslide { flex: 0 0 285px; list-style: none; scroll-snap-align: start; }
/* Tablets: v5's 328px cards, the next one peeking 24px into the 720 column (DREAM-746). */
@media (max-width: 1199.98px) { .ci-gslide { flex-basis: 328px; } }
.ci-guide-card { background: #1c1c1c; border-radius: 12px; display: flex; flex-direction: column; height: 410px; justify-content: flex-end; position: relative; }
.ci-guide-thumb { background: linear-gradient(160deg, #2b2b33, #17171c) top / 100% 77.28% no-repeat; border-radius: 12px; display: block; inset: 0; overflow: hidden; position: absolute; }
.ci-guide-image { display: block; height: 77.28%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.ci-guide-image[src=""], .ci-guide-image:not([src]) { opacity: 0; }
/* Stacked over the photo by z-index, not position: the card, not the body, places the title link's ring (0459). */
.ci-guide-body { background: linear-gradient(180deg, rgba(28, 28, 28, 0), #1c1c1c 75.49px); border-radius: 0 0 12px 12px; color: #fff; display: flex; flex-direction: column; gap: 12px; margin-top: -45.47px; padding: 61.47px 16px 16px; z-index: 0; }
.ci-guide-title { display: block; font-size: 24px; font-weight: 700; line-height: 28px; margin: 0; z-index: 1; }
/* Only the title is the link, out of flow; its ring goes round the card (Focus). v5 hover and press draw a 2px bar,
   the link's own background, the content's width and 21px under the title's box (@16,265, DREAM-812): its foot pad. */
.ci-guide-link { color: inherit; display: block; margin: -9px 0 -23px; padding: 9px 0 23px; text-decoration: none; }
.ci-guide-link:focus-visible { outline: none; }
.ci-guide-link:focus-visible::after { border-radius: 5px; content: ''; inset: 0; outline: 2px solid #5749dd; outline-offset: 3px; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-guide-link:hover { background: linear-gradient(#0c866a, #0c866a) left bottom / 100% 2px no-repeat; } }
.ci-guide-link:active { background: linear-gradient(#1b5547, #1b5547) left bottom / 100% 2px no-repeat; }
@media (forced-colors: active) { .ci-guide-link:hover .ci-guide-title-text, .ci-guide-link:active .ci-guide-title-text { text-decoration: underline; } }
.ci-guide-card:not(:has(.ci-guide-link[href]:not([href=""]))) { opacity: .4; }
/* Every row after the title stacks over its link's foot pad (z-index 2, flex items): the link's hit area ends at the
   next row, 44px at least (49 with no excerpt), and the bar still shows through (DREAM-812). */
.ci-guide-text { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 4; line-clamp: 4; line-height: 20px; margin: -4.73px 0 -5.4px; overflow: hidden; z-index: 2; }
.ci-guide-text:empty { display: none; }
.ci-guide-meta { align-items: center; display: flex; margin: 0; z-index: 2; }
.ci-guide-byline { align-items: center; display: flex; gap: 12px; max-width: 100%; min-width: 0; }
.ci-guide-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-guide-avatar[src=""], .ci-guide-avatar:not([src]) { display: none; }
.ci-guide-author { font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.98px 0 -5.74px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No author (DREAM-708): both name leaves drop, and the byline row with them. */
.ci-guide-meta:not(:has(.ci-guide-author-first)):not(:has(.ci-guide-author-last)) { display: none; }
/* v5 footer row: date | topic on the left, Lees verder (where the block has it) on the right. */
.ci-guide-foot { align-items: center; display: flex; gap: 12px; min-height: 12px; z-index: 2; }
.ci-guide-facts { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-guide-date { flex: none; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-guide-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-guide-sep { background: #fff; flex: none; height: 12px; width: 1px; }
.ci-guide-sep:first-child, .ci-guide-sep:last-child { display: none; }
.ci-guide-facts:has(> .ci-guide-sep:only-child) { display: none; }
.ci-guide-facts { min-width: 0; }
@media (forced-colors: active) { .ci-guide-sep { background: CanvasText; } }
.ci-guide-foot:not(:has(.ci-guide-date)):not(:has(.ci-guide-category)):not(:has(.ci-guide-more)) { display: none; }
/* The row carries the link's look, so an unwrapped Lees verder (no URL, 0459) keeps it in the Disabled card. */
.ci-guide-more { color: #0c866a; display: flex; flex: none; font-size: 16px; font-weight: 700; gap: 8px; height: 11px; line-height: 22px; margin-left: auto; }
.ci-guide-more-link { align-items: center; border-radius: 5px; color: inherit; display: flex; gap: 8px; position: relative; text-decoration: none; }
.ci-guide-more-link::before { content: ''; inset: calc(50% - 22px) 0; position: absolute; }
.ci-guide-more-link:hover { color: #0d9070; }
.ci-guide-more-link:active { color: #1b5547; }
.ci-guide-more-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-guide-more-label { text-box: trim-both cap alphabetic; white-space: nowrap; }
.ci-guide-more-icon { display: block; flex: none; height: 12px; width: 12px; }
/* v5 tablet and phone frames (DREAM-830): the card keeps its box and draws smaller type, its trims recomputed. */
@media (max-width: 1199.98px) {
  .ci-guide-title { font-size: 22px; }
  .ci-guide-text { line-height: 18px; margin: -3.734375px 0 -4.265625px; }
  .ci-guide-author { font-size: 14px; margin: -5.734375px 0 -6.265625px; }
  .ci-guide-date, .ci-guide-category { line-height: 22px; margin: -7px 0 -7px; }
  .ci-guide-more { font-size: 14px; height: 10px; }
}
/* A drag is no press: the title it started on keeps its rest look (as the news and author carousels). */
.ci-guides-carousel-track.is-dragging .ci-guide-link { background: none; }
.ci-guides-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-guides-carousel-next { right: 12px; }
.ci-guides-carousel-prev { left: 12px; }
.ci-guides-carousel-prev .ci-guides-carousel-icon { transform: scaleX(-1); }
.ci-guides-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-guides-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-guides-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-guides-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-guides-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-guides-carousel-btn:focus-visible { outline: none; }
.ci-guides-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-guides-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-guides-carousel-btn { display: none; }
}
/* Phones: v5's 306px card, one size on every page (DREAM-830), the next one's 24px always in view. */
@media (max-width: 560px) { .ci-gslide { flex-basis: min(306px, 100% - 44px); } }
.ci-news-carousel * { box-sizing: border-box; }
.ci-news-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-news-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-news-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-news-carousel-viewport { position: relative; }
/* 5px of padding round the slides, so the card's focus ring is not clipped. */
.ci-news-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-news-carousel-track::-webkit-scrollbar { display: none; }
.ci-news-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-news-carousel-track.is-dragging a { pointer-events: none; }
.ci-nslide { flex: 0 0 285px; list-style: none; min-width: 0; scroll-snap-align: start; }
.ci-ncard { border: 1px solid #d9d9d9; border-radius: 12px; color: #202224; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 11px; position: relative; }
.ci-ncard-thumb { background: linear-gradient(135deg, #e4e4e9, #d9d9d9); border-radius: 12px; display: block; flex: none; height: 230px; overflow: hidden; position: relative; width: 100%; }
.ci-ncard-thumb img, .ci-ncard-thumb picture { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.ci-ncard-img { object-fit: cover; }
.ci-ncard-img[src=""], .ci-ncard-img:not([src]) { opacity: 0; }
/* v4 (0459): the 84px title box is the only link; the focus ring goes round the card (the Focus variant), 3-5px
   out of its 1px border, covering nothing. A card with no destination (link unwrapped, or href="") is Disabled. */
.ci-ncard-headline { display: block; font-size: 24px; font-weight: 700; height: 84px; line-height: 28px; margin: 0; overflow: hidden; }
.ci-ncard-headline a { -webkit-box-orient: vertical; color: #202224; display: -webkit-box; height: 100%; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-decoration: none; }
.ci-ncard-link:focus-visible { outline: none; }
.ci-ncard-link:focus-visible::after { border-radius: 8px; content: ''; inset: -4px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-ncard-headline a:hover { color: #0c866a; text-decoration: underline; } }
.ci-ncard-headline a:active { color: #1b5547; text-decoration: underline; }
.ci-ncard:not(:has(.ci-ncard-link[href]:not([href=""]))) { opacity: .4; }
.ci-ncard-headline:not(:has(.ci-ncard-link)) { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; }
.ci-ncard-excerpt { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 3; line-clamp: 3; line-height: 20px; margin: 0; overflow: hidden; }
.ci-ncard-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.ci-ncard-meta { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-ncard-date, .ci-ncard-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-ncard-date { flex: none; }
.ci-ncard-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-ncard-sep { background: #202224; flex: none; height: 12px; width: 1px; }
/* Publish drops an empty leaf (removeWhenEmpty); what it leaves alone goes with it. */
.ci-ncard-sep:first-child, .ci-ncard-sep:last-child { display: none; }
.ci-ncard-meta:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)) { display: none; }
.ci-ncard-author { align-items: center; border-top: 1px solid #d9d9d9; display: flex; gap: 8px; padding-top: 12px; }
.ci-ncard-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-ncard-avatar[src=""], .ci-ncard-avatar:not([src]) { display: none; }
.ci-ncard-author picture { display: contents; }
.ci-ncard-who { display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; min-height: 32px; min-width: 0; }
.ci-ncard-aname { font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ncard-arole { font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One class per :has() (COMPONENT_GENERATION.md): the canvas splits a list into bare rules. */
.ci-ncard-aname:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)) { display: none; }
.ci-ncard-author:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
.ci-ncard-foot:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)):not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
/* A drag is no press: one class more than the card's :active rule (0389's tie). */
.ci-news-carousel-track.is-dragging .ci-ncard-headline a { color: #202224; text-decoration: none; }
.ci-news-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-news-carousel-next { right: 12px; }
.ci-news-carousel-prev { left: 12px; }
.ci-news-carousel-prev .ci-news-carousel-icon { transform: scaleX(-1); }
.ci-news-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-news-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-news-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-news-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-news-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-news-carousel-btn:focus-visible { outline: none; }
.ci-news-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-news-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-news-carousel-btn { display: none; }
}
/* v5 (DREAM-816): four 285 slides fill the desktop row; 328 / 306 below (NEWS_CARD_SLIDE), at most 88% so the next peeks. */
@media (max-width: 1199.98px) { .ci-nslide { flex-basis: min(328px, 88%); } }
@media (max-width: 560px) { .ci-nslide { flex-basis: min(306px, 88%); } }