/* Shared components. Depends on tokens.css + base.css. */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--r-pill);
  background: var(--c-paper-raised);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.btn:hover { border-color: var(--c-ink-faint); color: var(--c-ink); }
.btn--seal { border-color: var(--c-seal); color: var(--c-seal); background: var(--c-paper-raised); }
.btn--seal:hover { background: var(--c-seal); color: var(--c-paper-raised); border-color: var(--c-seal); }
.btn--solid { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper-raised); }
.btn--solid:hover { background: var(--c-seal); border-color: var(--c-seal); color: var(--c-paper-raised); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { border-color: var(--c-rule-strong); }
.btn--sm { padding: var(--s-1) var(--s-3); font-size: var(--fs-xs); }
.btn--danger { border-color: var(--c-danger); color: var(--c-danger); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---------- side rail (選單) ---------- */
.rail {
  position: sticky; top: 0; align-self: start;
  height: 100dvh; overflow-y: auto;
  padding: calc(var(--s-6) + env(safe-area-inset-top)) var(--s-4)
           calc(var(--s-6) + env(safe-area-inset-bottom));
  border-right: 1px solid var(--c-rule);
  background: linear-gradient(180deg, var(--c-paper-raised), var(--c-paper-sunk));
}
.rail__brand {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-6); text-align: left; width: 100%;
}
.rail__brand-penguin { flex: none; }
.rail__brand-mark {
  display: block;
  font-family: var(--f-display); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: var(--ls-title); text-indent: var(--ls-title); line-height: 1.2;
}
.rail__brand-sub {
  display: block;
  font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--c-ink-faint);
}

.rail__group { margin-bottom: var(--s-5); }
.rail__group-title {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--c-ink-faint);
}
.rail__group-title::after { content: ""; flex: 1; height: 1px; background: var(--c-rule); }

.rail__link {
  display: flex; align-items: baseline; gap: var(--s-2);
  width: 100%; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--c-ink-soft);
  text-align: left; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.rail__link:hover { background: var(--c-paper-raised); color: var(--c-ink); }
.rail__link[aria-current="page"] {
  background: var(--c-paper-raised); color: var(--c-ink); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--c-seal);
}
.rail__link-year { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); margin-left: auto; }

.rail__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-rule); }

/* 手機：選單收成上方抽屜 */
.rail-toggle { display: none; }
@media (max-width: 860px) {
  .rail {
    position: static; height: auto; border-right: none; border-bottom: 1px solid var(--c-rule);
    padding: calc(var(--s-4) + env(safe-area-inset-top)) var(--s-4) var(--s-4);
  }
  .rail__body { display: none; }
  .rail.is-open .rail__body { display: block; }
  .rail-toggle { display: inline-flex; margin-left: auto; }
  .rail__head { display: flex; align-items: center; gap: var(--s-3); }
  .rail__brand { margin-bottom: 0; width: auto; }
}

/* ---------- 書封卡片 ---------- */
.book-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.book {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-lg);
  background: var(--c-paper-raised);
  box-shadow: var(--e-1);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.book:hover { transform: translateY(-3px); box-shadow: var(--e-3); border-color: var(--c-rule-strong); }
.book__cover {
  aspect-ratio: 4 / 3; position: relative;
  display: grid; place-items: center;
  background: var(--c-paper-sunk);
  border-bottom: 1px solid var(--c-rule);
  overflow: hidden;
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; }
.book__cover-fallback {
  font-family: var(--f-display); font-size: var(--fs-2xl);
  letter-spacing: var(--ls-title); text-indent: var(--ls-title);
  color: var(--c-rule-strong);
}
.book__stamp {
  position: absolute; top: var(--s-3); right: var(--s-3);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--c-seal); border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: var(--fs-xs);
  color: var(--c-seal); background: rgb(255 255 255 / 0.7);
  transform: rotate(-4deg);
}
.book__body { padding: var(--s-4); display: grid; gap: var(--s-1); }
.book__title { font-size: var(--fs-md); letter-spacing: 0.06em; }
.book__meta { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); }
.book__sub { font-family: var(--f-hand); font-size: var(--fs-md); color: var(--c-sakura); }

