/* ธีมดำ-ทอง ครอบใต้ .kl-wrap เท่านั้น ไม่แตะ body / * / h1 ของธีม */
.kl-wrap, .kl-wrap * { box-sizing: border-box; }
.kl-wrap {
  --kl-gold: #d4af37;
  --kl-gold-light: #f3d77a;
  --kl-gold-dark: #8a6a14;
  --kl-bg: #0e0e0e;
  --kl-bg2: #1a1710;
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(160deg, #1c1911 0%, #0e0e0e 60%, #131008 100%);
  border: 1px solid var(--kl-gold);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(212,175,55,.25) inset, 0 14px 34px rgba(0,0,0,.6), 0 0 24px rgba(212,175,55,.12);
  font-family: "Kanit", "Prompt", "Sukhumvit Set", "Noto Sans Thai", sans-serif;
  color: #f3e9c9;
  line-height: 1.2;
  touch-action: pan-y;
}
.kl-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.kl-progress {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2416, #0b0a06);
  color: var(--kl-gold-light);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; flex-shrink: 0;
  box-shadow: inset 0 0 0 2px var(--kl-gold), 0 0 12px rgba(212,175,55,.35);
}
.kl-progress b { font-size: 20px; font-weight: 700; }
.kl-progress small { font-size: 11px; margin-top: 3px; color: #cdb96b; }
.kl-title {
  font-size: 22px; font-weight: 700; text-align: center; flex: 1; margin: 0;
  background: linear-gradient(#f9e39a, #d4af37 60%, #b88d1f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.kl-scratch {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 10px; overflow: hidden; background: #1c1206;
  box-shadow: inset 0 0 0 2px var(--kl-gold), inset 0 0 0 4px #000, 0 0 18px rgba(212,175,55,.2);
}
.kl-scratch canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  display: block; margin: 0; padding: 0; border: 0; touch-action: none;
}
.kl-under { pointer-events: none; }
.kl-cover { cursor: grab; }
.kl-cover.kl-done { pointer-events: none; }
.kl-hint {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font-size: 13px; color: #f6efd8; text-shadow: 0 1px 3px #000;
  pointer-events: none; transition: opacity .4s;
}
.kl-actions { display: flex; gap: 12px; margin: 16px 0 0; }
.kl-wrap .kl-btn {
  flex: 1; border: 1px solid var(--kl-gold-light); border-radius: 40px; padding: 14px 10px; margin: 0;
  font-family: inherit; font-size: 18px; font-weight: 700; color: #1a1305; line-height: 1.2;
  cursor: pointer; text-transform: none; letter-spacing: 0; text-shadow: none;
  background: linear-gradient(#f5d97c, #d4af37 55%, #b88d1f);
  box-shadow: 0 4px 0 #6d5210, 0 8px 18px rgba(0,0,0,.5), 0 0 14px rgba(212,175,55,.35);
  transition: transform .08s, box-shadow .08s;
}
.kl-wrap .kl-btn:hover { background: linear-gradient(#ffe89a, #e0bb45 55%, #c4981f); color: #1a1305; }
.kl-wrap .kl-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #6d5210, 0 4px 10px rgba(0,0,0,.5); }