/* 台灣小詛咒產生器（#1374）。設計 v2 品牌藍 kit（首屏由 kit heroize）；卡片用品牌色 #02539C／#B3CBE1／#F2F6FA／#0E141B，琥珀 #E8A13A 只當點綴（認證章、化解框）。
   字型沿用 kit 的 Noto Serif TC（詛咒本文）＋Noto Sans TC。 */
:root { --accent: #02539C; --accent-soft: #E1ECF6; }

/* 1280：左欄＝輸入＋投稿，右欄＝卡（評分第二輪：左欄輸入卡下方空 145px、右欄下方空 265px）；手機：輸入 → 卡 → 投稿 */
.cu-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "form stage" "sub stage"; grid-template-rows: auto 1fr; gap: 20px 32px; align-items: start; padding-top: 28px; padding-bottom: 36px; }
.cu-in { grid-area: form; } .cu-stage { grid-area: stage; } .cu-submit { grid-area: sub; }
@media (max-width: 860px) { .cu-grid { grid-template-columns: 1fr; grid-template-areas: "form" "stage" "sub"; grid-template-rows: auto; gap: 22px; } }
.cu-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.cu-form input { font-size: 20px; }
.cu-go { width: 100%; margin-top: 10px; font-size: 19px; padding: 14px; }
.cu-form .err { color: var(--warn); }

