/* ═══════════════════════════════════════════════
   PIXEL 8-BIT ORANGE-BLACK THEME — StunKung
   Import this AFTER page-specific CSS
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ── CSS Variable Override ── */
:root {
  --bg:     #0a0400 !important;
  --bg2:    #120800 !important;
  --bg3:    #1a0a00 !important;
  --accent: #f97316 !important;
  --accent2:#c2410c !important;
  --border: #7c2d00 !important;
  --text:   #fed7aa !important;
  --text2:  #c2410c !important;
  --gold:   #fb923c !important;
  --green:  #4ade80 !important;
  --red:    #ef4444 !important;
  --cyan:   #f97316 !important;
  --px-green: #4ade80;
  --px-green-dark: #166534;
}

/* ── Base ── */
*, *::before, *::after { image-rendering: pixelated; }

body {
  background: #0a0400 !important;
  background-image: none !important;
  color: #fed7aa !important;
  font-size: 16px !important;
}

/* ── Thai text sizing ── */
.card-title-thai, .card-sub, .hero-desc, .page-desc,
.boss-name, .pc-name, .desTx, .stat-box-label,
.card-title, .card-body, .card-body span,
.pc-body, .pc-row span,
.boss-row .boss-name,
.dtable td {
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-size: 16px !important;
  line-height: 2 !important;
}

/* เพิ่มขนาด card title และ content ทั่วไป */
.card-body { font-size: 16px !important; }
.card-title { font-size: 10px !important; }
.pc-name { font-size: 16px !important; }
.boss-name { font-size: 16px !important; }
.page-desc { font-size: 15px !important; }
.card-sub, .cards-grid .card .card-sub  { font-size: 16px !important; line-height: 1.8 !important; color: #c2410c !important; }
.hero-desc { font-size: 15px !important; }
.desTx     { font-size: 16px !important; }
.dtable td { font-size: 15px !important; }
.card-arrow, .cards-grid .card .card-arrow { font-size: 13px !important; }
/* section ทั้งหมดใน index */
.section .card-sub { font-size: 16px !important; }
.section .card-title { font-size: 15px !important; line-height: 1.6 !important; }

/* ── Pixel Font — headings & labels only (Thai text uses fallback) ── */
.topbar-logo,
.page-title,
.page-title span,
.stat-box-val,
.card-title,
.pc-title,
.section-title,
.stitle,
.player-title,
.tab,
.wbtn,
.back-btn,
.sk-back,
.titleSkillTx,
.titleTx,
h1, h2, h3,
#serverClock {
  font-family: 'Press Start 2P', monospace !important;
}