/* ---------- 旅遊書扉頁 ---------- */
.cover {
  position: relative;
  padding: var(--s-8) var(--s-6);
  margin-bottom: var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-lg);
  background: var(--c-paper-raised);
  box-shadow: var(--e-2);
  text-align: center;
}
.cover__eyebrow { font-family: var(--f-hand); font-size: var(--fs-lg); color: var(--c-sakura); }
.cover__title {
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl));
  letter-spacing: var(--ls-title); text-indent: var(--ls-title);
  margin: var(--s-2) 0;
}
.cover__dates { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-ink-faint); letter-spacing: 0.08em; }
.cover__rule { width: 64px; height: 1px; margin: var(--s-4) auto; background: var(--c-rule-strong); }
.cover__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.cover__mascots { display: flex; justify-content: center; margin-top: var(--s-5); }

/* ---------- 分頁標籤 ---------- */
.tabs {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: var(--s-1); flex-wrap: wrap;
  padding-top: var(--s-2);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: var(--s-6);
  background: var(--c-paper);
}
.tabs__tab {
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-size: var(--fs-sm); letter-spacing: 0.08em; color: var(--c-ink-faint);
  margin-bottom: -1px;
}
.tabs__tab:hover { color: var(--c-ink); }
.tabs__tab[aria-selected="true"] {
  background: var(--c-paper-raised);
  border-color: var(--c-rule); border-bottom-color: var(--c-paper-raised);
  color: var(--c-ink);
}

/* ---------- 區塊 ---------- */
.sheet {
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-lg);
  background: var(--c-paper-raised);
  box-shadow: var(--e-1);
}
.sheet + .sheet { margin-top: var(--s-5); }
.sheet__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.sheet__title { font-size: var(--fs-md); letter-spacing: var(--ls-label); }
.sheet__head .btn-row { margin-left: auto; }

.empty {
  padding: var(--s-7) var(--s-4); text-align: center;
  color: var(--c-ink-faint); font-size: var(--fs-sm);
  border: 1px dashed var(--c-rule-strong); border-radius: var(--r-lg);
}

/* ---------- 企鵝 ---------- */
.penguin { display: inline-block; line-height: 0; }
.penguin svg { width: 100%; height: auto; overflow: visible; }

.penguin-pair { display: inline-flex; align-items: flex-end; gap: var(--s-2); }
/* 兩隻站得一高一低，看起來比較不呆板 */
.penguin-pair .penguin:first-child { transform: translateY(2px) rotate(-3deg); }
.penguin-pair .penguin:last-child  { transform: rotate(4deg); }

/* 招手：翅膀連著整隻一起輕輕擺 */
@media (prefers-reduced-motion: no-preference) {
  .penguin--wave { animation: penguin-wave 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes penguin-wave {
    0%, 70%, 100% { transform: rotate(0deg); }
    80%           { transform: rotate(-6deg); }
    90%           { transform: rotate(5deg); }
  }
}

/* ---------- 開門動畫 ---------- */
/* 門關著的時候不要讓背景捲動，不然門一開位置會跳掉 */
html.is-door-closed, html.is-door-closed body { overflow: hidden; }

.door {
  position: fixed; inset: 0; z-index: 80;
  perspective: 1600px; perspective-origin: 50% 44%;
  pointer-events: none;
  /* 門板轉開時會投影到畫面外，不裁掉會讓手機多出可以橫向捲動的空間 */
  overflow: hidden;
}

/* 門後面那隻招手的企鵝。開到一半就淡掉，才不會跟頁面內容疊在一起 */
.door__room { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.door.is-open .door__room { animation: door-room 900ms ease forwards; }

@keyframes door-room {
  0%   { opacity: 0; transform: translateY(8px)   scale(0.94); }
  30%  { opacity: 1; transform: translateY(0)     scale(1); }
  58%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.04); }
}

