/* ==========================================================
   ANARYX-PLUGIN — profile site
   Flat blue + white, no gradients, RPG-Maker window motif
   ========================================================== */

:root{
  --blue-deep:   #14224A;
  --blue-dark:   #1E3A8A;
  --blue:        #2563EB;
  --blue-light:  #DCE8FF;
  --blue-tint:   #EEF4FF;
  --white:       #FFFFFF;
  --ink:         #101828;
  --muted:       #5B6B85;
  --line:        #C9D8F5;
  --ok:          #16A34A;
  --warn:        #B45309;
  --warn-bg:     #FEF3C7;
  --danger:      #DC2626;
  --radius:      10px;
  --font-pixel:  'Press Start 2P', monospace;
  --font-body:   'Plus Jakarta Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
code{
  background:var(--blue-tint);
  border:1px solid var(--line);
  padding:1px 6px;
  border-radius:4px;
  font-size:0.9em;
}

/* ---------- RPG window motif ---------- */
.rpgwin{
  position:relative;
  background:var(--white);
  border:3px solid var(--blue);
  border-radius:6px;
  padding:28px;
}
.rpgwin-corner{ position:absolute; width:10px; height:10px; background:var(--blue); }
.rpgwin-corner.tl{ top:-3px; left:-3px; }
.rpgwin-corner.tr{ top:-3px; right:-3px; }
.rpgwin-corner.bl{ bottom:-3px; left:-3px; }
.rpgwin-corner.br{ bottom:-3px; right:-3px; }

.cursor{ display:inline-block; color:var(--blue); animation:cursor-blink 1s steps(1) infinite; }
@keyframes cursor-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0.15;} }

