/* /online – spelare online nu */
.on-wrap { max-width: 1100px; margin: 0 auto; padding: 16px 12px 40px; color: #e9e2cf; }
.on-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.on-dot { width: 16px; height: 16px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 6px #22c55e22, 0 0 18px #22c55e; flex: none; animation: gwh-online-pulse 1.8s ease-out infinite; }
.on-title { margin: 0; font: 900 26px/1.1 'Oswald', system-ui, sans-serif; letter-spacing: .04em; color: #ffd166; text-transform: uppercase; }
.on-sub { font-size: 13px; color: #b5a98a; margin-top: 2px; }
.on-search { margin-left: auto; min-width: 200px; flex: 0 1 280px; padding: 10px 14px; border-radius: 12px; border: 1px solid #e8c15a44; background: #0c0a06; color: #e9e2cf; font-size: 14px; }
.on-search:focus { outline: none; border-color: #e8c15a; }
.on-toast { padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 700; }
.on-toast.ok { background: #22c55e1f; border: 1px solid #22c55e66; color: #9ff0bf; }
.on-toast.bad { background: #ff2d3d1a; border: 1px solid #ff2d3d55; color: #ffb3bb; }
.on-empty { text-align: center; padding: 50px 10px; color: #b5a98a; }
.on-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.on-card { display: grid; grid-template-columns: 60px 1fr; grid-template-areas: "ava info" "acts acts"; gap: 10px 12px; padding: 14px; border-radius: 16px;
  background: linear-gradient(160deg, #1a150c, #0c0a07); border: 1px solid #e8c15a2e; box-shadow: 0 6px 20px #0006; transition: border-color .15s, transform .15s; }
.on-card:hover { border-color: #e8c15a77; transform: translateY(-1px); }
.on-card.me { border-color: #22c55e66; }
.on-ava { grid-area: ava; position: relative; width: 60px; height: 60px; border-radius: 50%; overflow: visible; background: #2a2214; display: grid; place-items: center; font-size: 28px; text-decoration: none; border: 2px solid #e8c15a66; }
.on-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.on-live { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2px solid #0c0a07; }
.on-info { grid-area: info; min-width: 0; }
.on-name { display: block; font: 800 17px/1.2 system-ui; color: #fff3d6; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-name:hover { color: #ffd166; }
.on-name small { font-size: 11px; color: #22c55e; margin-left: 4px; font-weight: 800; }
.on-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; color: #cbbf9f; }
.on-lvl { color: #ffd166; font-weight: 800; }
.on-gang { color: #e9a1ff; font-weight: 700; }
.on-muted { color: #7d735c; }
.on-acts { grid-area: acts; display: flex; gap: 8px; }
.on-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px 10px; border-radius: 11px; border: 0; font: 800 13px system-ui; text-decoration: none; cursor: pointer; transition: transform .1s, filter .1s; }
.on-btn small { font-size: 11px; opacity: .8; }
.on-btn:active:not(:disabled) { transform: scale(.96); }
.on-btn:disabled { filter: grayscale(1); opacity: .45; cursor: not-allowed; }
.on-btn.ghost { background: transparent; border: 1px solid #e8c15a66; color: #ffd166; }
.on-btn.rob { background: linear-gradient(#ffe08a, #e8b53a); color: #1a1206; }
.on-btn.atk { background: linear-gradient(#ff7a85, #c81e2e); color: #fff; }
@media (max-width: 600px) {
  .on-grid { grid-template-columns: 1fr; }
  .on-title { font-size: 22px; }
  .on-search { margin-left: 0; flex: 1 1 100%; }
  .on-card { grid-template-columns: 52px 1fr; padding: 12px; }
  .on-ava { width: 52px; height: 52px; font-size: 24px; }
}