/*! Chie Games site · components. Every component: default, hover, focus-visible, active, disabled. Documented on /design. */

/* ───── Icon ───── */
.ic{display:inline-block;width:var(--ic,24px);height:var(--ic,24px);flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic.sm{--ic:18px}.ic.lg{--ic:32px}.ic.xl{--ic:48px}

/* ───── Button ───── */
.btn{--b-bg:var(--primary);--b-bg-h:var(--primary-hover);--b-bg-p:var(--primary-press);--b-fg:var(--on-primary);--b-depth:5px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:52px;padding:10px 26px 9px;
  border:var(--bw) solid var(--border);border-radius:var(--r-pill);background:var(--b-bg);color:var(--b-fg);
  font-weight:var(--fw-bold);font-size:1.0625rem;line-height:1;letter-spacing:var(--ls-button);text-decoration:none;white-space:nowrap;
  box-shadow:0 var(--b-depth) 0 var(--shadow-color);transform:translateY(0);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out),background-color var(--d-base)}
.btn:hover{background:var(--b-bg-h);color:var(--b-fg);transform:translateY(-2px);box-shadow:0 calc(var(--b-depth) + 2px) 0 var(--shadow-color)}
.btn:active{background:var(--b-bg-p);transform:translateY(var(--b-depth));box-shadow:0 0 0 var(--shadow-color)}
.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:var(--r-pill)}
.btn[disabled],.btn[aria-disabled="true"]{--b-bg:var(--ink-100);--b-bg-h:var(--ink-100);--b-fg:var(--ink-400);border-color:var(--ink-300);box-shadow:0 var(--b-depth) 0 var(--ink-300);cursor:not-allowed;transform:none}
.btn.secondary{--b-bg:var(--secondary);--b-bg-h:var(--secondary-hover);--b-bg-p:var(--secondary-press);--b-fg:var(--on-secondary)}
.btn.accent{--b-bg:var(--accent);--b-bg-h:var(--accent-hover);--b-bg-p:var(--accent-press);--b-fg:var(--on-accent)}
.btn.success{--b-bg:var(--success);--b-bg-h:var(--mint-400);--b-bg-p:var(--mint-600);--b-fg:var(--on-success)}
.btn.ghost{--b-bg:transparent;--b-bg-h:rgba(31,29,58,.06);--b-bg-p:rgba(31,29,58,.12);--b-fg:var(--text);--b-depth:0px;border-color:transparent}
.btn.ghost:hover{transform:none}
.btn.dark{--b-bg:var(--ink-900);--b-bg-h:var(--ink-800);--b-bg-p:var(--ink-950);--b-fg:var(--white);--shadow-color:rgba(0,0,0,.45)}
/* Game-themed: background = brand pop colour, ink text, keeps the outline. */
.btn.game{--b-bg:var(--g-pop);--b-bg-h:color-mix(in srgb,var(--g-pop) 85%,#fff);--b-bg-p:color-mix(in srgb,var(--g-pop) 85%,#000);--b-fg:var(--ink-900)}
.btn.sm{min-height:40px;padding:7px 16px 6px;font-size:.9375rem;--b-depth:3px;border-width:var(--bw-thin)}
.btn.lg{min-height:60px;padding:12px 32px 11px;font-size:1.25rem;--b-depth:6px}
.btn.xl{min-height:72px;padding:14px 40px 13px;font-size:1.5rem;--b-depth:7px}
.btn.block{display:flex;width:100%}
.btn .ic{--ic:1.2em;stroke-width:2.6}
.btn.icon{padding:0;width:52px;min-width:52px}
.btn.icon.sm{width:40px;min-width:40px}
.btn.play .ic{fill:currentColor}
.btn.play:hover .ic{animation:cg-breathe .9s var(--ease-in-out) infinite}

/* ───── Link ───── */
.link{color:var(--link);font-weight:var(--fw-bold);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size var(--d-base) var(--ease-out);padding-bottom:1px}
.link:hover{background-size:100% 2px}
.link.arrow::after{content:" →";display:inline-block;transition:transform var(--d-base) var(--ease-out)}
.link.arrow:hover::after{transform:translateX(4px)}

/* ───── Chip (filter / toggle) ───── */
.chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:6px 16px 5px;border:var(--bw-thin) solid var(--border);border-radius:var(--r-pill);
  background:var(--surface);color:var(--text);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-decoration:none;box-shadow:var(--e-1);cursor:pointer;
  transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast),background-color var(--d-base)}
