{% extends "_base.html" %}
{#- 全服概况：在线人数、地区分布、24 小时曲线、热门地图和模式。 -#}
{% block style %}
  .top { padding: 24px 28px; background: var(--panel);
    clip-path: polygon(0 26px, 26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
  .big { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0 24px; margin-top: 12px; align-items: end; }
  .big .v { font-family: "Oswald", sans-serif; font-size: 44px; font-weight: 700; line-height: 1.1; }
  .big .v.lead { font-size: 72px; color: var(--amber); }
  section.panel { margin-top: 18px; }
  .split { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .split div { padding: 12px 14px; background: rgba(255,255,255,.08); }
  .split .v { font-family: "Oswald", sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; }
  .split .s { font-size: 17px; color: var(--muted); }
  .trend svg { display: block; width: 100%; height: 150px; }
  .trend .ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 17px; color: var(--muted); }
  .maps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .map { display: flex; gap: 14px; align-items: center; }
  .map .img { width: 128px; height: 72px; flex: none; background: rgba(255,255,255,.08) center / cover; }
  .map .body { flex: 1; min-width: 0; }
  .map .name { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map .line { font-size: 17px; color: var(--soft); margin-top: 2px; }
  .map .line b { font-family: "Oswald", sans-serif; font-size: 22px; color: var(--amber); margin-right: 4px; }
  .map .bar { margin-top: 6px; height: 6px; }
  .mode { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 0 14px; align-items: center; font-size: 20px; }
  .mode + .mode { margin-top: 12px; }
  .mode .bar { height: 12px; }
  .mode .n { font-family: "Oswald", sans-serif; font-size: 22px; text-align: right; }
  .mode .n small { font-family: "SC", sans-serif; font-size: 16px; color: var(--muted); margin-left: 6px; }
{% endblock %}
{% block body %}
<section class="top">
  <div class="eyebrow">Battlefield 1 · 全服概况</div>
  <div class="big">
    <div><div class="label">在线玩家</div><div class="v lead">{{ players }}</div></div>
    <div><div class="label">服务器</div><div class="v">{{ servers }}</div></div>
    <div><div class="label">排队</div><div class="v">{{ queues }}</div></div>
    <div><div class="label">观战</div><div class="v">{{ spectators }}</div></div>
  </div>
</section>

<section class="panel">
  <div class="sh">玩家分布<span class="aside">玩家 / 服务器</span></div>
  <div class="split">
    {% for label, p, s in split %}<div><div class="label">{{ label }}</div><div class="v">{{ p }}</div><div class="s">{{ s }} 个服务器</div></div>{% endfor %}
  </div>
</section>

{% if trend %}
<section class="panel trend">
  <div class="sh">24 小时在线</div>
  <svg viewBox="0 0 900 150" preserveAspectRatio="none">
    <polygon points="{{ trend.area }}" fill="rgba(245,158,11,.22)"/>
    <polyline points="{{ trend.line }}" fill="none" stroke="#fbbf24" stroke-width="3" vector-effect="non-scaling-stroke"/>
  </svg>
  <div class="ends"><span>24 小时前</span><span>最低 <b class="d">{{ trend.low }}</b> · 最高 <b class="d">{{ trend.high }}</b></span><span>现在</span></div>
</section>
{% endif %}

<section class="panel">
  <div class="sh">热门地图</div>
  <div class="maps">
    {% for m in maps %}
    <div class="map">
      <div class="img" {% if m.image %}style="background-image: url({{ m.image }})"{% endif %}></div>
      <div class="body">
        <div class="name">{{ m.label }}</div>
        <div class="line"><b>{{ m.players }}</b>人 · {{ m.servers }} 个服务器</div>
        <div class="bar"><i style="width: {{ m.ratio }}%"></i></div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

<section class="panel">
  <div class="sh">模式</div>
  {% for label, n, pct in modes %}
  <div class="mode"><span>{{ label }}</span><div class="bar"><i style="width: {{ pct }}%"></i></div><span class="n">{{ n }}<small>{{ pct }}%</small></span></div>
  {% endfor %}
</section>
{% endblock %}