/* Extracted from single-file version */
:root{ --panel: rgba(20,22,30,0.88); --text:#e7eaf1; --muted:#9aa0aa; --pc:#7dd3fc; --npc:#a78bfa; --monster:#fca5a5; --hl:#fde047; --dead:#ef4444; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:transparent; color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif; }
.wrapper{ width:100%; display:flex; justify-content:center; }
.panel{ margin:8px; padding:10px 12px; border-radius:14px; background:var(--panel); backdrop-filter: blur(6px); width: calc(100vw - 16px); max-width:none; }
.header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:6px; gap:8px; }
.h-title{ font-weight:700; letter-spacing:0.5px; }
.h-sub{ font-size:12px; color:var(--muted); }
.list{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; justify-content:flex-start; }

/* Status pill */
.statuspill{ font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); }
.statuspill.ok{ border-color:#14532d; background:#052e16; color:#bbf7d0; }
.statuspill.warn{ border-color:#334155; background:#0b1220; color:#e5e7eb; }
.statuspill.bad{ border-color:#7f1d1d; background:#1a0b0b; color:#fecaca; }

/* Vertical cards that flow left→right */
.row{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; border-radius:12px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); width: clamp(150px, 14vw, 220px); transition: width .15s ease, opacity .15s ease, transform .15s ease; }
.row.active{ outline:2px solid var(--hl); box-shadow:0 0 16px rgba(253,224,71,0.35) inset; }
.type-pc{ border-top:3px solid var(--pc); }
.type-npc{ border-top:3px solid var(--npc); }
.type-monster{ border-top:3px solid var(--monster); }

.portrait{ width:96px; height:96px; border-radius:12px; object-fit:cover; background:rgba(255,255,255,0.06); }
.noavatar{ width:96px; height:96px; border-radius:12px; background:rgba(255,255,255,0.06); }
.name{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.name .n{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 100%; }
.name .meta{ font-size:12px; color:var(--muted); }
.tags{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:2px; font-size:12px; }
.tag{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); }
.tag .ico_wrap{ width:16px; height:16px; border-radius:5px; overflow:hidden; background:#0b1220; display:inline-flex; }
.tag img.ico{ width:100%; height:100%; display:block; }
.concStar{ position:absolute; top:8px; right:8px; font-weight:700; filter: drop-shadow(0 0 6px rgba(253,224,71,0.6)); }

/* DEAD state */
.dead{ border-color: rgba(239,68,68,0.7); box-shadow: inset 0 0 0 2px rgba(239,68,68,0.35); }
.dead .portrait{ filter: grayscale(1) brightness(0.55); }
.deathBadge{ position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:999px; background:#7f1d1d; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:0 0 2px rgba(239,68,68,0.7), 0 2px 6px rgba(0,0,0,0.4); }
.dead .name .n{ text-decoration: line-through; opacity:0.7; }
.dead .tags{ opacity:0.7; }
/* Shrink mode for dead cards */
.shrunk{ width: clamp(120px, 11vw, 170px); opacity:.72; transform: scale(.95); }

.footer{ margin-top:6px; font-size:12px; color:var(--muted); display:flex; justify-content:space-between; }
.hideall{ display:none; }

/* --- overlay for auth/errors --- */
.overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:9999; }
.overlay.show{ display:flex; }
.overlay .box{ background:#0b0d12; color:#e9eef4; border:1px solid #293145; border-radius:12px; padding:16px; width:min(520px,92vw); }
.overlay .box h3{ margin:0 0 8px; font-size:18px; }
.overlay .box p{ margin:8px 0; color:#94a3b8; }
.overlay .row{ display:flex; gap:8px; align-items:center; margin-top:10px; }
.overlay input{ flex:1; padding:8px; border-radius:8px; border:1px solid #293145; background:#0d111a; color:#e9eef4; }
.overlay button{ padding:8px 10px; border-radius:10px; border:1px solid #334155; background:#111827; color:#e9eef4; cursor:pointer; }

@media (max-width: 740px){
  .list{ flex-direction:column; }
  .row{ width:auto; align-items:flex-start; }
  .name{ align-items:flex-start; text-align:left; }
}