.chip:hover{color:var(--text);background:var(--genre-soft);transform:translateY(-1px);box-shadow:0 4px 0 var(--shadow-color)}
.chip:active{transform:translateY(3px);box-shadow:var(--e-0)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--genre);color:var(--on-genre)}
.chip[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--genre);border:var(--bw-thin) solid var(--border)}
.chip .count{min-width:22px;padding:1px 6px;border-radius:var(--r-pill);background:var(--ink-900);color:var(--white);font-size:var(--fs-xs);text-align:center;font-variant-numeric:tabular-nums}
.chip .ic{--ic:18px}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip-row.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-snap-type:x proximity}
.chip-row.scroll::-webkit-scrollbar{display:none}
.chip-row.scroll>*{flex:none;scroll-snap-align:start}

/* ───── Tag (static, small) & Badge ───── */
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 2px;border-radius:var(--r-pill);background:var(--genre-soft);color:var(--ink-900);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-decoration:none;border:1.5px solid color-mix(in srgb,var(--genre) 60%,var(--ink-900))}
a.tag:hover{background:var(--genre);color:var(--ink-900)}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 2px;border-radius:var(--r-xs);border:var(--bw-thin) solid var(--border);font-size:.6875rem;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;background:var(--surface);color:var(--ink-900);box-shadow:0 2px 0 var(--shadow-color);line-height:1.3}
.badge.new{background:var(--success)}
.badge.hot{background:var(--accent)}
.badge.d3{background:var(--grape-300)}
.badge.multi{background:var(--berry-300)}
.badge.portrait{background:var(--sky-300)}
.badge .ic{--ic:12px;stroke-width:3}

/* ───── Card (generic) ───── */
.card{position:relative;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-2);padding:var(--s-5)}
.card.flat{box-shadow:none;border-color:var(--border-soft);border-width:var(--bw-thin)}
.card.tint{background:var(--genre-soft)}

/* ───── Game card ───── */
.game-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--e-2);overflow:hidden;color:var(--text);text-decoration:none;isolation:isolate;
  transition:transform var(--d-base) var(--ease-pop),box-shadow var(--d-base) var(--ease-out)}
.game-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 11px 0 var(--shadow-color);color:var(--text)}
.game-card:has(.game-card__link:focus-visible){outline:3px solid var(--focus-ring);outline-offset:4px}
.game-card__media{position:relative;aspect-ratio:1200/630;background:var(--g-deep);border-bottom:var(--bw) solid var(--border);overflow:hidden}
.game-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease-out);background:var(--g-deep)}
.game-card:hover .game-card__media img{transform:scale(1.05)}
.game-card__badges{position:absolute;top:var(--s-3);left:var(--s-3);display:flex;gap:6px;z-index:1}
.game-card__hover{position:absolute;inset:auto 0 0 0;padding:var(--s-3) var(--s-4);background:linear-gradient(transparent,rgba(15,14,31,.85));color:var(--white);font-size:var(--fs-xs);
  display:flex;gap:var(--s-2);align-items:center;transform:translateY(100%);transition:transform var(--d-base) var(--ease-out)}
