/* ============================================================================
   Painter — Arline Arcade
   One big sheet of paper in a gold frame, ten fat paint swatches, gold pills.
   Everything is finger-sized (>=48px) and lives on the shared felt theme.
   ========================================================================== */

/* a real app layout: definite heights all the way down so the paper can
   fill the space (page-scoped — this sheet only loads on the Painter page) */
body{ height:100dvh }

main.studio{
  width:100%; max-width:var(--maxw); flex:1; min-height:0;
  display:flex; flex-direction:column; gap:clamp(8px,1.6vw,14px);
  padding:clamp(8px,1.6vw,14px) clamp(10px,2.5vw,24px) clamp(12px,2vw,20px);
}

/* ---- the paper ------------------------------------------------------------ */
.paper-frame{
  flex:1; min-height:180px; padding:7px; border-radius:16px;
  background:var(--gold-grad);
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,240,176,.5);
}
#paper{
  display:block; width:100%; height:100%; border-radius:10px;
  background:#fffdf6;                      /* warm paper white */
  touch-action:none;                       /* fingers paint, they don't scroll */
  cursor:crosshair;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), inset 0 2px 10px rgba(0,0,0,.10);
}

/* ---- controls ------------------------------------------------------------- */
.controls{ display:flex; flex-direction:column; gap:clamp(8px,1.4vw,12px) }

.swatches{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.swatch{
  width:52px; height:52px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--c); border:3px solid rgba(0,0,0,.4);
  box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.28);
  transition:transform var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}
.swatch[aria-pressed="true"]{
  border-color:var(--gold-hi); transform:scale(1.14);
  box-shadow:0 0 0 4px var(--gold), 0 5px 14px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.28);
}

.tools{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center }
.size-group{ display:inline-flex; flex-wrap:wrap; gap:10px; justify-content:center }

.pill{
  min-height:52px; padding:.6rem 1.2rem; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font:700 1.02rem/1 var(--display); letter-spacing:.01em;
  color:var(--paper); background:rgba(0,0,0,.28); border:2px solid var(--line);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  transition:transform var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard),
             background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
}
.pill:hover{ border-color:var(--gold); box-shadow:0 5px 14px rgba(0,0,0,.4), 0 0 16px rgba(233,195,74,.3) }
.pill:active{ transform:scale(.97) }
.pill[disabled]{ opacity:.45; cursor:default; transform:none; box-shadow:none }

/* lit-up (selected) pills: gold, like the craps roll button */
.pill[aria-pressed="true"], .pill.gold{
  color:var(--ink); background:var(--gold-grad); border-color:transparent;
  box-shadow:0 5px 16px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,240,176,.5);
}
.pill.gold{ font-weight:800 }

/* the "Really clear?" armed state */
#clear.armed{ color:#fff; background:var(--red); border-color:transparent;
  box-shadow:0 5px 16px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.35) }

/* stable widths so "Really clear?" / "Saved!" don't reflow the paper */
#clear{ min-width:11.5ch }
#save{ min-width:12.5ch }

/* size dots: drawn with currentColor so they flip dark on the gold pill */
.dot{ border-radius:50%; background:currentColor; flex:none }
.dot-s{ width:8px;  height:8px  }
.dot-m{ width:15px; height:15px }
.dot-l{ width:24px; height:24px }

@media (prefers-reduced-motion:reduce){
  .pill,.swatch{ transition:none }
  .swatch[aria-pressed="true"]{ transform:none }
}