/* Mo × 異物 活動頁：網路漫畫（webtoon）風格。tokens、購買盒結構、版寬在 kol-base.css（先載入）。
   元素：粗墨框分格、對白框、旁白框（黃）、狀聲詞、集中線、網點底。
   所有內容收在 var(--kol-max)（1200px）內置中；滿版只有背景。 */
.kol-mo {
  --mo-ink: #1A1416;
  --mo-paper: #FBF6EC;
  --mo-red: #E8432A;
  --mo-red-press: #C7341E;
  --mo-blue: #1F7FD6;
  --mo-yellow: #FFD84A;
  --mo-sans: 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
  --mo-hand: 'Iansui', 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
  --mo-latin: 'Bangers', 'Noto Sans TC', system-ui, sans-serif;
  --mo-line: 0.3rem;
  --mo-shadow: 0.6rem 0.6rem 0 var(--mo-ink);
  background-color: var(--mo-paper);
  /* 整頁淡淡的網點底 */
  background-image: radial-gradient(rgba(26, 20, 22, .07) 1.1px, transparent 1.3px);
  background-size: 7px 7px;
  color: var(--mo-ink);
  font-family: var(--mo-sans);
  padding-bottom: var(--kol-gap);
}
.kol-mo h1, .kol-mo h2, .kol-mo h3 { font-family: var(--mo-sans); color: var(--mo-ink); }
.kol-mo .mo-latin { font-family: var(--mo-latin); font-weight: 400; letter-spacing: .04em; }

/* ---- 分格 ---- */
.mo-panel {
  position: relative; margin: 0;
  border: var(--mo-line) solid var(--mo-ink);
  background: #fff;
  box-shadow: var(--mo-shadow);
  container-type: inline-size;
}
.mo-panel img { width: 100%; height: auto; }
.mo-panel--tilt-l { transform: rotate(-1.2deg); }
.mo-panel--tilt-r { transform: rotate(1.2deg); }
.mo-panel--tone { background: var(--mo-paper); }
.mo-panel > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 對白框：白底墨框、圓角、尾巴；字級跟著分格寬（cqi） */
.mo-bubble {
  position: absolute; z-index: 2;
  left: 50%; bottom: 5%; transform: translateX(-50%);
  width: max-content; max-width: 88%;
  padding: .5em .9em;
  background: #fff; color: var(--mo-ink);
  border: var(--mo-line) solid var(--mo-ink); border-radius: 50% / 46%;
  font-family: var(--mo-hand); font-size: clamp(1.5rem, 5.6cqi, 2.6rem); line-height: 1.35 !important;
  text-align: center;
}
.mo-bubble::after {
  content: ''; position: absolute; left: 30%; top: 100%;
  width: 1.4rem; height: 1.4rem; margin-top: calc(var(--mo-line) * -0.5);
  background: #fff; border-right: var(--mo-line) solid var(--mo-ink); border-bottom: var(--mo-line) solid var(--mo-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: skewX(-24deg);
}
.mo-bubble--small { font-size: clamp(1.3rem, 6.4cqi, 2.2rem); }
.mo-bubble--low { bottom: 4%; }
/* 吶喊框：鋸齒外框（clip-path 星形），蓋住原圖燒進去的字幕 */
.mo-bubble--shout {
  border: 0; border-radius: 0; background: var(--mo-ink);
  padding: 0;
  clip-path: polygon(0 18%, 6% 0, 16% 14%, 28% 0, 38% 12%, 50% 0, 62% 12%, 72% 0, 84% 14%, 94% 0, 100% 18%, 96% 50%, 100% 82%, 94% 100%, 84% 86%, 72% 100%, 62% 88%, 50% 100%, 38% 88%, 28% 100%, 16% 86%, 6% 100%, 0 82%, 4% 50%);
}
.mo-bubble--shout::after { display: none; }
.mo-bubble--hero {
  /* 原圖字幕在 y 1076–1123、x 252–828（1080×1350）：框要完整蓋過 */
  left: 17%; right: 17%; top: 77%; bottom: auto; height: 10.5%;
  width: auto; max-width: none; transform: rotate(-2deg);
  display: grid; place-items: center; isolation: isolate;
  font-family: var(--mo-sans); font-weight: 900; font-size: 5.2cqi; letter-spacing: .02em;
}
/* 鋸齒墨邊：外層是墨色，內縮一條線寬的白色同形狀 */
.mo-bubble--hero::before {
  content: ''; position: absolute; inset: var(--mo-line); z-index: -1;
  background: #fff; clip-path: inherit;
}
.mo-bubble--static { position: relative; left: auto; bottom: auto; transform: none; max-width: 100%; border-radius: 2.4rem; padding: 1.2em 1.4em; font-size: clamp(1.8rem, 4.6vw, 2.6rem); }

