/* Set experience — interactive set pages for the Wondermaths portal.
   Scope: body.collection-set.collection-set-scoped (the class is added by
   launch/set_experience_links.py, which also links this file last in <head>).
   Rules that must win over portal-theme.css / portal-navy-turquoise.css carry the
   full :root[data-portal-theme] prefix so they beat those files on specificity.
   Palette: navy #174A7E, ink #17324D, turquoise #D2F9F6, white. Headings Poppins 900.
   Original artwork, original names, original links: never cropped, never rewritten. */

:root{
  --set-navy:#174A7E;
  --set-navy-deep:#123A63;
  --set-ink:#17324D;
  --set-turquoise:#D2F9F6;
  --set-wash:#EFFAF9;
  --set-wash-soft:#EDFCFA;
  --set-line:#DCEDF5;
  --set-line-strong:#BFD8E6;
  --set-radius:16px;
  --set-font-heading:"Poppins",Fredoka,system-ui,sans-serif;
  --set-font-body:"Segoe UI",system-ui,Arial,sans-serif;
}

/* 1. Page frame ------------------------------------------------------------------ */

:root[data-portal-theme] body.collection-set.collection-set-scoped{
  background:#FFFFFF;
  color:var(--set-ink);
}
body.collection-set.collection-set-scoped :is(a,button,input,select,summary):focus-visible{
  outline:3px solid var(--set-navy);
  outline-offset:3px;
}
body.collection-set.collection-set-scoped :is(#materials,#game-help,.set-activity-nav){
  scroll-margin-top:110px;
}

/* 2. Hero ------------------------------------------------------------------------ */

:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro{
  align-items:center;
  gap:clamp(28px,3.2vw,56px);
  padding-block:clamp(26px,3.2vw,50px) clamp(30px,3.6vw,58px);
}
@media(min-width:761px){
  :root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro{
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  }
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro .eyebrow{
  display:block;
  margin:0 0 14px;
  color:var(--set-navy);
  font:700 14px/1.5 var(--set-font-body);
  letter-spacing:.04em;
}
body.collection-set.collection-set-scoped .set-intro .eyebrow a{
  color:var(--set-navy);
  text-decoration:underline;
  text-underline-offset:4px;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro h1{
  margin:0 0 16px;
  color:var(--set-navy);
  font:900 clamp(40px,4.2vw,62px)/1.05 var(--set-font-heading);
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro h1>span{
  display:block;
  margin-bottom:6px;
  font-size:.52em;
  font-weight:900;
  color:var(--set-ink);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro .set-action{
  max-width:46ch;
  margin:0 0 20px;
  color:var(--set-ink);
  font:400 19px/1.6 var(--set-font-body);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro .access-note{
  margin:0 0 6px;
  color:#3C5A75;
  font:600 15px/1.5 var(--set-font-body);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro .set-age{
  margin:0;
  color:var(--set-ink);
  font:600 15px/1.5 var(--set-font-body);
}

/* Canonical 3:2 scene, 16px radius, never cropped. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-scene{
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--set-line);
  border-radius:var(--set-radius);
  background:#FFFFFF;
  box-shadow:0 14px 30px -26px rgba(23,74,126,.45);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-scene>img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--set-radius);
  background:#FFFFFF;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-scene>span{
  display:block;
  padding:12px 18px 14px;
  border-top:1px solid var(--set-line);
  background:var(--set-wash);
  color:var(--set-ink);
  font:600 16px/1.4 var(--set-font-body);
}

/* Play and Draw carry the same weight. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro .hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 14px;
  margin:0 0 18px;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .hero-actions>:is(.button,.tablet-entry,.reader-entry){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:14px 26px;
  border:2px solid var(--set-navy);
  border-radius:14px;
  background:var(--set-navy);
  color:#FFFFFF;
  font:700 18px/1.25 var(--set-font-heading);
  text-decoration:none;
  box-sizing:border-box;
  transition:background-color .16s ease,transform .16s ease,border-color .16s ease;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .hero-actions>:is(.button,.tablet-entry,.reader-entry):is(:hover,:focus-visible){
  background:var(--set-navy-deep);
  border-color:var(--set-navy-deep);
  transform:translateY(-2px);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .hero-actions>:is(.text-link,.help-jump){
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 2px;
  color:var(--set-navy);
  font:600 16px/1.4 var(--set-font-body);
  text-decoration:underline;
  text-underline-offset:5px;
}

/* 3. Illustrated activity nav ---------------------------------------------------- */

/* One turquoise strip, three transparent illustrations. No card chrome. */
body.collection-set.collection-set-scoped .set-activity-nav{
  padding:0 0 clamp(24px,3vw,40px);
}
body.collection-set.collection-set-scoped .set-activity-list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:clamp(12px,1.8vw,26px);
  margin:0;
  padding:clamp(14px,1.8vw,22px) clamp(16px,2.4vw,34px);
  border:0;
  border-radius:22px;
  background:var(--set-turquoise);
  list-style:none;
}
body.collection-set.collection-set-scoped .set-activity-item{
  display:flex;
  min-width:0;
}
body.collection-set.collection-set-scoped .set-activity-item[hidden]{
  display:none;
}
body.collection-set.collection-set-scoped .set-activity-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:clamp(10px,1.4vw,20px);
  row-gap:2px;
  width:100%;
  min-height:44px;
  margin:0;
  padding:6px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--set-navy);
  font:400 16px/1.4 var(--set-font-body);
  text-align:left;
  text-decoration:none;
  transition:transform .18s ease;
}
body.collection-set.collection-set-scoped .set-activity-card:is(:hover,:focus-visible){
  background:transparent;
  box-shadow:none;
  transform:translateY(-2px);
}
body.collection-set.collection-set-scoped .set-activity-art{
  grid-row:1 / span 2;
  width:clamp(112px,9vw,145px);
  height:clamp(112px,9vw,145px);
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(23,74,126,.16));
}
body.collection-set.collection-set-scoped .set-activity-label{
  grid-column:2;
  color:var(--set-navy);
  font:900 clamp(20px,1.6vw,26px)/1.15 var(--set-font-heading);
  letter-spacing:-.015em;
}
body.collection-set.collection-set-scoped .set-activity-hint{
  grid-column:2;
  color:var(--set-ink);
  font:400 clamp(14px,1.05vw,16px)/1.4 var(--set-font-body);
}
body.collection-set.collection-set-scoped .set-activity-help{
  margin:12px 0 0;
  text-align:center;
}
body.collection-set.collection-set-scoped .set-activity-help-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--set-navy);
  font:600 16px/1.4 var(--set-font-body);
  text-decoration:underline;
  text-underline-offset:5px;
}

