/* Yuna 手繪風格 tokens
   用法：<link rel="stylesheet" href="tokens.css">，並把 filters.svg 的內容貼進 <body> 一次。
   深色模式：跟著系統；要強制可在 <html> 或任一區塊加 data-theme="light" / "dark"。 */
@import url("https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@400;700&display=swap");

:root{
  /* 她的麥克筆色（取自說明書：Switch 藍紅、攀岩點紫綠粉、書的藍、笑臉黃） */
  --yh-blue:#2F5FD0;   /* 書、Switch 左手把 */
  --yh-sky:#5BC0E8;    /* 水藍點點 */
  --yh-red:#E2463A;    /* Switch 右手把、印章 */
  --yh-yellow:#F6CF2E; /* 笑臉 */
  --yh-purple:#8A5BD6; /* 攀岩點 */
  --yh-green:#2E9E4F;  /* 攀岩點 */
  --yh-pink:#E77BC3;   /* 攀岩點、小花 */
  --yh-teal:#1F9C93;   /* 攀岩點 */
  --yh-grey:#6C6863;
  --yh-ink-fixed:#2B2926; /* 白底元素上的細節，深淺模式都不變 */

  /* 紙與筆（會隨深淺模式變） */
  --yh-paper:#FBF8F1;
  --yh-ink:#3A3833;
  --yh-muted:#8A857A;
  --yh-rule:#E4DED0;

  --yh-font:"LXGW WenKai TC","Noto Sans TC",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --yh-paper:#1E1D1A; --yh-ink:#ECE7DB; --yh-muted:#A39D90; --yh-rule:#38352F; color-scheme:dark;
  }
}
[data-theme="dark"]{
  --yh-paper:#1E1D1A; --yh-ink:#ECE7DB; --yh-muted:#A39D90; --yh-rule:#38352F; color-scheme:dark;
}
[data-theme="light"]{
  --yh-paper:#FBF8F1; --yh-ink:#3A3833; --yh-muted:#8A857A; --yh-rule:#E4DED0; color-scheme:light;
}

/* 紙面：頁面或卡片底色＋手寫字 */
.yh-page{background:var(--yh-paper);color:var(--yh-ink);font-family:var(--yh-font)}

