/* Shared clay line icons. CSS masks survive changing button labels. */
[data-tool="pinch"], .free-card .mode-top,
[data-tool="pull"],
[data-tool="push"],
[data-tool="smooth"],
.shelf-mode .mode-top, #openClay, .shelf-import,
.daily-card .mode-top, #dailyStart,
.multiplayer-card .mode-top, #createRoom,
#homeLink, .home-page header > a:not(.logo),
#saveClay,
#reveal,
[data-panel="colors"],
[data-panel="heads"],
[data-mode="move"], #turn,
#mobileMirror,
#shuffle,
#sizeToggle,
.account-button,
#artistChatToggle, #guessForm button,
#copyRoom,
#refreshDaily { --clay-icon-size: 18px; }
[data-tool="pinch"]::before,
.free-card .mode-top::before,
[data-tool="pull"]::before,
[data-panel="tools"]::before,
[data-tool="push"]::before,
[data-tool="smooth"]::before,
.shelf-mode .mode-top::before,
#openClay::before,
.shelf-import::before,
.daily-card .mode-top::before,
#dailyStart::before,
.multiplayer-card .mode-top::before,
#createRoom::before,
#homeLink::before,
.home-page header > a:not(.logo)::before,
#saveClay::before,
#reveal::before,
[data-panel="colors"]::before,
[data-panel="heads"]::before,
[data-mode="move"]::before,
#turn::before,
#mobileMirror::before,
#shuffle::before,
#sizeToggle::before,
.account-button::before,
#artistChatToggle::before,
#guessForm button::before,
#copyRoom::before,
#refreshDaily::before {
  content: "";
  display: inline-block;
  width: var(--clay-icon-size);
  height: var(--clay-icon-size);
  flex: 0 0 var(--clay-icon-size);
  vertical-align: -3px;
  margin-right: 6px;
  background: currentColor;
  -webkit-mask: var(--clay-icon) center / contain no-repeat;
  mask: var(--clay-icon) center / contain no-repeat;
  pointer-events: none;
}
[data-tool="pinch"], .free-card .mode-top { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2012V6a2%202%200%200%201%204%200v5-7a2%202%200%200%201%204%200v7-4a2%202%200%200%201%204%200v8c0%204-3%206-7%206-2%200-4-1-5-3l-4-5a2%202%200%200%201%203-3l1%202Z%22%2F%3E%3C%2Fsvg%3E"); }
[data-tool="pull"], [data-panel="tools"] { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18M5%2017c0-4%203-7%207-7s7%203%207%207M12%202v5M9.5%204.5h5%22%2F%3E%3C%2Fsvg%3E"); }
[data-tool="push"] { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18M4%2017c0-4%202-6%204-4s6%202%208%200%204%200%204%204M12%202v8m-3-3%203%203%203-3%22%2F%3E%3C%2Fsvg%3E"); }
[data-tool="smooth"] { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208c3-5%206%205%209%200s6%205%209%200M3%2014c3-5%206%205%209%200s6%205%209%200M5%2020h14%22%2F%3E%3C%2Fsvg%3E"); }
.shelf-mode .mode-top, #openClay, .shelf-import { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204v17M21%204v17M3%2012h18M3%2020h18M7%209V6a2%202%200%200%201%204%200v3M15%205h3v4M7%2016h3M14%2016h3%22%2F%3E%3C%2Fsvg%3E"); }
.daily-card .mode-top, #dailyStart { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M7%203v4M17%203v4M3%2011h18m-13%205%203%202%205-4%22%2F%3E%3C%2Fsvg%3E"); }
.multiplayer-card .mode-top, #createRoom { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-3a6%206%200%200%201%2012%200v3M16%204a3%203%200%200%201%200%206M18%2014a5%205%200%200%201%203%204v3%22%2F%3E%3C%2Fsvg%3E"); }
#homeLink, .home-page header > a:not(.logo) { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%209-8%209%208M5%2010v11h5v-7h4v7h5V10%22%2F%3E%3C%2Fsvg%3E"); }
#saveClay { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h12l4%204v14H3V3h2ZM7%203v6h9V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E"); }
#reveal { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%204%204L19%206%22%2F%3E%3C%2Fsvg%3E"); }
[data-panel="colors"] { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%200-9%209h2a2%202%200%200%200%201-4%202%202%200%200%201%201-4h3c1%200%202%200%202-1Z%22%2F%3E%3Cpath%20d%3D%22M7%209h.01M11%206h.01M16%208h.01M6%2014h.01%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
[data-panel="heads"] { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%227%22%2F%3E%3C%2Fsvg%3E"); }
[data-mode="move"], #turn { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%2210%22%20ry%3D%225%22%20transform%3D%22rotate%28-30%2012%2012%29%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
#mobileMirror { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18M8%206%203%2018h5V6Zm8%200%205%2012h-5V6Z%22%2F%3E%3C%2Fsvg%3E"); }
#shuffle { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h3c5%200%207%2012%2012%2012h3m-3-3%203%203-3%203M3%2018h3c2%200%203-2%204-4m4-4c1-2%202-4%204-4h3m-3-3%203%203-3%203%22%2F%3E%3C%2Fsvg%3E"); }
#sizeToggle { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.account-button { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-2a8%208%200%200%201%2016%200v2%22%2F%3E%3C%2Fsvg%3E"); }
#artistChatToggle, #guessForm button { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-8%208H4l-1%202V11a9%209%200%200%201%2018%201Z%22%2F%3E%3Cpath%20d%3D%22M7%2011h10M7%2015h6%22%2F%3E%3C%2Fsvg%3E"); }
#copyRoom { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m10%2014%204-4M8%2016l-1%201a4%204%200%200%201-6-6l4-4a4%204%200%200%201%206%200M16%208l1-1a4%204%200%200%201%206%206l-4%204a4%204%200%200%201-6%200%22%20transform%3D%22translate%281%200%29%20scale%28.9%29%22%2F%3E%3C%2Fsvg%3E"); }
#refreshDaily { --clay-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%209a8%208%200%201%200%200%207M20%203v6h-6%22%2F%3E%3C%2Fsvg%3E"); }

.mode-card .mode-top { --clay-icon-size: 36px; color: #65526a; }
.mode-card .mode-top::before { margin-right: 0; }
.sculpt-page .shape { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sculpt-page .shape::before { --clay-icon-size: 23px; margin: 0; }
.sculpt-page svg { stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .sculpt-page .shape::before { --clay-icon-size: 20px; }
  .sculpt-page .shape { gap: 2px; }
  .sculpt-page .mobile-tabs button::before { --clay-icon-size: 14px; margin-right: 4px; }
  .sculpt-page #turn::before { --clay-icon-size: 14px; margin-right: 3px; }
}