/* ArenaPlus News – front end. Scoped to .apn so the theme is not affected. */
.apn{--apn-acc:#fd6017;--apn-acc2:#fd9019;--apn-link:#C2410C;--apn-head:#111111;--apn-tx:#2E2E2E;--apn-mu:#6B6B6B;--apn-line:#E8E5E2;--apn-soft:#F6F5F4;--apn-tint:#FFF0E6;--apn-tline:#FFD9BF;--apn-hero:#FFE3CF;
  --apn-fh:'Hubot Sans',Poppins,ui-sans-serif,system-ui,sans-serif;--apn-fb:Poppins,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--apn-sh:0 12px 32px -18px rgba(20,12,4,.28);
  font-family:var(--apn-fb);color:var(--apn-tx);font-size:16px;line-height:1.6;width:100%;-webkit-font-smoothing:antialiased}
.apn *,.apn *::before,.apn *::after{box-sizing:border-box}
.apn [hidden]{display:none!important}
.apn a{text-decoration:none;color:inherit}
.apn-wrap{max-width:1180px;margin:0 auto;width:100%}

/* Hero (gradient reaches the screen edges even in a boxed page) */
.apn-hero{padding:56px 24px 40px;background:linear-gradient(180deg,var(--apn-hero),#fff);border-image:linear-gradient(180deg,var(--apn-hero),#fff) fill 0/0/0 100vmax}
.apn-crumb{font-size:13px;color:var(--apn-mu);margin:0 0 16px}
.apn .apn-crumb a{color:var(--apn-mu)}.apn .apn-crumb a:hover{color:var(--apn-link)}
.apn .apn-h1{margin:0;color:var(--apn-head);font-family:var(--apn-fh);font-size:clamp(38px,5vw,56px);font-weight:800;line-height:1.02;letter-spacing:-1px;text-transform:none}
.apn .apn-lead{margin:16px 0 0;max-width:720px;font-size:19px;line-height:1.55;color:var(--apn-tx)}
.apn .apn-search{margin:26px 0 0;max-width:640px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--apn-line);border-radius:999px;padding:6px 6px 6px 20px;box-shadow:var(--apn-sh)}
.apn .apn-search:focus-within{border-color:var(--apn-acc2)}
.apn .apn-search svg{flex:none;color:var(--apn-link)}
.apn .apn-search input[type=search]{flex:1;min-width:0;width:auto;height:auto;margin:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;font:400 16px/1.4 var(--apn-fb);color:var(--apn-head);padding:10px 0}
.apn .apn-search input[type=search]::placeholder{color:#8A857F;opacity:1}
.apn .apn-search button,.apn .apn-search button:hover,.apn .apn-search button:focus{flex:none;margin:0;border:0;border-radius:999px;background:linear-gradient(135deg,var(--apn-acc2),var(--apn-acc));color:#fff;font:600 15px/1.2 var(--apn-fb);padding:12px 22px;cursor:pointer;text-transform:none;letter-spacing:0;box-shadow:none}
.apn .apn-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.apn .apn-chip,.apn .apn-chip:focus{margin:0;border:1px solid var(--apn-line);background:#fff;color:var(--apn-tx);border-radius:999px;padding:9px 16px;font:500 14px/1.3 var(--apn-fb);cursor:pointer;text-transform:none;letter-spacing:0;box-shadow:none}
.apn .apn-chip:hover{background:#fff;border-color:var(--apn-acc2);color:var(--apn-link)}
.apn .apn-chip[aria-pressed="true"],.apn .apn-chip[aria-pressed="true"]:hover{background:var(--apn-head);border-color:var(--apn-head);color:#fff}
.apn .apn-chip:focus-visible,.apn .apn-more:focus-visible,.apn .apn-card:focus-visible{outline:2px solid var(--apn-acc2);outline-offset:3px}
.apn-count{margin-top:14px;font-size:14px;color:var(--apn-mu);min-height:20px}
.apn-inline{padding-top:24px}.apn-inline .apn-search{margin-top:0}

/* Shared */
.apn-main{padding:12px 24px 72px}
.apn-sec{padding-top:40px}
.apn .apn-h2{margin:0 0 18px;color:var(--apn-head);font-family:var(--apn-fh);font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.4px;display:flex;align-items:center;gap:10px;text-transform:none}
.apn-dot{width:10px;height:10px;border-radius:50%;background:var(--apn-acc);box-shadow:0 0 0 5px var(--apn-tint);flex:none}
.apn-img{display:block;position:relative;overflow:hidden;border-radius:16px;background:radial-gradient(circle at bottom right,#FFD9BF 0%,#FFF7F1 80%);aspect-ratio:16/9}
.apn-img img{width:100%;height:100%!important;max-width:none;object-fit:contain;display:block;border-radius:0;transition:transform .4s}
.apn-card:hover .apn-img img{transform:scale(1.04)}
.apn-pill{align-self:flex-start;display:inline-block;font-size:12px;font-weight:600;line-height:1.5;color:var(--apn-link);background:var(--apn-tint);padding:3px 10px;border-radius:999px}
.apn-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--apn-mu)}
.apn-meta i{width:3px;height:3px;border-radius:50%;background:#BDB7B0;display:inline-block}
.apn .apn-card{display:flex;flex-direction:column;gap:10px;color:inherit;min-width:0}
.apn .apn-card h3{margin:0;color:var(--apn-head);font:600 18px/1.35 var(--apn-fb);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.apn .apn-card:hover h3{color:var(--apn-link)}
.apn .apn-card p{margin:0;font-size:14.5px;line-height:1.6;color:#55575E}
.apn mark{background:var(--apn-hero);color:inherit;border-radius:3px;padding:0 2px}

/* Trending */
.apn-trend{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px}
.apn-trend--one{grid-template-columns:minmax(0,1fr);max-width:820px}
.apn .apn-feat h3{font:800 30px/1.15 var(--apn-fh);letter-spacing:-.4px}
.apn .apn-feat p{font-size:16px}
.apn-side-list{display:flex;flex-direction:column;gap:22px}
.apn .apn-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
.apn-row-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.apn .apn-row h3{font-size:17px}
.apn-row .apn-img{border-radius:14px}
.apn-row p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Grid + sidebar */
.apn-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.apn-cols--single{grid-template-columns:minmax(0,1fr)}
.apn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;transition:opacity .2s}
.apn-cols--single .apn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.apn-grid .apn-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.apn.is-loading .apn-grid{opacity:.45}
.apn .apn-more,.apn .apn-more:focus{display:flex;margin:32px auto 0;border:1px solid var(--apn-line);background:#fff;color:var(--apn-head);border-radius:999px;padding:13px 26px;font:600 15px/1.2 var(--apn-fb);cursor:pointer;text-transform:none;letter-spacing:0;box-shadow:none}
.apn .apn-more:hover{border-color:var(--apn-tline);background:var(--apn-tint);color:var(--apn-link)}
.apn .apn-more:disabled{opacity:.6;cursor:default}
.apn-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px;padding-top:40px}
.apn-box{border:1px solid var(--apn-line);border-radius:20px;padding:22px;background:#fff}
.apn .apn-box h2{margin:0 0 14px;color:var(--apn-head);font-family:var(--apn-fh);font-size:24px;font-weight:800;letter-spacing:-.3px;line-height:1.15;text-transform:none}
.apn-upd{position:relative;padding:0 0 18px 22px;border-left:2px solid var(--apn-line);margin-left:6px}
.apn-upd:last-of-type,.apn-upd:has(+ .apn-upd[hidden]){padding-bottom:0;border-left-color:transparent}
.apn-upd::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--apn-acc)}
.apn-box h2+.apn-upd::before{background:var(--apn-acc)}
.apn-upd-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.apn-ver{font:600 12px var(--apn-fb);color:var(--apn-link);background:var(--apn-tint);border:1px solid var(--apn-tline);padding:2px 9px;border-radius:999px}
.apn-upd-h span:last-child{font-size:13px;color:var(--apn-mu)}
.apn-upd ul{margin:0;padding-left:18px;font-size:14px;line-height:1.55;color:#3C3E45}
.apn-upd li+li{margin-top:4px}
.apn-media{background:var(--apn-soft);border:0}
.apn .apn-media h3{margin:0 0 6px;font:600 17px var(--apn-fb);color:var(--apn-head);text-transform:none}
.apn-media p{margin:0;font-size:14px;line-height:1.55}
.apn .apn-link{display:inline-block;margin-top:10px;font:600 14px var(--apn-fb);color:var(--apn-link)}
.apn-empty{padding:32px;border-radius:20px;background:var(--apn-soft);text-align:center;margin-top:24px}
.apn-empty b{display:block;font:800 22px var(--apn-fh);color:var(--apn-head);margin-bottom:6px}

/* 21+ band */
.apn-band{margin-top:64px;display:flex;align-items:center;gap:24px;padding:28px 32px;border-radius:20px;background:var(--apn-soft)}
.apn .apn-band h2{margin:0 0 6px;color:var(--apn-head);font-family:var(--apn-fh);font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.4px;text-transform:none}
.apn-band p{margin:0;font-size:14px;line-height:1.55}
.apn-band>div{flex:1;min-width:0}
.apn .apn-btn{display:inline-flex;white-space:nowrap;padding:13px 22px;border-radius:999px;border:1px solid var(--apn-line);background:#fff;color:var(--apn-head);font:600 15px/1.2 var(--apn-fb)}
.apn .apn-btn:hover{border-color:var(--apn-tline);color:var(--apn-link)}

/* App updates view */
.apn.is-app .apn-news,.apn.is-app [data-apn-grid],.apn.is-app [data-apn-more],.apn.is-app [data-apn-empty]{display:none!important}
.apn.is-app .apn-cols{grid-template-columns:minmax(0,720px)}
.apn.is-app .apn-aside{position:static}

@media(max-width:1024px){.apn-trend{grid-template-columns:minmax(0,1fr)}.apn-cols{grid-template-columns:minmax(0,1fr);gap:0}.apn-aside{position:static}.apn-cols--single .apn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
  .apn-hero{padding:36px 16px 28px}.apn .apn-lead{font-size:17px}.apn-main{padding:0 16px 48px}
  .apn .apn-h2{font-size:24px}.apn .apn-feat h3{font-size:24px}.apn-grid,.apn-cols--single .apn-grid{grid-template-columns:minmax(0,1fr)}
  .apn .apn-row{grid-template-columns:minmax(0,1fr);gap:10px}.apn-row .apn-img{order:-1;border-radius:16px}.apn-row p{display:none}.apn .apn-row h3{font-size:17px}
  .apn-band{flex-direction:column;align-items:flex-start;padding:24px}.apn .apn-band h2{font-size:24px}
  .apn .apn-search{padding-left:16px}.apn .apn-search button{padding:11px 16px}
  .apn .apn-chips{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .apn .apn-chips::-webkit-scrollbar{display:none}.apn .apn-chip{flex:none}
}
@media(prefers-reduced-motion:reduce){.apn *{transition:none!important}}