/* ============================================================
   GOD SKIN — shared design system  (v1)
   Warm near-black · chiseled gold · blood-red neon · Kanit
   Presentation only. Adapted from the Claude Design "God Skin"
   theme to a RESPONSIVE web layout (no fixed phone frame).
   ============================================================ */

:root{
  /* surfaces */
  --gs-bg:        #0a0807;
  --gs-bg-2:      #100d0b;
  --gs-panel:     #16110d;
  --gs-panel-2:   #1d1712;
  --gs-hair:        rgba(214,178,110,.14);   /* warm gold-tinted hairline */
  --gs-hair-strong: rgba(214,178,110,.28);

  /* gold — the GOD SKIN metal */
  --gs-gold:    #d6a94e;
  --gs-gold-hi: #f4d98c;
  --gs-gold-lo: #8a6526;
  --gs-gold-grad: linear-gradient(168deg,#f7e2a4 0%,#e3bd66 28%,#c1933b 55%,#8a6526 100%);

  /* blood-red neon */
  --gs-red:     #e2271d;
  --gs-red-hi:  #ff4339;
  --gs-red-glow: rgba(226,39,29,.55);

  /* ink / text */
  --gs-ink:      #f6efe3;
  --gs-ink-soft: #d8cdbd;
  --gs-muted:    #97897a;
  --gs-muted-2:  #6d6358;

  /* stat accents (carried over from God Skin) */
  --gs-s-speed: #f5c531;
  --gs-s-power: #e8342a;
  --gs-s-range: #3b8bf0;
  --gs-s-def:   #2ec06a;
  --gs-s-tech:  #a766f5;

  --gs-r-lg: 22px;
  --gs-r-md: 16px;
  --gs-r-sm: 11px;

  --gs-ff:      "Kanit", system-ui, "Sukhumvit Set", "Noto Sans Thai", sans-serif;
  --gs-ff-mono: "Spline Sans Mono", ui-monospace, monospace;
}

/* ---------- base ---------- */
html,body{ background: var(--gs-bg); }
body{
  font-family: var(--gs-ff);
  color: var(--gs-ink);
  min-height:100vh;
  background:
    radial-gradient(120% 60% at 80% -10%, rgba(226,39,29,.10), transparent 55%),
    radial-gradient(90% 55% at 12% 105%, rgba(214,169,78,.07), transparent 60%),
    linear-gradient(180deg, var(--gs-bg) 0%, #050403 100%);
  background-attachment: fixed;
}

/* concrete grain wash over the whole page */
.grain::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ---------- GOD SKIN wordmark / display ---------- */
.display, .gs-display{
  font-family: var(--gs-ff);
  font-weight:800; font-style:italic; letter-spacing:.01em; line-height:.92;
}
.gs-wordmark{
  font-family: var(--gs-ff);
  font-weight:800; font-style:italic; text-transform:uppercase; line-height:.82; letter-spacing:.01em;
  background: var(--gs-gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(214,169,78,.28));
  -webkit-text-stroke:.6px rgba(54,38,12,.55);
}
.gs-gold-text{
  background: var(--gs-gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- eyebrow chip ---------- */
.gs-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gs-gold-hi); padding:7px 14px; border-radius:999px;
  border:1px solid var(--gs-hair-strong); background:rgba(214,169,78,.06);
}
.gs-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gs-red); box-shadow:0 0 10px var(--gs-red); animation:gs-pulse 1.8s infinite; }
@keyframes gs-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- panels ---------- */
.gs-panel, .hex-edge{
  background:linear-gradient(180deg,rgba(34,26,19,.72),rgba(16,12,9,.72));
  border:1px solid var(--gs-hair);
  border-radius:var(--gs-r-md);
  backdrop-filter:blur(6px);
}
/* keep hex-edge's old "padded gradient frame" behavior, recolored gold/red */
.hex-edge{
  background:linear-gradient(135deg, rgba(214,169,78,.45) 0%, transparent 50%, rgba(226,39,29,.45) 100%);
  padding:1px; border:none;
}
.hex-edge > *{ background:var(--gs-panel); border-radius:calc(var(--gs-r-md) - 1px); }

/* ---------- buttons (re-skins existing .btn-primary / .btn-ghost) ---------- */
.btn-primary, .gs-btn-gold{
  background: var(--gs-gold-grad) !important;
  color:#241a08 !important; font-weight:700;
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 26px -8px rgba(214,169,78,.6), 0 1px 0 rgba(255,255,255,.4) inset;
}
.btn-primary:hover, .gs-btn-gold:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn-primary:active, .gs-btn-gold:active{ transform:translateY(0) scale(.992); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }

.gs-btn-red{
  background:linear-gradient(168deg,#ff4a40,#c61a12); color:#fff; font-weight:700;
  box-shadow:0 8px 26px -8px var(--gs-red-glow), 0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .12s ease, filter .2s ease;
}
.gs-btn-red:hover{ transform:translateY(-1px); filter:brightness(1.05); }

.btn-ghost, .gs-btn-ghost{
  background:rgba(255,255,255,.04) !important; color:var(--gs-ink-soft) !important;
  border:1px solid var(--gs-hair-strong) !important;
  transition:background .15s, border-color .15s;
}
.btn-ghost:hover, .gs-btn-ghost:hover{ background:rgba(255,255,255,.07) !important; border-color:var(--gs-hair-strong) !important; }

/* ---------- glows ---------- */
.glow{ box-shadow:0 0 40px -8px rgba(214,169,78,.45); }
@keyframes pulse-glow{ 0%,100%{ box-shadow:0 0 20px -4px rgba(214,169,78,.4);} 50%{ box-shadow:0 0 32px -2px rgba(226,39,29,.6);} }
.pulse-glow{ animation:pulse-glow 2s ease-in-out infinite; }

/* ---------- inputs ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select{
  background:rgba(15,11,8,.6); border:1px solid var(--gs-hair); color:var(--gs-ink);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--gs-gold); box-shadow:0 0 0 3px rgba(214,169,78,.18);
}

/* ---------- animation utilities (kept compatible) ---------- */
@keyframes fade-up{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.fade-up{ animation:fade-up .45s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes gs-fade-in{ from{opacity:0} to{opacity:1} }
.gs-fade-in{ animation:gs-fade-in .5s ease both; }

/* ---------- CARD IMAGE — show full, never crop ----------
   Card artwork must display at its own aspect ratio, fully
   visible. Scale DOWN to fit the slot, but never crop. */
.gs-card-img, img.gs-card-img{
  object-fit:contain !important;
  width:100%; height:auto; max-width:100%;
  background:var(--gs-bg-2);
  display:block;
}
/* a framed thumbnail slot that respects ratio (for list rows) */
.gs-card-thumb{
  display:flex; align-items:center; justify-content:center;
  background:var(--gs-bg-2);
  border:1px solid var(--gs-hair);
  border-radius:var(--gs-r-sm);
  overflow:hidden;
}
.gs-card-thumb img{
  width:100%; height:100%; object-fit:contain !important; display:block;
}

/* scrollbars */
::-webkit-scrollbar{ width:0; height:0; }

/* ════════════════════════════════════════════════════════════════
   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)} }