.float{ animation:float 4.5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--blue-deep); border-bottom:3px solid var(--blue); }
.nav-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ font-family:var(--font-pixel); font-size:14px; color:var(--blue-deep); background:var(--white); padding:6px 8px; line-height:1; }
.brand-name{ font-family:var(--font-pixel); font-size:13px; color:var(--white); letter-spacing:0.02em; }
.brand-dash{ color:#7FA6FF; }

.tabs{ position:relative; display:flex; flex-wrap:wrap; gap:4px; }
.tab-indicator{
  position:absolute; bottom:-13px; left:0; height:3px; width:0;
  background:var(--white);
  transition:left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
}
.tab{
  font-family:var(--font-body); font-weight:600; font-size:13px; color:#B7C7EE;
  background:transparent; border:2px solid transparent; padding:8px 12px; cursor:pointer;
  display:flex; align-items:center; gap:7px; border-radius:6px;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.tab i{ font-size:12px; }
.tab:hover{ color:var(--white); background:rgba(255,255,255,0.06); transform:translateY(-1px); }
.tab.active{ color:var(--white); background:var(--blue); border-color:var(--white); }

.burger{ display:none; background:transparent; border:2px solid var(--white); color:var(--white); width:38px; height:38px; border-radius:6px; cursor:pointer; }

/* ---------- Layout helpers ---------- */
main{ max-width:1180px; margin:0 auto; padding:0 24px 80px; }
.page{ display:none; padding-top:48px; }
.page.active{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.eyebrow{ font-family:var(--font-pixel); font-size:11px; color:var(--blue); letter-spacing:0.04em; margin:0 0 14px; }
.eyebrow.center{ text-align:center; }
.page-title{ font-size:clamp(26px,4vw,36px); font-weight:800; margin:0 0 12px; text-align:center; color:var(--blue-deep); }
.page-lead{ text-align:center; max-width:640px; margin:0 auto 40px; color:var(--muted); }
.sub-title{ font-size:17px; font-weight:800; color:var(--blue-deep); display:flex; align-items:center; gap:9px; margin:44px 0 16px; }
.sub-title i{ color:var(--blue); }
.section-title{ font-size:20px; font-weight:800; color:var(--blue-deep); display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.section-title i{ color:var(--blue); }

/* ---------- HOME / HERO ---------- */
.hero{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; padding-top:20px; }
.pixel-title{ font-family:var(--font-pixel); font-size:clamp(28px,4vw,44px); line-height:1.35; color:var(--blue-deep); margin:0 0 20px; }
.hero-lead{ color:var(--muted); font-size:16px; max-width:520px; margin:0 0 26px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-right{ display:flex; flex-direction:column; gap:20px; align-items:center; }

.profile-frame{
  position:relative; width:180px; padding:10px; background:var(--white);
  border:3px solid var(--blue); border-radius:8px;
}
.profile-frame img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; display:block; }
.profile-ring{
  position:absolute; inset:-8px; border:2px solid var(--blue); border-radius:12px;
  opacity:0; animation:pulse-ring 2.6s ease-out infinite; pointer-events:none;
}
@keyframes pulse-ring{
  0%{ transform:scale(0.94); opacity:0.65; }
  70%{ transform:scale(1.08); opacity:0; }
  100%{ opacity:0; }
}
.profile-caption{
  font-family:var(--font-pixel); font-size:9px; color:var(--blue); text-align:center;
  margin:10px 0 0; letter-spacing:0.03em;
}

.hero-window{ padding:22px; width:100%; }
.rpgwin-head{ font-family:var(--font-pixel); font-size:10px; color:var(--blue); margin-bottom:16px; letter-spacing:0.05em; }
.status-list{ list-style:none; margin:0; padding:0; }
.status-list li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.status-list li:last-child{ border-bottom:none; }
.status-list span{ color:var(--muted); }
.status-list b{ color:var(--ink); font-weight:700; }
.status-list b.online{ color:var(--ok); }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:56px 0; }
.stat-card{ background:var(--blue-tint); border:2px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; transition:transform .2s; }
.stat-card:hover{ transform:translateY(-3px); }
.stat-num, .stat-num-text{ font-family:var(--font-pixel); font-size:18px; color:var(--blue); margin-bottom:8px; }
.stat-label{ font-size:12px; color:var(--muted); font-weight:600; }

.about p{ color:var(--muted); margin:0; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body); font-weight:700; font-size:14px; padding:12px 22px; border-radius:7px;
  border:2px solid var(--blue); cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; transition:background .15s, color .15s, transform .12s, box-shadow .15s;
}
.btn:hover{ box-shadow:0 4px 0 rgba(37,99,235,0.15); transform:translateY(-2px); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn-primary{ background:var(--blue); color:var(--white); }
.btn-primary:hover{ background:var(--blue-dark); border-color:var(--blue-dark); }
.btn-ghost{ background:var(--white); color:var(--blue); }
.btn-ghost:hover{ background:var(--blue-tint); }
.btn.small{ font-size:13px; padding:9px 16px; }
.btn.full{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }
.btn[disabled]:hover{ transform:none; box-shadow:none; }

/* ---------- Grids / cards ---------- */
.grid{ display:grid; gap:20px; }
.support-grid{ grid-template-columns:repeat(3,1fr); }

.click-card{
  background:var(--white); border:2px solid var(--line); border-radius:var(--radius); padding:24px;
  cursor:pointer; transition:border-color .18s, transform .18s, box-shadow .18s;
  display:flex; flex-direction:column;
}
.click-card:hover{ border-color:var(--blue); transform:translateY(-4px); box-shadow:0 10px 24px -12px rgba(37,99,235,0.35); }
.click-card.disabled{ cursor:not-allowed; opacity:0.55; }
.click-card.disabled:hover{ transform:none; box-shadow:none; border-color:var(--line); }

.card-icon{ width:44px; height:44px; background:var(--blue); color:var(--white); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; transition:transform .18s; }
.click-card:hover .card-icon{ transform:scale(1.08) rotate(-3deg); }
.click-card h3{ margin:0 0 8px; font-size:16px; color:var(--blue-deep); }
.click-card p{ margin:0; color:var(--muted); font-size:14px; flex:1; }
.card-hint{ margin-top:14px; font-size:12px; font-weight:700; color:var(--blue); display:flex; align-items:center; gap:6px; }
.card-hint i{ transition:transform .18s; }
.click-card:hover .card-hint i{ transform:translateX(4px); }

.card-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.badge{ font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.badge-ok{ background:var(--blue-tint); color:var(--blue); border:1px solid var(--blue); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-info{ background:var(--blue-light); color:var(--blue-dark); }
.card-category{ font-size:10.5px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase; color:var(--blue); margin-bottom:6px; }

/* ---------- Category shelves — grid of large cards, scroll sideways ---------- */
.shelf{ margin-bottom:34px; }
.shelf-title{
  font-size:15px; font-weight:800; color:var(--blue-deep); margin:0 0 14px;
  display:flex; align-items:center; gap:8px;
}
.shelf-title i{ color:var(--blue); font-size:13px; }
.shelf-row{
  display:flex; gap:18px; overflow-x:auto; padding:4px 4px 14px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.shelf-row::-webkit-scrollbar{ height:7px; }
.shelf-row::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.shelf-row::-webkit-scrollbar-thumb:hover{ background:var(--blue); }

.shelf-card{
  flex:0 0 190px; scroll-snap-align:start; cursor:pointer;
  border:2px solid var(--line); border-radius:14px; padding:14px;
  background:var(--white); transition:border-color .18s, transform .18s, box-shadow .18s;
  display:flex; flex-direction:column;
}
.shelf-card:hover{ border-color:var(--blue); transform:translateY(-5px); box-shadow:0 14px 28px -16px rgba(37,99,235,0.4); }
.shelf-card.disabled{ cursor:not-allowed; opacity:0.55; }
.shelf-card.disabled:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.shelf-cover{ width:100%; aspect-ratio:1/1; border-radius:10px; object-fit:cover; margin-bottom:12px; background:var(--blue-tint); }
.shelf-card h4{
  margin:0 0 2px; font-size:14.5px; color:var(--blue-deep); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shelf-sub{ margin:0 0 8px; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shelf-card .row-meta{ margin:0 0 8px; }
.row-cat{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--blue); background:var(--blue-tint); padding:2px 8px; border-radius:999px; }
.row-desc{ font-size:13.5px; color:var(--muted); margin:5px 0 0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.row-badges{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }

/* ---------- Rating stars + pricing tag (Play Store style) ---------- */
.row-meta{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.stars{ color:var(--blue); font-size:12px; letter-spacing:2px; }
.rating-num{ font-size:12.5px; font-weight:700; color:var(--muted); }
.price-tag{ font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em; }
.price-free{ background:var(--blue-tint); color:var(--blue); border:1px solid var(--blue); }
.price-demo{ background:var(--blue-light); color:var(--blue-dark); }
.detail-meta{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.detail-meta .stars{ font-size:14px; }

/* ---------- Chips (plugin filter) ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
.chip{
  font-size:13px; font-weight:700; color:var(--blue-deep); background:var(--white);
  border:2px solid var(--line); padding:7px 16px; border-radius:999px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.chip:hover{ transform:translateY(-2px); border-color:var(--blue); }
.chip.active{ background:var(--blue); border-color:var(--blue); color:var(--white); }

/* ---------- Detail page (itch.io style) ---------- */
.back-btn{ margin-bottom:24px; }
.detail-wrap{ display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start; }
.detail-head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.detail-icon{ width:72px; height:72px; border-radius:16px; background:var(--blue); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; box-shadow:0 8px 20px -10px rgba(37,99,235,0.6); overflow:hidden; }
.detail-icon img{ width:100%; height:100%; border-radius:16px; }
.detail-title{ font-size:26px; font-weight:800; color:var(--blue-deep); margin:0 0 4px; }
.detail-file{ font-size:12.5px; color:var(--muted); margin:0; }
.detail-cat{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--blue); background:var(--blue-tint); padding:3px 10px; border-radius:999px; margin-top:6px; }

.gallery{ display:flex; gap:14px; overflow-x:auto; padding:4px 4px 14px; margin:0 0 26px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.gallery::-webkit-scrollbar{ height:6px; }
.gallery::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.gallery img{
  height:280px; width:auto; border-radius:12px; border:2px solid var(--line);
  scroll-snap-align:start; flex-shrink:0; cursor:zoom-in; transition:transform .18s, border-color .18s;
}
.gallery img:hover{ transform:translateY(-4px); border-color:var(--blue); }

.detail-main h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.03em; color:var(--blue); margin:28px 0 12px; }
.detail-main h4:first-child{ margin-top:0; }
.detail-desc{ color:var(--muted); font-size:15px; line-height:1.7; }
.detail-desc p{ margin:0 0 14px; }
.detail-desc p:last-child{ margin-bottom:0; }
.detail-desc h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.03em; color:var(--blue); margin:22px 0 10px; }
.detail-desc ul{ margin:0 0 14px; padding-left:20px; }
.detail-desc ul li{ margin-bottom:8px; }
.detail-desc a{ color:var(--blue); }
.detail-desc code{ background:var(--blue-tint); border:1px solid var(--line); padding:1px 6px; border-radius:4px; font-size:0.92em; }
.detail-desc pre{ background:var(--blue-deep); color:#DCE8FF; font-family:monospace; font-size:13.5px; padding:14px 16px; border-radius:8px; overflow-x:auto; margin:0 0 14px; }
.detail-desc pre code{ background:none; border:none; padding:0; color:inherit; }

.video-embed{ height:280px; width:498px; flex-shrink:0; scroll-snap-align:start; }
.video-embed iframe, .video-embed video{ width:100%; height:100%; border-radius:12px; border:2px solid var(--line); }
.video-link-fallback{
  display:inline-flex; align-items:center; gap:8px; height:60px; padding:0 20px; flex-shrink:0;
  border:2px solid var(--line); border-radius:12px; color:var(--blue); font-weight:700; text-decoration:none;
  scroll-snap-align:start; transition:border-color .15s;
}
.video-link-fallback:hover{ border-color:var(--blue); }

.detail-sidebar{ position:sticky; top:90px; display:flex; flex-direction:column; gap:16px; }
.sidebar-box{ border:2px solid var(--line); border-radius:var(--radius); padding:20px; }
.sidebar-box h5{ margin:0 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--blue); }
.sidebar-fact{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:8px 0; border-bottom:1px dashed var(--line); }
.sidebar-fact:last-child{ border-bottom:none; }
.sidebar-fact span{ color:var(--muted); }
.sidebar-fact b{ color:var(--ink); text-align:right; }
.sidebar-badges{ display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- Shared card bits reused on detail page ---------- */
.modal-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto 8px; display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:var(--white); border:none; padding:16px 18px; font-weight:700; font-size:14.5px; color:var(--blue-deep); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.faq-q i{ color:var(--blue); transition:transform .2s; }
.faq-item.open .faq-q i{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; background:var(--blue-tint); }
.faq-item.open .faq-a{ max-height:260px; }
.faq-a p{ margin:0; padding:0 18px 16px; color:var(--muted); font-size:14px; }

/* ---------- Help search tool ---------- */
.help-tool{ max-width:760px; margin:0 auto 20px; }
.help-tool h3{ margin:0 0 8px; font-size:17px; color:var(--blue-deep); display:flex; align-items:center; gap:9px; }
.help-tool h3 i{ color:var(--blue); }
.help-tool p{ color:var(--muted); margin:0 0 16px; font-size:14px; }
.help-search{ display:flex; gap:10px; flex-wrap:wrap; }
.help-search input{ flex:1; min-width:220px; border:2px solid var(--line); border-radius:7px; padding:11px 12px; font-family:var(--font-body); font-size:14px; }
.help-search input:focus{ outline:none; border-color:var(--blue); }

/* ---------- Support ---------- */
.support-card{ text-align:center; border:2px solid var(--line); border-radius:var(--radius); padding:32px 22px; transition:transform .2s; }
.support-card:hover{ transform:translateY(-4px); }
.support-card i{ font-size:30px; color:var(--blue); margin-bottom:14px; }
.support-card h3{ margin:0 0 8px; color:var(--blue-deep); }
.support-card p{ color:var(--muted); font-size:14px; margin:0 0 18px; }

/* ---------- Contact ---------- */
.contact-wrap{ display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--blue-deep); }
.field input, .field select, .field textarea{ font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink); border:2px solid var(--line); border-radius:7px; padding:11px 12px; background:var(--white); resize:vertical; transition:border-color .15s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); }
.field.invalid input, .field.invalid textarea{ border-color:var(--danger); }
.err{ display:none; color:var(--danger); font-weight:600; font-size:12px; }
.field.invalid .err{ display:block; }
.form-status{ font-size:13px; font-weight:700; min-height:18px; }
.form-status.ok{ color:var(--ok); }

.contact-side{ display:flex; flex-direction:column; gap:14px; }
.contact-info-item{ display:flex; align-items:center; gap:14px; border:2px solid var(--line); border-radius:var(--radius); padding:16px 18px; transition:transform .18s, border-color .18s; }
.contact-info-item:hover{ transform:translateX(4px); border-color:var(--blue); }
.contact-info-item i{ font-size:18px; color:var(--blue); width:22px; text-align:center; }
.contact-info-item span{ display:block; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; }
.contact-info-item b{ display:block; font-size:14px; color:var(--ink); }

/* ---------- Footer ---------- */
.footer{ border-top:2px solid var(--line); padding:22px 24px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; color:var(--muted); }
.footer-dot::before{ content:"● "; color:var(--blue); }
.footer-links{ display:flex; align-items:center; gap:16px; }
.footer-admin-link{ color:var(--muted); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:color .15s; }
.footer-admin-link:hover{ color:var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; }
  .support-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .contact-wrap{ grid-template-columns:1fr; }
  .detail-wrap{ grid-template-columns:1fr; }
  .detail-sidebar{ position:static; }
}
@media (max-width:760px){
  .tab-indicator{ display:none; }
  .tabs{ position:absolute; top:100%; left:0; right:0; background:var(--blue-deep); flex-direction:column; padding:10px 16px 16px; display:none; border-bottom:3px solid var(--blue); }
  .tabs.open{ display:flex; }
  .burger{ display:flex; align-items:center; justify-content:center; }
  .support-grid{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .gallery img{ height:200px; }
  .shelf-card{ flex-basis:150px; }
}