/* ==========================================================================
BiyaGames — main.css
========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--bg-body);
color:var(--text-primary);
font-family:'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
transition:background .25s ease, color .25s ease;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.25; }
p{ margin:0 0 1em; color:var(--text-secondary); }
.biya-muted{ color:var(--text-secondary); }
/* Buttons */
.biya-btn{
display:inline-flex; align-items:center; gap:8px;
padding:12px 22px; border-radius:8px; font-weight:600; font-size:14px;
transition:.2s ease; border:1px solid transparent;
}
.biya-btn-accent{ background:var(--biya-accent); color:#fff; }
.biya-btn-accent:hover{ background:var(--biya-accent-hover); transform:translateY(-1px); }
.biya-btn-outline{ border-color:var(--border-color); color:var(--text-primary); background:rgba(255,255,255,.03); }
.biya-btn-outline:hover{ background:rgba(255,255,255,.08); }
.biya-btn-sm{ padding:8px 14px; font-size:13px; margin-bottom:14px; }
.biya-btn-block{ width:100%; justify-content:center; margin-top:16px; }
.biya-btn-block small{ display:block; font-weight:400; font-size:11px; opacity:.85; }
/* ==========================================================================
HEADER
========================================================================== */
.biya-header{
position:sticky; top:0; z-index:200;
background:var(--bg-surface);
border-bottom:1px solid var(--border-color);
}
.biya-header-inner{
max-width:1400px; margin:0 auto; padding:14px 24px;
display:flex; align-items:center; gap:24px;
}
.biya-logo-text{ font-size:20px; font-weight:800; letter-spacing:.5px; }
.biya-logo-text::first-letter{ color:var(--biya-text-accent); }
.biya-logo-img{ display:block; width:auto; }
.biya-logo-img-header{ height:var(--biya-logo-header-size, 34px); }
.biya-logo-img-footer{ height:var(--biya-logo-footer-size, 32px); }
.biya-logo-img-light{ display:none; }
html[data-theme="light"] .biya-logo-img-dark{ display:none; }
html[data-theme="light"] .biya-logo-img-light{ display:block; }
.biya-primary-nav{ flex:1; overflow-x:auto; scrollbar-width:none; display:flex; justify-content:center; }
.biya-primary-nav::-webkit-scrollbar{ display:none; }
.biya-nav-list{ display:flex; gap:28px; flex-wrap:nowrap; white-space:nowrap; }
.biya-nav-list a{
font-size:13px; font-weight:700; letter-spacing:.5px;
color:var(--text-secondary); transition:.2s;
}
.biya-nav-list a:hover, .biya-nav-list li.current-menu-item a{ color:var(--biya-text-accent); }
/* Categories dropdown */
.biya-nav-has-dropdown{ position:relative; }
.biya-nav-dropdown-toggle{
font-size:13px; font-weight:700; letter-spacing:.5px; color:var(--text-secondary);
display:flex; align-items:center; gap:6px; transition:.2s;
}
.biya-nav-dropdown-toggle i{ font-size:10px; transition:.2s; }
.biya-nav-has-dropdown:hover .biya-nav-dropdown-toggle{ color:var(--biya-text-accent); }
.biya-nav-has-dropdown:hover .biya-nav-dropdown-toggle i{ transform:rotate(180deg); }
.biya-nav-dropdown{
position:absolute; top:calc(100% + 14px); left:0; min-width:200px;
background:var(--bg-surface); border:1px solid var(--border-color); border-radius:10px;
padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
transition:.2s ease; box-shadow:0 12px 30px var(--shadow-color); z-index:50;
display:flex; flex-direction:column; max-height:340px; overflow-y:auto;
}
.biya-nav-has-dropdown:hover .biya-nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.biya-nav-dropdown a{
padding:9px 12px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text-secondary);
}
.biya-nav-dropdown a:hover{ background:var(--bg-surface-2); color:var(--biya-text-accent); }
.biya-nav-dropdown-empty{ padding:9px 12px; font-size:12px; color:var(--text-muted); }
.biya-header-actions{ display:flex; align-items:center; gap:10px; }
.biya-icon-btn{
width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center;
background:var(--bg-surface-2); color:var(--text-primary); font-size:15px; position:relative;
}
.biya-icon-btn:hover{ background:var(--biya-primary-light); color:#fff; }
.biya-icon-sun, .biya-icon-moon{ display:inline-block; }
.biya-icon-moon{ display:none !important; }
html[data-theme="light"] .biya-icon-sun{ display:none !important; }
html[data-theme="light"] .biya-icon-moon{ display:inline-block !important; }
.biya-mobile-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:22px; height:22px; flex-shrink:0; }
.biya-mobile-toggle span{ display:block; width:100%; height:2px; background:var(--text-primary); border-radius:2px; flex-shrink:0; }
/* Search overlay */
.biya-search-overlay{
position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
display:none; align-items:flex-start; justify-content:center; z-index:300; padding-top:80px;
}
.biya-search-overlay.is-active{ display:flex; }
.biya-search-box{ width:100%; max-width:600px; background:var(--bg-surface); border-radius:16px; padding:0; position:relative; overflow:hidden; margin:0 16px; }
.biya-search-input-row{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border-color); }
.biya-search-input-row > i{ color:var(--text-muted); font-size:15px; }
.biya-search-input-row input{
flex:1; border:none; background:transparent; color:var(--text-primary); font-size:15px; padding:0;
}
.biya-search-input-row input:focus{ outline:none; }
.biya-search-input-row input::placeholder{ color:var(--text-muted); }
#biyaSearchClear{ font-size:14px; color:var(--text-muted); display:flex; align-items:center; }
#biyaSearchClear:hover{ color:var(--text-primary); }
.biya-search-esc{
font-size:10px; font-weight:700; color:var(--text-muted); border:1px solid var(--border-color);
padding:4px 8px; border-radius:6px; cursor:pointer; flex-shrink:0;
}
.biya-search-esc:hover{ border-color:var(--biya-text-accent); color:var(--biya-text-accent); }
.biya-search-popular{ padding:18px 20px; }
.biya-search-popular-label{
display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.5px;
color:#7c5cff; margin-bottom:14px;
}
.biya-search-popular-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.biya-search-pill{
background:var(--bg-surface-2); border:1px solid var(--border-color); border-radius:20px;
padding:9px 16px; font-size:13px; color:var(--text-secondary);
}
.biya-search-pill:hover{ border-color:var(--biya-text-accent); color:var(--text-primary); }
.biya-search-results{ max-height:60vh; overflow-y:auto; padding:8px; }
.biya-search-result-item{ display:flex; gap:12px; align-items:center; padding:10px; border-radius:8px; }
.biya-search-result-item:hover{ background:var(--bg-surface-2); }
.biya-search-result-item img{ width:44px; height:44px; object-fit:cover; border-radius:6px; }
.biya-mobile-nav-panel{ display:none; }
/* Discord header button */
.biya-discord-btn{
display:inline-flex; align-items:center; gap:8px; background:#5865F2; color:#fff;
padding:9px 18px; border-radius:20px; font-size:13px; font-weight:700; transition:.2s ease;
}
.biya-discord-btn:hover{ background:#4752c4; }
/* ==========================================================================
HERO
========================================================================== */
.biya-hero-section{
max-width:1400px; margin:24px auto; padding:0 24px;
}
.biya-hero-slider{ position:relative; border-radius:16px; overflow:hidden; min-height:420px; background:var(--bg-surface); margin:0 auto; }
.biya-hero-slide{
display:none; position:relative; min-height:420px;
background-size:cover; background-position:center top;
padding:32px; align-items:flex-end;
}
.biya-hero-slide.is-active{ display:flex; }
.biya-hero-overlay{ position:absolute; inset:0; background:var(--overlay-gradient); }
.biya-hero-content{ position:relative; z-index:2; max-width:520px; }
.biya-hero-tag{
display:inline-flex; align-items:center; gap:6px; background:rgba(255,106,0,.15); color:var(--biya-text-accent);
padding:6px 12px; border-radius:20px; font-size:12px; font-weight:700; margin-bottom:14px;
}
.biya-hero-content h1{ font-size:38px; font-weight:800; margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.biya-hero-logo{ max-height:120px; max-width:100%; margin-bottom:14px; filter:drop-shadow(0 4px 16px rgba(0,0,0,.6)); }
.biya-hero-content p{ color:#e8e2de; font-size:14px; margin-bottom:18px; }
.biya-hero-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.biya-hero-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:3; }
.biya-hero-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; }
.biya-hero-dots span.is-active{ background:var(--biya-text-accent); width:18px; border-radius:4px; }
.biya-social-btn{
width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
background:var(--bg-surface-2); font-size:15px;
}
.biya-social-btn:hover{ background:var(--biya-accent); color:#fff; }
/* ==========================================================================
RECENT SECTION / TABS / GRID
========================================================================== */
.biya-recent-section{ max-width:1400px; margin:0 auto 60px; padding:0 24px; }
.biya-section-head{ display:flex; align-items:center; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.biya-section-head h2{ font-size:14px; letter-spacing:1px; color:var(--text-muted); font-weight:700; }
.biya-tabs{ display:flex; gap:8px; background:transparent; padding:0; border-radius:0; flex-wrap:wrap; }
.biya-tab{ padding:9px 20px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--text-secondary); background:var(--bg-surface); border:1px solid var(--border-color); transition:.2s; }
.biya-tab:hover{ border-color:var(--biya-text-accent); color:var(--text-primary); }
.biya-tab.is-active{ background:var(--biya-accent); color:#fff; border-color:var(--biya-text-accent); }
.biya-view-all{ margin-left:auto; font-size:12px; font-weight:700; color:var(--biya-text-accent); }
.biya-tab-panel{ display:none; }
.biya-tab-panel.is-active{ display:block; }
.biya-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.biya-grid-related{ grid-template-columns:repeat(6, 1fr); }
.biya-card{ display:block; border-radius:12px; overflow:hidden; background:var(--bg-card); border:1px solid var(--border-color); transition:.25s ease; }
.biya-card:hover{
transform:translateY(-4px);
border-color:var(--biya-text-accent);
box-shadow:0 12px 32px rgba(255,106,0,.25), 0 0 0 1px rgba(255,106,0,.15);
}
.biya-card-thumb{ aspect-ratio:3/4; position:relative; overflow:hidden; background:var(--bg-surface-2); }
.biya-card-img{
width:100%; height:100%; object-fit:cover; display:block;
filter:brightness(.82) saturate(.9); transition:filter .25s ease;
}
.biya-card:hover .biya-card-img{ filter:brightness(1) saturate(1.05); }
.biya-card-badge{
position:absolute; top:8px; left:8px; background:rgba(0,0,0,.65); color:#fff;
font-size:10px; font-weight:700; padding:4px 8px; border-radius:6px; display:flex; align-items:center; gap:4px;
transition:.25s ease;
}
.biya-card-badge--downloads{ background:var(--biya-accent); opacity:0; visibility:hidden; position:absolute; top:8px; left:8px; }
.biya-card-badge--size{ opacity:1; visibility:visible; }
.biya-card:hover .biya-card-badge--size{ opacity:0; visibility:hidden; }
.biya-card:hover .biya-card-badge--downloads{ opacity:1; visibility:visible; }
.biya-card:hover .biya-card-badge{ background:linear-gradient(90deg, var(--biya-accent), #ff9a3d); color:#fff; }
.biya-card-footer{ display:flex; align-items:center; justify-content:space-between; padding:10px; }
.biya-card-title{ font-size:12px; font-weight:700; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s ease; }
.biya-card:hover .biya-card-title{ color:var(--biya-text-accent); }
.biya-card-arrow{
color:var(--text-muted); font-size:11px; flex-shrink:0; margin-left:6px;
width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--bg-surface-2); transition:.25s ease;
}
.biya-card:hover .biya-card-arrow{ background:var(--biya-accent); color:#fff; transform:translateX(2px); }
.biya-empty{ padding:40px; text-align:center; color:var(--text-muted); }
/* ==========================================================================
SINGLE PAGE
========================================================================== */
.biya-single-hero{ position:relative; background-size:cover; background-position:center top; padding:100px 0 40px; overflow:hidden; }
.biya-single-hero-overlay{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 60%, var(--bg-body) 100%);
backdrop-filter:blur(1px);
}
.biya-single-main{ position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:0 24px; }
/* The hero background is always a dark photo overlay, so text here must
always stay light — regardless of whether the site is in light or dark mode.
NOTE: only target specific text elements, never the .biya-single-hero
container itself, or the color would inherit into the infobox card below
(which has its own themed background and must follow the site's theme). */
.biya-single-hero h1,
.biya-single-hero .biya-meta-bar span,
.biya-single-hero .biya-single-excerpt,
.biya-single-hero .biya-note-bar,
.biya-single-hero .biya-single-row strong,
.biya-single-hero .biya-tag,
.biya-single-hero .biya-genre-pill,
.biya-single-hero .biya-social-btn-row a{
color:#f0f3f7;
}
.biya-single-hero .biya-meta-bar span:not(:last-child)::after{ background:#f0f3f7; opacity:.5; }
.biya-single-hero .biya-pill{ color:#f0f3f7; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); }
.biya-single-hero .biya-pill-version{ color:#6fdc7c !important; }
.biya-single-hero .biya-pill-latest{ color:#6fdc7c !important; }
.biya-single-hero .biya-pill-category{ color:var(--biya-text-accent) !important; }
.biya-single-hero .biya-social-btn-row a{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); }
.biya-single-hero .biya-social-discord:hover{ background:#5865F2 !important; border-color:#5865F2 !important; color:#fff !important; }
.biya-single-hero .biya-social-youtube:hover{ background:#FF0000 !important; border-color:#FF0000 !important; color:#fff !important; }
.biya-single-hero .biya-social-steam:hover{ background:#171a21 !important; border-color:#2a475e !important; color:#66c0f4 !important; }
/* Infobox always sits on its own themed card background — always follow the theme */
.biya-single-infobox,
.biya-single-infobox ul li b{
color:var(--text-primary);
}
.biya-single-body-main{ max-width:1400px; margin:0 auto 60px; padding:0 24px; }
.biya-single-top{ display:grid; grid-template-columns:200px 1fr 320px; gap:24px; margin-bottom:32px; }
.biya-single-poster img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:14px; border:1px solid var(--border-color); box-shadow:0 10px 30px var(--shadow-color); }
.biya-single-headinfo{ padding-top:8px; }
.biya-single-eyebrow{ font-size:12px; font-weight:700; color:var(--biya-text-accent); letter-spacing:1px; }
.biya-single-headinfo h1{ font-size:28px; margin:6px 0 12px; }
.biya-single-excerpt{ font-size:14px; }
.biya-single-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; font-size:12px; }
.biya-single-row strong{ color:var(--text-muted); font-size:11px; letter-spacing:.5px; }
.biya-tag{ background:var(--bg-surface-2); padding:5px 10px; border-radius:6px; font-size:11px; font-weight:600; }
.biya-tag-link:hover{ background:var(--biya-accent); color:#fff; }
.biya-single-infobox{ background:var(--bg-surface); border:1px solid var(--border-color); border-radius:14px; padding:18px; height:fit-content; }
.biya-single-infobox ul li{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border-color); font-size:12px; }
.biya-single-infobox ul li span{ color:var(--text-muted); }
.biya-single-body{ display:grid; grid-template-columns:1fr 300px; gap:24px; }
.biya-box{ background:var(--bg-surface); border:1px solid var(--border-color); border-radius:14px; padding:22px; margin-bottom:20px; }
.biya-box h3{ font-size:16px; display:flex; align-items:center; gap:8px; }
.biya-single-description{ font-size:14px; line-height:1.8; color:var(--text-secondary); }
.biya-req-list li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--border-color); font-size:12px; }
.biya-req-list li span{ color:var(--text-muted); font-weight:600; }
/* Reviews */
.biya-review-count{ color:var(--text-muted); font-weight:400; font-size:13px; }
.biya-rating-summary{ display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid var(--border-color); margin-bottom:16px; flex-wrap:wrap; }
.biya-rating-num{ font-size:32px; font-weight:800; }
.biya-rating-num i{ color:#f5b400; font-size:24px; margin-right:6px; }
.biya-rating-stars i{ color:var(--text-muted); font-size:14px; margin-right:2px; }
.biya-rating-stars i.is-filled{ color:#f5b400; }
.biya-rating-text{ color:var(--text-muted); font-size:13px; }
.biya-review-item{ border-bottom:1px solid var(--border-color); padding:14px 0; }
.biya-review-item-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.biya-review-item-stars i{ font-size:12px; color:var(--text-muted); }
.biya-review-item-stars i.is-filled{ color:#f5b400; }
.biya-review-form-wrap{ margin-top:20px; }
.biya-review-form-wrap h4{ font-size:15px; }
.biya-star-input{ margin:8px 0 16px; font-size:22px; }
.biya-star-input i{ color:var(--text-muted); cursor:pointer; margin-right:4px; transition:.15s; }
.biya-star-input i.is-active{ color:#f5b400; }
form label{ display:block; font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
form input[type="text"], form input[type="email"], form input[type="url"], form textarea{
width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--border-color);
background:var(--bg-surface-2); color:var(--text-primary); margin-bottom:16px; font-size:14px; resize:vertical;
}
form input:focus, form textarea:focus, form select:focus{ outline:none; border-color:var(--biya-text-accent); }
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 1000px var(--bg-surface-2) inset !important;
-webkit-text-fill-color:var(--text-primary) !important;
caret-color:var(--text-primary);
}
.biya-form-msg{ margin-top:10px; font-size:13px; }
.biya-form-msg.is-success{ color:#4caf50; }
.biya-form-msg.is-error{ color:#e5484d; }
/* Trending / Recent Updates strip sections */
.biya-main-no-hero{ padding-top:28px; }
.biya-strip-section{ max-width:1400px; margin:0 auto 50px; padding:0 24px; }
.biya-strip-section:first-of-type{ margin-top:8px; }
.biya-strip-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.biya-strip-head h2{ font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; }
.biya-strip-head h2 i{ color:var(--biya-text-accent); font-size:14px; }
.biya-strip-section .biya-grid{ grid-template-columns:repeat(7, 1fr); }
/* Daily Featured Pick */
.biya-daily-pick-section{ max-width:1400px; margin:0 auto 60px; padding:0 24px; }
.biya-daily-pick-card{
position:relative; border-radius:18px; overflow:hidden; background-size:cover; background-position:center;
border:1px solid var(--border-color);
}
.biya-daily-pick-overlay{
position:absolute; inset:0;
background:linear-gradient(90deg, rgba(5,6,10,.97) 0%, rgba(5,6,10,.9) 45%, rgba(5,6,10,.55) 100%);
backdrop-filter:blur(2px);
}
.biya-daily-pick-inner{ position:relative; z-index:2; display:flex; gap:28px; padding:28px; }
.biya-daily-pick-thumb{
width:180px; min-width:180px; aspect-ratio:3/4; border-radius:12px; background-size:cover; background-position:center;
box-shadow:0 12px 30px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1);
}
.biya-daily-pick-body{ display:flex; flex-direction:column; gap:10px; padding:4px 0; max-width:700px; }
.biya-daily-pick-badge{
display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
background:linear-gradient(90deg, var(--biya-text-accent), #ff8a3d); color:#fff;
padding:6px 14px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.5px;
}
.biya-daily-pick-body h3{ font-size:24px; line-height:1.3; margin:2px 0 0; }
.biya-daily-pick-body h3 a:hover{ color:var(--biya-text-accent); }
.biya-daily-pick-metarow{ display:flex; gap:16px; font-size:13px; color:var(--text-secondary); }
.biya-daily-pick-metarow span{ display:flex; align-items:center; gap:6px; }
.biya-daily-pick-body p{ font-size:14px; margin:2px 0; }
.biya-daily-pick-genres{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; }
.biya-daily-pick-genres-label{ color:var(--text-muted); font-weight:600; display:flex; align-items:center; gap:4px; }
.biya-daily-pick-genres-label i{ font-size:10px; }
.biya-daily-pick-btn{
display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:8px;
background:linear-gradient(90deg, #7c5cff, #9a80ff); color:#fff; padding:12px 22px; border-radius:10px;
font-weight:700; font-size:14px; transition:.2s ease;
}
.biya-daily-pick-btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.biya-daily-pick-btn small{ display:block; font-weight:400; font-size:11px; opacity:.85; }
/* Meta bar (Platform | RAM | Year | Developer | Published ... | Version) */
.biya-meta-bar{
display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); margin-bottom:14px;
}
.biya-meta-bar span{ position:relative; padding-right:14px; }
.biya-meta-bar span:not(:last-child)::after{
content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
width:4px; height:4px; border-radius:50%; background:var(--text-muted);
}
/* Badge / pill row (version, latest, favorite, report, like, dislike) */
.biya-badge-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.biya-pill{
display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px;
font-size:12px; font-weight:600; border:1px solid var(--border-color); background:var(--bg-surface-2); color:var(--text-secondary);
transition:.2s ease;
}
.biya-pill-version{ background:rgba(76,175,80,.12); border-color:rgba(76,175,80,.35); color:#4caf50; font-weight:700; }
.biya-pill-latest{ color:#4caf50; }
.biya-pill-latest i{ font-size:7px; }
.biya-pill-category{ background:rgba(255,106,0,.1); border-color:rgba(255,106,0,.3); color:var(--biya-text-accent); font-weight:700; }
.biya-pill-category:hover{ background:rgba(255,106,0,.2); }
.biya-pill-favorite:hover, .biya-pill-favorite.is-active{ border-color:#ff5c8a; color:#ff5c8a; background:rgba(255,92,138,.1); }
.biya-pill-report:hover{ border-color:var(--biya-text-accent); color:var(--biya-text-accent); }
.biya-pill-vote{ cursor:pointer; }
.biya-pill-vote:hover{ border-color:var(--biya-text-accent); color:var(--biya-text-accent); }
/* Genre pills (outlined, colored per-category) */
.biya-genre-pill{
display:inline-block; padding:6px 12px; border-radius:6px; border:1px solid; font-size:12px; font-weight:700;
background:transparent; transition:.2s ease;
}
.biya-genre-pill:hover{ filter:brightness(1.3); }
/* Reply system */
.biya-reply-toggle{
font-size:12px; font-weight:700; color:var(--biya-text-accent); margin-top:6px; display:inline-block;
}
.biya-reply-toggle:hover{ text-decoration:underline; }
.biya-delete-review-btn{
font-size:12px; font-weight:700; color:#ff5c5c; margin-top:6px; margin-left:14px; display:inline-flex; align-items:center; gap:5px;
}
.biya-delete-review-btn:hover{ text-decoration:underline; }
.biya-review-date{ font-size:11px; color:var(--text-muted); margin-left:8px; }
.biya-reply-list{ margin:10px 0 4px 20px; padding-left:14px; border-left:2px solid var(--border-color); display:flex; flex-direction:column; gap:10px; }
.biya-reply-item p{ margin:2px 0 0; font-size:13px; }
.biya-reply-form{
display:none; flex-direction:column; gap:8px; margin:10px 0 4px 20px; padding:12px; background:var(--bg-surface-2);
border-radius:8px; max-width:420px;
}
.biya-reply-form input, .biya-reply-form textarea{
padding:8px 10px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-surface); color:var(--text-primary); font-size:13px;
}
.biya-btn-review-submit{ background:#4caf50; color:#fff; }
.biya-btn-review-submit:hover{ background:#5cc760; }
.biya-btn-report-submit{ background:var(--biya-accent); color:#fff; }
.biya-btn-report-submit:hover{ background:var(--biya-accent-hover); }
/* Form selects (Report popup dropdowns) */
form select{
width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--border-color);
background:var(--bg-surface-2); color:var(--text-primary); margin-bottom:16px; font-size:14px;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center; background-size:14px;
}
form select:focus{ outline:none; border-color:var(--biya-text-accent); }
/* Report modal specific icon color */
.biya-report-icon{ background:var(--biya-text-accent); }
.biya-social-btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.biya-social-btn-row .biya-btn-sm{ margin-bottom:0; }
.biya-social-discord:hover{ background:#5865F2; border-color:#5865F2; color:#fff; }
.biya-social-youtube:hover{ background:#FF0000; border-color:#FF0000; color:#fff; }
.biya-social-steam:hover{ background:#171a21; border-color:#2a475e; color:#66c0f4; }
.biya-comingsoon-tag{
display:inline-block; background:rgba(255,106,0,.15); color:var(--biya-text-accent); font-size:9px; font-weight:800;
padding:2px 6px; border-radius:8px; margin-left:6px; letter-spacing:.3px; vertical-align:middle;
}
.biya-note-bar{
border-left:3px solid var(--biya-accent); background:rgba(255,106,0,.08); color:var(--text-secondary);
padding:12px 16px; border-radius:0 8px 8px 0; font-size:13px; margin-bottom:14px;
}
.biya-accent-text{ color:var(--biya-text-accent) !important; }
.biya-success-text{ color:#4caf50 !important; }
.biya-warning-text{ color:#f5a623 !important; }
/* Download modal (Select Download Server popup) */
.biya-download-modal-overlay{
position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
display:none; align-items:center; justify-content:center; z-index:500; padding:20px;
}
.biya-download-modal-overlay.is-active{ display:flex; }
.biya-download-modal{
width:100%; max-width:460px; background:var(--bg-surface); border:1px solid var(--border-color);
border-radius:16px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.biya-download-modal-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.biya-download-modal-icon{
width:42px; height:42px; border-radius:10px; background:var(--biya-accent); color:#fff;
display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
}
.biya-download-modal-head h4{ font-size:15px; margin-bottom:2px; }
.biya-download-modal-head span{ font-size:12px; color:var(--text-muted); }
.biya-download-modal-close{ margin-left:auto; font-size:16px; color:var(--text-muted); }
.biya-download-modal-close:hover{ color:var(--text-primary); }
.biya-download-modal-notice{
background:rgba(255,106,0,.08); border:1px solid rgba(255,106,0,.2); color:var(--text-secondary);
font-size:12px; padding:10px 12px; border-radius:8px; margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.biya-download-modal-notice i{ color:var(--biya-text-accent); }
.biya-download-modal-section-label{
font-size:11px; font-weight:700; letter-spacing:.6px; color:var(--text-muted); margin:14px 0 8px; display:flex; align-items:center; gap:6px;
}
.biya-server-row{
display:flex; align-items:center; justify-content:space-between; gap:12px;
background:var(--bg-surface-2); border:1px solid var(--border-color); border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.biya-server-row-warning{ background:rgba(245,166,35,.06); border-color:rgba(245,166,35,.25); }
.biya-server-name{ font-size:13px; font-weight:600; display:flex; flex-direction:column; gap:2px; }
.biya-server-name small{ font-weight:400; color:var(--text-muted); font-size:11px; }
.biya-server-btn{ padding:9px 16px; font-size:12px; white-space:nowrap; }
.biya-server-btn.is-first-click{ background:#4caf50; }
.biya-server-btn.is-first-click:hover{ background:#5cc760; }
/* Archive / page */
.biya-archive-main{ max-width:1400px; margin:32px auto 60px; padding:0 24px; }
.biya-page-head{ margin-bottom:24px; }
.biya-page-head h1{ font-size:26px; }
.biya-pagination{ margin-top:30px; display:flex; justify-content:center; gap:8px; }
.biya-pagination .page-numbers{ padding:8px 14px; border-radius:8px; background:var(--bg-surface); font-size:13px; }
.biya-pagination .page-numbers.current{ background:var(--biya-accent); color:#fff; }
.biya-request-box{ max-width:560px; }
.biya-blog-item h2{ font-size:18px; margin-bottom:8px; }
/* ==========================================================================
FOOTER
========================================================================== */
.biya-footer{ background:var(--bg-surface); border-top:1px solid var(--border-color); margin-top:20px; }
.biya-footer-inner{
max-width:1400px; margin:0 auto; padding:48px 24px 28px;
display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:32px;
}
.biya-footer-col h4{ font-size:13px; letter-spacing:.5px; color:var(--text-primary); margin-bottom:14px; }
.biya-footer-col ul li{ margin-bottom:10px; }
.biya-footer-col ul li a{ font-size:13px; color:var(--text-secondary); }
.biya-footer-col ul li a:hover{ color:var(--biya-text-accent); }
.biya-footer-brand p{ font-size:13px; margin-top:12px; }
.biya-footer-socials{ display:flex; gap:8px; flex-wrap:wrap; }
.biya-footer-bottom{
max-width:1400px; margin:0 auto; padding:18px 24px; border-top:1px solid var(--border-color);
display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); flex-wrap:wrap; gap:8px;
}
.biya-footer-bottom span:last-child{ color:var(--biya-text-accent); font-weight:600; }
/* ==========================================================================
RESPONSIVE — MOBILE OPTIMIZED
========================================================================== */
@media (max-width: 1100px){
.biya-grid, .biya-grid-related{ grid-template-columns:repeat(4, 1fr); }
.biya-strip-section .biya-grid{ grid-template-columns:repeat(4, 1fr); }
.biya-single-top{ grid-template-columns:1fr; }
.biya-single-poster{ width:140px; margin:0 auto; }
.biya-single-body{ grid-template-columns:1fr; }
}
@media (max-width: 780px){
.biya-header-inner{ padding:12px 16px; gap:12px; }
.biya-mobile-toggle{ display:flex; order:1; }
.biya-logo{ order:2; }
.biya-header-actions{ order:3; margin-left:auto; }
.biya-primary-nav{ display:none; }
.biya-mobile-nav-panel{
position:fixed; top:0; right:-320px; width:300px; max-width:85vw; height:100vh; background:var(--bg-surface);
z-index:400; padding:80px 16px 20px; transition:right .28s ease; overflow-y:auto;
border-left:1px solid var(--border-color); display:flex; flex-direction:column; gap:8px;
}
.biya-mobile-nav-panel.is-open{ right:0; }
.biya-mobile-nav-item{
display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px; transition:.2s ease;
}
.biya-mobile-nav-item:hover{ background:var(--bg-surface-2); }
.biya-mobile-nav-icon{
width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:15px; flex-shrink:0;
}
.biya-mobile-nav-label{ flex:1; font-size:15px; font-weight:600; }
.biya-mobile-nav-arrow{ font-size:12px; color:var(--text-muted); }
.biya-mobile-nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:350; }
.biya-mobile-nav-backdrop.is-active{ display:block; }
.biya-hero-section{ margin:14px auto; padding:0 14px; gap:14px; }
.biya-hero-slide{ min-height:340px; padding:20px; }
.biya-hero-content h1{ font-size:24px; }
.biya-recent-section{ padding:0 14px; }
.biya-section-head{ gap:10px; }
.biya-grid, .biya-grid-related{ grid-template-columns:repeat(3, 1fr); gap:10px; }
.biya-strip-section .biya-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; }
.biya-card-title{ font-size:10px; }
.biya-strip-section, .biya-daily-pick-section{ padding:0 14px; margin-bottom:36px; }
.biya-daily-pick-inner{ flex-direction:column; padding:20px; gap:18px; }
.biya-daily-pick-thumb{ width:140px; min-width:140px; margin:0 auto; }
.biya-daily-pick-body{ align-items:center; text-align:center; max-width:100%; }
.biya-daily-pick-badge, .biya-daily-pick-btn{ align-self:center; }
.biya-daily-pick-metarow, .biya-daily-pick-genres{ justify-content:center; }
.biya-single-hero{ padding:80px 0 24px; }
.biya-single-main, .biya-single-body-main{ padding:0 14px; }
.biya-single-poster{ width:110px; margin:0 auto; }
.biya-single-headinfo h1{ font-size:20px; }
.biya-single-infobox{ grid-column:1/-1; }
.biya-box{ padding:16px; }
.biya-footer-inner{ grid-template-columns:repeat(2, 1fr); gap:24px; padding:32px 16px; }
.biya-footer-bottom{ flex-direction:column; text-align:center; padding:16px; }
}
@media (max-width: 460px){
.biya-grid, .biya-grid-related{ grid-template-columns:repeat(2, 1fr); }
.biya-strip-section .biya-grid{ grid-template-columns:repeat(2, 1fr); }
.biya-hero-content h1{ font-size:20px; }
.biya-hero-content p{ font-size:12px; }
.biya-search-box{ margin:0 12px; }
.biya-footer-inner{ grid-template-columns:1fr; }
.biya-single-top{ text-align:left; }
}
/* ==========================================================================
CATEGORY PAGE (PC Games / Adult Games listing)
========================================================================== */
.biya-cat-main{ max-width:1400px; margin:28px auto 60px; padding:0 24px; }
.biya-breadcrumb{ font-size:13px; color:var(--text-muted); margin-bottom:20px; }
.biya-breadcrumb a{ color:var(--text-secondary); }
.biya-breadcrumb a:hover{ color:var(--biya-text-accent); }
.biya-breadcrumb span{ margin:0 6px; }
.biya-cat-head{ text-align:center; margin-bottom:24px; }
.biya-cat-head h1{ font-size:32px; font-weight:800; }
.biya-cat-head p{ color:var(--text-secondary); font-size:14px; }
.biya-cat-about{
max-width:800px; margin:0 auto 24px; background:var(--bg-surface); border:1px solid var(--border-color);
border-radius:12px; overflow:hidden;
}
.biya-cat-about-toggle{
width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
font-weight:700; font-size:14px;
}
.biya-cat-about-toggle i:last-child{ transition:.2s ease; font-size:12px; color:var(--text-muted); }
.biya-cat-about.is-open .biya-cat-about-toggle i:last-child{ transform:rotate(180deg); }
.biya-cat-about-body{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 18px; }
.biya-cat-about.is-open .biya-cat-about-body{ max-height:400px; padding-bottom:16px; }
.biya-cat-about-body p{ font-size:13px; color:var(--text-secondary); }
.biya-cat-search{ max-width:640px; margin:0 auto 20px; position:relative; }
.biya-cat-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.biya-cat-search input{
width:100%; padding:13px 16px 13px 42px; border-radius:10px; border:1px solid var(--border-color);
background:var(--bg-surface); color:var(--text-primary); font-size:14px;
}
.biya-cat-search input:focus{ outline:none; border-color:var(--biya-text-accent); }
.biya-cat-sort-tabs{ display:flex; justify-content:center; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.biya-cat-sort-tab{ padding:9px 20px; border-radius:20px; font-size:13px; font-weight:700; background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-secondary); }
.biya-cat-sort-tab:hover{ border-color:var(--biya-text-accent); }
.biya-cat-sort-tab.is-active{ background:var(--biya-accent); color:#fff; border-color:var(--biya-text-accent); }
.biya-cat-letters-wrap{ text-align:center; margin-bottom:22px; }
.biya-cat-letters-label{ display:block; font-size:11px; letter-spacing:1px; color:var(--text-muted); margin-bottom:10px; font-weight:700; }
.biya-cat-letters{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.biya-letter-btn{
min-width:32px; height:32px; padding:0 8px; border-radius:8px; background:var(--bg-surface); border:1px solid var(--border-color);
color:var(--text-secondary); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.biya-letter-btn:hover{ border-color:var(--biya-text-accent); color:var(--text-primary); }
.biya-letter-btn.is-active{ background:var(--biya-accent); color:#fff; border-color:var(--biya-text-accent); }
.biya-cat-random-wrap{ text-align:center; margin-bottom:34px; }
.biya-random-btn{
display:inline-flex; align-items:center; gap:10px; background:linear-gradient(90deg, var(--biya-accent), #ff8a3d);
color:#fff; padding:12px 26px; border-radius:24px; font-weight:700; font-size:14px;
}
.biya-random-btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.biya-cat-results-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.biya-cat-results-head span{ font-size:13px; color:var(--text-muted); }
.biya-cat-sort-select{
padding:8px 30px 8px 12px; border-radius:8px; border:1px solid var(--border-color);
background:var(--bg-surface); color:var(--text-primary); font-size:13px;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
}
@media (max-width: 640px){
.biya-cat-head h1{ font-size:24px; }
.biya-cat-letters{ gap:4px; }
.biya-letter-btn{ min-width:28px; height:28px; font-size:11px; }
}
/* ==========================================================================
TOP GAMES LEADERBOARD
========================================================================== */
.biya-top-main{ max-width:1200px; margin:28px auto 60px; padding:0 24px; }
.biya-top-head{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:24px; }
.biya-top-badge{
display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.5px;
color:var(--biya-text-accent); margin-bottom:10px;
}
.biya-top-head h1{ font-size:26px; font-weight:800; margin-bottom:4px; }
.biya-top-head p{ font-size:13px; color:var(--text-secondary); }
.biya-top-stats{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.biya-top-stat{
background:var(--bg-surface); border:1px solid var(--border-color); border-radius:10px; padding:10px 18px;
text-align:center; min-width:100px;
}
.biya-top-stat strong{ display:block; font-size:18px; font-weight:800; }
.biya-top-stat span{ font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.biya-top-stat-badge{
background:linear-gradient(90deg, var(--biya-accent), #ff8a3d); color:#fff; display:flex; align-items:center; gap:6px;
font-weight:700; font-size:13px; border:none;
}
.biya-top-featured{
position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,106,0,.35);
background-size:cover; background-position:center; margin-bottom:28px;
}
.biya-top-featured-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,6,10,.96) 0%, rgba(5,6,10,.85) 60%, rgba(5,6,10,.4) 100%); backdrop-filter:blur(2px); }
.biya-top-featured-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; }
.biya-top-featured-badges{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.biya-top-rank-badge{ background:var(--biya-text-accent); color:#fff; font-size:10px; font-weight:800; padding:5px 10px; border-radius:6px; }
.biya-top-of-badge{ background:var(--bg-surface-2); color:var(--text-secondary); font-size:10px; font-weight:700; padding:5px 10px; border-radius:6px; }
.biya-top-featured-body h2{ font-size:24px; margin-bottom:10px; }
.biya-top-featured-body h2 a:hover{ color:var(--biya-text-accent); }
.biya-top-featured-meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--text-secondary); margin-bottom:16px; }
.biya-top-featured-meta span{ display:flex; align-items:center; gap:6px; }
.biya-top-featured-thumb img{ width:120px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.biya-top-roster-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.biya-top-roster-head strong{ font-size:14px; margin-right:10px; }
.biya-top-roster-head > div:first-child span{ font-size:12px; color:var(--text-muted); }
.biya-top-view-toggle{ display:flex; gap:8px; background:var(--bg-surface); border-radius:10px; padding:4px; }
.biya-top-view-btn{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; font-size:12px; font-weight:700; color:var(--text-secondary); }
.biya-top-view-btn.is-active{ background:var(--biya-accent); color:#fff; }
.biya-top-table-head{
display:grid; grid-template-columns:60px 1fr 200px 140px 90px; gap:12px; padding:10px 16px;
font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--text-muted); text-transform:uppercase;
}
.biya-top-row{
display:grid; grid-template-columns:60px 1fr 200px 140px 90px; gap:12px; align-items:center;
background:var(--bg-surface); border:1px solid var(--border-color); border-radius:10px; padding:12px 16px; margin-bottom:8px;
}
.biya-top-col-rank{ font-size:14px; font-weight:800; color:var(--text-muted); }
.biya-top-row:nth-child(1) .biya-top-col-rank,
.biya-top-row:nth-child(2) .biya-top-col-rank,
.biya-top-row:nth-child(3) .biya-top-col-rank{ color:var(--biya-text-accent); }
.biya-top-col-game{ display:flex; align-items:center; gap:12px; overflow:hidden; }
.biya-top-col-game img{ width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.biya-top-col-game span{ display:flex; flex-direction:column; overflow:hidden; }
.biya-top-col-game a{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.biya-top-col-game a:hover{ color:var(--biya-text-accent); }
.biya-top-col-game small{ font-size:11px; color:var(--text-muted); }
.biya-top-col-pop{ display:flex; align-items:center; gap:10px; }
.biya-top-bar{ flex:1; height:5px; border-radius:4px; background:var(--bg-surface-2); overflow:hidden; }
.biya-top-bar-fill{ display:block; height:100%; background:linear-gradient(90deg, var(--biya-accent), #ff8a3d); border-radius:4px; }
.biya-top-col-pop b{ font-size:12px; color:var(--text-secondary); min-width:32px; text-align:right; }
.biya-top-col-dl{ font-size:13px; font-weight:700; }
.biya-top-col-dl small{ display:block; font-size:10px; font-weight:400; color:var(--text-muted); }
.biya-top-get-btn{
display:inline-flex; align-items:center; gap:4px; background:var(--bg-surface-2); border:1px solid var(--border-color);
padding:7px 12px; border-radius:8px; font-size:12px; font-weight:700;
}
.biya-top-get-btn:hover{ background:var(--biya-accent); border-color:var(--biya-text-accent); color:#fff; }
@media (max-width: 900px){
.biya-top-main{ padding:0 16px; margin-top:18px; }
.biya-top-head{ flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:20px; }
.biya-top-badge{ font-size:10px; }
.biya-top-head h1{ font-size:22px; }
.biya-top-head p{ font-size:12px; }
.biya-top-stats{ width:100%; justify-content:center; }
.biya-top-stat{ flex:1; min-width:0; padding:10px 8px; }
.biya-top-stat-badge{ flex:0 0 auto; }
.biya-top-featured{ margin-bottom:20px; }
.biya-top-featured-inner{ flex-direction:column-reverse; text-align:center; padding:18px; gap:16px; }
.biya-top-featured-meta{ justify-content:center; }
.biya-top-featured-badges{ justify-content:center; }
.biya-top-featured-body h2{ font-size:19px; }
.biya-top-featured-thumb img{ width:110px; }
.biya-top-featured-body .biya-btn{ align-self:center; }
.biya-top-roster-head{ flex-direction:column; align-items:flex-start; gap:10px; }
.biya-top-view-toggle{ width:100%; }
.biya-top-view-btn{ flex:1; justify-content:center; }
.biya-top-table-head{ display:none; }
.biya-top-row{ grid-template-columns:32px 1fr auto; grid-template-areas:"rank game action" "rank pop pop" "rank dl dl"; row-gap:8px; padding:10px 12px; }
.biya-top-col-rank{ grid-area:rank; font-size:12px; }
.biya-top-col-game{ grid-area:game; }
.biya-top-col-game img{ width:32px; height:32px; }
.biya-top-col-game a{ font-size:12px; }
.biya-top-col-action{ grid-area:action; }
.biya-top-get-btn{ padding:6px 10px; font-size:11px; }
.biya-top-col-pop{ grid-area:pop; }
.biya-top-col-dl{ grid-area:dl; font-size:12px; }
}
/* ==========================================================================
COLLECTIONS PAGES
========================================================================== */
.biya-collections-main{ max-width:1400px; margin:0 auto 60px; padding:0 24px; }
.biya-collections-head{ text-align:center; padding:50px 0 40px; max-width:800px; margin:0 auto; }
.biya-collections-badge{
display:inline-flex; align-items:center; gap:8px; background:rgba(255,106,0,.1); border:1px solid rgba(255,106,0,.3);
color:var(--biya-text-accent); padding:6px 16px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.5px; margin-bottom:18px;
}
.biya-collections-head h1{
font-size:46px; font-weight:800;
background:linear-gradient(90deg, var(--text-primary), var(--biya-accent));
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.biya-collections-underline{ width:70px; height:3px; background:var(--biya-text-accent); margin:16px auto 22px; border-radius:2px; }
.biya-collections-head > p{ font-size:15px; color:var(--text-secondary); margin-bottom:28px; }
.biya-collections-stats{ display:flex; justify-content:center; gap:0; margin-bottom:28px; }
.biya-collections-stat{ padding:0 30px; text-align:center; border-right:1px solid var(--border-color); }
.biya-collections-stat:last-child{ border-right:none; }
.biya-collections-stat strong{ display:block; font-size:26px; font-weight:800; color:var(--biya-text-accent); }
.biya-collections-stat:last-child strong{ color:var(--text-primary); }
.biya-collections-stat span{ font-size:10px; letter-spacing:1px; color:var(--text-muted); }
.biya-collections-about{ text-align:left; margin:0; }
.biya-collections-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.biya-collection-card{
display:block; border-radius:14px; overflow:hidden; background:var(--bg-card); border:1px solid var(--border-color);
transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.biya-collection-card:hover{
transform:translateY(-8px) scale(1.015); border-color:var(--biya-text-accent);
box-shadow:0 20px 40px rgba(255,106,0,.25);
}
.biya-collection-card-thumb{ aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--bg-surface-2); }
.biya-collection-card-img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.9); transition:filter .35s ease; }
.biya-collection-card:hover .biya-collection-card-img{ filter:brightness(1.08); }
.biya-collection-card-thumb-composite{ display:flex; background:var(--bg-surface-2); }
.biya-collection-composite-slice{
flex:1; height:100%; object-fit:cover; display:block;
transition:transform .45s cubic-bezier(.22,1,.36,1);
clip-path:polygon(14% 0, 100% 0, 86% 100%, 0% 100%);
margin-left:-9%;
}
.biya-collection-composite-slice:first-child{ margin-left:0; clip-path:polygon(0 0, 100% 0, 86% 100%, 0% 100%); }
.biya-collection-composite-slice:last-child{ clip-path:polygon(14% 0, 100% 0, 100% 100%, 0% 100%); }
.biya-collection-card:hover .biya-collection-composite-slice{ transform:scale(1.12); }
.biya-collection-card:hover .biya-collection-composite-slice:first-child{ transform:scale(1.12) translateX(-4px); }
.biya-collection-card:hover .biya-collection-composite-slice:last-child{ transform:scale(1.12) translateX(4px); }
.biya-collection-composite-empty{
flex:1; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--text-muted);
}
.biya-collection-card-body{ padding:14px; }
.biya-collection-card-count{ font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--biya-text-accent); }
.biya-collection-card-body h3{ font-size:17px; margin:6px 0 12px; transition:.2s; }
.biya-collection-card:hover .biya-collection-card-body h3{ color:var(--biya-text-accent); }
.biya-collection-card-footer{ display:flex; align-items:center; justify-content:space-between; }
.biya-collection-avatars{ display:flex; align-items:center; }
.biya-collection-avatars img{
width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid var(--bg-card); margin-left:-8px;
}
.biya-collection-avatars img:first-child{ margin-left:0; }
.biya-collection-avatar-more{
width:26px; height:26px; border-radius:50%; background:var(--bg-surface-2); color:var(--text-muted); font-size:9px; font-weight:700;
display:flex; align-items:center; justify-content:center; margin-left:-8px; border:2px solid var(--bg-card);
}
.biya-collection-card-arrow{
width:28px; height:28px; border-radius:50%; background:var(--bg-surface-2); color:var(--text-muted);
display:flex; align-items:center; justify-content:center; font-size:11px; transition:.25s ease;
}
.biya-collection-card:hover .biya-collection-card-arrow{ background:var(--biya-accent); color:#fff; transform:translateX(3px); }
/* Single collection page */
.biya-collection-single-main{ text-align:center; padding-bottom:20px; }
.biya-collection-back{
display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--text-secondary);
background:var(--bg-surface-2); padding:8px 16px; border-radius:20px; margin-bottom:20px;
}
.biya-collection-back:hover{ color:var(--biya-text-accent); }
.biya-collection-single-main h1{ font-size:38px; font-weight:800; margin-bottom:14px; }
.biya-collection-count-badge{
display:inline-flex; align-items:center; gap:8px; background:var(--bg-surface-2); border:1px solid var(--border-color);
padding:8px 18px; border-radius:20px; font-size:13px; font-weight:700;
}
@media (max-width: 1100px){
.biya-collections-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px){
.biya-collections-head h1{ font-size:32px; }
.biya-collections-stats{ gap:0; }
.biya-collections-stat{ padding:0 16px; }
.biya-collections-grid{ grid-template-columns:1fr; }
.biya-collection-single-main h1{ font-size:26px; }
}
/* ==========================================================================
404 PAGE
========================================================================== */
.biya-404-main{ max-width:700px; margin:0 auto; padding:100px 24px; text-align:center; }
.biya-404-code{
font-size:110px; font-weight:900; line-height:1;
background:linear-gradient(90deg, var(--biya-accent), #ff8a3d);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.biya-404-wrap h1{ font-size:26px; margin:10px 0 12px; }
.biya-404-wrap p{ font-size:14px; color:var(--text-secondary); margin-bottom:28px; }
.biya-404-search{ position:relative; max-width:440px; margin:0 auto 28px; }
.biya-404-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.biya-404-search input{
width:100%; padding:13px 90px 13px 42px; border-radius:10px; border:1px solid var(--border-color);
background:var(--bg-surface); color:var(--text-primary); font-size:14px;
}
.biya-404-search input:focus{ outline:none; border-color:var(--biya-text-accent); }
.biya-404-search button{
position:absolute; right:5px; top:5px; bottom:5px; background:var(--biya-accent); color:#fff;
padding:0 16px; border-radius:7px; font-size:12px; font-weight:700;
}
.biya-404-search button:hover{ background:var(--biya-accent-hover); }
.biya-404-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
@media (max-width: 500px){
.biya-404-code{ font-size:70px; }
.biya-404-main{ padding:60px 20px; }
}
/* ==========================================================================
REQUEST PAGE
========================================================================== */
.biya-request-main{ max-width:760px; margin:0 auto 60px; padding:0 24px; }
.biya-request-head{ text-align:center; padding:44px 0 30px; }
.biya-request-badge{
display:inline-flex; align-items:center; gap:8px; background:rgba(255,106,0,.1); border:1px solid rgba(255,106,0,.3);
color:var(--biya-text-accent); padding:6px 16px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.5px; margin-bottom:18px;
}
.biya-request-badge i{ font-size:6px; }
.biya-request-head h1{ font-size:32px; font-weight:800; margin-bottom:12px; }
.biya-request-head h1 span{ color:var(--biya-text-accent); }
.biya-request-head p{ font-size:14px; color:var(--text-secondary); max-width:480px; margin:0 auto; }
.biya-request-card{
background:var(--bg-surface); border:1px solid var(--border-color); border-radius:18px; padding:28px;
box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.biya-request-card-head{ display:flex; gap:14px; align-items:flex-start; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--border-color); }
.biya-request-icon{
width:44px; height:44px; border-radius:12px; background:var(--biya-accent); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.biya-request-card-head strong{ font-size:17px; }
.biya-request-card-head p{ font-size:13px; color:var(--text-secondary); margin:2px 0 0; }
.biya-req-required{ color:#ff5c5c; }
.biya-req-optional{ font-size:10px; font-weight:600; background:var(--bg-surface-2); color:var(--text-muted); padding:2px 8px; border-radius:10px; text-transform:none; letter-spacing:0; }
.biya-request-category-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.biya-request-category-option{
display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; border:1.5px solid var(--border-color);
background:var(--bg-surface-2); cursor:pointer; transition:.2s ease;
}
.biya-request-category-option input{ display:none; }
.biya-request-category-option.is-active{ border-color:var(--biya-text-accent); background:rgba(255,106,0,.08); }
.biya-request-cat-icon{
width:36px; height:36px; border-radius:10px; background:var(--bg-surface); display:flex; align-items:center; justify-content:center;
font-size:15px; color:var(--text-secondary); flex-shrink:0;
}
.biya-request-category-option.is-active .biya-request-cat-icon{ background:var(--biya-accent); color:#fff; }
.biya-request-cat-text strong{ display:block; font-size:14px; }
.biya-request-category-option.is-active .biya-request-cat-text strong{ color:var(--biya-text-accent); }
.biya-request-cat-text small{ font-size:11px; color:var(--text-muted); }
.biya-request-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.biya-request-submit-btn{
width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
background:linear-gradient(90deg, var(--biya-accent), #ff8a3d); color:#fff; padding:15px; border-radius:10px;
font-weight:800; font-size:14px; letter-spacing:.5px; margin-top:6px;
box-shadow:0 10px 26px rgba(255,106,0,.3); transition:.2s ease;
}
.biya-request-submit-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.biya-request-submit-arrow{
width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:10px;
}
.biya-request-features{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px; }
.biya-request-feature{ background:var(--bg-surface); border:1px solid var(--border-color); border-radius:14px; padding:18px; }
.biya-request-feature-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:10px; }
.biya-request-feature strong{ display:block; font-size:14px; margin-bottom:6px; }
.biya-request-feature p{ font-size:12px; color:var(--text-secondary); }
@media (max-width: 640px){
.biya-request-row{ grid-template-columns:1fr; }
.biya-request-features{ grid-template-columns:1fr; }
.biya-request-head h1{ font-size:24px; }
}
/* ==========================================================================
LEGAL / INFO PAGES (About, Contact, Terms, DMCA, Privacy)
========================================================================== */
.biya-legal-main{ max-width:1200px; margin:0 auto 60px; padding:0 24px; }
.biya-legal-header{ text-align:center; padding:44px 0 30px; }
.biya-legal-icon{
width:52px; height:52px; border-radius:14px; background:var(--bg-surface-2); border:1px solid var(--border-color);
display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--biya-text-accent); margin:0 auto 16px;
}
.biya-legal-header h1{ font-size:30px; font-weight:800; margin-bottom:8px; }
.biya-legal-header > p{ font-size:14px; color:var(--text-secondary); }
.biya-legal-updated{
display:inline-flex; align-items:center; gap:6px; margin-top:12px; background:var(--bg-surface-2); border:1px solid var(--border-color);
padding:6px 14px; border-radius:20px; font-size:11px; color:var(--text-muted); font-weight:600;
}
.biya-legal-stats{ display:flex; justify-content:center; gap:16px; margin-bottom:34px; flex-wrap:wrap; }
.biya-legal-stat{
background:var(--bg-surface); border:1px solid var(--border-color); border-radius:12px; padding:16px 24px; text-align:center; min-width:130px;
}
.biya-legal-stat strong{ display:block; font-size:22px; font-weight:800; color:var(--biya-text-accent); }
.biya-legal-stat span{ font-size:10px; letter-spacing:.5px; color:var(--text-muted); }
.biya-legal-layout{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.biya-legal-content{ background:var(--bg-surface); border:1px solid var(--border-color); border-radius:16px; padding:28px; }
.biya-legal-content > p{ font-size:14px; margin-bottom:20px; }
.biya-legal-feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:20px; }
.biya-legal-feature{ background:var(--bg-surface-2); border:1px solid var(--border-color); border-radius:12px; padding:18px; text-align:center; }
.biya-legal-feature-icon{
width:36px; height:36px; border-radius:10px; background:rgba(255,106,0,.1); color:var(--biya-text-accent);
display:flex; align-items:center; justify-content:center; font-size:14px; margin:0 auto 10px;
}
.biya-legal-feature strong{ display:block; font-size:14px; margin-bottom:6px; }
.biya-legal-feature p{ font-size:12px; color:var(--text-secondary); }
.biya-legal-box{ background:var(--bg-surface-2); border:1px solid var(--border-color); border-radius:12px; padding:18px 20px; margin-bottom:14px; }
.biya-legal-box-warning{ border-color:rgba(255,106,0,.4); }
.biya-legal-box h3{ font-size:14px; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.biya-legal-box h3 i{ color:var(--biya-text-accent); font-size:12px; }
.biya-legal-box p{ font-size:13px; color:var(--text-secondary); margin-bottom:0; }
.biya-legal-box ul, .biya-legal-numbered-list{ margin:0; padding-left:20px; }
.biya-legal-box ul li, .biya-legal-numbered-list li{ font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.biya-legal-numbered-list{ list-style:decimal; }
.biya-legal-email-pill{
display:inline-flex; align-items:center; gap:6px; background:var(--bg-surface); border:1px solid var(--border-color);
padding:3px 12px; border-radius:20px; color:var(--biya-text-accent); font-size:13px; font-weight:600;
}
/* Contact page cards */
.biya-contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.biya-contact-card{
background:var(--bg-surface-2); border:1px solid var(--border-color); border-radius:14px; padding:22px; text-align:center;
transition:.2s ease;
}
.biya-contact-card:hover{ border-color:var(--biya-text-accent); transform:translateY(-2px); }
.biya-contact-card-icon{
width:44px; height:44px; border-radius:12px; background:var(--biya-accent); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:18px; margin:0 auto 12px;
}
.biya-contact-card strong{ display:block; font-size:15px; margin-bottom:4px; }
.biya-contact-card-link{ display:block; color:var(--biya-text-accent); font-size:13px; font-weight:600; margin-bottom:8px; }
.biya-contact-card small{ font-size:11px; color:var(--text-muted); }
/* Sidebar */
.biya-legal-sidebar{ display:flex; flex-direction:column; gap:16px; }
.biya-legal-side-box{ background:var(--bg-surface); border:1px solid var(--border-color); border-radius:14px; padding:18px; }
.biya-legal-side-box h4{ font-size:13px; display:flex; align-items:center; gap:8px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border-color); }
.biya-legal-side-box p{ font-size:12px; color:var(--text-secondary); margin-bottom:14px; }
.biya-legal-quicklinks li{ margin-bottom:2px; }
.biya-legal-quicklinks a{ display:block; padding:9px 10px; border-radius:8px; font-size:13px; color:var(--text-secondary); }
.biya-legal-quicklinks a:hover{ background:var(--bg-surface-2); color:var(--text-primary); }
.biya-legal-quicklinks a.is-active{ background:var(--biya-accent); color:#fff; font-weight:700; }
.biya-legal-side-btn{ width:100%; justify-content:center; margin-bottom:8px; background:var(--biya-accent); color:#fff; }
.biya-legal-side-btn:last-child{ margin-bottom:0; }
.biya-legal-side-btn-discord{ background:#5865F2; }
.biya-legal-side-btn-discord:hover{ background:#4752c4; }
@media (max-width: 900px){
.biya-legal-layout{ grid-template-columns:1fr; }
.biya-legal-feature-grid{ grid-template-columns:1fr; }
.biya-contact-cards{ grid-template-columns:1fr; }
.biya-legal-content{ padding:20px; }
.biya-legal-header h1{ font-size:24px; }
}
/* ==========================================================================
COMING SOON PAGE
========================================================================== */
.biya-comingsoon-main{ max-width:600px; margin:0 auto; padding:100px 24px; text-align:center; }
.biya-comingsoon-icon{
width:70px; height:70px; border-radius:20px; background:var(--bg-surface); border:1px solid var(--border-color);
display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--biya-text-accent); margin:0 auto 18px;
}
.biya-comingsoon-badge{
display:inline-block; background:rgba(255,106,0,.1); border:1px solid rgba(255,106,0,.3); color:var(--biya-text-accent);
padding:6px 16px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:1px; margin-bottom:16px;
}
.biya-comingsoon-wrap h1{ font-size:26px; margin-bottom:12px; }
.biya-comingsoon-wrap p{ font-size:14px; color:var(--text-secondary); margin-bottom:28px; }
.biya-comingsoon-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
@media (max-width: 500px){
.biya-comingsoon-main{ padding:60px 20px; }
.biya-comingsoon-wrap h1{ font-size:22px; }
}