.game-card:hover .game-card__hover,.game-card:focus-within .game-card__hover{transform:none}
.game-card__body{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4) var(--s-4) var(--s-5);flex:1}
.game-card__title{font-size:var(--fs-h4);line-height:var(--lh-tight)}
.game-card__link{color:inherit;text-decoration:none}
.game-card__link::after{content:"";position:absolute;inset:0;z-index:0}
.game-card__link:focus-visible{outline:none}
.game-card__tagline{color:var(--text-muted);font-size:var(--fs-sm)}
.game-card__meta{display:flex;flex-wrap:wrap;gap:var(--s-3);color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);margin-top:auto;padding-top:var(--s-2)}
.game-card__meta span{display:inline-flex;align-items:center;gap:4px}
.game-card__meta .ic{--ic:16px}
.game-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:0 var(--s-4) var(--s-4)}
.game-card__foot .btn{position:relative;z-index:1}
.game-card .tag-list{position:relative;z-index:1}
/* compact row variant */
.game-card.row{flex-direction:row;align-items:center;border-radius:var(--r-md);box-shadow:var(--e-1)}
.game-card.row:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--shadow-color)}
.game-card.row .game-card__media{width:112px;flex:none;aspect-ratio:1;border-bottom:0;border-right:var(--bw) solid var(--border)}
.game-card.row .game-card__body{padding:var(--s-3) var(--s-4)}
.game-card.row .game-card__title{font-size:var(--fs-body)}

/* ───── Header / nav ───── */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:var(--bw-thin) solid transparent;transition:border-color var(--d-base),background-color var(--d-base)}
.site-header.is-stuck{border-bottom-color:var(--border-soft)}
.site-header.on-hero:not(.is-stuck){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header__in{display:flex;align-items:center;gap:var(--s-4);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);text-decoration:none;color:var(--text);font-size:1.375rem;line-height:1;flex:none}
.brand:hover{color:var(--text)}
.brand__mark{width:40px;height:40px;flex:none;transition:transform var(--d-base) var(--ease-pop)}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.08)}
.brand__word{--sw:.16em;--sd:.12em;letter-spacing:-.01em}
.nav{margin-left:auto;display:none;align-items:center;gap:var(--s-1)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-pill);color:var(--text);text-decoration:none;font-weight:var(--fw-bold);font-size:var(--fs-body)}
.nav a:hover{background:rgba(31,29,58,.07);color:var(--text)}
.nav a[aria-current="page"]{background:var(--ink-900);color:var(--white)}
.site-header .btn{display:none}
.site-header .menu-btn{display:inline-flex;margin-left:auto}
@media (min-width:900px){.nav{display:flex}.site-header .btn{display:inline-flex}.site-header .menu-btn{display:none}}
/* drawer */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);display:grid;grid-template-columns:1fr min(86vw,360px);visibility:hidden}
.drawer.open{visibility:visible}
.drawer__scrim{background:var(--scrim);opacity:0;transition:opacity var(--d-base)}
.drawer.open .drawer__scrim{opacity:1}
.drawer__panel{background:var(--surface);border-left:var(--bw) solid var(--border);padding:var(--s-4) var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);transform:translateX(100%);transition:transform var(--d-slow) var(--ease-out);overflow-y:auto}
.drawer.open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-bottom:var(--s-3)}
.drawer nav a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-weight:var(--fw-bold);font-size:var(--fs-h4)}
.drawer nav a:hover,.drawer nav a[aria-current="page"]{background:var(--surface-sunk)}
.drawer .t-overline{margin:var(--s-4) var(--s-3) var(--s-1)}

/* ───── Footer ───── */
.site-footer{background:var(--bg-ink);color:var(--text-inverse-muted);padding-block:var(--s-8) var(--s-6);font-size:var(--fs-sm)}
.site-footer a{color:var(--white);text-decoration:none;font-weight:var(--fw-medium)}
.site-footer a:hover{color:var(--sun-400);text-decoration:underline}
.site-footer__grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(2,1fr)}
.site-footer__grid>:first-child{grid-column:1/-1}
@media (min-width:900px){.site-footer__grid{grid-template-columns:2fr repeat(3,1fr)}.site-footer__grid>:first-child{grid-column:auto}}
.site-footer h3{color:var(--white);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-overline);margin-bottom:var(--s-3)}
.site-footer ul{list-style:none;display:grid;gap:var(--s-2)}
.site-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s-7);padding-top:var(--s-5);font-size:var(--fs-xs)}
.site-footer .brand{color:var(--white)}
.site-footer .brand__word{--sw:0;--sd:0}
.linkbtn{background:none;border:0;padding:0;color:var(--white);font-weight:var(--fw-medium);text-decoration:none;cursor:pointer;font-size:inherit}
.linkbtn:hover{color:var(--sun-400);text-decoration:underline}

