/* ============================================================
   PlayLibs 玩库 · 深色霓虹电玩风（与 earhubs 暖金 / soundlibs 浅蓝 刻意区分）
   ============================================================ */
:root{
  --bg:#0b0e1a; --bg2:#0e1224; --panel:#141929; --panel2:#1a2038; --panel3:#202744;
  --line:#222a49; --line2:#2c355c;
  --text:#eef0ff; --muted:#98a1c8; --dim:#626e99;
  --brand:#ff4d8d; --violet:#8b5cf6; --cyan:#22d3ee; --amber:#ffc24d; --green:#34d399;
  --brand-soft:rgba(255,77,141,.12); --brand-line:rgba(255,77,141,.35);
  --grad:linear-gradient(90deg,#ff4d8d,#8b5cf6 50%,#22d3ee);
  --grad2:linear-gradient(135deg,#ff4d8d,#22d3ee);
  --glow:rgba(255,77,141,.22); --glow2:rgba(34,211,238,.16);
  --r:14px; --r-sm:10px; --container-max:1180px;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-display:'Outfit','Inter',ui-sans-serif,system-ui,sans-serif;
  --shadow:0 20px 60px -24px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--brand)}
.container{max-width:var(--container-max);margin:0 auto;padding:0 22px}
.ltr-keep{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- 导航 ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(11,14,26,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.brand .logo{width:36px;height:36px;flex:none;filter:drop-shadow(0 0 12px var(--glow))}
.brand b{font-family:var(--font-display);font-size:19px;letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-size:9.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.nav-links{display:flex;gap:2px;flex:1}
.nav-links a{color:var(--muted);font-size:14px;font-weight:500;padding:8px 13px;border-radius:99px;transition:.15s}
.nav-links a:hover{color:var(--text);background:var(--panel2)}
.nav-links a.active{color:#fff;background:linear-gradient(90deg,rgba(255,77,141,.22),rgba(139,92,246,.22));box-shadow:inset 0 0 0 1px var(--brand-line)}
.header-tools{display:flex;align-items:center;gap:10px;flex:none}
.lang-dropdown{position:relative}
.lang-dropdown .dd-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:99px;padding:8px 13px;font-size:13px;font-weight:500;cursor:pointer;transition:.15s}
.lang-dropdown .dd-btn:hover{border-color:var(--brand-line);background:var(--panel2)}
.lang-dropdown .dd-caret{color:var(--dim)}
.lang-dropdown .dd-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:120;min-width:190px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;margin:0;display:none;box-shadow:var(--shadow)}
.lang-dropdown .dd-menu.open{display:block}
.lang-dropdown .dd-menu li{list-style:none;margin:0;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:13.5px;transition:.15s}
.lang-dropdown .dd-menu li:hover{background:var(--brand-soft);color:#fff}
.lang-dropdown .dd-menu li.selected{color:#fff;background:var(--grad2)}
.nav-cta{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#fff;border-radius:99px;padding:9px 18px;font-size:13.5px;font-weight:600;box-shadow:0 6px 20px -6px var(--glow)}
.nav-cta:hover{color:#fff;box-shadow:0 8px 26px -6px rgba(255,77,141,.5)}

/* ---------- Hero ---------- */
.hero{padding:76px 0 60px;position:relative;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(760px 340px at 78% -10%,rgba(139,92,246,.22),transparent 62%),
  radial-gradient(640px 300px at 12% 12%,rgba(255,77,141,.14),transparent 60%),
  radial-gradient(700px 320px at 50% 110%,rgba(34,211,238,.12),transparent 60%);pointer-events:none}
.hero .container{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--cyan);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.28);padding:6px 14px;border-radius:99px}
.hero h1{font-family:var(--font-display);font-size:clamp(36px,5vw,58px);line-height:1.06;letter-spacing:-.03em;margin:22px 0 16px;max-width:820px;margin-inline:auto}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:16.5px;max-width:640px;margin:0 auto 28px}
.hero-search{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:99px;padding:7px 7px 7px 20px;box-shadow:var(--shadow)}
.hero-search input{flex:1;border:0;outline:0;font-size:15px;min-width:0;background:none;color:var(--text)}
.hero-search input::placeholder{color:var(--dim)}
.hero-search .btn{background:var(--grad);color:#fff;border:0;border-radius:99px;padding:10px 22px;font-weight:600;font-size:14px;cursor:pointer}
.hero-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.hero-tags a{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:4px 12px;background:var(--panel)}
.hero-tags a:hover{color:var(--cyan);border-color:rgba(34,211,238,.4)}
.hero-stats{display:flex;gap:38px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.hero-stats b{font-family:var(--font-display);font-size:26px;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{font-size:12px;color:var(--muted)}

/* ---------- 区块通用 ---------- */
.section{padding:46px 0}
.section.alt{background:var(--bg2);border-block:1px solid var(--line)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:22px}
.head h2{font-family:var(--font-display);font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
.head p{color:var(--muted);font-size:13.5px;margin:0}
.head .more{font-size:13.5px;font-weight:600;color:var(--cyan);display:inline-flex;align-items:center;gap:6px}
.head .more:hover{color:var(--brand)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:99px;padding:7px 14px;font-size:13px;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--brand-line);color:var(--text)}
.chip.active{color:#fff;background:var(--grad);border-color:transparent;box-shadow:0 4px 16px -4px var(--glow)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:99px;padding:3px 9px}
.badge-new{color:#08131a;background:var(--cyan)}
.badge-hot{color:#14100a;background:var(--amber)}
.badge-rating{color:#fff;background:var(--grad2)}

/* ---------- 游戏卡片 ---------- */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px}
.game-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.game-card:hover{transform:translateY(-4px);border-color:var(--brand-line);box-shadow:0 22px 48px -20px var(--glow)}
.game-cover{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.game-cover svg{width:100%;height:100%;display:block}
.game-cover .play-btn{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(11,14,26,.72);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.85);transition:.18s;cursor:pointer}
.game-card:hover .play-btn{opacity:1;transform:scale(1)}
.game-cover .tag{position:absolute;top:10px;left:10px;display:flex;gap:6px}
.game-info{padding:13px 14px 14px}
.game-info h3{margin:0 0 3px;font-size:15px;font-family:var(--font-display)}
.game-info h3 a{color:var(--text)}
.game-info h3 a:hover{color:var(--cyan)}
.game-info p{margin:0 0 10px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.game-meta .rating{color:var(--amber);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.game-meta .plays{display:inline-flex;align-items:center;gap:4px;color:var(--dim)}
.game-meta .dot{margin-inline-start:auto}

/* ---------- 分类入口 ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cat-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:.16s}
.cat-card:hover{transform:translateY(-3px);border-color:var(--brand-line);box-shadow:0 18px 40px -18px var(--glow)}
.cat-card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.cat-card .ico svg{width:24px;height:24px}
.cat-card b{display:block;font-size:14.5px;font-family:var(--font-display)}
.cat-card span{font-size:12px;color:var(--dim)}

/* ---------- 横幅（每日挑战/积分） ---------- */
.banner{position:relative;overflow:hidden;border-radius:var(--r);padding:30px 34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;border:1px solid var(--brand-line);background:linear-gradient(120deg,rgba(255,77,141,.16),rgba(139,92,246,.14) 50%,rgba(34,211,238,.14))}
.banner h3{margin:0 0 6px;font-family:var(--font-display);font-size:21px}
.banner p{margin:0;color:var(--muted);font-size:13.5px;max-width:520px}
.banner .btn{background:var(--grad);color:#fff;border:0;border-radius:99px;padding:11px 22px;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 6px 22px -6px var(--glow)}
.banner .btn.ghost{background:var(--panel);border:1px solid var(--line2);color:var(--text);box-shadow:none}

/* ---------- 面包屑 / 详情 ---------- */
.crumb{font-size:13px;color:var(--dim);padding:22px 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--cyan)}
.detail-hero{display:grid;grid-template-columns:300px 1fr;gap:24px;margin:18px 0 0}
.detail-cover{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.detail-cover svg{width:100%;height:auto;display:block}
.detail-head h1{font-family:var(--font-display);font-size:30px;margin:8px 0 8px;letter-spacing:-.02em}
.detail-head p{color:var(--muted);margin:0 0 14px;max-width:640px}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.detail-meta{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.detail-meta b{color:var(--text);font-weight:600}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 6px 20px -6px var(--glow)}
.btn-grad:hover{color:#fff;filter:brightness(1.08)}
.btn-line{background:var(--panel);border:1px solid var(--line2);color:var(--text)}
.btn-line:hover{border-color:var(--brand-line)}

/* ---------- 试玩区 ---------- */
.play-zone{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);background:radial-gradient(600px 300px at 50% 0%,rgba(139,92,246,.16),transparent 60%),var(--bg2);aspect-ratio:16/9;display:grid;place-items:center}
.play-zone .play-big{width:76px;height:76px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;border:0;cursor:pointer;box-shadow:0 0 0 12px var(--brand-soft),0 14px 40px -10px var(--glow);transition:.2s}
.play-zone .play-big:hover{transform:scale(1.06)}
.play-zone .quota{position:absolute;top:14px;right:16px;font-size:12.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.play-zone .hint{position:absolute;bottom:14px;left:16px;font-size:12px;color:var(--dim)}
.play-info{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted)}
.play-info .remain b{color:var(--amber)}

/* ---------- 攻略 ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.guide-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:.16s}
.guide-card:hover{transform:translateY(-3px);border-color:var(--brand-line)}
.guide-card .cat{font-size:11.5px;color:var(--cyan);letter-spacing:.06em;font-weight:700}
.guide-card h3{margin:8px 0 6px;font-size:16px;font-family:var(--font-display)}
.guide-card h3 a{color:var(--text)}
.guide-card p{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.6}
.guide-card .meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
.guide-body{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-top:18px}
.guide-body h2{font-family:var(--font-display);font-size:20px;margin:26px 0 10px}
.guide-body h2:first-child{margin-top:0}
.guide-body p{color:var(--muted);line-height:1.75}
.guide-body ul{color:var(--muted);padding-inline-start:20px;line-height:1.75}
.guide-body .tip{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:10px;padding:12px 16px;color:var(--text);font-size:13.5px;margin:14px 0}

/* ---------- 排行榜 ---------- */
.rank-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:26px}
.rank-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.rank-card h3{margin:0 0 12px;font-size:15px;font-family:var(--font-display);display:flex;align-items:center;gap:8px}
.rank-card ol{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.rank-card li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.rank-card li .no{width:22px;height:22px;border-radius:7px;background:var(--panel3);display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--dim);flex:none}
.rank-card li:nth-child(1) .no{background:linear-gradient(135deg,#ffd76a,#ff9d2e);color:#241400}
.rank-card li:nth-child(2) .no{background:linear-gradient(135deg,#e8edff,#9aa7d0);color:#1b2140}
.rank-card li:nth-child(3) .no{background:linear-gradient(135deg,#ffb36a,#c96a3a);color:#2a1505}
.rank-card li a{color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-card li b{margin-inline-start:auto;color:var(--amber);font-size:12.5px}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.pager .btn{padding:8px 16px;min-width:40px}
.pager .btn.disabled{opacity:.35;pointer-events:none}
.pager-info{font-size:13px;color:var(--muted)}

/* ---------- 会员 ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.price-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:6px}
.price-card.hot{border-color:var(--brand-line);box-shadow:0 24px 60px -26px var(--glow);background:linear-gradient(160deg,rgba(255,77,141,.08),rgba(139,92,246,.07) 60%,rgba(34,211,238,.08))}
.price-card h3{margin:0;font-family:var(--font-display);font-size:17px}
.price-card .price{font-family:var(--font-display);font-size:34px;font-weight:700;margin:8px 0 4px}
.price-card .price small{font-size:13px;color:var(--muted);font-weight:500}
.price-card ul{margin:8px 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.price-card li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.price-card li svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:3px}
.price-card .btn{margin-top:auto}

/* ---------- 关于 ---------- */
.about-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-top:16px;display:grid;gap:14px;color:var(--muted);font-size:14.5px}
.about-box p{margin:0}
.about-box b{color:var(--text)}
.form{display:grid;gap:12px;margin-top:16px}
.form label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.form input,.form textarea{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:11px 14px;color:var(--text);font-size:14px;font-family:inherit;outline:0}
.form input:focus,.form textarea:focus{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft)}

/* ---------- 页脚 ---------- */
.footer{background:var(--bg2);border-top:1px solid var(--line);padding:42px 0 22px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:24px}
.footer-brand p{color:var(--muted);font-size:13px;margin:10px 0 0;max-width:300px}
.footer h5{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.footer-col a{display:block;color:var(--text);font-size:13.5px;opacity:.82;margin-bottom:9px}
.footer-col a:hover{color:var(--brand);opacity:1}
.footer-family{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding:14px 0;font-size:13px}
.footer-family span{color:var(--muted)}
.footer-family a{color:var(--text);opacity:.78}
.footer-family a:hover{color:var(--cyan);opacity:1}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--dim)}

/* ---------- 响应式 ---------- */
@media(max-width:960px){.nav-links{display:none}.detail-hero{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hero{padding:54px 0 44px}.hero-stats{gap:22px}.game-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}

/* ============================================================
   阿拉伯语 RTL 支持（html[dir="rtl"] 生效）
   ============================================================ */
html[dir="rtl"] body{font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif}
html[dir="rtl"] .hero,
html[dir="rtl"] .section,
html[dir="rtl"] .crumb,
html[dir="rtl"] .footer-grid{text-align:right}
html[dir="rtl"] .lang-dropdown .dd-menu{right:auto;left:0}
html[dir="rtl"] input[type="text"],
html[dir="rtl"] textarea,
html[dir="rtl"] select{direction:rtl;text-align:right}
html[dir="rtl"] .footer-bottom .ltr-keep{direction:ltr}