/* ── 圖示：三級尺寸，各套不同濃度的手繪效果 ── */
.yh-icon{color:var(--yh-ink);overflow:visible;flex:none}
.yh-icon.yh-96{width:96px;height:96px}
.yh-icon.yh-48{width:48px;height:48px}
.yh-icon.yh-24{width:24px;height:24px}
.yh-96 .yh-line{filter:url(#yh-wob-l)}
.yh-96 .yh-again{display:inline;filter:url(#yh-wob-l2)}
.yh-96 .yh-tilt{transform:rotate(-1.5deg);transform-origin:32px 32px}
.yh-96 .yh-marker,.yh-48 .yh-marker{filter:url(#yh-marker)}
.yh-48 .yh-line{filter:url(#yh-wob-m)}
/* .yh-24：刻意不加任何濾鏡 */

/* ── 彩色圓點虛線分隔（說明書的分段線；順序藍→紅→紫→水藍） ── */
.yh-dots{
  --yh-dot:var(--yh-blue);
  border:0;height:10px;margin:14px 0;
  background:radial-gradient(circle,var(--yh-dot) 3.2px,transparent 3.6px) 0 50%/16px 10px space no-repeat;
}
.yh-dots--red{--yh-dot:var(--yh-red)}
.yh-dots--purple{--yh-dot:var(--yh-purple)}
.yh-dots--sky{--yh-dot:var(--yh-sky)}

/* ── 標題下的手繪波浪底線（麥克筆畫的，略粗、不規則） ── */
.yh-wave{--yh-wave:var(--yh-blue);position:relative;display:inline-block;padding-bottom:12px}
.yh-wave::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:0;height:10px;
  background:var(--yh-wave);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6c12-4 22 1 34-1s20-3 32 0 24 2 34-1 10 0 14 1' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6c12-4 22 1 34-1s20-3 32 0 24 2 34-1 10 0 14 1' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.yh-wave--purple{--yh-wave:var(--yh-purple)}
.yh-wave--red{--yh-wave:var(--yh-red)}

/* ── 印章「限量 全世界唯一」：鉛筆圓框＋外圈紅色圓點，微微歪
   <span class="yh-stamp" role="img" aria-label="限量 全世界唯一"><span>限量全</span><span>世界<b>唯一</b></span></span> ── */
.yh-stamp{
  --yh-stamp-size:64px;
  display:inline-grid;place-content:center;text-align:center;flex:none;
  width:var(--yh-stamp-size);height:var(--yh-stamp-size);border-radius:50%;
  border:1.5px solid var(--yh-ink);
  position:relative;
  font-family:var(--yh-font);font-size:calc(var(--yh-stamp-size) * .19);line-height:1.15;
  color:var(--yh-ink);transform:rotate(-8deg);
}
.yh-stamp::before{
  content:"";position:absolute;inset:-9px;background:var(--yh-red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='96.0' cy='50.0' r='2.6'/%3E%3Ccircle cx='94.4' cy='61.9' r='2.6'/%3E%3Ccircle cx='89.8' cy='73.0' r='2.6'/%3E%3Ccircle cx='82.5' cy='82.5' r='2.6'/%3E%3Ccircle cx='73.0' cy='89.8' r='2.6'/%3E%3Ccircle cx='61.9' cy='94.4' r='2.6'/%3E%3Ccircle cx='50.0' cy='96.0' r='2.6'/%3E%3Ccircle cx='38.1' cy='94.4' r='2.6'/%3E%3Ccircle cx='27.0' cy='89.8' r='2.6'/%3E%3Ccircle cx='17.5' cy='82.5' r='2.6'/%3E%3Ccircle cx='10.2' cy='73.0' r='2.6'/%3E%3Ccircle cx='5.6' cy='61.9' r='2.6'/%3E%3Ccircle cx='4.0' cy='50.0' r='2.6'/%3E%3Ccircle cx='5.6' cy='38.1' r='2.6'/%3E%3Ccircle cx='10.2' cy='27.0' r='2.6'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.6'/%3E%3Ccircle cx='27.0' cy='10.2' r='2.6'/%3E%3Ccircle cx='38.1' cy='5.6' r='2.6'/%3E%3Ccircle cx='50.0' cy='4.0' r='2.6'/%3E%3Ccircle cx='61.9' cy='5.6' r='2.6'/%3E%3Ccircle cx='73.0' cy='10.2' r='2.6'/%3E%3Ccircle cx='82.5' cy='17.5' r='2.6'/%3E%3Ccircle cx='89.8' cy='27.0' r='2.6'/%3E%3Ccircle cx='94.4' cy='38.1' r='2.6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='96.0' cy='50.0' r='2.6'/%3E%3Ccircle cx='94.4' cy='61.9' r='2.6'/%3E%3Ccircle cx='89.8' cy='73.0' r='2.6'/%3E%3Ccircle cx='82.5' cy='82.5' r='2.6'/%3E%3Ccircle cx='73.0' cy='89.8' r='2.6'/%3E%3Ccircle cx='61.9' cy='94.4' r='2.6'/%3E%3Ccircle cx='50.0' cy='96.0' r='2.6'/%3E%3Ccircle cx='38.1' cy='94.4' r='2.6'/%3E%3Ccircle cx='27.0' cy='89.8' r='2.6'/%3E%3Ccircle cx='17.5' cy='82.5' r='2.6'/%3E%3Ccircle cx='10.2' cy='73.0' r='2.6'/%3E%3Ccircle cx='5.6' cy='61.9' r='2.6'/%3E%3Ccircle cx='4.0' cy='50.0' r='2.6'/%3E%3Ccircle cx='5.6' cy='38.1' r='2.6'/%3E%3Ccircle cx='10.2' cy='27.0' r='2.6'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.6'/%3E%3Ccircle cx='27.0' cy='10.2' r='2.6'/%3E%3Ccircle cx='38.1' cy='5.6' r='2.6'/%3E%3Ccircle cx='50.0' cy='4.0' r='2.6'/%3E%3Ccircle cx='61.9' cy='5.6' r='2.6'/%3E%3Ccircle cx='73.0' cy='10.2' r='2.6'/%3E%3Ccircle cx='82.5' cy='17.5' r='2.6'/%3E%3Ccircle cx='89.8' cy='27.0' r='2.6'/%3E%3Ccircle cx='94.4' cy='38.1' r='2.6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.yh-stamp b{color:var(--yh-red);font-weight:700}