/* KANGU HOP ARENA. Uses the site's own colours and card style. */
#arena .ar-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
#arena .ar-tabs button{font:inherit;font-weight:700;font-size:.88rem;color:var(--muted);background:var(--glass);border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1rem;cursor:pointer;min-height:44px}
#arena .ar-tabs button.on{color:#03150b;background:linear-gradient(135deg,var(--electric),var(--green));border-color:transparent}
#arena .ar-tabs button:focus-visible,#arena .btn:focus-visible{outline:2px solid var(--electric);outline-offset:2px}
#arena .ar-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-bottom:14px}
#arena .ar-card{padding:1.2rem 1.3rem;margin-bottom:14px}
#arena .ar-grid .ar-card{margin-bottom:0}
#arena .ar-tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;font-weight:800;color:var(--electric);margin-bottom:.4rem}
#arena h3{margin:.1rem 0 .4rem;font-size:1.15rem;overflow-wrap:anywhere}
#arena .ar-sub{color:var(--muted);font-size:.9rem;margin:.3rem 0}
#arena .ar-dim{color:var(--dim);font-weight:500}
#arena .ar-daily{border-color:rgba(255,200,61,.4);background:linear-gradient(160deg,rgba(255,200,61,.08),rgba(255,255,255,.03))}
#arena .ar-daily.is-done{border-color:rgba(61,255,160,.45)}
#arena .ar-daily .btn{margin-top:.6rem}
#arena .ar-big{font-family:var(--font-display);font-size:2.6rem;line-height:1.1;color:var(--gold)}
#arena .ar-big small{font-size:1rem;color:var(--muted)}
#arena .ar-list{list-style:none;margin:.4rem 0;padding:0;display:grid;gap:12px}
#arena .ar-row{display:flex;justify-content:space-between;gap:10px;font-size:.92rem}
#arena .ar-row span{color:var(--muted);white-space:nowrap}
#arena .ar-list li.is-done .ar-row b{color:var(--electric)}
#arena .ar-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
#arena .ar-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--electric));border-radius:99px}
#arena .ar-share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:.6rem 0}
#arena .ar-share span{color:var(--muted);font-size:.88rem;flex:1 1 100%}
#arena .ar-toast{margin:0 0 14px;padding:.8rem 1rem;border-radius:14px;border:1px solid rgba(61,255,160,.45);background:rgba(61,255,160,.09);font-weight:600;font-size:.92rem}
#arena .ar-ach{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
#arena .ar-ach li{display:flex;gap:10px;align-items:center;padding:.7rem .8rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
#arena .ar-ach li.on{border-color:rgba(255,200,61,.5);background:rgba(255,200,61,.07)}
#arena .ar-ach li.off{opacity:.55}
#arena .ar-ach small{display:block;color:var(--muted);font-size:.8rem}
#arena .ar-ic{font-size:1.5rem;width:2rem;text-align:center}
#arena .ar-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:.6rem 0}
#arena .ar-stats div{padding:.6rem .7rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
#arena .ar-stats small{display:block;color:var(--dim);font-size:.72rem}
#arena .ar-stats b{font-size:1.15rem}
#arena .ar-lb{list-style:none;margin:.4rem 0;padding:0}
#arena .ar-lb li{display:flex;gap:10px;align-items:center;padding:.55rem 0;border-top:1px solid var(--line)}
#arena .ar-lb .r{width:1.8rem;color:var(--gold);font-weight:800}
#arena .ar-lb .n{flex:1;min-width:0;overflow-wrap:anywhere}
#arena .ar-lb small{color:var(--dim)}
@media (max-width:720px){#arena .ar-grid{grid-template-columns:1fr}#arena .ar-big{font-size:2.2rem}}
@media (prefers-reduced-motion:reduce){#arena *{transition:none!important}}