/* CrayonKey gallery "rooms". Set on <body data-theme="...">. */

/* ---------- Room picker ---------- */
.room-picker { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 18px 16px 0; font-weight: 800; font-size: .9rem; }
.room-picker label { color: inherit; opacity: .8; }
.room-picker select { font: inherit; font-weight: 800; padding: 9px 36px 9px 14px; border-radius: 999px; border: 1.5px solid rgba(35,32,28,.18); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2323201c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center / 11px; color: #23201c; appearance: none; -webkit-appearance: none; cursor: pointer; box-shadow: 0 2px 8px -4px rgba(0,0,0,.25); }
.piece, .featured-art { color: #23201c; position: relative; }
body { transition: background-color .3s; }

/* Rooms that need tidy rows instead of the free-flowing columns */
body[data-theme="gallery"] .grid,
body[data-theme="museum"] .grid,
body[data-theme="fridge"] .grid,
body[data-theme="clothesline"] .grid,
body[data-theme="corkboard"] .grid {
  columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 34px; align-items: start;
}

/* ============ 1. Simple (default look) ============ */
body[data-theme="simple"] { background: var(--paper); }

/* ============ 2. Art gallery: white walls, black frames, placards ============ */
body[data-theme="gallery"] { background: #f6f5f2 linear-gradient(#f6f5f2 85%, #e9e6e0); }
body[data-theme="gallery"] .gallery-head h1 { font-weight: 600; letter-spacing: -.02em; }
body[data-theme="gallery"] .gallery-head .badge { background: transparent; border-color: #d9d5cc; }
/* The frame goes on the picture; the words sit under it like a wall placard. */
body[data-theme="gallery"] .featured-art,
body[data-theme="gallery"] .piece { background: transparent; padding: 0; border-radius: 0; box-shadow: none; transform: none; }
body[data-theme="gallery"] .featured-art img,
body[data-theme="gallery"] .piece img { background: #fff; padding: 22px; border: 6px solid #1d1d1d; box-shadow: 0 18px 30px -18px rgba(0,0,0,.45); }
body[data-theme="gallery"] .piece:hover { transform: translateY(-3px); }
body[data-theme="gallery"] .featured-art .cap { margin-top: 18px; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; font-family: "Nunito", sans-serif; font-weight: 800; }
body[data-theme="gallery"] .piece .t { margin-top: 14px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
body[data-theme="gallery"] .piece .d { font-size: .78rem; }

/* ============ 3. Museum: deep green walls, gold frames, spotlights ============ */
body[data-theme="museum"] { background: #22362d radial-gradient(ellipse at 50% -10%, rgba(255,240,200,.18), transparent 60%); color: #f4ead2; }
body[data-theme="museum"] .gallery-head p,
body[data-theme="museum"] .made-with,
body[data-theme="museum"] .made-with a { color: #d9c9a0; }
body[data-theme="museum"] .gallery-head h1 { color: #f4ead2; font-weight: 700; }
body[data-theme="museum"] .gallery-head .badge { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.15); color: #d9c9a0; }
body[data-theme="museum"] .room-picker select { border-color: rgba(255,255,255,.3); }
body[data-theme="museum"] .featured-art,
body[data-theme="museum"] .piece { background: #fbf6ea; padding: 18px; border-radius: 2px; transform: none;
  border: 14px solid #b8892b; border-image: linear-gradient(135deg, #f3d27a, #a8761c 30%, #f7df95 50%, #9c6b17 75%, #e8c264) 1;
  box-shadow: 0 0 0 2px #5c3d0a, 0 26px 40px -16px rgba(0,0,0,.7); }
body[data-theme="museum"] .piece::before,
body[data-theme="museum"] .featured-art::before { content: ""; position: absolute; left: 50%; top: -70px; width: 140%; height: 120px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(255,236,180,.28), transparent 65%); pointer-events: none; }
body[data-theme="museum"] .featured-art { position: relative; }
body[data-theme="museum"] .piece { margin-bottom: 30px; }
body[data-theme="museum"] .piece:hover { transform: translateY(-3px); }

/* ============ 4. Kid's room: polka dots, washi tape ============ */
body[data-theme="kids"] { background-color: #fff3d6; background-image: radial-gradient(#ffd0c8 14%, transparent 15%), radial-gradient(#cfe0ff 14%, transparent 15%); background-size: 46px 46px; background-position: 0 0, 23px 23px; }
body[data-theme="kids"] .gallery-head h1 { color: #e5483b; }
body[data-theme="kids"] .piece,
body[data-theme="kids"] .featured-art { border-radius: 4px; overflow: visible; }
body[data-theme="kids"] .piece::before,
body[data-theme="kids"] .featured-art::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: rgba(246,185,40,.75); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
body[data-theme="kids"] .featured-art { position: relative; }
body[data-theme="kids"] .piece:nth-child(3n+1) { transform: rotate(-2deg); }
body[data-theme="kids"] .piece:nth-child(3n+2) { transform: rotate(1.5deg); }
body[data-theme="kids"] .piece:nth-child(3n) { transform: rotate(-.8deg); }
body[data-theme="kids"] .piece:nth-child(3n+2)::before { background-color: rgba(47,111,219,.55); transform: translateX(-50%) rotate(3deg); }
body[data-theme="kids"] .piece:nth-child(3n)::before { background-color: rgba(229,72,59,.55); }
body[data-theme="kids"] .piece:hover { transform: rotate(0) scale(1.02); }

/* ============ 5. On the fridge: steel door, magnets ============ */
body[data-theme="fridge"] { background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, rgba(0,0,0,.025) 1px 3px, transparent 3px 6px), linear-gradient(180deg, #e9edf0 0%, #d3d9dd 55%, #c4cbd0 100%) #d3d9dd; }
body[data-theme="fridge"] .gallery-head .badge { background: #f4f6f7; }
body[data-theme="fridge"] .piece,
body[data-theme="fridge"] .featured-art { border-radius: 2px; box-shadow: 0 10px 18px -10px rgba(0,0,0,.4); }
body[data-theme="fridge"] .featured-art { position: relative; transform: rotate(1.5deg); }
body[data-theme="fridge"] .piece::before,
body[data-theme="fridge"] .featured-art::before { content: ""; position: absolute; top: -10px; left: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #ff8a7f, #e5483b 55%, #a62d22); box-shadow: 0 4px 6px rgba(0,0,0,.35); z-index: 2; }
body[data-theme="fridge"] .piece:nth-child(4n+2)::before { background: radial-gradient(circle at 35% 30%, #8fb4ff, #2f6fdb 55%, #1d4799); }
body[data-theme="fridge"] .piece:nth-child(4n+3)::before { background: radial-gradient(circle at 35% 30%, #ffe08a, #f6b928 55%, #b9850d); }
body[data-theme="fridge"] .piece:nth-child(4n)::before { background: radial-gradient(circle at 35% 30%, #8ee0b5, #2f9e6a 55%, #1c6a45); }
body[data-theme="fridge"] .piece:nth-child(odd) { transform: rotate(-1.6deg); }
body[data-theme="fridge"] .piece:nth-child(even) { transform: rotate(1.2deg); }
body[data-theme="fridge"] .piece:hover { transform: rotate(0) translateY(-3px); }

/* ============ 6. Backyard clothesline: sky, grass, clothespins ============ */
body[data-theme="clothesline"] { background:
  linear-gradient(180deg, #8fd0ff 0%, #c9ecff 38%, #9ad48a 38.2%, #6fbf5f 100%);
  background-repeat: no-repeat; min-height: 100vh; }
body[data-theme="clothesline"] .gallery-head .badge { background: rgba(255,255,255,.85); }
body[data-theme="clothesline"] .grid { overflow: hidden; padding-top: 30px; }
body[data-theme="clothesline"] .piece { border-radius: 2px; overflow: visible; transform-origin: 50% 0; }
body[data-theme="clothesline"] .piece::after { content: ""; position: absolute; top: -14px; left: -40px; right: -40px; height: 2px; background: #7a5a3a; z-index: 0; }
body[data-theme="clothesline"] .piece::before,
body[data-theme="clothesline"] .featured-art::before { content: ""; position: absolute; top: -22px; left: 22%; width: 10px; height: 34px; background: #d9a464; border-radius: 3px; box-shadow: calc(0px) 0 0 #d9a464, 0 2px 3px rgba(0,0,0,.25); z-index: 2; }
body[data-theme="clothesline"] .featured-art { position: relative; transform: rotate(-1deg); }
body[data-theme="clothesline"] .featured-art::after { content: ""; position: absolute; top: -22px; right: 22%; width: 10px; height: 34px; background: #d9a464; border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,.25); }
body[data-theme="clothesline"] .piece:nth-child(odd) { transform: rotate(-1.5deg); }
body[data-theme="clothesline"] .piece:nth-child(even) { transform: rotate(1.5deg); }
body[data-theme="clothesline"] .piece:hover { transform: rotate(0); }
body[data-theme="clothesline"] .made-with { color: #23401c; }

/* ============ 7. Classroom corkboard: cork, push pins ============ */
body[data-theme="corkboard"] { background-color: #c99a62; background-image:
  radial-gradient(rgba(120,72,30,.35) 1px, transparent 1.5px),
  radial-gradient(rgba(255,230,190,.35) 1px, transparent 1.5px),
  radial-gradient(rgba(90,50,20,.25) 1.5px, transparent 2px);
  background-size: 9px 9px, 13px 13px, 21px 21px; background-position: 0 0, 4px 6px, 10px 3px;
  box-shadow: inset 0 0 0 14px #8a5a2b, inset 0 0 0 18px #6d4420; min-height: 100vh; }
body[data-theme="corkboard"] .gallery-head h1 { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
body[data-theme="corkboard"] .gallery-head p { color: #fff6e6; }
body[data-theme="corkboard"] .made-with, body[data-theme="corkboard"] .made-with a { color: #fff6e6; }
body[data-theme="corkboard"] .piece,
body[data-theme="corkboard"] .featured-art { border-radius: 0; box-shadow: 0 8px 14px -8px rgba(0,0,0,.55); }
body[data-theme="corkboard"] .featured-art { position: relative; }
body[data-theme="corkboard"] .piece::before,
body[data-theme="corkboard"] .featured-art::before { content: ""; position: absolute; top: 8px; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #ff9a90, #e5483b 60%, #8f2018); box-shadow: 2px 5px 4px rgba(0,0,0,.35); z-index: 2; }
body[data-theme="corkboard"] .piece:nth-child(3n+2)::before { background: radial-gradient(circle at 35% 30%, #9cc0ff, #2f6fdb 60%, #183f8a); }
body[data-theme="corkboard"] .piece:nth-child(3n)::before { background: radial-gradient(circle at 35% 30%, #fff1a6, #f6b928 60%, #a87708); }
body[data-theme="corkboard"] .piece:nth-child(odd) { transform: rotate(1.2deg); }
body[data-theme="corkboard"] .piece:nth-child(even) { transform: rotate(-1.4deg); }
body[data-theme="corkboard"] .piece:hover { transform: rotate(0) translateY(-3px); }
body[data-theme="corkboard"] .gallery-head .badge { background: #fffdf6; }

/* ============ 8. Outer space: stars, glow ============ */
body[data-theme="space"] { background-color: #0d1330; color: #eef1ff; background-image:
  radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
  radial-gradient(1px 1px at 90px 120px, #fff, transparent),
  radial-gradient(1.5px 1.5px at 160px 60px, #ffe9a8, transparent),
  radial-gradient(1px 1px at 230px 170px, #fff, transparent),
  radial-gradient(2px 2px at 300px 90px, #cfe0ff, transparent),
  radial-gradient(ellipse at 80% 10%, rgba(155,93,229,.35), transparent 45%),
  radial-gradient(ellipse at 10% 90%, rgba(47,111,219,.35), transparent 45%);
  background-size: 330px 220px, 330px 220px, 330px 220px, 330px 220px, 330px 220px, 100% 100%, 100% 100%;
  background-attachment: fixed; }
body[data-theme="space"] .gallery-head h1 { color: #fff; }
body[data-theme="space"] .gallery-head p,
body[data-theme="space"] .made-with,
body[data-theme="space"] .made-with a { color: #b9c3f2; }
body[data-theme="space"] .gallery-head .badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #cfd6ff; }
body[data-theme="space"] .piece,
body[data-theme="space"] .featured-art { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 34px -6px rgba(155,170,255,.55); }
body[data-theme="space"] .piece:nth-child(odd) { transform: translateY(6px); }
body[data-theme="space"] .piece:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 44px -4px rgba(255,220,140,.7); }
body[data-theme="space"] .room-picker select { border-color: rgba(255,255,255,.3); }

/* =====================================================================
   ANIMATIONS ("room effects")
   Layers are added by the gallery script:
   .fx-page = scrolls with the page (clouds, stars)   .fx-view = stays on screen (balloons, sheen, shooting star)
   Everything is transform/opacity only, so it stays smooth on phones.
   ===================================================================== */
body { position: relative; }
.room-picker, .gallery-head, main, .made-with { position: relative; z-index: 1; }
.fx-page { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-view { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-page > *, .fx-view > * { display: none; position: absolute; }

/* Every room: art fades in one piece after another */
@keyframes ck-in { from { opacity: 0; } to { opacity: 1; } }
.piece, .featured-art { animation: ck-in .7s ease-out both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.featured-art { --i: -1; }

/* ---- Backyard: drifting clouds + art swaying on the line ---- */
body[data-theme="clothesline"] .cloud { display: block; top: var(--y); left: 0; width: var(--w); height: calc(var(--w) * .34); background: #fff; border-radius: 999px; opacity: .95;
  animation: ck-drift var(--d) linear infinite; animation-delay: var(--delay); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 46%; height: 135%; left: 16%; bottom: 25%; }
.cloud::after { width: 34%; height: 105%; right: 16%; bottom: 30%; }
@keyframes ck-drift { from { transform: translateX(-30vw); } to { transform: translateX(115vw); } }
@keyframes ck-sway { from { transform: rotate(calc(var(--tilt, 0deg) - 1.8deg)); } to { transform: rotate(calc(var(--tilt, 0deg) + 1.8deg)); } }
body[data-theme="clothesline"] .piece:nth-child(odd) { --tilt: -1deg; }
body[data-theme="clothesline"] .piece:nth-child(even) { --tilt: 1deg; }
body[data-theme="clothesline"] .piece,
body[data-theme="clothesline"] .featured-art { transform-origin: 50% -14px;
  animation: ck-in .7s ease-out both, ck-sway 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * 90ms + 150ms), calc(var(--i, 0) * -0.7s); }
body[data-theme="clothesline"] .featured-art { --tilt: -1deg; }

/* ---- Outer space: twinkling stars, a shooting star, floating art ---- */
body[data-theme="space"] .star { display: block; top: var(--y); left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.7);
  animation: ck-twinkle var(--d) ease-in-out infinite alternate; animation-delay: var(--delay); }
@keyframes ck-twinkle { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: scale(1.2); } }
body[data-theme="space"] .shooting { display: block; top: 12%; left: 70%; width: 160px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); transform: rotate(-24deg); opacity: 0;
  animation: ck-shoot 9s ease-in infinite; animation-delay: 2s; }
@keyframes ck-shoot { 0%, 86% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 88% { opacity: 1; } 96% { opacity: 0; transform: translate(-420px, 190px) rotate(-24deg); } 100% { opacity: 0; } }
@keyframes ck-float { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
body[data-theme="space"] .piece,
body[data-theme="space"] .featured-art { animation: ck-in .7s ease-out both, ck-float 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * 90ms + 150ms), calc(var(--i, 0) * -1.1s); }

/* ---- Kid's room: balloons floating up ---- */
body[data-theme="kids"] .balloon { display: block; left: var(--x); bottom: -140px; width: 46px; height: 58px; border-radius: 50% 50% 48% 52% / 58% 58% 42% 42%; background: var(--c);
  box-shadow: inset -7px -9px 0 rgba(0,0,0,.12), inset 6px 6px 0 rgba(255,255,255,.35); opacity: .6;
  animation: ck-rise var(--d) linear infinite; animation-delay: var(--delay); }
.balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 70px; background: rgba(60,50,40,.45); }
.balloon::before { content: ""; position: absolute; left: calc(50% - 4px); top: calc(100% - 2px); border: 4px solid transparent; border-bottom: 6px solid var(--c); transform: rotate(180deg); }
@keyframes ck-rise { 0% { transform: translate(0, 0); } 25% { transform: translate(18px, -30vh); } 50% { transform: translate(-14px, -60vh); } 75% { transform: translate(16px, -90vh); } 100% { transform: translate(0, -125vh); } }
@keyframes ck-wiggle { from { transform: rotate(calc(var(--tilt, 0deg) - .8deg)); } to { transform: rotate(calc(var(--tilt, 0deg) + .8deg)); } }
body[data-theme="kids"] .piece:nth-child(3n+1) { --tilt: -2deg; }
body[data-theme="kids"] .piece:nth-child(3n+2) { --tilt: 1.5deg; }
body[data-theme="kids"] .piece:nth-child(3n) { --tilt: -.8deg; }
body[data-theme="kids"] .piece { animation: ck-in .7s ease-out both, ck-wiggle 2.8s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * 90ms + 150ms), calc(var(--i, 0) * -0.5s); }

/* ---- Fridge: a light sheen sliding across the steel ---- */
body[data-theme="fridge"] .sheen { display: block; top: -20%; left: 0; width: 26vw; height: 140%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateX(-40vw) skewX(-18deg); animation: ck-sheen 10s ease-in-out infinite; }
@keyframes ck-sheen { 0%, 55% { transform: translateX(-40vw) skewX(-18deg); } 100% { transform: translateX(130vw) skewX(-18deg); } }

/* ---- Corkboard: papers rustle a little, like a fan is on ---- */
body[data-theme="corkboard"] .piece:nth-child(odd) { --tilt: 1.2deg; }
body[data-theme="corkboard"] .piece:nth-child(even) { --tilt: -1.4deg; }
body[data-theme="corkboard"] .piece { transform-origin: 50% 16px; animation: ck-in .7s ease-out both, ck-wiggle 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * 90ms + 150ms), calc(var(--i, 0) * -0.9s); }

/* ---- Museum: spotlights glow softly, dust floats in the light ---- */
@keyframes ck-glow { from { opacity: .65; } to { opacity: 1; } }
body[data-theme="museum"] .piece::before, body[data-theme="museum"] .featured-art::before { animation: ck-glow 3.5s ease-in-out infinite alternate; }
body[data-theme="museum"] .mote { display: block; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: rgba(255,236,180,.7);
  animation: ck-mote var(--d) ease-in-out infinite alternate; animation-delay: var(--delay); }
@keyframes ck-mote { from { transform: translate(0, 0); opacity: 0; } 50% { opacity: .9; } to { transform: translate(24px, -60px); opacity: 0; } }

/* People who turn on "reduce motion" on their phone get the still version. */
@media (prefers-reduced-motion: reduce) {
  .fx-page, .fx-view { display: none; }
  .piece, .featured-art, .piece::before, .featured-art::before { animation: none !important; }
}