.colour-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:17px;margin-top:20px}
.colour-card{border:2px solid #eee6fb;background:white;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:7px;box-shadow:0 5px 18px #473c6610}
.colour-card:hover,.colour-card:focus-visible{border-color:#7154ce;transform:translateY(-2px)}
.colour-card img{width:100%;aspect-ratio:1;object-fit:contain;background:white;border-radius:12px}
.colour-card strong{font-size:17px}.colour-card small{color:#66718a}
#colour-picture svg{border:2px solid #e6ddf5;border-radius:15px;background:white}
@media(max-width:550px){.colour-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* Colouring library and player navigation */
.colouring-player{max-width:850px;margin-inline:auto}.colour-player-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.colour-player-heading h2{margin-bottom:0}.colour-counter{background:#f0eaff;color:#6043ac;padding:8px 13px;border-radius:99px;font-weight:700;font-size:14px}
.colour-filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;margin-bottom:10px}.colour-filters button{font:inherit;padding:9px 15px;border:2px solid #e9dff8;border-radius:99px;background:white;color:#4e4264;cursor:pointer;font-weight:700}.colour-filters button.active,.colour-filters button:hover{background:#7956d5;color:white;border-color:#7956d5}.colour-card[hidden]{display:none!important}#colour-picture{touch-action:manipulation}


/* Child-friendly picture switching: large arrows on either side of the actual artwork. */
.colouring-player .colouring-stage{display:grid;grid-template-columns:76px minmax(0,1fr) 76px;align-items:center;gap:10px;margin:16px auto 18px;max-width:850px}
.colouring-player .colouring-canvas{min-width:0;display:flex;flex-direction:column;gap:12px}
.colouring-player #colour-picture{width:100%;max-width:560px;margin:auto;min-width:0}
.colouring-player .colour-side-arrow{display:grid;place-items:center;justify-self:center;width:70px;height:88px;border-radius:25px;background:#ffcf4f;color:#49247f;box-shadow:0 6px 0 #edaa23,0 9px 16px #40205b29;text-decoration:none;border:3px solid #fff;font-size:48px;font-family:Arial,sans-serif;font-weight:900;line-height:1;touch-action:manipulation;transition:transform .12s,box-shadow .12s}
.colouring-player .colour-side-next{background:#8d64ec;color:#fff;box-shadow:0 6px 0 #6441be,0 9px 16px #40205b29}
.colouring-player .colour-side-arrow:hover,.colouring-player .colour-side-arrow:focus-visible{transform:scale(1.07);outline:4px solid #ff8dca;outline-offset:3px}
.colouring-player .colour-side-arrow:active{transform:translateY(4px);box-shadow:0 2px 0 #8864a5}
.colouring-player #colour-palette{width:100%}
@media(max-width:650px){.colouring-player .colouring-stage{grid-template-columns:54px minmax(0,1fr) 54px;gap:3px;margin:12px -8px 16px}.colouring-player .colour-side-arrow{width:52px;height:76px;border-radius:18px;font-size:39px;border-width:2px}.colouring-player .colour-counter{font-size:12px;padding:6px 10px}}
@media(max-width:380px){.colouring-player .colouring-stage{grid-template-columns:46px minmax(0,1fr) 46px;gap:2px}.colouring-player .colour-side-arrow{width:44px;height:68px;font-size:32px}}

/* A simple picture-grid icon instead of an unstyled text navigation link */
.colouring-section .colour-gallery-home{display:inline-grid;place-items:center;width:54px;height:54px;margin:4px 0 16px;border-radius:18px;background:#ffdf74;color:#512a88;border:3px solid #fff;box-shadow:0 5px 0 #e7b94d;text-decoration:none;font-size:31px;font-weight:800;line-height:1;touch-action:manipulation}
.colouring-section .colour-gallery-home:focus-visible{outline:4px solid #8d64ec;outline-offset:3px}
.colouring-section .colour-gallery-home:active{transform:translateY(3px);box-shadow:0 2px 0 #e7b94d}