/* ════════════════════════════════════════════════════════════════
   V10 DESIGN LAYER — ตาม prototype Claude Design (Godskin.dc.html)
   โทน: ทอง #e0ad46/#f4dd93 · แดงหนัง #b21414/#c0331f · ดำ #0a0405 · โฮโล่ #3ce0ff
   ฟอนต์: Kanit (หัวข้อ) · Teko (ตัวเลข/wordmark) · IBM Plex Sans Thai (เนื้อความ)
   ═══════════════════════════════════════════════════════════════ */
:root{
  --gd-ink-bg:#0a0405;
  --gd-gold-hi:#f4dd93; --gd-gold:#e0ad46; --gd-gold-mid:#d9a441; --gd-gold-deep:#8a5a12;
  --gd-gold-text:#f0d99a; --gd-gold-soft:#e7cf9a; --gd-gold-muted:#c9b98f;
  --gd-red:#b21414; --gd-red-btn:#c0331f; --gd-orange:#ff8a3c; --gd-fire:#d0331f;
  --gd-holo:#3ce0ff; --gd-holo-soft:#6bc9ff; --gd-opp-red:#ff6b6b;
  --gd-body:#f3ece0; --gd-dim:#9a8f80; --gd-dim-2:#8f836f;
  --gd-hair:rgba(230,190,110,.28); --gd-hair-soft:rgba(230,190,110,.22); --gd-hair-strong:rgba(232,193,104,.55);
  --gd-panel-bg:rgba(8,4,5,.82); --gd-panel-bg-2:rgba(6,6,9,.85);
}
.gd-teko{ font-family:'Teko',sans-serif; }
.gd-kanit{ font-family:'Kanit',sans-serif; }

/* ── Backgrounds (2 ธีมตาม HANDOFF ข้อ 10) ── */
.gd-bg-red{
  background:radial-gradient(58% 55% at 62% 32%, #8d1717 0%, #4a0a0a 40%, #1a0405 74%, #0a0405 100%) !important;
  background-attachment:fixed !important;
}
.gd-bg-arena{ background:#08090c !important; }
.gd-bg-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.gd-bg-layer .gd-bg-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.gd-bg-layer .gd-bg-img.blend{ opacity:.35; mix-blend-mode:screen; }
.gd-bg-layer .gd-bg-img.arena{ opacity:.5; }
.gd-bg-layer .gd-vignette{ position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(10,4,5,.85) 100%); }
.gd-bg-layer .gd-arena-shade{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,7,10,.5) 0%, rgba(6,7,10,.72) 55%, rgba(4,5,7,.94) 100%); }
.gd-bg-layer .gd-arena-blue{ position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 40%, rgba(60,120,200,.10), transparent 70%); }

