*{box-sizing:border-box}
:root{
  --bg:#08050d;
  --panel:#100a18;
  --panel2:#160d21;
  --line:#30203d;
  --text:#f5efff;
  --muted:#a69ab2;
  --accent:#a855f7
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,"Noto Sans Thai",sans-serif;
  min-height:100vh
}

.bg-grid{
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:.25;
  background-image:
    linear-gradient(#321d45 1px,transparent 1px),
    linear-gradient(90deg,#321d45 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,#000,transparent 85%)
}

.bg-grid:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at 50% 0,
    rgba(168,85,247,.16),
    transparent 35%
  )
}

.topbar{
  position:sticky;
  top:14px;
  z-index:20;
  max-width:1150px;
  margin:14px auto 0;
  padding:12px 16px;
  border:1px solid #392448;
  border-radius:28px;
  background:rgba(12,7,17,.88);
  backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.3)
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  letter-spacing:.5px;
  white-space:nowrap
}

.brand small{
  font-size:9px;
  color:#9b8aa8;
  letter-spacing:1.5px
}

.brand-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c084fc;
  box-shadow:0 0 12px #a855f7
}

.search-wrap{
  height:42px;
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 15px;
  border:1px solid #30203d;
  border-radius:22px;
  background:#0b070f
}

.search-wrap span{
  font-size:24px;
  color:#887594
}

.search-wrap input{
  width:100%;
  background:none;
  border:0;
  outline:0;
  color:#fff;
  font-size:14px
}

.admin-pill{
  border:1px solid #4b2c63;
  background:#160d20;
  color:#d8c7e5;
  border-radius:18px;
  padding:9px 13px;
  font-size:11px
}

main{
  max-width:1150px;
  margin:0 auto;
  padding:48px 0 70px
}

.hero{
  padding:30px 4px 34px
}

.eyebrow{
  font-size:11px;
  color:#917ca0;
  letter-spacing:2px;
  margin:0 0 8px
}

.hero h1{
  font-size:44px;
  margin:0 0 8px;
  letter-spacing:-1.5px
}

.hero h1 span{
  color:var(--accent);
  text-shadow:0 0 25px rgba(168,85,247,.35)
}

.subtitle{
  margin:0;
  color:#9d91a7
}

.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:28px
}

.filter{
  cursor:pointer;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid #34223f;
  background:#100b15;
  color:#a99ab5;
  font-size:12px;
  transition:.2s
}

.filter:hover,
.filter.active{
  color:#fff;
  border-color:#8b45bd;
  background:#1c0d29;
  box-shadow:0 0 18px rgba(168,85,247,.15)
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:14px
}

.section-head h2{
  margin:0;
  font-size:20px
}

.section-head p{
  margin:5px 0 0;
  color:#75677f;
  font-size:12px
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.card{
  overflow:hidden;
  border:1px solid #30203b;
  border-radius:22px;
  background:linear-gradient(180deg,#110b17,#0a060d);
  transition:.22s;
  box-shadow:0 12px 35px rgba(0,0,0,.16)
}

.card:hover{
  transform:translateY(-4px);
  border-color:#74409a;
  box-shadow:0 18px 45px rgba(111,40,170,.2)
}

.thumb{
  height:190px;
  position:relative;
  background:linear-gradient(135deg,#21102f,#0b070e);
  overflow:hidden
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.thumb-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#725a82;
  font-size:46px;
  background:radial-gradient(circle at 50% 30%,#30203b,#09060d 65%)
}

.view{
  position:absolute;
  top:11px;
  left:11px;
  background:rgba(7,4,10,.85);
  padding:7px 10px;
  border-radius:15px;
  font-size:11px
}

.status{
  position:absolute;
  top:11px;
  right:11px;
  padding:7px 10px;
  border-radius:15px;
  background:#a855f7;
  color:#fff;
  font-weight:800;
  font-size:10px;
  box-shadow:0 0 15px rgba(168,85,247,.25)
}

.card-body{
  padding:17px
}

.game{
  display:inline-block;
  color:#988aa1;
  font-size:11px;
  margin-bottom:8px
}

.card h3{
  font-size:18px;
  margin:0 0 13px
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:42px
}

.tag{
  font-size:10px;
  padding:5px 8px;
  border-radius:9px;
  border:1px solid #4b2c5d;
  color:#d7b9f0;
  background:#170d20
}

.tag:nth-child(2n){
  color:#c9b4e6;
  border-color:#49345e;
  background:#120c1a
}

.tag:nth-child(3n){
  color:#e1b8ff;
  border-color:#5a3473;
  background:#190d23
}

.card-foot{
  border-top:1px solid #28202d;
  margin-top:15px;
  padding-top:13px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.author{
  font-size:11px;
  color:#918398
}

.get-btn{
  cursor:pointer;
  border:1px solid #7539a0;
  background:#1b0d27;
  color:#c084fc;
  border-radius:16px;
  padding:8px 12px;
  font-size:11px;
  font-weight:800
}

.get-btn:hover{
  background:#a855f7;
  color:#fff;
  box-shadow:0 0 18px rgba(168,85,247,.3)
}

.modal{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(3,1,6,.78);
  display:grid;
  place-items:center;
  padding:20px;
  backdrop-filter:blur(8px)
}

.hidden{
  display:none
}

.modal-box{
  position:relative;
  width:min(650px,100%);
  background:#100a16;
  border:1px solid #49305a;
  border-radius:22px;
  padding:25px;
  box-shadow:0 30px 100px #000
}

.close{
  position:absolute;
  right:15px;
  top:12px;
  background:none;
  border:0;
  color:#aaa;
  font-size:28px;
  cursor:pointer
}

.modal-tag{
  font-size:10px;
  color:#c084fc;
  letter-spacing:2px
}

.modal-box h2{
  margin:8px 0 4px
}

.modal-box p{
  color:#8f8199;
  font-size:12px
}

.modal-box textarea{
  width:100%;
  height:190px;
  resize:none;
  background:#08050b;
  border:1px solid #34243e;
  border-radius:13px;
  color:#cdb8d9;
  padding:14px;
  font:12px Consolas,monospace;
  outline:none
}

.copy-btn{
  width:100%;
  margin-top:12px;
  padding:12px;
  border:0;
  border-radius:13px;
  background:#a855f7;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 20px rgba(168,85,247,.18)
}

.copy-status{
  text-align:center;
  margin-bottom:0
}

footer{
  text-align:center;
  border-top:1px solid #1d1522;
  padding:25px;
  color:#62566b;
  font-size:11px
}

@media(max-width:850px){
  .topbar{
    margin:10px;
    top:10px
  }

  .admin-pill{
    display:none
  }

  .cards{
    grid-template-columns:repeat(2,1fr)
  }

  main{
    padding:30px 14px
  }

  .hero h1{
    font-size:36px
  }
}

@media(max-width:560px){
  .brand small{
    display:none
  }

  .cards{
    grid-template-columns:1fr
  }

  .thumb{
    height:210px
  }

  .search-wrap{
    min-width:0
  }

  .hero{
    padding-top:25px
  }
}