/* 国际服 · 地下城游戏 UI 组件 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=ZCOOL+XiaoWei&display=swap');

:root {
  --gjf-ink: #050608;
  --gjf-ink-2: #0d1016;
  --gjf-panel: #12161f;
  --gjf-panel-2: #1a2030;
  --gjf-stroke: #8a6a2e;
  --gjf-stroke-bright: #d4a84a;
  --gjf-gold: #e8c15a;
  --gjf-gold-2: #a87a22;
  --gjf-ember: #c24a22;
  --gjf-ember-2: #7a2a12;
  --gjf-text: #f2ebda;
  --gjf-muted: #8f8674;
  --gjf-danger: #c24a3a;
  --gjf-ok: #5a9a64;
  --gjf-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --gjf-display: "ZCOOL XiaoWei", "Noto Sans SC", serif;
}

html, body { height: 100%; }

body.gjf-body {
  margin: 0;
  color: var(--gjf-text);
  font-family: var(--gjf-font);
  background-color: var(--gjf-ink);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(196, 74, 34, 0.18), transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168, 122, 34, 0.12), transparent 45%),
    radial-gradient(ellipse 50% 40% at 10% 70%, rgba(80, 50, 20, 0.2), transparent 50%),
    linear-gradient(180deg, #0a0c10 0%, #050608 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* 石砖纹理层 */
body.gjf-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(255,255,255,.03) 31px, rgba(255,255,255,.03) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(255,255,255,.025) 47px, rgba(255,255,255,.025) 48px);
}

.gjf-shell { position: relative; z-index: 1; }

.gjf-brand {
  font-family: var(--gjf-display);
  font-weight: 400;
  color: var(--gjf-gold);
  letter-spacing: 0.12em;
  text-shadow:
    0 0 24px rgba(232, 193, 90, 0.35),
    0 2px 0 #5a3e10,
    0 4px 12px rgba(0,0,0,.6);
}

/* —— 金属框：直角角饰 —— */
.gjf-frame {
  position: relative;
  background:
    linear-gradient(180deg, rgba(32, 38, 52, 0.95), rgba(12, 14, 20, 0.98));
  border: 2px solid var(--gjf-stroke);
  box-shadow:
    0 0 0 1px rgba(232, 193, 90, 0.15),
    0 20px 50px rgba(0,0,0,.55),
    inset 0 0 40px rgba(0,0,0,.35);
  border-radius: 2px;
}
.gjf-frame::before,
.gjf-frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 2;
}
.gjf-frame::before {
  top: -2px; left: -2px;
  border-top: 3px solid var(--gjf-stroke-bright);
  border-left: 3px solid var(--gjf-stroke-bright);
  box-shadow: -2px -2px 0 #5a3e10;
}
.gjf-frame::after {
  bottom: -2px; right: -2px;
  border-bottom: 3px solid var(--gjf-stroke-bright);
  border-right: 3px solid var(--gjf-stroke-bright);
  box-shadow: 2px 2px 0 #5a3e10;
}
.gjf-frame > .gjf-frame-corner-tr,
.gjf-frame > .gjf-frame-corner-bl {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 2;
}
.gjf-frame > .gjf-frame-corner-tr {
  top: -2px; right: -2px;
  border-top: 3px solid var(--gjf-stroke-bright);
  border-right: 3px solid var(--gjf-stroke-bright);
}
.gjf-frame > .gjf-frame-corner-bl {
  bottom: -2px; left: -2px;
  border-bottom: 3px solid var(--gjf-stroke-bright);
  border-left: 3px solid var(--gjf-stroke-bright);
}

/* —— 锻造切角按钮 —— */
.gjf-btn {
  --btn-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 28px;
  border: none;
  color: #1a1004;
  font-family: var(--gjf-font);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.18em;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  background:
    linear-gradient(180deg, #f0d278 0%, #d4a84a 38%, #8a5e18 100%);
  box-shadow: 0 8px 0 #4a320c, 0 12px 24px rgba(0,0,0,.4);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.gjf-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 9px 0 #4a320c, 0 14px 28px rgba(0,0,0,.45);
}
.gjf-btn:active {
  transform: translateY(3px);
  box-shadow: 0 4px 0 #4a320c, 0 6px 12px rgba(0,0,0,.35);
}
.gjf-btn:disabled,
.gjf-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.4);
  transform: none;
  box-shadow: 0 6px 0 #333;
}
.gjf-btn-fluid { width: 100%; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.gjf-btn-ember {
  color: #fff4ec;
  background: linear-gradient(180deg, #e07040 0%, #c24a22 40%, #7a2a12 100%);
  box-shadow: 0 8px 0 #3a1408, 0 12px 24px rgba(0,0,0,.4);
}
.gjf-btn-ember:hover { box-shadow: 0 9px 0 #3a1408, 0 14px 28px rgba(0,0,0,.45); }
.gjf-btn-steel {
  color: var(--gjf-text);
  background: linear-gradient(180deg, #3a4254 0%, #222836 45%, #141820 100%);
  box-shadow: 0 8px 0 #06080c, 0 12px 24px rgba(0,0,0,.4);
  letter-spacing: 0.1em;
}
.gjf-btn-steel:hover {
  color: var(--gjf-gold);
  filter: brightness(1.1);
  box-shadow: 0 9px 0 #06080c, 0 14px 28px rgba(0,0,0,.45);
}

/* —— 物品栏式输入槽 —— */
.gjf-slot {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(20,24,32,.4));
  border: 1px solid #5a4a28;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(232,193,90,.08);
  border-radius: 0;
}
.gjf-slot:focus-within {
  border-color: var(--gjf-stroke-bright);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.65),
    0 0 0 1px rgba(232,193,90,.35),
    0 0 18px rgba(232,193,90,.12);
}

.gjf-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gjf-gold);
  margin-bottom: 8px;
  text-transform: uppercase;
}

@keyframes gjf-torch {
  0%, 100% { opacity: .4; }
  50% { opacity: .85; }
}
@keyframes gjf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gjf-flicker {
  0%, 100% { opacity: .7; }
  40% { opacity: 1; }
  60% { opacity: .55; }
}