/* 旁白框：黃底方框，貼左上 */
.mo-narration {
  position: absolute; z-index: 2; left: -0.3rem; top: -0.3rem; max-width: 80%;
  padding: .5em .8em;
  background: var(--mo-yellow); border: var(--mo-line) solid var(--mo-ink);
  font-weight: 700; font-size: clamp(1.4rem, 5.2cqi, 2.2rem); line-height: 1.45 !important;
}
/* 番外篇角標 */
.mo-caption {
  position: absolute; z-index: 2; left: 0; top: 0;
  padding: .3em .7em; background: var(--mo-ink); color: var(--mo-paper);
  font-weight: 700; font-size: 1.2rem; letter-spacing: .12em; line-height: 1.5 !important;
}

/* 狀聲詞：白字墨邊、斜放 */
.mo-sfx {
  position: absolute; z-index: 3;
  font-family: var(--mo-sans); font-weight: 900; font-size: clamp(2.2rem, 10cqi, 4.8rem); line-height: 1;
  color: var(--mo-yellow);
  -webkit-text-stroke: 0.6rem var(--mo-ink); paint-order: stroke fill;
  transform: rotate(-12deg);
  pointer-events: none;
}
.mo-sfx--goo { right: 3%; top: 41%; color: #fff; transform: rotate(14deg); }
.mo-sfx--plop { right: 5%; bottom: 8%; color: var(--mo-red); }
.mo-sfx--boil { left: 4%; top: 6%; color: #fff; font-size: clamp(2rem, 8cqi, 4rem); }
.mo-sfx--ta { right: 4%; top: 5%; transform: rotate(10deg); }
.mo-sfx--drip { left: 40%; top: 72%; color: #fff; font-size: clamp(1.8rem, 7cqi, 3.4rem); }
.mo-sfx--grin { left: 6%; top: 6%; color: var(--mo-red); }

/* ---- 版寬軌道：所有段落共用（AGENTS.md：內容不得超出 --kol-max） ---- */
.mo-hero, .mo-story, .mo-dish, .mo-set, .mo-side, .mo-outro {
  max-width: var(--kol-max); margin: 0 auto; padding-inline: 2rem;
}
@media (min-width: 990px) {
  .mo-hero, .mo-dish, .mo-set, .mo-side, .mo-outro { padding-inline: 4rem; }
}

/* ---- Hero ---- */
.mo-hero {
  position: relative;
  display: grid; gap: 3.2rem;
  padding-block: 3.2rem 1.6rem;
}
/* 集中線：滿版背景（只有背景，不是內容） */
.mo-hero::before {
  content: ''; position: absolute; z-index: 0; top: 0; bottom: 0;
  left: 50%; width: 100vw; margin-left: -50vw;
  background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(26,20,22,.85) 0deg .35deg, transparent .35deg 4deg);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, transparent 45%, #000 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, transparent 45%, #000 85%);
  opacity: .22; pointer-events: none;
}
.mo-hero > * { position: relative; z-index: 1; }
.mo-panel--hero { max-width: 48rem; width: 100%; justify-self: center; transform: rotate(-1deg); }
.mo-hero__copy { max-width: 56rem; }
.mo-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .3rem 1rem; background: var(--mo-ink); color: var(--mo-paper);
  font-weight: 700; font-size: 1.4rem; letter-spacing: .1em;
}
.mo-kicker .mo-latin { font-size: 1.8rem; color: var(--mo-yellow); }
.mo-hero__title {
  margin-top: 1.6rem !important;
  font-size: clamp(3.4rem, 9vw, 6.4rem); font-weight: 900; line-height: 1.18; letter-spacing: -.01em;
}
@media (min-width: 400px) { .mo-hero__title .mo-nowrap { white-space: nowrap; } }
.mo-hero__title .mo-hot {
  color: var(--mo-red);
  -webkit-text-stroke: 0.2rem var(--mo-ink); paint-order: stroke fill;
  text-shadow: 0.3rem 0.3rem 0 var(--mo-ink);
}
.mo-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.8rem; }
.mo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4.8rem; padding: 0 2rem;
  background: var(--mo-red); color: #fff; text-decoration: none;
  border: var(--mo-line) solid var(--mo-ink); border-radius: .6rem;
  box-shadow: .4rem .4rem 0 var(--mo-ink);
  font-weight: 900; font-size: 1.6rem; letter-spacing: .06em;
  transition: transform .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
