/* ---------------------------------------------------------------------------
   art.css — putting Ted's own number art on the pages.

   The art lives in art/n/1.png … art/n/100.png (the quantity with its numeral
   below) and art/sq/1,4,9,…,100.png (the squares, colored by place value).
   It is generated by tools/build-art.py from the shirt artwork; never edit it
   by hand.

   THE ONE RULE THIS FILE EXISTS TO ENFORCE. Every dot in that art carries a
   heavy BLACK outline, and a ten is ten dots inside a BLACK triangle. The site's
   hub pages are black. Dropped straight onto them the outlines vanish and a ten
   stops reading as one ten — which is the entire job the triangle does. So the
   art always sits on its own white ground, like the printed card it is. Do not
   "simplify" that away.
--------------------------------------------------------------------------- */

.cmm-chip{
  background:#fff;
  border:1px solid #e3e6ea;
  border-radius:18px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cmm-chip img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}

/* a tile's icon slot, in place of an emoji */
.tile .icon.cmm-chip,
.card .art.cmm-chip{
  width:112px;
  height:112px;
  font-size:0;          /* kill the inherited emoji sizing */
  flex:0 0 auto;
}
.tile.featured .icon.cmm-chip{ width:150px; height:150px; border-radius:24px; }
@media (max-width:560px){
  .tile .icon.cmm-chip, .card .art.cmm-chip{ width:92px; height:92px; }
  .tile.featured .icon.cmm-chip{ width:112px; height:112px; }
}

/* ---- the number line across the top of a hub page ---- */
/* Ten chips at their widest (84px) plus nine 8px gaps is 912px, so the row has
   to be allowed 980 or ten wraps onto a line of its own. On a phone the clamp
   floors the chips at 58px and it breaks into two tidy rows of five, which is
   how the book lays the count out anyway. */
.cmm-strip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  max-width:980px;
  margin:0 auto 46px;
  padding:0 4px;
}
.cmm-strip .cmm-chip{
  width:clamp(58px,8.4vw,84px);
  height:clamp(58px,8.4vw,84px);
  padding:7px;
  border-radius:14px;
  cursor:pointer;
  border:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cmm-strip .cmm-chip:hover,
.cmm-strip .cmm-chip:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 7px 18px rgba(255,255,255,.28);
  outline:none;
}
.cmm-strip .cmm-chip:active{ transform:translateY(-1px) scale(.95); }
.cmm-strip .cmm-chip.said{ animation:cmmPop .42s ease; }
@keyframes cmmPop{ 40%{ transform:translateY(-12px) scale(1.14); } }

.cmm-strip-note{
  text-align:center;
  color:#8b9099;
  font:13px Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 14px;
}

@media (prefers-reduced-motion:reduce){
  .cmm-strip .cmm-chip,
  .cmm-strip .cmm-chip.said{ transition:none; animation:none; }
}

/* ---- the shop band, at the foot of a page ---------------------------------
   Built by art.js into <div class="cmm-shop"></div>. It is deliberately below
   everything a child came for: the site teaches first and sells second, so
   this never sits above the games or inside one. */
.cmm-shop{
  border-top:1px solid #23272c;
  margin-top:64px;
  padding-top:40px;
}
.cmm-shop-head{
  text-align:center;
  font:800 clamp(22px,4.4vw,32px) Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0;
  color:#fff;
}
.cmm-shop-sub{
  text-align:center;
  color:#8b9099;
  font:15px Arial,sans-serif;
  margin:10px 0 24px;
}
/* a scrolling shelf, so seven shirts never squash to stamps on a phone */
.cmm-shop-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 14px;
  scroll-snap-type:x mandatory;
}
.cmm-shop-item{
  flex:0 0 auto;
  width:clamp(146px,30vw,196px);
  text-decoration:none;
  color:#fff;
  scroll-snap-align:start;
  transition:transform .18s ease;
}
.cmm-shop-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  background:#fff;
}
.cmm-shop-item span{
  display:block;
  margin-top:10px;
  font:bold 13px Arial,sans-serif;
  line-height:1.35;
  color:#c9d2dc;
}
.cmm-shop-item:hover,
.cmm-shop-item:focus-visible{ transform:translateY(-5px); outline:none; }
.cmm-shop-item:hover span,
.cmm-shop-item:focus-visible span{ color:#fff; text-decoration:underline; }

.cmm-shop-all{
  display:block;
  width:fit-content;
  margin:20px auto 0;
  padding:14px 30px;
  border:3px solid #fff;
  border-radius:999px;
  color:#fff;
  font:bold 16px Arial,sans-serif;
  text-decoration:none;
}
.cmm-shop-all:hover,
.cmm-shop-all:focus-visible{ background:#fff; color:#000; outline:none; }

@media (prefers-reduced-motion:reduce){
  .cmm-shop-item{ transition:none; }
}