/* ============================================================
   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; }