/* ── Topbar ── */
.topbar, .sk-topbar {
  background: #0a0400 !important;
  border-bottom: 3px solid #7c2d00 !important;
  box-shadow: 0 3px 0 #000 !important;
  backdrop-filter: none !important;
}
.topbar-logo { font-size: 13px !important; text-shadow: 2px 2px 0 #7c2d00; }
.topbar-logo span { color: #f97316 !important; }

.back-btn, .sk-back {
  font-family: 'Noto Sans Thai', 'Press Start 2P', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #1a0a00 !important;
  border: 2px solid #7c2d00 !important;
  color: #c2410c !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #000 !important;
  letter-spacing: 1px;
}
.back-btn:hover, .sk-back:hover {
  background: #7c2d00 !important;
  color: #fed7aa !important;
  border-color: #f97316 !important;
  box-shadow: 1px 1px 0 #000 !important;
  transform: translate(2px, 2px);
}

/* ── Hero ── */
.page-hero {
  background: #0a0400 !important;
}
.page-hero::before { display: none !important; }
.grid-lines {
  background-image:
    linear-gradient(rgba(249,115,22,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,.08) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
}
.page-tag {
  border: 2px solid #c2410c !important;
  background: #1a0a00 !important;
  color: #f97316 !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  box-shadow: 2px 2px 0 #000;
}
.page-title span {
  background: none !important;
  -webkit-text-fill-color: #fed7aa !important;
  text-shadow: 3px 3px 0 #7c2d00 !important;
  font-size: clamp(20px, 5vw, 40px) !important;
}
.page-desc { color: #c2410c !important; }

/* ── Tabs ── */
.tabs {
  background: #0a0400 !important;
  border-bottom: 3px solid #7c2d00 !important;
}
.tab {
  font-family: 'Noto Sans Thai', 'Press Start 2P', monospace !important;
  font-size: 13px !important;
  color: #7c2d00 !important;
  background: #120800 !important;
  border: 2px solid #7c2d00 !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  margin-bottom: -1px;
  box-shadow: 2px 0 0 #000;
  letter-spacing: 0;
}
.tab:hover { background: #1a0a00 !important; color: #f97316 !important; }
.tab.active {
  background: #0a0400 !important;
  color: #f97316 !important;
  border-color: #f97316 !important;
  border-bottom-color: #0a0400 !important;
  text-shadow: 1px 1px 0 #7c2d00;
}

/* ── Cards ── */
.card, .pc, .vs-card {
  background: #120800 !important;
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.card:hover {
  border-color: #f97316 !important;
  box-shadow: 4px 4px 0 #7c2d00 !important;
  transform: translate(-1px, -1px);
}
.card-head, .pc-head {
  background: #1a0a00 !important;
  border-bottom: 2px solid #7c2d00 !important;
}
.card-title, .pc-title { color: #fb923c !important; font-size: 9px !important; }
.card-badge {
  background: #1a0a00 !important;
  border: 2px solid #7c2d00 !important;
  color: #c2410c !important;
  border-radius: 0 !important;
}
.card-time { color: #c2410c !important; font-family: 'Press Start 2P', monospace !important; font-size: 9px !important; }

/* ── Stat Boxes ── */
.stat-box {
  background: #120800 !important;
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.stat-box:hover { border-color: #f97316 !important; }
.stat-box-val { color: #fb923c !important; font-size: 1.6rem !important; }
.stat-box-label { color: #7c2d00 !important; }

/* ── Time Badges ── */
.tbadge {
  background: #1a0a00 !important;
  border: 2px solid #f97316 !important;
  color: #f97316 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 #7c2d00 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
}
.tbadge.time-past {
  border-color: #7c2d00 !important;
  color: #7c2d00 !important;
  box-shadow: none !important;
}
.gbadge {
  background: #1a0a00 !important;
  border: 2px solid #fb923c !important;
  color: #fb923c !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
}
.gbadge.time-past { border-color: #7c2d00 !important; color: #7c2d00 !important; }

/* ── Section Title ── */
.stitle { color: #f97316 !important; font-size: 9px !important; }
.stitle::after { background: linear-gradient(90deg, #7c2d00, transparent) !important; }

/* ── Note / Warn ── */
.note {
  background: rgba(249,115,22,.08) !important;
  border: 2px solid rgba(249,115,22,.3) !important;
  border-radius: 0 !important;
  color: #f97316 !important;
  box-shadow: 3px 3px 0 #000;
}
.warn {
  background: rgba(251,146,60,.08) !important;
  border: 2px solid rgba(251,146,60,.3) !important;
  border-radius: 0 !important;
  color: #fb923c !important;
  box-shadow: 3px 3px 0 #000;
}

/* ── Tables ── */
.dtable th {
  background: #1a0a00 !important;
  color: #f97316 !important;
  border-bottom: 2px solid #f97316 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
}
.dtable td { border-bottom: 1px solid #7c2d00 !important; color: #fed7aa !important; }
.dtable tr:hover td { background: rgba(249,115,22,.06) !important; }
.dtable .ph td {
  background: linear-gradient(90deg, rgba(124,45,0,.4), transparent) !important;
  color: #fb923c !important;
}

/* ── Boss Row ── */
.boss-row { border-bottom-color: rgba(124,45,0,.4) !important; }
.boss-name { color: #fed7aa !important; }

/* ── Job Badge ── */
.jb {
  background: rgba(124,45,0,.25) !important;
  border: 1px solid rgba(249,115,22,.4) !important;
  color: #fb923c !important;
  border-radius: 0 !important;
}

/* ── Party Cards ── */
.pc-row { border-bottom-color: rgba(124,45,0,.3) !important; }
.pc-job {
  background: rgba(124,45,0,.2) !important;
  border: 1px solid rgba(249,115,22,.35) !important;
  color: #f97316 !important;
  border-radius: 0 !important;
}
.pc-name { color: #fed7aa !important; }
.pc-sub { color: #7c2d00 !important; }

/* ── Stat Bars ── */
.sbar { background: #1a0a00 !important; }
.sbar-fill { background: linear-gradient(90deg, #c2410c, #f97316) !important; }
.sbar-fill.hp { background: linear-gradient(90deg, #7c2d00, #fb923c) !important; }
.sbar-val { color: #c2410c !important; }
.nc {
  background: #1a0a00 !important;
  border: 1px solid #7c2d00 !important;
  color: #c2410c !important;
  border-radius: 0 !important;
}

/* ── Skill Cards (skills.html) ── */
.mainBox {
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  background: #120800 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.mainBox:hover {
  border-color: #f97316 !important;
  box-shadow: 4px 4px 0 #7c2d00 !important;
  transform: translate(-1px,-1px) !important;
}
.bottom-right { color: #f97316 !important; }

/* ── Weapon Buttons (skills.html) ── */
.wbtn {
  font-size: 8px !important;
  background: #1a0a00 !important;
  border: 2px solid #7c2d00 !important;
  color: #c2410c !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.wbtn:hover, .wbtn.active {
  background: #7c2d00 !important;
  color: #fed7aa !important;
  border-color: #f97316 !important;
  box-shadow: 1px 1px 0 #000 !important;
}

/* ── Filters (skills.html) ── */
.filter-item select {
  background: #1a0a00 !important;
  border: 2px solid #7c2d00 !important;
  border-radius: 0 !important;
  color: #fed7aa !important;
}
.filter-item select:focus { border-color: #f97316 !important; }
.filter-item label { color: #7c2d00 !important; }

/* ── Skill Detail ── */
.showSKillbox {
  background: #120800 !important;
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.titleSkillTx, .titleTx { color: #f97316 !important; text-shadow: 1px 1px 0 #7c2d00 !important; }
.desTypeTx {
  background: rgba(249,115,22,.08) !important;
  border: 1px solid rgba(249,115,22,.3) !important;
  border-radius: 0 !important;
  color: #f97316 !important;
}
.desTypeVal {
  background: rgba(239,68,68,.08) !important;
  border: 1px solid rgba(239,68,68,.3) !important;
  border-radius: 0 !important;
  color: #ef4444 !important;
}
.desTypeSW {
  background: rgba(249,115,22,.08) !important;
  border: 1px solid rgba(249,115,22,.2) !important;
  border-radius: 0 !important;
  color: #fb923c !important;
}
.desTypeBu {
  background: rgba(251,146,60,.08) !important;
  border: 1px solid rgba(251,146,60,.3) !important;
  border-radius: 0 !important;
  color: #fb923c !important;
}
.imgShow { border: 2px solid #7c2d00 !important; border-radius: 0 !important; }

/* ── Tier Page ── */
.progress { background: #1a0a00 !important; }
.progress-bar, .bg-danger {
  background: linear-gradient(90deg, #c2410c, #f97316) !important;
}
.titleSkillTx { color: #f97316 !important; }
.ytframe { border: 3px solid #7c2d00 !important; border-radius: 0 !important; }
.img-fluid { border: 2px solid #7c2d00 !important; border-radius: 0 !important; }

/* ── Class Guide (mapleclassguide.html) ── */
.class-card {
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.class-card:hover {
  border-color: #f97316 !important;
  box-shadow: 4px 4px 0 #7c2d00 !important;
}
.class-card.active-card { border-color: #f97316 !important; box-shadow: 0 0 0 0 !important; }
.play-btn { background: rgba(249,115,22,.9) !important; }
.player-wrap {
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.player-header { border-bottom: 2px solid #7c2d00 !important; }
.player-dot { background: #f97316 !important; box-shadow: 0 0 8px #f97316 !important; }
.card-title { font-family: 'Press Start 2P', monospace !important; font-size: 9px !important; }
.section-badge {
  border: 2px solid #7c2d00 !important;
  color: #c2410c !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
}
.section-line { background: #7c2d00 !important; }
.section-title { color: #f97316 !important; font-size: 9px !important; }
.section-divider { background: #7c2d00 !important; }
.retry-btn {
  border: 2px solid rgba(249,115,22,.4) !important;
  background: rgba(249,115,22,.08) !important;
  color: #f97316 !important;
  border-radius: 0 !important;
}

/* ── Top Button ── */
#topBtn {
  background: rgba(249,115,22,.15) !important;
  border: 2px solid rgba(249,115,22,.4) !important;
  color: #f97316 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #7c2d00 !important;
  font-family: 'Press Start 2P', monospace !important;
}
#topBtn:hover {
  background: rgba(249,115,22,.3) !important;
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 #7c2d00 !important;
}

/* ── Server Clock ── */
#serverClock {
  color: #4ade80 !important;
  text-shadow: 2px 2px 0 #166534 !important;
}

/* ── Green accents ── */
/* Active tab — green glow */
.tab.active {
  color: #4ade80 !important;
  border-color: #4ade80 !important;
  border-bottom-color: #0a0400 !important;
  text-shadow: 1px 1px 0 #166534 !important;
}

/* stat-box-val สลับ: orange + green */
.stat-boxes .stat-box:nth-child(odd) .stat-box-val  { color: #fb923c !important; }
.stat-boxes .stat-box:nth-child(even) .stat-box-val { color: #4ade80 !important; }

/* progress bar hp — green */
.sbar-fill.hp { background: linear-gradient(90deg, #166534, #4ade80) !important; }

/* boss row heading สลับ */
.stitle { color: #4ade80 !important; }
.stitle::after { background: linear-gradient(90deg, #166534, transparent) !important; }

/* tbadge: upcoming times — green tint */
.tbadge:not(.time-past) {
  border-color: #4ade80 !important;
  color: #4ade80 !important;
  background: rgba(74,222,128,.08) !important;
  box-shadow: 2px 2px 0 #166534 !important;
}

/* note border — green */
.note {
  border-color: rgba(74,222,128,.3) !important;
  color: #4ade80 !important;
  background: rgba(74,222,128,.06) !important;
}

/* Bootstrap success — keep green */
.btn-success { background: #052e16 !important; border: 2px solid #4ade80 !important; color: #86efac !important; }

/* page-tag — green */
.page-tag {
  border-color: rgba(74,222,128,.4) !important;
  background: rgba(74,222,128,.06) !important;
  color: #4ade80 !important;
}

/* ── Preloader ── */
.preloader {
  background-color: #0a0400 !important;
  background-image: url('../css/image/loading.gif') !important;
}

/* ── Bootstrap Overrides (mini-game pages) ── */
.navbar { background: #0a0400 !important; border-bottom: 3px solid #7c2d00 !important; }
.card { border-radius: 0 !important; }
.form-control, .form-select {
  background: #1a0a00 !important;
  border: 2px solid #7c2d00 !important;
  color: #fed7aa !important;
  border-radius: 0 !important;
}
.form-control:focus, .form-select:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249,115,22,.2) !important;
  background: #1a0a00 !important;
  color: #fed7aa !important;
}
.input-group-text {
  background: #120800 !important;
  border: 2px solid #7c2d00 !important;
  color: #c2410c !important;
  border-radius: 0 !important;
}
.list-group-item {
  background: #120800 !important;
  border: 1px solid #7c2d00 !important;
  color: #fed7aa !important;
  border-radius: 0 !important;
}
.btn {
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.btn:hover { box-shadow: 1px 1px 0 #000 !important; transform: translate(2px,2px); }
.btn-primary { background: #1e3a5f !important; border: 2px solid #3b82f6 !important; color: #93c5fd !important; }
.btn-success { background: #14532d !important; border: 2px solid #22c55e !important; color: #86efac !important; }
.btn-danger  { background: #450a0a !important; border: 2px solid #ef4444 !important; color: #fca5a5 !important; }
.btn-warning { background: #431400 !important; border: 2px solid #f97316 !important; color: #fed7aa !important; }
.btn-dark    { background: #1a0a00 !important; border: 2px solid #7c2d00 !important; color: #c2410c !important; }
.btn-secondary { background: #1a0a00 !important; border: 2px solid #7c2d00 !important; color: #c2410c !important; }
h3 { font-family: 'Press Start 2P', monospace !important; color: #f97316 !important; font-size: 12px !important; }

/* ── Canvas ── */
canvas { border: 3px solid #7c2d00 !important; }

/* ── Time Past ── */
.time-past {
  color: #7c2d00 !important;
  background: rgba(124,45,0,.1) !important;
  border-color: #7c2d00 !important;
  text-decoration: line-through;
}

/* ── Index page specific ── */
.channel-tag {
  border: 2px solid rgba(74,222,128,.4) !important;
  background: rgba(74,222,128,.06) !important;
  color: #4ade80 !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
}
.channel-tag::before { background: #4ade80 !important; }

.hero-title span {
  background: none !important;
  -webkit-text-fill-color: #f97316 !important;
  text-shadow: 4px 4px 0 #7c2d00 !important;
}
.hero-subtitle { color: #4ade80 !important; letter-spacing: 4px; }

.sub-counter {
  background: #120800 !important;
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.sub-num { color: #4ade80 !important; font-family: 'Press Start 2P', monospace !important; font-size: 18px !important; }
.sub-num label, .sub-num #visitorCount, .sub-num #subNumber {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 18px !important;
  color: #4ade80 !important;
}
.sub-label { color: #7c2d00 !important; font-family: 'Noto Sans Thai', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px !important; }

.social-btn {
  background: #120800 !important;
  border: 2px solid #7c2d00 !important;
  border-radius: 0 !important;
  color: #c2410c !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.social-btn:hover {
  border-color: #f97316 !important;
  color: #f97316 !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 #000 !important;
}

.section-title {
  color: #c2410c !important;
  font-family: 'Noto Sans Thai', 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.section-line { background: #7c2d00 !important; }
.section-badge {
  background: rgba(74,222,128,.1) !important;
  color: #4ade80 !important;
  border: 2px solid rgba(74,222,128,.3) !important;
  border-radius: 0 !important;
  font-family: 'Noto Sans Thai', 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.card {
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.card::before { background: linear-gradient(135deg,rgba(249,115,22,.06) 0%,transparent 60%) !important; }
.card:hover { border-color: #f97316 !important; transform: translate(-1px,-1px) !important; }
.card-title { color: #fed7aa !important; }
.card-sub { color: #c2410c !important; }
.card-arrow { color: #7c2d00 !important; }
.card:hover .card-arrow { color: #4ade80 !important; }
.card-bg-maplebegin,
.card-bg-mapleweapon,
.card-bg-maplecri,
.card-bg-maplemdc,
.card-bg-maplepoten,
.card-bg-mapleclassguide,
.card-bg-saoskills,
.card-bg-saotier,
.card-bg-donate { min-height: 220px; }

.card-bg-maplebegin .card-sub,
.card-bg-mapleweapon .card-sub,
.card-bg-maplecri .card-sub,
.card-bg-maplemdc .card-sub,
.card-bg-maplepoten .card-sub,
.card-bg-mapleclassguide .card-sub,
.card-bg-saoskills .card-sub,
.card-bg-saotier .card-sub,
.card-bg-donate .card-sub { display: none !important; }

.card-bg-maplebegin     { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/maplebegin.png') center/cover no-repeat !important; }
.card-bg-mapleweapon    { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/mapleweapon.png') center/cover no-repeat !important; }
.card-bg-maplecri       { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/cricover.png') center/cover no-repeat !important; }
.card-bg-maplemdc       { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/maxdmgcover.png') center/cover no-repeat !important; }
.card-bg-maplepoten     { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/potencover.png') center/cover no-repeat !important; }
.card-bg-mapleclassguide{ background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/mapleclasscover.png') center/cover no-repeat !important; }

.card-bg-saoskills  { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/allskills.jpg') center/cover no-repeat !important; }
.card-bg-saotier    { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/ctiar.jpg') center/cover no-repeat !important; }
.card-bg-donate     { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/donate.png') center/cover no-repeat !important; }

.tag-maple { background: rgba(74,222,128,.08) !important; color: #4ade80 !important; border: 2px solid rgba(74,222,128,.35) !important; border-radius: 0 !important; }
.tag-sao   { background: rgba(74,222,128,.08) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,.2) !important; border-radius: 0 !important; }
.tag-game  { background: rgba(74,222,128,.08) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,.15) !important; border-radius: 0 !important; }

.game-card {
  background: #120800 !important;
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
.game-card:hover { border-color: #4ade80 !important; box-shadow: 4px 4px 0 #166534 !important; transform: translate(-1px,-1px) !important; }
.game-name { color: #fed7aa !important; font-family: 'Press Start 2P', monospace !important; font-size: 8px !important; }

.mini-games-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important; }

.game-bg-rabbit,
.game-bg-secret,
.game-bg-rpg,
.game-bg-race { min-height: 220px; }

.game-bg-rabbit { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/crabbit.png') center/cover no-repeat !important; }
.game-bg-secret { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/csec.jpg') center/cover no-repeat !important; }
.game-bg-rpg    { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/battleroyal.jpg') center/cover no-repeat !important; }
.game-bg-race   { background: linear-gradient(to top, rgba(10,4,0,0.95) 40%, rgba(10,4,0,0.3) 100%), url('../css/image/crace.png') center/cover no-repeat !important; }

/* ── CRA page footer ── */
.footer span { color: #f97316 !important; }
.footer { color: #7c2d00 !important; border-top: 2px solid #7c2d00 !important; }

/* ── Chatbot widget overrides ── */
#sk-chat-btn {
  background: linear-gradient(135deg, #c2410c, #f97316) !important;
  box-shadow: 0 4px 20px rgba(249,115,22,.4) !important;
}
#sk-chat-win {
  background: #120800 !important;
  border: 3px solid #7c2d00 !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 #000 !important;
}
.sk-head {
  background: linear-gradient(135deg,rgba(249,115,22,.12),rgba(194,65,12,.1)) !important;
  border-bottom: 2px solid #7c2d00 !important;
}
.sk-head-name { color: #f97316 !important; }
.sk-head-sub { color: #fb923c !important; }
.sk-head-sub::before { background: #fb923c !important; }
.sk-msg.bot .sk-bubble { background: #1a0a00 !important; border-radius: 0 !important; }
.sk-msg.user .sk-bubble {
  background: rgba(249,115,22,.15) !important;
  border: 1px solid rgba(249,115,22,.3) !important;
  border-radius: 0 !important;
}
.sk-link-btn {
  background: rgba(249,115,22,.12) !important;
  border: 1px solid rgba(249,115,22,.3) !important;
  color: #f97316 !important;
  border-radius: 0 !important;
}
.sk-input {
  background: #1a0a00 !important;
  border: 1px solid #7c2d00 !important;
  border-radius: 0 !important;
  color: #fed7aa !important;
}
.sk-input:focus { border-color: rgba(249,115,22,.5) !important; }
.sk-send {
  background: linear-gradient(135deg, #c2410c, #f97316) !important;
  border-radius: 0 !important;
}
.sk-qbtn {
  background: #1a0a00 !important;
  border: 1px solid #7c2d00 !important;
  border-radius: 0 !important;
  color: #c2410c !important;
}
.sk-qbtn:hover { color: #f97316 !important; border-color: rgba(249,115,22,.5) !important; }
.sk-notif { background: #f97316 !important; }

/* ── Animated Border Glow ── */
@keyframes glow-run {
  0%   { filter: drop-shadow( 0  -6px 8px rgba(251,146,60,1)); }
  25%  { filter: drop-shadow( 6px  0  8px rgba(251,146,60,1)); }
  50%  { filter: drop-shadow( 0   6px 8px rgba(251,146,60,1)); }
  75%  { filter: drop-shadow(-6px  0  8px rgba(251,146,60,1)); }
  100% { filter: drop-shadow( 0  -6px 8px rgba(251,146,60,1)); }
}
.card { animation: glow-run 2.5s linear infinite; }

/* ── Matrix BG — ให้ content ทุกอย่างอยู่บน canvas ── */
.topbar, .sk-topbar, .page-hero, .tabs, .content,
.section, .divider, .footer, .page-wrap,
.vs-wrap, .pc-wrap, .boss-section { position: relative; z-index: 1; }