:root {
  color-scheme: light;
  --ink: #111;
  --paper: #fff;
  --brand: #5046eb;
  --white: #fff;
  --muted: #444;
  --line: 3px;
  --shadow: 5px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 480px;
  min-height: 100svh;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* 頂部 */
.masthead { padding: 4px 0 22px; }
.logo { display: block; width: 120px; height: auto; margin: 0 auto; }

/* 狀態列：整條黑底 */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
  margin-bottom: 18px;
}
.section-heading::after {
  content: "FØT1";
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .04em;
}
.status { font-size: 14px; font-weight: 900; letter-spacing: .1em; }
.status.is-live::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  vertical-align: 1px;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--white);
  animation: pulse 1.4s steps(2, jump-none) infinite;
}

.links { display: grid; gap: 16px; padding-right: var(--shadow); }

/* 按鈕：直角、粗黑框、硬陰影 */
.link {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  margin-bottom: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s linear, box-shadow .06s linear;
  animation: enter .45s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--index) * 70ms);
}
.link--brand { background: var(--brand); color: var(--white); }
.link--primary { background: var(--ink); color: var(--white); box-shadow: var(--shadow) var(--shadow) 0 var(--brand); }

.link-number {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: -14px 14px -14px -16px;
  padding: 0 12px;
  border-right: var(--line) solid currentColor;
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.03em;
}
.link--primary .link-number { border-right-color: #fff3; }
.link--brand .link-number { border-right-color: #fff6; }
.link-label { flex: 1; font-size: 20px; font-weight: 900; letter-spacing: .03em; }

/* 箭頭接力 */
.arrow { position: relative; overflow: hidden; flex: none; width: 26px; height: 26px; }
.arrow-inner, .arrow-next {
  position: absolute;
  inset: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 26px;
  text-align: center;
  transition: transform .2s ease;
}
.arrow-next { transform: translate(-100%, 100%); }
a.link:active .arrow-inner { transform: translate(100%, -100%); }
a.link:active .arrow-next { transform: translate(0, 0); }
@media (hover: hover) {
  a.link:hover .arrow-inner { transform: translate(100%, -100%); }
  a.link:hover .arrow-next { transform: translate(0, 0); }
}

/* 按下：整顆貼到陰影位置 */
a.link:active { transform: translate(var(--shadow), var(--shadow)); box-shadow: 0 0 0 var(--ink); }
a.link:focus-visible { outline: 3px solid var(--brand); outline-offset: 6px; }

.link[aria-disabled="true"] {
  color: #999;
  background: repeating-linear-gradient(-45deg, #fff 0 8px, #f1f1f1 8px 16px);
  border-color: #999;
  box-shadow: var(--shadow) var(--shadow) 0 #ccc;
  cursor: not-allowed;
}

/* 本場加購：斜向光澤（呼應 Ø 斜線） */
.link--brand::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -40%;
  width: 22px;
  background: rgba(255, 255, 255, .28);
  transform: skewX(-24deg);
  animation: sweep 4.5s ease-in-out 1s infinite;
}
.link--brand > * { position: relative; }

.error { font-size: 14px; font-weight: 700; }

footer { margin-top: auto; padding-top: 44px; }
footer p {
  margin: 0;
  border-top: var(--line) solid var(--ink);
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
@keyframes sweep { 0%, 20% { left: -40%; } 45%, 100% { left: 140%; } }
@keyframes pulse { 50% { opacity: 0; } }

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

/* ===== B+ 活潑版：在粗獷基礎上加一點手作感 ===== */
body {
  background-color: #fff;
  background-image: radial-gradient(#d9d9e8 1px, transparent 1px);
  background-size: 18px 18px;
}
.section-heading { transform: rotate(-1deg); }
.link--brand { transform: rotate(-1.2deg); overflow: visible; }
.link--brand::before { display: none; }
.link--brand .link-label::after {
  content: "限時";
  position: absolute;
  top: -26px;
  right: -46px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  transform: rotate(8deg);
  animation: wobble 2.4s ease-in-out infinite;
}
.link--brand .link-label { position: relative; }
a.link--brand:active { transform: rotate(0) translate(var(--shadow), var(--shadow)); }
a.link:active { transition: transform .12s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wobble { 50% { transform: rotate(-4deg) scale(1.06); } }

/* LINE 群組橫條 */
.line-banner {
  display: flex;
  align-items: stretch;
  margin: 0 0 16px;
  background: #06c755;
  border: 3px solid #111;
  animation: enter .45s cubic-bezier(.2, .7, .2, 1) both;
}
.line-banner[hidden] { display: none; }
.line-banner-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.line-banner-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.line-banner-copy strong { font-size: 16px; font-weight: 900; }
.line-banner-copy small { font-size: 12px; font-weight: 700; opacity: .92; text-wrap: balance; }

/* 團隊頭像：貼紙感，裁到看得到四個人 */
.line-banner { overflow: visible; }
.line-banner-link { gap: 10px; padding-left: 6px; }
.line-banner-link .line-banner-avatar {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  margin: -16px 0 -16px -16px;
  overflow: hidden;
  border: 3px solid #111;
  border-radius: 50%;
  background: #0d1b33;
  box-shadow: 3px 3px 0 #111;
  transform: rotate(-6deg);
}
.line-banner-avatar img { position: absolute; width: 118%; left: -7%; top: -12%; }
.line-banner-arrow { flex: none; font-size: 18px; }
.line-banner-link:active { background: #05a948; }
.line-banner-link:focus-visible { outline: 3px solid #5046eb; outline-offset: -6px; }

/* ===== 直播膠帶：狀態列跑馬燈＋頁尾交叉膠帶（方案 D 黃黑配色） =====
   每條膠帶內放兩段相同文字，往同一方向移動半個寬度後無縫循環 */
.ticker, .tape { overflow: hidden; white-space: nowrap; pointer-events: none; }
.tape-track { display: flex; width: max-content; will-change: transform; }
.tape-track span { flex: none; padding-right: .6em; }
body:has(.status.is-live) .tape-track { animation: marquee 28s linear infinite; }
body:has(.status.is-live) .tape--2 .tape-track { animation-duration: 22s; animation-direction: reverse; }

/* 狀態列 */
.section-heading { overflow: hidden; gap: 12px; justify-content: flex-start; }
.section-heading::after { content: none; }
.section-heading .status { position: relative; z-index: 1; flex: none; }
.ticker { flex: 1; min-width: 0; font-size: 13px; font-style: italic; color: #ffd400; }
.ticker span::before { content: "FROM ZERO TO ONE ✦ FØT1 ✦ FROM ZERO TO ONE ✦ FØT1 ✦ FROM ZERO TO ONE ✦ FØT1 ✦"; }
body:has(.status.is-live) .ticker span::before { content: "本場限時加購 ● FROM ZERO TO ONE ● 本場限時加購 ● FROM ZERO TO ONE ● 本場限時加購 ● FROM ZERO TO ONE ●"; }
body:has(.status.is-live) .ticker .tape-track { animation-duration: 18s; }

/* 頁尾交叉膠帶 */
/* 手機 Safari 只設 body 的 overflow-x 擋不住橫向滑動，html 也要設；膠帶本身也關在 .tapes 裡 */
html, body { overflow-x: hidden; overflow-x: clip; }
.tapes { position: relative; height: 120px; margin: 0 -18px; overflow: hidden; }
.tape {
  position: absolute;
  left: -50%;
  width: 200%;
  padding: 9px 0;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .06em;
}
.tape--1 { top: 22px; font-size: 20px; background: #ffd400; color: var(--ink); transform: rotate(-7deg); }
.tape--2 { top: 46px; font-size: 16px; background: var(--ink); color: #ffd400; transform: rotate(4deg); }
.tape--1 span::before { content: "FROM ZERO TO ONE ✦ FØT1 ✦ FROM ZERO TO ONE ✦ FØT1 ✦ FROM ZERO TO ONE ✦ FØT1 ✦ FROM ZERO TO ONE ✦ FØT1 ✦"; }
.tape--2 span::before { content: "NEXT ● 下一場預告 ● NEXT ● 下一場預告 ● NEXT ● 下一場預告 ● NEXT ● 下一場預告 ● NEXT ● 下一場預告 ● NEXT ● 下一場預告 ●"; }
body:has(.status.is-live) .tape--2 span::before { content: "LIVE ● 直播中 ● LIVE ● 直播中 ● LIVE ● 直播中 ● LIVE ● 直播中 ● LIVE ● 直播中 ● LIVE ● 直播中 ● LIVE ● 直播中 ●"; }
footer { padding-top: 24px; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* 「LINE 找我們」小標題與按鈕說明小字 */
.link-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}
.link-heading::after { content: ""; flex: 1; border-top: 3px solid var(--ink); }
.link-label { display: flex; flex-direction: column; gap: 3px; }
.link-note { font-size: 12px; font-weight: 700; letter-spacing: 0; color: #666; }
.link--brand .link-note, .link--primary .link-note { color: #fffb; }