/* ── หัวเรื่อง ── */
.gd-eyebrow{ font-family:'Kanit',sans-serif; font-weight:700; color:#eec368; }
.gd-heading{ font-family:'Kanit',sans-serif; font-weight:800; color:#fff;
  text-shadow:0 2px 16px rgba(178,20,20,.6); }
.gd-heading-arena{ font-family:'Teko',sans-serif; font-weight:700; color:#fff; letter-spacing:3px;
  text-shadow:0 3px 20px rgba(0,0,0,.7); }

/* ── Panel ── */
.gd-panel{
  background:var(--gd-panel-bg); border:1px solid var(--gd-hair); border-radius:26px;
  padding:clamp(22px,4vw,34px); box-shadow:0 24px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
}
.gd-panel-2{
  background:var(--gd-panel-bg-2); border:1px solid var(--gd-hair-soft); border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}

/* ── ปุ่ม ── */
.gd-btn-gold{
  display:inline-block; text-align:center; cursor:pointer; text-decoration:none;
  font-family:'Kanit',sans-serif; font-weight:700; font-size:17px; color:#2a1602;
  background:linear-gradient(180deg,#f4dd93,#d9a441); border:none; border-radius:999px;
  padding:14px 40px;
  box-shadow:0 8px 20px rgba(180,120,20,.35), inset 0 1px 0 rgba(255,255,255,.55);
  transition:filter .15s, transform .1s;
}
.gd-btn-gold:hover{ filter:brightness(1.06); color:#2a1602; }
.gd-btn-gold:active{ transform:translateY(1px); }
.gd-btn-gold:disabled{ filter:grayscale(.5) brightness(.8); cursor:default; }
.gd-btn-outline{
  display:inline-block; text-align:center; cursor:pointer; text-decoration:none;
  font-family:'Kanit',sans-serif; font-weight:600; font-size:16px; color:var(--gd-gold-text);
  background:transparent; border:1.5px solid var(--gd-hair-strong); border-radius:999px;
  padding:14px 34px; transition:border-color .15s, color .15s;
}
.gd-btn-outline:hover{ border-color:#ffe6a6; color:#ffe6a6; }
.gd-btn-red{
  display:inline-block; text-align:center; cursor:pointer; text-decoration:none;
  background:var(--gd-red-btn); color:#fff; border:none; border-radius:8px;
  padding:8px 18px; font-family:'Kanit',sans-serif; font-weight:600; font-size:13px;
  transition:filter .15s, transform .1s; white-space:nowrap;
}
.gd-btn-red:hover{ filter:brightness(1.15); color:#fff; }
.gd-btn-red:active{ transform:scale(.96); }
.gd-btn-fire{
  display:inline-block; text-align:center; cursor:pointer; text-decoration:none;
  background:linear-gradient(180deg,#ff8a3c,#d0331f); color:#fff; border:none; border-radius:999px;
  padding:16px 52px; font-family:'Kanit',sans-serif; font-weight:700; font-size:19px;
  box-shadow:0 10px 30px rgba(208,51,31,.5); animation:gd-pulse 1.8s ease-in-out infinite;
}
.gd-btn-fire:hover{ color:#fff; filter:brightness(1.08); }

/* ── Input ── */
.gd-input{
  width:100%; background:#100a0b; border:1px solid rgba(230,190,110,.35); border-radius:999px;
  padding:15px 22px; color:#fff; font-family:'IBM Plex Sans Thai','Kanit',sans-serif; font-size:16px;
  outline:none; box-sizing:border-box;
}
.gd-input:focus{ border-color:var(--gd-gold); }
.gd-input-sq{ border-radius:14px; }
.gd-input::placeholder{ color:rgba(255,255,255,.32); }

/* ── Alert แดง (เตือน provider เดิม ฯลฯ) ── */
.gd-alert-red{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(178,20,20,.16); border:1px solid rgba(255,120,120,.4); border-radius:14px;
  padding:12px 16px; font-size:13px; color:#ffd3d3; line-height:1.5;
}
.gd-alert-red .mark{ font-family:'Teko',sans-serif; font-size:20px; color:#ff8a8a; line-height:1; }

/* ── Language toggle มุมขวาบน (ทุกหน้ายกเว้น landing) ── */
.gd-lang-toggle{
  position:fixed; top:16px; right:16px; z-index:120; display:flex;
  background:rgba(0,0,0,.5); border:1px solid rgba(230,190,110,.35); border-radius:999px;
  overflow:hidden; backdrop-filter:blur(4px);
}
.gd-lang-toggle a{
  display:block; padding:7px 16px; font-family:'Kanit',sans-serif; font-weight:700; font-size:13px;
  color:#cbbfa6; text-decoration:none;
}
.gd-lang-toggle a.on{ background:linear-gradient(180deg,#f4dd93,#d9a441); color:#2a1602; }

/* ── Keyframes ตาม prototype ── */
@keyframes gd-float{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes gd-pulse{ 0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)} }
@keyframes gd-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(4px)} }
@keyframes gd-flash{ 0%{opacity:0} 45%{opacity:1} 100%{opacity:0} }
@keyframes gd-rise{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }
@keyframes gd-wig{ 0%,100%{transform:rotate(-2.2deg)} 50%{transform:rotate(2.2deg)} }