/* 自學／競賽證書面板：study.html 與 play.html 共用（兩頁 token 名不同，這裡自帶色票） */
.cert-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(26, 26, 30, .62);
}
.cert-panel {
  width: min(100%, 760px); max-height: 100%; overflow: auto;
  background: #fbf7ee; color: #1a1a1e;
  border: 1px solid #d2c5ab; border-radius: 16px; padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.cert-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border: 1px solid #d2c5ab; border-radius: 10px; background: #f4ede0;
  -webkit-touch-callout: default; /* iOS 長按存圖 */
}
.cert-hint { margin: 10px 0 8px; font-size: .9rem; color: #4a5768; text-align: center; }
.cert-name { display: flex; gap: 8px; margin: 0 0 12px; }
.cert-name input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px;
  font: inherit; color: inherit; border: 1px solid #d2c5ab; border-radius: 10px; background: #fff;
}
.cert-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cert-btn {
  min-height: 44px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid #d2c5ab; border-radius: 10px; background: #fbf7ee; color: #1a1a1e;
}
.cert-btn--primary { background: #2e4057; color: #f4ede0; border-color: #2e4057; }
.cert-btn:focus-visible { outline: 3px solid #2e4057; outline-offset: 2px; }