/* ───── Section header ───── */
.sec-head{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-6);max-width:760px}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}
.sec-head .t-overline{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--accent-press)}
.sec-head .t-overline::before{content:"";width:18px;height:4px;border-radius:2px;background:currentColor}

/* ───── Stat tile ───── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-md);box-shadow:var(--e-2);padding:var(--s-4);text-align:center}
.stat__num{display:block;font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:1;font-variant-numeric:tabular-nums}
.stat__label{display:block;margin-top:var(--s-1);font-size:var(--fs-sm);color:var(--text-muted)}

/* ───── Feature card ───── */
.feature{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-2)}
.feature__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-md);border:var(--bw) solid var(--border);background:var(--genre);box-shadow:var(--e-1);color:var(--ink-900);transform:rotate(-4deg)}
.feature__icon .ic{--ic:28px}
.feature p{color:var(--text-muted);font-size:var(--fs-sm)}

/* ───── Keyboard key & controls table ───── */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border:var(--bw-thin) solid var(--border);border-radius:7px;background:var(--surface);box-shadow:0 2px 0 var(--shadow-color);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;font-family:inherit;color:var(--ink-900);vertical-align:middle}
.controls{display:grid;gap:var(--s-4)}
@media (min-width:768px){.controls{grid-template-columns:1fr 1fr}}
.controls__col{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--e-2)}
.controls__col h3{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-h4);margin-bottom:var(--s-3)}
.controls__col ul{list-style:none;display:grid;gap:var(--s-3)}
.controls__col li{display:flex;gap:var(--s-3);align-items:flex-start;line-height:1.5}
.controls__col li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--g-accent)}

/* ───── Accordion (FAQ) ───── */
.accordion{display:grid;gap:var(--s-3)}
.accordion details{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-md);box-shadow:var(--e-1);overflow:hidden}
.accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:60px;padding:var(--s-3) var(--s-5);font-weight:var(--fw-bold);cursor:pointer;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--primary);border:var(--bw-thin) solid var(--border);font-size:1.25rem;line-height:1;transition:transform var(--d-base) var(--ease-pop)}
.accordion details[open] summary::after{transform:rotate(45deg)}
.accordion summary:hover{background:var(--surface-sunk)}
.accordion .acc-body{padding:0 var(--s-5) var(--s-5);color:var(--text-muted)}

/* ───── Breadcrumb ───── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);list-style:none}
.crumbs li+li::before{content:"/";margin-right:var(--s-2);opacity:.6}
.crumbs a{color:inherit;font-weight:var(--fw-medium)}
.crumbs [aria-current]{font-weight:var(--fw-bold)}

/* ───── Tooltip ───── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:6px 10px;border-radius:var(--r-xs);background:var(--ink-900);color:var(--white);font-size:var(--fs-xs);font-weight:var(--fw-bold);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--d-fast),transform var(--d-fast);z-index:var(--z-toast)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* ───── Form ───── */
.field{display:grid;gap:6px}
.field label{font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.input,.select,.textarea{width:100%;min-height:52px;padding:12px 16px;border:var(--bw) solid var(--border);border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 3px 0 rgba(31,29,58,.06);font-size:var(--fs-body);font-weight:var(--fw-medium);transition:box-shadow var(--d-fast)}
.textarea{min-height:140px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-subtle)}
.input:focus,.select:focus,.textarea:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-ring) 35%,transparent)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger-text);background:var(--danger-soft)}
.input:disabled{background:var(--surface-sunk);border-color:var(--ink-300);color:var(--text-subtle)}
.select{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d3a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;padding-right:44px}
.help{font-size:var(--fs-xs);color:var(--text-muted)}
.error{font-size:var(--fs-xs);color:var(--danger-text);font-weight:var(--fw-bold)}