.cu-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* 洗牌 */
.cu-shuffle { width: 100%; max-width: 440px; border-radius: var(--radius); background: var(--band); color: #fff; padding: 46px 24px; text-align: center; }
.cu-shuffle .lab { margin: 0 0 14px; color: var(--mist); font-size: 15px; }
.cu-shuffle .roll { margin: 0; min-height: 3em; font-family: var(--font-head); font-size: 22px; line-height: 1.5; font-weight: 700; }

/* 卡 */
.cu-card { position: relative; width: 100%; max-width: 440px; background: var(--paper); border-radius: 22px; padding: 22px 24px 18px; color: var(--ink);
  box-shadow: 0 0 0 10px var(--band), 0 28px 50px -20px rgba(2, 40, 80, .55); margin: 10px 0 6px; }
.cu-card.fresh { animation: cu-flip .5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes cu-flip { from { transform: rotateX(70deg) translateY(-20px); opacity: 0 } to { transform: none; opacity: 1 } }
.cu-card header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--mist); padding-bottom: 8px; padding-right: 86px; }
.cu-card .ttl { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--band); letter-spacing: .06em; }
.cu-card .no { font-size: 13px; color: var(--ink-soft); letter-spacing: .08em; }
.cu-card .to { margin: 16px 0 6px; font-size: 16px; color: var(--ink-soft); }
.cu-card .to b { font-family: var(--font-head); font-size: 24px; color: var(--ink); margin-left: 4px; }
.cu-card .curse { margin: 0 0 14px; font-family: var(--font-head); font-weight: 700; font-size: clamp(25px, 6.6vw, 31px); line-height: 1.45; }
.cu-card .tag { display: inline-block; margin: 0 0 14px; padding: 3px 12px; border-radius: 999px; background: var(--band); color: #fff; font-size: 13px; font-weight: 700; }
.cu-card .cure { background: #fff; border: 2px solid var(--gold); border-radius: 14px; padding: 10px 14px; font-size: 16px; line-height: 1.5; }
.cu-card .cure span { display: block; font-size: 13px; font-weight: 700; color: #8a5200; margin-bottom: 2px; }
.cu-card footer { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.cu-stamp { position: absolute; top: 12px; right: 16px; width: 74px; height: 74px; border: 3px solid var(--gold); border-radius: 50%; display: grid; place-items: center; text-align: center;
  color: #b57411; font-weight: 700; font-size: 14px; line-height: 1.15; transform: rotate(-12deg); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5.5px var(--gold); }
.cu-card.fresh .cu-stamp { animation: cu-stamp .45s .4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes cu-stamp { from { transform: rotate(-12deg) scale(2.4); opacity: 0 } to { transform: rotate(-12deg) scale(1); opacity: 1 } }

.cu-actions { width: 100%; max-width: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cu-actions .btn { width: 100%; }
.cu-actions .wide { grid-column: 1 / -1; }

/* 範例卡：跟真的卡一樣清楚（不是淡灰），左上角一條「範例」緞帶 */
.cu-sample { margin-top: 10px; }
.cu-ribbon { position: absolute; top: -10px; left: 18px; background: var(--gold); color: #3a2400; font-size: 13px; font-weight: 700; letter-spacing: .12em; padding: 3px 12px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

/* 投稿：收合的樣子跟頁面 FAQ 一樣（圓形箭頭，評分第二輪：原生 details「▶」跟 FAQ 不一致） */
.cu-submit { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 20px; box-shadow: var(--shadow); }
.cu-submit summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-weight: 700; font-size: 17px; color: var(--band); padding: 10px 36px 10px 0; position: relative; list-style: none; }
.cu-submit summary::-webkit-details-marker { display: none; }
.cu-submit summary::after { content: ""; position: absolute; right: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2302539C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .2s; }
.cu-submit[open] summary::after { transform: rotate(180deg); }
.cu-submit[open] { padding-bottom: 16px; }
.cu-sub-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; margin-top: 12px; }
@media (max-width: 560px) { .cu-sub-row { grid-template-columns: 1fr; } }
#cu-sub-msg.ok { color: var(--ok); font-weight: 700; } #cu-sub-msg.bad { color: var(--warn); }

@media (prefers-reduced-motion: reduce) { .cu-card.fresh, .cu-card.fresh .cu-stamp { animation: none } }
/* 截圖修正：投稿鈕跟分類選單之間留距離；手機上卡片外圈的品牌藍框不要貼到螢幕邊 */
#cu-sub-form .btn { margin-top: 14px; }
.cu-card { width: calc(100% - 20px); }
@media (min-width: 861px) { .cu-grid > .cu-submit { margin-top: 16px; } } /* kit 的兩欄白卡規則把 row-gap 吃掉，直接給距離 */

/* 評分第三輪（10/18，84.0）：
   ① 1280 卡片跟上方首屏插畫左右對齊（插畫 x 732–1184；卡片連外圈藍框原本 690–1150）→ 右欄靠右、卡片外框寬＝插畫寬 452
   ② 結果句要是全頁最大字（H1 桌機 46.4px、手機 25.6px；結果句原本 31／25.7px）
   ③ 390 投稿到常見問題中間空太多 → 工具區下緣少 20px（下面的分享區與常見問題間距是 kit 共用的，不動） */
.cu-card .curse { font-size: clamp(30px, 7.8vw, 50px); line-height: 1.32; text-wrap: balance; }   /* balance：避免「一｜定會撕破」這種單字掉行 */
@media (min-width: 861px) {
  .cu-stage { align-items: flex-end; }
  .cu-stage > .cu-card { max-width: 432px; margin-right: 10px; }
  .cu-stage > .cu-shuffle, .cu-stage > .cu-actions { max-width: 452px; }
}
@media (max-width: 860px) { .cu-grid { padding-bottom: 16px; } }

/* 萬用輸入（Atlas 10/18）：講一句就抽；填名字收進下面這格 */
#cu-un { margin-bottom: 14px; }
#cu-un:empty { min-height: 276px; }
@media (min-width: 960px) { #cu-un:empty { min-height: 264px; } }
.cu-check { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.cu-check > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; font-weight: 700; color: var(--band); }
.cu-check > summary::-webkit-details-marker { display: none; }
.cu-check > summary::after { content: "＋"; font-weight: 900; }
.cu-check[open] > summary::after { content: "－"; }
.cu-check .cu-form { box-shadow: none; border: 0; padding-top: 4px; }