.door__leaf {
  position: absolute; top: -2%; bottom: -2%; width: 50.4%;
  background-color: var(--c-paper-raised);
  background-image:
    linear-gradient(var(--c-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-rule) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  box-shadow: 0 24px 70px rgb(30 28 25 / 0.22);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* 靠門縫那一側壓一道陰影，門轉開的時候才看得出厚度 */
.door__leaf::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28%;
}
.door__leaf--l { left: 0;  transform-origin: left center; }
.door__leaf--l::after { right: 0; background: linear-gradient(90deg, transparent, rgb(30 28 25 / 0.10)); }
.door__leaf--r { right: 0; transform-origin: right center; }
.door__leaf--r::after { left: 0;  background: linear-gradient(270deg, transparent, rgb(30 28 25 / 0.10)); }

/* 門把：一小顆金色圓點，靠在門縫那一側 */
.door__handle {
  position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-gold); box-shadow: 0 1px 2px rgb(30 28 25 / 0.3);
  transform: translateY(-50%);
}
.door__leaf--l .door__handle { right: 14px; }
.door__leaf--r .door__handle { left: 14px; }

/* 先「喀」一下再開 —— 少了這個預備動作，門看起來像憑空消失 */
.door.is-unlocking .door__handle { animation: door-click 260ms ease; }
.door.is-unlocking .door__leaf--l { animation: door-nudge-l 260ms ease; }
.door.is-unlocking .door__leaf--r { animation: door-nudge-r 260ms ease; }

@keyframes door-click  { 0%, 100% { transform: translateY(-50%) scale(1); } 45% { transform: translateY(-50%) scale(0.8); } }
@keyframes door-nudge-l { 50% { transform: rotateY(-2.5deg); } }
@keyframes door-nudge-r { 50% { transform: rotateY(2.5deg); } }

/* 真正開門。兩扇差 70ms，不同步才像手推開的 */
.door.is-open .door__leaf--l { animation: door-open-l 1.25s cubic-bezier(.46, .03, .16, 1) forwards; }
.door.is-open .door__leaf--r { animation: door-open-r 1.25s cubic-bezier(.46, .03, .16, 1) 70ms forwards; }

@keyframes door-open-l {
  0%   { transform: rotateY(0deg);   opacity: 1; }
  10%  { transform: rotateY(2deg); }
  66%  { opacity: 1; }
  100% { transform: rotateY(-96deg); opacity: 0; }
}
@keyframes door-open-r {
  0%   { transform: rotateY(0deg);   opacity: 1; }
  10%  { transform: rotateY(-2deg); }
  66%  { opacity: 1; }
  100% { transform: rotateY(96deg);  opacity: 0; }
}

/* 門在開的同時，裡面的網站一起淡進來，兩層一起動才不生硬 */
.shell--entering { animation: shell-in 1.05s cubic-bezier(.22, .8, .3, 1) both; }

@keyframes shell-in {
  0%   { opacity: 0.3; transform: scale(0.985); filter: blur(2px); }
  55%  { opacity: 1;                            filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .door { display: none; }
  .shell--entering { animation: none; }
}

/* ---------- 容量條 ---------- */
.quota { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
.quota__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--c-ink-faint);
}
.quota__used { font-family: var(--f-mono); }
.quota__track {
  height: 5px; border-radius: var(--r-pill);
  background: var(--c-paper-sunk); border: 1px solid var(--c-rule);
  overflow: hidden;
}
.quota__fill {
  height: 100%; width: 0;
  background: var(--c-pine);
  transition: width var(--t-base), background var(--t-base);
}
.quota--warn .quota__fill { background: var(--c-warn); }
.quota--full .quota__fill { background: var(--c-danger); }
.quota__note { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.quota--full .quota__note { color: var(--c-danger); }

/* ---------- 在一起多久 ---------- */
.shell__banner { max-width: var(--w-page); margin: 0 auto var(--s-5); }

.together {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-pill);
  background: var(--c-paper-raised);
  box-shadow: var(--e-1);
}
.together__mark { align-self: center; flex: none; }
.together__label {
  font-family: var(--f-hand); font-size: var(--fs-md); color: var(--c-sakura);
}
.together__big {
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-md);
  letter-spacing: var(--ls-label);
}
.together__dot { color: var(--c-rule-strong); }
.together__tick {
  font-size: var(--fs-sm); color: var(--c-ink-soft);
  letter-spacing: 0.04em;
  /* 秒數每秒換一次，等寬數字才不會左右抖動 */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .together { border-radius: var(--r-lg); gap: var(--s-1) var(--s-2); padding: var(--s-3); }
  .together__label { font-size: var(--fs-base); }
  .together__dot { display: none; }
  .together__tick { flex-basis: 100%; text-align: center; }
}