/* 4. Materials ------------------------------------------------------------------- */

:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials{
  padding:clamp(34px,4vw,60px) 0 clamp(30px,3.6vw,54px);
  border-block:1px solid #E1F1F1;
  background:#F3FBFA;
}
/* One heading, description below: no split header. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .section-heading{
  display:block;
  margin:0 0 22px;
}
/* Decorative only here; the functional back breadcrumb lives in .set-intro. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .section-heading .eyebrow{
  display:none;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .section-heading h2{
  margin:0 0 10px;
  color:var(--set-navy);
  font:900 clamp(28px,3vw,40px)/1.15 var(--set-font-heading);
  letter-spacing:-.03em;
  text-wrap:balance;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .section-heading>p{
  max-width:64ch;
  margin:0;
  color:var(--set-ink);
  font:400 17px/1.6 var(--set-font-body);
}

/* Filters: rounded rectangles, navy selected state, never pills everywhere. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 20px;
  padding:0;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .filters button{
  min-height:48px;
  padding:12px 18px;
  border:1.5px solid var(--set-line-strong);
  border-radius:12px;
  background:#FFFFFF;
  color:var(--set-ink);
  font:700 16px/1.2 var(--set-font-body);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .filters button:hover{
  border-color:var(--set-navy);
  background:var(--set-wash);
}
/* Explicit, narrow override so no palette rule can repaint the selection. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .filters button[aria-pressed=true],
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-materials .filters button[aria-pressed=true]:is(:hover,:focus,:focus-visible){
  border-color:var(--set-navy)!important;
  background:var(--set-navy)!important;
  background-color:var(--set-navy)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

/* Search, live count, empty state, load error. */
body.collection-set.collection-set-scoped .set-materials-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:14px 20px;
  margin:0 0 22px;
  min-width:0;
}
body.collection-set.collection-set-scoped .set-search{
  display:block;
  flex:1 1 320px;
  max-width:520px;
  min-width:0;
}
body.collection-set.collection-set-scoped .set-search>span{
  display:block;
  margin-bottom:8px;
  color:var(--set-ink);
  font:700 16px/1.3 var(--set-font-body);
}
body.collection-set.collection-set-scoped .set-search input{
  width:100%;
  min-height:52px;
  padding:12px 16px;
  border:1.5px solid var(--set-line-strong);
  border-radius:12px;
  background:#FFFFFF;
  color:var(--set-ink);
  font:400 16px/1.4 var(--set-font-body);
  box-sizing:border-box;
}
body.collection-set.collection-set-scoped .set-search input:focus-visible{
  border-color:var(--set-navy);
}
body.collection-set.collection-set-scoped .set-result-count{
  flex:0 1 auto;
  margin:0 0 4px;
  color:var(--set-ink);
  font:600 16px/1.4 var(--set-font-body);
  font-variant-numeric:tabular-nums;
}
body.collection-set.collection-set-scoped :is(.set-empty,.set-data-error){
  flex:1 1 100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
  margin:0;
  padding:16px 18px;
  border-radius:12px;
  background:#FFFFFF;
  color:var(--set-ink);
  font:400 16px/1.5 var(--set-font-body);
  box-sizing:border-box;
}
body.collection-set.collection-set-scoped .set-empty{
  border:1.5px dashed var(--set-line-strong);
}
body.collection-set.collection-set-scoped .set-data-error{
  border:1.5px solid var(--set-navy);
  background:var(--set-wash);
}
body.collection-set.collection-set-scoped :is(.set-empty,.set-data-error) p{
  flex:1 1 240px;
  margin:0;
}
body.collection-set.collection-set-scoped :is(.set-empty,.set-data-error) button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border:2px solid var(--set-navy);
  border-radius:12px;
  background:var(--set-navy);
  color:#FFFFFF;
  font:700 16px/1.2 var(--set-font-body);
  cursor:pointer;
  transition:background-color .16s ease;
}
body.collection-set.collection-set-scoped :is(.set-empty,.set-data-error) button:hover{
  background:var(--set-navy-deep);
  border-color:var(--set-navy-deep);
}

