/* =====================================
   Life Number
===================================== */

.life-page{
    max-width:1100px;
    margin:auto;
    padding:120px 40px 80px;
}

.life-intro{
    margin:40px 0;
    font-size:22px;
    line-height:1.9;
    color:#C9BEB8;
}

.life-box{
    margin-top:20px;
}

/* ==========================
   Input
========================== */

.life-form{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:45px;
}

.life-form input{
    width:230px;
    height:48px;
    padding:0 16px;

    border:1px solid #4A404A;
    border-radius:12px;

    background:#3D343D;

    font-size:17px;
    color:#F2ECE8;
}

/* date-box 覆蓋 life-form input 的寬度設定 */
.life-form .date-box{
    width:230px;
    flex-shrink:0;
}
.life-form .date-box input{
    width:100%;
}

.life-form button{
    height:48px;
    padding:0 28px;

    border:none;
    border-radius:12px;

    background:linear-gradient(135deg,#B06B62,#D89A8E);

    color:#fff;
    font-size:17px;
    letter-spacing:1px;

    cursor:pointer;

    box-shadow:0 8px 18px rgba(30,20,30,.35);
}

.life-form button:active{
    transform:scale(.97);
}

/* ==========================
   Layout
========================== */

.life-content{
    display:flex;
    align-items:flex-start;
    gap:55px;
}

.life-grid-wrap{
    width:100%;
    max-width:460px;
}

/* ==========================
   九宮格外框
   排法：
   1 2 3
   4 5 6
   7 8 9 0
========================== */

.life-grid{
    position:relative;

    display:grid;
    grid-template-columns:repeat(4,90px);
    grid-template-rows:repeat(3,90px);

    width:432px;
    padding:36px;
    margin:0;

    border-radius:28px;
    border:1px solid #4A404A;

    background:
        radial-gradient(circle at 50% 45%,
            rgba(144,152,196,.14),
            transparent 46%
        ),
        #3D343D;

    box-shadow:
        inset 0 0 35px rgba(0,0,0,.25),
        inset 0 0 85px rgba(144,152,196,.1),
        0 18px 38px rgba(0,0,0,.3);

    overflow:hidden;
}

/* 背景能量光紋，不用圖片 */
.life-grid::before{
    content:"";
    position:absolute;
    inset:24px;

    border-radius:50%;

    background:
        radial-gradient(circle at center,
            transparent 0 28px,
            rgba(144,152,196,.2) 29px 30px,
            transparent 31px 58px,
            rgba(144,152,196,.15) 59px 60px,
            transparent 61px
        ),
        repeating-radial-gradient(circle at center,
            rgba(144,152,196,.1) 0 1px,
            transparent 1px 24px
        );

    opacity:.82;
    pointer-events:none;
}

/* 中央玫瑰赭光暈 */
.life-grid::after{
    content:"";
    position:absolute;

    width:260px;
    height:260px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(
        rgba(216,154,142,.24),
        transparent 70%
    );

    pointer-events:none;
}

/* ==========================
   Cell
========================== */

.life-cell{
    position:relative;
    z-index:2;

    display:flex;
    justify-content:center;
    align-items:center;

    background: rgba(242,236,232,.05);

    border:1px solid #4A404A;

    font-size:40px;
    font-family:"Noto Serif TC",serif;
    font-weight:500;
    color:#F2ECE8;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.15),
        0 1px 0 rgba(255,255,255,.04);
}

/* 缺數 */
.life-cell.missing{
    color:rgba(242,236,232,.25);
    background: rgba(242,236,232,.02);
}

/* 1 2 3 */
.life-cell[data-num="1"]{ grid-column:1; grid-row:1; }
.life-cell[data-num="2"]{ grid-column:2; grid-row:1; }
.life-cell[data-num="3"]{ grid-column:3; grid-row:1; }

/* 4 5 6 */
.life-cell[data-num="4"]{ grid-column:1; grid-row:2; }
.life-cell[data-num="5"]{ grid-column:2; grid-row:2; }
.life-cell[data-num="6"]{ grid-column:3; grid-row:2; }

/* 7 8 9 0 */
.life-cell[data-num="7"]{ grid-column:1; grid-row:3; }
.life-cell[data-num="8"]{ grid-column:2; grid-row:3; }
.life-cell[data-num="9"]{ grid-column:3; grid-row:3; }
.life-cell[data-num="0"]{ grid-column:4; grid-row:3; }

/* ==========================
   出現一次：手繪圈
========================== */

.life-cell.active::after{
    content:"";
    position:absolute;

    width:62px;
    height:62px;

    border:3px solid #7B7FB0;
    border-radius:50%;

    transform:rotate(-8deg);

    z-index:3;
}

/* ==========================
   出現二次：雙圈
========================== */

.life-cell.double::before{
    content:"";
    position:absolute;

    width:76px;
    height:76px;

    border:2px solid #7B7FB0;
    border-radius:50%;

    transform:rotate(6deg);

    z-index:2;
}

/* ==========================
   三次以上：光暈 + 雙圈
========================== */

.life-cell.triple{
    color:#5A5E96;
    font-weight:700;
    text-shadow:0 0 8px rgba(216,154,142,.4);
}

.life-cell.triple::before{
    content:"";
    position:absolute;

    width:88px;
    height:88px;

    border-radius:50%;

    background:radial-gradient(
        rgba(216,154,142,.42),
        rgba(216,154,142,.18) 42%,
        transparent 72%
    );

    animation:lifeGlow 2.2s ease-in-out infinite;

    z-index:1;
}

.life-cell.triple::after{
    content:"";
    position:absolute;

    width:62px;
    height:62px;

    border:3px solid #7B7FB0;
    border-radius:50%;

    transform:rotate(-8deg);

    z-index:3;
}

/* 次數小徽章 */
.life-cell .count{
    position:absolute;

    top:7px;
    right:8px;

    min-width:20px;
    height:20px;
    padding:0 5px;

    border-radius:999px;

    background:#7B7FB0;
    color:#fff;

    font-family:"Noto Sans TC",sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:20px;
    text-align:center;

    box-shadow:0 2px 6px rgba(0,0,0,.2);

    z-index:6;
}

@keyframes lifeGlow{
    0%{
        transform:scale(.92);
        opacity:.35;
    }

    50%{
        transform:scale(1.08);
        opacity:.78;
    }

    100%{
        transform:scale(.92);
        opacity:.35;
    }
}

/* ==========================
   Note
========================== */

.life-note{
    margin-top:18px;
    font-size:15px;
    line-height:1.8;
    color:#C9BEB8;
}

/* ==========================
   Result
========================== */

.life-result{
    display:block;

    width:100%;
    max-width:430px;

    padding:34px 32px;

    border-radius:24px;

    background: #3D343D;

    border:1px solid #4A404A;

    box-shadow:0 14px 32px rgba(0,0,0,.3);
}

.life-result h3{
    margin:0 0 18px;

    font-size:30px;
    font-family:"Noto Serif TC",serif;
    font-weight:500;
    color:#F2ECE8;
}

.life-main-number{
    margin-bottom:18px;

    font-size:64px;
    line-height:1;
    font-family:"Noto Serif TC",serif;
    color:#9098C4;
}

.life-result p{
    margin:12px 0;

    line-height:2;
    font-size:17px;
    color:#F2ECE8;
}

/* ==========================
   Mobile
========================== */

@media(max-width:900px){

    .life-content{
        flex-direction:column;
        gap:30px;
    }

    .life-result{
        max-width:100%;
    }
}

@media(max-width:768px){

    .life-page{
        padding:100px 24px 60px;
    }

    .life-intro{
        margin:30px 0;
        font-size:18px;
    }

    .life-form{
        flex-direction:column;
        align-items:stretch;
        margin-bottom:36px;
    }

    .life-form input,
    .life-form button{
        width:100%;
    }

    .life-grid-wrap{
        max-width:100%;
    }

    .life-grid{
        grid-template-columns:repeat(4,66px);
        grid-template-rows:repeat(3,66px);

        width:314px;
        padding:25px;

        margin:0 auto;
        border-radius:24px;
    }

    .life-cell{
        font-size:32px;
    }

    .life-cell.active::after,
    .life-cell.triple::after{
        width:48px;
        height:48px;
    }

    .life-cell.double::before{
        width:58px;
        height:58px;
    }

    .life-cell.triple::before{
        width:68px;
        height:68px;
    }

    .life-cell .count{
        top:5px;
        right:5px;

        min-width:18px;
        height:18px;

        font-size:11px;
        line-height:18px;
    }

    .life-note{
        text-align:center;
        font-size:14px;
    }

    .life-result{
        padding:28px 24px;
    }

    .life-result h3{
        font-size:26px;
    }

    .life-main-number{
        font-size:54px;
    }

    .life-result p{
        font-size:16px;
    }
}

@media(max-width:380px){

    .life-grid{
        grid-template-columns:repeat(4,60px);
        grid-template-rows:repeat(3,60px);

        width:288px;
        padding:24px;
    }

    .life-cell{
        font-size:30px;
    }
}
/* =============================================
   B版排版：上下式
============================================= */
.life-grid-wrap{
  width: 100%;
  max-width: 480px;
  margin: 0 auto 2rem;
}

.num-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 1.6rem;
}