.mo-btn:hover { transform: translate(-.1rem, -.1rem); box-shadow: .5rem .5rem 0 var(--mo-ink); }
.mo-btn:active { transform: translate(.3rem, .3rem); box-shadow: .1rem .1rem 0 var(--mo-ink); background: var(--mo-red-press); }
.mo-btn:focus-visible { outline: .3rem solid var(--mo-blue); outline-offset: .3rem; }
.mo-btn--ghost { background: #fff; color: var(--mo-ink); }
.mo-btn--ghost:active { background: var(--mo-paper); }
.mo-chip {
  display: inline-block; margin-top: 2.4rem !important;
  padding: .6rem 1.2rem; background: var(--mo-yellow); border: .2rem dashed var(--mo-ink);
  font-weight: 700; font-size: 1.4rem;
}
.mo-chip strong { font-size: 2rem; color: var(--mo-red); margin: 0 .2rem; }
.mo-age { margin-top: 1.2rem !important; font-size: 1.2rem; color: #5b5254; }

@media (min-width: 990px) {
  .mo-hero { grid-template-columns: 48rem 1fr; align-items: center; gap: 6.4rem; padding-block: 6.4rem 4rem; }
}

/* ---- 故事分格 ---- */
.mo-story { display: grid; gap: 3.2rem; padding-top: var(--kol-gap); }
.mo-panel--burst img { filter: saturate(1.05); }
@media (min-width: 750px) {
  .mo-story { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; align-items: start; }
  .mo-story > :nth-child(2) { margin-top: 4.8rem; }
}

/* ---- 菜色（漉漉、淳淳） ---- */
.mo-dish { display: grid; gap: 3.2rem; padding-top: calc(var(--kol-gap) * 1.4); }
.mo-dish__art { position: relative; display: grid; gap: 2rem; }
.mo-panel--inset { width: 62%; justify-self: end; margin-top: -18%; transform: rotate(2deg); }
.mo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.mo-pair > :first-child { transform: rotate(-1.5deg); }
.mo-pair > :last-child { transform: rotate(1.5deg); margin-top: 2.4rem; }
.mo-menu {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.4rem; letter-spacing: .14em; color: var(--mo-red);
}
.mo-menu span { font-size: 2rem; letter-spacing: 0; }
.mo-dish__title {
  margin-top: .8rem !important;
  display: inline-block; padding: .2em .5em;
  background: #fff; border: var(--mo-line) solid var(--mo-ink); box-shadow: .5rem .5rem 0 var(--mo-blue);
  font-size: clamp(2.8rem, 6vw, 4.4rem); font-weight: 900; line-height: 1.25; letter-spacing: .02em;
}
.mo-points { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.mo-points li {
  position: relative; padding-left: 2.4rem;
  font-size: 1.6rem; font-weight: 500; line-height: 1.7;
}
.mo-points li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 1.2rem; height: 1.2rem; background: var(--mo-red); border: .2rem solid var(--mo-ink); transform: rotate(45deg);
}
@media (min-width: 990px) {
  .mo-dish { grid-template-columns: 1fr 1fr; gap: 6.4rem; align-items: center; }
  .mo-dish--flip .mo-dish__art { order: 2; }
}

/* ---- 套餐 ---- */
.mo-set { padding-top: calc(var(--kol-gap) * 1.4); }
.mo-set__feature { display: grid; gap: 3.2rem; margin-top: 2.8rem; align-items: center; }
.mo-set__grid { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 750px) { .mo-set__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 990px) {
  .mo-set__feature { grid-template-columns: 5fr 7fr; gap: 4.8rem; }
}

/* ---- 加點 ---- */
.mo-side { display: grid; gap: 3.2rem; padding-top: calc(var(--kol-gap) * 1.4); }
.mo-side__art { width: 70%; justify-self: center; transform: rotate(-1.5deg); }
.mo-side__grid { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 990px) {
  .mo-side { grid-template-columns: 30rem 1fr; gap: 6.4rem; align-items: center; }
  .mo-side__art { width: 100%; }
  .mo-side__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- 折扣碼 ---- */
.mo-code {
  position: relative;
  max-width: 56rem; margin: calc(var(--kol-gap) * 1.4) auto 0; padding: 3.2rem 2rem;
  text-align: center;
}
.mo-code::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--mo-yellow);
  clip-path: polygon(50% 0, 58% 9%, 70% 2%, 74% 14%, 88% 10%, 86% 24%, 100% 26%, 92% 38%, 100% 50%, 92% 62%, 100% 74%, 86% 76%, 88% 90%, 74% 86%, 70% 98%, 58% 91%, 50% 100%, 42% 91%, 30% 98%, 26% 86%, 12% 90%, 14% 76%, 0 74%, 8% 62%, 0 50%, 8% 38%, 0 26%, 14% 24%, 12% 10%, 26% 14%, 30% 2%, 42% 9%);
}
.mo-code > * { position: relative; }
.mo-code__label { font-weight: 900; font-size: 1.6rem; letter-spacing: .12em; }
.kol-mo .mo-code__value {
  font-size: clamp(7.2rem, 22vw, 11rem); line-height: 1 !important; color: var(--mo-red);
  -webkit-text-stroke: .4rem var(--mo-ink); paint-order: stroke fill; text-shadow: .5rem .5rem 0 var(--mo-ink);
}
.mo-code__detail { margin-top: .4rem !important; font-weight: 700; font-size: 1.5rem; }

/* ---- 收尾 ---- */
.mo-outro { display: grid; gap: 3.2rem; padding-top: calc(var(--kol-gap) * 1.2); }
.mo-outro__art { position: relative; display: grid; }
.mo-outro__art > :first-child { width: 78%; }
.mo-outro__art .mo-panel--inset { width: 50%; margin-top: -30%; }
@media (min-width: 990px) {
  .mo-outro { grid-template-columns: 1fr 1fr; gap: 6.4rem; align-items: center; }
}

.mo-extra { max-width: var(--kol-max); margin: var(--kol-gap) auto 0; padding: 0 2rem; }

/* ---- 購買盒：漫畫分格的墨框 ---- */
.kol-mo .kol-buy {
  background: #fff; border: var(--mo-line) solid var(--mo-ink); border-radius: .4rem;
  box-shadow: .5rem .5rem 0 var(--mo-ink);
}
.kol-mo .kol-buy__media { border: .2rem solid var(--mo-ink); border-radius: .2rem; background: var(--mo-paper); }
.kol-mo .kol-buy__title { font-family: var(--mo-sans); font-weight: 900 !important; }
.kol-mo .kol-buy__note { color: #4d4547; }
.kol-mo .kol-buy__price { font-family: var(--mo-sans); font-weight: 900; color: var(--mo-red); }
.kol-mo .kol-buy__price s { color: #6b6264; }
.kol-mo .kol-buy__select { border: .2rem solid var(--mo-ink); border-radius: .6rem; background: #fff; }
.kol-mo .kol-buy__select:focus-visible, .kol-mo .kol-buy a:focus-visible { outline: .3rem solid var(--mo-blue); outline-offset: .2rem; }
body .kol-mo .button.button--primary {
  background: var(--mo-red); color: #fff;
  border: var(--mo-line) solid var(--mo-ink); border-radius: .6rem;
  box-shadow: .4rem .4rem 0 var(--mo-ink);
  font-family: var(--mo-sans); font-weight: 900; letter-spacing: .08em;
  transition: transform .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
body .kol-mo .button.button--primary:not([disabled]):hover { background: var(--mo-red); transform: translate(-.1rem, -.1rem); box-shadow: .5rem .5rem 0 var(--mo-ink); }
body .kol-mo .button.button--primary:not([disabled]):active { background: var(--mo-red-press); transform: translate(.3rem, .3rem); box-shadow: .1rem .1rem 0 var(--mo-ink); }
body .kol-mo .button.button--primary:focus-visible { outline: .3rem solid var(--mo-blue); outline-offset: .3rem; box-shadow: .4rem .4rem 0 var(--mo-ink); }
body .kol-mo .button.button--primary[disabled] { background: #e7e0d6; color: var(--mo-ink); }
.kol-mo .mo-set__main .kol-buy, .kol-mo .mo-dish__copy .kol-buy { margin-top: 2.8rem; }

/* ---- 動畫（kol-mo.js 在畫面外與減少動態時暫停） ---- */
.mo-steam__wisp { opacity: 0; animation: mo-steam 3.6s ease-in-out infinite; }
.mo-steam__wisp--2 { animation-delay: 1.2s; }
.mo-steam__wisp--3 { animation-delay: 2.4s; }
@keyframes mo-steam {
  0% { opacity: 0; transform: translateY(60px) scaleY(.7); }
  35% { opacity: .55; }
  100% { opacity: 0; transform: translateY(-80px) scaleY(1.1); }
}
.mo-steam path { transform-box: fill-box; transform-origin: 50% 100%; }
.mo-drip__drop { transform-box: fill-box; transform-origin: 50% 0; animation: mo-drop 2.2s cubic-bezier(.55, 0, 1, .45) infinite; }
@keyframes mo-drop {
  0%, 30% { transform: translateY(0) scaleY(.6); opacity: 0; }
  40% { transform: translateY(0) scaleY(1.1); opacity: .9; }
  100% { transform: translateY(230px) scaleY(1.4); opacity: 0; }
}
.mo-sfx--boil { animation: mo-wobble 1.6s ease-in-out infinite; }
@keyframes mo-wobble { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-.4rem); } }
[data-mo-anim][data-paused] *, .mo-panel:has([data-paused]) .mo-sfx { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mo-steam__wisp, .mo-drip__drop, .mo-sfx--boil { animation: none; }
  .mo-steam__wisp { opacity: .4; }
  .mo-drip__drop { opacity: .8; }
  .mo-btn, body .kol-mo .button.button--primary { transition: none; }
  .mo-btn:hover, .mo-btn:active,
  body .kol-mo .button.button--primary:not([disabled]):hover,
  body .kol-mo .button.button--primary:not([disabled]):active { transform: none; }
}