:root {
  --bowl-ink: #3b1430;
  --bowl-pink: #ec4fa7;
  --bowl-deep: #8e0f62;
  --bowl-gold: #ffc928;
  --bowl-soft: #fff5fb;
  --bowl-line: #f2bedc;
}

.petles-live-bowl { color: var(--bowl-ink); margin: 1rem 0; }
.petles-live-bowl header { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: 1.25rem; }
.petles-bowl-selectors { display: grid; grid-template-columns: repeat(3, minmax(6.5rem, 1fr)); gap: .65rem; overflow-x: auto; padding: .75rem .1rem; }
.petles-bowl-selectors button { min-width: 6.5rem; border: 2px solid var(--bowl-line); border-radius: 1.2rem; background: white; color: var(--bowl-ink); padding: .85rem .45rem; font: inherit; }
.petles-bowl-selectors button[aria-pressed="true"] { border-color: var(--bowl-deep); box-shadow: 0 0 0 3px var(--bowl-gold); }
.petles-bowl-selectors span, .petles-bowl-selectors small { display: block; }
.petles-bowl-art { position: relative; min-height: 12rem; overflow: hidden; border: 4px solid var(--bowl-line); border-radius: 2rem 2rem 5rem 5rem; background: linear-gradient(#fff9ee, #f3cf8d); }
.petles-bowl-art::after { content: ""; position: absolute; inset: auto 8% 3% 8%; height: 45%; border: 5px solid #c99728; border-top: 0; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.2), #78e9b6); }
.petles-bowl-art.skin-02::after { border-color: #df78ad; background: linear-gradient(180deg, rgba(255,255,255,.2), #f4c7df); }
.petles-bowl-art.skin-03::after { border-color: #61ae9d; background: linear-gradient(180deg, rgba(255,255,255,.2), #a6eadb); }
.petles-bowl-items { position: relative; z-index: 1; min-height: 11rem; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: .35rem; padding: 1rem 12% 2.5rem; }
.bowl-item { display: inline-flex; align-items: end; gap: .05rem; font-size: 1.55rem; filter: drop-shadow(0 2px 1px rgba(59,20,48,.15)); }
.bowl-item small { font-size: .7rem; font-weight: 800; }
.bowl-empty { align-self: center; color: #80516f; font-weight: 700; }
.petles-bowl-permanent { margin: .55rem 0; color: #80516f; font-size: .92rem; }
.petles-bowl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.petles-bowl-actions button { border: 0; border-radius: 1.2rem; padding: .9rem; background: linear-gradient(var(--bowl-gold), #e5a900); color: var(--bowl-ink); box-shadow: 0 .45rem 0 #a97800; font: 800 1rem/1.1 system-ui, sans-serif; }
.petles-bowl-actions button:last-child { color: white; background: linear-gradient(#f167b6, var(--bowl-deep)); box-shadow: 0 .45rem 0 #5c073f; }
.petles-bowl-actions button:disabled { opacity: .55; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 420px) {
  .petles-bowl-selectors { grid-template-columns: repeat(3, 7rem); }
  .petles-bowl-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .petles-live-bowl *, .petles-live-bowl *::before, .petles-live-bowl *::after { animation: none !important; transition: none !important; }
}