/* Crew Country (Joseph 2026-09-28): the toy-land map of the Lab. Shared by the homepage map and the six area pages. */
.cc-wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.cc-tape{display:inline-block;background:var(--yellow,#ffc933);border:2px solid var(--ink,#2b2344);padding:3px 10px;font-size:.75rem;font-weight:900;letter-spacing:.08em;transform:rotate(-2deg);margin-bottom:8px}
.cc-map{position:relative;border:4px solid var(--ink,#2b2344);border-radius:22px;overflow:hidden;box-shadow:7px 7px 0 var(--ink,#2b2344);background:#f6e7cf}
.cc-map img{display:block;width:100%;height:auto}
/* Joseph Sr 2026-09-28: the map lives on the page, not in a box. The playset is cut out of its backdrop (map-free.webp keeps its own soft shadow). */
.cc-map.is-free{border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;margin:0 -2%}
/* map-mult.jpg has a pure white backdrop: multiply makes the white vanish into the page (dots and all) and keeps the shadow a real shadow */
.cc-map.is-free img{mix-blend-mode:multiply}
@media(max-width:700px){.cc-map.is-free{margin:0 -10px}}
.cc-spot{position:absolute;display:flex;align-items:flex-end;justify-content:center;border-radius:18px;text-decoration:none;outline-offset:-4px;transition:background .2s}
.cc-spot:hover,.cc-spot:focus-visible{background:rgba(255,201,51,.18)}
.cc-spot span{font-family:'Lilita One',sans-serif;font-size:clamp(.72rem,1.7vw,1.05rem);color:var(--ink,#2b2344);background:#fff;border:3px solid var(--ink,#2b2344);border-radius:12px;padding:3px 10px;box-shadow:3px 3px 0 var(--ink,#2b2344);white-space:nowrap;transform:translateY(40%) rotate(-1.5deg);transition:transform .2s}
.cc-spot:hover span,.cc-spot:focus-visible span{transform:translateY(40%) rotate(1deg) scale(1.06);background:var(--yellow,#ffc933)}
.cc-spot.is-stamped span:after{content:' \2605';color:var(--coral-ink,#c0392b)}
.cc-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.cc-chip{font-weight:900;text-decoration:none;color:var(--ink,#2b2344);background:#fff;border:3px solid var(--ink,#2b2344);border-radius:999px;padding:7px 14px;box-shadow:3px 3px 0 var(--ink,#2b2344);font-size:.92rem}
.cc-chip.is-here{background:var(--yellow,#ffc933)}
.cc-chip.is-stamped:after{content:' \2605';color:var(--coral-ink,#c0392b)}
/* passport */
.cc-passport{margin:28px 0 0;background:#fff;border:4px dashed var(--ink,#2b2344);border-radius:20px;padding:18px 18px 16px}
.cc-passport h3{font-family:'Lilita One',sans-serif;font-size:1.35rem;margin:0 0 4px}
.cc-passport p{margin:0 0 12px}
.cc-stamps{display:grid;grid-template-columns:repeat(6,minmax(0,104px));gap:14px;justify-content:start}
.cc-stamp{aspect-ratio:1/1;border-radius:50%;border:3px dashed var(--ink,#2b2344);background:#f6ecdc center/cover no-repeat;position:relative;opacity:.45;filter:grayscale(1)}
.cc-stamp.is-on{opacity:1;filter:none;border-style:solid;box-shadow:3px 3px 0 var(--ink,#2b2344)}
.cc-stamp.is-on:after{content:'\2605';position:absolute;right:-4px;top:-6px;background:var(--coral,#ff5d5d);color:#fff;border:2px solid var(--ink,#2b2344);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:.8rem}
.cc-stamp-label{display:block;font-size:.68rem;text-align:center;margin-top:4px;line-height:1.15}
.cc-reward{margin-top:16px;background:var(--yellow,#ffc933);border:3px solid var(--ink,#2b2344);border-radius:16px;padding:14px 16px}
.cc-reward[hidden]{display:none}
.cc-code{font-family:'Lilita One',sans-serif;font-size:1.7rem;letter-spacing:.06em;background:#fff;border:3px solid var(--ink,#2b2344);border-radius:12px;padding:2px 12px;display:inline-block;margin:6px 8px 6px 0}
.cc-btn{display:inline-block;font-family:'Nunito',sans-serif;font-weight:900;font-size:.95rem;text-decoration:none;color:var(--ink,#2b2344);background:#fff;border:3px solid var(--ink,#2b2344);border-radius:14px;padding:8px 14px;box-shadow:4px 4px 0 var(--ink,#2b2344);cursor:pointer}
.cc-btn-coral{background:var(--coral,#ff5d5d)} .cc-btn-teal{background:var(--teal,#2bc6b0)}
.cc-reward input{font:inherit;font-weight:800;border:3px solid var(--ink,#2b2344);border-radius:10px;padding:7px 10px;max-width:220px;margin-right:8px}
.cc-cert{display:none}
/* area pages */
.cc-hero{padding:22px 0 8px}
.cc-banner{border:4px solid var(--ink,#2b2344);border-radius:22px;overflow:hidden;box-shadow:7px 7px 0 var(--ink,#2b2344);aspect-ratio:21/9;background:#f6e7cf}
.cc-banner img{width:100%;height:100%;object-fit:cover;display:block}
.cc-hero h1{font-family:'Lilita One',sans-serif;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.02;margin:18px 0 0}
.cc-tag{font-family:'Caveat',cursive;font-size:1.7rem;margin:0 0 10px;color:var(--coral-ink,#c0392b)}
.cc-host{display:flex;gap:14px;align-items:flex-start;margin:10px 0 6px}
.cc-host img{width:74px;height:74px;border-radius:50%;border:3px solid var(--ink,#2b2344);object-fit:cover;background:#fff;flex:none}
.cc-say{position:relative;background:#fff;border:3px solid var(--ink,#2b2344);border-radius:16px;padding:10px 14px;box-shadow:3px 3px 0 var(--ink,#2b2344);font-size:1.05rem}
.cc-say:before{content:'';position:absolute;left:-13px;top:18px;border:9px solid transparent;border-right-color:var(--ink,#2b2344)}
.cc-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);background:var(--ink,#2b2344);color:#fff;font-weight:900;border-radius:14px;padding:10px 16px;z-index:60;transition:transform .35s;max-width:92vw;text-align:center}
.cc-toast.is-on{transform:translate(-50%,0)}
.cc-h2{font-family:'Lilita One',sans-serif;font-size:clamp(1.6rem,4vw,2.2rem);margin:34px 0 4px}
.cc-sub{margin:0 0 14px}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:22px}
.cc-card{background:#fff;border:4px solid var(--ink,#2b2344);border-radius:20px;box-shadow:6px 6px 0 var(--ink,#2b2344);overflow:visible;display:flex;flex-direction:column;position:relative;scroll-margin-top:90px}
.cc-card.is-buddy{animation:cc-hop .5s ease}
.cc-face{position:relative;aspect-ratio:1/1;background:#fff6e9;border-bottom:4px solid var(--ink,#2b2344);border-radius:16px 16px 0 0;overflow:hidden;cursor:pointer;perspective:900px}
.cc-flip{position:absolute;inset:0;transition:transform .6s;transform-style:preserve-3d}
.cc-card.is-flipped .cc-flip{transform:rotateY(180deg)}
.cc-flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden}
.cc-flip img.cc-back{transform:rotateY(180deg);object-fit:contain;background:#fff6e9}
.cc-face .cc-toy{transition:transform .2s}
.cc-bubble{position:absolute;left:10px;right:10px;top:-14px;transform:translateY(-100%);background:#fff;border:3px solid var(--ink,#2b2344);border-radius:14px;padding:8px 11px;font-size:.93rem;line-height:1.3;box-shadow:3px 3px 0 var(--ink,#2b2344);opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
.cc-bubble:after{content:'';position:absolute;left:28px;bottom:-12px;border:6px solid transparent;border-top-color:var(--ink,#2b2344)}
.cc-bubble.is-on{opacity:1}
.cc-tap{position:absolute;left:10px;bottom:10px;background:var(--ink,#2b2344);color:#fff;font-weight:900;font-size:.75rem;border-radius:999px;padding:4px 10px;letter-spacing:.04em;pointer-events:none}
.cc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cc-body h3{font-family:'Lilita One',sans-serif;font-size:1.3rem;margin:0;line-height:1.1}
.cc-job{font-family:'Caveat',cursive;font-size:1.3rem;margin:0;color:#1f7a70}
.cc-move{font-size:.88rem;margin:0}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-wrap:wrap}
.cc-price{font-family:'Lilita One',sans-serif;font-size:1.5rem}
.cc-mini{font-size:.8rem;font-weight:900;background:none;border:0;text-decoration:underline;cursor:pointer;color:var(--ink,#2b2344);padding:0}
.cc-store{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.cc-tile{display:block;text-decoration:none;color:var(--ink,#2b2344);background:#fff;border:4px solid var(--ink,#2b2344);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 var(--ink,#2b2344)}
.cc-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-bottom:3px solid var(--ink,#2b2344)}
.cc-tile b{display:block;font-family:'Lilita One',sans-serif;font-weight:400;font-size:1.15rem;padding:10px 12px 0}
.cc-tile span{display:block;padding:2px 12px 12px;font-size:.88rem}
.cc-about{margin:30px 0 0;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cc-note{font-size:.84rem;opacity:.8;margin:26px 0 0}
.cc-next{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 0}
/* moves: only the planned move, never a mechanism the print has not proved */
@keyframes cc-hop{0%,100%{transform:none}40%{transform:translateY(-10px)}}
@keyframes cc-wiggle{0%,100%{transform:none}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@keyframes cc-nod{0%,100%{transform:none}30%{transform:translateY(6px) rotate(2deg)}60%{transform:translateY(-3px)}}
@keyframes cc-tilt{0%,100%{transform:none}35%,65%{transform:rotate(-9deg)}}
@keyframes cc-twist{0%,100%{transform:none}30%{transform:rotate(10deg) scale(1.03)}65%{transform:rotate(-8deg)}}
@keyframes cc-curl{0%,100%{transform:none}40%,60%{transform:scale(.9,.94) rotate(-6deg)}}
@keyframes cc-hug{0%,100%{transform:none}40%,60%{transform:scale(1.07,.95)}}
@keyframes cc-shuffle{0%,100%{transform:none}25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-5px)}}
@keyframes cc-wobble{0%,100%{transform:none}25%{transform:scale(1.05,.95)}50%{transform:scale(.96,1.04)}75%{transform:scale(1.03,.97)}}
@keyframes cc-howdy{0%,100%{transform:none}30%{transform:rotate(-6deg) translateY(-6px)}60%{transform:rotate(4deg)}}
.cc-go-wiggle{animation:cc-wiggle .8s ease}.cc-go-nod{animation:cc-nod .7s ease}.cc-go-tilt{animation:cc-tilt .9s ease}.cc-go-twist{animation:cc-twist .8s ease}
.cc-go-curl{animation:cc-curl .9s ease}.cc-go-hug{animation:cc-hug .8s ease}.cc-go-shuffle{animation:cc-shuffle .7s ease}.cc-go-wobble{animation:cc-wobble .8s ease}.cc-go-howdy{animation:cc-howdy .8s ease}
@media (prefers-reduced-motion:reduce){.cc-flip{transition:none}.cc-toast{transition:none}[class*="cc-go-"],.cc-card.is-buddy{animation:none!important}}
@media (max-width:640px){.cc-stamps{grid-template-columns:repeat(3,1fr)}.cc-spot span{padding:2px 7px;border-width:2px;box-shadow:2px 2px 0 var(--ink,#2b2344)}}
@media print{body *{visibility:hidden}.cc-cert,.cc-cert *{visibility:visible}.cc-cert{display:block!important;position:fixed;inset:0;padding:60px;text-align:center;font-family:'Lilita One',sans-serif}}
.cc-card.is-flipped .cc-tap{display:none}
/* No boxes (Joseph Sr 2026-09-28: "should match the background, blend in; remove the boxes around other items").
   Banners: repainted on pure white (tools/map-backdrop.py + art-onpage.py white) and multiplied into the page, edges faded so cropped pieces dissolve.
   Resident toys: backdrop shifted to exactly the page cream (art-onpage.py cream); the card frame is gone, the toy stands on the page.
   Flip cards cannot use multiply (the flip's 3D transform isolates it), so the toys use the cream copies instead. */
.cc-banner.is-free{border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;aspect-ratio:auto}
.cc-banner.is-free img{height:auto;max-height:440px;object-fit:contain;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.cc-card{background:transparent;border:0;box-shadow:none}
.cc-face{background:transparent;border-bottom:0;border-radius:0;overflow:visible}
.cc-flip img.cc-toy{object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.cc-flip img.cc-back{border:4px solid var(--ink,#2b2344);border-radius:18px;box-shadow:5px 5px 0 var(--ink,#2b2344)}   /* the adoption card on the back is a real card, so it keeps a card's edge */
.cc-body{padding:4px 4px 8px;text-align:center;align-items:center}
.cc-body .cc-row{justify-content:center;width:100%}