:root{
  --bg:#f2f0f0;
  --panel:#ffffff;
  --card:#f5f3ea;
  --accent:#e89c03;
  --text:#111;
  --muted:#555;
  --white:#fff;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  font-family:'Noto Sans TC', sans-serif;
  color:var(--text);
}

.container{
  width:1200px;
  margin:24px auto;
  background:var(--panel);
  border-radius:14px;
  padding:30px;
}

h1{
  text-align:center;
  font-size:34px;
  font-family: 'Chiron GoRound TC', 'Noto Sans TC', sans-serif;
}

.dice-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.dice-card{
  background:var(--card);
  border-radius:12px;
  padding:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:170px;
}

.dice-title{
  font-size:22px;
  font-weight:800;
  margin-bottom:18px;
  font-family: 'Chiron GoRound TC', 'Noto Sans TC', sans-serif;
}

.card-img{
  width:72px;
  height:72px;
  object-fit:contain;
  margin-bottom:12px;
}

.btn-primary{
  border:none;
  border-radius:12px;
  padding:10px 20px;
  font-size: 18px;
  font-weight:800;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background .6s ease;
}


.btn-primary:hover{
  background:#f8bb12;
}

.btn-primary:active{ transform:translateY(1px); }

.material-symbols-outlined{
  font-size:22px;
  vertical-align:middle;
}

.result-wrap{
  margin-top:8px;
  background:var(--white);
  border-radius:12px;
  padding:24px;
  text-align:center;
}

.result-label{
  font-weight:800;
  color:#222;
  margin-bottom:10px;
}

.result-value{
  letter-spacing:1px;
  transition:.2s ease;
}

/* 尚未擲骰狀態 */
.result-value.idle{
  color:#e6e5e5;
  font-size:56px;
  font-weight:400;
  font-family: 'Potta One', 'Titan One','Noto Sans TC', sans-serif;
}

/* 擲骰後狀態 */
.result-value.active{
  font-size:100px;
  font-weight:900;
  font-family: 'Chiron GoRound TC', 'Titan One', 'Noto Sans TC', sans-serif;
}

.dice-icon{
  width:72px;
  height:72px;
  object-fit:contain;
  margin-bottom:12px;
}

/* 左上角回首頁 */
.back-home{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:#333;
  font-weight:600;
  margin-bottom:12px;
}

.back-home:hover{
  opacity:.7;
}

.back-home .material-symbols-outlined{
  font-size:20px;
}

/* 標題圖示 */
.title-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:20px;
}

.title-icon{
  width: 60px;
  height:auto;
}

/* 擲骰結果跳出動畫 */
@keyframes popIn{
  0%{
    transform:scale(.86);
    opacity:.15;
  }
  60%{
    transform:scale(1.08);
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

/* 只要加上這個 class 就會播放一次 */
.result-value.pop{
  animation:popIn .28s ease-out;
}

.title-emoji{
  font-size:46px;
  color:#e89c03;
}

.result-value.c-red{ color:#e8502b; }
.result-value.c-green{ color:#1e8f5a; }
.result-value.c-blue{ color:#0004FF; }
.result-value.c-black{ color:#111; }