/* 5. Resource groups: image left, controls right --------------------------------- */

/* Base (narrow phones): image stacked above the controls. */
body.collection-set.collection-set-scoped .resource-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-card{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:stretch;
  min-width:0;
  padding:14px;
  border:1.5px solid var(--set-line);
  border-radius:var(--set-radius);
  background:#FFFFFF;
  overflow:hidden;
  box-shadow:none;
  transition:border-color .18s ease;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-card:hover{
  border-color:#9EC7DB;
  box-shadow:none;
}
/* Full, uncropped document preview on a paper panel. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:start;
  justify-self:center;
  width:100%;
  max-width:360px;
  height:auto;
  min-height:0;
  margin:0 auto;
  padding:14px;
  border:1px solid var(--set-line);
  border-radius:12px;
  background:var(--set-wash-soft);
  box-sizing:border-box;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-preview img{
  width:100%;
  max-width:100%;
  height:auto;
  max-height:420px;
  padding:0;
  border-radius:8px;
  background:#FFFFFF;
  object-fit:contain;
  filter:none;
  box-shadow:none;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-copy{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:6px 6px 8px;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-copy h3{
  min-height:0;
  margin:0;
  color:var(--set-navy);
  font:900 24px/1.2 var(--set-font-heading);
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-copy label{
  margin:0;
  color:var(--set-ink);
  font:700 16px/1.35 var(--set-font-body);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-copy select{
  width:100%;
  max-width:100%;
  min-height:52px;
  padding:12px 34px 12px 14px;
  border:1.5px solid var(--set-line-strong);
  border-radius:12px;
  background:#FFFFFF;
  color:var(--set-ink);
  font:400 16px/1.4 var(--set-font-body);
  box-sizing:border-box;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-copy select:disabled{
  background:#F1F6F8;
  color:#4A6376;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-meta{
  margin:0;
  color:#3C5A75;
  font:600 15px/1.5 var(--set-font-body);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  width:100%;
  min-height:54px;
  margin:0;
  padding:14px 20px;
  border-radius:12px;
  box-sizing:border-box;
}
/* Reader / tablet / coloring / answers actions injected by the existing enhancers. */
:root[data-portal-theme] body.collection-set.collection-set-scoped .resource-copy :is(.reader-entry,.tablet-entry,.coloring-entry,.answers-entry){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:52px;
  margin:0;
  padding:12px 18px;
  border-radius:12px;
  box-sizing:border-box;
  font:700 16px/1.3 var(--set-font-body);
  text-align:center;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .age-note{
  margin:24px 0 0;
  color:#3C5A75;
  font:400 15px/1.6 var(--set-font-body);
}

/* 768 and 1024 previews: one horizontal card per row, fluid preview width. */
@media(min-width:561px) and (max-width:1199px){
  :root[data-portal-theme] body.collection-set.collection-set-scoped .resource-grid{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .resource-card{
    grid-template-columns:minmax(150px,34%) minmax(0,1fr);
    align-items:start;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .resource-preview{
    align-self:start;
    max-width:100%;
    margin:0;
  }
}
/* Wide desktop only: two columns of horizontal cards with fluid previews. */
@media(min-width:1200px){
  :root[data-portal-theme] body.collection-set.collection-set-scoped .resource-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .resource-card{
    grid-template-columns:minmax(180px,36%) minmax(0,1fr);
    align-items:start;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .resource-preview{
    align-self:start;
    max-width:100%;
    margin:0;
  }
}

/* 6. Calm help, answers, next steps ---------------------------------------------- */

:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help{
  max-width:1080px;
  margin:clamp(30px,4vw,54px) auto;
  padding:clamp(22px,3vw,42px);
  border:1px solid var(--set-line);
  border-radius:var(--set-radius);
  background:#FFFFFF;
  color:var(--set-ink);
  box-shadow:none;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help h2{
  margin:0 0 16px;
  color:var(--set-navy);
  font:900 clamp(26px,2.8vw,36px)/1.2 var(--set-font-heading);
  letter-spacing:-.02em;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help details{
  border-bottom:1px solid #E1F1F1;
  background:#FFFFFF;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help summary{
  min-height:52px;
  padding:20px 6px;
  border-radius:10px;
  color:var(--set-navy);
  font:800 20px/1.4 var(--set-font-heading);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help summary:hover{
  background:var(--set-wash);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help details>div{
  padding:0 8px 14px 20px;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help p,
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help li{
  color:var(--set-ink);
  font:400 18px/1.65 var(--set-font-body);
  max-width:72ch;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help h3{
  margin:20px 0 8px;
  color:var(--set-navy);
  font:800 18px/1.35 var(--set-font-heading);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help .help-action{
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:12px 20px;
  border-radius:12px;
  background:var(--set-navy);
  color:#FFFFFF;
  font:700 16px/1.3 var(--set-font-body);
  text-decoration:none;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .game-help .help-action:hover{
  background:var(--set-navy-deep);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .answer-callout{
  max-width:1200px;
  margin:clamp(26px,3vw,40px) auto;
  padding:clamp(22px,3vw,34px);
  border:1px solid #CFE8EA;
  border-radius:var(--set-radius);
  background:var(--set-wash-soft);
  color:var(--set-ink);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .answer-callout h2{
  margin:0 0 8px;
  color:var(--set-navy);
  font:900 clamp(24px,2.6vw,32px)/1.2 var(--set-font-heading);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .answer-callout p{
  margin:0 0 14px;
  color:var(--set-ink);
  font:400 17px/1.6 var(--set-font-body);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .answer-callout a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--set-navy);
  font:700 16px/1.4 var(--set-font-body);
  text-underline-offset:5px;
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-parent{
  gap:clamp(20px,3vw,48px);
  padding-block:clamp(34px,4vw,54px);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-parent h2{
  margin:0;
  color:var(--set-navy);
  font:900 clamp(26px,2.8vw,36px)/1.2 var(--set-font-heading);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-parent p:not(.eyebrow){
  color:var(--set-ink);
  font:400 17px/1.65 var(--set-font-body);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-next{
  gap:20px;
  padding-block:clamp(28px,3.4vw,48px) clamp(34px,4vw,56px);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-next h2{
  color:var(--set-navy);
  font:900 clamp(26px,2.8vw,34px)/1.2 var(--set-font-heading);
}
:root[data-portal-theme] body.collection-set.collection-set-scoped .set-next .button{
  min-height:54px;
  padding:14px 24px;
  border-radius:14px;
  box-sizing:border-box;
}

/* 7. Game dialog ----------------------------------------------------------------- */

#set-game-dialog{
  border:1px solid #CFE8EA;
  border-radius:var(--set-radius);
  background:#FFFFFF;
  box-shadow:0 34px 90px -40px rgba(23,50,77,.65);
}
#set-game-dialog::backdrop{
  background:rgba(23,50,77,.62);
}
#set-game-dialog .game-dialog-head{
  border-bottom:1px solid var(--set-line);
  background:#F2FBFA;
}
#set-game-dialog h2{
  color:var(--set-navy);
  font-family:var(--set-font-heading);
  font-weight:800;
}
#set-game-dialog .small-button{
  border:2px solid var(--set-navy);
  border-radius:12px;
  background:var(--set-navy);
  color:#FFFFFF;
  font:700 16px/1.2 var(--set-font-body);
}
#set-game-dialog .small-button:hover{
  background:var(--set-navy-deep);
  border-color:var(--set-navy-deep);
}
#set-game-frame iframe{
  background:#FFFFFF;
}

/* 7b. Footer rune: keep the mask shape, repaint it navy -------------------------- */

:root[data-portal-theme] body.collection-set.collection-set-scoped :is(.footer-rune,.site-rune,[class*="rune"],[data-rune]){
  background-color:var(--set-navy);
  color:var(--set-navy);
}

/* 8. Small screens and motion ---------------------------------------------------- */

@media(max-width:760px){
  /* The floating portal control overlaps Play and Explore on set phones. */
  :root[data-portal-theme] body.collection-set.collection-set-scoped #wm-page-scroll,
  body.collection-set.collection-set-scoped #wm-page-scroll{
    display:none!important;
  }
  body.collection-set.collection-set-scoped .set-activity-list{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    gap:6px;
    padding:12px 14px;
    border-radius:18px;
  }
  body.collection-set.collection-set-scoped .set-activity-card{
    min-height:110px;
    column-gap:12px;
    padding:4px 0;
  }
  body.collection-set.collection-set-scoped .set-activity-art{
    width:clamp(84px,26vw,104px);
    height:clamp(84px,26vw,104px);
    max-width:100%;
  }
  body.collection-set.collection-set-scoped .set-activity-hint{
    font-size:15px;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro{
    gap:20px;
    padding-block:22px 30px;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro h1{
    font-size:clamp(34px,9vw,46px);
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .set-intro .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .hero-actions>*{
    width:100%;
    justify-content:center;
  }
  body.collection-set.collection-set-scoped .set-materials-tools{
    gap:14px;
  }
  body.collection-set.collection-set-scoped .set-search{
    flex:1 1 100%;
    max-width:none;
  }
  body.collection-set.collection-set-scoped .set-result-count{
    flex:1 1 100%;
    margin:0;
  }
  :root[data-portal-theme] body.collection-set.collection-set-scoped .game-help details>div{
    padding-left:0;
  }
}

@media(prefers-reduced-motion:reduce){
  body.collection-set.collection-set-scoped :is(.set-activity-card,.resource-card,.hero-actions>*,.filters button,.set-search input,.set-empty button,.set-data-error button){
    transition:none!important;
  }
  body.collection-set.collection-set-scoped :is(.set-activity-card,.hero-actions>*):is(:hover,:focus-visible){
    transform:none;
  }
}

@media print{
  body.collection-set.collection-set-scoped :is(.set-activity-nav,.set-materials-tools,.filters){
    display:none;
  }
}
/* Set activity nav: pin the label and the hint to opposite sides of the card grid. */
body.collection-set.collection-set-scoped .set-activity-label { align-self: end; }
body.collection-set.collection-set-scoped .set-activity-hint { align-self: start; }

/* deluxe-scope-v1 */
body.collection-set.collection-set-scoped .set-intro .eyebrow a,
body.collection-set.collection-set-scoped #game-help .help-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* deluxe: prevent floating navigation overlap */
:root[data-portal-theme] body.collection-set.collection-set-scoped #wm-page-scroll { display:none!important; }