/* Readable noir surfaces, with gold reserved for emphasis and action. */
:root{--bg:#101416;--panel:#1a2228;--line:#354047;--muted:#b0b9bb;--text:#f1eee5}
body{background:radial-gradient(ellipse at 85% 0,#26303655,transparent 46%),var(--bg)}
header{border-bottom-color:#414a4e;gap:24px}nav a{padding-block:9px}nav a:hover{color:#f2d49c}
button,.button,.outline{min-height:44px;border-radius:6px}input,textarea,select{border-radius:6px;min-height:44px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #efd29a;outline-offset:4px}
.hero-cinematic{min-height:500px;margin-top:26px;border-radius:12px;padding:32px}
.hero-cinematic:before{background:linear-gradient(270deg,#101416f5 0%,#101416ad 38%,#10141608 77%),linear-gradient(0deg,#101416b0,transparent 40%)}
.hero-cinematic .hero-copy{width:49%;padding:15px 0}.hero-cinematic h1{font-size:clamp(40px,4.3vw,62px);line-height:1.35;margin:18px 0}.hero-cinematic .hero-copy>p{max-width:430px;font-size:15px;line-height:1.95}.hero-cinematic .actions{margin-top:25px;gap:12px}.hero-cinematic .hero-copy>p:last-child{margin-bottom:0;font-size:11px}.hero-cinematic .hero-scene{object-position:center 35%}
.stats{background:#192126;border:1px solid #354047;border-radius:10px;margin-top:22px;padding:22px 8px}.stats strong{font-size:36px}.stats span{font-size:12px;color:#bcc4c5}.section-head{margin-top:48px;margin-bottom:24px}.section-head h2{margin:7px 0}.section-head p{color:#b0b9bb}
.hero-card{isolation:isolate;border-radius:10px;border:1px solid #3f4c54;background:#1e2930;overflow:hidden;position:relative;transition:transform .22s,border-color .22s,box-shadow .22s}.hero-card>img{height:330px;object-position:top;transition:transform .35s;filter:saturate(.92)}.hero-card .caption{background:linear-gradient(0deg,#101921 10%,#101921e0 65%,transparent);padding:42px 20px 20px}.hero-card .caption small{color:#d3bd90;font-size:11px}.hero-card h3{font-size:29px;margin:5px 0 8px}.hero-card .hero-summary{font-size:12px;line-height:1.85;color:#c3cfd4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-card .hero-link{display:block;font-size:11px;color:#efd29a;margin-top:12px}.hero-card:hover,.hero-card:focus-visible{border-color:#cdb27c;box-shadow:0 12px 30px #0003;transform:translateY(-4px)}.hero-card:hover>img{transform:scale(1.035)}
.shortcut-card{min-height:290px;border-radius:10px;padding:26px;border-color:#40505c}.build-shortcut{background:linear-gradient(135deg,#263c3d,#19262b)}.patch-shortcut{background:linear-gradient(135deg,#293849,#1b2531)}.board-shortcut{background:linear-gradient(135deg,#393329,#242a2b)}.shortcut-card p{font-size:14px;line-height:1.9}.shortcut-card>strong{padding-top:18px;border-top:1px solid #ffffff18;width:100%}
.shop-category{background:#151c22;border-radius:10px;border-color:color-mix(in srgb,var(--accent) 32%,#26313b)}.category-heading{padding:20px;background:color-mix(in srgb,var(--accent) 12%,#19222a)}.shop-item{background:color-mix(in srgb,var(--accent) 5%,#1d2730);border-radius:8px;transition:background .18s,box-shadow .18s,transform .18s}.shop-item:hover{background:color-mix(in srgb,var(--accent) 13%,#1d2730);box-shadow:0 5px 15px #0003;transform:translateY(-2px)}.shop-info img{width:60px;height:60px}.shop-info{padding:14px 7px;gap:8px}.shop-price{font-size:13px;background:#0d151bcc;border-radius:20px;padding:3px 10px;color:var(--accent)}.arabic-name{font-size:11px;line-height:1.7;color:#c5cdd0}.game-name{font-size:13px}.shop-add{min-height:32px;width:32px;height:32px;border-radius:50%;z-index:1}.shop-item.picked{background:#273b31;animation:item-confirm .28s ease-out}.shop-item.picked .shop-add{box-shadow:0 0 0 3px #a2cd7320}
.hero-profile{background:linear-gradient(135deg,#26313b,#192229);border:1px solid #43505b;padding:28px;border-radius:12px;gap:36px}.hero-profile>img{border-radius:8px}.hero-profile p{line-height:2.05;color:#d0d8dc}.ability-redesign{margin-block:20px;padding:28px;background:linear-gradient(125deg,#283440,#1c252d);border-color:#465969;border-radius:12px;box-shadow:0 8px 22px #0002}.ability-title>img{background:#111b25;border-color:#5e7485}.ability-title h3{font-size:27px}.ability-explanation{background:#ffffff04;border-radius:8px;padding:16px 18px;margin-top:22px}.ability-explanation h4{color:#f3d59d;font-size:14px}.ability-explanation p{margin:8px 0 0;font-size:15px;line-height:2}.ability-tip{background:#15282f;margin-top:14px;padding:16px 18px;border-radius:8px}.ability-tip p{font-size:13px}.key-stats{margin-top:20px}.key-stats>div{background:#18232e;border-radius:7px;padding:15px}.key-stats small{font-size:12px}.ability-expand>summary{padding:8px 0;min-height:44px;cursor:pointer}.upgrade-tier{border-radius:8px}.upgrade-tier-title{padding-bottom:10px}.upgrade-tier li{line-height:2}
.news-card{border-radius:12px;padding:30px;background:linear-gradient(120deg,#263440,#1b2630);margin-bottom:24px}.news-card h2{line-height:1.6}.news-body{font-size:15px;line-height:2.15;max-width:900px}.news-meta{font-size:12px}.news-source{min-height:44px;display:inline-flex;align-items:center}.leaderboard-card,.player-search-card{background:#19232b;border-radius:10px;border-color:#3f4e58}.leader-row:nth-child(odd){background:#202d36}.leader-row:hover{background:#2b3c46}footer{margin-top:65px;border-top:1px solid #354047;color:#b5bfc1}footer p{font-size:12px;line-height:1.9}
#toast{border-radius:8px;box-shadow:0 8px 30px #0006}dialog{background:#1b252e;border-radius:12px;border-color:#52616c}dialog::backdrop{background:#05090dcc;backdrop-filter:blur(5px)}
@keyframes item-confirm{from{box-shadow:0 0 0 4px #a2cd7380}to{box-shadow:inset 0 0 0 1px #a2cd7350}}
@media(min-width:1001px){main{animation:page-appear .22s ease-out}@keyframes page-appear{from{opacity:.7;transform:translateY(5px)}to{opacity:1;transform:none}}}
@media(max-width:1000px){.hero-cinematic{min-height:460px}.hero-cinematic .hero-copy{width:58%}.hero-card>img{height:280px}.hero-card .caption{padding-inline:15px}}
@media(max-width:650px){body{font-size:14px}header{gap:16px}.hero-cinematic{min-height:560px;padding:20px 18px;border-radius:10px;margin-top:18px}.hero-cinematic .hero-copy{width:100%;padding:210px 0 0}.hero-cinematic h1{font-size:36px;line-height:1.35;margin:12px 0}.hero-cinematic .hero-copy>p{font-size:13px;line-height:1.9;margin:12px 0}.hero-cinematic .hero-copy>p:last-child{font-size:10px}.hero-cinematic:before{background:linear-gradient(0deg,#101416 0%,#101416f2 43%,#1014160d 90%)}.hero-cinematic .hero-scene{object-position:25% top}.hero-cinematic .actions{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-cinematic .actions a{font-size:11px;padding:12px 7px;text-align:center}.stats{padding:16px 4px;margin-top:16px}.stats strong{font-size:28px}.stats span{font-size:10px}.section-head{margin-top:34px;gap:12px}.section-head .outline{font-size:11px;padding:9px 12px}.hero-card>img{height:240px}.hero-card .caption{padding:35px 12px 15px}.hero-card h3{font-size:23px}.hero-card .caption small{font-size:10px}.hero-card .hero-summary{font-size:11px}.hero-card .hero-link{font-size:10px}.shortcut-card{min-height:250px;padding:22px}.shop-tiles,.planner .shop-tiles,.shop-category:only-child .shop-tiles,.planner .shop-category:only-child .shop-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.shop-info img{width:53px;height:53px}.shop-info{padding:12px 5px;min-height:163px}.game-name{font-size:12px}.arabic-name{font-size:10px}.shop-price{font-size:12px;padding:2px 8px}.shop-tier{padding:15px 10px}.hero-profile{padding:20px;gap:20px}.ability-redesign{padding:18px}.ability-title h3{font-size:23px}.ability-explanation{padding:14px}.ability-explanation p{font-size:14px}.ability-tip p{font-size:13px}.news-card{padding:22px}.news-body{font-size:14px}.news-meta{font-size:11px;flex-wrap:wrap;gap:6px}}
@media(max-width:360px){.shop-tiles,.planner .shop-tiles,.shop-category:only-child .shop-tiles,.planner .shop-category:only-child .shop-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-cinematic h1{font-size:31px}}
.hero-card .caption{position:relative;bottom:auto;padding:18px 20px;background:#19242c;border-top:1px solid #ffffff0b}.hero-card>img{display:block}.hero-card .hero-summary{min-height:44px}
@media(max-width:650px){.hero-card .caption{padding:14px 12px}.hero-card>img{height:210px}.hero-card .hero-summary{min-height:41px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-card:hover,.shop-item:hover,.shortcut-card:hover{transform:none}}