/* ───── Switch ───── */
.switch{position:relative;width:58px;height:34px;flex:none;border-radius:var(--r-pill);border:var(--bw-thin) solid var(--border);background:var(--ink-200);cursor:pointer;transition:background var(--d-base)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--white);border:var(--bw-thin) solid var(--border);transition:transform var(--d-base) var(--ease-pop)}
.switch[aria-checked="true"]{background:var(--success)}
.switch[aria-checked="true"]::after{transform:translateX(24px)}

/* ───── Callout / alert ───── */
.callout{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);border-radius:var(--r-md);border:var(--bw-thin) solid var(--border);background:var(--info-soft)}
.callout.success{background:var(--success-soft)}.callout.warning{background:var(--warning-soft)}.callout.danger{background:var(--danger-soft)}

/* ───── Toast ───── */
.toast{position:fixed;left:50%;bottom:var(--s-5);z-index:var(--z-toast);transform:translate(-50%,24px);opacity:0;display:flex;align-items:center;gap:var(--s-2);padding:12px 18px;border-radius:var(--r-pill);background:var(--ink-900);color:var(--white);font-weight:var(--fw-bold);font-size:var(--fs-sm);box-shadow:var(--e-soft);transition:opacity var(--d-base),transform var(--d-base) var(--ease-pop);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ───── Empty state ───── */
.empty{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-8) var(--s-4);text-align:center;border:var(--bw) dashed var(--ink-300);border-radius:var(--r-lg);color:var(--text-muted)}
.empty .ic{--ic:48px;color:var(--ink-300)}

/* ───── Consent banner ───── */
.consent{position:fixed;left:var(--s-3);right:var(--s-3);bottom:var(--s-3);z-index:var(--z-consent);max-width:560px;margin-inline:auto;display:grid;gap:var(--s-3);padding:var(--s-5);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-3),var(--e-soft);animation:cg-in var(--d-slow) var(--ease-pop) both}
.consent h2{font-size:var(--fs-h4);display:flex;align-items:center;gap:var(--s-2)}
.consent p{font-size:var(--fs-sm);color:var(--text-muted)}
.consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}

/* ───── Carousel ───── */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-xl);scroll-behavior:smooth}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start}
.carousel__nav{display:flex;align-items:center;justify-content:center;gap:var(--s-3);margin-top:var(--s-5)}
.dots{display:flex;gap:var(--s-2)}
.dots button{width:14px;height:14px;padding:0;border-radius:var(--r-pill);border:var(--bw-thin) solid var(--border);background:var(--surface);transition:width var(--d-base) var(--ease-out),background var(--d-base)}
.dots button[aria-current="true"]{width:36px;background:var(--primary)}
/* 44px touch target around small dots */
.dots button{position:relative}.dots button::before{content:"";position:absolute;inset:-15px -6px}

/* ───── Marquee ───── */
.marquee{overflow:hidden;border-block:var(--bw) solid var(--border);background:var(--primary);padding-block:var(--s-3);--speed:38s}
.marquee__track{display:flex;width:max-content;gap:var(--s-6);animation:cg-marquee var(--speed) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:var(--s-3);font-weight:var(--fw-bold);font-size:var(--fs-h4);white-space:nowrap;color:var(--ink-900);text-decoration:none}
.marquee__item:hover{color:var(--ink-900);text-decoration:underline}
.marquee__item .star{width:20px;height:20px;color:var(--ink-900)}

/* ───── Sticker (decoration) ───── */
.sticker{position:absolute;pointer-events:none;animation:cg-float 5s var(--ease-in-out) infinite;transform:rotate(var(--rot,0deg))}
@media (min-width:1024px){.chip-row.scroll{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:2px}}