/* ==========================================================================
   theme-doodle.css — 「塗鴉」主題結構性覆寫（快修包 A）
   顏色／圓角／邊框粗細／陰影已經是 design tokens，會在 app.css 的
   [data-theme="doodle"] 區塊自動套用到所有元件，這裡只放「token 覆蓋不了」
   的結構性差異：按下去的硬邊位移動畫、分頁列圖示微傾、還有裝飾用的小塗鴉。

   使用者明確修正過：原設計稿（scratchpad/design-options/theme-d.html）幾乎
   每個區塊都有 rotate(-1deg) 這類整體歪斜，但那些區塊裡面都是文字——套用到
   真的 app 上文字會被歪斜，難以閱讀也不專業。這裡刻意「一律擺正」：
   全檔只有兩處 rotate，且都限定在非文字的裝飾用小圖上：
     1. 分頁列目前選取項目的圖示（tabbar-item.is-active svg）——圖示本身無文字。
     2. .view-title 右上角的裝飾用星星小圖（純 CSS 背景圖，不是文字內容）。
   ========================================================================== */

:root[data-theme="doodle"] .btn:not(.btn-ghost) {
  box-shadow: var(--shadow-sm);
}
:root[data-theme="doodle"] .btn:not(.btn-ghost):active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* 分頁列選取中的圖示：純裝飾、不含文字，允許微傾 */
:root[data-theme="doodle"] .tabbar-item.is-active svg {
  transform: rotate(-6deg);
}

/* 標題角落的裝飾星星：純 CSS 背景圖（非文字），允許微傾 */
:root[data-theme="doodle"] .view-title {
  position: relative;
  display: inline-block;
  padding-right: 26px;
}
:root[data-theme="doodle"] .view-title::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.6 4.8L18 8.2l-4.4 2 -1.6 5-1.6-5-4.4-2 4.4-1.4L12 2z' fill='%23f4b93e' stroke='%232b2620' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(10deg);
  pointer-events: none;
}

/* 底部分頁列在塗鴉主題改用實色分隔線（token 已是粗黑框，這裡加一點內距讓
   選取狀態視覺更明顯，仍不涉及任何 rotate） */
:root[data-theme="doodle"] .tabbar-item.is-active {
  font-weight: 800;
}