.activities-hub .topnav a[aria-current="page"],.activity-detail .topnav a[aria-current="page"] { color:#285d4c; text-decoration:underline; text-underline-offset:7px; font-weight:700; }
/* Game presentation; screen-only when loaded by the detail template. */
.ac-intro { padding:30px 0 16px; max-width:700px; }
.ac-intro h1 { font-size:clamp(34px,4vw,48px); line-height:1.1; margin:0 0 16px; }
.ac-intro h1 span { color:#3e7962; }
.ac-intro>p:not(.hm-eyebrow) { color:#586961; font-size:16px; margin:0; }
.ac-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.ac-preview { height:230px; padding:20px; background:#eaf0e6; border-radius:11px 11px 0 0; }
.ac-grid .hm-card:nth-child(3n+2) .ac-preview { background:#f0edf5; }
.ac-grid .hm-card:nth-child(3n) .ac-preview { background:#f7efdf; }
.ac-preview img { display:block; width:100%; height:100%; object-fit:contain; background:white; border:1px solid #e2e6df; border-radius:4px; padding:10px; }
.ac-grid .hm-card-body p { font-size:14px; color:#637265; margin:0 0 20px; }
.ac-art { display:flex; align-items:center; justify-content:center; gap:16px; color:#315e4d; }
.ac-art>span { font-size:52px; }
.ac-art strong { font-family:Fredoka,sans-serif; font-size:22px; line-height:1.2; }
.ac-more a { display:inline-block; color:#315e4d; padding:16px 0; }
.activity-detail .header-search button { background:#285d4c; }
.activity-detail .color-page { max-width:900px; margin:24px auto; }
.activity-detail .color-title { font-size:clamp(30px,4vw,40px); color:#285d4c; line-height:1.15; }
.activity-detail .color-hint { color:#586961; font-size:15px; }
.activity-detail .color-controls { margin:18px auto; width:100%; }
.activity-detail .color-toolbar { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:16px; border:1px solid #dfe5db; background:white; border-radius:12px; }
.activity-detail .tool-btn { flex-direction:row; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:0; padding:12px 16px; border:1px solid #cbd6cb; border-radius:8px; font-size:17px; color:#315e4d; background:#f0f2e9; }
.activity-detail .tool-btn span { font-size:13px; }
.activity-detail .tool-btn:hover { background:#e4ebdc; border-color:#497865; }
.activity-detail #print-btn { background:#285d4c; border-color:#285d4c; color:white; }
.activity-detail #new-btn { border-color:#285d4c; background:white; }
.activity-detail .diff-btn { min-height:44px; border:1px solid #cbd6cb; border-radius:8px; color:#315e4d; background:white; }
.activity-detail .diff-btn.active { color:white; background:#285d4c; border-color:#285d4c; }
.activity-detail .theme-picker select { font-size:16px; height:46px; max-width:100%; min-width:0; border:1px solid #cbd6cb; border-radius:8px; color:#243b3a; background:white; }
.activity-detail .theme-picker { flex-wrap:wrap; }
.activity-detail .color-canvas-wrap { border:1px solid #dfe5db; box-shadow:0 5px 18px #243b3a08; border-radius:12px; background:white; }
.activity-detail .activity-intro { max-width:900px; margin:24px auto; color:#586961; }
.activity-detail .activity-intro h1 { color:#285d4c; font-size:32px; }
.activity-detail .activity-themes { border-color:#dee5d9; }
.activity-detail .activity-themes .category-card { background:#f0f2e9; border:1px solid #dfe5db; box-shadow:none; color:#315e4d; }
.activity-detail .category-name { font-family:inherit; font-size:14px; }
@media(max-width:700px) {
 .ac-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .ac-preview { height:160px; padding:12px; }
 .ac-preview img { padding:5px; }
 .ac-grid .hm-card-body { padding:12px; }
 .ac-grid .hm-card h3 { font-size:16px; }
 .ac-grid .hm-card-body p { font-size:12px; }
 .ac-art { gap:6px; flex-direction:column; }
 .ac-art>span { font-size:30px; }
 .ac-art strong { font-size:16px; }
 .activity-detail .color-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:8px; }
 .activity-detail .tool-btn { padding:10px 8px; font-size:15px; gap:6px; }
 .activity-detail .tool-btn span { font-size:12px; }
 .activity-detail .color-title { font-size:30px; }
}