.alert{padding:10px 12px;border-radius:6px;margin:8px 0}
.alert-warning{background:#3b2f17;border:1px solid #a16207;color:#fde68a}
/* UFL Mini - Dark Theme */
:root{
  --bg:#0f1115; --panel:#151923; --muted:#98a2b3; --text:#e6e9ef;
  --accent:#ef4444; /* UFC red */
  --accent2:#22c55e; /* secondary green */
  --danger:#ef4444; --warn:#f59e0b; --cool:#60a5fa; --heal:#34d399; --dmg:#f87171;
  --border:#222838; --border-strong:#2b3246;
}
*{box-sizing:border-box}
body.dark{margin:0;background:radial-gradient(1200px 600px at 50% -10%, rgba(239,68,68,0.08), transparent 60%), var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0b0d12;border-bottom:1px solid var(--border);box-shadow:0 1px 0 0 #0a0c11}
.nav a{color:var(--text);text-decoration:none;margin-left:12px}
.nav .brand{font-weight:700}
.nav .nav-user{margin-right:8px;color:var(--muted)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:16px;position:relative}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),transparent 60%);border-top-left-radius:8px;border-top-right-radius:8px;opacity:.5}
.form label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form input,.form select,.form textarea{background:#0c0f16;border:1px solid var(--border);color:var(--text);padding:8px;border-radius:6px}
.form button,button{background:var(--accent);color:#08100a;border:0;border-radius:6px;padding:8px 12px;font-weight:700;cursor:pointer;letter-spacing:.3px;text-transform:uppercase}
.form button:hover,button:hover{filter:brightness(1.05)}
.flash{list-style:none;padding:0;margin:0 0 12px}
.flash li{padding:8px 10px;border-radius:6px;margin-bottom:6px;background:#0c1018;border:1px solid var(--border)}
.flash-success{border-color:#14532d}
.flash-error{border-color:#7f1d1d}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-2 .full-row{grid-column:1/-1}
.moves-list{display:flex;flex-direction:column;gap:8px}
.move-item{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:6px;background:#0b1220}
.move-item input[type="checkbox"]{margin-top:2px}
.move-item .move-details{display:flex;flex-direction:column;gap:2px}
.move-item .move-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.move-name{font-weight:700}
.move-meta{color:var(--muted);font-size:12px}
.move-desc{color:#cbd5e1;font-size:13px}
.move-actions form{margin:0}
.btn-small{padding:4px 8px;font-size:12px}
.btn-danger{background:#7f1d1d;border:1px solid #ef4444;color:#fee2e2}
.btn-danger:hover{background:#991b1b}
.tag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:11px;margin-left:6px}
.tag-default{background:#1e293b;color:#f1f5f9;border:1px solid #475569}
.tag-community{background:#0f172a;color:#c7d2fe;border:1px solid #4f46e5}
.avatar{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border);background:#0c1018}
.room-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.room-grid .chat{grid-column:1/-1}
.fighter-list{display:flex;flex-direction:column;gap:8px}
.fighter{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:6px;background:repeating-linear-gradient(135deg, rgba(96,165,250,0.04) 0 10px, transparent 10px 20px)}
.fighter.active{box-shadow:0 0 0 2px #1e293b inset;border-color:#334155}
.fighter .info .name{font-weight:700}
.fighter .bars{display:flex;gap:12px;color:var(--muted);font-size:12px}
.fighter .hpbar{position:relative;flex:1;min-width:140px;height:14px;background:repeating-linear-gradient(135deg, rgba(248,113,113,0.12) 0 8px, rgba(0,0,0,0.15) 8px 16px);border:1px solid var(--border-strong);border-radius:4px;overflow:hidden}
.fighter .hpbar .hpfill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg, rgba(239,68,68,0.85), rgba(180,30,30,0.85));box-shadow:inset 0 0 8px rgba(0,0,0,0.5)}
.fighter .hpbar.high .hpfill{background:linear-gradient(90deg, rgba(52,211,153,0.85), rgba(30,120,80,0.85))}
.fighter .hpbar.mid .hpfill{background:linear-gradient(90deg, rgba(245,158,11,0.9), rgba(180,110,10,0.9))}
.fighter .hpbar.low .hpfill{background:linear-gradient(90deg, rgba(239,68,68,0.9), rgba(160,30,30,0.9))}
.fighter .hpbar .hplabel{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#e5e7eb;text-shadow:0 1px 0 #000}
.fighter .status{font-size:12px;color:var(--muted)}
.fighter .status.unconscious{color:var(--warn)}
.fighter .status.dead{color:var(--danger)}
.prestart.hidden,.turn-panel.hidden{display:none}
/* Utility: hide elements by default when class="hidden" is present */
.hidden{display:none !important}
.moves{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.move-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#0e1420;border:1px solid var(--border);color:var(--text)}
.move-btn .name{font-weight:700}
.move-btn .meta{font-size:12px;color:var(--muted)}
.move-btn:disabled{opacity:.5;cursor:not-allowed}
.log{height:240px;overflow:auto;padding:6px;border:1px solid var(--border-strong);border-radius:8px;background:linear-gradient(180deg,#0b0f16,#0a0e15 60%, #0b0f16);font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12px}
.msg-card{border:1px solid var(--border);border-left-width:3px;border-radius:6px;padding:6px 8px;margin-bottom:6px;background:#0c1018}
.msg-card.system{border-left-color:#64748b}
.msg-card.chat{border-left-color:#60a5fa}
.msg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;color:#9aa3b2}
.msg-head .who{font-weight:700;letter-spacing:.2px}
.msg-head .ts{font-size:11px;opacity:.7}
.msg-body{color:#dbe3ee}
.msg-body .dmg{color:var(--dmg);font-weight:700}
.msg-body .heal{color:var(--heal);font-weight:700}
.msg-body .hit{color:var(--cool);font-weight:700}
.msg-body .miss{color:var(--warn);font-weight:700}
.msg-body .crit{color:var(--danger);font-weight:900;text-shadow:0 0 6px rgba(239,68,68,0.35)}
.chat-form{margin-top:8px;display:flex;gap:8px}
.chat-form input{flex:1;background:#0c0f16;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px}
.chat-form input::placeholder{color:#7a8596}
select, input, textarea{background:#0c0f16;color:var(--text);border:1px solid var(--border)}
select{border-radius:6px;padding:6px}
@media (max-width: 900px){.room-grid{grid-template-columns:1fr}}
label small { color: #ffffff75; }