.num-card{
  background: #3D343D;
  border: 1px solid #4A404A;
  border-radius: 12px;
  padding: .9rem .8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}

.num-card-label{
  font-size: 11px;
  letter-spacing: .06em;
  color: #D89A8E;
  display: block;
  width: 100%;
}

.num-card-val{
  font-family: "Noto Serif TC", serif;
  font-size: 32px;
  color: #F2ECE8;
  line-height: 1.1;
  display: block;
  width: 100%;
}

.num-card-val.red{ color: #9098C4; }

.num-card-sub{
  font-size: 11px;
  color: #A69B96;
  line-height: 1.5;
  display: block;
  width: 100%;
}

.result-meaning{
  font-size: 15px;
  color: #C9BEB8;
  line-height: 1.9;
  margin-bottom: 1rem;
}

.result-sub-line{
  font-size: 14px;
  color: #C9BEB8;
  line-height: 1.9;
  margin-bottom: .5rem;
}

.result-sub-section{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .8rem;
  flex-wrap: wrap;
}

.result-sub-title{
  font-size: 14px;
  color: #D89A8E;
  padding-top: 4px;
  flex-shrink: 0;
  font-weight: 500;
}

/* 連線每行獨立 */
.line-result{
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.line-row{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 14px;
}
.line-nums{
  font-family: "Noto Serif TC", serif;
  font-size: 17px;
  font-weight: 600;
  color: #A9AFDA;
  flex-shrink: 0;
  min-width: 36px;
}
.line-name{
  color: #C9BEB8;
}

/* 區塊標題 */
.result-block-title{
  font-family: "Noto Serif TC", serif;
  font-size: 15px;
  font-weight: 400;
  color: #D89A8E;
  letter-spacing: .06em;
  margin: 1rem 0 .4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid #4A404A;
}

/* 流年流月流日 */
.fortune-section{ margin-top: 1.2rem; }
.fortune-bar{
  display: flex;
  align-items: stretch;
  border: 1px solid #4A404A;
  border-radius: 14px;
  overflow: hidden;
  background: #3D343D;
  max-width: 580px;
}
.fortune-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .8rem .6rem;
  gap: .2rem;
}
.fortune-divider{
  width: 1px;
  background: #4A404A;
  margin: .6rem 0;
}
.fortune-label{ font-size: 11px; letter-spacing: .18em; color: #D89A8E; }
.fortune-num{
  font-family: "Noto Serif TC", serif;
  font-size: 28px;
  color: #9098C4;
  line-height: 1.2;
}
.fortune-desc{ font-size: 11px; color: #A69B96; line-height: 1.6; text-align: center; }

@media(max-width:768px){
  .num-cards{ grid-template-columns: repeat(3, 1fr); }
  .num-card-val{ font-size: 26px; }
  .fortune-bar{ max-width: 100%; }
  .fortune-num{ font-size: 24px; }

  .life-intro{ font-size:16px; }
  .result-meaning,
  .result-sub-line{ font-size:16px; line-height:2.1; }
  .line-row{ font-size:16px; }
  .line-nums{ font-size:18px; }
  .result-block-title{ font-size:16px; }
  .num-card-label{ font-size:12px; }
  .num-card-sub{ font-size:12px; }
  .fortune-desc{ font-size:12px; }
  .trait-box p{ font-size:16px; line-height:2.1; }
}